*
{
	font-family: sans-serif;
	color: #000;
	margin: 0;
	padding: 0;
}

body, #intropage #introwrapper
{
	background-color: #c9dff4;
	
	width: 760px; /* 10 + 740 + 10 */
	position: relative; /* no longer needed ? */
	margin: 0 auto 0 auto;
	
	overflow: visible;
}

html
{
	overflow-y: scroll; /* force scrollbars ON (stops long/short pages jumping to the side) */
	/* INVALID (for CSS 2.1) */
	
	background-color: #c9dff4;
}

#wrapper
{
	width: 1200px; /* ? */
	
	/*background-image: url(misc/shark_background_5.1.jpg);*/
	background-repeat: no-repeat;
	/*background-color: *//*#001133*/ /*#000932; *//* because of the jpeg compression or something? */
	background-attachment: scroll;
	background-position: top center;
	
	/*margin: 0 auto 0 auto;*/ /* t r b l */
	padding: 0 0 20px 0;
	
	border-top: 10px solid #00344d;
	border-bottom: 10px solid #00344d;
	
	/* centering is now done by the body element */
	margin-left: -220px; /* 1200-740-10-10 = 440, 440/2 = 220 */
	margin-right: -220px;
	
	
	background-image: url(misc/sunburst_background_2.jpg);
	background-color: #030310;
}

/* Background seems to be messing up in IE 6 for some reason ?? */
/* (only middle shown on some pages) */
* html #wrapper
{
	/*background-image: none;*/
	
	background-image: url(misc/sunburst_background_2.jpg);
	background-color: #030310;
}

ul
{
	list-style: none;
}

/******************************************************************************/
/*                               Page Header                                  */
/******************************************************************************/

#header
{
	width: 1200px; /* 600px, then 860 */
	height: 90px; /* 3x 22px + 4px borders = 70px */ /* 10 + 70 + 10 */
	
	margin: 0 auto 30px auto; /* centered */
	
	position: relative; /* so the children can be abs positioned */
	
	background-image: url(misc/10x10_00344d_60.png); /* the old 1x1 seemed to make IE7 go weird (gradient to transparent) some of the time */
	background-repeat: repeat;
}

/* "Star HTML Hack" */
/* IE 6 and below will see this, giving them the .gif version of the background */
* html #header
{
	background-image: url(misc/2x2_00344d_50.gif);
}

#header h1, #header h2, #header h1 a, #header h2 a
{
	width: 350px;
	
	color: #fff;
	font-family: serif;
	
	text-decoration: none;
	display: block;
}

#header h1
{
	position: absolute;
	top: 10px;
	left: 230px;
	
	line-height: 46px;
	
	border-bottom: 1px solid #fff;
	
	font-size: 34px;
}

#header h2
{
	position: absolute;
	top: 60px;
	left: 230px;
	
	line-height: 20px;
	
	font-size: 18px;
	font-style: italic;
	font-weight: normal;
}

#header #menu
{
	position: absolute;
	top: 10px;
	right: 230px;
	
	width: 354px; /* 350+4 for the extra 4px margin on the left of each menu item */
}

#header #menu li
{
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	
	width: 173px; /* 354-8=346, 346/2=173 */
	
	line-height: 22px;
	height: 22px;
	font-size: 14px;
	
	float: right;
	margin-left: 4px;
	margin-bottom: -1px; /* stops double border width between items */
}

#header #menu li a
{
	padding: 0 2px 0 2px;
	
	display: block;
	
	color: #fff;
	text-decoration: none;
}

#header #menu #currentpage a
{
	/*background-color: #22a;*/
	background-image: url(misc/10x10_00344d_60.png);
	background-repeat: repeat;
}

#header #menu li a:hover
{
	/*background-color: #44f;*/
	background-image: url(misc/10x10_00344d_30.png);
	background-repeat: repeat;
}

/* non-png version for IE6 and below */
* html #header #menu #currentpage a
{
	background-image: none;
	background-color: #00344d;
}

* html #header #menu li a:hover
{
	background-image: none;
	background-color: #00344d;
}

