/***********************************
 W3C-validoitu 22.11.2006
************************************
 Sisällysluettelo:
 - Resetointi
 - Tekstin muotoilu
 - Sivupohjan muotoilu
 - Header ja Footer
 - Navigaatio
   - Ensimmäinen taso
   - Toinen taso
 - Vasen ja oikea reunapalkki
 - Kehyskuvat
 - Maskotit
 - Sivukohtaiset
   - Seikkailu Linnassa
   - Pelien etusivu
 - Muita yleisluokkia
***********************************/




/*******************************
 Resetoi selainten oletusarvot
 -> parempi yhteensopivuus
*******************************/

* {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}




/************************
 Tekstin muotoilu
 - Fontti, listat ym.
************************/

#content  {
	color: #363636;
}

p, #teksti ul, #teksti ol, #teksti dl {
	margin: 1em 0;
}

#teksti ol {
	padding-left: 2.5em;
}

#teksti ul {
	margin-left: 20px;
}

#teksti ul li {
	/*background: url('kuvat/lehdykka.gif') no-repeat top left;*/
	padding-left: 17px;
	list-style: none;
	list-style-image: url('lehdykka2.gif');
	list-style-position: outside;
}

#teksti dl dt {
	font-weight: bold;
}

#teksti dl dd {
	padding-left: 17px;
	/*background: url('kuvat/lehdykka.gif') no-repeat top left;*/
	font-style: italic;
}

h5 {
	color: #957400;
	margin: 27px 0 18px;
	font-weight: normal;
	font-size: 1.5em;

}

h2, h3, h4 {
	color: #957400;
	margin: 27px 0 18px;
        font-weight: normal;
}

h2 {
	font-size: 1.45em;
}

h3 {
	font-size: 1.2em;
}

.seuraava {
	text-align: right;
}

#teksti a {
	color: #FE0000
}

#teksti p img {
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 20px;
	position: top;
}

.tapahtumalista a {
        font-style: normal;
       	color: #000000;
        text-align: center;
	padding-top: 20px;
}



/*********************************
 Sivupohjan muotoilu ja asettelu
 Muokkaa varovasti!
*********************************/


body {
	background: url('kuvat/taustaruutu.gif') repeat center top;
}

#gradient {
	background: url('kuvat/taustaliuku.gif') repeat-x top center;
	min-height: 698px;
}

#container {
	width: 776px;
	margin: 0 auto;
	position: relative;
	background: url('kuvat/header.gif') no-repeat 49px 27px;
	padding-bottom: 100px;
}

#content {
	background: url('kuvat/rullaliuku.gif') repeat-y center center;
	padding: 55px 0;
	clear: both;
}

.ohut-palsta {
	padding: 0 220px;
}

.pitkä-palsta {
	padding: 0 98px;
}

.naviton {
	position: relative;
	top: -20px;
}

.tekstipalkki {
	width: 50%;
	text-align: center;
	margin-top: 35px;
}


/****************************************
 Header ja Footer:
 Valkoiset pikalinkit sekä osoitetiedot
****************************************/

.white, .white a:link, .white a:visited {
	color: white;
	text-decoration: none;
}

.white a:hover {
	text-decoration: underline;
}

h1 {
	height: 44px;
	padding: 31px 86px 0;
}

h1 a {
	display: block;
	height: 44px;
	overflow: hidden;
	text-indent: -1000em;
}

#quicklinks {
	position: absolute;
	top: 10px;
	left: 100px;
	text-transform: lowercase;
}

#footer {
	clear: both;
	background: url('kuvat/footer.gif') no-repeat center top;
	padding: 7px 100px 0;
	text-align: center;
	color: #957400;
}

#footer address {
	font-style: normal;
	margin-bottom: 12px;
}




/***************************************
 Navigaatio: yhteiset arvot, fontit...
***************************************/

#navi, #next {
	position: absolute;
	left: 98px;
	width: 581px;
}

#next a, #navi a, .seuraava a {
	text-decoration: none;
	color: #FE0000;
}

#next a:link, #navi a:link, .seuraava a {
	text-decoration: none;
	color: #FE0000;
}

#next a:hover, #navi a:hover, .seuraava a:hover {
	color: #B30000;
}




/******************************
 Ensimmäisen tason navigaatio
******************************/

#navi {
	top:75px;
	background: url('kuvat/navi-x-varjo.gif') repeat-x center top;
}

