/* GENERAL STYLES */
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #000000;
	text-align: center;
	background: url(images/backdrop.gif) center top repeat-x #007EC3;
	margin: 0px 0px 20px 0px;
}
h1 {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 140%;
	font-weight: normal;
	color: #005493;
	margin: 0px 0px 15px 0px;
}
h2 {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #666666;
	margin: -2px 0px 12px 0px;
}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: #333333;
	margin: 0px 0px 9px 0px;
	line-height: 1.5em;
}
p.small {
	font-size: 70%;
	margin: 0px 0px 6px 0px;
	line-height: 1.4em;
}
ul					{ margin: 12px 0px 12px 30px; padding: 0px 0px 1px 0px; /* Need padding for cross-browser 

differences */ }
li					{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 75%; color: #333333; margin: 

0px 0px 3px 0px; text-align: left; line-height: 1.5em; }
ol					{ margin: 6px 0px 6px 20px; padding: 0px 0px 1px 0px; /* Need padding for cross-browser 

differences */ }
ol li				{ font-size: 70%; margin: 9px 0px 5px 0px; line-height: 1.3em; }
ol li div			{ font-size: 100%; margin: 5px 0px 5px 35px; line-height: 1.3em; }
ol li div div		{ float: left; font-size: 100%; margin: 0px 0px 0px -35px; }
ol li div.sub		{ font-size: 100%; margin: 0px 0px 5px 60px; line-height: 1.3em; }
ol div.sub div		{ float: left; font-size: 100%; margin: 0px 0px 0px -40px; }
ol li p				{ font-size: 100%; margin: 5px 0px 5px 0px; line-height: 1.3em; }



a:link, a:visited, a:active {
	color: #085E99;
	text-decoration: none;
}
a:hover {
	color: #007EC3;
	text-decoration: underline;
}
td {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	color: #333333;
	padding: 0px 20px 3px 0px;
	line-height: 1.5em;
}
select {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #333333;
	width: 300px;
	margin: 0px;
}
input {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #333333;
	width: 300px;
	margin: 0px;
}
textarea {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #333333;
	width: 300px;
	margin: 0px;
}
.auto {
	width: auto;
}



/* LAYOUT STYLES */
/*#outer {
	position: relative;
	width: 940px;
	margin-right: auto;
	margin-left: auto;
  	border: 1px solid transparent;
}*/
#outer p.footer {
	font-size: 70%;
	color: #BFD2D2;
	margin: 0px 35px 9px 35px;
	line-height: 1.25em;
	text-align: left;
}
#outer p.footer a:link, #outer p.footer a:visited, #outer p.footer a:active {
	color: #BFD2D2;
}
#outer p.footer a:hover {
	color: #FFFFFF;
}
#outer span {
	float: right;
}
/*
#tagline {
	position: absolute;
	right: 40px;
	top: 29px;
}
#logo {
	position: absolute;
	left: 40px;
	top: 20px;
}*/
/*
#pagetop {
	position: relative;
	height: 35px;
	background: url(images/pagetop.gif) center top no-repeat;
	margin: 80px 0px 0px 0px;
}*/
/*
#usercontent {
	position: relative;
	background: url(images/page.png) center top repeat-y;
}*/
/*#maincontent {
	position: relative;
	float: left;
	width: 555px;
	margin: 0px 60px 0px 0px;
	padding: 0px 0px 0px 40px;
	text-align: left;
}/*
html>body #maincontent { width: 515px }*/
.listbox1 {
	float: left;
	width: 267px;
	margin: 0px 10px 0px 0px;
}
.listbox2 {
	float: left;
	width: 237px;
}/*
#sidecontent {
	position: relative;
	float: left;
	width: 283px;
	text-align: left;
	z-index: 10;
	height: 526px;
}*/
#footer {
	position: relative;
	clear: both;
	margin: -10px 0px 0px 40px;
	padding: 17px 0px 0px 0px;
	text-align: left;
}
html>body #footer {
	padding: 10px 0px 0px 0px;
}
#footer img { margin: 0px 10px 5px 0px; }
#bubbles {
	position: absolute;
	bottom: 239px;
	right: 40px;
}
html>body #bubbles {
	bottom: 5px;
}
/*
#pagebot {
	position: relative;
	height: 35px;
	background: url(images/pagebot.png) center bottom no-repeat;
	padding: 0px 0px 5px 0px;
	margin: 0px 0px 5px 0px;
}
*/


/* FADE STYLES */
/*#homepage		{ position: relative; margin: 0px 0px 21px 0px; width: 516px; }*/
#top-right		{ position: absolute; top: 0px; right: -1px; z-index:20; }
#bottom-left	{ position: absolute; bottom: 0px; left: 0px; z-index:20; }
img				{ filter:alpha(opacity=100);}
img.idupe		{ position:absolute; z-index:10; visibility:hidden; margin: 1px 0px 0px 1px; }



