/*-------------------------------------------------------------

Style Sheet (Battlefront)
version:   1.0
author:    Airlock
website:   http://www.airlock.com/

-------------------------------------------------------------*/

/* =Reset CSS
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, sub, sup, 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;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


/* Removes fieldset borders. even on Opea 7 */
fieldset {
	border: 1px solid transparent;
}


/* =Tables
-------------------------------------------------------------*/

table { 
	border-spacing: 0;
	border-collapse: collapse;
}

td {
	text-align: left;
	font-weight: normal;
}

/* =Clearing
-------------------------------------------------------------*/


/* Class for self clearing - use this where ever possible */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* Class for clearing floats */
.clear {
	clear: both;
}


/* 
////////////////////////////////////////////////////////////////////////
=END RESEST - BEGIN SITE SPECIFIC CSS
////////////////////////////////////////////////////////////////////////
*/


body { 
	background-color: #000; 
	color: #fff; 
	font-size: 62.5%; 
	text-align: center; 
	}
	
#container { 
	width: 955px; 
	margin: 0 auto; 
	position: relative; 
	font: normal 1em/1.5em arial, helvetica, sans-serif; 
	text-align: left; 
	}
	
/* 
////////////////////////////////////////////////////////////////////////
= HEADER & NAVIGATION
////////////////////////////////////////////////////////////////////////
*/
	
#header { 
	background: #d0005e url(../images/header.png) repeat-x bottom left; 
	height: 9em; 
	position: relative;
	}
	
#header span#logo { 
	position: absolute; 
	bottom: 0; 
	left:0; 
	text-indent: -9999px; 
	background: transparent url(../images/header.png) no-repeat top left; 
	width: 85px; 
	height: 90px;
	}
	
#header span#logo a	{ 
	display: block; 
	width: 100%; 
	height: 100%; 
	}

#nav ul { 
	color: #fff; 
	font: bold 1.8em/1em "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	 }
	
#nav ul li { 
	margin-top: 3px;
	}



/*
#nav ul li#n-work	{ 
	position: absolute; 
	bottom: 1.8em; 
	left: 202px; 
	}
	
#nav ul li#n-services	{ 
	position: absolute; 
	bottom: 0.5em; 
	left: 202px; 
	}
	
#nav ul li#n-news	{ 
	position: absolute; 
	bottom: 1.8em; 
	left: 202px;
	margin-left: 5.9em;
	}
	
#nav ul li#n-jobs	{ 
	position: absolute; 
	bottom: 0.5em; 
	left: 202px;
	margin-left: 5.9em;
	}
	
#nav ul li#n-contacts	{ 
	position: absolute; 
	bottom: 1.8em; 
	left: 202px;
	margin-left: 11.8em;
	}
	
#nav ul li#n-clients { 
	position: absolute; 
	bottom: 0.5em; 
	left: 202px;
	margin-left: 11.8em; 
	}
*/



#nav ul li#n-work	{ 
	position: absolute; 
	bottom: 1.8em; 
	left: 180px;
	}

#nav ul li#n-what-we-do	{ 
	position: absolute; 
	bottom: 0.5em; 
	left: 180px; 
	}


#nav ul li#n-news { 
	position: absolute; 
	bottom: 1.8em; 
	left: 210px;
	margin-left: 5.9em; 
	}
	
#nav ul li#n-clients { 
	position: absolute; 
	bottom: 0.5em; 
	left: 210px;
	margin-left: 5.9em; 
	}

#nav ul li#n-contacts {
	bottom:0.5em;
	left:238px;
	margin-left:11.9em;
	position:absolute;
	}

	

#nav ul li.selected a {
	color: #000; 
	}	

#nav ul li a { 
	color: #fff; 
	text-decoration: none; 
	}
	
#nav ul li a:hover { 
	color: #000; 
	}

#header dl { 
	position: absolute; 
	bottom: 0.65em; 
	left: 582px; 
	padding-left: 10px; 
	font-size: 1.2em;
	line-height: 1.3em;
	}
	
#header dt { 
	padding-top: 40px;
	font-weight: bold; 
	}
#header dd { 
	color: #e899bc; 
	}
	
#header dd a {
	color: #e899bc; 
	text-decoration: none;
	}
	
#header dd a:hover { 
	color: #fff; 
	}
	

