@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 {
	margin: 0;
	padding: 10px;
	border-bottom: 1px solid #212121;
}
.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); }
	.accessibility { background-image: url(../i/bg/accessibility.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; 
	background-position: 0px 0px;
	}		
	.henry { background-image: url(../i/bg/henry.jpg); }
	.jim { background-image: url(../i/bg/jim.jpg); }
	.dimith { background-image: url(../i/bg/dimith.jpg); }
	.umut { background-image: url(../i/bg/umut.jpg); }
	.will { background-image: url(../i/bg/will.jpg); }
	.karen { background-image: url(../i/bg/karen.jpg); }
	.amanda { background-image: url(../i/bg/amanda.jpg); }
	.raj { background-image: url(../i/bg/raj.jpg); }
	.wendy { background-image: url(../i/bg/amanda.jpg); }
	
#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: .80;
		}
		.bodywrapper p {
			opacity: 1;
			background: black;
		}	
	.directorwrapper {
		width: 350px;
		margin: 10px 0 0 15px;
		font-size: 100%;
		opacity: .80;
		}
		.directorwrapper p {
			opacity: 1;
			background: black;
		}
		.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: center;
		float: right;
		padding: 150px 20px 15px 150px;
		z-index: 1;
		}
		#homecontent h1, #homecontent h2 { 
			border: none ; 
		}

	#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
*/

.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;
	}