@charset "iso-8859-1";
/*css-tiedosto Hoksaa-nettilehden perustyyliksi Eeva Mäkelä tammikuu 2008*/
/*tässä määritellään navigaation ulkoasu, fontit, listat, otsikot, sivun asettelu, kuvien asemointi,
eri aihepiirien väritykset, otsikoiden koristekuvat sekä jokaiselle 
aihepiirille omat taustakuvat sivun footeriin*/ 

/*elementit*/
html {
  margin: 0px;
  padding: 0px;
}

body {
 font: 80% "Lucida Grande", "Lucida sans Unicode", Verdana, sans-serif;
 color: #333;
 background: #fff; 
 text-align: left;
 margin: 0px;
 padding: 0px;
 min-height: 100%;
 min-width:800px;
 max-width:1100px;
 margin-left:3%;
 background: #fff;
 
}


			
p { 
  font-size:1.2em;
  margin: 0em 1em 1em 1em;
  padding:0.5em 20px 0 20px;
  line-height:1.6em;
  
}

p.start:first-letter { font-size : 150%;
					   font-weight : bold;
   					   vertical-align:text-bottom;
					   letter-spacing:1.4px;
												}
												
p.oikealle {text-align:right;}

p.viimeinen {margin-bottom:0;}		
					

h1{/*jos ei kuvaa. Teksti näkyy siin tapauksessa, että kuvat pois päältä*/
	 font: bold 1.5em Garamond, Georgia, Times, serif;
	 margin:0;
	 padding:2.5em;
	  }
h2{
	 font: bold 2.2em Garamond, Georgia, Times, serif;
	 margin: 0px; 
	 padding: 60px 20px 10px 5px; /*että tytön kuva näkyy*/ 
     float:right;
	 width:170px; /*tytön kuvan leveys*/
	 background:transparent none;
	 
	}
	
#tytto {position: absolute; /*tytön kuva teeman otsikon yhteyteen*/
	    top:0;
	    right:0;
	    width:396px; /*tytön kuvan leveys*/
	    height:130px; 
		z-index:999; 
	    background: transparent url(media/uusilaura.jpg) top right no-repeat; 
		}
	  							
h3  {
	 font: bold 1.8em Garamond, Georgia, Times, serif;
	 margin:0 0 0 1em;
	 padding:1.5em 0 0.5em 0;
	 }	
		
h4{  font: bold 1.6em Garamond, Georgia, Times, serif;
	 margin-left:1em;
	 }		
		
h4.eka{background:transparent none !important;}
/*ettei otsikon kuva jäisi huomioboksin alle tai näkyisi ingressin alta, sen läpi*/			
	
h5{
	 font: oblique bold 1.4em Garamond, Georgia, Times, serif;
 	 padding:0.1em;
	  }

h5.logo	{                   /*riittävän pieni, jotta "teräviä päähänpistoja" asettuisi lehden nimen alle*/
    font-size:0.8em;
	padding:20px 0 0 10px;
	}                
					
a:link    { text-decoration:underline;
						color : #369; 
						background : transparent none; }
a:visited { text-decoration:underline;
						color : #666; 
						background : transparent none; }
a:hover   { text-decoration:none;
						color : #933; 
						background : #ffc none; }	
a:focus		{ text-decoration:none;
						color : #933; 
						background : #ffc none; }							
a:active  { color : #606; 
						background : transparent none; }

				
acronym  {
   font-weight:bold;
   border:dotted 1px #666;
   text-decoration:underline;
   background-color:#e2effa;
   }
		
ul {margin:1em;
    }		
ul li {font-family:"Century Gothic", Verdana, sans-serif;
	   list-style-type:none; /*lisää omat markerit list-style-image/li-taustakuva kunkin listan kohdalla*/
	   }

/*lista joka sopii yhteen edellisen tyylin kanssa, mutta siinä on kuitenkin markerit ja tilaa tekstialkioiden ympärillä*/

ul.luetelmatmi {list-style-image:url(media/listmarker.png);
					  padding-left:7em;
					  }	 
ul.luetelmatmi li {	
  
  margin:1em;
  line-height:1.5em;
  padding: 0; 
                                              
}					   

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 {position:relative;
					    font:bold 1.2em 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, dl dt, dl dd {position:relative;}
			
dl.haastattelu {margin-left: 2.5em;
				background:transparent none
				}
																				
dl.haastattelu dt {font:bold 1.3em Optima, Arial, sans-serif;
				   color:#099;
				   margin-left: 0em;
									}
									
dl.haastattelu dd {font:1.2em Optima, Arial, sans-serif;
				   margin-left: 1em;
				   padding: 1em;}
									
dl.sanasto dt{
					 		font:bold 1em Optima, Arial, sans-serif;
					 		color:#69c;
							margin-left:1em;
							background:url(media/koysi.png) bottom left no-repeat;
							padding: 1em 1em 10px 25px;
							}	
							
dl.sanasto dt#ahteri, dl.sanasto dt#ahteripiikki, dl.sanasto dt#alamarssyraaka {margin-left:260px !important;}
/*ettei otsikon kuva jäisi huomioboksin alle*/	
									
dl.sanasto dd {font:normal 1em Optima, Arial, sans-serif;
			   margin-left:4em;
			   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;
   
}
   
.nakymaton {display:none;}
.credit {font:italic 1em Arial, Helvetica, sans-serif;
		 /*float:right;*/}
.lajinimi {font-style:italic;}
				 
.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;}
				 	
/*erottamaan tekstiosuuksia jatkiksen luvuissa
voi laittaa muunlaisia pikkukuvia bostonin lukuihin*/						 
				 
/*erilliset divit*/

/*#sivu TARVITAAN ID:n antajana eri teemoille*/		
					
#clear {clear:both;}
.clear 	{clear:both;}				

#navi {
			 		/*width: 760px;*/
					position:relative;
					float:left;
					padding: 20px 0px 0px 0px;
					font-size:1.2em;
					font-weight:bold;
					width:100%;
					background: #fff url(media/navitausta.jpg) top right no-repeat; 
		
					}
#navi ul {		 /*width: 760px;*/
			     position:relative;
	 			 background: transparent;
				 display: inline;
				 list-style-type:none;
				 }
