html, body { height: 100%; }

body { 
	background-attachment:		fixed;
	background-color:			#000;
	background-image:			url(../_images/bg_body.jpg); 
	background-position:		top center; 
	background-repeat:			no-repeat; 
	margin:						0;
	padding:					0;
	background-size:			cover;
	-moz-background-size:		cover;
	-webkit-background-size:	cover;
	font-family: Verdana, Arial, Helvetica; font-size:12px; color:#fff; 
}

img, div { behavior: url(iepngfix.htc) }

/*EMBEDDED FONTS*/
@font-face {
 font-family: Zekton;
 src: url("../_fonts/zekton_free.eot"); /* EOT file for IE */
}
@font-face {
 font-family: Zekton;
 src: url("../_fonts/zekton_free.ttf"); /* TTF file for CSS3 browsers */
}

/*TEMP LANDING PAGE BEGIN*/

.landingContainer{
	width:100%; margin:0 auto; position: relative; 
	padding-top:25px;
	min-height:500px;
}
.landing_logo{
	display:block;
	margin:0 auto;
	margin-bottom:50px;
}

#redBanner{
	width:100%;
	height:182px;
	background:url(../_images/landing_red_banner_infinite.png) repeat-x;
	text-align:center;
}

#redBannerContent{
	margin:0 auto;
	position:relative;
	display:block;
	width:896px;
	height:182px;
	background:url(../_images/landing_red_banner.png) no-repeat;
	text-align:center;
}

#redBanner p{
	color:#ff1f00;
	font-family:Arial, Verdana, sans-serif;
	font-size:14px;
	margin-top:35px;
}

#redBanner a{
	color:#ff1f00;
	text-decoration:underline;
}

#redBanner a:hover{
	color:#ff1f00;
	text-decoration:none;
}

#redBanner a:visited{
	color:#ff1f00;

}

#redBannerContent h1{
	padding-top:20px;
}

#redBannerContent h2{
	padding-top:27px;
}

.zekton{
	font-family: Zekton, Verdana, Arial, sans-serif;
	color: #050b14;
	font-weight:normal;
	font-size: 40px;
}
/*TEMP LANDING PAGE END*/

