* {
  margin: 0;
  padding: 0;
  /*universal margin and padding removal, over write when necessary*/
}

div{
	height: auto;
}

#menubox{
	padding-bottom: 1%;
	background-color: rgb(127,127,127);
	margin-bottom: 1px;
	height: 25px;
	width: 100%;
	float: left;
	clear: right;
}

.menuitem{
	background-color: maroon;
	height: 25px;
	width: 14%;
	margin-left: 1px;
	float: left;
	margin-bottom: 3px;
	margin-top: 4px;
	text-align: center;
	border-radius: 15px;
	/*do not alter margins, they are fine as is.*/
}

a:link{
	color: white;
}

a:visited{
	color: white;
}

a:hover{
    color: red;
}
/*keep this at the bottom to keep hover colour*/

#textcontainer0{
	background-color: black;
	width: 100%;
	height: auto;
}

#textcontainer1{
	background-color: black;
	width: 100%;
	height: 1500px;
}

.textbox{
	background-color: rgb(127,127,127);
	border-radius: 15px;
	float: left; 
	width: 30%;
	padding: 1%;
	clear: both;
	margin-bottom: 1px;
}

.imagebox{
	float: right;
}

.textbox1{
	background-color: rgb(127,127,127);
	border-radius: 15px;
	float: left; 
	width: 75%;
	padding-left: 2.5%;
	padding-right: 2.5%;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-left: 10%;
	clear: both;
	margin-bottom: 1px;
	text-align: center;
	/*This is for pages that dont have images in the container but in the specific div*/
}