/*

	1312 vs. Warp X
	We love the web remix.
	

	written by Mike "1312" (mike_at_welovetheweb.com)

	for We love the web ltd. (www.welovetheweb.com)
	
	design by Less Rain (http://www.lessrain.com/)
	

	ie psuedo classes from:
	http://www.vladdy.net/Demos/IEPseudoClassesFix.html
	
		
	the release of IE7 has made the simple world of ff/ie6 on a pc a bit more nightmareish
	ie 7 in css hack detailed in the "in-css hacks" section of
	http://www.webdevout.net/articles/css_hacks.php
	
	fading sponsors list on the homepage js from
	http://medienfreunde.com/deutsch/weblog/aus_der_praxis.html?nid=87
	http://medienfreunde.com/lab/innerfade/

*/

body {
	background: #0ba2db;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 63%;
	color: #fff;
	margin: 0px;
	padding: 0px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ layouts */
#warpx {
	width: 1000px;
}

	#top{
		display: inline;
		float: left;
		width: 766px;
		/* 10/01/07  width: 1065px;*/
		margin: 0px 0px 0px 23px;
		height: 147px;
	}
	
	#left{
		display: inline;
		width: 147px;
		clear: left;
		float: left;
		margin: 2px 2px 0px 23px;
	}
		/* ie6 */
		* #left {
			/*ie6 drawing much bigger right hand margin on for some reason */
			margin-right: -11px;
		}
		/* ie7 and ff */
		#warpx>#left { 
			margin-right: 2px;
		}
	
	#right{
		margin-top: 2px;
		display: inline;
		float: left;
		width: 448px;
		padding-right: 295px;
		position: relative;
		padding: 0px;
		width: 595px;
	}
		#home-main-feature {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 743px;
			height: 594px;
			overflow: hidden;
		}
		#home-secondary-feature{
			position: absolute;
			top: 447px;
			left: 0px;
			width: 296px;
			height: 296px;
			overflow: hidden;
		}
		#home-warp-ad-1{
			position: absolute;
			top: 745px;
			left: 0px;
			width: 147px;
			height: 383px;
			overflow: hidden;
		}
		#home-warp-ad-2{
			position: absolute;
			top: 745px;
			left: 149px;
			width: 147px;
			height: 383px;
			overflow: hidden;
		}
		#home-content-area{
			position: absolute;
			top: 595px;
			left: 298px;
			width: 448px;
			height: 534px;
			overflow: hidden;
		}
		#home-sponsors{
			position: absolute;
			top: 1128px;
			top: 1078px;
			left: 0px;
			width: 744px;
			height: 120px;
			overflow: hidden;
		}
	
	#footer{
		display: inline;
		clear: left;
		float: left;
		margin-top: 150px;
		width: 595px;
		font-weight: bold;
		margin-left: 172px;
	}
		#footer .footerLeft {
			border-top: 1px solid #22abde;
			width: 296px;
			display: inline;
			clear: left;
			float: left;
			height: 74px;
		}
		#footer .footerRight {
			display: inline;
			width: 147px;
			float: right;
			border-top: 1px solid #0ba2db;
		}
		#footer.home {
			position: absolute;
			top: 1249px;
			left: 0px;
		}
	
	#login {
		float: right;
		text-align: right;
	}
			
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ general styles */

h2 {
	font-size: 2.4em;
	line-height: 0.92em;
	font-weight: normal;
	margin: 60px 0px 14px 8px;
	padding: 0px;
}
h2.first {	
	
	min-height: 119px;	
	margin: 14px 0px 14px 8px;
}
	h2.first span {
		color: #83d0ed;
	}
h3 {
	color: #1d1e28;
	color: #145a7a;
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	margin: 8px 149px 4px 8px;
	padding: 0px;
}
	h3 strong {
		font-weight: normal;
	}
