.perustyyli {
}

/* Yleiset tiedot
----------------------------------------------------------------------------------------------------------
Sivuston URI: http://www.studiotolvanen.fi/
Kuvaus: Studiotolvanen.fi -sivuston css-tyylitiedosto. 
Versio: 1.6
Muokattu viimeksi: 2007-05
Tekijä: Perttu Tolvanen, perttu(at)projekti55.fi
Tekijän www-osoite: http://www.projekti55.fi

Versiotietoa:
- css-tyylitiedostolla määritellään lähinnä typografiaa ja linkkejä tällä hetkellä
- div-taittoon siirrytään askel kerrallaan, tavoitteena päästä taulukoista eroon sivuasettelussa kokonaan, toteutunee kevään-kesän 2007 aikana

Versiohistoriaa:
- päivitetty uusi footer (14.5.2007)
- muokattu signature-tyyliä (27.3.2007)


*/

/* =Sivupohja
---------------------------------------------------------------------------------------------------------- */

body {
 background-color: #CECFDE;
 margin: 0px 0px 15px 0px;
 font-size: 62.5%;
}

/* =Rakenne
---------------------------------------------------------------------------------------------------------- */

#sisalto {
 padding:0;
 line-height: 120%;
}

.sisennys {
 margin: 10px 0px 20px 20px;
}

.alueenlinkki {
 margin: 0px 0px 20px 20px;
}

#signature {
 margin: 20px;
 width: 453px;
 background-color: #FFFFFF; 
 border: 1px dotted #B5B5B5; 
 padding-right: 50px;
 }
 
.naviSivunSisainen {
 margin-left:20px;
}

#naviToinenTaso {
 float:right;
 padding: 5px;
}

img.kuvituskuva {
 float: right;
 padding: 5px;
}

img.kuvituskuva-vasen {
 float:left;
 padding: 5px 5px 5px 0px;
 }
 

 


/* =Typografia
---------------------------------------------------------------------------------------------------------- */

.korostus {
 background-color: #EEEEE8;
}

.url {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #666666;
}


/* H1-otsikot ovat sellaisia jotka sisaltavät sivun sisällön kannalta 
olennaisimpia hakusanoja. */

h1 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333333;
	text-align: left;
	margin: -3px -5px -2px 0px;
}

/* H2-otsikot ovat sivuston perusotsikkoja, eli h2 käytetään silloin kun ei ole mitään erityistä syytä käyttää h1 tai h3 jotka ovat erikoistilanteisiin. */

h2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #333333;
	vertical-align: top;
	margin-top: 5px;
	margin-right: -3px;
	margin-bottom: -10px;
	margin-left: -5px;
	text-indent: 5px;
}

/* #sisalto on uuden lay-outin tunniste ja jatkossa alla olevat otsikkotyylit vaihdetaan sivuston oletustyyleiksi */

#sisalto h1 {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 13px;
 font-weight: normal;
 font-variant: small-caps;
 color: #333333;
 /* border-bottom: 1px dotted #B5B5B5; */
 line-height: 1.2em;
 margin-bottom: 10px;
 margin-left: 20px;
 margin-right: 20px;
 text-align: left;
}

#sisalto h2 {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 17px;
 font-weight: normal;
 color: #333333;
 border-bottom: 1px dotted #B5B5B5;
 line-height: 1.2em;
 margin-bottom: 10px;
 margin-left: 20px;
 margin-right: 20px;
 margin-top: 20px;
 text-align: left;
}

#sisalto h3 {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 17px;
 font-weight: normal;
 color: #333333;
 /* border-bottom: 1px dotted #B5B5B5; */
 line-height: 1.2em;
 margin-bottom: 10px;
 margin-left: 20px;
 margin-right: 20px;
 text-align: left;
}

/* Listojen muotoilu */

ul {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 color: #333333;
 font-size: 1.3em;
 line-height: 1.2em;
 list-style-type: square;
 list-style-position: inside;
 /* list-style-image: url(../images/lista-bullet.gif); */
 margin: 0 0 10px 0;
 padding: 0 30px;
} 

ol {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 color: #333333;
 font-size: 1.3em;
 line-height: 1.2em;
 list-style-position: inside;
 margin: 0 0 10px 0;
 padding: 0 30px;
} 

li {
 margin: 0 0 5px 0;
 }


/* Tekstityylit */

p {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 color: #333333;
 letter-spacing: 0;
 line-height: 1.2em;
 font-size: 1.3em;
 margin: 10px 5px 10px 0px;
}

#sisalto p {
 margin: 10px 20px 10px 20px;
 text-align: left;
}

p.tietolaatikko {
 background-color: #EEEEE8;
 padding: 20px 20px 20px 20px;
 margin: 30px 75px 30px 20px;
 border-left: 10px solid #B5B5B5;
}

p.hinta {
 /* padding: 5px 5px 5px 5px; */
 /* border: 1px dotted #B5B5B5; */
}

.leipateksti {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}

.infoteksti {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 1.1em;
 color: #666666;
 line-height: 1.2em;
 text-align: left;
 }

.navigaatio_toinentaso {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-align: left;
}

/* Onko h3 ja h4 lainkaan käytössä enää? h3 kyllä, h4 ei tietoa. */

h3 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333333;
	text-align: left;
	margin: -3px -5px -2px 0px;
}

h4 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #333333;
	text-align: left;
	margin: -3px -5px -2px 0px;
}



/* =Erikoisfontit
---------------------------------------------------------------------------------------------------------- */

.otayhteyttalaatikonotsikkofontti {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	font-weight: bold;
}

/* Paikkatieto-tyyli on murupolkujen yhteydessa kaytettava tyyli. 

Paikkatieto-tyylia voi kayttaa myos pienissa metateksteissa, kuten pvm, jne. */

