@charset "UTF-8";

body {
	font: 14px/18px Arial, Helvetica, sans-serif;
	color: #c0ab98;
	background: #fff;
	height: 100%;
}

/* Boxit
----------------------------------------------------------------------------------------------------*/
.header {
	width: 100%;
	height: 210px;
	background: url('../img/header-bg.jpg') top center no-repeat;
	position: relative;
}

.header-wrapper {
	margin: auto;
	width: 940px;
	height: 210px;
	position: relative;
}

	.logo {
		float: left;
		position: absolute;
		top: 18px;
		left: 24px;
	}
	

.etuluettelo { position: absolute; top: 42px; left: 482px;}
.etuluettelo h1 { text-align: center; font: 20px/34px Arial Black, Helvetica, sans-serif; color: #fff;}	

.sisalto {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 960px;
	background: #fff;
}

.footer {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	width: 960px;
	height: 80px;
	border-top: 1px solid #dddddd;
}
	
	.footer-sisalto {
		width: 940px;
		height: 60px;
		padding: 10px 0;
		color: #786b68;
		background: url('../img/footerbg-inner.jpg') 0 0 no-repeat;
	}
	
	.footer-sisalto p, .footer-sisalto p a {  font-size: 1.0em; color: #786b68;}
	.footer-sisalto p span { font-size: 0.9em;}


/* Sisältöboxit
----------------------------------------------------------------------------------------------------*/

.tervetuloa {
	display: block;
	width: 940px;
	height: 80px;
	background: url('../img/tervetuloa-teksti.jpg') 0 0 no-repeat;
	margin: 20px 0;
}

.nosto3 { float: left; width: 280px; display: block;}
.harmaa { background: #e3e2e2; border: 1px solid #e3e2e2;}
.harmaa:hover { background: #eeeeee; border: 1px solid #ddd;}


.slideteksti { float: left; width: 460px; position: absolute; top: 80px; left: 405px;}

.slideteksti h2 { color: #fff; font-size: 1.6em; line-height: 28px; margin-top: -10px;
text-transform: none; text-shadow: 1px 1px 0 #000; font-weight: normal;
}
.slideteksti p { color: #ddd;}



a.nostolinkki { display: block; height: 20px; width: 140px;}

.pikkuotsikko-muuraukset, .pikkuotsikko-laatoitukset, .pikkuotsikko-remontit { display: block; height: 20px; width: 140px; margin: 15px 0 10px 0;}


.pikkuotsikko-muuraukset { background: url('../img/etusivun-boxien-otsikot.png') top left no-repeat;}
.pikkuotsikko-laatoitukset { background: url('../img/etusivun-boxien-otsikot.png') center left no-repeat;}
.pikkuotsikko-remontit { background: url('../img/etusivun-boxien-otsikot.png') bottom left no-repeat;}

.etuboxin-tekstit p { font-size: 1em;	margin-bottom: 20px;}

.otsikko-palvelut, .otsikko-yritys, .otsikko-galleria, .otsikko-yhteys { display: block; height: 40px; width: 460px; margin: 15px 0 14px 0; border-bottom: 2px solid #e3e2e2;}


.otsikko-palvelut { background: url('../img/sivuotsikot.gif') 0 0 no-repeat;}
.otsikko-yritys { background: url('../img/sivuotsikot.gif') 0 -40px no-repeat;}
.otsikko-galleria { background: url('../img/sivuotsikot.gif') 0 -80px no-repeat;}
.otsikko-yhteys { background: url('../img/sivuotsikot.gif') 0 -120px no-repeat;}

.otsikko-yhteistyo { background: url('../img/yhteistyo-otsikko.gif') 0 0 no-repeat;
 display: block; height: 30px; width: 430px; margin: 15px 0 14px 0; border-bottom: 2px solid #e3e2e2;}



/* Palvelut, yritys ja galleria sivut
----------------------------------------------------------------------------------------------------*/

.nappi { display: block; margin: 20px 0;}

.isokuva { display: block; height: 280px; width: 410px; background: #e3e2e2;}

.palvelutlista { color: #333333;}
.palvelutlista li { font-size: 1.2em; line-height: 22px; padding: 0 0 0 30px;
background: url('../img/list-bg.jpg') 5px 6px no-repeat;}

a.kotitalousvahennys, a.referenssit, a.otayhteytta { display: block; height: 110px; width: 430px;}
a.kotitalousvahennys span, a.referenssit span, a.otayhteytta span { display: none;}
a.kotitalousvahennys p, a.referenssit p, a.otayhteytta p { padding: 50px 0 0 150px; font-size: 0.9em;}


a.kotitalousvahennys { background: url('../img/nappi-kotitalousvahennys.jpg') 0 0 no-repeat;}
a.referenssit { background: url('../img/nappi-referenssit.jpg') 0 0 no-repeat;}
a.otayhteytta { background: url('../img/nappi-otayhteytta.jpg') 0 0 no-repeat;}
a.kotitalousvahennys:hover, a.referenssit:hover, a.otayhteytta:hover { background-position: bottom left; text-decoration: none;}

.tiilimiesnostot { height: 260px; width: 130px; background: #e3e2e2; padding: 5px 5px 10px 5px;}
.tiilimiesnostot h2 { margin-top: 10px; text-align: center;}

.yhteistyolista li { font-weight: bold; font-size: 1.0em; line-height: 24px; padding: 0 0 0 30px;
background: url('../img/list-bg.jpg') 5px 6px no-repeat;}

.linkki-muuraukset, .linkki-laatoitukset, .linkki-hirsityot, .linkki-kalustukset, .linkki-remontit {
	display: block; height: 110px; width: 380px;}

.linkki-muuraukset span, .linkki-laatoitukset span, .linkki-hirsityot span, .linkki-kalustukset span, .linkki-remontit span {	display: none;} 

.linkki-muuraukset { background: url('../img/gallerianapit.jpg') 0 0 no-repeat;}
.linkki-laatoitukset { background: url('../img/gallerianapit.jpg') 0 -110px no-repeat;}
.linkki-hirsityot { background: url('../img/gallerianapit.jpg') 0 -220px no-repeat;}
.linkki-kalustukset { background: url('../img/gallerianapit.jpg') 0 -330px no-repeat;}
.linkki-remontit { background: url('../img/gallerianapit.jpg') 0 -440px no-repeat;}

.linkki-muuraukset:hover { background-position: -380px 0;}
.linkki-laatoitukset:hover { background-position: -380px -110px;}
.linkki-hirsityot:hover { background-position: -380px -220px;}
.linkki-kalustukset:hover { background-position: -380px -330px;}
.linkki-remontit:hover { background-position: -380px -440px;}

.thumbbg { float: left; background: url('../img/lightgradient.jpg') bottom left repeat-x #fff; padding: 5px; height: 90px; width: 90px;
	-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 1px 5px #999;
	box-shadow: 0px 1px 5px #999;}
	
	.thumbspace { margin: 0 18px 18px 0;}
	
.yhteyskietoja { height: 100px; margin-top: 5px;}

.yhteyskietoja img { float: left; border: 1px solid #999; margin: 10px 20px 0 0;}

.yhteyskietoja h2 { float: left; width: 360px;}

.palvelut { background: url('../img/markatila.jpg') 80% top no-repeat; }
.marka {}



/* Tabs
----------------------------------------------------------------------------------------------------*/

ul.tabs {
	float: left;
	list-style: none;
	height: 110px;
	width: 100%;
}
ul.tabs li {
	position: relative;
}

.tab_container {
	clear: both;
	float: left; width: 100%;
	min-height: 500px;
}
.tab_content {
	font-size: 1.1em;
	margin-top: 10px;
	padding-left: 2
}


/* IsoKuvaslide
----------------------------------------------------------------------------------------------------*/

.slideshow {
    position:relative;
    height:280px; !important;
	width: 410px; !important;
	margin:auto;
}

.slideshow img {
    position:absolute;
    top:0;
    left:0;
	height:280px; !important;
	width: 410px; !important;
}


/* Yhteyssivu
----------------------------------------------------------------------------------------------------*/

.nimi {	color: #99c00f;	font-size: 1.4em;}
.titteli { font-size: 1em;}
.pnumero { font-size: 1.1em;}
.maili { font-size: 1em;}
.yotsikko {	color: #99c00f; font-size: 1.2em;}


/* Navi
----------------------------------------------------------------------------------------------------*/

ul.navi {
	position: absolute;
	top: 146px;
	left: 420px;
	float: left;
	height: 64px;
	width: 640px;
	font: 14px/50px Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}
	
	ul.navi li { float: left; height: 64px;}
	
	ul.navi li a {
		display: block;
		color: #fff;
		padding-left: 18px;
		height: 64px;
	}
	
	ul.navi li a b {
		display: block;
		padding-right: 18px;
		height: 64px;
		background: url('../img/navijakaja.jpg') top right no-repeat;
		
	}
	
	ul.navi li a:hover { color: #fff; background: url('../img/navi-hover.jpg') 0 7px repeat-x;
text-decoration: none; text-shadow: 0 1px 0 #aaa, 0 -1px 0 #000;}
	
	ul.navi li a.active, a.active:hover {
		color: #333333; text-shadow: none;
		background: url('../img/navi-active-left.jpg') center left no-repeat;
	}
	ul.navi li a.active b, a.active:hover b {
		color: #333333;	background: url('../img/navi-active-right.jpg') center right no-repeat;
	}
	
	ul.navi li a b.vika { background: none;}


/* Yleiset tyylittelyt
----------------------------------------------------------------------------------------------------*/

.vasemmalle { float: left;}
.oikealle { float: right;}

.allmarg10 { margin: 10px;}
.leftmarg5 { margin-left: 4px;}
.leftmarg10 { margin-left: 10px;}
.leftmarg20 { margin-left: 20px;}
.leftmarg30 { margin-left: 30px;}
.leftmarg40 { margin-left: 40px;}
.topmarg10 { margin-top: 10px;}
.topmarg20 { margin-top: 20px;}
.topmarg40 { margin-top: 40px;}
.topmarg60 { margin-top: 60px;}
.bottommarg20 { margin-bottom: 20px;}

.allpad10 { padding: 10px;}
.toppad10 { padding-top: 10px;}
.leftpad10 { padding-left: 10px;}

.bottompad20 { padding-bottom: 20px;}

.green { background: #97bf0d;}
.orange { background: #f26522;}
.blue { background: #14b7e3;}



/* css3 karkit
----------------------------------------------------------------------------------------------------*/
.pyorea {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.fontshadow {
	text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
}

.boxshadow {
	-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0px 0px 20px #333;
	box-shadow: 0px 0px 20px #333;
} 

/* Fontit
----------------------------------------------------------------------------------------------------*/

p {
	font: 16px/20px Arial, Helvetica, sans-serif;
	color: #3b505f;
	padding-bottom: 10px;
}

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

a:hover {
	color: #d8543c;
	text-decoration: underline;
}

h1, h2 {
	display: block;
	color: #000;
}

h1 {
	font-size: 2.2em;
	line-height: 32px;
	margin: 0 0 20px 0;
}

h2 { text-transform: uppercase; font-size: 1.2em; color: #d05036; font-weight: bold;}

/* Imageslider
----------------------------------------------------------------------------------
------------------*/

.slidebg {
	clear: both;
	display: block;
	width: 940px;
	height: 217px;
	background: url('../img/etusivun-slidebg.jpg') 0 0 no-repeat;
	position: relative;
}

.container { width:286px; height:154px; overflow:hidden; position:absolute; top:32px; left:70px; cursor:pointer;}
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:286px; display:none; }


/*	Lomake
------------------------------------------------------------------------ */

fieldset {
	width: 440px;
	float: left;
	padding: 10px 0 40px 0;
}

legend { display: none;}

label {
	display: block;
	float: left;
	text-align: left;
	font-size: 0.8em;
	line-height: 22px;	
	width: 160px;	
	color: #111;
}

input, textarea {
	float: left;
	width: 240px;
	height: 14px;
	border: 1px solid #999;
	margin-bottom: 10px;
	background-color: #eee;	
	padding: 3px;
	-moz-border-radius: 3px; -webkit-border-radius: 3px;
}

optgroup {
	font-size: 1.3em;
	margin: 10px 0 10px 0;
	background-color: #eee;	
}

option {
	float: left;
	height: 15px;
	font-size: 0.9em;
	color: #666;
	padding: 2px 5px;
}

input.laheta {
	font-weight: bold;
	font-size: 0.9em;
	height: 40px;
	width: 240px;
	margin: 15px 0 0 160px;
	background: url('../img/lightgradient.jpg') 0 0 repeat-x;
	-moz-border-radius: 5px; -webkit-border-radius: 5px;
	border: 1px solid #aaa;
}
input.laheta:hover { color:#fff; background: #d05036}

select#yhteydenottotapa {
	margin-bottom: 10px; padding: 2px 5px; width: 240px; height: 22px;}
textarea#viesti {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	height: 140px;
	width: 240px;
}

label em {
	color: #d05036;
}