@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif, Times New Roman, Times;
	background: #1e2736; 
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.main #container { 
	width:320px; 
line-height:130%;
margin: 0 auto;
/*border:1px solid black;*/
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-color: #ffffff; 
	} 


.main #header { 
	background-color: #DDDDDD; 
	/*padding: 0 0 0 0; */ /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	height: 98px;
	
/*uudet määritykset, banneri html-tiedostosta css-tiedostoon*/	
	background-image: url(../images/banneri_hiekka_3_lev320px.jpg);
	background-repeat: no-repeat;
	background-position: left top;
} 
.main #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}



.main #sidebar1
{
background-image: url(../images/tausta_navlist_phone_lev320px_kork380px.jpg);
background-repeat: no-repeat;
margin-bottom:35px;
background-position: left top;
width:320px; 
margin-top:98px;
float:left;
hight:100%;    
font-family:verdana; 
} 



/*navigaatio alkaa*/
 
 #navlist li
 {
 font-family:verdana;
 font-size:12px;
 line-height:18px;
 }

#navlist li a { text-decoration: none; }

#navlist li a:link {color:#ffffff; font-weight:regular;} 
#navlist li a:visited {color:#ffffff; font-weight:regular;}
#navlist li a:hover {color:#c9e9f9; font-weight:regular;}
#navlist li a:active {color:#c9e9f9; font-weight:regular;}


#navlist
 {
 /* padding-left: 0;
 margin-left: 0; 
 width: 80px; */
 padding: 10px 15px 15px 15px;
	margin-left: 25px;
	margin-right: 25px;
	width: 240px;
	margin-bottom: 20px;
 }

 #navlist li
 {
 list-style: none;
 margin: 0;
 padding: 0.4em;
 border-bottom: 1px solid #5d6b79;
 }

 /* navigaatio loppuu */
 


.main #mainContent { 
	margin: 0 0 0 0px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding:25px; padding-right:25px; padding-top: 0px; padding-bottom: 30px;
	
	} /* remember that padding is the space inside the div box and margin is the space outside the div box */	
	


h3{font-family:times;
 font-size:18px;
 line-height:20px;
 font-style:italic;
 font-weight:light;
 color:#2c5071;
 padding-top:20px;}
 
p{
 font-family:verdana;
 font-size:11px;
 line-height:18px;
 color:#3f566b;
 padding-right:40px;
 }
 
 .muotoile{
 font-weight:bold;
 font-style:regular;
 color:#40505f;
 }

.muotoile2{
 font-family:times;	
 font-weight:bold;
 font-style:regular;
 font-size:18px;
 color:#2c5071;
}

#kansi11 {
	 float:left;
	 margin-top:0em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }

#kansi10 {
	 float:left;
	 margin-top:0em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#kansi9 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }	 	 
 
 #kansi1 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#kansi2 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#kansi3 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#kansi4 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }	
	 
#kansi5 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 } 

#kansi6 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#kansi7 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#kansi8 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#raportti1 {
	 float:left;
	 margin-top:0em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#raportti2 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }	 
	 
#esite1 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }	 
	 
#julkaisu1 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#posteri1 {
	 float:left;
	 margin-top:0em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 width:270px;
	 height:191px;
	 }
	 
#posteri2 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }	
	 
#posteri3 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }
	 
#jarvi {
	 float:left;
	 margin-top:0em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 width:270px;
	 height:204px;
	 }
	 
#akvarelli {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 width:270px;
	 height:157px;
	 }
	 
#tussipiirros1 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 width:270px;
	 height:198px;
	 }	 
	 
#tussipiirros2 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 width:270px;
	 height:198px;
	 }	 	 
	 
#kortti {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 border:1px solid black;
	 }	
	 
#infograafi1 {
	 float:left;
	 margin-top:0em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 width:270px;
	 height:229px;
	 } 
	 
#infograafi2 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:20px;
	 width:180px;
	 height:184px;
	 }
	 
#infograafi3 {
	 float:left;
	 margin-top:1em;
	 margin-right:1em;
	 margin-left:0em;
	 margin-bottom:20px;
	 width:270px;
	 height:349px;
	 }	
	 
