body{
 	background-color: #00326C; 
	 border-style:none; 
	 font-family: Arial, sans-serif; 
	 font-size:12px;	
	 text-align:center/*center page in ie*/
}
img{
	display:block;/*Fixes most padding issues on images for ie*/
} 
div.site{
	width:800px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/*body stuff*/
div.body{
	width:800px;
	height: auto;
	float: left; /*Will bring background down to match longest of bodyleft and bodyright*/
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background: #CCCCCC;
}
div.bodyleft{
	float:left;
	width:212px;
}
div.bodyright{
	float:left;
	width:588px;
}
/*Widget / Modules*/
div.widtop{
	background : url(img/widtop.png) no-repeat;
	height:35px;
	width: 212px;
	top:38px
}
div.widTitleText{
	padding-left: 15px;
	padding-top: 5px;
	padding-right: 10px;
	color: #FFFFFF;
	text-align: left;
	font-size:18px;
}
div.widmiddle{
	background : url(img/widmiddle.png) repeat-y;
	width: 212px;
	padding-bottom: 20px;
}
div.widmiddletext{
	text-align:left;
	padding-left: 5px;
	padding-right: 5px;
}
div.widbottom{
	background : url(img/widbottom.png) no-repeat;
	height:7px;
	width: 212px;
}
div.modtop{
	background : url(img/modtop.png) no-repeat;
	height:35px;
	width: 588px;
	top:38px
}
div.modTitleText{
	padding-left: 15px;
	padding-top: 5px;
	padding-right: 20px;
	color: #FFFFFF;
	text-align: left;
	font-size:18px;
}
div.modmiddle{
	background : url(img/modmiddle.png) repeat-y;
	width: 588px;
	/*These fill in the gaps on compliant browsers like firefox/chrome*/
	padding-bottom: 20px;
	padding-top: 1px;
}
div.modMiddleText{
	padding-left:10px;
	padding-right:10px;
	text-align:left;
}
div.modbottom{
	background : url(img/modbottom.png) no-repeat;
	height:7px;
	width: 588px;
}
/*Footer Stuff*/
div.footer{
	background : url(img/footer.png) no-repeat;
	width:800px;
	height:45px;
	float: left;/*put footer below the other divs, not enough room for 800px at left due to site div, so it goes down*/
}
/*to fix that issue in IE with the realignment (during lecture),
I simply made the first (left aligned) p tag an absolute positon
and float left (so it would be on the left of the outer footer div).

The align right div didn't need absolute positioning, IE8 assumed it was
relative to the left aligned footer and filled in the blanks on its own.
*/
p.footertext{
	text-align:left;
	float:left;
	padding-left:0px;
	padding-right: 5px;
	padding-top: 10px;
	padding-bottom:5px;
	position:absolute;
	
}
p.alignright{
	text-align:right;
	padding-right: 5px;
	padding-top: 10px;
	padding-bottom:5px;
}
/*Navigation Stuff*/
div.navigationbar{
	height:38px;/*fixes IE showing entire sprite!*/
	overflow: hidden;
	/*hides the other 38px, IE shows them, FF hides them but all elements show 38px lower than they should*/
}
#znav {
	background:url("img/sprite.png") 0 0 no-repeat;
	width:800px;
	height:38px;/*Half the height of the actual sprite image*/
	margin:0;
	padding:0;
	position:relative;
}
#znav li span {
	display:none;/*Hide the text from displaying, but make it available for google and other Search engines (SEO)*/
}
#znav li {
	float:left;
	list-style:none;
	position:relative;
}
#znav li,#znav a {
	height:38px;
	display:block;
	margin:0;
	padding:0;
}
li#znav1 {
	margin-bottom:0px;
	width: 64px;
}
li#znav2{
	margin-bottom:0px;
	width:125px;
}
li#znav3{
	margin-bottom:0px;
	width:123px;
}
/*Base Case for free space at end*/
li#znav4 {
	margin-bottom:0px;
	width:508px;/*rest of the width pixels unoccupied by cases above*/
}
#znav1 a:hover {
	background:url("img/sprite.png") -0px -38px no-repeat;
	/*(width, height) pixels down from top right corner of image*/
}
#znav2 a:hover {
	background:url("img/sprite.png") -64px -38px no-repeat;
}
#znav3 a:hover {
	background:url("img/sprite.png") -189px -38px no-repeat;
}
/*znav3 doesn't require a hover, showing the pixel start position for width*/
#znav4 a:hover {
	background:url("img/sprite.png") -312px -38px no-repeat;
}

/*Resize JS Page specific:*/
div.zcenter {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	vertical-align:top;
}