﻿body {background:#EFF1F2;font:13px/20px Arial,sans-serif;color:#222;}
* {margin:0;padding:0;}
#wrapper:after, #main:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
img {border:none;}
a {color:#ff4800;font-weight:bold;}
a:active {outline:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}

p, blockquote, ul, ol, dl {margin:20px 0;}
ul {list-style-type:none;}
h1,h2,h3 {margin:30px 0 -10px;clear:both;}


/*
LAYOUT  -------------------------------------*/

#wrapper {width:900px;margin:-40px auto 0 auto;background:#fff;padding:20px 40px;}
#main {float:right;width:520px;}
aside {float:left;width:336px;background:#f8f8ff;padding:20px 20px 20px 30px;margin:-20px 0 0 -40px;}

.column {float:left;clear:both;width:250px;margin:0 20px 20px 0;}
.column.right {margin-right:0;clear:none;}
aside .column {width:160px;margin:0 16px 0 0;}
aside .column.right {margin-right:0;clear:none;}

.col {float:left;clea:both;width:280px;margin:0 0 0 30px;}
.col.first {clear:both;margin-left:0;}


/*
HEADER  -------------------------------------*/

header {background:#2F6C9B;border-bottom:10px solid #E6E8E9;background:#2F6C9B url(/img/bg/header.jpg) 50% 0 no-repeat;}
#header-inner {height:160px;width:980px;margin:0 auto;position:relative;}

.logo {position:absolute;left:30px;bottom:75px;width:260px;height:60px;text-indent:-9999px;background:url(/img/bg/sprite.png) 0 0 no-repeat;}

nav ul {position:absolute;left:30px;bottom:10px;z-index:999;}
nav li {display:inline;}
nav a {float:left;color:#fff;font-weight:bold;text-decoration:none;display:inline-block;line-height:26px;padding:3px 10px 0 10px;border-bottom:3px solid #1D5077;margin-right:3px;font-size:13px;background:#26618E;}
nav li:first-child a {background-image:url(/img/bg/sprite.png);background-repeat:no-repeat;background-position:10px -84px;width:20px;text-indent:-9999px;}
nav a.nosto {color:#fff;background:#3F87AD url(/img/bg/sprite.png) 100% -130px no-repeat;border-color:#3F87AD;margin-left:10px;font-size:11px;text-transform:uppercase;padding-right:24px;}
nav a:hover {background-color:#1D5077;border-color:#ff4800;}


/*
FOOTER  -------------------------------------*/

footer {clear:both;width:940px;margin:0 auto;color:#999;font-size:11px;margin-bottom:60px;}
footer ul {float:left;}
footer p {float:right;}

footer a {color:#999;font-weight:normal;text-decoration:none;border-bottom:1px dotted #ccc;}
footer a:hover {border-bottom:2px solid #FF4800;}

footer li {display:inline;float:left;margin-left:10px;}
footer li:first-child {margin-left:0;}


/*
TYPOGRAPHY  -------------------------------------*/

h1 {font-size:32px;line-height:1;color:#1D5077;margin-bottom:10px;letter-spacing:-1px;}
h2 {color:#1D5077;}
#etusivu h1 {margin-bottom:0;}
#etusivu #main>h2 a {font-size:32px;line-height:1;letter-spacing:-1px;background:none;padding:0;}
h2 a {text-decoration:none;color:#1D5077;}
h3 a, h2 a {text-decoration:none;padding-right:18px;background:url(../img/bg/sprite.png) no-repeat 100% -68px;}
aside h3 a, aside h2 a {color:#222;}
#main h2 a {background-position:100% -64px;}
h2 a:hover, h3 a:hover {text-decoration:underline;}

#breadcrumbs {font-size:12px;color:#999;margin:-20px 0 -10px -34px;border-bottom:1px dotted #eee;padding:5px 34px 4px 34px;position:relative;z-index:99;}
#breadcrumbs a {color:#999;text-decoration:none;font-weight:normal;}
#breadcrumbs a:after {content:" \00BB";}
#breadcrumbs a:hover {text-decoration:none;}

.ingress {font-size:15px;line-height:22px;font-weight:bold;color:#666;}

figure {position:relative;padding:5px;background:#E6E8E9;margin:20px 0;}
figure img {width:510px;}
figcaption {color:#444;font-size:12px;padding:5px;margin:0;line-height:18px;}
figcaption strong {font-weight:bold;display:block;}

blockquote p {font:italic 18px/20px Georgia,serif;color:#666;text-align:center;border:10px solid #eee;border-width:2px 0;padding:18px 0;}

blockquote p {quotes:' \201C' ' \201D';}
blockquote p:before {content:open-quote;}
blockquote p:after {content:close-quote}

#main p img {float:left;padding:5px;margin:0 10px 10px 0;background:#E6E8E9;}
#main p img.right {float:right;margin:0 0 10px 10px;}

.ul li {padding-left:16px;background:url(../img/bg/sprite.png) no-repeat 0 -110px;}

.offer li a {background:#f4f4f4;display:block;position:relative;text-decoration:none;color:#666;font-size:12px;margin-bottom:3px;padding:5px;font-weight:normal;border-radius:4px;border:1px solid #eee;}
.offer li a:hover {background:#eee;}
.offer li a h3 {margin:0;color:#444;font-size:16px;}
.offer li img {position:absolute;right:100px;top:50%;margin-top:-20px;}
.offer li strong {position:absolute;right:5px;top:15px;font-size:22px;color:#222;}

#note {background:#E8EAEB;padding:9px;border:1px solid #ddd;color:#666;}

.pr-box {background:#E8EAEB;padding:9px;border:1px solid #ddd;color:#666;clear:both;}

/* tables */
table {border-collapse:collapse;width:100%;margin:20px 0;}
.wideTable {width:740px;margin-left:-220px;}
th {padding:6px;background:#E8EAEB;color:#222;line-height:20px;text-align:left;}
th, td {padding:6px;color:#666;border-bottom:1px solid #eee;}
table p {line-height:20px;}
tr.alt {background-color:#f2f2f2;}

dl dt {margin-right:4px;color:#888;text-transform:uppercase;font-size:11px;}
dl dd {margin:0 0 .5em 0;border-bottom:1px solid #eee;}

.button, button {color:#fff;padding:3px 10px;text-decoration:none;background:#ff4800;font-weight:bold;}
.button:hover, button:hover {color:#eee;background-color:#CF3319;}

#sivukartta li {list-style-type:square;color:#666;margin-left:20px;}
#sivukartta li ul {margin-top:0;}
#sivukartta li li {font-size:12px;color:#999;margin-left:20px;}


/*
aside  -------------------------------------*/

#secnav {width:356px;padding:10px 0 10px 30px;background:rgba(0,0,0,0.03);margin:-20px 0 20px -30px;border-radius:4px 0 0px 0;}
#secnav li {display:inline;}
#secnav a {width:100px;background:rgba(0,0,0,0.03) url(../img/bg/secnav.png) 50% 10px no-repeat;display:inline-block;font-size:12px;text-align:center;text-decoration:none;line-height:30px;margin-right:12px;padding-top:40px;color:#2F6C9B;}
#secnav a:hover {background-color:rgba(0,0,0,0.05);}

aside h2 {font-size:15px;color:#444;clear:both;}
aside h2 a {color:#444;}
aside h3 {font-size:15px;color:#444;clear:both;}
aside p {clear:both;}

#main ol {color:#999;margin-left:20px;}
#main ol p {color:#444;margin:0;}
aside p {font-size:12px;color:#666;font-weight:normal;}
aside img {}

#uutiskirje {background:#FFFDEF;border:3px double #eee;padding:20px;margin:30px 0;clear:both;}
#uutiskirje h4 {color:#444;margin-bottom:-15px;}
#uutiskirje form {text-align:center;}
#uutiskirje input {color:#666;background:#f3f3f3;padding:5px;border:1px solid #fff;margin-bottom:0px;border:1px solid #ddd;border-color:#ccc #e6e6e6 #e6e6e6 #ccc;}
#uutiskirj input:focus {background:#f3f3f3;}
#uutiskirje button {color:#fff;background:#ff4800;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,0.4);margin:0;clear:both;display:inline-block;border:2px solid #DB3A00;position:relative;bottom:-30px;}
#uutiskirje button:hover {background:#DB3A00;}

.vote-yes {background-color:#C8EDBB;color:#333;}
.vote-no {background-color:#EDBBC4;color:#333;}


/*
HOME  -------------------------------------*/

#intro {padding:20px;background:rgba(0,0,0,0.1);background:#F2F2FF;margin:20px 0 40px;}
#intro h2 {margin-top:0;}
#intro p {font-size:15px;color:#666;}

#intro ul {margin:0;}
#intro li {display:inline;}
#intro li a {width:120px;background:#ff4800 url(../img/bg/secnav.png) 50% 5px no-repeat;display:inline-block;font-size:12px;text-align:center;text-decoration:none;line-height:30px;margin-right:12px;padding-top:40px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.2);}
#intro li a:hover {background-color:#FF6128;}

#intro li a#sec-1 {background-image:url(../img/bg/sec-1.png);}
#intro li a#sec-2 {background-image:url(../img/bg/sec-2.png);}
#intro li a#sec-3 {background-image:url(../img/bg/sec-3.png);}


/*
FORMS  -------------------------------------*/

#kommentit {background:#f7f7f7;border:1px solid #eee;padding:20px;margin:20px 0;}
#kommentit h3 {margin:0;}

input, textarea {background:#f3f3f3;border:1px solid #ddd;color:#666;font:13px Arial,sans-serif;padding:5px;}

input {width:200px;}

textarea {width:420px;overflow:auto;padding:9px;height:160px;line-height:20px;}

input:focus, textarea:focus {background:#f7f7f7;border-color:#ccc;}

label {color:#53595F;padding-top:10px;display:inline-block;}
label .error {color:#AD0000;font-weight:bold;}

button {cursor:pointer;border:0;font:bold 13px Arial,sans-serif;margin:16px 0 17px;padding:5px 10px;}
button:hover {}


/*
MISC  -------------------------------------*/

#a-banner {position:absolute;right:0;top:20px;}

#wrapper {-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);-moz-box-shadow:0 0 3px rgba(0,0,0,0.2);box-shadow:0 0 3px rgba(0,0,0,0.2);}
input,textarea {-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.05) inset;-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.05) inset;box-shadow:1px 1px 2px rgba(0,0,0,0.05) inset;}

nav a {border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;}
#wrapper, aside, #intro, #intro li a, #note, .button, button, input, textarea {border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
img, figure {border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;}
