﻿body {
	margin: 0;
	padding: 0;
	background-image: url(images/glossymetal.jpg);
	font-family: trebuchet ms, verdana, sans-serif;
	font-size: 1em;
	color: #00334c;
}


#wrapper {
	margin: 10px auto 10px auto;
	padding: 0px;
	width: 80%;
	max-width: 1300px;
}


#header {
 	padding-top: 4px;
	padding-right: 20px;
	padding-left: 20px;
 	background-color: #cce0eb;
	color: #00334c;
	border: 1px solid #00334c;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	-moz-border-top-left-radius: 1em;
	-moz-border-top-right-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-top-right-radius: 1em;
}

#headerLeft {
	float: left;
	height: 100%;
	text-align: left;
}

#headerRight {
	float: right:
	height: 100%;
	text-align: right;
}


#topNav {
	padding-top: .5em;
	padding-bottom: .5em;
 	padding-left: 1em;
 	background-color: #ffffff;
	border-right: 1px solid #00334c;
	border-left: 1px solid #00334c;
	border-bottom: 1px solid #00334c;
	text-align: center;
	font-size: 1em;
}


#topNav a{
	width: 20em;
	font: normal 1em trebuchet ms, verdana, sans-serif;
	border: 1px solid #00334c;
	color: #00334c;
	background-color: #cce0eb;
	padding: .2em 0;
	line-height: 2em;
	padding-left: .8em; /*link text is indented .8em*/
	padding-right: .8em; /*link text is indented .8em*/
	text-decoration: none;
	border-radius: .5em;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
   	-moz-box-shadow:    inset 0 0 10px #00334c;
   	-webkit-box-shadow: inset 0 0 10px #00334c;
   	box-shadow:         inset 0 0 10px #00334c;
}

#topNav a:hover { 
	color: #cce0eb;
	background-color: #00334c;
	border: 1px solid #cce0eb;
	border-radius: .5em;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
}

#topNav ul {
	margin: 0;
	padding: 0;
	text-align: center;
}

#topNav li {
	display: inline-block;
	padding: .2em .2em;
}


#content {
	border-right: 1px solid #00334c;
	border-left: 1px solid #00334c;
 	padding: 2em;
	text-align: left;
	vertical-align: top;
	line-height: 1em;
 	background-color: #ffffff;
}


#footer {
 	background-color: #cce0eb;
	border-top: 1px dotted #00334c;
	border-bottom: 1px solid #00334c;
	border-right: 1px solid #00334c;
	border-left: 1px solid #00334c;
	padding: .1em;
	line-height: .1em;
	text-align: center;
	font-size: .8em;
	color: #00334c;
}


#footer a{
	color: #006699;
	text-decoration: underline;
}


h1 {
 	color: #00334c;
}

h2 {
 	color: #00334c;
}

h3 {
 	color: #00334c;
}


/* Heading Styles */
h1 {
	font-size: 1.6em; 
	line-height: 1em;
	color: #00334c;
}

h2 {
	font-size: 1.2em;
	text-decoration: underline; 
	line-height: 1em;
	color: #00334c;
}


/* Link Styles */
a:link {
	text-decoration: underline; 
	color: #006699;
}

a:visited {
	text-decoration: underline; 
	color: #006699;
}

a:hover, a:active {
	text-decoration: none; 
	color: #00334c;
}


/* --- Font Styles --- */
.font1 {

	font-size: 2em; 
	color: #00334c;
}

.font2 {

	font-size: 1.3em; 
	color: #00334c;
}


/* --- Used to center anything --- */
.center {
	text-align: center;
}


/* List Styles */
.ulNs{
list-style-type: none;
}

li {
	line-height: 1.5em;
}


@media screen and (max-width: 768px) {

#wrapper {
	width: 99%;
}

#content {
	padding: .2em;
}

}

@media screen and (max-width: 480px) {

#skipTo {
		
	display: block;
		
}

.nav{
	width: 100%;
}

#content {
	float: left;
	clear: left;
	margin: 0 0 5px;
	padding: .2em; 
		
	
}

li {
	line-height: 1.8em;
}

}

