/*
	pattern template.css
	
	(c) Vilperi Oy
*/

/* Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,
sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td {border:0;margin:0;padding:0}
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,
section,video,object {display:block}
a img{border:0}
figure{position:relative}
figure img{width:100%}

/* Taustakuva, taustaväri & leipätekstin fontti ja väri */
body {
	color:#333;
	background-color:#2b2b2b; /* Taustaväri */
	
	padding:0px;
	margin:0px;
}

/* Mobiilitausta */
@media (max-width: 1024px) {
	body {
		background-image:url(../images/tausta-mobiili.jpg);
		background-position:top center;
		background-repeat:no-repeat;
		
		background-size:100% auto;
	}
}
/* Normaali tausta */
@media (min-width: 1025px) {
	body {
		background-image:url(../images/tausta.jpg);
		background-position:top center;
		background-repeat:no-repeat;
	}
}


/*********  $$$  $$$ ************************************************************
**********  $$$  $$$ ************************************************************
 
$$$    $$$   $$$$$$   $$$$$$$$   $$$ $$$$$$$$$
$$$    $$$  $$$$$$$$  $$$$$$$$$  $$$ $$$$$$$$$
$$$    $$$ $$$    $$$ $$$    $$$ $$$    $$$
$$$    $$$ $$$    $$$ $$$    $$$ $$$    $$$
 $$$  $$$  $$$$$$$$$$ $$$$$$$$$  $$$    $$$
 $$$  $$$  $$$$$$$$$$ $$$$$$$$   $$$    $$$
  $$$$$$   $$$    $$$ $$$   $$$  $$$    $$$
   $$$$    $$$    $$$ $$$    $$$ $$$    $$$
    $$     $$$    $$$ $$$    $$$ $$$    $$$
	
	
**********************************************************************************
**********************************************************************************/


	/* VÄRI 1 */
	
	#nav .arkki, #footer .arkki, .laatikko .otsikko h2, .nappi, a.nappi, .huomio2 .huomio-nuoli,
	.pagination span, .vari2 .huomio-nuoli, .valikko-koti, .valikko-avaa, #left ul.menu li
	{

		background-color:#ccc;
		color:#333 !important;
	}
	
		/********** FOOTER ERI VÄRILLÄ KUIN NAVI ***********/
		/*
		#footer .arkki {
			background-color:# !important;
		}
		*/
		
	
	/* VÄRI 2 */
	
	.nappi.vari2, .laatikko.laatikko-vari2 .otsikko h2, .huomio-nuoli,
	.pagination .curPage, #subnav .arkki, #left ul.menu li.current {
	
		background-color:#eda11e;
		color:#333 !important;
	}
	
	
	
	/* VÄRI 3 */
	
	.nappi.vari3, .laatikko.laatikko-vari3 .otsikko h2, .huomio2 .huomio-nuoli {
	
		background-color:#555;
		color:#fff !important;

	}


	/* VÄRI 4 */
	
	.nappi.vari4, a.nappi.vari4, .laatikko.laatikko-vari4 .otsikko h2, .vari3.huomio .huomio-nuoli, .huomio3 .huomio-nuoli {
	
		background-color:#fff;
		color:#333 !important;
	
	}
	
	
	/****** LAATIKKO OTSIKOIDEN NUOLET MOBIILISSA ******/
	
	@media (max-width:640px) {
	
		/* VÄRI 1 */
			.laatikot .laatikko .otsikko .open-icon {
			/* Tummat ikonit */
			background-image: url("../../../images/glyphicons-halflings.png") !important;	
				
			/* Vaaleat ikonit */
			/*background-image: url("../../../images/glyphicons-halflings-white.png") !important;*/
			}
			
		/* VÄRI 2 */
			.laatikot .laatikko.laatikko-vari2 .otsikko .open-icon {
			/* Tummat ikonit */
			/*background-image: url("../../../images/glyphicons-halflings.png") !important;*/
				
			/* Vaaleat ikonit */
			background-image: url("../../../images/glyphicons-halflings-white.png") !important;
			}
			
		/* VÄRI 3 */
			.laatikot .laatikko.laatikko-vari3 .otsikko .open-icon {
			/* Tummat ikonit */
			/*background-image: url("../../../images/glyphicons-halflings.png") !important;*/
				
			/* Vaaleat ikonit */
			background-image: url("../../../images/glyphicons-halflings-white.png") !important;
			}
			
			
		/* VÄRI 4 */
			.laatikot .laatikko.laatikko-vari4 .otsikko .open-icon {
			/* Tummat ikonit */
			background-image: url("../../../images/glyphicons-halflings.png") !important;	
				
			/* Vaaleat ikonit */
			/*background-image: url("../../../images/glyphicons-halflings-white.png") !important;*/
			}
	}
	
	
	/****** NAPIN HUOMIO-NUOLEN VÄRI *********/
		.huomio-reunus {
			background-image: url(../images/huomio_white.png);
			background-position:center;
		}
	
/**********************************************************************************
**********************************************************************************/




/**********************************************************************************
***********************************************************************************

  $$$$$$   $$$$$$$$     $$$$$$   $$$$$$$    $$$ $$$$$$$$$ $$$    $$$ $$$$$$$$$
$$$$$$$$$$ $$$$$$$$$   $$$$$$$$  $$$$$$$$$  $$$ $$$$$$$$$ $$$    $$$ $$$$$$$$$
$$$    $$$ $$$    $$$ $$$    $$$ $$$   $$$$ $$$ $$$       $$$$   $$$    $$$
$$$        $$$    $$$ $$$    $$$ $$$    $$$ $$$ $$$       $$$$$$ $$$    $$$
$$$  $$$$$ $$$$$$$$$  $$$$$$$$$$ $$$    $$$ $$$ $$$$$$$   $$$ $$$$$$    $$$
$$$  $$$$$ $$$$$$$$   $$$$$$$$$$ $$$    $$$ $$$ $$$$$$$   $$$  $$$$$    $$$
$$$    $$$ $$$   $$$  $$$    $$$ $$$   $$$$ $$$ $$$       $$$   $$$$    $$$
$$$$$$$$$$ $$$    $$$ $$$    $$$ $$$$$$$$$  $$$ $$$$$$$$$ $$$    $$$    $$$
  $$$$$$$$ $$$    $$$ $$$    $$$ $$$$$$$    $$$ $$$$$$$$$ $$$    $$$    $$$
  
  
***********************************************************************************
**********************************************************************************/
  
  
	/* VÄRI 1 */
	
	#nav .arkki, #footer .arkki, .nappi, a.nappi, .laatikko .otsikko h2, 
	.huomio .huomio-nuoli, .valikko-koti, .valikko-avaa, .pagination span,
	.vari2 .huomio .huomio-nuoli, vari3 .huomio .huomio-nuoli, #left ul.menu li
	{
	
		background-image:url(../images/liuku_vaalea.png);
		background-repeat: repeat-x;
		background-position:center;
	}

	/* JOS TAUSTANA ON liuku_vaalea LAITA TÄHÄN TOP CENTER */
	#footer .arkki {background-position:top center;}



	/* VÄRI 2 */
	
	.nappi.vari2, a.nappi.vari2, .laatikko.laatikko-vari2 .otsikko h2, .huomio-nuoli,
	.pagination .curPage, #subnav .arkki, #left ul.menu li.current
	{
	
		background-repeat: repeat-x;
		background-position:center right;
		background-image:url(../images/vari2.jpg);
	}
	
	
	
	/* VÄRI 3 */
	
	.nappi.vari3, a.nappi.vari3, .laatikko.laatikko-vari3 .otsikko h2
	{
	
		background-repeat: repeat-x;
		background-position:center;
		background-image:url(../images/liuku_tumma.png);
	}

	/* VÄRI 4 */
	
	.nappi.vari4, a.nappi.vari4, .laatikko.laatikko-vari4 .otsikko h2, .huomio3 .huomio-nuoli
	{
		background-position: center -30px;
		background-repeat: repeat-x;
		background-image:url(../images/liuku_tumma.png) !important;
	}

