body {
	margin: 0;
	padding: 0;
	background-color: #383838;
}

h1, h2, h3 {
	font-family: Geneva, Arial, sans-serif;
	font-weight: normal;
	color: #aaaaaa;
}

h1 {
	font-family: Lucida Grande, Geneva, Arial, sans-serif;
	font-size: 12pt;
	text-align: left;
	color: #ffffff;
	margin: 0;
}

h3 {
	font-family: Lucida Grande, Geneva, Arial, sans-serif;
	font-size: 10pt;
	text-align: left;
	color: #ffffff;
	margin: 0;
	padding-left: 10px;
	
}

p {
	font-family: Lucida Grande, Geneva, Arial, sans-serif;
	font-size: 9pt;
	text-align: left;
	color: #c5c5c5;
	line-height: 150%;
	margin: 0;
	padding: 0;
}

ul {
	font-family: Lucida Grande, Geneva, Arial, sans-serif;
	font-size: 9pt;
	text-align: left;
	color: #c5c5c5;
	line-height: 150%;
	margin-left: 0.75em;
	padding-left: 0.75em;
}

hr {
	width: 100%;
	border: none;
	background-color: #13b5ea;
	color: #13b5ea;
	height: 1px;
}

img {border:none;}

/* Links and Colours */

a.blue:link {color: #13b5ea}
a.blue:active {color: #13b5ea}
a.blue:visited {color: #13b5ea}
a.blue:hover {color: #ffffff}

a.white:link {color: #ffffff}
a.white:active {color: #ffffff}
a.white:visited {color: #ffffff}
a.white:hover {color: #d4d4d4}

.blue {color: #13b5ea}
.blue-large {color: #13b5ea; font-size: 11pt}
.news {color: #000000; font-size: 12px; font-family: Lucida Grande, Geneva, Arial, sans-serif; font-weight: bold}

/* Header */

#nav {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	width: 900px;
	height: 25px;
	background-image: url('images/nav_back.jpg');
}

#header {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	height: 150px;
	background-image: url('images/header.png');
}

/* Content */

#wrap {
	clear: both;
	width: 100%;
	background-color: #000000;
	background-image: url('images/background.jpg');
	background-repeat: no-repeat;
	background-position: top center;
}

#index-feature {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 900px;
	height: 350px;
}

#content-full {
	clear: both;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 40px;
	width: 900px;
}

#nav-work {
	clear: both;
	padding-bottom: 20px;
	width: 900px;
	height: 20px;
}

#content-work {
	clear: both;
	width: 840px;
	padding: 29px;
	border-left: 1px solid #3b3b3b;
	border-right: 1px solid #3b3b3b;
	border-bottom: 1px solid #3b3b3b;
}

#demo-reel {
	clear: both;
	width: 720px;
	margin-left: 60px;
	margin-right: 60px;
	margin-top: 20px;
}

#content-left {
	float: left;
	width: 600px;
	margin-right: 30px;
}

#iframe-container {
	float: left;
	width: 270px;
	height: 320px;
}

#content-right {
	float: left;
	width: 230px;
	background-color: #202020;
	padding: 20px;
}

#twitter-feed {
	float: left;
	width: 270px;
	height: 300px;
	background-color: #202020;
}

.crew-left {
	float: left;
	width: 250px;
	height: 550px;
	background-color: #202020;
	padding: 20px;
	margin-right: 15px;
	margin-bottom: 20px;
}

.crew-right {
	float: left;
	width: 250px;
	height: 550px;
	background-color: #202020;
	padding: 20px;
}

.case-study {
	clear: both;
	width: 840px;
	background-color: #202020;
	padding: 30px;
	margin-bottom: 30px;
}

.logo {
	float: left;
	width: 190px;
	height: 170px;
	padding-right: 26px;
	padding-bottom: 30px;
}

.logo-end {
	float: left;
	width: 190px;
	height: 170px;
	padding-bottom: 30px;
}

