body
{
	border-style: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	margin: 0;
	padding: 0;
	background-image: url('Gradient.png' ); 
	background-repeat: repeat-x;
}

/* Set the limits between which the content will be displayed */
#Wrapper
{
	width: 1100px;
	margin: 0 auto;
	padding: 0;
	background-color: #FFFFFF;
}

/* Main Logo Image at Top of Page */

#Logo
{
	height: 85px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background: url(HSC_Head.png) no-repeat center top;
	background-color: #0000FF;
}

/* Main Content panel below menus and on left */

#LeftPanel
{
	margin: 5px 0px 0px 0px;
	float: left;
	width: 640px;
	padding: 5px;
	background-color: #FFFFFF;
}

/* Right panel that contains photograph */

#RightPanel
{
	float: right;
	width: 440px;
	margin: 25px 5px 5px 5px;
	padding: 5;
	background-color: #FFFFFF;
}

/* Full width panel, for pages that are not split into a content and photo panel*/

#FullWidthPanel
{
	border-style: solid none none none;
	border-width: 5px;
	border-color: #FFFFFF;
	float: left;
	width: 1100px;
	margin: 0px 0px 0px 0px;
	padding: 5;
	background-color: #FFFFFF;
}

/* Footer strip on bottom of page (clear float so that it goes below content and right panels)*/

#Footer
{
	padding: 5px;
	font-size: 1em;
	text-align: center;
	background-color: #A0A0FF;
	font-family: Arial, Helvetica, sans-serif;
	color: #444444;
	clear: both;
}

/* Provide padding between elements*/
.Spacer
{
	float: left;
	position: relative;
	width: 100px;
	height: 50px;
}

.TabLeftPanel
{
	margin: 5px 0px 0px 0px;
	float: left;
	width: 300px;
	padding: 5px;
	background-color: #FFFFFF;
}

/* Right panel that contains photograph */

.TabRightPanel
{
	float: right;
	width: 300px;
	margin: 5px 5px 5px 5px;
	padding: 5;
	background-color: #FFFFFF;
}

#PhotoBox
{
	padding: 3px;
	margin: 0;
	border: 0;
}

#PhotoBox img
{
	border: 1px solid #ccc;
	padding: 3px;
}

#PhotoBox:hover img
{
	border: 3px solid navy;
	padding: 1px;
}

#PhotoBox:hover
{
	color: #6699FF; /* irrelevant definition to overcome IE bug */
}

/* Top Menu Row Elements */

#Menu1
{
	border-style: none none solid none;
	border-width: 2px;
	border-color: #0000FF;
	height: 25px;
	margin: 0 auto;
	padding: 5px 0px 0px 0px;
	background-color: #FFFFFF;
}

#Menu1 ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#Menu1 li
{
	float: left;
	position: relative;
	left: 30px;
}

#Menu1 a
{
	display: block;
	width: 100px;
	height: 20px;
	margin-right: 1px;
	padding: 7px 0px 0px 0px;
	background: url(MenuTab1.png) no-repeat left top;
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000099;
	border: none;
}

#Menu1 a:hover
{
	text-decoration: underline;
	font-style: italic;
	font-weight: bold;
}

#Menu1 .CurrentMenu a:hover
{
	text-decoration: none;
	font-style: normal;
}

#Menu1 .CurrentMenu a
{
	padding-left: 0;
	background-image: url('MenuTab1Current.png' );
	color: #000080;
	font-weight: bold;
}

/* Second Menu Row Elements */

#Menu2
{
    border-width: 2px;
    border-color: #0000FF;
	height: 27px;
	margin: 0 auto;
	padding: 8px 0 0 0;
	clear: left;
	background-image: url( 'GradientMenu2.png' );
	background-repeat: repeat-x;
    border-bottom-style: solid;
}

#Menu2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#Menu2 li
{
	float: left;
	position: relative;
	left: 60px;
}

#Menu2 a
{
	display: block;
	width: 100px;
	height: 20px;
	margin-right: 1px;
	padding: 7px 0px 0px 0px;
	background: url(MenuTab2.png) no-repeat left top;
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000099;
	border: none;
}

#Menu2 a:hover
{
	text-decoration: underline;
	font-style: italic;
	font-weight: bold;
}

#Menu2 .CurrentMenu a
{
	padding-left: 0;
	background-image: url('MenuTab2Current.png' );
	color: #FFFFFF;
	font-weight: bold;
}

#Menu2 .CurrentMenu a:hover
{
	text-decoration: none;
	font-style: normal;
}

.MenuStrip
{
	height: 2px;
	margin: 0 auto;
	background-color: #0000FF;
	clear: left;
}

/* Third Menu Row Elements */

#Menu3
{
    border-width: 2px;
    border-color: #0000FF;
    height: 27px;
    margin: 0 auto;
    padding: 7px 0 0 0;
    clear: left;
    background-image: url( 'GradientMenu3.png' );
    background-repeat: repeat-x;
    border-bottom-style: solid;
}

#Menu3 ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#Menu3 li
{
	float: left;
	position: relative;
	left: 90px;
}

