/* Tyyli Tassulan Puoti */


html {text-align:center;}

	

* 	{margin:0;
	padding:0;}

h1, h2, h3, h4, h5 {font-size:100%;}

p	 { margin:10px 0 10px 0; }

ol, ul {list-style:none;}

img {border:0;}

th {text-align:left;}


body { 	margin: 20px; 
		padding: 0;
		font:80% "Lucida Grande", Verdana, sans-serif;
		text-align:left;
		color: #333; 
		background-color:#f4ffee;
		}
		


.otsikko, .sisalto, .linkit, .info { width: 770px; 
			margin: 0 auto; }
			
.otsikko {  height:193px; 
			background:transparent; 
			}


h1  {
	width:770px;
	height:193px;
	background:transparent url(kuvat/logo5.jpg) no-repeat;
	text-indent:-9999px;
	}	 

.slogan {
			position:absolute;
			top:10px; left:auto;
			width:600px;
			height:30px;
			background:transparent url(kuvat/slogan.gif) no-repeat;
			z-index:100;
			padding-left:20px;
			text-indent:-9999px;}

.linkit {height:75px;			
         background:#fff url(kuvat/linkit3.jpg) no-repeat 0 0;
			width:770px;
			text-align:center;
			position:relative;
			}
			
.linkit li {display:inline;}

.ter {position:absolute; top:0; left:0;}

.vak {position:absolute; top:0; left:110px;}

.ota {position:absolute; top:0; left:220px;}

.kar {position:absolute; top:0; left:330px;}

/*.tie {position:absolute; top:0; left:440px;} 

.ota {position:absolute; top:0; left:550px;}	

.kar {position:absolute; top:0; left:660px;}*/

.ter a, .net a, .tar a, .vak a, .tie a, .ota a, .kar a {display:block;
				width: 110px;
				height: 60px;
				text-indent:-9999px;}	
				
	
				
.sisalto {background-color:#fff;
			}						

