/* @override 
	http://mud.dev/assets/css/app.css */

html{
	color: #121212;
	font: normal 300 14px/16px "open-sans",sans-serif;
}

.container{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	min-height: 800px;
	min-width: 1300px;
}

.left{
	float: left;
}
.right{
	float: right;
}
.clickable{
	cursor: pointer;
}
.inner-wrap{
	margin: 15px;
}
.clear{
	display: inline-table;
	clear: left;
}


#nav{
	list-style: none;
	margin: 0 0 0 20px;
	padding: 0;
	}
#nav li{
	float: left;
	margin-right: 25px;
	text-transform: uppercase;
	font: normal 700 2em/53px "franklin-gothic-ext-comp-urw", sans-serif;
}
#nav a{
	text-decoration: none;
	color: #464647;
}
#nav a:hover{
	color: #646464;
}
#home.active a,#home.active a:hover{
	color: #dac288;
}
#story.active a,#story.active a:hover{
	color: #99b9d7;
}
#photos.active a,#photos.active a:hover{
	color: #7a8e4f;
}
#cast-crew.active a,#cast-crew.active a:hover{
	color: #91616e;
}

#left{
	position: absolute;
	left: 0;
	width: 498px;
	top: 0;
	bottom: 0;
	border-right: 2px inset #ffffff;
	
	z-index: 400;
	overflow: hidden;
}
#leftScroller{
	overflow: auto;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 55px;
	right: 0;
	left: 0;
	bottom: 0;
	
}
#left-inner{
	background: url(../img/home/bg-clouds.jpg) no-repeat #c3c4c3;
	min-height: 1300px;
	padding-top: 35px;
}
#credit-legal{
	position: relative;
	left: 16px;
}

#left-header{
	background-color: #3b5999;
	height: 55px;
	color: #ffffff;
	font: normal 700 2em/53px "franklin-gothic-ext-comp-urw", sans-serif;
	text-transform: uppercase;
}
#left-header .left{
	margin-left: 20px;
	margin-top: 4px;
}
#left-header .right{
	margin-right: 20px;
}

#right{
	position: absolute;
	left: 498px;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: #373a3d;
}
#right-nav{
	height: 55px;
	line-height: 55px;
	background-color: #ffffff;
	margin-left: 2px;
}

#credit-block{
	margin-top: 5px;
	margin-right: 5px;
}

#slides{
	position: absolute;
	top: 57px;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.big-slide{
	
	position: absolute;
	top: 0;
	left: 0;
}
.big-slide.active{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.big-slide.leaving{
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
z-index: 250;
opacity: 0;
}
.big-slide.entering{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
z-index: 350;

}


/* Always */
#always{
	position: absolute;
	top: 57px;
	right: 0;
	left: 0;
	overflow: hidden;
	z-index: 550;
	height: 66px;
}

#names{
	position: absolute;
	top: 0;
	left: 2px;
	right: 0;
}
#names.active{
	background-color: rgba(0, 0, 0, 0.85);
}
#names .crew{
	opacity: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
#names.active .crew{
	opacity: 1;
}
#names li.and-space{
	margin-right: 3px;
}
#names .and{
	color: #ffffff;
	text-transform: uppercase;
	font-size: 14px;
	position: relative;
	top: 20px;
}
#names a{
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
}
#names a:hover{
	color: #d1d1d1;
}


#names ul{
	margin: 5px 0;
	display: inline-block;
	width: 100%;
}
#names ul li{
	display: block;
	float: left;
	margin-right: 15px;
	text-align: center;
	font: 700 2em/20px "franklin-gothic-ext-comp-urw", sans-serif;
}
#names ul li .firstname{
	display: block;
	font-size: .8em;
}
#names ul li .small{
	font-size: .7em;
}
#names li.active a{
	color: #7d5661;
}

#names li.crew.divider{
	width: 2px;
	background-color: #bebebe;
	height: 35px;
	margin-right: 30px;
}
#names li.crew.title{
	margin: 0;
	position: relative;
	width: 0;
	display: block;
	height: 20px;
}
#names li.crew.title span{
	color: #a1a1a1;
	text-transform: uppercase;
	font-size: 13px;
	margin: 0;
	line-height: 1em;
	position: absolute;
	left: -20px;
}

/* Pages */
.page{
display: none;
	position: absolute;
	top: 123px;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	z-index: 600;
}
.mud-title{
	position: absolute;
	top: 2px;
	left: 35px;
}
#home-trailer{
	position: absolute;
	top: 140px;
	left: 35px;
	width: 655px;
	height: 288px;
	background-image: url(../img/home/trailer-click.png);
}
#trailer{
	margin: 12px;
}

