/*
Theme Name: EngineInteractive
Theme URI: http://enginei.com
Description: Interactive Agency
Version: 1.0
Author: Engine Interactive
Author URI: http://enginei.com
Tags: engine interactive, agency
*/

@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";

/**
* STYLE GUIDE
**/

/*DEBUG*/
/*
#wonderwall{background-color: purple;}
.box{background-color: red;}
*/

/*TYPOGRAPHY*/
	/*
	TYPOGRAPHY : 
	font-size, line-height (when not related to height),
	font-family, color, font-size, text-decoration, font-weight, text-transform, text-align
	http://www.fonts.com/findfonts/detail.htm?productid=169914
	http://www.fonts.com/findfonts/detail.htm?productid=169910
	http://store1.adobe.com/cfusion/store/html/index.cfm?store=OLS-US&event=displayFontPackage&code=216
	*/
	
	/*
		fonts.com
		font-family:'PMNCaeciliaW01-75Bold';
		font-family:'PMNCaeciliaW01-85Heavy';
		font-family:'OfficinaSansITCW01-Book 734509';
		font-family:'OfficinaSansITCW01-Bold';	
	*/
	

	@import url("http://fast.fonts.com/t/1.css?apiType=css&projectid=b7caf512-cc6d-4501-bfb8-132f9a8aa5d9");
	@font-face{
	font-family:"PMNCaeciliaW01-75Bold";
	src:url("fonts/9bd4aa31-b713-46ea-98be-4ee7144485d3.eot?iefix") format("eot");}
	@font-face{
	font-family:"PMNCaeciliaW01-75Bold";
	src:url("fonts/9bd4aa31-b713-46ea-98be-4ee7144485d3.eot?iefix");
	src:url("fonts/c8018977-bfbd-4a76-a48d-fa0be4da75ef.woff") format("woff"),url("fonts/1f750230-9c70-43f4-ae5c-e8d00c419fda.ttf") format("truetype"),url("fonts/0006ae28-8833-490d-82c5-b4f373a137c5.svg#0006ae28-8833-490d-82c5-b4f373a137c5") format("svg");
	}
	@font-face{
	font-family:"PMNCaeciliaW01-85Heavy";
	src:url("fonts/b18c2183-94c9-43d7-8bd7-4e030cf7749b.eot?iefix") format("eot");}
	@font-face{
	font-family:"PMNCaeciliaW01-85Heavy";
	src:url("fonts/b18c2183-94c9-43d7-8bd7-4e030cf7749b.eot?iefix");
	src:url("fonts/b644e35b-6214-4f76-ad61-4d66c2fa99a9.woff") format("woff"),url("fonts/c9cabe33-9d11-4955-8794-4ca2b540eaad.ttf") format("truetype"),url("fonts/e7a29f78-41d4-4ecc-8cab-2fa675292349.svg#e7a29f78-41d4-4ecc-8cab-2fa675292349") format("svg");
	}
	@font-face{
	font-family:"OfficinaSansITCW01-Book 734509";
	src:url("fonts/e4f88d1f-2f5e-49a0-9361-9fcdc5bfc795.eot?iefix") format("eot");}
	@font-face{
	font-family:"OfficinaSansITCW01-Book 734509";
	src:url("fonts/e4f88d1f-2f5e-49a0-9361-9fcdc5bfc795.eot?iefix");
	src:url("fonts/60567f88-1ef5-4f2c-9951-3ce3845f9967.woff") format("woff"),url("fonts/ec8c3086-5408-4f25-97d0-f1f4c7014668.ttf") format("truetype"),url("fonts/d29fed54-ae01-49ef-94e2-3e3fb9df3f70.svg#d29fed54-ae01-49ef-94e2-3e3fb9df3f70") format("svg");
	}
	@font-face{
	font-family:"OfficinaSansITCW01-Bold";
	src:url("fonts/2f0ec777-1dee-443a-8545-9f7f99463c7c.eot?iefix") format("eot");}
	@font-face{
	font-family:"OfficinaSansITCW01-Bold";
	src:url("fonts/2f0ec777-1dee-443a-8545-9f7f99463c7c.eot?iefix");
	src:url("fonts/de07363b-ce31-46ce-aea6-f035147ac203.woff") format("woff"),url("fonts/c2aa6294-4649-4459-8985-3ea6c56ca7a9.ttf") format("truetype"),url("fonts/d6cda294-df79-4dd0-9a04-87653b44cb98.svg#d6cda294-df79-4dd0-9a04-87653b44cb98") format("svg");
	}	
	
	/*
	@font-face {
	    font-family: 'PMNCaeciliaW01-85Heavy';
	    src: url('fonts/pmn_caecilia_85_heavy_small_caps__oldstyle_figures-webfont.eot');
	    src: url('fonts/pmn_caecilia_85_heavy_small_caps__oldstyle_figures-webfont.eot?#iefix') format('embedded-opentype'),
	         url('fonts/pmn_caecilia_85_heavy_small_caps__oldstyle_figures-webfont.woff') format('woff'),
	         url('fonts/pmn_caecilia_85_heavy_small_caps__oldstyle_figures-webfont.ttf') format('truetype'),
	         url('fonts/pmn_caecilia_85_heavy_small_caps__oldstyle_figures-webfont.svg#PMNCaeciliaW01-85Heavy') format('svg');
	    font-weight: normal;
	    font-style: normal;	
	}
	
	@font-face {
	    font-family: 'PMNCaeciliaW01-75Bold';
	    src: url('fonts/pmn_caecilia_75_bold_small_caps__oldstyle_figures-webfont.eot');
	    src: url('fonts/pmn_caecilia_75_bold_small_caps__oldstyle_figures-webfont.eot?#iefix') format('embedded-opentype'),
	         url('fonts/pmn_caecilia_75_bold_small_caps__oldstyle_figures-webfont.woff') format('woff'),
	         url('fonts/pmn_caecilia_75_bold_small_caps__oldstyle_figures-webfont.ttf') format('truetype'),
	         url('fonts/pmn_caecilia_75_bold_small_caps__oldstyle_figures-webfont.svg#PMNCaeciliaW01-75Bold') format('svg');
	    font-weight: normal;
	    font-style: normal;	
	}
	
	@font-face {
	    font-family: 'OfficinaSansITCW01-Book 734509';
	    src: url('fonts/itc_officina_sans_book-webfont.eot');
	    src: url('fonts/itc_officina_sans_book-webfont.eot?#iefix') format('embedded-opentype'),
	         url('fonts/itc_officina_sans_book-webfont.woff') format('woff'),
	         url('fonts/itc_officina_sans_book-webfont.ttf') format('truetype'),
	         url('fonts/itc_officina_sans_book-webfont.svg#OfficinaSansITCW01-Book 734509') format('svg');
	    font-weight: normal;
	    font-style: normal;	
	}
	
	@font-face {
	    font-family: 'OfficinaSansITCW01-Bold';
	    src: url('fonts/itc_officina_sans_bold-webfont.eot');
	    src: url('fonts/itc_officina_sans_bold-webfont.eot?#iefix') format('embedded-opentype'),
	         url('fonts/itc_officina_sans_bold-webfont.woff') format('woff'),
	         url('fonts/itc_officina_sans_bold-webfont.ttf') format('truetype'),
	         url('fonts/itc_officina_sans_bold-webfont.svg#OfficinaSansITCW01-Bold') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}
	*/
	
	html{font-size: 1em; line-height: 1em;}
	body{font-family: 'OfficinaSansITCW01-Book 734509' , helvetica, arial, sans-serif; color: #7b7b7b; font-size: 67%; line-height: 1.2em;}
	strong,b{font-family: 'OfficinaSansITCW01-Bold' , helvetica, arial, sans-serif;}
	p{font-size: 1.3em; line-height: 1.4em;}
	a,a:link,a:visited,a:hover,a:active{color: #2c94db; text-decoration: none;}
	.pg p a:hover{border-bottom: 1px dotted #2c94db;}
	
	h1,h2,h3,h4,h5,h6{font-family: 'PMNCaeciliaW01-75Bold' , helvetica, arial, sans-serif;}
	h3{font-family: 'PMNCaeciliaW01-85Heavy' , helvetica, arial, sans-serif;}
	
	h1{font-size: 3.0em; line-height: 3.2em; font-weight: normal; text-transform: uppercase; text-align: center;}
	h2{font-size: 1.2em; line-height: 1.5em; font-weight: normal; text-transform: capitalize;}
	h3{font-size: 1.1em; line-height: 1.4em; font-weight: normal; text-transform: capitalize;}
	h4{font-size: 1.5em; line-height: 1.7em; font-weight: normal; text-transform: uppercase;}
	h5{font-size: 1.1em; line-height: 1.6em; font-weight: normal; text-transform: uppercase;}
	h6{font-size: 1.3em; line-height: 1.5em; font-weight: normal; text-transform: capitalize;}
	
	.pg h2{font-weight: bold;}
	.pg h3{font-weight: bold;}
	
	#footer{font-size: 1em;}
	#footer h5{font-size: 1.3em; line-height: 25px; color: #bfbfbf;}
	
	#nav.main ul li a{
		font-family: 'PMNCaeciliaW01-75Bold' , helvetica, arial, sans-serif; font-size: 1.2em; text-transform: uppercase;
		-ms-text-shadow: 1px 1px 1px #d5d5d5;
		-o-text-shadow: 1px 1px 1px #d5d5d5;
		-moz-text-shadow: 1px 1px 1px #d5d5d5;
		-webkit-text-shadow: 1px 1px 1px #d5d5d5;
		text-shadow: 1px 1px 1px #d5d5d5;
	}
	
	#nav.main ul li a:hover{color: #268fd7;}		
	#nav a{color: #808080;}
	#nav a:hover{color: #268fd7;}
	#nav.main ul li.current-menu-item a{color: #268fd7;}
	#searchform .searchfield{font-size: 1em; color: #838383;}	
	
	/*MAIN NAV SECTIONS*/
	body.work #nav.main ul li.menu-item-work a{color: #268FD7;}
	body.company #nav.main ul li.menu-item-company a{color: #268FD7;}
	body.awards #nav.main ul li.menu-item-awards a{color: #268FD7;}
	body.contact #nav.main ul li.menu-item-contact a{color: #268FD7;}	
		
	#banner{color: #4d4d4d; overflow: hidden; position: relative;}	
	#banner h1{color: #333333; text-align: left; font-size: 2.4em; line-height: 1em; font-weight: normal;}
	#banner h3{color: #c2c2c2; text-transform: uppercase; font-size: 1.2em; line-height: 1em; font-weight: normal;}
	
	.frame h2{color: #333333; text-align: left; font-size: 2em; line-height: 1em; font-weight: normal; text-transform: uppercase; margin: 2px 0 8px 0;}
	.frame .content p{margin: 1px 0 20px 0; font-size: 1.2em; white-space: normal;}
	.frame .content .num{color: #6b6b6b; text-align: left; font-size: 1.8em; line-height: 1em; font-weight: normal; text-transform: uppercase;}
	
	.frame.awards .content h2{font-family: 'OfficinaSansITCW01-Bold' , helvetica, arial, sans-serif; font-size: 2.2em; margin: 5px 0; color: #333; font-weight: normal; text-align: center;}
	.frame.awards .content h3{font-family: 'OfficinaSansITCW01-Bold' , helvetica, arial, sans-serif; font-size: 1.6em; line-height: 1em; margin: 2px 0; font-weight: normal;}
	.frame.awards .content{text-align: center;}
	.frame.awards .content p{margin: 0;}
	#nav_awards{font-family: 'OfficinaSansITCW01-Bold', helvetica, arial, sans-serif;}
	
	#banner.dark {color: #e7e7e7;}
	#banner.dark h1{color: #e7e7e7;}
	#banner.dark h3{color: #c2c2c2;}
	
	#banner.light {color: #4d4d4d;}
	#banner.light h1{color: #333333;}
	#banner.light h3{color: #848484;}
	
	/*FB post type*/
	#banner .hero.facebook .inner{font-family: Helvetica, Arial, sans-serif; font-size: 2em; line-height: 1.2em; color: #2c2c2c;}
	#banner .hero.facebook .inner h1{font-size: 1em; line-height: 1.2em; font-weight: bold;}
	#banner .hero.facebook .inner h1 a{font-family: Helvetica, Arial, sans-serif; color: #085794;}
	#banner .hero.facebook .inner .date{color: #95948f; font-size: 9pt; font-weight: normal;}
				
	.box , .box a, a.box{ color: #626262; }
	.box .content p{font-size: 1.2em; line-height: 1.3em;}
	.box h2{color: #333333; text-transform: uppercase; font-size: 1.4em; line-height: 1em;}
	.box h3{color: #6b6b6b; text-transform: uppercase; font-size: .8em; line-height: 1em;}	
	.box a.floor{color: #fff; text-decoration: none;	font-size: 1.2em; text-align: center;}	
	#footer{text-transform: uppercase;}
	#footer a{color: #848484;}
	#footer a:hover{color: #111111;}
	.box h2, .box h2 a{color: #333333;}
	/* CTA and BUTTON TYPE */
	a.cta{
		font-size: 1em;		
		text-decoration: none;
		text-align: center;
		color: #fff;	
	}
/*END TYPOGRAPHY*/

/*globals*/
a{outline: 0;}

/*HTML*/
html{height: 100%; background: #e6e6e6;}
body{min-height: 100%; min-width: 960px; background: url('images/bg-body.png') top center repeat;}
p{margin: 1px 0px;}
div{position: relative;}
#header_wrapper{background: url('images/bg-header-repeat.png') 50% -14px repeat-x;}
#header{background: url('images/bg-header.png') 50% -14px no-repeat;}

/* CTA */
a.cta{
	height: 26px; line-height: 26px;	
	width: auto;	
	display: inline-block;
	border: 1px solid #fff;
	padding: 0 25px 0 10px;
	position: relative;
}

a.cta span.icon{
	display: block; position: absolute; top: 7px; right: 7px; width: 11px; height: 11px;
	background: url('images/icon-cta.png') top left no-repeat;
}

a.cta.icon{
	display: block; width: 108px; height: 28px; padding: 0; margin: 0; border: 0;
	background-image: url('images/sprite-cta.png');
	background-position: -110px -30px;
	background-repeat: no-repeat;	
}

.dark a.cta.icon{background-position: -110px 0px;}

a.cta.icon.view{background-position: 0 -30px;}
.dark a.cta.icon.view{background-position: 0 0px;}

a.cta.icon.site{background-position: -220px -30px;}
.dark a.cta.icon.site{background-position: -220px 0px;}

a.cta.icon:hover{background-position: -110px -60px;}
a.cta.icon.view:hover{background-position: 0 -60px;}
a.cta.icon.site:hover{background-position: -220px -60px;}

a.cta.icon.facebook{width: 174px; background-position: -176px -90px;}
a.cta.icon.facebook:hover{background-position: 0 -90px;}

/*FORM DEFAULT*/
form ul li{padding: 10px; position: relative; overflow: hidden;}
form ul li label,form ul li input,form ul li textarea, form ul li select{
	padding: 5px; width: 200px; float: left;
}
form ul li label{text-align: right;}
form ul li input{text-align: left;}
input.submit{text-align: center; width: auto; cursor: pointer;}

/*PAGE*/ /*STAGE*/
#page{width: 960px; margin: auto; overflow: visible; position: relative;}
#stage{width: 960px; background: none; float: none; overflow: visible; position: relative;}
.pg{height: auto;}
.pg.narrow{width: 575px; margin: auto;}
.content_wrap{
	/* background: url('images/bg-page-company.png') top center no-repeat; */
	margin: 40px 0 200px 0;
}
body.home .pg{}

#page.full, #stage.full{width: auto;}


/*HEADER*/
#header{z-index: 300;}
#header .header_top{height: 60px; width: 960px; margin: auto; overflow: hidden;} /*was 74px*/
#header .skip_to_content{display: none;}

/*NAV LIST*/
.menu ul, ul.menu{text-align: center;}
.menu ul li, ul.menu li{display: inline-block; padding: 10px;}
.menu ul li a, ul.menu li a{padding: 10px;}

/*MAIN NAV*/
#nav_wrap{}
#nav{
	clear: both; background: none; z-index: 100;			
	width: 960px; height: 45px; overflow: hidden; /*was 54 h*/
	margin: auto;
}

#nav.main ul{width: 960px; margin: auto;}
#nav.main ul li{padding: 0; margin: 0;}
#nav.main ul li a{
	height: 45px; line-height: 45px;
	display: block; padding: 0 24px; 	 
	background: none;
}

/*BANNER*/
#banner_wrap{
	background: url('images/bg-shadow.png') top center repeat-x; height: 555px; padding-top: 16px; margin-top: -16px;
}
#banner_repeat{background-color: black; background-position: top center; background-repeat: repeat; background-image: none;}
#banner{
	background-color: none; background-position: top center; background-repeat: no-repeat; margin: 0 auto 0 auto; position: relative;	
}
#banner h1{margin: 6px 0 1px 0;}
#banner .banner_content{width: 960px; margin: auto;}
#banner .pg , #banner .post, #banner #loader{height: 525px;}
/*BANNER OVERRIDE STYLES*/
#banner .cta{margin-top: 10px;}
#banner .post_content{position: absolute; top: 215px; right: 15px; width: 326px;}
#banner .hero{margin: 0 0 0 -40px; width: 675px; height: 525px; overflow: hidden;}
#banner .hero .mask{width: 675px; height: 525px; position: absolute; z-index: 200;}

#banner .hero.facebook .mask{background: url('images/bg-facebook-mask.png') 0 0 no-repeat; opacity: 1;}
#banner .hero.facebook .mask a{display: block; width: 350px; height: 350px; position: absolute; top: 130px; left: 120px;}
#banner .hero.facebook .inner{width: 350px; height: 350px; position: absolute; top: 130px; left: 120px; background: url('images/bg-facebook-inner.png') 0 0;}
#banner .hero.facebook .inner .content{z-index: 1; margin: 73px 0 0 65px; padding-bottom: 30px; height: auto; overflow: hidden; background: url('images/bg-facebook-content.png') bottom left no-repeat;}
#banner .hero.facebook .inner .date{display: block; position: relative; position: absolute; bottom: 0; left: 130px;}

/*SIDEBAR*/
#sidebar{width: 200px; padding: 10px; background: #aaa; float: right;}

/*FOOTER*/
#footer .footer_content{text-align: center;}

/*FOOTER NAV*/
#nav_sub a{text-decoration: none;}

/*CONTENT*/
.header_content {width: 960px; margin: auto;}
.footer_content {width: 960px; margin: auto; height: 40px;}

/* Push footer to bottom */
#wrapper{position: relative; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px;}
#footer, .push{height: 60px; clear: both;} 

.copyright{ height: 20px; line-height: 20px; display: inline-block;}
 
/*SOCIAL*/
.fb-like{width: 80px; overflow: hidden; display: inline-block;}

/* ENGINE BRAND STYLES */
/* ENGINE BRAND STYLES */
/* ENGINE BRAND STYLES */

a#logo{
	display: block;
	width: 50px; height: 36px; background: url('images/logo-engine-interactive.png') 50% 0px no-repeat; text-indent: -1000px;
	margin: 12px auto 0 auto;
}
a#logo:hover{	
	background: url('images/logo-engine-interactive.png') 50% -60px no-repeat;
}

.gear{
	position: absolute;
	width: 28px; height: 28px;
	top: 0; left: 0;
	background-image: url('images/icon-gear-large.png');
	background-position: top left;
	background-repeat: repeat;
	z-index: 100;
}
.gear.one{
	background-image: url('images/icon-gear-small.png');
	width: 19px; height: 19px;
	top: 41px; left: 107px;
}
.gear.two{
	background-image: url('images/icon-gear-large.png');
	top: 8px; left: 770px;
}

/*main frame for company , work and awards*/
.frame{
	width: 960px; height: auto; margin: 10px 0 30px 0; text-align: center; position: relative; overflow: visible;
}
.work .frame{min-height: 450px; overflow: hidden; padding: 10px 0;} /*need padding so shadow is inside frame*/
.work .frame .slider{width: auto; white-space: nowrap;}
.work .frame .slider .slide{overflow: visible; width: 960px; float: left;}
.work .frame .slider .link{display: none;}
.frame .intro{
	width: 450px; overflow: visible; float: left; margin-left: 90px; text-align: center; padding-top: 60px;
	z-index: 20;
}
.frame .content{
	width: 340px; overflow: hidden; float: right; margin-right: 60px; padding-top: 60px;
	text-align: left;
	z-index: 99;
}

.frame .overlay{
	width: 960px; height: 450px; display: block; background-position: top center; background-repeat: no-repeat;
	position: absolute; top: 0; left: 0;
	z-index: 2;
}

.frame .overlay.over{z-index: 30;}

.frame .content a.cta{float: right;}

.frame a.browse{
	background-image: url('images/icon-nav-arrow-02.jpg');
	background-position: 0 0;
	background-repeat: no-repeat;
	display: block; position: absolute; top: 250px; width: 35px; height: 41px;
	z-index: 99;
}
.frame a.browse.prev{background-position: 0 0; left: 0;}
.frame a.browse.next{background-position: -35px 0; right: 0;}
.frame a.browse.prev:hover{background-position: 0 -41px;}
.frame a.browse.next:hover{background-position: -35px -41px;}

.frame a.browse.client.prev{left: 0; background-position: 0 -82px;}
.frame a.browse.client.next{right: 0; background-position: -35px -82px;}
.frame a.browse.client.prev:hover{background-position: 0 -123px;}
.frame a.browse.client.next:hover{background-position: -35px -123px;}

/*award frame*/
.frame.awards{height: 450px; min-height: 450px; background-position: bottom center; position: relative; background-repeat: no-repeat;} /*background changes on award inline*/
.frame.awards .content{width: 800px; float: none; margin: 0 auto 0 auto; padding: 210px 0 0 0;}
.frame.awards .slide{width: 320px; height: 450px; position: absolute; top: 0; z-index: 0;}
.frame.awards .slide.one{left: 0; background-position: top left;}
.frame.awards .slide.two{left: 320px; background-position: top center;}
.frame.awards .slide.three{right: 0; background-position: top right;}

/*company frame*/
.frame.company{height: 450px; min-height: 450px; overflow: hidden; margin: 0 0 -30px 0;}
.frame.company .mask{height: 450px; width: 960px; position: absolute; top: 0; left: 0; z-index: 110; background: url('images/mask-frame.png') top center no-repeat;}
.frame.company .reel{width: auto; overflow: visible; position: relative;}
.frame.company .reel .img{width: auto; overflow: visible; position: relative;}
	
.frame.company .reel .sprite{border: 0px solid #ccc; position: absolute; top: 0; left: 0; z-index: 100; background-position: top left; background-repeat: no-repeat;}
	
.frame.company .reel .sprite-digital{background-image: url('images/sprite-digital.gif'); width: 452px; height: 186px; top: 108px; left: 1530px;}
.frame.company .reel .sprite-immersive{background-image: url('images/sprite-immersive.gif'); width: 782px; height: 292px; top: 170px; left: 2335px;}
.frame.company .reel .sprite-power{background-image: url('images/sprite-power.gif'); width: 392px; height: 73px; top: 194px; left: 4172px;}
.frame.company .reel .sprite-machine{background-image: url('images/sprite-machine.gif'); width: 111px; height: 267px; top: 0px; left: 4768px;}
.frame.company .reel .sprite-gear{background-image: url('images/sprite-gear.gif'); width: 50px; height: 50px; top: 178px; left: 7096px;}	
	
.box{
	position: absolute;
	display: block;
	width: 343px; height: 100px;
	background-image: url('images/bg-box-01.png');
	background-position: 0 -16px;
	background-repeat: no-repeat;
}

.box .content{height: 63px; margin: 22px 10px 0px 115px; overflow: hidden;}
.box h2{padding: 1px 0 1px 0;}
.box h3{padding: 1px 0 3px 0;}
.box .thumb{position: absolute; width: 99px; bottom: 6px; left: 10px; text-align: center;}
.box .thumb img{margin: auto;}

.box.spot{background-image: url('images/bg-box-02.png');}
.box.spot.key0{top: 0; left: 0;}
.box.spot.key1{top: 0; right: 0;}
.box.spot.key2{top: 100px; left: 134px; z-index: 100;}
.box.spot.key3{top: 100px; right: 134px; z-index: 100;}

.box.award{background-image: url('images/bg-box-03.png'); width: 267px; top: 0; left: 344px;}

.box.fb{width: 133px; background-image: url('images/bg-box-01.png');}
.box.fb .content{margin: 15px 10px 0px 10px; height: 78px; display: block;}
.box.fb.key0{top: 100px; left: 0; z-index: 100;}
.box.fb.key1{top: 100px; right: 0; z-index: 100;}

.box .icon.new{width: 45px; height: 44px; background-image: url('images/icon-new.png'); float: right; margin: 4px 2px 0 0;}
.box .icon.facebook{width: 10px; height: 20px; background-image: url('images/icon-facebook.png'); float: right;  margin: 10px 8px 0 0;}

.box.hi{background-position: 0 -132px;}
.box:hover{background-position: 0 -132px;}
.box:hover .icon.new{background-position: 0 -44px;}
.box:hover .icon.facebook{background-position: 0 -20px;}
.box.hi .icon.facebook{background-position: 0 -20px;}
.box.hi .icon.new{background-position: 0 -44px;}

/*ENGINE PAGE STYLES*/

/*HOME PAGE*/
#wonderwall{ margin: 0 auto 200px auto; height: 232px; width: 955px;}

/*COMPANY*/
#nav_drag{background: url('images/bg-line-pixel.png') center left repeat-x; z-index: 120;}
#nav_drag .content{width: 960px; margin: auto;}
#nav_drag .handle{
	width: 68px; height: 58px;
	overflow: hidden;
	background-image: url('images/icon-gears-anim.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

/*AWARDS*/


/*CONTACT*/
body.contact #wrapper{
	background: url('images/bg-page-contact.jpg') 50% 58px no-repeat;		
}
body.contact #stage{margin: 0 0 200px 0;}
body.contact .pg{min-height: 650px; padding-top: 30px;}
body.contact .copy-main{text-align: center; z-index: 200;}
body.contact .copy{position: relative; width: 500px; margin: auto; z-index: 200;}
body.contact .copy p{margin: 0 0 10px 0;}
body.contact .copy p:first-child {padding: 0 0 10px 0; border-bottom: 1px dashed #ccc;}
body.contact .copy-one{margin-top: 450px; text-align: center;}
#globe{
	width: 500px; height: 500px; margin: 0;
	position: absolute; top: 110px; left: 50%; margin-left: -250px;
	background: url('images/bg-globe.png') 50% 50% no-repeat;		
}
#globe .pin{
	display: block;
	position: absolute; top: 108px; left: 152px;
	width: 35px; height: 50px;
	background: url('images/icon-pin.png') top left no-repeat;
}

#globe .pin .label{
	display: block; width: 100px; height: 30px; position: absolute; top: -5px; left: 25px; color: #7b7b7b;
	display: none;
}

#globe a.pin:hover .label{display: block;}

/*awards*/
#nav_load{
	background: url('images/bg-line-pixel.png') center left repeat-x;
	height: 25px;
	margin-top: 30px;
	margin-bottom: 200px;
	position: relative;	
	overflow: visible;
	padding: 1px;
	clear: both;
}
#nav_load .container{
	width: 960px; margin: auto;
	/*border: 1px solid green;*/
}
#nav_awards{
	width: auto;
	width: 670px;
	/*border: 1px solid red;*/
	overflow: hidden;
	margin: auto;
	height: 60px;
	z-index: 1;
	position: relative;	
}

#nav_load ul.nav.browse.left{float: left; left: 120px; position: relative; z-index: 90;}
#nav_load ul.nav.browse.right{float: right; right: 120px; position: relative; z-index: 90;}

#nav_load ul.work.nav.browse.left{float: left; left: 20px; position: relative; z-index: 90;}
#nav_load ul.work.nav.browse.right{float: right; right: 20px; position: relative; z-index: 90;}

#nav_awards ul.static{	
	text-align: center;
	height: 25px;
	overflow: visible;
	display: block; 
	position: absolute; top: 0; right: 0;
	white-space: nowrap;
	width: auto;
}
#nav_awards ul li{
	display: block; margin: 0; padding: 0 10px; position: relative; overflow: visible;
	z-index: 99; white-space: nowrap; float: left;
}
/*
#nav_awards ul li{border: 1px solid red;}
#nav_awards ul li.dyn{border: 1px solid blue;}
*/

