body {
        background-image: url(../images/body_bg.png);
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Trebuchet, Verdana, Sans-Serif;
/*	font-size: 14px; */
	font-size: 13px;
}

h1, h2, h3, h4, h5, h6 {
clear: both;
}

pre {
	padding: 0.2em 0.5em 0.5em 0.5em;
	display: block;
	width: 80%;
	margin: 1em auto;
	border: 2px dotted #A22;
}

pre.titled {
	margin-top: -1em;
	padding-top: 1.2em;
	}

span.pretitle, h5.pretitle {
	background-color: #411;
	background-image: none;
	width: 18em;
	padding: 0 0.6em;
	margin: 0 0 0 13%;
	border: 4px solid #A22;
	position: relative;
	display:block;
	color: white;
	}



form {
	width: 80%;
	margin: 1em auto;
	}


#header, #footer, #contentbody {
	position: relative;
	width:760px;
	margin: 0 auto;
}

#header {
	padding-top: 10px;
}

#footer {
	padding-top: 1em;
	padding-bottom: 0.8em;
	}

#contentbody {
	background-color: transparent;
	}

#contenttop, #contentbefore, #contentafter {
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	width: 760px;
	height: 36px;
	background-image: url(../images/content_before.png);
	background-position: top center;
	background-repeat: no-repeat;
	}

#contenttop  {
	background-image: url(../images/kkk-top-v5.jpg);
	background-position: top center;
	margin:0;
	height: 85px;
        }

#contentafter {
	background-image: url(../images/content_after.png);
	background-position: top center;
	height: 40px;
	margin:0;
	}

#content {
	margin: 0px;
	padding: 2px;
        background-image: url(../images/content_bg.png);
	background-color: #ffffff;
	background-repeat: repeat-y;
	color: #003333;
        min-height: 600px;
}

h1, h2 {
	font-variant: small-caps;
	font-size: 180%;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

h2 {
	font-size: 160%;
}

h3, h4 {
	font-family: Garamond, Serif;
	width: 80%;
	font-size: 140%;
	margin-left: auto;
	margin-right: auto;
        border-bottom: thin solid;
	padding: 0.3em 0.3em 0.3em 1em;
	letter-spacing: 0.3em;
	font-variant: small-caps;
}

h4 {
	font-size: 120%;
	font-variant: normal;
	border-left: none;
	border-bottom: thin solid #22A;
	padding-left: 1em;
	letter-spacing: 0.25em;
}


h5, h6 {
	font-size: 100%;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

h6 {
	font-size: 90%;
}

p {
	position: relative;
	display: block;
	text-indent: 0em;
	width: 80%;
	margin: 0.8em auto;
	text-align: justify;
	line-height: 135%;
}


.imagealigner, .imagelister {
	text-align: center;
	margin-bottom: 1em;
}

.imagelister img {
	display: block;
	margin: 0 auto 1em auto;
}


.imagepadder {
	border: 5px solid #FFFFFF;
	vertical-align: middle;
}
.menudescriptor {
	font-style: italic;
	color: #0066CC;
}

a {
	color: #990000;
}
a:hover {
	color: #990066;
}
a:visited {
	color: #885151;
}
.names {
	font-size: 110%;
	color: #0099FF;
}
.note {
	font-size: 80%;
	text-align: right;
	width: 96%;
	text-indent: 0;
	margin: 0.3em;
	color:#990000;
}
.stronger {
	color: #000066;
	font-weight: bold;
}
.copyrightnotice {
	font-size: 70%;
	font-weight: bold;
	display: block;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	text-indent: 0;
}

.noindent {
	text-indent: 0;
	}

.center {
	text-align: center;
	text-indent: 0;
}
.tipdiv {
	background-color: #F3F5E3;
	border: medium dashed #D5D3B7;
	padding: 0.3em 1em 0.5em 1em;
	font-size: 90%;
	width: 79%;
	margin: 0 auto;
}

.tipdiv span.tiptitle {
	background-color: #CEC7C6;
	background-image: none;
	float: left;
	padding: 0 0.6em;
	margin: -1.2em 1em 0 -3em;
	border: 4px solid #DFDBDA;
	position: relative;
	display:block;
	}

.tipdiv p {
	margin: 0;
	padding: 0;
	text-align: justify;
	width: 98%;
	text-indent: 0;
}

.person {

	font-style: italic;
	color: #0066CC;
}
.imagealignerleft {
	text-align: center;
	display: inline;
	vertical-align: top;
	background-position: left top;
	float: left;

}

.bottomlinks {
	font-size: 80%;
}

.bottomlinks p {
	text-indent: 0;
	width: auto;
	margin: 0 auto;
	text-align:center;
	}

.optionaldiv {
	background-color: #FFFFCC;
	border: medium solid #BADFAA;
	padding: 0.6em;
	width: 90%;
	margin: 1em auto;
}

.smallcaps {
	font-variant: small-caps;
	}

ul {
	display:block;
	padding:1em;
	width: 75%;
	margin: auto;
}

#topnavigation {
	font-size: 12px;
	padding: 0;
	margin: 0 auto;
	line-height: 1.3em;
}

#topnavigation ul {
	margin: 0;
	padding: 0 0 0 15em ;
	margin-top: -1.3em;
}