h4 {
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
	margin: 14px 149px 14px 8px;
	padding: 0px;
}
h5 {
	color: #145a7a;
	font-size: 1.2em;
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	margin: 14px 149px 4px 8px;
	padding: 0px;
	font-weight: normal;
}
	h5 strong {
		font-weight: normal;
	}
h6 {
	color: #145a7a;
	font-size: 1.2em;
	margin: 4px 149px 4px 8px;
	padding: 0px;
	font-weight: bold;
}
a {
	color: #000;
	text-decoration: none;
}
	a:hover {
		color: #fff;
	}
p {
	font-size: 1.2em;
	margin: 0px 0px 13px 8px;
	font-weight: bold;
	line-height: 1.4em;
	text-align: left;
}
ol {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.4em;
	text-align: left;
}
small {
	font-size: 1.1em;
	letter-spacing: normal;
	margin: 34px 0px 13px 8px;
	font-weight: bold;
	display: block;
	
}
p a {
	color: #fff;
	text-decoration: underline;
}
	p a:hover {
		color: #000;
		text-decoration: underline;
	}
img{
	border: 0 none;
}
fieldset {
	border: 0 none;
	margin: 0px;
	padding: 0px;
	clear: left;
	float: left;
}
	/* ie6 */
	* fieldset {
		margin-top: -16px;
	}
	/* ie7 */
	form>fieldset { 
		margin-top: -16px;
	}
	/* ff */
	form>/**/fieldset {
		margin-top: 2px;
	}
	
	legend, label {
		display: none;
	}
		ol.forms {
			list-style-type: none;
			margin: 8px;
			padding: 0px;
		}
			ol.forms li {
				clear: left;
				margin: 0px;
				padding: 0px;
				margin-bottom: 1em;
			}
			ol.forms label {
				clear: left;
				float: left;
				display: block;
				width: 6em;
				margin-bottom: 1em;
			}
	input {
		float: left;
		background: #22abde;
		color: #000;
		margin: 0px 2px 0px 0px;
		padding: 1px 2px 1px 8px;
		border: 0 none;
		width: 130px;
		font-size: 1.1em;
	}
	button {
		float: left;
		background: #000;
		color: #0ba2db;
		margin: 0px 2px 0px 0px;
		padding: 0px 0px 0px 0px;
		border: 0 none;
		font-size: 1.2em;
		behavior: url('/css/IEFixes.htc');
	}
		button:hover, button.hover {
			background: #fff;
			color: #000;
			cursor: pointer;
		}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ classes */

.floatLeft {
	float: left;
	text-align: left;
}
.floatRight {
	float: right;
	text-align: right;
}

.floatClear {
	margin: -1px -1px 0px 0px;
	width: 1px;
	height: 1px;
	clear: both;
}

div.hr { clear: both; }
	div.hr hr { display: none; }
	
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ div specific styles */

#login small {
	font-size: 0.9em;
	margin-top: 60px;
}

#top h1 {
	text-indent: -300em;
	width: 147px;
	height: 147px;
	margin: 0px;
	padding: 0px;
	float: left;
}
#top h2, #right h1 {
	display: none;
}

/* 17/01/07 */
#right p, #right h2, #right ul, #right h3 {
	margin-right: 149px;
}
#right ul li h3 {
	color: #1d1e28;
	color: #145a7a;
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	margin: 8px 149px 4px 8px;
	padding: 0px;	
}
#right ul ul {
	display: block;
	width: 100%;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
}
	#right ul ul li {		
		display: block;	
		list-style-type: none;
		padding-left: 10px;
		float: none;
		clear: none;
		background: url("/images/sitewide/bullet.gif") no-repeat left 0.5em;
		margin-right: 149px;
	}
/* / 17/01/07 */

