/*

CSS for Regatta / Kustavin Puu Oy
By MedusaWorks Oy / Johannes
Last edited: Su, 19.10.2011 / ML

Contents:

0. Import styles for lightbox

1. Definitions by tag

2. Page layout

3. Classes used all-over the site

4. Styles for specific sites
4.1. Etusivu
4.2. Ajankohtaista sivu
4.3. Yhteystiedot
4.4. Palaute lomake

5. Tuoteryhmät
5.1. Ovet
5.2. Tasot
5.3. Huonekalut
5.4. Pientuotteet
5.5. Jälleenmyyjät
*/

/* 0. ------------------------------------------------------------------------------------------------*/
@import url("lightbox.css");

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('ubuntu.woff') format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('ubuntuMedium.woff') format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: bold;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('ubuntuBold.woff') format('woff');
}

/* 1. Definitions by tag ------------------------------------------------------------------------------*/
html {
	font-size: 100.01%;
	}
body{
	background: url(./imgs/body-bk-wtbirch.jpg);
	font: normal normal 62.5% Arial, Helvetica, sans-serif;
	text-align: center;
	#padding-bottom: 25px;	/* compensates missing #frame margin-bottom on IE6/7  */
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	}
h1 {
	color: #424242;
	font-size: 1.35em;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 2px solid #35616B;
	width: 205px;
	margin-bottom: 1em;
	}
h2 {
	color: #424242;
	font-size: 1.36em;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 500;
	line-height: 1.1em;
	margin-top: 14px;
	}

h3{
	color: #35616B;
	font-weight: bold;
}
h4{
	color: #68949E;
	font-weight: bold;
}

a{
	color: #35616B;
	text-decoration: none;
}
a:link{
}
a:visited{
}
a:hover{
	color: #68949E;
}
a:active{
}

/* 2. Page layout ----------------------------------------------------------------------------------------*/

#frame {
	font-size: 1.2em;
	width: 880px;
	padding: 30px;
	margin: 25px auto;
	position: relative;
	text-align: left;
	background: #ffffff;
	-webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.2);
	}

ul#languages {
	position: absolute;
	top: 8px;
	right: 30px;
	width: 50px;
	z-index: 900;
	}
ul#languages li {
	float: left;
	list-style-type: none;
	padding-left: 5px;
	}
ul#languages li a {
	display: block;
	width: 20px;
	height: 15px;
	z-index: 1;
	}
ul#languages li a.fi {
	background: url(./imgs/fi.gif) no-repeat;
	}
ul#languages li a.se {
	background: url(./imgs/se.gif) no-repeat;
	}
ul#languages li a span {
	display: none;
	}


#header{
	position: relative;
	width: 900px;
}

	#regatta-logo{
		float: left;
	}

	/* #mainnav: the four big tuoteryhmä links*/
	#mainnav{
		clear: both;
		width: 700px;
		padding: 26px 0 0 0;
		margin: 0 0 2px 225px; 
		font-size: 1.25em;
		line-height: 1.25em;
	}
	
		#mainnav li {
			float: left;
			width: 168px;
			}
		#mainnav a {
			border-bottom: 2px solid #35616B;
			display: block;
			font-size: 1.0em;
			width: 150px;
			font-family: 'Ubuntu', sans-serif;
			font-weight: 700;
			letter-spacing: 1px;
			text-transform: uppercase;
			}

		/* styling for sub-navigation when browsing the tuoteryhmät*/
		#mainnav ul{
			width: 100px;
			font-size: 0.8em;
			}	
			#mainnav ul a {
				font-size: 0.8em;
				line-height: 1.2em;
				margin-bottom: 0;
				border-width: 1px;
				}
			
			#mainnav ul li{
				margin: 0.15em 0;
			}

			/* "styling" for sub-sub navigation */
			
			#mainnav ul ul li{
				margin: 0 1em;
			}
			#mainnav ul ul a{
				font-size: 1em;
				border: 0;
			}

		/* display subnavs only when on that page. the classes are added to the body tag via the CMS "teema" field in the sivukartta*/
		.etusivu #mainnav ul, 
		.etusivu #headernav ul,
		.yrityssivut #mainnav ul,
		.yrityssivut #headernav ul,
		.huonekalut #mainnav ul,
		.huonekalut #headernav ul,
		.ovet #mainnav ul,
		.ovet #headernav ul,
		.tasot #mainnav ul,
		.tasot #headernav ul,
		.pientuotteet #mainnav ul,
		.pientuotteet #headernav ul{
			display: none;
		}
		.huonekalut #mainnav #nav_4 ul,
		.ovet #mainnav #nav_3 ul,
		.tasot #mainnav #nav_2 ul,
		.pientuotteet #mainnav #nav_25 ul{
			display: block;
		}
		.yritys #headernav ul{
			display: block;
			position: absolute;
		}

