* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html,body {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	background: #4a6791;
	background: -moz-linear-gradient(top,  #4a6791 0%, #4f6a95 6%, #4f6b93 8%, #526e96 10%, #516d95 12%, #536f97 12%, #526e96 14%, #557199 16%, #547098 18%, #57739b 19%, #5a769e 25%, #6e8ab2 46%, #6d8ab2 48%, #708db5 49%, #6f8cb4 51%, #728fb7 52%, #809ec4 69%, #83a1c7 70%, #82a0c6 71%, #87a5cb 75%, #85a5cb 77%, #8babd1 83%, #8daed1 88%, #95b7da 100%);
	background: -webkit-linear-gradient(top,  #4a6791 0%,#4f6a95 6%,#4f6b93 8%,#526e96 10%,#516d95 12%,#536f97 12%,#526e96 14%,#557199 16%,#547098 18%,#57739b 19%,#5a769e 25%,#6e8ab2 46%,#6d8ab2 48%,#708db5 49%,#6f8cb4 51%,#728fb7 52%,#809ec4 69%,#83a1c7 70%,#82a0c6 71%,#87a5cb 75%,#85a5cb 77%,#8babd1 83%,#8daed1 88%,#95b7da 100%);
	background: linear-gradient(to bottom,  #4a6791 0%,#4f6a95 6%,#4f6b93 8%,#526e96 10%,#516d95 12%,#536f97 12%,#526e96 14%,#557199 16%,#547098 18%,#57739b 19%,#5a769e 25%,#6e8ab2 46%,#6d8ab2 48%,#708db5 49%,#6f8cb4 51%,#728fb7 52%,#809ec4 69%,#83a1c7 70%,#82a0c6 71%,#87a5cb 75%,#85a5cb 77%,#8babd1 83%,#8daed1 88%,#95b7da 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a6791', endColorstr='#95b7da',GradientType=0 );
}

body {
	min-height: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

.clear { clear: both; }
.clear:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

a {
    outline: none;
    color: #2944D7;
}

a:hover {
    color: #C64B1C;
}

a:visited {
    color: #996633;
}

.orangetext {
    color: #FF6600;
}

header {
	height: auto;
	position: relative;
	background: #4b698f;
	background: -moz-linear-gradient(top,  #4b698f 0%, #b0bbd1 100%);
	background: -webkit-linear-gradient(top,  #4b698f 0%,#b0bbd1 100%);
	background: linear-gradient(to bottom,  #4b698f 0%,#b0bbd1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b698f', endColorstr='#b0bbd1',GradientType=0 );
	margin-bottom: 10px;
}

header:after {
	content:"";
	height: 9px; 
	width: 100%;
	background: url(/portfolio/bowieband/images/header_border_img.gif) repeat-x;
	position: absolute;
	bottom: -9px;
}

.header-inline {
	display: inline-block;
}

.volslogo {
	background: url(/portfolio/bowieband/images/VolsLogo.png) 50% 0 no-repeat;
	height: 110px;
}

.volslogo a {
	display: block;
    width: 170px;
    height: 110px;
    margin: 0 auto;
}

nav {
	position: relative;
}

	nav img {
		display: none;
	}


.menu-title,.menu-title:visited {
	color: #2944D7;
}

.menu-title span,.topmenu-close span {
	position: absolute;
    right: 1em;
}

.topmenu-close span {
	font-size: .8em;
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	background-color: #FFFFFF;
/*	border-right: .05em solid #333333;
	border-left: .05em solid #333333;
	border-bottom: .05em solid #333333;*/
}

.menu li a {
	display: block;
	padding-top: 3px;
	padding-bottom: 3px;
}


.closemenu {
	position: absolute;
	top: 0;
	right: 10px;
    font-size: 1.3em;
	padding: .6em;
	cursor: pointer;
	z-index:10;
}

.backmenu {
	position: absolute;
	top: 0;
	right: 10px;
    font-size: 1.3em;
	padding: .6em;
	cursor: pointer;
	z-index:10;
}

.mobile-nav-btn {
	position: absolute;
    top: 10px;
    left: 10px;
    display: block;
    width: 40px;
}

.mobile-nav-btn div {
	background: #FFFFFF;
    border-radius: 2px 2px 2px 2px;
    height: 4px;
    margin: 5px 5px;
}


.topmenu {
    position: absolute;
    width: 100%;
    top: 0;
	z-index: 10;
	display: none;
}

.topmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1.3em;
}

.topmenu li {
	position: relative;
	display: block;
	background: #FFFBEA;
	border-bottom: .05em solid #000000;
}

.topmenu li a {
	display: block;
	padding: 10px 10px;
	text-decoration: none;
}

.menu-section-title {
	font-weight: bold;
	font-size: 1.3em;
    text-transform: uppercase;
}

.sitelinks,.football,.contests,.pictures,.calendar,.info {
    position: absolute;
    width: 100%;
    top: 0;
	z-index: 10;
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
/*	border-right: .05em solid #333333;
	border-left: .05em solid #333333;
	border-bottom: .05em solid #333333;*/
}

.sitelinks li,.football li,.contests li,.pictures li,.calendar li,.info li {
	border-bottom: .08em solid #000000;
	border-left: .08em solid #000000;
    border-right: .08em solid #000000;
}

.sitelinks li a,.football li a,.contests li a,.pictures li a,.calendar li a,.info li a {
	display: block;
	padding: 10px 10px;
	text-decoration: none;
}

.sub:after {
    content: ">";
    position: absolute;
    text-align: center;
    right: 20px;
    width: 25px;
    height: 25px;
}

.playoffs {
	background: #000000;
}

.playoffs a {
	color: #FFFFFF;
}

#links .content ul {
	column-count: 2;
}


#links .content ul li:first-child,
#football .content ul li:first-child,
#contests .content ul li:first-child,
#pictures .content ul li:first-child,
#calendar .content ul li:first-child,
#info .content > ul > li:first-child {
	display: none;
}




/*****  ARCHIVES BUTTON
*********************************************************************************/
.archive-btn {
	display: inline-block;
	background: #000000;
	color: #FFFFFF !important;
	font-weight: bold;
	text-decoration: none;
	padding: 6px 0;
	width: 14em;
	font-size: 0.7em;
	position: absolute;
	/* margin: 0 auto; */
	left: 50%;
	margin-left: -7em;
	bottom: -12.5em;
	text-transform: uppercase !important;
	text-align: center;
}

.archive-btn:before {
	content: "";
	position: absolute;
	top: 0;
	left: -24px;
	width: 0;
	height: 0;
	border-top: 24px solid black;
	border-left: 24px solid transparent;
}

.archive-btn:after {
	content: "";
	position: absolute;
	top: 0;
	right: -24px;
	width: 0;
	height: 0;
	border-top: 24px solid black;
	border-right: 24px solid transparent;
	/** This style makes the pointy shape on the button, and positions it!  **/
}








.downloads { 
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 0;
    margin-left: 0;
}


.tree {
	box-shadow: 1px 1px 4px #333333;
}


.personalize {
	position: absolute;
	left: 0em;
	top: 12em;
	color: #FFCC33;
	padding: .5em 1em;
	display: inline-block;
	font-size: .8em;
}

.personalize a,.personalize a:visited {
	color: #ffffff;
}

.personalize-form {
	display: none;
	position: absolute;
    top: 8.6em;
    left: 11em;
	width: 170px;
    height: auto;
	margin: 5px auto;
    padding-top: 6px;
    z-index: 5000;
    border: 1px solid #000000;
    text-align: center;
    background: #efefef;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	border-radius: 6px;
}

.personalize-form ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.personalize-form label {
	font-size: .9em;
}

.personalize-form input {
	margin: 5px 0;
}

/** morelinks **/
.mobileonly { 
	display: block; 
}

.desktoponly { 
	display: none; 
}

.content {
	background: #FFF;
	border-top: 1px solid #b0360b;
	border-left: 1px solid #b0360b;
	border-right: 1px solid #b0360b;
	padding: .6em;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	-ms-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	margin-left: .5em;
	margin-right: .5em;
	margin-top: 4em;
}

.center-mobile-content {
	text-align: center;
}


/**** Birthdays
*************************/
.birthdays {
	overflow:auto;
	width: 70%;
	margin: 0 auto;
}

.birthday-img {
	width: 180px; 
	height: 137px; 
	margin: 0 10px 10px 0;
	vertical-align: top;
	float: left;
}

.birthday-cgi {
	background-image: url(/portfolio/bowieband/images/bdayCGIbgd.gif);
	background-repeat: repeat-x; 
	background-color: #98BADC;
	margin: 0;
}

.birthmotitle {
    color: orange;
	text-align: center;
}

.birthmonth {
	float: left;
}

.birthmonth p:first-child {
	margin-top: 0;
}

.birthmonth select { /* Select your birth month */
	width: 9em;
}

.birthday-container {
}

.happybirthday { 
	margin-top: 30px;
}

.text-animation{
	display: none;
}


.winterdrumline img {
/*	float: left;*/
    margin: 0 10px 0 0;
}

.orange-dot-separator {
    background: url(/portfolio/bowieband/images/horizontal_dots.gif) repeat-x;
    margin: 6px 0;
    padding: 0;
    height: 3px;
}

.wheniwasinband {
	border: 1px solid #b0360b;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    font-size: .8em;
    margin: 10px auto;
}

.article-separator {
	margin: 10px 0 0 0;
    padding-top: 5px;
    border-top: 1px dashed #cc3300;
}


.author {
	display: block;
    font-size: .75em;
}


#cardinfobtn:hover {
    background-color: #FF6600;
	color: #FFFFFF;
    text-decoration: underline;
}

.volscard figure {
	margin: 0 0 .5em 0;
}

.volscard figure img {
	width: 100%;
	max-width: 601px;
	height: auto;
}

.volscard figure a {
	display: inline-block;
	text-align: center;
	padding: 10px;
	border: 1px solid #FF6600;
	background-color: #FFE6BF;
	font-weight: bold;
	text-decoration: none;
	color: #003399;
	font-size: 1em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

.winterdrumline figure {
	text-align: center;
	margin-bottom: .5em;
}

#entertainment figure {
	text-align: center;
}

#entertainment figure a {
	display: block;
}

#entertainment figure img {
	box-shadow: 7px 7px 4px #666666;
	margin-bottom: .5em;
}

#entertainment figcaption a {
	display: block;
}

