/*
 * Various icons are from the Silk icon set 1.3 by
 * Mark James
 * http://www.famfamfam.com/lab/icons/silk/
 */

/************************************************************************** 
This design is based off of Andrew Krespanis site in an hour design. You 
can visit his website at http://leftjustified.net/. I have modified most of
layout and changed the navigation button scheme to fit our site.
**************************************************************************/

* {
    margin:0;
    padding:0;
}

/* setting the base font size to 90% allows even scaling by the user while keeping font-size 'xx-small' legible */
body {
    background:#F7F7F7 url(../img/body.jpg) repeat-x fixed bottom left;
	font: 1em/1.5 Cambria, Georgia, Times, serif;
}

h2 {
	font: bold 1.6em/1.4 Cambria, Georgia, Times, serif;
	color:#2982B6;
}
h3 {
	font:bold 1.4em/1.4 Cambria, Georgia, Times, serif;
	color:#DEA62D;
	border-bottom: 1px solid #DEA62D;
	width: 98%;
}
h4 {
	font:bold 1.4em/1.4 Cambria, Georgia, Times, serif;
	text-align:center;
	margin-top:.75em;
}
h5 {
	font:bold 1.2em/1.4 Cambria, Georgia, Times, serif;
}

/* links */
a {
	color:#2982B6;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}
a.audio {
    background: url(../img/audio.png) right center no-repeat;
    padding-right: 1.2em;
}
a.pdf {
    background: url(../img/icon_pdf_white_bg.png) 0 0 no-repeat;
    padding: 0 .9em 0 .1em;
}
a.extlink {
    background: url(../img/extlink.png) right top no-repeat;
    padding: 0 .9em 0 .1em;
}
.crumb
{
	font-size:0.75em;
	margin: 0 0 .5em .5em;
	}
.crumb a, .crumb a:visited
{
	border:none;
	text-decoration:none;
}
blockquote 
{
	margin: 5%;
	padding: 2%;
	background-color: #FEFEEF;
	border: 2px solid #FEFE35;
	
}
/** end global **/

/********
the #outer div is the key element to the flexibility of this design.
By setting maximum and minimum widths in 'em', whilst the width is set in '%', 
we effectively create the perfect combination of 'fluid' and 'elastic' layouts.
Javscript is used to add support for min/max width in IE

Any elements inside #outer that require a set width or horizontal margins/padding use the '%' unit for that value.
This means that regardless of what causes the #outer div to expand (font size or screen size), 
the content will seemlessly re-flow to fill that space.
*********/
#outer {
    margin:0 auto;
	width:750px;
	border:10px solid #fff;
	border-width:0 10px;
    background:#fff;
}

/* float clearing - technique explained @ http://www.csscreator.com/attributes/containedfloat.php */
ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #nav, * html #content, * html form, * html form div {
	height:1%;
}

/** hiding of elements for assistive devices (screen readers etc) **/
ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}

div#menu {
    width: 100%;
    padding:0 0 2% 0;
    }
ul#nav,ul#nav li 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
ul#nav {
    margin: 1.0em auto 0 auto;
    width: 745px;
    font: bold 0.67em arial, verdana, sans-serif;
    }
ul#nav li {
    float: left;
    margin: 0 1px 0 2px;
    text-align: center;
    }
ul#nav li a {
    float: left;
    width: 7em;
    padding: 6px 0;
    background: #E7F1F8;
    text-decoration: none;
    color: #666;
    }
ul#nav li.long a {
    float: left;
    width: 11.5em;
    padding: 6px 0;
    background: #E7F1F8;
    text-decoration: none;
    color: #666;
    }
ul#nav a:hover, ul#nav li.long a:hover {
    background: #E2B041;
    color: #fff;
    }
ul#nav li.activelink a, ul#nav li.activelink a:hover { background: #fff; color: #003; }

ul 
{
	list-style: none;
	padding: 1% 2% 0 4%;
	}

ul li 
{
	padding: 0 0 1em 1.25em;
	background: url(../img/square.png) 0 .35em no-repeat;
	}

ol {
	padding: 0;
	margin:5px 40px 15px 50px;
	list-style-type:decimal;
	}

ol li {
	padding: 0;
	margin: 0px 0px 5px 0px;
	text-align: left;
	}

ol li ol { list-style-type:lower-alpha; }

/* <hr />'s added to mark-up for browsers without CSS */
hr {display:none}

/** Title **/
#header {
	background: #EBEBE9 url(../img/banner.png) no-repeat;
	height: 86px;
	width: auto;
}
#header h1 {
    margin: 0 auto;
    font:bold 3em/2.5 Georgia, Times, serif; /* line-height allows for image of buildings */
    letter-spacing:1pt;
	color:#845697;
}
#header h1 a {
	color:#845697;
	text-decoration:none;
}
#printheader {
    display: none;
	height: 86px;
	width: auto;
}
/** Content Containers **/
#sub {
    font-size: .95em;
	word-spacing:.1em;
	margin-bottom:1em;
    }

#right {
    font: .75em/1.5 Verdana, Tahoma, Sans-Serif !important;
	word-spacing:.1em;
	margin-bottom:1em;
    }

