/* resetting the browser default elements. */

ul, ol, dl { 
	padding: 0;
	margin: 0;
	list-style-position: inside;
}

ul {
	list-style: none;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	
	margin-bottom: 16px;
	padding-right: 3%;
	padding-left: 5%; 
}

.content img {
	padding-top: 15px;	
}

/* base styling on the links. */

a img { 
	border: none;
}

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

a:visited {
	color: #060;
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: underline;
}

/* provides styling for links on FAQ page. */
ol a:link, ol a:visited {
	color: #060;
	text-decoration: underline;
}


/* ~~ primary section base styling.*/
body {
	font: 100%/1.4 "Times New Roman", Times, serif;
	background: url("images/bggreen.jpg") repeat-x scroll 0 0 #EEF2CB;
	margin: 0;
	padding: 0;
	color: #000;
	min-width: 840px; /*currently keeps layout from collapsing. later addition of media query and mobile optimizing expected.*/
}

/* The container div surrounds all other divs giving them their percentage-based width ~~ */
.container {
	max-width: 936px;
	margin: 20px auto;
	/* applying the box shadow effect via CSS3. */
	-moz-box-shadow: 0 0 5px #94b07e;
	-webkit-box-shadow: 0 0 #94b07e;
	box-shadow: 0 0 5px #94b07e;
	/* applying the rounded corner effect via CSS3. */	
	-moz-border-radius: 10px;	
	border-radius: 10px;	
}

.header, .top-banner {
	background: #ebfdd4;
	/* applying the rounded corner effect via CSS3. */		
	-moz-border-top-left-radius: 10px;	
	border-top-left-radius: 10px;	
	-moz-border-top-right-radius: 10px;	
	border-top-right-radius: 10px;		
}

#main {
	background-image: url(images/divBorder.gif);
	background-position: 28.5% 0%;
	background-repeat: repeat-y;
	background-color: #FFF;	
}

/* ~~ Styles for the sidebar and its elements. ~~ */

.sidebar {
	float: left;
	width: 28.5%;
	padding-bottom: 10px;
}

.sidebar ul {
	padding-bottom: 40px;
}


.sidebar ul li, .sidebar p, .sidebar h2 {
	padding-left: 12%;
}

.sidebar p {
	font-size: 1.1em;
	line-height: 1.1em;

}

.sidebar ul li {
	font-size: 1.1em;
	line-height: 1.2em;	

}

.sidebar ul li a:link {
	text-decoration: none;
	}
	
.sidebar ul li a:hover {
	text-decoration: underline;	
}

.sidebar h2 {
	padding-top: 30px;	
	margin-bottom: 0;
	line-height: 1em;
}

.sidebar ul, .sidebar p {
		padding-top: 12px; 
 }
 
span.contactSpan {
		text-transform: lowercase;
		font-variant: small-caps;	
}

/*styling for the content area and its elements */
.content {
	padding: 10px 0;
	width: 66%;
	float: left;
}

.content ul, .content ol { 
	padding: 0 5% 15px 5%; 
}

.content h1 {
	padding-top: 12px;
}

/*fine-tuning the styles for the header elements */
.top-banner {
	background-color: #0b090a;
	color: #FFF;
}

.header h1 {
	font-size: 3em;
	padding-top: 5px;
	padding-right: 3%;
	padding-bottom: 25px;
	padding-left: 3%;
	margin-bottom: 0;
}

.header h2 {
	font-size: 2em;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style:italic;
	padding-right: 5%;
	margin-bottom: 0;
}

.mid-banner img {
	padding: 8px 1%;
	float: left;
}

.mid-banner #headline {
	padding-top: 25px;
	padding-left: 33.3%;
}

.mid-banner h1, .mid-banner h2 {
	padding: 0;	
}

.mid-banner h1 {
	font-size: 2.3em;
}

.mid-banner h2 {
	font-size: 1.5em;
}

/* ~~ The footer ~~ */
.footer {
	padding: 5px 0;
	position: relative;
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	border-top: 2px solid #0b090a;
	background-color: #FFF;
	/* applying the rounded corner effect via CSS3. */		
	-moz-border-bottom-left-radius: 10px;	
	border-bottom-left-radius: 10px;	
	-moz-border-bottom-right-radius: 10px;	
	border-bottom-right-radius: 10px;				
}

.footer p {
	font-style: italic;
	font-size: 1em;
	text-align: center;	
}

p#copyright {
	font-size: .7em;
	font-style: normal;
		text-transform: lowercase;
	font-variant: small-caps;	
}

/* ~~ The main navigation ~~ */

.main-nav {
	height: 32px;
	background-color: #0b090a;

}
.main-nav ul {
	list-style: none; 
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin: 0; 
	padding: 0;

}
.main-nav li { /* gets the links to display on one line and expand/contract with browser width*/	
    position:relative;
	float: left;
	width: 16.65%;
}


.main-nav > ul > li>a{ /*this produces the white separating line between each link */
		border-left: 1px solid #FFF;
}

.main-nav>ul li:first-child {
	border-left: none;	
}

.main-nav a, main-nav a:visited { 
	padding: 5px 0px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	background-color: #0b090a;
	color: #fff;
	font-size: .9em;
	font-weight: bold;
	overflow: hidden;
	position: relative;
	text-align: center;	
}
.main-nav a:hover, .main-nav a:active, .main-nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background: #fff;
	color: #0b090a;
}


.main-nav ul ul{ /*this places submenus directly under the main menu parent tab */
    display:none;
    position: absolute;
    top: 31px;
    left: 0px;
}

.main-nav ul ul ul{
    display:none;
    position: absolute;
    top: 31px;
    left: 20%;
}

.main-nav ul ul li{ /*reset default width so submenu doesn't inherit 16.65% width from parent */
    width: 100%;
}
 
.main-nav ul li:hover > ul {/*causes submenu items to appear when the parent is hovered over */
    display: block;
	border: 1px solid #0b090a;
	width: 100%;
}

.main-nav .current, .main-nav>ul>li>a:hover { /*This gives the current page's navigation tab reverse colors */
	background: #fff;
	color: #0b090a;	
	border-left: 1px solid black;		
}

/* ~~ contact form styles ~~ */
*:focus {background-color: #EBFDD4}

.contact_form {
	padding-left:20px;
}
.contact_form ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px;
    position:relative;
}

.required_notification {
    color:#d45252;
    display:inline;
	font-size: .8em;
	font-style: italic;
}

.contact_form label {
    margin-top: 3px;
    padding:3px;
}
.contact_form input {
    height:20px;
    padding:5px 8px;
	display: block;
}
.contact_form textarea {padding:8px; }

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { 
	float: right;
	margin-left: 3%;

}
.fltlft { 
	float: left;
	margin-right: 3%;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

blockquote {
	padding: 10px;
	margin-top: 0px;
	font-style: italic;
	border: 1px solid #48783C;
}