#navi ul {	
	height: 31px;
	list-style: none;
	background: url('kuvat/navivarjo.gif') repeat-x center top;
	/*background: url('kuvat/navi-x-repeat.gif') repeat-x center top;*/
}

#navi li {
	float: left;
	height: 31px;
	background: url('kuvat/navi-oikea.gif') no-repeat top right;
	display: block;
	padding: 9px 7px 0;
	text-transform: uppercase;
	text-align: center;
}

#navi li.last {
	float:none;
	padding: 9px 0 0;
}

#navi li.active {
	border: solid #DCCCA5 1px;
	border-width: 0 1px 0 1px;
	background: none;
	padding: 9px 7px 0;
	height: 22px;
	color: #957400;
}

#navi li.active a {
	color: #957400;
}





/**************************
 Toisen tason navigaatio
**************************/

#next {
	top:114px;

}     

#next dl {
	text-align: center;
}

#next dl dd {
	display: inline;
	padding: 0 4px;
	border: solid #DCCCA5 1px;
	border-width: 0 0 1px;
}

#next dl dd + dd {
	border-width: 0 0 1px 1px;
}

#next  a.sijainti {
          color: #957400;

}





/*************
 Reunapalkit
*************/

.palkki {
	width: 220px;
	padding-top: 25px;
}

/*
 IE6 Hack: Palkki siirtyy IE6-selaimessa
 yhden pikselin liikaa oikealle... Toimii
 muissa selaimissa OK...
*/
 
/** [Hack] **/

#vasen {
	float: left;
	margin-left: 1px;
	position: relative;
	left: -1px;
}

body > div div#vasen {
	left: 0px;
}

/** [/Hack] **/

#oikea {
	float: right;
}

a img {
	border-width: 0;
}




/*************
 Kehyskuvat
*************/

.kehys {
	background-color: #AB9C9C;
	background: url('kuvat/taustaruutu.gif') center center;
}


.taulu {
	position: absolute;
	background: url('dada') no-repeat center center;
	margin-left: -250px;
}

#vas-1 {
	top: 160px;
}

#oik-1 {
	right:5px;
	top: 160px;
}

#oik-2 {
	right:4px;
	top: 400px;
}

#vas-2 {
	top: 400px;
}


.palkki dl {
	margin-top: 20px;
	margin-left: 35px;
	width: 148px;
	padding: 0 0 50px;
	background: url('kuvat/sivuskrolli.gif') no-repeat left bottom;
}

.palkki dl dt {
	overflow: hidden;
	text-indent: -1000em;
	background: url('kuvat/sivulinkit.gif') no-repeat left top;
	height: 31px;
	margin-bottom: 10px;
}

.palkki dl dd {
	margin: 3px 5px 0 13px;
	background: url('kuvat/lehdykka.gif') no-repeat top left;
	padding-left: 19px;
}

.palkki dl dd a {
	text-decoration: none;
	color: #FE0000;
	font-size: 0.9em;
}



/*******************
 Maskotit
*******************/

.maskotit {
	padding: 5px 0px 7px;
}

.boksi {
	background: white;
	border: solid #DCCCA5 1px;
}

.maskotit dt {
	padding-bottom: 20px;
	text-align: center;
}

.maskotit dd {
	text-align: center;
	margin-bottom: 5px;
	padding: 0;
}

.ville {
	color: #417648;
}

.laura {
	color: #06929E;
}



/********************
 Seikkailu Linnassa
********************/

.vr-palsta {
	padding: 0 184px;
}

/*#vkierros h2 {
	background: url('kuvat/vkier_linnareissu.gif') no-repeat top center;
	height: 42px;
	overflow: hidden;
	text-indent: -1000em;
}*/

#vkierros dt {
	display: none;
}

#vkierros #dialogi {
	position: relative;
}

#vkierros #dialogi dl {
	margin: 0 70px;
	height: 130px;
}

#vkierros #panoraama {
	background: #F1E2C4;
	border: solid #DCCCA5 1px;
	padding: 3px;
	margin-bottom: 10px;
}

#vkierros #vr_navi {
	text-align: center;
	color: #957400;
	text-transform: uppercase;
	line-height: 1.8em;
}

#vkierros #vr_navi a {
	text-decoration: none;
	color: #FE0000;
}


#vkierros a:link {
	text-decoration: none;
	color: #FE0000;
}

#vkierros a:hover {
	color: #B30000;
}

#vkierros .villekuva {
	position: absolute;
}

#vkierros .laurakuva {
	position: absolute;
	right:0;
}