/* 
////////////////////////////////////////////////////////////////////////
= GENERIC SITE WIDE RULES
////////////////////////////////////////////////////////////////////////
*/

div.content	{ 
	margin: 10px 0; 
	clear: both; 
	border-bottom: 2px solid #b90249;
	padding-bottom: 10px;
	}
	
div.content-no-border {
	border-bottom: none;
	padding-bottom: 0;
}
	
div.content	a { 
	color: #b90249;  
	font-weight: bold; 
	}
	
div.content	a:hover	{ 
	color: #fff; 
	text-decoration: none; 
	}
	

		
h1,
h2,
h3,
h4,
h5,
h6 { 
	line-height: 1em; 
	font-weight: bold; 
	}
	
h1,
h2 { 
	font-size: 3.6em; 
	line-height: 1em; 
	color: #b90249; 
	font-family: "AkzidenzGrotesk", "Arial Black", Arial, Tahoma, sans-serif;
	}
	
h3 { 
	font-size: 1.5em; 
	color:#b90249; 
	line-height: 1.7em;
	}

div.title{ 
	margin: 10px 0; 
	clear: both; 
	border-bottom: dotted 1px #7a7a7a;
	padding-bottom: 10px;
	position: relative;
	}
	
div.title h1 { 
	font-size: 5em; 
	}
	
p	{ 
	font: normal 1.25em/1.25em arial, helvetica, sans-serif;
	}

.inner { 
	padding: 10px; 
	}
	
.last { 
	margin-bottom:20px; 
	}

.end { 
	margin-right:0 !important; 
	}
	
div.last-child {
	margin-right: 0 !important;
	}

.right {
	float: right;
}

.left {
	float: left;
}

a.more { 
	font-weight: bold; 
	text-decoration: none; 
	}

a:hover.more { 
	text-decoration: none; 
	}

blockquote p { 
	font: bold 2.7em/1.5em "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	margin-bottom: 0; 
	}

cite { font-style: italic; 
	font-size: 1.5em; 
	line-height: 1.3em; 
	font-weight: bold; 
	margin-bottom: 15px; 
	display: block; 
	}

div.gradient { 
	background: transparent url(../images/gradient.gif) repeat-x; 
	}

a.tags { 
	color: #999999; 
	}

div.tags { 
	font-size: 1.1em; 
	}

div.tags a { 
	font-weight: normal; 
	color: #999999; 
	}

div.tags a:hover { 
	color: #fff; 
	text-decoration: underline; 
	}

div.tags span { 
	display: inline;
	}

div.tags ul { 
	display: inline;
	}
	
div.tags ul li { 
	display: inline;
	}
	
div.border-bottom	{ 
	border-bottom: dotted 1px #7a7a7a;
	}

div.pagination {
	font-size: 1.2em;
	font-weight: bold;
	position: relative;
	padding: 2px 17px;
	display: inline;
}

/* 
////////////////////////////////////////////////////////////////////////
= VIDEOS
////////////////////////////////////////////////////////////////////////
*/
video{
	display:block;
	width:100%;
}
.video img{
	width:100%;
	height:100%;
}
#featured-main .video{
	width:956px;
	height:536px;
}
#graphics .video{
	width:568px;
	height:320px;
}

div.pagination ol, 
div.pagination ol li {
	display: inline;
	padding: 0 2px;
}

div.pagination a {
	color: #ce005d;
	text-decoration: none;
}

div.pagination a:hover {
	color: #fff;
}

div.pagination span.pagination-controls a {
	display: block;
	position: absolute;
	width: 12px;
	height: 20px;
	text-indent: -9999px;
	background: #ce005d;
	top: 0;
}

div.pagination span a.pagination-previous {
	left: 0;
	background: url(../images/arrow-left.gif) no-repeat;
}

div.pagination span a.pagination-next {
	right: 0;
	background: url(../images/arrow-right.gif) no-repeat;
}

div.pagination ol li a.selected {
	color: #fff;
}

div.title div.pagination {
	position: absolute;
	right: 0;
	bottom: 5px;
}


/*
//////////////////////////////////////////////////////////
= HOME PAGE 
//////////////////////////////////////////////////////////
*/

div#intro { 
	float: left; 
	width: 560px; 
	}
	
div#intro p	{ 
	font: bold 3.4em/0.9em "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	padding-bottom: 8px;
	}
	
