/*
 * *********************************
 * Common styles for all webbrowsers
 * for www.innopark.fi
 * *********************************
 */

/* clears all the margins and paddings for elements, expect for tables */
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,  caption { margin: 0;padding:0;}

a { outline:none;}	/*  remove outlines from links for Firefox-browsers */

.clearfix:after { /* To be used with floating elements */
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

blockquote { margin-left: 20px;} /* CE indent style */ 
span.strong { background: yellow; color:#000;} /* CE overcolor style */

body {
	background:#fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
}

a:link {color: #00688F; text-decoration: none;}
a:visited {color: #00688F; text-decoration: none;}
a:hover {color: #00AEEF; text-decoration: underline;}
a:active {color: #00688F; text-decoration: none;}


#background-container {
	background: transparent url(/pics/innopark/bg.gif) top center repeat-y;	
	}
	
	#content-container {
		background: transparent url(/pics/innopark/content-bg.gif) top center no-repeat;
		padding-top: 36px;
		}
	
	#content-container-tilavaraus {
		background: transparent url(/pics/spacereservation/content-bg.gif) top center no-repeat;
		padding-top: 36px;
		}
		
		
		
#header, #footer, #frontpage, #contentWrapper {
	width: 829px;
	margin: 0 auto;
	}	
	
 #header-tilavaraus {
	width: 920px;
	margin: 0 auto;
	position: relative;
		height: 85px;		
	}	
		
	#innoparkLogo {
		position: absolute;
		top: 15px;
		left: 64px;
		border:none;
		border: none;
		}	
		
	#header {
		position: relative;
		height: 85px;		
		}	
		
	#searchArea {
		color: #407c9c;
		position: absolute;
		right: 30px;
		top: 20px;
		}	
		
	#inEnglish {
		position: absolute;
		right: 30px;
		top: 60px;
		}	
		
		#inEnglish a { color: #bebfc2; text-decoration: none; font-size: 11px; }
		
				
		
	#postit {
		position: absolute;
		background: transparent url(/pics/innopark/lappu.png) no-repeat;
		width: 150px;
		top: -60px;
		left: 300px;
		height: 200px;
		z-index: 3;
		}	
	#postitText {
		position: absolute;
		width: 150px;
		top: -60px;
		left: 300px;
		height: 200px;
		z-index: 3;
	}	
		#postitText ul {
			list-style-type: none;
			padding-top: 39px;
			}
			
			#postitText li {
				margin: 6px 0;
				padding: 0 15px;
				}
		
#clipper {
		position: absolute;
		top:0px;
		left: 13px;
		width: 43px;
		height: 13px;
		background: url(/pics/innopark/clipper-bottom.png) no-repeat;
		z-index: 10000;
	}
	
			
		
#nav { 
	position: absolute;
	z-index: 100; 
	padding-left: 25px;
	background: transparent url(/pics/innopark/nav.gif) 0px 15px repeat-x;
	}
	.mainNav-fp { top: 200px; } /* frontpage positioning */
	.mainNav { top:80px; }	/* subpage positiioning */
	
	
	/* #nav.navSub { top: 145px; } */
	
	#nav li { display: inline; list-style-type: none;}
	
	#nav a {
		display: block;
		color: #fff;
		font-size: 11px;
		font-weight: bold;
		background: transparent url(/pics/innopark/li.gif) no-repeat;
		padding: 13px 0;
		margin-right: 10px;
		width: 105px;
		text-align: center;
		float: left;
		text-transform: uppercase;
		height: 1%;
		}
		
	#nav a#selected { background: transparent url(/pics/innopark/li-active.gif) no-repeat;color:#004563;}
	#nav li.Ohjelmat a { padding-top: 5px;}
	.subNav { position: absolute;top: 121px; margin-left: 2em; }
		.subNav a#selected { text-decoration: none; color:#000;}
	.subNav-fp { position: absolute;top: 240px; z-index: 100; }

		

		.innopark {}
		/*
		.toimitilat { left: 115px;}
		.yrityskehitys { left:230px;}
		.osaamiskeskus { left: 90px; }
			.osaamiskeskus ul { text-align: right;}
		*/
		
		#subNav ul {
			/* background: #007296;border: 2px solid #f2f4f5; */
			padding: 5px;
			width: 100%;
		}
		#subNav li { display: inline; margin-right: 0.55em; padding:0.4em; border-right: 1px solid #ddd; }
		#subNav li a { color:#979797; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 11px;}
			#subNav a:hover { text-decoration: underline;}	
		#subNav li.naviActive  { /* background: url(/pics/innopark/li-subNav-active.gif) repeat-x;*/ }
			#subNav li.naviActive a { color:#000; text-decoration: none;}
	