#nav_awards ul li a{
	display: block; width: 13px; height: 25px;
	background-image: url('images/icon-nav-btn.png');
	background-position: 0px -3px;
	background-repeat: no-repeat;
	z-index: 99;
}
#nav_awards ul li a:hover{background-position: 0px -33px;}
#nav_awards ul li.hi a{background-position: 0px -63px;}
#nav_load ul.nav li.browse{height: 25px; width: 25px; padding: 0 0 0 0;}
#nav_load ul.nav li.browse a{
	display: block; background-image: url('images/icon-nav-arrow-03.jpg'); width: 25px; height: 25px;
	background-position: 0 -38px; background-repeat: no-repeat;
	z-index: 99;
}
#nav_load ul.nav.dis li.browse a{background: none; opacity: 0;}

#nav_load ul.nav li.browse.next a{background-position: -25px -38px;}
#nav_load ul.nav li.browse.prev a:hover{background-position: 0 -138px;}
#nav_load ul.nav li.browse.next a:hover{background-position: -25px -138px;}

#nav_awards ul span.label{
	display: block; position: absolute; top: -17px; left: -43px; width: 100px; text-align: center;
	color: #2b93dc; font-weight: bold;
	z-index: -10;
	display: none;
}
#nav_awards ul li.hi span.label{
	display: block;
}
#nav_awards ul span.divider{
	display: block; position: absolute; padding: 30px 0 0 5px; left: 0; top: 12px; width: 100px; text-align: left; border-left: 1px solid #ccc;
	color: #999; font-weight: bold;
	z-index: -10;
}

