@charset "UTF-8";
/* CSS Document */
/***************************************
LAYOUT STYLES
****************************************/

nav.topnav { display: none; }

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;
}

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

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

/* ---------------- lft_sidebar specific styles ----------------*/

/*------------- years specific styles --------------- */
section.section_default h1, h2 {
	 position:absolute;
	 left:-2000em;
}
section#years_list { 
    height: auto;
    background: none;
}
#header_years {
    margin-bottom: 20px;
    width: 100%;
	height: 30px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
	z-index: 1000; /*this is for Safari*/
}
.decade li {
	display: block;
	width: 75px;
	margin-left: 70px;
	color: #FFF;
	font-size: 1.2em;
	font-weight: bold;
}
.decade ul li {
	display: none;
	list-style: 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;
	text-decoration: none;	
}
.decade li:hover ul li {
	display: block;
}
.decade li:hover a:hover {
	font-weight: bold;
}
.year_drop li { margin-bottom: 30px; }
.spacer { height: 25px; }
/* ---------------- main_content specific styles ----------------*/

div#main_content section { 
    height: inherit;
    padding-bottom: 50px;
    background: none;
}
#heading_years {
    margin-bottom: 20px;
    width: 100%;
	height: 30px;
	background: #F3D61C no-repeat;
	border-radius: 10px;
	z-index: 1000; /*this is for Safari*/
}
#next_page {
	float: right;
	width: 120px;
	height: 20px;
	margin: 10px 20px 0px 0px;
}
#next_page li {
	float:left;
	list-style: none;
}
#next_page a {
	text-decoration: none;
	color: #F24814;
}
#paginate-top { margin-right: 30px; }
#paginate-bottom { margin-right: 30px; }

div.year {
    display: flex;
    align-content: flex-start;
    flex-flow: row wrap;
    justify-content: left;
	margin-top: 0px;
    margin-left: 20px;
	width: auto;
    height: auto;
}
div.year ul {
	list-style: none;
	width: 100px;
	text-align: center;
	margin-right: 20px;
	margin-bottom: 30px;
}
div.year img {
	width: 100px;
	height: 168px;
}
/*this is for images that have a live link*/
.linked:hover {
	border: solid 1px #F3D61C;
}
div.year ul li:first-child {
	text-align: left;
}
div.year li {
	color: #FFF;
}
.controls {
	position: absolute;
    margin-top: 10px;
}
/*----------- end of main_content ---------------*/

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

/* MEDIA QUERIES */

@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: 799px) {
    
    /* 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 150px; 
        margin-top: 73px;
    }
    
    div#header_years h3 { font-size: 1.2em; }
    
    .decade li { margin-left: 30px; }
    .decade ul a { margin-left: -20px; }
    
    /* 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) {
    
    /* container */
    div#container { min-width: 375px; }
    
    /* footer */
    footer#footer div#links p.legal {
        margin-left: -80px;
        footer#footer { height: 230px; }
        width: 90%;
    } 
}