@charset "iso-8859-1";

/*css-tiedosto Hoksaa-nettilehden perustyyliksi kun tulostetaan, jättää pois muun paitsi tekstin*/



/*elementit*/



html {

		 margin: 0px;

		 padding: 0px;

		 

		 }

body {

		 font: 80% sans-serif;

		 color: #333;

		 background: #fff; 

		 text-align: left;

		 width: auto;

		 min-height: 100%;

		 

		  }

			

p { font-family:georgia, sans-serif;

		font-size: 12pt;

		margin: 0em 1em 1em 1em;

		line-height:15pt;

    }



p.start:first-letter { font-size : 150%;

					   font-weight : bold;

   					   vertical-align:text-bottom;

						letter-spacing:1.4px;

					}		

					



h1{/*ei kuvaa*/

	 font: bold 16pt "Lucida Grande","Lucida Sans Unicode", verdana, sans-serif;

	 margin:10px 10px 0px 10px;

	 padding:5px 5px 0px 5px;

	  }

h2{

	 font: bold 14pt "Lucida Grande","Lucida Sans Unicode", verdana, sans-serif;

	 margin-left: 15px; 

	}

	  							

h3 {

	 font: bold 13pt "Lucida Grande","Lucida Sans Unicode", verdana, sans-serif;

	 margin:0 0 5px 0px;

	 }	

		

h4, h4.eka{

	 font: bold 12pt "Lucida Grande","Lucida Sans Unicode", verdana, sans-serif;

	 margin-left:0px;

	  }		

		

h5{  margin:0 0 0 15px;

	 padding:0px;  

	 font: italic normal 0.8em "Lucida Grande","Lucida Sans Unicode", verdana, sans-serif;

	 }

	 					

a:link, a:visited { font-style:italic;

					text-decoration:underline;

					color : #333; 

				    }	

					



					

.tulostalinkki a:link:after{

		content:" ("attr(href)") ";

		} 	

.tulostalinkki a:visited:after{

		content:" ("attr(href)") ";

		} 	 

										