#Menu3 a
{
    display: block;
    width: 100px;
    height: 20px;
    margin-right: 1px;
    padding: 7px 0px 0px 0px;
    background: url(MenuTab3.png) no-repeat left top;
    text-decoration: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000099;
    border: none;
}

#Menu3 a:hover
{
	text-decoration: underline;
	font-style: italic;
	font-weight: bold;
}

#Menu3 .CurrentMenu a
{
    height: 22px;
	padding-left: 0;
	background-image: url('MenuTab3Current.png' );
	color: #000080;
	font-weight: bold;
}

#Menu3 .CurrentMenu a:hover
{
	text-decoration: none;
	font-style: normal;
}

.center
{
	text-align:center;
} 

.right
{
	text-align: right;
}

h1, h2, h3
{
	margin: 2;
	padding: 0;
	font-weight: bold;
	color: #000080;
	text-align: left;
}

h1 {
	font-size: 1.6em;
}

h2 {
	font-size: 1.4em;
}

h3 {
	font-size: 1.2em;
}

p
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	color: navy;
	text-align: left;
	margin: 2px 2px 2px 5px;
}

/* Style for ordered lists (e.g. links page, how to join steps) */
Menu, ol, ul
{
	text-align: left;
	font-size: 1em;
	color: navy;
	font-family: Arial;
}

/* Styles for Photo Galleries */

.PhotoThumbnail
{
	padding: 1px;
	margin: 0;
	border: 2 none #A0A0FF;
	width: 272px;
	float: left;
}

.PhotoThumbnail img
{
	border: 1px solid #ccc;
	padding: 3px;
}

.PhotoThumbnail:hover img
{
	border: 3px solid navy;
	padding: 1px;
}

.PhotoThumbnail:hover
{
	color: #6699FF; /* irrelevant definition to overcome IE bug */
}

/* ¨Clear the float when reaching the end of a row of thumbnails */
.PhotoThumbnailClear
{
	clear: left;
}

.PhotoCaption
{
	font-size: 1em;
	color: blue;
	font-family: Arial;
	text-align: center;
	background-color: #d4dbff;
	padding: 3px;
	margin: 0px;
	border: 1px solid Navy;
}

/* Styles for small photos embedded in text documents */

.PhotoThumbnailSmall
{
	padding: 1px;
	margin: 0;
	border: 2 none #A0A0FF;
	width: 200px;
	float: left;
}

.PhotoThumbnailSmall img
{
	border: 1px solid #ccc;
	padding: 3px;
}

.PhotoThumbnailSmall:hover img
{
	border: 3px solid navy;
	padding: 1px;
}

.PhotoThumbnailSmall:hover
{
	color: #6699FF; /* irrelevant definition to overcome IE bug */
}

.Banner
{
	font-weight: bold;
	font-size: 1.2em;
	color: white;
	font-family: Arial;
	background-color: blue;
	text-align: left;
	padding: 2px;
	margin: 0px;
	border: 1px solid Navy;
}



/* Other styles still to be reviewed below... */


a
{
	text-decoration: none;
	color: blue;
	font-size: 1em;
	font-family: Arial;
	font-weight: bold;
}

a:hover
{
	text-decoration: underline;
	color: navy;
	font-size: 1em;
	font-family: Arial;
	font-weight: bold;
}

a:active {
	color: #C19B28;
}

/* Styles for Datagrid Tables */

table.DataGrid
{
	padding: 0px;
	margin: 0px;
	border: 1px solid Navy;
	border-collapse: collapse;
}

table.DataGrid th
{
	font-weight: bold;
	font-size: 1.2em;
	color: white;
	font-family: Arial;
	background-color: blue;
	text-align: center;
	padding: 0px;
	margin: 0px;
	border: 1px solid Navy;
}

table.DataGrid td
{
	padding: 1px;
	margin: 0px;
	border: 1px solid Navy;
}

/* Styles for Gridviews */

.GridOutline
{
	padding: 0px;
	margin: 0px;
	border: 1px solid Navy;
	border-collapse: collapse;
}

.GridHead
{
	font-weight: bold;
	font-size: 1.2em;
	color: white;
	font-family: Arial;
	background-color: blue;
	text-align: center;
	padding: 2px;
	margin: 0px;
	border: 1px solid Navy;
}

.GridRow
{
	font-size: 1em;
	color: blue;
	font-family: Arial;
	text-align: left;
	padding: 2px;
	margin: 0px;
	border: 1px solid Navy;
}

.GridRowAlt
{
	font-size: 1em;
	color: blue;
	font-family: Arial;
	text-align: left;
	background-color: #d4dbff;
	padding: 2px;
	margin: 0px;
	border: 1px solid Navy;
}

.GridCellBold
{
	font-weight: bold;
	font-size: 1em;
	color: white;
	font-family: Arial;
	background-color: blue;
	text-align: center;
	padding: 2px;
	margin: 0px;
	border: 1px solid Navy;
}

/* Styles for Ajax tab control - still needs some work before use */

.AjaxTab
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color: #000080;
	text-align: left;
	float: left;
}