body {
	background-color: #000000;
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	/* letter-spacing: 0.1em; */
}

a {
	color: white;
	text-decoration: none;
}

.boxButton {
	float: left;
	min-width: 118px;
	margin: 10px auto auto auto;
	padding: 7px 12px 6px 12px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255,255,255,0.3);
	border-color: white\9;
	font-size: 10pt;
	font-weight: 300;
	line-height: normal;
	letter-spacing: 0.1em;
	text-align: center;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none;
}

.boxButton:hover, .boxButton.selected { background-color:rgba(0,0,0,0.1); background-color:transparent\9;  }

.regular { font-weight: 400; }

.iebg { position: absolute; top: 0px; left:0px; z-index:0; }

#hidden_data { visibility: hidden; display: none; }



/****************** Nav and Background ******************/

#nav_container {
	position: fixed;
	margin: 0;
	padding: 0;
	top: 0px;
	left: 0px;
	width: 100%;
	min-width: 768px;
	height: 43px;
	border-bottom: 2px solid black;
	background-image: url("../img/header_bg.png");
	color: white;
	text-align: center;
	z-index: 100;
	
}

#logo_nav {
	position: absolute;
	top: 0;
	left: 0;
}

#nav {
	position: relative;
	height: 43px;
	/* border: 1px solid red; */
}


.navButton {
	float:left;
	margin-top: 10px;
	height: 33px;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */
}

.navButton span{ font-size: 0.8em; font-weight: 300; letter-spacing: 0.2em; color: white; text-decoration: none; }


.navUnderline {
	position: relative;
	left: 0;
	margin-top: 7px;
	height: 4px;
	width: 100%;
	background-color: #ad5b2d;
}

.navDivider {
	float: left;
}

#background_image {
	position: relative;
	background-size: cover;
	/* background-image: url("../img/home/logo_main.png"); */
	width: 100%;
	height: 100%;
	min-width: 1200px;
}




/********************* Main Content Body **********************/

#foreground {
	position: absolute;
	margin: 0;
	padding: 0 0 0 0;
	top: 0px;
	left:0px;
	z-index: 50;
	width: 100%;
}

.releaseDate {
	position: absolute;
	display: block;
	top: 12px;
	right: 20px;
	margin: 0;
	padding: 0;
	height: 43px;
	font-size: 0.9em;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 300;
	letter-spacing: 0.1emp;
}

.releaseDateBold {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
}

.releaseDateLight {
	opacity: 0.6;
}




/*********************** Home ********************/

#home_page {
	display: none;
	position: absolute;
	top: 43px;
	left: 0px;
	width: 100%;
	background-image: url("../img/home/bg_home.jpg");
	background-size: cover;
	overflow: hidden;
	/* border: 2px solid white; */
}

#home_fg { position: absolute; top: 50px; left: 0px; z-index: 1; }
#home_fg img { position: absolute; top: 0px; left: 0px; }

#home_head { position: relative; top:25px; width: auto; color: #3ec0cd; font-family: 'Roboto', sans-serif; font-weight: 300; letter-spacing: 0.5em; z-index: 2; }
#home_head_text { float:left; margin: 0 10px 0 10px; }
#stephaniemeyer { font-size: 1.1em; font-weight: 700; }
#twilight { font-size: 1.4em; font-weight: 700; }

#logo_main { position: absolute; margin-left:auto; margin-right: auto; top:550px; width:528px; height: 257px; z-index: 2;} /*550*/
#glow { position: absolute; left: 0px; top: 0px; }

#home_links {
	position: absolute;
	top: 70px;
	left: 60%;
	width: 617px;
	height: 500px; 
	background-color: black; 
	z-index: 10;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none;
}

.linkBox {
	position: absolute;
	display: block;
	background-size: cover;
	border: 1px solid black;
}

/* little icons in 3 boxes at bottom */
.linkBox img { position: absolute; right:7px; bottom:6px; 	border-style: solid; border-width: 1px; border-color: rgba(255,255,255,0.3); border-color: white\9; }

.linkTextArea { position: absolute; left: 20px; bottom: 15px; width: 80%; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; font-size: 1.8em; line-height: 1.0em; }

.smallLinkTextArea { position: absolute; left: 20px; bottom: 5px; width: 80%; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; font-size: 1.0em; line-height: 1.0em; }