.tauko1 {height:50px;

		 margin:5px 300px 5px 300px;

		 border-bottom:dashed 1px #CCCCCC;}	

/*erottamaan tekstiosuuksia jatkiksen luvuissa

voi laittaa muunlaisia pikkukuvia bostonin lukuihin !muista liittää tähän sitten myös tauko2 jne!*/								





		

ul {margin:1em;}		

ul,li {font-family:"Century Gothic", Verdana, sans-serif;

	   list-style-type:none; /*lisää omat markerit!? toimivatko printattavasssa??*/

	   list-style-position:inside;

	  }

ul.luetelmatekstissa {list-style-image:url(media/listmarker.png);
					  padding-left:7em;
					  }	   
ul.luetelmatekstissa li {	
  font-family:Optima, georgia, sans-serif;
  line-height:1.5em;
  margin:1em;
  padding: 0; 
                                              
}
	 	 



ol.sisallysluettelo li {font:bold 12pt Optima, Arial, sans-serif;

					 	color:#333;

						background: transparent none;

						list-style-type:upper-roman;}

ol {position:relative;
	padding-left: 6em;}	
	
						
ol li {	padding: 0em 1em 1em 1em;}

ol.huomio { padding:1em;
			margin:0;
			}				
																						

			

dl.haastattelu {margin-left: 20px;

				width:auto;

				background:transparent none

								}

																				

dl.haastattelu dt {font:bold 12pt Optima, Arial, sans-serif  ;

				   color:#099;

				   margin-left: 0em;

					}

									

dl.haastattelu dd {font:normal 10pt Optima, Arial, sans-serif;

				   width:auto;

				   margin-left: 1em;

				   padding: 1em;}

									



dl.sanasto dt{

					 		font:bold 1em Optima, Arial, sans-serif;

					 		color:#69c;

							margin-left:20px;

							background:transparent none;/*tulostettaessa taustakuvat eivt näy muutenkaan*/

							padding: 1em 1em 10px 25px;

							}	

							



									

dl.sanasto dd {font-family:Optima, Arial, sans-serif;

					 		width:auto;

							margin-left:30px;

							margin-right:20px;

							padding: 0px 1em 1em 0px;

							}

dl.jattikuva {
  clear:both; /*ei rinnalle muita kuvia tai bokseja*/
  width:510px;
  float:right;
  padding:0em 1em 1em 1em; /*kuva linjaan kappaleen yläreunan tekstin kanssa */
  margin:0 1em 1em 1em;
  }			
  				
dl.isokuva_vasemmalle {
  clear:both; /*ei rinnalle muita kuvia tai bokseja*/
  width:410px;
  float:left;
  padding:1em 1em 1em 1em; /*kuva linjaan kappaleen yläreunan tekstin kanssa */
  margin:0 1em 1em 1em;
  }	
							
dl.isokuva {
  clear:both; /*ei rinnalle muita kuvia tai bokseja*/
  width:410px;
  float:right;
  padding:1em 1em 1em 1em; /*kuva linjaan kappaleen yläreunan tekstin kanssa */
  margin:0 1em 1em 1em;
  }
dl.kuvateksti {
  clear:both; /*ei rinnalle muita kuvia tai bokseja*/
  width:310px;
  float:right;
  padding:1em 1em 1em 1em; 
  margin:0 1em 1em 1em;
  }
  
 dl.kuvateksti_rinnalle {
  
  width:310px;
  float:right;
  padding:1em 1em 1em 1em; 
  margin:0 1em 1em 1em;
  }
   
 dl.kapeakuva {
  width:200px;
  float:right;
  padding:1em 1em 1em 1em; 
  margin:1em;
  }
dl.kuvateksti dt, dl.isokuva dt, dl.jattikuva dt, dl.kapeakuva dt, dl.kuvateksti_rinnalle dt {
   /*float:left;*/
   
   }
dl.kuvateksti dd, dl.isokuva dd, dl.kapeakuva dd, dl.jattikuva dd, dl.kuvateksti_rinnalle dd   {
   font:bold 1em Arial, Helvetica, sans-serif;
   margin:0;
   padding:0 1.5em 0.2em 0em;
   float:right;
   
}
   
.lajinimi {font-style:italic;}

.nakymaton {display:none;}



.vainruudulla {display:none;} /*kätkee tulostettavasta versiosta ruututyöskentelyä varten tarkoitetut ohjeet ym.*/



.credit {font:italic 1em Arial, Helvetica, sans-serif;

				 /*float:right;*/}

				 

.address {

				 font-size:0.8em;				

				 padding:0;

				 margin:0;

				 border:1px solid;}

				 
.tauko1 {height:50px;
				 background: url(media/solmu2.gif) center center no-repeat;}
				 
.tauko2 {height:100px;
				 background: url(media/tauko2.jpg) center center no-repeat;}
				 
.tauko3 {height:70px;
				 background: url(media/lennatin.jpg) center center no-repeat;}
				 				 
.keskita {text-align: center;}
				 	


	

#clear {clear:both;}					
.clear 	{clear:both;}	


#navi {display:none;}

			 																 	 	 	 	 	 	 																																	



/*sisällössä teksti sekä footer, jättää tilaa oik. sivussa oleville 

linkkilistalle ja mainoksille, sisallon oikeaan alareunaan tulee kunkin teeman

oma alakuva, määrätään alempana */

							

#sisalto {

						 	background:transparent;

						    width: auto;

						 	padding: 0px 5px 0px 0px;

							margin: 0px;

							position:relative; /* mainokset liukuvat bodyssa sisallon alle*/

							left:0px;

							}	

#tekstipalsta {/*leveydeltään joustava*/

								float:left;	

								padding:0px 0px 0px 0px;/*määrää tekstialueen marginaalit nyt v=130 ja o=175*/

                                            

								width:auto;

								margin:0px 0px 40px 20px;/*tilaa footerille*/

								}

				

#teksti img {border:0;

			 text-align:left;

			 float:left;

			 padding:0em 0.5em 0.5em 0.5em;

			}	

