@CHARSET "ISO-8859-1";

/* [Table of contents]

1. Global	-- includes all commonly and globally effective stylings
2. Container -- positions the page correctly
3. Header -- Fixed part of the page. 
4. Content layouts -- manages the colums and other layout issues
5. Content -- holds all the 
6. Menu Styling -- CSS powered menu

[Color Codes]
 # Light Blue:		#e6eff7
 # Menu Brown:		#945428
 # Red:       		#dd7766


*/

/**
 * 1. Globals
 */
body {
	font: 78%/1.5 helvetica, verdana, arial, serif;
	background: #648698 url(../images/default/tausta.jpg) no-repeat scroll center top;
	text-align: left;
	padding: 0;
	margin: 0;
	color: #333;
}

p {
	padding: 5px 0 5px 0;
	
}

a:link, a:visited { 
	color: #0000FF; 
	text-decoration: none; 
}

a:hover { 
	color: #333; 
}

h1, h2, h3 {
	font-weight: bold;
}

h1 {
	text-align: left;
}

h2 {
	text-align: center;
	
}
h2.sivellin {
	background:transparent url(../images/default/sivellin.jpg) no-repeat scroll center bottom;
	height:60px;
}

h3 {
	margin: 0;
}


h4 {
	
}

ul {
	list-style: none;
	padding: 0;	
}
div {
	margin: 0;
	padding: 0;
	position:relative;
	display:block;
}

a img {
	border: none;
	margin: 0;
	padding: 0;	
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.clearLeft {
	clear: left;	
}

.clearRight {
	clear: right;	
}
.clearBoth {
	clear: both;	
}

.caps {
	text-transform: capitalize;
}

.bold {
	font-weight: bold;	
}

.huomioteksti {
	color: #008CDE;
	display: block;
}

img.sivellin {
	width: 80%;
	margin: 0 10%; 
}
/**
 * 2. Container
 */
#container { /* contains the page */
	position:relative;
	width: 900px;
	text-align: left;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

/**
 * 3. Header
 */

#ylaPaneeli {
	position: fixed;
	top:0;
	height: 143px;
	z-index: 100;	
}

#navigaatio {
	position:absolute;
	top:104px;
	/*left: 80px;*/
	height: 25px;
	background: transparent;
	z-index: 1998;		
}

ul#kielet {
	position: absolute;
	bottom: 50px;
	right: 4px;
	margin: 4px;
	margin-right: 14px;	
	z-index: 1999;
}

#vaakuna {
	display: none;
	position: absolute;
	bottom: 96px;
	right: 1px;
	margin: 4px;
	margin-right: 14px;	
	z-index: 2000;
}

#fin {display: none;}
#eng {display: block;}
#swe {display: block;}
/**
 * 3. footer
 */
 
#footer {
	position:relative;
	width: 100%;
	height: 30px;
	background: #ccdddd;
	margin:0;
}
#footer p {
	padding: 5px 10px 5px 10px;
	margin: 0;
	color: #006622;
	font-weight: bold;
	text-align: center;
}



/**
 * 4. Content layouts
 */
 

#keskipalsta { 
	position: relative;
	z-index:0;
	padding: 4px 14px;
}
#vasenpalsta {
	position:relative;
	display: none;
	z-index:5;
	padding: 4px 0px 4px 14px;
}

#oikeapalsta {
	position:relative;
	display: none;
	z-index:5;
	padding: 4px 14px 4px 0px;
	font-weight: bold;
}

#oikeapalsta h3 {
	padding-top: 5px;
	height: 50px;
	text-align: center;
	background: transparent url(../images/default/paletti190x50.jpg) center top no-repeat;	
}

/* SIVUPALKKI VASEMMALLA*/
div#sivupalkkiVasemmalla #vasenpalsta {
	position: relative;
	display: block;
	float:left;
	width: 200px;
}

div#sivupalkkiVasemmalla #oikeapalsta {
	
}