#nav_awards ul li.hidden{display: none;}

/*work slides*/
#nav_hide{position: relative; height: 80px; padding: 1px;}
#nav_browse{text-align: center; clear: both;}
#nav_browse .wrap{
	height: 80px; display: inline-block; position: relative; overflow: hidden; z-index: 99;
	padding: 0 20px;
}

#nav_browse .shade-left{z-index: 1; width: 50%; height: 80px; display: block; position: absolute; top: 0; left: 0; background: url('images/bg-nav-shadow.png') bottom left no-repeat;}
#nav_browse .shade-right{z-index: 1; width: 50%; height: 80px; display: block; position: absolute; top: 0; right: 0; background: url('images/bg-nav-shadow.png') bottom right no-repeat;}

#nav_browse ul{
	position: relative;
	display: inline-block; text-align: center;
	background-image: url('images/bg-line-pixel.png');
	background-position: center left;
	background-repeat: repeat-x;
	height: 20px; z-index: 99;
}
#nav_browse ul li{display: inline-block; margin: 0 22px; padding: 0;}
#nav_browse ul li a{
	display: block; width: 13px; height: 20px;
	background-image: url('images/icon-nav-btn.png');
	background-position: 0px -4px;
	background-repeat: no-repeat;	
}
#nav_browse ul li a:hover{background-position: 0px -34px;}

