@charset "utf-8";

/* __________________________________________________________________________________________________________
/ 
/    SCRIPT NAME:  movie-details.css
/ 
/
/    SCRIPT CONTAINS  : - GENERAL STYLE (STYLE USED FOR detailAssets=map, detailAssets=hidedetails and detailsAssets=details parameter values)
/                       - STYLE USED ONLY FOR detailsAssets=map 
/                       - STYLE USED ONLY FOR detailsAssets=hidedetails
/                       - STYLE USED ONLY FOR detailsAssets=details
/ ___________________________________________________________________________________________________________*/

   
/*_____________________________________________________________________________________________________________
/
/ GENERAL STYLE (STYLE USED FOR detailAssets=map, detailAssets=hidedetails and detailsAssets=details parameter values):  
/______________________________________________________________________________________________________________*/


@font-face {
font-family: HelveticaNeueLTStd;
    src: url('http://mp1.extensionengine.com/w/css/fonts/helveticaneueltstd-mdcn-webfont.eot');
    src: url('http://mp1.extensionengine.com/w/css/fonts/helveticaneueltstd-mdcn-webfont.eot#iefix') format('embedded-opentype'),
         url('http://mp1.extensionengine.com/w/css/fonts/helveticaneueltstd-mdcn-webfont.woff') format('woff'),
         url('http://mp1.extensionengine.com/w/css/fonts/helveticaneueltstd-mdcn-webfont.ttf') format('truetype'),
         url('http://mp1.extensionengine.com/w/css/fonts/helveticaneueltstd-mdcn-webfont.svg#HelveticaNeueLTStd') format('svg');
    font-weight: normal;
    font-style: normal;
}

a {
   outline: 0;
}

html{
    height:100%;
}

body{
     background-color: #151719; height:100%; width:100%;margin:0px; padding: 0px; min-width: 300px; min-height: 300px; overflow: hidden;
}

#widget-holder {
     background-color: #151719;  height:100%;   width:100%; float:left;font-family:HelveticaNeueLTStd; visibility: hidden;
}

#dateDiv {
    float:left;height:17px; margin-left:10px;margin-right:12px;padding-top: 19px; padding-right:0px; border:none;text-shadow:1px 1px 1px #000;     
}

#movie-search {
    float:left; width:100%;height: 51px;  min-width: 300px; padding-left: 0px; padding-right: 0px; position: relative;
    color:#FFF;font-size:11px;font-weight:bold; background-color: #151719;     
}

.ui-datepicker-trigger{left:8px;}

#movie-search-textboxDiv {
    float:right;margin: 0;padding: 10px 0; margin-right:10px; position: relative;float:right;margin-right:17px
}

.inputSearch { 
    padding: 0 10px 0 20px; width: 85%;height:31px;border:0px; background: url("http://mp1.extensionengine.com/w/images/search-bg128nolens.png") no-repeat scroll 0 0 transparent;   
    color:#CDD0D8;font-size:10px;text-align: center;
}

.inputSearch:focus {
    outline-width: 0;
}

#searchTextbox{padding: 0 33px 0 17px;text-align: center;}

#searchIcon{ height: 26px; background:url(../../../w/images/utl/utl-search-icon.png) no-repeat transparent; position:absolute; top:3px; right:4px; cursor: pointer;}
.drop-down {
 
}
#content{
    float:left; width:100%; background-color: #151719; visibility:hidden;
}

#mainSpinner{
    display:block;
}

#right_cont{
    overflow: hidden;
}

#iScrollInfoW{
    overflow: hidden; background: none no-repeat scroll 0 0 #151515;position:relative; min-width: 149px;overflow:visible;  /*float:left;*/
}

#movieTitle{
    margin-left: 24px; font-size:12px;display:block; color:#03060a;font-size: 15px;margin-left: 10px;margin-top: 5px; 
}

#iScrollInfo{
    width:100%;
}

#showList{
    float:left;width: 100%;
}

#somelist li:first-child{
    background-color:#1e2326;border:1px solid #535354;
}

