@import "960.css";
@import "thickbox.css";
@import "colorbox.css";

/* RESET */

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;
	vertical-align: baseline;
}

body {
	font-size: 62.5%;
	font-family: Trebuchet MS, Helvetica, Verdana, Arial, sans-serif;
	line-height: 1;
	background: #0E0204 url(../images/outerWrapper_bg.jpg) no-repeat 100% 0;
}

div#outerWrapper {
	width: 960px;
	height: 550px;
	height: auto !important;
	min-height: 550px;
	margin: 0 auto 30px;
	background: transparent none;
}

/* tables */
table {
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}

/* forms */
fieldset {
	border: none;
}
	fieldset legend {
		display: none;
	}

/* list elements */
ul, ol, li {
	list-style: none;
}
ul.normalList {
	list-style: disc;
	padding: 0 0 0 30px;
}
	ul.normalList li {
		margin: 5px 0;
	}

/* inline elements */
a:hover, a:active, a:focus, a:active{
	outline: none;
	-moz-outline-style: none;
}
a {
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

em, strong {
	font-weight: normal;
	font-style: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

h1, h2, h3, h4, h5, h6 {
	
}

h1 {
	display: block;
	width: 432px;
	height: 135px;
	margin: 20px 0 58px;
}
	h1 a {
		display: block;
		width: 435px;
		height: 135px;
	}
	.vfxheader h1 a {
		background: transparent url(../images/logo_voodoovisualfx.png) no-repeat 0 0;
	}
	.vtheader h1 a {
		background: transparent url(../images/logo_voodootheatre.png) no-repeat 0 0;
	}
		h1 a span {
			display: block;
			width: 100%;
			height: 0;
			overflow: hidden;
			padding: 135px 0 0;
		}

h2 {
	color: #EADA7A;
	font-size: 3.5em;
	font-weight: normal;
	font-family: "Avant Garde", "Century Gothic", sans-serif;
	text-align: center;
	display: block;
	margin: 30px 0;
}
	h2 span {
		display: block;
		width: 100%;
		height: 0;
		overflow: hidden;
		padding: 97px 0 0;
	}
h2.imgRep {
	height: 0;
	overflow: hidden;
	display: block;
}
h2.homeWelcome {
	width: 146px;
	background: transparent url(../images/h2_home_welcome.png) no-repeat 0 0;
	padding: 50px 0 0;
	margin: 10px auto 20px;
}
h2.homeWhoarewe {
	width: 200px;
	background: transparent url(../images/h2_home_whoarewe.png) no-repeat 0 0;
	padding: 50px 0 0;
	margin: 10px auto 20px;
}
h2.homeShowreel {
	width: 145px;
	background: transparent url(../images/h2_home_showreel.png) no-repeat 0 0;
	padding: 50px 0 0;
	margin: 10px auto 20px;
}
h2.who {
	width: 141px;
	background: transparent url(../images/h2_who.png) no-repeat 0 0;
	padding: 60px 0 0;
	margin: 20px auto;
}
h2.showreels {
	width: 215px;
	background: transparent url(../images/h2_showreels.png) no-repeat 0 0;
	padding: 60px 0 0;
	margin: 20px auto;
}
h2.newwork {
	width: 223px;
	background: transparent url(../images/h2_newwork.png) no-repeat 0 0;
	padding: 60px 0 0;
	margin: 20px auto;
}
h2.directing {
	width: 210px;
	background: transparent url(../images/h2_directing.png) no-repeat 0 0;
	padding: 60px 0 0;
	margin: 20px auto;
}
h2.artgallery {
	width: 229px;
	background: transparent url(../images/h2_artgallery.png) no-repeat 0 0;
	padding: 60px 0 0;
	margin: 20px auto;
}
h2.projects {
	width: 174px;
	background: transparent url(../images/h2_projects.png) no-repeat 0 0;
	padding: 60px 0 0;
	margin: 20px auto;
}
h2.contact {
	width: 187px;
	background: transparent url(../images/h2_contact.png) no-repeat 0 0;
	padding: 60px 0 0;
	margin: 20px auto;
}

h3 {
	color: #EADA7A;
	font-size: 1.8em;
	font-weight: normal;
	display: block;
	margin: 10px 0 20px;
	font-family: Century Gothic, Trebuchet MS, Helvetica, Verdana, Arial, san-serif;
}

h4 {
	font-size: 1.2em;
	color: #FFF;
}

h5 {
	font-size: 1.1em;
}

h6 {
	font-size: 1em;
}

div.container_12 {
	position: relative;
}

/* nav */
ul.absNav {
	width: 960px;
	height: 37px;
	position: absolute;
	top: 181px;
	left: 0;
	padding: 0;
	display: block;
	background: transparent url(../images/nav_bg.png) repeat-x 0 0;
}
	ul.absNav li {
		width: 150px;
		height: 31px;
		display: inline;
		float: left;
		font-size: 1.4em;
		margin: 3px 0 0;
		position: relative;
		text-align: center;
		z-index: 1;
	}
	ul.absNav li#home { width: 76px; margin: 3px 17px 0 35px; }
	ul.absNav li#who { width: 82px; margin: 3px 17px 0 18px; }
	ul.absNav li#showreels { width: 133px margin: 3px 17px 0 18px;; }
	ul.absNav li#newwork { width: 127px; margin: 3px 17px 0 18px; }
	ul.absNav li#voodootheatre { width: 189px; margin: 3px 17px 0 18px; }
	ul.absNav li#directing { width: 146px; margin: 3px 12px 0 12px; }
	ul.absNav li#artgallery { width: 143px; margin: 3px 12px 0 12px; }
	ul.absNav li#voodoovfx { width: 144px; margin: 3px 12px 0 12px; }
	ul.absNav li#contact { width: 115px; margin: 3px 17px 0 18px; }
	ul.absNav li.last {
		margin: 3px 0 0 20px;
	}
		ul.absNav li a {
			color: #EADA7A;
			text-transform: uppercase;
			font-family: "Avant Garde", "Century Gothic", sans-serif;
			text-decoration: none;
			display: inline-block;
			margin: 0 auto;
			z-index: 1000;
		}
		ul.absNav li a:hover {
			text-decoration: underline;
		}

/* layout */
div.mainFeature {
	margin: 12px 0 10px;
	height: 0;
	overflow: hidden;
	padding: 330px 10px 0;
	background: transparent url(../images/mainFeature_bg.png) no-repeat 0 0;
}
div.mfVt {
	background: transparent url(../images/mainFeature_bg_vt.png) no-repeat 0 0;
}

div.blinds {
	width: 960px !important;
	height: 25px;
	height: auto !important;
	min-height: 25px;
	background: transparent url(../images/blinds_bg.png) repeat 0 0;
}
	div.blinds p {
		color: #EADA7A;
	}

div.homeFeatureBackground {
	width: 960px !important;
	height: 50px;
	height: auto !important;
	min-height: 50px;
	color: #EADA7A;
	font-size: 1.2em;
	margin: 0 0 10px;
	background: transparent url(../images/feature_bg.png) no-repeat 0 0;
}
	div.homeFeatureBackground div.homeFeature {
		padding: 10px;
		height: 30px;
		height: auto !important;
		min-height: 30px;
		background: transparent url(../images/feature_bg_bottom1.png) no-repeat 0 bottom;
	}
		div.homeFeatureBackground div.homeFeature h3 {
			margin: 10px 0 20px;
		}
		div.homeFeatureBackground div.homeFeature p {
			font-size: 0.91666666666666666em;
			line-height: 2em;
			margin: 10px 0 0;
			display: block;
			color: #CCCCCC;
		}
			div.homeFeatureBackground div.homeFeature p span.emphasize {
				color: #EADA7A;
			}
		div.homeFeatureBackground div.homeFeature img.homeWho {
			border: solid 1px #DFDCB2;
		}
		div.homeFeatureBackground div.homeFeature img.homeWho:hover {
			-moz-box-shadow: 0 0 15px #FCC418;
		}
		div.homeFeatureBackground div.homeFeature div.showReel {
			width: 298px;
			height: 181px;
			margin: 0 0 10px;
		}
			div.homeFeatureBackground div.homeFeature div.showReel a {
				width: 298px;
				height: 0;
				overflow: hidden;
				padding: 179px 0 0;
				border: solid 1px #FFF;
				display: block;
			}
			div.homeFeatureBackground div.homeFeature div.showReel a.vfx { background: transparent url(../images/home_showreel_sprite4.png) no-repeat 0 0; }
			div.homeFeatureBackground div.homeFeature div.showReel a.vfx:hover {
				background: transparent url(../images/home_showreel_sprite4.png) no-repeat 0 -179px;
				-moz-box-shadow: 0 0 15px #FCC418;
			}
			div.homeFeatureBackground div.homeFeature div.showReel a.vt { background: transparent url(../images/home_showreel_sprite4.png) no-repeat -298px 0; }
			div.homeFeatureBackground div.homeFeature div.showReel a.vt:hover {
				background: transparent url(../images/home_showreel_sprite4.png) no-repeat -298px -179px;
				-moz-box-shadow: 0 0 15px #FCC418;
			}

div.subPage {
	
}
	div.subPage p,
	div.subPage blockquote {
		font-size: 1.2em;
		margin: 0 0 20px;
		line-height: 1.4em;
	}
	div.subPage p {
		color: #CCC;
	}
		div.subPage p a {
			display: block;
		}
			div.subPage p a img {
				
			}
			div.subPage p a img.border {
				border: solid 1px #DFDCB2;
			}
			div.subPage p a img.border:hover {
				-moz-box-shadow: 0 0 10px #FCC418;
			}
	div.subPage blockquote {
		color: #999;
	}
	div.subPage ul {
		padding: 0 0 0 20px;
		margin: 0 0 20px;
	}
		div.subPage ul li {
			list-style: disc;
			color: #FFF;
			font-size: 1.2em;
			margin: 0 0 10px;
			line-height: 1.4em;
		}

div.contactDetails {
	
}
	div.contactDetails h4 {
		line-height: 1.8em;
	} 
	div.contactDetails p {
		color: #DFDCB2;
		line-height: 1.8em;
	}
	div.contactDetails ul {
		padding: 0;
	}
		div.contactDetails ul li {
			line-height: 1.8em;
			height: 16px;
			position: relative;
			list-style: none;
			margin: 5px 0 10px;
		}
		div.contactDetails ul li.phone {
			background: transparent url(../images/sprite.png) no-repeat 0 -78px;
		}
		div.contactDetails ul li.email {
			background: transparent url(../images/sprite.png) no-repeat 0 -62px;
		}
			div.contactDetails ul li span.vMid {
				position: absolute;
				top: 2px;
				left: 23px;
				display: block;
				line-height: 1.2em;
				color: #DFDCB2;
			}

div.contactForm {
	
}
	div.contactForm fieldset {
		border: solid 1px #FFF;
		background: #1B1105 none;
		padding: 20px;
		margin: 0 0 20px;
	}
		div.contactForm fieldset p.instructions {
			width: 200px;
			height: 30px;
			color: #999;
			margin: 0;
			position: absolute;
			top: 170px;
			right: 100px;
		}
		div.contactForm fieldset div {
			width: 500px;
			margin: 0 0 10px;
		}
			div.contactForm fieldset div label {
				color: #FFF;
				line-height: 1.8em;
				font-size: 1.5em;
				font-weight: bold;
			}
			div.contactForm fieldset div input,
			div.contactForm fieldset div textarea {
				border: solid 1px #FFF;
				background: #F9E2D5 url(../images/formField_bg.png) repeat-x 0 0;
				padding: 3px;
				font-family: Helvetica, Arial, sans-serif;
				font-size: 1.2em;
			}
			div.contactForm fieldset div input:hover,
			div.contactForm fieldset div textarea:hover,
			div.contactForm fieldset div input:focus,
			div.contactForm fieldset div textarea:focus {
				-moz-box-shadow: 0 0 10px #FCC418;
			}
			div.contactForm fieldset div input {
				
			}
			div.contactForm fieldset div input.submit {
				float: right;
				margin: 5px 0;
				border: none;
				background: transparent none;
				-moz-box-shadow: 0 0 0 #FCC418;
			}
			div.contactForm fieldset div input.textFieldSmall {
				width: 172px;
			}
			div.contactForm fieldset div input.textFieldMedium {
				width: 272px;
			}
			div.contactForm fieldset div textarea {
				width: 488px;
				height: 108px;
			}
	div.contactForm div.notifyPanel {
		
	}
		div.contactForm div.notifyPanel p {
			font-weight: bold;
		}

div.footer {
	border-top: solid 1px #B38E56;
	color: #B38E56;
	height: 30px;
	text-align: center;
	font-size: 1em;
	margin: 0;
	padding: 10px;
}
	div.footer a {
		color: #B38E56;
	}

/* Page */

/* Elements which need explicitly showing if javascript is enabled. Star comments next to mirror elements. */
body.js {
	
}

img.artworkImage {
	border: solid 1px #FBEAA1;
}
img.artworkImage:hover {
	-moz-box-shadow: 0 0 15px #FCC418;
}

/* vfx show reels */
a#reelflame,
a#reel3d {
	width: 458px;
	height: 0;
	padding: 343px 0 0;
	overflow: hidden;
	border: solid 1px #FBEAA1;
	display: block;
}
a#reelflame:hover,
a#reel3d:hover {
	-moz-box-shadow: 0 0 15px #FCC418;
}
a#reelflame { background: transparent url(../images/showreels_preview.jpg) no-repeat 0 0; }
a#reelflame:hover {	background: transparent url(../images/showreels_preview.jpg) no-repeat 0 -343px; }
a#reel3d { background: transparent url(../images/showreels_preview.jpg) no-repeat -458px 0; }
a#reel3d:hover { background: transparent url(../images/showreels_preview.jpg) no-repeat -458px -343px; }

