/*************************************
 * CSS Document Template
 * Created by Jonathan C. Hall (2005)
 *************************************


/* Color Palette: ------------------------->

light gray: #EEE
medium gray: #CCC
dark gray: #666
black: #000
red: #C66
blue: #009


/* Notes: ------------------------->

1. Floated <li> elements in IE are blocks presumed to have the width of the parent <ul>.

2. Floated <li> elements in Mozilla/Firefox are blocks that take the width of their content.

3. Use absolutely positioned <li>s for pixel-precise arrangement of elements (e.g. rollover image map);

4. Header (<h1> - <h6>) elements have different default sizes, margins, and padding in different browsers. Set it manually to ensure consistent display.

5. Type sizes set in pixels (px) will not be resized in IE, but can be resized in Firefox by pressing Ctrl+ or Ctrl-.

6. ??? IE allows you to set width/background of an inline element.

7. ??? Floated elements in Netscape do not affect parent element. Elsewhere, a floated element must be inside a floated parent to affect its size.


/* Elements: ------------------------------> */

html {

}

body {
	padding: 0;
	margin: 0;
	background: #EEE;
	text-align: center; /* Centers content. */
}

p {
	font: 70%/150% Verdana,Arial,sans-serif;
}

strong {

}

em {

}

blockquote {
	font: 80%/120% Times,serif;
}

h1, h2, h3 {
	font-family: Arial, Verdana, san-serif;
	color: #666;
}

h4, h5, h6 {
	font-family: Arial, Verdana, san-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

a, a:link {
	color: #00F;
}

a:visited {
	color: #00F;
}

a:hover, a:active {
	text-decoration: none;
}

a img {
	border: none;
}


/* Major divs: ------------------------------> */

#wrapper1 {
	position: relative;
	width: 720px; /* Fixes width. */
	margin: 0 auto; /* Centers content. */
	background: #FFF url(images/column1.jpg) bottom left repeat-y; /* Apply shadow/faux column graphic here. */
	/* border-left: 1px #999 solid;
	border-right: 1px #999 solid;
	z-index: 1; /* Required by IE to resolve stacking issues. */
}

#wrapper2 {
	background: transparent url(images/header1.jpg) top left no-repeat; /* Apply header graphic here. */
	z-index: 2;
}

#wrapper3 {
	/* background: transparent url(images/footer1.jpg) bottom left no-repeat; /* Apply other (footer? border? watermark?) graphic here. */
	z-index: 3;
}

#content {
	text-align: left;
	padding-right: 20px; /* Clearance for right edge. */
	padding-left: 220px; /* Clearance for sidebar. */
	padding-top: 140px; /* Clearance for header. */
	padding-bottom: 90px; /* Clearance for footer. */
	height: 300px; /* Sets minimum height in IE. */
	min-height: 300px; /* Sets minimum height in other browsers (ignored by IE). */
}

*>#content {
	height: auto; /* Overrides hard-coded height above (ignored by IE). */
}

#content ul {
	font: 80%/120% Times,serif;
	list-style-image: url(images/sq1.gif);
}

#content li {

}


/* Menu System ------------------------------> */

#menu1 {
	position: absolute;
	top: 90px;
	left: 0px; /* Required by IE. */
	width: 720px; /* Set to #wrapper width. Centers content;
			 pushed by #wrapper border in IE,
			 creating stacking issues. */
}

#menu1 ul {
	font: 70%/150% Arial,Verdana,sans-serif;
	padding: 0;
	margin: 0;
	/*list-style-type: none; /* Use "none" for plain formatting. */
}

#menu1 li {
	padding: 0;
	margin-right: 2px;
	display: block;
	width: 118px; /* Total desired width divided by number of items (minus margin). */
	/* float: left; /* Uncertain support; requires defined width (Notes 1, 2). */
	/* display: inline; /* Prevents control of width, height. */
	position: absolute; /* For pixel-precise positioning by id (Note 4). */
}

#menu1_id01 {left: 0px;}
#menu1_id02 {left: 120px;}
#menu1_id03 {left: 240px;}
#menu1_id04 {left: 360px;}
#menu1_id05 {left: 480px;}
#menu1_id06 {left: 600px;}

