/***************************************
 * Reset
 * 
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

/****************************************
 * Site
 * 
 */

body { font: normal 62.5%/1.4 Arial, Helvetica, sans-serif; color: #333; }

/* vaal vihr #96B94B tumma vihr #557346 */

a { color: gray; }
address { font-size: 90%; font-style: normal; margin: 0 0 0 0.3em; }
p  { margin: 0 0 1.5em 0; padding-left: 1px; }
h1 { font-size: 1.6em; margin: 0; }
h2 { font-size: 1.3em; margin: 1em 0 0.5em; padding-left: 1px; }
h3 { font-size: 1.2em; color: #777777; }
h4 { font-size: 1em; margin: 0.4em 0 0.6em 0.2em; }
h5, h6 { font-size: 1em; font-style: normal; color: gray; text-align: right; }

h6, table.contentpaneopen h6 {
    display: block; height: 1.6em; text-align: right;
	background: transparent url('http://www.luonnontila.fi/fi/images/stories/muut/tausta.gif') no-repeat right top;
	font-size: 0.9em; line-height: 1.5;
	margin: 0.3em 0 0 0; padding-right: 40px;
}

/**********************************
 * Layout
 * 
 ************/


#wrapper { width: 900px; margin: 0 auto; text-align: left; font-size: 1.2em; position: relative; clear: both;}

/* LAYOUT: LEFT-CONTENT-RIGHT */
body#lcr #innerwrap { width: 675px; float: right; }
body#lcr #content { float: left; width: 415px; }
body#lcr #right {float: right; width: 205px; }
body#lcr #left { float: left; width: 200px; }

/* LAYOUT: LEFT-CONTENT */
body#lc #innerwrap { float: right; width: 675px; }
body#lc #content { float: left; width: 610px; border-right: none; }
body#lc #right { display: none; }
body#lc #left { float: left; width: 200px; }

/* LAYOUT: CONTENT ONLY */
body#c #innerwrap { float: right; width: 880px; }
body#c #content { float: left; }
body#c #right { display: none; }
body#c #left { display: none; }
#content { padding-top: 6px; }

#content-wrap {
	padding: 4px 0 0 14px;
	/*border-left: 1px dotted #999999;*/
	clear: both;
	height: 100%;
}

#container { background: url('../images/bg-container.gif') repeat-y 0 0; height: 100%; }
#innerwrap { /*border-right: 1px dotted #999999;*/ }
#left { padding: 40px 0 24px 10px; }
#right { margin: 40px 10px 0 10px; }

/* user3: language */

#user3 { 
	position: relative; 
	clear: both; 
	width: 900px;
	margin-top: 3px;
	text-align: right;
}
#user3 a { font-weight: bold; color: #8c8c8c; text-decoration: none; text-transform: uppercase; }
#user3 a:hover { text-decoration: underline; }

#header {
	clear: both;
	margin-top: 3px;
	height: 101px;
	position: relative;
	background-color: #97b84a;
	width: 900px;
}
#header.fi { background: #97b84a url(../images/logo-right-fi.gif) no-repeat right top; position: relative; }
#header.en { background: #97b84a url(../images/logo-right-en.gif) no-repeat right top; position: relative; }
#header #logo { height: 101px; width: 425px; }
#header #search { width: 300px; position: absolute; left: 475px; top: 40px; }
#header #search form { text-align: left; }
#header #search form label { color: white; font-weight: bold; text-transform: uppercase; display: block; }
#header #search form input.button { margin-left: 4px; }
#header #search form input.inputbox { padding: 2px 3px; }

#breadcrumbs {
	font-size: 0.9em;
	min-height: 28px;
	height: auto !important;
	height: 28px;
	line-height: 28px;
}
#breadcrumbs p { margin: 0; }
#breadcrumbs span { color: gray; }
#breadcrumbs span a { font-weight: normal; color: #666666; }

#content-full, content-middle, #content.narrow-width, #content.full-width {
	border-left: 1px dotted #999999;
	border-right: 1px dotted #999999;
	padding: 1em;
}
#content-full { margin-right: 10px; }
#content-middle { margin-right: 220px; max-width: 36em; }
#content.narrow-width { margin-right: 220px; max-width: 36em; }
#content.full-width { margin-right: 10px; }

#left { }
#left #image { }
#left img { margin: 25px 0; }
#left h3, #right h3 { margin-bottom: 0.5em; }