#topnavigation_r {
	width: auto;
	font-size: 12px;
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-variant: small-caps;
}

#topnavigation_r li {
	text-align: center;
	display: block;
	float: left;
	width: 135px;
	margin-right: 10px;
}

#topnavigation_r ul {
	display: none;
}

#topnavigation_r li span {
	display: block;
	height: 25px;
	line-height: 25px;
	overflow: hidden;
	background-color: white;
/*	background-image: url(../nimages/topnavspan.png) */
}

#contentbody {
	clear: both;
}

#navwrap {
	padding: 0;
}

#header {
	padding-bottom: 0.5em;
}


#menucontainer {
	height: auto;
	width: 240px;
	border: 2px solid red;
	z-index: 100;
	filter: alpha(opacity=92);
	opacity: .92;
}

#menucontent {
	height: auto;
	width: auto;
	font-family: "Trebuchet MS", Trebuchet, Verdana, Sans-Serif;
	font-size: 11px;
	color: #051105;
	position: relative;
	top: 0px;
	left: 0px;
	padding: 0.4em 1em 0.4em 1.5em !important;
	border: none;
	background-color: white;
/* 	background-image: url(../nimages/navmenumiddle.png); */
	background-repeat: repeat-y;

}

.hoveredspan {
	color: #222277;
/*	background-image: url(../nimages/topnavspanhover.png) !important; */
	line-height: 27px !important;
}

#menutop {
	position: relative;
	width: 240px;
	height: 9px;
/* 	background-image: url(../nimages/navmenutop.png); */
	font-size:1px;
	line-height:0px;
}

* html #menutop {
/*	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='/nimages/navmenutop.png'); */
	background-image: none;
}

#menubottom {
	position: relative;
	width: 240px;
	height: 12px;
/*	background-image: url(../nimages/navmenubottom.png); */
	font-size:1px;
	line-height:0px;
	background-position:top;
	background-repeat:no-repeat;
}

* html #menubottom {
/*	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='/nimages/navmenubottom.png'); */
	background-image: none;
}

#menucontent ul, #earlymenu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: auto;
}

#menucontent ul li, #earlymenu ul li {
	padding: 0 0 0.6em 0;
}


#menucontent ul ul li, #earlymenu ul ul li {
	padding: 0 0 0.4em 1em;
}

.topper {
	font-size: x-small;
	font-family: Arial, serif;
	float: right;
	font-variant: normal;
}

.hoverimage {
	border: 2px solid #722;
}

.hoverimage:hover {
	border: 2px solid #F22;
}


.validator {
float: right;
font-size: 10px;
margin-top: -1.2em;
margin-right: 1em;
}

.validator a {
display: block;
text-decoration: none;
color: #422;
}

.w3c {
background-color: white;
padding:0.2em;
}
.spec {
background-color: #CCC;
padding:0.2em;
}

dl {
margin: 0 auto;
width: 80%;
}

dt {
text-align: right;
float: left;
clear: both;
width: 20%;
margin: 0;
display: inline;
padding: 0.1em 1% 0.1em 1%;
background-color: #666;
color: white;
}

dd {
width: auto;
margin-left: 23%;
margin-bottom: 0.1em;
padding: 0.1em;
}


dd:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*
* from php file
*/

.divType {
width: 84%;
position: relative;
left: 9%;
}


