/* marikoo.com */

* { 
	margin: 0; 
	padding: 0; 
	border:0;
}

body {
	text-align:center;	
	background-color:#3a480d;
}

#container {
	background:url("http://marikoo.com/graf/keskiosan_ylatausta.jpg") repeat-x scroll center 275px #FFF;
}


#container_sisempi {
	width:850px;
	margin:0 auto;
}

#container_inner {
	border-left:solid 2px #d6dfba;
	border-right:solid 2px #d6dfba;
	text-align:left;
}

#ylanavigaatio {
	text-align:right;
}

#ylanavigaatio {
	font-style:italic;
}

#ylanavigaatio a {
	font-weight:normal!important;
}

#ylaosa {
	background:#7c9921 url(graf/ylaosa2.png) repeat-x center top;
	height:183px;
	position:relative;
}

#ylaosa .linkki {
	position:absolute;
	left:10px;
	top:10px;
	font: 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;
	}
	
#ylaosa a  {
	text-decoration:none;
	color:#d4e999;
	}	
	
#ylaosa a:hover  {
	text-decoration:none;
	color:#cedca6;
	}	
		

#ylaosa .marikoologo{
	position:absolute;
	right:50%;
	margin-right:-112px;
	bottom:35px;
}

#valikko {
	height:5.8em;
	background:url("http://marikoo.com/graf/valikontausta.png") no-repeat scroll 31px top transparent;
	}

#valikko ul {
	padding:0 !important;
	text-align:center;
	background: url(http://marikoo.com/graf/valikontausta.gif) no-repeat center center;
	}

#valikko ul li {
	display:inline;
	padding:0 !important;
	text-align:center;
	}

#valikko ul li a {
	color:#7C9921;
	font:1.5em/4em "Trebuchet MS",Georgia,"Times New Roman",sans-serif;
	padding:1.2em 1.3em;
	text-decoration:none;
	}


#valikko ul li a:hover{
	text-decoration:none;
	color:#61771e;/*tummempi vih*/
	background: url(http://marikoo.com/graf/hover_nuoli.gif) no-repeat center bottom;		
	}

#valikko ul li a#current{
		cursor:default;
		background: url(http://marikoo.com/graf/current_nuoli.gif) no-repeat center bottom;
		color:#afafaf;
	}
	
#valikko ul li a:hover#current{
		background: url(http://marikoo.com/graf/hover_nuoli.gif) no-repeat center bottom;		
	}

#main {
	padding:1em 1em 2em;
	font: 1em Georgia, "Trebuchet MS", "Times New Roman", sans-serif;
	color: #515151;
	position:relative;
}

#alaosa, #poweredby {
	color: #586d1a;
	padding-top:1em;
	background:#61771e url(http://marikoo.com/graf/alaosan_tausta.jpg) repeat-x left bottom;
	text-align:center;
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
}

#alaosa_sisempi {
	width:750px;
	margin:0 auto;
	padding-left:1em;
	text-align:left;
	overflow:hidden;
	height:100%;
}

#alin {
	margin-top:3em;
	border-top:solid 2px #71882d;
	padding:1.5em;
	text-align:center;
	color:#61771e;
	background:#ddedb0;
	font-size:1.1em;
	}
	
#alin a {
	font-style:normal;
	color:#61771e;
	text-decoration:none;

	}	

h1, h2, h3 {
	font-weight:normal;
	color:#61771e;/*tummavihre*/
}

a.vihrea {
	color:#61771e!important;/*tummavihre*/
	}
	
a.vihrea:hover {
	color:#7d7d7d!important;/*harmaa*/
	}

h2, h3, h5, h6 {
	margin-top:1em;
	margin-bottom:0.5em;
	font-size:1.8em;
}

h1 {
	border-bottom:2px solid #D6DFBA;
	color:#515151;
	padding-bottom:0.4em;
	margin-bottom:1em;
	font: 2.3em "Philosopher","Trebuchet MS",Georgia,"Times New Roman",sans-serif;
	}
	
h2, h3, h4 {
	font-family: "Philosopher","Trebuchet MS",Georgia,"Times New Roman",sans-serif;
}	




.otsikonalla {
	padding-top:0!important;
	margin-top:0!important;
}	
		
h1 + p {
	margin-top:1.5em;
		
		}
		
h1 + h2 {
	margin-top:.5em;
		
		}
		
