* {
  box-sizing: border-box;
}

nav 	{display:grid; position:absolute;
		top:0; left:0;
		margin:0;  padding:0px;
		width:100%; height:20vh;
		min-width:160px;
		border:none; background-color:black;
		z-index:1000;
		}

#navbar {display:grid; position:fixed;
		grid-template-columns: 100px 400px 1fr 100px;
		/*  flex-gap:5px;                                    not a property */
		grid-template-rows:150px;
  		flex-flow:row nowrap; column-gap:5px;
  		justify-content:flex-start;
		align-items:center;
  		width:100%; height:150px;                     /* SET HIGHT OF NAVBAR HERE */	
  		background-color:black;
		border-bottom:none; margin:0px;             
		z-index:1001; 

		}

#navbar>div {
  border:none;
  background-color: black;
  padding:0; margin:0;
  color: #d9480f;
}

/* NAVBAR TITLE & LOGO BOXES */

 div .comedy { margin:0; padding:0px;                                /* LEFT SIDE LOGO */
			   border:none; background-color:#ffffff00;    						  /* set transparent */
			   z-index:1002;
			   }
			   
 div .marquee {width:auto;													 /* TITLE BOX */
  			 margin:0; padding:0px;																	
  			 font-size:3em; font-weight:900;
  			 font-style:italic; color:orange; 
  			 font-family:"wizardry night","frank knows", "Reach the End", "sergo UI black", cambria, sans-serif;
  			 border:none; background-color:#ffffff00;
			 z-index:102;
			 }
  
  div .tragedy {margin:0; padding:0px;						/* RIGHT SIDE LOGO */
  				background-color:black;
				border:none; background-color:#ffffff00;
				z-index:10002;}
						
/* NAVBAR TAB MENU */


  div .tab-box {display:grid;
				grid-template-rows:100%;
				grid-template-columns:100%;
  				flex-flow:row nowrap;
  				 height:100%; width:100%;                           /* tab-box gets full width */			
  				border:none; background-color:black;
				z-index:103 
  				}
				
.tab-wrap 		{display:grid;
				 grid-template-columns:100%;							/* INDIVIDUAL MAIN TABS IN THIS BOX */
  				 justify-content:space-between;						/* SPREAD OUT THE TABS */
  				 width:100%; height:40%;  
  				 margin-top:20px; padding-top:20px;      			 /* separation from tab-box */
  				 padding:0px; 
  				 border-left:4px ridge white;	          			 /* Style the tabs border   */
  				 border-top:6px ridge white;
  				 border-right:4px ridge white;
  				 background-color:#ffffff00;
				 z-index:1004;
  				}
  
/* sets tabbed menu as flex */
  
.main_tablist {
    display: flex;
    flex-flow: row nowrap;
    width: 100%; padding-right:10px;
	z-index:1005;
  }
  
  
  /* sets bkgd color and no bullets on 1st level tabs */
  
  .main_tablist li {
    justify-content:space-between;
    display: block; width:100%;
    list-style-type: none;
    background-color:black;
     border-right: 2px solid #454545; 
    text-align: center;
  }
  
 li > a {text-align:center;}
 
  /* sets color of links and padding on 1st level tabs */
  
  .main_tablist li a {display: flex;
					justify-content:center;
  					text-decoration: none;
  					padding: 10px 3px;
  					font-size:1.2em; font-weight:700;
  					font-family:limelight,"lucida bright",papyrus,sans-serif;
  					color:#ffffe0;													/* LIGHT YELLOW */
  					
  }
  
  
  /* sets color of hover on 1st level tabs */
  
  .main_tablist li:hover {
    background: #0a3156;
	z-index:999;
  }
  
  .main_tablist li:hover a {
    color: #fffacd;
  }
  
  
  /* sets color of dropdown links */
  
  .main_tablist li:hover li a {
    color: #888;
  }
  

 
  /* sets color of dropdown link on hover */
  
  .main_tablist li:hover li a:hover {
		color: #ffffff;
  }
  
  
  /* sets active tab background */
  
  .main_tablist li.active-tab {
    display: block;
    list-style-type: none;
    background-color: #ffffff;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
  }
  
  
  /* sets active tab link color */
  
  .main_tablist li.active-tab a {
    display: flex;
    text-align: center;
    text-decoration: none;
    color: #252525;
    padding: 10px 3px;
  }
  
  
  /* sets active tab "hover" */
  
  .main_tablist li.active-tab a:hover {
    background-color: #ffffff;
    color: #252525;
  }
  
  
  /* sets styles for ACTIVE sub-nav menu on hover */
  
nav ul li.active-tab:hover > ul li {
    border-top: 1px solid #454545;
    border-left: 1px solid #252525;
    border-bottom: 1px solid #252525;
  }
  
nav ul li.active-tab:hover > ul li a {
    display: flex;
    text-decoration: none;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  nav ul li.active-tab:hover > ul li a:hover {
    color: #252525 !important;
  }
  
  
  /* adds down arrow on menu items that have a dropdown ---- not useful on tabs 
  
  .dropdown > a:after {
    font-family:Times, ariel,sans-serif;
    content: "\003e";
    padding-left: 5px;
    padding-top: 3px;
  }
  
 */ 
  
  /* hides sub-nav menu */
  
nav ul ul {
    display: none;
    position: absolute;
    z-index: 99;
  }
  
  
  /* shows sub-nav menu on hover */
  
nav ul li:hover > ul {
    display: flex;
    flex-flow: column wrap;
    flex-shrink: 1;
    padding-left: 0;
  }
  
  
  /* sets styles for sub-nav menu on hover */
  
nav ul li:hover > ul li {
    border-top: 1px solid #454545;
  }
  
nav ul li:hover > ul li a {
    display: flex;
    text-decoration: none;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
  }
  
.main_tablist > li {
    position: relative;
  }
   
.main_tablist > li:last-child .sub-menu {
    right: -2px;
  }
  
/* ***************************** END OF NAV CSS ******************************* */