#frontpage {
	position: relative;
	background: transparent url(/pics/innopark/frontpage.jpg) top center no-repeat;
	border-top: solid 1px #bfbfc3;
	z-index: 1;
	padding-bottom: 220px;
	}		
	#innosteBackground {
			height: 306px;
			width: 212px;
			background: transparent url(/pics/innopark/innoste.png) no-repeat;
			position: absolute;
			right: 0px;
			top: 30px;
		}
	#innoste {
		height: 306px;
		width: 180px;
		position: absolute;
		right: 20px;
		top: 30px;
		overflow: hidden;
		z-index: 100;
		}
		
		#innoste p {
			font-size: 11px;
			left: 15px;
			}

	#innosteArea {
		width: 180px;
		overflow: hidden;
		height: 306px;
		margin-left: 0px;
	}
	
	#externalLinks { /* position: absolute;top: 340px; right: 10px;*/ background: #fff; width: 180px; padding:0.5em; border: 1px solid #B2B4B7;}	
		#ekstranet {}		
		#newsletter {}
#frontpage-background { position: relative; padding-bottom: 2em; top: 220px;background: url(/pics/innopark/frontpage-background.gif) left top repeat-y;z-index:2;}		
#frontpage-content {
		position: relative;
		float:left;
		border-top: solid 1px #b2b4b7;
		/* border-right: solid 1px #b2b4b7; */
		width: 565px;
		padding: 20px 20px 20px 20px;
		min-height: 600px;
		background: #fff;
		}
		.narrowIntroText { float: left; width: 200px; }
		.introText, .narrowIntroText { margin-top: 3em;}
			.introText p, .narrowIntroText p { margin-bottom: 1em;}
			.introText ul, .introText ol, .narrowIntroText ul, .narrowIntroText ol { margin-left: 2em;}
			.introText ul ul, .introText ol ol, .narrowIntroText ul ul, .narrowIntroText ol ol{ margin-left: 1em;}
			.introText li, .narrowIntroText li { margin-bottom: 0.5em;}
			.introText h1, .narrowIntroText h1 { font-size: 22px; font-weight: normal; margin-top:0.5em;margin-bottom:0.2em;color: #00688F; }
			.introText h2, .narrowIntroText h2 { font-size: 18px; font-weight: normal; margin-top:0.5em;margin-bottom:0.2em;color: #00688F; }
			.introText h3, .narrowIntroText h3 { font-size: 14px; font-weight:bold; margin-top:0.5em;margin-bottom:0.2em;color: #00688F; }
	
		
	#nosto {
		clear: both;
		background: transparent url(/pics/innopark/nostoalue.gif) no-repeat;
		padding-top: 50px;
		margin-left: -20px;
		margin-top: 50px;
		padding-left: 30px;
		}		
		
			#nosto h2 {
			text-indent: -10000px;
			background: transparent url(/pics/innopark/h2-nosto.gif) no-repeat;
			height: 30px;
			margin-bottom: 20px;
			width: 150px;
			}
		
			
		.nosto {
			width: 160px;
			float: left;
			margin-right: 20px;
			}	
			
			
		.nosto h3 {
			/* background: transparent url(/pics/innopark/h3-nosto.gif) 0px 2px no-repeat; 
			padding-left: 30px;*/
			font-size: 14px;
			margin-bottom: 10px;
			}	
			
		
h3 {
	color:#00688F;
	font-family:Arial,Helvetica,sans-serif;
	font-size:16px;
	font-weight:bold;
	margin:0;
	padding:5px 0 10px;
	}		
		
		
#logocolumn {
		margin: 20px 0 0 0;
		}		
		
		

/* links for subpages */	
#sp-ekstranet {
	position: absolute;
	margin-top:20px;
	}
