/*
	* Basic styles for common webbrowsers
	* **************************************

	TOC
	----------------------------
	- General styles
	- Header
		- Logo
		- User info / Logout
	- Frontpage
		- Pick of the Day
		- Bulletins
		- Events
		- Menu of the week
	- Subpage
	- Footer
	- Other templates
	- contentCarousel
	- Phone Book
*/

/* 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, 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;}

/* clearfix */
.clearfix:after {
    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%;
}

a { outline: none;}

span.strong { background: yellow;} /* highlight color for CE */
blockquote { margin-left: 20px;} /* text-indent for CE */

body {
	font-family: arial, verdana, serif;
	font-size: 12px;
	color:#231f20;
}

	#wrapper {
		position: relative;
		width: 900px;
		border: 3px solid #b2b3b6;
		margin: 0 auto;
		margin-top: 20px;
	}
		#header {
			position: relative;
			height: 120px;
			background: url(/pics/extranet/header.gif) repeat-y;
			border-bottom: 1px solid #b2b3b6;
		}
			#logo {
				width: 223px;
				height: 62px;
				background: url(/pics/extranet/logo-innopark.gif) no-repeat;	
				top: 13px;
				left: 14px;
				position: absolute;
				text-indent: -999999px;
			}
			#searchBox { position: absolute; left: 350px; top: 10px; width: 205px;}
				#searchBox input.textField { border: 1px solid #ddd; width: 150px; padding: 0.3em; padding-left: 0.5em;}
				#searchBox input.submitButton { position: absolute; top:0px; right:0px; width: 40px;}
			#headerInfoBox {
				position: absolute;
				background: #eff0f0;
				width: 300px;
				left: 575px;
				height: 85px;
				top: 5px;
				padding: 10px;
				border: 1px solid #b2b3b6;
			}
				#userInfo { 
					float: left;
					width: 170px;
					height: 60px;
					padding-right: 10px;
					border-right: 2px solid #d3d4d5;
					
				}
					#userInfo h4 { font-size: 12px; color: #00a4ca; margin-bottom: 0.7em;}
					#userInfo p { font-size: 11px;}
				#logOut { 
					float: left;
					width: 100px;
					padding-left: 10px;
					text-align: center;
				}				
				
					#logOut a, #logOut input {
						display: block;
						background: url(/pics/extranet/icon-close.gif) center top no-repeat;
						height: 50px;
						width: 100px;
						padding-top: 35px;
						font-size: 12px; 
						color:#231f20;
						text-decoration: none;
						margin: 0 auto;
					}
						#logOut a:hover { text-decoration: underline;}

					#logOut input { border:none; cursor:pointer;}
				
					.forgottenPassword {font-size: 11px; margin-left: 10px; color: #000; }

					#theClock input{
						background:transparent;
						

					}

		#page {
			background: url(/pics/extranet/page.gif) repeat-y;
		}
			#leftCol {
				float:left;
				width: 236px;
				
			}
				#leftCol h1.ekstranet {
					display: block;
					width: 132px;
					height:26px;
					margin-left: 50px;
					margin-top: 1em;
					background: url(/pics/extranet/h3-ekstranet.gif) no-repeat;
					text-indent: -9999999px;
					margin-bottom: 1em;
				}
				#navi {
					position: relative;
					width: 100%;
					border-top: 1px solid #b2b3b6;
				}
					#navi ul { list-style-type:none;}
						#navi li { display: block; width: 226px; padding-left: 10px;padding:0.5em;}
							#navi ul ul { margin-left: 1em;}
								#navi li ul li {  margin-left:1em; padding:0.1em; padding-left: 10px; width: auto;}
									#navi li ul li ul li {  margin-left:0.5em; padding:0.1em;}
								#navi li ul li:hover { background: none;}
									#navi li ul li a { text-indent:0;background: none; height: auto; font-size: 11px;}
									#navi li ul li a#selected { font-weight: bold; text-decoration: underline;}
									#navi li ul li a:hover { background: none; text-decoration: underline;}
							#navi li a { display: block; background: url(/pics/extranet/icon-navi.png) left top no-repeat; text-indent: 2.5em;height: 17px;text-decoration: none; color:#231f20; padding-top: 5px;}
								#navi li:hover { background: #c4e1f1;}	
								/* #navi li a:hover {background: url(/pics/extranet/icon-navi.gif) left bottom no-repeat;} */
								
			#rightCol {
				float:left;
				margin-left: 14px;
				width: 650px;
				padding-top: 2em;
			}
				/* Frontapage */
				#fpLeftCol {
					float: left;
					width: 340px;
					margin-left: 10px;
					
				}
					#pickOfDay {
						position: relative;
						width: 100%;
						min-height: 450px;
						_height: 450px;
						height:auto;
					}
						#pickOfDay img { margin-bottom: 1.5em;}
						
						#pickOfDay h1, #pickOfDay h2 {  font-size: 18px; font-weight: normal; color:#00688f; margin-bottom:0.5em;}
						#pickOfDay p { line-height: 1.5em; margin-bottom: 1em;}
						#pickOfDay a { color:#00aeef; text-decoration: none;}
							#pickOfDay a:hover { text-decoration: underline;}
				#fpRightCol {
					float:left; 
					width: 300px;
				}
					.bulletin {
						position:relative;
						border: 1px solid #b2b3b6;
						width: 95%;
						margin: 0 auto;
						margin-bottom: 1em;
					}
						.bulletin h2 {
							color:#00688f;
							text-transform: uppercase;
							width: 100%;
							text-indent: 0.5em;
							border-bottom: 1px solid #b2b3b6;
							/*font-weight: normal;*/
							font-size:14px;
							padding:0.5em 0;
						}
						.bulletin h2 a { text-decoration:none;color:#00aeef;}
						.bulletin h2 a:hover { text-decoration:underline;}

							.square { position: absolute; right: 15px;width: 20px; height:20px; top: 5px;}
								.darkBlue { background:#00688f;}
								.lightBlue { background: #00aeef;}
						.bulletin ul { margin-left: 1em; list-style-type: none; padding-top: 1em;}
						.rssFeedsListing ul { padding-top:0;}	
							.bulletin li {  font-size: 11px; margin-bottom: 0.5em;}
							.bulletin li a { font-size: 12px;color:#00aeef; text-decoration: none;}
								.bulletin li a:hover { text-decoration: underline;}
							.bulletin .bulletinArchive { position: absolute; right: 1em; top:4.5em;} 		

				
				/* Restaurants menu listing */
				#menu { clear:both; width: 95%; margin: 0 auto; }
					#menu h2 { font-size: 18px; font-weight: normal; color:#00688f; margin-bottom:0.5em;}
					#menu table.menuListing, .menuListingAllWeek{ border-collapse: collapse; border: 1px solid #b2b3b6; width: 100%; margin-bottom: 1em;	}
						#menu table.menuListing tr { vertical-align: top;}
						#menu table.menuListing th { width: 25%;background: #f1f2f2; font-weight: bold; font-size: 14px;padding: 0.5em; text-align: center;color: #00688F;}
						#menu table.menuListing td { width: 25%;border-collapse: collapse; border: 1px solid #b2b3b6; padding: 1em; vertical-align: top;}
						#menu .menuListingAllWeek th { width: 25%;background: #f1f2f2; font-weight: bold; font-size: 14px;padding: 0.5em; text-align: center;color: #00688F; }
						#menu .menuListingAllWeek td { width: 25%;border-collapse: collapse; border: 1px solid #b2b3b6; padding: .5em; vertical-align: top;}
						#menu th a { text-decoration: none; color:#00aeef;}
							#menu th a:hover { text-decoration: underline;}
						#menu .menuListingAllWeek td.weekday { width: 1%;}
						#menu .odd td { background: #eee;}
						#menu .weekChooser { border-collapse: collapse; text-align: center; width: 60%; margin: 0 auto; margin-bottom: 1em;}
						#menu .weekChooser .weekLink a { }
						#menu .weekChooser .theWeek { font-size: 18px; color: #00688F; }
						#menu .weekChooser  .weekDates { font-size: 11px; font-weight: bold;}
						
			
			#content { width: 95%;margin-bottom: 1em;}
				#content h1 { font-size: 18px; font-weight: normal; color:#00688f; margin-bottom:0.5em;}
				#content h2 { font-size: 16px; font-weight: normal; color:#00688F; margin-bottom: 0.5em;}
				#content h3 { font-size: 14px; font-weight: bold; color:#00688F; margin-bottom: 0.5em;}
				#content h4 { font-size: 12px; font-weight: bold; color:#00688F; margin-bottom: 0.5em;}
				
				#content p { margin-bottom: 1em; line-height: 1.5em;}
				
				#content a { color:#00aeef; text-decoration: none;}
					#content a:hover { text-decoration: underline;}
				
				#content ul, #content ol { margin-left: 2em;}
				#content ul ul, #content ol ol { margin-left: 1em;}
					#content li { margin:0.2em;}
					
				#content img.tasattu_vasemmalle { float:left; margin-right:1em; padding: 5px;}
				#content img.tasattu_oikealle { float: left; margin-left: 1em; padding: 5px;}
		
		
		
		
		#footer {
			top: 5px;
			border: 2px solid #b2b3b6;
			position: relative;
			width: 900px;
			margin: 0 auto;
			height: 21px;
			background: url(/pics/extranet/footer.gif) repeat-x;
			text-align: right;
			padding-top: 10px;
			
		}
			#footer p { color:#fff; font-size: 11px;padding-right:1em;}	

/*
 * Other templates
 * ********************
 */

/* 
 * ekstra-phonebook 
 * pagetemplates/ekstra-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%;}




/*
 * contentCarousel
 * ***************
 */

	#contentCarousel {
		position:relative;
		width:100px;
		height:100px;

	}
	
/*
 * Space Reservations
 * 
 */
a#showCompanyReservations { font-size: 11px; color: #00AEEF;}