/* CSS Document for KAMPUS */

* {margin:0; padding:0;}

body {
	line-height: 100%;
	font: 86% Arial, Helvetica, sans-serif;
	color: #666;
	background-attachment: fixed;
	background-image: url(images/kampus_back.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
}

h2 {font: 1.5em Arial, Helvetica, sans-serif; color: #002046;}
h3 {font: 2em Arial, Helvetica, sans-serif; letter-spacing: 1px; color: #002046;}
h4 {font: 1.1em Arial, Helvetica, sans-serif; letter-spacing: 1px; color: #002046;}

#container {
	text-align: left;
	width: 740px;
	margin: 0 auto;
}

#top {
	background-image:url(images/top_pic.jpg);
	background-repeat: no-repeat;
	height: 100px;}
	
div#top h1 {display: none;}

#topmenu {
	background-color: #002c59;
	height: 32px;
	margin-bottom: 12px;}

#topmenu ul {list-style: none; padding: 6px;}
#topmenu ul li {display: inline; padding: 0 0 0 0.6em; border-left: 2px solid #898f39; margin: 0 0.4em 0 0;}
#topmenu ul li:first-child {padding-left: 0; border: none;}

#topmenu ul li a {color: #fff; text-decoration: none;}
#topmenu ul li a:link, #topmenu ul li a:visited {}
#topmenu ul li a:hover {}

.flag {
	position:relative;
	top: 2px;
	left: 0;
	margin-left: 5px;}

.separate {color: #898f39; font-weight: bold;}

#menu {
	float: left;
	width: 150px;
	padding: 3px;
	line-height: 160%;
	border-right: 1px dotted #ccc;
}

#menu ul {list-style: none; margin: 0; padding: 0; margin-bottom: 6px;}

#menu ul li {margin-top: 3px; margin-bottom: 3px;}

#menu ul li ul {
	margin-left: 10px;
	padding: 6px;
	list-style-image:url(images/lista.gif);
}




#menu ul li a {
	font: bold 12px Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #002046;
}

#menu ul li ul li a {
	font: 12px Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #002046;
}

#menu ul li ul li a.activelink {
	color:#ccc;
}


#lang li {display: block; float: left; margin-right: 12px; padding-top: 12px;}


.subtitle {font: bold 11px Arial, Helvetica, sans-serif; list-style:none; color: #000;}
	

#content {margin-left: 180px;}
	
#content h3 {margin-bottom: 12px;}

#content p {
	font-size: .86em;
	line-height: 180%;
	margin-bottom: 12px;
	margin-right: 36px;
}	

#content a {color: #000;}

#content img {margin-bottom: 12px;}

.right {float: right; margin-left: 12px;}

.noline {text-decoration: none;}

div#right {
	float: right; 
	width: 178px;
	border: 1px dotted #ccc;
	padding: 6px;
	margin-left: 12px;
}

div#right p {width: 175px; font-size: 11px;}

#yhteys dt {font: 1.5em Arial, Helvetica, sans-serif;  line-height: 180%; letter-spacing: 1px;}
#yhteys dd {margin: 6px auto 12px 12px; line-height: 140%;}
#yhteys dd a {color: #666;}
	
ul#asettajat {list-style: none; margin-left: 20px;}

ul#asettajat li a {
	text-decoration: none;
	color: #666;
	line-height: 160%;
	}

dl#ohjelma {}
dl#ohjelma dt {position: relative; font-weight: bold;}
dl#ohjelma dt em {position: absolute; left: 80px; top: 0; font-style: normal;}
dl#ohjelma dd {margin-left: 80px; margin-bottom: 16px; height: 130px;}

dl#ohjelma dt img {float: right; clear: right; margin-right: 60px;}

dl#ohjelma2 {}
dl#ohjelma2 dt {position: relative; font-weight: bold; border-bottom: 1px dotted #ccc;}
dl#ohjelma2 dt em {position: absolute; left: 80px; top: 0; font-style: normal;}
dl#ohjelma2 dd {margin-left: 80px; margin-bottom: 16px;}
dl#ohjelma2 h4 {margin-top: 6px;}


.right {float: right;}
.tulossa {border: 1px dotted #757f2f; padding: 6px; background-color:#002c59; color: #fff;}
p.tulossa a {color: #fff;}

hr {margin-bottom: 12px;}

#tapahtuma {margin-bottom: 24px; font-size: .86em;}
#tapahtuma li {margin-left: 16px; line-height: 120%; margin-bottom: 6px;}

#mainos {clear: both; margin-top: 24px;}

/* LIGHTBOX */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* fix for mozilla's center-position-changes-when-scrollbar-appears behaviour */
html {
	overflow-y: scroll;
	overflow:-moz-scrollbars-vertical;
}