/******************************************************************************************************
tyylisivu_normaali.css

Tässä tiedostossa on sivujen perusmuotoilut. Tiedosto liitetään ylaosa.html -tiedoston head-osiossa
kommentoituina ovat kaikkien luokkien tehtävä ja mistä .php-tiedostosta ne löytyvät (paitsi jos sitä on käytetty monessa tiedostossa) sekä jokaisen muuttujan tehtävää ainakin kerran
******************************************************************************************************/
/* sivujen yleismuotoilut, löytyvät ylaosa.html tiedostosta */
html, body {
	/* otetaan selainikkunan koko korkeus käyttöön */
	height:100%;
	/* marginaali eri elementtien välillä */
	margin:0;
	/* marginaali elementin ja sen sisällön välillä */
	padding:0;
	/* käytettävä fontti: jos ko fontti ei ole käytettävissä, valitaan listassa seuraavana oleva */
	font-family:verdana, arial, sand-serif;
	/* rivin korkeus */
	line-height:150%;
	/* fontin korkeus */
	font-size:1em;
	/* taustaväri "ylijämäalueella" */
	background-color:#EAEAFF;
}

/*** YLEISET *******************************************************************************************/

	.punainen1 { color:#FF0000; }
	.punainen2 { color:#CC0000; }
	.punainen3 { color:#990000; }
	.oranssi { color:#FF9900; }
	.vihrea1 { color:#00CC00; }
	.vihrea2 { color:#009900; }
	.vihrea3 { color:#006600; }
	.cyan { color:#00FFFF; }
	.vsininen1 { color:#00CCFF; }
	.vsininen2 { color:#0099FF; }
	.sininen1 { color:#0000FF; }
	.sininen2 { color:#0000CC; }
	.sininen3 { color:#000099; }	
	
	
	

/*** LINKIT ********************************************************************************************/

	/* linkkien yleiset muotoilut */
	/* linkin perustila */
	a:link { text-decoration:none; }
	/* kun linkissä on vierailtu */
	a:visited { color:purple; text-decoration:none;}
	/* kun linkkiä klikataan */
	a:active { text-decoration:none; }
	/* kun osoitin on linkin päällä */
	a:hover { color:red; text-decoration:underline;}

	/* navigointilinkkien muotoilut */
	a.navigointi:link { text-decoration:underline; }
	a.navigointi:visited { text-decoration:underline; }
	a.navigointi:hover { color:red; text-decoration:underline; }
	
	a.paalinkki:link { text-decoration:none; }
	a.paalinkki:visited { text-decoration:none; }
	a.paalinkki:active { color:black; text-decoration:none; }
	a.paalinkki:hover {color:black; text-decoration:none; }

/*** FONTIT *******************************************************************************************/
	
	/* henkilökunta-sivulla olevan Annen kuvan kuvateksti */
	font.annen_kuvateksti {
		font-size:10px;
		text-align:center;
	}

	/* skaalaa fontin kokoa pienemmäksi oletuskoosta  (kts: css font-size määrittely googlesta) */
	font.pienempi {
		font-size:smaller;
	}

	/* yläpalkissa käytettävä fonttimuotoilu */
	font.ylapalkki {
		color:#0066CC;
		font-size:1.1em;
	}

/*** OTSIKOT **********************************************************************************************/

	/* yleismäärittely h1-tason otsikon väriksi */
	h1 {
		clear:both;
		color:#993366;
	}
	
	/* risuaita pisteen sijaan koska kyseistä muotoilua käytetään vain kerran. muotoilua käytettäessä käytetään class-sanan sijasta sanaa id  */
	h1#etusivu {
		clear:both;
		text-align:center;
	}

	/* tapahtumat-sivun pääotsikon muotoilut */
	h1.tapahtumat {
		/* katkaistaan float-määriteltyjen elementtien jono ja siirrytään "uudelle riville" */
		clear:both;
		font-size:1.6em;
		color:#993366;
	}

	/* tapahtuman alaotsikon muotoilut */
	h3.tapahtumat {
		font-size:1.1em;
	}
	
	p.keskitetty {
		text-align:center;
	}

/*** KUVAT ******************************************************************************************************/

	/* päälinkkien kuvien muotoilut: siirtää kuvaa 3 pikseliä vasemmalle */
	img.nappi {
		margin-bottom:-3px;
		padding:0;
	}

	/* sivupalkissa olevien logojen (ray ja mtkl) muotoilut */
	img.sivupalkkilogo
	{
		margin-top:10px;
		border:0;
	}

/*** TAULUKOT JA SOLUT ******************************************************************************************/

	/* etusivulla olevan taulukko jossa tapahtumat lyhennetysti */
	table.ajankohtaista {
		position:relative;
		bottom:0px;	
		border:1px solid;
	}
	
	/* hallitus-sivun taulukun muotoilut. */
	table#hallitus {
		font-size:smaller;
	}

	/* etusivun ajankohtaista -taulukon tavallisen solun muotoilu: lisää katkoviivan solun alalaitaan */
	td.katkoviiva {
		border-bottom:1px dashed;
	}
	
	/* etusivun ajankohtaista -taulukon tavallisen solun muotoilu: vaihtaa solun taustaväriksi valkoisen */
	td.valkoinen {
		background-color:#FFFFFF;
	}

	/* etusivun ajankohtaista -taulukon otsikkosolun muotoilu: lisää katkoviivan tavan solun alalaitaan */
	th.kiinteaviiva {
		border-bottom:1px solid;
	}
	
	/* etusivun ajankohtaista -taulukon otsikkosolun muotoilu: skaalaa fontin kokoa suuremmaksi oletuskoosta */
	th.suurempi_fontti {
		font-size:larger;
	}
	
	/* etusivun ajankohtaista -taulukon otsikkosolun muotoilu: vaihtaa solun taustavärin valkoiseksi */
	th.valkoinen {
		background-color:#FFFFFF;
	}
	
	

/*** DIVIT *********************************************************************************************************/

	/* sivupalkin (kts lueminut.doc kuva 3) linkkien säiliö */
	div.alalinkkidiv {
		/* sijoitetaan elementti "parent"-elementin vasempaan laitaan, tällä saadaan useita elementtejä rinnakkain */
		float:left;
		/* elementin kokonaisleveys: leveys on suhteessa "parent"-elementtin leveyteen, tässä tapauksessa sivupalkki-diviin */
		width:75%;
		/* marginaali elementin ja sisällön välillä */
		padding:5px;
		/* elementin taustaväri */
		background-color:#CCCCFF;
		/* elementin reunus: viivan leveys 1 pikseli ja viivantyyli kiinteä */
		border:1px solid;
		/* marginaali yläpuolella olevaan elementtiin */
		margin-top:16px;
		/* marginaali alapuolella olevaan elementtiin */
		margin-left:16px;
		/* fontin koko */
		font-size:0.9em;
		/* tekstin sijoittelu elementin sisällä */
		text-align:center;
	}

	/* nettisivujen alapalkki, (kts lueminut.doc kuva 5) jonka html-koodi löytyy alaosa.html tiedostosta */
	div.alapalkki {
		clear:both;
		float:left;
		width:100%;	
		margin-top:1%;
		/* sama taustakuva käytössä ylä- ja alapalkissa */
		background-image:url(../kuvat/ylapalkki_tausta.png);
		margin-bottom:1%;
		border:1px solid;
	}
		
	/* alapalkissa oleva oikeanpuoleinen teksti */
	div.alapalkki_teksti_oikea {
		/* sijoitetaan elementti "parent"-elementin oikeaan laitaan */
		float:right;
		/* ja teksti tämän elementin oikeaan laitaan */
		text-align:right;
		/*sisennys ylhäällä ja alhaalla 5 pikseliä ja sivuilla 10 */
		padding:5px 10px;
		font-size:smaller;
	}
	
	/* alapalkissa oleva vasemmanpuoleinen teksti */
	div.alapalkki_teksti_vasen {
		float:left;
		padding:5px 10px;
		font-size:smaller;
	}

	/* annen kuva henkilökunta-sivulla */
	div.annenkuva {
		float:right;
	}
	
	/* hallitus-sivulla olevan sisällön säiliö */
	div.hallitus {
		float:left;
		/* leveydet määritelty seuraavasti: sisällön leveys 570px + sivupalkin leveys 180px + sivumarginaaleille 20px = kokonaisleveys 760px eli mahtuu 800x600 resuluutiolla vielä ilman sivuttaisvierityspalkkia */
		width:570px;
		margin-top:1%;
		margin-right:0;
		margin-bottom:1%;
		margin-left:1%;
		background-color:#FCFAFA;
		border:1px solid;
	}

	/* henkilökunta-sivulla oleva teksti */
	div.henkilokunta_teksti {
		float:left;
	}
	
	/* Koko nettisivu tulee tämän säiliön sisään. */
	div.kokosivu {
		/* nettisivujen kokonaisleveys */
		width:760px;
		/* otetaan koko selainikkunan tila käyttöön */
		min-height:100%;
		/* jätetään tyhjää tilaa selainikkunan ja sivujen väliin */
		margin-top:1%;
		/* näillä kahdella määrittelyllä saadaan sijoitettua sivut vaakasuunnassa selainikkunan keskelle */
		margin-left:auto;
		margin-right:auto;
		/* jätetään tyhjää tilaa selainikkunan ja sivujen väliin */
		margin-bottom:1%;
	}
	
	/* navigointilinkkien säiliö */
	div.navigointi {
		/* katkaistaan float-määriteltyjen elementtien jono ja siirrytään "uudelle riville" */
		clear:both;
		float:left;
		margin-top:10px;
		margin-left:0px;
		margin-bottom:0px;
		font-size:0.7em;
	}

	/* palautelomakkeen säiliö */
	div.palaute {
		float:left;
		width:540px;
		margin-top:1%;
		margin-bottom:1%;
		background-color:#FCFAFA;
	}

	div.palaute_oikea {
		float:left;
		margin-left:220px;
	}

	div.palaute_vasen {
		float:left;
	}

	/* päälinkki-säiliön muotoilut (kts lueminut.doc kuva 2) löytyy ylaosa.html tiedostosta */
	div.paalinkkisailio {
		clear:both;
		float:left;
		width:100%;
		margin-top:1%;
		line-height:100%;
		padding:1% 0%;
		background-color:#F0F0F0;
		border:1px solid;
	}
	
	/* sivukohtaisen sisällön säiliö (kts lueminut.doc kuva4) löytyy kaikista muista php-tiedostoista paitsi hallitus.php ja tapahtumat.php niillä on vastaavat div.hallitus ja div.tapahtumat */
	div.sisalto {
		float:left;
		width:540px;
		/* sisällön pitää olla vähintään sivupalkinverran korkea, muuten jää tyhjätila sisällön ja alapalkin väliin */
		min-height:400px;
		margin-top:1%;
		margin-right:0px;
		margin-bottom:0;
		margin-left:1%;
		padding-top:0%;
		padding-right:2%;
		padding-bottom:1em;
		padding-left:2%;
		background-color:#F9F9F9;
		border:1px solid;
	}

	/* sivupalkkien muotoilut (kts lueminut.doc kuva 3) */
	div.sivupalkki {
		float:left;
		width:180px;
		/* määritellään korkeudeksi sivupalkin taustakuvan korkeus */
		height:400px;
		margin-top:1%;
		margin-right:0px;
		margin-bottom:0;
		background-image:url(../kuvat/sivupalkki.png);
		/* ei toisteta taustakuvaa */
		background-repeat:no-repeat;
	}

	/* tapahtumat -sivulla olevan sisällön säilö */
	div.tapahtumat {
		float:left;
		width:570px;
		margin-top:1%;
		margin-left:1%;
		background-color:#FCFAFA;
		border:1px solid;
	}

	/* yläpalkin säiliö. (kts lueminut.doc kuva 1) löytyy ylaosa.html -tiedostosta */
	div.ylapalkki {
		float:left;
		width:100%;
		padding-top:1%;
		background-color:#CCCCFF;
		background-image:url(../kuvat/ylapalkki_tausta.png);
		border:1px solid;
	}

	/* yläpalkin logon säiliö */
	div.ylapalkkilogo {
		float:left;
		width:25%;
		margin:2%;
		margin-top:3%;
	}

	/* yläpalkin tekstin säiliö */
	div.ylapalkkiteksti {
		float:right;
		width:70%;
		height:150px;
		padding-top:1%;
		/* kuva on läpinäkyvä, jotta ylapalkki_tausta.png kuva näkyy sen päällä */
		background-image:url(../kuvat/ylapalkkikuva_trans.png);
		background-repeat:no-repeat;
		margin-bottom:0px;
	}