/* vfx new work page */
a#ajmakan, a#landHolding, a#powerhorseStorm,
a#skyeBank, a#bankPHB, a#vukaBloodDiamond {
	width: 298px;
	height: 0;
	padding: 223px 0 0;
	overflow: hidden;
	border: solid 1px #FBEAA1;
	display: block;
}
a#ajmakan:hover, a#landHolding:hover, a#powerhorseStorm:hover,
a#skyeBank:hover, a#bankPHB:hover, a#vukaBloodDiamond:hover {
	-moz-box-shadow: 0 0 15px #FCC418;
}
a#ajmakan { background: transparent url(../images/newwork_sprite.png) no-repeat 0 0; }
a#ajmakan:hover { background: transparent url(../images/newwork_sprite.png) no-repeat 0 -223px; }
a#landHolding { background: transparent url(../images/newwork_sprite.png) no-repeat -298px 0; }
a#landHolding:hover { background: transparent url(../images/newwork_sprite.png) no-repeat -298px -223px; }
a#powerhorseStorm { background: transparent url(../images/newwork_sprite.png) no-repeat -596px 0; }
a#powerhorseStorm:hover { background: transparent url(../images/newwork_sprite.png) no-repeat -596px -223px; }
a#vukaBloodDiamond { background: transparent url(../images/newwork_sprite.png) no-repeat -1490px 0; }
a#vukaBloodDiamond:hover { background: transparent url(../images/newwork_sprite.png) no-repeat -1490px -223px; }