#linkBox0 { top:0%; left: 0%; width: 62%; height: 43%; }
#linkBox1 { top:43%; left: 0%; width: 62%; height: 44%; }
#linkBox2 { top:0%; left: 62%; width: 38%; height: 87%;  }
#linkBox3 { top:87%; left: 0%; width: 33%; height: 13%; }
#linkBox4 { top:87%; left: 33%; width: 34%; height: 13%; }
#linkBox5 { top:87%; left: 67%; width: 33%; height: 13%; }
#linkBox0 .linkTextArea, #linkBox1 .linkTextArea { left: auto; right: 20px; text-align: right;  }
#linkBox2 .linkTextArea { top: 10px; bottom: auto; }
#linkBox0 .boxButton, #linkBox1 .boxButton  { float: right; }




/*********************** About *******************/

#about_page {
	display: none;
	position: absolute;
	top: 43px;
	left: 0px;
	width: 100%;
	background-image: url("../img/about/bg_about.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

#about_nav {
	display: block;
	position: absolute;
	left: 72px;
	top: 268px;
	overflow: hidden;
	z-index: 3;
}

#about_nav .boxButton {
	margin: 0 5px 0 0;
	cursor: pointer;
}

#about_head {
	position: absolute;
	top: 136px;
	left: 74px;
	height: 80px;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 2.6em;
	z-index: 2;
}

#about_head .largeHead{
	font-size: 3.4em;
}

#about_text_container {
	position: absolute;
	top: 352px; /*352*/
	left: 74px;
	font-size: 0.9em;
	height: 290px;
	width: 600px;
	z-index: 1;
	overflow: auto;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.5em;
}
	#about_text_container p{
		margin: 1em 1em 1em 0em;
	}
	#about_text_container h3{
		margin-top: 2em;
	}
	#about_text_container p:first-child,
	#about_text_container h3:first-child{
		margin-top: 0px;
	}


#about_text_body {
	
	/* -moz-column-count:2; -webkit-column-count:2; column-count:2; */
	/* -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px; */
}


#button_synopsis { cursor: default; width: 170px; text-align: center; }
#button_production_notes { 	width: 170px; text-align: center; }




/*********************** Photos ********************/

#photos_page {
	display: none;
	position: absolute;
	top: 43px;
	left: 0px;
	width: 100%;
	min-height: 900px;
	background-color: black;
	background-image:url(../img/photos/bg_photos.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	overflow-y: hidden;
	-webkit-user-select: none; /* Chrome/Safari */ 
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none;
}

#photos_head {
	position: absolute;
	top: 96px;
	left: 74px;
	height: 80px;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 2.6em;
	z-index: 2;
}

#photos_head .largeHead{
	font-size: 3.4em;
}

#photo_large_container {
	position: fixed;
	top: 43px;
	left: 0px;
	width: 1280px;
	height: 900px;
	background-color: rgba(0,0,0,0.9);
	background-color: #000000\9;
	background-repeat: no-repeat;
	opacity: 0.0;
	z-index: -1;
}

#photo_large {
	position: absolute;
}

#masonry_container {
	position: relative;
	top: 254px;
	margin-right: auto;
	margin-left: auto;
	width: 1300px;
	height: auto;
	z-index: 1;
}

#masonry{
	background-color: black;
}


#photo_arrow_left { position: absolute; left: 20px; top: 42%; }
#photo_arrow_right { position: absolute; right: 20px; top: 42%; }
.photosArrow { opacity:0.6; cursor: pointer; }
.photosArrow:hover { opacity: 1.0; }

.photoThumb {
	border-left: 1px solid black;
	border-top: 1px solid black;
	cursor: pointer;
}

.thumbLabel {
	position: absolute;
	padding: 10px 0 0 16px;
	font-size: 0.8em;
	width: 404px;
	height: 30px;
	right: 0px;
	bottom: 0px;
	background: rgba(0,0,0,0.3);
	cursor: pointer;
	visibility: hidden;
}

.thumbOverlay {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.0;
	cursor: pointer;
}

.thumbOverlay .boxButton {
	position: absolute;
	width: 100px;
	left: 140px;
	top: 105px;
	
}


#photo_footer {
	position: absolute;
	bottom: 30px;
	width: 100%;
	height: 92px;
}

#photo_caption_container {
	position: absolute;
	bottom: 10px; 
	left: 30px;
	font-size: 3.0em;
	font-weight: 300;

}

#photo_sharing_links {
	position: absolute;
	bottom: 34px;
	right: 40px;
	width: 200px;
	cursor: pointer;
}


.photoSharingLink { float: right; margin:0 0 0 26px; width: 22px; height:22px; }
.photoSharingLink:hover { opacity: 0.6; }

