/*

-----------------------------
Yle Vaalit2008 - Local site style definitions
file: yle_local_vaalit2008.css
required css file
media = screen

Global Yle.fi definitions inherited from:
../css/yle_global.css
-----------------------------

*/

/* === Common === */

#site {background: #ebebeb}
.page {background: none}
.grid {background: #FFF}
table {border-collapse: collapse}

h1 {border: none; background: #f4f4f4; margin: 0; padding: 20px}
h2, .insert img {border: none}
h2 {margin: 0}
img.info {display: inline; position: absolute; cursor: pointer; margin: 0 0 0 5px}
.description {clear: both; width: 300px; background: #F5F5F5; border: 1px solid #b7b3b1; position: absolute; top:50px; left:0px; z-index:2; padding: 10px; margin: 0 0 0 20px;}

/* === Local footer === */

.local-footer {background: #a5a09d; color: #fff}
.local-footer a {color: #fff}
.local-footer li span {display: block; padding: 10px}

/* === Election areas === */

.electionareas {margin: 20px 0 0 0; padding: 0; list-style: none !important; color: #336792;}
.electionareas li {margin: 0}
.electionareas li li {margin: 0 0 0 20px; list-style: square;}
.electionareas a {color: #004276 !important}
.electionareas a:hover {text-decoration: none}
li.all {margin: 15px 0 0 15px; list-style: square;}
.electionareas ul {list-style: square !important; font-weight: normal}
.provinces {margin: 15px 0 0 0; padding: 0;}
.provinces li {list-style: square; margin: 0 0 0 15px}

/* === Site navigation === */

.heading {height: 70px; min-height: 70px;}
.page {background: url(../img/heading.gif) no-repeat 0 0}
.local-header {padding-right: 0; background: none}
.local-header ul {width: 100%; overflow: hidden; background: #746c6a url(../img/menu.gif) no-repeat; padding: 0 0 0 220px; margin: 0;}
.local-header li {border-right: 1px solid #FFF; color: #004075; font-weight: bold; padding: 6px 10px;}
.local-header li.empty {border-right: none;}
.local-header a {text-decoration: none; color: #fff !important; padding: 0px !important}
.last {border-right: 1px solid #FFF}
.local-header a:hover {text-decoration: underline}

/* === Additional grid === */

.content {padding: 20px 0 20px 20px}
.fragment1 {padding-top: 20px}
.fragment3 {width:740px; padding-right: 0;}

/* === Tabs === */

.tabs {width: 100%; overflow: hidden; background: #e6e4e5; margin: 0 0 0 0}
.tabs ul {margin: 0; overflow: hidden; padding: 0; list-style: none !important}
.tabs li {float: left; padding: 5px 10px; margin: 0; border-right: #fff solid 1px}
.tabs li.empty {border-right: none}
.tabs a {text-decoration: none;  color: #004276 !important}
.tabs a:hover {text-decoration: underline}

li.tabinfo {border: none}
li.tabresults {background: #3a302e; width: 190px; padding-left: 20px; border: none;}
li.tabresults a {color: #fff !important; font-weight: bold; text-decoration: underline;}
li.tabprediction {background: #327600 !important; border: none; position: relative; float: right}
li.tabprediction a {color: #FFF !important}

/* === Counting information === */

img.chart {float: right; margin: 0 10px 20px 0} .insert > img.chart {margin-right: 20px;}

.countinginformation {float: left; display: inline; margin: 0 20px 0 0; padding-bottom: 20px; /*border: #000 solid 1px*/}
.countinginformation table {float: left; width: 350px; margin: 0;}
.countinginformation table.right {margin-left: 20px;}
.countinginformation table th {font-weight: normal; text-align: left}
.countinginformation table .hl {color: #888}
.countinginformation table td {text-align: right}

/* === Results tables === */

.result, .result2 {clear: both; /*margin-top: 20px;*/ border-bottom: 2px solid #b7b3b1; width: 720px;}
.result td {text-align: right; padding: 3px 10px}
.result th, .result2 th {text-align: right; background: #d5d3d1; padding: 3px 10px; border-bottom: 1px solid #f8f8f8}
th.separatecolumn {background: #cbc9c7; border-bottom: 1px solid #e8e7e6}

.result2 td {padding: 3px 10px}
.result2 th {text-align: left;}
.small {font-size: .8em}
.small td, .small th {padding: 3px 2px}

tbody.passed {border-bottom: 2px solid #000;}
tbody.passed tr.odd {background: #e4e5cc}
tbody.passed tr.even {background: #c8c8af}

td.alignleft, th.alignleft {text-align: left}
th.aligncenter {text-align: center}
td.alignright, th.alignright {text-align: right}
.votes {white-space: nowrap}

.headerrow th {background: #b7b3b1; border-bottom: 1px solid #f8f8f8}
.odd {background: #eae9e8} .odd .separatecolumn {background:#dbdad9}
.even {background: #f8f8f8} .even  .separatecolumn {background:#e8e7e6}
.result tr:hover, .result2 tr:hover, tr.even:hover  .separatecolumn, tr.odd:hover  .separatecolumn, tbody.passed tr.odd:hover td, tbody.passed tr.even:hover td {background: #c8c6c7}

tbody.others {font-size: 0.9em;}
tbody.others td {padding-left: 10px !important;}

.areacode {padding-right: 5px !important;}

/* === Prediction === */

.prediction th {background: #327600; color: #fff;}
div.prediction {margin: 27px 0 0 0}
.insert {position: static}

/* === Communities === */

.communities ul {width: 700px; list-style: none; font-weight: bold; margin: 0 0 20px 0; padding: 0 20px; background: #e6e4e5; overflow: hidden}
.communities li {float: left; margin: 0}
.communities a {display: block; padding: 10px 0; width: 30px; text-align: center; text-decoration: none;}
.communities a:hover {background: #b7b3b1; color: #FFF}
.all a {width: 22px}

.communitieslist h3 {background: #f1f0ef; color: #004075; padding: 10px 20px; border: none; clear: both; margin: 10px 20px 10px 0;}
.communitieslist ul {width: 200px; list-style: square; color: #004890; margin: 0 0 0 10px; padding: 10px 20px}
.communitieslist li {margin: 0;}
.communitieslist a {color: #004276; margin: 0}
.communitieslist h3 a {float: right; margin: 0 10px 0 0}

/* === Parties === */

.parties li {list-style: square; color: #004890}
.parties a, .partieslist a {color: #004276 !important}
.partieslist {margin: 0 20px 0 0; width: 720px}
.partieslist th {background: #f1f0ef; padding: 5px 10px}
.partieslist td {padding: 5px 10px}

/* === Candidates === */

.candidate-page, .candidate-page .page {width: 100%}
.candidate-page #navigation {width: 100%}
.candidate-page #tools {padding: 0}
.candidate-page #tools li {margin: 0 10px 0 0}
.candidate-page #tools a {color: #000; font-size: 0.9em;}
.candidate-page .site {width: 100%}
.candidate-page .heading {height: 74px; min-height: 60px}
.introduction {display: none} 
.candidate-page .result {width: 100%}
.candidate-page .content {padding: 10px}
.candidate-page h2 {font-size: 1.1em; font-weight: bold; border: none; margin: 5px 0 0 0; clear: both}
.candidate-page h3 {font-size: 1.1em; font-weight: normal; border: none; margin: 10px 0 0 0}
.candidate ul {width: 280px; padding: 0; margin: 0 0 20px 0}
.candidate  li {list-style: none; margin: 0 0 0 5px; padding: 0;}
li.image {float: left; margin: 0 10px 0 0; height: 150px;}
li.no, li.yes {background: #BB2C00; padding: 5px 10px; font-weight: bold; color: #FFF; margin: 0 0 0px -5px; position: relative; display: block}
li.yes {background: green}
.small thead th {font-size: 1.1em}

/* === Scroll container === */

.scrollcontainer  {height: 20em; overflow: auto; border-bottom: 1px solid #b7b3b1;}
.full {height: 37em}
table.scroll {margin: 0; border: none; width: 264px !important}
.scrollcontainer > table.scroll {width: 100% !important}
.scroll thead th {position:relative; padding: 3px 4px;}
.scroll td	{padding: 3px 4px;}

/* === Tools === */
#tools li.right {float: right; margin-right: 20px;}
#tools-vaalit {background: url(../img/tools-vaalit.gif); width: 129px; height: 56px; float: right; position: relative; top: 5px; padding: 4px 0 0 8px;}
#tools-vaalit a {font-size: 0.9em; text-decoration: none; color: #004276;}

/* === Print === */

@media print {
.global-header,
#navigation,
.header,
.fragment1,
.tabs,
.local-header,
.local-footer,
img.info,
.responsible,
#tools
{display: none !important;}
.heading {background: none; height: 30px; display: none !important;}
.introduction {display: block; padding: 0 0 10px 0}
.global-footer {padding-left: 0; height: auto; min-height: auto}
.local-footer ul {padding: 0;}
.global-footer div {width: 100%; background: none}
.contact {width: 100%; padding: 0 0 20px 0}
.page {width: 100%; padding:0}
.col2-grid1 .content {width: 100%; padding: 0}
.fragment3 {width: 100%; padding: 0;}
.insert {width: 100%}
.result, .result2 {width: 99%; border: 1px solid #999; margin: 20px 0 0 1px !important;}
.result th, .result2 th, .result td, .result2 td {background: none; border: 1px solid #999}
.odd, .even, .odd .separatecolumn, .even .separatecolumn {background: none}
.scrollcontainer {overflow: visible}
a { color: #000; text-decoration: none; }
}