/******
div#sub is an extra wrapper, which allows the center column to come first in the source. 
#sub is floated left, with #center -the content column- nested within and floated to the right.
concept from http://www.positioniseverything.net/piefecta-rigid.html
******/
#sub {
	width:74%;
	float:left;
	position:relative;
}

/***
Containers should be named according to what they contain. not where they sit in the layout.
To make identifying each column more simple, I have named them according to their position.
***/
#center {
	width:100%;
	float:left;
}
#left {
	width:33%;
	float:left;
	padding:220px 0 10px;
	background:transparent url() no-repeat right top;
	border-bottom:9px solid #845697;
}
#right {
	width:25%;
	float:right;
}
 
 /** Main Col Contents **/
#center p {
	margin:.75em 2% 1.3em 0;
}
img.img-right {
	float:right;
	padding-right: 2%;
}

/** Left Col Contents**/
#left h2 {
	color:#845697;
	font-size:1.5em;
}
#left p {
	font-size:.9em;
}

/** Right Col Contents **/
#right {
	font-size:.9em;
}
#right h2 {
	font-size:1.2em;
}

/** Alert **/
.alert {
    background: #fff6bf url(../img/icons/exclamation.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #ffd324;
    border-bottom: 2px solid #ffd324;
    font: bold 1em Sans-Serif;
    color:#000;
    }
#new {
	background:#fff6bf;
	border:1px solid #ffd324;
	margin:1em 0;
}

/** Spotlight **/
.spotlight {
	background:#E7F1F8;
	border:1px solid #2982B6;
	margin:1em 0;
}
.spotlight h2 {
	color:#3A4F3B;
	margin:.1em 2%;
}
.spotlight ul {
	list-style: none;
	margin: .5em 0 1em 0;
	padding:0 .7em 0 .75em;
}
.spotlight ul li {
	background: url(../img/bullet.gif) 0 .3em no-repeat;
	padding: 0 0 .4em 1.6em;
}
ul li.doc { background: url(../img/docw.gif) 0 .4em no-repeat; }
ul li.audio { background: url(../img/audiow.gif) 0 .4em no-repeat; }
.spotlight ul li.doc { background: url(../img/doc.gif) 0 .4em no-repeat; }
.spotlight ul li.audio { background: url(../img/audio.gif) 0 .4em no-repeat; }
.spotlight ul li.new { background: url(../img/icons/new.png) 0 .25em no-repeat; }
.spotlight ul li.money { background: url(../img/icons/money.png) 0 .25em no-repeat; }


/** Forms **/
form {
	margin:1em 0;
}
legend {
	font:bold 1.1em/1.5 Arial, tahoma, verdana, sans-serif;
	color:#3A4F3B;
}
.txt {
	width:65%;
	padding:.2em;
	border:2px solid #A5ACB2;
	background:#fff;
}
.widetxt {	width:90%; }
.btn {
	background: url(../img/btn.gif) center center repeat-x;
	width:3em;
	color:#000;
	font:bold 1em/1.4 Georgia, Times, serif;
	cursor:pointer;
}
.searchbtn { width:3em; }
.subbtn { width:7em; margin-top:.3em;}

input:focus, input.focus {
	border-style:inset;
}
label {
	display:block;
	margin-top:.5em;
}
/* search */
#search fieldset {
	border:1px solid #2982B6;
	padding:.3em .5em;
}
/* subscribe */
.subscribe {
	background:#F7EACD;
	border:1px solid #DEA62D;
	
}
.subscribe div {
	margin:.3em .5em;
}
.subscribe h2 {
	color:#000;
}

/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	font: 0.75em/1.0 verdana, tahoma, sans-serif;
	border-top:3px double #E1E1E1;
}
#footer p {
	margin:1em 1em 1em 0;
	padding-bottom: .5em;
	float:right;
	width:30%;
	text-align:right;
}
#footer ul 
{
	list-style:none;
	margin-top:.7em;
}
#footer li 
{
	background: none;
	display:inline;
	border-right: 1px solid #E1E1E1;
	padding:.3em 2%;
}

#resize { margin: 0 0 0 0.5em; }

#tools { margin-top: .75em; }

#tools a.print, #tools a.print:hover, #tools a.print:visited
{
	margin: 0 0 0 .25em;
	padding: .2em 0 0 1.75em;
	background: url(../img/print.png) no-repeat 0px 2px;
}

img { border: none !important; }
.border { background-color: #ccc; padding:.2em;}
.right { float: right; }
.alignright { float: right; margin: 1em .5em .5em .5em; }
.alignleft { float: left; margin: 1em .5em .5em .5em; }

#tooltip {
    padding: 3px;
    background: #f9f9f9;
    border: 1px solid #eee;
    text-align: center;
    font-size: smaller;
}

span.tip {
    /* border-bottom: 1px solid #eee; */
    border:0;
}

.flyer
{
	text-align:center;
	}

.flyer h1 
{
	font: bold 1.6em/1.4 Tahoma, Verdana, sans-serif;
	margin: .5em;
	}

.flyer h2 
{
	font: bold 1.4em/1.4 Tahoma, Verdana, sans-serif;
	color: #000;
	margin: .5em 1em;
	}
.MGroup
{
	margin-top:.5em;
}
.MGroup a:hover
{
	cursor: pointer !important;
}