/* CSS Document */

/* A simple Browser Reset */

*{
margin:0;
padding:0;
}

body{
padding: 0px;
margin-bottom: 20px;
}
img{
	border: none;
}
a {
	color: #FFFFFF;
	text-decoration: none;	
}
/* General Layout
________________________________*/

#page{
width:754px;
position:relative;
margin:0 auto;
}

#main{
	clear:left;
	position: static;
}

/* Layout is inspired by the holy Grail,
except that the content is wrapped around
a floating div that pull the sidebars.
*/

#content {
float:left;
width:100%;
margin-right:-100%;
background: #3981CB url(images/mainrightbottom.jpg) no-repeat 100% 100%; /*left green */
}
.column {
float:left;
}
/* -- compensating the padding on sidebars --
multiply the padding of columns by 2, and remove
it from the width of each sidebar.
*/

#right{width:264px;}   /* 150 - (15x2) */

/* You can easily change the layout proportions
by just changing the matching values. For example,
to have a 100px left sidebar, I just have to change
all the 220 to 100 (and the -220 to -100).
*/

#content-inner {
	float:none;
	margin-right: 264px;  /* RIGHT Sidebar width */
	border-right-width: 2px;
	border-right-style: none;
	border-right-color: #FFFFFF;
}
.right{
float:right;
width: 264px;         /* RIGHT Sidebar width */
}
#footer, #header{
	clear:both;
	text-align:center;
	width: 754px;
}
/*Footer Elements*/
.footerLeft
{
	clear:none;
	float:left;
	width:490px;
}
.copyright{
	clear: left;
	float: none;
	display: block;
	font: 14px Arial, Helvetica, sans-serif;
	color: #333333;
}
.address{
	clear: left;
	float: none;
	display: block;
	margin: 0px;
	padding: 0px;
	font: bold 14px Arial, Helvetica, sans-serif;
	color: #333333;
}
.BBB
{
	clear:none;
	float:right;
	width:264px;
	text-align:center;
}

.creditCard{
	width: 48px;
	height: 30px;
	border: none;
}
/* Validation Icons */
#validationIcons
{
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 4px;
margin-bottom: 0px;
}
a.validationIcons
{
	color: #333333;
}
.validationText{
	clear: left;
	float: none;
	display: block;
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}
/* Equal Height Columns
________________________________*/

/* The columns are created using empty DIV that have to be
inside the main wrapper (#page) and should be positionned
relative. Each DIV have the same width as its corresponding
columns (done by using class), and by postionning them
absolutelly (bottom) and giving them a height of 100%, the
DIVs fill the entire space that the columns should fill.
As the actual content is not positionned absolutelly, the
footer still behave normally and is pushed down by it. Last
but not least, we have to set the z-index of the real
content to 2 to bring it back on top of the columns.
*/

.bg{
position:absolute;
bottom:0;
height:100%;
}
#bgright{right:0;}
#bgcenter{
right:0;
width:100%;
}
#content, #right, #header, #footer, #NAVIGATION, #SUBNAVcontainer{
position:relative;
z-index:2;
}

/* COLORS */
#header, #footer{background-color: #FFFFFF;}
#bgright{
background-color: #3981CB;
}
#bgcenter{
background-color: #C1E59F;
}



/* From Original Design */
#header{
	background:#FFFFFF url(images/header.jpg) no-repeat bottom;
	width: 754px;
	height: 94px;
	position: relative;
}
#headerLogoLeft
{
	background: url(images/logo-raleigh.jpg);
	position: absolute;
	height: 71px;
	width: 144px;
	left: 20px;
	top: 21px;

}
#headerLogoRight
{
	position: absolute;
	height: 77px;
	width: 144px;
	top: 22px;
	right: 20px;

}
#headerPhone
{
	position: absolute;
	right: 295px;
	top: 35px;

}
.phoneNumber
{
	font: normal 24px Arial, Helvetica, sans-serif;
	display: block;

}
.phoneNumberSub
{
	font: 14px Arial, Helvetica, sans-serif;

}
#footer{
	padding-top: 8px;
}