#navi li{ 
					list-style-type:none;
					margin: 0px 2px 0px 2px;
					padding: 8px 0px 9px 3px;
					float:left;
					
        }

/*navigaatiolistan linkkien tekstit*/				
#navi			a:link    { text-decoration:none;
							color : black; 
	    					}
#navi     a:visited {text-decoration:none;
			         color : black;
			         }
#navi     a:hover   { text-decoration:underline;
					  color : black; 
					}	
#navi     a:focus		{ text-decoration:underline;
					      color : black; 
						}							
#navi     a:active  {text-decoration:none; 
                     color :black; 
					}
					
/*eriväriset taustakuvat navigaationappuloille, joustavat tekstin koon mukaan
hoverissa tai focukcessa vaaleampi sävy. Voi olla, että navi*-kuvia pitää muuttaa
korkeammiksi (nyt 160px --> 200px). Silloin -80 korvataan -100. */

/*etusivun nappula*/					
#etusivunav {background: #fff url(media/navietu.jpg) 100% -80px no-repeat;}
a#etusivunav {background: #fff none;
              border:1px #ff0;
							border-style: solid solid none solid; 
							padding: 8px 5px 9px 5px;}
a:hover#etusivunav {background: #fff url(media/navietu.jpg) bottom left no-repeat;
                    padding: 8px 5px 9px 5px;}
a:focus#etusivunav {background: #fff url(media/navietu.jpg) bottom left no-repeat;
                    padding: 8px 5px 9px 5px;}
												
/*jatkiksen nappula*/				
#jatkisnav {background: #fff url(media/navijatkis.jpg) 100% -80px no-repeat;}
a#jatkisnav {background: #fff none;
             border:1px #69c;
						 border-style: solid solid none solid; 
						 padding: 8px 5px 9px 5px;}
a:hover#jatkisnav {background: #69c url(media/navijatkis.jpg) bottom left no-repeat;
                   padding: 8px 5px 9px 5px;}
a:focus#jatkisnav {background: #69c url(media/navijatkis.jpg) bottom left no-repeat;
                   padding: 8px 5px 9px 5px;}	
												
/*pajan nappula*/					
#pajanav {background: #fff url(media/navipaja.jpg) 100% -80px no-repeat;}
a#pajanav {background: #fff none;
           border:1px #c30;
					 border-style: solid solid none solid; 
					 padding: 8px 5px 9px 5px;}
a:hover#pajanav {background: #c30 url(media/navipaja.jpg) bottom left no-repeat;
                 padding: 8px 5px 9px 5px;}
a:focus#pajanav {background: #c30 url(media/navipaja.jpg) bottom left no-repeat;
                 padding: 8px 5px 9px 5px;}	
												
/*aikan nappula*/					
#aikanav {background: #fff url(media/naviaika.jpg) 100% -80px no-repeat;}
a#aikanav {background: #fff none;
           border:1px #f90;
					 border-style: solid solid none solid; 
					 padding: 8px 5px 9px 5px;}
a:hover#aikanav {background: #f90 url(media/naviaika.jpg) bottom left no-repeat;
                 padding: 8px 5px 9px 5px;}