/* vfx new work & vt directing */
a#skyeBank { background: transparent url(../images/newwork_sprite.png) no-repeat -894px 0; }
a#skyeBank:hover { background: transparent url(../images/newwork_sprite.png) no-repeat -894px -223px; }
a#bankPHB { background: transparent url(../images/newwork_sprite.png) no-repeat -1192px 0; }
a#bankPHB:hover { background: transparent url(../images/newwork_sprite.png) no-repeat -1192px -223px; }

/* vt directing page */
a#mtn, a#finger, a#maggiNorth, a#maggiSouth {
	width: 298px;
	height: 0;
	padding: 223px 0 0;
	overflow: hidden;
	border: solid 1px #FBEAA1;
	display: block;
}
a#mtn:hover, a#finger:hover, a#maggiNorth:hover, a#maggiSouth:hover {
	-moz-box-shadow: 0 0 15px #FCC418;
}

a#mtn { background: transparent url(../images/directing_sprite.png) no-repeat 0 0; }
a#mtn:hover { background: transparent url(../images/directing_sprite.png) no-repeat 0 -223px; }
a#finger { background: transparent url(../images/directing_sprite.png) no-repeat -298px 0; }
a#finger:hover { background: transparent url(../images/directing_sprite.png) no-repeat -298px -223px; }
a#maggiNorth { background: transparent url(../images/directing_sprite.png) no-repeat -596px 0; }
a#maggiNorth:hover { background: transparent url(../images/directing_sprite.png) no-repeat -596px -223px; }
a#maggiSouth { background: transparent url(../images/directing_sprite.png) no-repeat -894px 0; }
a#maggiSouth:hover { background: transparent url(../images/directing_sprite.png) no-repeat -894px -223px; }

