/*
Parts of this style sheet which define image gallery are based on the work of
Stu Nicholls. Original copyright notice and source of the original work can
be seen further up in this file, at the beginning of the image gallery
spesific section.
*/ 

img {
  border: 4px solid #aaa;
}

body {
  font-size:100%;
  margin: 0;
  background-color: White;
}

a {
  color: Black;
  text-decoration: none;
}

a:hover {
  background-color: #2586d7;
  color: #fff;
}

html, body, #wrap {
  height: 98%;
}

body > #wrap{
  height: auto;
  min-height: 100%;
}

#wrap {
  margin-right: 50px; 
  margin-left: 100px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background-color: #F5F5F5; /* WhiteSmoke */
}

#sivu {
	width: auto; /* Kaytetaan koko selaimen leveys sivustoon. */
	/* sisällön keskittäminen, 5% selainikkunan leveydesta kaytetaan marginaaleihin. */
	position: relative; /* navigoinnin absoluuttista asettelua varten */
}

#ylatunniste {
  text-align: center;
  margin-left: -101px;
  margin-right: -51px;
  background-color: White;
  border-bottom: 1px solid #B22222; /* Korjaa IE7 bugin, värinä FireBrick */
  
  background-image: url('ylatunniste_vasen.jpg'); /* Autot ylätunnisteeseen */
  background-repeat: no-repeat;
}

#ylatunniste h1 {
  font-size:2.5em;
  margin: 0;
  padding: 0.5em;
  height: 50px;
  text-shadow: #F5F5F5 -3px 3px 5px; /* Otsikko näkymään jos se on taustakuvan päällä.  Värinä WhiteSmoke*/
}

#ylatunniste p {
  display: inline; /*osoite ja puhelinnumero perakkain */
}

#ylatunniste address {
  font-style: normal; /* address on oletuksena italic, ei toimi class .id yhdistelmassa */
  display: inline; /* osoite ja puhelinnumero perakkain */
}

#ylatunniste #yhteystiedot {
  font-family: sans-serif;
  font-size: 0.875em;
  background-color: #B22222; /* värinä FireBrick */
  color: #F5F5DC; /* Värinä Beige */
  padding: 2px 0 1px 0; /* Korjaa ylatunnisteeseenn tehdyn IE7 bugifiksin yhden pikselin borderin */
}

#sisalto {
  margin-left: 16em; /* tyhjaa tilaa navigoinnille, navigoinnin leveys + sen marginaalit */
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1px;
}

#sisalto .oikea_kuvaboksi {
  float: right;
  margin: 1em 0 1em 1em;
  padding-left: 0.5em;
}

#sisalto p {
  font-size: 1em;
  font-family: sans-serif;
}

#sisalto p:first-letter {
  font-size: 120%;
}

/* a.boksi on kaytossa palvelut-sivulla */
#sisalto a.boksi {
  border: 1px solid #ccc;
  float: right;
  margin: 0 0 1em 1em;
  padding: 0.4em;
  background-color: #e8e8e8;
  text-align: center;
  font-size: 1em;
  font-family: sans-serif;
}

#sisalto  a.boksi:hover span {
  background-color: #2586d7;
  padding: 1px;
}

#navigointi {
  position: absolute;
  top: 3em; /* tämän verran ylatunnisteen alapuolelle */
  
  border-right: 1px solid #000;
  margin: 0 2em 0 0;
  width: 15em; /*10 fontin leveytta levea */
  padding: 0 0 1em 0; /* ylos, oikea,  alas, vasen. Alhaalla oleva taytto tuo taustan nakyville navigointipalkin alareunassa */
  margin-bottom: 1em; /* erottaa navigointipalkin seuraavasta komponentista */
  font-family: 'Trebuchet MS', 'Lucida Grande',
      Verdana, Lucida, Geneva, Helvetica, 
      Arial, sans-serif;
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 0.0625em;
  background-color: #b0caec;
  color: #333;
}

/* Kaikki navigointilistan elementit ovat linkkejä, joten poistetaan kaikki muotoilu. */
#navigointi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
	
#navigointi li {
  border-bottom: 1px solid #90bade;
  margin: 0;
}

/* Asetetaan listausten linkit näkymään koko elementin levyisenä reunuksin. */
#navigointi li a {
  display: block;
  padding: 5px 5px 5px 0.5em;
  border-left: 10px solid #90bade;
  border-right: 10px solid #E6E6FA; /* Värinä Lavender */
  background-color: #B0C4DE; /* Värinä LightSteelBlue */
  color: #000;
  text-decoration: none;
  width: 100%;
}