a:focus#aikanav {background: #f90 url(media/naviaika.jpg) bottom left no-repeat;
                 padding: 8px 5px 9px 5px;}
												
/*labran nappula*/					
#labranav {background: #fff url(media/navivisa.jpg) 90% -90px no-repeat;}
a#labranav {background: #fff none;
            border:1px #fcc;
						border-style: solid solid none solid; 
						padding: 8px 5px 9px 5px;}
a:hover#labranav {background: #fcc url(media/navivisa.jpg) bottom left no-repeat;
                  padding: 8px 5px 9px 5px;}
a:focus#labranav {background: #fcc url(media/navivisa.jpg) bottom left no-repeat;
                  padding: 8px 5px 9px 5px;}
												
/*bion nappula*/					
#bionav {background: #fff url(media/navibio.jpg) 100% -80px no-repeat;}
a#bionav {background: #fff none;
          border:1px #696;
					border-style: solid solid none solid; 
					padding: 8px 5px 9px 5px;}
a:hover#bionav {background: #696 url(media/navibio.jpg) bottom left no-repeat;
            		padding: 8px 5px 9px 5px;}
a:focus#bionav {background: #696 url(media/navibio.jpg) bottom left no-repeat;
            		padding: 8px 5px 9px 5px;}																																																											
/*maan nappula*/					
#maanav {background: #fff url(media/navimaa.jpg) 100% -80px no-repeat;}
a#maanav {background: #fff none;
          border:1px #c93;
					border-style: solid solid none solid; 
					padding: 8px 5px 9px 5px;}
a:hover#maanav {background: #c93 url(media/navimaa.jpg) bottom left no-repeat;
          			padding: 8px 5px 9px 5px;}
a:focus#maanav {background: #c93 url(media/navimaa.jpg) bottom left no-repeat;
          			padding: 8px 5px 9px 5px;}

/*visan nappula*/					
#visatnav {background: #fff url(media/navilabra.jpg) 100% -80px no-repeat;}
a#visatnav {background: #fff none;
           border:1px #f6f;
					 border-style: solid solid none solid; 
					 padding: 8px 5px 9px 5px;}
a:hover#visatnav {background: #f6f url(media/navilabra.jpg) bottom left no-repeat;
          				padding: 8px 5px 9px 5px;}
a:focus#visatnav {background: #f6f url(media/navilabra.jpg) bottom left no-repeat;
          				padding: 8px 5px 9px 5px;}

/*toimituksen nappula*/					
#toimitusnav {background: #fff url(media/navitoimitus.jpg) 100% -80px no-repeat;}
a#toimitusnav {background: #fff none;
          		 border:1px #ccc;
							 border-style: solid solid none solid; 
							 padding: 8px 5px 9px 5px;}
a:hover#toimitusnav {background: #ccc url(media/navitoimitus.jpg) bottom left no-repeat;
          					padding: 8px 5px 9px 5px;}
a:focus#toimitusnav {background: #ccc url(media/navitoimitus.jpg) bottom left no-repeat;
          					padding: 8px 5px 9px 5px;}

/*merkitään korkeammalla nappulalla, millä sivulla ollaan. JA aktiivinen värjätään tummalla*/

body#etusivu a#etusivunav, body#jatkis a#jatkisnav,body#paja a#pajanav,
body#aika a#aikanav, body#labra a#labranav, body#bio a#bionav, body#visa a#visatnav,
body#toimitus a#toimitusnav, body#maa a#maanav 
														 {padding: 15px 5px 10px 5px; /*pitäisi nousta korkeammalle*/
														 text-decoration: underline;
														 }
body#maa a#maanav	{background: #c93 url(media/navimaa.jpg) bottom left no-repeat;}
body#etusivu a#etusivunav {background: #ff0 url(media/navietu.jpg) bottom left no-repeat;}
body#jatkis a#jatkisnav {background: #69c url(media/navijatkis.jpg) bottom left no-repeat;}
body#paja a#pajanav {background: #c90 url(media/navipaja.jpg) bottom left no-repeat;}
body#aika a#aikanav {background: #f90 url(media/naviaika.jpg) bottom left no-repeat;}
body#labra a#labranav {background: #fcc url(media/navivisa.jpg) bottom left no-repeat;}
body#bio a#bionav {background: #696 url(media/navibio.jpg) bottom left no-repeat;}
body#visa a#visatnav {background: #f6f url(media/navilabra.jpg) bottom left no-repeat;}
body#toimitus a#toimitusnav {background: #ccc url(media/navitoimitus.jpg) bottom left no-repeat;}

														 	 	 	 	 	 	 																																	 					
#header {
						clear:left; /*navigaation jäljiltä*/
						/*width: 760px;*/
						height: 158px; /* h=tytön kuvan + h2-otsikon korkeus*/
						margin:0;
						padding: 0px;
						text-align:left;
						position:relative; /*muita absoluuttisesti sijoitettuja tulee sisään*/
					    background: #fff url(media/taivasraita.jpg) top left repeat-x;
						}


