html
{
	padding: 0;
	margin: 0;	
}

html body
{
	padding: 235px 0 0 0;
	background-image: url( ../graphics/frontpage/header-bg.jpg );
	background-repeat: repeat-x;
	background-position: left top;
	background-color: #ECEDEE;
}

#header-image
{
	background-image: url( ../graphics/frontpage/header-image.jpg );
	background-repeat: no-repeat;
	background-position: center top;
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 269px;
}

#header-image *
{
	display: none;
}

#page 
{
	width: 820px;
	margin: -34px auto 0;
}

#page div.column3
{
	width: 33%;	
	float: left;
}

div.panelContainer
{
	/* for old panels, we keep the width setting */
	background-image: url( ../graphics/frontpage/panel-top.gif );
	width: 260px;
	padding: 7px 0 0 0;
	background-repeat: no-repeat;
	background-position: center top;
	margin-bottom: 20px;
}

div.column200 div.panelContainer
{
	width: 200px;
	background-image: url( ../graphics/frontpage/panel-top200.gif );
}

div.column600 div.panelContainer
{
	width: 600px;
	background-image: url( ../graphics/frontpage/panel-top600.gif ); 	
}

div.column290 div.panelContainer
{
	width: 290px;
	background-image: url( ../graphics/frontpage/panel-top290.gif );	
}

div.column295 div.panelContainer
{
	width: 295px;
	background-image: url( ../graphics/frontpage/panel-top295.gif );	
}

div.panelBody
{
	/* width of a panelBody should be width of the panel container - 17 - 10 (padding) */
	width: 233px;
	background-image: url( ../graphics/frontpage/panel-background.gif );
	padding: 10px 10px 10px 17px;
	background-repeat: repeat-y;
	background-position: center top;
	font-size: 12px;
}

div.column200 div.panelBody
{
	width: 173px; /* 200 - 17 - 10 */
	background-image: url( ../graphics/frontpage/panel-background200.gif );
}

/* the 600 rule comes before the 29x rules */
div.column600 div.panelBody
{
	width: 573px; /* 600 - 17 - 10 */
	background-image: url( ../graphics/frontpage/panel-background600.gif );	
}

div.column290 div.panelBody
{
	width: 263px; /* 290 - 17 - 10 */
	background-image: url( ../graphics/frontpage/panel-background290.gif );		
}

div.column295 div.panelBody
{
	width: 268px; /* 295 - 17 - 10 */
	background-image: url( ../graphics/frontpage/panel-background295.gif );
}

div.panelFooter
{
	width: 260px;
	background-image: url( ../graphics/frontpage/panel-bottom.gif );
	height: 7px;
	padding: 0px;
	background-repeat: no-repeat;
	background-position: center top;
	overflow: hidden;
}

div.column200 div.panelFooter
{
	width: 200px;
	background-image: url( ../graphics/frontpage/panel-bottom200.gif );	
}

div.column600 div.panelFooter
{
	width: 600px;
	background-image: url( ../graphics/frontpage/panel-bottom600.gif );	
}

div.column290 div.panelFooter
{
	width: 290px;
	background-image: url( ../graphics/frontpage/panel-bottom290.gif );	
}

div.column295 div.panelFooter
{
	width: 295px;
	background-image: url( ../graphics/frontpage/panel-bottom295.gif );	
}


#page div.columnMargin
{
	margin-right: 20px;	
}

#page div.column200, #page div.column290,
#page div.column295, #page div.column600
{
	float: left;
}

#page div.column200
{
	width: 200px;
}

#page div.column290
{
	width: 290px;
}

#page div.column295
{
	width: 295px;
}

#page div.column600
{
	width: 600px;
}



.clear
{
	clear: both;	
}

div.panelBody
{
	font-size: 12px;
}

div.panelBody h1
{
	font-size: 18px;
	color: #6c7a40;
}

div.panelBody h3
{
	margin-top: 0px;	
}


/**  Footer stuff copied just now */
#footerbar
{
	clear: both;
	width: 100%;
	font-size: 70%;
	color: #666;	
}

#footer 
{
	width: 760px;
	text-align: center;
	margin: 0 auto;
	padding: 9px 0px 11px 0px;
}

#footer h3
{
	color: #62745B;
	border: 0;
	margin: 0 0 0.25em 0;
	padding: 0;
}

#footer p.copy 
{ 
	clear: both;
	margin: 0; 
	padding: 0; 
	color: #666;
}