/*-------------------------------------NAVIGATION--------------------------*/
#NAVIGATION {
float:left;
clear:both;
width:754px;

height:38px;
background-color:#3981CB;
}

#NAVhome
{
position:relative;
width: 69px;
height: 38px;
background: url("images/home_on.jpg") no-repeat;
display: inline;
margin:0;
padding:0;
border:none;
float:left;
}
#NAVhome:hover img
{
visibility:hidden;
}
#NAVservices
{
position:relative;
width: 82px;
height: 38px;
background: url("images/service_on.jpg") no-repeat;
display: inline;
margin:0;
padding:0;
border:none;
float:left;
}
#NAVservices:hover img
{
visibility:hidden;
}
#NAVmaintenance
{
position:relative;
width: 110px;
height: 38px;
background: url("images/maintenance_on.jpg") no-repeat;
display: inline;
margin:0;
padding:0;
border:none;
float:left;
}
#NAVmaintenance:hover img
{
visibility:hidden;
}
#NAVabout
{
position:relative;
width: 88px;
height: 38px;
background: url("images/company_on.jpg") no-repeat;
display: inline;
margin:0;
padding:0;
border:none;
float:left;
}
#NAVabout:hover img
{
visibility:hidden;
}
#NAVcontact
{
position:relative;
width: 77px;
height: 38px;
background: url("images/contact_on.jpg") no-repeat;
display: inline;
margin:0;
padding:0;
border:none;
float:left;
}
#NAVcontact:hover img
{
visibility:hidden;
}
#NAVrightspacer {
position:relative;
width: 328px;
height: 38px;
background-color: #3981CB;
display: inline;
margin: 0;
padding: 0;
border: none;
float: left;
}

#SUBNAVcontainer {
	clear: both;
	float: left;
	width: 754px;
	text-align: left;
	position: relative;
	height: 30px;
	background-color:#06315C;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-bottom-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}
#SUBNAVIGATION {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 7px;
color: #FFFFFF;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
vertical-align: middle;
display: inline;
position: absolute;
top: 7px;
width: 100%;

}

/*Left Column Custom Stuff*/
#slogan{
height: 50px;
background: url("images/slogan.jpg");
background-color: #3981CB;
width: 100%;
border-bottom: 2px none #FFFFFF;
}
#LeftColumn{
width: 100%;
vertical-align: top;
margin: 0px;
padding: 0px;
background: #BFE49A url(images/mainleftbottom.jpg) no-repeat 100% 100%; /*left green */
}
#LeftColumnBackground{
background-image: url(images/mainbg.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#rightheader{
	width: 100%;
	height: 50px;
	background: #06315C url(images/rightheader.gif);
	border-bottom: 2px none #FFFFFF;
}
#RightColumn{
width: 95%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.oneb{
width: 100%;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 5px;
}
#servicelink{
width: 90%;
text-align: center;
}
#residentialserviceheader{
	width: 100%;
	height: 30px;
	background: url("images/residentialserviceheader.jpg");
	text-align: left;
}
#commercialserviceheader{
	width: 100%;
	height: 30px;
	background: url("images/commercialserviceheader.jpg");
	text-align: left;
}
#serviceformheader{
	width: 100%;
	height: 30px;
	background: url("images/serviceformheader.jpg");
	text-align: left;
}


#breadcrumbContainer {
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
background-color: #9EBF93;
position: relative;
height: 20px;
}
#breadcrumbs{
	vertical-align: middle;
	display: inline;
	position: absolute;
	top: 5px;
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #333333;
	left: 10px;
	margin: 0px;
	padding: 0px;
	right: 0px;
	bottom: 0px;
	text-align: left;
	font-variant: normal;

}
/*-------------------------------------TEXT and LINK--------------------------*/