#nav_browse ul li.hi a{background-position: 0px -64px;}

#nav_browse ul li.primary{margin-left: -1px;}
#nav_browse ul li.ultimate{margin-right: -1px;}
#nav_browse ul li.single{margin: 0px;}

#nav_browse ul li.info a{width: 20px; background-image: url('images/icon-nav-info.png'); background-position: 0px 0px;}
#nav_browse ul li.video a{width: 20px; background-image: url('images/icon-nav-video.png'); background-position: 0px 0px;}

#nav_browse ul li.info.hi a{background-position: 0px -20px;}
#nav_browse ul li.video.hi a{background-position: 0px -20px;}

#nav_browse ul li.info a:hover{background-position: 0px -20px;}
#nav_browse ul li.video a:hover{background-position: 0px -20px;}

/*work*/
#nav_work{	
	width: 870px; 
	margin: auto;
	overflow: hidden;
	margin: -38px auto 200px auto;	
	white-space: nowrap;
	display: block;
	position: relative;
	text-align: center;	
	/*DEV OVERRIDE*/
	/*
	border: 1px solid yellow;	
	overflow: visible;
	*/
		
}
ul.work.nav{padding-top: 38px;}

#nav_work .cover{
	width: 25px; height: 100px;	
	position: absolute;
	background: grey;
	z-index: 100;	
}
#nav_work .cover.left{top: 0; left: 0; background: url('images/mask-nav-work-left.png') top left repeat-y;}
#nav_work .cover.right{top: 0; right: 0; background: url('images/mask-nav-work-right.png') top right repeat-y;}