div#news { 
	float: right; 
	width: 355px; 
	letter-spacing: 0.005em; 
	}
	
div#news h3	 { 
	margin-bottom: -2px; 
	}
	
div#news h3	a { 
	text-decoration: none; 
	}
	
div#news p { 
	margin-bottom: 2px; 
	}
	
div#news p.date	{ 
	color: #b90249; 
	font-weight: bold; 
	font-size: 1.5em; 
	margin-bottom:-6px; 
	}
	
div#news p a { 
	margin: 8px 0; 
	display: block; 
	font-size: 0.95em; 
	}

div.news-entry { 
	margin-bottom: 15px; 
	}

div#featured-image { 
	float: left;
	margin-right:10px; /* ADDED FOR IE6 BUG */
	display: inline; /* STOP DOUBLE MARGIN BUG IE6 */
	width: 580px;
	height: 326px;
	position: relative;
	}
	
div#featured-image span.border {
	z-index: 100;
	position: absolute;
	width: 560px;
	height: 306px;
	display: block;
	top: 0;
	left: 0;
	border: 10px solid #000;
}
	
div#featured-project div.project { 
	float: right; 
	width: 355px;
	} 
	
div#featured-project div.project h3	{ 
	font: bold 1.3em/0.9 "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	color: #fff; 
	margin-top: 10px;
	margin-bottom: 5px; 
	padding-bottom: 8px; 
	border-bottom: dotted 1px #7a7a7a;
	}
	
div#featured-project div.project h4 { 
	font-size: 2.7em; 
	font-family: "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	color: #fff; 
	margin-bottom: 8px;
	}
	
div#featured-project div.project h4 em { 
	color: #b90249; 
	display: block; 
	margin-top: 2px; 
	font-style: normal;
	}
	
div#featured-project div.project h4 em a { 
	text-decoration: none;	
	}
	
div#featured-project div.project p { 
	margin-bottom: 15px; 
	}
	
div#featured-project div.project div.view { 
	margin-top: 10px; 
	}
	
div#featured-project div.project div.view ul {  
	float: left; 
	}
	
div#featured-project div.project div.view ul li a { 
	font-size: 1.2em; 
	margin:0; 
	text-decoration: none; 
	}
	
div#featured-project div.project div.view img { 
	float: right; 
	margin-top: -5px; 
	}
	
div#featured-sub div.project { 
	margin-bottom: 10px; 
	}

div.project	{ 
	float: left; 
	width: 472px; 
	margin-right: 10px; 
	}

div.project img	{ 
	float: left; 
	margin-right: 10px; 
	}

div.project h3 { 
	font: bold 1.5em/1.2em "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	color: #fff; 
	margin-bottom: 5px; 
	}

div.project h3 em { 
	color: #b90249; 
	display: block; 
	font-style: normal;
	}

div.project h3 em a {
	text-decoration: none;
	} 

div.project p { 
	margin-bottom: 5px; 
	}

div.project a.view { 
	text-decoration: none; 
	font-size: 1.2em; 
	margin-top: 5px; 
	display: block; 
	}

div.project a.image {
	position: relative;
	width: 276px;
	height: 157px;
	display: block;
	float: left;
}

div.project a.image img {
	position: absolute;
	width: 276px;
	height: 157px;
	top: 0;
	left: 0;
}

div.project a.image span.border {
	z-index: 100;
	position: absolute;
	width: 256px;
	height: 137px;
	display: block;
	top: 0;
	left: 0;
	border: 10px solid #000;
}

div.project div.inner {
	float: left;
	width: 176px;
}

div.home-project-info {
	min-height: 115px;
}

/*
//////////////////////////////////////////////////////////
= CLIENTS PAGE 
//////////////////////////////////////////////////////////
*/

div#clients	{ 
	padding-bottom: 150px; 
	}
	
div#clients ol { 
	font-size: 3.2em; 
	font-weight: bold; 
	font-family: "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	}
	
div#clients ol li { 
	display: inline; 
	line-height: 1em; 
	}
		
div#clients ol li a	{ 
	color: #b90249; 
	text-decoration: none; 
	}
	
div#clients ol li a:hover { 
	color: #fff; 
	}


/*
//////////////////////////////////////////////////////////
= PROJECTS PAGE 
//////////////////////////////////////////////////////////
*/