/* #headernav: small company links on the right top */
#headernav{
	position: absolute;
	right: 20px;
	top: 16px;
	font-size: 1.25em;
	height: 30px;
	padding-right: 0px;
	}
	#headernav li {
		float: left;
		position: relative;
		margin-left: 15px;
		font-size: 0.8em;
		font-family: 'Ubuntu', sans-serif;
		font-weight: 500;
		text-transform: uppercase;
		}
	#headernav li ul {
		position: absolute;
		left: 0;
		top: 1.5em;
		}
	#headernav li ul li {
		width: 200px;
		display: block;
		margin: 0;
		}
	#headernav li ul a {
		}

/* main content frame*/
#content{
	clear: both;
	position: relative;
	width: 880px;
	padding: 16px 0 30px 0;
	}

.content-left {
	width: 300px;
	float: left;
	}
.content-right {
	width: 300px;
	float: right;
	}

/* footer on all pages */
#footer{
	padding: 40px 0px 20px 0px;
	width: 100%;
	display: block;
	clear: both;
	text-align: center;
	border-top: 2px solid #35616B;

}
	#footer span{
		margin: 0;
	}


/* 3. classes used all-over the site -------------------------------------------------------------------*/

/*container for any size image, float:left with margin */
div.content-image{
	margin: 1em 1em 0.5em 0;
	float: left;
}
div.clrbrk {
	clear: both;
	height: 1px;
	line-height: 1px;
	font-size: 1px;
	}
/* 4. Page specific css ---------------------------------------------------------------------------*/

/* 4.1. Etusivu */

.etusivu .leftCol{
	float: left;
	width: 205px;
	padding-right: 20px;
	margin-top: -2em;
}

.etusivu .rightCol{
	float: right;
	width: 655px;
}
#etusivu-banner h2 {
	color: #424242;
	font-size: 1.68em;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.1em;
	margin-top: 14px;
	}
.etusivu .leftCol h2, .content-left h2, .content-right h2 {
	border-bottom: 2px solid #35616B;
	display: block;
	width: 100%;
	font-size: 1.15em;
	margin: 1.6em 0 0.2em 0;
	padding-bottom: 0.2em;
	color: #424242;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform:uppercase;
}
	
	/* etusivu retailerlistaus vasemalla */
	.retailers {
		font-size: 1.0em;
		font-weight: normal;
		}
	.retailers li {
		padding-left: 30px;
		margin: 0.25em 0;
		}
	.retailers li:before {
		content: "\00BB";
		display: block;
		float: left;
		padding: 0 4px 0 0;
		margin: -2px 0 0 -12px;
		}
	.retailers a {
		color: #6a6a6a;
		}
	
	/* etusivu news listaus vasemalla */
	.etusivu h3.newslista{
		font-size: 1.0em;
		font-weight: normal;
		padding-left: 30px;
		margin: 0.25em 0;
		}
	.etusivu h3.newslista:before {
		content: "\00BB";
		display: block;
		float: left;
		padding: 0 4px 0 0;
		margin: -2px 0 0 -12px;
		text-indent: 0;
		}
	.etusivu h3.newslista a {
		color: #6a6a6a;
	}
		
	
	.etusivu p.ingressi a{
		color: #000;
	}


