BODY { margin: 0px; padding: 0px; background-image: url(pics/bg.gif); background-repeat:repeat; background-color: #e4e4e4;  font-family: Arial, Verdana, Helvetica, sans-serif;   font-size: 16px; line-height: 22px; color: #333333;
 }
 
 


#header { background:#74dad0 url("pics/bg_header.gif") top center repeat-x; 
padding: 0px; 
margin: 0px;
width: 100%;
height: 209px;
}
#header_holder { 
margin: 0px auto;
width: 960px;
height: 209px;
overflow: hidden;
}
#header_logo {
float:left;
width: 450px;
height: 209px;
text-align: left;

}

#header_menu {
float:right;
width: 400px;
height: 209px;
padding: 30px 0px 0px 0px; 
margin: 0px;
text-align: left;

}

a { color: #16597f; text-decoration: none;
}
a:hover { color: #16597f; text-decoration: underline;
}

#wrapper { clear:both; width : 960px;   margin: 0px auto;  padding: 0px; overflow:hidden; 
} 

h1 {  font-family: 'Alex Brush', cursive; font-size: 60px; padding: 0px ;  color: #16597f; position:relative; top: 0px; line-height: 0px;
}

h2 {  font-family: 'Alex Brush', cursive; font-size: 50px; padding: 0px ;  color: #16597f; position:relative; top: -5px; line-height: 0px;
}

h3 {  font-family: 'Alex Brush', cursive; font-size: 70px; line-height: 50px; padding: 0px ;  position:relative; top:50px;
}

h4 {  font-size: 14px; line-height: 20px; color: #16597f; text-decoration: none;   display: block; padding:  32px 0px 0px 0px;
}

h5 {  font-size: 20px; font-family:  Arial, Verdana; 
}
.copy { display:block; font-size: 11px; line-height: 110%; color: #666; text-decoration: none; margin-top: 10px; padding:0px; 
}

.bio {  font-family: 'Alex Brush', cursive; font-size: 60px; padding: 0px ;  color: #16597f; float:left; top: 0px; line-height: 0px; width:50%;
}

.col1 {   float:left; width:320px; margin: 0px; padding:  50px 20px 30px 0px; text-align: left;
}
.col2 {  float:left; width:520px; margin: 0px; padding:  50px 0px 30px 30px; text-align: left;
}
.col1b {   float:left; width:450px; margin: 0px; padding:  130px 0px 30px 0px; text-align: left;
}
.col2b {  float:left; width:500px; margin: 0px; padding:  50px 0px 30px 0px; text-align: left;
}
.col1_left {  float:left; width:590px; margin: 0px; padding:  50px 0px 30px 0px; text-align: left;
}
.col2_right {   float:left; width:320px; margin: 0px; padding:  70px 0px 30px 50px; text-align: left;
}

.col3_both {  float:left; width:960px; margin: 0px; padding:  50px 0px 30px 0px; text-align: left;
}


#footer { clear:both; background:#61b5cb url("pics/bg_footer.gif") top center; 
padding: 0px; 
margin: 0px;
width: 100%;
}

#footer_holder { 
margin: 0px auto;
width: 960px;
height: 490px;
overflow: hidden;
}
#footer_top { 
float:left;
background: url("pics/bg_footer_koriste.gif") top left repeat-x; 
width: 960px;
height: 55px;
overflow: hidden;
}
#footer_col1 { 
float:left;
background: url("pics/bg_footer_col.gif") top right repeat-y; 
width: 260px;
padding: 0px 0px 20px 50px ;
font-size: 14px; font-weight: bold; color: #16597f; text-decoration: none; 
}

#footer_col1 a { font-size: 24px; color: #16597f; text-decoration: none; font-weight: normal;
}
#footer_col1 a:hover {  text-decoration: underline;
}


#footer_col2 { 
float:left;
background: url("pics/bg_footer_col.gif") top right repeat-y; 
width: 285px;
height: 100%;
padding: 0px 15px 0px 30px ;
font-size: 18px; line-height: 27px;
}
#footer_col3 { 
float:right;
width: 290px;
padding: 0px 0px 0px 20px ;
font-size: 18px; line-height: 27px;
}

