@charset "utf-8";

/*
==============================================
* Filename: main.css
* Version: 2.0.0 (2008-09-25) YYYY-MM-DD
* Website: http://www.whiteloop.com/
* Author: Umut Ahmet / Dimith de Alwis
* Description: Main site styles.

==============================================
== STRUCTURE: ================================
* Page width: 970 px
* Number of columns: 1-2

==============================================
== INDEX: ====================================
_colours
_defaults
_globals

_container	: 	Outer Wrapper
_wrapper	:	Inner Wrapper
_content 	: 	Site Content
_nav 		: 	Site Navbar
_footer 	:	Site Footer

_sIFR 		: 	Flash Replacement Feature
_multibox 	: 	Site Pop-up Feature

==============================================
== _colours: =================================

* Off Black - #231F20
* Red - #EB1D4B
* Silver - #DADADA


==============================================
== _defaults: ================================
*/

* {
	border: 0;
	padding: 0;
	margin: 0;
}
html {
	}
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 75%;
		line-height: 1.2em;
		background: #FFFFFF;
		}
		h1, h2, h3, h4 {
			color: #EB1D4B;
			margin: 0;
			padding: 0;
		}
		h1 { font: normal 170%/1em Arial, Helvetica, sans-serif; padding: 6px 0; border-bottom: 1px dotted #EB1D4B; text-transform: uppercase; }
		h2 { font: bold 125% Arial, Helvetica, sans-serif; padding: 3px 0; color: #FFFFFF; }
		h3 { font: normal 145% Arial, Helvetica, sans-serif; color: #878787; }

		p {
			margin: 10px 0;
			line-height: 1.4em;
			clear: both;
		}
		img {
			border: 0;
		}
		table {
			}
			table td {
				line-height: 1.5em;
			}

/*
============================================
== _globals: ===============================
*/

.clear {
	clear: both;
	width: 95%;
	height: 1px;
	overflow: hidden;
}
.clr_fix {
	clear: both;
	display: block;
}
.hidden {
	position: absolute;
	left: -2000px;
	width: 1000px;
}
.but, .rbut {
	border: 1px solid #CCCCCC;
	color: #EB1D4B;
	padding: 0px 5px 0px 5px;
	font-size: 90%;
	text-decoration: none;
	height: 20px;
	margin-bottom: 2px;
	background-color: #DADADA;
	}
	.but a:hover, .rbut:hover {
		background-color: #EB1D4B;
		color: #DADADA;
		text-decoration: none;
	}
.outline {
	background-color: #DADADA;
	color: #333333;
	padding: 1px;
}
.u_story, .publication {
	margin: 0;
	padding: 10px;
	border-bottom: 1px solid #212121;
}
.publication p {margin:0;}
.publication p.ptitle {font-weight: bold;}
.access { padding: 10px; }
.r { float: right; }
.l { float: left; }
.small { font-size: 90%; }

/*
==========================================
== _container: =============================
*/
noscript {
	text-align: center;
	font-weight: bold;
	}
	noscript p {
		margin: 0 auto;
		padding-top: 4px;
		width: 580px;
		height: 20px;
		background: url(../i/help.gif) white no-repeat;
		background-position: 0px 0px;
	}
#overlay {
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	height: 700px;
	background: url(../i/page_loader.gif) white no-repeat 50% 25%;
	z-index: 20;
	overflow: hidden;
}
#container {
	position: relative;
	margin: 0 auto;
	margin-top: 30px;
	width: 975px;
	z-index: 0;

	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	.home { background-image: url(../i/bg/home.jpg); }
	.about { background-image: url(../i/bg/about.jpg); }
	.clients { background-image: url(../i/bg/clients.jpg); }
	.updates { background-image: url(../i/bg/updates.jpg); }
	.ideas { background-image: url(../i/bg/ideas.jpg); }
  	.people { background-image: url(../i/bg/people.jpg); }
	.publications { background-image: url(../i/bg/publications.jpg); }
	.accessibility { background-image: url(../i/bg/accessibility.jpg); }
	.contact { background-image: url(../i/bg/contact.jpg); }

	#container_inner {
		padding: 15px;
		height: 558px;
	}


#project {
	color: white;
	background: url(../i/project_bg.gif) #212121 repeat-x top left;
}
#directors {
	overflow: hidden;
	background-color: transparent;
	background-repeat: no-repeat;
	}
	.henry { background-image: url(../i/bg/henry.jpg); background-position: 0px 0px; }
	.jim { background-image: url(../i/bg/jim.jpg); background-position: 300px -110px;}
	.dimith { background-image: url(../i/bg/dimith.jpg); background-position: 0px 0px; }
	.umut { background-image: url(../i/bg/umut.jpg); background-position: 0px 0px; }
	.will { background-image: url(../i/bg/will.jpg); background-position: 300px 0px; }
	.karen { background-image: url(../i/bg/karen.jpg); background-position: 0px 0px; }
	.amanda { background-image: url(../i/bg/amanda.jpg); background-position: 0px 0px; }
	.raj { background-image: url(../i/bg/raj.jpg); background-position: 0px 0px; }
	.wendy { background-image: url(../i/bg/amanda.jpg); background-position: 0px 0px; }

