/**
***
***
***		Reset Code
***
***
***/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

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

body {
	line-height: normal;
	color: #313131;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #0e6599;
}

ol, ul {
	list-style: none;
}

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

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/**
***
***
***		Main Layout
***
***
***/

.main {
	/*--sets the main white body area--*/
	position: relative;
	max-width: 1000px;
	padding: 8px 20px 15px 20px;
	margin: 0 auto;
	background-color: #ffffff;
	z-index: 1;
	overflow: hidden;
	clear: both;
}

.headerbg {
	/*--sets the top bg and gray bg color--*/
	width: 100%;
	background: url(../images/bg.gif) top repeat-x #dfe2e7;
	float: left;
}

.footerbg {
	/*--sets the bottom bg--*/
	width: 100%;
	padding-bottom: 0px;
	background: url(../images/footerbg.gif) bottom repeat-x;
	float: left;
}

@media (max-width: 350px) {
	.footerbg {
		background: #0E6497;
	}
}

/**
***
***
***		Header
***
***
***/

.header {
	width: 100%;
	margin-bottom: 20px;
	background: url(../images/dotline.gif) bottom repeat-x;
	float: left;
}

.header img {
	float: left;
}

.cbr {
	/*--bottom right box corner for rounded boxes. There are various modifications in the css that change the image used but this controls the layout of the corner itself. Any changes made here will change all bottom right corners in the site.--*/
	position: absolute;
	bottom: 0;
	right: 0;
	width: 7px;
	height: 7px;
	background: url(../images/corners.gif) 7px 0;
}

.cbl {
	/*--bottom left box corner for rounded boxes. There are various modifications in the css that change the image used but this controls the layout of the corner itself. Any changes made here will change all bottom left corners in the site.--*/
	position: absolute;
	bottom: 0;
	left: 0;
	width: 7px;
	height: 7px;
	background: url(../images/corners.gif) 0 0;
}

#nav {
	position: relative;
	max-width: 700px;
	padding: 10px 0 8px 20px;
	margin: 40px 0 1px 0;
	background: url(../images/dotline-rev.gif) top right repeat-x;
	float: left;
}

#nav li {
	/*--sets the nav ul into a horizontal structure--*/
	float: left;
}
	
#nav li a {
	/*--styles the links for the left and right nav--*/
	display: block;
	color: #0d6498;
	padding: 10px 7px 10px 7px;
	font-size: 13px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

#nav li strong {
	/*--styles the links for the left and right nav--*/
	display: block;
	color: #0d6498;
	padding: 10px 18px 10px 18px;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	cursor: pointer;
}

#nav li a span {
	/*--styles the links for the left and right nav--*/
	border-bottom: 1px dotted #ffffff;
}

#nav li a:hover span {
	/*--styles the links for the left and right nav--*/
	color: #48883d;
	border-bottom: 1px dotted #48883d;
}

.selected a,
#nav .selected a,
#nav .selected strong {
	/*--styles the links for the left and right nav--*/
	color: #b51e24;
}

.selected ul li a {
	/*--styles the links for the left and right nav--*/
	color: #0d6498;
}
	
#nav .drop {	
	position: relative;
}

#nav .drop ul {
	position: absolute;
	max-width: 140px;
	left: -999em;
	padding: 10px 18px 5px 18px;
	line-height: 18px;
	background-color: #f5f5f5;
	z-index: 1;
}
	
#nav .drop ul li {	
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	clear: left;
}
	
#nav .drop ul li a {
	display: block;
	padding: 0 0 7px 12px;
	color: #0d6498;
	font-size: 12px;
	background: url(../images/navdot.gif) 0px 9px no-repeat;
	cursor: pointer;
}

#nav .drop ul li a span {
	color: #0d6498;
	border-bottom: 1px dotted #f5f5f5;
}

#nav .drop ul li a:hover span {
	color: #48883d;
	border-bottom: 1px dotted #48883d;
}

#nav li:hover ul, #nav li.sfhover ul {
	margin-left: 0;
	left: auto;
}

#nav .drop:hover a, #nav li.sfhover strong {	
	position: relative;
	display: block;
	color: #48883d;
	background-color: #f5f5f5;
}