/* 4.2. Ajankohtaista */

.news-item {
	margin-top: 1em;
	margin-bottom: 2em;
	clear: both;
}
.news-item h2 {
	clear: both;
	font-size: 1.5em;
	margin: 0 0.5em 0.5em 0;
}
.news-item img {
	margin: 0.5em 0.5em 0.5em 0;
	float: left;
}

/* 4.3. Yhteystiedot */

#henkilot div{
	width: 205px;
	height: 250px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}
#henkilot div.edit {
	clear: right;
	margin-bottom: 100px;
}

#henkilot h2 {
	clear: both;
}
#henkilot h2.tyontekijat, #ajoohjeet h2{
	margin-top: 1.2em;
	clear: both;
	text-transform: uppercase;
}
#henkilot img {
	margin: 1em 0;
	border: 1px solid #35616B;
}
#henkilot strong{
	font-weight: bold;
	margin-bottom: 0.5em;
	color: #35616B;
}
#henkilot span{
	width: 75px;
}

#ajoohjeet ul{
	margin: 0 0 0 2em;
	padding: 0;
	list-style-type: disc;
	line-height: 100%;
}
#ajoohjeet li{
	margin: 0;
	padding: 0;
}
#ajoohjeet img{
	float: right;
}

/* 4.4. Palaute lomake */

#palaute label{
	display: block;
	width: 205px;
	margin-right: 20px;
	float: left;
	border-bottom: 1px solid #e7dcd8;
}

#palaute input,
#palaute select,
#palaute textarea{
	display: block;
	margin-bottom: 1em;
	margin-left: 225px;
	width: 205px;
	font: 1em/1em Arial, Verdana, Sans-serif;
}
#palaute input#submit{
	width: 75px;
}
textarea#palaute-teksti{
	height: 100px;
	width: 430px;
}
#palaute input.nodisplay{
	display: none;
	visibility: hidden;
}


/*4.5 Yritys */
div.kuvat-oikealla{
	float: right;
	width: 450px;
	margin-left: 20px;
	margin-right: -20px;
}
div.kuvat-oikealla img{
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
}



/* 5. Tuoteryhmät */

/* mallisto-sivut */
h3.malliryhma-h3{
	clear: both;
	margin-top: 1em;
}
div.malliryhma-kuvat{
	margin-left: -20px;
	clear: both;
}
div.malliryhma-kuvat img{
	float: left;
	margin-left: 20px;
	margin-bottom: 10px;
}


h2.mallisto-ryhmat,
.ovimallisto h2{
	border-bottom: 2px solid #e7dcd8;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 1em;
	clear: left;
}


/* 5.1. OVET ---------------------------------------------------------------------------------------------*/
/* ovimallisto */

.ovimallisto h4{
	clear: both;
	color: #bab3aa;
	font-size: 1em;
	font-weight: bold;
}
div.ovimallit{
	margin-bottom: 50px;
}

.ovimallisto ul.ruudut a{
	left: 0;
	text-align: left;
}
ul.ovimallit{
	clear: both;
	margin-top: 20px;
	margin-left: -20px;
	width: 900px;
}
	ul.ovimallit li{
		float: left;
		margin-left: 20px;
		margin-bottom: 1em;
	}
/* väriruudut ovimallisto sivula */
.tasomallit ul.vari{
	clear: both;
	margin-left: -5px;
}
.tasomallit ul.vari li{
	float: left;
	margin-left: 5px;
}

.tasomallit ul.leikkaus{
	clear: both;
	margin-left: -20px;
}
.tasomallit ul.leikkaus li{
	float: left;
	margin-left: 20px;
}