#top ul, #left ul, #right ul {
	float: left;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#left ul {
	clear: left;
	display: inline;
	float: left;
}
#right ul {
	float: none;
	margin-left: 8px;
}
#top ul li, #left ul li, #left div, #left ul.leftNavList li {
	margin-left: 2px;
	display: inline;
	float: left;
	position: relative;
}
#left ul li, #left div, #left ul.leftNavList li {
	clear: left;
	margin-bottom: 2px;
	margin-left: 0px;
}
#left ul li.extraMarginBottom {
	margin-bottom: 34px;
}
#left ul li a, #right ul li a, #right ul li a {
	font-size: 1.2em;
	font-weight: bold;
}
#left ul li a, right ul li a {
	padding: 0px 0px 0px 11px;
	width: 123px;
	display: block;
}
	#left ul li a span, #right ul li a span {
		background: url("../images/sitewide/corners.gif") no-repeat right 3px;
		padding-right: 13px;
	}
#left ul li a:hover, #right ul li a:hover {
	color: #fff;
}
	#left ul li a:hover span, #right ul li a:hover span {
		background: url("../images/sitewide/corners.gif") no-repeat right -15px;
	}
#top ul li a, #left ul.leftNavList li a {
	font-size: 1.3em;
	font-weight: bold;
}
li.first span, li.second span, li.third span, li.fourth span, li.fifth span, li.sixth span, div.fifth span, div.sixth span {
	width: 147px;
	height: 147px;
	position: absolute;
	left: 0px;
	top: 0px;
	background: url("../images/sitewide/lines.gif") repeat-y left top;
}
li.first a, li.second a, li.third a, li.fourth a, li.fifth a, li.sixth a {
	padding: 58px 11px 11px 11px !important;
	width: 125px;
	height: 78px;
	position: absolute;
	left: 0px;
	top: 0px;
	/* 10/01/07*/  letter-spacing: 0.03em;
}
	li.fifth a, li.sixth a {
		/*text-align: right;*/
	}
	
	li.first a {
		background: url("../images/sitewide/homeLinkbg.gif") no-repeat 8px -147px;
	}
	
	li.first a:hover, li.second a:hover, li.third a:hover, li.fourth a:hover, li.fifth a:hover, li.sixth a:hover, li.current a {
		background-color: #000;
		color: #0ba2db !important;
	}
		li.first a:hover, li.first.current a {
			background-position: 8px 0px;
		}
	
li.first, li.second, li.third, li.fourth, li.fifth, li.sixth, div.fifth, div.sixth {
	width: 147px;
	height: 147px;
	background: url("../images/sitewide/listitembg.jpg") no-repeat left top;
}
	li.first {
		background-position: -1176px -441px;
	}
	li.second {
		background-position: -1323px 0px;
	}
	li.third{
		background-position: -882px -441px;
	}
	li.fourth {
		background-position: -735px -0px;
	}
	li.fifth, div.fifth {
		background-position: -294px -735px;
	}
	li.sixth, div.sixth {
		background-position: 0px -735px;
	}
	
	/* 17/01/07 */
	/* not sure why this was needed, but displaying wrong all the same */
	li.fifth, li.sixth {
		overflow: hidden;
		width: 147px;
	}
	li.fifth span, li.sixth span {
		width: 147px;
	}
	li.fifth a:hover, li.fifth.current a, li.sixth a:hover, li.sixth.current a {
		width: 151px !important;
	}
	/* / 17/01/07 */
	
#left h3 {
	font-size: 0.85em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 15px 11px 9px 13px;
	background: url("../images/sitewide/warpLogo_sm.gif") no-repeat left bottom;
	height: 44px;
	clear: left;
	float: left;
	width: 123px;
}
#home-sponsors h3 {
	font-size: 0.85em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 15px 11px 9px 13px;
	margin: 15px 11px 9px 0px;
}

#left p.backLink {
	height: 436px;
	font-size: 2.4em;
	font-weight: normal;
	margin-top: 10px;
}
	#left p.backLink a {
		text-decoration: none;
		color: #000;
	}
		#left p.backLink a:hover {
			color: #fff;
		}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* home page and releases page stuff */

