@charset "UTF-8";
/* CSS Document */

/* -------------- GLOBAL STYLES -------------- */

html {
	overflow: -moz-scrollbars-vertical;
}
html {
	overflow-x: auto;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0 2em;
	color: #888;
	font-size: .8em;
	text-align: center;
}
h1, h2, h3 {
	color: #666;
	font-weight: normal;
	text-transform: lowercase;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.6em;
}
h3 {
	font-size: 1.4em;
}
p {
	margin: .5em 0;
}
a {
	color: #888;
}
a.moreHome {
	color: #84AF00;
	text-decoration: none;
}
a:hover, a:active {
	color: #84AF00;
	text-decoration: none;
}
table {
	display: block;
	margin: 2em auto;
	border-collapse: collapse;
	color: #666;
}
table th {
	font-size: 14pt;
	text-transform: lowercase;
	font-weight: bold;
	padding: .4em .8em;
	border: 1px solid #8CA521;
	border-top: 0;
}
table th a, table th a:hover, table th a:visited {
	color: #666;
	text-decoration: none;
}
table th.vertical {
	font-size: 10pt;
	text-align: left;
	text-transform: none;
	font-weight: bold;
}
table td {
	border: 1px solid #8CA521;
	text-align: center;
	padding: .2em .5em;
}
table td.blank {
	border: 0;
	border-bottom: 1px solid #8CA521;
}
table tr.highlight {
	background: #D3E269;
}

/* ------------- TEMPLATE STYLES ------------- */

#container {
	width: 70em;
	text-align: left;
	margin: 1em auto 0 auto;
}
#main {
	clear: both;
	background: #FFF;
}
#contents {
	padding: 0 2em 0 2em;
}
#contents h1 {
	display: inline-block;
	width: 100%;
}
#contents p.mission, #contents p.intro, #contents h2.intro {
	display: inline-block;
}

/* -------------- HEADER STYLES -------------- */

#header {
	position: relative;
	width: 100%;
	height: 7em;
	width: 70em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers. It must match the width of #container*/
	padding: 0;
	border-bottom: 1px solid #AAA;
	z-index: 100;
}
#header h1 {
	position: absolute;
	bottom: 0;
}
#header a {
	text-decoration: none;
}
#phoneNum {
	font-size: 18pt;
	font-weight: bold;
	color: #A0CF11;
	text-align: right;
}
#utilities {
	text-align: right;
	font-size: 90%;
	margin-top: .4em;
}
#phoneNum p, #utilities p {
	margin: 7px 0;
}
#logo {
	float: left;
	margin: 0;
	padding: 0;
}
#tagline {
	position: absolute;
	left: 150px;
	bottom: 12px;
	margin: 0;
	font-size: 80%;
}
#headerBar, #footerBar {
	height: 2em;
}
#headerBar {
	border-left: 1px solid #AAA;
}

/* ------------- MAIN NAV STYLES ------------- */

