body 
{
  background: green;
  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     */
}

 
/* Koko sivu -laatikko
<------------------------------------------------------------------------------->  */
#container
{
  background: green;
  width: 75%;						/* <----   Leveys %    */
  min-width: 600px;					/* <----   Min leveys    */
  max-width: 1000px;					/* <----   Max leveys    */
  margin: 0px auto 5px auto;				/* <----   Marginaali jolla saadaan keskitettyä sivu    */
  border: 0px solid #9B271D;				/* <----   Kehys 2px leveä ja väriksi "#9B271D"    */
}


/* Sisältö-laatikko 
<------------------------------------------------------------------------------->  */
#content
{
  background: black;
  padding: 10px 30px 20px 30px;				/* <----   Täyttöä eli teksti ei tule kiinni reunoihin    */
  line-height: 120%;					/* <----   Tekstikappaleen rivin korkeus */
}

/* Alatunniste 
<-------------------------------------------------------------------------------> */
#footer
{
  color: #9B271D;					/* <----   Tekstin väriksi "#9B271D"    */
  padding: 1%;						/* <----   Täyttöä 1%  */
  text-align: center;					/* <----   Keskitetään teksti  */
  font-size: 70%;					/* <----   Fontin koko 70%  */
  font-weight: bold;					/* <----   Lihavoitu  */
    background: black;
border: 0;
}

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

}

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

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

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

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

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

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

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

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

/* Leipäteksi pieni-muotoilut
<-------------------------------------------------------------------------------> */
.pieni
{
font-size: 70%;						/* <----  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 */	
border-bottom: 1px solid #9B271D;			/* <----  Kehys alas */	
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 #9B271D;				/* <---- Kehykset  */
border-bottom: none;					/* <---- Kehykset pois alhaalta */
color: white;						/* <---- Väri mustaksi */
}

.navigointi li a:visited{
color: white;						/* <---- Käydyt linkit mustaksi */
}

.navigointi li a:hover{
background-color: #9B271D;				/* <---- Hiiri efekti värit */
color: #ffffff;						/* <---- Väri */
}

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

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