@charset "UTF-8";
/* ***********************************************
// CSS Document
// 
// Copyright 2009 - RelaTV Media Corp
//
// Contact - josh@relatv.com
// ********************************************* */

/* ************************
 * GENERAL STUFF
 * ********************** */
body {
	margin: 0;
	padding: 5px 0 0 0;
	/*text-align: center;*/
	font-family: Arial, Helvetica, sans-serif;
}
body * {
	margin: 0;
	padding: 0;
}
.preload {
	display: none;
}
.bold {
	font-weight: bold;
}
#container {
	width: 1050px;
	height: 900px;
}
a {
	border: none;
	outline: none;
}
a img {
	border: none;
	outline: none;
}
#containerBg {
	position: relative;
	top: 0;
	left: 0px;
	z-index: 0;
	width: 1000px;
	height: 755px;
	background: url(../images/bg1.jpg) 0px 0px no-repeat;
}
#containerFg {
	position: relative;
	top: 0;
	left: 0px;
	z-index: 1;
	width: 1000px;
	height: 755px;
	background-color: #FFFFFF;
	opacity: 0;
}
#content {
	position: relative;
	width: 1000px;
	height: 755px;
	top: -755px;
	left: 0px;
	z-index: 3;
}
#content #stage {
	width: 998px;
	height: 623px;
}
#content #stageMask {
	width: 898px;
	height: 627px;
	padding: 50px 0 0 100px;
	z-index: 5;
	background-color: #000;
	opacity: .5;
	moz-opacity: .5;
	khtml-opacity: .5;
	filter: alpha(opacity=50);
	position: absolute;
	top: 1px;
	display: none;
}


/* *********************************** *
 * MASTHEAD - CLIENT LOGIN, HEADER STUFF
 * *********************************** */
#masthead {
	width: 1050px;
	height: 38px;
	background: #fff url(../images/mastheadBg.gif) bottom left no-repeat;
}
#masthead form {
	/*position: absolute;
	top: 10px;
	right: 20px;
	*/
	float: right;
	width: 620px;
	height: 28px;
	padding: 5px 0 0 11px;
	margin: 5px 0 0 0;
}
#masthead form input {
	float: left;
	margin-right: 10px;
}
#masthead form label {
	float: left;
	font-size: 12px;
	text-transform: uppercase;
	color: #fff;
	font-weight: bold;
	line-height: 20px;
	margin: 0 10px 0 0;
}
#masthead #logoCaption {
	width: 275px;
	height: 14px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 28px;
	left: 27px;
}
#masthead #phpMsg {
	position: absolute;
	left: 400px;
	top: 15px;
	color: #900;
	
}
#masthead #userBar {
	width: 400px;
	height: 30px;
	float: right;
	text-align: right;
	margin: 7px 100px 0 0;
}
#masthead #userBar p {
	font-size: 11px;
	color: #333;
}
#masthead #userBar p .userName {
	color: #06C;
	font-weight: bold;
}
#masthead #userBar #logout,
#masthead #userBar #clientArea {
	float: right;
	width: 100px;
}
#masthead #userBar #clientArea {
	display: none;
}

/* *********************************** *
 * NAVIGATION BAR AND RELATED ELEMENTS
 * *********************************** */
#content #nav {
	width: 905px;
	height: 31px;
	background: transparent url(../images/navbarEmptyBg.png) 0% 0% no-repeat;
	padding-left: 90px;
	/*border-bottom: 1px solid #000;*/
}
#content #nav a {
	float: left;
	cursor: pointer;
	height: 31px;
	display: block;
	margin: 0 9px 0 0;
	background-position: 50% 40%;
	background-repeat: no-repeat;
	/*border-right: 1px solid #000;*/
}
#content #nav a#navDesign { width: 156px; background-image: url(../images/navVisualDesignOff.png); }
#content #nav a#navConsulting { width: 147px; margin-right: 5px; background: url(../images/navConsultingOff.png) 40% 40% no-repeat; }
#content #nav a#navEngineering { width: 145px; margin-right: 8px; background: url(../images/navEngineeringOff.png) 40% 40% no-repeat; }
#content #nav a#navPlay { width: 70px; background: url(../images/navPlayOff.png) 55% 40% no-repeat; }
#content #nav a#navBios { width: 103px; }
#content #nav a#navContact { width: 120px; background: url(../images/navContactOff.png) 40% 40% no-repeat; }
#content #nav a#navHome { width: 80px;  background: url(../images/navHomeOff.png) 40% 40% no-repeat; }

#home #content #nav a#navHome { display:none; }
#contact #content #nav a#navContact { display:none;}

#content .navOver {
	display: none;
	z-index: 10;
}
#content .navOver .close {
	font-weight: bold;
	color: #7F7F7F;
	cursor: pointer;
	position: absolute;
	top: 5px;
	right: 6px;
	display: block;
	width: 18px;
	height: 18px;
	background-color:#CCC;
	text-align: center;
	padding: 0;
	margin: 0;
	border: 1px solid #7F7F7F;
	line-height: 16px;
}
#content .navOver .close:hover {
	color: #FFF;
}
#content #divDesign {
	width: 527px;
	height: 275px;
	background: transparent url(../images/overDesign.png) top left no-repeat;
	position: relative;
	top: -336px;
	left: 90px;
}
#content #divConsulting {
	width: 599px;
	height: 233px;
	background: transparent url(../images/overConsulting.png) top left no-repeat;
	position: relative;
	top: -294px;
	left: 107px;
}
#content #divConsulting .close {
	top: 17px;
	right: 7px;
}
#content #divEngineering {
	width: 649px;
	height: 341px;
	background: transparent url(../images/overEngineering.png) top left no-repeat;
	position: relative;
	top: -402px;
	left: 165px;
}
#content #divPlay {
	width: 729px;
	height: 355px;
	background: transparent url(../images/overPlay.png) top left no-repeat;
	position: relative;
	top: -416px;
	left: 146px;
	padding-left: 23px;
}
#content #divPlay ul {
	float: left;
	margin: 245px 0 0 0;
	list-style: none;
	width: 360px;
	height: 50px;
	clear: both;
}
#content #divPlay ul li {
	float: left;
	margin-right: 15px;
}
#content #divPlay p {
	float: left;
	margin-top: 5px;
	width: 360px;
	height: 35px;
	font-size: 12px;
	color: #202020;
	clear: both;
}
#content #divPlay p span {
	font-weight: bold;
	float: left;
	display: block;
}
#content .navOver p a {
	color: #666;
	text-decoration: none;
}
#content .navOver p a:hover {
	text-decoration: underline;
}
#content #clearTrigger {
	width: 1000px;
	height: 20px;
	margin-top: 10px;
}