/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */

html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#A0C4AC;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}

h1.header { 
font: 40pt Arial, georgia,serif; 
letter-spacing: 0.1cm;
font-weight: bold;
color: #309464;
margin-left:1.5em;
margin-top:0.2em;
}

h2.header { 
font: 20pt Arial, georgia,serif; 
font-weight: bold;
color: #309464;
margin-left:3.0em;
margin-top:-0.5em;
}

h1 { 
font: 20pt Arial, georgia,serif; 
letter-spacing: 0.1cm;
font-weight: bold;
color: #309464;
margin-left:2.9em;
margin-top:1.0em;
}

h2 { 
font: 20pt Arial, georgia,serif; 
font-weight: bold;
color: #309464;
margin-left:3.5em;
margin-top:-0.5em;
}

h3 {
font:1.25em Arial, georgia,serif; 
font-weight: bold;
margin:1.25em 0 0.5em 1em;
color: #8d8d8b;
}

.bullet {
font:1.25em Arial, georgia,serif; 
font-weight: bold;
margin:1.3em 0 0.5em 1.6em;
color: #8d8d8b;
}

p { 
line-height:1.5; 
margin:0 0 1em 5em;
width: 590px;
}

*html #float1 {
float: right;
right: 37px;
margin-top: 49px;
z-index: 400;
position: absolute;
}

#float1 {
float: right;
right: 370px;
margin-top: 47px;
z-index: 400;
position: absolute;
}

.ImageFloatES {
float: right;
right: 5px;
margin-top: -5px;
margin-bottom: 30px;
position: relative;
background:url(images/jakkara.jpg) no-repeat;
}

.ImageFloat {
margin-left: 170px;
margin-bottom: 15px;
}

.LinkkiFloat {
float: right;
margin-right: 70px;
margin-top: -680px;
}

*html .LinkkiFloat {
float: right;
margin-right: 20px;
margin-top: -750px;


}

div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:770px;
background:url(images/content_bg.gif) repeat-y;
background-color: #dfeedb;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}

div#header {
padding:2em;
background: url(images/ylaosa.gif);
height: 43px;
margin-right: 8px;

margin-left: 0px;
}

div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}

div#content {
padding:1em 1em 2em 1em; /* bottom padding for footer */
width: 690px;
height:auto !important; /* real browsers */
height:80%; /* IE6: treaded as min-height*/
min-height:84%; /* real browsers */
}

div#content p {
text-align:justify;
padding:0 1em;
}

div#TextArea {
border-style: solid;
border-color: #a2c5ae;
border-width: 5px;
}

div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:url(images/footer.gif);
margin-left: 0px;
z-index: 500;
}

div#footer p {
padding:28px;
margin:1px;
}
	
#headers {
float:left;
width:100%;
font-size:93%;
line-height:normal;
}

#headers ul {
margin:-2px;
padding:-6px 10px 0 0;
list-style:none;
}

#headers li {
float:left;
background:url("images/vasen.gif") no-repeat left top;
margin:0;
padding: 2px 0 0 9px;
}

#headers a {
float:left;
display:block;
background:url("images/oikea.gif") no-repeat right top;
padding:4px 15px 2px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#headers a {float:none;}
/* End IE5-Mac hack */
#headers a:hover {
  color:#333;
  }
#headers #current {
  background-image:url("images/vasen_on.gif");

  }
#headers #current a {
  background-image:url("images/oikea_on.gif");
  color:#333;

  }

.TextArea{
width: 744px;
height: 100%;

}

.TextFloat{
width: 752px;
height: 100%;
background-color:#dfeedb;
margin: -12px -4px 0px -4px;
}

.left {
  background-image:url("images/tausta_vasen.gif") repeat-y;
}

.right {
  background-image:url("images/tausta_oikea.gif") repeat-y;
}

ul {
margin-left: 4em;
list-style-image: url("images/bullet.gif") 
}
*html ul {
margin-left: 7em;
list-style-image: url("images/bullet.gif") 
}

.italics {
font-style: italic; 
font-weight: bold;
}