/* This is what makes that nifty gradient in the background. It also controls the font color and default font face */
body {
	background-image: url(images/background.png);
	background-repeat: repeat-x;
	color:black;
	background-color:black;
	font-family: "Myriad Pro", arial, san-serif;
	}

/* This makes the main content box size, centers it, and puts that white filmy thing in the back */
#pagecontainer { 
	width:790px;
	margin: auto;
	border: solid 1px red;
	margin-top:20px;
	padding:5px;
	background-image: url(images/contentback1.png);
	background-repeat:repeat-x;
	background-color:#333333;
	}

/* This makes the images load faster...supposedly */
div.preloader {
	background:url(images/contentback.png) no-repeat;
	background:url(images/background.png) no-repeat;
	background:url(images/texture.png) no-repeat;
	background:url(images/logo.png) no-repeat;
	background:url(images/hornet.gif) no-repeat;
	background:url(images/parentbutton.png) no-repeat;
	background:url(images/homebutton.png) no-repeat;
	background:url(images/staffbutton.png) no-repeat;
	background:url(images/calendarbutton.png) no-repeat;
	background:url(images/psbutton.png) no-repeat;
	background:url(images/bookbutton.png) no-repeat;
	visibility:hidden:
	}

/* This is what contains the OHS logo and that hornet image */
#header {
	width:770px;
	height:85px;
	margin:auto;
	}

/* These are the two images in the header */
.logo {
	position:relative;
	top:7px;
	bottom:7px;
	left:50px;
	height:70px;
	width:515px;
	float:left;
	}

.hornet {
	position:relative;
	top:3px;
	bottom:3px;
	right:70px;
	height:79px;
	width:101px;
	float:right;
	}

/* Navigation */
#nav {
	width:770px;
	height:35px;
	margin:auto;
	clear:both;
	text-align:center;
	}

/* Not sure exactly how this worked, but don't move it. Bad things will happen */
 #container {
	overflow: hidden;
	}

/* This holds together the update box and the content box...Um, you probably shouldn't move it */
#upcontain {
	width:770px;
	margin:auto;
	}

/* Update Box */
#updates {
	width:200px;
	background-color:white;
	border:white solid;
	float:left;
	position: relative;
	background-image: url(images/texture.png);
	top:10px;
	padding-bottom:20px;
	}

/* Main Content Box */
#content {
	width:552px;
	background-color:white;
	float:left;
	position: relative; 
	top:10px;
	left:10px;
	max-width: 580px;
	background-image: url(images/texture.png);
	}

/* This creates that tiny gap between the words and the sides of the box */
.textpad {
	padding: 5px;
	}

.textbook {
	padding:5px;
	font-family: "Times New Roman", serif;
	}

/* This keeps the content and update boxes from doing stupid things and holds the emergency links */
#footer {
	width:760px;
	height:40px;
	background-color:white;
	margin:auto;
	clear:both;
	position: relative;
	top:10px;
	margin-bottom: 20px;
	margin-top:10px;
	background-image: url(images/texture.png);
	text-align:center;
	font-size:small;
	padding:5px;
	}

/* 
If you came in here wondering why the heck the links are the default color, it's to avoid confusion. Trust me, I can see it coming and I want to avoid that scenario. 
*/

.tablecenter {
	text-align:center;
	}