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

CSS RESET

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

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, font, 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 {

	margin: 0;

	padding: 0;

	border: 0;

	outline: 0;

	font-size: 100%;

	vertical-align: baseline;

}

ol, ul { list-style-type: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,

q:before, q:after { content: ''; content: none; }



/* remember to define focus styles! */

:focus { outline: 0; }



/* remember to highlight inserts somehow! */

ins { text-decoration: none; }

del { text-decoration: line-through; }



/* tables still need 'cellspacing="0"' in the markup */

table { border-collapse: collapse; border-spacing: 0; }



textarea { resize: none; }



#main-content ul {

list-style-type:disc;

margin:-10px 0 14px 40px;

}



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

CONTENT TEXT STYLES & HEADINGS

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



#header .logo a {

	color: #9ca9b7;

	font-family: Arial, Helvetica, sans-serif;

	font-weight: normal;

	text-decoration: none;

	font-size: 2.0em;

	position: absolute;

	margin: 20px 0 0 0;

	background-image:url(../img/logo-ttf.png);

	background-repeat:no-repeat;

	height:70px;

	width:110px;

}



#header .logo span {

	color: #fff;

	font-size: 18px;

	visibility:hidden;

}



#content h1{

	color: #1d2326;

	font-family: Arial, Helvetica, sans-serif;

	font-weight: bold;

	text-decoration: none;

	font-size: 18px;

	margin:0 0 20px 0;

}



#content h2 {

	color: #333;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	font-weight: bold;

	margin: 0 0 20px 0;

	text-align:left;

}



#content h3 {

	font-size: 14px;

	font-weight: bold;

	margin-bottom: 10px;

	color:#1d2326;

}



#content h4 {

	background: none;

	font-size: 1.2em;

	font-weight: bold;

	margin-bottom: 10px;

}



#content p {

	line-height: 18px;

	margin: 0 0 20px 0;

	color:#424e53;

	font-size:12px;

}



#content .news-item p {

	margin-bottom:0;

	}



#content .date {

	font-size:11px;

	font-weight: bold;

	

	}



#main-content a {text-decoration:none;}

#main-content a:hover {text-decoration:underline; color:#7c90a1;}



strong { font-weight: bolder; }

em { font-style: italic; }



input, select, th, td {font-size:1em}



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

LAYOUT

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



html { overflow-y: scroll; }

html { overflow: -moz-scrollbars-vertical; }



body {

	background-color: #1d2326;

	color: #808080;

	font-family: Arial, Helvetica, sans-serif;	

	text-align: center;

}



#header-wrap {

	background: #1d2326;

	height: 143px;

	position: relative;

	background-image:url(../img/bg-header-wrap.png);

	background-repeat:repeat-x;

	width:100%;

}



#header {	

	margin:0 auto;

	text-align:left;

	height: 143px;

	position: relative;

	width:980px;

	background-image:url(../img/bg-header.jpg);

	background-repeat:no-repeat;

	/*border:1px solid #000;*/

}

#page-header-home h2{

	font-family: 'Arial Black', Helvetica, sans-serif;

	font-size:25px;

	text-align: left;

	color:#1d2326;

	width:600px;

}



#page-header-home p{

	font-family: 'Lucida Sans', Lucida, Arial, Helvetica, sans-serif;

	font-size:14px;

	line-height:22px;

	text-align: left;

	color:#1d2326;

	width:600px;

	margin:0 0 15px 0;

}



#page-header-wrap {

	background-color:#b4bcbf;

	width:100%;

	height:200px;

	margin: 0 auto;

	text-align: left;

	float:left;

}



#page-header-home {

background:#b4bcbf url('../img/bg-pageheader-etusivu.jpg') 50% 0 no-repeat;

	width:980px;

	height:200px;

	margin: 0 auto;

	text-align: left;

	padding:25px 0;

	/*border:1px solid #000;*/

}



#page-header {

	width:980px;

	height:200px;

	margin: 0 auto;

	text-align: left;

	padding:0;

	/*border:1px solid #000;*/

}