/**********************************************************************************
**********************************************************************************/



/**********************************************************************************
***********************************************************************************

$$$    $$$ $$$ $$$    $$$ $$$    $$$  $$$$$$$$         $$$   $$$$$$
$$$    $$$ $$$ $$$    $$$ $$$    $$$ $$$$$$$$$$        $$$  $$$$$$$$
$$$   $$$  $$$ $$$   $$$  $$$   $$$  $$$    $$$        $$$ $$$    $$$
$$$$$$$$   $$$ $$$$$$$$   $$$$$$$$   $$$    $$$        $$$ $$$    $$$
$$$$$$$$   $$$ $$$$$$$$   $$$$$$$$   $$$    $$$        $$$ $$$$$$$$$$
$$$   $$$  $$$ $$$   $$$  $$$   $$$  $$$    $$$ $$$    $$$ $$$$$$$$$$
$$$    $$$ $$$ $$$    $$$ $$$    $$$ $$$    $$$ $$$    $$$ $$$    $$$
$$$    $$$ $$$ $$$    $$$ $$$    $$$ $$$$$$$$$$ $$$$$$$$$$ $$$    $$$
$$$    $$$ $$$ $$$    $$$ $$$    $$$  $$$$$$$$   $$$$$$$$  $$$    $$$
  
  
***********************************************************************************
**********************************************************************************/




/*** TÄYSLEVEÄ NAVI ***/

/* JOS HALUAT KESKITTÄÄ VALIKKO NAPIT, VAIHTA #nav ul li { float: none } */


	@media (min-width:801px) {
	/*
		#nav .arkki {max-width:100%;text-align:Center;}
		#nav ul {width:1140px !important; margin:0 auto;}
		#nav ul li {width:auto !important;display:inline-block !important;float:left !important;}
		#nav ul {display:inline-block; width:100% !important; vertical-align:bottom !important;}
		.valikko-lista {text-align:center;}
		#nav ul li.level1 a {padding:10px 60px !important;}
	*/
	}




/*** TÄYSLEVEÄ FOOTER ***/


	#footer .arkki {
		max-width: 100%;
	}
	#footer .footer-body {
		max-width:1140px;
		margin: 0 auto;
	}



/*** TÄYSLEVEÄ SLIDER ***/

/*
	#showcase .arkki {
		max-width: 100% !important;
	}

	#vslider .slide-wrap {
		max-width: 1140px !important;
		margin: 0 auto !important;
	}
*/



/************************************************************************************
*************************************************************************************
********                                                                   **********
********       TÄSTÄ ALKAA NORMAALI CSS-JUTUT JOTKA ON ENNENKIN OLLU       **********
********                ELI ALEMPANA EI OLE MITÄÄN UUTTA                   **********
********                                                                   **********
*************************************************************************************
************************************************************************************/


* {margin:0px;padding:0px;font-size:100%;font-style:inherit;font-weight:inherit;vertical-align: baseline;}
html, body { width:100%; }
html { height:100%; overflow:auto; overflow-y:scroll; }
a img {border-width:0px;}
table {border-collapse:collapse;border-spacing:0;}


/********** FONTIT, OTSIKOT YMS **********/
/* Leipäteksti */
body {
	font:normal normal 14px Arial, Helvetica, sans-serif;
	line-height:20px;
}
	
/* Otsikko- yms erikoisfontti */
h1, h2, h3, h4, h5, h6, #nav ul li.level1 > a, .valikko-koti a, .valikko-avaa a,
.nappi, a.nappi, div.pagination span a, div.pagination span strong, #nav ul li.level1.viimeinen a {
	font-family:'BenchNine', 'Arial Narrow', Arial, sans-serif;
}

/* Otsikot isoilla kirjaimilla */
h1, h2 { text-transform:uppercase; }

/* Otsikot */
h1 { font-size: 42px; line-height:40px; font-weight:400; color:#000; }
h2 { font-size: 28px; line-height:30px; font-weight:400; color:#222; }
.laatikko .otsikko h2 { font-size:28px; } /* Laatikon otsikon fonttikoko */
h3 { font-size: 24px; line-height:30px; font-weight:400; color:#555; }
h4 {font-size: 14px;}
h5 {font-size: 13px;}
h6 {font-size: 12px;}

/* Valikko */
#nav ul li.level1 > a, .valikko-koti a, .valikko-avaa a { 
	font-weight:400; font-size:17px; text-transform:uppercase;
}

/* Napit ja sivutus */
.nappi, a.nappi, div.pagination span a, div.pagination span strong, #nav ul li.level1.viimeinen a {
	font-weight:400; font-size:17px; text-transform:uppercase;
}

/* Linkit */
a, a:visited, .eml { font-weight:700; }
h2 a { font-weight:400; }
h3 a { font-weight:400; }

/* Fonttien paksuuksia muissa elementeissä */
strong, b { font-weight:700; } /* Boldatut */
#subnav li a { font-weight:400; } /* Alavalikko */
#left ul.menu li a { font-weight:400; } /* Left-valikko */
#nav .submenu li a { font-weight:400; } /* Dropdown-valikko */
ul.sivukartta ul li a { font-weight:400; } /* Sivukartta */
a.call { font-weight:400; } /* Click to call */
.formNotice { font-weight:700; } /* Lomakkeen virheilmoitus */

/* Mobiili */
@media (max-width: 600px) {
	h1 { font-size:32px; line-height:32px; }
	h2 { font-size:24px; line-height:24px; }
	h3 { font-size:18px; line-height:20px; }
	h1,h2,h3,#nav ul li.level1 > a, .valikko-koti a, .valikko-avaa a,
	.nappi, a.nappi, div.pagination span a, div.pagination span strong, #nav ul li.level1.viimeinen a {
		text-transform:none;
	}
}
/*****************************************/

/* Linkit */
a, a:visited, .eml {
	color:#eb2d2d;
	text-decoration:none;
}
a:hover {text-decoration:underline;}

/* Marginit ja muut yleiset */
#right h2, #left h2, #footer h2 { margin-top:0px; }
h1:last-child { margin-bottom:10px; }

ol {list-style: decimal;}
ul {list-style: disc;}
li {margin-left: 30px;}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset,iframe {margin-bottom: 20px;}
ul+ul { margin-top:0px; }
h2,h3 { margin-top:30px; margin-bottom:10px; }
p + ul {margin-top:-10px;}
h1+h2, h1+h3 { margin-top:-10px !important; }
h2+h3 { margin-top:0px; }
h2:first-child, h3:first-child { margin-top:0px; }
em, i {font-style:italic;}
hr { border:0px; border-top:1px dotted #aaa; }
td { vertical-align:top; }



/************************************************************************************************************************/
/*** VÄRIT **************************************************************************************************************/
/************************************************************************************************************************/

/* Navi */
#nav ul li.level1 > a, .valikko-koti a, .valikko-avaa a {
	/* Navin linkkien väri */
	color:#333;
}

/* Dropdown */
#nav .submenu { background-color:#fff; } /* Taustaväri */
#nav .submenu li a { color:#333; } /* Linkkien väri */
#nav .submenu li a:hover { background-color:#f5f5f5; } /* Hoverin taustaväri */

/* Subnavi */
#subnav li a { color:#fff; }

/* Left navi */
#left ul.menu li a { color:#fff; }

/* Showcase */
#showcase .arkki { background-color:#fff; }

/* Sisältöalue */
#sisalto .arkki { background-color:#fff; background:rgba(255,255,255,0.9); }

/* Bottom */
#bottom .arkki { background-color:#fff; }