h3 {
	border-bottom:2px solid #D6DFBA;
	font-size:1.6em;
	padding-bottom:0.5em;
	}
	
h4 {
	font-size:1.5em;
	padding-bottom:0.4em;
	padding-top:0.6em;
	font-weight:normal;
	}						

#main p, #alaosa p {
	line-height:1.5em;
}

p.clear {
	clear:both;
	line-height:1em !important;
}

hr {
	border-top:2px solid #D6DFBA;
	margin:1em 0;
	height:0!important;
}

img.rajaus, .kuvaboxi img {
		border:2px solid #7d7d7d;
}

#main a {
	text-decoration:none;
	color:#506a7c;
	font-style: italic;
}

#main a:visited {
	text-decoration:none;
	color:#506a7c;
}

#main a:hover {
	text-decoration:none;
	color:#cbdd92;/*keltainen*/
}

#main ul, #alaosa ul{
	list-style: none;
	padding: 0;
	margin:1.2em 0;
}
#main ul li, #alaosa ul li{
	background:transparent url(http://marikoo.com/graf/nuolet.jpg) no-repeat scroll 0pt 0.3em;
	height:1%;
	line-height:1.6em;
	margin-left:20px;
	padding-bottom:6px;
	padding-left:28px;
}

a.nuolet3 {
	background:transparent url(http://marikoo.com/graf/nuolet.jpg) no-repeat scroll 100% 3px;
	padding-right:25px;
	}

.oikealle  {
	text-align:right;
	
	}

#alaosa ul li {
	background:transparent url(http://marikoo.com/graf/nuolet-valk.gif) no-repeat scroll 0pt 0.3em;
	height:1%;
	line-height:1.6em;
	margin-left:20px;
	padding-bottom:6px;
	padding-left:28px;
}
#main ul.etusivu {
	margin:2em 0 1em 1em;
	list-style-type:none;
	position:relative;
	}

#main ul.etusivu li {
	height:1%;
	line-height:4em;
	margin-left:1.5em;
	padding-left:2.8em;
	background:none!important;
}

#main ul.etusivu li a {
	font-style:normal!important;
	margin-left:1em;
	font-size:1.3em;
	font:normal 1.3em "Philosopher","Trebuchet MS",Georgia,"Times New Roman",sans-serif;
	}
	
ul.etusivu img  {
	position:absolute;
	border:none;
	} 	

img#avaimetkateen {
	left: 11px;
    top: -6px;
	} 

img#itsepaivitys {
	right: 367px;
    top: 67px;
	}
	
img#webhotelli {
	left: 16px;
    top: 120px;
	}	
	
img#hakukoneoptimointi {
	right: 272px;
    top: 194px;
	}


h3.kuva_ratkaisut {
	background:url("http://marikoo.com/graf/kuvake_ratkaisut.gif") no-repeat scroll 0 50%;
	border-bottom:medium none;
	font-size:1.6em;
	padding:0.5em 0 0.6em 0.5em;
} 


table {
	border-collapse:collapse;
}

table p {
	font-size:1em;
}

table td {
	vertical-align:top;

}

table td ul {
	margin-top:0!important;

}

table.levea {
	width:99%;
	font: 0.75em Verdana, Arial, Helvetica, sans-serif;	
}

table.levea td{
	vertical-align:middle;	
	border:1px solid #859266;
}

table.levea p{
	margin-bottom: 0.5em;	
	margin-left:5px;
}


.kuvaoikea {
	float:right;
	margin-left:10px;
	margin-bottom:5px;

}

.kuvavasen {
	float:left;
	margin-right:10px;
	margin-bottom:5px;
}

.pikku {
	font-size:0.8em;
}

.margin0 {
margin:0!important
}
.loota {
	width: 188px;
	height: 238px;
	background: url(graf/isolaatikkotausta.gif) no-repeat;	
}

.etusivunloota  h2 {
	color:#FFFFFF;
	font:normal 1em/1.5em Georgia, "Times New Roman", sans-serif;
	margin:0;
	padding:1.3em 0 1.3em 1.5em;
}

.palvelutloota  h2 {
	color:#FFFFFF;
	font:1.1em/1.3em Georgia,"Times New Roman",sans-serif;
	margin:0;
	padding-left:1em;
	padding-right:1em;
}
.palvelutloota  h2.eka {
	padding-top:.8em;
	padding-bottom:1.2em;
} 