#nav .drop:hover .ncbro {
	/*--bottom right box corner for rounded boxes. There are various modifications in the css that change the image used but this controls the layout of the corner itself. Any changes made here will change all bottom right corners in the site.--*/
	position: absolute;
	bottom: 0;
	right: -4px;
	width: 4px;
	height: 4px;
	background: url(../images/navbgr.gif);
}

#nav .drop:hover .bot {
	/*--bottom right box corner for rounded boxes. There are various modifications in the css that change the image used but this controls the layout of the corner itself. Any changes made here will change all bottom right corners in the site.--*/
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 176px;
	height: 5px;
	background: url(../images/bot.png);
}

#nav .drop:hover .nctr {
	/*--bottom right box corner for rounded boxes. There are various modifications in the css that change the image used but this controls the layout of the corner itself. Any changes made here will change all bottom right corners in the site.--*/
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	height: 5px;
	background: url(../images/dropcorners.gif) 15px 0;
}

#nav .drop:hover .nctl {
	/*--bottom left box corner for rounded boxes. There are various modifications in the css that change the image used but this controls the layout of the corner itself. Any changes made here will change all bottom left corners in the site.--*/
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 5px;
	background: url(../images/dropcorners.gif) 0 0;
}

#nav .drop:hover .ncbr {
	/*--bottom right box corner for rounded boxes. There are various modifications in the css that change the image used but this controls the layout of the corner itself. Any changes made here will change all bottom right corners in the site.--*/
	position: absolute;
	bottom: 0;
	right: 0;
	width: 5px;
	height: 5px;
	background: url(../images/dropcorners.gif) 5px 0;
}

#nav .drop:hover .ncbl {
	/*--bottom left box corner for rounded boxes. There are various modifications in the css that change the image used but this controls the layout of the corner itself. Any changes made here will change all bottom left corners in the site.--*/
	position: absolute;
	bottom: 0;
	left: 0;
	width: 5px;
	height: 5px;
	background: url(../images/dropcorners.gif) 10px 0;
}

/**
***
***
***		mobile menu
***
***
***/
.open-button {
	position: absolute;
	cursor: pointer;

}
.open-button:after {
	content: '';
	display: block;
    box-sizing: border-box;
    float: right;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
}
@media (max-width: 768px) {
	.nav-toggle span {
		display: block;
		width: 25px;
		height: 2px;
		background-color: black;
		margin: 6px 0;
	}
	.header {
		position: relative;
	}
	.nav-toggle {
		position: absolute;
		right: 20px;
    	top: 35px;
    	z-index: 1;
    	cursor: pointer;
	}
	.cbl,
	.cbr {
		display: none;
	}
	.header img {
		float: none;
	}
	.header > a,
	.header > a:hover {
		border: none;
	}
	#nav  {
		display: none;
		position: absolute;
	    z-index: 100;
	    background: #fff;
	    right: 0px;
	    top: 100%;
	    margin-top: 0;
	    padding-right: 20px;
	    width: 100%;
	    border: 1px solid #ccc;
    	padding-bottom: 0;
	    box-sizing: border-box;
	}	
	.menu-open #nav {
		display: block;
	}
	#nav li {
		float: none;
	}
	#nav > li > a {
		font-size: 16px;
		padding: 15px 17px;
		border-bottom: 1px solid #ccc;
	}
	#nav li:last-child a {
		border-bottom: none;
	}
	#nav .drop ul li a {
		padding: 10px 0 10px 12px;
		background-position: 0px 17px;
	}
	.open-button {		
	    display: block;
	    width: 100%;
	    top: 0;
	    left: 0;
	    height: 49px;

	}
	.open-button:after {
		margin-top: 15px;
    	margin-right: 15px;
	}
	.submenu-open .open-button:after {
		transform: rotate(225deg);
    	margin-top: 20px;
	}
	#nav .drop ul {
		position: static;
		max-width: 100%;
		display: none;
	}
	#nav .drop.submenu-open ul {
		display: block;
	}
	#nav .drop.submenu-open > a{
		border: none;
	}
}
@media (max-width: 400px) {
	.header img {
		width: 200px;
		height: auto;
	}
	.nav-toggle {
		top: 20px;
	}
}
@media (min-width: 769px) {
	.nav-toggle {
		display: none;
	}
	.open-button {
		display: none;
	}
}

/**
***
***
***		Body
***
***
***/

.subnav {
	width: 160px;
	float: left;
}

.subnav li {
	width: 100%;
}

