/* @override http://localhost/assets/styles/base.css */

/* v1.0 | 20080212 */

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, sup, tt, var,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

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

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

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

/* Begin Stylesheet */
body {font: 12px 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 18px; padding: 0; margin: 0;}

/* @group Header Link */
p.back_to_home {width: 100%; background-color: #acaeb1; padding: 10px 0;}
		p.back_to_home a {color: #FFF; text-decoration: none; font-size: 11px; background: url('/assets/images/back_arrow.gif') left center no-repeat; padding-left: 15px; margin-left: 20px; display: block;}
/* @end */

/* @group Generic Page Styles */
body h2 {font-size: 30px; font-weight: normal; clear: both; margin-bottom: 30px;}
	body #content {width: 950px; margin: 0 auto; }
		 #content h1 {float: right; margin: 10px 0;}
	body blockquote {font-style: italic; margin-bottom: 5px;}
body h3 {font-size: 18px; margin: 15px 0;}
/* @end */

/* @group Content Styles */
	#content p { margin-bottom: 15px;}
	#content a {text-decoration: none; color: #2d4892}
/* @end */

/* @group Landing Page */
#hero {background: #EAEAEA; clear: both; margin-top: 30px; float: left; width: 950px; margin-bottom: 30px;}
	#hero h2 {margin-bottom: 15px;}
	#hero .product_info {float: left; padding: 20px; width: 399px;}
		  .product_info p {margin-bottom: 15px;}
	#hero img {float: left;}
	#hero a.more_information {display: block;}
	#hero a.more_information img {width: auto; margin-bottom: 0; padding-bottom: 0;}

/* Customer Videos */
.col {width: 200px; margin-left:  24px; float: left; margin-bottom: 60px;}
	.col span.name {font-weight: bold;}
	.col blockquote {margin-top: 10px;}
.first_col {margin-left: 0;}
.carousel_nav {margin-top: 85px;}
	.carousel_nav #next_arrow {display: block; text-indent: -10000px; background: transparent url('../images/forward_active.jpg') center left no-repeat; width: 23px; height:  30px; float:  right; overflow: hidden;}
	.carousel_nav #prev_arrow { display: block; text-indent: -10000px; background: transparent url('../images/back_inactive.jpg') center left no-repeat; width: 23px; height: 30px; float: right; overflow: hidden; margin-right: 10px;}


/* About Area */
#about {clear: both; width: 100%; float: none; background: #eaeaea; padding: 0; margin:  0;}
	#about #about_container {width: 950px; margin: 0 auto; margin-top: 30px; padding-top:  30px;}
	#about .col {width: 430px; margin-left: 90px;}
	#about .first_col {margin-left: 0;}
	#about a.more_information img {display: block; margin-top:  30px;}
	#about ul li {list-style: disc; margin-left:  12px; margin-bottom:  10px;}
/* @end */

/* @group Form Field */
	dl {width: 450px; margin: 30px 20px;}
		dl dt {float: left; clear: left; margin-right: 20px; text-align: right; width: 110px;}
		dl dd {float: left; margin-bottom: 10px;}
			dl dd:last-child {margin-bottom: 40px;}
/* @end */

/* @group Receipt */
	#receipt table {width: 400px; margin: 30px 20px; }
		#receipt table th {display: none;}
		#receipt table td {padding: 10px 10px; }
		#receipt table td:first-child {text-align: right;}
		#receipt table tr.total {font-weight: bold;}
	#receipt img {clear: both; display: block; margin-left: 150px; margin-bottom: 30px;}
/* @end group */

/* @group Agent Information */
	#growth_leader legend {display: none;}
	#growth_leader input[type="image"] {clear: both; display:  block; margin-left: 150px; margin-bottom: 30px;}
	#agent_info form {float: left}
	#agent_info #order_info {float: left; margin-top: 35px;}
	#agent_info #order_info strong {display: block;}
	#agent_info #order_info li {margin-bottom: 10px;}
	#agent_info #order_info .distribution li {margin-bottom: 5px;}
	#agent_info #order_info .total {border-top: 1px dotted #000; padding-top: 10px; color: #333;}
/* @end */

#order {margin: 0; padding: 20px 0 0 0; font-size: 18px;}
	#order p .price {font-weight: bold; display: block; float: right;}
	#order p { margin-left: 70px; }
	#order h3 {font-size: 22px; padding-bottom: 10px; padding-top: 10px; border-bottom: 2px solid #acaeb1; margin-left: 60px;}
	#order .number {font-size: 30px; height: 50px; width: 50px; vertical-align: middle; text-align: center; color: #FFF; background: url('../images/background_circle.gif') top center no-repeat; line-height: 50px; display: block; float: left;}
	#order .first, #order .second, #order .third, #order .email {margin-left: 0; clear: left; margin-bottom: 40px;}
		#order .second {margin-bottom: 0;}
		#order .second p, .third p {margin-bottom: 20px; border-bottom: 1px dotted #acaeb1; padding-bottom: 10px; clear: both; float: left; width: 880px;}
		#order .second p input {margin-right: 10px;}
		#order .second label[for="zip"] {margin-left: 6px;}
		#order .third p + p {border-bottom: none;}
		#order .third h3 .question {font-size: 11px; }
		#order .third p input {margin-left: 10px; width: 50px;}
		#order .budget {font-size: 16px; width: 650px; margin: 0 auto;}
			#order .budget label {float: none;}
			#order .budget td { margin-bottom: 10px; font-size: 12px; padding-bottom: 10px; clear: both; padding-top: 10px}
			#order .budget thead {display: none;}
			#order .budget table {float: left; table-layout: fixed; width: 100%;}				
			#order .budget tr {padding-bottom: 10px; border-bottom: 1px dotted #acaeb1; margin-bottom: 10px; padding-top: 10px;}
			#order .budget tr#amount_remaining {border-bottom: none; font-weight: bold; text-align: right;}
			    #order .budget tr#amount_remaining td { font-size: 15px;}
			#order .budget td input {line-height: 12px; width: 30px; margin-right: 10px; margin-left: 5px; float: none; vertical-align: middle; line-height: 15px;}
				#order .budget td.price_per_area {text-align: right; vertical-align: middle; font-size: 15px;}
			#order .other_zip {border-bottom: none; margin-left: 110px; margin-top: 10px;}
		#order .more_information {display: block; clear: both; font-size: 11px;}
				
	#order li label {float: left;}
	#order li.first label {float: none;}
	#order li input {float: left;}
#total_cost {clear: both; float: right; font-size: 16px; margin-top: 60px;}
	#total_cost .total {display: block; font-weight: bold; padding: 10px 0; text-align: right; font-size: 18px;}
	#total_cost input[type="image"] {float: right; margin: 30px 0}


/* @group Footer */
#footer {clear: both; background-color: #acaeb1; font-size: 11px; padding: 0; margin:  0;}
#footer .clearer {}
#footer #footer_container {width: 950px; margin: 0 auto; padding:  10px 0;}
	#footer_container ul li {display: inline; color: #FFF; margin-right: 10px;}
	#footer_container ul li a {text-decoration: none; color: #FFF;  margin-right: 10px;}
	#footer_container #legal {text-align: right; float:  right;}
/* @end  */

#breadcrumbs {float: left; margin-bottom: 10px;}
	#breadcrumbs li {float: left; margin-right: 10px; background: transparent url('../images/breadcrumb_arrow.jpg') center right no-repeat; padding-right: 20px; height: 20px;}
	#breadcrumbs li#current {background: none;}

#order_status {clear: both; padding: 10px 10px 10px 10px; line-height: 16px; background: #eaeaea; border-top: 1px solid #acaeb1; margin-bottom: 30px; font-size: 16px;}
	#order_status p {margin-bottom: 0;}
	#order_status a {display: block; float:  right; font-size: 11px;}

.required {color: #9a0000;}
/* Clearer */
.clearer {clear: both;}

.error_message {border-bottom: none; color: #333; font-weight: bold; letter-spacing: 1px; font-size: 11px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: yellow;}
.error_message td {padding-left:10px; background-color: yellow;}
p.error_message {padding: 10px; font-size: 13px;}

/* @Incomplete Orders */
#incomplete_orders table {
    clear: both;
    margin-bottom: 10px;
    width: 950px;
}

#incomplete_orders th {
    padding: 10px;
    font-size: 14px;
    color: #666;
    border-bottom: 2px double #666;

}

#incomplete_orders td {
    padding: 10px;
    border-bottom: 1px dashed #999;
    text-align: center;
    border-left: 1px dashed #999;
    border-right: 1px dashed #999;
}