body {
margin: 0em;
padding: 0em;
background-color: rgb(255,255,255);
font-family: optima, arial;
color: rgb(60,70,80);
}

#flash{
width: 100%;
height: 365px;
background: #003576;
position: absolute;
left: 0px;
top: 0px;

}

.pageTopic{
position: absolute;
z-index: 500;
margin-left: 30px;
margin-top: -100px;
color: #fff;
font-family: Arial;
font-weight: normal;
}

#content{
margin-top: 365px;
background: #ccc;
width: 100%;
float: left;

}

#container{
width: 803px;
margin-left: 48px;
padding-top: 20px;
background: white;
float: left;


}

#left_col{
margin-left: 30px;
font: 13px Arial;
width: 350px;
float: left;
line-height: 1.5em;
}

#right_col{
margin-left: 50px;
width: 300px;
float: left;

}

.clear{

clear: both;
height: 50px;

}


#bottom{
margin-left: 30px;
padding-top: 30px;
height: 100px;
width: 740px;
border-top: 1px solid #ccc;
text-align: center;
font: 14px Arial;
}

#menu{
position: absolute;
z-index: 5000;
left: 26px;
top: 26px;


}


.linnalinkki{
font-size: 12px;

}


a:link, a:visited { color: rgb(60,70,80); text-decoration: none; }
a:hover{ color:rgb(80,90,100); text-decoration: none; }
a img { border: 0px; } */
/* * { border: 1px solid blue; }

/**************   f o n t s   *****************/

h1{
	font-size: 100%;
	font-weight: normal;
	font-variant: small-caps;
	letter-spacing: 0.08em;
	margin: 0.1em 0em;
	}

h2{
	font-size: 80%;
	font-weight: normal;
	font-variant: small-caps;
	padding: 0em;
	margin: 0em;
	}

h3{
	font-size: 70%;
	font-weight: normal;
	font-variant: all-caps;
	letter-spacing: 0em;
	margin: 0em;
	padding: 0em;
	}

h4{
	font-size: 70%;
	font-weight: normal;
	line-height: 2.5em;
	margin: 2em;
	}

h5{
	font-size: 70%;
	font-weight: normal;
	margin: 0em;
	}

.leipis{
	font-size: 90%;
	font-weight: normal;
	line-height: 0.8em;
	color: rgb(60,70,80);
	}

p{
	font-size: 75%;
	font-weight: normal;
	line-height: 1.6em;
	}

.red_margin{
	color: #ba262c;
	margin-left: 20px;
	font-size: 80%;
	line-height: 1.5;


}




b{ font-size: 12px; }

.link{
	font-size: 80%;
	font-weight: normal;
	font-variant: small-caps;
	padding: 0em;
	margin: 0em;
	}
.link a{ text-decoration: none; color: #ba262c;}
.link a:hover{ color: #ff262c; text-decoration: none; }


p:first-letter { font-size: 125%; margin-right: 0.05em; }

#bottom p:first-letter{ font-size: 100%; } 


.otsikko{
	font-size: 115%;
	font-variant: small-caps;
	padding: 0em 0em 0.1em 0em;
	border-bottom: 1px dashed rgb(200,200,200);
	margin: 0em 0em 0.8em 0em;
}

.otsikko a{ text-decoration: none; color: rgb(60,70,80); }
.otsikko a:hover{ color: rgb(120,130,140); text-decoration: none; }

.ingressi{
	font-family: georgia, arial;
	font-size: 110%;
	font-style: italic;
	letter-spacing: 0.1em;
	line-height: 1.6em;
	color: rgb(60,120,200);
}

.superscript{
	position: relative;
	font-size: xx-small;
	top: -0.5em;
	vertical-align: top;
	} 



/**************   p o h j a   *****************/

#logo{
	position: absolute;
	left: 35px;
	top: 0px;
	width: 190px;
	height: 190px;
	background: rgb(255,255,255);
}

.sisalto{
	display: block;
	width: 764px;
	height: 100%;
	float: left;
	text-align: left;
	padding: 1em;
	margin: 0px 0px 0px 2px;
/*	border: 1px solid rgb(230,230,230); */
	background: rgb(255,255,255);
	}

.tarina{
	display: block;
	width: 60%;
	height: 100%;
	float: left;
	text-align: left;
	padding: 1em;
	margin: 10px 0px 0px 35px;
	border: 1px solid rgb(230,230,230);
	background: rgb(255,255,255);
	}

.tarina_kuvat{
	display: block;
	margin: 0.2em 0em 1.5em 1em;
	float: right;
}

.vasen_palsta{
	display: block;
	width: 360px;
	height: auto;
	float: left;
	margin-right: 40px;
	padding: 0em 1em 1em 0em;
	background: rgb(255,255,255);
	}

.oikea_palsta,.oikea_palsta_flash{
	display: block;
	width: auto;
	height: auto;
	padding: 0em;
	float: left;
	}

.infolista a{
	display: block;
	width: 95%;
	padding: 0.2em 1em 0.2em 0.2em;
	border-bottom: 1px dotted rgb(220,220,220);
	background: rgb(255,255,255);
	}

.infolista a:hover{
	background: rgb(235,235,235);
	}

#info{ width: 326px; }

/**************   l i n n a   h u o n e i s t o t    *****************/

#erik,#ebba,#gustav,#karl,#magnus,#margareeta{
	float: left;
	width: 535px;
	height: auto;
	padding: 20px 220px 10px 10px;
	margin: 1em 0em 4em 0em;
	border: 1px dotted rgb(140,145,150);
	background-color: rgb(255,255,255);
}

