/*
NIGHT THEME
"#F5D14E" : "#F5D14E" ,
"#B3A8A8" : "#B3A8A8",#BDB3B3
"#624884": "#624884",
"#312442" : "#312442",
"#B5A3CC" : "#B5A3CC",
"black": "black",
"#D3E8E8": "#D3E8E8",
"grey" : "grey",
"#312442" : "#312442",
"assets/logos/logo_black_on_clear.png" : "assets/logo_black_on_clear.png",
"white" : "white"

DAY THEME
"#F5D14E" : "#321F32" ,
"#B3A8A8" : "#D8F3FD",
"#624884": "#FBE289",
"#312442" : "#6E6235",
"#B5A3CC" : "#EBCC5C",
"black": "black",
"#D3E8E8": "#D3E8E8",
"grey" : "grey",
"#312442" : "#FBE289",
"assets/logos/logo_black_on_clear.png" : "assets/logo_white_on_clear.png",
"white" : "black"
*/

:root{
	--logo-background: #F5D14E;
	--body-background: #B3A8A8;
	--local-background: #624884;
	--nav-background: #312442;
	--bat-background: #B5A3CC;
	--bat-bar: black;
	--content-background: #D3E8E8;
	--data-background: grey;
	--header-background: #312442;
	--local-text: white;
}

/*this allows on-page jumps to avoid hiding under the header*/
html {
  scroll-padding-top: calc(10vw + 22px);
}

body{
	background-color: var(--body-background);
	margin: 0;
	font-family: Helvetica, sans-serif;
}

#headerContainer{
	position: fixed;
	top:  0;
	width: 100%;
	z-index: 1;
}

#logoContainer{
	position: relative;
	top:  calc(100vw * -.04);
	left: -4%;
	width: 14%;
	height: calc(100vw * .14);
	z-index: 1;
    border-radius: 50%;
    background-color: var(--logo-background);
}

#logoContainer img{
	position: absolute;
	top:  28%;
	height: auto;
	left: 29%;
	z-index: 1;
	width: 60%;
}

#header-local {
	position: absolute;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	height: calc(100vw * .030);
	padding: 5px;
	left: 15%;
	top: 10px;
	width: 85%;
	background-color: var(--local-background);
	display: flex;
	align-items: center;
  	justify-content: space-evenly;
  	color:  var(--local-text);
}

#header-background {
	position: absolute;
	background-color: var(--body-background); /*make same as body*/
	/*the height of this should be the same as header-local + 22px*/
	height: calc((100vw * .030) + 22px);
	top: 0px;
	width: 100%;
}

#header-nav {
	position: absolute;
	border-style: solid;
	border-width: 1px;
	background: var(--nav-background);
	height: calc(100vw * .04);
	top:  calc(100vw * .035);
	/*left: calc(100vw * .09);*/ /*this is for square version*/
	left: calc(100vw * .079); /* this is for round version*/
	padding: 5px;
	width: 85%;
	display: flex;
	align-items: center;
  	justify-content: space-evenly;
}

#header-bat {
	position: absolute;
	border-style: solid;
	border-width: 1px;
	background-color: var(--bat-background);
	height: calc(100vw * .027);
	padding: 5px;
	width: 86%;
	top:  calc((100vw * .075) + 2px);
	left: 5%;
	vertical-align: text-top;
	padding: 0;
}

#batPercent {
	position: absolute;
	left: min(47.0%,calc(100vw - 29em));
	bottom: 5%;
}

#batBar{
	width: 47.0%; 
	float: left;
	opacity: 25%;
	height: 100%;
	background-color: var(--bat-bar);
}

/*.statName{
	position: absolute;
	bottom: 5%;
	padding-left: 5px;
}*/

.navLink {
	top:  50%;
	float: left;
	font-size: 30px;
	font-weight: bold;
}

.navLink a {
	text-decoration: none;
	color: white;
}

#onPage a{
	text-decoration: underline;
}

.serverLocation{
	float: left;
/*	width: 33%;
*/	top:  50%;
}

#menu{
	display: none;
}

#footer {
	position: relative;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 20px;
	bottom: 0;
	width: 100%;
	background-color: var(--local-background);
	color:  var(--local-text);
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: space-evenly;
	margin-bottom: calc(244.73200000000003px + 50px);
}

#footer-content{
	width: 90%;
}

#footer a {
/*	text-decoration: none;
*/	/*color: var(--local-text);*/
}