.fourColumns p, .threeColumns p, .twoColumns p, .column3per4 p, .column2per3 p {
float: left;
display: block;
width: 21.3%;
padding: 5px;
margin: 5px;
border: 0px solid #A22; /* testi mielessä 1px*/
position: relative;
/*text-indent: 0;*/
text-alignment: left;
}

.threeColumns p {
/*width: 30.194%;*/
width: 28%;
}

.twoColumns p {
width: 46%;
}

.column3per4 p {
/*width: 71%;*/
width: 70%;
}

.column2per3 p {
width: 63%;
}

.twoColumns img, .threeColumns img, .fourColumns img, .column3per4 img, .column2per3 img {
float: right;
}

/* Example menu stylings */
.examplediv a  {
display: inline;
clear: both;
width: 130px;
font-size: 100%;
line-height: 270%;
padding: 6px 10px 6px 20px;
color: black;
text-decoration: none;
margin: 0px 0px 0px -4px;
background: transparent 0px 0px no-repeat;
/*Using a color similar to our start frames as background color*/
}

#animmenu2 {
padding: 0px 0px 0px 5px;
}

#animmenu2_ {
padding: 0px 0px 0px 10px;
}

#animmenu2 a {
background: #EAEEF2 url(../images/index_mn.png) -10px 50% repeat-x;
}

#animmenu2_ a {
background: #EAEEF2 url(../images/index_mn.png) -10px 50% repeat-x;
width: 170px;
min-width: 170px;
}

#animmenu2_ p {
padding: 0px;
margin: -10px -8px -6px -10px;
background: #EAEEF2 url(../images/index_mn.png) -15px 50% repeat-x;
width: 170px;
min-width: 170px;
}

/*because the stupid IE doesn't calculate CSS rules correctly,
I had to use the id's instead of classes to style*/
#animenu a, #animmenu2 a, #animmenu2_ a, #animmenu3 a {
color: black;
}

#animmenu a:hover, #animmenu2 a:hover, #animmenu2_ a:hover, #animmenu3 a:hover {
color: #400;
}

html>body .examplediv a:hover {
background-color:#AEB7C6;
/*because the stupid IE6 slows to a crawl when background-color is set on hover,
we hide the rule from it, IE7 is not effected, hooray!*/
}

html>body #animmenu2 a:hover {
background-color:#D8DDE7;
/*Likewise*/
}

html>body #animmenu2_ a:hover {
background-color:#D8DDE7;
/*Likewise*/
}


#animmenu.noscript a:hover, #animmenu3.noscript a:hover {
background: #AEB7C6 url(../images/menuanim.png) 0px -420px;
/*This style is used for hovering when user does not enable javascript*/
}

#animmenu2.noscript a:hover {
background: #AEB7C6 url(../images/index_mn.png) 5px 50% repeat-x;
/*This style is used for hovering when user does not enable javascript*/
}

#animmenu2_.noscript a:hover {
background: #AEB7C6 url(../images/index_mn.png) 5px 50% repeat-x;
/*This style is used for hovering when user does not enable javascript*/
}

/* following is related to page styles, ignore */

hr {
clear: both;
color: gray;
width: 33%;
}
.examplediv {
float: left;
width:95%;
margin: 1px 0px 0px 5px;
/*margin-bottom: 1em;*/
/*border: 2px dashed #A00;*/
border: none;
padding: 0;
position: relative;
}

.examplediv h5  {
float: left;
margin: -1.2em 1em 0.4em 1em;
position: relative;
display: inline;
background-color: #411;
padding: 0 0.6em;
border: 4px solid #A22;
position: relative;
color: white;
font-size: 0.9em;
}

pre {
overflow: auto;
font-size: 90%;
}

.examplealign {
padding-left: 2em;
}

* html .examplealign {
padding: 0;
position:relative;
}

.stepexplain {
width: 70%;
margin: 0 auto;
}

.stepexplain li {
border: 2px dotted #009;
border-width: 0 0 2px 0;
}

.variables {font-size: 90%};

/* following the defaults */

.examplealign {
width: 70%;
margin: 0 auto;
text-align: center;
}

#resizercontainer {
clear: both;
}

pre {
overflow: auto;
}

ol {
width: 70%;
margin: 0 auto;
}

#mfstep li {
border: 2px dotted #009;
border-width: 0 0 2px 0;
}

.imgsuffix {
color:maroon; font-weight:bold; font-size:150%;
}