/* Footer */
#footer { color:#444; } /* Teksti */
#footer a { color:#444; } /* Linkit */
#footer h2, #footer h3 { color:#444; } /* Otsikot */
.sitemap, .copyright, .sitemap a { color:#fff; } /* Sivukartta, Tietosuojaseloste ja Copyright-teksti */

/* Laatikot */
	.laatikko.perus, .laatikko.kuvaboksi, .laatikko.liukuteksti {
		background:#fff;
	}
	/* Koko laatikon linkin hover */
	.laatikko.isolinkki:hover {
		background:#efefef;
	}



/* Laatikoiden ja nappien alatekstit */
	.nappi em, .laatikko .otsikko h2 em { color:#eee !important; }
	.nappi.vari2 em, .laatikko.laatikko-vari2 .otsikko h2 em { color:#eee !important; }
	.nappi.vari3 em, .laatikko.laatikko-vari3 .otsikko h2 em { color:#666 !important; }
	.nappi.vari4 em, .laatikko.laatikko-vari4 .otsikko h2 em { color:#eee !important; }

/* Click to call -nappi tietokoneella katsottuna */
a.call { color:#333; }

/* Lomake */
.lomake .lomake-rivi {
	/* Yksi lomakkeen rivi */
	background:rgba(255,255,255,0.2);
	border:1px solid #fff;
}
.lomake .lomake-rivi:hover { /* Lomakkeen rivin hover */
	background:rgba(255,255,255,0.2);
}
.lomake .Required { color:#a00; } /* Vaaditun kentän *-merkki */
.lomake input, .lomake textarea, .googlemaps #reittiAlku {
	/* Tekstikentät */
	background:#fdfdfd;
	border:1px solid #aaa;
	color:#333;
}
.lomake select, .lomake option {
	/* Dropdown */
	background:#fff;
	border:1px solid #aaa;
	color:#333;
}
.lomake input:focus, .lomake textarea:focus, .lomake input:active, .lomake textarea:active,
.googlemaps #reittiAlku:focus, .googlemaps #reittiAlku:active {
	/* Tekstikenttä aktiivisena */
	border:1px solid #444;
	background:#fff;
}
.formRequiredNotice, .formRequiredList { color:#900; } /* Varoitus kentän täyttämättä jättämisestä */

/* Uutiset */
.uutinen .paivamaara, p.uutispaiva { color:#555; } /* Uutisen päivämäärä */

/* Taulukot */
table.perus td { border:1px solid #ccc; } /* Perustyyli */

table.ekarivi tr:first-child, table.ekasolu td:first-child { background:#eee; } /* Ekan rivin ja solun väritykset */
table.vikarivi tr:last-child, table.vikasolu td:last-child { background:#ddd; } /* Vikan rivin ja solun väritykset */

.pagination span a {color:#fff;}


/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/




/*** HEADER *****************************************************************************************/
#header .arkki {position:relative;}
#header .logo p {
	margin:0px; 
	text-align:left; /* Logon sijainti */
}

/* Logo */
#header .logo { margin-top:0px; margin-left:5%; float:left; max-width:70%; }

/* Tarjouspallo */
#header .tarjouspallo { position:absolute; right:0; top:5px; }

#header .tarjouspallo p { margin:0px; }

/* Kuvien skaalaus */
#header .logo img, #header .tarjouspallo img { max-width:100%; }
/*
#header .tarjouspallo img { max-width:70%; }
*/

/* Responsiivinen logo ja tarjouspallo:
	- Tarjouspallo pois
	- Logo täysleveäksi ja keskitetyksi
*/
@media (max-width: 600px) {
	#header .logo { max-width:96%; width:96%; margin:0px 2% 5px 2%;position:relative;left:auto;right:auto;top:auto;bottom:auto;}
	#header .logo p { text-align:center; margin:0 auto; }
	#header .logo img { width:auto; max-width:100%; margin:0 auto; }
	#header .tarjouspallo { display:none; }
	
	
	/* Logon maksimikorkeus mobiilissa
		- Säädä isommaksi, jos logo on liian pieni!
	*/
	#header .logo img { max-height:100px; }
}

/****************************************************************************************************/


/*** NAVI *******************************************************************************************/
#nav .arkki {

	margin-bottom:10px;
	
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}


#nav .nav-body {
	padding:8px;
}

/* Navin efektit */
#nav .nav-fx1 {
	background:url(../../../images/heijastus.png) center center repeat-x;
}
#nav .nav-fx2 {
	border:2px solid rgba(0,0,0,0.05);
	
	background:url(../../../images/pattern.png) top center repeat;
	
	-moz-box-shadow: inset 0px 0px 4px rgba(255,255,255,0.5);
	-webkit-box-shadow: inset 0px 0px 4px rgba(255,255,255,0.5);
	box-shadow: inset 0px 0px 4px rgba(255,255,255,0.5);
}

/* Navi */

#nav ul.menu {margin:0px;padding:0px;}
#nav ul li.level1 {
	margin:0px;
	padding:0px;
	
	list-style:none;
	text-align:center;

	vertical-align:middle;
	
	position:relative;
}

#nav ul li.level1 > a, .valikko-koti a, .valikko-avaa a { 
	display:block;
	
	padding:10px 10px;
	
	text-align:center;	
	
	position:relative;
	z-index:24;
	background:transparent;
	
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

/* Custom gridiarvo 
	Jos haluat asettaa itse leveyden valikon napeille,
	aseta valikon ulkoasuasetuksista gridiarvoksi grid_custom,
	ja muokkaa alta.
*/
/*#nav li.grid_custom { width:19.95%; }*/

/* Kun hiiren vie kohdalle */
#nav li.level1 > a:hover { 
	text-shadow:0px 0px 3px #fff;
	text-decoration:none;
	background:rgba(0,0,0,0.1);
}

/* Aktiivinen sivu */
#nav li.level1.current a {
	/*background:rgb(0,0,0);
	background:rgba(0,0,0,0.1);*/
	
	text-decoration:underline;
}

/* Navin viimeinen linkki 
	Katso muut tyylittelyt kohdasta nappi4!
*/
#nav ul li.level1.viimeinen {
	background-position:center center;
}
#nav ul li.level1.viimeinen a {
	padding:0px !important;
	padding-top:7px !important;
	padding-bottom:7px !important;
}

.valikko-koti, .valikko-avaa, #nav li a .ikoni, .mobiililinkki { display:none; }


/********** Subnavi **********************/

#subnav { margin-bottom:10px; }
#subnav .arkki {

	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
#subnav .subnav-body {
	border:2px solid rgba(0,0,0,0.05);
	
	background:url(../../../images/pattern.png) top center repeat;
	
	-moz-box-shadow: inset 0px 0px 4px rgba(255,255,255,0.5);
	-webkit-box-shadow: inset 0px 0px 4px rgba(255,255,255,0.5);
	box-shadow: inset 0px 0px 4px rgba(255,255,255,0.5);
}
#subnav ul, #subnav li { margin:0px; padding:0px; list-style:none; }
#subnav li {
	float:left;
	margin:5px 0;
}
#subnav li a {
	display:block;
	padding:0 5px;
	margin:0 5px;
	
	text-align:center;
	
	line-height:24px;
	font-size:12px;
	
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}
#subnav li a:hover { background:rgba(0,0,0,0.05); text-decoration:none; }
#subnav li.current a { text-decoration:underline; }

/*****************************************/


/********** Left navi ********************/

#left ul.menu, #left ul.menu li { margin:0px; padding:0px; list-style:none; }
#left ul.menu li {
		
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
	
	margin:0 10px 4px 0;
}
#left ul.menu li a {
	display:block;
	
	font-size:12px;	
	
	padding:2px 2px 2px 8px;
	border:2px solid rgba(0,0,0,0.05);
	
	-moz-box-shadow: inset 0px 0px 4px rgba(255,255,255,0.3);
	-webkit-box-shadow: inset 0px 0px 4px rgba(255,255,255,0.3);
	box-shadow: inset 0px 0px 4px rgba(255,255,255,0.3);
		
	background:url(../../../images/heijastus.png) center center repeat-x;
}
#left ul.menu li a:after { content:" »"; }
#left ul.menu li a:hover { text-decoration:none; background-position:bottom center; }
#left ul.menu li.current a { text-decoration:underline; }

/*****************************************/

/* Mobiilin alavalikko */


/********** Dropdown *********************/
#nav li.level1 > .submenu {
	min-width:100%;
	width:200px; /* Dropdownin leveys */
	
	display:none;

	position:absolute;
	z-index:5000;
	top:100%;
	left:0px;
	
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
#nav .submenu ul, #nav .submenu li {
	margin:0px;
	padding:0px;
	
	height:auto;
	list-style:none;
}