.rightoverflowTextBox {
width: 90%;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
text-align: left;

}
.breadcrumbLink {
	text-decoration: none;
	color: #333333;
	font-weight: bold;
	letter-spacing: 1px;
}
.breadcrumbLink:hover {
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
	letter-spacing: 1px;
}
.general{
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: #3981CB;
font-size: 16px;
}

.general:hover{
color: #06315C;
}

.header{
font-size: 18px;
color: #7F917B;
font-family: Baskerville Old Face;
}

.link{
color: #FFFFFF;
text-decoration: none;
}

.menu-current{
color: #FFFFFF;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
font-family: sans-serif;
font-size: 12px;
}

.menu{
color: #7592B1;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
font-family: sans-serif;
font-size: 12px;
}

.formheader{
color: #06315C;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
}

.menu:hover{
color: #FFFFFF;
}

.link:hover{
color: #BFE49A;
}

.text{
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
padding: 10px 25px 18px;
color: #333333;
}

.helplink{
width: 125px;
height: 150px;
}

.input {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
border: 1px solid #06315C;
}

.buttons{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #06315C;
color: #FFFFFF;
padding-right: 10px;
border: 1px solid #3981CB;
}

.quote {
text-align: left;
width: 85%;
margin: 5px auto 15px;
font-family:Arial, Helvetica, sans-serif;
color: #06315C;
font-size:14px;
font-style:italic;
font-weight: bold;
padding: 5px;
background-color: #DCF2C6;
border: 1px solid #7D975B;
}
.contactInfoRequired
{
color:#CC0000;
font-weight: bold;
font-size: 12px;
}
/*-----LISTS-----*/
.list {
background:  url(images/listbg.gif) no-repeat;
list-style:none;
margin:3px 0px 0px;
padding:0px 4px 0px 18px;
border: 1px dashed #FFFFFF;
width: 200px;
line-height: 22px;
}
.list a {
font-size: 12px;
}
ul.compact {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 18px;
list-style-type: disc;
list-style-position: inside;
position: relative;
padding: 0px;
text-align: left;
font-weight: normal;
line-height: 17px;

}

.tdContact {
	padding: 5px;
	
}
.btnSubmit {
	padding: 3px 6px;
	
}


/*-----HEADERS-----*/
h1 {
font-size: 18px;
line-height: 22px;
color: #09425e;
margin: 0;
padding: 0px 0px 0px 0px;
border-bottom-style: dashed;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
}

h2 {
font-size: 16px;
color: #09425e;
margin: 0;
padding: 12px 25px 3px 25px; }

h3 {
	font-size: 12px;
	color: #333333;
	margin: 10px 0px 0px;
	padding: 4px 25px;
	background-color: #9EBF93;
}

h4 {
font-size: 12px;
color: #000;
margin: 0;
padding: 0 25px 0 25px; }

.helpHeaderText {
font-family: "Trebuchet MS";
color: #06315C;
padding-left: 5px;
font-weight: bold;
font-size: 18px;

}





.arrows
{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;


}


/* Layers */
#layerHowItWorks{
	visibility:hidden;
	z-index:4;
	position:absolute;
	left:25px;
	top:275px;
	width:440px;
	background-color: #D5EDBC;
	border: 2px solid #333333;
}
.popout{
	width: 100%;
	padding: 2px;

}
.popout-close {
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	display: block;
	position: relative;
	width: 428px;
	text-align: right;
	background-color: #333333;
	margin: 0px;
	padding: 4px;
	float: none;
	background-position: bottom;

}
.popout-heading {
	float:left;
	margin-top:0px;
	margin-left:20px;
	font-size:20px;
}

.formItem
{
	background:#EFFEE2;
	margin: 0px;
	padding: 2px;
	color: #333333;
	border-bottom: thin solid #A9CC86;
	border-left: thin solid #91AB58;
	border-top: thin solid #778D47;
	border-right: thin solid #9DC576;
}
.formButton
{
	border: thin solid #778D47;
	margin: 5px;
	padding: 3px 6px;
	color: #333333;
}