/*image replacement -tekniikka, jolla teksti näkyy, jos kuvia ei käytössä, 
korvaa tässä h1:n logolla */



#logo {width:394px; 
			height: 158px;
			position:absolute; /*pitäisi hoitaa se, että pojan kuva saa jatkua tekstin viereen */
			padding:0px;
			top:2px;
			left:0px;
			
			}
#logo span{ background: #ffffff url("media/h1logouusi.jpg") no-repeat left top; /*oli h1poika.gif*/
						display:block;
						position:absolute;
						width: 100%;
			            height: 100%;
 				z-index:100; 		}		0
																							
/*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 */
							
div #sisalto { clear:right; /*jotta h2 ei sijaitsisi päällekkäin tämän kanssa*/
		       padding: 0px 5px 0px 0px;
			   margin: 0px 0px 0px 0px;/*oli ennen 130px vasemmalle tilaa kuvalle*/ 
			   position:relative; /* mainokset liukuvat bodyssa sisallon alle*/
			   left:0px;
			   background-color: #fff;
			}

div #tekstipalsta {/*leveydeltään joustava*/
								
								background: transparent url(media/jooH4.png) top left no-repeat; /*nyt lisätty*/
								float:left;	
								padding:0px 0px 0px 0px;/*määrää tekstialueen marginaalit nyt v=130 ja o=175*/
                                width:100%;
								margin:0px -185px 40px 0px;/*tilaa footerille, -175 takaa, että sidebar saa liukua tekstipalstan viereen */
								}
								
								
div #teksti    { 
                 margin:0 185px 0 140px; /*pitämään tekstin poissa sidebarin ja kuvan alta*/		
				} 						
								
#teksti img {
   border:none;
   float:right;
   margin:1em;
   }	
#teksti img.kuvavasemmalle {float:left;
							}
							


#teksti p.juttu img {float:none;
					 padding:0;
					 border:none;
					 margin:0;}
					/*näin juttuluetteloiden linkkinuolet asettuvat linjaan tekstin kanssa*/	
#teksti p.juttu{padding-left:15px;
				}
#footer{    
						border-bottom:1px solid;
						clear:both; /*jos huomioboksi venyy tekstiä pidemmäksi*/
						position:relative;
						left:0;
						text-align:center;
						}
#footer p { margin: 5px 0px 10px 0px;}
																			 				 
#sidebar {
				  float:right;
				  width:170px;
				  top:0px;
				  right:0px;
				  margin:0px 12px 250px 0px;
					/*sisällön alareunasta niin, että footerille ja reunakuvalle jää tilaa*/
					
					}
#sivu.jatkis #sidebar {position:fixed; /*jotta sidebar kulkisi lukiessa mukana */
					   top:200px;
					   margin-top:2em;
					   }
					   
#sivu.jatkis div#sidebar.pitka {
				  position:relative;
				  float:right;
				  width:170px;
				  top:0px;
				  right:0px;
				  margin:0px 2px 250px 0px;
					/*kun on paljon lisätietoa, ei voi käyttää paikallaan pysyvää sidebaria*/
					
					}
					   
#sivu.jatkis {max-width:1000px;} /*kapeampi kuin muut, että tekstiä on mukavampi lukea*/
					
#mainostila{position:relative;
								text-align:center;											
								width:150px;
								overflow:hidden; /*mainokset eivät niin tärkeitä*/
								}
#linkkilista{
								position:relative;
								top:20px; /*tilaa 2-riviselle tekstille yläpuolen otsikossa */
								left:10px;
								font:1em "Century Gothic", verdana, sans-serif;
								padding:0.5em;
								width:170px;
								overflow:visible;} /*jos on pitkiä sanoja, jotka eivät tekstin suurentuessa mahdu, ne kuitenkin*/ 					                                                    /* näkee*/
								
								
#linkkilista a:link {text-decoration:underline;}								
#linkkilista ul {margin:0 1em 0 0;
				padding:0.2em 0.2em 0.2em 0em;
				}
#linkkilista li {line-height:1.2em;
				 padding: 5px 5px 5px 18px; 
				 margin:0;                                            /*näin ainoa tpa saada listmarker listan alkion eteen keskelle*/
				 background:url(media/listmarker.png) center left no-repeat; /*list-style-image menee aina alkion huipulle vasemmalle*/
				 }
#linkkilista h4{margin:0em;
				padding:5px 2px 2px 20px ;					
				font:1.2em "Century Gothic", verdana, sans-serif;
				font-weight:bold;
				font-variant:small-caps;
				border-bottom:1px ridge;
				}	

