/*
	Tangível 2009
	HTML released under Creative Commons License - http://creativecommons.org/licenses/by/2.5/pt/
	Last Edit: 2009-09-26
	Contact: info@tangivel.com
*/

* { margin:0; padding:0; text-align: left;}
img {border:0;}
body {font: 10px "Tahoma", "Arial", "Helvetica", sans-serif; background:#fff; color: #000E34}  /* 12px = 1.00em */
h1 {margin: 20px 0px 0px 0px; font-size: 1.5em; font-weight: bold; color: #104028;  border-bottom: 2px solid #ccc; width: 100%; height: 1.33em;}
p {color: #000E34; margin: 20px 0px 0px 0px; font-size: 1.3em; text-align: justify; line-height: 1.3em;}
ul.text {font-size: 1.3em; text-align: justify; line-height: 1.3em; margin-left: 30px;}
a, a:visited, a:active, a:hover {color: #071944}
fieldset {border: none;}
.tooltip {border: 1px solid #86a32b; background-color: #f4f7ea; color: #000; padding: 0px 3px;}

#design-notes {position: fixed; bottom: 0px; left: 0px; margin: 10px; padding: 4px; background-color: #F5DBDF; color: #7E1300; border: 1px solid #7E1300; font-size: 0.8em; width: 200px;}
.note {font-size: 9px;}

#header {display: none;}

#body {min-height: 500px; display: block; width: 100%;}
/*#body.menu {background: #fff url('../images/body-bg-no-submenu.png') repeat-x scroll top;}
#body.menu.submenu {background: #fff url('../images/body-bg-with-submenu.png') repeat-x scroll top;}
#body.justsubmenu {background: #fff url('../images/body-bg-just-submenu.png') repeat-x scroll top;}*/
#body.grey {background: #f5f5f5;}

#footer {display: none;} 
.wrapper {margin: 0 auto; width: 855px;}

#top {height: 35px; float: right; width: auto;}

#institutions {float: right; height: 20px; width: 123px; margin-right: 4px; text-align: center;}
#institutions img {margin: 3px 5px;}

ul.menu {list-style: none; margin: 6px 7px 0px 0px;}
ul.menu li {float: left; display: block; padding: 0px 6px 0px 6px; width: auto;}
ul.menu li.last {border-right: 0px}
ul.menu li a {font-size: 0.85em; color: #000; cursor: pointer;}
ul.menu li a:visited, ul.menu li a:hover, ul.menu li a:active {color: #fff;}
ul.menu li.active a {text-decoration: none;}

ul.menu.header {float: right; width: auto;}
ul.menu.header li {border-right: 1px solid #c1d0d9; color: #cddbe6;}
ul.menu.header li.last {border-right: 0px}
ul.menu.header li a {color: #cddbe6; cursor: pointer;}
ul.menu.header li a:visited, ul.menu.header li a:hover, ul.menu.header li a:active {color: #cddbe6; }

ul.menu.footer {float: left; width: auto;}
ul.menu.footer li {}
ul.menu.footer li.last {}
ul.menu.footer li.active a {text-decoration: none; font-weight: bold;}
ul.menu.footer li a {color: #071944; cursor: pointer;}
ul.menu.footer li a:visited, ul.menu.footer li a:hover, ul.menu.footer li a:active {color: #071944;}

#logo {margin: 4px 0px 0px 0px; float: left; width: 14em; height: 9.50em; }


.tag-line {color: #29ABE2;}

#votes-status {float: left;}
.status-box {}
.status-box .status-box-left {float: left; width: 19px; height: 92px;}
.status-box .status-box-middle {float: left; width: 100px; height: 92px;}
.status-box .status-box-right {float: left; width: 19px; height: 92px;}

.status-box h1 {font-size: 2.9em; color: #666666; text-align: center; margin: 18px 5px 0px 5px; line-height: 1em;}
.status-box h1 img {margin: 4px 0px;}
.status-box p {font-size: 1.0em; color: #666666;  margin: 0;}
.status-box #progress-bar {width: 325px; height: 13px; background-color: #F3F5EB; border: 1px solid #104028; margin:10px auto 6px 0; padding:0; position: relative;}
.status-box #progress-bar  img#progress-bar-pattern {position: absolute; top:2px; left: 2px; border:0px solid #CCD4DE; height: 9px; width: 1px; } 
.status-box .apurado {font-weight: bold; font-size: 1.15em; line-height: 1.2em; color: #fff;}

#votes-status .status-box.progress-bar .status-box-middle {float: left; width: 100%; height: 62px;}
#votes-status .status-box.update-time .status-box-middle {float: left; width: 103px; height: 92px;}

#votes-status .status-box.update-time .status-box-middle p {width: 180px; font-size: 0.9em; color: #cddbe6;  margin: 0 auto; text-align: center;}

#votes-status .status-box.progress-bar .statusWarning {color: #fff; float: right; width: auto; max-width: 430px; position: relative; top: -30px; line-height: 1.2em;}
#votes-status .status-box.progress-bar .statusWarning .statusWarningLabel {font-weight: bold; }
#votes-status .status-box.progress-bar .statusWarning .statusWarningMessage {width: auto; height: 1.2em; overflow: hidden;}

#global-results-title {clear: both; color: #fff; padding: 5px 0px 0px 4px;}
#global-results-title #title {font-size: 1.5em;}
#global-results-title #note {font-size: 0.8em;}

#menu {white-space: nowrap; margin-left: 4px;}
#menu ul#main-menu {list-style-type: none; height: 30px;}
#menu ul#main-menu li {float: left; width: auto; color: #fff; font-size: 1.2em; line-height: 1.1em; height: 29px; vertical-align: bottom; overflow: hidden; margin-top: 4px; display: none;}
#menu ul#main-menu li a {color:#fff; text-decoration: none; cursor: pointer;}
#menu ul#main-menu li .menu-tab-left {float: left; width: auto;}
#menu ul#main-menu li .menu-tab-right {float: left; width: auto;}
#menu ul#main-menu li .menu-option {float: left; width: auto; padding: 6px 20px 4px 20px;}

#menu ul#main-menu li.active a {color:#000; text-decoration: none; font-weight: bold;}
#menu ul#main-menu li.active {float: left; cursor: default; width: auto; display: inline;}
#menu ul#main-menu li.active .menu-tab-left {float: left; display: block; background: url('../images/menu-tab-left.png') no-repeat scroll 0; width: 11px; height: 29px; display: none;}
#menu ul#main-menu li.active .menu-tab-right {float: left; display: block; background: url('../images/menu-tab-right.png') no-repeat scroll 0; width: 11px; height: 29px; display: none;}
#menu ul#main-menu li.active .menu-option {float: left; background: #fff url('../images/menu-tab-middle.png') repeat-x scroll 0; width: auto; height: 29px;}

#menu ul#secondary-menu {list-style-type: none; float:left; margin:0px 0px 0px 4px; width: auto; height: 30px;}
#menu ul#secondary-menu li {float: left; margin: 10px 30px 0px 0px; font-size: 0.98em; height: 25px; vertical-align: bottom; overflow: hidden; width: auto; white-space: nowrap; display: none;}
#menu ul#secondary-menu li a {color:#071944; cursor: pointer;}
#menu ul#secondary-menu li .menu-tab-left {float: left; width: auto; }
#menu ul#secondary-menu li .menu-tab-right {float: left; width: auto; }
#menu ul#secondary-menu li .menu-option {}

#menu ul#secondary-menu li.active { float: left; width: auto; display: inline;}
#menu ul#secondary-menu li.active a {color:#071944; text-decoration: none; font-weight: bold; }
#menu ul#secondary-menu li.active .menu-tab-left {float: left; width: auto; }
#menu ul#secondary-menu li.active .menu-tab-right {float: left; width: auto; }
#menu ul#secondary-menu li.active .menu-option {float: left; width: auto; }

#menu.left-column {margin-left: 10px;}

#menu #print {padding-left: 20px; float: right; margin: 10px 0px 0px 0px; background: transparent url('../images/print.gif') no-repeat scroll 0px 0px; display: none;}

#left-side {}
#right-side {}
.left-side {float: left; width: 466px; height: auto;}
.right-side {float: right; width: 400px; height: auto;}
.center-column {float: left; width: 560px;}
.left-side-box {float: left; width: 144px; margin: 20px 20px 0px 0px;}

#selector-colapsed {display: none;}
#selector-colapsed #area-colapsed {display: none;}

#selector {display: none;}
#selector #area {display: none;}
#selector.empty {display: none;}
#selector #selector-menu {display: none;}
#selector #selector-menu li {display: none;}

#main {float: left; margin: 0px 0px 0px 4px; height: auto; width: 100%;}
#main.full-size {width: 100%; clear: both;}

#main .boletim-place {margin: 20px 0px; width: 100%; float:left;width: 550px;}
#main #boletim {width: 550px; height: 582px;}
#main .boletim-place div{margin-left: 290px; text-align: center; color: #6D735F;}
#main .main-title {color: #104028; padding: 28px 0px 0px 0px; float: left; width: 100%;}
#main .main-title #titles {float: left; border-right: 1px solid #999999; padding-right: 20px; margin-right: 20px;}
#main .main-title #titles-info {}
#main .main-title .pre-scope {float: left; color: #6D735F; font-size: 1.25em;}
#main .main-title .scope {clear: both; font-size: 3em; font-weight: bold;}
#main .main-title span {}
#main .main-title span.apurado {font-size: 1.15em; color: #666666;}
#main .main-title span.approved {}
#main .main-title div.searchInfo {}
#main .main-title #titles-info #all-approved {color: #104028; font-size: 1.33em;}


#main .main-title .options {float: right; height: 16px; width: 180px; text-align: right; font-size: 0.9em; color: #000; }
#main .main-title .options .options-legend {float: left; margin: 3px 0px 0px 0px; width: auto;}
#main .main-title .options input {margin: 0px 4px 0px 10px;}

.feedback-message {margin: 0 auto; height: auto; padding: 28px 0px 0px 0px; color: #660000; width: 600px; text-align: center; display: block;}

#contents {float: left; margin: 0px 0px 0px 0px;}

#area-browser {float: left; margin: 0px 3px 0px 4px; width: 215px; }
#area-browser #browser {margin: 20px 0px 0px 0px;}
#area-browser #browser-top {width: 215px; height: 11px; clear: both;}
#area-browser #browser-bottom {width: 215px; height: 11px; clear: both; margin-top: 8px;}
#area-browser #title {color: #2C4C87;  margin: 16px 0px 0px 0px; border-bottom: 2px solid #C7D9E5; font-size: 1.4em; font-weight: bold; clear: both;}
#area-browser #browser {}
#area-browser #browser.top {background-color: #E6E6E6;}
#area-browser #browser .label {font-size: 1em; color: #6D735F; margin: 16px 0px 0px 10px; display: inline-block; float: left; width: auto;}
#area-browser #browser .label.top {margin: 7px 0px 0px 10px;}
#area-browser #browser select {width: 252px; height: 94px; margin: 0px 0px 0px 10px;}
#area-browser #browser select option {padding: 0px 4px 0px 4px;}

#area-browser #browser form#locality-search {clear: both; height: auto}
#area-browser #browser form#locality-search input#search-field {margin: 5px 14px 0px 14px; padding: 2px; width: 178px; border: 1px solid #666666; clear:both; font-size: 0.9em;}
#area-browser #browser form#locality-serach input#search-button {margin: 6px 14px 0px 0px; float: right; clear: both; text-align: center; font-size: 0.9em;}
#area-browser #browser select#search-results-list {height: 800px; clear: both;}

#area-browser #browser #search-feedback {font-size: 0.9em; color: #660000; background-color: #F6E5E5; border: 1px solid #DDCECE; padding: 4px; margin: 12px 14px 12px 14px; display: block; clear: both;}

#area-browser #browser .loading-feedback {float: right; margin: 10px 14px 0px 0px; width: 16px;}
#area-browser #browser form#locality-search .loading-feedback {margin: 7px 7px 0px 0px;}
#area-browser #browser #results-district {clear: both;}

#footer {border-top: 2px solid #104028;}
#footer img {float: right; margin: 0px 4px 0px 0px;}

#accessibility {float: none;clear:both; font-size: 0.8em; width: auto;}
#accessibility img {float: none; margin-top: 60px;}

#body .spacer {display: block; clear: both; height: 80px;}
.invisible {display:none;}
.clear {clear:both; height: 0;}
.image-replacement {display: none;}
.underline {text-decoration: underline;}

#main-loading {margin: 40px auto; text-align: center;}
#main-loading img {}
#main-loading p {clear:both; text-align: center; color: #a0a0a0; margin: 5px 0px; }

#noscript {width: 80%; border: 1px solid #961c1c; display: block; margin: 20px auto; padding: 8px; background-color: #ffeeee; color: #961c1c; font-size: 1.2em; line-height: 1.5em;}
#noscript a {color: #961c1c; font-weight: bold;}
#debug {border: 2px dotted #aaa; background-color: #f7f7f7; padding: 20px; margin: 40px 20px;}











/* CHARTS PRINT CSS */

.piechart {float: left; height: 40px;}
.chart {margin: 10px 0px 0px 0px; float: left; width: 100%;}
.chart .chart-bg-shadow {}
.chart #chart-bg {padding: 10px; border: 1px solid #CBDBC1; background-color: #fff;}
.chart.full-size.expanded 	{width: 950px;}
.chart.full-size.collapsed 	{width: 445px;}

.chart.half-size.expanded 	{width: 694px;}
.chart.half-size.collapsed  {width: 450px;}

#global-chart {float: left; border: none; background-color: #fff; margin-top: 10px; position: relative;}

.chart .chart-bigTitle {font-size: 1.4em; color: #104028; font-weight: bold; margin: 0px 0px 10px 144px; clear: both; display: inline;}
.chart table.chart-area {padding-bottom: 6px; background: #F0F5E4 url('../images/bg-chart.png') no-repeat 170px 0px; border-collapse: collapse; border-spacing: 0px; width: 100%; margin:0px;}
.chart table.chart-area caption.chart-header {caption-side: bottom; border: none; margin-top: 10px;}
.chart table.chart-area caption.chart-header .caption-spacer {background-color: #fff; color: #4D4D4D; padding: 10px; font-size: 14px;}
.chart table.chart-area caption.chart-header .chart-title {font-size: 1.5em; font-weight: bold; float: left; padding-right: 10px; margin-right: 10px; border-right: 1px solid #CBDBC1; width: 125px; margin-bottom: 10px;}
.chart table.chart-area caption.chart-header .registered-voters {}
.chart table.chart-area caption.chart-header .registered-voters .registered-voters-number {font-weight: bold;}
.chart table.chart-area caption.chart-header .counted-voters {}
.chart table.chart-area caption.chart-header .counted-voters .counter-voters-number {font-weight: bold;}
.chart table.chart-area caption.chart-header .percentage-voters {font-weight: normal; color: #757575; float: right; font-size: 11px;}
.chart table.chart-area caption.chart-header .percentage-voters #pct {font-weight: bold; color: #4D4D4D; font-size: 15px;}

.chart table.chart-area caption.chart-header .total-mandates {font-style: italic; font-size: 0.9em; text-align: right; height: 0.9em; width: 100%; clear: both;}
.chart table.chart-area caption.chart-header .total-mandates .total-mandates-number {font-weight: bold;}

.chart table.chart-area tr.headers {display: none;}

.chart table.chart-area #acronym-text-img {float: right; margin: 0px 10px 0px 0px;}
.chart table.chart-area #acronym-text {margin-left: auto; float: left; margin: 5px 5px 0px 0px;}
.chart table.chart-area #acronym-image {float: right; border: 1px solid #ddd;}
.chart table.chart-area td.acronym {background-color: #F0F5E4; width: 125px; font-size: 0.9em; text-align: right; line-height: 1em; padding-top: 3px; border-right: 10px solid #fff; font-weight: bold;}
.chart table.chart-area td.results {}
.chart table.chart-area td.results .chart-line {height: 20px; margin: 3px 0px; clear: both;}
.chart table.chart-area td.results .chart-line img.chart-bar-pattern {float: left; margin: 6px 0px 6px 10px; height: 17px;}
.chart table.chart-area td.results .chart-line .chart-bar-percentage {float: left; color: #104028; font-size: 1.33em; font-weight: bold; margin: 3px 0px 0px 4px; width: 55px;}
.chart table.chart-area td.results .chart-line .chart-bar-votes {float: left; color: #6D735F; font-size: 0.9em; margin: 5px 0px 0px 6px; width: 80px;}

.chart table.chart-area td.chart-bar-mandates {padding: 4px 10px 0px 0px; width: 50px;}
.chart table.chart-area td.chart-bar-mandates .number-mandates {float: right; margin: 0px 2px 0px 0px; color: #071944; font-size: 1.16em; font-weight: bold; width: auto;}
.chart table.chart-area td.chart-bar-mandates .alien {float: right; width: 14px; height: 14px;}

.chart table.chart-area td.separator .separator-line {background-color: #fff; height: 10px;}

#comparationSwitch {display: none;}
#comparationSwitch a, #comparationSwitch a:visited, #comparationSwitch a.active {color: #071944; text-decoration: underline; cursor: pointer;}

div#current-chart {border-right: 2px dashed #999;}
div#previous-chart {margin: 10px 0px; padding: 0px 10px; border-left: none;}
.chart.previous {float: right; display: none; width: auto;}
.chart.previous table.chart-area {background-color: #F0F0F0;}
.chart.previous table.chart-area caption.chart-header .caption-spacer {background-color: #d1d1d1; color: #4D4D4D;}
.chart.previous table.chart-area caption.chart-header .counted-voters .percentage-voters {color: #808080;}
.chart.previous table.chart-area td.acronym {width: 100px;}
.chart.previous table.chart-area td.results .chart-line .chart-bar-percentage {color: #333333;}
.chart.previous table.chart-area td.results .chart-line .chart-bar-votes {color: #4D4D4D;}
.chart.previous table.chart-area td.chart-bar-mandates .number-mandates {color: #333333;}
.chart.previous table.chart-area td.separator .separator-line {background: url('../images/gray-pixel.png') repeat-x 0px 0.5em; margin: 0px 10px 0px 10px; height: 1em;}

.chart .no-chart-available {text-align: center; padding-top: 10px; color: #15A8AB;}





/*MAP PRINT CSS*/


#map {float: left; margin: 36px 3px 0px 4px; width: 215px; height: 373px; z-index: 3;}
#map #portugal {}
#map img {margin-left: 5px;}

area {cursor: default;}
area.clickable {cursor: pointer;}

#map #portugal .tooltip-name {border: 1px solid #104028; background-color: #fff; color: #000; padding: 0px 3px;}


.tooltip {text-transform:uppercase; color: #000; padding: 4px; background-color: #fff; font-weight: bold; font-size: 0.9em; border: 1px solid #000;}

#map-breadcrumbs {float: left; width: 270px; height: 78px; margin: 14px 0px 0px 0px; clear: both;}
#map-breadcrumbs #breadcrumbs-root {float: left; margin: 0px 10px 0px 0px; width: 22px; height: 45px; background: transparent url('../images/map-breadcrumbs-root.png') no-repeat scroll top left; cursor: pointer;}
#map-breadcrumbs #district {}
#map-breadcrumbs #municipality {}
#map-breadcrumbs #parish {}
#map-breadcrumbs div.visible {display: block;}
#map-breadcrumbs div.hidden {display: none;}
#map-breadcrumbs div span.label {color: #868478;}
#map-breadcrumbs div span.label.leaf {color: #868478;}
#map-breadcrumbs div span.value {color: #071944; text-decoration: underline; cursor: pointer;}
#map-breadcrumbs div span.value.leaf {color: #868478; text-decoration: none; cursor: default}