@charset "UTF-8";
/* CSS Document */
/*----------Color Guide---------------------
#FFFFFF : white
#F49321 : burnt orange
#F3EB40 : reddish yellow
#F4CA5E : yellowish red
#F2B81C : orange
#F3D61C : light orange
#1EC4F4 : teal
#CDEBF2 : light blue
#DB3827 : amber
#1E1012 : umber
#362C5C : dark blue
#20212A : cobalt
*/
/***************************************
GENERAL LAYOUT STYLES
****************************************/

div#wrapper { display: flex; }

div#lft_sidebar {
    flex: 0 0 265px;
    margin-right: 5px;
	padding-right: 5px;
	background: rgba(30, 16, 18, 0.95);
    border-radius: 10px;
}
nav.topnav { display: none; }

div#main_content { 
    flex: 0 0 500px;
    margin-right: 5px;
	background: rgba(30, 16, 18, 0.95);
	border-radius: 10px;
}

div#rgt_sidebar {
    flex: 1;
	background: rgba(30, 16, 18, 0.95);
	border-radius: 10px;
}

footer#footer { margin-top: 5px; }

/* ---------------- lft_sidebar specific styles ----------------*/
/*------------- genres specific styles --------------- */
#header_genres {
    width: 100%; 
	height: 30px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
	z-index: 1000; /*this is for Safari*/
}
section#genres h1, h2 {
	position:absolute;
	 left:-2000em;
}

section#genres ul {
	margin-left: 40px;
	list-style-type: none;
}
section#genres ul li {
	line-height: 2;
	font-size: 1.2em;
}
section#genres ul li:first-child { padding-top: 20px; }
section#genres a { color: #FFFFFF; }
section#genres a:hover { font-weight: bold; }

/* ---------------- main_content specific styles ----------------*/

section.section_default h1, h2 {
	 position:absolute;
	 left:-2000em;
}
section#main div#heading_genres {
	width: 100%; 
	height: 30px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
	z-index: 1000; /*this is for Safari*/
}
section.genre_by_year {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
	margin-top: 0px;
	margin-left: 20px;
	/*width: 480px;*/
	background: none;
}
section.genre_by_year div.flex_item h1, h2 {
	position:absolute;
	left:-2000em;
}
section.genre_by_year div.flex_item ul {
	margin-right: 20px;
	margin-bottom: 40px;
	list-style: none;
	width: 100px;
	text-align: center;
}
section.genre_by_year div.flex_item img {
	width: 100px;
	height: 168px;
}
/*this is for images that have a live link*/
section.linked:hover {
	border: solid 1px #F3D61C;
}
section.genre_by_year div.flex_item ul li:first-child {
	font-weight: bold;
    text-align: left;
}
section.genre_by_year li { color: #FFF; }

section.controls {
	position: absolute;
    margin-top: 10px;
}
/*----------- end of main_content ---------------*/

/* ---------- rt_sidebar ----------------------*/
/* -----------rate_your_films --------------*/

section#rate_your_films_left { display: none; }

div#subscription_star_rating_container section#rate_your_films {  
	position: relative;
    height: 450px;
	background: rgba(30, 16, 18, 0.5);
	border-radius: 15px; 
}
div#subscription_star_rating_container section#rate_your_films div#heading_subscribe {
	width: 100%;
	height: 30px;
    background-color: #1EC4F4;
	border-radius: 10px;
}
div#subscription_star_rating_container section#rate_your_films div#heading_subscribe p { padding: 5px 0 0 10px; }

section#rate_your_films div#rate_your_films_list ul { 
    margin: 30px 20px 30px 30px;
    list-style: circle outside;
}
section#rate_your_films div#rate_your_films_list li {
	color: #FFF;
	margin-bottom: 20px;
}
section#rate_your_films div#rate_your_films_list li:last-child { list-style: none; }
section#rate_your_films div#rate_your_films_list li:last-child a img { margin: 0 auto; }

/*--------------star_rating_key -----------------*/
section#star_rating_key_left { display: none; }
section#star_rating_key { 
    height: 350px; 
	background: rgba(30, 16, 18, 0.5);
	border-radius: 15px;
}
#heading_star_rating_key {
    margin-bottom: 20px;
	width: 100%;
	height: 30px;
    background-color: #F3D61C;
	border-radius: 10px;
}
#heading_star_rating_key p {
    padding: 5px 0 0 10px;
    color: #000;
}
section#star_rating_key div.star_rating {
    padding: 20px 15px;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: flex-start;
    flex-flow: row wrap;
}
section#star_rating_key div.stars_def { 
    margin-top: -3px;
    margin-left: 20px; 
}