#map-info-cont{
    height: 231px; min-height: 174px; position:relative;  padding-left:0px;border:none; background-color:#151719;    
}
#mapWrapper{
    display:block;height:220px;width:100%;background-color: #E5E3DF;border:0px solid;border-radius:5px;
}

#theaterMap{
    display:block;height:220px;width:100%;
}

#movie-info-cont{
     float:left;width:290px;background:none;padding:5px;border:none; margin-top:5px; 
}

#movieDetailsAndImg{
     height:114px; position:relative;
}

#movie-info-img-cont{
    float:left;  margin-left:17px; margin-top: 5px;
}

#movie-info-img-wrap{
    border:2px solid #dedcdc; border-radius: 2px;height:85px;
}

#movieInfoImg{
    width:57px;height:85px;
}

#PG13Div{
    overflow:visible; font-size:13px; margin:0 auto;  text-align: center; width:40px;  height:15px;  border:2px solid #000000;  border-radius: 2px; 
    background-color:#ffffff;background-repeat:no-repeat;background-position:center;
}

#movieDetailsDiv{
    float:left; margin-top:1px;width: 72%;
}

#left_m_info{
    float:left
}

#movieGenre{
    display:inline-block; color:#ffffff;font-size: 13px;margin-left: 4.6%;
}
#clockDiv{
    position: relative; top: 2px; display:inline-block; margin-left: 4.6%; background:url('http://mp1.extensionengine.com/w/images/clock-icon.png') no-repeat; width:15px; 
    height:15px; 
}

#runtime{
    color:#ffffff; font-size: 13px; display:inline-block; margin-left: 4px;
}

#runtimeSpan{
    color:#cccccc;
}

#releaseDate{
    color:#cccccc; font-size: 13px; display:block;margin-left: 9px;margin-top:2px;margin-bottom:2px;
}

#right_m_info{
    float:left;
}

#directorDiv{       
    display:block; margin-left:9px; margin-top: 2px;margin-bottom:2px; margin-right:2px; font-size: 13px; color:#cccccc;       
}

#castWrap{     
    display:inline-block;  margin-left:9px;margin-top:2px; margin-right:0px;margin-bottom:2px; max-width: 100%;  line-height:16px;  font-size: 13px;  color:#ffffff; 
}
#movieCast{
    display:block; color:#cccccc;
}

#rottenIconWrap{
    display:inline-block; margin: 0px 0px 0px 5%; width:12px; height:12px;
}

#ratingDiv{
    color:#ffffff; font-size: 13px; display:inline-block;margin-left: 2px;
}

#trailerLink{
    display:inline;  width:16px;  height:10px;  margin-right:5px; margin-left:10px; margin-top: 0px; margin-bottom: 0px; font-size: 13px; color: white;
}

#trailerLink img{
    margin-right: 4px;
}

#synopsisButton{
    display:none;margin-left: 6px; text-decoration:none; font-size: 13px; color:#ffffff;
}
#synopsisButton img{
    height:16px;margin-bottom: -2px;   
}

#delimiterline2Div{
    background: url("http://mp1.extensionengine.com/w/images/border2px.png") repeat scroll 0 0 transparent;height: 2px;width: 100%;
}

#synopsis{
    margin-left:0px;margin-top:10px; padding-left: 10px;   font-size: 13px;    color:#999999;
}

#synopsis img{
    width:12px; margin-bottom: -1px;padding-right: 1px;
}

#moviePlot{
    margin:3px 5px 0px 5.3%; color:#999999; font-size: 13px;margin-left:0px; margin-right:0px; width:280px;  padding: 10px; position:absolute;
}

#moviePlotPopuUp{
    margin:3px 5px 0px 5.3%; color:#c9c9c9; font-size: 13px;width:241px;overflow: hidden; border-radius: 5px;  margin-left:0px;
    margin-right:0px; padding-left: 10px;padding-right: 10px; padding-bottom: 10px; z-index:99; display:none;  position:absolute; background-color: #404040;     
}

