/*****************************************************************************************

 	Website: Sugar Bush Squirrel - The Movie
	Stylesheet Author: Andrew Hite
	Developer: Impulse Development
	Date: July 2008

*****************************************************************************************/

/* 1. GENERAL
=========================================================================================*/

/* 1.1	Global Reset
-----------------------------------------------------------------------------------------*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, label, pre,
form, fieldset, input, textarea, p, blockquote, th, td, button { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
body { font-size: 62.5%; }

/* 1.2	Typography
-----------------------------------------------------------------------------------------*/

/* 1.2.1 Headings */

h1 {
	height: 47px;
	margin-bottom: 1em;
	overflow: hidden;
	text-indent: -5000px;
	width: 100%;
}

h2 {
	color: #ffffff;
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: 1em;
}

h3 {
	color: #c0e7ff;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 1em;
}

/* 1.2.2 Paragraphs */

p {
	color: #ffffff;
	font-size: 1.4em;
	line-height: 1.4em;
	margin-bottom: 1em;
}

/* 1.2.2 Lists */

ul {
	margin-bottom: 2em;
}

ul li {
	color: #ffffff;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
}

ol li {

}

dl dt {

}

dl dd {

}

/* 1.2.3 Links */

a {
	color: #f6f6f6;
	text-decoration: underline;
}

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

h3 a {
	color: #c0e7ff;
}

/* 1.2.4 Form Inputs */

label {
	color: #ffffff;
	font-size: 1.2em;
	line-height: 2em;
}

input, textarea {
	color: #005ac5;
	font-size: 1.4em;
}

/* 1.2.4 Miscellaneous */

strong {
	font-weight: bold;
}

em {

}

.more {
	margin-top: 2em;
}

	.more li {
		color: #c0e7ff;
		text-transform: uppercase;
	}

		.more li a {
			color: #ffffff;
			text-transform: lowercase;
		}

/* 1.3	Forms
-----------------------------------------------------------------------------------------*/

form { clear: both; width: 100%; }

*:focus { outline: 0; }

/* 1.3.1 Text Fields */

.textField { display: inline; float: left; padding: 6px 0; width: 100%; }

	.textField label { display: inline; float: left; height: 16px; margin-right: 2%; padding: 6px; text-align: right; width: 23%; }

	.textField input { border: 3px solid #005ac5; display: inline; float: left; height: 16px; padding: 6px; width: 68%; }

		.textField input.small { width: 15%; }

		.textField input.medium { width: 40%;}

	.textField .fieldWithErrors input { background: #f7eded; border: 1px solid #b00000; }

/* 1.3.2 Text Areas */

.textArea { display: inline; float: left; padding: 6px 0; width: 100%; }

	.textArea label { display: inline; float: left; height: 16px; margin-right: 2%; padding: 6px; text-align: right; width: 23%; }

	.textArea textarea { border: 3px solid #005ac5; float: left; height: 75px; padding: 6px; width: 68%; }

	.textArea .fieldWithErrors textarea { background: #f7eded; border: 1px solid #b00000; }
	
/* 1.3.3 Required Fields */

.required label { font-weight: bold; }

/* 1.3.4 Submit Buttons */

.submitButton { border-top: 1px solid #005ac5; display: inline; float: left; margin-top: 6px; padding: 12px 0; text-align: center; width: 100%; }

	.submitButton button {
		background: #ffffff; border: 3px solid #005ac5;	color: #003a80;	cursor: pointer; font-weight: bold;	overflow: visible; padding: 6px; width: auto; }

	.submitButton button:hover { background: #9fc6ee; border: 3px solid #005ac5; color: #001d40; }

		.submitButton button span { background: url(../images/icn-check.gif) no-repeat left; padding-left: 20px; width: auto; }


/* 2. Layout
=========================================================================================*/

/* 2.1	Structure
-----------------------------------------------------------------------------------------*/

html {
	background: url(../images/bg-body.gif) #0066cc repeat top center;
}

body {
	background: url(../images/bg-body_top.gif) repeat-x top center;
}

.container {
	margin: 0 auto;
	width: 860px;
}

#pageHeader {
	height: 114px;
	position: relative;
	width: 100%;
	z-index: 99;
}

#pageBody {
	background: url(../images/bg-body_center.gif) no-repeat center -12px;
	min-height: 860px;
	position: relative;
	width: 100%;
	z-index: 0;
}
	
	#pageBody .content {
		margin: 0 auto;
		padding: 0 10px;
		width: 458px;
	}
	
	.home#index #pageBody .content,
	.trailer#index #pageBody .content { /* HOME PAGE OVERRIDE */
		margin: 0;
		padding: 0;
		width: 100%;
	}

#pageFooter {
	clear: both;
	position: relative;
	width: 100%;
}

/* 2.2	Header Elements
-----------------------------------------------------------------------------------------*/

/* 2.2.1 Logo */

#headerTitle {
	height: 248px;
	left: 0;
	position: absolute;
	top: 58px;
	width: 140px;
	z-index: 99;
}

	#headerTitle a {
		background: url(../images/logo-main.gif);
		display: block;
		height: 100%;
		overflow: hidden;
		text-indent: -5000px;
		width: 100%;
		z-index: 99;
	}
	
	#headerTitle a:hover {
		border-bottom: none;
	}
	