#right div { line-height: 1.3; }
#right div img { margin-bottom: 5px; }

#footer {
	clear: both;
	text-align: right;
	background: #557346;
	color: #fff;
	width: 900px;
	margin: 0 auto;
}
#footer p { padding: 4px 18px 4px 4px; margin: 0; font-size: 1.2em; }
#footer a { color: #fff; }

#page-push { height: 40px; clear: both; }

/************************************ 
 * News
 *
 */

div#latestnews { margin: 8px 0 32px; }
div#latestnews ul { }
div#latestnews ul li { margin-bottom: 15px; margin-top: 5px; list-style: none; }
div#latestnews a:hover { text-decoration: none; }
/*div.latest-news-item { margin: 1em 0; }*/
/*div.latest-news-heading span.date { font-weight: bold; }*/

li.latestnews { margin: 1em 0 2em; }
li.latestnews span.createdate { font-weight: bold; }
li.latestnews p { margin-bottom: 0; line-height: 1.4;}

span.pagination { display: block; margin: 0 0 1em 0; }
span.pagination span, 
span.pagination a { margin: 0 4px;}

span.article_separator { display: block; margin: 0 0 1em 0; }

body.contentpane { background: #fff; width: auto; margin: 10px; text-align: left; }
div.componentheading { font-size: 1.4em; font-weight: bold; padding-bottom: 2px; margin: 0; }
table.contentpaneopen td.contentheading {
	font-size: 1.6em;
	font-weight: bold;
	padding-bottom: 1em;
}

table.contentpaneopen fieldset {
	margin: 10px;
	border: 1px dotted gray;
	padding: 5px 8px;
}
table.contentpaneopen fieldset span.small {
	color: #666666;
}
td { padding: 1px 4px 1px 0; vertical-align: top; }
td.createdate { text-align: left; color: gray; padding-left: 0px; font-size: 1em; }
td.modifydate { text-align: left; color: gray; padding-left: 0px; font-size: 0.9em; }
td.sectiontableheader { padding: 3px; background-color: #efefef; font-weight: bold; }
td.sectiontableheader a { font-weight: bold; color: black; }
td.sectiontableheader img { border: 0; margin-left: 5px; }

.buttonheading img {
	border: 0;
}

div.chronoform { display: none; }

/************************************
 * Navigation
 * 
 */
#mainmenu {
	display: block; position: relative; z-index: 100; width: 900px; height: 38px;  
	border-bottom: 1px dotted #999999;
	margin: 0; padding: 4px 0px;
	/* background: #96B94B; */
}

#mainmenu ul.menu { display: block; position: relative; clear: both; list-style-type: none; }
#mainmenu ul.menu li { display: block; position: relative; float: left; padding-bottom: 5px; }
#mainmenu ul.menu li a { display: block; position: relative; margin-right: 3px; padding: 4px 10px 3px; }
#mainmenu ul.menu li span.separator { 
	display: block; position: relative; margin-right: 3px; padding: 4px 10px 3px; 
	background: #557346; color: #fff;
	font-size: 13px; font-weight: 700;
	text-transform: uppercase; text-decoration: none;	
}

#mainmenu ul.menu li span.separator:hover {
	cursor: pointer; 
}
/*#mainmenu ul.menu li.active span.separator { 
	background: #96B94B;	
}*/
#mainmenu ul.menu li.parent li { padding-bottom: 0; clear: left; }
#mainmenu ul.menu li.parent ul li {	height: auto; line-height: 1.5; }
#mainmenu ul.menu li.parent ul li a {
	display: block; width: 200px;
	background: #fff; border: 1px solid #ccc;
	margin: 0px; padding: 2px 5px;
	font-weight: 400; color: #666;
}
#mainmenu ul.menu li.parent ul li a:hover { background: #eee; }
#mainmenu ul a:link, #mainmenu ul a:visited	{
	background: #557346; color: #fff;
	font-size: 13px; font-weight: 700;
	text-transform: uppercase; text-decoration: none;
}
#mainmenu ul.menu a:hover { background: #96B94B; color: #fff; }
/*#mainmenu ul.menu li.active a, 
#mainmenu ul.menu li.current a { background: #96B94B; }*/	
#mainmenu ul.menu li:hover ul {
	display: block; position: absolute;
	top: 27px; left: -1px;
	background: #96B94B; list-style: none;
	margin: 0px; padding: 0px 0px 0px 8px;
}
#mainmenu li:hover ul li { display: block; }
#mainmenu li:hover ul a { font-size: 11px; }