#nav_work ul.nav{	
	height: 100px;	
	width: 100%;
	overflow: hidden;
	display: block;
	text-align: center;
	position: relative;
	white-space: nowrap;
	hasLayout: true;
	/*DEV OVERRIDE*/
	overflow: visible;
	
		
}
#nav_work ul.nav.static{
	display: block;
	width: auto; 
}

#nav_work ul.nav li{
	display: inline-block;
	margin: 0;
	padding: 0 10px;	
	overflow: hidden;
	position: relative;
	height: 100px;
	width: auto;
	background-position: top left;
	background-repeat: no-repeat;	
	zoom: 1;
}
#nav_work ul.nav li a{
	display: block; 
	height: 100px; width: 110px;
	overflow: hidden;	
	margin: 0;
	padding: 0;	
}

#nav_work ul.nav li.browse{height: 100px; width: 25px; padding: 0 0 0 0;}
#nav_work ul.nav li.browse a{
	display: block; background-image: url('images/icon-nav-arrow-03.jpg'); width: 25px; height: 100px;
	background-position: 0 0; background-repeat: no-repeat;
}
#nav_work ul.nav li.browse.next a{background-position: -25px 0;}
#nav_work ul.nav li{background: url('images/icon-gear.png') 50% 50% no-repeat;}