#xButtonDiv2{
    cursor:pointer;  width:11px; height:11px; background: url('http://mp1.extensionengine.com/w/images/x-button.png') no-repeat;position:absolute; top:8px;right:10px;display:none; z-index: 100;
}

#synopsisPopupTitle{
    margin-top:10px; margin-bottom:10px;
}

#scrollablePopup{
    position: absolute; top:30px; bottom:10px; right:7px; left:10px;
}

#popUpScroller{
    overflow:hidden; padding-right:13px
}

#featured-movies {
    float:left;width:94%;height:30px;background:url(http://mp1.extensionengine.com/w/images/featured-movies-bg.png) repeat-x #F4A200;border-bottom:1px solid #343434;color:#2F2A0A;
    font-size:14px;font-weight:bold;text-shadow:1px 1px 1px #F08C00;padding:3px 3% 0px 3%;margin-bottom: 3px;width:100%; padding: 0px;
}

#featured-movies-wrapper{
    overflow: hidden; padding-right: 18px;
}

#xButtonDiv{
    display:inline; width:50px;   height:15px;  position:absolute;  right:8px;  top:4px; margin-top: 15px; margin-left: 0px; margin-right: 0px;cursor:pointer; background: url('http://mp1.extensionengine.com/w/images/back.png') no-repeat;  
    display:none;
}
 
#noResultsPopup{
    min-height:300px;min-width:277px;float: left;width: 100%;  position:absolute;left:0px; top:46px; bottom:17px;visibility: hidden;
}

#noResultContaitner{
   color:white; font-size:16px;width:255px; height: 255px;position:absolute; left:50%; top:50%; margin-left:-125px; margin-top:-145px; text-align: center;
}

#noResultsPopupText a{
    outline:0;text-decoration:none;margin-top:10px;font-weight:bold;color:#6DCFFB;
}

#zipSpan{
    font-size:17px;color:#EFAB1C; font-weight:bold;
}

#enterZipCodePopup{
    margin-top:25px;font-weight:bold; margin-left:auto; margin-right:auto; width:200px;
}

#widget-footer {
    float:left; width:100%; height:15px; background-color:#544276; color:#FFF; font-size:10px; padding:2px 0 0px 0;
    position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999;background-color:#151719;color: #fff;float: left;font-size: 12px;height: 15px;        
}

#widget-footer a {
    color:#434445;text-decoration:none;
}

#widget-footer img {
    border:0px;float:right;
}

#mightyPoweredBy{
    margin-right:10px;
}

#helpButton{
    margin-left:10px;font-family: HelveticaNeueLTStd;color: #434445;
}

#mightPoweredByImage{
    margin: 2px 18px 0 0;
}

#disableControlsDiv{
    display:none;  background-color: #000000;height: 100%;left: 0;opacity: 0.7;position: fixed;top: 0;width: 100%;z-index: 1001;
}

#modalPopup{
    display: none;
}

#modalOverlay{    
    height: 100%; width: 100%; position: fixed; left: 0px; top: 0px;background-color:#000;opacity: 0.7; z-index: 1001;
}

#modalContent{
    width:255px;height:251px;background:url("http://mp1.extensionengine.com/w/images/utl/utl-popup-background2.png") no-repeat scroll 0 0 transparent;position: absolute; 
    left:50%; top:50%;margin-left:-127.5px; margin-top:-125px;z-index: 1002;text-align: center;font-family: Arial;
}

#reg-buttons{
    margin: 0 auto;width:190px;    
}

#reg-title{    
    font-size: 22px;color:#333333;margin-top:15px;margin-bottom:13px;
}

#reg-dotted-line{    
    margin: 0 auto;width:171px;height:1px;background:url("http://mp1.extensionengine.com/w/images/utl/utl-dotted-line2.png") no-repeat scroll 0 0 transparent;
}

#reg-text {
    color:#545454;font-size:18px;margin:15px auto 22px;padding:0 10px;width:235px;
}

#facebook-button {
    background:url("http://mp1.extensionengine.com/w/images/utl/utl-facebook-login2.png") no-repeat scroll 0 0 transparent;cursor:pointer;float:left;height:34px;width:190px;
}