#sp-newsletter {
	position: absolute;
	margin-left: 100px;
	}			

#news {
	/* position: absolute; */
	float: left;
	width: 180px;
	margin-left: 20px;
	margin-top: 150px;
	}		
		
		
	.bulletin h2 {
		color:#004563;
		font-family:arial,verdana;
		font-size:11px;
		height:19px;
		margin:0;
		padding:1em 0 0.5em 0;
		text-indent:8px;
		width:180px;
		border: 1px solid #bebfc2;	
		background:#fff;	
		}
	
	.bulletin {
		position: relative;
		font-family:arial,verdana;
		font-size:11px;
		margin-top: 15px;
		padding:0;
		width:180px;
		}
	.bulletinHeader { position: absolute; left: 162px;top:0px; background:#fff url(/pics/innopark/bulletin-header.gif) no-repeat scroll;width: 20px;height: 19px;}		
		
	.bulletin ul {
		list-style-type:none;
		padding:10px;
		position:relative;
		width: 160px;
		border-left: 1px solid #bebfc2;	
		border-right: 1px solid #bebfc2;
		border-bottom: 1px solid #bebfc2;		
	}
		.bulletin li { margin-bottom: 1em;}
	.bulletin .bulletinContent {
		padding:10px;
		position:relative;
		width: 160px;
		border-left: 1px solid #bebfc2;	
		border-right: 1px solid #bebfc2;
		border-bottom: 1px solid #bebfc2;		
			
		}	
	.bulletinArchive { position: absolute; right: 2em; top:1em;} 		
		
	#contentWrapper {
		position: relative;
		padding-top: 100px;
		background: transparent url(/pics/innopark/frontpage.jpg) top center no-repeat;
		border-top: solid 1px #bfbfc3;
		}	

	#contentWrapper-tilavaraukset {
		position: relative;
		padding-top: 100px;
		background: transparent url(/pics/spacereservation/frontpage.gif) top left no-repeat;
		border-top: solid 1px #bfbfc3;
		width: 910px;
		margin: 0 auto;
		} 	
		
		#content {
			float: left;
			width: 558px;
			background: #fff;
			border-top: solid 1px #bfbfc3;
			padding: 20px;
			min-height: 350px;
			border-right: dashed 1px #bfbfc3;
			padding-top: 80px;
			}
		
		/* Content styles */
		/* headelines */
		#content h1 { font-size: 22px; font-weight: normal; margin-top:0.5em;margin-bottom:0.2em;color: #00688F; }
		#content h2 { font-size: 18px; font-weight: normal; margin-top:0.5em;margin-bottom:0.2em;color: #00688F; }
		#content h3 { font-size: 14px; font-weight:bold; margin-top:0.5em;margin-bottom:0.2em;color: #00688F; }
		
		/* paragraphs */
		p { margin-bottom: 0.5em;}
		/* images */
		#content img {}
		#content img.tasattu_vasemmalle { float:left;margin:0.5em 0;margin-right: 1em;} 	
		#content img.tasattu_oikealle { float:right;margin:0.5em 0;margin-left: 1em;}
			#content img.email { position:relative;margin:0;padding:0;top:2px; left: -0.3em;margin-right:-0.2em;}
		
		#content ul, #content ol {
			margin-left: 2em;			
		}
		
		#content ul ul, #content ol ol{
			margin-left: 1em;
		}
		
		#content li {
			margin-bottom: 0.5em;			
		}
		
		#rightCol {
			float:left;
			width: 220px;
			min-height: 350px;
			padding-top: 20px;
			padding-left: 10px;
		}	
			.naviOn {
				background: #fff;
				border-top: solid 1px #bfbfc3;
			}
			.naviOff {}
		#rightColNav {
			position: relative;
			top: 10px; 
			}
			#rightColNav ul { list-style-type: none;width: 90%;}
			#rightColNav li { margin-bottom: 0.5em;border-bottom: 1px solid #ebebeb;padding-bottom:0.2em;}
			#rightColNav li a { text-transform: uppercase;font-weight: bold;}
			#rightColNav ul ul { margin-left: 1em;}
			#rightColNav li li { border:none;padding:0;margin-top:0.2em;margin-bottom:0;}
			#rightColNav li li a { color:#000;text-transform: none; font-weight: normal; }
			#rightColNav li li li a#selected { text-decoration: none;}
			#rightColNav a:hover { text-decoration: underline;}
			#rightColNav a#selected { text-decoration: none; font-weight: bold;}


