body
{
	background-image:url('/assets/Background.png');
	background-repeat:repeat-x;
	background-color: #59260B;
	margin: 0px;
	font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size: 14px;
}

h1
{
	font-size: 30px;
	text-align: center;
}

h2
{
	font-size: 22px;
	text-align: center;
}

h3
{
	font-size: 14px;
	font-style:italic;
	font-weight:normal;
}

h4
{
	font-weight:bold;
	text-align:center;
}

#container
{
	width:1024px;
	margin:auto;
	padding: 0px;
}
#header
{
	height:271px;
	background-image: url('/assets/Header.png');
	padding: 0px;
}
#navigation
{
	position:relative;
	float: left;
	left: 80px;
	top: 213px;
	margin: 0px;
	width: 560px;
	padding: 0px;
}

.index-container-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.index-container .content {
	height: 100%;
	display: inline-block;
}

.rankImage {
	width: 100%;
	margin-bottom:8px;
}

.rankLeaderImage {
	max-height: 50vh;
	max-width: 100%;
}

#bands-of-lehigh-promo:hover
{
	box-shadow: 0 0 0 6px #FEB400;
}

#navigation2
{
	position:relative;
	left: 120px;
	top: 213px;
	float: left;
	width: 320px;
	padding: 0px;
}

a.previous
{
	float: left;
}

a.previous:before
{
	content: '< Previous';
}

a.next
{
	float: right;
}

a.next:after
{
	content: 'Next >';
}

#content
{
	background-color: #59260B;
}
#footer
{
	text-align: center;
	color: #ffffff;
	font-size: 12px;
}
#footer a
{
	color: #FEB400;
}

a
{
	text-decoration: none;
	color: #59260B;
}

a:hover
{
	text-decoration: none;
	color: #FEB400;
}

#content div.content
{
	border-style: solid;
	border-width: 5px;
	border-color: #9a6e3b;
	background-color: #ffffff;
	padding: 8px;
	margin: 10px;
	width: 400px
}

#content div.mascots img
{
	width: 120px;
}

#content div.content.full
{
	width: 840px;
}

#content div.content.full.title
{
	min-height: 80px;
	text-align: center;
}

#navlist li
{
	display: inline;
	list-style-type: none;
	padding-right: 30px;
}

#navlist li a
{
	text-decoration: none;
	color: #000000;
}

#navlist li a:hover
{
	text-decoration: none;
	color: #ffffff;
}

#navlist li a.selected
{
	font-weight: bold;
}

#navlist li span.selected
{
	font-weight: bold;
}

#aboutus_menu_navlist li
{
	display: inline;
	list-style-type: none;
	padding-right: 20px;
}

#aboutus_menu_navlist li a.selected
{
	font-weight: bold;
	color: #FEB400;
}

#aboutus_menu_navlist li a
{
	text-decoration: none;
	color: #ffffff;
}

#aboutus_menu_navlist li a:hover
{
	color: #FEB400;
	
}

#aboutus_menu hr
{
	background: #FEB400; 
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  margin: 0 0 1.4em;
  border: none; 
}

div.table
{
	display: table;
	margin: auto;
}
div.cell 
{
	display: table-cell;
	vertical-align:top
}
div.row 
{
	display: table-row;
}

#schedule tr.background {
	background-color: rgba(216, 215, 215, 0.267);
}

#schedule tr.official
{
	font-weight: bold;
	vertical-align: initial;
}

#schedule td.note{
	font-style: italic;
	column-span: 2;
}

#schedule td
{
	padding: 4px;
}

#schedule-container
{
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	align-items: center;
	flex-basis: 800px;

	border-style: solid;
	border-width: 5px;
	border-color: #9a6e3b;
	background-color: #ffffff;

	width: fit-content;
	padding: 16px;
}

#schedule {
	border-spacing: 0;
	padding:4px;
	flex-basis: 840px;
}

#schedule tr :nth-child(2){
	width: 220px;
}

#ranks td img
{
	width: 100%;
}

#grid>img
{
	padding: 4px;
	width: 260px;
}

#grid>a>img
{
	padding: 4px;
	width: 260px;
}

#grid>p
{
	padding: 4px;
	width: 260px;
}

#colgrid>a>img
{
	padding: 2px;
	width: 196px;
	margin: auto;
}

#colgrid
{
	margin: 10px;
	width: 400px;
}

dd
{
	margin-bottom: 5px;
}


/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative; z-index: 99 }
ul.dropdown li                      { float: left; zoom: 1;  }
ul.dropdown a:hover		            {  }
ul.dropdown a:active                { }
ul.dropdown li a                    { display: block; padding-bottom: 5px; 
	 								  }
ul.dropdown li:last-child a         { } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                {  position: relative; }
ul.dropdown li.hover a              {  }