#nav_work ul.nav li.hide{position: absolute; top: 500px; left: 0;}

	
#nav_work ul.nav li.bing a{background-image: url('images/logo-bing.jpg'); width: 120px;}
#nav_work ul.nav li.anthousa a{background-image: url('images/logo-anthousa.jpg'); width: 122px;}
#nav_work ul.nav li.frans a{background-image: url('images/logo-frans.jpg'); width: 64px;}
#nav_work ul.nav li.verathon a{background-image: url('images/logo-verathon.jpg'); width: 38px;}
#nav_work ul.nav li.wetpaint a{background-image: url('images/logo-wetpaint.jpg'); width: 76px;}
#nav_work ul.nav li.pokemon a{background-image: url('images/logo-pokemon.jpg'); width: 123px;}
#nav_work ul.nav li.nintendo a{background-image: url('images/logo-nintendo.jpg'); width: 147px;}
#nav_work ul.nav li.dreamspark a{background-image: url('images/logo-dreamspark.jpg'); width: 169px;}
#nav_work ul.nav li.bizkids a{background-image: url('images/logo-bizkids.jpg'); width: 150px;}
#nav_work ul.nav li.mstudios a{background-image: url('images/logo-studios.jpg'); width: 119px;}
#nav_work ul.nav li.swedish a{background-image: url('images/logo-swedish.jpg'); width: 71px;}
#nav_work ul.nav li.dpm a{background-image: url('images/logo-dpm.jpg'); width: 99px;}
#nav_work ul.nav li.precor a{background-image: url('images/logo-precor.jpg'); width: 152px;}
#nav_work ul.nav li.starbucks a{background-image: url('images/logo-starbucks.jpg'); width: 80px;}