#contentwrapper {

	background: #fff url(../img/bg-content.png) 0 0 repeat-x;

	width:100%;

	margin: 0 auto;

	text-align: left;

	float:left;

}



#content {

	width:980px;

	margin: 0 auto;

	text-align: left;

	padding:30px 0 40px 0;

	overflow:auto;

}



#column-left {

width:230px;

float:left;

/*border:1px solid #000;*/

}



#column-right {

width:730px;

float:left;

/*border:1px solid #000;*/

padding:0 0 0 20px;

}



body#page-110 #column-right{

width:920px;

float:left;

/*border:1px solid #000;*/

padding:0 0 0 20px;

}

/*/////// footer ///////*/



#footer-wrap {

	width:100%;

	margin: 0 auto;

	text-align: left;

	float:left;

}



#footer {

	width:960px;

	height:200px;

	margin: 0 auto;

	text-align: left;

	padding:0 10px;

	background:url(../img/bg-footer.png) no-repeat 0 0;

}



#footer-nav {

	float:none;

	clear:right;

	height:20px;

	margin:15px 0 10px 0;

}



#footer-copy {

	float:left;

	height:20px;

}



#footer-addr1 {

	float:left;

	height:20px;

	margin:0 0 0 200px;

}



#footer-addr2 {

	float:left;

	height:20px;

	margin:0 0 0 20px;

}



#kluu {

	float:left;

}



#kluu a{

	float:left;

	height:30px;

	width:45px;

	display:block;

	margin:0 0 0 20px;

}



#footer p {

	line-height: 1.4em;

	text-align: left;

	font-size:11px;

	color:#7e8e99;

}



#footer a {

	text-decoration: none;

	color: #7e8e99;

}



#footer a:hover {

	text-decoration: underline;

}



#footer span { position: absolute; left: -9000px; top: 0; }



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

=PRODUCT LIST

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

.product-list {

	list-style-type: none;

	margin: 0;

	padding: 0;

}

.product-item {

	background: url('../img/bg-product.png') no-repeat 0 0;

	float: left;

	margin: 0 7px 10px 0;

	min-height: 196px;

	padding: 10px 0 0;

	position: relative;

	text-align: center;

	width: 175px;

}

.product-title {

	color: #424e53;

	display: block;

	font: bold 12px Arial, Helvetica, sans-serif;

	height: 34px;

	line-height: 14px;

}

img.product-image {

	z-index: 4;

	vertical-align: middle;

}

.product-controls {

	background: url('../img/bg-product-controls.gif') repeat-x;

	border-bottom: 1px solid #e1e1e1;

	color: #999;

	display: block;

	font: bold 11px Arial, Helvetica, sans-serif;

	height: 26px;

	height/**/:/**/ 25px;

	margin: 0 0 0 1px;

	position: relative;

	padding: 1px 0 0;

	text-align: left;

	top: 1px;

	width: 173px;

	z-index: 7;

}

.control-title {

	float: left;

	position: relative;

	top: 5px;

	text-align: center;

	width: 49px;

	z-index: 7;

}

.control-buttons {

	display: block;

	float: left;

	margin: -25px 0 0 49px;

	position: relative;

	text-shadow: #fff 0 1px 0;

	z-index: 7;

}

a.control-btn {

	background: transparent url('../img/bg-control-btn.gif') no-repeat 0 0;

	color: #999;

	display: block;

	float: left;

	font: bold 12px Arial, Helvetica, sans-serif;

	height: 16px;

	margin-top: 0;

	padding: 5px 0 4px;

	text-decoration: none;

	width: 25px;

}

a.control-btn.current, a.control-btn.current:hover {

	background: url('../img/bg-control-btn.gif') no-repeat 0 -50px;

}

a.control-btn:hover {

	background: transparent url('../img/bg-control-btn.gif') no-repeat 0 -100px;

	color: #999;

}

.pricelist {

	background: url('../img/bg-pricelist-dark.gif') no-repeat 0 100%;

	clear: both;

	padding: 0 8px;

	text-align: left;

}

.pricelist a {

	color: #c4cbd0;

	display: block;

	font: normal 11px Arial, Helvetica, sans-serif;

	padding: 9px 0 8px;

	text-decoration: none;

}

