@charset "utf-8";

/* CSS imports. Tried to keep in minimum. */

@import "base.css";
@import "base.fams.css";
@import "base.forms.css";

/* Layout
----------------------------------------------------------- */

body { background:#E2E2E2 url("../i/bg_page.gif") repeat-x top; text-align: center; }
#Wrapper {
	position: relative; width: 970px; margin: 40px auto;
	text-align: left; background: #FFF;
}
#SiteNav {
	position: absolute; right: 0px; top: -30px; list-style: square inside;
	color: #ccc; font-size: 10px; margin: 0; line-height: 20px;
}
#SiteNav li { position: relative; float: left; width: auto; margin-left: 10px; background: none; padding: 0; }
#SiteNav li a { font-size: 11px; color: #8d8d8d; padding: 5px 0; }

#Header {
	position: relative; clear: both; height: 232px;
}
#Logo {
	display: block; position: relative; width: 970px; height: 134px;
	overflow: hidden; margin: 0 0 41px;
}
#Logo a { position: absolute; top: 0px; left: 37px; width: 35px; height: 134px; }
#Logo span { position: absolute; left: -9999em; }

#MainNav {
	position: relative; margin: 0 12px; height: 39px;
	background: url(../i/mainnav-bg.gif) repeat-x left top;
}
#MainNav ul {
	position: relative; float: left; width: 710px; height: 39px;
	margin: 0; padding: 0; list-style: none outside;
}
#MainNav li {
	position: relative; float: left; width: 116px; height: 39px; padding: 0 2px 0 0;
	background: url(../i/mainnav-sp.gif) no-repeat right top; text-align: center;
}
#MainNav li.FirstNavigationItem { width: 118px; }
#MainNav li a {
	position: relative; float: left; width: 116px; height: 35px; line-height: 35px; padding: 1px 0 3px;
	text-decoration: none; font-weight: bold; color: #a3a3a3;
}
#MainNav li a:hover { background: url(../i/mainnav-hover.gif) repeat-x left 1px; }
#MainNav li.FirstNavigationItem a { width: 118px; background: url(../i/mainnav-first.gif) no-repeat left top; }
#MainNav li.FirstNavigationItem a:hover { background-image: url(../i/mainnav-first-hover.gif); }
#SearchForm {
	position: relative; float: left; width: 196px; height: 30px;
	background: url(../i/mainnav-search.gif) no-repeat left top;
	padding: 9px 25px 0 15px;
}
#SearchForm label { display: none; }
#SearchForm input { float: right; border: 0; margin-right: 0; padding: 3px 2px; background: #fff; width: 170px; }
#SearchForm button {
	float: left; background: url(../i/mainnav-search-button.gif) no-repeat 50% 50%; overflow: hidden;
	width: 21px; height: 21px; border: 0; margin: 0; padding: 0; cursor: pointer; top: -1px; margin-right: 0;
}
#SearchForm button span { position: absolute; left: -9999em; }

#MainWrap { position: relative; padding: 0 13px; }

#SidePanel {
	float: left; width: 236px;
}
#SidePanel a { color: #999; }
.SideBox {
	margin: 0 -1px 16px; width: 238px;
}
.SideBox a { text-decoration: none; }

.AdBox { display: block; color: #999; padding: 18px 10px 20px 100px; width: 128px; text-decoration: none; font-size: 11px; }

#NatureFeat { height: 18px; padding: 9px 10px 11px 100px; background: url(../i/banner-nature.gif) no-repeat left top; }
#PaintFeat { height: 54px; padding: 13px 10px 16px 100px; background: url(../i/banner-paint.jpg) no-repeat left top; }
#KeyFlagFeat { height: 18px; padding: 31px 10px 34px 100px; background: url(../i/banner-avainlippu.gif) no-repeat left top; }

#InfoNav {
	padding: 0 0 12px;
	background: url(../i/box-lastitem-content.gif) no-repeat left bottom;
}
#InfoNav h2 {
	background: url(../i/box-firstitem.gif) no-repeat left top;
	font-size: 12px; padding: 0 19px; height: 37px; line-height: 36px;
	font-weight: bold; margin: 0;
}
#InfoNav ul { padding: 0 19px; margin: 6px 0 0; }

