/*main body*/
body{
	background-color: #9877a6;
	padding-left: 5%;
}
/*Tab selecting buttons*/
.SelectorButton{
	background-color: #61486b;
	border-color: #ffffff;
	border-radius: 5pt;
	width: 90%;
}

#logo{
	width: 75px;
}

/*main container used for many purposes*/
.MainContainer{
	background-color: #121212;
	margin-left: 0.5%;
	margin-right: 0.5%;
	padding-left: 0.25%;
	padding-right: 0.25%;
	margin-bottom: 0.25%;
	margin-top: 0.25%;
	padding-top: 0.3%;
	padding-bottom: 0.2%;
	float: left;
	border-radius: 13pt;
	width: 40%;
}
/* this is mostly identicle to the main container although it is slimmer. used for the side tabs*/
.SideTabContainer{
	background-color: #121212;
	margin-left: 12pt;
	margin-right: 12pt;
	padding-left: 0.7%;
	padding-right: 0.7%;
	margin-bottom: 1%;
	margin-top: 1%;
	padding-top: 1%;
	padding-bottom: 1%;
	float: left;
	border-radius: 13pt;
	width: 35%;
}
/*header of a tab*/
.Header{
	background-color: #6078a3;
	border-radius: 25pt;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 9pt;
	padding-right: 9pt;
	text-align: center;
}
/* text within the header */
.HeaderText{
	font-size: 22pt;
	color: #000000;
}
/*general div for anything*/
.GeneralDiv{
	background-color: #ffffff;
	margin-top: 3pt;
	margin-bottom: 3pt;
	border-radius: 3pt;
	padding-left: 0.1%;
	padding-right: 0.1%;
}
/*general tab that floats left*/
.GeneralDivLeft{
	background-color: #ffffff;
	margin-top: 0.4%;
	margin-bottom: 0.4%;
	margin-left: 0.25%;
	margin-right: 0.25%;
	border-radius: 3pt;
	padding-left: 0.1%;
	padding-right: 0.1%;
	float: left;
}
/*basic text*/
.GeneralText{
	font-size: 15pt;
	color: #1e1821;
	overflow-x: wrap;
}
/*container that will go below other containers*/
.UnderContainer{
	clear: left;
	margin-top: 4%;
}

/*invisible left floating container*/
.leftContainer{
	float: left;
}

.Banner{
	height: 50pt;
	width: 80%;
	margin-right: 5%;
	background-color: #999999;
	border-radius: 5pt;
	clear: left;
}
/* contains the items within the tab and handles animations*/
.Tab{
	display: none;
	animation-name: tabSwitch;
	animation-duration: 0.8s;
	animation-timing-function: ease;
}
/*Tab switching animation - opacity interpolation*/
@keyframes tabSwitch{
	from {opacity: 0%;}
	to {opacity: 100%;}
}

.displayImage{
	width: 80%;
	height: 80%;
}