.pricelist a:hover {

	color: #fff;

	text-decoration: underline;

}

a.hires {

	background: url('../img/bg-hires.gif') no-repeat;

	height: 22px;

	position: absolute;

	right: 6px;

	text-indent: -9000px;

	top: 108px;

	width: 22px;

	z-index: 6;

}

.product-item .uutuus {

	background: url('../img/bg-uutuus.gif') no-repeat;

	height: 72px;

	left: 0;

	position: absolute;

	top: 112px;

	width: 72px;

	z-index: 5;

}



.product-item-images {

	overflow: hidden;

	width: 171px;

	height: 135px; 

	position: relative; 

}

.product-item-image-container {

	float: left; 

	width: 2000em; 

	position: absolute; top: 0; left: 0; 

}

.product-item-image {

	float: left;

	display: block; 

	width: 171px; 

	height: 135px;

	margin: 0 3px;  

	position: relative;

	text-align: center;

}





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

NAVIGATION

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



#nav {

	bottom: 0;

	left:0;

	font-size: 1.1em;

	position: absolute;

	background-image:url(../img/mainmenu-fi.png);

	background-repeat:no-repeat;

}





#nav ul {

	display: inline;

	width: 700px;

}





#nav li {

	display: block;

	float: left;

	list-style: none;

	height:45px;

}

#nav li a {

	color: #fff;

	display: block;

	margin: 0;

	height:45px;

	line-height: 1.6em;

	text-align: center;

	text-decoration: none;

}



#nav li a:hover,#nav li a.active {

	background: url(../img/mainmenu-fi.png);

}



#nav #menu1{ left: 0; width: 91px; }

#nav #menu2 { left: 91px; width: 96px; }

#nav #menu3 { left: 187px; width: 81px; }

#nav #menu4 { left: 268px; width: 99px; }

#nav #menu5 { left: 268px; width: 80px; }

/*#nav #menu5 { left: 367px; width: 80px; }*/



#nav #menu1 a:hover, #nav #menu1 a.active { background: url(../img/mainmenu-fi.png) 0 -45px;}

#nav #menu2 a:hover, #nav #menu2 a.active { background: url(../img/mainmenu-fi.png) -91px -45px; }

#nav #menu3 a:hover, #nav #menu3 a.active { background: url(../img/mainmenu-fi.png) -187px -45px; }

#nav #menu4 a:hover, #nav #menu5 a.active { background: url(../img/mainmenu-fi.png) -268px -45px; }

#nav #menu5 a:hover, #nav #menu5 a.active { background: url(../img/mainmenu-fi.png) -268px -45px; }

/*#nav #menu5 a:hover, #nav #menu5 a.active { background: url(../img/mainmenu-fi.png) -367px -45px; }*/



#nav li span { position: absolute; left: -9000px; top: 0; }





/*/////// User options ///////*/



#user-options {

	padding:0;

	float:right;

	height:20px;

	background: url('../img/bg-user-options.png') no-repeat;

	font-family: Tahoma, Arial, Helvetica, sans-serif;

	/*border:1px solid #fff;

	background-color:#009999;*/

}



#user-options span{

	padding:3px 15px 0 15px;

	float:right;

	font-size: 11px;

	height:20px;

	background: url('../img/bg-user-options-right.png') no-repeat 100% 0;

}



#user-options a {

	color: #f3f3f3;

	margin:0;

	line-height: 1.0em;

	text-align: left;

	text-decoration: none;

	font-weight:bold;

	

}



#user-options a:hover {

	color: #979ea4;

}



/*/////// Subnav ///////*/



#subnav {

	background: #eaebec;

	border: 1px solid #e6e7e8;

	margin:0 0 0 0;

	padding: 8px;

	float:left;

	width: 230px;

	width/**/:/**/ 214px;

	-moz-border-radius: 4px;

	-khtml-border-radius: 4px;

	-webkit-border-radius: 4px;

}



#subnav li, #subnav li.current {

	background: url('../img/bg-subnav-li.gif') no-repeat 0 100%;

	list-style-type:none;

	margin:0;

	padding: 4px 0 7px;

}