/* SUBNAV STYLES */
#menu {
	font-size: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style: none;
}
#menu li {
	font-size: 80%;
	margin: 0px;
	font-weight: bold;
}
#menu li a {
	display: block;
	color: #085E99;
	text-decoration: none;
	padding: 4px 0px;
}
#menu li a.on {
	color: #007EC3;
}
#menu li a:hover {
	color: #007EC3;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu li { float: left; height: 1%; text-align: left }
* html #menu li a { height: 1%; }
/* End */



/*---------------NEW EDITS FOR RESPONSIVE---------------*/

#outer {
	position: relative;
	max-width: 940px;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
  	border: 1px solid transparent;
}

#tagline {
	float: right;
	max-width: 100%;
	padding: 29px 40px 15px;
}
#logo {
	float: left;	
	max-width: 100%;
	padding: 20px 40px 15px;
}
#pagetop {
	position: relative;
	clear: both;
	position: relative;
	height: 30px;
	background: #ffffff;
	border-radius: 0 23px 0 0;
	margin: 85px 10px 0px 10px; 
	background-size: contain;
	z-index: 11;
	box-shadow: -4px -7px 6px 1px rgba(0, 0, 0, 0.1);
}
#pagebot {
	position: relative;
	height: 35px;
	background-color: #ffffff;
	border-radius: 0 0 0 23px;
	padding: 0px 0px 5px 0px;
	margin: 0 10px 21px 10px;
	box-shadow: -1px 8px 5px 3px rgba(0, 0, 0, 0.3);
}

#usercontent {
	position: relative;
	/*background: url(images/page.png) center top repeat-y;
	background-size: 100%;*/
	background-color:#ffffff;
	margin: 0 10px;
	box-shadow: 0 0px 5px 3px rgba(0, 0, 0, 0.3);
}
#maincontent {
	position: relative;
	float: left;
	margin: 0;
	padding: 0 31px 0 30px;
	text-align: left;
	max-width: 515px; width: 56%;
	border-right: 1px solid #CCCCCC;
	min-height: 534px;
}	

#sidecontent {
	position: relative;
	float: left;
	max-width: 283px;
	text-align: left;
	z-index: 10;
	height: auto;
	width: 44%;
	padding-left: 28px;
}

#homepage{ position: relative; margin: 0px 0px 21px 0px; width: 100%; }
#maincontent #homepage > img {width: 100%!important; max-width: 100%; height: auto;}
.listbox1 {
	float: left;
	max-width: 267px;
	width: 49%;
	margin: 0px 10px 0px 0px;
}
.listbox2 {
	float: left;
	width: 48%;
	max-width: 237px;
}

.listbox2 ~ p {clear: both; display: block; }

.toggle {background: url(images/toggle.png); z-index: 9999; width: 38px; position: absolute; right: 15px; height: 38px; background-color: #0667A5; border: 1px solid #fff; display: none; top: 99px;}


@media screen and (max-width: 979px){
	#sidecontent {width: 35%; padding-left: 4%;}
	#maincontent {width: 52%; padding:0 4%;}
	#bubbles {position: static;}
	#outer span { bottom: -39px;padding: 26px;position: absolute;right: 0;}
}
@media screen and (min-width: 768px){
	#sidecontent_top {display: none!important}	
}
@media screen and (max-width: 767px){
	#outer > a {display: inline-block;}
	.toggle {  border-radius: 3px;  right: 29px;  top: 76px;}
	#tagline,#logo {display: block; margin: auto; float: none;}
	#logo {padding-top: 27px;}
	#tagline {max-width: 80%; padding: 10px 0 0 0; height: auto;}
	#pagetop {margin-top: 20px;}
	#sidecontent, #maincontent {display: block; margin: auto; float: none; width: 90%; border:none;}
	#sidecontent {margin-bottom: 30px; padding-left: 0;}
	#maincontent {border: none; padding-bottom: 30px;}
	#footer {clear: both;margin: auto;position: relative;text-align: left;width: 90%; text-align: center; margin-top: 60px; border-top:1px solid #CCCCCC; }
	#outer p.footer {text-align: center;} 
	.toggle {display: block;}
	#sidecontent {display: none;}
	#sidecontent_top {display: none; position: absolute; right: 0; top:150px;z-index: 9999; width: 100%;}
	#sidecontent_top #menu {
  font-size: 100%;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #fff;
  z-index: 999;  }
   
  #sidecontent_top #menu li {text-align: left; border-bottom:1px solid #73c9ff; padding-left: 15px; padding-right: 15px;  }
  #sidecontent_top #menu li a {padding: 8px 0;}
  html > body #footer {padding: 20px 0 0;}
  #outer span {left: 0;}
}

@media screen and (max-width: 639px){
	#maincontent form input, #maincontent form textarea {width: 190px;}
	#outer  {width: 99%;}
	ul {margin-left: 20px;}
	.listbox1 {
	float: none;
	max-width: 100%;
	width: 100%;}
.listbox2 {
	float: none;
	width: 100%;
	max-width: 100%;}
	#outer > a {display:block;}
	#logo {float: left; padding: 35px 10px;}

}
@media screen and (max-width: 479px){
	#sidecontent_top {top: 140px;}
	.toggle {right: 17px;}
}


/*-------------END NEW EDITS FOR RESPONSIVE-------------*/