/*

-----------------------------

Yle.fi - yle_global.css
required css file
media = all

Related files: 
yle_global_print.css
yle_global_contrast.css

-----------------------------

*/


/* == common elements == */
body {background: #fff; color: #000; margin: 0 auto; padding: 0; height: 100%; font: 75%/1.419em Arial, Helvetica, Geneva, sans-serif;}
body.negative {background: #000; color: #fff;}

/* === base fontsizes for content defined. body classnames === */
.font-xsmall {font-size: 55%; line-height: 1.149em;}
.font-small {font-size: 65%; line-height: 1.277em;}
.font-medium {font-size: 75%; line-height: 1.419em;}
.font-large {font-size: 95%; line-height: 1.702em;}
.font-xlarge {font-size: 115%; line-height: 2.042em;}
.font-xxlarge {font-size: 135%; line-height: 2.451em;}

input, select, textarea {font: 1em Arial, Helvetica, Geneva, sans-serif;}
input[type="hidden"] {display:none; border:none;}
code {font: 1.2em "courier new", monospace;}

form, fieldset, div {margin: 0; padding: 0;}

/* margins and line-heigts for content */
h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}

h1, h2, h3, .separator {border-bottom: 1px solid #ccc;}
.no-separator {border-bottom:0;}

h1 {margin-bottom: 0.615em; padding-bottom: 0.308em;}
h1.no-separator {margin-bottom: 0.922em; padding-top: 0.154em;}

h2{margin-bottom: 0.889em; padding-bottom: 0.444em;} 
h2.no-separator {margin-bottom: 1.334em; padding-top: 0.222em;}

h3 {margin-bottom: 1.143em; padding-bottom: 0.570em;} 
h3.no-separator {margin-bottom: 1.714em; padding-top: 0.285em;}

h1 {font: normal 2.165em/1.078em "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;}
h2 {font-size: 1.5em; line-height: 1.165em; font-weight: normal;}
h3 {font-size: 1.165em; line-height: 1.285em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1.0em;}
h6 {font-size: 1em;}

p, pre, blockquote, ul, ol, dl, address, code, fieldset, table {margin:0 0 1.665em 0; padding: 0;}

p {margin: 0 0 1.665em 0;}

ul, ol {list-style:none; overflow:hidden;}
ul:after, ol:after, .clearfix:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
li, dd, blockquote {margin:0; padding:0;}
.grid ul {list-style: disc;}
.grid li, .grid dd, .grid blockquote {margin-left: 20px;}

form label, a span {cursor: pointer;}

a, a:link {color: #039;}
a:visited {}
a:hover {cursor:pointer;}
a:active {color: #039;}

a img, :link img, :visited img, fieldset {border:0;}
address, abbr {font-style:normal;}

table {width: 100%; border-collapse: collapse;}
td, th, caption {text-align: left; vertical-align: top;}

img {display: block;}
.hide {position: absolute; left: -9999px; top: 0;}

button {overflow:visible; width:auto;} //IE6 fix, to avoid extra paddings
button:hover {cursor:pointer;}

/* == layout framework == */

/* === content before global footer this contols the main background for the site === */
#site {position: relative; background: #fff; width: 100%; padding-bottom: 20px;}
body.negative #site {background-color: #000;}

/* === pages and gutterpages === */
/* primary class */
.page {width: 960px; position: relative; margin: 0 auto; background: #fff;}
body.negative .page {background-color: #000;}
/* secondary class */

/*=== ohjelmaopas site minimi korkeus === */
/*#site .content {min-height:100px;}
*html #site .content{height:100px;}  muille kuin IE6:lle */

.gutter {width: 920px; padding: 0 20px;}

/* == local page heading == */
.heading {position: relative; overflow: hidden; height: 100px; min-height: 100px; clear: both;}
*[class~="heading"] {height: auto;}

.heading h2 {margin:0; padding:0; border: 0;} 
.heading h3 {display: none;}

/* === introduction === */
.introduction {padding: 0 20px}

/* === site tools ===  */
#tools {padding: 5px 0; width: 100%; overflow: hidden;}
#tools li {display: inline; list-style: none; float: right; margin-right: 20px;}
#tools li#svenska {float: left; margin-left: 20px;}

#tools li strong {float: left; font-weight: normal;}
.text-size {display: block; width: 1em; height: 1.5em; float: left; margin-left: 0.5em; border: 1px solid #000; text-align: center; padding: 0 5px; text-decoration: none;}

/* == local navigation area == */
.local-header {width: 100%; overflow: hidden;}
.local-header ul {padding: 0 10px; margin:0;}
.local-header li {float: left;}
.local-header li a {display: block; padding: 10px;}

/* == document path == */
.path {margin: 0; padding: 10px 20px;}
.path em {font-style: normal;}

/* == content area == */
.grid {width: 100%; position: relative; clear: both; overflow: hidden;}
.content {position: relative; display: inline; float: left; padding: 20px 10px;}
.content .grid {display: inline; float: left; width: auto; margin: 0 -10px -20px;}
.content .grid .content {padding:0 10px 10px 10px;}
.content div[class~="grid"] {float: none; display: block;} 


/* === global grids defined === */
.fragment1 {padding-left: 20px;} 

	/* solid background variation */
	.no-gutter .fragment1 {padding-left: 0;}

/* ==== grids based on 1 column ==== */
.col1-grid1 .content {width: 920px; padding: 20px;}
.col1-grid1 .content.second {padding-top: 0;}
	.col1-grid1 .fragment1-1 {width: 620px;}
	.col1-grid1 .fragment1-2 {width: 260px;}

	/* solid background variation */
	.no-gutter .col1-grid1 .content {width: 960px; padding: 20px 0;}



/* ==== grids based on 2 main columns ==== */

/* basic 2 column layout with a narrow left column and a centered content area */
.col2-grid1 .fragment1 {width: 180px;}
.col2-grid1 .fragment2 {width: 500px; margin-left: 110px;}

	/* solid background variation */
	.no-gutter .col2-grid1 .fragment1 {width: 200px;}
	.no-gutter .col2-grid1 .fragment2 {margin-left: 120px;}

/* 2 column layout where first column is divided to 2 columns */
.col2-grid2 .fragment1 {width: 640px;}
	.col2-grid2 .fragment1-1,
	.col2-grid2 .fragment1-2 {width: 310px;}
.col2-grid2 .fragment2 {width: 260px;}

	/* solid background variation */
	.no-gutter .col2-grid2 .fragment2 {width: 300px; padding-right:0;}

/* variation of previous layout where the divided column widths are different */
.col2-grid3 .fragment1 {width: 640px;}
	.col2-grid3 .fragment1-1 {width: 360px;}
	.col2-grid3 .fragment1-2 {width: 260px;}
.col2-grid3 .fragment2 {width: 260px;}

	/* solid background variation */
	.no-gutter .col2-grid3 .fragment2 {width: 300px; padding-right:0;}

/*  */
.col2-grid4 .fragment1 {width: 180px;}
.col2-grid4 .fragment2 {width: 720px; padding-right: 20px; }

	/* solid background variation */
	.no-gutter .col2-grid4 .fragment1 {width: 200px;}
	.no-gutter .col2-grid4 .fragment2 {width: 740px; padding-right:0;}
	
/*  */
.col2-grid5 .fragment1 {width: 720px;}
.col2-grid5 .fragment2 {width: 180px; padding-right: 20px;}

	/* solid background variation */
	.no-gutter .col2-grid5 .fragment1 {width: 740px;}
	.no-gutter .col2-grid5 .fragment2 {width: 200px; padding-right:0;}


/*  */
.col2-grid6 .fragment1 {width: 580px;}
	.col2-grid6 .fragment1-1 {width: 180px;}
	.col2-grid6 .fragment1-2 {width: 380px;}
.col2-grid6 .fragment2 {width: 320px; padding-right: 0;}

/* */
.col2-grid7 .fragment1 {width: 180px; border: 1px solid #ff0000;}
.col2-grid7 .fragment2 {width: 600px; padding-right: 20px; border: 1px solid #000;}

/* ==== grids based on 3 main columns ==== */

/* basic 3 column layout and a variation with middle column diveded into 2 column */
.col3-grid1 .fragment1 {width: 180px;}
.col3-grid1 .fragment2 {width: 500px;}
	.col3-grid1 .fragment2-1,
	.col3-grid1 .fragment2-2 {width: 240px;}
.col3-grid1 .fragment3 {width: 200px; padding-right: 20px;}

	/* solid background variation */
	.no-gutter .col3-grid1 .fragment1 {width: 200px;}
	.no-gutter .col3-grid1 .fragment3 {width: 220px; padding-right: 0;}

/* 3 columns variation where the middle column in indented */
.col3-grid2 .fragment1 {width: 180px;}
.col3-grid2 .fragment2 {width: 460px; padding: 40px 30px;}
	.col3-grid2 .fragment2-1,
	.col3-grid2 .fragment2-2 {width: 220px;}
.col3-grid2 .fragment3 {width: 200px; padding-right: 20px;}

	/* solid background variation */
	.no-gutter .col3-grid2 .fragment1 {width: 200px;}
	.no-gutter .col3-grid2 .fragment3 {width: 220px; padding-right: 0;}

/* 3 columns variation where the first column is the widest also a variation with the first column diveded into 2 column */
.col3-grid3 .fragment1 {width: 500px;}
	.col3-grid3 .fragment1-1,
	.col3-grid3 .fragment1-2 {width: 240px;}
.col3-grid3 .fragment2 {width: 200px;}
.col3-grid3 .fragment3 {width: 180px; padding-right: 20px;}

	/* solid background variation */
	.no-gutter .col3-grid3 .fragment2 {width: 220px;}
	.no-gutter .col3-grid3 .fragment3 {width: 200px; padding-right: 0;}



/* ==== grids based on 4 main columns ==== */
.col4-grid1 .fragment1 {width: 215px;}
.col4-grid1 .fragment2 {width: 215px;}
.col4-grid1 .fragment3 {width: 215px;}
.col4-grid1 .fragment4 {width: 215px; padding-right: 20px;}

	/* solid background variation */
	.no-gutter .col4-grid1 .fragment1 {width: 225px;}
	.no-gutter .col4-grid1 .fragment2 {width: 225px;}
	.no-gutter .col4-grid1 .fragment3 {width: 225px;}
	.no-gutter .col4-grid1 .fragment4 {width: 225px; padding-right: 0;}


/* == local footer == */
.local-footer {width: 100%; overflow: hidden;}
.local-footer ul {padding: 0 10px; margin:0;}
.local-footer li {float: left;}
.local-footer li a {display: block; padding: 10px;}

/* == global content element properties == */

/* === generic column elements for grids === */
.col {margin-right: 1%;}

.col2 {}
.col2 .col {width: 48%;}

.col3 {}
.col3 .col {width: 32%;}

.col4 {}
.col4 .col {width: 24%;}

/* === inserts === */
.insert {position: relative; margin: 0; clear: both; height: 1%; display:block;}
.insert:after{content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden;} 
*[class~="insert"]{height: auto;}

/* content images are marked with a bottom border except for banners */
.insert img {position: relative; margin-bottom: 1.665em; padding-bottom: 1px; border-bottom:4px solid #ccc;}

/* === tns metrix === */
#tns-wrapper div,
#tns-wrapper img {position:absolute; z-index:10; top:0px; right:0px; width:0px; height:0px; visibility:hidden; border:none; margin:0; padding:0;}

/*== Global Header ==*/
#global-header {background-color:#E4E4E4;font-family:Arial;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;}
#global-header a {font-family:Arial;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;}
#global-header #navigation form, #global-header #navigation fieldset, #global-header #navigation label, #global-header #navigation input, #global-header #navigation select, #global-header #navigation button, #global-header #navigation h1, #global-header #navigation h6, #global-header #navigation h3 {border:0pt none;margin:0pt;padding:0pt;}
#global-header #navigation {border-bottom:1px solid #D8E2CA;height:71px;margin:0pt auto;overflow:hidden;padding:0pt 20px;width:935px;}
#global-header #navigation h6 {clear:none;float:left;margin:12px 25px 0pt 6px;padding:0pt;}
#global-header #navigation h6 a {display:block;height:30px;width:88px;}
#global-header #navigation h6 span {display:none;}
#global-header #navigation li {list-style-position:outside;list-style-type:none;}
#global-header #navigation legend {display:none;}
#global-header #navigation label {clear:none;display:inline;font-weight:bold;}
#global-header #navigation input {padding:2px 3px;}
#global-header #navigation input[type="hidden"] {display:none;}
#global-header #navigation select {font-size:11px;padding:2px 10px;}
#global-header #navigation button {border:0pt none;font-size:11px;}
#global-header #search {float:right;height:46px;margin-left:2px;margin-top:6px;padding:0pt 8px 0pt 0pt;text-align:right;width:394px;}
#global-header #search input {background:#FFFFFF url(../img_ylefiglobal/google_custom_search_watermark.gif) no-repeat scroll 2px;height:18px;margin:0pt 5px 2px 1px;padding:0pt 5px;width:100px;}
#global-header #search select {padding:2px 2px 2px 0pt;width:180px;}
#global-header #search option {margin:5px 3px 2px;}
#global-header #search .ylefi-search {float:right;padding:0pt 17px;}
* html #global-header #search .ylefi-search {width:182px;}
#global-header #search .ylefi-search button {height:18px;padding:0pt 2px;}
#global-header #search #content-shortcuts label {display:none;}
#global-header #search #content-shortcuts optgroup {border-bottom:1px solid #E4E4E4;margin-bottom:10px;margin-left:-2px;padding-bottom:10px;}
#global-header #search #content-shortcuts button {background-color:#183762;height:20px;margin-right:-8px;padding:0pt 0pt 2px;}
#global-header #search #shortcuts {background:#FFFFFF none repeat scroll 0%;float:left;margin-left:34px;width:126px;}
#global-header #search #shortcuts select {background:#FFFFFF none repeat scroll 0%;}
#global-header #search #shortcuts option {background:#FFFFFF none repeat scroll 0%;}
#global-header #search #shortcuts optgroup {background:#FFFFFF none repeat scroll 0%;}
#global-header #search fieldset input {width:95px;}
* html #global-header #search #content-shortcuts button {padding-right:8px;}
* html #global-header #search #shortcuts {width:113px;}
* html #global-header #search .ylefi-search fieldset {vertical-align:middle;}
#global-header #sections {float:left;font-weight:bold;margin:24px 0pt 0pt -18px;padding:0pt;text-transform:uppercase;width:420px;}
#global-header #sections li {display:inline;}
#global-header #sections a {font-weight:bold;}
#global-header #sections .first a {padding-left:0pt;}
#global-header #sections .last {background-image:none;}
#global-header #sections a {padding:0pt;text-decoration:none;}
#global-header #ylefi-account {clear:both;display:block;height:25px;margin-left:7px;}
#global-header #ylefi-account ul {display:block;padding:0pt;}
#global-header #ylefi-account li {background:transparent url(../img_ylefiglobal/frontpage-icons.gif) no-repeat scroll 0pt -1640px;}
#global-header #ylefi-account li {display:inline;height:1%;list-style-type:none;margin:0pt 14px 0pt 0pt;padding:0pt 0pt 0pt 8px;}
#global-header #ylefi-account a {margin:0pt;text-decoration:none;}
#global-header #ylefi-account ul {float:left;margin:0pt;overflow:hidden;width:625px;}
#global-header #ylefi-account-login-wrapper {line-height:28px;}
#global-header #ylefi-account-login-wrapper .logout {padding-left:10px;}
#global-header #ylefi-account-login {float:left;font-size:11px;margin-left:40px;width:285px;}
#global-header #ylefi-account-login legend {display:none;}
#global-header #ylefi-account-login input {height:14px;padding:1px 3px;width:90px;}
#global-header #ylefi-account-login label {color:#AEAEAE;left:3px;position:absolute;top:0pt;z-index:2;}
#global-header #ylefi-account #ylefi-account-login button:active {background-color:#333333;}
#global-header #ylefi-account-login .description {display:block;float:left;overflow:hidden;width:40px;}
#global-header #ylefi-account-login fieldset div {float:left;position:relative;width:103px;}
#global-header #sections li {border-right:2px solid #FFFFFF;display:block;float:left;height:15px;margin:0pt;padding:0pt 9px;}
#global-header #sections li a {display:block;}
#global-header #sections li.index {border-right:0pt none;}
#global-header {background:#77B61C url(../img_staticylefi/global_header_background.jpg) repeat-x scroll center 0pt;}
#navigation h6 {background:transparent url(../img_staticylefi/ylefi_logo.gif) no-repeat scroll 0pt;}
#navigation button {background-color:#F0AC1D;color:#FFFFFF;}
#search {background:transparent url(../img_staticylefi/global_header_search_background.gif) no-repeat scroll right 0pt;color:#FFFFFF;}
#sections a {color:#010000;}
#sections .selected a {color:#FFFFFF;}
#sections a:hover {color:#FFFFFF;}
#ylefi-account a {color:#000000;}
#account-login input {color:#767676;}
#global-header #ylefi-account #ylefi-account-login button {background-color:#77B61C;}
#global-header #ylefi-account #ylefi-account-login button:active {background-color:#183762;}
/*==// Global Header ==*/

/*== Global Footer ==*/
/* == global footer - contact info == */
#global-footer, #global-footer a {font: 11px Arial, Helvetica, Geneva, sans-serif;}
#global-footer {width: 100%; background: #fff;padding-top:20px;}
body.negative #global-footer {background-color: #000;}
#global-footer div {width: 960px; margin: 0 auto; padding: 10px 0 40px 0;background: transparent url(../img_ylefiglobal/yle_logo.gif) no-repeat 870px 15px;}
*[class~="global-footer"], *[class~="global-footer"] div {height: auto;}
body.negative #global-footer div {background-image: url(../img_ylefiglobal/yle_logo-negative.gif);}

#global-footer .contact {position: relative; width: 920px; margin: 0 auto 5px auto;  clear: both; overflow: hidden;}
#global-footer .fn.org {text-transform:uppercase;}
#global-footer  ul {margin:0;padding:0 0 0 20px;}

#global-footer .about-yle li {background:transparent url(../img_ylefiglobal/frontpage-icons.gif) no-repeat scroll 0pt -1580px;}
#global-footer  .about-yle li {display: inline;height:1%;list-style-type:none;margin:0pt 10px 0pt 0pt;padding:0pt 0pt 0pt 8px;}

#global-footer  a {font-weight: bold; text-decoration: none;color:#183762;}
#global-footer address {font-style:normal;}
/* ==/ global footer - contact info == *//* |YLE| Uudetpalvelut theme 02 */

/*== Global Footer Theme ==*/
#global-footer div {border-top: 5px solid #183763;}
#global-footer a:hover {color: #29A8DB;}
/*==// Global Footer Theme ==*/