/**************************************************************
	These styles affect all objects of a specific type
 **************************************************************/

/*
 Reset most styles to known values from the browser defaults
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,  pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, br {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}

p, h1, h2 {
	margin-top: 18px;
}

h1, h2 {
	font-weight: bold;
}

h1 {
	font-size: large;
}

body {
	line-height: 1;
}

blockquote {
	quotes: '"'
}	

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* All links get this style */
a {
	color: #FF6600;
	font-weight:bold;
	text-decoration:none;
}	

/* All links get this style when the mouse is over them */
a:hover {
	color:#FFBA00;	/* Should match .logoText */
}

/**************************************************************
	These styles (with a # in front) are for specific object id's
	They say how the page is laid out
 **************************************************************/

/* The banner running across the top of the page */
#banner {
	display:table;
	width:100%;
	border-right-width:0;	/* On IE6 and FF3 this is needed to avoid a
	                           horizontal scrollbar. WTF: It should have been
							   set in the body's style as border:0 */
	padding-top:22px;
	padding-bottom:22px;
}

/* The frame around the tabBar, needed for proper background fill.  */
#tabBarFrame {
	width:100%;	/* Needed by IE for proper top/bottom background fill and by FF for proper right fill */
	display:table; /* Needed by FF for proper top/bottom background fill */
}

/* The bar that holds the navigation tabs */
#tabBar {
	margin-top:4px;
	margin-bottom:4px; /* Not sure why the bottom margin
							must be larger than the top margin */
	margin-left:17px;
	height:1em;		   /* The bar needs to know it's height for proper spacing */
}
	
/* The top border of the tabs */
#tab-topBorder {
	height:4px;
	font-size:0px;			/* Required by IE to avoid a 1em height */
	border-bottom-style:solid;
	border-bottom-width:1px;
}

/* The bottom border of the tabs */
#tab-bottomBorder {
	height:4px;
	font-size:0px;			/* Required by IE to avoid a 1em height */
	border-top-style:solid;
	border-top-width:1px;
}

/* One tab on the navigation bar */
#tab {
	/* 10px is the space between the text and the right separator (vertical line) */
	padding: 0px 10px;
	border-right-style:solid;
	border-right-width:1px;
}

/* The main width of the website below the tabs */
#lowerPanel {
	width:100%;
	height:100%;
}

/* The box to the left of the mainPage, with the logo and mission */
#sidebar {
	border-right-width:3px;	/* Add (or subtract) to the sidebar-mainFrame width any change in this value */
	width:254px;			/* Add (or subtract) to the sidebar-mainFrame width any change in this value */
	vertical-align:top;
}

/* The box that holds the main text of the page */
#main {
	padding-left:50px;		/* Add (or subtract) to the sidebar-mainFrame width any change in this value  */
	padding-top:0px;		
	padding-bottom:15px;
	vertical-align:top;
	width:500px;
}

/* The box that holds the main text of the page */
#rightBar {
	vertical-align:top;
	padding-top:5em;
	padding-left:1em;
}
	
/* Used for the links at the bottom of the page. */
#footer {
	position:absolute;
	bottom: 0;
	padding-left: 304px;	/* Should match the width of #sidebar plus the
	                           padding-left of #main */	
	padding-bottom: 5px;
}

/* Used to position the link to the privacy policy */
#privacyLink {
	margin-left: 200px;
}

/**************************************************************
	These styles (with a . in front) are for classes of objects
	They say how the page is colored and what text looks like
 **************************************************************/
	
/* Shows below all content */
.windowBackground {
	background-color:#64748B;
}

/* Used for banner and sidebar */
.frameBackground {
	background-color:#26354A;
	border-right: solid #26354A;
}

/* Used for the agency's name */
.logoText {
	font:24px Times New Roman, Times, serif;
	color:#FFBA00;
	letter-spacing:.3em;
	margin-left:17px;
	line-height:26px;
}
	
/* Just used for the tagline separator */
.tagline {
	color: #D3DCE6;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:16px;	/* Has no effect in IE6. In FF3 it seems to move the
						   banner text up about 2 pixels, more closely
						   matching IE6. */
}

/* Use along with .tagline for the actual tagline text */	
.taglineText {
	font-size: 14px;
	font-weight: bold;
}

/* Used for the tab bar */
.tabBackground {
	background-color:#FFCC00;
}

/* Used for the upper and lower border of the tab bar */
.tabBorder {
	background-color:#FF6600;
	border-bottom-color:#D3DCE6;	/* Should match .tagline's color */
	border-top-color:#D3DCE6;		/* Should match .tagline's color */
}

/* Used for the normal text of a tab */
.tabText {
	color: #26354A;
	letter-spacing:.1em;
	font-size: 12px;
	line-height:16px;				/* Should be a bit larger than the font-size */
	border-right-color:#FF6600;		/* Makes the vertical spacer between the tabs */
	font-family: Arial, Helvetica, sans-serif;
}

/* Used when the mouse is hovering over a tab */
.tabText:hover {
	color:#ffffff;
	background-color: #FF6600;
}

/* Used when the this tab is the selected page */
.tabTextSelected {
	color:#FFCC00;				/* Should match .tab's background-color */
	background-color:#26354A;	/* Should match .tabText's color */
}

/* Used for the text in the sidebar (mission statement) */
.sidebarText {
	text-align:center;
	padding-left:12px;
	padding-right:35px;
	padding-top:15px;
	padding-bottom:10px;
	color: #FFBA00;
	letter-spacing:.1em;
	line-height:18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* Used for the heading above the main content box */
.mainHeading {
	font:24px Arial, Helvetica, sans-serif;
	color: #FF6600;
	letter-spacing:.2em;
	line-height:32px;
}

/* Used for the main content box's background */	
.mainBackground {
	background-color:#FFFFFF;
}

/* Used for the main content box */
.mainText {
	line-height:22px;
	color:#26354A;
	letter-spacing:.1em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}

/* Used as a spacer to the right of the main content box.
   It's needed to prevent the sidebar and main content box
   filling the entire screen width */
.invisibleText {
	color:#FFFFFF; /* Should match mainBackground's background-color
	                  to make any text invisible */
}

/* Used for the footer at the bottom of the page */
.footerText {
	color:#FFFFFF;			/* Should match .mainText */
	h
}

/* All links get this style */
.footerText a {
	color: #FFFFFF;			/* Should match .mainText */
	font-weight:bold;
	text-decoration:none;
}

/* All links get this style when the mouse is over them */
a:hover {
	color:#FFBA00;	/* Should match .logoText */
}