@charset "utf-8";
body  {
	/* this sets the color of the screen outside the container */
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000; /* this sets the text color the same for the whole document */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 100%;
	background-color: #333333;
}


li {
	text-align: left;
	line-height: 24px;
}

h1 {
	font-size: 24px;
	font-weight: bold;
	line-height: 30px;
}

h2 {
	font-size: 18px;
	line-height: 24px;
}

.small {
	font-size: 12px;
}

.big {
	font-size: 22px;
	font-weight: bold;
	line-height: 36px;
}

.huge {
	font-size: 36px;
	font-weight: bold;
	line-height: 50px;
}

.spaced {
	line-height: 28px;
}

link {color:#006699;
}

a:link {
	color: #0033CC;
	text-decoration: none
}

a:visited {
	color: #800080;
	text-decoration: none
}

a:hover {
	color: #0000FF;
	cursor: pointer;
	text-decoration: underline;
}

a:active {
	color: #33CCFF;
	text-decoration: none
}

p {
	vertical-align: top;
	background-position: left;
}

.quote {
	font-style: italic;
	text-align: center;
	background-position: center;
	line-height: normal;
}

table {
	margin: 1px;
	border-collapse: collapse;
	table-layout: fixed;
	background-position: center;
	padding: 10px; /* this pads the area outside the table */
	border: thin solid #666666;
	text-align: center; /* probably redundant */
}

td {
	background-position: center center; 
	text-align: center;
	border: thin solid #666666;
	padding: 10px;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: -1em; /* this moves the box left */
	list-style: none;
	float : left;
	width : 11em;
}
	
#nav li { /* all list items */
	position: relative;
	float: left;
	line-height : 2em;
	margin-bottom : -1px;
	width: 11em; /* Note that you need to specify a width in the #nav li selector or else Opera will chuck a wobbly. Also remember that because we're floating things, the content underneath the dropdowns also needs to be cleared (clear: left). */
}
	
#nav li ul { /* second-level lists */
	position : absolute;
	left: -999em;
	margin-left : 11.6em; /* this sets how close the next list opens relative to the previous list */
	margin-top : -3em; /* this sets the height at which the next list opens */
	
}
	
#nav li ul ul { /* third-and-above-level lists */
	left: -999em; /* Note that you need to specify a width in the #nav li selector or else Opera will chuck a wobbly. Also remember that because we're floating things, the content underneath the dropdowns also needs to be cleared (clear: left).

We obviously need to hide the lists that we want to 'drop down' but to make things as accessible as possible we need to avoid using display: none, which, as is commonly mentioned in image replacement write-ups, hides elements from some screen readers. You might think that there are a multitude of ways to deal with this, but having exhaustedly experimented with widths, heights, margins, top and clip across a large number of browsers, the best solution (accommodating multiple level lists anyway) lies in manipulating the left property.

The CSS specs say that top, right, bottom and left values should offset an absolutely positioned box from its containing block. But unfortunately Opera decides to offset absolutely positioned boxes in relation to the page and that's why the original Suckerfish Dropdowns didn't work on Opera - because they relied on the top and left properties with explicit lengths.

So instead of display: none we use left: -999em to propel the dropdown list out of view and then left: auto (rather than left: 0) to bring it back: */
}
	
#nav li a {
	width: 11em; /* in theory, this should set the size of the block, but it doesn't */
	w\idth : 10em; /* this seems to set the lettering width inside of the block - or its an IE hack*/
	display : block; /* without the block command, nothing lines up properly */
	background-color : #121212; /* have to have a background color - otherwise the dropdown menu is transparent */
	padding : 0.08em 0.82em; /* 1st is for top and bottom, 2nd is for left and right  - However, it seems to adjust the right and left padding */
}
	
#nav li a:hover {
	background-color : #333333;
}
	
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em; /*Due to the cascading effect whereby upon the second level list being displayed, the third level list would also be revealed, we also need to explicitly hide that third level list (remember that we need to duplicate the :hover pseudo class with the .sfhover class): */
}
	
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto; /* Now, this rule can be contradicted so that it is displayed when the corresponding list item is hovered over by expanding on the displaying of the dropdown (which with the single level dropdown was #nav li:hover ul, #nav li.sfhover ul { left: auto; }): */
}
	
#content {
	margin-left : 12em; /* this is probably a superfluous reference to the Suckerfish maincontent */
}
	
.twoColFixLtHdr #container {
	width: 960px; /* black */
	font-size: 14px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000; /* this overrides the text-align: center on the body element. */
	background-color: #C5D3D3;
	text-align: left;
} 
.twoColFixLtHdr #header {
	border-bottom-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #000000;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
} 
.twoColFixLtHdr #header br {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 100px;
	line-height: 20px;
	padding-top: 30px;
	padding-right: 15px;
	padding-bottom: 30px;
	padding-left: 20px;
}
.twoColFixLtHdr #mainContent {
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #000000;
	font-size: 16px;
	line-height: 18px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 135px;
	padding-top: 0;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
} 
.twoColFixLtHdr #footer {
	padding: 10px 10px 0 150px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: 22px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
} 
.twoColFixLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
	padding: 10px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}