#nav .submenu li a {
	display:block;
	
	padding:5px 8px;
	
	font-size:12px !important;

	text-decoration:none !important;
	text-align:left !important;
	
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}
#nav .submenu li a:hover {
	text-indent:5px;
	text-decoration:none;
}
#nav .submenu .link { display:block; }

/* Alasivun alasivu */
#nav .submenu .submenu .link { padding-left:5px; }
#nav .submenu .submenu .link:before { content:"- "; }

#nav ul li.level1.hasSubItems:hover > .submenu, #nav ul li.level1.hasSubItems.openSub > .submenu {display:block;}

/*****************************************/


/********** Responsiivinen navi **********/

/* 1023 pikseliä leveä ruutu tai alle */
@media (max-width: 1023px) {
	#nav ul li a { padding-left:0px; padding-right:0px; font-size:15px; font-size:16px !important; }
}

@media (max-width: 800px) {
	#nav .nav-fx1 { background:none; }
}

/* 600 pikseliä leveä ruutu tai alle 
	- Mobiilivalikko
*/
@media (max-width: 600px) {
	/* Mobiilivalikon fontti */
	#nav ul li.level1 > a, #nav .submenu li a, #nav ul li.level1.viimeinen a {
		font-family:Arial, sans-serif;
		font-size:13px !important;
		
		text-transform:none;
	}
	
	/* Vikan linkin resettaus */
	#nav ul li.level1.viimeinen a, #nav ul li.level1.viimeinen {
		-moz-box-shadow: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		background:transparent !important;
		border:0px !important;
		padding:0px !important;
	}

	#nav ul li.level1 > a, #nav .submenu li a, #nav ul li.level1.viimeinen > a {
		color:#333 !important; /* Tekstin väri */
	}

	/* Navin napit */
	#nav ul li.level1 {}
	#nav ul li.level1 > a, #nav .submenu li a, #nav ul li.level1.viimeinen a {
		padding:4px 6px !important;	
		text-align:left;
	}
	
	#nav ul li.level1 > a, #nav .submenu li a, #nav ul li.level1.viimeinen > a {
		border-bottom:1px solid #eee !important;
		margin:0px;
	}
	#nav ul li.level1:first-child > a { border-top: 1px solid #eee; }
	
	/* Hoveri ja focus */
	#nav li.level1 > a:hover, #nav .submenu li a:hover, #nav li.level1 > a:focus, #nav .submenu li a:focus,
	#nav li.level1.viimeinen > a:hover, #nav li.level1.viimeinen > a:focus {
		background:rgba(0,0,0,0.1) !important;
		text-decoration:none;
		text-indent:0px;
	}
	
	/* Sivu jossa ollaan */
	#nav li.active > a, #nav li.active > div > a { text-decoration:none !important; font-weight:700 !important; }
	#nav li.current > a { text-decoration:none !important; }
	
	/* Nuoli-ikoni */
	#nav li a .ikoni {
		display:block;
		float:right;
		
		margin-top:0.85%;
		
		-webkit-opacity: 0.15;
		-moz-opacity: 0.15;
		opacity: 0.15;
	}
	#nav li a:hover .ikoni, #nav li a:focus .ikoni {
		-webkit-opacity: 1;
		-moz-opacity: 1;
		opacity: 1;
	}
	
	/* Uusi valikkotyyli pienemmille näytöille */
	.valikko { margin-bottom:6px; }
	
	/* Nappien yhteiset tyylit */
	.valikko-koti, .valikko-avaa {
		display:block;
		float:left;
		
		background-position: center;
		background-repeat:repeat-x;
	}
	.valikko-koti a, .valikko-avaa a {
		display:block;
		
		padding:12px 0px !important;
		font-size:16px; 
		text-align:center;
		
		-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
		
		background:url(../../../images/heijastus.png) center center repeat-x !important;
	}
	.valikko-koti a:hover, .valikko-avaa a:hover {
		background:rgba(0,0,0,0.1) !important;
		text-decoration:none;
	}
	
	/* Nappien omat tyylit */
	.valikko-koti {
		width:20%;
		margin:0 2% 0px 2%;
	}
	.valikko-avaa {
		width:74%;
		margin:0 2% 0px 0;
	}
	
	/* Ikonit */
	.valikko-napit [class*="icon-"] {
		vertical-align:0px;
		
		/* Mustat ikonit */
		/*background-image: url("../../../images/glyphicons-halflings.png") !important;*/
	}
	
	/* Valikko-ikoni */
	.valikko-avaa .icon-th-list {margin-right:4px;}
	
	/* Valikon avausnappi, kun valikko on auki */
	.valikko-avaa.avattu {
		background:#fff;
		
	}
	.valikko-avaa.avattu .icon-th-list { background-image: url("../../../images/glyphicons-halflings.png") !important; }
	.valikko-avaa.avattu a { color:#000 !important; }
	
	/* Wrapper, jonka sisään itse valikko avataan */
	.valikko-lista {
		margin:0 2%;
		clear:both;
		
		position:relative;
		z-index:200;
		
		display:none;
		
		background:#fff;
		
		padding:6px;
	}
	
	/* Mobiililinkki */
	.mobiililinkki { display:block; width:96%; margin:0 2% 5px 2%; }
	
	/* Dropdownista tehdään subnavi */
	#nav li.level1 > .submenu {
		display:block;
		position:relative;
		top:auto;
		left:auto;
		bottom:auto;
		right:auto;
		z-index:1;
		width:auto;
		
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	#nav .submenu .link:before { content: "- "; }
	#nav .submenu .submenu .link { padding-left:10px; }
}

/* Avaa valikon, jos mennään yli 600px resoihin */
@media (min-width: 601px) {
	.valikko-lista {
		display:block !important;
	}
}

/****************************************************************************************************/


/*** SHOWCASE ***************************************************************************************/
#showcase { margin-bottom:10px;position:relative;}
#showcase .arkki {
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	
	position:relative;
	overflow:hidden;
}
/****************************************************************************************************/


/*** SISÄLTÖALUE ************************************************************************************/
#sisalto .arkki {
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
#sisalto .sisalto-body { padding:20px 10px; }
#sisalto { margin-bottom:10px; }

/****************************************************************************************************/


/*** BOTTOM *****************************************************************************************/
#bottom .arkki {
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
#bottom .bottom-body { padding:20px 10px; }
#bottom { margin-bottom:10px; }

/****************************************************************************************************/


/*** FOOTER *****************************************************************************************/
#footer .arkki {

	
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
#footer .footer-body {padding:20px;}
#footer { margin-bottom:5px; }

/* Ikonit */
#footer a.call .icon-phone, #footer a.email .icon-envelope {
	background-image: url("../../../images/glyphicons-halflings.png") !important;
}

/* Efektit */
#footer .footer-fx1 {
}
#footer .footer-fx2 {
	border:2px solid rgba(0,0,0,0.05);
	
	background:url(../../../images/pattern.png) top center repeat;
	
	-moz-box-shadow: inset 0px 0px 4px rgba(255,255,255,0.5);
	-webkit-box-shadow: inset 0px 0px 4px rgba(255,255,255,0.5);
	box-shadow: inset 0px 0px 4px rgba(255,255,255,0.5);
}

/* Copyright ja sivukarttalinkit */
#copy .copy-body {padding:0px 5px 10px 5px;}
.sitemap { float:left; }
.copyright { float:right; }

.sitemap p, .sitemap ul{ margin:0px 0px 10px 0px; padding:0px; display:inline; }
.sitemap li { margin:0px; list-style:none; display:inline; }
.sitemap li:after { content:" | "; }
.sitemap li:last-child:after { content: ""; }
.sitemap, .copyright { font-size:0.8em; }