div#sivupalkkiVasemmalla #keskipalsta {
	position: relative;
	width:644px;
	margin-left: 200px;
}

/* SIVUPALKKI OIKEALLA*/
div#sivupalkkiOikealla #vasenpalsta {
	
}

div#sivupalkkiOikealla #oikeapalsta {
	position: relative;
	display: block;
	float:right;
	width: 200px;
}

div#sivupalkkiOikealla #keskipalsta {
	position: relative;
	width: 644px;
	margin-right: 200px;
}

/* KUMMATKIN SIVUPALKKIT*/
div#sivupalkit #vasenpalsta {
	position: relative;
	display: block;
	float:left;
	width: 200px;
}

div#sivupalkit #oikeapalsta {
	position: relative;
	display: block;
	float:right;
	width: 200px;
}

div#sivupalkit #keskipalsta {
	margin: 0 200px;
}

/**
 * 5. Content
 */

div.content {
	position:relative;
	margin: 143px 0 0 0;
	padding: 2px;
	top:0;
	background: #FFFFFF;
}


#content a {
	color: #7C6240;

}

#content a:hover {
	text-decoration: none;

}
/* mikä tämä on??
ul.kuvagalleria li {
	position:relative;
	float:left;
	list-style: none;
	cursor:pointer;
}
*/
/* Ajankohtaista */

img.vantaanenergia {
	margin-top:  30px;	
}
img.etusivu {
	float: left;
	margin: 26px 20px 2px 2px;	
}
img.etusivuOikea {
	float: right;
	margin: 26px 2px 2px 20px;	
}
/* Ajankohtaista - Ajankohtaisia-asioita */

h3.opetuspiste {
	display: inline;
	margin-top: 12px;	
}

ul.ajankohtaisia-asioita {
}

ul.ajankohtaisia-asioita h4 {
	margin: 2px 2px 4px 2px;	
}
ul.ajankohtaisia-asioita p {
	margin: 2px 2px 4px 0;
	padding: 0;	
}
span.osoite {
	font-size: 0.9em;	
}

ul.ajankohtaisia-asioita  li{
	float: left;
	width:300px;
	margin: 0 4px 4px 0;	
}

/* Tyopajat */

#valittu {
	background: url(../images/default/osoitin.gif) center left no-repeat;
}

div#tyopajavalikkotausta {
	background: transparent url(../images/default/opetustoimintatausta.jpg) top left no-repeat;
}

.tyopajaotsikko1, .tyopajaotsikko2, .tyopajaotsikko3, .tyopajaotsikko4, .tyopajaotsikko5 {
	margin: 0 0 0 0;
	padding-left: 8px;
	font-size: 14px;
	text-align: left;
}
h1.tyopajaotsikko {
	margin-top: 18px;
	font-size: 20px;
}

h2.tyopajaotsikko1 {
	margin-top: 18px;
	margin-bottom: 10px;
	font-size: 20px;
}

h2.tyopajaotsikko2 {
	font-size: 12px;
}
h2.tyopajaotsikko3 {
	margin-top: 10px;
}
h2.tyopajaotsikko4 {
	font-size: 12px;
}
h2.tyopajaotsikko5 {
	margin-top:20px;
}

h2.tyopajaotsikko1 a:link, h2.tyopajaotsikko1 a:visited {
	color: #37545A;
	margin-top:18px;
	font-size:18px
}

h2.tyopajaotsikko2 a:link, h2.tyopajaotsikko2 a:visited {
	color: #37545A;
}

h2.tyopajaotsikko3 a:link, h2.tyopajaotsikko3 a:visited {
	color: #37545A;
}

h2.tyopajaotsikko4 a:link, h2.tyopajaotsikko4 a:visited {
	color: #74381C;
}

h2.tyopajaotsikko5 a:link, h2.tyopajaotsikko5 a:visited {
	color:#739B6A;
}


