/* first, remove all padding, borders, margins */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6
form, fieldset, a, div, img{margin: 0;padding: 0; border: 0;}

/* define background color */
body{
	background-color: #fcfc9c;
	text-align:center; /* centers page for IE5 */
	background-image:url(images/margintile.jpg);
	background-repeat: repeat-x;
	}

/* set width for wrapper */
#wrapper{width: 750px;
text-align:left; /* counteracts body center align so works in other browsers than IE5 ok */
margin-left: auto;
	 margin-right: auto;
}

/* set width, height and bg image for header, and dont repeat image */
#header{
	width: 750px;
	height: 194px;
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	position: relative;
	text-align:center;
	}
	
/* set top menu bar to white text, set absolute position on a precise pixel point */
#navbar{color: #ffffff; position: absolute; left: 20px; bottom: 8px;}

/* settings for links in the menu bar */
#navbar a{color: #ffffff; font-weight: bold;  text-decoration:none;
font-size: 120%;}

/* use inline display to present list horizontally. no bullets will appear for list as padding and margins set to zero, but add small padding to space out */
#navbar li{display: inline; padding: 0 40px 0 0;}

/* set main page width and put back image to tile downwards whatever length of text*/
#content{
	width: 750px;
	background-image:url(images/backtile.jpg);
	}

/* use float to arrange two columns - width+ px padding for left+right must add up to content width
- px from top, from left, from bottom, from right
*/
#left{
	width: 500px;
	float: left;
	padding: 0px 0px 0px 15px;
	}
#right{
	width: 180px; 
	float: right;
	padding: 0px 10px 0px 10px;
	}

/* use clearing div to push footer down after columns */
#clear{clear: both;}

/* home page image center aligned */
#homepageimage{
	width: 400px;
	height: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
	}

/* departments menu */
#deptmenu{
	width: 480px;
	height: 40px;
	color: #ffffff;
	background-color: #35919c;
	padding: 2px 10px 0px 10px;
	text-align:center
	}
	
/* settings for link in the depts menu */
#deptmenu a{color: #ffffff; font-weight: bold;  text-decoration:none; font-size: 120%}

#deptmenubar li{display: inline; padding: 0 30px 0 0}

/* departments page title */
#depttitle{
	text-align:center
	}

/* footer width, height, bg image, padding, float */
#footer{
	width: 730px;
	height: 20px;
	background-image:url(images/footer.jpg);
	background-repeat: no-repeat;
	color: #ffffff;
	padding: 2px 10px 0px 10px;
	text-align:center;
	}

/* dont need clearing div as its last item on page */

/* set fonts and sizes */
html{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: #000000;
}
h1{
	font-size: 130%;
	color: #C32C2C; padding: 10px 0 10px 0;
	text-align:center;
	}
h2{
	font-size: 120%;
	color: #000000; padding: 10px 0 10px 0;
}
p{padding: 0 0 10px 0; line-height: 150%;}
p.intro{font-size: 110%; color: #003366;
text-align:center;}
p.menuend{font-size: 110%; color: #003366;
text-align:center; padding: 10px 0px 0px 0px;}

/* background image float right */
img.floatRight { float: right;
margin: 4px; }

/* cancel out a name color - do same as normal p text */
a[name]:hover {color:#000000}

/* set colors for normal links */
/* correct order is link, visited, hover then active */
a:link {color: #0000ff;
text-decoration: underline;}
a:visited {
text-decoration: underline;
color: #800080;}
a:hover {color: #5050d0;
text-decoration: underline;}
a:active {
color: #0000ff;
text-decoration: underline;}