.palvelutloota   h2.toka {
	padding-top:1.2em;
	padding-bottom:1.2em;
}

.palvelutloota   h2.kolmas {
	padding-top:1em;
	padding-bottom:.8em;
}

.viiva {
	border-top:solid 1px #BED083;
}

.lootasisa p {
	margin: 0px;
	padding: 1em;	
}

	
.palsta {
	width:540px;
	}

.nuolet {
	padding-right:1.2em;
	background: url(http://marikoo.com/graf/nuolet.jpg) no-repeat right center;
}

.nuolet2 {
	padding-left:1.2em;
	background: url(http://marikoo.com/graf/nuolet.jpg) no-repeat left center;
}

.vih_alaviiva {
	border-bottom:2px solid #D6DFBA;
}

.boxinjalkeentakaisin {
	border-top:2px solid #D6DFBA;
	clear:both;
	text-align:right;
	font: 0.9em "Trebuchet MS", Georgia, "Times New Roman", sans-serif;
	padding-top:1em;
	}

.takaisinedelliselle {
	border-top:2px solid #D6DFBA;
	clear:both;
	padding-top:1em;
	}

/*--------------------- lomake ---------------------*/

form {
	font: 1.2em "Philosopher";
	color: #fff;
}

.submitbut {
	font-size:0.7em!important;
	font-weight:bold;
	}
	
form textarea {
	overflow: auto;
}

form label {
	color: #a8b483;
	}
	
#tarjousform form label {
	color: #515151;
	}	

form input, form textarea {
	background: #6f891e url(http://marikoo.com/graf/input_tausta.jpg) repeat-x left top;
	padding: 0.6em 0.3em;
	border: 1px solid #a8b483;
	color: #fff;
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	margin:0.5em 0 1em 0;
	-moz-border-radius: 3px;
	border-radius: 3px;	
	-webkit-border-radius: 3px;
	}
	
form input:focus, form textarea:focus
{
border: 1px solid #fff; 
}

form legend{
	font: 1.5em "Philosopher","Trebuchet MS",Georgia,"Times New Roman",sans-serif;
	color: #b0c375;
	padding-top:1em;
	padding-bottom:1em;
	}
	
#tarjousform {
	width:700px; 
	font-size:0.9em;
}	

#yhteystietoform  {
	width:312px;
	float:right;
	font-size:0.9em;
}

#floatleft	{
	float:left;
	width:450px;
}

#yhteystietoform form, #yhteystietoform form label, #yhteystietoform form legend, #tarjousform form, #tarjousform form legend {
	color: #61771e!important;
}

#yhteystietoform form input, #yhteystietoform form textarea, #tarjousform form input, #tarjousform form textarea{
	background: #6f891e url(http://marikoo.com/graf/input_tausta.jpg) repeat-x left top;
	border: 1px solid #a8b483;
	color: #fff;
	}
	
#yhteystietoform form input:focus, #yhteystietoform form textarea:focus, #tarjousform form input:focus, #tarjousform form textarea:focus
{
border: 1px solid #61771e; 
}

#yhteystietoform form legend{
	padding-top:0;
	}

#yhteystietoform.submitbut {
	font-size:0.6em!important;
	font-weight:bold;
	}
	

	
.referenssiboxi  {
	margin-bottom:1.5em;
	} 	
	
.referenssiboxi img.iso {
	border:2px solid #7d7d7d;
	} 	

.referenssiboxi .kuvaboxi {
	float:right;
	width:300px;
	margin: 0 0 0 1em;
	text-align:left;
	}

.referenssiboxi h3 {
	font-size:1.8em;
}

.referenssiboxi h5{
	font:1em "Trebuchet MS", Georgia, "Times New Roman", sans-serif;
	font-weight:normal;
}


.kuvaboxi h5 {
	font:1em "Trebuchet MS", Georgia, "Times New Roman", sans-serif;
	font-weight:normal!important;
	margin-top:0.2em;
}

.kuvaboxi, .palstaboxi {
	float: left;
	width: 221px;
	margin: 1em 1.8em 0 0.2em;
	text-align:center;
	}
	
.palstaboxi {
	font-size: 1em!important;
	text-align:left;
}	
	