#right div#releasesSelection {
	display: inline;
	float: right;
	width: 147px;
	height: 147px;
	display: block;
	position: relative;
	background: url("../images/sitewide/listitembg.jpg") no-repeat left top;
	background-position: -147px -441px;
	margin: 0px;
	padding: 0px;
}
	#right div#releasesSelection ul {
		width: 147px;
		height: 147px;
		position: absolute;
		top: 0px;
		left: 0px;
		background: url("../images/sitewide/lines.gif") repeat-y left top;		
		margin: 0px;
		padding: 0px;
	}
		#right div#releasesSelection ul li {
			margin: 11px 0px 0px 11px;
			padding: 0px;
		}
			#right div#releasesSelection ul li.current a {
				color: #fff !important;
				background: none;
			}

	
#home-main-feature a, #home-secondary-feature a, #home-warp-ad-1 a, #home-warp-ad-2 a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 743px;
	height: 594px;
	overflow: hidden;
	display: block;
}
	#home-warp-ad-1 a, #home-warp-ad-2 a {
		width: 147px;
		height: 383px;
	}
	#home-main-feature a img, #home-secondary-feature a img, #home-warp-ad-1 a img, #home-warp-ad-2 a img {
		border-bottom: 2px solid #0b9bd1;
	}
		#home-main-feature a:hover img, #home-secondary-feature a:hover img, #home-warp-ad-1 a:hover img, #home-warp-ad-2 a:hover img {	
			filter: alpha(opacity=70); /* for ie */
			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* for ie */
			-moz-opacity: .70; /* for ff */
			opacity: .70; /* css 3 woo! */
		}
	#home-main-feature a span {
		position: absolute;
		top: 418px;
		left: 454px;
		background: url("../images/sitewide/triangle-big.gif") no-repeat left top;
		width: 59px;
		height: 30px;
	}
		#home-main-feature a:hover span {
			background-position: left -30px;
		}
	#home-secondary-feature a span, #home-warp-ad-1 a span, #home-warp-ad-2 a span {
		position: absolute;
		background: url("../images/sitewide/triangle-lil.gif") no-repeat left top;
		width: 18px;
		height: 9px;
	}
		#home-secondary-feature a span, #home-warp-ad-1 a span, #home-warp-ad-2 a span {
			top: 140px;
			left: 13px;
		}
		#home-secondary-feature a:hover span, #home-warp-ad-1 a:hover span, #home-warp-ad-2 a:hover span {
			background-position: left -9px;
		}
	#home-main-feature a div, #home-secondary-feature a div, #home-warp-ad-1 a div, #home-warp-ad-2 a div {
		position: absolute;
		top: 447px;
		left: 447px;
		color: #1d1e28;
		font-size: 1.2em;
		font-weight: bold;
		width: 296px;
		height: 137px;		
		background: none;
		background-color: #0ba2db;
		cursor: pointer;
		overflow: hidden;
		padding-bottom: 10px;
	}
		#home-secondary-feature a div {			
			left: 0px;
			top: 149px;
			width: 296px;
		}
		#home-warp-ad-1 a div, #home-warp-ad-2 a div {
			top: 149px;
			left: 0px;
			width: 147px;
		}
		
		#home-main-feature a:hover div, #home-secondary-feature a:hover div, #home-warp-ad-1 a:hover div, #home-warp-ad-2 a:hover div {
			background-color: #1d1d27;
		}
		#home-main-feature a div h2, #home-secondary-feature a div h2, #home-warp-ad-1 a div h2, #home-warp-ad-2 a div h2 {
			color: #1d1e28;
			font-family: "Arial Black", Arial, Helvetica, sans-serif;
			font-size: 0.9em;
			font-weight: normal;
			margin: 8px 8px 0px 8px;
			padding: 0px;
		}
			#home-main-feature a:hover div h2, #home-secondary-feature a:hover div h2, #home-warp-ad-1 a:hover div h2, #home-warp-ad-2 a:hover div h2 {
				color: #0ca2db;
			}
		#home-main-feature a div h3, #home-secondary-feature a div h3, #home-warp-ad-1 a div h3, #home-warp-ad-2 a div h3 {
			color: #145a7a;
			font-family: "Arial Black", Arial, Helvetica, sans-serif;
			font-size: 0.9em;
			font-weight: normal;
			margin: 0px 8px;
			padding: 0px;
		}
			#home-main-feature a:hover div h3, #home-secondary-feature a:hover div h3, #home-warp-ad-1 a:hover div h3, #home-warp-ad-2 a:hover div h3 {
				color: #146486;
			}
		#home-main-feature a div h4, #home-secondary-feature a div h4, #home-warp-ad-1 a div h4, #home-warp-ad-2 a div h4 {
			color: #145a7a;
			font-size: 0.6em;
			font-weight: bold;
			margin: 0px 8px;
			padding: 0px;
			text-transform: uppercase;
		}
			#home-main-feature a:hover div h4, #home-secondary-feature a:hover div h4, #home-warp-ad-1 a:hover div h4, #home-warp-ad-2 a:hover div h4 {
				color: #146486;
			}
		#home-main-feature a div p, #home-secondary-feature a div p, #home-warp-ad-1 a div p, #home-warp-ad-2 a div p {
			color: #fff;
			font-size: 1.0em;
			font-weight: bold;
			margin: 6px 8px 8px 8px;
			padding: 0px;
		}
			#home-main-feature a:hover div p, #home-secondary-feature a:hover div p, #home-warp-ad-1 a:hover div p, #home-warp-ad-2 a:hover div p {
				color: #fff;
			}
	#home-main-feature a div.seventh {
		position: absolute;
		top: 447px;
		left: 296px;
		width: 147px;
		height: 147px;
		background: url("../images/sitewide/listitembg.jpg") no-repeat left top;
		background-position: -147px -441px;
		cursor: pointer;
		border-left: 2px solid #0b9bd1;
		border-right: 2px solid #0b9bd1;
	}
		#home-main-feature a div.seventh span {
			width: 147px;
			height: 147px;
			position: absolute;
			top: 448px;
			left: 297px;
			top: 0px;
			left: 0px;
			background: url("../images/sitewide/lines.gif") repeat-y left top;		
			cursor: pointer;
		}
		
	#home-content-area h2, #home-content-area p {
		margin-right: 0px;
	}
		
