/* YLE TV2 Viihde / Musiikki-tv */

body {font: normal 75% Arial,Helvetica,sans-serif; margin: 0; padding: 0; color: #000; background: #cecece url(../kuvat/body-back.gif) repeat-x top}
body.font-semi {font-size: 87%}
body.font-largest {font-size: 100%}

a {color: #014991}
a:hover {text-decoration: none}

h1 {font: bold 2.2em/1em Courier New,Georgia,American Typewriter,Arial,sans-serif; border-bottom: 1px solid #B5B5B5; color: #6a0030; margin: 13px 0 20px 0; padding: 0 0 5px 0}
h2 {font: bold 1.4em/1.1em Courier New,Georgia,American Typewriter,Arial,sans-serif; margin: 10px 0; color: #6a0030; clear: both}
h3 {font-size: 1.1em; margin: 10px 0; color: #000}
h4 {font-size: 1em; margin: 10px 20px; color: #000}

p {font-size: 1em; line-height: 1.3em}
.line {border-top: 4px solid #EDEDED; margin: 20px 0 0 0 !important; padding: 10px 0 0 0;}
.float-right {float: right}

.hide, hr {display: none}
.cutter {display: block; clear: both; border-bottom: 1px solid #D9DBCD; margin: 10px 20px 20px 20px;}
form {display: inline; margin: 0}
fieldset, img {border: none; margin: 0; padding: 0}
legend {display: none}

#page {width: 856px; margin: 0 auto;}

/* YLE BAR */

#ylefi-bar {height: 40px; background: url(../kuvat/ylefi_rightborder.gif) no-repeat 100% 2px}
#ylefi-bar a.logo {display: block; float: left; width: 83px; height: 40px; background: url(../kuvat/ylefi.gif) no-repeat; margin: 0}
#ylefi-bar a.logo:hover {background-image: url(../kuvat/ylefi_hover.gif)}
#ylefi-bar a span {display: none}
#ylefi-bar p {float: right; margin: 0 0 0 0; text-align: right; padding: 7px 20px 0 20px; background: url(../kuvat/a-o-cutter.gif) no-repeat left 12px}
#ylefi-bar p a {text-decoration: none; color: #333366; padding: 0 17px 0 20px; background: url(../kuvat/a-o-cutter.gif) no-repeat 0 50%; display: inline}
#ylefi-bar p a:hover {color: #003399;}

/* HEADER */

#header {overflow: hidden; background: #2A353B url(../kuvat/header.gif) repeat-x 0 0; width: 836px; padding: 0 20px 0 0;}
#header h1 {display: inline; float: left; margin: 0; border: none; padding: 0}
#header h1 a {display: block; height: 120px; width: 300px;}
#header h1 a span {display: none}
#header h5 {display: inline; float: right; margin: 0; border: none; padding: 0}
#header h5 a {display: block; height: 100px; width: 200px;}
#header h5 a span {display: none}

/* MAIN NAVIGATION */

#main-navi {overflow: hidden; background: #b0b0b0 url(../kuvat/header2.gif) no-repeat 0 0; width: 100%; height: 60px; clear: both; padding: 0;}
#main-navi p {float: right; margin: 12px 0 0 0; padding: 0 20px 0 0}
#main-navi p a {margin: 0 0 0 10px;}
#main-navi p img {vertical-align: bottom}
#main-navi a {color: #000; font-weight: bold; text-decoration: none}
#main-navi a.external {color: #fff}
#main-navi ul {margin: 0 50px 0 8px; padding: 0; list-style: none}
#main-navi li {float: right}
#main-navi ul a {float: left; display: block; background: url(../kuvat/separator.gif) no-repeat 0% 50%; line-height: 36px; padding: 0 11px; font-family: Courier New,Georgia,American Typewriter,Arial,sans-serif; font-weight: bold; font-size: 1em; text-decoration: none;}
#main-navi ul a.first {background-image: none}
#main-navi ul a.selected {background: #fafbf5; color: #e65c00; padding: 0 10px}
#main-navi ul a.external {background: url(../kuvat/separator_external.gif) no-repeat 0% 50%;}
#main-navi a:hover, #sec-navi a:hover {color: #618da7; text-decoration: underline}

/* CONTENT AREA */

#content {width: 100%; overflow: hidden; background: #FFF;}
#content-main {float: left; width: 520px; padding: 0 20px;}
#content-sec {float: left; width: 180px; padding: 0 20px 0 0; display: inline}

.img {border-bottom: 4px solid #618da7; margin: 0 0 20px 20px}
.img-demovideo {border-bottom: 4px solid #000; margin: 0 0 20px 20px}
.img img, .img-demovideo img {display: block}
p.details {background: #cbd4d9; margin: 5px 20px 10px 160px; padding: 2px 5px; width: 325px}

/* INDEX PAGE */

.indexInserts {float: left; width: 452px; padding: 0 0 0 20px; display: inline}
.index-inserts {background: #e7e7e7; border-collapse: collapse; margin: 0 0 20px 0;}
.index-inserts th {background: #fff; text-align: left; color: #6a0030; font-family: Courier New,Georgia,American Typewriter,Arial,sans-serif; font-size: 1.2em; padding: 0 0 10px 11px; border-bottom: 4px solid #6a0030}
.index-inserts td {vertical-align: top}
.index-inserts .image td {padding: 10px 0px 0px 11px;}
.index-inserts .img,.index-inserts .img-demovideo {float: none; display: block; width: 207px; border-width: 7px; margin: 0;}
.index-inserts h3 {font-size: 1.2em; line-height: 1.4em}
.index-inserts p.details {margin: 10px 0 0 10px; width: 197px; padding: 5px 5px; font-family: Courier New,Georgia,American Typewriter,Arial,sans-serif; font-weight: bold; color: #000;}
.index-inserts .text p {margin: 5px 0 0;}
.header {padding: 0 20px}
.text {padding: 0 20px 10px 20px}
.index-inserts a {color: #000;}

#index #content {border-top: 9px solid #FFF}
#index #content-main {width: 154px; padding: 0; margin: 0 0 0 10px; display: inline;}
#index #content-sec {float: right; padding: 0 20px 0 0; display: inline}
#index #content h1 {margin-top: 30px}
#index #content-main h2, #index #content-sec h2 {font-size: 1.2em; font-weight: bold; margin: 0 0 10px 0}
fieldset td {vertical-align: top}
fieldset th {text-align: left}
#index .themes {margin-bottom: 20px}

#index #content-main p {padding: 0; margin: 0}

#index #content-sec .search {margin-top: 0}

#guest {background: #618da7; width: 138px; padding: 0 8px 10px;}
#guest .img {border-bottom: 9px solid #000; margin-top: 10px; padding: 8px 0 0; margin: 0 0 10px;}
#guest .title {background: #ebf0f4; width: 128px; padding: 5px; margin: 0 0 5px;}
#guest p.arrows {margin: 0 8px;}
#guest a {color: #000; font-family: Courier New,Georgia,American Typewriter,Arial,sans-serif; font-weight: bold;}

.instructions {margin-bottom: 10px;}
.instructions {background: #e7e7e7; border-top: 3px solid #000; padding: 3px; color: #000; font-weight: bold;}
.instructions p {padding: 2px; margin: 0; font-size: 0.9em}

.videogradient {width: 180px; height: 50px; background: url(http://www.yle.fi/errorsivut/error.php?h=404) repeat-x top;}
.videos {margin-bottom: 10px;}
.videos a {color: #000;}
.videos p {padding: 0; margin: 3px;}
.video a {font-weight: bold; padding: 5px 30px 5px 0px; margin-left: 25px; line-height: 30px; background: url(../kuvat/play.gif) no-repeat 100% 2px}
.videos .arrows {font-weight: bold;}


/* Sub pages */

#content-subpage {border-left: 100px solid #618da7; border-right: 100px solid #618da7; padding: 5px 20px; height: 400px;}
#content > #content-subpage {height: auto; min-height: 400px}

.subpage-insert {background: #e7e7e7; border-top: 5px solid #6a0030; padding: 0 20px 1px;}
.subpage-insert2 {background: #e7e7e7; border-top: 5px solid #6a0030; padding: 0 20px 1px; height:750px;}

.feedback_textarea {width: 450px; height: 100px;}
.feedback_input {width: 450px;}

.gallery img {margin: 0 15px 15px 0;}
.gallery-big img {border-top: 5px solid #6a0030;}
.gallery-big div {text-align: center; color: #b0b0b0;}

/* Information bar */

#information-bar {clear: both; background: #6a0030; height: 25px; width: 100%; color: #F5FAFF; line-height: 25px; font-family: Courier New,Georgia,American Typewriter,Arial,sans-serif; font-weight: bold; text-align: center;}
#content > #information-bar {height: auto;}
#information-bar:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#information-bar ul {margin: 0 20px; padding: 0; list-style: none}
#information-bar li {margin: 0 10px 0 0; padding: 0 10px 0 0}
#information-bar a {color: #F5FAFF; text-decoration: none}
#information-bar a:hover {text-decoration: underline}

/* Footer */

#footer {height: 130px; background: #FFF url(../kuvat/iso-yle.gif) no-repeat 50% 92px; text-align: center}
.contact {width: 816px; padding: 0.5em 1em; margin: 0 auto; overflow: hidden; text-align: left;}
.org {text-transform: uppercase;}
.responsible {float: right; margin: -1.5em 0 0 0;}
.vcard {font-size: .9em; font-family: Tahoma,Arial,sans-serif; border-bottom: 4px solid #CCC; padding: 20px 20px;}

/* Sisältö */
.sisalto {margin-bottom: 10px;}
.sisalto td, th {text-align: left; vertical-align: top;}
.sisalto tr.odd {background-color: #ffe;}
.sisalto tr.even {background-color: #eee;}
.sisalto td {border: 1px solid #ddd;}