/* Sivukartta */
ul.sivukartta {
	margin:0px;
	padding:0px;
	list-style:none;
}
ul.sivukartta li {
	margin:0px;
	padding:2px 0 0 0;
	list-style:none;
}
ul.sivukartta li a {
	display:inline-block;
	width:100%;
	max-width:300px;
	display:block;
	line-height:30px;
	padding:0px 5px;
	background:#fff;
	color:#222;
	margin:0px;
	border:1px solid #ddd;
	font-size:12px;
}
ul.sivukartta li a:hover { text-indent:5px; background:#f5f5f5; }
ul.sivukartta ul { margin:0px; padding:0px; list-style:none; background:url(../../../images/sitemap3.png) top left repeat-y; }
ul.sivukartta ul li { padding-left:18px; background:url(../../../images/sitemap1.png) top left no-repeat; }
ul.sivukartta ul li:last-child { }
ul.sivukartta ul li a { color:#444; }

/* Takaisin ylös */
.takaisinylos { display:none; }
@media (max-width: 600px) {
	.takaisinylos { display:block; }
	.takaisinylos a.nappi {text-align:right;}
	.takaisinylos a.nappi:hover { text-indent:0px !important; }
	.takaisinylos a.nappi .ikoni { 
		background-image: url("../../../images/glyphicons-halflings-white.png") !important; 
		vertical-align:baseline;
		margin-left:4px;
	}
}

/****************************************************************************************************/


/*** PALSTAT ****************************************************************************************/

/* Kaikki palstat */
.palstat {}

/* Yksi palsta */
.palsta {margin-bottom:10px;}

/* Palstan tekstialue */
.palsta-content {position:relative;}
.palsta-content h2 { margin-top:0px; margin-bottom:10px; }
.palsta-content p > img:last-child { margin-bottom:-15px; }
.palsta-content p:last-child { margin-bottom:0px; }

/* Palstan ylä- ja alaosa */
.palsta-yla {}
.palsta-ala {}


/****************************************************************************************************/


/*** NAPIT JA SIVUTUS *******************************************************************************/

.nappi, a.nappi, div.pagination span a, div.pagination span strong, #nav ul li.level1.viimeinen a {
	display:inline-block;
	clear:both;
	
	padding:8px 60px 8px 10px;
	
	background-repeat:repeat-x;
	
	
	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
	-o-transition: all 150ms ease-in-out;
	-ms-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
	
	cursor:pointer;
	
	border:3px solid rgba(0,0,0,0.05);

	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	
	position:relative;
}
/* Eri leveydet */
.nappi.levea, .nappi.tayslevea, #nav ul li.level1.viimeinen a { display:block; }
.nappi.levea { width:50%; }
.nappi.tayslevea { width:auto !important; }

/* Napit, joissa ei ole nuolta */
/*.nappi.vari3, .nappi.vari4, .nappi.huomio-pois, div.pagination span a, div.pagination span strong { 
	padding:8px 15px; 
}*/

/* Nuolten padding */
.nappi.huomio, .nappi.huomio1, .nappi.huomio2, .nappi.huomio3 {padding-right:60px;padding-left:10px;}

/* Pieni nappi */
.nappi.pieni { font-size:14px; padding-top:4px; padding-bottom:4px; }

/* Iso nappi */
.nappi.iso { font-size:20px; padding-top:12px; padding-bottom:12px; }

/* Pyöristykset */
.nappi, a.nappi, div.pagination span a,
div.pagination span strong,
div.pagination span, .huomio-nuoli {
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}


/* Nappi 1 ja sivutusnappi */
.nappi, a.nappi, div.pagination span a, div.pagination span strong {
}

/* Nappi 2 ja sivutuksen sivu, jolla ollaan */
.nappi.vari2, a.nappi.vari2, div.pagination span.curPage strong {
}

/* Nappi 3 */
.nappi.vari3, a.nappi.vari3 {
	border:3px solid rgba(0,0,0,0.03);
}


/* Nappi 4 ja navin viimeinen linkki */
.nappi.vari4, a.nappi.vari4, #nav ul li.level1.viimeinen {
	
}
.nappi.vari4, a.nappi.vari4, #nav ul li.level1.viimeinen a {
	border:3px solid rgba(0,0,0,0.05);
}



/* Huomionuolet */
.huomio-nuoli, .huomio1 .huomio-nuoli {
	display:block;
	background-position:center;
	background-repeat:repeat-x;
	width:36px;
	
	position:absolute;
	right:2px;
	top:2px;
	bottom:2px;
	
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
.huomio-nuoli .huomio-reunus {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	
	border:2px solid rgba(0,0,0,0.05);
}
.huomio-pois .huomio-nuoli, .vari3 .huomio-nuoli, .vari4 .huomio-nuoli {display:none;}

.vari2 .huomio-nuoli, .huomio2 .huomio-nuoli, .vari3.huomio2 .huomio-nuoli, .vari4.huomio2 .huomio-nuoli {
	background-repeat:repeat-x;
	
	display:block;
}
.huomio1 .huomio-nuoli, .vari3.huomio1 .huomio-nuoli, .vari4.huomio1 .huomio-nuoli {
	
	background-repeat:repeat-x;
	display:block;
}
.huomio .huomio-nuoli, .vari3.huomio .huomio-nuoli, .vari4.huomio .huomio-nuoli {
	background-repeat:repeat-x;
	
	display:block;
}


/* Nappien hoverit */
.nappi:hover, a.nappi:hover, div.pagination span a:hover, div.pagination span strong:hover {
	text-decoration:none;
	
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
	
	text-shadow:0px 0px 3px #fff;
}
.nappi.levea:hover, .nappi.tayslevea:hover {
	text-indent:8px;
}

.nappi:active, a.nappi:active, div.pagination span a:active, div.pagination span strong:active {
	background-position:bottom center;
}

/* Toinen rivi */
a.nappi em, .nappi em {
	display:block;
	clear:both;
	font-size:0.85em;
	font-style:normal;
}

/* Sivutus */
div.pagination span a, div.pagination span strong { padding:8px 10px; }
.sivutus { position:relative; }
.sivutus #load-first { position:relative; }
div.pagination { text-align:center; }
div.pagination span { display:inline-block; }
div.pagination span a, div.pagination span strong {
	display:inline-block;
}

/* Seuraavan sivun lataamiseen käytetty apudivi */
.sivutus #preloadNext { display:none; }

/* Latausanimaatio */
.sivutus .loading {
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	
	z-index:5;
	background-color:#ffffff;
	background-color:rgba(255,255,255,0.8);
	background-image:url(../../../images/loading.gif);
	background-repeat:no-repeat;
	background-position:center center;
	
	display:none;
}

/* Sivutus hover */
div.pagination span a:hover {
	text-decoration:none;
}

/* Click to call ja email -napit */
a.call {
	text-decoration:none;
	cursor:default;
}

a.email {}

/* Ikonit */
a.call .icon-phone, a.email .icon-envelope {
	margin-right:4px;
	
	/* Vaaleat ikonit */
	/*background-image: url("../../../images/glyphicons-halflings-white.png");*/
}

/* Isot click to call ja email -napit mobiiliin
	mobiilissa lisätään nappeihin automaattisesti
	luokat "nappi vari4 tayslevea huomio") */
a.call.nappi, a.email.nappi { padding:8px 5px; }
a.call.nappi .icon-phone, a.email.nappi .icon-envelope {
	background-image: url("../../../images/glyphicons-halflings-white.png");
	vertical-align:middle;
}
/****************************************************************************************************/


/*** LAATIKOT **************************************************************************************/

/***************************/
/* Laatikoiden pohja       */
/***************************/
	.laatikot {}
	.laatikko {
		height:auto;
		position:relative;
	
		margin-bottom:20px;
	}
	.laatikko .otsikko {position:relative;}
	.laatikko .kuva {
		height:200px;
		width:100%;
		
		background-size:cover;
		background-position:center center;
		background-repeat:no-repeat;
		
		margin-bottom:10px;
	}
	.laatikko.matala .kuva {height:100px;}
	.laatikko.korkea .kuva {height:300px;}
	
	.laatikko .laatikko-content { margin-bottom:10px; }	
	.laatikko h2, .laatikko h3 { margin-top:0px; margin-bottom:10px; }	
	.laatikko .linkki .nappi {display:block;}	
	.laatikko .open-icon {display:none;}
	
	/* Koko laatikon linkki */
	.laatikko a.isolinkki {
		display:block;
		z-index:50;
		position:absolute;
		top:0px; left:0px; right:0px; bottom:0px;
	}
	.laatikko.isolinkki:hover {
		-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.8);
		-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.8);
		box-shadow: 0px 0px 6px rgba(0,0,0,0.8);
	}
	
	/* Otsikot */
	.laatikko .otsikko h2 {
		position:relative;

		border:2px solid rgba(0,0,0,0.1);
		margin:0px;
		
		padding:8px 12px;
	}

	
	/* Otsikon alateksti */
	.laatikko .otsikko h2 em {
		display:block;
		clear:both;
		font-size:0.65em;
		font-style:normal;
	}

	/* Pyöristys */
	.laatikko.pyorea, .laatikko.pyorea .kuva,
	.laatikko.pyorea .otsikko, .laatikko.pyorea .otsikko h2,
	.laatikko.pyorea .linkki, .laatikko.pyorea .linkki .nappi,
	.laatikko.pyorea .teksti {
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}

	/* 
		Responsiivisuus
		- Piilotetaan laatikoiden sisältö otsikkonapin taakse avattaviksi
		- Lasketaan kuvien korkeutta
	*/
	@media (max-width: 600px) {

		.laatikot .laatikko.imOpen .otsikko .open-icon {
			background-position: -313px -119px;
		}
		.laatikko .kuva {height:150px;}
		.laatikko.matala .kuva {height:75px;}
		.laatikko.korkea .kuva  {height:225px;}
	}

