/* Tässäpä siistitympi tyylitiedosto. 12.1.2003 klo 18.02 (Vesa) korjattu 14.1. klo 9.16
/* Lisätty kuvateksteille tyylejä 16.1. klo 10.39 (Harri)
/* Lisätty H3 tyyliin 16.1. klo 17.39 (Harri)
/* Lisätty OL none tyyliin 9.2. (Harri)
/* Lisätty teksti_alareuna tyyliin 2.9.2005 (Harri)

Varsinaisessa HTML-teksissä ei käytetä muotoiluelementtejä kuten <b> tai <i>, sen sijaan käytetään rakenteellisia elementtejä kuten <em> ja <strong>, kummatkin ovat korostuksia, mutta strong-elementti on voimakkaampi. 

Mittayksiköistä: Suhteellisia mittayksiköitä kannattaa suosia, koska ne ovat skaalautuvia. Suhteellisia ovat mm. % ja em (em tarkoittaa suhdetta elementin perusfonttikokoon). Absoluuttisia ovat taas mm. px (pikseli) ja pt. Ensimmäistä oon käyttänyt marginaaleissa.

Fonteista: 
font-family = käytettävä kirjasin
	Annetaan useampi fontti. Jos selaimella ei ole tiettyä fonttia käytössä, poimii se ensimmäisen 	joka löytyy. Sans-serif tarkoittaa päätteetöntä fonttia. 

font-size = koko
	Olen määritellyt ne prosentteina. Selaimen oletuksena on 100%.

font-weight = paksuus
	Arvot vaihtelevat 100 - 900. 400 vastaa normaalia ja 700 paksua <b>
 */



BODY {	font-family:	Verdana, Arial, Helvetica, sans-serif; 
		margin-left: 	10px;  
			/* sivuston vasemman reunan marginaali 10 pikseliä */
		margin-top: 	13px; 
			/* ylä-marginaali */
		background-color:	#66FFFF;
			/* taustaväri, mikäli kuvat ei lataannu */
		background-image:	url("pic/tausta.gif"); 
			/* taustakuva (huom. Netscapea varten URLin pitää olla suhteessa tyylitiedostoon) */
		width:		95%; 
			/* määritellään käytettävä sivuleveys */						
		max-width:		40em;
			/* sivun maksimileveys, vanhemmat selaimet tukee huonosti */
}

H1 {		font-family:	Verdana, Arial, Helvetica, sans-serif;
		font-size:		150%;
		font-weight:	700;
		color:		#5D5D5D;
			/* tekstin väri heksadesimaalina */
		background-color:	transparent; 
			/* tausta määritelty läpinäkyväksi */
		margin-top:		3em;
}

H2 {		font-family:	Verdana, Arial, Helvetica, sans-serif;
		font-size:		115%;
		font-weight:	700;
		color:		#5D5D5D;
		backround-color:	transparent;
		margin-top:		2.5em;
}

H3 {		font-family:	Verdana, Arial, Helvetica, sans-serif;
		font-size:		105%;
		font-weight:	700;
		color:		#5D5D5D;
		backround-color:	transparent;
		margin-top:		0.5em;
}

P {		font-family:	Verdana, Arial, Helvetica, sans-serif;
		font-size:		100%;
		font-weight:	400;
		color:		#333333;
		background-color:	transparent;
}

#navi {	background-color: #green;
		background-image: url("pic/viiva.gif");
		background-repeat: repeat;
		border-top: 	4px solid #000000;
		border-bottom: 	4px solid #000000;
		text-align: 	right;
		margin-bottom:	0;
		padding:		0.5em;
			/* vastaa samaa kuin taulukoissa cell-padding */
}

#keskiosa {	background-color:	#yellow;
		background-image:	url("pic/tausta.gif");
		margin-top:		0;
		margin-bottom:	0;
		padding: 		0.5em;
}

#em {		display:		block;
			/* muuttaa elementin määrittelemän tekstin lohkotyyppiseksi */ 
		float:		left;
			/* siirtyy seuraavan lohkoelementin viereen vasemmalle */
		width:		45%;
			/* lohkoelementin viemä leveys, IE 4 ei muistaakseni ymmärtänyt oikein */
		font-family:	Arial, Helvetica, Verdana, sans-serif;
		font-size:		130%;
		letter-spacing:	0.1em;
			/* kirjainten välistystä on lisätty */
		font-weight:	700;
		text-transform:	uppercase;
			/* tekstistä tulee kokonaan isolla kirjoitettu */
		color:		#333333;
		background-color: transparent;
}

#ks {		display:		block;
		text-align:		right;
		font-family:	Arial, Helvetica, Verdana, sans-serif;
		font-size:		100%;
		font-weight:	900;
		text-transform:	uppercase;
		color:		#000000;	
		background-color: transparent;
}


#polku {	background-color: #white;
		background-image: url("pic/viiva.gif");
		background-repeat: repeat;
		border-top: 	4px solid #C0C0C0;
			/* ylämarginaali on  määritelty 4 pikseliä leveäksi, muodoltaan tasaiseksi,
			viimeisenä on marginaalin väri */ 
		border-bottom: 	4px solid #C0C0C0;
		text-align: 	left;
		margin-top:		0;
		padding:		0.5em;
}


#teksti_alareuna {	background-color: #white;
		background-image: url("pic/viiva.gif");
		background-repeat: repeat;
		border-top: 	4px solid #C0C0C0;
			/* ylämarginaali on  määritelty 4 pikseliä leveäksi, muodoltaan tasaiseksi,
			viimeisenä on marginaalin väri */ 
		border-bottom: 	4px solid #C0C0C0;
		text-align: 	left;
		margin-top:		0;
		padding:		0.5em;
}

#teksti {	margin-left:	10%;
}


#kuva-em {	display:		block;
			/* muuttaa elementin määrittelemän tekstin lohkotyyppiseksi */ 
		float:		right;
			/* siirtyy seuraavan lohkoelementin viereen vasemmalle */
		width:		30%;
			/* lohkoelementin viemä leveys, IE 4 ei muistaakseni ymmärtänyt oikein */
		font-family:	Arial, Helvetica, Verdana, sans-serif;
		font-size:		100%;
		color:		#333333;
		background-color: transparent;
}


#alaviite { text-align:		right;
		margin-top:		0.2em;
}


A:link { 	color:		#000080;
		background-color: transparent;
		font-weight: 	400;
}

A:active { 	color:		#FF0000;
		background-color: transparent;
		font-weight: 	400;
}

A:visited { color:		#6A006A;
		background-color: transparent;
		font-weight: 	400;
}

A:hover { 	color:		#0000FF;
		background-color: transparent;
		font-weight: 	400;
}

EM {		font-style: 	italic;
}

STRONG {	font-weight: 	700;
}

UL	{	list-style-type:	circle;
}

OL	{ 	list-style-type: none;
}

HR { 		color:		#999999;
}		


/* tutkikaa näitä ja kokeilkaa erilaisilla mitta-arvoilla, miltä näyttää. */