div#graphics { 
	float: left; 
	width: 580px; 
	}
	
div#graphics #work-video {
	margin-bottom: 10px;
}	

div#graphics img {
	float: left;
	display: block;
	margin: 0 10px 10px 0;
}

div#project-detail { 
	float: right; 
	width: 373px; 
	}
	
div#project-detail h1 { 
	font-size: 5em; 
	margin: 10px 10px 5px 10px; 
	}

div#project-detail h2 {
	font-size: 2.2em; 
	margin: 0px 10px 8px 10px;	
}

div#project-detail h3 {
	font-size: 1.6em; 
	margin: 10px 10px -2px 10px;
	font-family: "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
}

div#project-detail h1.border,
div#project-detail h2.border {
	padding-bottom: 10px;
	border-bottom: 1px dotted #7a7a7a; 
}
	
div#project-detail p { 
	margin-bottom: 14px; 
	padding: 0 10px; 
	}
	
div#project-detail p.links { 
	font-weight: bold; 
	}
	
div#project-detail ul.links	{ 
	margin:-12px 10px 13px 10px; 
	font-size: 1.3em; 
	color: #b90249; 
	font-weight: bold; 
	border-bottom: 1px dotted #7a7a7a; 
	padding-bottom: 10px; 
	}
	
div#project-detail ul.links	 li	{ 
	line-height: 1.3em; 
	}
	
div#project-detail ul.links	 li a { 
	text-decoration: none; 
	display: block; 
	}
	
div#project-detail div.tags	{ 
	border-bottom: 1px dotted #7a7a7a; 
	padding: 15px 0; 
	margin: 10px 10px 15px 10px;
	}


	
div#project-detail p.all-projects	{ 
	float: left; 
	}

div#project-detail p.all-projects a	{
text-decoration: none;
	} 

div#project-detail ul.sort-projects {
	float: right;
	padding-right: 11px;
	}
	
div#project-detail ul.sort-projects li { 
	display: inline; 
	color: #ce005d; 
	font-size: 1.3em; 
	}

div#project-detail ul.sort-projects li a { 
	text-decoration: none; 
}

/*
//////////////////////////////////////////////////////////
= CONTACT PAGE 
//////////////////////////////////////////////////////////
*/

div#map { 
	float: left; 
	width: 580px; 
	}

div#map div#google-map {
	width: 569px;
	height: 501px;
}

div#address	{ 
	float: right; 
	width: 375px; 
	}
	
div#address	h1	{ 
	padding: 10px 10px 0 10px; 
	}
	
div#address p { 
	font-weight: bold; 
	font-family: "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	line-height: 1em;
	}
	
div#address p.address { 
	padding: 0 10px 10px 10px; 
	font-size: 3em; 
	}
	
div#address p.telephone	{ 
	padding: 10px; 
	font-size: 1.8em; 
	padding-bottom: 0; 
	}
	
div#address div.email	{ 
	padding: 10px; 
	font-size: 1.8em; 
	padding-top: 3px;  
	color: #b90249;
	font-weight: bold; 
	font-family: "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	line-height: 1em;
	}
	
div#address div.email a { 
	text-decoration: none;
	}
	
/*
//////////////////////////////////////////////////////////
= WORK
//////////////////////////////////////////////////////////
*/

div#project-archive	{
	float: left;
	width: 580px;
}

div#project-archive .work-project { 
	float: left; 
	display: inline; 
	width: 183px; 
	margin-right: 10px; 
	margin-bottom: 10px; 
	}
	
div#project-archive .work-project h4 { 
	font-size: 1.5em;  
	margin: 6px 0 0 0; 
	}
	
div#project-archive .work-project p	{ 
	font-size: 1.5em;  
	margin: 3px 0; 
	}
	
div#project-archive .work-project p a { 
	font-weight: bold;  
	}
	
div#project-archive .work-project a:hover,
div#project-archive .work-project .hover a { 
	color: #fff; 
	}
	
div#project-archive .work-project div.tags { 
	margin-bottom: 5px;
	}
	
div#project-archive div.work-project a.image {
	display: block;
	position: relative;
	width: 183px;
	height: 103px;
}

div#project-archive div.work-project a.image img {
	position: absolute;
	top: 0;
	left: 0;
}

div#project-archive div.work-project a.image span.border {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 167px;
	height: 87px;
	border: 8px solid #000;
}