/***************************/
/* Laatikko: Perus         */
/***************************/
	.laatikko.perus {
		-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		
		padding:15px;
	}
	.laatikko.perus .otsikko {margin:-15px -15px 15px -15px;}

	/*
		Responsiivisuus
		- Jos laatikossa ei tekstiä, poistetaan laatikko ja näytetään pelkkä linkkinappi
	*/
	@media (max-width:600px) {
		.laatikko.perus.noText.hasLink {
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			
			padding:0px;
			margin-bottom:0px !important;
		}
		.laatikko.perus.noText.hasLink .laatikko-content, .laatikko.perus.noText.hasLink .kuva,
		.laatikko.perus.noText.hasLink .otsikko {
			display:none;
		}
	}

/***************************/
/* Laatikko: Kuvaboksi     */
/***************************/
	.laatikko.kuvaboksi {
		-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		
		margin-left:10px;
		margin-right:10px;
	}
	
	.laatikko.kuvaboksi .otsikko {position:absolute;top:15px; left:-10px; right:-10px;}
	.laatikko.kuvaboksi .linkki { 
		margin:0px 0px 0px -5px;
		padding-bottom:15px;
		width:95%;
	}
	
	.laatikko.kuvaboksi .teksti {
		padding:0 10px;
	}
	
	/* Jos ei kuvaa */
	.laatikko.kuvaboksi.noPic .otsikko {
		position:relative;top:auto;left:auto;right:auto;
		margin-left:-10px; margin-right:-10px;
		margin-top:10px;
		margin-bottom:10px;
	}
	
	/* Jos ei tekstiä */
	.laatikko.kuvaboksi.hasPic.noText .laatikko-content {margin-bottom:0px;}
	.laatikko.kuvaboksi.hasPic.noText .linkki {
		margin:0px;
		position:absolute;
		left:-5px;
		bottom:20px;
		width:95%;
		padding:0px;
	}
	
	/* 
		Responsiivisuus
		- Resetataan napit ja otsikot
		- Siirretään tekstittömän laatikon nappi kuvan päälle
		- Pyöristysten fiksailua
	*/
	@media (max-width: 600px) {
		.laatikko.kuvaboksi {margin-left:0px; margin-right:0px; margin-bottom:15px;}
		.laatikko.kuvaboksi .otsikko {
			position:relative !important;
			top:auto !important;
			left:auto !important;
			right:auto !important;
			bottom:auto !important;
			margin:0px !important;
		}
		.laatikko.kuvaboksi .linkki {
			width:auto !important;
			margin:0px !important;
			padding:0px !important;
			position:relative !important;
			top:auto !important;
			left:auto !important;
			bottom:auto !important;
		}
		.laatikko.kuvaboksi.hasOtsikko.hasPic .kuva { margin-top:-15px; }
		.laatikko.kuvaboksi.hasPic.noText .kuva { margin-bottom:0px; }
		.laatikko.kuvaboksi.hasText .linkki { padding:0px 15px 15px 15px !important; }
		.laatikko.kuvaboksi.noText.hasPic .linkki { 
			position:absolute !important; bottom:15px !important; left:15px !important; right:15px !important; 
		}
		
		.laatikko.kuvaboksi.imOpen .otsikko, .laatikko.kuvaboksi.imOpen .otsikko h2,
		.laatikko.kuvaboksi.alwaysOpen .otsikko, .laatikko.kuvaboksi.alwaysOpen .otsikko h2 {
			-moz-bottom-left-border-radius: 0px; -webkit-bottom-left-border-radius: 0px; border-bottom-left-radius: 0px;
			-moz-bottom-right-border-radius: 0px; -webkit-bottom-right-border-radius: 0px; border-bottom-right-radius: 0px;
		}
		.laatikko.kuvaboksi.hasOtsikko.imOpen .kuva, .laatikko.kuvaboksi.hasOtsikko.alwaysOpen .kuva {
			-moz-top-left-border-radius: 0px; -webkit-top-left-border-radius: 0px; border-top-left-radius: 0px;
			-moz-top-right-border-radius: 0px; -webkit-top-right-border-radius: 0px; border-top-right-radius: 0px;
		}
	}

/***************************/
/* Laatikko: Liukuteksti   */
/***************************/
	.laatikko.liukuteksti {
		-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
		
		margin-bottom:10px;
	}
	.laatikko.liukuteksti .laatikko-content {
		overflow:hidden;
		position:relative;
		margin:0px;
	}
	.laatikko.liukuteksti .teksti {
		margin:0px;
		padding:15px;
		
		position:absolute;
		left:0px;
		bottom:-100%;
		right:0px;
		
		-webkit-transition: all 250ms;
		-moz-transition: all 250ms;
		-o-transition: all 250ms;
		-ms-transition: all 250ms;
		transition: all 250ms;
		
		/* Vaalea tausta ja tumma teksti */
		background:#fff;
		background:rgba(255,255,255,0.9);
		color:#333;
		
		/* Tumma tausta ja vaalea teksti */
		/*background:#000;
		background:rgba(0,0,0,0.7);
		color:#fff;*/
	}
	.laatikko.liukuteksti .kuva {margin:0px;}
	
	.laatikko.liukuteksti:hover .teksti, .isMobile .laatikko.liukuteksti .teksti,
	.isTablet .laatikko.liukuteksti .teksti { bottom:0px !important; }
	
	/* Pyöristyksen ylikirjoitus */
	.laatikko.liukuteksti.pyorea .otsikko, .laatikko.liukuteksti.pyorea .otsikko h2,
	.laatikko.liukuteksti.pyorea.hasLink .teksti, .laatikko.liukuteksti.pyorea.hasLink .kuva {
		-moz-bottom-left-border-radius: 0px; -webkit-bottom-left-border-radius: 0px; border-bottom-left-radius: 0px;
		-moz-bottom-right-border-radius: 0px; -webkit-bottom-right-border-radius: 0px; border-bottom-right-radius: 0px;
	}
	.laatikko.liukuteksti.pyorea .linkki, .laatikko.liukuteksti.pyorea .linkki .nappi,
	.laatikko.liukuteksti.pyorea.hasOtsikko .kuva {
		-moz-top-left-border-radius: 0px; -webkit-top-left-border-radius: 0px; border-top-left-radius: 0px;
		-moz-top-right-border-radius: 0px; -webkit-top-right-border-radius: 0px; border-top-right-radius: 0px;
	}
	
	/* 
		Responsiivisuus
		- 800px: Näytetään tekstit kuvien alla, ei päällä
		- 600px: Pyöristyksen fiksailua ja otsikon margin
	*/
	@media (max-width: 800px) {
		.laatikko.liukuteksti .teksti {
			position:relative;
			left:auto;
			bottom:auto;
			right:auto;
			
			background:transparent;
			
			padding-bottom:0px;
		}
		.laatikot .laatikko.liukuteksti .otsikko {
			margin-bottom:0px !important;
		}
	}
	@media (max-width:600px) {
		.laatikot .laatikko.liukuteksti .otsikko {
			margin-bottom:-10px !important;
		}
		.laatikot .laatikko.liukuteksti.pyorea .otsikko, .laatikot .laatikko.liukuteksti.pyorea .otsikko h2 {
			-moz-bottom-left-border-radius: 6px; -webkit-bottom-left-border-radius: 6px; border-bottom-left-radius: 6px;
			-moz-bottom-right-border-radius: 6px; -webkit-bottom-right-border-radius: 6px; border-bottom-right-radius: 6px;
		}
		.laatikot .laatikko.liukuteksti.imOpen .otsikko, .laatikot .laatikko.liukuteksti.alwaysOpen .otsikko {
			margin-bottom:0px !important;
		}
		.laatikot .laatikko.liukuteksti.pyorea.imOpen .otsikko, .laatikot .laatikko.liukuteksti.pyorea.alwaysOpen .otsikko,
		.laatikot .laatikko.liukuteksti.pyorea.imOpen .otsikko h2, .laatikot .laatikko.liukuteksti.pyorea.alwaysOpen .otsikko h2 {
			-moz-bottom-left-border-radius: 0px; -webkit-bottom-left-border-radius: 0px; border-bottom-left-radius: 0px;
			-moz-bottom-right-border-radius: 0px; -webkit-bottom-right-border-radius: 0px; border-bottom-right-radius: 0px;
		}
	}
	

