body { 
	margin: 0px;
	text-align: center; /* tämä keskittää koko hoidon IE:ssä */
	font: 16px/16px "Garamond", serif; 
	color: #000000; 
	}

/* pääotsikot */
h1 {
	font: bold 20px/20px "Garamond", serif;
	color: #92278f; /* valikon väri */
	margin-bottom: 0px;
	line-height: 130%;
	border-bottom: ridge 2px;
	font-variant: small-caps;
	text-align: left;
	}

/* alaotsikot pikku logolla */
h2 {
	font: bold 16px/16px "Garamond", serif;
	color: #1a994d; /* otsikkoväri */
	margin-bottom: 0px;
	background: url("minilogo.jpg") no-repeat left;
	text-indent: 25px;
	}

/* alaotsikot 1 */
h3 {
	font: bold 16px/16px "Garamond", serif;
	color: #1a994d; /* otsikkoväri */
	margin-bottom: 0px;
	}

/* alaotsikko alleviivauksella */
h4 {
	font: bold 16px/16px "Garamond", serif;
	color: #1a994d; /* otsikkoväri */
	margin-bottom: 5px;
	line-height: 130%;
	border-bottom: ridge 2px;
	}

/* allekirjoittaneet kursiivilla */
h5 {
	font: italic 16px/16px "Garamond", serif;
	margin: 0px;
	}

/* alaotsikot 2 */
h6 {
	font: bold 16px "Garamond", serif;
	color: #92278f; /* valikon väri */
	margin: 0px;
	}

#oik ja vas reuna {
	margin: 0 auto; /* keskittää koko hoidon FF:ssa ja Operassa, jotka eivät keskitä divejä tekstikomennolla */
	background: #FFFFFF; /* oik ja vasen reuna */
	width: 808px;
	}

/* oma div sinistä reunaa varten tarpeen, koska jos laitoin taustaan sinisen reunan, tekstipalstan float right meni IE:ssä reunojen leveyden verran pieleen, jos taas määritin vasemman sijainnin pikseleinä, se meni FF:ssä ja Operassa reunan leveyden verran pieleen */

#tausta { 
	margin: 0 auto; /* keskittää koko hoidon FF:ssa ja Operassa, jotka eivät keskitä divejä tekstikomennolla */
	background: #cccccc; /* taustaväri */
	width: 800px;
	}

#ylakuva {
	position: relative;
	width: 800px;
	height: 100px;
	background: url(ylakuva2.jpg) no-repeat top; /* FF ja Opera eivät huoli välejä kuvien nimissä */
	}

#nimi-motto {
	position: relative;
	width: 800px;
	height: 45px;
	background: url(nimi_ja_motto.jpg) no-repeat;
	}

#logo {
	position: relative;
	margin: 0 auto; /* tarvittiin jotta IE ja FF/Opera lähtevät siirtämään vasemmalle alkaen samasta kohdasta */
	top: -95px;
	left: -430px;
	width: 130px;
	height: 130px;
	background: url(logo.png) no-repeat;
	}

#ylavalikko {
	position: relative;
	top: -125px;
	right: 10px;
	width: 800px;
	text-align: right;
	}

#ylavalikko a, a:active, a:visited {
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background: none;
	}

#ylavalikko a:hover {
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: underline;
	background: none;
	}

#valikko {
	position: relative;
	float: left;
	top: -115px;
	width: 190px;
	}

#valikko ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	font: bold 19px/30px "Garamond", serif;
	width: 190px;
	}

#valikko li {
	position: relative;
	}

#valikko ul ul { /* koskee alavalikkoja */
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	font: bold 14px/30px "Garamond", serif;
	position: absolute;
	left: 190px; /* eli 190 pikselin levyisen päävalikon oikealle puolelle */
	top: 0px; /* tämä asettaa alavalikon valikon tasalle */
	}

#valikko li:hover ul {
	display: block;
	}

#valikko a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
	background: #92278f; /* valikon väri */
	border-top: 1px solid #661c64; /* tummempi reunaväri */
	border-bottom: 1px solid #b330ae; /* vaaleampi reunaväri */
	padding: 0 0 0 0px;
	width: 190px;
	}

#valikko ul ul a { /* lisätään oik ja vas reunat pelkästään alavalikon linkkeihin */
	border-left: 1px solid #661c64; /* tummempi reunaväri */ 
	border-right: 1px solid #b330ae; /* vaaleampi reunaväri */
	}

#valikko a:hover, a:active, a:visited {
	background: #cccccc url("valikkonuoli.gif") no-repeat 0 9px; /* taustaväri */
	border-top: 1px solid #cccccc; /* taustaväri */ 
	border-bottom: 1px solid #cccccc; /* taustaväri */
	font-weight: bold;
	}

body#ajankohtaista a#ajankohtaista,
body#liitosta a#liitosta,
body#edunvalvonta a#edunvalvonta,
body#jäsenasiat a#jäsenasiat,
body#paikallistoiminta a#paikallistoiminta,
body#tapahtumia a#tapahtumia,
body#yhteystiedot a#yhteystiedot {
	background: #cccccc url("valikkonuoli.gif") no-repeat 0 9px; /* taustaväri */
	border-top: 1px solid #cccccc; /* taustaväri */
	border-bottom: 1px solid #cccccc; /* taustaväri */
	font: bold 19px "Garamond", serif;
	line-height: 30px;
	}


/* yllä olevien ansiosta aktiivinen sivu näkyy kirkkaan vihreänä, kun linkin id on sama kuin sivun bodyn id, ristikon jälkeen siis ao id */

#tekstipalsta {
	position: relative;
	margin: auto;
	float: right;
	top: -115px;
	width: 610px;
	background: #FFFFFF;
	}

#teksti {
	position: relative;
	margin: 30px;
	text-align: justify;
	}

/* teksti-div tekstipalstan sisällä, jotta saan marginaalit, koska FF ja Opera käyttäytyivät omituisesti, jos laitoin ulommaiseen marginaalit */

#teksti i {
	font-size: 12px;
	}

#teksti a {
	color: #1a994d; /* otsikkoväri */
	text-decoration: none;
	}

#teksti a:hover, a:active, a:visited {
	color: #1a994d; /* otsikkoväri */
	text-decoration: underline;
	font-weight: normal;
	background: #FFFFFF; /* tarpeen koska muuten vihreä taustaväri näkyi aktiivisen ja käytetyn linkin alta ainakin IE:ssä ja Operassa */
	border: 1px #FFFFFF;
	}

#teksti ul li {
	margin-bottom: 2px;
	}

/* 
#teksti ul li {
	margin-bottom: 16px;
	}
*/

#teksti img {
	float: right;
	max-width: 220px;
	max-height: 220px;
	padding: 5px;
	border: none;
	}

#teksti table td {
	padding: 0 10px 0 0;
	border-style: none;
	text-align: left;
	vertical-align: top;
	}

#paivitys {
	position: relative;
	float: left;
	top: -100px;
	left: 55px;
	color: #FFFFFF;
	font-size: 12px;
	}

#alareuna {
	position: relative;
	clear: both; /* tarpeen jotta myös FF:ssa alakuva sijoittuu oikein alareunaan eikä ylös valikon korkeudelle */
	margin: 0 auto;
	left: -4px;
	width: 808px;
	height: 170px; 
	background: url(alakuva_kaari.jpg) no-repeat top; /* FF ja Opera eivät huoli välejä kuvien nimissä */
	}