#InfoPage .right { text-align: right; }

#SecondaryNav {}
#SecondaryNav ul, #SecondaryNav ul li { margin: 0; padding: 0; list-style: none outside; background: none; }
#SecondaryNav ul ul { padding: 9px 18px; background: url(../i/box-content.gif) no-repeat left bottom; font-weight: normal; }
#SecondaryNav ul li.LastNavigationItem ul { background: url(../i/box-lastitem-content.gif) no-repeat left bottom; padding-bottom: 12px; }
#SecondaryNav ul ul li { padding-left: 12px; background: url(../i/ListItem.gif) no-repeat left 8px; font-size: 11px; }
#SecondaryNav ul { font-weight: bold; }
#SecondaryNav ul ul { font-weight: normal; }
#SecondaryNav ul li a {
	display: block; height: auto; line-height: 18px; padding: 9px 18px;
	background: url(../i/box-navitem.gif) no-repeat left top; color: #999;
}

.RuWrap #SecondaryNav ul li a { display: block; height: auto; line-height: 18px; padding: 9px 18px; background: url(../i/box-navitem-ru.gif) no-repeat left top; color: #999; }
.EeWrap #SecondaryNav ul li a { display: block; height: auto; line-height: 18px; padding: 9px 18px; background: url(../i/box-navitem-ru.gif) no-repeat left top; color: #999; }
.NoWrap #SecondaryNav ul li a { display: block; height: auto; line-height: 18px; padding: 9px 18px; background: url(../i/box-navitem-ru.gif) no-repeat left top; color: #999; }
.SeWrap #SecondaryNav ul li a { display: block; height: auto; line-height: 18px; padding: 9px 18px; background: url(../i/box-navitem-ru.gif) no-repeat left top; color: #999; }
.EnWrap #SecondaryNav ul li a { display: block; height: auto; line-height: 18px; padding: 9px 18px; background: url(../i/box-navitem-ru.gif) no-repeat left top; color: #999; }

#SecondaryNav ul li ul li a { color: #555; }
#SecondaryNav ul li.LastNavigationItem.Current a { background: url(../i/box-lastitem.gif) top; padding-bottom: 12px; }
#SecondaryNav ul li.FirstNavigationItem.Current a { background: url(../i/box-firstitem.gif); padding-top: 10px; }
#SecondaryNav ul li.LastNavigationItem a { background: url(../i/box-lastitem.gif) bottom !important; padding-bottom: 12px; }
#SecondaryNav ul li.FirstNavigationItem a { background: url(../i/box-firstitem.gif); padding-top: 10px; }
#SecondaryNav ul li.Current a { padding: 9px 18px; background: url(../i/box-navitem.gif); }

.RuWrap #SecondaryNav ul li.LastNavigationItem.Current a { background: url(../i/box-lastitem-ru.gif) bottom; padding-bottom: 12px; }
.RuWrap #SecondaryNav ul li.FirstNavigationItem.Current a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.RuWrap #SecondaryNav ul li.LastNavigationItem a { background: url(../i/box-lastitem-ru.gif) bottom !important; padding-bottom: 12px; }
.RuWrap #SecondaryNav ul li.FirstNavigationItem a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.RuWrap #SecondaryNav ul li.Current a { padding: 9px 18px; background: url(../i/box-navitem-ru.gif); }

.EeWrap #SecondaryNav ul li.LastNavigationItem.Current a { background: url(../i/box-lastitem-ru.gif) bottom; padding-bottom: 12px; }
.EeWrap #SecondaryNav ul li.FirstNavigationItem.Current a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.EeWrap #SecondaryNav ul li.LastNavigationItem a { background: url(../i/box-lastitem-ru.gif) bottom !important; padding-bottom: 12px; }
.EeWrap #SecondaryNav ul li.FirstNavigationItem a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.EeWrap #SecondaryNav ul li.Current a { padding: 9px 18px; background: url(../i/box-navitem-ru.gif); }