/******************************************************************************/
/*                               Front Page                                   */
/******************************************************************************/

#video
{
	background-color: #c9dff4;
	
	width: 740px;
	height: 500px;
	
	margin: 0 auto 0 auto; /* centered */
	
	position: relative; /* for abs positioned children */
}

#video h3, #video h4
{
	width: 450px;
	
	color: #00334e;
	font-family: serif;
}

#video h3
{
	position: absolute;
	top: 5px;
	left: 20px;
	
	line-height: 46px;
	
	border-bottom: 1px solid #000;
	
	font-size: 34px;
}

#video h4
{
	position: absolute;
	top: 55px;
	left: 20px;
	
	line-height: 20px;
	
	font-size: 18px;
	font-style: italic;
	font-weight: normal;
}

#video #moviewrapper
{
	width: 720px;
	height: 405px;
	
	position: absolute;
	top: 85px;
	left: 10px;
}

/* if no flash */
#video img
{
	width: 720px;
	height: 405px;
}

/* from when we had an image with text on top */
/* now used if there's no flash */
#video p
{
	color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	
	z-index: 2;
	
	width: 240px; 
	height: 345px; 
	
	padding: 30px 450px 30px 30px;
}

#video p#frontpagenoflash
{
	position: absolute;
	top: 0px;
	right: 0px;
	left: auto;
	
	padding: 30px;
	
	height: auto;
	width: 200px;
	
	text-align: right;
}

#video p#frontpagenoflash img
{
	width: auto;
	height: auto;
	
	border: 0;
}

#vidchooser
{
	width: 740px;
	height: 238px; /* 20 + 5 + 124 + 5 + 2 + 20 + 2 + 60 ((+ 20)-done by padding of #wrapper) */
	
	margin: 0 auto 0 auto; /* centered */
	
	position: relative; /* so the items can be abs positioned */
	
}

#vidchooser li
{
	width:  230px;
	position: absolute;
	top: 20px;
}

#vidchooser #vid1 { left: 0px; }

#vidchooser #vid2 { left: 255px; }

#vidchooser #vid3 { left: 510px; }

#vidchooser li img
{
	width: 220px;
	height: 124px;
	
	border: 5px solid #c9dff4;
	
	display: block;
}

#vidchooser li strong, #vidchooser li span
{
	background-color: #c9dff4;
	display: block;
	
	margin-top: 2px;
	
	font-size: 14px;
	line-height: 20px;
	overflow: hidden;
	
	padding: 0 10px;
}

#vidchooser li strong
{
	height: 20px; /* 1 line */
	background-color: #d6e7f7;
}

#vidchooser li span
{
	height: 60px; /* 3 lines */
}

#vidchooser li a
{
	text-decoration: none;
}

/******************************************************************************/
/*                                 Text Pages                                 */
/*                           (Bio, Credits, Contact)                          */
/******************************************************************************/

#textcontent
{
	width: 740px;
	
	margin: 0 auto 0 auto; /* centered */
	
	position: relative;
}

#textcontent *
{
	background-color: #c9dff4;
}

#textcontent h3, #stillschooser h3, #movieschooser h3, #movieplayer h3, #photoviewer h3, #movieplayer h4, #photoviewer h4
{
	color: #00334e;
	background-color: #c9dff4;
	padding-left: 15px;
	
	margin-bottom: 2px;
	font-size: 18px;
	line-height: 35px;
	height: 35px;
}

/* e.g. italics with <i> */
#textcontent h3 *, #stillschooser h3 *, #movieschooser h3 *, #movieplayer h3 *, #photoviewer h3 *, #movieplayer h4 *, #photoviewer h4 *
{
	color: #00334e;
}

#textcontent p
{
	padding: 10px 15px 0 15px;
	
	/*width: 710px;*/ /* 740 -15 -15 */ /* fixed width breaks floated images in IE */
	/*color: #00334e;*/ color: #000;
}

#textcontent.withsidepara p
{
	padding-right: 215px;
	/*width: 510px;*/ /* 740 -15 -215 */ /* fixed width breaks floated images in IE */
}

