body{
	background-image:url("../images/default_background.gif");
	background-color: #d7d7d7;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#111111;
	margin:0px;
	padding:0px;

}
/* Our wrapper, which contains our 1px stretching background image (main_bg.jpg). */
#wrapper{
/*background:url("../images/default_background.gif");*/
background:#FFFFFF;
width:1008px;
/* The following values will place this div in the middle, and since we put every div inside the wrapper it will render the whole page in the middle of the page.*/
margin:0px auto;
padding:0px;
}
/* The header image, with a left float, kinda easy and not much to explain =). */
#header{
background:url("../images/banner.jpg");
width:1008px;
height:155px;
float:left;
}
/* The left container which will contain our whole left menu, it functions sort of like our wrapper layer. we position the container on the left side, give it a width of the total width we need. I'd measured the width of the lm_top.jpg, this image will be our total width. and we give it a float:left to align the div on the left. */
#left_container{

width:723px;
float:left;
padding-left: 40px;
font-size: 12px;
text-align: justify;
padding-left: 0px;
letter-spacing: .1em;
padding-left: 32px;

}
#plans_container{
width:631px;
background:url(../images/plans-bckgrnd.gif) no-repeat;
height: 280px;
float: left;
}
.plans_column_container{
width:151px;
float: left;
padding-top: 8px;
}
.plans_column_heading{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bolder;
	color: #FFFFFF;
	text-align:center;

}
#top_rounded_container{
width:723px;
background:url(../images/top-content-bckgrnd.jpg) no-repeat;
height: 38px;
float: left;

}
#content_rounded_container{
width:643px;
background:url(../images/content-bckgrnd.jpg) repeat-y;
padding-left:40px;
float: left;
padding-right: 40px;

}

#bottom_rounded_container{
width:723px;
background:url(../images/bottom-content-bckgrnd.jpg) no-repeat;
height: 38px;
float: left;

}

.bar{
	width:645px;
	height:19px;
	background:#006666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	vertical-align: middle;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: underline;
}
.bar2{
	width:645px;
	height:19px;
	background:#003366;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	vertical-align: middle;
	text-align: center;
}
#news_container{
	width:200px;
	height: 650px;
	background:url(../images/news-background.jpg) repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #996600;
	float: left;
}
#category_background{
	width:135px;
	height: 250px;
	background:url(../images/category-background.gif) no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: left;
	color: #000000;
	float: left;
	padding-left: 15px;
	padding-right: 15px;
}
#dot_container{
	width:15px;
	height: 650px;
	background:url(../images/dot.gif) repeat-y center;
	float: left;

}
#about_us_container{
	width:430px;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000033;
	text-align: justify;
	padding-left: 0px;
	letter-spacing: .1em;
}
.domain_name_container{
	width:517px;
	height:134px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000033;
	text-align: center;
	padding-left: 0px;
	background-image: url(../images/about_us/search_bckgrnd.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
.misc_container{
float: left;
}

/* Same as the left container but then a different width which I took from the c_top.jpg image. Float:left to align it to the left, and since the left container didn't fill the whole 960px of the wrapper layer it will join sides with the left container. */
#content_container{
background-image: url(../images/vertical-nav/vertical-nav_bckgrnd.jpg);
background-repeat: repeat-y;
background-position: right;
width:1008px;
float:left;
}

/* Right container */
#right_container{

	width:225px;
	float:right;
	padding-right: 24px;

}
#right_container_flash{
	width:320px;
	float:right;
	height: 245px;
	background:#FFFFFF;
}

/* Our footer has the clear:both value, we could use clear:left since we only use left floats. But I allways use clear:both for this is the most effective way of clearing floats. */ 
#footer{
	clear:both;
	width:1008px;
	text-align:center;
	background-image: url(../images/top-menu/top-nav-bckgrnd.jpg);
	background-repeat: repeat-x;
	height:41px;
	color: #FFFF00;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;

}

.footer-link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
.footer-link:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #00FFFF;
}

#flash-container{
height: 245px;
background:#FFFFFF;
width:680px;
float:left;
}