ul.vari span,
ul.leikkaus span{
	display: block;
	color: #bab3aa;
	font-weight: bold;
	font-size: 0.9em;
}
/* ovet-> puulajit */
div.ovet-puulajit-kuva {
	float: right;
	margin: 1em 0 1em 1em;
}

#sisalto_12_1 h2{
	clear: both;
	padding-top: 2em;
}


/* 5.2. TASOT ---------------------------------------------------------------------------------------*/

div.tasot-etusivu-kuva{
	float: left;
	margin: 0 20px 20px 0;
	clear: both;
}
div.paragraph{
	padding-top: 1em;
}

body.malliryhmat #content img{

}


/* tasot > mallisto*/
ul.tasomallit{
	margin-left: -20px;
}
	ul.tasomallit li{
		float: left;
		margin-left: 20px;
		padding-bottom: 3em;
	}
	ul.tasomallit p{
		width: 205px;
	}
/* tasojen hoitoohjeet */
div.tasojen-hoito-kuva{
	float: right;
	margin: 0em 0 1em 1em;
}
#sisalto_24_1 h3{
	margin-bottom: 0;
	margin-top: 3em;
}
#sisalto_24_1 h4{
	float: left;
	margin-right: 0.5em;
	clear: left;
	margin-top: 1.2em;
}



/* 5.3. HUONEKALUT -------------------------------------------------------------------------------------*/
/* huonekalut mallisto sivu */

.product{
	clear: both;
	position: relative;	
	margin-bottom: 100px;
}
.product div.reset-flow{
	clear: both;
}
.product-img{
	position: relative;
	width: 430px;
	margin: 20px 0 80px;
	float: left;
	text-align: center;
}
ul.product-detail-img{
	position: absolute;
	left: 0;
	bottom: 20px;
	height: 100px;
}
	ul.product-detail-img li{
		float: left;
		margin-right: 5px;
	}
	ul.product-detail-img a{
		display: block;
		width: 100px;
		height: 100px;
		overflow: hidden;
	}
	