#mainNav {
	width: 35em;
	position: absolute;
	right: 0;
	bottom: 0;
}
#mainNav ul#primary {
	padding: 0;
	margin: 0;
	list-style-type: none;
	position: absolute;
	bottom: -1px;
	width: 35em;
	/* a width is required for Opera, older Mozilla browsers, and Konqueror browsers. It must match the width of #container */
}
#mainNav ul#primary ul {
	width: 12em;
	z-index: 10000;
}
#mainNav ul li  {
	display: inline;
	list-style: none;
	float: right;
	position: relative;
	margin: 0;
	padding: 0;
}
#mainNav ul#primary li  {
	margin-left: .3em;
}
#mainNav ul#primary ul li  {
	width: 12em;
	margin: 0;
	padding: 0;
}
#mainNav ul#primary a, #mainNav ul#primary a:visited {
	display: block;
	text-decoration: none;
	color: #333;
	width: 6.5em;
	height: 1.2em;
	padding: .2em 0 .5em 0;
	margin: 0;
	text-align: center;
}
body.homeBody #mainNav ul#primary li.home a, body.homeBody #mainNav ul#primary li.home a:hover,
body.plansBody #mainNav ul#primary li.plans a, body.plansBody #mainNav ul#primary li.plans a:hover,
body.productBody #mainNav ul#primary li.product a, body.productBody #mainNav ul#primary li.product a:hover,
body.resourceBody #mainNav ul#primary li.resource a, body.resourceBody #mainNav ul#primary li.resource a:hover,
body.contactBody #mainNav ul#primary li.contact a, body a.contactBody #mainNav ul#primary li.contact a:hover {
	border: 1px solid #AAA;
	border-bottom: 1px solid #FFF;
	border-top:.5em solid #A0CF11;
	background: #FFF;
	padding-bottom: .5em;
}
/*#mainNav ul#primary a.current, #mainNav ul#primary a.current:hover {
	border: 1px solid #AAA;
	border-bottom: 1px solid #FFF;
	border-top:.5em solid #A0CF11;
	background: #FFF;
	padding-bottom: .5em;
}*/
#mainNav ul#primary a {
	background: #B5B5B5;
	border: 1px solid #AAA;
	border-bottom: none;
	border-top:.5em solid #818181;
	font-size: 90%;
}
#mainNav ul#primary ul {
	visibility: hidden;
	position: absolute;
	height: 0;
	top: 2.1em;
	width: 12em;
	margin: 0;
	padding: 0;
	border-top: 1px solid #8CA521;
	z-index: 1000;
}
body.plansBody #mainNav ul#primary li.plans ul, body.productBody #mainNav ul#primary li.product ul {
	border-top: 1px solid #AAA;
}
#mainNav ul#primary ul a, #mainNav ul#primary ul a:visited {
	display: block;
	background: #D3E269;
	height: auto;
	width: 12em;
	color: #333;
	text-align: left;
	line-height: 1.2em;
	padding: .5em;
	border: 1px solid #8CA521;
	border-width: 0 1px 1px 1px;
	margin: 0;
	z-index: 2000;
}
body.plansBody #mainNav ul#primary li.plans ul a, body.plansBody #mainNav ul#primary li.plans ul a:visited,
body.productBody #mainNav ul#primary li.product ul a, body.productBody #mainNav ul#primary li.product ul a:visited {
	display: block;
	background: #FFF;
	height: auto;
	width: 12em;
	color: #333;
	text-align: left;
	line-height: 1.2em;
	padding: .5em;
	border: 1px solid #AAA;
	border-width: 0 1px 1px 1px;
	margin: 0;
}
body.plansBody #mainNav ul#primary li.plans ul a:hover, body.productBody #mainNav ul#primary li.product ul a:hover {
	display: block;
	background: #A0CF11;
	color: #000;
	height: auto;
	width: 12em;
	text-align: left;
	line-height: 1.2em;
	padding: .5em;
	border: 1px solid #AAA;
	border-width: 0 1px 1px 1px;
	margin: 0;
}
#mainNav ul#primary ul a:hover {
	background: #8CA521;
	color: #FFF;
}
#mainNav ul#primary a:hover, #mainNav ul#primary :hover > a {
	margin-top: 0;
	border-color: #8CA521;
	background: #D3E269;
	padding-bottom: .5em;
}
#mainNav ul#primary a.drop:hover, #mainNav ul#primary :hover > a.drop {
	border-bottom: 1px solid #D3E269;
}
#mainNav ul#primary li:hover ul, #mainNav ul#primary a:hover ul{
	visibility: visible;
}
#mainNav ul#primary, #mainNav ul#primary, #mainNav ul#primary {
	margin: 0;
	padding: 0;
}

/* -------------- FOOTER STYLES -------------- */

#footerBar {
	border-bottom: 1px solid #AAA;
	border-right: 1px solid #AAA;
}
#footer {
	margin-top: .5em;
	margin-bottom: 1em;
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	color: #AAA;
}
#footer p span {
	font-size: 90%;
}
#footer p.copyright {
	width: 17em;
	float: left;
}
#footer p.links {
	width: 37em;
	float: left;
	text-align: center;
}
#footer p.contact {
	width: 14em;
	float: right;
	text-align: right;
}
#footer a {
	color: #AAA;
}
#footer a:hover {
	color: #84AF00;
}