.website {
	float: left;
	width: 270px;
	height: 240px;
	padding-right: 26px;
	padding-bottom: 20px;
}

.website-end {
	float: left;
	width: 270px;
	height: 240px;
	padding-bottom: 20px;
}

.video-box {
	float: left;
	margin: 12px;
	width: 250px;
	height: 220px;
}

#fix {
	clear: both;
	width: 900px;
}

/* Footer */

#footer-wrap  {
	clear : both;
	width : 100%;
	background-image: url('images/footer_back.jpg');
	background-repeat: repeat-x;
} 

#footer {
	width : 900px;
	margin-left: auto;
	margin-right: auto;
}

#footer-left {
	float: left;
	width: 630px;
	margin-top: 30px;
	margin-bottom: 30px;
}

#footer-right {
	float: left;
	width: 270px;
	margin-top: 30px;
}

#footer-right p {
	margin: 0;
	padding: 10px 0;
	line-height: normal;
	font-family: Lucida Grande, Geneva, Arial, sans-serif;
	font-size: 7pt;
	color: #c5c5c5;
	text-align: right;
}

#map_canvas {
	width: 600px;
	height: 400px;
}

 /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
			
	#content{
		position:relative;
		}			

/* Easy Slider */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:900px;
		height:350px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:130px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:900px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(images/btn_prev.png) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(images/btn_next.png) no-repeat 0 0;	
		}	
		
/*=NAVIGATION PRIMARY - BASE STYLES
-------------------------------------------------------------------------------------------*/	
#navigation_primary {
	height: 25px;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	background-image: url('images/nav_back.jpg');
}
#navigation_primary ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#navigation_primary li {
	float: left;
	display: block;
	height: 25px;
	width: 110px;
	background: #444 url('images/navigation_primary.jpg') 0 0 no-repeat;
}

/*=NAVIGATION PRIMARY - LIST ITEM - BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/	
#navigation_primary li.home      			   { background-position: 0 0;	}
#navigation_primary li.about     		       { background-position: -110px 0; }
#navigation_primary li.ourwork 			   	{ background-position: -221px 0; }
#navigation_primary li.casestudies     			   { background-position: -332px 0; }	
#navigation_primary li.blog   			   { background-position: -443px 0;	}
#navigation_primary li.thecrew   			   { background-position: -554px 0;	}
#navigation_primary li.contact   			   { background-position: -665px 0;	}

#navigation_primary a {
	display: block;
	height: 25px;
	width: 110px;
	text-indent: -9999px;
	background: #444 url('images/navigation_primary.jpg') 0 -212px no-repeat;
}

	
/*=NAVIGATION PRIMARY - ANCHOR - DEFAULT BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/
#navigation_primary li.home a 				   { background-position: 0 -50px;	}
#navigation_primary li.about a 				   { background-position: -110px -50px; }
#navigation_primary li.ourwork a 			   { background-position: -221px -50px; }
#navigation_primary li.casestudies a 		   { background-position: -332px -50px; }
#navigation_primary li.blog a 			       { background-position: -443px -50px; }
#navigation_primary li.thecrew a 			   { background-position: -554px -50px; }
#navigation_primary li.contact a 			   { background-position: -665px -50px; }
		
/*=NAVIGATION PRIMARY - ANCHOR - HOVER BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/
#navigation_primary li.home.hover a:hover 	   { background-position: 0 0; }
#navigation_primary li.about.hover a:hover 	   { background-position: -110px 0; }
#navigation_primary li.ourwork.hover a:hover   { background-position: -221px 0;	}
#navigation_primary li.casestudies.hover a:hover 	   { background-position: -332px 0;	}
#navigation_primary li.blog.hover a:hover      { background-position: -443px 0; }
#navigation_primary li.thecrew.hover a:hover   { background-position: -554px 0; }
#navigation_primary li.contact.hover a:hover   { background-position: -665px 0; }

/*=NAVIGATION PRIMARY - ANCHOR - CURRENT PAGE BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/	
#home #navigation_primary li.home a 		   { background-position: 0 -25px; }
#about #navigation_primary li.about a 		   { background-position: -110px -25px; }
#ourwork #navigation_primary li.ourwork a      { background-position: -221px -25px; }
#casestudies #navigation_primary li.casestudies a 		   { background-position: -332px -25px; }
#blog #navigation_primary li.blog a 	       { background-position: -443px -25px; }
#thecrew #navigation_primary li.thecrew a 	   { background-position: -554px -25px; }
#contact #navigation_primary li.contact a 	   { background-position: -665px -25px; }

/*=NAVIGATION WORK - BASE STYLES
-------------------------------------------------------------------------------------------*/	
#navigation_work {
	height: 25px;
	width: 899px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	padding-left: 1px;
	padding-top: 1px;
	background-image: url('images/work_nav_back.jpg');
	background-repeat: no-repeat;
}