#textcontent #finalpara
{
	padding-bottom: 10px;
	
	margin-bottom: 2px;
}

#textcontent #sidepara
{
	position: absolute;
	top: 37px; /* h3 is 35 +2 margin */
	right: 0;
	
	padding: 15px 15px 15px 0;
	
	width: 185px; /* 200 -15 */
	
	font-size: 150%;
	color: #00334e;
}

#textcontent #footerpara
{
	padding: 10px 15px 10px 15px;
	width: 710px;
	color: #00334e;
}

#textcontent #footerpara a
{
	color: #00334e;
}

#textcontent.withimages p.imginside
{
	overflow: hidden; /* clear floats */
}

#textcontent.withimages img
{
	width: 220px;
	height: 124px;
	float: left;
	
	margin: 12px 10px 0 10px;
}

#textcontent.withimages img.nosize
{
	width: 220px;
	height: auto;
}

/* make enough room for the image in IE6 */
* html #textcontent.withimages p.imginside
{
	border-bottom: 185px solid #c9dff4;
}

#textcontent.withimages p.imginside img
{
	margin: 0 10px 0 0;
}

#textcontent.withimages p.imginside span
{
	margin: -18px 0 5px 0;
}

#textcontent.withimages span
{
	width: 212px; /* 220 -4 -4 */
	float: left;
	clear: left;
	
	font-size: 14px;
	line-height: 18px;
	padding: 0 4px;
	
	background-image: url(misc/10x10_00344d_60.png);
	background-repeat: repeat;
	background-color: transparent;
	
	color: #fff;
	
	margin: -18px 10px 5px 10px;
}

#textcontent.withimages img.rightside
{
	float: right;
	
	margin: 12px 10px 0 10px;
}

#textcontent.withimages span.rightside
{
	float: right;
	clear: right;
	
	margin: -18px 10px 5px 10px;
}

#textcontent.withimages.withsidepara img.rightside
{
	margin-right: 215px;
}

#textcontent.withimages.withsidepara span.rightside
{
	margin-right: 215px;
}

/******************************************************************************/
/*                                Contact Form                                */
/******************************************************************************/

#textcontent form#sidepara
{
	font-size: 12px;
}

#textcontent form#sidepara div *
{
	background-color: #fff;
	color: #000;
	
	border: none;
}

#textcontent form#sidepara input, #textcontent form#sidepara textarea
{
	width: 174px; /* -2px borders -4px padding */
	font-size: 14px;
	margin: 2px 0 5px 0;
	
	padding: 2px;
	
	border: 1px solid #00334e;
}

#textcontent form#sidepara label
{
	background-color: transparent;
	color: #00334e;
	font-size: 12px;
}

#textcontent form#sidepara .namefield
{
	display: none;
}

#textcontent form#sidepara #sendbutton
{
	font-size: 12px;
	margin: 0;
	width: 180px; /* why not 178 ?? */
}

#textcontent form#sidepara span.formalert
{
	color: #f00;
	width: auto;
	height: auto;
	display: inline;
	line-height: normal;
	background-image: none;
	background-color: transparent;
	float: none;
	margin: 0;
	font-size: 12px;
}

/******************************************************************************/
/*                             Credits List                                   */
/******************************************************************************/

#textcontent .creditslist
{
	width: 740px;
}

#textcontent .creditslist li
{
	/*width: 710px;*/ /* 740 -15 -15 */ /* stops floated images being wrapped around in IE7 */
	
	padding: 10px 15px 0 15px;
}

#textcontent .creditslist li h4
{
	color: #00334e;
}

#textcontent .creditslist li img
{
	width: 220px;
	height: 124px;
	
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
	clear: right;
	
	display: block;
}

#textcontent .creditslist li span
{
	/*color: #00334e;*/ color: #000;
	display: block;
}

/* stops floated images being wrapped around in IE7 */
/*#textcontent .creditslist li ul, #textcontent .creditslist li ul li*/
/*{*/
/*	width: 680px;*/ /* 740 -15-15 -15-15 */
/*}*/