.home#index #headerTitle,
.trailer#index #headerTitle { /* Home Page Override */
	display: none;
}

/* 2.2.2 Navigation */

#headerNavigation {
	left: 161px;
	position: absolute;
	top: 60px;
	width: 538px;
}

	#headerNavigation li {
		display: inline;
		float: left;
		margin: 0 10px;
	}

		#headerNavigation li a {
			display: block;
			height: 29px;
			overflow: hidden;
			text-indent: -5000px;
		}

/* 2.3	Content Elements
-----------------------------------------------------------------------------------------*/

/* 2.3.1 Home Page H1 Override */

.home#index h1 {
	background: url(../images/logo-montage.png) no-repeat;
	height: 416px;
	left: 191px;
	overflow: hidden;
	position: absolute;
	text-indent: -5000px;
	top: 0;
	width: 478px;
}

.trailer h1 {
	display: none;
}

/* 2.3.2 Video Trailers */
.content .video {
	text-align: center;
}

/* 2.3.3 Click Here to View Trailer */

.trailerLink {
	position: absolute;
	text-align: center;
	top: 450px;
	width: 100%;
}

	.trailerLink a {
		background: url(../images/txt-click_here_to_view_trailer.gif) no-repeat top;
		display: block;
		height: 17px;
		margin: 0 auto;
		overflow: hidden;
		text-indent: -5000px;
		width: 371px;
	}
	
	.trailerLink a:hover {
		background-position: 0 -17px;
	}

/* 2.4	Sidebar Elements
-----------------------------------------------------------------------------------------*/




/* 2.5	Footer Elements
-----------------------------------------------------------------------------------------*/

#pageFooter p {
	font-size: 11px;
	text-align: center;
}

/* 2.6	Miscellaneous Elements
-----------------------------------------------------------------------------------------*/

/* 2.6.1 Images and Thumbs */

.image, .thumb {
	background: #ffffff;
}

.image img, .thumb img {
	border: 1px solid #c0e7ff;
	padding: 2px;
}

.image a:hover, .thumb a:hover {
	border-bottom: none;
}

.gallery {
	clear: both;
	float: left;
	margin-bottom: 1em;
	width: 452px;
}

.gallery .image {
	margin-bottom: 4px;
	text-align: center;
	width: 100%;
}
	.gallery .image p {
		color: #000000;
		line-height: 3em;
	}

.gallery .thumb {
	cursor: pointer;
	float: left;
	margin: 0 2px 4px 2px;
}

/* 2.6.2 Element Positioning */

.center {

}

.floatLeft {
	float: left;
	margin: 0 2em 2em 0;
}

.floatRight {
	float: right;
	margin: 0 0 2em 2em;
}

/* 2.6.3 Horizontal Rules */

.hr {
	background: url(../images/misc-horizontal_rule.gif) repeat-x left;
	clear: both;
	height: 11px;
	margin-bottom: 2em;
	width: 100%;
}

.hr hr {
	display: none;
}

/* 3. TEXT REPLACEMENT
=========================================================================================*/

.replaced {
	overflow: hidden;
	text-indent: -5000px;
}

/* 3.1 Heading Replacements
-----------------------------------------------------------------------------------------*/

.synopsis h1 { background: url(../images/hdr-synopsis.png) no-repeat left; }

.news h1 { background: url(../images/hdr-news.png) no-repeat left; }

.photos h1 { background: url(../images/hdr-photos.png) no-repeat left; }

.store h1 { background: url(../images/hdr-store.png) no-repeat left; }

.links h1 { background: url(../images/hdr-links.png) no-repeat left; }

.contact h1 { background: url(../images/hdr-contact.png) no-repeat left; }

/* 3.2 Text Replacements
-----------------------------------------------------------------------------------------*/



/* 3.3 Navigation Replacements
-----------------------------------------------------------------------------------------*/

#headerNavigation .home a { background: url(../images/nav-home.gif) top; width: 40px; }
#headerNavigation .trailer a { background: url(../images/nav-trailer.gif) top; width: 48px; }
#headerNavigation .synopsis a { background: url(../images/nav-synopsis.gif) top; width: 59px; }
#headerNavigation .news a { background: url(../images/nav-news.gif) top; width: 36px; }
#headerNavigation .photos a { background: url(../images/nav-photos.gif) top; width: 51px; }
#headerNavigation .store a { background: url(../images/nav-store.gif) top; width: 40px; }
#headerNavigation .links a { background: url(../images/nav-links.gif) top; width: 34px; }
#headerNavigation .contact a { background: url(../images/nav-contact.gif) top; width: 60px; }

#headerNavigation a:hover {
	background-position: 0 -29px;
	border-bottom: none;
}