* { margin: 0px; padding: 0px }

/* -- standard classes-- */


h1 span, h2 span, h3 span, a span {
	visibility: hidden; 
	
	} 
h3 {
	margin-bottom: 15px;
	font-size: 1.15em;
	font-weight: normal;
	letter-spacing: .1em;
	color: #ff9933;
	
	}
h4 {
	margin-top: 15px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #fff;
	
	}
p {
	margin-top: 10px;
	font-size: 0.85em;
	
	}
hr {
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 30px;
	width: 60%;
	height: 1px;
	background-color: #444;
	border: none;
	
	}
a {
	cursor: pointer;
	text-decoration: underline;
	}
.highlight {
	color: #fff; 
	
	}
.spacer {
	position: relative;
	clear: both;
	width: 100%;
	height: 30px;
	
	}
		
/* -- /standard classes */

body {
	z-index: 0;
	height: 100%;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.125em;
	color: #ccc;
	text-align: center;
	background-color: #1A1D1C;
	
	}
	#container {
		position: relative;
		z-index: 1;
		float: none;
		margin-right: auto;
		margin-left: auto;
		margin-top: 10px;
		margin-bottom: 30px;
		width: 960px;
		min-height: 100%;
		text-align: left;
		
		}
	.home {
		background-color: #161819;
		
		}
	.filmography {
		background-image: url(images/filmographyBack.jpg);
		background-position: top left;
		background-repeat: repeat-y;
		
		}
		
		/* -- header -- */
			
			#container #header {
				position: relative;
				z-index: 2;
				margin: 0px;
				padding: 0px;
				width: 960px;
				height: 160px;
				background-image: url(images/headerBack.jpg);
				background-repeat: repeat-x;
		
				}
				#header h1 {
					position: absolute;
					top: 50px;
					left: 30px;
					width: 269px;
					height: 25px;
					background-image:url(images/harryClegg.jpg);
					
					} 
				#header h2 {
					position: absolute;
					top: 80px;
					left: 210px;
					width: 118px;
					height: 30px;
					background-image: url(images/filmmaker.jpg);
					
					}
				
				/* -- mainMenu -- */	
						
					#header ul {
						position: absolute;
						bottom: 10px;
						right: 30px;
						
						}
						#header ul li{
							position: relative;
							display: inline;
							margin-left: 15px;
							
							}
							#menuHome {
								width: 61px;
								height: 14px;
							
								}
							#menuFilmography {
								width: 149px;
								height: 14px;
							
								}
							#menuContact {
								width: 95px;
								height: 14px;
							
								}
							.selected {
								color: #ff9933;
								text-decoration: none;
								border: none;
								
								}
						#header a, #header img {
							border: none;
							text-decoration: none
							
							}
	
							
				/* -- /mainMenu -- */		
				/* -- filmography --*/

				#header #close {
					position: absolute;
					z-index: 2;
					left: 30px;
					bottom: 0px;				
					display: none;	
	
					}

				/* -- /filmography -- */
		
		/* -- /header -- */
		/* -- contentLeft -- */
		
			#container #contentLeft {
				position: relative;
				z-index: 2;
				float: left;
				clear: both;
				height: 100%;
				margin-top: 0px;
				margin-left: 30px;
				}
				
				
				/* -- Home page (Contact page uses same css) -- */
					
				.home #contentLeft {
					width: 500px;
					min-height: 400px;
				
					}
					.home #contentLeft img {
						margin-top: 20px;
						border: solid 1px #222927;
					
						}
						
				/* -- /Home page -- */
				/* -- Filmography page -- */
					
				.filmography #contentLeft {
					width: 270px;
				
					}
					#contentLeft .shadeTop {
						position: absolute;
						top: 0px;
					
						}
						/* .shadeBottom needed to placed in footer to ensure it sticks to the bottom of leftColumn */
					.filmography #contentLeft ul {
						margin-top: 40px;
						margin-right: 50px;
						list-style: none;
						font-size: 0.9em;
						text-align: right;
						
						
						}
						.filmography #contentLeft ul li {
							margin-bottom: 10px;
							
							}
				.filmography #contentLeft a:link, .filmography #contentLeft a:visited {
					color: #A8B5B4;
					text-decoration: none;
					border-bottom: dotted 1px #67Fd8e;
				
					}
				.filmography #contentLeft a:hover {
					color: #fff;
					text-decoration: none;
					border: none;
				
					}
				.filmography #contentLeft a:active {
					color: #fff;
					text-decoration: none;
				
					}
				.filmography #contentLeft a:focus {
					color: #A8B5B4;
					padding-left: 5px;
					padding-right: 5px;
					background-color: #222927;
		
					}
					
					
						
				/* -- /Filmography page -- */
				
		/* -- /contentLeft -- */
		/* -- contentRight -- */
		
			#container #contentRight {
				position: relative;
				z-index: 2;
				float: right;
				margin-right: 30px;
				margin-bottom: 0px;
				}
				
				
				/* -- Home page -- */
				
				.home #contentRight{
					width: 341px;
					min-height: 100px;
					margin-top: 40px;
				
					}
					#contentRight #welcome{
						width: 112px;
						height: 25px;
						background-image: url(images/welcome.jpg);
						
						}
					#contentRight #aboutHarry{
						width: 136px;
						height: 38px;
						background-image: url(images/aboutHarry.jpg);
						
						}
						
				/* -- /Home page -- */
				/* -- Showreel page (mainly uses the same css as the Home page - see above) --*/
				
					#contentRight #showreel{
						width: 125px;
						height: 28px;
						background-image: url(images/showreel.jpg);
						
						}
				
				/* -- /Showreel page --*/
				/* -- Contact page (mainly uses the same css as the Home page - see above) --*/
				
					#contentRight #contact{
						width: 105px;
						height: 20px;
						background-image: url(images/contact.jpg);
						
						}
				
				/* -- /Contact page --*/
				/* -- Filmography page --*/
				
				.filmography #contentRight{
					width: 600px;
					margin-top: 40px;
					margin-bottom: 0px;
					
					}
					/* Initializes all filmography content divs to 0 opacity and no display */  
					#shatterContent, #sleeperContent, #farFromTheTreeContent, #loopAloopContent, #yoCanContent, #mummysBoyContent, #callerPaysContent, #sixFortyThreeContent, #fiddlerContent, #dismalResultsContent, #thinkingOfYouContent, #dreamALittleDreamContent { 
						position: relative;
						top: 0px;
						filter: alpha(opacity=0);
						-moz-opacity: 0;
						-khtml-opacity: 0;
						opacity: 0;		
						display:none;
					
						} 
						/* Following are the h3 ids for the respective filmography content */
						#initialFilmography {
							width: 187px;
							height: 39px;
							background-image: url(images/initialFilmography.jpg);
							
							}
						#shatter{
							width: 82px;
							height: 27px;
							background-image: url(images/shatter.jpg);
							
							}
						#sleeper {
							width: 82px;
							height: 27px;
							background-image: url(images/sleeper.jpg);
							
							}
						#farFromTheTree{
							width: 194px;
							height: 27px;
							background-image: url(images/farFromTheTree.jpg);
							
							}
						#loopAloop{
							width: 143px;
							height: 27px;
							background-image: url(images/loopAloop.jpg);
							
							}
						#yoCan {
							width: 83px;
							height: 27px;
							background-image: url(images/yoCan.jpg);
							
							}
						#ilMaestro {
							width: 112px;
							height: 27px;
							background-image: url(images/ilMaestro.jpg);
							
							}
						#callerPays {
							width: 119px;
							height: 27px;
							background-image: url(images/callerPays.jpg);
							
							}
						#fiddler {
							width: 78px;
							height: 27px;
							background-image: url(images/fiddler.jpg);
							
							}
						#mummysBoy {
							width: 154px;
							height: 27px;
							background-image: url(images/mummysBoy.jpg);
							
							}
						#sixFortyThree {
							width: 139px;
							height: 27px;
							background-image: url(images/sixFortyThree.jpg);
							
							}
						#dismalResults {
							width: 162px;
							height: 22px;
							background-image: url(images/dismalResults.jpg);
							
							}
						#thinkingOfYou {
							width: 185px;
							height: 26px;
							background-image: url(images/thinkingOfYou.jpg);
							
							}
						#dreamALittleDream  {
							width: 244px;
							height: 19px;
							background-image: url(images/dreamALittleDream.jpg);
							
							}
					.filmography #contentRight ul {
						margin-left: 100px;
						font-size: 0.85em;
					
						}
					.filmography table {
						font-size: 0.85em;
						
						}
						.filmography table th {
							font-weight: normal;
						
							}
						.filmography table td {
							padding-left: 20px;
						
							}
				.filmGrey {
					color: #666d6b;
					
					}
				.filmRed {
					color: #FE3636;
					
					}
				.filmHR {
					margin-top: 10px;
					margin-bottom: 10px;
					clear: both;
					width: 100%;
					height: 1px;
					background-color: #444;
					border: none;
					
					}
				.filmImg {
					margin-bottom: 0px;
					border: solid 1px #222927;
					
					}
				.playFilm {
					margin-top: 10px;
					border: none;
					
					}
				#flashTest {
					position: absolute;
					z-index: 10;
					top: -40px;
					left: -330px;
					width: 900px;
					height: 100%;
					background-color: #29302F;
					padding: 30px;
					color: #ff0000;
		
					}
					
				/* -- /Filmography page --*/
				
				#contentRight a:link, #contentRight a:visited {
					color: #999;
					text-decoration: none;
					padding-bottom: 2px;
					border-bottom: dotted 1px #67Fd8e;
				
					}
				#contentRight a:hover {
					color: #fff;
					text-decoration: none;
					border: none;
				
					}
				#contentRight a:active {
					color: #fff;
					text-decoration: none;
				
					}
				#contentRight a:focus {
					color: #000;
					background-color: #6EFF9A;
		
					}
				
		/* -- /contentRight -- */
		/* -- footer -- */
		
		#container #footer {
			position: relative;
			z-index: 2;
			clear: both;
			margin: 0px;
			height: 80px;
			width: 960px;
			background-image: url(images/footerBack.jpg);
			background-repeat: repeat-x;
			border: none;
			
			}
			.filmography #footer .shadeBottom { /* placed here to stick to bottom of leftColumn */
						position: absolute;
						z-index: 4;
						top: -35px;
						left: 30px;
					
						}
			#footer #copyright {
				position: absolute;
				z-index: 3;
				top: 30px;
				right: 30px;
				font-family: Georgia, "Times New Roman", Times, serif;
				font-size: 0.9em;
				text-align: right;
				color: #222927;
				text-transform: uppercase;
				
				}
			
				#copyright a:link, #copyright a:visited {
					color: #222927;
					text-decoration: none;
					border-bottom: dotted 1px #222927;
				
					}
				#copyright a:hover {
					color: #A8B5B4;
					text-decoration: none;
					border: none;
				
					}
				#copyright a:active {
					color: #A8B5B4;
					text-decoration: none;
				
					}
				#copyright a:focus {
					color: #A8B5B4;
					background-color: #222927;
		
					}

		/* -- /footer -- */