body{ background-color: #cec6c0; /* Koko rungon taustaväri */
	margin: 0; /* Jotta rungon marginaalit eivät häiritsisi työtämme, niin ne pitää nollata */
	padding: 0; /* KS. ylempi */
	text-align: center; /* KS. Seuraava kappale (IE korjaus) */
	font: 12px/20px verdana; background-image: url(../img/bg.gif); background-repeat: repeat-x; }
#kaarin{ background-color: #fff; background-repeat: repeat; margin-top: 19px; /* Asetetaan ulkoasu 10 pikseliä yläreunasta */
 	text-align: left; /* KS. Seuraava kappale (IE korjaus) */
	margin-left: auto; /* Ulkoasun keskitys sivun keskelle, KS. seuraava kappale */
	margin-right: auto; /* Ulkoasun keskitys sivun keskelle, KS. seuraava kappale */
	width: 900px; /* Ulkoasun leveydeksi 950 pikseliä */
}
#ylaosa{ color: #8a5b28; background-color: #ffffff; background-image: url(../img/banneri.gif); background-attachment: scroll; background-position: 0 0; width: 900px; height:100px; z-index: 100; margin: 0; border-top: 1px solid #a0a0a0; border-right: 1px solid #a0a0a0; border-left: 1px solid #a0a0a0; }

#menu { background-image: url(../img/footer.gif); margin: 0; padding: 0; width: 900px; height: 21px; }
#menu ul { color: #fff; font-weight: bold; list-style-type: none; margin: 0; padding: 0; width: 900px; }
#menu li { display: inline; margin: 0; padding: 0;}
#menu li a { color: #fff; font-weight: bold; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; display: block; float: left; margin: 0 5px; text-align: center; text-decoration: none; width: 10em; padding: 3px 5px; border-right: 1px solid #fff; border-left: 1px solid #fff; }
#menu li a:link, li a:visited { font: 11px verdana; color: #fff; text-decoration: none; }
#menu li a:hover { color: #000; background-color: #cec6c0; text-decoration: none; }
#menu li a:active { background: #cec6c0; color: #fff; text-decoration: none; }


#dropmenudiv{ color: #37357a; position:absolute; font:10px verdana; background-color: #cec6c0; text-decoration: none; z-index:100; border-color: white; border-style: solid; border-width: 1px 1px 0; }

#dropmenudiv a{
font:10px verdana; 
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid white;
padding: 1px 0;
text-decoration: none;

}

#dropmenudiv a:hover{ /*hover background color*/
color: #79b4ed; background-color: #fff; text-decoration: none; }
.avalkoinen  {
font:10px verdana;
text-align: left;  
color: #fff;
text-decoration: none; /* jos haluat ett? linkeiss? ei n?y alleviivausta niin laita 'underline' kohtaan "none" */
}

#logo{
	height: 120px; /* Logon alueen korkeudeksi 120 pikseliä */
	border: 1px solid black; /* Annetaan alueen ympärille musta raja */
	background-color: #7fd4ff; /* Taustaväriksi taivaansininen */
	color: white; /* logo-alueen tekstin väriksi vaalea */
	margin-bottom: 10px; /* Jotta alemman rivin sarakkeet eivät osuisi logoon, niin annamme sille hieman 
	tyhjää tilaa alapuolelle */
}

