/* CSS Reset */

body, div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
    margin: 0px; padding: 0px; border: 0px;
}

body {
	margin: 0 auto;
	font-family: Century Gothic, Arial, sans-serif; color:#666666;
	line-height: 150%;
	background-image:url(assets/images/clouds_bg.gif);
	background-repeat:repeat;
	background-color:#66CCEE;
}

h1.home {
margin: 0 0 40px 0;
}

h2.film{
margin-left:184px;
}

h3.start {
width: 320px;
height: 50px;
background-image:url(assets/images/start.gif);
background-repeat:no-repeat;
text-indent: -9999px;
}


a:link {
color: #FF0000;
text-decoration:none;
}

a:hover {
color: #FF0000;
text-decoration:underline;
}

a:visited {
color:#FF0000;
text-decoration:none;
}

#page-wrap {
background-color:#FFFFFF;
}

/* Lay out the page structure with a container */
#container {
	width: 960px;
	margin: 0 auto; 
	padding: 0 0 0 0px;
	border: #FF0000 thick;
}

#header {
	margin: 0 0 100px 0;
	padding: 0px;
}

	#header h1 {
	width: 740px;
	height: 120px;
	padding: 0;
	margin: 100px 0 10px 88px;
	text-indent:-9999px;
	background-image:url(assets/images/harmony_title.gif);
	}
	
/* CSS Menu */
		
	ul.cssmenu {
	list-style: none;
	padding: 0px 30px;
	display:block;
	padding-bottom:50px;
	}

.displace {
	position: absolute;
	left: -5000px;
	}

ul.cssmenu li {
	float: right;
	}

ul.cssmenu li a {
	display: block;
	width: 180px;
	height: 120px;
	background: url(menu.png);
	}

/*
*	Normal Links
*/
ul.cssmenu li.home a {
	background-position: 0 0;
	}

ul.cssmenu li.about a {
	background-position: -180px 0;
	}

ul.cssmenu li.characters a {
	background-position: -360px 0;
	}

ul.cssmenu li.film a {
	background-position: -540px 0;
	}

ul.cssmenu li.contact a {
	background-position: -720px 0;
	}


/*
*	Hover Links
*/
ul.cssmenu li.home a:hover {
	background-position: 0 -120px;
	}

ul.cssmenu li.about a:hover {
	background-position: -180px -120px;
	}

ul.cssmenu li.characters a:hover {
	background-position: -360px -120px;
	}

ul.cssmenu li.film a:hover {
	background-position: -540px -120px;
	}

ul.cssmenu li.contact a:hover {
	background-position: -720px -120px;
	}

/*
*	Selected/Active Links
*/
ul.cssmenu li.home a.selected {
	background-position: 0 -240px;
	}

ul.cssmenu li.about a.selected {
	background-position: -180px -240px;
	}

ul.cssmenu li.characters a.selected {
	background-position: -360px -240px;
	}

ul.cssmenu li.film a.selected {
	background-position: -540px -240px;
	}

ul.cssmenu li.contact a.selected {
	background-position: -720px -240px;
	}


#content {
background-image:url(assets/images/top_corner.jpg);
background-repeat:no-repeat;
margin: 0;
padding: 50px 30px 100px 30px;
background-color:#FFFFFF;
height:100%;
}

.cast {
padding: 40px 0 20px 0;
}

#credits {
width:520px;
margin-left:184px;
}

#col_left {
width:305px;
float:left;
margin-right:10px;
}

#col_right {
width:200px;
float:right;
}

	h3.facebook {
		width: 542px;
		height: 80px;
		margin: 0 0 20px 200px;
		text-indent:-9999px;
		background-image:url(assets/images/facebook.jpg);
		}
		
	h3.twitter {
		width: 542px;
		height: 80px;
		margin: 0 0 20px 200px;
		text-indent:-9999px;
		background-image:url(assets/images/twitter.jpg);
		}
		
	h3.email {
		width: 542px;
		height: 80px;
		margin: 0 0 20px 200px;
		text-indent:-9999px;
		background-image:url(assets/images/email.jpg);
		}
		
#team {
	margin: 0;
	width: 900px;
	height: 290px;
	padding: 10px;
	background-color:#FFFFFF;
	}

#footer {
	margin: 0 0 40px 0;
	padding: 50px 0 20px 0;
	height: 100px;
	background-image:url(assets/images/footer_hearts.gif);
	background-repeat:no-repeat;
	text-align:center;
	color:#FFFFFF;
}

	#footer h2 {
		width: 200px; height: 57px; margin: 0 0 10px 0;
		text-indent: -9999px;
	}
	
	#footer ul {
		list-style: none; margin: 0 0 60px 0;
	}
		#footer ul li {
			display: inline; /* IE6 fix to prevent the step down bug */
		}
			#footer ul li a {
				display: block; /* Make the anchors a block element, allowing the width and height to be specified and increasing the clickable area */
				float: left; /* Float them side by side */
				height: 40px; /* 40px is the height of the icon */
				margin: 0 89px 0 0; /* Space out the links with some right margin */
				padding: 10px 0 0 60px; /* Align the text to the icon with top padding and move it away from the icon with left padding */
				color: #827161; text-decoration: none; font-size: 20px; /* Style up the link text, remove the default underline */
				background-image: url(images/contact-icons.jpg); /* Add the icon sprite */
				background-repeat: no-repeat; 
			}
			/* Reposition the sprite background image for each of the links according to their class name */
			#footer ul li a.email { background-position: 0 0; }
			#footer ul li a.twitter { background-position: 0 -100px; }
			#footer ul li a.linkedin { background-position: 0 -250px; }
			#footer ul li a.blog { background-position: 0 -400px; margin: 0; }
			
			#footer ul li a:hover {
				color: #FF0000; /* Change the color of the link text on hover */
			}
	
	#footer p.copyright {
		clear: both; /* The links above were floated, so clear the float on the copyright text */
		float: right; margin: 0 40px 0 0; /* Add a new float to the right and shift into place with some right margin */
		font-size: 12px; color: #827161; /* Style up the text */
	}

/* A handy 'Clearfix' technique to clear floats in order to avoid affecting page elements further down the document */		
.clear:after {
	content: "";
	display: block; visibility: hidden; clear: both;
}
	.clear { zoom: 1; } /* Clearfix IE fix */