@font-face {
  font-family: 'omafontti';
  src: url('chinrg__.ttf') format('truetype');
}

html, body {
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #333333;
	background-color:#fff;
	text-align: left;
	margin: 0px;
	padding: 0px;
}

.lohko {
	width: 940px;
	text-align: left;
}

.keskilohko {
	position: relative;
	width: 940px;
}

.alalohko {
	position: relative;
	clear: both;
	width: 940px;
}

.valikkolohko {
	position: relative;
	clear: both;
	width: 940px;
}

h1 {
	font-family: omafontti, Helvetica, Arial, sans-serif;
	font-size: 32px;
	color: #000;
	margin: 0 0 20px 0;
}

h3 {
	font-family: omafontti, Helvetica, Arial, sans-serif;
	font-size: 32px;
	color: #000;
	margin: 0 0 20px 0;
}

h6:before {
	padding: 0 2px 0 0;
	content: url('http://www.ruutukaava.com/images/otsikkomerkki.png');
}

h2 {
	font-family: omafontti, Helvetica, Arial, sans-serif;
	font-size: 20px;
	color: #000;
	margin: 0px;
}

h4 {
	font-family: omafontti, Helvetica, Arial, sans-serif;
	font-size: 20px;
	color: #000000;
	margin: 0px;
}

h5 {
	font-family: omafontti, Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #000000;
	margin: 0px;
}
.sisaltoteksti {
	margin-right: 40px;
	padding-right: 40px;
	line-height: 150%;
}

.alatunniste {
	text-align: left;
	font-family: omafontti, Helvetica, Arial, sans-serif;
	font-size: 19px;
	margin: 10px 0 30px 0;
	padding: 20px 0 30px 0;
}

.valikkotunniste {
	text-align: left;
	font-family: omafontti, Helvetica, Arial, sans-serif;
	font-size: 19px;
	min-height: 378px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.tekstikehys {
	text-align: center;
	padding: 10px 10px 5px 10px;
	margin-top: 20px;
	border: 2px solid #000000;
	border-bottom: 0;
}

div.vasenpalsta a {
	font-weight: normal;
	color: #000000;
}

div.vasenpalsta img {
	border: 0;
}

.vasenpalsta {
	position: relative;
	float: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 22px;
	width: 300px;
	margin-right: 20px;
}

.vasenpalsta3 {
	position: relative;
	float: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 22px;
	width: 300px;
}

.sisalto {
	position: relative;
	margin-top: 15px;
	margin-left: 20px;
	text-align: left;
	float: right;
	font-size: 13px;
	width: 600px;
}

.paavalikko {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 22px;
	margin: 0px;
	margin-top: 10px;
}

a:link    { 
	color: #991111;
	text-decoration: underline;
	font-weight: bold;
}
a:visited { 
	color: #991111;
	text-decoration: underline;
	font-weight: bold;
}
a:hover   { 
	color: #111111;
	text-decoration: none;
	font-weight: bold;
}
a:active  { 
	color: #111111;
	text-decoration: none;
	font-weight: bold;
}
a:focus   { 
	color: #111111;
	font-weight: bold;
}
a { 
	text-decoration: none;
}

div.fadehover200 {
	position: relative;
	min-height: 200px;
}

div.fadehover250 {
	position: relative;
	min-height: 250px;
}

div.fadehover300 {
	position: relative;
	min-height: 300px;
}

div.fadehover350 {
	position: relative;
	min-height: 350px;
}
 
img.a {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
        }
 
img.b {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
	}

img {
	border: 0;
}

div.valklinkit a {
	color: #ffffff;
	text-decoration: underline;

}
div.valklinkit a:hover   { 
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}

div.otsikkolinkit {
	padding-left: 5px;
}

div.otsikkolinkit a {
	text-decoration: none;
}
div.otsikkolinkit a:hover   { 
	text-decoration: underline;
}

#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 15px omafontti}

#sddm li a
{	display: block;
	margin: 0 4px 0 0;
	padding: 4px 10px;
	width: 118px;
	background: #991111;
	color: #ffffff;
	border: 2px solid #000000;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #000000;
	color: #ffffff;
}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #991111;

}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #991111;
		color: #ffffff;
		border: 0;
		font: 13px omafontti;
}

	#sddm div a:hover
	{	background: #000000;
		color: #FFF
}



#sddm3
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm3 li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 15px omafontti}

#sddm3 li a
{	display: block;
	margin: 0 4px 0 0;
	padding: 4px 10px;
	width: 118px;
	background: #dddddd;
	color: #000000;
	border: 2px solid #000000;
	text-align: center;
	text-decoration: none}

#sddm3 li a.ruutukaava
{	display: block;
	margin: 0 4px 0 0;
	padding: 4px 10px;
	width: 118px;
	background: #991111;
	color: #fff;
	border: 2px solid #000000;
	text-align: center;
	text-decoration: none
}

#sddm3 li a.valittu
{	display: block;
	margin: 0 4px 0 0;
	padding: 4px 10px;
	width: 118px;
	background: #000;
	color: #fff;
	border: 2px solid #000000;
	text-align: center;
	text-decoration: none
}

#sddm3 li a:hover
{	background: #000000;
	color: #ffffff;
}

#sddm3 div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #dddddd;

}

	#sddm3 div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
	background: #991111;
	color: #fff;

		border: 0;
		font: 13px omafontti;
}

	#sddm3 div a:hover
	{	background: #000000;
		color: #ffffff;
}




#sddm2
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm2 li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 13px omafontti}

#sddm2 li a
{	display: block;
	margin: 0;
	padding: 4px 10px;
	width: 197px;
	background: #000000;
	color: #ffffff;
	border: 2px solid #ffffff;

	text-align: left;
	text-decoration: none}

#sddm2 li a:hover
{
}

#sddm2 div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #330000;

}

	#sddm2 div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		text-align: left;
		text-decoration: none;
		background: #ffffff;
		color: #000000;
		border: 2px solid #ffffff;
		border-top: 0;
		width: 197px;
		font: 12px omafontti;
}

	#sddm2 div a:hover
	{
}

.ylarivi {
position:absolute;
padding: 0 0 2px 0;
margin-bottom: 0;
height: 50px;
width:100%;
background-color: #000000;
border-bottom: 12px solid #000000;
text-align:center;
}

.spaalinkit {
margin-top: -8px;
padding-bottom: 30px;
}


.cell2 {
float: left;
width: 550px;
padding:15px;
margin: 0 20px 0 0;
background-color: #000;
color: #ffffff;
text-align:left;
}

.cell2 a {
color: #bbbbbb;
}

.cell2 a:hover {
color: #000000;
}

.cell1 {
float: left;
width: 220px;
padding:15px;
margin: 0 0 0 20px;
color: #000000;
text-align:left;
}


.container {  
	display:table;
}
.row {
	display:table-row;
	max-width: 900px;  
	text-align:left;


}
.row div {
	padding: 0 25px 25px 25px;
    display:table-cell;
    max-width: 900px;
}


div.ruutukaavaesittely {
position: absolute;
background-color: #991111;
border: 2px solid black;
width: 250px;
margin-left: -4px;
padding: 10px;
color: white;
display: none;
}

.fancyboximg {
  border: 2px solid black;
  margin: 0 3px 5px 0;
}

label   { 
	color: #111111;
	text-decoration: none;
	font-weight: bold;
}