#teksti p.juttu {margin-left:40px;}

#teksti p.juttu img {float:none;

					 padding:0;}

/*näin juttuluetteloiden linkkinuolet asettuvat linjaan tekstin kanssa*/	



#footer{    

						border-top:1px dotted;

						clear:both; /*jos huomioboksi venyy tekstiä pidemmäksi*/

						position:relative;

						left:0;

						text-align:center;

						}		

						

#footer p {margin: 5px 5px 10px 10px;

		   	}

	

																			 				 

#sidebar {display:none;}



#mainostila {display:none;}

#linkkilista {display:none;}

#alamainos {display:none;}

					  								 

div.ingressi {clear:both;

			  margin:0em 0.5em 0.5em 0.5em;

			  padding:0.5em;

			  width:160px;

			  float:left;

			  font-variant:small-caps;

			 }

							

div.ingressi p {	

				font-style : italic;
				font-size : 1.1em;

				/*text-align:center;*/

				}
div.huomio {
   clear:both;
   margin:0.5em 10px 0.5em 10px;  
   padding:0em;
   }
   
div.huomio img {float:none !important;
				padding:0 !important;
				margin:0 !important;}

div.huomio p {
  line-height:1.3em;
  font-size:1em;}  
  

div.huomioboksi {clear:both;

				margin:0px 1em 1em 1em;

				padding:1em; 

				width:170px;

				float:left;

				border:solid 1px; }

				

div.huomioboksi p {	font-size: 13pt;}									

div.huomioboksi ul {margin:0em;

					padding: 0px;

					}

div.huomioboksi li {margin-top:0.5em;

					padding: 0px 0px 0.5em 20px;

					background:url(media/listmarker.png) top left no-repeat;

										}	
#ekahuomio 	{clear:both;
			 margin:0 1em 1em 1em; /*ylämarginaali = 0, jotta liukuva palstoitus toimisi*/
			 padding:0.5em 1em 1em 1em; 
			 width:200px;
			 float:left;
			 }
			 
div.huomioboksioikealle {
   clear:both;
   margin:1.5em 1em 1em 1em;
   padding:0.5em 1em 1em 1em; 
   width:200px;
   float:right;
   }
   
div.huomiokuvanrinnalle {
					margin:1em;
				    padding:0.5em 1em 2em 1em; 
				    width:300px;
				    float:left;
				      }
					    
div.leveaboksi {clear:both;
				max-width:500px; /*ei veny epämiellyttävän suureksi*/
				margin:auto;
				padding:1em; 
				 		 			 
}
div.huomioboksi p, #ekahuomio p, div.leveaboksi p, div.huomioboksioikealle p, div.huomiokuvanrinnalle p {
   font-size: 1em;
   line-height:1.3em;
   margin:0;
   padding:0.5em;	
}
				   
div.huomioboksi h5, #ekahuomio h5, div.leveaboksi h5, div.huomioboksioikealle h5  {
   padding-top:0.3em;
   margin:0;
}									
div.huomioboksi ul, #ekahuomio ul, div.leveaboksi ul, div.huomioboksioikealle ul  {
	margin:0em;
	padding: 0px 0px 0.5em 0em;
}
div.huomioboksi ul li, #ekahuomio ul li, div.leveaboksi ul li, div.huomioboksioikealle ul li {
    line-height:1.2em;
	margin:0;
	padding: 3px 2px 5px 18px;
	/*että taustakuva näkyy*/
	background:url(media/listmarker.png) top left no-repeat;
	}	
	
/*jokaiselle teemalle omat taustakuvat h2,sisalto;-->

		otsikkovärit, huomioboksien ja linkkilistojen taustat sekä huomiovärit*/

		

#sivu.jatkis #teksti h4{background: url(media/solmu4.gif) no-repeat bottom left;

						padding-left:60px;

						padding-bottom:0px;

						}											



/*oma suurempi alkukirjain*/		

