/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* ---------- Layout basics ---------- */
html {
    background: #fff url('../images/background-gradient-blue-white.jpg') repeat-x left top;
}

body {
    background: transparent url('../images/background-fmi.jpg') no-repeat center top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em; /* 12px */
    line-height: 1.33333; /* 16px baseline grid */
}

#wrapper {
    width: 90%;
    max-width: 1320px;
    /* width: 1000px; based on a 1k pixel wide mockup grid */
    margin: 0 auto; /* centers the container on the page */
    padding-top: 2em;
}

/* cross-browswer clear for floated elements */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* .clearfix { *zoom: 1; } */

/* wrappers used for floated elements to avoid the margin/padding problem, modern solution: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
.secondary-navigation-wrapper {
    float: left;
    width: 23.2%;
}

.main-content-wrapper {
    float: right;
    width: 74.4%;
}

.paikalliset-havainnot, h1, .breadcrumb-navigation {
    float: left;
    width: 63.114%;
}

.get-local-weather, .whole-country {
    float: right;
    width: 29.971182%;
    padding-left: 3.4582133%;
}

.whole-country {
    border-left: 1px dotted #e7e7e7;
    padding-bottom: 9999px;
    margin-bottom: -9999px; /* ensures the column is equally high, one true layout method */
}

.secondary-navigation, .main-content, .main-navigation li, .get-local-weather form, .footer {
    background: #fff;
    border: 1px solid #cfcfcf;
    padding: 1.14285714em;
    margin-bottom: 1.14285714em; /* 16px */
}

.main-content {
    padding: 2em;
    overflow: hidden;
}

.utilities li, .main-navigation li, .breadcrumb-navigation li, .footer-extras li {
    float: left;
    margin: 0 1em;
}

table, img {
    width: 100%; /* fluid "responsive" images */
}


/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6, caption {
    font-weight: bold;
}

h1 {
    font-size: 2em; /* 24px */
    line-height: 1.33333333; /* 32px */
    border-bottom: 2px solid #e7e7e7;
    margin-bottom: 14px;
}

h2 {
    font-size: 1.33333em; /* 16px */ 
    line-height: 1.5; /* 24px */
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 15px;
}

h3 {
    font-size: 1.16666667em; /* 14px */
    line-height: 1.14285714; /* 16px */
    color: #666;
}

a:link {
    color: #0077db;
    text-decoration: none;
}
a:visited {
    color: #0077db;
}
a:hover {
    text-decoration: underline;
}
a:active {   
}

em {
    font-weight: bold;
}


/* ---------- Header ---------- */
.logo {
    display: block;
    width: 340px;
    height: 40px;
    background: transparent url('../images/logo_fi.png') no-repeat left top;
    text-indent: -9999px; /* screenreader friendly image replacement */
}

.header .utilities {
    float: right;
}


/* ---------- Main navigation ---------- */
.main-navigation {
    font-size: 1.16666667em; /* 14px */
    line-height: 1.14285714; /* 16px */
}

.main-navigation li {
    margin: 1.71428571em 0.57142857em 1.14285714em 0;
    padding: 0;
}
.main-navigation li a, .secondary-navigation li a {
    color: #000;
    font-weight: bold;
    display: block;
    padding: 0.5em 1em;
}

.main-navigation li a {
    padding: 0.28571429em 0.57142857em;
}

.main-navigation .selected a, .secondary-navigation li.selected > a {
    color: #fff;
    background-color: #0077db;
}



/* ---------- Secondary navigation ---------- */
.secondary-navigation {
    padding-right: 0;
}


.secondary-navigation li {
    margin-bottom: 0;
    padding: 0.25em 0 0.25em 1em;
    background: transparent url('../images/list-bullet.gif') no-repeat left 0.66666667em;
}

.secondary-navigation li a {
   padding: 0.5em; 
}

.secondary-navigation li a:hover {
   color: #0077db;
}

.secondary-navigation li.selected {
    background-image: url('../images/list-bullet-square-blue.gif');
}