#admin_nav {
	text-align: center;
	background: #363636;
	height: 30px;
	}
	#admin_nav_inner {
		width: 900px;
		margin: 0 auto;
		color: #F5F5F5;
		text-align: right;
		padding: 5px;
		font: normal 12px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}
		#admin_nav a {
			color: #F5F5F5;
			text-decoration: none;
			border-bottom: 1px solid #F5F5F5;
			}
			#admin_nav a:hover {
				border-bottom-width: 0;
			}

/*
==========================================
== _wrapper: =============================
*/
#wrapper {
	position: relative;
	float: left;
	height: 98%;
	z-index: 0;
	}
	.homewrapper {
		width: 585px;
	}
	.bodywrapper {
		width: 580px;
		margin-left: 25px;
		font-size: 100%;
		opacity: .85;
		}
		.bodywrapper p {
			opacity: 1;
			background: black;
		}
	.directorwrapper {
		width: 290px;
		font-size: 100%;
		opacity: .80;
		}
		.directorwrapper p {
			opacity: 1;
			background: black;
		}
		.directorwrapper #bodycontent {
			padding: 10px 20px;
			}
			.directorwrapper #bodycontent a {
				border-bottom: 0;
				background: none;
				}
				.directorwrapper #bodycontent a:hover {
					background: none;
				}

/*
==========================================
== _content: =============================
*/
#logo {
	float: right;
	background-color: transparent;
	height: 73px;
	}
#toggle_button {
	position: relative;
	padding: 0;
	background-color: #000000;
	color: #FFFFFF;
	z-index: 1;
	text-align: right;
	height: 20px;
	padding-right: 5px;
	}
	#b_toggle {
		color: #DADADA;
		text-decoration: none;
		background-image: url(../i/more_less.gif);
		background-repeat: no-repeat;
		background-position: 0px -12px;
		}

#info {
	position: absolute;
	z-index: 1;
	bottom: 100px;
	left: 15px;
	}
	#info_but {
		width: 40px;
	}
	#info_box {
		border: 1px solid #EB1D4B;
		background: white;
		padding: 5px;
		font-size: 85%;
		margin-bottom: 5px;
		width: 350px;
		}
		#info_box p a {
			color: #101010;
			text-decoration: none;
			background: #DADADA;
			border-bottom: 1px solid #666666;
			padding: 0 2px;
			}
			#info_box p a:hover {
				color: white;
				background: #333333;
			}
		#info_box p {
			margin: 0;
			padding: 0;
		}
		#i_close {
			width: 30px;
			float: right;
			color: #EB1D4B;
			}
			#i_close:hover {
				text-decoration: none;
			}