#sivu.jatkis p.start:first-letter { 

									font-size : 400%; 

								    font-weight : bold;

   									color : #333; 

									background : #fff none;

									vertical-align: text-top;

									padding: 0px 6px 4px 0px;

									float:left;

									}

#sivu.jatkis p span {text-transform:uppercase;}

#sivu.jatkis p { margin: 5px 5px 10px 10px;}



/*sanastoon omia määrityksiä*/

/*body#sanasto */ 															 				



/*paja*/



#sivu.paja #teksti h4{

					background: url(media/tyokalut.png) no-repeat bottom left;

					padding-left:35px;

					padding-top:15px;

					}

/*aika*/													 



#sivu.aika #teksti h4{

			          background: url(media/kello.gif) no-repeat bottom left;

					  padding-left:35px;

					  padding-top:15px;

					 }

/*labra*/

											 



#sivu.labra #teksti h4{

					   background: url(media/mittalasi.png) no-repeat bottom left;

					   padding-left:35px;

					   padding-top:15px;

    					}



/*bio*/													 



#sivu.bio #teksti h4{

				    background: url(media/perho2.png) no-repeat bottom left;

					padding-left:35px;

					padding-top:15px;

					}



										 		

/*maa*/													 



#sivu.maa #teksti h4{

					 background: url(media/maa1.png) no-repeat bottom left;

					padding-left:35px;

					padding-top:15px;

					}





/*visa*/													 



#sivu.visa #teksti h4{

					  background: url(media/hehkulamppu.png) no-repeat bottom left;

   					 padding-left:35px;

					 padding-top:15px;

					}





/*toimitus*/													 



p em {font-weight:bold;}







/*vielä visojen lomakkeiden tyylit*/

/*Säätää jokaisen visan lomakepohjan värityksen ja visassa käytettävät etenemistä ilmaisevat kuvat*/





#sivu.visa form {

   margin-left: 30px;

   margin-top:5px;

   padding:15px 10px 15px 10px;

   line-height:1.2em;

   border: outset 2px #609;

   background: #e6cce6 none;

   width:700px;

}	



#sivu.visa form p {margin:0px 5px 0px 5px;

		padding-top:0;

		font-size:1.2em;}



#sivu.visa fieldset {

		  padding:10px 10px 10px 25px;                 

		  display:block;

		  border:solid 1px #609;

          background:transparent none;

}



#sivu.visa legend {

	font-size: 1.2em;

	font-weight: bold;

	text-transform: uppercase;

	padding: 5px;

	margin: 10px 0 0 0;

}

	



#sivu.visa legend {background: #fff; color:#609; border:solid 1px #609;}	 /*visasivun värit*/





label {font-weight:normal;

	   font-size:1.2em;	}

	

#sivu.visa #kysymys label {margin-left: 5px;} /* saako näin vaikutettua, että teksti ei kierrä radiobuttonia?? EI*/



/*syöttökenttiä koskevat määritykset*/



#sivu.visa input, #sivu.visa textarea {

border: 1px solid #609;

color:#609;

}





#sivu.visa input:focus,#sivu.visa textarea:focus { /*kun kenttää klikkaa taustaväri vaihtuu*/

	border: inset 1px #f6f;

	background-color: #f8daf8;

	color: #609;

	}

#sivu.visa input:hover {background: #f8daf8; border-color:#f6f;} /* kun mouseover, taustaväri vaihtuu*/

#sivu.visa input[type=submit]{

border: outset 1px #609;

}	

#sivu.visa input[type=submit]:focus{

border: inset 1px #609;

}	



#sivu.visa input[type=submit] {float:right;} /*nappula oikealle alas*/



#sivu.visa #otsikkopalkki, #sivu.visa #jatka, #sivu.visa #laheta, #sivu.visa #haasta, #sivu.visa #ok 

   {border:none;}



#otsikkopalkki h5 { font-weight:bold;

					font-size:1.2em;

				  } 

				  

ul.etenemiskuvat {position:absolute;

			   top:3.2em; /*tarkista tämä korkeus. Asettuuko otsikon kanssa linjaan? riippuu myös tekstin koosta (otsikko yläp.!!*/

			   right:330px; /*samoin tämä*/

			   display:inline;

			   list-style-type:none;

			   padding:5px}

			   