.secondary-navigation li.selected li {
    background-image: url('../images/list-bullet-square-gray.gif');
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.secondary-navigation ul ul a:link {
    font-weight: normal;
}


/* ---------- Onpage navigation ---------- */
.onpage-navigation {
    text-align: center;
    margin: 1.33333333em 0 0.66666667em 0;
}

.onpage-navigation li {
    display: inline-block;
    line-height: 2;
    white-space: nowrap;
}

.onpage-navigation li a {
    background-color: #cbe2fc;
    padding: 0.25em 0.5em;
    /* CSS3 for round corners */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.onpage-navigation .selected a, .onpage-navigation a:hover {
    background-color: #0077db;
    color: #fff;
}


/* ---------- Content ---------- */
.breadcrumb-navigation, .forecast, .advisory-status, table {
    margin-bottom: 1.33333333em; /* 16px */
}


/* ---------- Breadcrumb navigation ---------- */
.breadcrumb-navigation li {
    margin-left: 0;
}

.breadcrumb-navigation a:after {
    content: "\25b8"; /* inserting a triangle using pseudoelement and html entity ▸ */
    padding-left: 1em;
    color: #000;
}

.breadcrumb-navigation li:last-child a:after {
    content: ""; /* removing the triangle form the last child */
}

/* info-icon */
.info-icon:after {
    content: "\00A0";
    display: inline-block;
    margin-left: 0.5em;
    width: 2em;
    background: transparent url('../images/sprite.png') no-repeat -238px -296px;
}


/* ---------- Form get local forecast ---------- */
.get-local-weather {
    float: right;
}

.get-local-weather form {
     background: #fff url('../images/location-menu-background.png') repeat-x left bottom;
}

.get-local-weather label {
    display: block; /* keeps the label on its own line */
}

.submit-button {
    text-indent: -9999px;
    width: 27px;
    height: 20px;
    border: none;
    background: transparent url('../images/sprite.png') no-repeat -191px -328px;
    cursor: pointer;
}

#search-local-weather {
    width: 100%;
    overflow: hidden;
}

.get-local-weather span {
    display: block;
    overflow: hidden;
    padding-right: 1em;
    line-height: 1.66666667;
}

.get-local-weather span input {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 1.45454545em;
}

.get-local-weather .submit-button {
    float: right;
    margin-left: 0;
}



/* ---------- Meteogram ---------- */

.forecast {
    overflow: auto;
    margin-bottom: 2.66666667em;
}

table {
    font-weight: bold;
    color: #333;
}

caption {
    text-align: left;
}

td, th {
    padding: 0.25em 0.5em;
    text-align: left;
}

th {
    border-radius: 6px 6px 0 0;
}

.meteogram {
    margin-bottom: 0;
}

.meteogram th, .meteogram td {
    padding: 0;
    text-align: center;
}

.meteogram th {
    text-align: left;
    padding-left: 0.5em;
    padding-top: 0.25em;
}

.meteogram .even {
    background-color: #CFCFCF;
}

.meteogram .odd {
    background-color: #E7E7E7;
}

.meteogram col.break {
    background: #fff url('../images/background-1px-dotted.png') repeat-y center top;
}

.timestamps td {
    font-weight: normal;
    line-height: 2;
}

.timestamps td.first {
    border-radius: 0px 0px 0px 6px;
}

.timestamps td.last {
    border-radius: 0px 0px 6px 0px;
}

.weather-symbol, .wind-symbol {
    background-color: #fff;
}

.weather-symbol {
    width: 3.33333333em; /* 40px */
    height: 3.33333333em;
    background: #fff url('../images/weather-symbols-8b.png') no-repeat left top;
}

.weather-symbol div {
    width: 3.33333333em; /* 40px */
    height: 3.33333333em;
    background: #fff url('../images/weather-symbols-8b.png') no-repeat left top;
    margin: 0 auto;
}

/* create a class for every weather condition using background position property */
.code-19-1 div {
    background-position: right top;
}

.wind-symbol div {
    width: 2.5em;
    height: 2.5em; /* 30px */
    background: #fff url('../images/wind-symbols-8b.png') no-repeat left top;
    margin: 0 auto;
}

/* every wind condition needs a class */
.code-40-1 div {
    background-position: right top;
}

.temperature {
    font-size: 1.16666667em; /* 14px */
}

.temperature .negative {
    background-color: #fff;
    color: #00f;
}

.temperature .positive {
    background-color: #fff;
    color: #f00;
}

.meteogram caption {
    font-size: 1.33333em; /* 16px */ 
    line-height: 1.5; /* 24px */
}

.meteogram caption span {
    float: right;
    font-size: 0.75em;
    line-height: 2;
}

.meteogram tfoot td {
    text-align: right;
    font-weight: normal;
    font-size: 0.83333333em; /* 10px */
    line-height: 2.4;
    padding: 0;
    background-color: #fff;
}

.value {
    float: right;
    font-weight: normal;
}


/* ---------- Advisory status ---------- */
.advisory-status {
    padding: 1em;
    line-height: 2;
    border: 1px solid #ddd;
     /* CSS3 for round corners */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-bottom: 2.66666667em;
}

/* ---------- Form select location ---------- */
.form-select-location {
    line-height: 2;
    margin-bottom: 2em;
}

/* ---------- Current observation table ---------- */
.current-observation-information {
    margin-bottom: 2.66666667em;
}

.current-observation-information caption {
    line-height: 2;
}

.current-observation-information caption span {
    float: right;
}

.current-observation-information td, .current-observation-information th {
    padding: 0.5em 1em;
}

.current-observation-information .value {
    margin-right: 2em;
}

.current-observation-information .value .note {
    font-size: 0.83333333em;
}

.current-observation-information tr td:last-child .value {
    margin-right: 0;
}

.current-observation-information tbody tr:nth-child(odd) {
   background-color: #e7e7e7; /* CSS3 used for zebra stripng the table rows, CSS should control the presentation */
}


/* ---------- Footer ---------- */
.footer {
    background-color: #f8f8f8;
}

.footer p {
    float: left;
}
.footer .footer-extras {
    font-weight: bold;
    float: right;
}

.footer-extras li, .utilities li {
    border-right: 1px solid #cfcfcf;
    padding-right: 1em;
    margin-right: 0;
}

.footer-extras li:last-child, .utilities li:last-child {
    border: none;
}

.utilities li:first-child {
    border: none;
    padding-right: 2.66666667em;
}





/* ---------- Print style ---------- */
@media print {
    html, body, #wrapper {
        background: none;
        margin: 0;
        padding: 0;
    }
    
    body {
        padding: 2em;
    }
    
    .main-navigation, .utilities, .secondary-navigation, .footer, .get-local-weather,
    .breadcrumb-navigation, .form-select-location {
        display: none;
    }
    
    .main-content-wrapper, .main-content {
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        float: none;
    }
    
     h1 {
        width: 100%;
     }
     
     h1, h2, h3 { 
        page-break-after: avoid;
        page-break-inside: avoid; 
     }

     ul, ol, dl { 
        page-break-before: avoid; 
    }

    img {
        page-break-inside: avoid;
    }
    
}