﻿html {
	height: 100%; 
	margin-bottom: 1px;}
	
body {
	background: #ffffff url("images/background.jpg") repeat;
	color: #000000;
	font: normal 76% Verdana, Verdana, Geneva, sans-serif;
	margin: 0;
	padding: 0;	
	text-align: center;}
hr {
	background-color: #800000;
	color: #800000;
	border: none;
	height: 1px;
	width: 100%;}
	
.headertyyli {
	height:270px;
	width:900px;
	}
#header { /* Voi määrittää myös toisen divin alkamiskohtaa tällä */
	position: relative;
	width: 900px;
	height: 270px;
	z-index: 2;  /*Taustan yläpuolella */
	}
	
#ami{
	width: 100%;
	position: absolute;
	z-index: 2;
	left: 0px;
	background-repeat: no-repeat;
}
#amivas {
	background-repeat: no-repeat;
	width: 260px;
	height: 262px;
	position: absolute;
	top: 0px;
	float: left;
	left: 0px;
	background-image: url("images/amivas.png");
}
#amioik {
	background-repeat: no-repeat;
	width: 260px;
	height: 262px;
	position: absolute;
	top: 0px;
	float: right;
	right: 0px;
	background-image: url("images/amioik.png");
}
img {
	border: none;}
ul {
	padding: 0;
	margin: 0 0 20px 20px;
	list-style: square;}
/*  Sivun peruslinkit ja alalinkit footerissa  */

a {
	color: #df5e20; /*  Alkuperäinen oli bf0000  */
	text-decoration: underline;
	font-weight: bold;}

a:hover {
	color: #5588ee; /*  Alkuperäinen oli 80d23c  */
	text-decoration: underline;
	font-weight: bold;}
	
a:active {
	color: #ffffff;
	text-decoration: underline;
	font-weight: bold;}

h1 {
	color: #5588ee;
	font: bold 22px Arial, Helvetica, sans-serif;
	margin-bottom: 0;
	padding-bottom: 0;}

h2{
	color: #5588ee; /*  Alkuperäinen 800000 uudempi puna on b03100 ja vihree 508200  */
	font: normal 20px Tahoma, Geneva, sans-serif;
	text-align: left;}

h3{
	color: #b03100;
	font: normal 20px Tahoma, Geneva, sans-serif;
	text-align: left;}

h4 {
	border-bottom: 1px dashed #959595;
	color: #959595;
	font: bold 14px Arial, Helvetica, sans-serif;
	text-align: left;}

h5 {
	color: #959595;
	font: bold 16px Arial, Helvetica, sans-serif;
	text-align: left;}

h6 {
	border-bottom: 1px dashed #800000;
	color: #5588ee;
	font: bold 14px Arial, Helvetica, sans-serif;
	margin-bottom: 0;
	padding-bottom: 0;}
	

.center {
	text-align: center;}	

.clear {
	clear: both;}

#wrapper {
	background-image: url("images/wrapper.jpg");
	width: 900px;
	text-align: left;
	margin: 0 auto;
	box-shadow: 0px 0px 30px #323232;}

#global {
	position: absolute;
	left: 0;
	top: 10px;
	z-index: 1;
	width: 890px;
	text-align: right;
	padding-right: 10px;
	color: #656565;
	height: 30px;
	font-size: 85%;
	}
	
.aktiivinen { /* aktiivinen sivu navigointipalkissa ylhäällä */
	background-image: url("images/kapeahover2.png");
	text-decoration: none;
	font-weight: bold;
	background-repeat:repeat-x;
	}
	
#topnav {
	position: absolute;
	left: 60px;
	top: 209px; /*  navigointi tekstien sijainti vertikaalissa  */
	width: 780px; /*  orig 780 */
	text-align: center;
	color: #c6cbc4;
	height: 30px;
	font-size: 100%; /*  Tästä säädetään navigointilinkkien tekstikoko prosenteissa  */
	word-spacing:-5px;
	letter-spacing: 1.5px;
	z-index:3;
	} /*  sanaleveys  */

#topnav a { /*  Tämä on kokoajan näkyvä navigointiosion teksti  */
	position: relative; /*  Ratkaisee ongelman, jossa Internet Explorerilla näkyy vain pieni padding alue linkin päällä */
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	padding-top: 12px; /*  TÄMÄ TÄRKEÄ JOTTA SAA HIIREN OSOITTIMEN ALUETTA ISOMMAKSI LINKIN PÄÄLLÄ  */
	padding-bottom: 14px; /*  TÄMÄ TÄRKEÄ JOTTA SAA HIIREN OSOITTIMEN ALUETTA ISOMMAKSI LINKIN PÄÄLLÄ  */
	padding-right: 10px;
	padding-left: 10px;
	}
#topnav a:hover { /*  Tämä on koskettaessa näkyvä  navigointiosion teksti  */
	color: #ffffff; /*  Oranssi on feaa19 ja ffc86a keltanen on fdff6d ja fde03f, ffe8aa  beige e2c392*/
	text-decoration: none;
	font-weight: bold;
	background-image: url("images/kapeahover.png");
	background-repeat:repeat-x;
	/*border-bottom: 1px ridge #d1c02e;   Perusnavigoinnin hover-efekti. Ridge, Groove, double tms kehykseen. */
	}
	
/*topnav a:active { 
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	border-top: 0px solid #333333;
	border-bottom: 0px solid #333333;
	border-right: 0px solid #333333;
	border-left: 0px solid #333333;
	background-image: url("images/kapeahover2.jpg");
	*/
	