#textcontent #finalpara.creditslist
{
	padding-bottom: 20px;
}

/* when a line wraps, we want it to be indented */
#textcontent .creditslist li li
{
	padding-left: 40px;
	text-indent: -40px;
}


/******************************************************************************/
/*                          Stills + Movies Pages                             */
/******************************************************************************/

#stillschooser, #movieschooser
{
	width: 740px;
	
	margin: 0 auto 0 auto; /* centered */
}

/* #stillschooser h3, #movieschooser h3 */ /* defined above, with #textcontent h3, near line 270 */

#stillschooser p, #movieschooser p
{
	background-color: #c9dff4;
	padding: 10px 15px;
	
	margin-bottom: 2px;
}

#stillschooser #stillslist, #movieschooser #movieslist
{
	background-color: #c9dff4;
	overflow: hidden; /* automatically clears floated contents */
	
	padding: 15px 5px 15px 15px; 
	/* bottom padding is best at 5px for FF,+Saf+Op and 15px for IE */
}

#stillschooser #stillslist li, #movieschooser #movieslist li
{
	width: 230px;
	
	float: left;
	margin: 0 10px 10px 0;
}

/* IE 6 seems odd - we bodgingly add a bit of extrta background around the place */
/* makes it look a bit weird, but better than nothing (so long as it keeps woking) */
* html #stillschooser #stillslist li, * html #movieschooser #movieslist li
{
	background-color: #c9dff4;
	margin: -8px;
	border: 14px solid #c9dff4;
}

#stillschooser #stillslist li a, #movieschooser #movieslist li a
{
	text-decoration: none;
}

#stillschooser #stillslist li a img, #movieschooser #movieslist li a img
{
	width: 220px;
	height: 124px;
	
	border: 5px solid #fff;
	background-color: #fff;
	
	display: block;
}

/* have images 'greyed out' until you rollover them */
/* INVALID */
/*#stillschooser #stillslist li a img, #stillschooser #stillslist li a strong
{
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}

#stillschooser #stillslist li a:hover img, #stillschooser #stillslist li a:hover strong
{
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
}*/

#stillschooser #stillslist li a strong, #movieschooser #movieslist li a strong, #stillschooser #stillslist li a span, #movieschooser #movieslist li a span
{
	display: block;
	background-color: #fff;
	
	margin-top: 2px;
	
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	
	overflow: hidden;
	
	padding: 0 5px;
	
	font-weight: normal;
}

#stillschooser #stillslist li a strong, #movieschooser #movieslist li a strong, #stillschooser #stillslist li a strong i, #movieschooser #movieslist li a strong i
{
	color: #00334e;
	height: 20px; /* 1 line */
	
	font-weight: normal;
}

#stillschooser #stillslist li a span, #movieschooser #movieslist li a span
{
	color: #000;
	height: 60px; /* 3 lines */
}

#movieplayer, #photoviewer
{
	width: 740px;
	margin: 0 auto 0 auto; /* centered */
}

#movieplayer
{
	background-color: #c9dff4;
	margin-top: 67px; /* 35 for the h3 + 2 gap on top of the normal 30px gap */
	
	padding-bottom: 20px;
}

#photoviewer
{
	position: relative; /* for abs positioned next/prev buttons */
}

/* #movieplayer h3, #photoviewer h3 */ /* above, nr 270 */

#movieplayer h3
{
	position: relative;
	top: -37px;
}

/*#movieplayer img*/ /* will be a video when we're finished */
#movieplayer #moviewrapper
{
	/*width: 480px;
	height: 270px;
	
	border-top: 20px solid #edf5fc;
	border-right: 50px solid #edf5fc;
	border-bottom: 20px solid #edf5fc;
	border-left: 50px solid #edf5fc;*/
	
	width: 560px;
	height: 315px;
	
	border: 10px solid #edf5fc;
	
	display: block;
	margin-bottom: 2px;
	
	background-color: #fff; /* shown if it takes time to load */
	
	margin-left: auto;
	margin-right: auto; /* center */
	
	margin-top: -17px; /* there is 37px gap from the h3, we want 20 */
}