#content-footer {
	clear:both;
	background: transparent url(/pics/innopark/content-footer.gif) top center no-repeat;
	height: 200px;
	}		
	
	#footer p {
		color: #fff;
		padding: 10px;
	}
	
	#content-footer-tilavaraukset {
	clear:both;
	background: transparent url(/pics/spacereservation/bgFooter.gif) top center no-repeat;
	height: 200px;
	margin: 0 auto;
	}	
	
	#content-footer {}

	/*
	 * Other Modules
	 * ***********************
	 */
	
	/* Bulletin Manager 2 
	 * /pagetemplates/bulletinmanager2.jsp 
	 * ***********************************
	 */
	#bm2 #rss { position: absolute; left: 570px;}
	#content #bm2 ul { list-style-type: none; margin: 0;}
	#content #bm2 #msgList li { border-bottom: 1px dashed #bfc1c3; margin-bottom: 1em;font-size: 11px; }
	#content #bm2 #msgList li a { font-size: 12px; font-weight:bold;}
	
	.spaceDescription { border-bottom: 1px dashed #bfc1c3; padding-bottom:0.5em; margin-bottom: 1em;font-size: 11px; }
	.spaceDescriptionLink { clear:both;width:100%;text-align:right; }
	
	/* Form designer */
	
	/*
	 * Floorplan
	 * /pagetemplates/facilities.jsp & facilities_floor_*.jsp
	 * *******************************************************
	 */

	   #areaOverview {
		   float: left;
		   position:relative; 
		   width: 460px;
		   height: 440px;
		   border: 1px solid #B2B3B7;
		   padding: 0px 0px 0px 0px;
 		 }
  
			  #floor {
			   position: relative;
			   width: 100%;
			   height: 2em;
			   margin: 0px 0px 0px 0px;
			   padding: 0px 0px 0px 0px; 
			   border-bottom: 1px solid #B2B3B7;  
			  }
			  
			  #floor ul { margin: 5px 0px 5px 12px;padding: 0px 0px 0px 0px;}
			 	#floor li { display: inline;font: normal bold 16px arial;color:#787878;margin: 0px 20px 0px 0px;padding: 0px 0px 0px 0px;}
			  	#floor li a { color:#FFFFFF;background:transparent url(/pics/innopark/floorplan/b-floor.gif) 4px 8px no-repeat;margin: 0px 0px 0px 0px;padding: 10px;text-decoration: none;vertical-align: middle;}
			  	#floor li a:hover { background:transparent url(/pics/innopark/floorplan/b-floor-active.gif) 4px 8px no-repeat; }
			  	#floor li a.floorPlanActive { background:transparent url(/pics/innopark/floorplan/b-floor-active.gif) 4px 8px no-repeat; }
			  
			  #map_area {}
			  
			  #infotext, #infotextArea  { float: left; padding: 0px 0px 0px 0px;width: 84px; padding: 2px; border: 1px solid #b4b5b9; margin-left: 1%;}
			  .infotext { position:relative; width: 80px;margin-top: 0px;padding: 0px;font-size: 11px;}
				#content  .infotext h3 { background: #00a9ca;color:#fff;font-size: 11px;font-weight: bold;padding: 1em;}
			    .infotext ul { list-style-type: none; margin-left: 10px;margin-top: 10px;padding: 0px 0px 0px 0px;width: 90%;}
			    .infotext li { list-style-type: none; border-bottom: 1px solid #ddd; } 
			    #infotext div.infotext p, 
				#infotextArea  div.infotext p { margin: 0px 10px 0px 10px; padding: 0px 0px 0px 0px; color: #00688F;}
				#infotext p , #infotextArea p { margin: 5px 0px 0px 0px; padding:0px; }
			    .infotext div { margin: 0px;padding: 2px 0px 0px 0px;border-bottom: 1px solid #B2B3B7;text-align: center;font-weight: bold;height:23px;}
			    .active { background: transparent url(/pics/innopark/floorplan/hover-floor.gif) 0px 0px no-repeat;}
			  	
				.helpText { clear: both; position: relative; top: 10px; }
					.helpText p { font-size: 11px;}
				
				
				#floorsDescription { position: relative; padding: 5px; /* border: 1px solid #b4b5b9; */clear: both; top: 20px;margin-bottom: 20px;}				
				#floorsDescription h2 {   background: #00a9ca; color:#fff; margin:0;padding: 0.2em; }
			  	#floorsDescription p { margin-top: 1em;}
			    
			    /** Innopark Steel pohjaratkaisujen esittäminen */
			  	#infotextArea ul#legend { list-style-type:none;margin-top:1em;}
			  	#infotextArea ul#legend li { display:block;height:26px;text-indent:3em;font-size:11px;margin-bottom:0.5em;padding-top:0.5em;}
			  	#infotextArea ul#legend  li.facilitiesSteelCommon { background:transparent url(/pics/innopark/floorplan/steel/li-common.gif) no-repeat;}
			   	#infotextArea ul#legend li.facilitiesSteelRestaurant {background:transparent url(/pics/innopark/floorplan/steel/li-restaurant.gif) no-repeat;}
			   	#infotextArea ul#legend li.facilitiesSteelConference  {background:transparent url(/pics/innopark/floorplan/steel/li-conference.gif) no-repeat;}
			  
			  
/*
	* Facility Services Presentation Carousel
	* /_inc/facilityServicesSnippet.vm
	* ***********************************************
*/

	#facilityServices {
		float: right;
		width: 300px;
		height: 220px;
		overflow: hidden;
		margin-top: 3.7em;
		margin-left: 10px;
	}
		#facilityServices div { position: relative; height: 350px;}
			#facilityServices div h3 { font-size: 14px;}
			#facilityServices div h3 a { text-decoration: none; color: #00688F; }
				#facilityServices div img.tasattu_vasemmalle { float: left; margin-right: 1em;}
				#facilityServices div img.tasattu_oikealle { float: right; margin-left: 1em;}
		#facilityServices div .spaceDescriptionLink { width: 100%; text-align: right;clear:both;}


/* 
 * innopark-phonebook 
 * pagetemplates/innopark-phonebook.jsp
 * **********************************
*/

a.editPerson, a.removePerson { text-indent: -99999px; display:inline-block; width: 12px; height: 12px; } 
a.editPerson { background: url(/pics/extranet/editPerson.gif) no-repeat;}
a.removePerson { background: url(/pics/extranet/removePerson.gif) no-repeat; }
a.min, a.max { text-indent: -999999px; display: block;width: 10px; height: 10px; overflow: hidden; padding:0;margin:0; }
a.min { background: url(/pics/extranet/minMax.gif) 0 -10px no-repeat;   }
a.max {  background: url(/pics/extranet/minMax.gif) 0 0 no-repeat; }
p.addPerson { border: 1px solid #ddd; background:#fff; padding: 0.2em; width: 40%;}
p.addPerson a { display: block; height: 24px; background: url(/pics/extranet/addPerson.gif) left center no-repeat; padding-left: 30px; padding-top: 4px; font-size: 11px; font-weight: bold;}
a.companyNameLink { display: block; margin-left: 0.2em; }

div.companyInfo { padding-bottom: 2em;}

table.staffTable tr td, table.companyInfoTable tr td { padding: 5px; }
table.companyInfoTable { width: 100%; border-collapse: collapse;} /* Information - address, phone number, etc.. first table in div.companyInfo */
	table.companyInfoTable td { width: 25%;}	
table.staffTable { width: 100%; border-collapse: collapse; } /* Staff - names, occupations, etc.. second table in div.companyInfo */
	table.staffTable tr.even { background: #eff0f0; border-bottom: 1px dashed #fff; }
	table.staffTable tr.odd { background: #e5e6e6; border-bottom: 1px dashed #fff;}
		table.staffTable th { text-align: left; font-size: 12px; color: #fff; background: #b3b4b7; padding: 0.2em 1%; width: 25%;border-bottom: 2px solid #fff;}
		table.staffTable td { width: 23%; padding:0 2%;}