/********************
 Pelisivu
********************/


.pelitaulukko a, .kuvataulukko a {
	text-decoration: none;
}

p.sivuhuomautus {
	padding-left: 8%;
	padding-right: 8%;
}




/********************
 Usein kysyttyä
********************/

.ukk {
	padding-left: 150px;
	padding-right: 150px;
}



/********************
 Muita yleisluokkia
********************/

.hidden, .hidden * {
	display: none;
}


.clear {
	clear: both;
	height: 1px;
	visibility: hidden;
}

.oikea {
	float: right;
	text-align: right;
}

.vasen {
	float: left;
	text-align: left;
}

.keskitetty {
        text-align: center;
}



.taulukko {
	width: 100%;
}
.taulukko * {
	text-align: center;
}

.taulukko .taulukkokuvat {
	padding-top: 25px;
}


#kunniakirja {
	background: url('kuvat/kunniakirja_pohja.gif') no-repeat top center;
	height: 559px;
	text-align: center;
	padding-top: 70px;
	position: relative;
}

#kunniakirja * {
	font: 16px Times New Roman;
	color: #957400;
	margin-right: 200px;
	margin-left: 200px;
	line-height: 25px;
}

#kunniakirja h3 {
	font-size: 30px;
	margin: 0;
}

#kunniakirja .nimi  {
	font-size: 25px;
}

#pelipohja {
	background: url('kuvat/pelit_pohja.gif') no-repeat top center;
	height: 700px;
	padding-top: 40px;
	position: relative;
}

#monivalintapohja h2, #pelipohja h2 {
	text-align: center;
}

#pelipohja *, #monivalintapohja * {
	margin-right: 200px;
	margin-left: 200px;
}

#pelipohja .ville, #monivalintapohja .ville, #pelipohja .laura, #monivalintapohja .laura {
	text-align:center;
	margin: 10px 200px;
}





#monivalintapohja {
	background: url('kuvat/monivalinta_pohja.gif') no-repeat top center;
	height: 500px;
	padding-top: 40px;
	position: relative;
}



/**
 * Teippipaperi
 */

.teippipaperi, .teippikatto, .teippipohja {
	width: 537px;
}

.teippipaperi {
	background: url('kuvat/teippipaperi.gif') repeat-y center center;
	margin: 0 auto;
}

.teippikatto {
	background: url('kuvat/teippipaperi.gif') no-repeat top left;
}

.teippipohja {
	background: url('kuvat/teippipaperi.gif') no-repeat bottom right;
}

.teippiteksti {
	padding: 40px 64px 70px;
}

.kunniakirja .teippipohja {
	background: url('kuvat/teippipaperi_kunnia.gif') no-repeat bottom right;
}

/*kuvateksti*/
.kuvateksti{
color: #957400;
font-size: 0.9em;
}

/*ohjeteksti*/
.ohjeteksti{
color: #957400;
font-size: 0.9em;
padding-left: 50px
}

/*Tulostus*/
.print {
       display: none;
}
#kunniakirja_print{
 display: none;
}

@media print {

   #container{
     width:170mm;
   }

  .kunniakirja_hidden{
     display:none;
  }
  #kunniakirja_print{
    display:block;
	position: absolute;
    top:100px;
    left:45px;
  }
  #kunniakirja{
  	position:absolute;
  	top:100px;
  	left:0px;
  }
  
  #otsikko_print{
  	display:block;
  	position:absolute;
  	top:25px;
  	left:0;
  }

  img.print {
  	   width: 150px;
           display: block;
	   clear:both;
  	   margin-left:10px;
	   padding: 10px;
	   float:right;
	  
            }
  #vas-1, #oik-1, #oik-2, #vas-2 {
       display: none;
  }
  .ohut-palsta {
	padding: 0;
  }
  .palkki dl dt {
	text-indent: 2em;
  }
}

/**********************
Kuvagalleria Lightbox
***********************/

.thumbnail{
	padding: 3px 3px 8px 3px;
	background-color: #222;
	border: 1px solid #2a2a2a;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	}	
	
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}
	

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: Verdana, Helvetica, sans-serif;
	font-size: 9px;
        background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%

	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 75%; float: left; text-align: left; }
#imageData #caption{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.1em;
        }
#imageData #numberDisplay{ display: block; clear: left; font-size: 10px; font-family: Arial, Helvetica, sans-serif; padding-top: 0.8em; padding-bottom: 0.5em;  }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #0033FF;
	}