.jhsband-l, .jhsband-r {
	margin-left: auto;
    margin-right: auto;
}

/**  PHOTOS
**************************************************************************/
.gameindex,.photoindex,.contestindex {
	display: none;
}





/**  INFO
**************************************************************************/
.charms-info-points li {
	margin-bottom: .5em;
}

	
.fundraisertext {
	padding-left: .8em;
}
/**  INFO
**************************************************************************/






/**  Band Camp
**************************************************************************/
.contains-img {
	text-align: center !important;
}

.summer-band-schedule {
	list-style: none;
	margin: 0;
	padding: 0;
}

.summer-band-schedule div {
	background: #e5e5e5;
}

.summer-band-schedule div ol {
	margin: 0;
	padding-left: 2em;
}

.summer-band-schedule div ol li,
.school-year-schedule div ol li,
.bandcamp ol li {
	font-weight: bold;
	padding-left: 1em;
	margin-bottom: .3em;
}

.summer-band-schedule div ol li span,
.school-year-schedule div ol li span,
.bandcamp ol li span {
	font-weight: normal;
}


.no-schedule { /* nothing scheduled today, doesn't display a number value in the list item. */
	list-style-type: none;
}

/* override JQuery UI */
.ui-accordion .ui-accordion-content {
    padding: 1em;
}