/* 17/01/07 */
#right ul#releasesList li a, #right ul#releasesList li a span, #right ul#releasesList li a div {
	/*cursor: default;*/
}
/* / 17/01/07 */

#home-sponsors ul, #home-sponsors ul li {
	float: none;
	margin: 0px;
	padding: 0px;
	height: 45px;
	/* 10/01/07 */ height: 80px;
}
	#home-sponsors ul li {
		float: left;
		margin-right: 16px;
	}
		#home-sponsors ul li a {
			background-position: left top;
			background-repeat: no-repeat;
			height: 45px;
			/* 10/01/07 */ height: 80px;
			/* 10/01/07 */ width: 333px;
			display: block;
		}
			#home-sponsors ul li a:hover {
				background-position: left -45px;
				/* 10/01/07 */ background-position: left -80px;
			}
		#home-sponsors ul li.ukfilmcouncil a {
			background-image: url("../images/uk-film-council.gif");
		}
		#home-sponsors ul li.filmfour a {
			background-image: url("../images/film-4.gif");
		}
		#home-sponsors ul li.emmedia a {
			background-image: url("../images/em-media.gif");
		}
		#home-sponsors ul li.screenyorkshire a {
			background-image: url("../images/screen-yorkshire.gif");
		}
		#home-sponsors ul li.optimumreleasing a {
			background-image: url("../images/optimum.gif");
		}
		#home-sponsors ul li a span {
			display: none;
		}
		
#right ul.bulleted {
	font-size: 1.2em;
	font-weight: bold;
}
	#right ul.bulleted li {
		background: url("../images/sitewide/vert-bullet.gif") no-repeat left top;
		text-indent: 15px;
		margin-bottom: 15px;
		line-height: 1.4em;
		display: inline;
		clear: left;
		float: left;
		width: 100%;
	}s
	