/* ------------- HOMEPAGE STYLES ------------- */

#promoAd {
	height: 300px;
	width: 28em;
	border: 1px solid #AAA;
	overflow: hidden;
}
#promoAd ul {
	position: relative;
	height: 300px;
}
#promoAd ul, #promoAd li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#promoAd img {
	display: block;
	margin: 0 auto;
	padding-top: 15px;
	border: 0;
}
#promoAd a {
	display: block;
	height: 300px;
	width: 28em;
}
#promoAd a.green {
	background: url(/images/green_bkgd.jpg) repeat-x bottom;
}
#promoAd a.yellow {
	background: url(/images/yellow_bkgd.jpg) repeat-x bottom;
}
#promoAd a.blue {
	background: url(/images/blue_bkgd.jpg) repeat-x bottom;
}
#mainContent {
	width: 36em;
	height: 23em;
	float: right;
	position: relative;
}
#mainContent h2 {
	font-size: 1.8em;
	margin-left: 6.8em;
}
#mainContent p {
	margin-left: 12em;
}
#mainContent div img {
	padding: 6px;
	border-bottom: 1px solid #AAA;
	border-right: 1px solid #AAA;
	float: left;
	margin-right: 1.8em;
}
#mainContent #topContent, #mainContent #bottomContent {
	height: 10em;
	position: absolute;
}
#mainContent #topContent {
	top: 0;
}
#mainContent #bottomContent {
	bottom: 0;
}
p.mission {
	margin: 1em 0 2em 0;
	display: inline-block;
}

/* ---------- SERVICE MAINPAGE STYLES ---------- */

#planGroup {
	width: 80%;
	margin: 0 auto;
}
div.plan {
	float: left;
	width: 33%;
	height: 27em;
	position: relative;
	background-color: #666;
	color: #FFF;
	border-left: 1px solid #FFF;
	padding-bottom: 1.5em;
}
div#nonprofit {
	background: #666;
	border: 1px solid #FFFFFF;
	/*border-left: 1px solid #FFFFFF;*/
	color: #FFF;
	text-align: center;
	width: 99.4%;
	margin: 0;
	padding: 0;
}
div#nonprofit p {
	display: block;
	background: url(/images/pencil.jpg) no-repeat center left;
	width: 29em;
	height: 46px;
	margin: 0 auto;
	padding: 0;
}
div#nonprofit p span {
	display: block;
	padding-top: 15px;
	text-align: right;
}
div.plan h2 {
	display: block;
	width: 100%;
	font-weight: normal;
	font-size: 14pt;
	color: #FFF;
	padding: .2em .5em;
	border-bottom: 1px solid #FFF;
}
div.plan h2 a, div.plan h2 a:hover, div.plan h2 a:visited {
	text-decoration: none;
	color: #FFF;
	border: 0;
}
div.plan h2 span, .firstCol h3 span, .secondCol h3 span {
	float: left;
	cursor: pointer;
}
div.plan h2 img {
	margin: .2em 0 0 .5em;
	border: 0;
}
div.plan ul {
	list-style-type: none;
	margin: 0;
	padding: .8em;
}
div.plan li {
	font-size: 90%;
	margin-bottom: .8em;
}
div.moreInfo {
	position: absolute;
	bottom: .7em;
	right: .7em;
}
div.moreInfo a, div.moreInfo a:hover {
	display: block;
	padding: .2em .5em;
	background-color: #888;
	color: #FFF;
	font-size: 8pt;
	text-decoration: none;
}
#included, #how-much {
	border: 1px solid #AAA;
	height: 13em;
	margin-bottom: 2em;
}
#remoteService, #clientPortal {
	border: 1px solid #AAA;
	height: 16em;
	margin-bottom: 2em;
}
#remoteService p, #clientPortal p {
	margin: 10px 20px 0 20px;
}
#remoteService ol, #clientPortal ol {
	margin: 0 20px 0 60px;
	padding: 0;
}
#included.short, #how-much.short {
	height: 12em;
}
#included.long, #how-much.long {
	height: 14.5em;
}
#included img, #how-much img, #glance img, #start img, #remoteService img, #clientPortal img, #instantSupport img {
	position: absolute;
	padding-left: .5em;
	margin-top: -30px;
	margin-left: 20px;
	background-color: #FFF;
}
#included h2, #how-much h2, #glance h2, #start h2, #remoteService h2, #clientPortal h2, #instantSupport h2 {
	display: block;
	background-color: #FFF;
	position: absolute;
	margin-top: -15px;
	margin-left: 85px;
	padding: 0 .5em;
}
#included ul, #how-much ul, #how-much p.top, #glance p.top, #start p.top, #remoteService p.top, #clientPortal p.top, #instantSupport p.top {
	margin-top: 40px;
	margin-left: 2em;
	margin-right: 2em;
}
#included ul {
	padding: 0;
	list-style-position: inside;
}
#how-much ul.second {
	margin-top: 10px
}
#included li, #how-much li {
	margin-bottom: .5em;
}
#how-much img {
	margin-top: -50px;
}
#how-much ul {
	list-style-type: none;
	margin-left: 0;
	padding: 0 2em;
}
#glance, #start {
	margin-top: 5em;
	border: 1px solid #AAA;
	height: 10em;
}
#instantSupport, #start.long {
	margin-top: 5em;
	border: 1px solid #AAA;
	height: 11.5em;
}
#glance p, #start p {
	margin: 0 2em .5em 2em;
}
#map {
	width:450px;
	height:300px;
	float:right;
	border:1px solid #AAA;
	margin-left:20px;
	margin-top: 2em;
}
.error {
	color: #CC3333;
}
#success {
	font-weight: bold;
	color: #A0CF11;
}
/* ---------- TECHNICIAN PAGE STYLES --------- */