#alamainos {position:relative;
				bottom:0px;
				text-align:center;
				height:50px;
				 } /*bodyssa*/
																  								 
div.ingressi {
				clear:both;
			    margin:0em 0.5em 0.5em 0.5em;
				padding:0.5em;
				width:200px;
				float:left;
			 }
							
div.ingressi p {font:small-caps 1.1em Georgia, Times, serif;
				/*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:1.5em 1em 1em 1em;
				 padding:0.5em 1em 1em 1em; 
				 width:200px;
				 float:left;
				 }

/*erilainen sivun ensimmäiseksi*/
			
#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 footeriin*/
/*otsikkovärit, huomioboksien ja linkkilistojen taustavärit sekä huomiotekstinvärit*/
		

#sivu.etusivu h1,#sivu.etusivu h2,#sivu.etusivu h3,#sivu.etusivu h4,
#sivu.etusivu h5 {color:#936;}
/*alareunan kuva*/
#sivu.etusivu #sisalto{background: #fff url(media/etufooter.jpg) no-repeat bottom right;}
#sivu.etusivu #header{border-top:solid 5px #ff0;}
/*piirtyykö nyt kvan päälle, kumpi ensin kuva vai viiva z-index??*/
#sivu.etusivu div.huomioboksi, #sivu.etusivu #ekahuomio {border:solid 2px #ffff9d;
						 	  color:#936;}
#sivu.etusivu #linkkilista {background:#f6f6bd;
						   color:#936;}
#sivu.etusivu #linkkilista h4 {background:#f6f6bd url(media/nuolialasbio.gif) top left no-repeat;
															}
#sivu.etusivu #linkkilista a:link {color:#936;}
#sivu.etusivu #linkkilista a:visited {color:#936;}
#sivu.etusivu #linkkilista a:hover {background:transparent;color:#b8b845;}
#sivu.etusivu #linkkilista a:focus {color:#936;}
#sivu.etusivu #linkkilista a:active {color:#936;}

#sivu.etusivu #teksti em {color:#936;}
#sivu.etusivu #footer {color:#936;
					  border-color:#ff0;}
													 

#sivu.jatkis h1, #sivu.jatkis h2,#sivu.jatkis h3,#sivu.jatkis h4,
#sivu.jatkis h5 {color:#333}

/*alareunan kuva, erilainen eri vaiheissa kirjaa*/
body#jatkis #sivu.jatkis #sisalto{background: url(media/jatkisfooter.jpg) no-repeat bottom right;}
body#laivalla #sivu.jatkis #sisalto{background: url(media/jatkisfooter.jpg) no-repeat bottom right;}

body#bostonissa #sivu.jatkis #sisalto {background: url(media/bostonissafooter4.jpg) no-repeat bottom right;}

#sivu.jatkis #teksti img { /*tekstin aloittavan kirjaimen kuvan tulee olla vasemmalla, yleinen kuvien määritys tekstissä on oikealla*/
   float:left;
   padding:0.2em;
   margin:0;
   }	

#sivu.jatkis #header{border-top:solid 5px #69c}
#sivu.jatkis  div.huomioboksi, #sivu.jatkis #ekahuomio {background:#ccf; color:#333;}
#sivu.jatkis #linkkilista {background:#ccf; color:#333;}
#sivu.jatkis #linkkilista h4 {background:#ccf url(media/nuolialassini2.png) top left no-repeat;
															}															
#sivu.jatkis #linkkilista a:link {color:#333;}
#sivu.jatkis #linkkilista a:visited {color:#333;}
#sivu.jatkis #linkkilista a:hover {background:transparent;color:#f90;}
#sivu.jatkis #linkkilista a:focus {color:#333;}
#sivu.jatkis #linkkilista a:active {color:#333;}															
#sivu.jatkis #teksti em {color:#f90;}
											
#sivu.jatkis #teksti h4{background: url(media/solmu4.gif) no-repeat bottom left;
						 margin-left:210px; 
						 padding-left:60px; /*että kuva näkyy*/
						 padding-bottom:0px;
						}											
#sivu.jatkis #footer {color:#333; border-color:#69c;}
/*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;
									}
									
/*toinen määritys korkeampia kirjaimia varten*/
#sivu.jatkis p.initial:first-letter { 
									font-size : 400%; 
									font-weight : bold;
   									color : #333; 
									background : #fff none;
									vertical-align:text-bottom;
									padding: 0px 6px 4px 0px;
									float:left;
									}


#sivu.jatkis #teksti p span {text-transform:uppercase;}
#sivu.jatkis p { margin: 5px 5px 10px 10px;
				line-height:1.5em;}
				