.NoWrap #SecondaryNav ul li.LastNavigationItem.Current a { background: url(../i/box-lastitem-ru.gif) bottom; padding-bottom: 12px; }
.NoWrap #SecondaryNav ul li.FirstNavigationItem.Current a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.NoWrap #SecondaryNav ul li.LastNavigationItem a { background: url(../i/box-lastitem-ru.gif) bottom !important; padding-bottom: 12px; }
.NoWrap #SecondaryNav ul li.FirstNavigationItem a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.NoWrap #SecondaryNav ul li.Current a { padding: 9px 18px; background: url(../i/box-navitem-ru.gif); }

.SeWrap #SecondaryNav ul li.LastNavigationItem.Current a { background: url(../i/box-lastitem-ru.gif) bottom; padding-bottom: 12px; }
.SeWrap #SecondaryNav ul li.FirstNavigationItem.Current a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.SeWrap #SecondaryNav ul li.LastNavigationItem a { background: url(../i/box-lastitem-ru.gif) bottom !important; padding-bottom: 12px; }
.SeWrap #SecondaryNav ul li.FirstNavigationItem a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.SeWrap #SecondaryNav ul li.Current a { padding: 9px 18px; background: url(../i/box-navitem-ru.gif); }

.EnWrap #SecondaryNav ul li.LastNavigationItem.Current a { background: url(../i/box-lastitem-ru.gif) bottom; padding-bottom: 12px; }
.EnWrap #SecondaryNav ul li.FirstNavigationItem.Current a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.EnWrap #SecondaryNav ul li.LastNavigationItem a { background: url(../i/box-lastitem-ru.gif) bottom !important; padding-bottom: 12px; }
.EnWrap #SecondaryNav ul li.FirstNavigationItem a { background: url(../i/box-firstitem-ru.gif) top; padding-top: 10px; }
.EnWrap #SecondaryNav ul li.Current a { padding: 9px 18px; background: url(../i/box-navitem-ru.gif); }

#SecondaryNav ul li.Current ul li a { padding: 0; background: none; }

#Content {
	position: relative; float: left;
	width: 674px; padding: 0 17px; }

#Footer {
	position: relative; clear: both; width: 100%; height: 36px; }
#Content .Breadcrumb {
	display: block; margin: 0;
	padding: 9px 0; list-style: none outside;
	background: none; font-size: 11px;
}
#Content .Breadcrumb ul, #Content .Breadcrumb li { display: inline; background: none; margin: 0; padding: 0; color: #8a8a8a; }
#Content .Breadcrumb li a { color: #8a8a8a; }

/* Frontpages
----------------------------------------------------------- */

#FrontIntro {
	background: #FFF;
	border-bottom: 1px solid #e5e5e5; padding-right: 340px; height: 290px;
	font-size: 11px; margin-bottom: 17px;
}

.FiWrap #FrontIntro {
	background: #FFF;
	border-bottom: 1px solid #e5e5e5; padding-right: 285px; height: 290px;
	font-size: 11px; margin-bottom: 17px;
}
.FiWrap #FrontIntro img { margin-bottom: 10px; }
/*
.FiWrap #FrontIntro {
	background: #FFF;
	border-bottom: 1px solid #e5e5e5; height: 247px; padding: 0;
	font-size: 11px; margin-bottom: 17px;
}*/

.FinWrap #FrontIntro {
	background: #FFF url(../i/etuoikeabanner.jpg) no-repeat right bottom;
	border-bottom: 1px solid #e5e5e5; padding-right: 340px; height: 245px;
	font-size: 11px; margin-bottom: 17px;
}

.EnWrap #FrontIntro {
	background: #FFF;
	border-bottom: 1px solid #e5e5e5; padding-right: 285px; height: 290px;
	font-size: 11px; margin-bottom: 17px;
}

#FrontIntro h1 { font-size: 12px; font-weight: bold; margin: 0; padding: 9px 0; }
#FrontIntro img { }

