/* layout */

*{margin: 0px;padding: 0px;} /* brute force removal of default padding and margins on everything*/

/* general page, font and text details set out on the body*/
body{ 
color: #999999;
background: #000000;
font-family: Helvetica,Verdana,sans-serif;
font-weight: normal;
font-size: 12px;
line-height:1.5;
text-align: center;
}

p {margin: 1.5em 1em 0 0;}
.narrowline {margin-top: 0.55em;}
.firstline {margin-top: 0.75em;}
.title {margin-top: 0.15em; }

blockquote p {text-indent: 5%; font-style: italic; margin: 0.5em;}
.blockquote-image-comment {margin: 5px auto;}

/* adjust the paragraph spacing in the scroller to tighten up */
.noscroll .scroll p {margin: 1.2em 1em 0 0;}


/* PAGE STRUCTURE */

/* Pads to get around the max width problems */
.leftpad {
	float:left;
	height:10px;
	width:50%;
	margin-right:-460px;
}
.rightpad {
	float:right;
	height:10px;
	width:50%;
	margin-left:-460px;
}

.content {
	padding:5px;
	/*border:1px solid green;*/
	overflow:hidden;
}

* html .content {
float:left;
}
* html .inner {overflow:hidden; width:100%;}

/* class for clearing*/
.clear {clear: both;}

/* All contents matches width of main menu - this containing div is wrapped around content */
#contents {
margin-top: 25px;
text-align:center; 
display: inline-block; /* this is the rule that makes the contents div wrap the contents inside it*/
/*border: red solid 1px;*/
}

/* this just automatically sets the text to be left aligned*/
.content-left-aligned {text-align: left;}

/* Navigation - this controls the layout width and lining up on left and right edges*/

.navigation-content { }
.navigation-list ul { padding: 0 10px; margin: 0 auto; overflow:hidden;}
.navigation-list-item {list-style:none;float: left; padding: 0 2px; margin: 0;}


/* Copyright line */
#copyright-content { padding-top: 10px; clear: both; width: 100%;}
.copyright-list ul {margin-top: 10px; display: inline-block; text-align: justify;width: 100%; }
.copyright-list-item-left {float: left; list-style:none; padding-right: 8px;}
.copyright-list-item-right {float: right;list-style:none; padding-left: 4px; }


/* Phone Numbers */
.phonenumbers {float: right; padding: 21px 0 0 0; height: 40px;width: 160px;
background: url(images/phonenumbers.png) 5px 23px no-repeat;}

/* Phonenumber UK */

.phonenumbersUK a {
position: relative;
top: 0; left: 0; 
padding: 0px 5px 0 0; 
width: 152px;
height: 12px;
background: url(images/phonenumberUK.gif) -152px 0px no-repeat;
text-decoration: none;
}

.phonenumbersUK a:hover {
background-position: 4px 0px;
}

/* Phonenumber US */

.phonenumbersUS a {
position: relative;
top: 0; left: 0; 
padding: 0px 5px 0 0; 
width: 152px;
height: 16px;
background: url(images/phonenumberUS.gif) -152px 0px no-repeat;
text-decoration: none;
}

.phonenumbersUS a:hover {
background-position: 4px 0px;
}





/* Logo */
.logo {float: left; margin-top: 8px;clear: both;}


/* page content full*/
.page-content-full {
	/*max-width: 900px;*/
	float: left;
	text-align: left;
	clear: left;
}

/* page content full*/
.page-content-full-filmography {
	/*max-width: 900px;*/
	float: left;
	text-align: left;
	clear: left;
	width: 900px;
}


/* page content narrow*/
.page-content-narrow {
	/*width: 450px;*/
		width: 420px;
	float: left;
	text-align: left;
	clear: left;
}

/* page content narrow420*/
.page-content-narrow420 {
	width: 420px;
	float: left;
	text-align: left;
	clear: left;
}


/*montage div*/

.page-content-right {
	float: right;
	width: auto;
	margin: 40px 10px 0 0;
}

/*montage image swap and link*/