.subnav li a {
	display: block;
	width: 150px;
	padding: 5px;
	border-bottom: 0;
}

.subnav li a:hover,
.subnav li ul li a:hover {
	color: #48883d;
	background-color: #f5f5f5;
}

.subnav li ul {
	margin: 0;
}

.subnav li ul li {
	width: 100%;
}

.subnav li ul li a {
	display: block;
	width: 135px;
	padding: 5px 5px 5px 20px;
	border-bottom: 0;
}

.subbody {
	max-width: 748px;
	padding-left: 30px;
	line-height: 22px;
	border-left: 1px solid #f0f1f3;
	float: left;
}

.subbody img {
	margin: 0 20px 20px 0;
	float: left;    
	max-width: 100%;
    height: auto;
}

.subbody-nosubnav {
	max-width: 940px;
	line-height: 22px;
	float: left;
}

.subbody-nosubnav .subbox {
	position: relative;
	max-width: 585px;
	height: 109px;
	padding: 45px 30px 0 325px;
	margin-bottom: 20px;
	color: #e7eef2;
	background: url(../images/subswoop.gif) top right no-repeat #0b5079;
	z-index: -1;
	overflow: hidden;
	clear: both;
}

.subbox {
	position: relative;
	max-width: 393px;
	height: 121px;
	padding: 33px 30px 0 325px;
	margin-bottom: 20px;
	color: #e7eef2;
	background: url(../images/subswoop.gif) top right no-repeat #0b5079;
	z-index: -1;
	overflow: hidden;
	clear: both;
}

.nopic {
	maxwidth: 688px;
	height: auto;
	padding: 33px 30px 18px 30px;
	margin-bottom: 20px;
	color: #e7eef2;
	background: url(../images/nopic-swoop.gif) top right no-repeat #0b5079;
	z-index: -1;
	overflow: hidden;
	clear: both;
}

.nopic .ctl {
	position: absolute;
	top: 0;
	left: 0;
	width: 7px;
	height: 7px;
	background: url(../images/nopic-corners.gif) 0 0;
}

.nopic .cbl {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 7px;
	height: 7px;
	background: url(../images/nopic-corners.gif) 14px 0;
}

.nopic .cbr {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 7px;
	height: 7px;
	background: url(../images/nopic-corners.gif) 7px 0;
}

.subbox .pic {
	position: absolute;
	top: 0;
	left: 0;
	width: 295px;
	height: 154px;
	max-width: 100%;
}

.subbox .pic img {
	border: 0;
	margin: 0;
	max-width: 100%;
	height: auto;
}
.ppt-download {
	border-bottom: none;
}
.ppt-download img {
	width: 40px;
	margin: 0;
	display: inline-block;
	float: none;
	vertical-align: middle;
}

@media (max-width: 990px) {
	.subbody {
		border-left: none;
	    padding-left: 0;
	    float: none;
	    max-width: 100%;
	}
}
@media (max-width: 767px) {
	.subbox,
	.subbody-nosubnav .subbox {
		padding: 20px;
	    height: auto;
	    text-align: center;
	    max-width: 100%;
	    background: #0b5079;
	}
	.subbox .pic,
	.subbody-nosubnav .subbox .pic {
		position: static;
	    height: auto;
	    display: block;
	    margin: 0 auto 20px;
	    width: 100%;
	}
	.subbox .pic img,
	.subbody-nosubnav .subbox .pic img {
		float: none;
	}
	.subbox p,
	.subbody-nosubnav .subbox p {
		text-align: left;
	}
}

/**
***
***
***		Footer
***
***
***/

.footer {
	max-width: 960px;
	margin: 15px auto 10px auto;
	color: #ffffff;
	font-size: 11px;
	clear: both;
}

.footer a {
	color: #ffffff;
	border-bottom: 0;
}

.footer a:hover {
	color: #add6ee;
	border-bottom: 0;
}

.address {
	line-height: 20px;
	float: left;
}

.copyright {
	line-height: 20px;
	text-align: right;
	float: right;
}
@media (max-width: 980px) {
	.footer {
		padding: 0 20px;
	}
}

@media (max-width: 767px) {
	.footer .address {
		margin-bottom: 0;
	}
}
@media (max-width: 600px) {
	.footer .address,
	.copyright {
		float: none;
		text-align: center;
	}
	.home .main {
		padding: 0;
	}
}