#bodycontent {
	position: relative;
	padding: 0 20px 20px;
	background-color: #000000;
	color: #FFFFFF;
	z-index: 1;
	}
	#bodycontent a {
		color: white;
		text-decoration: none;
		background: #333333;
		border-bottom: 1px solid #666666;
		padding: 0 2px;
		}
		#bodycontent a:hover {
			color: #101010;
			background: #DADADA;
		}

	#bodycontent ul, #homecontent ul {
		padding: 0 0 0 20px;

		}
		#bodycontent ul li {
			padding-top: 3px;
			line-height: 1.3em;
		}

/*	#homecontent {
		background-color: transparent;
		position: relative;
		text-align: left;
		float: right;
		padding: 150px 0px 15px 200px;
		z-index: 1;
		}*/
	#homecontent {
		background: white;
		padding: 15px 100px 15px 20px;
		position: absolute;
		right: -213px;
		text-align: left;
		top: 230px;
		width: 390px;
		z-index: 1;
		}
		#homecontent h1 {
			color:#262626;
			font-size:18px;
			text-transform: none;
			line-height:20px;
		}
		#homecontent h1, #homecontent h2 {
			border: none ;
		}
		#homecontent a {
			color: #EB1D4B;
			text-decoration: none;
			/*border-bottom: 1px solid #EB1D4B;*/
			}
			#homecontent a:hover {
				border-bottom: none;
			}
		.home-arrow {
			position:absolute;
			top:60px;
			right:35px;
			border-bottom-width:0px;
			}

  #bodycontent h1 {
    font-size: 2em;
    }
	#bodycontent #pagenums {
		clear: both;
		margin: 10px 10px 0 0;
		position: relative;
		float: right;
		font-size: 85%;
		font-weight: bold;
		}
		#bodycontent #pagenums .pageon {
			padding-bottom: 2px;
			border: 1px solid #999999;
			background-color: #333333;
		}
		#bodycontent #pagenums li {
			text-decoration: none;
			position: relative;
			float: left;
			margin: 3px;
			width: 18px;
			height: auto;
			padding-bottom: 2px;
			text-align: center;
			list-style: none;
			}
			#bodycontent #pagenums li a {
				color: white;
				text-decoration: none;
				border-bottom: 0;
				padding: 0;
				margin: 0;
				display: block;
				background: none;
				border: 0;
				}
				#bodycontent #pagenums li a:hover {
					background: none;
					border: 0;
				}
		#vid_wrapper {
			background: #212121;
			padding: 10px 0;
			margin-bottom: 20px;
			}
			#flow_vid {
				width: 450px;
				margin: 0 auto;

			}
		#gallery {
			}
			#gallery h2 {
				color: #212121;
				}
				#gallery h2 span {
					font-size: 11px;
					font-weight: normal;
				}
			.tbl_gallery td {
				padding: 5px;
			}
/*
==========================================
== _nav: ==============================
*/

#nav {
	position: relative;
	float: left;
	width: 162px;
	z-index: 0;
	font-size: 90%;
	color: #FFFFFF;
	font-family: Trebuchet MS;
	}
	#nav ul {
		list-style: none;
		}
		#nav ul li  {
			display: block;
			list-style: none;
			color: #FFFFFF;
			font-weight: bold;
			text-transform: uppercase;
			text-indent: 10px;
			background: url(../i/nav_bg.gif) no-repeat #666666;
			width: 157px;
			height: 17px;
			margin-bottom: 2px;
		}
		#nav ul li a:link, #nav ul li a:visited {
			text-decoration: none;
			color: #FFFFFF;
			display: block;
			width: 157px;
			height: 17px;
			}
			#nav ul li a:hover{
				text-decoration: none;
				background: #EB1D4B url(../i/nav_bg.gif) no-repeat 0px -17px;
			}
		#nav .on {
			color: #FFFFFF;
			font-weight: bold;
			background: #EB1D4B url(../i/nav_bg.gif) no-repeat 0px -17px;
			}
			#nav .on a:hover{
				height: 14px;
			}

/*
==========================================
== _footer: ==============================
*/

