@charset "iso-8859-1";
/*css-tiedosto toiminimi Hoksaan sivun tyyliksi  Eeva Mäkelä tammikuu 2019*/
/*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: 90% Optima, georgia, 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.1em;
  margin: 0em 1em 0.5em 1em;
  padding:0em 20px 0 20px;
  line-height:1.5em;
}

p.ingressi {font:small-caps 1.1em "Century Gothic", verdana, sans-serif;}

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: 30px 20px 10px 5px; /*vähensin ylhäältä verr. lehteen*/ 
     float:right;
	 width:170px; /*tytön kuvan leveys*/
	 background:transparent none;
	 
	}

h2.vasemmalle {
	margin-top:1em;
	margin-bottom:0.3em;
	padding:0 0 0.5em 0;
	float:none;
	width:100%;
	}

#tytto {position: absolute; /*tytön kuva teeman otsikon yhteyteen*/
	    top:0;
	    right:0;
	    float:right; 
		z-index:999; 
	    background: none; 
		}
						
h3  {
	 font: bold 1.8em Garamond, Georgia, Times, serif;
	 margin-top:1em;
	 margin-bottom:0.3em;
	 padding:0 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;
	 margin-top: 0.5em;
	 margin-bottom: 0.25em;
 	 padding: 0 0 0 0em;
	  }

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 : transparent none; }	
a:focus		{ text-decoration:none;
						color : #933; 
						background : transparent 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*/
	   }

ul.sisempi {margin: 0;}
ul.sisempi li::before {
  						content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  						color: #a0be3b; /* Change the color */
  						font-weight: bold; /* If you want it to be bold */
  						display: inline-block; /* Needed to add space between the bullet and the text */
  						width: 1em; /* Also needed for space (tweak if needed) */
  						margin-left: -1em; /* Also needed for space (tweak if needed) */
					}

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

ul.luetelmatmi {list-style-image:url(media/list-marker-kyna.svg);
					  margin: 1em 3em 2em 1em;
					  padding-left:3em;
					  }	 
ul.luetelmatmi li {	
  
  margin: 1em 3em 1em 1em;
  
  padding: 0; 
                                              
}			

ul.luetelmatekstissa {list-style-image:url(media/list-marker-kyna.svg);
					  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; 
		
					}
#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; 
					}
					
/*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. Toiminimen sivulla kaikkien nappuloiden väri saa olla sama*/

/*etusivun nappula*/					
#tminav {background: #fff none;}
a#tminav {background: #fff none;
          border:1px #6ca33b;
		  border-style: solid solid none solid; 
		  padding: 8px 5px 9px 5px;}
a:hover#tminav {background: #fff url(media/navibio.jpg) 100% -120px no-repeat;
                    padding: 8px 5px 9px 5px;}
a:focus#tminav {background: #fff url(media/navibio.jpg) 100% -120px no-repeat;
                    padding: 8px 5px 9px 5px;}
												


												 	 	 	 	 	 	 																																	 					
#header {
						clear:left; /*navigaation jäljiltä*/
						/*width: 760px;*/
						height: 120px; /* väljä tilä h2-otsikolle korkeus*/
						margin:0;
						padding: 0px;
						text-align:left;
						position:relative; /*muita absoluuttisesti sijoitettuja tulee sisään*/
					    background: #fff;
						}


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

#logo {width:255px; 
			height: 142px;
			position:absolute; /*pitäisi hoitaa se, että pojan kuva saa jatkua tekstin viereen */
			padding:0px;
			top:2px;
			left:0px;
			}
#logo span{ background: url(media/tmiHoksaa_logo.svg) no-repeat; /*oli h1poika.gif*/
						position:absolute;
						width: 100%;
			            height: 100%;
						}

/*toisenlainen logo noidankattila-blogin sivuille*/		

#logo_noidankattila {width:455px; 
			height: 142px;
			position:absolute; 
			padding:0px;
			top:2px;
			left:0px;
			}
#logo_noidankattila span{ background: url(media/niodankattila-ja-teksti.svg) no-repeat; 
						position:absolute;
						width: 100%;
			            height: 100%;
						}		

																							
/*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: none; /*ei pojan kuvaa*/
								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 img.tekstiOhittaaKuvan {
	float:none;
	margin: 0em 1em 0.5em 1em;
    padding:0em 20px 0 20px;
	}


#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*/
					}

#sidebar p {
	padding: 0;
	margin: 2em 0.5em 0.5em 0.5em;
		}

#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;
								margin:0 0 2em 0;
								text-align:center;											
								width:150px;
								overflow:visible; /*hidden jos mainokset eivät niin tärkeitä*/
								}