#sivu.jatkis p.kirje {font-style: oblique;}

/*sanastoon omia määrityksiä*/
/*body#sanasto */ 															 				

/*paja*/
#sivu.paja h1,#sivu.paja h2,#sivu.paja h3,#sivu.paja h4,
#sivu.paja h5 {color:#633}

/*alareunan kuva*/
#sivu.paja #sisalto{background: url(media/pajafooter.jpg) no-repeat bottom right;}
#sivu.paja #header{border-top:solid 5px #c30}
/*piirtyykö nyt kvan päälle, kumpi ensin kuva vai viiva z-index??*/

#sivu.paja #teksti h4{margin-left:25px; 
											 background: url(media/tyokalut.png) no-repeat bottom left;
											 padding-left:35px;
											 padding-top:8px;
											}
				
#sivu.paja  div.huomioboksi, #sivu.paja  div.huomioboksioikealle, #sivu.paja #ekahuomio{border:2px solid #9c9; color:#333;}
#sivu.paja  div.huomio {border:2px solid #9c9; color:#333;}
#sivu.paja #linkkilista {background:#9c9; color:#c30;}
#sivu.paja #linkkilista h4 {background:#9c9 url(media/nuolialaspuna.png) top left no-repeat;
															}																	
#sivu.paja #linkkilista a:link {color:#333; }
#sivu.paja #linkkilista a:visited {color:#333;}
#sivu.paja #linkkilista a:hover {background:transparent;color:#c30;}
#sivu.paja #linkkilista a:focus {color:#333;}
#sivu.paja #linkkilista a:active {color:#333;}				
#sivu.paja #teksti em {color:#c30;}
#sivu.paja #footer {color:#633; border-color:#c30;}

/*aika*/													 
#sivu.aika h1,#sivu.aika h2,#sivu.aika h3,#sivu.aika h4,
#sivu.aika h5 {color:#66c}

/*alareunan kuva*/
#sivu.aika #sisalto{background: url(media/aikafooter.jpg) no-repeat bottom right;}
#sivu.aika #header{border-top:solid 5px #f90}

/*piirtyykö nyt kvan päälle, kumpi ensin kuva vai viiva z-index??*/

#sivu.aika #teksti h4{margin-left:25px; 
											 background: url(media/kello.gif) no-repeat bottom left;
											 padding-left:35px;
											 padding-top:10px;
											}
									
#sivu.aika  div.huomioboksi, #sivu.aika #ekahuomio{background:#f5d893; color:#66c;}
#sivu.aika  div.huomio {border:2px solid #f90; color:#333;}
#sivu.aika #linkkilista {background:#f5d893; color:#66c;}
#sivu.aika #linkkilista h4 {background:#f5d893 url(media/nuolialassini.png) top left no-repeat;
															}			 															
#sivu.aika #linkkilista a:link {color:#66c; }
#sivu.aika #linkkilista a:visited {color:#66c;}
#sivu.aika #linkkilista a:hover {background:transparent;color:#d97e08;}
#sivu.aika #linkkilista a:focus {color:#66c;}
#sivu.aika #linkkilista a:active {color:#66c;}																			
#sivu.aika #teksti em {color:#d97e08;}
#sivu.aika #footer {color:#66c;
					border-color:#f90;}

/*labra*/
											 
#sivu.labra h1,#sivu.labra h2,#sivu.labra h3,#sivu.labra h4,
#sivu.labra h5 {color:#333}

/*alareunan kuva*/
#sivu.labra #sisalto{background: #fff url(media/labrafooter.jpg) no-repeat bottom right;}
#sivu.labra #teksti h4{margin-left:25px; 
											 background: url(media/mittalasi.png) no-repeat bottom left;
											 padding-left:35px;
											 padding-top:8px;
											}
										
										
#sivu.labra #header{border-top:solid 5px #fcc}
#sivu.labra  div.huomioboksi, #sivu.labra #ekahuomio {background:#fae6e6;	color:#363;}
#sivu.labra  div.leveaboksi {background:#fae6e6; color:#363;}
#sivu.labra  div.huomioboksioikealle {background:#fae6e6;	color:#363;}
#sivu.labra div.huomio {background:#fff; border:#363 2px double;	color:#363;}
#sivu.labra #linkkilista {background:#fae6e6;  color:#363;}
#sivu.labra #linkkilista h4 {background:#fae6e6 url(media/nuolialasvihr.png) top left no-repeat;
															}			
#sivu.labra #linkkilista a:link {color:#696; }
#sivu.labra #linkkilista a:visited {color:#363;}
#sivu.labra #linkkilista a:hover {background:transparent; color:#c47979;}
#sivu.labra #linkkilista a:focus {color:#363;}
#sivu.labra #linkkilista a:active {color:#363;}																		
#sivu.labra #teksti em  {color:#696;}
#sivu.labra #footer {color:#363;
					 border-color:#fcc;}