#footer .footerLeft p, #footer .footerRight p {
	margin: 15px 0px 0px 8px;
}
	#footer a {
		text-decoration: none;
		color: #000;
	}
		#footer a:hover {
			text-decoration: none;
			color: #fff;
		}
		
/* making the releases list more complex - 16/03/07 */
#right ul#releasesList {
	margin: 0px;
	padding: 0px;
	width: 448px;
	display: inline;
	float: left;
}
	#right ul#releasesList li {
		display: inline;
		float: left;
		margin: 0px 2px 2px 0px;
		width: 147px;
		height: 294px;
		overflow: hidden;
		position: relative;
		font-size: 1.0em;
	}	
	
	#right ul#releasesList li a {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 147px;
		height: 294px;
		overflow: hidden;
		display: block;
	}
	#right ul#releasesList li a img {
		border-bottom: 2px solid #0b9bd1;
	}
		#right ul#releasesList li a:hover img {	
			filter: alpha(opacity=70); /* for ie */
			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* for ie */
			-moz-opacity: .70; /* for ff */
			opacity: .70; /* css 3 woo! */
		}

	#right ul#releasesList li a span {
		position: absolute;
		background: url("../images/sitewide/triangle-lil.gif") no-repeat left top;
		width: 18px;
		height: 9px;
		top: 140px;
		left: 13px;
	}
		#right ul#releasesList li a:hover span {
			background-position: left -9px;
		}
	#right ul#releasesList li a div {
		position: absolute;
		color: #1d1e28;
		font-weight: bold;
		height: 137px;		
		background: none;
		background-color: #0ba2db;
		cursor: pointer;
		overflow: hidden;
		padding-bottom: 10px;
		top: 149px;
		left: 0px;
		width: 147px;
		font-size: 1.0em;
	}
		#right ul#releasesList li a:hover div {
			background-color: #1d1d27;
		}
		#right ul#releasesList li a div h2 {
			color: #1d1e28;
			font-family: "Arial Black", Arial, Helvetica, sans-serif;
			font-size: 0.9em;
			font-weight: normal;
			margin: 8px 8px 0px 8px;
			padding: 0px;
		}
			#right ul#releasesList li a:hover h2 {
				color: #0ca2db;
			}
		#right ul#releasesList li a div h3 {
			color: #145a7a;
			font-family: "Arial Black", Arial, Helvetica, sans-serif;
			font-size: 0.9em;
			font-weight: normal;
			margin: 0px 8px;
			padding: 0px;
		}
			#right ul#releasesList li a:hover div h3 {
				color: #146486;
			}
		#right ul#releasesList li a div h4 {
			color: #145a7a;
			font-size: 0.6em;
			font-weight: bold;
			margin: 0px 8px;
			padding: 0px;
			text-transform: uppercase;
		}
			#right ul#releasesList li a:hover div h4 {
				color: #146486;
			}
		#right ul#releasesList li a div p {
			color: #fff;
			font-size: 1.0em;
			font-weight: bold;
			margin: 6px 8px 8px 8px;
			padding: 0px;
		}
			#right ul#releasesList li a:hover div p {
				color: #fff;
			}
/* and now the html linky bit at the bottom */
#right ul#releasesList li.external ul {
	margin: 0px;
	padding: 0px;
	font-size: 1.0em;
	list-style-type: none;
}
	#right ul#releasesList li.external ul li.firstLi, #right ul#releasesList li.external ul li.firstLi a {
		height: 259px;
		background-image: none;
	}
	#right ul#releasesList li.external ul li.secondLi, #right ul#releasesList li.external ul li.secondLi a {
		height: 25px;
		background-image: none;
	}
		#right ul#releasesList li.external ul li.secondLi a {
			width: 147px;
			padding: 4px 8px;
			width: 131px;
		}
			#right ul#releasesList li.external ul li.secondLi a:hover {
				background-color: #1d1d27;
			}