#loginForm {
	margin-top: 2em;
}
#loginForm label {
	display: inline-block;
	width: 8em;
}
#loginForm p.forgot {
	font-size: .8em;
	margin: 0 0 auto 10em;
}

/* ---------- MISC STYLES FOR REUSE ---------- */

.titleLink a, .titleLink a:hover, .titleLink a:visited {
	color: #666;
	text-decoration: none;
}
.whiteOutline {
	border: 1px solid #FFF;
}
.txtCenter {
	text-align: center;
}
.firstCol {
	margin-right: 2em;
	float: left;
}
.secondCol {
	float: right;
}
.emerFirstCol, .emerSecondCol {
	width: 31.8em;
	margin-top: 2em;
}
.emerFirstCol {
	margin-right: 2em;
	float: left;
}
.emerSecondCol {
	float: right;
}
.marginTop {
	margin-top: 2em;
}
h2.marginTop {
	margin-top: 1em;
}
.firstCol p, .secondCol p, .fullCol p, .firstCol h3, .secondCol h3, .fullCol h3 {
	margin-left: 80px;
}
#how-much p {
	margin-left: 2em;
	margin-right: 2em;
}
.firstCol .emergency p, .secondCol .emergency p, .secondCol #how-much p, .contactForm p, .contactForm p {
	margin-left: 0;
}
.firstCol, .secondCol {
	width: 31.8em;
	margin-top: 2em;
}
.firstCol img, .secondCol img, .fullCol img {
	float: left;
	margin-right: 20px;
}
.firstCol h3 img, .secondCol h3 img {
	float: left;
	margin: .2em 0 0 .2em;
	border: 0;
}
.firstCol h3 img.leftMargin, .secondCol h3 img.leftMargin {
	margin-left: .5em;
}
.txtLarge {
	font-size: 17pt;
}
.txtSmall {
	font-size: 80%;
}
.capital, h3 span.capital {
	text-transform: uppercase;
	float: none;
	cursor: auto;
}
.fltLft {
	float: left;
	margin-right: 10px;
}
.clrFlt { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
	margin: 0;
	padding: 0;
}
.mobile {
	display: none;
}