/*
Website by Mixed Media Workshop
Designer Karen Yung
*/

/*

TABLE OF CONTENTS

01 RESET
02 CONTAINERS
03 HEADER
   1. Header Container
   2. Menu
04 GRID
   1. Home Tiles
   2. Grid
   3. Sidebar Container
   4. Other Containers
   5. Separators

05 TYPOGRAPHY
   1. General Styling
   2. Headings
   3. Lists
   4. Images Styling
   5. Tables

06 SLIDER
07 FOOTER
   1. General Footer Styling
   2. Footer Social Icons
   3. Tooltips for social icons

*/



/*  _______________________________________

	01 RESET
    _______________________________________  */


html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline}
:focus{outline:0}
body{line-height:1; color:black; background:white}
ol, ul{list-style:none}
table{border-collapse:separate; border-spacing:0}
caption, th, td{text-align:left; font-weight:normal}
blockquote:before, blockquote:after, 
q:before, q:after{content:""}
blockquote, q{quotes:""""}

/*  _______________________________________

	02 CONTAINERS
    _______________________________________  */

html {
	
}
body {
	width:100%;
	margin:0;
	padding:0;
	overflow-x:hidden;
	font-family: 'IM Fell English', Georgia, "Times New Roman", Times, serif;
	background:#dae0e5 url("../img/background.jpg") no-repeat center top;
	
}
img {
	border:none; 
	margin:0;
	padding:0;
}
#wrapper {
	width:100%;
	height:600px;
	position:absolute;
	top:185px;
	left:0;
	overflow:hidden;
	
}
	
#mask {
	width:2000%;
	height:600px;
}
.item {
	width:5%;
	height:600px;
	min-width:1004px;
	float:left;
	 /* Fixes a width issue on window resizing */
}
.content { /* Container for content */
	width:100%;
	height:600px;
	margin:0;
	position:relative;
	
}
.ie6 .content { /* Container for content */
	background: none;
}



/*  _______________________________________

	03 HEADER
    _______________________________________  */



/* 1. Header Container */

#header_wrapper {
	width:100%;
	height:173px;
	margin:10px 0 0 0;
	padding:0;
	position:absolute;
	z-index:3;
	/*background:#161616 url("../img/header_bg.jpg") repeat-x;
	border-bottom:1px solid #111111;
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,.40);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.40);
	box-shadow:0px 0px 3px rgba(0,0,0,.40);*/
}

#header {
		width: 1004px;
		height:173px;
		margin:0 auto 0 auto;
		position: relative;
		padding:0;
		background-image: url('../img/header.jpg');
		-moz-box-shadow: 0px 0px 3px rgba(0,0,0,.10);
		-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.10);
		box-shadow:0px 0px 3px rgba(0,0,0,.10);
	}

#header #logo {
	width:410px;
	position:relative;
	height:120px;
	float:left;
	margin:30px 0px 0 55px;
}
/*hadi*/
.headergraphic {
	width:460px;
	height:120px;
	position:absolute;
	margin:32px 0px 0 530px;
	z-index:9;
	
}


.dates{
	width:287px;
	height:30px;
	float:left;
	margin:120px 0 0 -210px;
	position:relative;
	display: block;
	z-index:10;
	/*comment below out if adding dates link*/
	background-image: url('../img/text/dates1a.png');
}



a.dates{
	background-image: url('../img/text/dates1.png');
}


a.dates:hover{
	background-position: center bottom;
}


/* Please fix css here for the new header update */
a#buydvd{
	float:right;
	width:132px;
	height:158px;
	background: transparent url('../img/dvd/dvd.png') no-repeat;
	position:relative;
	margin:-20px 0 0 0px;
	opacity:.8;
}

a#buydvd:hover{
	opacity:1;
}



a#buy{
	width:313px;
	height:31px;
	background: transparent url('../img/dvd/buy_dvd.png')  no-repeat;
	margin: 10px 0 0 0;
	float:left;
}

a#buy:hover{
	background-position: center bottom;
}

a#itunes{
	width:313px;
	height:31px;
	background:transparent url('../img/dvd/itunes.png') no-repeat;
	float:left;
	margin: 5px 0 0 0;
}

a#itunes:hover{
	background-position: center bottom;
}

/*end header update */


/* 2. Menu */

.fl_menu{
	float:left; 
	z-index:300; 
	width:85px; 
	height:50px; 
	margin-left:-33px; 
	position:absolute;}

.fl_menu .label{
	font-size:14px;
	float:left;}

.fl_menu .menu{
	display:none; 
	width:455px;
	height:42px; 
	margin:0px 0 0 82px;
	position:relative;
	background-image:url("../img/menu_bg.png");
	z-index:31;
	
	}
	
.fl_menu .menu .scrollitem{
	position:relative; 
	display:block; 
	color:#828385; padding:12px 9px 0 8px; 
	font-family: 'IM Fell English SC', Georgia, "Times New Roman", Times, serif;
	font-size:16px; 
	text-decoration:none; 
	float:left; 
	text-shadow:1px 1px #ffffff;
	z-index:31;
	}
	
.fl_menu .menu a.scrollitem:hover{color:#000;}
.fl_menu .menu a.scrollitem{color:#31456a;}

.fl_menu .menu .viewtrailer{
	position:relative; 
	display:block; 
	color:#828385; padding:12px 9px 0 8px; 
	font-family: 'IM Fell English SC', Georgia, "Times New Roman", Times, serif;
	font-size:16px; 
	text-decoration:none; 
	float:left; 
	text-shadow:1px 1px #ffffff;
	z-index:31;
	}
	
.fl_menu .menu a.viewtrailer:hover{color:#000;}
.fl_menu .menu a.viewtrailer{color:#31456a;}



a.gallery{
	width:104px;
	height:43px;
	margin:-2px 0 0 929px;
	position:absolute;
	display:block;
	background-image: url('../img/gallery_tab.png');
	z-index:10;
}


a.gallery:hover{
	background-position: center bottom;
}

/*hadi */
.grid3 {
    float: right;
    height: 557px;
    margin: -190px 0 0;
    width: 502px;
}

/*  _______________________________________

	04 GRID
    _______________________________________  */



.container {
	width:1006px;	
	height:100%;
	margin:1px auto 0 -502px;
	position:absolute;
	padding: 0;
	z-index:5;
	clear:left;
	float:left;
	left:50%;
}


/* 1. Home */

a#synopsistile{
	width:250px;
	height:278px;
	float:left;
	margin:0px 0 0 0px;
	position:relative;
	display: block;
	background-image: url('../img/homepage/synopsis.jpg');
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}

a#synopsistile:hover{
	background-position: center bottom;
}


a#trailertile{
	width:250px;
	height:278px;
	float:left;
	margin:0px 2px 0 2px;
	position:relative;
	display: block;
	background-image: url('../img/homepage/trailer.jpg');
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}

a#trailertile:hover{
	background-position: center bottom;
}


a#abouttile{
	width:250px;
	height:278px;
	float:left;
	margin:0px 0px 0 0px;
	position:relative;
	display: block;
	background-image: url('../img/homepage/about.jpg');
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}

a#abouttile:hover{
	background-position: center bottom;
}

a#casttile{
	width:250px;
	height:278px;
	float:left;
	margin:0px 0px 0 2px;
	position:relative;
	display: block;
	background-image: url('../img/homepage/cast.jpg');
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}

a#casttile:hover{
	background-position: center bottom;
}

a#crewtile{
	width:250px;
	height:278px;
	float:left;
	margin:0px 0px 0 2px;
	position:relative;
	display: block;
	background-image: url('../img/homepage/crew.jpg');
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}

a#crewtile:hover{
	background-position: center bottom;
}


a#reviewstile{
	width:250px;
	height:278px;
	float:left;
	margin:0px 0px 0 2px;
	position:relative;
	display: block;
	background-image: url('../img/homepage/reviews.jpg');
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}

a#reviewstile:hover{
	background-position: center bottom;
}



/* 2. Grid */


#grid1 {
	float: left;
	position: relative;
	width:502px;
	height:557px;
	margin:0;
	background-image: url('../img/subpages/text_bg.jpg');
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
	font-family: 'IM Fell English', Georgia, "Times New Roman", Times, serif;
}

#grid2 {
	margin:0 2px 0 0px;
	position: relative;
	width:502px;
	height:557px;
	float:right;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}


.title{
width:100%;
margin:60px auto 10px auto;	
text-align:center;
}

.title1{
width:502px;
margin:60px 0 10px 0;	
text-align:center;
float:left;
}


.separator1{
width:502px;
margin:10px 0 0px -20px;	
float:left;
text-align:center;
}


#grid{
	float:left;
	position: relative;
	width:1004px;
	height:557px;
	margin:0 auto 0 auto;
	background-image: url('../img/subpages/trailer_bg.jpg');
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
	font-family: 'IM Fell English', Georgia, "Times New Roman", Times, serif;
	text-align:center;
}
.video{
	position: relative;
	width:720px;
	height:306px;
	margin:0 auto 0 auto;
	
}



.clear{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0}
.clear_push{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:18px}
.clearfix:after{clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}



/* 4. Other Containers */

.content_box {
	width:220px;
	background: #ffffff; 
	padding:22px 10px 10px 10px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}

/* 5. Separators */

.separator {
	width:760px;
	margin:24px 0px 24px 10px;
	height:1px;
	clear:both;
	border:none;
	border-bottom:1px dotted #cccccc;
}




/*  _______________________________________

	05 TYPOGRAPHY
    _______________________________________  */



/* 1. General Styling */

a {
	color:#7F94B0;
}
a:hover {
	color:#536987;	
}

p, ul, ol {
	font-size:13px;
	line-height:20px;
	margin-bottom:10px;
	
}
h2, h3, h4, h5, h6, ul {
	margin-bottom: 18px;
}
p {
	text-shadow:1px 1px #ffffff;
}

/* 2. Headings */

h1, h2, h3, h4, h5, h6 {
	font-weight:bold;
	text-shadow:1px 1px #ffffff;
}
h3, h4, h5, h6 {
	line-height: 18px; 
}
h1 {
	font-size: 30px; 
	line-height: 30px;
	margin-bottom:24px;
}
h2 {
	font-size: 24px; 
	line-height:36px; 
}
h3 {
	font-size: 20px; 
}
h4 {
	font-size: 18px; 
}
h5 {
	font-size: 16px; 
	text-transform:uppercase;
}
h6 {
	font-size: 12px; 
	text-transform:uppercase;
}

.dropcap{
	display:block; 
	float:left; 
	font-size:36px; 
	line-height:32px; 
	margin:2px 8px 0 0;
}

/* 3. Lists */

ul, ol {
	margin-left:0;
}
ul {
	list-style:none;
}
ol {
	list-style:decimal;
}
a {
	text-decoration:none;
}

/* 4. Images Styling */

.img {
	margin-bottom:18px;
}
.img_left {
	float:left;
	padding:3px 20px 0 0;
}
.img_right {
	float:right;
	padding:0 0 0 20px;
}





/*  _______________________________________

	06 SLIDER
    _______________________________________  */



#slides {
	width:485px;
	height:262px;
	margin-bottom:2px;
	overflow:hidden;
	background-image: url('../img/homepage/home_slides_bg.jpg');
	padding:8px;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.slides_container {
	position:relative;
	overflow:hidden;
	height:262px;
}
.slides_container li {
	width:485px;
	height:262px;
	display:block;
	
}
#slides .next,#slides .prev {
	position:absolute;
	top:125px;
	width:30px;
	height:30px;
	display:none;
	z-index:101;
	background:url("../img/slider/arrows.png") no-repeat;
}
#slides .prev {
	background-position:right top;
	left:525px;
}
#slides .next {
	background-position:left top;
	left:955px;
}
#slides:hover .next,
#slides:hover .prev {
	display:block;
}

.pagination {
	margin:-36px 0 0 10px;
	width:70px;
	z-index:999;
	position:relative;
	float:right;
}
.pagination li {
	float:left;
	margin:0 6px 0 0;
	list-style:none;
}
.pagination li a {
	display:block;
	width:10px;
	height:0;
	padding-top:10px;
	background-image:url("../img/slider/bullets.png");
	background-position:0 0;
	float:left;
	overflow:hidden;
}
.pagination li.current a {
	background-position:0 -10px;
}



/*  _______________________________________

	07 FOOTER
    _______________________________________  */



/* 1. General Footer Styling */

#footer {
	position:absolute;
	margin:755px auto 0 auto;
	width: 100%;
	height: 32px;
	z-index:50;
	padding:0px;
	font-family: 'IM Fell English SC',Georgia, "Times New Roman", Times, serif;
}


#footerwrap{
	margin:0 auto;
	width:1004px;
}

#footerwrap li{
	list-style:none;
}



#links li {
	float:left;
	font-size:14px;
	line-height:14px;
	text-decoration:none;
	padding:0px 15px 0px 7px;
	margin:0 0 8px 0;
	list-style:none;
	
}
#links li:hover a{
	color:#000;
	
}

#links li a {
	color:#333333;
}


#links {
	width:360px;
	margin:5px 0px 0px;
	padding:0px;
	border:none;
}



/* 2. Footer Social Icons */

#social {
	 /* Positionning of the social icons container */
	 position:absolute;
	width:200px;
	margin:-5px 0px 0px 370px;
	padding:0px;
	border:none;
}
li#social:hover {
	background:none;
}
#social li {
	margin-right:10px; /* 12px is the space between each one of them */
	float:left;
	background:none;
	border:none;
	width:20px;
	height:20px;
	padding:0px;
	filter: alpha(opacity=90);
	opacity: 0.9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
#social li:hover {
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* 3. Tooltips for social icons */

a.tooltip:hover {
	text-decoration:none;
}
a.tooltip span { /* The "span" defines the text appearing on mouse hover, these are basic stylings */
	display:none;
	padding:3px 7px 3px 7px;
	bottom:32px;
	position:relative;
	height:24px;
	width:110px;
	text-align:center;
	background:url("../img/footer/tooltip.png") no-repeat center top;
	position:absolute;
	color:#dddddd;
	font-size:11px;
	margin-left:-49px;
}
a.tooltip:hover span {
	display:block;
}

.copyright{
	font-size:12px;
	color:#666666;
	float:left;
	margin-top:48px;
	padding:0px 0 0 8px;
	position:absolute;
}


.like{
	margin:-15px 0 0 0px;
	float:right;
}

.rating{
	padding-right:0px;
	float:right;
	margin:-25px 10px 0 0px;
}

.itunes{
margin:-32px -7px 0 0;
	padding-right:0px;
	float:right;
}



/*hadi*/
ul#about-vm {
	margin-top:6px;
}
ul#about-vm li {
	padding:2px 2px 2px 0px;
	
}
ul#about-vm li a{ 
	display:inline-block;
	width:400px;
	background:url("../img/square_ul.png") no-repeat 4px center;
	padding:1px 15px 1px 20px;
	color:#20254d;
}

ul#about-vm li a:hover{ 
	background-color:#d8d8d7;
}

#st_about-vm_6 h2{
	padding-top:3px;
	line-height:24px;
}


ul#about-vm li a.about-vm_active{ 
	background:url("../img/square_ul_a.png") no-repeat 4px center;
	background-color:#a19891;
	color:#fff;
}
#about .grid3 {
	background:url("../img/subpages/synopsis_img.jpg") no-repeat center center;
}

#about .st_horizontal .st_tabs_container { /* Tabs main container */			
	 /*width:100% !important;	*/	
	width: 502px !important; 
	text-align:left !important; 
	margin:0 !important;
}

#about #st_about_5.st_tab_view .grid3 {
	background:url("../img/subpages/about_img_victorian.jpg") ;
	}


#about .grid3-inner{
	background:url("../img/al.png") ;
	padding-top:100px;
	height: 457px;
    width: 100%;
}
#about .st_about_view {
	/*background:url("../img/al.png") ;*/	
    height: 557px;
    width: 502px;
	display:none;
}
#about .st_about_active_view {
	display:block;
}

#about .st_about_view  .scrollbar11 {
   width: 445px; height: 300px; margin: 0px 0 20px 30px;
}
#about .st_about_view .scrollbar11 p, #about .st_about_view h2 {
    color:#fff;
	text-shadow:none
}
#about .st_about_view h2 {
	text-align:left;
	padding-left:30px;
}

#crew h2 {
	padding-top:20px;
}


#crew ul.st_tabs {
	text-align:center !important ;
	width: 460px;
}

#crew ul.st_tabs li {list-style: none; display: inline-block;float:none }

/* for crew section only */
#crew .st_horizontal .st_tabs_container {
 height: 185px;
}

#crew .scrollbar11 {height: 280px;}



/*intro*/

#intro {
	background:url("../img/background.jpg") no-repeat scroll center top #DAE0E5;
	width:100%;
	height:100%;
	position:absolute;
    top:0;
    left:0;
	z-index:100000000000;
}
#introC {
    position:relative;
	width:720px;
	height:100%;
	margin:100px auto !important;
}
#slideshow-container{
    position:relative;
	width:720px;
	height:400px;
	vertical-align:middle;
	text-align:center;
	display: table-cell;
}

#slideshow-container img {
    z-index:8;
    visibility:hidden;
	display: block;
    margin: 12px auto;
}

#slideshow-container img.active, #slideshow-container img.slideshowdone {
    z-index:10;
    visibility:visible;
}

#slideshow-container img.last-active {
    z-index:9;
}
/*end intro*/


#contest {
	width:441px;
	height:29px;
	display:inline-block;
	background:url("../img/contest1.png") no-repeat center top;
	text-indent:-9999999px;
	margin-top:13px
}
#contest:hover {
	background-position: center -29px;
}