@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);

body                        { background-color: #f3f3f3; font-size: 18px; line-height: 26px; }

p, ul, .embed               { margin: 0 0 20px; }
ul li                       { padding: 0; border-bottom: 0; }

img                         { max-width: 100% !important; }

p.georgia, .georgia,
.thumbnail h1               { font: normal 400 14px Georgia, serif; text-transform: uppercase; }

.navbar                     { border-radius: 0; }

.jumbotron                  { position: relative; width: 100%; height: 490px; background-image: none; background-color: #99cc33; background-repeat: no-repeat; background-position: 50% 0%; }
.jumbotron .mask 			{ position: absolute; bottom: 0; background: url(../img/articles/jumbotron-mask.png) 50% 100% no-repeat; width: 100%; height: 24px; }
.jumbotron .container       { position: absolute; bottom: 70px; left: 0; right: 0; }
.jumbotron h1               { font-size: 66px; color: white; text-shadow: 4px 7px rgba(0,0,0,0.7); margin-top: 10px; width: 100%; word-break: break-word; background-color: transparent; font-weight: 600; }
.jumbotron .georgia,
.jumbotron h1 small         { color: white; text-shadow: 2px 2px rgba(0,0,0,0.33); }
.jumbotron h1 small         { font-size: 36px; margin-top: 10px; padding-top: 30px; border-top: solid 1px white; }
#author-date                { word-spacing: 6px; }

h2, h3                      { display: block; }

h2                          { font-size: 36px; line-height: 58px; }
h3                          { color: #88b927; font-family: Georgia, serif; font-weight: normal; font-size: 40px; line-height: 1em; margin: 50px 0 30px; }
h4 							{ color: #333; margin: 40px 0 20px; }
.row                        { margin: 40px 0; }
.row.jumbotron-mask         { height: 24px; margin-top: 460px; margin-bottom: 0; background-color: transparent; background-position: center top; background-repeat: no-repeat; background-image: url(../img/articles/jumbotron-mask.png); }
.row.share-links            { font-size: 16px; margin-top: 0; }
.row.share-links ul         { margin-bottom: 0; }

/* artikkelitekstit */

.article-lead               { font-style: italic; }
.main-story                 { background-color: #f3f3f3; overflow: auto; }
iframe.yle-iframe           { min-height: 3700px; }
.article-text > p > img     { width: 100%; }

/* videot ja musiikit */

audio#audio                 { position: fixed; top: 105px; right: 20px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.play-list                  { font-size: 14px; width: 300px; border: 0; -webkit-border-radius: 5px; padding: 7px; z-index: 2; background-color: rgba(0,0,0,0.7); background-image: none; color: #f2f2f2; text-shadow: none; line-height: 0.9; }
#audio-playlist             { position: fixed; top: 137px; right: 20px; z-index: 2; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } 
#playlist.dropdown-menu     { top: 30px; right: 0; left: auto; width: 300px; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  /* IE hack */
#audio-playlist             { position: fixed; top: 180px; } 
}
audio#audio.audio-top       { top: 20px; }
#audio-playlist.audio-top   { top: 50px; }

.video-iframe               { width: 730px; max-width: 100%; height: 520px; overflow: hidden; }

/* sitaatit */

blockquote                  { border: 0; float: right; width: 33%; font-size: 20px; font-weight: 300; font-style: italic; margin: 0 0 60px 60px; }
blockquote p                { margin-bottom: 10px; }

/* factbox & side poll */

.infobox                    { background: white; display: table; position: relative; padding-top: 10px; padding-bottom: 10px; }
.infobox img                { margin-bottom: 20px; }
.infobox h1, #poll h1       { display: inline-block; font-size: 20px; font-weight: 400; text-transform: none; color: white; background-color: #333; padding: 7px 30px 9px 15px; position: relative; margin-left: -10px; margin-bottom: 30px; }
.infobox h4                 { color: #32322f; margin: 30px 20px 20px; }
.infobox p                  { margin-left: 20px; margin-right: 20px; }
.infobox p:empty            { display: none; }
.infobox ul                 { width: 100%; }
.infobox ul.side            { float: left; width: 50%; }
.infobox ul li              { padding: 10px 15px 10px 0; }
.infobox section.thumbnail 	{ margin-bottom: 20px; }

#poll 						{ float: right; width: 250px; margin: 0 0 20px 30px; background-color: #259faa; color: #fff; }
#poll h1       				{ margin-bottom: 20px; }
#poll h2       				{ font-size: 18px; font-weight: 500; text-transform: none; line-height: 1; padding: 0 15px; margin: 0 0 15px; color: #fff; }

/* pikkukuvat */

section.thumbnail           { position: relative; display: table; box-shadow: none; border: 0; background-color: transparent; margin: 0 0 40px; padding: 0; }
section.thumbnail h1        { font-size: 22px; font-weight: 700; text-transform: none; margin: 0 0 30px; }

/* author */
.author-avatar              {margin-bottom: 20px; }

/* Youtube-upotukset */
.youtube 					{ width: 100% !important; height: auto !important; }

/* Special tapaukset */ 

/* myyttitesti */
body#article-122475 .jumbotron  { height: 395px; }
body#article-122475 .row.jumbotron-mask { margin-top: 280px; }
body#article-122475 .article-lead { text-align: center; }
body#article-122475 .jumbotron .georgia,
body#article-122475 .author,
body#article-122475 #share-article { display: none; }

/* sanaväripeli-kohtaiset tyylit */
body.test                   { background: #fff url(../img/varisanatesti-background.jpg ) repeat-x scroll 50% 0 / contain; }
.test .navbar               { border-bottom: solid 1px #cfcfcf; }
.test .main-test            { position: relative; overflow: auto; }
.test h1                    { font-size: 45px; color: #666; }
.test h3                    { font-size: 28px; line-height: 36px; }
.test .main-test a          { color: #259FAA; }
.test hr                    { border: 0; height: 1px; background: #666; width: 60%; }
.test .row.share-links      { margin-top: 40px; margin-bottom: 20px; }
.test .row.share-links ul   { margin-bottom: 0; }
.test #share-article        { display: none; }
.test #read-also            { margin-bottom:  70px; }

@media only screen and (max-width: 959px ) {  

.jumbotron .container       { width: 100%; bottom: 50px; }
.jumbotron h1               { font-size: 60px; }
.jumbotron h1 small         { font-size: 32px; }
h3                          { font-size: 36px; }

}

@media only screen and (max-width: 767px ) {  

p:last-child                { margin-bottom: 0; }
.jumbotron h1               { font-size: 48px; }
.jumbotron h1 small         { font-size: 30px; }
h3                          { font-size: 30px; }
.infobox ul.side            { float: none; width: 100%; }
.list-item                  { margin-bottom: 60px; }
section.thumbnail h1        { font-size: 20px; margin: 20px 0; }
.infobox,
.infobox section.thumbnail 	{ display: block; }

}

@media only screen and (max-width: 599px ) {  

.row                        { margin: 30px 0; }
.jumbotron 					{ background-position: 50% 0; position: relative; height: 530px; }
.jumbotron h1               { font-size: 42px; }
.jumbotron h1 small         { font-size: 28px; line-height: 1em; }
.row.jumbotron-mask 		{ margin-top: -25px; }
h3                          { font-size: 28px; margin: 40px 0 30px; }
h3:first-of-type            { margin-top: 0; }
body                        { font-size: 16px; line-height: 24px; }
blockquote                  { float: none; margin: 40px 0; padding: 0; width: 100%; }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width: 599px ) {  /* IE hack */
#audio-playlist             { position: fixed; top: 160px; } 
}

@media only screen and (max-width: 479px) {

.row.share-links 			{ font-size: 14px; }
.jumbotron h1               { font-size: 36px; }
h2                          { font-size: 30px; line-height: 40px; }
h3                          { font-size: 32px; line-height: 1em; margin: 40px 0 20px; }
h4                          { font-size: 22px; line-height: 28px; }
.main-story .container 		{ padding-left: 0; padding-right: 0; }
#poll 						{ float: none; width: 100%; margin: 0 0 20px; }
#poll .esi-vis .choises_container { padding-bottom: 10px; }

}