#linkkilista{
								margin-top: 20px;
								font:1em "Century Gothic", verdana, sans-serif;
								padding:0.5em;
								width:170px;
								border-radius:5px; /*pyöristää kulmat */
								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 1em;
				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/list-marker-kyna.svg) 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 "Century Gothic", verdana, sans-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;
				 border-radius:5px; /*pyöristää kulmat */
				 }

/*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;
			 border-radius:5px; /*pyöristää kulmat */
			 }
						 
				 
div.huomioboksioikealle {
   clear:both;
   margin:1.5em 1em 1em 1em;
   padding:0.5em 1em 1em 1em; 
   width:200px;
   float:right;
   border-radius:5px; /*pyöristää kulmat */
   }
   
div.huomiokuvanrinnalle {
					margin:1em;
				    padding:0.5em 1em 2em 1em; 
				    width:300px;
				    float:left;
				    border-radius:5px; /*pyöristää kulmat */
				      }
					    
div.leveaboksi {clear:both;
				max-width:500px; /*ei veny epämiellyttävän suureksi*/
				margin:auto;
				padding:1em;
				border-radius:5px; /*pyöristää kulmat */ 
				 		 			 
}
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-pallo.svg) top left no-repeat;
	}	
	
/*jokaiselle teemalle omat taustakuvat footeriin*/
/*otsikkovärit, huomioboksien ja linkkilistojen taustavärit sekä huomiotekstinvärit*/
		

#sivu.tmisivu h1,#sivu.tmisivu h2,#sivu.tmisivu h3,#sivu.tmisivu h4,
#sivu.tmisivu h5 {color:#936;}
/*alareunan kuva*/
							 

#sivu.tmi #sisalto{background: url(media/vihrea-palkki-footer.jpg) no-repeat bottom right;}
#sivu.tmi #header{border-top:solid 5px #696}
/*piirtyykö nyt kuvan päälle, kumpi ensin kuva vai viiva z-index??*/
#sivu.tmi  div.huomioboksi, #sivu.tmi  div.huomioboksioikealle, #sivu.tmi #ekahuomio, #sivu.tmi div.huomiokuvanrinnalle {background:#CFDD7F;color:#936;}
#sivu.tmi  div.leveaboksi {background:#CFDD7F;color:#936;}
#sivu.tmi #linkkilista {background:#CFDD7F; color:#936;}
#sivu.tmi #linkkilista h4 {background:#CFDD7F url(media/nuolialasviol.svg) top left no-repeat;}
																																	
#sivu.tmi #linkkilista a:link {color:#936; }
#sivu.tmi #linkkilista a:visited {color:#936;}
#sivu.tmi #linkkilista a:hover {background:transparent;color:#696;}
#sivu.tmi #linkkilista a:focus {
  color:#936;
}
#sivu.tmi #linkkilista a:active {
  color:#936;
}																			
#sivu.tmi #teksti em  {
   color:#936;
}
#sivu.tmi #footer {
  color:#936; 
  border-color:#696;
 }

#sivu.noidankattila #sisalto h4 {
				margin:0em;
				padding:5px 2px 0px 40px;
				background: url(media/lehti.svg) center left no-repeat;					
				}

#sivu.noidankattila #sisalto{background: url(media/vihrea-palkki-footer.jpg) no-repeat bottom right;}
#sivu.noidankattila #header{border-top:solid 5px #696}
/*piirtyykö nyt kuvan päälle, kumpi ensin kuva vai viiva z-index??*/
#sivu.noidankattila  div.huomioboksi, #sivu.tmi  div.huomioboksioikealle, #sivu.tmi #ekahuomio, #sivu.tmi div.huomiokuvanrinnalle {background:#CFDD7F;color:#936;}
#sivu.noidankattila  div.leveaboksi {background:#CFDD7F;color:#936;}
#sivu.noidankattila #linkkilista {background:#CFDD7F; color:#936;}
#sivu.noidankattila #linkkilista h4 {background:#CFDD7F url(media/nuolialasviol.svg) top left no-repeat;}
																																	
#sivu.noidankattila #linkkilista a:link {color:#936; }
#sivu.noidankattila #linkkilista a:visited {color:#936;}
#sivu.noidankattila #linkkilista a:hover {background:transparent;color:#696;}
#sivu.noidankattila #linkkilista a:focus {
  color:#936;
}
#sivu.noidankattila #linkkilista a:active {
  color:#936;
}																			
#sivu.noidankattila #teksti em  {
   color:#936;
}
#sivu.noidankattila #footer {
  color:#936; 
  border-color:#696;
 }

/*
   ----------------------------------------------------------------
   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;	
  }