.ui-state-active {
	background: #2d4799; /* Bowie blue */
}

.calendar-notes {
	background: #2d4799;
    padding-top: .01em;
}

.calendar-notes ol {
    display: block;
    background: rgb(255, 204, 102);
    margin-left: 1.6em;
	padding-right: 1em;
}

.calendar-notes li {
	margin-bottom: .5em;
}

.calendar-notes li:first-child {
	padding-top: 1em;
}

.calendar-notes li:last-child {
	padding-bottom: 1em;
}

.calendar-notes h3 {
	color: #FFCC66;
	padding-left: 1.4em;
}

.summer-band-img,.bandcamp img {
	width: 100%;
	max-width: 540px;
	height: auto;	
}

.after-school-schedule h3 {
	background: #2d4799;
    color: #FFCC66;
    padding: 1em 1em .5em 1em;
    margin-bottom: 0;
}

.after-school-schedule ul {
    background: #FFCC66;
    margin-top: 0;
    padding-top: .5em;
    padding-right: 1em;
}

.after-school-schedule li {
	margin-bottom: .5em;
}

.after-school-schedule li:last-child {
	padding-bottom: 1em;
}

/**  Band Camp
**************************************************************************/




.guestbook-header {
	list-style: none;
	margin: 0;
	padding: 0;
}

.guestbook-header li:first-child {
	padding: .5em 0;
	display: inline-block;
}

.guestbook-header .links {
	text-align:center;
}

.guestbook-header .links span {
	display: inline-block;
}

.guestbook-header li:last-child {
	padding: .5em;
}

.guestbook-header li:first-child span {
	display: inline-block;
	padding: .5em 0;
	font-weight: bold;
}

.guestbook-header li:first-child img {
	vertical-align: bottom;
}