.paikkatieto {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
}


/* =Linkit
---------------------------------------------------------------------------------------------------------- */

a img {
 border: 0;
 }

a:visited {
	color: #1B83FF;
	text-decoration: none;
}
a:link {
	color: #0000CC;
	text-decoration: none;
}
a:hover {
	color: #003399;
	text-decoration: underline;
}
a:active {
	color: #000000;
}

/* otsikko-linkkien muotoilu, tai siis muotoilematta jättäminen */

#sisalto h2 a {
    color: #333333;
	text-decoration: none;
}
#sisalto h2 a:visited {
}
#sisalto h2 a:link {
}
#sisalto h2 a:hover {
}
#sisalto h2 a:active {
}

/* linkki-luokka sivustolta ulos meneville linkeille, lisää ikonin linkkien eteen */

a.ulkoinen:visited {
 background: url(../images_2/ulkoinen-linkki-nuoli.gif) left center no-repeat;
 padding-left: 17px;
 color:#7F7F7F;
 text-decoration: none;
 }
 
a.ulkoinen:link {
 background: url(../images_2/ulkoinen-linkki-nuoli.gif) left center no-repeat;
 padding-left: 17px;
 text-decoration: none;
 }

a.ulkoinen:hover {
 background: url(../images_2/ulkoinen-linkki-nuoli.gif) left center no-repeat;
 padding-left: 17px;
 background-color: #EEEEE8;
 text-decoration: underline;
}

/* linkki-luokka sivuston sisäisille linkeillä, käytännössä tällainen on olemassa vain siirtymävaiheen takia, myöhemmin tämä voidaan poistaa koska sisäiset linkit tulisi tehdä oletustyylillä */


a.sisainen {
 background: url(../images_2/sisainen-linkki-nuoli.gif) left center no-repeat;
 padding-left: 20px;
 display:inline;
 font-size: 1em;
 }

a.sisainen:visited {
 text-decoration: none;
 }
 
a.sisainen:link {
 text-decoration: underline;
 }

a.sisainen:hover {
 background-color: #F2F2F2;
 text-decoration: none;
}

#taustakuvat a.sisainen {
 background: url(../images_2/sisainen-linkki-nuoli.gif) left center no-repeat;
 padding-left: 20px;
 display:inline;
 font-size: 1em;
 }

#taustakuvat a.sisainen:visited {
 text-decoration: none;
 }
 
#taustakuvat a.sisainen:link {
 text-decoration: underline;
 }

#taustakuvat a.sisainen:hover {
 background-color: #F2F2F2;
 text-decoration: none;
}


a.paikkatieto:visited {
	color: #666666;
	text-decoration: none;
}
a.paikkatieto:link {
	color: #666666;
	text-decoration: none;
}
a.paikkatieto:hover {
	color: #666666;
	text-decoration: none;
}
a.paikkatieto:active {
	color: #666666;
	text-decoration: none;
}

a.alleviivaamaton:visited {
	color: #000000;
	text-decoration: none;
}
a.alleviivaamaton:link {
	color: #333333;
	text-decoration: none;
}
a.alleviivaamaton:hover {
	color: #003399;
}

/* =Listat
---------------------------------------------------------------------------------------------------------- */

.lista_normaali {
	font-size: 11px;
	color: #333333;
	list-style-image: url(../images_2/icon_square.gif);
}

 
 /* =footer
---------------------------------------------------------------------------------------------------------- */

div.footer {
 background:url(../images/footer.jpg); 
 width:662px;
 height: 36px;
 }
 
 #footer p {
 font-size: 1.1em;
 margin: 0px;
 padding-top: 10px;
 }
 
 #footer a {
 background: url(../images_2/sisainen-linkki-nuoli2.gif) left center no-repeat;
 padding-left: 20px;
 display:inline;
 font-size: 1em;
 }

 #footer a:visited {
 text-decoration: none;
 }
 
 #footer a:link {
 text-decoration: underline;
 }

 #footer a:hover {
 background-color: #F2F2F2;
 text-decoration: none;
}
 
 
/* =Taustakuvat
---------------------------------------------------------------------------------------------------------- */
 
  #taustakuvat {
  margin: 10px 0px 20px 15px;
  } 
  
  div.taustakuva {
  float:left;
  padding: 5px;
  margin-left: 5px;
  margin-top: 5px;
  border: 1px dotted #7F7F7F;
  }
  


/* linkkien muotoilu kuvatiedostojen latauksille, lisää lataamisesta vihjaavan ikonin linkkien eteen */

#taustakuvat a {
 background: url(../images_2/lataus-download.gif) left center no-repeat;
 padding-left: 20px;
 display:block;

 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 1.1em;
 padding-bottom: 2px;
 padding-top: 2px;
} 

#taustakuvat a:visited {
 color:#7F7F7F;
 text-decoration: none;
 }
 
#taustakuvat a:link {
 text-decoration: none;
 }

#taustakuvat a:hover {
 background-color: #EEEEE8;
 text-decoration: underline;
}

/* =Kuvituskuvat artikkeleissa
---------------------------------------------------------------------------------------------------------- */

div.kuvituskuva {
 float: right;
 clear: right;
 padding: 5px 20px 5px 20px;
}

div.kuvituskuva img {
 border: 1px dotted #B5B5B5; 
 margin: 0px;
 }

div.kuvituskuva p {
 font-family: Verdana;
 font-size: 10px;
 color: #666666;
 padding: 0px;
 margin-top: 0px;
 width: 200px;
 }
 
 
/* =Sekalaista
---------------------------------------------------------------------------------------------------------- */


 /* Fixejä, ikäviä mutta tarpeellisia */
 
div.clear {
 clear:both;
 }#sisalto {
	background-color: #FFFFFF;
}