#sidebar {
	font-size: 90%;
	float: left;
	width: 200px;
	padding: 0 10px 0 37px;}

#mainnav {
	line-height: 1.5em;
	letter-spacing: 1px;
	font-size: 120%;}

#content {
	float: right;
	width: 540px;
	line-height: 1.5em;
	padding: 0 60px 0 20px;}

#footer {
	background: url("images/footer.jpg") repeat;
	clear: both;
	padding: 20px 0;
	text-align: center;
	letter-spacing: 2px;
	line-height: 1.7em;
	font-size: 80%;
	height: 120px;
	box-shadow: 0px -2px 0px #cecece;
	}

#footer a {
	font-weight: normal;}
	
#footer a:hover {
	font-weight: normal;}

#footer p {
	margin: 0;
	padding: 10px 0 0 0;}

fieldset {
	border: 1px dashed #c2c2c2;
	padding: 5px;
	margin: 5px 0;}

legend {
	background-color: #ffffff;
	color: #656565;
	font: bold 16px Arial, Helvetica, sans-serif;
	padding: 2px 4px;
	margin: 0;}

form {
	padding: 5px;
	text-align: left;
	margin: 20px 0 5px 0;}

label {
	width: 150px; 
	float: left; 
	text-align: right; 
	margin: 3px 5px 5px 5px; 
	clear: both;}

input {
	margin: 3px 5px 5px 5px; 
	background-color: #fff; 
	color: #000; 
	border: 1px solid #c2c2c2;}

textarea {
	font: normal 12px Verdana, sans-serif;
	margin: 3px 5px 5px 5px; 
	background-color: #fff; 
	color: #000; 
	border: 1px solid #c2c2c2;}

.button {
	text-align: center; 
	margin: 5px 0 0 170px; 
	border: none;
	clear: both;}

table {
	padding: 0px;
	border-collapse: collapse;
	font-size: 100%;
	width: 100%;}

.catalog {
	padding: 10px;
	line-height: 1em;
	text-align: center;
	vertical-align: top;
	width: 50%;}

.image-border {
	border: 3px double #c2c2c2;}
	
.imageleft-noborder {
	margin: 0 10px 0 0; 
	float: left;}

.imageright-noborder {
	margin: 0 0 0 10px; 
	float: right;}
	
.imageleft-border {
	margin: 0 10px 0 0; 
	float: left;
	border: 3px double #c2c2c2;}

.imageright-border {
	margin: 0 0 0 10px; 
	float: right;
	border: 3px double #c2c2c2;}
.kokouslista {
	background: #E4E7E6 url("images/helmi.png") repeat;
	overflow: auto;
	width: 400px;
	height: 500px;
	padding: 5px;
	border-style: outset;
	border-width: thin;
}
.harmaatausta {
	background-color: #DBDBDB;
	padding: 2px;
}
#kuvasarja {
	width:265px;
	height:200px;
	background-image: url("images/kuva1.jpg");
	float: left;
	margin-top:3px;
	margin-right:11px;
	}
	
#etusivunkuva{
	float: left;
	margin-right:2px;
	margin-left:4px;
	margin-bottom:10px;
	height:245px;
	width:182px;
}
.etusivunteksti2{
	float:left;
}		
.validi {
	height:25px;
	width:70px;
}
.hoveresi { /*  Esilataus, koot nollassa  */
	height:0px;
	width:0px;
}
P.kokous {
}
P.kokous:first-line {
	font-weight : bold;
	color:#255d30;
}
P.kokous:first-letter {
	font-weight : bold;
	font-size:larger;
}
#day {
	position: absolute;
	left: 60px;
	top: 248px; /*  navigointi tekstien sijainti vertikaalissa  */
	z-index: 4;
	width: 780px; /*  orig 780 */
	text-align: right;
	color: #597a60;
	height: 30px;
	letter-spacing:2px;
	font-size: 80%;} /*  Tästä säädetään navigointilinkkien tekstikoko prosenteissa  */
#validointi {
	text-align: center;
	}
#validointi a {
	text-decoration: none;
	letter-spacing: 1.1px;
	font-size: 90%;
	line-height: 1.7em;
	padding-bottom: 2px;
}
#validointi a:hover {
	color:red /* Tekstin taustaväri kun hiiri koskettaa linkkiä */
}
#validointi a:active {
	color: #fd6d6d; /* Tekstin taustaväri kun kun painaa linkkiä */
	text-decoration: none;
	/*background-color: #cad2d7; Tämä on taustaväri kun koskettaa linkkiä*/
}
.ajankohtaista {
	color: #D23E2D;
	font: bold 16px Arial, Helvetica, sans-serif;
	text-align: left
}
.huomio {
	border: 2px solid #5c6e85;
	background-color: #718eb1;
	padding: 6px;
	background-image: none;
	color: #FFFFFF;
	font-size: small;
	font-weight: bold;
}
.huomio2 {
	border: 2px solid #FFB395;
	background-color: #FFD5C6;
	padding: 6px;
	background-image: none;
}
img.a {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	height:270px;
	width:900px;
        }
img.b {
	position: absolute;
	left: 0;
	top: 0;
	height:270px;
	width:900px;
	}
.style1{
	text-align: left;
}
.ylhaalletilaa {
	padding-top: 50px;
}
#counter {
	text-align: left;
	width:60px;
}
#mediaspace { 
	box-shadow: 0px 0px 30px #323232;
}