/* Talla korjataan vanha IE/Windows nakyvyysongelma navigointilistassa, sillä vanha IE/Windows ei ymmarra tata ja se ohitetaan. */
html>body #navigointi li a {
  width: auto;
}

/* Reunuksien ja pohjan vari muuttuu kun hiiri menee linkin paalle. */
#navigointi li a:hover {
  border-left: 10px solid #1c64d1;
  border-right: 10px solid #5ba3e0;
  background-color: #2586d7;
  color: #fff;
}

/* Sisennetään toinen navigointitaso */
#navigointi ul.sisennys {
  padding-left: 1.7em;
}

/* Sisennetystä navigoinnista tyylit kuten #navigoinnissa */
#navigointi ul.sisennys  a{
  border-left: 0;
  border-right: 0;
  background-color: #b0caec;
  color: #333;
  padding: 0;
}

/* Täysin sama tyyli kuin #navigointi li a:hover */
#navigointi ul.sisennys  a:hover{
  /*border-left: 10px solid #1c64d1;*/
  border-right: 10px solid #5ba3e0;
  background-color: #2586d7;
  color: #fff;
}

/* Navigoinnin marginaaleineen vaatiman tilan verran vasemmalle #sisallyksesta */
.sivukuva {
  margin-left: -15em;
}

/* Alatunniste kikkaillaan aina sivun alalaitaan asti.
   http://www.cssstickyfooter.com/using-sticky-footer-code.html
    */
#alatunniste {
  position: relative;
  margin-top: -1px;
  height: 1px;
  clear:both;
}

.yhteystiedot {
  font-family: sans-serif;
  margin: 0 0 0 1em; /* ylos, oikea,  alas, vasen. */
  font-variant: small-caps;
}

/* Tämä pitäisi toteuttaa float: left ominaisuudella, mutta IE7:n kanssa navigointipalkki räjähtää. */
.yhteystiedot #puhelimet {
  width: 14em;
  margin-left: 2em;
  white-space: nowrap;
  text-align: justify;
  font-style: normal;
}

/* Tämä pitäisi toteuttaa float: left ominaisuudella, mutta IE7:n kanssa navigointipalkki räjähtää. */
#postiosoite {
  width: 14em;
  margin-left: 2em;
  white-space: nowrap;
}

div.yhteystiedot address {
  text-align: right;
  font-style: normal;
}

.yhteystiedot ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
	
.yhteystiedot li {
  margin: 0.5em;
  padding: 0 0 1em 0; /* ylos, oikea,  alas, vasen. */
}

.align-right { float: right; margin: 4px; }
.align-left { float: left; margin: 4px; }

.bold {
  font-weight: bold;
}


/*
http://verkko-opas.fi/web/ohje/sivun_asettelu/
http://www.alistapart.com/articles/taminglists/
*/

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */


/* slides styling */

.photo {width:608px; text-align:left; position:relative; margin:0 auto 1em auto; }

.photo ul.topic {padding:0; margin:0; list-style:none; width:608px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

/* Oletuksena galleriaa ei nayteta */
.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}

/* Tama on gallerian otsikon vari */
.photo ul.topic li.active a
{color:#000; background:#ccc;}

/* Gallerian otsikon vari muuttuu talla kun hiiri menee paalle */
.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#bbb;}

/* Tama on nakyvilla kun hiiri on gallerian ulkopuolella.  Yksi galleria saadaan talla siis aina nakyville. Gallerian uloimman reunuksen vari vaihtuu siis taman marginaalilla ja sisallon taman taustavarilla. */
.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:auto; background:#e8e8e8; width:auto; padding:40px 60px; border:12px solid #ccc; z-index:1;}

/* Tama tulee nakyville, kun hiiri viedaan gallerian paalle. Gallerian uloimman reunuksen vari vaihtuu siis taman marginaalilla ja sisallon taman taustavarilla. */
.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:auto; background:#ddd; width:auto; padding:40px 60px; border:12px solid #bbb; z-index:100;}

/* Asetetaan gallerian kunkin solun koko ja valkoinen kehys jokaisen solun ymparille. */
.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

/* Asetetaan gallerian solun sisalle, aivan solun ulkoreunojen lahelle musta reunaviiva kunkin kuvalinkin kohdalle. */
.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

/* Asetetaan gallerian pikkukuvien koko ja reunukset. */
.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{
  white-space:normal;
  position:relative;
  cursor: pointer;
}

/* Suurennetaan gallerian pikkukuva hiiren tullessa sen paalle. */
.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}