/*--------------MPAA_rating_key -----------------*/
section#mpaa_rating_key_left { display: none; }
section#mpaa_rating_key {
    width: 100%;
    height: auto;
}
#heading_mpaa_rating_key {
	width: 100%;
	height: 30px;
    background-color: #F3D61C;
	border-radius: 10px;
}
#heading_mpaa_rating_key {
    padding: 5px 0 0 10px;
    color: #000;
}
div#mpaa_ratings p {
	margin: 30px 20px 10px 20px;
	color: #FFF;
}
div#mpaa_ratings ul li {
	margin: 0 auto 20px 60px;
	list-style: none;
}
section#mpaa_rating_key div.mpaa_rating_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
section#mpaa_rating_key div img.large { 
    display: block; 
    margin-bottom: 10px;
}
section#mpaa_rating_key div img.small { display: none; }

/*-----------------------------------------------*/


/*------ MEDIA QUERIES ------*/

@media screen and (max-width: 1100px) {
    
	/* right sidebar */	    	    
    section#mpaa_rating_key div#g_rating, div#pg_rating, div#pg-13_rating, div#r_rating, div#nc-17_rating { margin-left: 20px; }
}

@media screen and (max-width: 1092px) {
    
	/* right sidebar */
    section#mpaa_rating_key div#g_rating, div#pg_rating, div#pg-13_rating, div#r_rating, div#nc-17_rating { margin-left: 0px; }
    section#mpaa_rating_key div img.large { display: none; }
    section#mpaa_rating_key div img.small { 
        display: block; 
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 1060px) {
    
    /* right sidebar */
    section#star_rating_key { height: 430px; }
    section#star_rating_key div.star_rating { 
        display: block;
        margin-top: 15px;
    }
    section#star_rating_key div.stars_def { margin: -9px 0px 20px 0px; }
    section#star_rating_key div#average { margin: -13px 0 0 0px; }
    section#star_rating_key div#walked_out { margin: -6px 0 0 0px; }
    
}

@media screen and (max-width: 1048px) {
    
    /* main content */
    div#main_content { flex: 1; }
    
    /* right sidebar */
    div#rgt_sidebar { display: none; }
    
}

@media screen and (max-width: 1015px) {
	
	/* Header */
	header#main_header { background: url(../_images/index/home_background_header_ps_1117.png) no-repeat left top; }
}

@media screen and (max-width: 930px) {
	
	/* header */
	header#main_header { background: url(../_images/index/home_background_header_ps_1020_no_tagline.png) no-repeat; }
}

@media screen and (max-width: 875px) {
    
    /* footer */
    footer#footer { height: 270px; }
    footer#footer div#links p.legal { 
        margin-top: 10px;
        margin-left: 8px;
    }
}

@media screen and (max-width: 825px) {
    
    /* Footer */
    footer#footer div#links { width: 50%; }
    
}

@media screen and (max-width: 821px) {
    
	/* footer */
    footer#footer { height: 200px; }
    
    footer#footer div#links {
        margin-top: -60px;
        width: 80%;
    }  
}

@media screen and (max-width: 800px) {
    
    /* Navigation */
    section#nav-container { display: none; }
    
    nav.topnav {
        display: block;
        margin-top: -70px;
        background-color: #1E1012;
        overflow: hidden;
    }

    nav.topnav a {
        float: left;
        display: block;
        color: #F49321;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    nav.topnav a:hover {
        background-color: #F2B81C;
        color: black;
    }
    
    /* Nav: dropdown container */
    nav.topnav div.dropdown {
      float: left;
      overflow: hidden;
    }

    /* Dropdown button */
    nav.topnav div.dropdown button.dropbtn {
      font-size: 16px; 
      border: none;
      outline: none;
      color: #F49321;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit; /* Important for vertical align on mobile phones */
      margin: 0; /* Important for vertical align on mobile phones */
    }

    /* Add a background color to navbar links on hover */
    nav.topnav a:hover, div.dropdown:hover button.dropbtn:hover {
        background-color: #F49321;
        color: black;
    }

    /* Dropdown content (hidden by default) */
    nav.topnav div.dropdown div.dropdown-content {
      display: none;
      position: absolute;
      background-color: #20212A;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    /* Links inside the dropdown */
    nav.topnav div.dropdown div.dropdown-content a {
      float: none;
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    /* Add a background color to dropdown links on hover */
    nav.topnav div.dropdown .dropdown-content a:hover {
      background-color: #F49321; opacity: 0.8;
      color: black;
    }

    nav.topnav div.dropdown div.dropdown-content a.active {
        background-color: #F49321;
        color: white;
    }

    /* Show the dropdown menu on hover */
    nav.topnav div.dropdown:hover .dropdown-content {
      display: block;
    }
    
    /* left sidebar */
    div#lft_sidebar { 
        flex: 0 0 180px;
        margin-top: 73px;
    }
    
    section#genres ul { margin-left: 20px; }
    div#lft_sidebar section#genres ul li a { font-size: .8em; }
    
    /* main content */
    div#main_content { margin-top: 73px; }
    
}

@media screen and (max-width: 510px) {
    
    /* footer */
    footer#footer div#links p.legal {
        margin-left: -80px;
        width: 90%;
    } 
}