/* project page */
a.projectThumb {
	width: 298px;
	height: 0;
	padding: 223px 0 0;
	overflow: hidden;
	border: solid 1px #FBEAA1;
	display: block;
}
a.projectThumb:hover {
	-moz-box-shadow: 0 0 15px #FCC418;	
}
a.prof { background: transparent url(../images/projects/prof.png) no-repeat 0 0; }
a.afrika { background: transparent url(../images/projects/afrika.jpg) no-repeat 0 0; }

a.regularLink {
	color: #B38E56;
}

/* video popup */
a.videoClose {
	width: 100px;
	height: 0;
	padding: 40px 0 0;
	overflow: hidden;
	display: block;
	float: right;
	background: transparent url(../images/video_close.png) no-repeat 0 0;
}
a.videoClose:hover {
	background: transparent url(../images/video_close.png) no-repeat 0 -40px;
}

div.errorPage {
	padding: 30px 0;
}
	div.errorPage h3 {
		text-align: center;
	}
	div.errorPage p {
		text-align: center;
		color: #EADA7A;
		font-size: 1.2em;
	}

/* helpers */
.floatLeft { float: left; clear: none; }
.floatRight { float: right; clear: none; }
.vTop { vertical-align: top; }
.hide { display: none; }
.marginTop { margin-top: 10px; }
.moreMarginTop { margin-top: 20px; }
.marginRight { margin-right: 10px; }
.moreMarginRight { margin-right: 20px; }
.marginBottom { margin-bottom: 10px; }
.moreMarginBottom { margin-bottom: 20px; }
.marginLeft { margin-left: 10px; }
.moreMarginLeft { margin-left: 20px; }
.emphasize { font-weight: bold; }

div#holdVideo {
	position: relative;
	z-index: 0;
	float: left;
}

img#contactSubmit {
	cursor: pointer;
	display: block;
	width: 61px;
	height: 15px;
}