#logo1 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:15px;
	 } 
	 
#logo2 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:15px;
	 }	 	 
	 
#logo3 {
	 float:left;
	 margin-top:1em;
	 margin-right:2.5em;
	 margin-left:1em;
	 margin-bottom:15px;
	 }	 
	 
#logo4 {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:15px;
	 }
	 
#logo5 {
	 float:left;
	 margin-top:0.5em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:15px;
	 }		
	 
#logo6 {
	 float:left;
	 margin-top:0.5em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:15px;
	 }		
	 
#auto1 {
	 float:left;
	 margin-bottom:7px;
	 width:270px;
	 height:155px;
	 }	
	 
#auto2 {
	 float:left;
	 margin-bottom:10px;
	 width:270px;
	 height:136px;
	 }
	  	 	 	 	  	 	 	 	 	 	 	 	 	 	 	 	 
#kutsu1a {
	 float:left;
	 margin-top:1em;
	 margin-right:2px;
	 margin-left:0em;
	 margin-bottom:10px;
	 border:1px solid black;
	 width:130px;
	 height:248px;
	 }	 	 		 	 	 
	  
#kutsu1b {
	 float:left;
	 margin-top:1em;
	 margin-right:0em;
	 margin-left:0em;
	 margin-bottom:10px;
	 border:1px solid black;
	 width:133px;
	 height:248px;
	 }	 	 		 	 	 
	 
#kutsu2a {
	 float:left;
	 margin-top:1em;
	 margin-right:2px;
	 margin-left:0em;
	 margin-bottom:10px;
	 border:1px solid black;
	 width:128px;
	 height:248px;
	 }	 	 		 	 	 
	  
#kutsu2b {
	 float:left;
	 margin-top:1em;
	 margin-right:0em;
	 margin-left:0em;
	 margin-bottom:10px;
	 border:1px solid black;
	 width:130px;
	 height:248px;
	 }	
	 
#kutsu3a {
	 float:left;
	 margin-top:0em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:5px;
	 border:1px solid black;
	 width:270px;
	 height:270px;
	 }	 	 		 	 	 
	  
#kutsu3b {
	 float:left;
	 margin-top:1em;
	 margin-right:1.5em;
	 margin-left:0em;
	 margin-bottom:10px;
	 border:1px solid black;
	 width:270px;
	 height:270px;
	 }
	 	 
	 
#nettisivu {
	 float:left;
	 margin-bottom:10px;
	 margin-bottom:20px;
	 width:270px;
	 height:204px;
	 }
	 
#linja {
	 float:left;
	 width:270px;
	 height:20px;
	 margin-top:0em;
	 }	 	 	 	  	 		 	 

.main #footer { 
	padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#97816a; 
} 
.main #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 5px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.nappi {border:1px; border-style:solid; border-color:black; background-color:#e0be9a; color:black;}

.nappi2 {border:1px; border-style:solid; border-color:black; background-color:#99bde1; color:black;}

fieldset {border:none; margin:0; padding:0;}

.muotoile3{
 font-family:verdana;	
 font-weight:regular;
 font-style:regular;
 font-size:11px;
 color:#2c5071;
 margin-left: 10px;}
 .muotoile3 a:link {color:#ffffff; font-weight:regular;} 
 .muotoile3 a:visited {color:#ffffff; font-weight:regular;}
 .muotoile3 a:hover {color:#c9e9f9; font-weight:regular;}
 .muotoile3 a:active {color:#c9e9f9; font-weight:regular;}
 
 .muotoile4{
 font-size:10px;
 font-style:italic;
 font-weight:regular;
 color:#569cc4;}
 
 .muotoile5{
 font-family:verdana;
 font-size:10px;
 line-height:18px;
 font-weight:light;
 font-style:italic;
 color:#3f566b;
 padding-right:30px;}
 
  .muotoile6{
 font-family:times;	  
 font-size:18px;
 line-height:18px;
 font-style:italic;
 font-weight:light;
 color:#f7e4c2;
}