a {text-decoration:none;
	font-weight:bold;
	color:#610402;}

.keskusta, .keskusta2, .puoti, .puoti2, .aiheet, .malttia, .mainos1, .mainos2, .mainos3 { position: absolute; 
							
							} 

.keskusta	{ width: 330px; left:205px;
			padding:20px 0 20px 0; }
			
			
.keskusta p {padding-bottom:10px;}


.keskusta2	{ width: 600px; left:85px;
			padding:20px 0 20px 0; }
			
.korostus {color:#000033; font-size:110%;}

p.kartta {height:440px;}
 
h2 {padding:0 0 12px 0;
	font:150% "Trebuchet MS", "Lucida Grande", Verdana, sans-serif;
	font-weight:bold;
	color:#009933;
	letter-spacing:-1px;} 

/* h3:ssa vihreä yläreuna, käytössä esim. tarinoissa */

h3 {padding:12px 0 12px 0;
	font:120% "Trebuchet MS", "Lucida Grande", Verdana, sans-serif;
	font-weight:bold;
	color:#009933;
	letter-spacing:-1px;
	border-top: 2px dashed #129605;} 
	
/* h4 kuten h3, mutta ilman yläreunaa */

h4 {padding:0 0 12px 0;
	font:120% "Trebuchet MS", "Lucida Grande", Verdana, sans-serif;
	font-weight:bold;
	color:#009933;
	letter-spacing:-1px;} 

/* h5 musta otsikko, käytössä mm. yksittäisen kirjoituksen otsikkona */

h5 {padding:10px 0 0 0;
	font:100% "Trebuchet MS", "Lucida Grande", Verdana, sans-serif;
	font-weight:bold;
	color:#000;
	letter-spacing:-1px;} 	

.media	{ margin-top:20px;
			width:155px;
			height:50px;
		
			background:transparent url(kuvat/media.gif) no-repeat;
						
			}
			
.media a {display:block; 
		width:155px;
		height:50px;
		text-indent:-9999px;} 
		


#vasen {position:absolute;
		top:0; left:10px;}

/* puoti on punapohjainen kuva vasemmassa laidassa "tervemenoa verkkokauppaan" */
	 
.puoti	{ 	
			width:155px;
			height:200px;
	 
			background:transparent url(kuvat/palvelemme.gif) no-repeat;
			}

.puoti a {display:block; 
		width:155px;
		height:200px;
		text-indent:-9999px;}
		
/* media vain etusivulla */	
	

		
.aiheet {top: 20px; left: 10px;
			width:155px;
			height:270px;}
			
.aiheet li {padding:4px 0;}

/* puoti2 sijaitsee alempana kuin puoti, siis alilinkkien alla */
		
.puoti2	{ 	top: 270px; left: 10px;
			width:155px;
			height:200px;
		
			background:transparent url(kuvat/puoti.gif) no-repeat;
			}

.puoti2 a {display:block; 
		width:155px;
		height:155px;
		text-indent:-9999px;}


/* mainos1: musta reuna, kuvana 2 tassua, otsikko musta+vihreät pallot */			
.mainos1 {width:155px;
		left:580px; top:20px;
		
		padding:10px;
		border:2px dashed #000000;}
		
.mainos1 p {text-align:center;}

.mainos1 p.tassut {height:100px; background:transparent url(kuvat/mainos1.gif) no-repeat top left;}
		
/* musta otsikko, jonka alapuolella vihreät täplät */

.mainos1 h4.musta {padding:0 0 12px 0;
	font:160% "Courier New", Courier, monospace;
	font-weight:bold;
	color:#000;
	letter-spacing:-2px;
	text-transform:lowercase;
	background:transparent url(kuvat/h4_pisteet.gif) no-repeat bottom right;}
		

/* mainos2: vihreä reuna, kuvana 2 koiraa, otsikko punainen+mustat tähdet */			
.mainos2 {width:155px;
		
		left:580px; top:20px;
		
		padding:10px 10px 0 10px;
		border:2px dashed #129605;}	
.mainos2 p {text-align:center;}	
		
.mainos2 p.koirat {height: 80px; background:transparent url(kuvat/mainos2.gif) no-repeat top left;}

 	
/* punainen otsikko, jonka alapuolella mustat tähdet */

.mainos2 h4.punainen {padding:0 0 12px 0;
	font:160% "Courier New", Courier, monospace;
	font-weight:bold;
	color:#a00501;
	letter-spacing:-2px;
	text-transform:lowercase;
	background:transparent url(kuvat/h4_tahdet.gif) no-repeat bottom right;
	}

/* mainos3: valmis kuva, jossa punainen teksti "Muistathan, että meiltä saat lemmikkisi lempiruoat kotiovellesi! Eikö olekin helppoa?" punainen reuna, kuvana tassurivistö */
.mainos3 {width:155px;
		height:200px;
		left:580px; top:20px;
		background:transparent url(kuvat/mainos3.gif) no-repeat bottom left;
		padding:0;
		border:2px dashed #a00501;
		text-indent:-9999px;}




.clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
.cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */


.info {background:transparent url(kuvat/info_pyorea.gif) no-repeat;
		height:140px;
	 position:relative;
	 font-size:90%;}


.info ul {padding:10px 0 4px 10px;}


.tekija a {position:absolute; 
		top:100px;
		left:8px;
		width:150px;
		height:25px;
		background:transparent url(kuvat/tekija.gif) no-repeat;
		text-indent:-9999px;}

.info p {position:absolute;
			top:10px;
			left:300px;
			width:350px;
			height:90px;
			z-index:100;
			background:transparent url(kuvat/avoinna.gif) no-repeat;
			text-indent:-9999px;}

.piirrokset {font-size:70%;
			color:#999;}
			
.kirjoittaja {text-align:right;
		font-size:80%;}			
  

table td {padding:5px;}

table img {padding:3px;
			background:#129605;}
			
 

form#lomake {padding-top:0;
		background:transparent none;}
form#lomake h3 {padding:0 0 20px 0;
		background:#eee;}

form#lomake p {font-style:italic;
		padding-top:10px;
		font-size:90%;
		background:#eee;}

form#lomake label {background:transparent none;
		font-size:100%;
		}

form#lomake input {background:#ddd; padding:2px;
			}

input.laheta {border:3px outset #999;
		margin-left:10px;}

input.tyhjenna {border:3px outset #999;
		margin-left:20px;}

form#lomake textarea {background:#ddd;
			}

form#lomake fieldset {border:1px solid #999;
			padding:10px;
			background:#eee;
			margin-bottom:30px;}



/*

div#otsikko {position:relative;
			height:193px;
			width:100%;
			background:transparent;
		
			margin:0 auto;
			}	
			
			
div#otsikko h1 {position:absolute;
	top:0;
	left:0;
	width:770px;
	height:193px;
	background:transparent url(kuvat/logo5.jpg) no-repeat;
	text-indent:-9999px;
	}	 

div#otsikko p {position:absolute;
			top:10px; left:10px;
			background:transparent;}
			

div#linkit {position:relative;
			height:50px;
			background:#009999 url() no-repeat 0 0;
			width:100%;
			text-align:center;
			}
div#linkit ul {padding-top:15px;}
			
div#linkit li {display:inline;
				padding:15px 6px;
				color:#CCFF00;}
		
div#linkit li a {text-decoration:none;
				color:#FFFFFF;}	
				


			
div#sisalto {position:relative;
			width:100%;
			background-color:#fff;}
			
div#keskusta {position:absolute;
			left:20%;
			width:60%;
			padding:1em 0;}
			
	
div#vasen {position:absolute;
			left:0;
			width:20%;
			padding:1em 0;}
			
			
div#oikea {position:absolute;
			left:80%;
			width:20%;
			padding:1em 0;}		
			


div#info {
			height:120px;
			background:#888;
			width:100%;
			text-align:center;}

div#info ul {padding-top:10px;}

div#info li {display:inline;
			padding:7px;}

div#info li a {text-decoration:none;
				color:#336633;}
				
.avoinna li {font-size:110%;
			}
			
			
*/