/*
//////////////////////////////////////////////////////////
= NEWS
//////////////////////////////////////////////////////////
*/

div.news-item { 
	float: left; 
	width: 312px; 
	margin-right: 9px; 
	position: relative;
	}

div.news-item img { 
	display: block;
	}
	
div.news-item span.border {
	z-index: 100;
	position: absolute;
	width: 292px;
	height: 157px;
	display: block;
	top: 0;
	left: 0;
	border: 10px solid #000;
}

div.news-item h2, 
div.news-item p.date { 
	font: bold 1.5em/1.2em "Berthold Akzidenz Grotesk Super", "Arial Black", Arial, Tahoma, sans-serif;
	color: #fff; 
	margin-bottom: 3px; 
	}
	
div.news-item h2 a {
	color: #b90249;
	text-decoration: none;
}
	
div.news-item p.date { 
	margin-bottom: 0;
}

div.news-item p { 
	margin-bottom: 1em; 
	}

div.news-item div.tags span {
	display: block;
	float: left;
}

div.news-item div.tags ul {
	display: block;
	width: 250px;
	margin-left: 5px;
	float: left;
}
	
/*
//////////////////////////////////////////////////////////
= FOOTER
//////////////////////////////////////////////////////////
*/

div.footer	{ 
	margin: -13px 0 50px 0; 
	padding: 15px 0 5px 0; 
	color: #808080; 
	border-top: 7px solid #b90249; 
	}

div.footer a {
	color: #808080;
}
	
div.footer p { float: left; 
	width:40%; 
	padding-top: 25px;
	}
	
div.footer ul { 
	float: right; 
	width: 50% 
	}
	
div.footer ul li { 
	float: right; 
	margin-left: 10px;
	}
	
div.footer ul li a { 
	display: block; 
	}
	
div.footer ul li.iai a { 
	text-indent:-9999px; 
	width: 210px; 
	height: 43px; 
	background: #fff url(../images/iai.gif) no-repeat; 
	}
	
div.footer ul li.iai a:hover { 
	background: #fff url(../images/iai.gif) 0 -43px; 
	}
	
div.footer ul li.rar a { 
	text-indent:-9999px; 
	width: 45px; 
	height: 43px; 
	background: #fff url(../images/rar.gif) no-repeat 0 -7px; 
	}

div.footer ul li.rar a:hover { 
	background: #fff url(../images/rar.gif) 0 -50px; 
	}
	
div.footer ul li.ipa a { 
	text-indent:-9999px; 
	width: 116px; 
	height: 43px; 
	background: #000 url(../images/ipa.gif) no-repeat; 
	}
	
div.footer ul li.ipa a:hover { 
	background: #000 url(../images/ipa.gif) 0 -43px;
	 }
	
	
	
body#error-404 #header {
	display: none;
}

body#error-404 div.footer {
	visibility: hidden;
}

body#error-404 div#ascii {
	color: #b90249;
	margin: 50px 0 25px 0;
}

body#error-404 pre {
	font-family: Monaco, "Courier New";
	font-size: 1.6em;
	text-align: left;
	color: red;
}

body#error-404 pre span {
	color: #fff;
}

body#error-404 pre span.orange {
	color: orange;
}

body#error-404 div.content {
	border: none;
}

body#error-404 h1 {
	margin-bottom: 10px;
}

body#error-404 div.footer {
	margin-top: 200px;
}

div#tagged h1 {
	font-size: 5em;
}

div#tagged h2.related {
	font-size: 2.6em;
	clear: both;
	margin-top: 0;
}

div.tagged-news,
div.tagged-projects {
	width: 955px !important;
	border-top: 1px dotted #7a7a7a; 
	padding: 10px 0 0 0;
	margin: 10px 0 0 0;
}

div.tagged-news .row,
div.tagged-projects .row {
	border-bottom: 1px dotted #7a7a7a;
	margin-bottom: 10px;
}

div.tagged-news .last,
div.tagged-projects .last {
	margin-right: 0 !important;
}

.service {
	width: 163px;
	padding: 10px 10px 30px 10px;
	float: left;
	margin-right: 9px;
}

.service h2 {
	font-size: 1.9em;
	margin-bottom: 10px;
}

.service-position-5,
.service-position-10,
.service-position-15,
.service-position-20 {
	margin-right: 0;
}