ul.etenemiskuvat li	   {padding:10px 17px 20px 10px;

						float:right;}

			   

/*jokaiselle visalle omat etenemiskuvansa, teemakuva voi vaihtua kysymyksittäin, sen url pitää kertoa vasta html-koodissa

Huom!! koska etenemiskuvat kerrotaan vain täällä, niillä pitää olla jokin järkevä vaihtoehtoinen merkki

etenemiskuva = ? oikeinkuva = ! väärinkuva = X*/



/*#pikakeho #etenemiskuva{background: transparent url(media/hehkulamppu1.gif) no-repeat;}

#pikakeho #oikeinkuva{background: transparent url(media/lamppupalaa.gif) no-repeat;}

#pikakeho #vaarinkuva{background: transparent url(media/lamppupimeana.gif) no-repeat;}*/

				  

#teemakuva {

			/*float:left !important; kuva saa tulla oikealle*/

			position:relative;

			width:250px;

			height:250px;

			padding:0;

			clear:both;

} /*varaa lomakkeeseen tilaa kuvalle*/





				

#sivu.visa #kysymys h6 {font-weight:bold;

			 font-size:1.2em;}

			

  

			  							

/*tekstin syöttökentät ja labelit rinnakkain niin, että syöttökentät alkavat aina samasta kohdasta*/											



#haastaja label, #haastettu1 label, #haastettu2 label, #haastettu3 label, #haastettu4 label

									{/*display:block;*/

									float:left;

									width:250px;

									text-align:right;

									margin: .5em 1em;

									display:block;

									clear:both;

				                    }

									

/*kaikille tekstin syöttökentille tietyt leveydet, muuten tekstin suurentaminen saa kentät vuotamaan lomakkeista yli*/	

#haastaja input, #haastettu1 input, #haastettu2 input, #haastettu3 input, #haastettu4 input 

{  float:left;

   margin:0.5em 0;

   width:250px;

 }





/*

   ----------------------------------------------------------------

   GBCF-V3 STYLE SHEET - MIKE CHERIM HTTP://GREEN-BEAST.COM

   ----------------------------------------------------------------

   muunneltu niin, että vastaa väreiltään toimitus-sivua, myös omat leveysmäärittelyt ja

   omat otsikkotyypit. Alkuperäisestä poiketen saa lisäksi kaksi legendaa

   siitä huolimatta, että vapaaehtoiset kentät on jätetty pois 

   (tämä muunnoksen tein koodiin form.php, käänsin myös kielitiedoston)

   Eeva Mäkelä maaliskuu 2008

*/



/* === form div and elements ======================================= */







#form-div { 

  margin-left: 30px;

  color : #333;

  line-height : 1.2em;

  background-color: transparent;

  width: 500px;

}



#form-div p.form-footer {

  margin : 0px 2px 20px 13px;

  font-style: italic;

 }



#form-div p.form-footer a { 

  color : #067a7a; 

}



#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active { 

  color : #ccc; 

  text-decoration : none; 

}



#form-div p.form-footer a:focus, #form-div p.form-footer a:active { 

  background-color : #c3d7d4; 

}





/* === form div link styles ======================================== */



#form-div a { 

  color : #067a7a; 

}

  

#form-div a:hover, #form-div a:focus, #form-div a:active { 

  color : #ccc; 

  text-decoration : none; 

}



#form-div a:focus, #form-div a:active { 

  background-color : #c3d7d4; 

}





/* === success and error message/results box ======================= */



#form-div p.success, #form-div p.error, #form-div p.center { 

  

  color : #099; 

  padding : 1px 4px; 

  border : 1px solid #099; 

  background-color : #ffff99;

  margin-right: -50px;

   

}



#form-div p.error { 

  color : #fff;

  background-color : #db4646; /*pun*/

}



#form-div p.success a {

  color : #067a7a;

}



#form-div p.error a {

  color : #fff;

}