#fDataContainer{
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: row;
}

.fDataBox{
	width: 25%;
	padding-left: 10px;
	padding-right: 10px;
	justify-content: center;
}


#footer-nav {
	display: none;
}


.hideMinimize{
	display: inline;
}

.showMinimize{
	display: none;
}

.hideMedium{
	display: inline;
}

.showSmall{
	display: none;
}

/****CONTENT********/


#content{
	position: absolute;
	opacity: 85%;
	width: 100%;
	top: calc(100vw * .15);
	display: flex;
	flex-direction: column;
  	justify-content: center;
  	align-items: center;
}

.profileContainer{
	width: 75%;
	display: flex;
	flex-flow: row wrap;
	margin: 0;
/*	justify-content: center;*/
/*	align-content: center;*/
}

.profile{
	width: 29%;
	margin: 1%;
	padding: 5px;
	background-color: var(--content-background);
	border-style: solid;
	border-width: 1px;
}

.profile img {
	float: right;
	max-width: 50%;
}

/*EVENT STUFF TO BE CHANGED TO CONTENTLIST*/
#eventContainer{
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}

/* is this necessary???*/
#contentItemContainer{
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}

.contentItem{	
	margin-bottom: 50px;
	padding: 10px;
	width: 75%;	
	background-color: var(--content-background);
}

.contentItem h2 {
	border-bottom: solid;
	border-width: 1px;
}

.contentItem img {
	float: right;
	max-width: 50%;
}

.tableOfContents {
	padding: 5px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.tableOfContents a {
	margin: 1%;
}

/*limit video width to parent container*/
video {
	max-width: 100%; 
   	background: transparent url('assets/logo_whitebackground.jpg') 50% 50% / cover no-repeat ;
}


/****HISTORY BAR****/

#graphContainer{
	position: fixed;
	width: 100%;
	bottom: 0;
	display: flex;
	flex-direction: column;
}

/*container for entire bar graph*/
#historyBar {
	position: relative;
	width: 100%;
	bottom: 0;
/*	height: 500px;*/
	z-index: -1;
}

/*container for individual bars*/
.hbarContainer{
	position: relative;
	height: 600px;
	float: left;
	width: 4.167%; /*this sets with of individual bars. must be changed when the number of bars changes*/
}

/*data bar*/
.hbar{
	width: 100%;
	opacity: 30%;
	background: var(--data-background);
	bottom: 0;
	position: absolute;
	border-top: 1px solid;
	border-left: 1px solid;
	border-right: 1px solid;
	box-sizing: border-box;
}

.hbar span{
	position: relative;
	font-size: 16px;
	top:  -18px;
}

#hbar1 {
	height: 0.0%;
}

#hbar2 {
	height: 0.0%;
}

#hbar3 {
	height: 0.0%;
}

#hbar4 {
	height: 0.21066666666666672%;
}

#hbar5 {
	height: 3.624666666666666%;
}

#hbar6 {
	height: 11.950666666666665%;
}

#hbar7 {
	height: 40.78866666666667%;
}

#hbar8 {
	height: 23.66533333333334%;
}

#hbar9 {
	height: 15.884%;
}

#hbar10 {
	height: 13.816666666666666%;
}

#hbar11 {
	height: 11.783333333333331%;
}

#hbar12 {
	height: 9.307333333333332%;
}

#hbar13 {
	height: 6.522000000000001%;
}

#hbar14 {
	height: 2.5706666666666664%;
}

#hbar15 {
	height: 0.268%;
}

#hbar16 {
	height: 0.0%;
}

#hbar17 {
	height: 0.0%;
}

#hbar18 {
	height: 0.0%;
}

#hbar19 {
	height: 0.0%;
}

#hbar20 {
	height: 0.0%;
}

#hbar21 {
	height: 0.0%;
}

#hbar22 {
	height: 0.0%;
}

#hbar23 {
	height: 0.0%;
}

#hbar24 {
	height: 0.0%;
}

#time-container{
	position: relative;
	display: flex;
	width: 100%;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: var(--local-background);
}

#twentyfour{
	float: left;
	text-align: left;
	width: 31%;
	padding-left: 2%;
}

#now {
	float: right;
	text-align: right;
	width: 31%;
	padding-right: 2%;
}

#twelve{
	float: left;
	text-align: center;
	width: 33%;
}