#photo_close { position: fixed; top: 60px; right: 30px; font: 0.8em "Roboto", sans-serif; font-weight: 300; cursor:pointer; }




/*********************** Videos ********************/

#videos_page {
	display: none;
	position: relative;
	margin: 43px auto 0 auto;
	left: 0px;
	top: 0px;
	z-index: 0;
}

#player_container {
	position: relative;
	margin: 43px auto 0 auto;
	left: 0px;
	top: 0px;
	width: 100%;
	background-color: black;
	z-index: 0;
}

#video_thumb_panel {
	display: none;
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 70px;
	width: 100%;
	background-color: #1c1a19;
}

#video_thumb_mask {
	position: relative;
	left: 10px;
	top: 4px;
	height: 53px;
	overflow: hidden;
}

#video_thumb_container {
	position: absolute;
	margin: 0;
	height: 53px;
	overflow: hidden;
}

#video_label {
	position: absolute;
	bottom: 62px; /* 100px; */
	left: 40px;
	height: 80px;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 2.2em;
	-webkit-text-shadow: 2px 2px 4px #000; -moz-text-shadow: 2px 2px 4px #000; text-shadow: 2px 2px 4px #000;
	pointer-events:none;
}

#video_label .largeHead{
	font-size: 2.8em;
}

#thumb_open_button {
	position: absolute;
	bottom: 60px;
	right: 15px;
	-webkit-text-shadow: 2px 2px 4px #000; -moz-text-shadow: 2px 2px 4px #000; text-shadow: 2px 2px 4px #000;
}

.videoThumb {
	float: left;
	margin-right: 6px;
}

/*********************** Cast & crew ********************/
#castcrew_page{
	display: none;
	margin: 43px auto 0 auto;
}

#castcrew_page .content{
	position: absolute;
	top: 10%;
	left: 5%;
	width: 331px;
}
	#castcrew_page .header{
		border-bottom: 1px solid rgba(255,255,255,0.3);
		border-bottom: 1px solid white\9;
		padding-bottom: 1.5em;
		margin-bottom: 1.5em;
	}
	#castcrew_page .content .boxButton{
		min-width: 98px;
		margin-right: 5px;
	}
	#castcrew_page .content #people{
		margin-bottom: 2em;
		font-size: 10pt;
		line-height: 18pt;
	}
	#castcrew_page .content .person{
		white-space: nowrap;
		float: left;
		font-size: 14px;
		cursor: pointer;
	}
	#castcrew_page .content .person.selected{
		text-decoration: underline;
	}
		#castcrew_page .content .person:after{
			/*content: "\2219";*/
			content: " ";
			width: 32px;
			text-align: center;
			display: inline-block;
		}
			#castcrew_page .content .person:last-child:after{
				content: none;
				width: 0px;
			}
		#castcrew_page .content .person:focus,
		#castcrew_page .content .person:active{
			border: none;
			outline: none;
		}
	#castcrew_page .content #body-copy{
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		height: 15em;
		font-size: 14px;
		outline: none;
		border: none;
	}
		#castcrew_page .content #body-copy p{
			margin: 0 1em 1em 0;
		}
	/*cast / crew page states*/
	#castcrew_page .content.cast .boxButton.cast{
		background-color:rgba(0,0,0,0.1);
		background-color:transparent\9;
	}
	#castcrew_page .content.cast #crew-list{
		display: none;
	}
	#castcrew_page .content.crew .boxButton.crew{
		background-color:rgba(0,0,0,0.1);
		background-color:transparent\9;
	}
	#castcrew_page .content.crew #cast-list{
		display: none;
	}

#castcrew_head {
	font-size: 1.2em;
	font-weight: 300;
	line-height: 2.6em;
}

#castcrew_head .largeHead{
	font-size: 3.4em;
}

#key-art {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 45px;
  left: 0px;
}
  #key-art img {
    position: absolute;
    top: 0px;
    left: 0px;
  }
  #key-art.fillWidth img {
    width: 100%;
  }
  #key-art.fillHeight img {
    height: 100%;
  }


/*********************** Partners *******************/

#partners_page {
	display: none;
	position: absolute;
	top: 43px;
	left: 0px;
	width: 100%;
	background-image: url("../img/partners/bg_partners.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}


#partners_head {
	position: absolute;
	top: 136px;
	left: 74px;
	height: 80px;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 2.6em;
	z-index: 2;
}

#partners_head .largeHead{
	font-size: 3.4em;
}

#partners_content {
	position: absolute;
	top: 240px;
	left: 50%;
	width: 675px;
}

