/* This file based on 'Tranquille' by Dave Shea */
/* It was taken from the template on CSS Zen Garden (www.csszengarden.com) */

/* The file below is read by ALL browsers
	but the hacks contained within it further target 
	IE5-6 for Windows. See file for details. */

@import "ie6win.css";


/* Global elements */
	body {color: #505050; background-color: #F6F6F6; font: 1em/1em Arial, "Lucida Grande", "Lucida Sans Unicode", Verdana, Tahoma, sans-serif; margin: 0; padding: 0;}
	h1 {color: #DF9325;}
	h2 {color: #505050; font-size: 1.3em;}
	h3 {color: #505050; font-size: 1.1em; line-height: 1.3em; font-style: italic}
	p {margin: 0; padding: 0 0 1em 0;}
	a:link {color: #0492CB; text-decoration: none;}
	a:visited {color: #0492CB; text-decoration: none;}
	a:hover {color: #24B2EB; background-color: transparent; text-decoration: underline;}
	em {font-weight: bold; font-style: normal;}

/* Page header elements */
#container {
	width: 770px; 
	margin: 0 auto;
	padding: 0;
	background: url(../images/background-body.gif); 
	}

/* The padding ensures that the text does not overlap the background image */
/* THIS HAS TO BE RELATIVE!!!  If not, #siteNav's 'position: absolute' will 
   position #siteNav absolutely relative to the browser. */

#intro {
	position: relative; 
	background: url(../images/background-top.gif) no-repeat;
	background-position: 0% -15px;
	padding: 25px 11px 0px 11px;
	margin: 0px; 
	}

#logo {
	position: absolute;
	width: 400px;
	margin: 0; 
	padding: 0;
	}

#logo h2 {
	margin: 0px; 
	padding: 8px 0 14px 32px;
	}

#logo h2 a {
	width: 140px; 
	height: 45px; 
	background: #FFF url(../images/logo.gif) left bottom no-repeat; 
	display: block;
	margin: 0; 
	padding: 0;
	}

#logo h2 a span {
	display: none;
	}

#logo h3 {
	display: none; 
	}

/* Made this shorter and moved to the right so that it wouldn't overlap
   with #logo.  In Firefox, overlapping components prevent links from being
   selected, even if the overlapping component is transparent and the 
   link is visible. */
#siteNav {
	min-height: 67px;
	margin: 0; 
	padding: 0;
	position: relative;
	left: 400px;
	width: 344px;
	text-align: right;
	}

#siteNav li {
	display: inline; 
	list-style: none;
	margin: 0; 
	padding: 0;
	}

/* I'm using really small font sizes for the site nav links, 
   so I'm adding extra padding to the top and the bottom of the
   links so that the user has a larger target to hit with his 
   mouse.  */
#siteNav li a:link, #siteNav li a:visited {
	position: relative;
	top: 33px;
	padding: 30px 0.8em 20px 0;	
	color: #505050; 
	}

#siteNav li a:hover {
/*	color: #DF9325; */
    color: #24B2EB;
	}

#siteNav li a:link span, #siteNav li a:visited span {
	font-size: 0.7em; 
	color: #505050; 
	padding: 0 0 0 15px;
	}

#siteNav .li1 a span {
	background:  url(../images/house-orange.gif) no-repeat;
	background-position: left center; 
	}

#siteNav .li2 a span {
	background: url(../images/mail-orange.gif) no-repeat; 
	background-position: left center; 
	}

#siteNav .li1 a:hover span, #siteNav .li1 a:hover span {
	background: url(../images/house-orange.gif) no-repeat; 
	background-position: left center;
/*	color: #DF9325; */
    color: #24B2EB;
	}
	
#siteNav .li2 a:hover span, #siteNav .li2 a:hover span {
	background: url(../images/mail-orange.gif) no-repeat;
	background-position: left center;
/*	color: #DF9325; */
    color: #24B2EB;
	}

#contentNav {
	background: #FFF url(../images/banner.gif) center top no-repeat; 
	margin: 0; 
	padding: 75px 0 0 48px; /* Top padding is so that the entire background banner shows up */
	list-style: none;
	font: 0.95em/1.10em Verdana, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Arial, sans-serif; 
	font-weight: bold;
	text-transform: lowercase;
	}

