@charset "UTF-8";
/* CSS Document */
/*===================================================================================
The selectors in this stylesheet exist only to reset browsers in a way that
ensures they all start on the same level playing field. Credit for these selectors
goes to Mr. Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
===================================================================================*/
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
		margin: 0;
		padding: 0;
		border: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
		font-family: Helvetica, arial, verdana;
		color:#333;
		line-height: 18px; 
	}

	:focus {
		outline: 0;
		}
	p{
		font-size: 13px;
		margin-bottom:20px; 
	}
	li{
		font-size: 13px;
	}

	body{
		font-size: 62.5%;
		text-align: center;
		letter-spacing:1px;
		background:#f6f6f7 url(../assets/OverallBgDots.gif) repeat-y center top;
		
	}
	
	.wrapper { 
		
		min-height: 100%;
		
		margin: 0 auto; /* the bottom margin is the negative value of the footer's height */
		width:100%;
					

	}
		
		.lockedHeader{
		/*background:url(../assets/headerLockedBg.gif) no-repeat center top;*/
height:30px;
border-top:6px solid #333;
		}
		.unlockedHeader{
			/*background:url(../assets/headerBg.gif) no-repeat center top;*/
height:30px;
border-top:6px solid #333;
		}
	#header{ 
		text-align:left;
		width:100%;
		/*background: url(../assets/myFace_hid.gif) no-repeat 475px top;*/
		height:355px;
		
	}
	#header .p1, #header .p2{
		width:415px;
		
	}
	#header .p1{
		font-weight:bold;
		padding-top:60px;
		clear:both;
		float:left;
	}
	
	
	#header .p2{
		padding:50px 0;
		clear:both;
		float:left;
	}
	.unlockedHeader .container #header .p2{
		padding-top:85px;
	}
	#footer{
		text-align:left;
		width:100%;
		clear:both;
		height:22px;
		
		
	}	
	#footer p,#footer h5{
	color:#bbb;
	}				
	.container {
		margin: 0 auto;
		padding-left:10px;
		width: 850px;
		text-align:left;
	}
	
	#header.nav{
		float:left;
		margin:0 0 30px;
	}
	#footer.nav{
		float:left;
		margin:0;
	}
	
	.nav li{
		display:block;
		float:left;
		width:105px;
		list-style-type:none;
		border-top:6px solid #ff7200;
		padding:5px 0;
		margin-top:-6px;
		margin-right:-5px;
		vertical-align:top;
		font-weight:bold;
	}
	.nav .navActive{
		display:inline-block;
		width:105px;
		list-style-type:none;
		border-top:6px solid #333;
		padding:5px 0;
		margin-right:-5px;
		vertical-align:top;
		font-weight:bold;
	}
	.nav li a:link, .nav li a:visited{
		color:#ff7200;
		text-decoration:none;
		outline:none;
		background:none;
		
	}
	.nav li a:hover{
		color:#333;
		text-decoration:none;
		outline:none;
		background:none;
		
	}
	#footer{
	border-bottom:6px solid #333;
	}
	#footer .nav{
	vertical-align:bottom;
	}
	#footer .nav li{
		border-top:none;
		border-bottom:6px solid #ff7200;
	}
	#footer .nav .navActive{
		
		border-top:none;
		border-bottom:6px solid #333;
		}
	
	.description{ 
	padding:5px 10px 0 ;
	color:#333;
	font-weight:normal;
	}
	.project_title{
	font-size:130%;
		color:#333;
		padding:0 10px ;
		font-weight:normal;
	}
	.project_red_btn{
		color:#ff7200;
		text-decoration:none;
		font-weight:bold;
		padding:10px 10px 0 ;
	}
	hr {
	display:none;
	clear:both;
	}

	p a:link, p a:visited{
		color:#fff;
		text-decoration:none;
		font-weight:bold;
		outline:none;
		background:url(../assets/circleBtnPattern.gif) repeat top left;
		padding:2px;
		-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	}
	p a:hover{
		background:#333;
		outline:none;		

	}	
	
	h1, h2{
	
		text-indent:-10001px;
		height:0;
		
	}
	h3 {
		font-size:130%;
		text-transform:uppercase;
		font-weight:bold;
		margin-bottom:6px;
	}
	h3 span{
		color:#999;
	
	}
	h4{
		font:400% Georgia, "Times New Roman", Times, serif;
		width:585px;
		clear:left;
		padding-top:30px;
	}
	small{
		font-size:80%;
		color:#999999;
	}
	img {
	padding-top:20px;
	}
	#case_study_1 h2{
		text-indent:-10001px;
		background:url(../assets/abcLogo.png) no-repeat;
		height:237px;
		width:350px;
		float:right;
		z-index:2;
		position:absolute;
		margin:-25px 0 0 500px;
	}
	#case_study_2 h2{
		text-indent:-10001px;
		background:url(../assets/debbieLogo.png) no-repeat;
		height:237px;
		width:213px;
		float:right;
		z-index:2;
		position:absolute;
		margin:-75px 0 0 600px;
	}
	#case_study_3 h2{
		text-indent:-10001px;
		background:url(../assets/chopLogo.png) no-repeat;
		height:221px;
		width:398px;
		float:right;
		z-index:2;
		position:absolute;
		margin:-88px 0 0 370px;
	}
	.headerCase{
		border-bottom:2px solid #ccc;
		padding-bottom:10px;
	}
	#case_study_1{
		background:url(../assets/abcBg.gif) no-repeat center top;
		height:425px;
		padding-top:50px;
	
	}
	#case_study_2{
	
		background:url(../assets/debbieBg.gif) no-repeat center top;
		height:730px;
	padding-top:160px;
	}
	#case_study_3{
	background:url(../assets/csBg.gif) no-repeat center top;
		height:476px;
	padding-top:120px;
	}
	#case_study_1, #case_study_2, #case_study_3{
		width:100%;
		clear:both;
		
	}
	
	a.caseStudyBtn:link, a.caseStudyBtn:visited{
	display:inline-block;
	padding:20px;
	background:#f60 url(../assets/circleBtnPattern.gif) repeat top left;
	margin-top:10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	}
	
	a.caseStudyBtn:hover{
			background:url(../assets/circleBtnPatternDark.gif) repeat top left;

	}
	
	.left_column{
		width:410px;
		float:left;
		margin:30px 5px 0 0 ;
		padding-right:5px;
	}
	.right_column{
		width:410px;
		float:left;
		margin:30px 0 0 5px;
		padding-left:5px;
	}
	
	.left_column li{
			padding:0;
			list-style-position:outside;
			margin-left:13px;

	}
	#all_work_navigation{
		width:100%;
		padding:30px 0 20px;
		height:560px;
		float:left;
	}
	.unlockedNav{
				background:url(../assets/navBgUnlocked.gif) no-repeat center top;

	}
	.lockedNav{
				background:url(../assets/navigationBg.gif) no-repeat center top;

	}
	#workNav{
		float:left;
		width:636px;
	}
	#caseNav{
		float:left;
		width:212px;
		
	}
	#caseNav h3, #workNav h3{
		width:auto;
		margin-right:10px;
		border-bottom:2px solid #333;
		font-size:130%;
	}
	
	#all_work_navigation ul{
		padding:0;
		margin:0;
	}
	#all_work_navigation li{
		list-style-type:none;
		float:left;
	}
	#all_work_navigation #caseNav li a{
		
		float:left;
		background-repeat: no-repeat;
		text-indent:-10001px;
		height:150px;
		width:200px;
		margin-top:10px;
		cursor:pointer;
		border:1px solid #ccc;
		
	}
	#all_work_navigation #workNav li a{
		
		float:left;
		background-repeat: no-repeat;
		text-indent:-10001px;
		height:150px;
		width:200px;
		margin-top:10px;
		margin-right:10px;
		cursor:pointer;
		border:1px solid #ccc;
		
	}
	#all_work_navigation #workNav li a:hover, #all_work_navigation #caseNav li a:hover  {
	text-decoration:none;
		background-position: -5000px;
		background:none;
		border:6px solid #ccc;
		text-indent:0px;		height:140px;
		width:190px;
	}
	
	#all_work_navigation span{
		display:block;
	}
	.project_locked  {
		background:url(../assets/lockedProject.jpg) no-repeat;
	}
	#project1 {
		background:url(../assets/abcVideoThumb.jpg) no-repeat;
	}
	#project2 {
		
		background:url(../assets/debbieThumb.jpg) no-repeat;
	}
	#project3 {
		background:url(../assets/chopShopThumb.jpg) no-repeat;
	}
	#project4{
		background:url(../assets/berkleeWebThumb.jpg) no-repeat;
	}
	#project5 {
		background:url(../assets/score-thumb.jpg) no-repeat;
	}
		#project6  {
			background:url(../assets/powerCityThumb.jpg) no-repeat;
			
		}
		#project7  {
			background:url(../assets/disneyRobotThumb.jpg) no-repeat;
		}
		#project8  {
			background:url(../assets/abcFamilyPartyThumb.jpg) no-repeat;
		}
		#project9  {
			background:url(../assets/berkleeMobileThumb.jpg) no-repeat;
		}
		#project10  {
			background:url(../assets/treetop-thumb.jpg) no-repeat;
		}
		 #project11, #project12 {
			margin:10px 10px 0 0;
			background:none;
			border:1px solid #ccc;
			text-indent:0px;
			
			height:150px;
			width:200px;
			float:left;
		}
		 #project11 .project_title, #project12 .project_title{
	font-size:130%;
		
		line-height:130%;
		padding:10px 10px 0;
		font-weight:normal;
	}
		.img {
		margin:0;
		padding:0;
		}

	
	
	
	
	#formBox{
	float:right;
	padding-top:60px;
	padding-right:10px;
	width:415px;
		
	}
	
	form input.formField{
		border:none;
		background:#000 url(../assets/passwordBg.gif) center no-repeat;
		font-size:300%;
		width:310px;
		padding:10px;
		color:#FFF;
		letter-spacing:10px;
		text-align:center;
		height:37px;
	}
	input.formField:focus{
	background:#000;
}

	input.formBtn{
		padding:10px;
		background:#f60 url(../assets/circleBtnPattern.gif) repeat top left;
		border:none;
		width:85px;
		height:57px;
		font-size:160%;
		color:#fff;
		text-transform:uppercase;
		font-weight:bold;
		letter-spacing:0;
		vertical-align:top;
		
 }
 input.formBtn:hover{
 		cursor:pointer;
		background:url(../assets/circleBtnPatternDark.gif) repeat top left;

		color:#FFF;
 }

	/*

      lightbox

	  

*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto; padding:0;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../assets/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../assets/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 100% Helvetica, arial, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-size:130%; font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px;  }