#footer a:link, #footer a:visited, #footer a:active 
{
	font-size: 95%;
	text-decoration: none;
	border-bottom-width: 0;
	font-weight: normal; 
	color: #666;
}

#footer a:hover 
{
	text-decoration: none;
	border-bottom: 1px solid #666;
}


/* for the menu */
#topContainer
{
	top: 0px;
	left: 0px;
	z-index: 10;
	position: absolute;
	width: 100%;
	color: rgb(126, 128, 123);
	padding-top: 8px;
}

#menubar
{
	font-size: 12px;
	width: 800px;
	margin: 0 auto;
}

#menubar div.searchBox
{
	font-size: 12px;
	position: relative;
	top: 1px;
	float: right;
}

div.searchBox input
{
	height: 14px;
}
div.searchBox input.image
{	
	height: 20px;
	vertical-align:	bottom;
}

#userstatus
{
	clear: both;
	color: #882200; 
	font-size: smaller; 
	text-align: right;
	zoom: 1;
}

#frontpageCurriculum ul.treeview
{
	padding-left: 0px;
	margin-left: 0px;
	color: #6E6E6E;
}

#frontpageCurriculum a:link, #frontpageCurriculum a:visited, 
#frontpageCurriculum a:focus, #frontpageCurriculum a:hover
{
	color: #6E6E6E;
	border-bottom-width: 0;
}

#frontpageCurriculum a:hover
{
	border-bottom: 1px solid #6E6E6E;
}


/* ----------- Global navigation menus ----------- */

#fpglobalnav
{
	margin-left:-30px;
}

#fpglobalnav li
{
	behavior: expression(
		this.onmouseover=new Function("this.className+=' hover'"),
		this.onmouseout=new Function("this.className=this.className.replace(' hover','')"),
		this.style.behavior=null
	);
}

#fpglobalnav ul
{
	list-style-type: none;
	list-style: none; /* necessary? */
	/*margin: 0;*/
	padding: 0;	
	
	margin: 0 auto;
}

#fpglobalnav ul li
{
	display: inline;
}

#fpglobalnav ul li ul li
{
	margin: 0;
	padding: 0;
}

#fpglobalnav ul a
{
        color: #664433;
        text-decoration: none;
        display: block;
        border: 0;
        padding: 5px 15px;
}

#fpglobalnav ul li
{
	position: relative;
	float: left;
	margin: 0;
	border-right: 1px solid #DDDDDD;
}


/* Sub-level */
#fpglobalnav ul li ul 
{
	margin: 0 0 0 1px;
	padding: 0;
	position: absolute;
	left: -2px; /* Position relative to parent minus borders */
	top: 100%;
	width: 20em;
	
	border-style: none solid solid solid;
	border-width: 1px;
	border-color: #C9C9C8;
	
	background-color: white;
	background-image: url(../graphics/frontpage/menubar.jpg);
	background-repeat: no-repeat;
}

/* link in global nav */
#fpglobalnav a:link, #fpglobalnav a:visited, #fpglobalnav a:focus 
{
	color: rgb(126, 128, 123);
}

#fpglobalnav a:hover
{
	color: #331100;
	text-decoration: none;
	border: 0;
}

#fpglobalnav.hover, #fpglobalnav li:hover
{
	background-color: #EDEEF0;
}

/* first level drop down */

#fpglobalnav ul li ul li a 
{
	width: 18em; /* Must match width of pop-up, and exclude padding! */
	padding: 0.8em 1em 1em 1em;
}

/* second level drop out */
#fpglobalnav ul li ul li ul 
{
	margin: 0;
	padding: 0;
	top: 0.6em;
	left: 19em;
	border: 1px solid #C9C9C8;
}

/* Pop-up behaviour, hidden by default, show on rollover, each level goes above the previous */
/* draw each level on top of the previous */
#fpglobalnav ul li:hover { z-index: 50; }
#fpglobalnav ul li.hover { z-index: 50; }
#fpglobalnav ul li ul li:hover { z-index: 100; }
#fpglobalnav ul li ul li.hover { z-index: 100; }

/* hide the pop-ups by default */
#fpglobalnav ul li ul { display: none; }
#fpglobalnav ul li ul li ul { display: none; }
#fpglobalnav ul li:hover ul li ul { display: none; }
#fpglobalnav ul li.hover ul li ul { display: none; }

/* Show the pop-ups on rollover */
#fpglobalnav li:hover ul { display: block; }
#fpglobalnav li.hover ul { display: block; }
#fpglobalnav ul li:hover ul li:hover ul { display:block; }
#fpglobalnav ul li.hover ul li.hover ul { display:block; }