.montage a {
position: relative;
right: 0px;
top: 0px;
display:block;
width: 400px;
height: 407px;
color:#FFFFFF;
background: url(images/AgogSFX_Filmography_collection.jpg) 0px 0px no-repeat;
text-decoration: none;
}

.montage a:hover {
background-position: 0px 0px;
}

/* Mini index page navigation for going to Microsites */
.navigation-content-microsite {text-align: left; font-size: 13px;font-family: helvetica,sans-serif; margin: 6px 0 5px 0;  }
.navigation-list-microsite { padding-right: 10px; overflow:hidden;}
.navigation-list-item-microsite {list-style:none;float: left; padding: 0 3px; margin: 0 1px; background-color: #435C94;}



/* Style the content when we need to for height*/

.scroll {height: 350px; width:auto; overflow: auto; }
.scroll2 {height: 350px; width:auto; overflow: hidden; }
.noscroll { height: 350px; width:auto; overflow: hidden;}
.widescroll {height: 350px; overflow: auto; width: 100% }


/* general page links */

a {text-decoration: none; font-weight: normal;}
a:link, a:visited { color: #FFFFFF; }
a:hover, a:active { color: #415796; }

.copyright a:link, a:visited {color: #FFFFFF;}
.copyright a:hover, a:active {color: #415796;}

.linkblock a:link, a:visited {color: #FFFFFF;}
.linkblock a:hover, a:active {color: #415796;}

.navigation-content a:link, a:visited {color: #FFFFFF;}
.navigation-content a:hover, a:active {color: #415796;}


/* hide tel links from regular browsers*/
a.mobile {
    display: none;
    }

/* image specific */
/* fixes bug in ie win */
img.image-full
{
	width: 98%;
	max-width: 98%;
}

.module img,
.module-photo img
{
	border: 0;
}

img {border: none; outline: none;}


/* styling for the hook heading... */
h1
{
font-family: Helvetica,Verdana,sans-serif;
font-size: 1.7em;
color: #f2f2f2;
margin-top: 28px;
font-weight: normal;
}

/* styling for the line heading... */

h2
{
font-family: Helvetica,Verdana,sans-serif;
font-size: 1.25em;
color: #CCCCCC;
line-height: 135%;
margin-top: 18px;
margin-bottom: 0px;
padding: 0;
text-align: left;
font-weight: normal;
}

.showreeltitles
{
font-family: Helvetica,Verdana,sans-serif;
font-size: 1.15em;
color: #CCCCCC;
text-align: left;
font-weight: normal;
}

.topupframe
{
	display: block;
	position: relative;
	right; 0px;
	top: 0px;
	border: solid gold 1px;
}

.indexpage {
	margin-top: 20px;
	font-size: 1.9em;
	color: #f3f3f3;
	font-family: 'Helvetica Neue',Helvetica,Arial,'Sans Serif';
	font-weight: normal;
	text-shadow: 0px 0px 4px #grey;
	letter-spacing: .05em;

}

.letterspace {letter-spacing: -.05em;}

/* additional link styling for smaller text link blocks */

.linkblock
{
font-size: 1em;
text-align: justify;
}



/* ALL BELOW HERE IMPORTED FROM PREVIOUS WEBLOG*/

/* SHOWREEL SPREAD STYLING */

.clips
{
width: 322px;
padding: 0;
margin: 0px auto;
text-align: center;
}


#clipframe0{width: 320px;height:196px;}

#introtext{display: block;}
#braviatext{display: none;}
#arntext {display: none;}
#hillstext{display: none;}
#sexytext{display: none;}

/* Photographs section styling */

.clipstrip
{
height: 43px;
width: 320px;
margin-top: 4px;
}

.clipstrip ul
{
vertical-align: bottom;
}

.clipstrip li
{
display: inline;
text-decoration: none;
width: 74px;
}

.stills
{
margin: -30px 0 15px 0;
border: none;
float: right;
}

#stillsframe
{
width: 375px;
height: 375px;
}

.stillsstrip
{
width: 64px;
height: 325px;
margin-left: 328px;
}

.story
{
text-align: left;
font-size: .8em;
clear: both;

}
.copyrightshowreel
{
font-family: 'lucida-grande', arial;
width: 100%;
padding-top: 5px;
border-top: 1px solid #999999;
font-size: .85em;
color: #737373;
margin: 10px 0px;
clear: both;
position: relative;
top: -500px;
left: 0;
}

/* styling for the address on the contacts page */
.addressblock
{
font-family: helvetica, arial, verdana;
font-size: 1.25em;
color: #999999;
line-height: 150%;
margin: 12px 0px;
}

/* styling for the company # and VAT # */
.codetail
{
text-align: right;
}

/* float for the drections map */
.googlemap
{
float: right;
margin-right: 30px;
padding: 8px 0 0 0;
}

.highlight
{
font-family: "HelveticaNeue",Helvetica,Verdana,sans-serif;
font-size: 1em;
font-weight: bold;
}

.copyright
{
font-family: 'lucida-grande', arial,sans-serif;
padding: 0;
font-size: .9em;
color: #999999;
margin: 0 auto;
vertical-align: middle;}

/* image styling */

.image-comment 
{
clear: both;
}

.image-wrap-right
{
 float: right;
margin: 10px 0px 5px 25px;
padding: 0;
}

.image-wrap-left
{
 float: left;
margin: 10px 25px 5px 0px;
padding: 0;
}

.image-caption-wrap
{
padding: 5px;
margin: 0;
text-align: center;
}

.image-caption
{
font-size: .9em;
color: #cccccc;
font-family: "HelveticaNeue",Helvetica,Verdana,sans-serif;
}


/*Setting up gallery texts*/

#info {display: block;}
#pyro {display: none;}
#atmos {display: none;}
#props {display: none;}
#mech {display: none;}
#sculpt {display: none;}

/*Setting up filmography posters*/
#myFilmPoster1 {
	z-index:15;
border: #000000 5px solid;
}
#myFilmPoster2 {
position: absolute; top: 95px; left: 470px;
display:none;
	z-index:15;
border: #000000 5px solid;
}

/* Grey box overlay */
/* #grey_bg { display: none; position: absolute; background: #000; opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; filter: alpha(opacity=40); width: 100%; height: 100%; top: 0px; left: 0px; z-index: 99; }*/
/* #grey_bx { display: none; position: absolute; top: 40px; left: 265px; width: 480px; height: 260px;  z-index: 100; }*/

/* Fix for haslayout problems so it will show up in IE */

.gainlayout { display:inline-block; }

/*JScrollPane css for client comments etc. */

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #191919;
}
.jScrollPaneDrag {
	position: absolute;
	background: #415796;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}


/* JScrollPane Example page ( test page post) styles */

.holder {
				float: left;
				margin: 10px;
			}
			.scroll-pane {
				overflow: auto;
				float: left;
				height: 350px;
			}
			
			
			.left .jScrollPaneTrack {
				left: 0;
				right: auto;
			}
			.left a.jScrollArrowUp {
				left: 0;
				right: auto;
			}
			.left a.jScrollArrowDown {
				left: 0;
				right: auto;
			}

			/* IE SPECIFIC HACKED STYLES */
			* html .osX .jScrollPaneDragBottom {
				bottom: -1px;
			}
			
			
/* PhotoGalleria section styling */
	
	#main_image{margin:0px auto;background:#000; height: 350px;
	text-align: center; width: 460px;}
	#main_image img{margin-bottom:10px;}
	
	.galleria{list-style:none;width:460px}
.galleria li{display:block;width:89px;height:59px;overflow:hidden;float:left;margin:0 0 2px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:460px} /* MSIE bug */

	.caption{font-style:italic;color:#887;}
	.photos{position:relative;margin-top:0;}
	.gallery_photos{width:460px;margin:0 auto;}
	.gallery_photos li{width:89px;height:59px;border:none; margin: 0 3px 2px 0; background:#000;}
	.gallery_photos li div{left:240px}
	.gallery_photos li div .caption{font: 0.7em/1.4 helvetica,sans-serif;}