.guest-title {
	background: #BCBCDE !important;
    padding: .5em !important;
    margin-bottom: 0 !important;
}
.entryform input {
    height: 2.5em;
    border-radius: 8px;
	padding: 5px;
}

.entryform label {
	display: block;
	line-height: 1.2;
    padding-bottom: .5em;
}

.entryform {
	list-style: none;
	margin: 0;
	padding: 0;
}

.entryform li {
	background: #EFEFEF;
	padding: .5em;
}

.archivelist {
	display: inline-block;
    background-color: #FFF8E6;
    border: 1px solid #7EA5D3;
    padding: 1em;
    padding-left: 1.9em;
}


/***  Calendar Styles 
************************************************************************************/
.calendar-table-head {
	background: #FF9900;
	padding-top: 2em;
}

.calendar-table-head h3 {
	text-align: center;
}

.calendar-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display:flex;
	justify-content: space-between;
}

.calendar-links li {
	display: inline-block;
	text-align: center;
}

.calendar-links a {
	display: block;
	font-size: 1em;
	padding: 5px;
}

.calendar-table {
	width: 100%;
}

.calendar-table td:nth-child(even) {
	background: #E5E5E5;
}

.calendar-table td:nth-child(1), 
.calendar-table td:nth-child(7) {
    background: #CADEFF;
}

.calendar-table th {
	display: none;
}

.calendar-table tr {
	display:block;
}


.calendar-table td {
	display: block;
	min-height: 50px;
	margin-bottom: .5em;
	padding: 5px;
}

.calendar-table span {
	font-weight: bold;
}

.previous-month {
	color: #999999;
}
/***  End Calendar Styles 
************************************************************************************/


.director-bio {
	position: relative;
	display: flex;
    flex-direction: column;
	align-items: center;
    margin-right: 0;
    margin-left: 0;
}

.director-bio figcaption p:first-child {
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
}

.director-bio figcaption li {
	text-align: left;
}

.boosters {
	padding: 0;
	margin: 8px 10px 0 0;
	float: left;
}

.thumbstyle {
    border: 1px solid #000000;
    margin: 8px;
    float: left;
}

.thumbstyle img { vertical-align: bottom; } /* this setting removes gap between image and bottom of container. Weird. */

#bandcouncil h3 {
	text-align: center;
}

.bandcouncil-table,.bandleader-table {
	width: 100%;
	border-collapse: collapse;
}

.bandcouncil-table td,
.bandleader-table td {
	padding: 3px;
    vertical-align: top;
}


.bbofficers-table {
	width: 100%;
	border-collapse: collapse;
}

.bbofficers-table td {
	padding: 4px;
	vertical-align: top;
	display:block;
}

.bbofficers-table tr:nth-child(even) {
	background: #E5E5E5;
}

.bbofficers-table tr {
	display: block;
}

.bandgeek li {
	margin-bottom: 5px;
}

#band-hierarchy p {
	margin-bottom: 0;
}

#band-hierarchy ul {
	margin-top: 5px;
}

.iwillnot {
	color: #993300;
	margin-bottom: 5px;
}

.iwill {
	color: #009900;
	margin-bottom: 5px;
}

.infonav {
	text-align:center;
}

.infonav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
}

.infonav li {
    display: inline-block;
}

.infonav li a {
    display: block;
    padding: 3px 4px;
}