/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 150px; visibility: hidden; position: absolute; top: 22px; right: -57px; }
ul.dropdown ul li 					{  	 float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border: 1px solid #000; width: 100%; display: inline-block; background: #FEB400; height: 22px; padding: 0px 0px 0px 2px; } 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 113px; top: 0; }
ul.dropdown ul ul li a 					{ display: inline-block; height: 22px; padding: 0px 0px 0px 2px; }
ul.dropdown li:hover > ul 			{ visibility: visible; }



/*
 * The following styles are for the Bands of Lehigh album player on the Media page. Added 2022/04
 */ #bands-of-lehigh-player {
 	margin-top: 6px;
 	background: #ffffff;
 	font-size: 16px;

 	color: #000000;
 	display: flex;
 	flex-flow: row nowrap;
 }

 #bands-of-lehigh-player .column_left {
 	flex: 1 1 auto;
 }

 #bands-of-lehigh-player .column_left h1 {
 	text-align: left;
 }

 #bands-of-lehigh-player .column_left p {
 	margin: 5px 10px;
 }

 #bands-of-lehigh-player .column_right {
 	width: 250px;
 	flex: 0 1 auto;
 }

 #bands-of-lehigh-player .column_right img {
 	min-width: 200px;
 }

 @media (max-width: 500px) {
 	#bands-of-lehigh-player body {
 		flex-flow: row wrap-reverse;
 	}

 	#bands-of-lehigh-player .column_right {
 		width: 100%;
 	}
 }

 #bands-of-lehigh-player .cover {
 	width: 100%;
 }

 #bands-of-lehigh-player li,
.player {
	margin-top: 16px;
 	display: flex;
 	align-items: center;
 }

 #bands-of-lehigh-player button {
 	background-color: #ffffff;
 	color: #000000;

 	border: 1px solid #666666;

 	text-align: center;
 	vertical-align: middle;
 	cursor: pointer;
 	box-sizing: border-box;
 	line-height: 0;

 	border-radius: 0;
 	padding: 0.3em;
 }

 #bands-of-lehigh-player a {
	 font-style: italic;
	 text-decoration: underline;
 }

 #bands-of-lehigh-player button span {
 	line-height: 1.5;
 }

 #bands-of-lehigh-player .icon {

 	fill: currentColor;
 	stroke: 0;

 	stroke-width: 2;
 	stroke-linecap: round;
 	stroke-linejoin: round;
 	width: 1.25em;
 	height: 1.25em;
 	vertical-align: middle;
 }

 #bands-of-lehigh-player .player button.play {
 	font-size: 2em;
 }

 #bands-of-lehigh-player .song_list button.play,
 .player button.play {
 	overflow: hidden;
 	margin: 5px;
 	flex-shrink: 0;
 }

 #bands-of-lehigh-player .player_tools {
 	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
 	padding: 0px 10px;
 }

 #bands-of-lehigh-player .player .title {
 	font-size: 125%;
 	margin: 0 0 0.5em;
 }

 #bands-of-lehigh-player .byline {
	font-style: italic; font-size: 12px;
 }

 #bands-of-lehigh-player .song_list {
 	margin: 5px 20px;
 	padding: 0;
 }

 #bands-of-lehigh-player i {
	margin-left: auto;
 }

 #bands-of-lehigh-player .song_list p {
 	margin: 0 5px;
 }

 #bands-of-lehigh-player .album,
 .artist,
 .title {
 	color: #000000;
 }

 #bands-of-lehigh-player h1,
 h2,
 h3,
 .player {
 	margin: 5px 10px;
 }

 #bands-of-lehigh-player .slider {
 	-webkit-appearance: none;
 	width: 100%;
 	height: 10px;
 	box-sizing: border-box;
 	background-color: #ffffffaa;
 	background-image: linear-gradient(#0001, #0001);
 	outline: none;
 	-webkit-transition: .2s;
 	transition: opacity .2s;
 	border: 1px solid #666666;
 	border-radius: 0;

 }

 /* if we merge the slider-thumb styles, it breaks chrome support :c */
 #bands-of-lehigh-player .slider::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	width: 30px;
 	height: 15px;
 	box-sizing: border-box;
 	cursor: pointer;
 	background: #ffffff;
 	border-radius: 0;
 	border: 1px solid #666666;
 	border-radius: 0;
 }

 #bands-of-lehigh-player .slider::-moz-range-thumb {
 	width: 30px;
 	height: 15px;
 	box-sizing: border-box;
 	cursor: pointer;
 	background: #ffffff;
 	border-radius: 0;
 	border: 1px solid #666666;
 	background-image: linear-gradient(to bottom, #fff4, #fff4);
 	border-radius: 0;
 }