/* no flash player */
#movieplayer #moviewrapper p.noflash
{
	background-color: #c9dff4;
	padding: 10px 15px;
	
	width: 530px; /* 560 -15 -15 */
	height: 295px; /* 315 -10 -10 */
}

#movieplayer #moviewrapper p.noflash img
{
	border: none;
	margin-top: 20px;
}

#photoviewer img
{
	/*width: 720px;*/
	max-width: 720px;
	height: 405px;
	
	margin-left: auto;
	margin-right: auto;/* center */
	
	border: 10px solid #c9dff4;
	display: block;
	margin-bottom: 2px;
	
	background-color: #fff; /*#c9dff4;*/ /* shown if it takes time to load */
}

#movieplayer h4 /* also above, nr 270 */
{
	width: 565px; /* 580 -15px padding */
	margin-left: auto;
	margin-right: auto; /* center */
	background-color: #e5f0fa;
}

#movieplayer p, #photoviewer p
{
	background-color: #c9dff4;
	padding: 10px 15px 0 15px;
}

#movieplayer p
{
	width: 550px; /* 580 -15px -15PX padding */
	margin-left: auto;
	margin-right: auto; /* center */
	background-color: #edf5fc;
}

#movieplayer p#movieinfo, #photoviewer p#photoinfo
{
	padding-bottom: 10px;
	margin-bottom: 2px;
}

#movieplayer p#finalpara, #photoviewer p#finalpara
{
	padding-bottom: 10px;
}

#movieplayer p#footerpara, #photoviewer p#footerpara
{
	padding-bottom: 10px;
	margin-top:2px;
	
	color: #00334e;
}

#movieplayer p#footerpara a, #photoviewer p#footerpara a
{
	color: #00334e;
	/*text-decoration: none;*/
}

#movieplayer p#footerpara a:after, #photoviewer p#footerpara a:after
{
	/*content: ' \2192';*/ /* adds a right pointing arrow */
}

/* next/prev buttons on photo viewer */
#photoviewer a.nextbtn, #photoviewer a.prevbtn
{
	position: absolute;
	top: 47px;
	
	display: block;
	
	width: 360px;
	height: 405px;
	
	/*background-color: #444;
	text-indent: 10000px;
	overflow: hidden;*/
	
	/* this is done weird to make the effect work properly in IE */
	/* (need something (the transparent bg) there to be rolled over) */
	background-color: transparent;
	background-image: url(misc/1x1_transparent.gif);
	background-repeat: repeat;
	
	text-indent: -100px;
	overflow: hidden;
}

#photoviewer a.nextbtn
{
	right: 10px;
}

#photoviewer a.prevbtn
{
	left: 10px;
}

#photoviewer a.nextbtn:hover
{
	background: url(misc/right.png) no-repeat 154px 177px;
	/* container is 405 px high, image is 51px high */
	/* 405/2 - 51/2 = 177; */
	/* 720/4 - 51/2 = 154.5 */
	/* (center center not doing it the same on IE as FF) */
}

#photoviewer a.prevbtn:hover
{
	background: url(misc/left.png) no-repeat 155px 177px;
}

/* "Star HTML Hack" */
/* Give non-png versions to IE6 and below */
* html #photoviewer a.nextbtn:hover
{
	background: url(misc/right.gif) no-repeat center center;
}

* html #photoviewer a.prevbtn:hover
{
	background: url(misc/left.gif) no-repeat center center;
}


/******************************************************************************/
/*                             Intro Movie Page                               */
/******************************************************************************/

#intropage
{
	width: auto;
	margin: 0;
	padding: 0;
}

/* takes place of body element in normal page, styled right at the top */
/*#intropage #introwrapper*/

/* to make the intro video apper at 100% in Firefox and Opera, a 100% container element must be created */

html, body#intropage
{
	height: 100%;
}

#intropage #intropagewrapper
{
	display: block;
	
	margin: 0;
	padding: 0;
	
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
}