body 
{

  color: #003333;					/* <----   Tekstin väri      */
  font-family: Arial,Verdana,Helvitica,sans-serif;	/* <----   Kirjasimen ulkoasu. Jos ensinmäistä ei läydy niin käytetään seuraavaa     */
  background-color: #ffffff;
  background-image: url('kuvat/tausta2.jpg');
  background-repeat: repeat-x;	/* <----   Taustakuvaksi "tausta.jpg"         */
  background-repeat: repeat x;
  			/* <----   Toistetaan sitä kuvaa vaakasuunnassa       */
}

 
/* Koko sivu -laatikko
<------------------------------------------------------------------------------->  */
#container
{
  width: 70%;						/* <----   Leveys %    */
  min-width: 600px;					/* <----   Min leveys    */
  max-width: 900px;					/* <----   Max leveys    */
  margin: -10px auto 0px auto;				/* <----   Marginaali jolla saadaan keskitettyä sivu    */

}

/* Ylätunniste
<------------------------------------------------------------------------------->  */
#top
{
  text-align: center;					/* <----   Keskitetään */
}

/* Sisältö-laatikko 
<------------------------------------------------------------------------------->  */
#content
{
  margin-top: -12px;
  padding: 10px 30px 20px 30px;				/* <----   Täyttöä eli teksti ei tule kiinni reunoihin    */
  line-height: 120%;					/* <----   Tekstikappaleen rivin korkeus */
  border: 2px solid #003333;				/* <----   Kehys 2px leveä ja väriksi "#2e4057"    */
  background-color: #ffffff;
}

/* Alatunniste 
<-------------------------------------------------------------------------------> */
#footer
{
  color: #ffffff;					/* <----   Tekstin väriksi "#2e4057"    */
  padding: 1%;						/* <----   Täyttöä 1%  */
  text-align: center;					/* <----   Keskitetään teksti  */
  font-size: 70%;					/* <----   Fontin koko 70%  */
  font-weight: bold;					/* <----   Lihavoitu  */
  width: 330px;
  margin: 0 auto 0 auto;
}

/* Otsikko muitoilut
<------------------------------------------------------------------------------->   */
#content h1, h2, h3 { 
  font-family: arial, 'sans serif';  	/* <----  Kirjasimen ulkoasu. Jos ensinmäistä ei läydy niin käytetään seuraavaa */
  color: #003333;					/* <----  Tekstin väri  */
  line-height: normal;					/* <----  Rivin korkeus normaaliksi eli 100%  */
  margin: 5px 0 -10px 0px;				/* <----  Marginaalit otsikoille. Negatiivinen-arvo tuo elementtejä lähemmäksi */
}

/* Otsikko 1 muitoilut
<------------------------------------------------------------------------------->   */
#content h1{ 
  font-size: 140%;					/* <----  Tekstin koko on 140% */
  font-weight: bold;					/* <----  Lihavoitu */
  margin-bottom: 20px;					/* <----  Marginaali alas */
}

/* Otsikko 2 muitoilut
<------------------------------------------------------------------------------->   */
#content h2{ 
  font-size: 120%;					/* <----  Tekstin koko on 120% */
}

/* Otsikko 3 muitoilut
<------------------------------------------------------------------------------->   */
#content h3{ 
  font-size: 100%;					/* <----  Tekstin koko on 100% */
}

/* Linkit-muotoilut  
<-------------------------------------------------------------------------------> */
a:link, a:visited{ 
  font-size: 95%;					/* <---- Linkkien koko on 95% */
  color: #003333;					/* <---- Väri on musta */
  font-weight: bold;					/* <---- Lihavoitu */
  text-decoration: underline;				/* <---- Alleviivattu */
}

/* Linkit-muotoilut  hiiri-efektit
<-------------------------------------------------------------------------------> */
#content a:hover, #footer a:hover {
color: #003333;						/* <---- Väri */
text-decoration: none;					/* <---- Ei alleviivausta  */
}

#content a:active
{
color: #003333						/* <---- Väri  */
}

/* Leipäteksi muotoilut  
<-------------------------------------------------------------------------------> */
#content p {
  font-family:Helvetica, Sans-serif;			/* <----  Kirjasimen ulkoasu  */
  text-align: justify;					/* <----  Keskittää molempiin reunoihin  */
  font-size: 90%;					/* <----  Tekstin koko  */
}

/* Leipäteksi pieni-muotoilut
<-------------------------------------------------------------------------------> */
.pieni
{
font-size: 90%;						/* <----  Tekstin koko  */
font-weight: bold;					/* <----  Lihavoitu  */
}

/* Listan muotoilut 
<------------------------------------------------------------------------------->  */
#lista {
font-family:Arial,Verdana,Helvitica,sans-serif;		/* <----  Kirjasimen ulkoasu  */
font-size: 80%;						/* <----  Tekstin koko */
list-style-type: disc;					/* <----  Luottelomerkin tyyli */							
}


/* Kuva-muotoilut 
<-------------------------------------------------------------------------------> */

/* Kuva oikealle */
#kuva1
{
float:right;						/* <----  Kelluu oikealle */		
margin: 5px 0px 5px 10px;				/* <----  Marginaalit */		
}

/* Kuva  vasemmalle verrattuna */
#kuva2
{
float:left;						/* <----  Kelluu vasemmalle */	
margin: 5px 10px 5px 0px;				/* <----  Marginaalit */	
}


/* Navigointi 
<-------------------------------------------------------------------------------> */
.navigointi{
padding: 3px 0;						/* <----  Täyttö ylös 3px ja oikealle 0px */	
margin-left: 0;						/* <----  Marginaalit 0 */	
font: bold 80% Verdana;					/* <----  Fontti määritykset */	
list-style-type: none;					/* <----  Luottelomerkit pois eli näyttää navigoinnilta */	
text-align: center;					/* <----  Keskitetään */	
}

/* Navigointi
<-------------------------------------------------------------------------------> */
.navigointi li{
display: inline;					/* <----  Näytetään samalla rivillä */	
margin: 0;						/* <----  Marginaalit 0  */	
}

/* Navigointi - Linkkien määritykset
<-------------------------------------------------------------------------------> */
.navigointi li a{
font-size: 100%;					/* <---- Koko */
text-decoration: none;					/* <---- Ei alleviivausta  */
padding: 3px 10px;					/* <---- Täytöt ylös ja oikealle  */
margin-right: 3px;					/* <---- Marginaalit oikealle 3px  */
border: 2px solid #003333;				/* <---- Kehykset  */	
color: #003333;						/* <---- Väri mustaksi */
}

.navigointi li a:visited{
color: #003333;	
text-decoration: none;					/* <---- Käydyt linkit mustaksi */
}

.navigointi li a:hover{
background-color: #003333;				/* <---- Hiiri kursori efekti värit */
color: #ffffff;	
text-decoration: underline;				
}

.navigointi li a:active{
color: #003333;						/* <---- Hiiri efekti värit */
}

.navigointi li.selected a{
top: 1px;						/* <---- Ylös 1px eroa */
padding-top: 4px;					/* <---- Täyttö ylös 4px */
background-color: #003333;				/* <---- Taustaväri  */
color: #ffffff;						/* <----  Väri */
}