body {
margin-top: 0;
margin-left: 0; 
margin-bottom: 0;   
width: 100%;
height: 100%;
background-color:#001420;
background-image: url(bg.gif);
background-repeat:repeat;
}


#frontpgbg {
margin-top: 0;
margin-left: 0; 
margin-bottom: 0;   
width: 100%;
height: 100%;
background-color:#001420;
background-image: url(bg.gif);
background-repeat:repeat;
}

.page {
margin-left: 3.2%;
margin-top: 20px;
margin-right: 3%;
margin-bottom: 0px;
background-color:#ffcb38;
width: 94%;
height: auto;
}

.header {
margin-top: 20px;
margin-left: 0px;
width:100%;
height: 120px;
}

.frontpic {
width: 100%;
height: 760px;
}

.frontpic a:visited {
border:none;
color: #000000;
}


span.enter {
text-align:center;
vertical-align:middle;
text-decoration:none;
}


.title {
height: 97px;
background-image:url(header.png);
background-repeat:no-repeat;
position: absolute;
top: 13px;
left: 2%;
width: 94%;
margin-top: 0px;
margin-left: 0px;
z-index: 5;
}

.gradient {
height: 97px;
background-image:url(headerr.png);
background-repeat:no-repeat;
position: absolute;
top: 14px;
right: 2.1%;
width: 51px;
margin-top: 0px;
margin-right: 0px;
z-index: 6;
}

span.sitetitle  {
position: absolute;
left: -9999px;
}


.navbg {
background-image:url(navbg.jpg);
background-repeat: repeat-x;
position: absolute;
top:20px;
left: 0px;
height: 768px;
width: 20%;
margin-left: 3.2%;
z-index: 1;
}

.navbar {
position: absolute;
top: 160px;
left: 5px;
width: 23%;
height: 260px;
margin-left: 0;
z-index: 5;
}

#navi {
list-style: none;
float:none;
margin-left: 14%;
width: 96%;
}

html>body #navi {
float:right;
list-style: none;
margin-right: 12px;
width: 80%;
float:right;
}

#navi ul {
height: 220px;
list-style: none;
padding: 0px;
}


#navi li {
white-space: nowrap;
}



#navi a, #navi a span {
height: 31px;
display: block;
text-decoration:none;
color:#ffffff;
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.90em;
font-weight: light;
line-height: 2.2em;
}

#navi a {
background: url(buttons.jpg) left top no-repeat;
text-decoration: none;
padding-left: 10px;
}

#navi a span
{
background: url(buttonsr.jpg) right top no-repeat;
padding-right: 10px;
}


#navi a:hover span, #navi a:active span
{
background: url(buttonsrhover.jpg) right top no-repeat;
color: #ffffff;
padding-right: 10px;
}

#navi a:hover, #navi a:active
{
background: url(buttonshover.jpg) left top no-repeat;
color: #ffffff;
padding-left: 10px;
}



.centercontent {
clear: both;
position: relative;
left: 21.2%;
top: -50px;
text-align: left;
width: 60%;
height: 100%;
background-color: #fff;
padding-top: 70px;
padding-left: 80px;
padding-bottom: 150px;
padding-right:40px;
}

.footer {
position: relative;
top: 0px;
left:21%;
width: 60%;
height:auto;
padding: 10px;
margin-right: 2%;
background-color:#ffcb38;
}


#boxbl, #boxbr {
  position: absolute;
  width: 19px;
  height: 19px;  
  display: block;
  margin-bottom: -1px;  /* IE */
}

#boxbl  {
  background: url(lounas.gif) no-repeat;
  bottom: 1px;
  left: -1px;
}

#boxbr  {
  background: url(kaakko.gif) no-repeat;
  right: -1px;
  bottom: 1px;
}

.centercontent p,
.centercontent ul,
.centercontent ol {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.4em;
margin-right: 30px;
}

.ohjelma {
line-height: 1.2em;
list-style: none;
}

.lista {
list-style: none;
line-height: 1.2em;
}

.ohjelma span {
position: relative;
left: 85px;
padding-top: 6px;
}

.ohjelma li {
padding-top: 6px;
padding-bottom: 6px;
padding-right: 40px;
margin-left: -40px;
}

.centercontent h1 {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: normal;
text-decoration: none;
}

.centercontent h1 {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
color: #ff9000;
padding-bottom: 10px;
}

.centercontent h2,
.centercontent h3{
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
position: relative;
color: #8c8c8c;
padding-top: 10px;
padding-bottom: 10px;
}

 .centercontent h2{
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 1.0em;
font-weight: bold;
text-decoration: none;
clear: both;
}

.centercontent h3{
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
clear: both;
}

 .centercontent a:link {
 color: #087cc3;
 }
 
 .centercontent a:hover,
 .centercontent a:visited {
 color: maroon;
 }
 

#lomake span {
margin-left: 20px;
}

hr {
color: #8c8c8c;
border: dashed 1px;
width: 90%;
margin-top: 40px;
margin-bottom: 30px;
clear: both;
}


#ryhmat p {
text-align:left;
line-height: 1.6em;
margin-top: 4px;
margin-bottom: 4px;
}

#ryhmat {
height: 200px;
}

#menuleft {
height:auto;
width:50%;
margin-left:0px;
float:left;
margin-bottom: 20px;
}

#menuright {
height:auto;
width:50%;
margin-left:0px;
margin-bottom: 20px;
float: right;
}

.tyonavileft {
list-style: none;
display: block;
}

.tyonaviright {
list-style: none;
display: block;
}