/*
960px grid system ~ Core CSS.
16 Columns ~ Margin left: 10px ~ Margin right: 10px

Based on the 960.gs grid system - http://960.gs/
by Nathan Smith

Created by the Grid System Generator - v1.01
Learn more ~ http://www.gridsystemgenerator.com/
*/

body {
background:#f0f0f0 url(bg.jpg) bottom repeat-x;
	
	color: #333;
	font-size: 12px;
	padding:0 0 50px 0;
}
a {
	color: #333;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

.container_16 {
	background:transparent;
}

.navi{background:url(bg_navi.png);
height:36px;
margin-bottom:20px;
}

ul.nav,
ul.nav * { margin:0;padding:0;}
ul.nav {
margin-left:8px;
margin-right:8px;
  position:relative;
  background:transparent;
  max-width:100%;
  height:36px;
  }
  ul.nav li {
	cursor:pointer;
	float:left;
	text-align:center;
	list-style-type:none;
	font-weight:normal;
}
ul.nav li a {
font-size: 11px;
	color:#fff;
	background:transparent;
	font-weight:bold;
	text-decoration:none;
	display:block;
	float:left;
	padding:0 1em;
	height:36px;
	line-height:36px;
}
ul.nav li:hover a,
ul.nav li a:hover,
ul.nav li a:focus {color:#fff; background:url(bg-navi-hover.png);}

ul.nav li.secondary {
	float:right;
	color:#cde;
	background:transparent !important;
}
ul.nav li.secondary span.status {
	float:left;
	padding:0 10px;
	line-height:2.77em;
	height:2.77em;
  font-size:0.9em;
}
ul.nav li.secondary span.status a {
	float:none;
	display:inline;
	padding:0;
	height:auto;
	line-height:auto;
	color:#cde;
	background:transparent;
}

/* Sivunavi */

.sidenav{
	height:400px;
background:url(bg-sidenav.png);margin-bottom:20px;}


ul.sidenavli, ul.sidenavli * {
	margin:0;
	padding:0;
}



ul.sidenavli {

  position:relative;
  background:transparent;
  height:36px;
}


  
  ul.sidenavli li {
	cursor:pointer;
	float:left;
	width:220px;
	text-align:left;
	list-style-type:none;
	font-weight:normal;
}
ul.sidenavli li a {
font-size: 11px;
	color:#fff;
	background:url(bg-a-sidenav.png);
	font-weight:bold;
	text-decoration:none;
	display:block;
	padding:0 0  0 18px;
	height:36px;
	line-height:36px;
}


ul.sidenavli li:hover a,
ul.sidenavli li a:hover,
ul.sidenavli li a:focus {color:#fff; background:url(bg-a-sidenav-hover.png);}

/* Etusivun laatikot */

.frontpagediv{background:url(bg-frontpagediv.png);
height:400px;}

/* Footer + footer navi */

.footer{background:url(bg-footer.png);
height:180px;}


ul.footnav, ul.footnav2,
ul.footnav *, ul.footnav2 *{ margin:0;padding:0;}
ul.footnav {margin-top:72px;}
ul.footnav2{}
ul.footnav, ul.footnav2 {
margin-left:240px;
  position:relative;
  background:transparent;
  max-width:100%;
  height:18px;
  }
  ul.footnav li, ul.footnav2 li {
	cursor:pointer;
	float:left;
	text-align:center;
	list-style-type:none;

}
ul.footnav li a, ul.footnav2 li a {
font-size:11px;
	color:#dfdfdf;
	background:transparent;
	text-decoration:none;
	display:block;
	float:left;
	padding:0 5px;
	height:18px;
	line-height:18px;
}
ul.footnav li:hover a,
ul.footnav li a:hover,
ul.footnav li a:focus,ul.footnav2 li:hover a,
ul.footnav2 li a:hover,
ul.footnav2 li a:focus {color:#fff;}

/* Accordions */

.box {
	background:#aa0611;
	margin-bottom:20px;
	padding:10px 10px 1px 10px;
}
.box h2 {
	font-size:1em;
	font-weight:normal;
	text-transform:uppercase;
	color:#fff;
	background:#000;
	margin:-10px -10px 0 -10px;

}
.box h2 a,
.box h2 a.visible {
	color:#fff;
//	background:#000 url("switch_minus.png") 185px 0px no-repeat;
	display:block;

	border:none;
	text-decoration:none;
}

.box_frontpage {
	padding:0px 10px 1px 9px;
	position: absolute;
	top: 204px;
	left: 9px;
	line-height: 16px;
	background: url("../images/bg-pikahaku.png") no-repeat;
	height: 180px;
	width: 184px;	
}

.box_frontpage tr, .box_frontpage td {
	color:#333;
	font-size: 10px;
	line-height: 12px;
}

.banner_frontpage {
//	position: relative;
//	top: -20px;
	position: absolute;
	top: 205px;
	left: 0px;
        padding:0px 10px 1px 9px;		  
}

input#frontpage_quick {
//line-height:18px;
font:10px verdana,helvetica,sans-serif;
    border:1px solid #d1d1d1;
width:170px;height:14px;
color:#333;
margin-top: 6px;
padding: 0px;
}
input#frontpage_quick:hover, input#frontpage_quick:focus {
    border:1px solid #a2a2a2;
}

.box h2 a.hidden,
.box h2 a.hidden:hover {
//	background-image: url("switch_plus.png");
}
.box h2 a:hover {
//	background-color:#333;
}
.block {
	padding-top:10px;
}
div.menu {
	padding:0;
}
div.menu h2 {
	margin:0;
}
div.menu .block {
	padding-top:0;
}

/* Sisältöalue */
.content-top{background:url(bg-content-top.png) top no-repeat;
height:35px;width:700px;margin:0;padding:0;}
.content{background:url(bg-content-bottom.png) bottom no-repeat;
padding-bottom:54px;
margin-bottom:20px;}
.content-middle{background:url(bg-content-middle.png) top repeat-y;
width:100%;
float:left;
}

/* Sisällön typis, eli päätypis */

.content{
color:#262626;
font-family:helvetica,arial,sans-serif;
font-size:12px;
line-height:18px;
}

.content p{
margin-bottom:18px;
}

.content strong{font-weight:bold;color:#ae0512;}
.content a{color:#0673ac;font-weight:bold;text-decoration:none;}
.content a:hover{color:#0094e1;}

.content h1 { 
color:#ae0512;
  font-size: 24px; 
  line-height: 36px;
  margin-bottom: 18px; 
  font-weight:normal;
}
.content h2 { 
color:#ae0512;
  font-weight:normal;
  font-size: 18px; 
  line-height: 18px; 
  margin-bottom: 18px;
}
.content h3 { 
  font-size: 12px; 
  line-height: 18px; 
}

/* =Containers
--------------------------------------------------------------------------------*/
.container_16
{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
	display: inline;
	float: left;
	position:relative;
	margin-left: 10px;
	margin-right: 10px;
}

/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* =Grid >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .grid_1 {width: 40px;}
.container_16 .grid_2 {width: 100px;}
.container_16 .grid_3 {width: 160px;}
.container_16 .grid_4 {width: 220px;}
.container_16 .grid_5 {width: 280px;}
.container_16 .grid_6 {width: 340px;}
.container_16 .grid_7 {width: 400px;}
.container_16 .grid_8 {width: 460px;}
.container_16 .grid_9 {width: 520px;}
.container_16 .grid_10 {width: 580px;}
.container_16 .grid_11 {width: 640px;}
.container_16 .grid_12 {width: 700px;}
.container_16 .grid_13 {width: 760px;}
.container_16 .grid_14 {width: 820px;}
.container_16 .grid_15 {width: 880px;}
.container_16 .grid_16 {width: 940px;}

/* =Prefix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .prefix_1 {padding-left: 60px;}
.container_16 .prefix_2 {padding-left: 120px;}
.container_16 .prefix_3 {padding-left: 180px;}
.container_16 .prefix_4 {padding-left: 240px;}
.container_16 .prefix_5 {padding-left: 300px;}
.container_16 .prefix_6 {padding-left: 360px;}
.container_16 .prefix_7 {padding-left: 420px;}
.container_16 .prefix_8 {padding-left: 480px;}
.container_16 .prefix_9 {padding-left: 540px;}
.container_16 .prefix_10 {padding-left: 600px;}
.container_16 .prefix_11 {padding-left: 660px;}
.container_16 .prefix_12 {padding-left: 720px;}
.container_16 .prefix_13 {padding-left: 780px;}
.container_16 .prefix_14 {padding-left: 840px;}
.container_16 .prefix_15 {padding-left: 900px;}

/* =Suffix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .suffix_1 {padding-right: 60px;}
.container_16 .suffix_2 {padding-right: 120px;}
.container_16 .suffix_3 {padding-right: 180px;}
.container_16 .suffix_4 {padding-right: 240px;}
.container_16 .suffix_5 {padding-right: 300px;}
.container_16 .suffix_6 {padding-right: 360px;}
.container_16 .suffix_7 {padding-right: 420px;}
.container_16 .suffix_8 {padding-right: 480px;}
.container_16 .suffix_9 {padding-right: 540px;}
.container_16 .suffix_10 {padding-right: 600px;}
.container_16 .suffix_11 {padding-right: 660px;}
.container_16 .suffix_12 {padding-right: 720px;}
.container_16 .suffix_13 {padding-right: 780px;}
.container_16 .suffix_14 {padding-right: 840px;}
.container_16 .suffix_15 {padding-right: 900px;}

/* `Push Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .push_1 {left: 45px;}
.container_16 .push_2 {left: 120px;}
.container_16 .push_3 {left: 180px;}
.container_16 .push_4 {left: 240px;}
.container_16 .push_5 {left: 300px;}
.container_16 .push_6 {left: 360px;}
.container_16 .push_7 {left: 420px;}
.container_16 .push_8 {left: 480px;}
.container_16 .push_9 {left: 540px;}
.container_16 .push_10 {left: 600px;}
.container_16 .push_11 {left: 660px;}
.container_16 .push_12 {left: 720px;}
.container_16 .push_13 {left: 780px;}
.container_16 .push_14 {left: 840px;}
.container_16 .push_15 {left: 900px;}

/* `Pull Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .pull_1 {left: -60px;}
.container_16 .pull_2 {left: -120px;}
.container_16 .pull_3 {left: -180px;}
.container_16 .pull_4 {left: -240px;}
.container_16 .pull_5 {left: -300px;}
.container_16 .pull_6 {left: -360px;}
.container_16 .pull_7 {left: -420px;}
.container_16 .pull_8 {left: -480px;}
.container_16 .pull_9 {left: -540px;}
.container_16 .pull_10 {left: -600px;}
.container_16 .pull_11 {left: -660px;}
.container_16 .pull_12 {left: -720px;}
.container_16 .pull_13 {left: -780px;}
.container_16 .pull_14 {left: -840px;}
.container_16 .pull_15 {left: -900px;}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
	clear: both;
	content:' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