#home-tickets{
	position: absolute;
	top: 0;
	left: 300px;
	width: 190px;
	height: 126px;
}
.tickets-box{
	display: inline-block;
	width: 190px;
	background: url(../img/home/tickets.png) 0 0;
}
#tickets-get{
	height: 28px;
}
#tickets-fandango{
	height: 39px;
	background-position: 0 -27px;
	width: 108px;
}
#tickets-movietickets{
	height: 39px;
	background-position: -110px -27px;
	width: 77px;
}
#tickets-arclight{
	height: 38px;
	background-position: 0 -65px;
	width: 105px;
}
#tickets-landmark{
	height: 38px;
	background-position: -107px -65px;
	width: 85px;
}
#tickets-listings{
	height: 22px;
	background-position: 0 -102px;
}

#home-social{
	position: absolute;
	top: 440px;
	left: 35px;
}

#photos-controls {
	position: absolute;
	left: 0;
	right: 0;
	top: 150px;
	height: 130px;
}
#photos-controls a{
	width: 126px;
	height: 130px;
	display: block;
	background: url(../img/photos/arrows.png) 0 0;
}
#photos-controls a.left{
	background-position: 0 0;
}
#photos-controls a.left:hover{
	background-position: -126px 0;
}
#photos-controls a.right{
	background-position: -380px 0;
}
#photos-controls a.right:hover{
	background-position: -254px 0;
}

#story-block{
	width: 500px;
	position: absolute;
	top: 130px;
	left: 35px;
	display: block;
	background-color: rgba(255, 255, 255, 0.89);
	line-height: 1.5em;
	text-align: justify;
	color: #020202;
	font-weight: bold;
}
#story-quote{
	position: absolute;
	top: 3px;
	left: 340px;
}
#story-quote img{
	width: 198px;
}

#bio-block{
	width: 420px;
	max-height: 500px;
	position: absolute;
	top: 130px;
	left: 35px;
	display: block;
	background-color: rgba(255, 255, 255, 0.89);
	line-height: 1.5em;
	text-align: justify;
	color: #111111;
	font-weight: bold;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}
#bio-block:hover{
	overflow: auto;
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px){
    #bio-block{
    	overflow: auto;
		color: #f80000;
	}
}

#mm{
	width: 422px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	position: relative;
}
.mm-base{
	background-image: url(../img/layout/mm-base.jpg);
	width: 422px;
	height: 422px;
	margin-right: auto;
	margin-left: auto;
	display: block;
}
.mm-sets{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.mm-set{
	position: absolute;
	left: 0;
	right: 0;
}
.mm-set.top{
	top: 30px;
}
.mm-set.bot{
	bottom: 80px;
}
.mm-set a{
	width: 36px;
	height: 47px;
	display: block;
	position: absolute;
	background-color: #d3d3d3;
	line-height: 60px;
	text-align: center;
}
.mm-set a div{
	background-image: url(../img/layout/mm-arrows.png);
	width: 13px;
	height: 24px;
	display: inline-block;
}
.mm-set a.left{
	left: -27px;
}
.mm-set a.left:hover{
	background-color: #ededed;
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}
.mm-set a.left:hover div{
	background-position: -17px;
}
.mm-set a.right{
	right: -26px;
}
.mm-set a.right div{
	background-position: -34px;
}
.mm-set a.right:hover{
	background-color: #ededed;
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}
.mm-set a.right:hover div{
	background-position: -51px;
}

.mm-pic{
	position: absolute;
	top: 10px;
	left: 11px;
	overflow: hidden;
	width: 400px;
	height: 400px;
}
.mm-quote{
	position: absolute;
	left: 11px;
	bottom: 7px;
	overflow: hidden;
	width: 400px;
	height: 88px;
}
.mm-pic img{
	width: 400px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 1;
}
.mm-pic .animate,.mm-quote .animate{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.mm-quote img{
	width: 400px;
	position: absolute;
	left: 0;
	top: 0;
}

#mm-btns{
	margin-right: auto;
	margin-left: auto;
	display: block;
	width: 200px;
	margin-bottom: 30px;
}
#mm-btns a{
	width: 197px;
	height: 48px;
	background: url(../img/layout/mm-share-btns.jpg) 0 0;
	display: block;
}
#mm-btns a.share:hover{
	background-position: -197px 0;
}
#mm-btns a.download{
	background-position: 0 -46px;
}
#mm-btns a.download:hover{
	background-position: -197px -46px;
}


.fb-like{
	height: 25px;
	line-height: 1px;
	font-size: 1px;
}

#tout{
	width: 420px;
	height: 400px;
	background-image: url(../img/home/dvd-tout.png);
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 15px;
	position: relative;
}

.tout-link{
	position: absolute;
	left: 282px;
	width: 113px;
	height: 38px;
	background-color: rgba(59, 89, 152, 0);
	border-radius: 6px;
	-webkit-transition: all 250ms ease;
	-moz-transition: all 250ms ease;
	-ms-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
}
.tout-link:hover{
	background-color: rgba(59, 89, 152, .25);
}
#tout-buynow{
	top: 97px;
}
#tout-itunes{
	top: 148px;
}