#nav_work ul.nav li a:hover{background-position: 0 -100px;}
#nav_work ul.nav li.hi a{background-position: 0 -100px;}
#nav_work ul.nav li.browse.prev a:hover{background-position: 0 -100px;}
#nav_work ul.nav li.browse.next a:hover{background-position: -25px -100px;}

/*engine effects*/
.gear{
	-ms-transform: rotate(0deg);	
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-ms-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	transition: all 1s ease-out;
}

/*WP STYLES*/
/*WP STYLES*/
/*WP STYLES*/

#searchform{width: 185px;}
#searchform label{display: none;}
#searchform .searchfield{width: 185px; border: 0px; padding: 5px;}
#searchform .searchsubmit{display: none;}
.post-edit-link{position: absolute; top: 0; right: 0; z-index: 500; padding: 5px; background: #fff; color: #333;}

/*FRAMEWORK STYLES*/
/*FRAMEWORK STYLES*/
/*FRAMEWORK STYLES*/

.shadow{
	-o-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	display: inline-block;
}
.shadow img{display: block;}
.shadow video{display: block;}
.wrap{overflow: hidden; position: relative;}
.col{width: 277px;}
.left{float: left;}
.right{float: right;}
.center{margin: auto;}
.clear{clear: both;}
.icon{overflow: hidden; text-indent: -2000px; background-position: top center; background-repeat: no-repeat;}
.hide{display: none;}
.frame a.browse.hide{display: none;}


/*ipad override*/
/*.header_content{width: 1024px;}*/