#subnav li.current a, #subnav li.current a:hover {

	background: #80868a url('../img/bg-subnav-li-a.gif') no-repeat 194px -82px;

	color: #fff;

	font-weight: bold;

	-moz-border-radius: 3px;

	-khtml-border-radius: 3px;

	-webkit-border-radius: 3px;

}

#subnav li a {

	background: url('../img/bg-subnav-li-a.gif') no-repeat 194px 9px;

	color: #424e53;

	display:block;

	font: normal 12px Arial, Helvetica, sans-serif;

	line-height: 16px;

	padding: 5px 11px 6px;

	text-decoration:none;

}

#subnav li a:hover {

	background: #d4d7d9 url('../img/bg-subnav-li-a.gif') no-repeat 194px 9px;

	color: #424e53;

	-moz-border-radius: 3px;

	-khtml-border-radius: 3px;

	-webkit-border-radius: 3px;

}



#subnav ul{

	margin:0;

	padding: 4px 0;

}

#subnav ul li {

	margin: 0 12px 0 16px;

	padding: 3px 0 5px;

}

#subnav ul li a {

	background: url('../img/bg-subnav-li-a.gif') no-repeat 194px 9px;

}

#subnav ul li a:hover {

	background: #d4d7d9 url('../img/bg-subnav-li-a.gif') no-repeat 194px 9px;

}





/*** Hakukentt� ***/

#search { 

background: url('../img/bg-search.png') 0 0; 

	position:absolute;

	top:30px;

	left:620px;

	height: 41px;

	width: 360px;

	padding:0;

	z-index:10;

}

#search input#ajaxSearch_input {

	background:none;

	border: none;

	color: #242b2f;

	display: block;

	float: left;

	font: italic 14px Arial, Helvetica, sans-serif;

	line-height:20px;

	height: 21px;

	width: 280px;

	padding:10px;

}

#search input#ajaxSearch_input:focus { background-position: 0 0; }

#search input#ajaxSearch_input:active { background-position: 0 0; }

#search input#ajaxSearch_submit {

	background: url('../img/bg-search.png') -300px 0; 

	border: none;

	cursor: pointer;

	display: block;

	float: left;

	height: 41px;

	width: 60px;

}

#search input#ajaxSearch_submit:hover { background-position: -300px -41px; }

#search input#ajaxSearch_submit:active { background-position: -300px -82px;}











/*/////// links  ///////*/



a {

	color: #7C90A1;

	text-decoration: underline;

}

a:hover { color: #234466; }





/*/////// misc ///////*/



a img { border: none; }

acronym { cursor: help; }





/*/////// classes ///////*/



.right {

  float: right;

  margin: .5em 0  6px 12px;

}

.left {

  float: left;

  margin: .5em 12px 6px 0;

}



.oikea {

  float: right;

  margin: .5em 0  6px 12px;

}

.vasen {

  float: left;

  margin: .5em 12px 6px 0;

}

.top20 {

  margin-top:-20px;

}

div.horRule{

	background: url('../img/bg-hr.gif') repeat-x bottom left;

	clear:both;

	height: 1px;

	margin:20px 0;

}

div.horRule hr{display: none;}



/*/////// misc elements ///////*/



#infobox {

width:610px;

background-color:#f1f1f1;

border:1px solid #dbdbdb;

padding:20px 20px 10px 20px;

float:left;

}



#infobox h3 {

	font-size: 14px;

	font-weight: bold;

	margin-bottom: 4px;

	color:#73838e;

}



#infobox h4 {

	background: none;

	font-size: 12px;

	font-weight: bold;

	margin: 14px 0 0 0;

	color:#73838e;

}



#infobox p {

	font-size:12px;

	margin:0 0 10px 0;

}



#infobox hr {

color:#fff;

border:none;

border-top:1px solid #dbdbdb;

border-bottom:1px solid #fff;

}



