/*-----------------------------------------------------------------------------
version:   1.0
author:    John Anderson
email:     janderson@soaringpenguin.co.uk
website:   http://www.soaringpenguin.co.uk/
date:      2009 Jul 31

Copyright 2007 Soaring Penguin Ltd. All Rights Reserved
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/

/* hack for forcing scroll bars to stop page jog - 
http://www.splintered.co.uk/experiments/49/ */
html { margin-bottom: 1px; min-height: 100%; }

/* Remove padding and margin on selected elements*/
h1,h2,h3,h4,h5,h6,pre,body,p,div{margin: 0; padding: 0;}

/*debug border on all divs*/
div{
    border: 0px solid #ccc;
}

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

/* Remove border around linked images and fix Firefox odd spaces */
img {
    border: 0;
    vertical-align: bottom;
}
body {
	background-color: #000000;
}
.inline {
	display: inline;
}

/* =Structural
-----------------------------------------------------------------------------*/
#container {
	width:720px;
	height: 576px;
	margin: 20px auto;
	border-top: 1pt solid black;
        position: relative;
}

		  
	.default {
		background-image: url(../images/2.jpg);
	}
	.girls-in-love {
		background-image: url(../images/8.jpg);
	}
	.short-films,
	.extra-material
	{
		background-image: url(../images/10.jpg);
	}
	.offside {
		background-image: url(../images/11.jpg);
	}
	.about {
		background: #000000 url(../images/27.jpg) left bottom no-repeat;
	}
	#container.default #header,
	#container.about #header
	{
		width: 613px;
		height: 56px;
		margin: 60px 62px 0 45px;
	}
	#container.short-films #header {
		width: 250px;
		height: 56px;
		margin: 60px 244px 0 226px;
	}
	#container.offside #header {
		width: 165px;
		height: 56px;
		margin: 60px auto 0 auto;
	}
	#container.girls-in-love #header {
		width: 248px;
		height: 56px;
		margin: 60px auto 0 auto;
	}
	#container.extra-material #header {
		width: 317px;
		height: 56px;
		margin: 60px auto 0 auto;
	}
	
	#navigation {
		width: 572px;
	}


/* =Typography
-----------------------------------------------------------------------------*/
	.default #header h1,
	.about #header h1
	{
		width: 613px;
		height: 56px;
		position: relative;
	}
		.default #header h1 span,
		.about #header h1 span
		{
			background: url(../images/3.gif) no-repeat;
			position: absolute;
			width: 100%;
			height: 100%;
		}
	.short-films #header h1 {
		width: 250px;
		height: 56px;
		position: relative;
	}
		.short-films #header h1 span {
			background: url(../images/12.gif) no-repeat;
			position: absolute;
			width: 100%;
			height: 100%;
		}
	.offside #header h1 {
		width: 165px;
		height: 56px;
		position: relative;
	}
		.offside #header h1 span {
			background: url(../images/22.gif) no-repeat;
			position: absolute;
			width: 100%;
			height: 100%;
		}
	.girls-in-love #header h1 {
		width: 248px;
		height: 56px;
		position: relative;
	}
		.girls-in-love #header h1 span {
			background: url(../images/24.gif) no-repeat;
			position: absolute;
			width: 100%;
			height: 100%;
		}
	.extra-material #header h1 {
		width: 317px;
		height: 56px;
		position: relative;
	}
		.extra-material #header h1 span {
			background: url(../images/26.gif) no-repeat;
			position: absolute;
			width: 100%;
			height: 100%;
		}
	#about h2,
	#about h3,
	#about p,
	#about a
	{
		color: #ffffff;
		font-family: Arial;
	}
	#about h3 {
		margin-top: 7px;
	}
	#about a {
		text-decoration: none;
	}
	#about a:hover {
		color: #ff0000;
	}



/* =Headings
-----------------------------------------------------------------------------*/
	#article h1 {
		color: #ffffff;
		background-image: url(../images/23.gif);
		height: 56px;
	}
		
	



/* =Links
-----------------------------------------------------------------------------*/
	#article p.home a{
		display: inline;
	}





/* =Branding
-----------------------------------------------------------------------------*/




/* =Main Nav
-----------------------------------------------------------------------------*/
	#navigation {
		margin: 40px 0 0 63px;
	}
		#navigation ul {
			padding: 0;
			margin: 0;
			marring-right: 20px;
			list-style-type: none;
		}
			#navigation ul li {
				margin: 10px 0 0 0;
				padding: 0 0 7px 5px;
				width: 577px;
			/*	height: 60px;		*/
				background-color: #000000;
			}
				#navigation ul li a {
					height: 100%;
					width: 577px;
					height: 24px;
					display: block;
					text-decoration: none;
					color: #ffffff;
					font-family: Arial;
					font-size: 1.6em;
					padding: 0;
				}
				#navigation ul li a:hover {
					color: #ff0000;
				}
				#navigation ul li.short_films {
					background: #000000 url(../images/13.jpg) no-repeat right 10px;
				}
				#navigation ul li.offside {
					background: #000000 url(../images/14.jpg) no-repeat right 10px;
				}
				#navigation ul li.girls-in-love {
					background: #000000 url(../images/25.jpg) no-repeat right 10px;
				}
				#navigation ul li.extra_material {
					background: #000000 url(../images/15.jpg) no-repeat right 10px;
				}
				#navigation ul li.falling {
					background: #000000 url(../images/17.jpg) no-repeat right 10px;
				}
				#navigation ul li.safer {
					background: #000000 url(../images/18.jpg) no-repeat right 10px;
				}
				#navigation ul li.fuel {
					background: #000000 url(../images/19.jpg) no-repeat right 10px;
				}
				#navigation ul li.white{
					background: #000000 url(../images/20.jpg) no-repeat right 10px;
				}
				#navigation ul li.indoors{
					background: #000000 url(../images/21.jpg) no-repeat right 10px;
				}
				#navigation ul li p {
					font-family: Arial;
					color: #ffffff;
					font-size: 0.9em;
					margin-top: 3px;
					font-weight: normal;
				}	
				
		



/* =Sub Nav
-----------------------------------------------------------------------------*/
	p.home a {
		margin: 20px auto 0 auto;
		color: #ffffff;
		font-family: Arial;
		font-size: 0.5em;
		text-decoration: none;
		background-color: #000000;
		width: 100%;
		display: block;
	}
	p.home a:hover {
		color: #ff0000;
	}
		
	#navigation #article ul {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 100%;
		float: left;
	}
		#navigation #article ul li {
			float: left;
			margin: 0;
			padding: 0;
			background-color: #dddddd;
			height: 1.5em;
			line-height: 1.5em;
			width: 50%
		}	
			#navigation #article ul li a {
				color: #ffffff;
				font-family: Arial;
				font-size: 0.9em;
				text-decoration: none;
				background-color: #000000;
				display: block;
			}
		





/* =Main Content
-----------------------------------------------------------------------------*/
    #montage {
    position: absolute;
    top: 440px;
    left: 200px; 
    
    }
	
		




/* =Secondary Content
-----------------------------------------------------------------------------*/



/* =Footer
-----------------------------------------------------------------------------*/



/* =Forms
-----------------------------------------------------------------------------*/




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

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

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



/* =Misc 1
-----------------------------------------------------------------------------*/



/* =Misc 2
-----------------------------------------------------------------------------*/