/*bio*/													 
#sivu.bio h1,#sivu.bio h2,#sivu.bio h3,#sivu.bio h4,
#sivu.bio h5 {color:#936}

/*alareunan kuva*/
#sivu.bio #sisalto{background: url(media/biofooter.jpg) no-repeat bottom right;}
#sivu.bio #header{border-top:solid 5px #696}
#sivu.bio #teksti h4{margin-left:25px; 
					 background: url(media/perho2.png) no-repeat bottom left;
					 padding-left:35px;
					 padding-top:7px;
}

#sivu.bio  div.huomioboksi, #sivu.bio #ekahuomio {background:#d2dea5;color:#936;}
#sivu.bio  div.huomioboksioikealle {background:#d2dea5;color:#936;}
#sivu.bio  div.leveaboksi {background:#d2dea5;color:#936;}
#sivu.bio  div.huomio {background:#fff; border: #696 2px double; color:#936;}
#sivu.bio #linkkilista {background:#d2dea5; color:#936;}
#sivu.bio #linkkilista h4 {background:#d2dea5 url(media/nuolialasviol.png) top left no-repeat;
															}																		
#sivu.bio #linkkilista a:link {color:#936; }
#sivu.bio #linkkilista a:visited {color:#936;}
#sivu.bio #linkkilista a:hover {background:transparent; color:#696;}
#sivu.bio #linkkilista a:focus {color:#936;}
#sivu.bio #linkkilista a:active {color:#936;}																			
#sivu.bio #teksti em {color:#936;}
#sivu.bio #footer {color:#936;
				   border-color:#696;}
				   
/*bion jutut torakasta saavat erilaiset otsikot*/
body#paatontorakka #sivu.bio #teksti h4, body#torakka #sivu.bio #teksti h4 {
	background: url(media/torakkaclip.jpg) no-repeat bottom left;
	padding-left:90px;
}
body#paatontorakka #sivu.bio #teksti h3, body#torakka #sivu.bio #teksti h3{
    background: url(media/torakkaclip.jpg) no-repeat bottom right;
	margin-right:200px;					 																
}
body#kukkasipulit #sivu.bio #teksti h3 {
    background: url(media/kukkakollaasi.jpg) repeat-x top right;
	padding-top:100px;
}
body#kukkasipulit #sivu.bio #teksti .huomio {
	color:#333;
}
/*maa*/													 
#sivu.maa h1,#sivu.maa h2,#sivu.maa h3,#sivu.maa h4,
#sivu.maa h5 {color:#36c}

/*alareunan kuva*/
#sivu.maa #sisalto{background: url(media/maafooter.jpg) no-repeat bottom right;}
#sivu.maa #header{border-top:solid 5px #c93}
/*piirtyykö nyt kvan päälle, kumpi ensin kuva vai viiva z-index??*/

#sivu.maa #teksti h4{margin-left:25px; 
											 background: url(media/maa1.png) no-repeat bottom left;
											 padding-left:35px;
											 padding-top:7px;
											}
#sivu.maa  div.huomioboksi, #sivu.maa #ekahuomio {background:#f3e3c4;color:#36c;}
#sivu.maa  div.leveaboksi {background:#fff; border: 1px solid #c93;}
#sivu.maa  div.huomio {background:#fff; border: #c93 2px double; color:#36c;}
#sivu.maa #linkkilista {background:#f3e3c4; color:#36c;}
#sivu.maa #linkkilista h4 {background:#f3e3c4 url(media/nuolialassini.png) top left no-repeat;
															}			
#sivu.maa #linkkilista a:link {color:#f90; }
#sivu.maa #linkkilista a:visited {color:#36c;}
#sivu.maa #linkkilista a:hover {background:transparent; color:#c93;}
#sivu.maa #linkkilista a:focus {color:#36c;}
#sivu.maa #linkkilista a:active {color:#36c;}																			
#sivu.maa #teksti em  {color:#c93;}
#sivu.maa #footer {color:#36c; border-color:#c93;}

/*visa*/													 
#sivu.visa h1,#sivu.visa h2,#sivu.visa h3,#sivu.visa h4,
#sivu.visa h5{color:#609}

/*alareunan kuva*/
#sivu.visa #sisalto{background: url(media/visafooter.jpg) no-repeat bottom right;}
#sivu.visa #header{border-top:solid 5px #f6f}
/*piirtyykö nyt kvan päälle, kumpi ensin kuva vai viiva z-index??*/