@media (max-width: 1300px) {

	#header-local {
		position: absolute;
		border-style: solid;
		border-width: 1px;
		height: calc(100vw * .028);
		padding: 1px;
		left: 12%;
		top: 9px;
		width: 88%;
		background-color: var(--local-background);
		display: flex;
		align-items: center;
	  	justify-content: space-evenly;
	}

	#header-nav {
		position: absolute;
		border-style: solid;
		border-width: 1px;
		background: var(--nav-background);
		height: calc(100vw * .04);
		top:  calc(100vw * .035);
		left: calc(100vw * .079);
		padding-top: 1px;
		padding-left: 5px;
		padding-right: 2px;
		width: 88%;
		display: flex;
		align-items: center;
	  	justify-content: space-evenly;
	}

	.hideMedium{
		display: none;
	}
}

@media (max-width: 1000px) {
	
	html {
	  scroll-padding-top: calc(20vw + 22px);
	}

	body{
		background-color: var(--body-background);
	}

	#headerContainer{
		background-color: var(--header-background);
		height: calc(100vw * .235);
		padding-top: 0px;
		padding-bottom: 0px;
	}

	#logoContainer{
		position: relative;
		top:  calc(100vw * -.09);/*version I sent Anne was 5% and 15% */
		left: -9%;
		width: 28%;
		height: calc(100vw * .28);
		z-index: 1;
	    border-radius: 50%;
	    background-color: var(--logo-background)/*darkorange*/;
	}

	#logoContainer img{
		position: absolute;
		top:  28%;
		height: auto;
		left: 31%;
		z-index: 1;
		width: 58%;
	}

	#header-background {
		display: none;
	}

	#header-nav{
		display: none;
	}

	#header-bat{
		display: none;
	}

	#header-local{
		border-style: none;
		border-width: 0px;
		/*max-height: 200px;
		min-height: 100px;*/
		height: calc(100vw * .2);
		padding-top: 1px;
		padding-bottom: 0px;
		padding-left: 3%;
		padding-right: 0px;
		top:  calc(100vw * .0/*25*/);
		left: 17%;
		width: calc(80% - 4em);
		background-color: transparent;
		color: var(--local-text);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	  justify-content: space-evenly;
	}

	#menu{
		position: absolute;
		top:  calc(100vw * .025);
		right: 2.5%;
		border-style: solid;
		border-width: 1px;
		border-color: var(--local-text);
		padding: 1px;
		color: var(--local-text);
		display: block;
	}

	#menu a {
		text-decoration: none;
		color: var(--local-text);
	}

	#footer {
		background-color: var(--header-background);
		color: var(--local-text);
	}

	#footer-nav {
		position: relative;
		padding: 5px;
		width: 85%;
		display: flex;
		align-items: center;
		align-content: center;
	  	justify-content: space-evenly;
		flex-direction: column;
	}

	#footer a {
		color: var(--local-text);
	}

	#fDataContainer{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}

	.fDataBox{
		width: 75%;
		padding-left: 10px;
		padding-right: 10px;
		justify-content: center;
	}

	#content{
		position: absolute;
		opacity: 85%;
		width: 100%;
		top: calc(100vw * .245);
		display: flex;
		flex-direction: column;
	  	justify-content: center;
	  	align-items: center;
	  	align-content: center;
	}

	.profileContainer{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		width: 100%;
	/*	align-content: center;*/
	}

	.profile{
		width: 90%;
		margin: 1%;
		padding: 5px;
		background-color: var(--content-background);
		border-style: solid;
		border-width: 1px;
	}

	.contentItem{
		margin-bottom: calc(100vw * .04);
		margin-top: 1%;
		padding: 5px;
		width: 90%;	
		background-color: var(--content-background);
	}

	.hideMedium{
		display: inline;
	}

	.showSmall{
		display: inline;
	}
}

@media (max-width: 600px) {
	.hideMinimize{
		display: none;
	}

	.showMinimize{
		display: inline;
	}

	.hbar span{
		position: absolute;
		font-size: 16px;
		top:  0px;
		transform-origin: 83% -50%;
	-webkit-transform: rotate(90deg);
	  -moz-transform: rotate(90deg);
	  -o-transform: rotate(90deg);
	  -ms-transform: rotate(90deg);
	  transform: rotate(90deg);
	}

	#footer {
		margin-bottom: calc(244.73200000000003px + 70px);
	}

}