@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
*/
/***************************************
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: 1;
    /*margin-right: 5px;*/
	background: rgba(30, 16, 18, 0.95);
	border-radius: 10px;
}

footer#footer { 
    margin-top: 5px;
    max-width: 1200px;
    height: 240px; /*DO NOT REMOVE*/ 
}

/* ---------------- lft_sidebar specific styles ----------------*/
/*------------- mpaa ratings specific styles --------------- */
#header_mpaa_rating_key {
    width: 100%; 
	height: 30px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
	z-index: 1000; /*this is for Safari*/
}
.mpaa_ratings p {
	color: #FFF;
	margin-left: 20px;
	margin-right: 10px;
	font-size: .75em;
}
.mpaa_ratings img {
	margin-left: 15px;
	margin-bottom: 20px;
}
#years li {
	line-height: 1.8;
	font-size: 1.2em;
}
#years a {
	text-decoration: none;
	list-style: none;
	color: #FFFFFF;
}
#decade li {
	display: block;
	width: 75px;
	margin-left: 70px;
	color: #FFF;
	font-size: 1.2em;
	font-weight: bold;
}
#decade ul {
	display: none;
	margin-top: 0px;
}
#decade ul a {
	display: block;
	height: 15px;
	margin-left: -70px;
	padding: 5px 5px;
	font-size: .8em;
	font-weight: 400;
	color: #fff;
	list-style: none;
	text-decoration: none;	
}
#decade ul a:hover {
	display: block;
	font-weight: bold;
}
#spacer {
	height: 20px;
}

/* ---------------- main_content specific styles ----------------*/
section.section_default h1, h2, h5 {
	 position:absolute;
	 left:-2000em;
}
#heading_years {
    width: 100%; 
	height: 30px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
	z-index: 1000; /*this is for Safari*/
}
.mpaa_ratings {
	margin-top: 25px;
	font-size: 1.2em;
}
.mpaa_ratings li {
	margin-left: 5px;
	list-style-type: none;
}
#tabs {
	float: right;
	width: 30%;
}
#tabs li,
#tabs li a {
	float: left;
	position: relative;
	top: -27px;
	right: 185px;
}
#tabs a {
	text-decoration: none;
	padding: 2px;
	color: #000000;
}
#tabs a:hover {
	font-weight: bold;
	color: #DB3827;
}
#current {
	color: #DB3827;/*this does not seem to work!*/
	font-weight: bold;
}
#bookcontent {
	clear: both;
	padding-top: 10px;
}
/*plug image for pagination when visitor or member*/
#paginate-top img {
	width: 175px;
	height: 26px;
}
.year {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
	margin-top: 0px;
	margin-left: 20px;
    margin-right: 0px;
	width: 93%;
}
.year ul {
	/*float: left;*/
	list-style: none;
	width: 100px;
	text-align: center;
	margin-right: 20px;
	margin-bottom: 40px;
}
.year img {
	width: 100px;
	height: 168px;
}
/*this is for images that have a live link*/
.linked:hover {
	border: solid 1px #F3D61C;
}
.year ul li:first-child {
	text-align: left;
	font-weight: bold;
}
.year li {
	color: #FFF;
}
.hide h4 {
	color: #1e1012;
}
.controls {
	position: absolute;
    margin-top: 10px;
}
a.ShowPage{
    /* The links that initiate the page slide */
    float:left;
    height:15px;
    margin:4px 3px;
    text-indent:-9999px;
    width:15px;
}
a.ShowPage:hover,
a.ShowPage.active{
}
#ratings_list li{
    list-style:none outside none;
    margin:10px 10px 0;
    padding:20px;
    float:left;
}
.clear{
    /* This class clears the floated elements */
    clear:both;
}
/*----------- end of main_content ---------------*/


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


@media screen and (max-width: 1123px) {
	
	/* main content */
    #tabs { width: 35%; }

}

@media screen and (max-width: 1085px) {
	
	/* main content */
    ul#tabs {
	    float: none;
        /*display: inline-block;*/
        margin-left: 170px;
        width: 78%;
        /*margin-left: 170px;*/
    }
    #tabs li, #tabs li a { right: 0px; }
    #paginate-top img { float: none; position: absolute; left: 0px; }

}

@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: 715px) {
    
	/* main content */
    #heading_years { height: 60px; }
    ul#tabs { 
        margin-left: 20px;
        width: 88%;
    }
    
}

@media screen and (max-width: 560px) {
    
    /* 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;
    }
    
	 /* main content */
    div#main_content { margin-top: 73px; }
    
}

@media screen and (max-width: 520px) {
    
    /* footer */
    footer#footer { height: 220px; }   
    
}

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

@media screen and (max-width: 500px) {
    
    /* main content */
    #heading_years h3 { font-size: 1em; }
    div.mpaa_ratings ul#tabs li a { font-size: .8em; }
    
}

@media screen and (max-width: 455px) {
    
    /* main content */
    #tabs { margin-left: 0px; }
    div.mpaa_ratings ul#tabs li a { font-size: .7em; }
    
}