a { text-decoration:none; outline:none; color:#60843d; border:0;}
a:hover {text-decoration:none; color:#C6B6A3;}
img { outline:none; color:#60843d; border:0;}
#skip_links, a#navigation, a#content { display: none; }
.small { font-size:10px;  line-height:1.4em;}
p { line-height:2.3em; padding-bottom:10px;}

h2 {clear:both; color:#ff1f00; font-family: 'Times New Roman', Times, Serif; font-size:30px; font-weight:normal;}
h2.border_bottom { width:100%; border-bottom:1px solid #fff; padding:0 0 15px 0;}

#header { display:block; width:1000px; height:211px; margin:0 auto; }
a#ovrfloLogo { display:block; float:left; background: url('../_images/ovrflo_logo.png') no-repeat 31px 29px; width:104px; height:126px; position:relative; text-indent:-9999px; cursor:pointer;}
#nav { display:block; float:right; position:relative; padding-top:32px; padding-right:32px; }
	#nav ul { margin:0; padding:0;}
	#nav li { list-style-type: none; float: left; padding-left:21px;}
	#nav a { font-family: Helvetica, Arial, Verdana; font-size:12px; color:#9fa8b0; font-weight:bold; outline:none; text-transform:uppercase;}
	#nav a:hover { color:#fff; }
	
#subnav { display:block;  width:165px;}
#subnav .backtotop { display:block; background: none; text-align:right; top:-10px;}
#subnav .backtotop span { display:none;}

#subnav ul { background: url('../_images/bg_subnav.png') repeat-y; margin:5px 2px 0 0; padding:20px 20px 20px 0;}
#subnav li { list-style-type: none; display:block; text-align:right; padding: 5px 0;}
#subnav a { font-family: Helvetica, Arial, Verdana; font-size:10px; color:#fff; font-weight:bold; outline:none; text-transform:uppercase;}
#subnav a:hover { color:#ff1f00; }

.scrolltoanchor:hover img{
  opacity:.5;
}


#container {width:1000px; margin:0 auto; position: relative; }
#primary {display:block; float:right; width:777px; padding: 0 33px 0 27px;}
	#primary_home {display:block; float:right; width:937px; padding: 0 33px 0 27px;}
#secondary {display:block; float:left; width:163px; padding:0; margin:0; position:fixed;  }

/** Footer Styles **/
.clearfooter { height: 85px; clear: both; }

#footer { width:100%; background: url('../_images/bg_footer.png') repeat-x; color:#9fa8b0; font-size:10px; height:85px; position:relative; bottom:0;}
	#footer #footerContent { width:967px; margin:0 auto; padding:70px 33px 0px 0;}
	#footer #footerContent p {display:inline;}
	#footer #footerContent a { color:#9fa8b0; }
	#footer ul#socialIcons { margin:0; padding:0; display:inline; float:right;}
	#footer ul#socialIcons li {list-style-type: none; float: left; }
		#footer ul#socialIcons span { padding:0 3px;}
		#footer ul#socialIcons li.facebook, #footer ul#socialIcons li.twitter {padding-left:20px;}
	a#facebookIcon { background: url('../_images/icon_facebook.png') no-repeat; width:48px; height:11px; position:relative; text-indent:-9999px; cursor:pointer;}
	a#twitterIcon {  background: url('../_images/icon_twitter.png') no-repeat; width:40px; height:10px; position:relative; text-indent:-9999px; cursor:pointer;}

/* Capabilities */
.panel p { font: Helvetica, Arial, Verdana; font-style:italic; font-weight:normal; line-height:1.8em;}
.panel h2 { width:650px; border-bottom:1px solid #666; padding:0 0 15px 0;}


/* HOME */

.home_block {display:block; width:937px; height:330px; overflow:hidden;}
.home_block img {float:left;}

.home_block a .title {float:left; width:249px; height:167px; overflow:hidden; background: url('../_images/bg_home_title.gif') repeat-y; margin-bottom:7px; display:block;}
	.home_block a:hover .title {float:left; width:249px; height:167px; overflow:hidden; background: url('../_images/bg_home_title_hover.gif') repeat-y; margin-bottom:7px; display:block;}
	.home_block a .title h3 {color:#fff; font-family: 'Times New Roman', Times, Serif; font-size:30px; font-weight:normal; padding-left:23px; padding-right:40px;}
	.home_block a .title h4.workType {background: url('../_images/bg_h4_home.gif') no-repeat 23px 4px; color:#000; font-family: Arial, Helvetica, Verdana; text-transform:uppercase; font-size:9px; font-weight:normal; padding:0 0 0 33px;}


.home_block .description {width:209px; height:128px; overflow:hidden; background: #fff url('../_images/bg_home_desc.gif') repeat-y; display:block;}
	.home_block .description p {color: #000; font-size:11px; line-height:1.5em; padding:18px 30px 0 23px;}


	/*
		root element for the scrollable.
		when scrolling occurs this element stays still.
	*/
	.scrollable {
		/* required settings */
		position:relative;
		overflow:hidden;
		width: 973px;
		height:330px;
	}

	/*
		root element for scrollable items. Must be absolutely positioned
		and it should have a extremely large width to accomodate scrollable items.
		it's enough that you set the width and height for the root element and
		not for this element.
	*/
	.scrollable .items {
		/* this cannot be too large */
		width:20000em;
		position:absolute;
		clear:both;
	}

	.items div {
		float:left;
		width:973px;
	}

	/* active item */
	.scrollable .active {
		border:2px solid #000;
		position:relative;
		cursor:default;
	}


	/* this makes it possible to add next button beside scrollable */
	.scrollable {
		float:left;	
	}

	/* prev, next, prevPage and nextPage buttons */
	a.browse {
		background:url(../_images/hori_large.png) no-repeat;
		display:block;
		width:30px;
		height:30px;
		float:left;
		margin:40px 10px;
		cursor:pointer;
		font-size:1px;
	}

	/* right */
	a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
	a.right:hover 		{ background-position:-30px -30px; }
	a.right:active 	{ background-position:-60px -30px; } 


	/* left */
	a.left				{ margin-left: 0px; } 
	a.left:hover  		{ background-position:-30px 0; }
	a.left:active  	{ background-position:-60px 0; }

	/* up and down */
	a.up, a.down		{ 
		background:url(../_images/vert_large.png) no-repeat; 
		float: none;
		margin: 10px 50px;
	}

	/* up */
	a.up:hover  		{ background-position:-30px 0; }
	a.up:active  		{ background-position:-60px 0; }

	/* down */
	a.down 				{ background-position: 0 -30px; }
	a.down:hover  		{ background-position:-30px -30px; }
	a.down:active  	{ background-position:-60px -30px; } 


	/* disabled navigational button */
	a.disabled {
		visibility:hidden !important;		
	} 	

	/* position and dimensions of the navigator */
	.navi {
		position:absolute;
		width:200px;
		height:20px;
		top:340px;
		left:40px;
		z-index:6000;
	}


	/* items inside navigator */
	.navi a {
		width:8px;
		height:8px;
		float:left;
		margin:3px;
		background:url(../_images/navigator.png) 0 0 no-repeat;
		display:block;
		font-size:1px;
	}

	/* mouseover state */
	.navi a:hover {
		background-position:0 -8px;      
	}

	/* active state (current page state) */
	.navi a.active {
		background-position:0 -16px;     
	}

/* Portfolio Styles for work section */
.section {padding-bottom:45px; position:relative; display:inline-block; width:100%;}
h3.clientName {color:#ff1f00; font-family: 'Times New Roman', Times, Serif; font-size:22px; font-weight:normal; height:65px; padding-left:8px;}
h4.workType {background: url('../_images/bg_h4_portfolio.gif') no-repeat 8px 4px; color:#9fa8b0; font-family: Arial, Helvetica, Verdana; text-transform:uppercase; font-size:9px; font-weight:normal; padding:0 0 0 18px;}
.portfolioItem { width:250px; height:265px; float:left; margin-right:8px; padding:0 0 0 0;}
.portfolioItem img {padding-top:6px;}

	/*hover states */
	a:hover .portfolioItem {background:white;}
	a:hover .portfolioItem h3, a:hover h4 {color:#000;}
	a:hover .portfolioItem img {-moz-opacity: 0.4;}
	
	
/* Portfolio Detail Popups */

#portfolioPopup { width: 924px; }	
	#portfolioPopup #detail { height: 312px; background:#fff; padding:6px;}
	 	#portfolioPopup #detail #stage { width:560px; height:312px; float:left;}
		#portfolioPopup #detail #description {float:left; width:316px; padding: 0 18px; font-family:Arial, Helvetica, Verdana; font-size:11px; color:#000;}
		
		#portfolioPopup h2 { color:#000; font-family: 'Times New Roman', Times, Serif; font-size:22px; font-weight:normal; height:55px; }
		#portfolioPopup	h3.workType {background: url('../_images/bg_h4_portfolio.gif') no-repeat 0px 4px; color:#000; font-family: Arial, Helvetica, Verdana; text-transform:uppercase; font-size:9px; font-weight:normal; padding:0 0 0 10px;}
	
	#portfolioPopup #options { clear:both; height: 72px; background:#fff; padding:6px; margin-top:21px;}

	#portfolioPopup #options img { padding-right:6px;}

	#portfolioPopup #detail #description .scroll-pane
	{
		width: 100%;
		max-height: 200px;
		overflow: auto;
	}

	/* items inside navigator */
	.portfolioDetailLink a {
		color:#24B5EA;
		text-decoration:none;
	}

	/* mouseover state */
	.portfolioDetailLink a:hover {
		text-decoration:underline;
	}

	/* active state (current page state) */
	.portfolioDetailLink a.active {
		   color:#000;
	}
	.portfolioDetailLink a.visited {
		   color:#000;
	}

/* The Team */

h3.teamName {color:#ff1f00; font-family: 'Times New Roman', Times, Serif; font-size:22px; font-weight:normal; padding-left:8px;}
h4.teamTitle { color:#9fa8b0; font-family: Helvetica, Arial, Verdana; font-size:12px; font-style: italic; font-weight:normal; padding:0 0 0 8px;}
.banner { width:250px; height:265px; float:left; margin-right:8px; padding:0 0 0 0;}
.banner img {padding-top:6px;}

	/*hover states */
	a:hover .banner {background:white;}
	a:hover .banner h3, a:hover h4 {color:#000;}
	a:hover .banner img {-moz-opacity: 0.4;}

	/* Team Detail Popups */

	#bioPopup { width: 524px; background:#fff; padding:25px;}	
		#bioPopup img {padding-right:20px;}
		#bioPopup hr {height:1px; color:#fff; margin: 10px 0;}
		#bioPopup span.bioName {display:block;color:#000; font-family: 'Times New Roman', Times, Serif; font-size:22px; font-weight:normal;}
		#bioPopup span.bioTitle { display:block;color:#000; font-family: Helvetica, Arial, Verdana; font-size:12px; font-style: italic; font-weight:normal; padding:10px 0 0 0px;}
		#bioPopup p {line-height:1.6em;}	
		
		
/* Clients */

.client { width:144px; height:76px; float:left; margin: 0 11px 18px 0; padding:0 0 0 0; background:#ff1f00;}
.client h3.clientName {color:#000; font-family: 'Times New Roman', Times, Serif; font-size:14px; height:30px; font-weight:normal; padding-left:8px;}
.client h4.clientType { color:#fff; font-family: Helvetica, Arial, Verdana; font-size:10px; font-weight:normal; padding:0 0 0 8px;}

	/*hover states */
	a:hover .client {background:white;}
	a:hover .client h3, a:hover .client h4 {color:#000;}
	a:hover .client img {-moz-opacity: 0.4;}

	/* Team Detail Popups */

	#bioPopup { width: 524px; background:#fff; padding:25px;}	
		#bioPopup img {padding-right:20px;}
		#bioPopup hr {height:1px; color:#fff; margin: 10px 0;}
		#bioPopup span.bioName {display:block;color:#000; font-family: 'Times New Roman', Times, Serif; font-size:22px; font-weight:normal;}
		#bioPopup span.bioTitle { display:block;color:#000; font-family: Helvetica, Arial, Verdana; font-size:12px; font-style: italic; font-weight:normal; padding:10px 0 0 0px;}
		#bioPopup p {line-height:1.6em;}	


/* Flexi BG Styles*/

/*
	This next definition doesn't allow the background to get any smaller
	than a predefined size (640x426px in this case). Change the values
	here to match your background image size. The configuration in the
	flexi-background javascript file should also match these values.
*/

@media only all and (max-width: 1000px) and (max-height: 652px) {
	body {		
		background-size:			1000px 652px;
		-moz-background-size:		1000px 652px;
		-webkit-background-size:	1000px 652px;
	}
}

/*
	The next 2 definitions are for support in iOS devices.
 	Since they don't recoginze the 'cover' keyword for background-size
 	we need to simulate it with percentages and orientation
*/

@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
	body { -webkit-background-size: auto 100%; }
}

@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {
	body { -webkit-background-size: 100% auto;}
}
/* All of the following styles only get used when background-size isn't supported */

img#expando { display: none; position: absolute;  z-index: 1; -ms-interpolation-mode: bicubic; } 
.wide img#expando, 
.tall img#expando { display: block; } 
.wide img#expando { height: auto; width: 100%; } 
.tall img#expando { height:	100%; width: auto; }