#FrontFam {
	margin: 0 -18px; font-size: 11px; width: 708px;
	background: url(../i/FrontFamBg.gif) repeat-y 50% top;
}
#FrontFam .Family {
	position: relative; float: left; width: 200px; padding: 0 18px 18px;
}
#FamIntro {}
#FamIntroImage {
	display: block; width: 100%; height: 206px; margin: 0 0 18px; padding: 0;
	background-position: left top; background-repeat: no-repeat;
}
#FamIntro img { display: block; margin: 0 0 18px; padding: 0; }

/* Tuotelistat
----------------------------------------------------------- */

.Listing { clear: both; }
.Listing .Product {
	position: relative; float: left; width: 318px;
	font-size: 11px; padding: 17px 0 0; margin: 0 0 18px;
	border-top: 1px solid #e5e5e5;
}
.Listing .First { padding-right: 18px; clear: left; }
.Listing .Second { padding-left: 18px; background: url(../i/tuote-erotin.gif) no-repeat left 17px; }

/* The effing buggy IE */

.Listing span.ProductListClearer { display: none; }
.Listing span.Second { display: block; clear: both; width: 100%; height: 1px; font-size: 1px; line-height: 1px; margin: 0 0 -3px; padding: 0; overflow: hidden; }

.Listing .ProductImage {
	float: left; width: 91px; height: 126px;
	text-align: center; margin: 0 18px 0 0;
}
.Listing .ProductImage img { display: block; margin: 0 auto; }
.Listing .Product h2 { font-size: 12px; font-weight: bold; padding: 0; margin: 0 0 9px 108px; }
.Listing .NewProduct h2 { text-indent: 42px; background: url(../i/Tag-Uutuus.gif) no-repeat left 5px; }
.Listing .Product h2 a { text-decoration: none; }
.Listing .Product p { margin: 0 0 0 108px; }

/* Tuotekortti
----------------------------------------------------------- */

#ProductInfo {
	position: relative; float: left; width: 436px;
	margin: 0 36px 0 0;
}
#ProductSideCol {
	position: relative; float: left; width: 200px;
}
#ProductImages { text-align: center; margin-bottom: 18px; }
#ProductImages img { display: block; margin: 0 auto; }

#ProductThumbnails {
	width: 204px; list-style: none outside;
	margin: 0 -2px; padding: 18px 0 0; overflow: hidden;
}
#ProductThumbnails li {
	position: relative; float: left;
	width: 68px; height: 68px;
	background: none; margin: 0; padding: 0;
}
#ProductThumbnails li a {
	position: relative; float: left;
	width: 58px; height: 58px; text-align: center;
	margin: 0; padding: 3px 5px 7px;
	background: url(../i/thumbnail-bg.gif) no-repeat 50% top;
}
#ProductThumbnails li a img { margin: 0 auto; }
#PDFdl { padding: 0 18px; }
#PDFdl a {
	display: block; height: 29px; width: auto; line-height: 25px;
	background: url(../i/latausnappi-l.gif) no-repeat left top;
	padding-left: 30px; margin-bottom: 7px; text-decoration: none;
	font-size: 11px;
}
#PDFdl a span {
	display: block; height: 29px; width: auto;
	background: url(../i/latausnappi-r.gif) no-repeat right top;
	padding-right: 10px;
}

.Product ul { margin-top: 10px; }
.Product ul li { list-style-type: none; background: none; } 
.Product ul li.left { margin-left: 0; padding-left: 0; float: left; }
.Product ul li.right { margin-right: 20px; float: right; }
.Product ul li span { color: #8F8F8C; }
.Product ul li span.price { font-family: arial; font-size: 13pt; letter-spacing: -1px; margin: 0px 4px; color: #444444; }
.Product ul li span.price-label {}
.Product ul li span.price-currency {}

#ProductInfo p.price span { font-size: 11px; color: #999999; }
#ProductInfo p.price span.price { font-family: arial; font-size: 15pt; letter-spacing: -1px; margin: 0px 6px; color: #444444; }

.block-right { float: right; }
.block-left { float: left; }