/***************************/
/* Efektit yms             */
/***************************/

/* Nauhat */
.fx [class*="nauha-"] {
	position:absolute;
	top:0px;
	right:0px;
	
	z-index:10;

	width:120px;
	height:120px;

	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
.fx .nauha-tarjous { background-image:url(../../../images/nauha-tarjous.png); }
.fx .nauha-uutuus { background-image:url(../../../images/nauha-uutuus.png); }
.fx .nauha-luelisaa { background-image:url(../../../images/nauha-luelisaa.png); }
.fx .nauha-otayhteytta { background-image:url(../../../images/nauha-otayhteytta.png); }

.kuvalaatikot .fx [class*="nauha-"] {
	right:0px;
}

/* Pallot */
.fx [class*="pallo-"] {
	position:absolute;
	top:-12px;
	right:-12px;
	
	z-index:10;
	
	width:94px;
	height:94px;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
.fx .pallo-tarjous { background-image:url(../../../images/pallo-tarjous.png); }
.fx .pallo-uutuus { background-image:url(../../../images/pallo-uutuus.png); }
.fx .pallo-luelisaa { background-image:url(../../../images/pallo-luelisaa.png); }
.fx .pallo-otayhteytta { background-image:url(../../../images/pallo-otayhteytta.png); }

@media (max-width:600px) {
	.fx {display:none;}
}
/****************************************************************************************************/


/*** LOMAKE *****************************************************************************************/
.lomake {width:100%;}
.lomake .lomake-rivi {
	width:100%;
	margin-bottom:2px;
}
.lomake .lomake-rivi .lomake-otsikko {
	font-size:16px;
	line-height:18px;
}
.lomake .lomake-rivi.otsikko-rivi { background:transparent; border:0px; }
.lomake .lomake-rivi .lomake-otsikko h2 { padding:5px; margin:0px; }
.lomake .lomake-rivi .label {
	width:30%;
	
	margin-right:5%;
	padding:5px 0;
	
	float:left;
}
.lomake .lomake-rivi .label .rauli { display:block; padding:0 5px; }
.lomake .lomake-rivi .kentta { width:60%; float:left; padding:5px 0; }

/* Elementit */

.lomake .formTextinput, .lomake input[type=text], .lomake .formEmailinput { 
	height:20px; 
	line-height:20px;
	width:100%;
}
.lomake select {width:100%; height:24px;}
.lomake select option { line-height:24px; height:24px; }
.lomake textarea { max-width:100%; width:100%; min-height:125px; }

.lomake input:hover, .lomake textarea:hover {
	-moz-box-shadow: 0px 0px 5px #aaa;
	-webkit-box-shadow: 0px 0px 5px #aaa;
	box-shadow: 0px 0px 5px #aaa;
}
.lomake input:focus, .lomake textarea:focus, .lomake input:active, .lomake textarea:active {
	-moz-box-shadow: 0px 0px 8px #444;
	-webkit-box-shadow: 0px 0px 8px #444;
	box-shadow: 0px 0px 8px #444;
	outline:0;
}

.lomake label.formCheckboxLabelHolder, .lomake label.formRadioLabelHolder {
	display:inline-block;
	line-height:14px;
	margin-bottom:5px;
	margin-right:10px;
}

.laheta button {
	padding:8px 25px;
}

/* Huomautukset */

.formNotice { font-size:14px; }
.formRequiredList { font-style:italic; }

/****************************************************************************************************/


/*** UUTISET JA BLOGI *******************************************************************************/
.uutinen .info { margin-bottom:20px; }
.uutinen .luelisaa { width:60%; float:left; }
.uutinen .paivamaara { width:40%; float:right; text-align:right; font-style:italic; }
.uutinen-lyhyt {margin-bottom:5px;}
p.uutispaiva { font-style:italic; }

/* Blogi */
.blogi-kuva {
	width:25%;
	margin-left:5%;
	margin-bottom:5%;
	float:right;
}
.blogi-kuva .uutiskuva { width:100%; display:inline-block; }
.blogi-kuva img {max-width:100%;}

.blogi-lista h2 { display:block; }
.blogi-kommentit {
	display:inline-block;
	font-size:16px !important;
	line-height:20px;
	padding:0 4px;
	position:relative;
	top:-4px;
	text-align:center;
	margin-left:3px;
	
	background: #ffffff;
	border: 1px solid #c9c9c9;
}
.blogi-kommentit:hover {
	-moz-box-shadow: 0px 0px 2px #aaa;
	-webkit-box-shadow: 0px 0px 2px #aaa;
	box-shadow: 0px 0px 2px #aaa;
}
.blogi-kommentit:after, .blogi-kommentit:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.blogi-kommentit:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 6px;
	left: 50%;
	margin-left: -6px;
}
.blogi-kommentit:before {
	border-color: rgba(201, 201, 201, 0);
	border-top-color: #c9c9c9;
	border-width: 7px;
	left: 50%;
	margin-left: -7px;
}
.blogi p.uutispaiva { font-size:12px; }

/* Kommentointi */
.kommentit hr {margin:10px 0;}
.kommentti {}
.kommentti .tiedot {
	float:left;
	width:30%;
	margin-right:5%;
	
	font-size:12px;
}
.kommentti .tiedot p { margin-bottom:0px; }
.kommentti .teksti {
	float:right;
	width:65%;
}

/* Kategoriavalikko */
#right.blogisivu ul.menu, #right.blogisivu ul.menu li { margin:0px; padding:0px; list-style:none; }
#right.blogisivu .laatikko-content { margin-bottom:0px; }

/*** Responsiivinen **********************/
/* 600px tai alle: 
	- Piilotetaan uutiskuva
	- Lue lisää & päivämäärä allekkain
*/
@media (max-width: 600px) {
	.uutiskuva img { display:none; }
	.uutinen .luelisaa, .uutinen .paivamaara { width:auto; float:none; clear:both; text-align:left; }
	
	.blogi-teksti { width:auto !important; float:none; margin-right:none; }
	.blogi-kuva { display:none; }
}
/*****************************************/

/****************************************************************************************************/


/*** HAKU *******************************************************************************************/
.haku {margin-bottom:20px; line-height:30px; }
.haku-lomake-hakusanat, .haku-lomake-laheta { height:30px; line-height:30px; }
.haku-lomake-hakusanat {width:400px; max-width:100%;}
.haku-lomake-laheta { padding:0 8px; }

.haku.pieni .haku-lomake-hakusanat, .haku.pieni .haku-lomake-laheta {
	width:100%;
}

.haku-tulokset hr {margin-bottom:10px;}
.haku-tulokset .haku-isoteksti { margin-bottom:10px; }
.haku-tulokset .haku-lisateksti {
	margin-left:20px;
	border-left:2px solid #ccc;
	padding-left:10px;
	font-style:italic;
}

.haku .categorylist p { margin-bottom:0px; }
.haku .search_catlist label { margin-right:12px; }
.haku.pieni .search_catlist label { display:block; margin-right:0px; }
.haku .search_catlist label input { margin-right:2px; }

@media (max-width:600px) {
	.haku-lomake-hakusanat, .haku-lomake-laheta {
		width:100%;
		height:36px; line-height:36px;
	}
	
	.haku .search_catlist label { display:block; margin-right:0px; }
}
/****************************************************************************************************/


/*** GOOGLE MAPS ************************************************************************************/
.googlemaps #map_canvas {
	width:100%;
	height:250px;
	margin-bottom:5px;
}