#container { background-color: #fff; color: #000000; background-repeat: repeat; padding: 0; width: 900px; float: left; }
#vasen{ width: 180px; /* Asetetaan vasemman sarakkeen leveydeksi 200 pikseliä */
	float: left; margin-top: 10px; margin-left:10px;
	 /* Asetetaan vasen sarake "kellumaan" vasemmalle */
}
#keski{ width: 500px; float: left; /* Asetetaan vasen sarake "kellumaan" vasemmalle */
	margin-top: 10px; margin-left: 10px;
	/* Jotta keskimmäinen sarake ei osuisi vasempaan, niin 
	annamme sille hieman vasenta marginaalia eli tyhjää tilaa vasemmalle puolelle.*/
}
#oikea{ width: 178px; float: left; margin-top: 10px; margin-left: 10px;/* Asetetaan vasen sarake "kellumaan" oikealle */
}
/* Annetaan yhteiset tyylit jokaiselle luokkaan box kuuluville diveille */
.box{ background-color: #ffffff; text-align: left; }
.box_2{ font-size: 10px; font-family: verdana; background-color: #efefef; text-align: left; border: solid 1px black;; }

.sisalto{ background-color: #ffffff; margin-bottom: 12px; }

/* Annetaan yhteiset tyylit jokaiselle luokkan btop kuuluville diveille */
.btop{ color: #fff; background-color: #7f7f83; background-repeat: repeat-x; width: 170px; height: 21px; padding-top: 4px; padding-left: 3px; }
.btop_2{ color: #fff; background-color: #7f7f83; background-repeat: repeat-x; width: 170px; height: 21px; padding-top: 4px; padding-left: 3px; }

#vasen .box, #left .btop, #oikea .box, #oikea .btop{
	width: 178px; 
}
/* Annetaan tyylit jokaiselle box ja btop luokkiin kuuluville diveille keskimmäisessä sarakkeessa */
#keski .box, #keski .btop{
	width: 500px; 
}

/* Annetaan tyylit jokaiselle footer luokkaan kuuluvalle diville keskimmäisessä sarakkeessa */
#keski .footer{
	border: 1px solid black; /* Annetaan footerille yhden pikselin musta raja */
	width: 900px; /* footerin leveys - 1 pikseli x 2 = 528px */
	height: 22px; /* Footerin korkeudeksi 22pikseliä */
	text-align: center; /* Tasataan teksti tässä elementissä keskelle - vain sivuston copyright-tekstit */
	margin-top: 10px;
	clear: both; /* Annetaan footerille 10 pikseliä tyhjää tilaa yläpuolelle, jotta se ei 
	osuisi sisältölaatikkoon */
	background-color: #d82819; /* Taustaväri */
}
#img.floatLeft { background: #ffffff; float: left; margin: 10px 40px 10px 10px; }
#img. floatRight { float:right; margin: 0px 0px 15px 20px; }

.imgleft { float: left; margin-top: 10px; margin-right: 10px; margin-bottom: 20px; border-bottom-width: 10px; }
.imgright { float: right; margin-top: 10px; margin-bottom: 20px; margin-left: 10px; border-bottom-width: 10px; }

.sisalto{ background-color: #ffffff; margin-right: 10px; border-style: none; border-width: 0; }

.padding:{ padding: 4px; /* Reunojen ja tekstin väliin neljän pikselin tyhjä tila */
}

#navi ul{
	list-style-type: none; /* Asetetaan listan bulletit pois päältä */
	margin: 0; /* Marginaali pois */
	padding: 0; /* Tyhjä tila tekstin ja elementin reunan välissä pois */
}
#navi ul li{ display: block; /* Pohjaan rajaksi yhden pikselin musta raja */
}
#navi ul li a{ display: block; /* Listan osa muutetaan block-tason elementiksi */
	height: 18px; /* Annetaan korkeudeksi 17 (22) pikseliä */
	color: #000; /* tekstin väriksi taivaansininen */
	background-color: #e2e2e2; text-decoration: none; /* tekstin alleviivaus pois */
	width: 170px; padding-left: 3px; /* Teksti pois reunasta */
	padding-top: 4px; border-bottom: 1px dotted #7f7f83; }

/* Vielä hieman koristelua navigaation linkkeihin (hiiri päällä efekti) */
#navi ul li a:hover{
	background-color: #cec6c0; color:#7f7f83; /* Vaihdetaan taustaväri */
}
#navi ul li a:active{
	background-color: #cec6c0; color:#ffffff; /* Vaihdetaan taustaväri */
}

p{
	margin: 0; /* Ensin nollataan marginaalit */
	margin-top: 7px; /* Sitten annetaan niille 7px marginaalia yläpuolelle */
}

.esittely { float: left; margin: 5px 40px 10px 10px; }

#footer { color: #7f7f83; background: #fff url(../img/footer.gif); clear: both; font-size: 11px; margin: 0; text-align: center; width: 900px; height: 21px; padding: 1px; }
#footer p { margin: 0; color: #7f7f83; padding-bottom: 10px; }

h2 { color: #373737; font-size: 18px; font-weight: normal; text-decoration: none; }
h1 { color: #7f7f83; font-size: 18px; font-family: verdana; }
.img.vasen { float: right; margin: 12px; }
.vasen { float: right; margin: 12px; }
.oikea { float: left; margin: 12px; }
.oikea_valikko { float: left; margin-top: 50px; margin-bottom: 10px; }