.left_top_bar{
background-color: #00ffff;
width:203px;
height:38px;
/* We change the default page font to the following */
font-family:Arial, Helvetica, sans-serif;
text-align:center;
/* With line-height you can adjust the text or images in div's, I adjusted it to 28px which is perfect for this design */
line-height:28px;
/* change the color of the text so we can see it! Default text is darker because the main content and menu boxes have a light gray color so text needs to be dark obviously. */
color:#D9DEE2;
}
/* The rest is self explanatory */
.content_top_bar{
background-image: url(../images/top-menu/top-nav-bckgrnd.jpg);
background-repeat: repeat-x;
width:1008px;
height:41px;
}
.right-text-container{
	width:300px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:justify;
	letter-spacing: 0.1em;
	color:#000000;

}
.left-text-container{
	width:645px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:justify;
	letter-spacing: 0.1em;
	color:#000000;

}
.pic-link-border {
	border: thin solid #e21830;
}
.content-heading-red {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF0000;
	text-decoration: none;
}
.content-heading-red:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003300;
	text-decoration: none;
}

.link-light-blue {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003366;
	text-decoration: none;
}
.link-light-blue:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003300;
	text-decoration: none;
}
.link-black {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}
.link-black:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF0000;
	text-decoration: none;
}
.red-link{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF0000;
	text-decoration: none;
}
.red-link:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003300;
	text-decoration: none;
}

h4 {
	color: #FF0000;
}
h5 {
	color: #FF0000;
}
h1 {
	color: #FF0000;
}
h3 {
	color: #003300;
}
.spacer{
	height: 10px;
}
/*ul li {
list-style-type: bullets;
color: #003300;
}*/
ul
{
list-style-image:url(../images/check-mark.gif);
list-style-type:square;
color: #003300;
}
/*For Rounded Corners*/
.t {background: url("../images/Top.gif") 0 0 repeat-x; width: 100%}
.b {background: url("../images/Bottom.gif") 0 100% repeat-x}
.l {background: url("../images/Left.gif") 0 0 repeat-y}
.r {background: url("../images/Right.gif") 100% 0 repeat-y}
.bl {background: url("../images/LeftBottom.gif") 0 100% no-repeat}
.br {background: url("../images/RightBottom.gif") 100% 100% no-repeat}
.tl {background: url("../images/LeftTop.gif") 0 0 no-repeat}
.tr {background: url("../images/RightTop.gif") 100% 0 no-repeat; padding:10px} 

/*For Forms*/
label
{
width: 120px;
float: left;
text-align: left;
margin-right: 0.5em;
margin-left: 2em;
display: block;
FONT-SIZE: 12px;
COLOR: #000033;
FONT-FAMILY: Verdana, Helvetica, Sans-Serif;
}

.submit input
{
margin-left: 4.5em;
}
input
{
	PADDING-RIGHT: 1px;
	PADDING-LEFT: 1px;
	FONT-SIZE: 12px;
	BACKGROUND: #ffffff;
	MARGIN-BOTTOM: 2px;
	PADDING-BOTTOM: 1px;
	COLOR: #333366;
	PADDING-TOP: 1px;
	FONT-FAMILY: Verdana, Helvetica, Sans-Serif;
	border: 1px solid #cccccc;
}

.submit input
{
color: #ffffff;
background: #006666;
border: 2px outset #006666;
}
fieldset
{
	border: 1px solid #006666;
	margin-left: 30px;
}


legend
{
color: #fff;
background: #006666;
border: 1px solid #006666;
padding: 2px 6px
} 
.select{
	PADDING-RIGHT: 1px;
	PADDING-LEFT: 1px;
	FONT-SIZE: 12px;
	BACKGROUND: #ffffff;
	MARGIN-BOTTOM: 2px;
	PADDING-BOTTOM: 1px;
	COLOR: #333366;
	PADDING-TOP: 1px;
	FONT-FAMILY: Verdana, Helvetica, Sans-Serif;
	border: 1px solid #cccccc;
}
.free-quote-label-style {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003366;
	width: 480px;
	float: left;
	text-align: right;
	margin-right: 0.5em;
	margin-left: 2em;
	display: block;
}
textarea{
	PADDING-RIGHT: 1px;
	PADDING-LEFT: 1px;
	FONT-SIZE: 12px;
	BACKGROUND: #ffffff;
	MARGIN-BOTTOM: 2px;
	PADDING-BOTTOM: 1px;
	COLOR: #333366;
	PADDING-TOP: 1px;
	FONT-FAMILY: Verdana, Helvetica, Sans-Serif;
	border: 1px solid #cccccc;
}
/*Picture Container*/
.pic-container{
	width:200px;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	color:#000000;
	float: left;
	text-align:center;
}
.pic-border{
	border: thin solid #003366;
}

.green-text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003300;
}
.dark-blue-text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000033;
}
.orange-text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF6600;
}
.white-text{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}