#erik{ background: url(img/aateli_linna_erik.jpg) no-repeat top right; }
#ebba{ background: url(img/aateli_linna_ebba.jpg) no-repeat top right; }
#gustav{ background: url(img/aateli_linna_gustav.jpg) no-repeat top right; }
#karl{ background: url(img/aateli_linna_karl.jpg) no-repeat top right; }
#magnus{ background: url(img/aateli_linna_magnus.jpg) no-repeat top right; }
#margareeta{ background: url(img/aateli_linna_margareeta.jpg) no-repeat top right; }

.aatelin_linna_flash{
	display: block;
	margin: 1em 0em 0em 0em;
}

/**************   l i n k i t    *****************/

.more_info{ width: 100%; }

.more_info a:link,.more_info a:visited,.more_info a:visited{
	display: block;
	text-align: center;
	padding: 0.5em 0em;
	background: url(../pics/link_darkgray_off.gif);
	border-top: 1px solid rgb(255,255,255);
	font-size: 80%;
	color: rgb(240,240,240);
	}

.more_info a:hover{
	background: url(../pics/link_darkgray_on.gif);
	color: rgb(255,255,255);
	}

/**************   h u o n e i s t o t   *****************/

.ylaosa_linna{
	position: relative;
	width: 100%;
	height: 250px;
	background: url(../pics/ylaosa_aatelin_linna.jpg) repeat-y;
	background-color: rgb(0,53,118);
	}

#nimi_linna{
	position: absolute;
	top: 165px;
	right: 6%;
	width: 363px;
	height: 68px;
	background: url(../pics/aatelin_linna_teksti.png);
}

/**************   p ä ä v a l i k k o   *****************/

.paavalikko_iframe{
	display: block;
	width: 240px;
	height: 100%;
	float:left;
}

#paavalikko_reunat{
	width: 150px;
	height: auto;
	margin: 10px 0px 30px 40px;
	border-left: 1px dotted rgb(180,180,180);
	border-right: 1px dotted rgb(180,180,180);
	border-top: 1px dotted rgb(180,180,180);
	}

.paavalikko a{
	display: block;
	width: auto;
	height: auto;
	padding: 0.3em 1.5em;
	border-bottom: 1px dotted rgb(180,180,180);
	background: url(../pics/gradient_alalinkit_off.gif) repeat-x;
	background-position: bottom;
	background-color: rgb(255,255,255);
	}

.paavalikko a:hover{
	background: url(../pics/gradient_alalinkit_on.gif) repeat-x;
	background-position: bottom;
	background-color: rgb(255,255,255);
	}

.paavalikko_linna a{
	display: block;
	width: auto;
	padding: 0.2em 0.2em 0.2em 2.5em;
	border-bottom: 1px dotted rgb(180,180,180);
	background: rgb(255,255,255);
	}

.paavalikko_linna a:hover{
	background: rgb(200,200,200);
	color: rgb(255,255,255);
	}


/**************   a l a v a l i k k o  *****************/

.alavalikko_iframe{ }

.alavalikko_spacer{ margin-left: 40px; }

.alavalikko_tausta{
	height: 15px;
	width: 100%;
	float: left;
	background: url(../pics/gradient_10.gif) repeat-x;
	}

.alavalikko_tausta_darken{
	width: 240px;
	height: 100%;
	float: left;
	background: rgb(125,125,125);
	filter: alpha(opacity=1);
	-moz-opacity: .1;
	opacity: .1;
	}

.alavalikko a{
	display: block;
	float: left;
	width: auto;
	height: 22px;
	padding: 8px 10px 4px 10px;
	border-left: 1px dotted rgb(200,200,200);
	background: url(../pics/gradient_alalinkit_off.gif) repeat-x;
	background-position: bottom;
	font-size: 12px;
	color: rgb(60,70,80);
	font-weight: normal;
	font-variant: small-caps;
	letter-spacing: 0.05em;
}

.alavalikko a:hover{
	color: rgb(20,30,40);
	background: url(../pics/gradient_alalinkit_on.gif) repeat-x;
	background-position: bottom;
	}

.alavalikko_oikea_laita{
	display: block;
	float: left;
	width: 2px;
	height: 22px;
	padding: 6px 10px;
	border-left: 1px dotted rgb(200,200,200);
	}

/**************   k i e l i v a l i n n a t  *****************/

.flag a{
	display: block;
	float: left;
	width: auto;
	height: 22px;
	padding: 12px 10px 0px 10px;
	border-left: 1px dotted rgb(200,200,200);
	background: url(../pics/gradient_alalinkit_off.gif) repeat-x;
	background-position: bottom;
}

.flag a:hover{
	background: url(../pics/gradient_alalinkit_on.gif) repeat-x;
	background-position: bottom;
	}