.kuvaboxi a img  {
	border:2px solid #7d7d7d;
	margin-bottom:.5em;
	}
	
.kuvaboxi a:hover img {
	border:2px solid #7c9921;
	}
		

.marg_right_0 {
	margin-right: 0!important;
	}

#up {
	bottom:-3px;
	left:50%;
	position:absolute;
}

.sisenna {
	margin-left:2em;
	}

h4.sisenna {
	margin-left:1.5em;
	}
	
ul.sisenna {
	margin-left:2.5em!important;
}	

.italbold {
	font-style:italic;
	font-weight:bold;
	}
	
#main .error {
	color:#990000;
	}
	
#alaosa .error {
	color:#fff;
	}

#alaosa p, #alaosa ul {
	color:#fff;
	font-family:  Georgia, "Trebuchet MS" ,"Times New Roman",sans-serif;
	}

#alaosa  {
	color:#61771E;
	font:0.8em Georgia, "Trebuchet MS" ,"Times New Roman",sans-serif;
	}
	
#alin p {
	color:#61771E;
	font-family: "Trebuchet MS",Georgia,"Times New Roman",sans-serif;
	}

#palstaoikea {
	float:right;
	margin-left:2em;
	margin-right:1em;
	width:188px;
}


.etusivunloota {
	float:right;
	margin:2em 1em;	
	}
	
.palvelutloota {
	float:right;
	font-size: 0.85em;
	margin:0 0 0 1em;	
	}

.painike {
	width:182px;
	height:60px;
	background: url(graf/painike.jpg) no-repeat;
	}
	
.painike h2 {
	padding-left:0.8em;
	padding-top:10%;
	font: italic normal 1.4em Georgia, "Trebuchet MS", serif;
	}

/*.painike h2.palvelut_sivu_ref {
	font-size:1.8em;
	padding-left:.6em;
	padding-top:10%;
	}

.painike h2.palvelut_sivu {
	font-size:1.8em;
	padding-left:.3em;
	padding-top:10%;
	}*/


.painike h2 a  {
	color:#FFFFFF!important;	
	}
	
.painike h2 a:hover  {
	color:#FFFFFF!important;
	text-decoration:underline!important;	
	}
	
#kommentit {
	float:right;
	width:300px;
	margin-right: 1.5em;
	}
	
#kommentit2 {
	width:300px;
	}		
	
#kommentit h2, #kommentit2 h2  {
	color:#B0C375 ;
	font:1.9em "Philosopher","Trebuchet MS",Georgia,"Times New Roman",sans-serif;
	padding-bottom:1em;
	padding-top:0;
	}	
	
#kommentit p, #kommentit2 p {
	color:#E1E6D5!important;
	padding-left:3em;	
	font-size:1.2em;
	}
	
#kommentit p.hiput, #kommentit2 p.hiput{
	background: url(graf/hiput.gif) no-repeat left top;	
	}
	
	
#alalomake {
	width:400px;
	text-align:left;
	}
	
.allek {
	font-style:italic !important;
	font-size:0.9em;
}

#hintalaatikot  {
	text-align:center;
	font-size:0.8em;
}	


#hintalaatikot .laatikko {
	float: left;
	height: 120px;
	width: 153px;
	margin:0 1.3em;
	background: url(graf/painike153.jpg) no-repeat;
	position:relative;
}

#hintalaatikot .laatikko p{
	padding:1.6em 1em;
	color:#ecf9e7;
	font:1.5em "Philosopher", "Trebuchet MS", Georgia, "Times New Roman", sans-serif;
	cursor:default;
}

#hintalaatikot .laatikko p.ip {
	padding:1em;
}

#hintalaatikot .laatikko p span.hinta {
	font:1.5em Georgia, "Times New Roman", Times, serif;
	color:#FFFFFF;
}

#hintalaatikot .laatikko p span sup {
    font-size: 0.7em;
}

#hintalaatikot a {
	font-style:normal;
	color:#ecf9e7;
}

#hintalaatikot a:hover {
	font-style:normal;
	color:#ecf9e7;
}

.tip {
    color: #fff;
    background:url(graf/tooltip_bg.png) repeat;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;   
	z-index:1000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	font:0.8em "Trebuchet MS", Georgia, "Times New Roman", sans-serif;
	text-align:left;
	width:250px;
}

.tip_trigger {
	cursor:default;

}

