body
{
	margin: 0px;
	padding: 0px;
	background: #787470; 
	text-align: center; /* CAUTION: This centers the page in the viewport for IE5 and IE5.5 browsers. */
	}
.print
{
	display: none; /* Hides inline elements that are required only for the "print" version of the page and should thus not be included in the "screen" version of the page. */
	}






/* ----------------PAGE---------------- */
#page
{
	position: relative;
	top: 110px;
	width: 900px; /* Specifies a fixed page width that will not collapse when the width of the browser window is reduced. */
/* ----	max-width: 85%; ---------- */
	margin: 70px auto 0 auto; /* This centers the page in the browser viewport and allows space above for the header, navigation bar, and breadcrumb. */
	background: #ffffff url('images/sidebar_background.jpg') repeat-y scroll right top; /* The image provides a background for the sidebar. */
	text-align: left;
	}

#webcamPage
{
	position: relative;
	width: 800px;
	margin: 71px auto 0 auto;
	background: #ffffff;
	text-align: left;
	}

#searchPage
{
	width: 760px;
	margin: 71px auto 0 auto;
	background: #ffffff;
	text-align: left;
	}

/* ----------------HEADER---------------- */




#header
{
	position: absolute;
	top: -180px;
 	width: 900px;
	height: 180px; /* The height property value matches the height of the background image */
	background: #19316d url(../images/header2.png) no-repeat top right;
	font-family: Verdana, Helvetica, Arial, sans-serif;

	text-align: left;
	text-margin: 50px;
	font-size: 30px;
	font-style: italic;
	color: #ffffff;
	}
#header img
{

	border: 5;
	}
#header form
{
	margin: 10px; /* CAUTION: This is necessary in IE */
	}


#header1	{

	top: -180px;
 	width: 20%;
	height: 180px; /* The height property value matches the height of the background image */
	background: #19316d url(../images/header1.jpg) no-repeat top right;
	font-family: Verdana, Helvetica, Arial, sans-serif;

	text-align: left;
	text-margin: 10px;
	font-size: 30px;
	font-style: italic;
	color: #ffffff;
	}

#header p.firstAfterH1, #header p.firstAfterH2
{
	position: absolute;
	top: 30px;
	margin-top: 20px;
	text-decoration: none;
	color: #2266aa;
	}


#searchTextBox
{
	width: 96px;
	height: 20px;
	position: absolute;
	top: 12px;
	left: 594px;
	}
#searchButton
{
	position: absolute;
	top: 12px;
	left: 699px;
	width: 57px;
	height: 27px;
	}

/* ----------------NAVIGATION BARs---------------- */
#navigationBar
{
	position: absolute;
	top: 0px;
	width: 100%;
	height: 30px;
	background: #19316d url('images/navbar.jpg');
	text-align: center;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	}
#navigationBar1
{
	position: absolute;
	top: 120px;
	width: 100%;
	height: 20px;
	background: #dcdcdc url('images/navbar.jpg') repeat-y scroll left top;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	}
#navigationBar2
{
	position: absolute;
	top: -20px;
	width: 100%;
	height: 20px;
	
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	}
#menu1
{
	float: left;
	padding-left: 16px;
	vertical-align: center;
	}
#menu1 a
{
	line-height: 20px;
	font-weight: bold;
	text-decoration: none;
	color: #19316d;
	}
#menu1 a:hover
{
	color: #f5f5f5;
	}
#menu
{
	float: right;
	padding-right: 18px;
	vertical-align: center;
	}
#menu a
{
	line-height: 30px;
	text-decoration: none;
	color: #ffffff;
	}
#menu a:hover
{
	color: #ffcc00;
	}
#icons
{
	float: right;
	padding-right: 8px;
	}
#icons img
{
	margin: 0px 3px;
	border: 0px;
	vertical-align: text-bottom;
	}

/* ----------------BREADCRUMB---------------- */
#breadcrumb
{
	clear: both;
	position: absolute;
	top: 100px;
	left: 0px;
	margin: 0 0 0 18px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	text-align: left;
	font-size: 9px;
	line-height: 20px;
	}
#breadcrumb a 
{
	font-weight: normal;
	text-decoration: underline;
	color: #999999;
	}
#breadcrumb a:hover 
{
	color: #0000ff;
	}
#dummy /* replaces breadcrumb for Home Page */
{
	height: 0px;
	margin: 0;
	font-size: 0;
	line-height: 0;
	}

/* ----------------VERTICAL HEAD---------------- */
#verticalHead
{
	float: left;
	width: 70px;
	}
#verticalHead img
{
	position: relative;
	top: 50px;
	left: 5px;
	}

/* ----------------MAIN---------------- */
#searchResultsContainer /* See "Box Model Hack" below. */
{
	margin-bottom: 50px;
	}
#webcamMainContainer /* See "Box Model Hack" below. */
{
	margin-bottom: 70px;
	}
#homeMainContainer /* See "Box Model Hack" below. */
{
	float: left;
	width: 700px;
	margin-bottom: 50px;
	}
#mainContainer /* See "Box Model Hack" below. */
{
	float: left;
	width: 90%;
	margin-bottom: 40px;
	}
#MAIN, #HOMEMAIN /* CAUTION: The following is necessary for IE5 support. Note that the ID is in uppercase. */
{
	width: 100%;
	height: auto;
	overflow: hidden;
	}

/* ----------------SIDEBAR---------------- */
#sidebarContainer /* See "Box Model Hack" below. */
{
	width: 140px;
	margin-left: 604px; /* This provides space to clear the left-floated columns. */
	}

/* ----------------FOOTER---------------- */
#footer
{
	clear: both;
	height: 50px;
	background: #19316d url('images/navbar.jpg') repeat-y scroll left top;
	}
#footer p
{
	position: relative;
	top: 10px;
	text-align: center;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 9px;
	line-height: 13px;
	font-weight: bold;
	color: #ffffff;
	}
#footer a
{
	color: #ffffff;
	}
#footer a:hover
{
	color: #ffcc00;
	}
	
/* ----------------NOTES---------------- */

/* Box Model Hack: According to the W3C, the assigned 'width' and 'height' property of a box refers to the 'content area' of a box.
The padding, borders, and margins are then added to this property value to arrive at the 'total box width'. If the 'width'
property is omitted, the 'total box width' is the same as the 'content area' of the surrounding container element.
However, IE5 and IE5.5 use a different box model in which the padding and borders are counted as part of the assigned
'width' or 'height'. Thus, in this case, the 'content area' is reduced with the addition of any borders and/or padding.
The Box Model Hack gets around this by using a container box, specifying the width and/or height properties only (no padding or borders).
A box is then placed inside the container box with which borders and padding properties may be specified (no width or height). */

/* Margins: For consistency, all margins are placed above the element */