#contentNav li {
	margin: 0; 
	display: inline;
	background: url(../images/divider.gif) no-repeat;
	background-position: 100% 4px;
	padding: 3px 15px 0 15px;
	text-align: center;
	}

#contentNav li a {
	text-decoration: none; 
	color: #036A92;
	}

#contentNav li a:hover {
	color: #24B2EB; 
	text-decoration: underline;
	}


.selected {
	color: #DF9325; 
/*    color: #606060; */
	text-decoration: none;
	font-style: italic;
	cursor: text;
	}

#pageBody {
	padding: 0px 11px 0 11px;
	margin: 0;
	position: relative;
	min-height: 550px;
	}

/* Page footer elements */
#footer {
	margin: 0px; 
	padding: 0px;
	font: 0.7em/1.2em Arial, Verdana, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
	}

#contentNavFooter {
	margin: 0px; 
	list-style: none;
	text-align: center;
	padding: 0 0 10px 0;
	}

#contentNavFooter li {
	display: inline; 
	padding-left: 15px; 
	padding-right: 15px;
	background: transparent url(../images/divider.gif) no-repeat left top;
	text-transform: lowercase;
	}

#contentNavFooter li a:link, #contentNavFooter li a:visited {
	color: #505050; 
}

#contentNavFooter li a:hover {
	color: #24B2EB; 
}

#copyright {
	position: relative;
	margin: 0px; 
	padding-right: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #FFF url(../images/background-bottom.gif) no-repeat;
	background-position: 0px -7px;
	width: 731px;
	text-align: right;
	}

#copyright a:link, #copyright a:visited {
    color: #505050;
}

#copyright a:hover {
/*	color: #DF9325; */
    color: #24B2EB;
}

#termsAndPrivacy {
	display: none;
	position: relative;
	margin: 0px; 
	padding-top: 10px;
	padding-right: 50px; 
	padding-bottom: 10px;
	list-style: none;
	text-align: right;
	color: #505050;
	}

#termsAndPrivacy li {
	display: inline; 
	}

#termsAndPrivacy .li1 {
	padding-right: 5px;
	border-right: 1px solid #777;
	}

#termsAndPrivacy .li2 {
	padding-left: 9px; 
	}

form {
  margin-bottom: 0px;
}

.shortList {
	list-style: url(../images/bullet-arrow.gif); 
	padding: 0; 
	margin: 1em 0 0 3em; 
}

.shortList li {
	margin: 0;
	padding: 0 0 .5em 0; 
}

.descriptiveList {
	list-style: url(../images/bullet-arrow.gif); 
	padding: 0; 
	margin: .5em 0 1em 3em; 
}

.descriptiveList li {
	margin: 0;
	padding: 0 0 .7em 0; 
}

.descriptiveList li ul {
   list-style: square;
   list-style-image: none;
	padding: 0 0 0 2em;
	margin: 0;
	}

.descriptiveList li ul li {
	padding: 0.7em 0 0 0; 
}

.descriptiveList li ul li ul {
   list-style: disc;
	}

.firstLevelEllipses {
   list-style: none;
}

.secondLevelEllipses li ul {
   list-style: none;
}

.explanationList {
	padding: 0; 
	margin: .5em 0 .5em 1.5em; 
   list-style: none;
}

.explanationList li {
	margin: 0;
	padding: 0 2em .7em 0; 
	font: 0.85em/1.2em Verdana, Arial, Tahoma, sans-serif; 
	color: #808080;
}

a.noHrefLink:hover {
    cursor: pointer;
}

/* Flexible inline dialog taken from: http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/ */
.dialog .head .end, .dialog .foot .end {
	font-size: 1px; 
	height: 10px;
	}

.dialog .head {
	background: transparent url(../images/dialog-top-left.gif) no-repeat left bottom;
	}

.dialog .head .end {
	background: transparent url(../images/dialog-top-right.gif) no-repeat right bottom;
	}

.dialog .body {
	background: transparent url(../images/dialog-middle-left.gif) repeat-y left center;
	}

.dialog .body .end {
	background: transparent url(../images/dialog-middle-right.gif) repeat-y right center;
	}

.dialog .foot {
	background: transparent url(../images/dialog-bottom-left.gif) no-repeat left top;
	}

.dialog .foot .end {
	background: transparent url(../images/dialog-bottom-right.gif) no-repeat right top;
	}

#validators {
      display: none;
	}