#menu1 a, #menu1 a:link, #menu1 a:visited {
	display: block; /* For buttons in horizontal menu;
			   Expands to fill list item. */
	width: 100%; /* Required by IE to ensure the above. */
	/* padding: 10px 0; */
	height: 30px;
	margin: 0;
	text-decoration: none;
	color: #666;
}

#menu1_id01 a {border: 1px solid #999;}
#menu1_id02 a {border: 1px solid #999;}
#menu1_id03 a {border: 1px solid #999;}
#menu1_id04 a {border: 1px solid #999;}
#menu1_id05 a {border: 1px solid #999;}
#menu1_id06 a {border: 1px solid #999;}

.active a {background: #FFF;}

#menu1 a:hover, #menu1 a:active {
	text-decoration: none;
	background: #FFF;
}

#menu1_id01 a:hover {background: #FFF;}
#menu1_id02 a:hover {background: #FFF;}
#menu1_id03 a:hover {background: #FFF;}
#menu1_id04 a:hover {background: #FFF;}
#menu1_id05 a:hover {background: #FFF;}
#menu1_id06 a:hover {background: #FFF;}


#menu1 span {
	/* text-indent: -2000px; /* Hides menu text in browser but makes it available to screen readers. */
	display: block;
	line-height: 30px; /* Set to same height as parent <a> element to vertically center text. */
	/* background: #FFF; */
}

#menu2 {
	position: absolute;
	top: 150px;
	left: 20px; /* Required by IE. */
	width: 180px;
	text-align: left;
	border-bottom: 1px solid #999; /* All other borders created by menu items;
					  Adjust font setting to unhide bottom border
					  in Mozilla. */
}

#menu2 h4 {
	color: #336;
	font-size: 12px;
	margin: 0;
	padding: 0; /* See Note 4 for explanation. */
}

#menu2 ul {
	font: 70%/150% Arial,Verdana,sans-serif;
	padding: 0; /* Removes formatting in __________. */
	margin: 0; /* Removes formatting in __________. */
	list-style-type: none; /* Use "none" for plain formatting. */
}

#menu2 li {
	/* padding-left: 10px; /* Indents menu items in menu. (Wraps okay; use with cold background.) */
	margin: 0; /* Removes formatting in __________. */
	border: 1px solid #999;
	border-bottom: none; /* Must use item's top border to prevent stacking issue. */
	background: #CCC; /* Use to add bullet image, if desired. */
}

#menu2 a, #menu2 a:link, #menu2 a:visited {
	display: block; /* Creates buttons with hot background. */
	width: 100%; /* Required by IE to ensure the above. */
	text-decoration: none;
	text-indent: 10px; /* Indents menu items in menu. (Does not wrap well.) */
	background: #CCC;
}

#menu2 a:hover, #menu1 a:active {
	text-decoration: none;
	background: #C66;
}

/* Special divs (nested in #content): ------------------> */

#special1 {
	padding: 10px;
	background: #CCF;
	border: 4px dotted #669;
	width: 250px;
	float: right;
}

#special1 hr {
	display: none;
}


#special2 {
	padding: 10px 0;
	border-top: 4px ridge #669;
	border-bottom: 4px ridge #669;
}

#special2 hr {
	display: none;
}


/* Header: ------------------------------> */


#header {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	padding: 5px 4px 0 0;  /* Clearance from window edge. */
	text-align: right;
	color: #336;
}

#header hr {
	display: none;
}

#header ul {
	font: 70%/150% Arial,Verdana,sans-serif;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#header li {
	padding: 0;
	margin: 0;
	display: inline;
	padding: 0 6px;
}

#header a {
	color: #FFF;
	text-decoration: none;
}

#header a:hover {
	text-decoration: underline; /* Underlining hovered links is the default. */
}


/* Footer: ------------------------------> */


#footer {
	text-align: left;
	padding-bottom: 5px;  /* Clearance from window edge. */
}

#footer ul {
	font: 70%/150% Arial,Verdana,sans-serif;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#footer li {
	padding: 0;
	margin: 0;
	display: inline;
	padding: 0 6px;
}

#footer a {

}