/* ota yhteytta -kaavake */
.button { float:left; margin-top:10px; display:block; border:1px solid #327e93; width:100px; height:30px; padding-left:2px; padding-right:2px; padding-top:0px; padding-bottom:2px; line-height:14px; color: #FFFFFF;  font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 14px; background-color: #56a7bd; margin-top:10px;
-webkit-border-radius: 4px;-khtml-border-radius:4px;-moz-border-radius:4px;   behavior: url(border-radius.htc); border-radius:4px;
}
.button:hover { float:left; margin-top:10px; display:block; border:1px solid #327e93;	 width:100px; height:30px; padding-left:2px; padding-right:2px; padding-top:0px; padding-bottom:2px; line-height:14px; color: #FFFFFF;  font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 14px; background-color: #4ec8bc; margin-top:10px;
-webkit-border-radius: 4px;-khtml-border-radius:4px;-moz-border-radius:4px;   behavior: url(border-radius.htc); border-radius:4px;
}
.textarea{
padding:2px; border:1px solid #999;	-webkit-border-radius: 4px;-khtml-border-radius:4px;-moz-border-radius:4px;  behavior: url(border-radius.htc); border-radius:4px;  height:20px; font-family: Arial, Verdana Helvetica, sans-serif;	font-size: 12px; color: #000; margin-top:10px;
}


/* MENU TWO COLUMN separate the list from surrounding elements */
ol
{
  margin: 0 0 1em 2em;
  padding: 3px 0px 0px 0px ;
  list-style-type:none;
  overflow: hidden;
}

ol li
{
  /* Stipulate the height of each item so that 
  vertical return = items * height */

  line-height: 1.2em;

  /* Clear the default margins & padding 
  so we can style the list from scratch */

  margin: 0;
  padding: 0;
}

/* If li position is left static, Internet 
Explorer disables hyperlinks in the list 
in all but the final column.

This rule will be processed only by 
Internet Explorer because only IE believes 
that there’s a level above HTML: */

* html ol li
{
	position: relative;
}
/* horizontal position of each column */

ol li.column1 { margin-left: 0px; }
ol li.column2 { margin-left: 210px; }

/* Bring the first item of each column 
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 1.2em line-height = 6em */

li.reset
{
  margin-top: -182px;
}
/* anchor styling */
ol li a
{
  display: block;
  height: 38px;
  width: 190px;
  margin: 0px 5px 22px 0px;
  text-decoration: none;
  background:url("pics/bg_menu.gif") bottom left no-repeat;
  font-size: 26px; color: #16597f;
}
ol li a:hover
{ color: #0da7c3; text-decoration: none;
  background:url("pics/bg_menu_hover.gif") bottom left no-repeat;
}


/* youtube video style */

#ytvideo, #ytvideo1,
#ytvideo2, #ytvideo3, #ytvideo4, #ytvideo5, #ytvideo6, #ytvideo7, #ytvideo8, #ytvideo9, #ytvideo10   {
    float: left;
	margin-right:10px;
}


.yt_holder {
    padding: 0px;
    float: left;
    border: 1px solid #e3e3e3;
	margin-bottom:15px;
	    width: 100%;
}
.yt_holder1 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}
.yt_holder2 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}
.yt_holder3 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}

.yt_holder4 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}
.yt_holder5 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}
.yt_holder6 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}

.yt_holder7 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}
.yt_holder8 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}
.yt_holder9 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}
.yt_holder10 {
    padding: 0px;
    float: left;
	margin-bottom:15px;
	    width: 100%;
}

ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 430px;
}

ul li {
    list-style-type: none;
    display:block; 
    float: right;
    width: 410px;
    margin-bottom: 5px;
	padding:3px;

}

ul li img {
    width: 90px;
    float: left;
    margin-right: 5px;
    border: 1px solid #999;
}

ul li a {
    text-decoration: none;
    display: block;
    color: #000;
	font-size: 14px; 
	line-height: 16px; 
}

.currentvideo {
	background: #e9f2f4;
}