#footer {
	clear: both;
	height: 19px;
	background: url(../i/footer_bg.gif) white no-repeat;
	padding: 5px 10px 2px 10px;
	margin-top: 2px;
	color: #FFFFFF;
	font-size: 90%;
	line-height: 1.3em;
	}
	#footer ul {
		}
		#footer li {
			list-style: none;
			display: inline;
		}
	#footer a {
		text-decoration: underline;
		color: #ccc;
		}
		#footer a:hover {
			text-decoration: none;
			}
	#foot-left {
		float: left;

	}
	#foot-right {
		float: right;
		text-align: right;
		width: auto;
	}

/*
==========================================
== _sIFR: ================================
*/
/*
These "decoy" styles are used to hide the browser text before it is replaced...
the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics
since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may
run into are usually fixed by tweaking these decoy styles
*/
/*
#homecontent .sIFR-hasFlash h1 { visibility: visible; }
#bodycontent .sIFR-hasFlash h1 {    visibility: hidden; font-size: 160%; }
.sIFR-hasFlash h2 {	visibility: hidden; }
.sIFR-hasFlash h3 {	visibility: hidden; }
.sIFR-hasFlash h4 {	visibility: hidden; }
.sIFR-hasFlash h5#pullquote { visibility: hidden; }

.sIFR-flash + div[adblocktab=true] { display: none !important; }/* Hide Adblock Object tab */
/*
.sIFR-flash { visibility: visible !important; margin: 0; }
.sIFR-replaced { visibility: visible !important; }
span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}
*/
/*
==========================================
== _Multibox: ================================
*/
#project {
	padding: 10px;
	font-size: 75%;
	line-height: 1.5em;
	}
	#project a {
		color: white;
		text-decoration: none;
		background: #333333;
		border-bottom: 1px solid #666666;
		padding: 0 2px;
		}
		#project a:hover {
			color: #101010;
			background: #DADADA;
		}

.MultiBoxContainer {
	position: absolute;
	border: 10px solid #212121;
	background-color: #212121;
	color: #000;
	display: none;
	z-index: 2;
	text-align: left;
	/*overflow: hidden;*/
}
.MultiBoxContent {

	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	}
	.MultiBoxTitle {
		position: relative;
		margin: 10px 0 0 35px;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #212121; /* #FFFFFF; */
		font-weight: bold;
		text-align: left;
	}
	.MultiBoxNumber {
		position: relative;
		width: 50px;
		margin: 10px 35px 0 0;
		float: right;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #FFFFFF;
		text-align: right;
	}
	.MultiBoxDescription {
		clear: left;
		position: relative;
		margin: 0 35px 0 35px;
		padding-top: 5px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #FFFFFF;
		text-align: left;
	}
	.MultiBoxLoading {
		background: url(../i/mb/loader.gif) no-repeat center;
	}
.MultiBoxControlsContainer {
	visibility: hidden;
	overflow: hidden;
	height: 0px;
	position: relative;
	}
	.MultiBoxControls {
		width: 100%;
		height: auto;
		position: relative;
		background-color: #212121;
	}
	.MultiBoxPrevious {
		position: absolute;
		background: url(../i/mb/left.png) no-repeat;
		width: 24px;
		height: 24px;
		left: 0px;
		margin-top: 5px;
		cursor: pointer;
		}
		.MultiBoxPreviousDisabled {
			cursor: default;
			background: url(images/leftDisabled.png) no-repeat;
		}
	.MultiBoxNext {
		position: absolute;
		background: url(../i/mb/right.png) no-repeat;
		width: 24px;
		height: 24px;
		right: 0px;
		margin-top: 5px;
		cursor: pointer;
		}
		.MultiBoxNextDisabled {
			cursor: default;
			background: url(images/rightDisabled.png) no-repeat;
		}
	.MultiBoxClose {
		position: absolute;
		top: -26px;
		right: -26px;
		background: url(../i/mb/close.png) no-repeat;
		width: 24px;
		height: 24px;
		cursor: pointer;
	}