/*
Punainen tekstiä ja linkkejä varten # ce352b (R206 B53 B43)
Tausta vihreä ja teema tekstit # 67e355 (R183 G227 B85)
b7e355 on taustan väri ja 34bf00 oli tarkoitettu niihin teema teksteihin etusivulle.
*/

/* The Holly Hack
Korjaa IE6-7:n peek-a-boo virheen
http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0
 */
/* Hides from IE5-mac \*/
* html .uskallan {height: 1%; }
* html h2, h3 {height: 1%;}
* html .kainalo p{height: 1%;}
/* End hide from IE5-mac */ 

/* peekaboo bug fix for IE7 */
* html .uskallan {min-width: 0;}

/*
Snazzy Borders
http://www.cssplay.co.uk/boxes/snazzy.html

Based on Nifty Corners By Alessandro Fulciniti
/>http://pro.html.it/esempio/nifty/
*/

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#FFF; border-left:1px solid #ce352b; border-right:1px solid #ce352b;}
.xb1 {margin:0 5px; background: #ce352b;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#FFF; border:0 solid #ce352b; border-width:0 1px;}


/*
Kelluvat elementit laatikon sisään:
	http://www.tjkdesign.com/articles/boxmodel.asp */
.clear {clear:both;height:0;line-height:0 }


html { font-size: 100%; /* IE hack */ }

body {
   margin:0;
   padding:0;
   background-color: #b7e355;
   font-family: Verdana, Helvetica, Arial, sans-serif;
   font-size: 0.75em;
}

/* Kuviin ei reunoja */
img {
   border-style: none;
}

/* Tekstikorostukset */
.korostus {
   color: #34bf00; /* Vihreä */
/*   color: #67e355; */
}

.strong {
   font-weight: bold;
}

/* Leiskat */

.leiska {
   width: 100%;
   margin-bottom: 0em;
   padding: 0;
   background-color: #FFFFFF;
   background-repeat: no-repeat;

}

.teema .leiska {
   border-style: solid;
   border-color: #777;
   border-width: 0.1em;

   color: #ce352b;

   padding-bottom: 16px; /* Suojaa taustakuvaa */
   background-position: 95% 97%; 
}

.leiska p {
   color: black;
   margin: 1em;
   margin-right: 0.5em;
   line-height: 140%;
   background-color: #FFF; /* Peitää taustakuvan*/
}

h1, h2, h3, h4 {
   font-weight: normal; 
   color: #ce352b; /* punainen */
}

h1 {
   font-size: 2.75em;
}


h2.uskallan {
   font-size: 1.25em; /* 15 pt */
   margin: 0;
}


.banneri {
   width: 100%;
   background-color: #c4e6ec;
   background-image: url("./topbar2.gif"); 
   background-repeat: no-repeat;
   background-position: bottom right; 
   height: 100px;
   margin: 0;
   margin-top: 28px;
   margin-bottom: 2em;
   position: relative;
   bottom: 1px;
}

.jatko .banneri {
   height: 60px;
   background-image: url("./topbar.gif"); 
}

.banneri h1, .banneri h2 {
   margin-left: 0.25em;
   margin-bottom: 0;
   position: absolute;
   bottom: -0.375ex;
}

.laatikko {
   margin: 0.75em;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0;
}

.kainalo {
   margin: 1em;
   padding: 0em;
}

.kainalo ul {
   color: #34bf00;
/*   color: #67e355; */
   margin-top: 1.5em;
   margin-bottom: 1.5em;
   font-size: 1.167em; /* 14 pt */
}

.kainalo h2, h3 {
   margin: 0;
}

.kainalo img.kuvitus {
   width: 35%;
   float: left;
   margin-bottom: 0;
   margin-top: 1.5em;
}

.kainalo_oikea {
   width: 64%;
   float: left;
}

.kolumnit {
   font-size: 0.9em;
}

.vasen-sarake {
   float: left;
   width: 75%;
   max-width: 97%
}

.vakio .vasen-sarake {
   padding: 1em;
}
.teema .vasen-sarake {
   width: 65%;
}

.oikea-sarake {
   max-width: 97%
}

.teema .oikea-sarake {
/* Taustakuva näkyviin */
/*   margin-bottom: 100px; - ei toimi, liian iso! - bugi IE6:ssa */
}




/* Listat */

dl {
   margin: 2em;
}

dd {
   margin-top: 0.5em;
   margin-bottom: 1.5em;
}

dt {
   color: #ce352b;
   font-weight: bold;
}

/* Ei toimi IE6:ssa
#aakkoset 
dt:first-letter {
   font-size: 200%;
}
*/

blockquote {
   margin-top: 3em;
}


/* Navigointi */
#nav {
  margin: 0.5em;
  text-align: justify;
  text-justify: distribute-all-lines;
  font-size: 1.5em;
  color: #b7e355;
}

#teemalinkit {
   width: 96%;
   margin-top: 1em;
   margin-left: auto; 
   margin-right: auto;
}

#teemalinkit ul { list-style-type: none; } 
#teemalinkit ul li { display: inline; }
#teemalinkit h3 { display: none; }

#teemalinkit a img {
/* Peek-a-Boo iskee, jos tämän paljastaa!
   filter:alpha(opacity=50);
tai tämän:
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
*/
   filter:alpha(opacity=50);
   opacity: 0.5;
}

#teemalinkit a:hover img {
/*   height: 55px; */
   filter: alpha(opacity=100); 
   opacity: 1;
}

/* punainen
#teemalinkit a:link {color: #ce352b;}
#teemalinkit a:visited {color: #ce352b;}
*/

/* PostIt */
.postit-holder-left {
   float: left;
   width: 17em;
   height: 225px;
   position: relative; 
/*  background-color: #FBF;  testi */

}

.postit-left {
   position: absolute; 
   right: -1em;
   width: 169px; /* 219px - 2 x 25px */
   height: 180px; /* 225px - 18px - 27px*/
   padding: 25px;
   padding-top: 27px;
   padding-bottom: 18px;
   margin: 0;
   margin-bottom: 200px;
   font-size: 15px;
   background-image: url("./kuvat/post_it_transparent.gif"); 
   background-repeat: no-repeat;
   background-position: top left;
}

.postit-left p {
   background-color: transparent;
   margin: 0;
   color:  #ce352b;
}


/* Piilotetut asiat */
hr { display: none; }

/* http://www.webaim.org/techniques/css/invisiblecontent/ */
.hidden 
{ 
position:absolute; 
left:0px; 
top:-500px; 
width:1px; 
height:1px; 
overflow:hidden; 
} 


/* Linkit */

a {text-decoration: none; }
a:link {color: #ce352b; text-decoration: none;} /* punainen */
a:visited {color: #ce352b; text-decoration: none;} /* punainen */
a:hover {color: #6699cc; text-decoration: underline;}

p a:link {color: green;}
p a:visited {color: green;}

ul a:link {color: green;}
ul a:visited {color: green;}



/* Sivun alatekstit */
.bottom {
   clear: both;
}

/* Tekijänoikeusmerkintä */
p.copy {
   text-align: right;
   font-size: small;
   margin-top: 3em;
}

/* validator.w3.org */
.tag {
   float: left;
   margin-top: 2em;
   margin-right: 10px;
   visibility: hidden;
}

#keskitys {
/*   width: 75em; */
   margin-left: auto; 
   margin-right: auto;
   margin-top: 2em;
   max-width: 75em;
   padding: 0.5em;	
}

#keskitys {
/* IE6 hack: http://www.svendtofte.com/code/max_width_in_ie/ */
   width: expression(document.body.clientWidth > 900 ? "75em" : "auto" );
}