li#current ul, li.parent ul { display: none; }

ul.menu ul li#current span { font-weight: bold; }

#tabs ul.menu ul li:last-child a { border: none; }
#left ul { margin-bottom: 10px; }

/* remove all the bullets, borders and padding from the default list styling */
ul#mainlevel-sidenav { padding: 0; margin: 0; list-style-type: none; }


ul#mainlevel-sidenav li {
	position: relative;
	background: #fff;
	min-height: 22px;
	height: auto !important;
	height: 22px;
	width: 195px;
	list-style-type: none;
}
ul#mainlevel-sidenav li ul { z-index: 120; width: 310px; }
ul#mainlevel-sidenav li ul li { min-height: 20px; height: auto !important; height: 20px; }
ul#mainlevel-sidenav li ul li a, 
ul#mainlevel-sidenav li ul li a:visited { background-color: #fff; width: 309px; }
ul#mainlevel-sidenav > li { margin-top: 4px; }
ul#mainlevel-sidenav a, 
ul#mainlevel-sidenav a:visited {
	display: block; 
	background: white url(../images/navi-bullet.gif) no-repeat 6px 50%;
	border: 1px solid #aaaaaa; border-width: 1px 1px 1px 1px;line-height: 1.8;
	text-decoration: none;
	color: #888888;	font-weight: bold;
	padding: 0 3px 0 22px;
}
ul#mainlevel-sidenav a:hover { color: #00782d; background-color: #efefef; text-decoration: underline; }
* html #left a:hover, 
#left :hover > a { color: #888888; background-color: #efefef; }

ul#mainlevel-sidenav li.mainlevel_current-sidenav li a { color: #888888; }
ul#mainlevel-sidenav a.mainlevel_active-sidenav,
ul#mainlevel-sidenav a.sublevel_active-sidenav,
ul#mainlevel-sidenav a.sublevel_current-sidenav {
	background: white url(../images/navi-bullet-active.gif) no-repeat 6px 50%;
	color: #00782d;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
ul#mainlevel-sidenav ul {
	display: none; position: absolute;	
	top: 0px; left: 182px; 
	/*z-index: 1001;*/
	background: none;
	padding: 0px 0px 0px 12px;
}

/* make the second level visible when hover on first level list OR link */
ul#mainlevel-sidenav li:hover ul, 
ul#mainlevel-sidenav a:hover ul { display: block; }
ul#mainlevel-sidenav li.mainlevel-sidenav:hover { background:#efefef; color: #333;
}


/************************************
 * Tooltip
 * 
 */

/* ----- add selectors here for font sizing ----- */
#JT_close_left, #JT_close_right{font-size: 1.1em;}
#JT_copy p, #JT_copy ul{font-size: 1.1em;}


/* ---------->>> jtip <<<---------------------------------------------------------------*/

#JT_arrow_left{
	background-image: url(../images/arrow_left.gif);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	z-index:101;
	left:-12px;
	height:23px;
	width:10px;
    top:-3px;
}

#JT_arrow_right{
	background-image: url(../images/arrow_right.gif);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	z-index:101;
	height:23px;
	width:11px;
    top:-2px;
}

#JT {
	position: absolute;
	z-index:100;
	border: 2px solid #CCCCCC;
	background-color: #fff;
}

#JT_copy{
	padding:10px 10px 10px 10px;
	color:#333333;
}

.JT_loader{
	background-image: url(../images/loader.gif);
	background-repeat: no-repeat;
	background-position: center center;
	width:100%;
	height:12px;
}

#JT_close_left{
	background-color: white;
	text-align: left;
	padding-left: 8px;
	padding-bottom: 5px;
	padding-top: 2px;
	font-weight:bold;
}

#JT_close_right{
	background-color: #CCCCCC;
	text-align: left;
	padding-left: 8px;
	padding-bottom: 5px;
	padding-top: 2px;
	font-weight:bold;
}

#JT_copy p { margin:3px 0; }
#JT_copy img { padding: 1px; border: 1px solid #CCCCCC; }
.jTip { cursor:help; }

/************************************ 
 * Fixes and special cases
 *
 */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
.hidden { display: none; }