h2.tyopajaotsikko1 a:hover, h2.tyopajaotsikko2 a:hover , h2.tyopajaotsikko3 a:hover , h2.tyopajaotsikko4 a:hover ,h2.tyopajaotsikko5 a:hover  {
	text-decoration: underline;
}
/*
ul#tyopajalista {
	margin-top: 0px;
}

ul#tyopajalista a, ul#tyopajalista a:hover {
	color: #74381C;
	text-decoration: none;
	font-weight: bold;
}
ul#tyopajalista a:hover {
	text-decoration: underline;
}
*/
.tyopaja {
	display: none;
}
div.valittu {
	display: block;
}

  


/* Galleria */

ul.kuvagalleria li {
	float:left;
	width: 370px;
	height: 130px;
	margin: 0 0 10px 20px; 
	padding: 2px 1px 2px 6px;
	
}
	
ul.perusopetusgalleria li {
	/* background: transparent url(../images/default/tyotuubi.jpg) no-repeat bottom right; */
	
}
ul.tyopajagalleria li {
	/* background: transparent url(../images/perustuubi.jpg) no-repeat bottom right; */

}

ul.kuvagalleria li h2 {
	
	margin: 0px 2px 0px 2px;
}
ul.kuvagalleria li img {
	/*
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;	
	*/
	margin: 0px 2px 10px 2px;
}

/* Yhteystiedot */
#toimisto-vasen, #toimisto-keski, #toimisto-oikea {
	float:left;
	margin: 0 0 0 10%;
}

#opasteet {
	float: left;
	background: #CCDDDD;
	border: 1px solid #006622;
	width: 515px;
	margin: 25px 0px 0;
	padding-left: 5px;
	
}
 
#opetuspisteet {
	/* width: 350px; */
	padding-left: 50px;
	text-align: left;
	
}

#toimisto {
	float:left;	
	margin-left: 10px;
	margin-right: 10px;
}

#opetuspisteet {
	float:left;
	margin-right: 10px;
	
}

#opettajat {
	width: 820px;
	margin: 0 ;
	text-align: left;
}
li.opekuva {
	float:left;
	margin-right: 2px;
}

#opettajat ul li ul {
	width: 180px;
	height: 85px;
	padding: 2px;
	margin: 4px;
}
li.sarakevaihto {
	float: left;	
}

/**
 * 6.Menu style
 */

#nav, #nav ul {
	float: left;
	/* width: 36em; */
	/* width: 900px;*/
	list-style: none;
	font: 78%/1.5 georgia, helvetica, verdana, arial;
	font-size: 14px;
	line-height: 1;
	font-weight: bold;
	padding: 0 0 0 0px;
	border: solid #648698; /* alavalikon reunus */
	border-width: 1px 0;
	margin: 0 0 1em 0;
}
#nav {
	border: 0;
	padding: 0 0 0 150px;
}

#nav ul {
	background: #BBCCCC;	/* alavalikon tausta */
	/* läpinäkyvyys */
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	/* /läpinäkyvyys */
	border-bottom: none;
	border-right: none;
}

#nav a {
	display: block;
	/*
	width: 10em;
	w\idth: 6em;
	*/
	color: #e6eff7;
	text-decoration: none;
	padding: 0px 50px 5px 8px;
}

#nav a.daddy {
	background: url(../images/default/rightarrow.gif) center right no-repeat;
}

#nav li {
	float: left;
	padding: 0;
	/*width: 10em;*/
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 8.4em; /* was 14.4em*/
	w\idth: 7.4em; /* was 13.9em*/
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
}

#nav li li {
	padding-right: 1em;
	width: 13em
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
	color: #000; /* alapalkin fontti */
	font-weight: bold;
	padding: 5px;
	/* läpinäkyvyys pois tekstistä 
	filter:alpha(opacity=99);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.99;
	/* /läpinäkyvyys pois tekstistä*/
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background: url(../images/default/osoitin.gif) center left no-repeat;
}
/**
 * end of css
 */