#sivu.visa #teksti h4{margin-left:25px; 
					  background: url(media/hehkulamppu1.gif)  no-repeat bottom left;
   					 padding-left:20px;
					 padding-top:3px;
					}
#sivu.visa  div.huomioboksi, #sivu.visa #ekahuomio {background:#e6cce6;
						     color:#609;}
#sivu.visa #linkkilista {background:#e6cce6;
						 color:#609;
						 border:outset 1px #e6cce6;
						 }
#sivu.visa #linkkilista h4 {background:#e6cce6 url(media/nuolialasvisa.png) top left no-repeat;
															}																		
#sivu.visa #linkkilista a:link {color:#609; }
#sivu.visa #linkkilista a:visited {color:#609;}
#sivu.visa #linkkilista a:hover {background:transparent; color:#f6f;}
#sivu.visa #linkkilista a:focus {color:#609;}
#sivu.visa #linkkilista a:active {color:#609;}																			
#sivu.visa #teksti em {color:#609;}
#sivu.visa #footer {color:#609;
					border-color:#f6f;					 }

/*toimitus*/													 
#sivu.toimitus h1,#sivu.toimitus h2,#sivu.toimitus h3,#sivu.toimitus h4,
#sivu.toimitus h5 {color:#0b7a7a;}
/*alareunan kuva*/
#sivu.toimitus #sisalto{background: url(media/toimitusfooter.jpg) no-repeat bottom right;}
#sivu.toimitus #header{border-top:solid 5px #ccc}
/*piirtyykö nyt kuvan päälle, kumpi ensin kuva vai viiva z-index??*/
#sivu.toimitus  div.huomioboksi, #sivu.toimitus #ekahuomio, #sivu.toimitus div.huomiokuvanrinnalle {background:#c3d7d4; color:#0b7a7a;}
#sivu.toimitus  div.leveaboksi {background:#c3d7d4; color:#0b7a7a;}
#sivu.toimitus #linkkilista {background:#c3d7d4; color:#0b7a7a;}
#sivu.toimitus #linkkilista h4 {background:#c3d7d4 url(media/nuolialastoimitus.png) top left no-repeat;}
																																	
#sivu.toimitus #linkkilista a:link {color:#0b7a7a; }
#sivu.toimitus #linkkilista a:visited {color:#0b7a7a;}
#sivu.toimitus #linkkilista a:hover {background:transparent;color:#999;}
#sivu.toimitus #linkkilista a:focus {
  color:#0b7a7a;
}
#sivu.toimitus #linkkilista a:active {
  color:#0b7a7a;
}																			
#sivu.toimitus #teksti em  {
   color:#0b7a7a;
}
#sivu.toimitus #footer {
  color:#0b7a7a; 
  border-color:#ccc;
 }


/*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 label,input[type=checkbox], #sivu.visa input[type=radio] { 
	cursor: pointer;
	}

#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;
  cursor : pointer;
}

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;
  cursor : pointer;
}

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;
  cursor : text;
  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;
}

select.select, select.select option {
  cursor : pointer;
}

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;
  cursor : pointer;
  float : right;
  clear : both;
  color : #067a7a;
}

input.button:hover, input.button.hover,
input.button:focus, input.button.focus {
  color : #999;
  background: #c3d7d4;
}


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

/* === uutiskirjeen tilauslomake subscribeForm div  ======================================= */



#subscribeForm { 
  margin-left : 30px;
  color : #333;
  line-height : 1.2em;
  background-color : transparent;
  width : 500px;
}

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

#subscribeForm a { 
  color : #067a7a; 
}
  
#subscribeForm a:hover, #form-div a:focus, #form-div a:active { 
  color : #ccc; 
  text-decoration : none; 
}

#subscribeForm a:focus, #form-div a:active { 
  background-color : #c3d7d4; 
}


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

#subscribeForm { 
   background-color : transparent;
   
   }

#subscribeForm fieldset { 
  border : 1px solid #099;
  padding :0px 40px 10px 40px; }


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

#subscribeForm legend { 
  margin : 15px 0 0 -25px;  
  font-weight : bold;
  text-transform : uppercase;
  padding : 5px;
  background : #099; 
  color :#fff; /*toimitussivun värit*/
}

#subscribeForm label
{
  display : block;
  color : #444;
  padding : 15px 0px 3px 0px;
}

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

#subscribeForm input.text
{
  font : 1em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  margin-bottom : 2em;
  border : 1px solid #099;
  background-color : #fff;
  cursor : text;
  padding : 2px;
}

#subscribeForm div.buttons { 
  color : #067a7a;
  margin-left : 0px;
  padding : 10px 10px 10px 0px;
  cursor : pointer;
  }

div.buttons input.submit:hover, div.buttons
input.submit:focus {
  color : #999;	
  }