.contactinfo {
	border: dashed 2px #CC3300;
	margin: 0;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

.stinfo {
	margin-bottom: 10px;
	border-bottom: 1px solid #FF9900;
	padding: 0 0 4px 8px;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}



.cinfosubnav {
	margin: 1em;
}

.cinfosubnav ul {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cinfosubnav li {
	display: inline-block;
}


.infoclass {
	font-size: 2em;
	color: #000000 !important;
	text-decoration: none;
}









footer {
	background: #FFFFFF;
	border-left: 1px solid #b0360b;
	border-bottom: 1px solid #b0360b;
	border-right: 1px solid #b0360b;
	padding: .6em;
	-webkit-border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-ms-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
	margin-left: .5em;
	margin-right: .5em;
	margin-bottom: 2em;
}

.footer-menu {
	list-style-type: none;
    display: block;
    border-top: 1px solid #b0360b;
    border-bottom: 1px solid #b0360b;
    overflow: auto;
	text-align: center;
    margin: 0;
    padding: 2px;
}

.footer-menu li {
	display: inline-block;
}

.footer-menu li a {
	display: block;
	padding: 2px;
}

footer aside .disclaimer {
	text-align: center;
}

footer aside {
	margin-top: 1em;
}







/*****  Header Animations - 
/*****   NOTE: These animations will NOT WORK in IE unless they are defined OUTSIDE the media query!!!
***********************************************************/

/**********  Text Animations    **********/
@keyframes bowie {
	0% {
		opacity:0;
		left:0;
	}
	5% {
		left: 250px;
		opacity:1;
	}
	50%,100% {
		left: 250px;
		opacity:0;
	}
}

@keyframes highschool {
	0% {
		opacity:0;
		left:0;
	}
	5% {
		left: 180px;
		opacity:1;
	}
	50%,100% {
		left: 180px;
		opacity:0;
	}
}

@keyframes marchingband {
	0% {
		opacity:0;
		left:0;
	}
	5% {
		left: 180px;
		opacity:1;
	}
	50%,100% {
		left: 180px;
		opacity:0;
	}
}

.text-animation {
	position: absolute;
	top: 20%;
	width: 200px;
	display: none;
}

.slidein {
	position: absolute;
	left: 0;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 2em;
	animation-duration: 8s;
}

.bowie {
	animation-name: bowie;
	animation-iteration-count: infinite;
}

.highschool {
	animation-name: highschool;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	width: 250px;
	opacity: 0;
}

.marchingband {
	animation-name: marchingband;
	animation-delay: 3.5s;
	animation-iteration-count: infinite;
	width: 350px;
	opacity: 0;
}
/**********  Text Animations    **********/



.student-animation {
	display: none;
}

/** Student image animation **/
.students {
	width: 280px;
	height: 79px;
	position: absolute;
	left: 480px;
	top: 0;
	animation-name: studentfade;
	animation-iteration-count: infinite;
	animation-duration: 24s;
	opacity: 0;
}

@keyframes studentfade {
	0% {opacity:0;}
	20% {opacity:1;}
	20%,90% {opacity:1;}
	90%,100% {opacity:0;}
}

.student-1 {
	background: url(../images/header/student1.jpg) 0 0 no-repeat;
	animation-delay: 0s;
}

.student-2 {
	background: url(../images/header/student2.jpg) 0 0 no-repeat;
	animation-delay: 3s;
}


.student-3 {
	background: url(../images/header/student3.jpg) 0 0 no-repeat;
	animation-delay: 7s;
}


.student-4 {
	background: url(../images/header/student4.jpg) 0 0 no-repeat;
	animation-delay: 10s;
}


.student-5 {
	background: url(../images/header/student5.jpg) 0 0 no-repeat;
	animation-delay: 14s;
}

/*	
.student-6 {
	background: url(../images/header/student6.jpg) 0 0 no-repeat;
	animation-delay: 10s;
}


.student-7 {
	background: url(../images/header/student7.jpg) 0 0 no-repeat;
	animation-delay: 12s;
}


.student-8 {
	background: url(../images/header/student8.jpg) 0 0 no-repeat;
	animation-delay: 14s;
}


.student-9 {
	background: url(../images/header/student9.jpg) 0 0 no-repeat;
	animation-delay: 16s;
}


.student-10 {
	background: url(../images/header/student10.jpg) 0 0 no-repeat;
	animation-delay: 18s;
}
*/
/** Student image animation **/
/**  Header Animations
***********************************************************/








@media screen and (min-width: 768px) { 
	body {
		background: #98BADC url(/portfolio/bowieband/images/body_bg.jpg) 0 0 repeat-x;
	}

	header {
		background: url(/portfolio/bowieband/images/BowieBandHeader.jpg) 0 0 no-repeat;
		height: 110px;
		position: relative;
	}
	
	header:after {
		background: none;	
	}


	.volslogo {
/*		background: url(/portfolio/bowieband/images/VolsLogo.png) 0 0 no-repeat;*/
		background: none;
		width: 170px;
		height: 90px;
		position: absolute;
		left: 0;
		top: 0;
	}

	
	.volslogo a {
		display: inline-block;
		height: 82px;
	}

	nav {
		position: absolute;
		bottom: 0;
		height: 30px;
		width: 100%;
	}
	
	nav img {
		display: block;
	}

	nav:after { 
		content:"";
		height: auto; 
		width: 100%;
		background: none;
		position: static;
	}

/**   NAV Menu
*************************************************************************/
	.mobile-nav-btn,.topmenu {
		display: none !important;
	}
	

/* Override mobile */
.sitelinks li, .football li, .contests li, .pictures li, .calendar li, .info li {
    /*border-bottom: 0;*/
}

.sitelinks li a, .football li a, .contests li a, .pictures li a, .calendar li a, .info li a {
    padding: 8px;
}

/*****  TINYMENU CSS
******	I tried to override it, but it turned out there was so much to override it became
******	simlper to put it here and rewrite the styles.
*********************************************************************************************************/
/* * {margin:0; padding:0; outline:0}
body {font:11px Verdana,Arial; color:#000; background:#fff}*/
.nav {/*height:36px; background:#aaa; color:#fff; text-shadow:1px 1px #888;*/ z-index:1000}
.menu a {float:left; color:#eee; text-decoration:none; /*width:120px; height:28px; padding-top:8px*/}
.menu span {float:left; color:#eee; text-decoration:none; /*width:120px; height:28px; padding-top:8px*/}
.menu a:hover {color:#fff}
.menu {list-style:none; /*font:16px Arial,Verdana; text-align:center;*/ width:800px; margin: 0 0 0 110px;}
.menu li {position:relative; float:left; /*width:120px;*/ z-index:1000}
.menu ul {display:none; position:absolute; /*font:normal 13px Arial,Verdana;*/font-size:12px; top:0; /*left:0; background:#aaa;*/ list-style:none;padding-left:0;}
.menu ul li {float:none; /*border-top:1px solid #ccc; width:120px*/background-color: #ED6A1C; /*border-left: 1px solid #000000;border-right: 1px solid #000000;*//*border-left: .05em solid #000000;border-right: .05em solid #000000;*/}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {float:none; display:block; background:none;/*border-bottom:.05em solid #000000;border-left: .05em solid #000000;*/ /*height:22px; padding-top:5px*/}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background: yellow;color: #000000;text-decoration: underline;}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {float:none; display:block; background:none; /*height:22px; padding-top:5px*/}
.menu ul ul {left:148px; top:0;width: 150px}
.menu ul ul li:first-child {border-top: .08em solid #000000;}
.menu li.submenu {font-weight:bold}
.menu li.noborder {border-top:none}
li.menuhover a, li.menuhover li.menuhover a {color:#fff; }
li.menuhover span, li.menuhover li.menuhover span {color:#fff; background:#999}
/*#info {width:180px; background:#eee}
#info li {width:160px; border-top:none; padding:8px 10px; color:#666; text-shadow:1px 1px #fff; text-align:left}*/
/*****  TINYMENU CSS
*********************************************************************************************************/

	.menu ul li.playoffs {
		background: #000000;
	}
	
	.menu ul li.playoffs a {
		color: #FFFFFF;
	}
	
	.menu ul li.playoffs a:hover {
		color: #000000;
	}

	.morelinks { 
		position: absolute; 
		color: #000000; 
		height: auto; 
		left: 676px; 
		bottom: 5px; 
		z-index: 10; 
		font-size: .7em; 
	}
	
	.morelinks ul { 
		list-style: none; 
		margin: 0; 
		padding: 0; 
	}
	
	.morelinks li { 
		margin-bottom: 3px; 
	}
	.morelinks a { 
		text-decoration: none; 
		color: #000000; 
		font-weight: bold; 
	}
	
	.archive-btn {
		display: inline-block;
		background: #000000;
		color: #FFFFFF !important;
		font-weight: bold;
		text-decoration: none;
		font-size: 0.7em;
		position: absolute;
		left: 7em;
		bottom: -2.9em;
		text-transform: uppercase !important;
		text-align: right;
	}
	
	.archive-btn:after {
		content: "";
		position: absolute;
		top: 0;
		width: 0;
		height: 0;
		/** This style makes the pointy shape on the button, and positions it!  **/
	}
	
	.archive-btn:hover {
		color: #FF0000 !important;
	}
	
	.personalize {
		position: absolute;
		left: 18em;
		top: 9em;
		color: #FFCC33;
		padding: .5em 1em;
		display: inline-block;
		font-size: .8em;
	}
	
	.mobileonly { 
		display: none; 
	}
	
	.desktoponly { 
		display: block; 
	}
	
	/***  Menus   ***/
	.sitelinks {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 155px;
		margin: 0;
		padding-top: 9px;
		display: none;
		background: url(/portfolio/bowieband/images/navdropbg.gif) 0 top repeat-x;
	}
	
	.football {
		position: absolute;
		left: 77px;
		top: 0px;
		width: 155px;
		margin: 0;
		padding-top: 9px;
		display: none;
		background: url(/portfolio/bowieband/images/navdropbg.gif) 0 top repeat-x;
	}
	
	.contests {
		position: absolute;
		left: 172px;
		top: 0px;
		width: 170px;
		margin: 0;
		padding-top: 9px;
		display: none;
		background: url(/portfolio/bowieband/images/navdropbg.gif) 0 top repeat-x;
	}
	
	.pictures {
		position: absolute;
		left: 260px;
		top: 0px;
		width: 162px;
		margin: 0;
		padding-top: 9px;
		display: none;
		background: url(/portfolio/bowieband/images/navdropbg.gif) 0 top repeat-x;
	}
	
	.calendar {
		position: absolute;
		left: 346px;
		top: 0px;
		width: 145px;
		margin: 0;
		padding-top: 9px;
		display: none;
		background: url(/portfolio/bowieband/images/navdropbg.gif) 0 top repeat-x;
	}
	
	.info {
		position: absolute;
		left: 439px;
		top: 0px;
		width: 150px;
		margin: 0;
		padding-top: 9px;
		display: none;
		background: url(/portfolio/bowieband/images/navdropbg.gif) 0 top repeat-x;
	}


	.closemenu,.menu-section-title {
		display: none;
	}

/**   NAV Menu
*************************************************************************/

	.content {
		min-height: 400px;
		margin-top: 2.5em;
	}

	/**** Birthdays
	*************************/
	.birthdays {
		display:block;
		overflow:auto;
		width: 70%;
		margin: 0 auto;
	}
	
	.birthdays img {
		width: 180px; 
		height: 137px; 
		float: left; 
		margin: 0 10px 10px 0;
	}

	/**********    Text Animation     **********/
	.text-animation,.student-animation {
		display: block;
	}

	.center-mobile-content {
		text-align: start;
	}



	.linksmenu-over {
		display: none;
		position: absolute;
		top: -1px;
		left: 119px;
	}
	

	.content,footer {
		margin-left: 1.5em;
		margin-right: 1.5em;
		max-width: 1000px;
	}

	.wheniwasinband {
		width: 55%;
	}
	
	.archivelist ul {
    	column-count: unset;
		font-size: 1em;
	}
	
	.winterdrumline figure {
		float: left;
	}

	figure {
		margin: 0;
	}
	
	figure img {
		margin: 0;
	}
	
	figure figcaption {
		text-align: center;
		display: table-row;
	}
	
	.downloads { 
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		margin-right: 0;
		margin-left: 0;
	}
	
	.downloads ul {
		padding-left: 2em;
		text-align: left;
	}
	
	.tree {
		box-shadow: 1px 1px 4px #333333;
	}
	
	#entertainment figure {
		display: table;
		width: 1px;
	}
	
	#entertainment figure img {
		box-shadow: 7px 7px 4px #666666;
		margin-bottom: .5em;
	}

	
	.volscard figure img {
		width: 100%;
		max-width: 601px;
		height: auto;
	}
	
	.volscard figure a {
		display: inline-block;
		text-align: center;
		padding: 10px;
		border: 1px solid #FF6600;
		background-color: #FFE6BF;
		font-weight: bold;
		text-decoration: none;
		color: #003399;
		font-size: 1em;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		border-radius: 5px;
	}
	
	
	.jhsband-r {
		float: right;
		margin-left: .8em;
		margin-right: .6em;
		margin-bottom: .5em;
	}

	.jhsband-l {
		float: left;
		margin-right: 1em;
		margin-bottom: .5em;
	}


/***  Photos 
************************************************************************************/
	.gameindex,.photoindex,.contestindex {
		display: block;
		float: left;
	}
	
	.gameindex ul,.photoindex ul,.contestindex ul {
		list-style-type: none;
		padding: 0;
		font-size: .8em;
	}
	
	.gameindex li a {
		display: block;
		padding: 6px 0 6px 5px;
		background: #849fcc;
		background: -moz-linear-gradient(top,  #849fcc 0%, #4d6792 100%);
		background: -webkit-linear-gradient(top,  #849fcc 0%,#4d6792 100%);
		background: linear-gradient(to bottom,  #849fcc 0%,#4d6792 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#849fcc', endColorstr='#4d6792',GradientType=0 );
		color: #FFFFFF;
		text-decoration: none;
	}
	
	.gameindex li a:hover,.photoindex li a:hover,.contestindex li a:hover {
		background: #4d6792;
		background: -moz-linear-gradient(top,  #4d6792 0%, #849fcc 100%);
		background: -webkit-linear-gradient(top,  #4d6792 0%,#849fcc 100%);
		background: linear-gradient(to bottom,  #4d6792 0%,#849fcc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d6792', endColorstr='#849fcc',GradientType=0 );
		text-decoration: underline;
	}
	
	.photoindex li a,.contestindex li a {
		display: block;
		padding: 6px;
		background: #849fcc;
		background: -moz-linear-gradient(top,  #849fcc 0%, #4d6792 100%);
		background: -webkit-linear-gradient(top,  #849fcc 0%,#4d6792 100%);
		background: linear-gradient(to bottom,  #849fcc 0%,#4d6792 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#849fcc', endColorstr='#4d6792',GradientType=0 );
		color: #FFFFFF;
		text-decoration: none;
	}
	
	.photos {
		float: left;
		margin-left: 1em;
		width: 65%;
	}

	.playoffs-text {
		text-align: center;
		font-size: .7em;
		font-weight: bold;
		padding-top: .5em;
		padding-bottom: .5em;
	}







/***  INFO
******************************************************************/
	.fundraisertext {
		padding-left: 2em;
	}


/***  Guestbook
******************************************************************/
	.guestbook-header {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	
	.guestbook-header li:first-child {
		/*padding: 1em;*/
		padding: .5em;
		display: inline-block;
		flex-grow: 1;
	}
	
	.guestbook-header .links {
		display: inline-block;
		flex-grow: .05;
	}
	
	.guestbook-header li:last-child {
		padding: .5em;
	}
	
	.guestbook-header li:first-child span {
		display: inline-block;
		padding: .5em .5em .5em 0;
		font-weight: bold;
	}

	.non-working {
		text-decoration: none !important;
		color: #333333 !important;
	}
	
	.non-working:hover {
		background: transparent !important;
	}

	.archivelist {
		display: block;
	}
	
	.archivelist ul {
		column-count: auto;
	}
	

/***  Calendar Styles 
************************************************************************************/
	#calendar .content ul {
		column-count: 2;
		width: 50%;
	}
	
	.summer-band-schedule div {
		background: #e5e5e5;
		margin-left: 4em;
	}
	
	.school-year-schedule div {
		background: #FF9900;
		margin-left: 4em;
	}
	
	.summer-band-menu,.school-year-menu,.bandcamp {
		margin-left: 3em;
		margin-right: 3em;
	}
	
	.bandcamp img {
		display: block;
		margin: 0 auto;
	}
	
	.calendar-notes {
		margin-left: 3em;
		margin-right: 3em;
	}
	
	.calendar-table-head {
		width: 100%;
		background: #FF9900;
	}
	
	.calendar-links ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display:flex;
		justify-content: space-between;
	}
	
	.calendar-links li {
		display: inline-block;
	}
	
	.calendar-links a {
		display: block;
		font-size: 1em;
		padding: 5px 10px;
	}
	
	.calendar-table {
		border-collapse: collapse;
	}
	
	.calendar-table tr {
		display: table-row;
	}

	
	.calendar-table td, 
	.calendar-table th {
		display: table-cell;
	}
	
	.calendar-table td {
		width: 100px;
		height: 100px;
    	vertical-align: top;
		border: 1px solid #FF9900;
		padding: 2px;
		font-size: .7em;
	}

	
	.calendar-table td:nth-child(even) {
		background: none;
	}

/***  End Calendar Styles 
************************************************************************************/
	
	
	
	.director-bio {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		margin-bottom: 1em;
		margin-top: 1em;
		margin-left: 1em;
	}
	
	.director-bio figcaption {
		margin-left: 1.5em;
	}
	
	.director-bio figcaption p:first-child {
		text-align: left;
		font-weight: bold;
		font-size: 1.2em;
		margin-top:0;
	}
	
	.director-bio figcaption li {
		text-align: left;
	}

	#bandcouncil h3 {
		text-align: left;
	}
	
	.bbofficers-table td {
		padding: 4px;
		vertical-align: top;
		display: table-cell;
	}
	
	.bbofficers-table tr:nth-child(even) {
		background: none;
	}
	
	.bbofficers-table tr {
		display: table-row;
	}
	
	
	#band-hierarchy .hierarchy {
		column-count: 2
	}

	.contactinfo {
		column-count: 2;
		margin: 0 2em;
	}

	.stinfo {
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}








	
	footer aside {
		display: flex;
		justify-content: space-evenly;
		align-items: stretch;
		margin-top: 1em;
	}
	
	footer aside .disclaimer {
		text-align: center;
		flex-basis: 60%;
	}
	
	footer aside .disclaimer:first-child p {
		margin-top: 0;
	}

}