.partners_box {
	float: left;
	width: 207px;
	margin: 0 15px 15px 0;
	border: 1px solid rgba(255,255,255,0.3);
	border: 1px solid white\9;
}

.partners_box:hover {
	background-color: rgba(0,0,0, 0.2);
}



/*********************** Footer ********************/

#footer_container {
	position: fixed;
	display: block;
	margin: 0;
	padding: 0;
	bottom: 0;
	width: 100%;
	height: 30px; 
	min-width: 768px;
	z-index: 101;
	background-color: white;
	overflow:hidden;
	color: #333333;
}

#social_links {
	position: absolute;
	left: 20px;
	top: 3px; 
}


#social_links a { opacity: 0.75; } 
#social_links a:hover { opacity: 1.0; }


#sharing_links {
	position: absolute;
	right: 20px;
	top: 5px;
	width: auto;
}

.sharingLink { float: right; margin:0 0 0 10px; }


/* Slightly different on every browser */
 .fb-like { top:-1px; }

#footer_rollover {
	position: relative;
	margin: 2px auto 0 auto;
	width: 200px;
	height: 24px;
	text-align: center;
}

#footer_rollover span { font-size: 0.5em; letter-spacing: 0.2em; color: #333333; }
/* #footer_rollover span:hover { color: #333333; } */

#footer_panel_mask {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 150px;
	z-index: 102;
	visibility: hidden;
	/* background-color: yellow; */
}

#footer_panel {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	top: 150px;
	width: 100%;
	height: 150px;
	background: white;
	text-align: center;
}

#ratings_block { position:relative; margin: 10px auto 0 auto; width: auto;}

#legal_links { position:relative; font-size: 0.5em; color: #666666; }
#legal_links a, #legal_links a:hover { text-decoration: none; color: #888888; }

#sound_controls {
	position: fixed;
	bottom: 90px;
	right: 16px;
	font-weight: 300;
	font-size: 0.6em;
	letter-spacing: 0.3em;
	z-index: 102;
	cursor: pointer;
}

#sound_controls img {
	margin-top: -2px;
}


#soundtrack-widget{
	position: fixed;
	bottom: 44px;
	left: 14px;
	z-index: 50;
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
}
	#soundtrack-widget p{
		color: #3ec0cd;
		font-weight: 300;
		text-align: center;
		margin: 0px;
	}
	#soundtrack-widget a{
		outline: none;
		border: 0px;
		color: #666666;
		-o-transition: color 0.3s linear;
		-moz-transition: color 0.3s linear;
		-webkit-transition: color 0.3s linear;
		transition: color 0.3s linear;
	}
		#soundtrack-widget a:hover{
			color: #ffffff;
		}
	#soundtrack-widget .boxButton>a{
		padding-right: 1em;
		margin-right: 0.5em;
		border-right: 1px solid white;
		border-right: 1px solid rgba(255,255,255,0.3);
	}
	#soundtrack-widget #score-link{
		display: inline;
		position: relative;
	}
		#soundtrack-widget #score-link>span{
			display: none;
			position: absolute;
			left: 0px;
			top: 0px;
			text-align: center;
			width: 100%;
		}
			/*#soundtrack-widget #score-link:hover>span{
				display: inline;
			}
		#soundtrack-widget #score-link a{
			visibility: visible;
		}
			#soundtrack-widget #score-link:hover a{
				visibility: hidden;
			}*/

#ticketing-widget {
	position: fixed;
	bottom: 44px;
	right: 14px;
	z-index: 50;
	font-size: 13px;
	border: 1px solid #655b55;
	padding: 8px;
	background: #1e1e1e;
}
	#ticketing-widget #zip-input{
		width: 63px;
		font-size: 11px;
		text-align: center;
		float: left;
		margin-right: 8px;
		border: 1px solid #fff;
		margin-top: 1px;
	}

	#ticketing-widget span{
		float: left;
		margin-right: 10px;
	}

	#ticketing-widget a{
		height: 0;
		width: 20px;
		display: block;
		padding-top: 17px;
		overflow: hidden;
		background: url('../img/ticketing-sprites.jpg') 0 0 no-repeat;
		margin: 1px 6px 0px 0px;
		float: left;
		outline: none;
		border: none;
	}
		#ticketing-widget #movie-tickets{
			width: 17px;
			background-position: -37px 0px;
		}
		#ticketing-widget #movie-fone{
			background-position: -20px 0px;
		}








/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 100%;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: transparent;
	position: relative;
}

.jspDrag
{
	background: #fff;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}