#or-text {
    color:#666666;float:left;font-size:14px;font-style:italic;font-weight:bold;margin-left:6px;margin-top:10px;
}

#reg-later-button {
    background:url("http://mp1.extensionengine.com/w/images/utl/utl-register-later.png") no-repeat scroll 0 0 transparent;cursor:pointer;float:left;height:32px;margin-left:16px;
    margin-top:2px;width:140px;
}

#reg-later-button {
    background:url("http://mp1.extensionengine.com/w/images/utl/utl-register-later.png") no-repeat scroll 0 0 transparent;cursor:pointer;float:left;height:32px;margin-left:16px;
    margin-top:2px;width:140px;
}

#reg-continue-button{
    display:none;width:140px;height:32px;background:url("http://mp1.extensionengine.com/w/images/utl/utl-continue-button.png") no-repeat scroll 0 0 transparent;
    cursor:pointer;  position:absolute;top:198px;left:54px;
}

#closeModal {
    background:url("http://mp1.extensionengine.com/w/images/utl/utl-x-button.png") no-repeat scroll 0 0 transparent;cursor:pointer;height:23px;position:absolute;
    top:6px;right:17px;width:20px;z-index:1003;
}

.ui-datepicker {
    height: auto !important;top: 6px !important;
}
.location-drop-date-arrow {
    border-color: transparent transparent #888888 transparent;border-style: solid;border-width: 8px;height:0;width:0;position:absolute;top:-8px;
    left:46px;cursor:pointer;
}
 
.spinner{
    position:absolute;top:50%;left:50%;margin-left:-25px;margin-top: -25px;display:none;z-index: 9999;
}  
.textOverflow{
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.float_splitter{
    clear:both;
}

/*_____________________________________________________________________________________________________________
/
/ STYLE USED FOR detailAssets=map :  
/______________________________________________________________________________________________________________*/
.map #moviePlot {
    bottom:20px; top:440px;
}

.map #moviePlotPopuUp{
    bottom:17px;top:287px;width:279px;left:15px;
}

/*when window is too narrow and too low: hide map and show only theaters list.*/
@media screen and (max-width: 550px) and (max-height:430px){
    .map #left_cont{
        display:none;
    }  
}

/*when window is too narrow and NOT too low:show map and show theaters list beneath map.Hide movie details.*/
@media screen and (max-width: 550px){
    .map #left_cont{
        width:100%;   
    }
    .map #right_cont{
        margin-left: auto;margin-right: auto;width:100%;
    }
    .map #map-info-cont{
     /* display:block;width:90%;     margin-left: auto; margin-right: auto;*/  margin-left: 22px; margin-right: 23px;display:block;
    }
    .map  #movie-info-cont{
        display:none;
    }
    .map  #map-info-cont>:first-child
        {
            padding: 5px;margin-left: -5px;
        } 
    .map #right_cont{margin-top: 7px;
    }   
    
    .map #iScrollInfoW{
     /* width:92%;margin-left: 4%;margin-right: 4%;padding-left:8px; */  margin-left:17px; margin-right: 1px;
    }           
}

/*when window is wider then 551px:set maps width at 300px.*/
@media screen and (min-width: 551px) {
    .map #left_cont{
        margin-left:15px;float:left;width:300px;
    }
    .map #map-info-cont>:first-child{
        padding: 5px;
    } 
    .map #right_cont{
       padding-right: 10px;
    }
    .map #map-info-cont{
       display:block;width:290px;     
    }
    .map #iScrollInfoW{
        width:100%;margin-left:10px;    padding: 0px;
    }
   
}
/*when window is lower than 380px:hide movie details.*/
@media screen and (max-height: 380px){
   .map #movie-info-cont{
        display: none;
    }
}