.googlemaps .reittiHaku {}
.googlemaps .reittiHaku h3 { display:inline-block; margin:0px; }

.googlemaps .reittiHaku .pad { padding:3px !important; }

.googlemaps #rh-valinta select, .googlemaps #rh-valinta option {
	width:100%;
	padding:7px 4px 7px 2px;
}

.googlemaps #reittiAlku { width:100%; padding:8px 0px; text-indent:3px; }
.googlemaps #reittiAlku.empty { color:#999; font-style:italic; }
.googlemaps #haeReitti { width:100% !important; padding:4px 8px !important; text-align:left; }

#right .googlemaps .grid_6, #right .googlemaps .grid_4,
#left .googlemaps .grid_6, #left .googlemaps .grid_4 {
	float:none !important;
	width:auto !important;
	display:block !important;
}

/****************************************************************************************************/


/*** JAKAMINEN **************************************************************************************/
.jako {}
.jako .media { display:inline-block; }
.jako .media iframe { margin:0px; }

.jako .media.facebook { display:block; width:100%; max-width:450px; }
.jako .media.facebook .fb-like { position:relative; top:-3px; width:100%; max-width:450px; }
.jako .media.facebook .fb-like > span { width:100% !important; max-width:450px !important; }
.jako .media.facebook iframe { z-index:200; }
/****************************************************************************************************/


/*** TUOTTEET ***************************************************************************************/

/* Tuotesivupohja */
#left.tuotesivu hr { display:none; }
#left.tuotesivu h2 { margin-top:0px; }

/* Mobiilinappi */
.tuotelista-mobiilinappi { display:none; margin-top:-10px; }
.tuotelista-mobiilinappi a { margin-bottom:15px; }

/* Tuotelista */
.tuotelista .tuote-vasen {float:left; width:60%; margin-right:5%;}
.tuotelista .tuote-oikea {float:right; width:35%;}

.tuotelista .tuote-pad { padding:10px; }

/* Tuotekuvan jaetut tyylit */
.tuote-kuva {
	display:block;
	
	-webkit-transition: all 250ms;
	-moz-transition: all 250ms;
	-o-transition: all 250ms;
	-ms-transition: all 250ms;
	transition: all 250ms;
	

	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
}
.tuote-kuva:hover {
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.6);	
}

/* Tuotteen kuva tuotelistassa */
.tuotelista .tuote-kuva {
	width:100%;
	height:180px;	
}
/* Pienempi kuva, jos käytössä ei ole tuotekorttia */
.tuotelista.eikorttia .tuote-kuva {
	height:150px;
}

/* Tuotteen kuva tuotekortissa */
.tuotekortti .tuote-kuva {
	width:30%;
	float:right;
	height:200px;
	
	margin:0 0 20px 20px;
}

/* Responsiivisuus 
*/
@media (max-width:800px) {
	#left.tuotesivu hr { display:block; }
	.tuotelista-mobiilinappi { display:block; }
}
@media (max-width:600px) {
	.tuotelista .tuote-kuva { height:120px; }
}

@media (max-width:480px) {
	.tuotelista .tuote-vasen, .tuotelista .tuote-oikea { float:none; width:100%; margin:0px; }
	.tuotelista .tuote-kuva { margin-bottom:5px; }
}

/****************************************************************************************************/


/*** YLEISET ****************************************************************************************/

/* Taulukko */
table.perus td { padding:10px; }

/* Kuvat */
img.varjo {
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}

img.reunat {
	padding:9px;
	border:1px solid #aaa;
	background:#fff;
	
	max-width:95%;
}

/* Siirretään joku elementti alas */
.alas {
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
}

/* Lainaus/quote/nosto */
.quote {
	float:right;
	width:30%;
	
	padding:15px;
	margin-left:10px;
	margin-bottom:10px;
	
	background:rgba(100,100,100,0.1);
	
	font-style:italic;
	font-size:1.15em;
	line-height:1.25em;
}

/****************************************************************************************************/


/*** SLIDESHOW **************************************************************************************/

/* Sliderin korkeus eri resoluutioissa */
#vslider {height:250px;}
@media (max-width:1024px) {#vslider {height:220px;}}
@media (max-width:980px) {#vslider {height:200px;}}
@media (max-width:800px) {#vslider {height:180px; padding:0px;}}
@media (max-width:760px) {#vslider {height:165px;}}


/* Nappien taustaväri
	Läpinäkyvyyttä tukeva RGBA-arvo, muotoa:
	Punainen 0-255, Vihreä 0-255, Sininen 0-255, Läpinäkyvyys 0.0-1.0
*/
#vslider #prev, #vslider #next {
	background:#555; /* Tämä on varmistus, jos selain ei tue rgba-muotoa */
	background:rgba(0,0,0,0.1);
}
/* Napin hoveri */
#vslider #prev:hover, #vslider #next:hover {
	background:#222; /* Varmistus */
	background:rgba(0,0,0,0.2);
}

@media (min-width:801px) { #vslider .slide-wrap { width:86%; margin-left:7%; margin-right:7%; } }

/* 
	Vaaleataustainen laatikko sliden teksteille 
*/
#vslider .slide .teksti {
	background:rgba(0,0,0,0.6);
	padding:10px;
	margin:5px;
}
#vslider .slide .teksti p:last-child {margin-bottom:0px;}


/* 
	Slider piiloon mobiilissa (käytä, jos sliderissä ei ole tekstiä)
*/
/*@media (max-width:800px) {#vslider{display:none;}}*/


/*
	Alla oleva esimerkki sijoittaa ekan sliden kuvat hieman eri lailla.
	Vaihtamalla esim, .slide1 -> .slide2, säädät kakkossliden kuvia jne.
*/
/*#vslider .slide1 .kuva1 {left:0%; bottom:10%;}
#vslider .slide1 .kuva2 {left:10%;}
#vslider .slide1 .kuva3 {left:20%; bottom:10%;}
#vslider .slide1 .kuva4 {left:30%;}
#vslider .slide1 .kuva5 {left:40%; bottom:10%;}*/
/****************************************************************************************************/

/*** OMAT TYYLIT ************************************************************************************/

/* Navi */
#nav .arkki { max-width:100% }
@media (min-width:601px) and (max-width:1000px) { #nav li.grid_seitseman { width:24.975% !important; }}

/* Showcase */
#showcase { background:rgba(0,0,0,0.3); }

#showcase h2 {
	font-size:42px;
	line-height:46px;
	margin-bottom:0px;
	color:#ffa60a;
	
	-moz-text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-webkit-text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	text-shadow: 0px 0px 10px rgba(0,0,0,0.9);
}
#showcase h2 a { color:#ddd; }

/* Kuvagallerian sivutus napit */
.pagination span a { color:#333 !important; }

.icon-phone { vertical-align:1px; }