@charset "UTF-8";

/*##################################
#       TOOLSGRIP WEBLAYOUT        				#
#                                  											#
#    Copyright: Nemodesign Oy      					#
#             STYLE                									#
##################################*/



html{ height: 100%; background: #D0D0D0;}
body{ height: 100%; font-family: Arial, Helvetica, sans-serif; line-height: 1; font-size: 62.5%;}

a{ text-decoration: none; color: #999;}

a:hover{ text-decoration: underline;}

#wrap{ position: relative; min-height: 100%; width: 900px; margin: 0 auto; background: #fff;}

img.varjo{ -moz-box-shadow: 3px 3px 4px #000; 
-webkit-box-shadow: 3px 3px 4px #000; 
box-shadow: 3px 3px 4px #000; 
/*IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
/* IE 5.5 - 7 */ 
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');}

#middle_container{ padding-bottom: 60px;}


#header{ height: 70px; width: 100%; background: #000; padding-top: 10px;}


#header h1{
	height: 60px; width: 248px; text-indent: -9999px; background: url(img/toolsgrip.png) left top no-repeat; margin-left: 20px;
}

.kielipalkki{ background: url(img/globe.png) left top no-repeat; margin-left: 710px;width: 180px; height: 71px; margin-top: -95px; padding-top: 6px;}

.kielipalkki img{ float: right; margin: 2px;}
img.vasen{ margin-left: 80px;}

/* #### NAVI #### */

#nav{ 
	height: 30px; 
	width: 100%; 
	background: url(img/navi_bg.jpg) center top no-repeat;
}

#navi{
}

#navi li{ 
	float: left; 
	text-align:center; 
	font-size: 14px; 
	background: url(img/navi_spacer.jpg) top right no-repeat;
}

#navi li a{ 
	height: 20px; 
	display: block; 
	color: #FFF; 
	padding: 10px 20px 0 20px;
}

#navi li a:hover{ 
	background:url(img/rollover.png) center top repeat-x; 
	text-decoration: none;
}

/*
ul#navi li#etusivu a{ width: 129px; margin-left: 34px;}
ul#navi li#tuote a{ width: 151px;}
ul#navi li#kayttoohje a{ width: 142px;}
ul#navi li#tietoa a{ width: 130px;}
ul#navi li#yhteystiedot a{ width: 139px;}
ul#navi li#jalleenmyyjat a{ width: 130px;}
*/

ul#navi li.active a, ul#navi li a.current_page_item{ background: url(img/rollover.png) center top repeat-x;}
ul#navi li.current_page_item a:hover, ul#navi li.current_page_item a:active{ background: url(img/rollover.png) center top repeat-x; cursor: default;}


/* #### SLOGAN #### */

#slogan{ height: 200px; background: url(img/slogan_bg2.jpg) center top repeat-x;}

#slogan.flashi{ height: 200px; background: url(img/flashi.jpg) center top no-repeat;}
#slogan.flashi div#flashi{ width: 315px; height: 173px; margin-left: 320px; padding-top: 18px; text-align: center;}
#slogan.flashi div#flashi a{ color:#000; font-weight: bold;}

#sloganspacer{ clear: both; height: 8px; background: url(img/slogan_spacer.jpg) center top no-repeat;}

/* #### SISALTO #### */

h1{ font-size: 2.5em; color: #666; padding: 2.5em 0 1em 0.5em; text-shadow: #999 1px 1px 2px;}
p{ font-size: 1.2em; color:#555; padding: 0.5em 0 0.5em 1.7em; line-height: 1.3em;}

#sisalto{ background: url(img/sisalto_gd.png) center top repeat-x; min-height: 200px;}

#sisalto_vasen{ float: left; width: 420px; padding: 12px; }
#sisalto_vasen a img{ margin: 0 0 5px 30px;}

#sisalto_oikea{ float: right; width: 420px; padding: 60px 30px 30px 0;}
img.ukko{margin-top: -50px}


/* #### FOOTER #### */
#klaari{ clear: both; width: 100%; height: 1px;}
#footer{ position: absolute; bottom: 0; text-align: center; background: #000; width: 100%; height: 60px; margin: 0; padding: 0}
#footer p{ color: #CCC; font-size: 12px; padding-top: 3px; line-height: 1.2;}

.linkit{ float: right; margin-right: 5px; width: 300px; height: 20px; margin-top: -15px;}
.linkit img{ margin: 2px;}

#tooltippi{
	position: absolute;
	z-index: 999;
	display: none;
	padding: 10px;
	padding-top: 30px;
	background: url(img/toprepeat.png) center top repeat-x #666;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 5px 5px 5px #000;
	-moz-box-shadow: 5px 5px 5px #000;
	box-shadow: 5px 5px 5px #000;
	width:400px;
}
#tooltippi p{
	padding: 10px;
	text-align: left;
	color: #fff;
	
}
#vasen{
	float: left;
	width: 45%;
	z-index: 999;
}
#oikee{
	float: right;
	width: 45%;
	padding-top: 20px;
	
}

#tooltippi #vasen p{
	text-align: left;
	z-index: 999;
}

.sulje{
	display: block;
	width:25px;
	height:25px;
	background: url(img/sulje.png) top;
	position: absolute; top: 0; right: 0;
	margin: -5px -5px 0 0;
	
}
.sulje:hover{
	background-position: bottom;
}
#pohja{
	position: absolute; bottom: 0; z-index: 1;
	width: 400px; 
	height: 25px; 
	background: #333;
}

* {
  box-sizing: border-box;
}

.kuva-row {
  display: flex;
}

/* Create three equal columns that sits next to each other */
.kuva-column {
  flex: 33.33%;
  padding: 5px;
}