/*when window is wider then 501px, higher then 381px and lower then 430px:show partially movie details(displayed:actors,genre..., hidden:movie image )*/
@media screen and (min-width: 501px) and (min-height: 381px) and (max-height: 430px){    
   .map #left_m_info
    {
       width:45%; 
    }
   .map  #right_m_info{
       width:45%; 
    }
   .map #movieDetailsDiv{
        width:100%;
    }
   .map  #movie-info-img-cont
    {
       display:none;
    }
   .map  #synops_wrapper{
       display:none
    }
    .map #releaseDate{
        margin-left:6px;
    }
}

@media screen and (min-width: 501px) and (min-height: 430px){
  .map  #left_m_info
    {
       width:100%; 
    }
  .map   #right_m_info{
        width:100%; 
    }
   .map #synops_wrapper{
        display:none
    }
}

@media screen and (min-width: 430px) and (min-height: 430px) and (max-height:499px){
   .map #left_m_info
    {
       width:100%; 
    }
   .map  #right_m_info{
        width:100%; 
    }
   .map #synops_wrapper{
        display:none
    }
}

@media screen  and (min-height: 499px){
   .map #left_m_info
    {
       width:100%; 
    }
    .map #right_m_info{
       width:100%; 
    }
    .map #synops_wrapper{
       display:block
    }    
}

/*_____________________________________________________________________________________________________________
/
/ STYLE USED FOR detailAssets=hidedetails :  
/______________________________________________________________________________________________________________*/

/*Hide map, display only theaters list*/
.hide #left_cont{
    display:none;
}
.hide #right_cont
{
    padding-right: 10px;
}
.hide #iScrollInfoW{
    margin-left:10px;width:100%;
}

/*_____________________________________________________________________________________________________________
/
/ STYLE USED FOR detailAssets=details :  
/______________________________________________________________________________________________________________*/

.details #castWrap{
    width:84%;
}

.details #rottenIconWrap{
    margin-left:16px;
}

.details #trailerLink{
    margin-left:9px;
}

.details #movieGenre{
    margin-left:9px;
}

.details #clockDiv{
    margin-left:9px;
}

.details #left_cont{
    width:300px;margin-left:10px;      
}

.details #map-info-cont{
    display: none;
}
.details #left_m_info, .details #right_m_info{
    width:100%;
}

.details #right_cont{
    padding-right:0px;
}

.details #moviePlot{
    bottom:20px;top:206px;
}

.details #moviePlotPopuUp{
    bottom:17px;top:7px;width:275px;left:10px;
}

 .details #iScrollInfoW{
    width:100%;
        
}
/*If window is narrower then 550px and lower then 320px: hide movie details.Only theaters list will be displayed*/
@media screen and (max-width: 550px) and (max-height:320px){
    .details #left_cont{
        display:none;
    }
}
/*If window is narrower then 550px, set theaters list beneath movie details.*/
@media screen and (max-width: 550px){
    .details #iScrollInfoW{
        margin-left: 0px;margin-right: 0px;padding-left:12px;width:100%;
    }
    
   .details #left_cont{
        width:100%;  
    }
    .details #right_cont{
        margin-left: auto; margin-right: auto;padding-right: 11px;
    }
   .details  #delimiterline2Div{
        display: none;
    }
    .details  #synopsis{
        display: none;
    }
    .details #moviePlot{
        display: none;
    }
   .details #movie-info-cont{
        width:100%;
    }
    .details #movie-info-img-cont{
        margin-left:1px;
    }
    .details #rottenIconWrap{
        margin-left:8px;
    }
    
}
/*If window is lower then 265px and narrower then 550px: hide movie details.*If window is lower then 265px and widder then 550px: do not hide movie details, show synopsis button*/
 @media screen and (max-height: 265px){
    .details  #delimiterline2Div{
        display: none;
    }
    .details  #synopsis{
        display: none;
    }
    .details #moviePlot{
        display: none;
    }
    .details #synopsisButton{
        display: inline;
    }
        
}  

@media screen  and (max-width:550px){
.details #moviePlotPopuUp{
    height:156px;right:10px;width:auto;
    }
}   


@media screen and (max-width:551px){
    .ui-datepicker-trigger{
        left:10px;
    }
}