.smaller {
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;	
}

.smaller2 {
	font-size: 0.9em;	
}

.kk {
	font-size: 0.8em 
}

#cont, #asiakaskuvat {
	overflow: hidden ;
	width: 100%

}

#asiakaskuvat2011 {
	margin-right:-1em;
}

#asiakaskuvat2011 div {
    background: url("graf/rajaan_bg.jpg") repeat-x scroll left bottom transparent;
    border: 1px solid #B0B0B0;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #A5A5A5;
    float: left;
    height: 326px;
    margin-bottom: 1.5em;
    margin-right: 1em;
    padding-left: 15px;
    padding-top: 15px;
    width: 240px;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	-moz-box-shadow: 0 0 5px #a5a5a5;
	-webkit-box-shadow: 0 0 5px#a5a5a5;
}

#asiakaskuvat2011 div#piilota {
    background: none;
    border:0 none;
    border-radius: 0;
    box-shadow: none;
    float: none;
    height: auto;
    margin-bottom: 0;
    margin-right: 0;
    padding-left: 0;
    padding-top: 0;
    width: auto;
	-webkit-border-radius: none;
    -moz-border-radius: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

#asiakaskuvat2011 p{
	padding-right: 10px;
	font-size:0.9em;
}

#asiakaskuvat2011 p.osoite {
	padding-top: 1em;
}

#asiakaskuvat2011 img{
	border:solid 2px #B0B0B0;
}

#asiakaskuvat div.rajaa {
	border:1px solid #b0b0b0;
	width:240px;
	float: left;
	margin-right: 1em;
	margin-bottom: 1.5em;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#asiakaskuvat2 div.rajaa {
	border:1px solid #b0b0b0;
	background:url(graf/rajaan_bg.jpg) repeat-x left bottom;
	width:240px;
	height:350px;
	float: left;
	margin-right: 0.7em;
	margin-bottom: 1.5em;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#asiakaskuvat .viewport, #asiakaskuvat2 .viewport {
    border: 2px solid #7D7D7D;
    height: 140px;
    left: -8px;
    overflow: hidden;
    position: relative;
    top: -8px;
    width: 200px;
}

#asiakaskuvat .viewport p, #asiakaskuvat2 .viewport p {
	padding:0!important;
}

#asiakaskuvat .rajaa h4, #asiakaskuvat2 .rajaa h4 {
	padding:0 0.5em 0 0.5em;
	float:left;
	position:relative;
	top:-15px
}

#asiakaskuvat .rajaa div p, #asiakaskuvat2 .rajaa div p {
	padding:0.8em 0.8em 0 0.8em;
	font-style:italic;
}

#asiakaskuvat .rajaa div p.osoite, #asiakaskuvat2 .rajaa div p.osoite {
	padding-left:0.8em;
	padding-bottom:0.8em;
	font-style:normal!important;
	font-size:0.8em;
}

/* viewport */



 .viewport {
    border:2px solid #7d7d7d;
    height: 140px;
    overflow: hidden;
    position: relative;
    width: 200px;
	float: left;
	margin: 1.5em 3em 1.5em 1.5em;
        }
		
	
.viewport:hover, .pretty-hover, #asiakaskuvat .viewport:hover {
	border:2px solid #7c9921;
	}		

.viewport p {
     line-height:0
        }
		
        /* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
	display: block;
    position: relative;
        }

.viewport a img {
   height: 140px;
   position: relative;         
   width: 200px;
	-ms-interpolation-mode: bicubic;
        }
		

        /* --- Label configuration -------------------------------------------------------------- */
		
.viewport a span {
	display: none;
	height: 100%;
	padding-top: 50px;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 100%;
	z-index: 100;
	font: italic normal 1.5em Georgia, "Trebuchet MS", serif;
        }
		
.viewport a span#kaksirivinen {

	padding-top: 30px;

        }		
		
.viewport a span.kaksirivia {
    padding-top: 30px!important;
}		
		
.viewport a span em {
    display: block;
     font-size: 0.6em;
     font-weight: normal;
	padding-top:1em;
            }

        /* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
	color: #fff!important;
	text-shadow: #000 0px 0px 20px;
	background: url(graf/viewport_bg.png) repeat;
}

		
 .dark-background em {
    color: #ccc;
            }

#nayta {
	cursor:pointer;
	cursor:hand;
}