#form-div p.center {

  text-align : center;

  background-color : #db4646;

  color : #fff;

  margin-top : -3px;

  padding : 0px 4px; 

}



#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active, 

#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {

  color : #999;

  background-color : transparent; 

}









/* === structural form elements ==================================== */



form#gbcf-form { 

   background-color: transparent;

   

   }



fieldset.main-set,

fieldset.req-set,

fieldset.opt-set { 

  border : 1px solid #099;

  padding:0px 40px 0px 40px; }





/* === textural form elements ====================================== */



#form-div legend { 

  margin: 15px 0 0 -25px;  

  font-weight: bold;

  text-transform: uppercase;

  padding: 5px;

  background: #099; 

  color:#fff; /*toimitussivun värit*/

}



#form-div legend span { }



legend.main-legend { 

  font-size : 110%;

  margin: 20px 0 0 -15px;

}



legend.req-legend,

legend.opt-legend { 

    }



legend.main-legend span { }

legend.main-legend { }



legend.req-legend span { }

legend.req-legend {

  margin-left : -2px;

}



legend.opt-legend span { }

legend.opt-legend { 

  margin-left : -2px;

}



label.req-label, label.opt-label {

  display: block;

  color : #444;

  padding-top: 15px;

}



label.opt-label.check {

  float : right;

  margin : 1px 4px;
 

}



label.opt-label.main-label {

  margin : 0 2px;

  font-weight : bold;

}



label.opt-label.main-label span {

  font-weight : normal;

  color : #666;

}



label.opt-label.main-label span.req, label span.req  {

  font-weight : bold;

  color : #099;

}



label.req-label.explain {

  padding-top:3px;

  color : #666;

  font-size : .8em;

}



label.req-label.explain:hover {

  color : #099;

}



/* === control and interface form elements ========================= */

/*

  note: In this section you will see the hover/focus styles for the 

  inputs. For example: input:hover, input:focus. You will also see 

  these names applied as classes: input.hover, input,focus, for 

  example. This is not done by mistake. Those classes are needed for 

  the JavaScript focus script (files/focus.js) for IE 7 and older.

*/



input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,

input.text-long.address.hover, input.text-long.address.focus {

  border-bottom : 0;

  margin-bottom : 0;

  padding-bottom : 2px;

  border-bottom : 1px dotted #bbb;

}



input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,

input.text-long.address2.hover, input.text-long.address2.focus {

  border-top : 0;

  margin-top : 0;

  padding-top : 0px;

  border-top : 1px dotted #bbb;

}



input.checkbox {

  border : 1px solid #999;

  width : .9em;

  height : .9em;

  padding : 0;

  margin : 0;

  }



input.checkbox:hover, input.checkbox.hover,

input.checkbox:focus, input.checkbox.focus {

  border : 1px solid #666;

}



input.text-short, 

input.text-med, 

input.text-long,

select.select,

textarea.textarea {

  font : 1em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;

  border : 1px solid #099;

  background-color : #fff;

  padding : 2px;

}



select.select {

  padding : 1px 0;

}



input.text-short {

  width : 100px;

}



input.text-med, select.select {

  width : 250px;

}



input.text-long {

  width : 300px;

}



textarea.textarea {

  width : 400px;

  height : 200px;

}


input.text-short:focus, input.text-short.focus, 

input.text-med:focus, input.text-med.focus,

input.text-long:focus, input.text-long.focus,

select.select:focus, input.select.focus,

textarea.textarea:focus, textarea.textarea.focus {

  border : inset 1px #099;

  background-color : #f6f6bd;;

  color: #099;

}



input.button { 

  font : 1.1em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;

  font-weight : normal;

  margin : 10px -30px 10px 0;

  padding : 2px 10px 2px 10px;

  float : right;

  clear : both;

  color : #067a7a;

}



input.button:hover, input.button.hover,

input.button:focus, input.button.focus {

  color : #999;

  background: #c3d7d4;

}



/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */

* html input.button {

  border : 1px solid #666;

}





/* EOF - Created by Mike Cherim @ http://green-beast.com =========== */