#navigation_work ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#navigation_work li {
	float: left;
	display: block;
	height: 25px;
	width: 100px;
	background: #444 url('images/navigation_work.jpg') 0 0 no-repeat;
}

/*=NAVIGATION WORK - LIST ITEM - BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/	
#navigation_work li.identity      			{ background-position: 0 0;	}
#navigation_work li.web     		       	{ background-position: -100px 0; }
#navigation_work li.print 			   		{ background-position: -200px 0; }
#navigation_work li.video     				{ background-position: -300px 0; }	

#navigation_work a {
	display: block;
	height: 25px;
	width: 100px;
	text-indent: -9999px;
	background: #000 url('images/navigation_work.jpg') 0 -200px no-repeat;
}

	
/*=NAVIGATION WORK - ANCHOR - DEFAULT BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/
#navigation_work li.identity a 				{ background-position: 0 -50px;	}
#navigation_work li.web a 					{ background-position: -100px -50px; }
#navigation_work li.print a 			   	{ background-position: -200px -50px; }
#navigation_work li.video a 				{ background-position: -300px -50px; }
		
/*=NAVIGATION PRIMARY - ANCHOR - HOVER BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/
#navigation_work li.identity.hover a:hover	{ background-position: 0 0; }
#navigation_work li.web.hover a:hover 		{ background-position: -100px 0; }
#navigation_work li.print.hover a:hover 	{ background-position: -200px 0;	}
#navigation_work li.video.hover a:hover 	{ background-position: -300px 0;	}

/*=NAVIGATION PRIMARY - ANCHOR - CURRENT PAGE BACKGROUND POSITIONS
-------------------------------------------------------------------------------------------*/	
#identity #navigation_work li.identity a 	{ background-position: 0 -25px; }
#web #navigation_work li.web a 		   		{ background-position: -100px -25px; }
#print #navigation_work li.print a  		{ background-position: -200px -25px; }
#video #navigation_work li.video a 			{ background-position: -300px -25px; }


/*--------------------------------------------------------------------------
Type: Reset
Author: Eric Meyer
URL: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
--------------------------------------------------------------------------*/

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }


/* Sliding Boxes - Web */

.boxgrid { 
	width: 250px; 
	height: 220px; 
	margin: 15px; 
	float:left; 
	overflow: hidden; 
	position: relative;
}
				
.boxgrid img { 
	position: absolute; 
	top: 0; 
	left: 0; 
	border: 0; 
}

.boxgrid p { 
	padding-left: 10px;
	color:#afafaf;  
	font-family: Lucida Grande, Geneva, Arial, sans-serif;
	font-size: 8pt; 
}
				
.boxcaption { 
	float: left; 
	position: absolute; 
	background: #000; 
	height: 100px; 
	width: 100%; 
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.captionfull .boxcaption {
	top: 220;
	left: 0;
}
.caption .boxcaption {
	top: 220;
	left: 0;
}