.product-desc{
	position: relative;
	width: 430px;
	float: right;
}
	.product-desc h3{
		color: #FFF;
		background-color: #bab3aa;
		font-size: 1em;
		padding: 0 0.5em;
		margin-bottom: 0.5em;
	}
	.product-desc h4{
		position: relative;
		color: #bab3aa;
		font-size: 1em;
		font-weight: bold;
		padding-top: 1em;
		clear: both;
	}

	ul.ruudut{
		position: relative;
		height: 45px;
		margin-bottom: 5px;
		clear: left;
	}
		ul.ruudut li{
			position: relative;
			width: 45px;
			display: block;
			float: left;
			border: 1px solid #FFF;
		}
		
		ul.ruudut a{
			position: absolute;
			right: 0;
			width: 39px;
			height: 39px;
			padding: 2px;
			z-index: 1;
			/*background-color: #bab3aa;*/
			background-repeat: no-repeat;
			background-position: right top;
			margin-right: 2px;
			overflow: hidden;
			font-size: 0.8em;
			font-weight: bold;
			color: #FFF;
			text-align: right;
		}
		ul.ruudut a:hover{
			width: 246px;
			height: 246px;
			z-index: 100;
		}
		
		/*all the backgrounds for the rollovers:*/
		#koivu		{	background-image: url(./imgs/products-puulajit/koivu.jpg); }
		#saarni		{	background-image: url(./imgs/products-puulajit/saarni.jpg); }
		#saarni2	{	background-image: url(./imgs/products-puulajit/saarni-m.jpg); }
		#pyokki		{	background-image: url(./imgs/products-puulajit/pyokki.jpg); }
		#tammi		{	background-image: url(./imgs/products-puulajit/tammi.jpg); }
		#kirsikka	{	background-image: url(./imgs/products-puulajit/kirsikka.jpg); }
		#pahkina	{	background-image: url(./imgs/products-puulajit/pahkina.jpg); }
		#sapelimahonki	{	background-image: url(./imgs/products-puulajit/sapelimahonki.gif); }
		#wenge		{	background-image: url(./imgs/products-puulajit/wenge.jpg); }
		#zebrano	{	background-image: url(./imgs/products-puulajit/zebrano.jpg); }
		#jalava	{	background-image: url(./imgs/products-puulajit/jalava_p.jpg); }
		
		/*#varit-40	{	background-image: url(./imgs/products-vaarit/40.jpg); }
		#varit-41	{	background-image: url(./imgs/products-vaarit/41.jpg); }
		#varit-42	{	background-image: url(./imgs/products-vaarit/42.jpg); }
		#varit-43	{	background-image: url(./imgs/products-vaarit/43.jpg); }
		#varit-44	{	background-image: url(./imgs/products-vaarit/44.jpg); }
		#varit-46	{	background-image: url(./imgs/products-vaarit/46.jpg); }
		#varit-47	{	background-image: url(./imgs/products-vaarit/47.jpg); } */
		
		#varit-koivu_t21 {	background-image: url(./imgs/products-vaarit/koivu_t21.jpg); }
		#varit-saarni_t21 {	background-image: url(./imgs/products-vaarit/saarni_t21.jpg); }
		#varit-48	{	background-image: url(./imgs/products-vaarit/48.jpg); }
		#varit-09	{	background-image: url(./imgs/products-vaarit/09.jpg); }
		
		#vahat-01	{	background-image: url(./imgs/products-vaarit/vaha01.jpg); }
		#vahat-02	{	background-image: url(./imgs/products-vaarit/vaha02.jpg); }
		#vahat-03	{	background-image: url(./imgs/products-vaarit/Tammi_L18.jpg); }
		
		#kiilto-01	{	background-image: url(./imgs/products-vaarit/MustaKorkeaKiilto_p.jpg); }
		#kiilto-02	{	background-image: url(./imgs/products-vaarit/Harmaa-Korkeakiilto_p.jpg); }
		#kiilto-03	{	background-image: url(./imgs/products-vaarit/ValkoinenKorkeaKiilto_p.jpg); }
		a#kiilto-03 {color: #000000;}
		ul.koko{
		
		}
		
		ul.koko li{
			float: left;
			margin-right: 5px;
			margin-bottom: 5px;
		}
		
		ul.koko span{
			display: block;
			color: #bab3aa;
			font-weight: bold;
			font-size: 0.9em;
		}
		
/* 5.4. Pientuotteet */

.pientuotteet .tasomallit li{
	clear: both;
}


/* 5.5. Jälleenmyyjä-sivut */

body#page_13 #content, body#page_17 #content, body#page_20 #content {
	min-height: 500px;
	}

div#myyntialue{
	position: relative;
	margin-bottom: 2em;
}
div#myyntialue ol {
	list-style-type: none;
	margin-left: 0px;
	width: 185px;
	}
div#myyntialue ol li {
	border-bottom: 2px solid #e7dcd8;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 0.5em;
	list-style-type: none;
	margin-left: 0px;
	}
#myyntialue ol li a {
	width: 185px;
	}
#myyntipistekartta {
	display: block;
	float: right;
	width: 410px;
	height: 500px;
	margin-right: 110px;
	}
	
dl#myyntipiste_tiedot{
}
	dl#myyntipiste_tiedot dt{
		float: left;
		clear: left;
		width: 120px;
		border-bottom: 1px solid #e7dcd8;
	}
	dl#myyntipiste_tiedot dd{
		padding-left: 140px;
		margin: 0.5em 0;
	}

ul.myyntipisteet{
	clear: both;
	margin-top: 3em;
	width: 260px;
	min-height: 260px;
	}
ul.myyntipisteet li.letter{
	margin-top: 1em;
	font-weight: bold;
	font-size: 1.5em;
	color: #e7dcd8;
}

h2.myyntipiste{
	margin-top: 1em;
}