.painike {

	font-family:Tahoma, Arial, Helvetica;

	font-size: 11px; 

	font-weight: bold; 

	text-decoration: none; 

	color: #dfe1e4;

	line-height:30px;

	padding: 0 10px 0 10px; 

	width: auto; 

	background: url('../img/bg-painike.png') no-repeat 0 0;

	display:block;

	float:left;

}



a.painike :hover{

	color: #fff;



}



.painike span{

	font-family:Tahoma, Arial, Helvetica;

	font-size: 11px; 

	font-weight: bold; 

	text-decoration: none; 

	color: #dfe1e4;

	padding: 0 25px 0 0; 

	width: auto;

	background: url('../img/bg-painike-right.png') no-repeat 100% 0;

	display:block;

	float:left;

	margin-right:-15px;

}





#ota-yhteytta ul {

display: inline;

width: 121px;

background-image:url(../img/btn-ota-yhteytta.png);

height:27px;

float:left;

margin: 200px 0 0 250px;

}



body#en #ota-yhteytta ul {

display: inline;

width: 112px;

background-image:url(../img/btn-contact-us.png);

height:27px;

float:left;

margin: 200px 0 0 250px;

}



body#en #ota-yhteytta #btn{ left: 0; width: 112px; }

body#en #ota-yhteytta #btn a:hover { background: url(../img/btn-contact-us.png) 0 -27px;}



#ota-yhteytta li {

  display: block;

  float: left;

  list-style: none;

  height:27px;

}



#ota-yhteytta li a {

  color: #fff;

  display: block;

  margin: 0;

  height:27px;

  line-height: 1.6em;

  text-align: center;

  text-decoration: none;

}



#ota-yhteytta #btn{ left: 0; width: 121px; }

#ota-yhteytta #btn a:hover { background: url(../img/btn-ota-yhteytta.png) 0 -27px;}



#ota-yhteytta li span { position: absolute; left: -9000px; top: 0; }



.category-item {

padding-bottom:5px;

margin-bottom:50px;

background-image:url(../img/bg-dot2.gif);

background-repeat:repeat-x;

background-position:bottom;

}



.news-item {

	border-bottom:1px solid #f1f2f3;

	padding-bottom:15px;

	margin: 15px 0 0 0;

	}

	

/*    Login   */

#user-login-form {

background-color:#1d2326;

width:260px;

padding:20px 20px 15px 20px;

position:absolute;

top:19px;

left:662px;

z-index:100;

border-left:1px solid #424b51;

border-right:1px solid #424b51;

border-bottom:1px solid #424b51;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-moz-border-radius-bottomright: 5px;

-moz-border-radius-bottomleft: 5px;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

-moz-box-shadow: 0 2px 3px 0px #000;

-webkit-box-shadow: 0 2px 3px 0px #000;

box-shadow: 0 2px 3px 0px #000;

display:none;

}

.form-row {

margin:0 0 15px 0;

}



#extranet-username-label, #extranet-password-label {

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:normal;

color:#778189;

margin: 0 5px 0 0;

line-height:20px;

}



#extranet-username, #extranet-password {

padding:0 4px 0 4px;

float:right;

width:190px;

height:20px;

border:0;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

background-color:#a9b1b6;

color:#1b2023;

font-size:12px;

line-height:18px;

}



#extranet-login-button {

float:right;

border:0;

height:24px;

line-height:24px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

background: url(../img/bg-painike.png) -20px -3px;

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

color:#dfe1e4;

}



.wlpeMessage {

font-size:11px;

font-weight:bold;

color:#eab88c;

margin-bottom:25px;

}



.wlpeMessage p {

margin:5px 0;

line-height:16px;

}



#request-form .request-label {

font-size:12px;

font-weight:bold;

color:#333;

margin:0 0 4px 0;

}



#request-form .request-input .field{

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

font-weight:normal;

color:#666;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

border:1px solid #999999;

height:24px;

width:250px;

padding:0 4px;

line-height:22px;

}



div.errors, div.required, span.required { color: #a00000; font-weight: bold; }



div.errors {

background-color:#ffdede;

font-size: 0.875em; 

margin-bottom: 1em; 

border: 2px solid #fe7f7f; 

-moz-border-radius: 4px;

border-radius: 4px;

padding:10px;}