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



/*********************** MAIN DIVS **********************/
body, div, ul, li, ol, p, span, table, tr, td, a, h1, h2, h3, h4, h5, h6, img {margin: 0; padding: 0; border: 0; font-family: arial, helvetica, sans-serif; } 
body {background: #FFF; }
* html body {text-align: center; }
#container {width: 862px; margin: 0 auto; text-align: left; }
#top_bar {width: 862px; height: 40px; }
#nav {width: 504px; height: 35px; margin-top: 1px;}

#banner {height: 174px; width: 862px; background-image:url(images/windows/window1.jpg); margin: 14px 0 12px 0; position: relative;}
#flash {position: absolute; top: 0px; left: 0px; width: 862px; height: 174px; z-index: 2; }
#banner h1 {position: absolute; top: -1px; right: 20px; color: white; font-size: 23px; z-index: 5;}
#banner p {position: absolute; top:24px; right: 10px; color: white; font-size: 12px; z-index: 5; }
#banner a {color: #fff; }
#banner a:hover {text-decoration: overline underline; }

#content { }

/*Footer*/
#footer_bar {width: 858px; height: 53px; background: url(images/page_btm.png) no-repeat; clear: both;  }
#inner_footer {float: right; color: #fff; font-size: 16px; line-height: 33px; margin-bottom: 0;}
#outer_footer {float: left; color: #fff; font-size: 13px; line-height: 33px; }
#inner_footer a {color: #fff; }


/********************* UPPER MENUS **********************/
#menu {list-style-type: none; }
#menu li {display: inline; }
#menu a {display: block; float: left; height: 35px; background: url(images/nav_btns_new.png) no-repeat; text-decoration: none; }
a#works_btn {width: 130px; }
a#usage_btn {width: 140px; background-position: -130px 0; }
a#plans_btn {width: 140px; background-position: -360px 0; }
a#buy_btn {width: 90px; background-position: -270px 0; }

#works a#works_btn, #menu a#works_btn:hover {background-position: 0px -35px; }
#usage a#usage_btn, #menu a#usage_btn:hover {background-position: -130px -35px; }
#plans a#plans_btn, #menu a#plans_btn:hover {background-position: -360px -35px; }
#buy a#buy_btn, #menu a#buy_btn:hover {background-position: -270px -35px; }

#call_now_btn {float: right; margin-top: 14px;}



/************* BASIC CONTENT DEFS **********************/
h2 {height: 21px; width: 861px; background: url(images/hdr_bar.png); margin-left: 1px;
	color: white; font-size: 16px; text-indent: 10px; margin-bottom: 12px;}

h3 {color: #0bc02a;  margin: 2px 10px 0px 10px; font-size: 17px; line-height: 16px;}
h4 {margin: 20px 0; font-size: 18px; }
h5 {margin-bottom: 24px; font-size: 16px; }
h3.big_green {font-size: 36px; line-height: 48px; }
p {margin: 0px 10px 20px 10px; word-spacing: .8px; font-size: 14px;}
a {color: inherit; text-decoration: none; }
a:hover {text-decoration: underline; }
.green {color: #0bc021; }
.smaller {font-size: 13px; font-weight: normal; }
.centered {text-align: center;}
.bold {font-weight: bold; }
.tiny {font-size: 10px; }

/************* PRICING TABLE ****************************/
.table_top_tabs {height: 22px; margin-left: 294px; }


span.tabs {width:141px; height: 22px; float: left; background: url(images/tab_btn.png); margin-right: 1px; color: #FFF; font-size: 16px; font-weight: bold; text-align: center; line-height: 24px;}

table {border: 1px solid #a6a6a6; border-right: 0; clear: both;} /* border-top: 2px solid #a6a6a6; */
tr {height: 29px; }
td {height: 29px; border-right: 1px solid #9b9b9b; border-bottom: 1px solid #9b9b9b; width: 140px; text-align: center;}
td.firstcol {background: #0bc02a; border-bottom: 1px solid white;  width: 292px; text-indent: 10px; text-align: left; color: white;}
*|html td.firstcol {width: 289px;}
tr.firstrow td {font-weight: bold; color: #0bc02a; }
tr.firstrow td.firstcol {font-weight: normal; color: #fff200; }
tr.lastrow {background: #fffcdf; }
tr.lastrow td {border-bottom: 0; color: #0bc02a; font-weight: bold;}
tr.lastrow td.firstcol {font-weight: normal; color: white; }

.table_top_tabs span.spacer {width: 142px; display: block; float: left; text-align: center;}
a.signup_btn {padding-left: 12px; height: 18px; display: block; float: left; margin-top: 10px; margin-left: 15%; 
				background: url(images/signup_btn.png) 0 0 no-repeat; }
a.signup_btn span{padding-right: 12px; height: 18px; background: url(images/signup_btn_right.png) 100% 0 no-repeat; color: #FFF; text-align: center; line-height: 16px; text-decoration: none; float: left; display: block;}

a.signup_btn:hover {background-position: 0px -18px; text-decoration: none;}
a.signup_btn:hover span {background-position: 100% -18px; }



/********************* FEATURES BOXES ***********************/
#features_boxes {padding-top: 20px; width: 757px; float: left; }
#features_icons {background: url(images/features_icons.jpg) 0 20px no-repeat; height: 622px; width: 100px; float: left; padding-top: 20px; clear: both;}
#features_boxes .features_box {
				background: url(images/feat_box_top.png) no-repeat; 
				width: 757px; 
				margin: 0 0 4px 0; 
				padding-top: 10px; 
				float: left;}
				
#features_boxes .features_box div.bottom {display: block; 
							width: 757px; 
							background: url(images/feat_box_btm.png) 0 100% no-repeat; 
							margin: 0; 
							float: left;
							height: 63px;}

#features_boxes .features_box div.tall {height: 83px; }					
							
.features_box p {margin: 0 0 10px 9px; line-height: 17px; margin-right: 16px;}
.features_box h3 {margin: 0 0 2px 10px; padding-top: 0px; clear: none; }

/***********************************HOW IT WORKS PAGE***************************************/
.wide_rounded_grad {background: url(images/wide_rounded_gray_grad.png) 0 100% no-repeat; padding-top: 16px; padding-bottom: 1px; width: 860px; margin-bottom: 16px}
#how img {margin-left: 8px; }
.wide_rounded_grad p {font-size: 15px; line-height: 20px; }


/**************************************************** USAGE PAGE *************************************************************/
#plan_windows {height: 616px; width: 411px; float: left; margin-left: -4px; margin-right: 4px; margin-bottom: 12px; } /*588px*/
#plan_windows ul {list-style-type: none; }
#plan_windows li {display: block; float: left; }
#plan_windows a {display: block; height: 147px; width: 411px; background: url(images/plan_rollovers_hi.jpg) no-repeat; }
a#bootstrapper {background-position: -411px 0px;}
a#startup {background-position: -411px -149px; }
a#entrepreneur {background-position: -411px -295px; }
a#small_biz {background-position: -411px -444px; }


div.rounded_gray {width: 450px; padding-top: 15px; background: url(images/rounded_gray_top.png) no-repeat;}
div.rounded_gray div {width: 450px; background: url(images/rounded_gray_btm.png) 0 100% no-repeat; padding-bottom: 8px; position: relative;}
ul.floating_list {margin: 10px 10px 10px 30px;  }
ul.floating_list li {float: left; width: 200px; font-size: 14px; margin-bottom: 2px;}

#plan_descriptions { float: left;  margin-left: 0px; margin-bottom: 12px; position: relative;}

#plan_descriptions p {margin-right: 16px;}
#plan_descriptions h3 {font-size: 20px; line-height: 28px; color: #000; margin-top: 0px; margin-bottom: 12px;}
#plan_descriptions h4 {font-size: 18px; margin-left: 16px; }
#plan_descriptions h5 {clear: left; font-size: 20px; padding: 16px 0; margin-left: 16px; line-height: 20px;} 
#plan_descriptions h6 {color: #595959; font-style: italic; text-transform: lowercase; font-size: 22px; height: 30px; margin-left: 16px;}
.red {color: #ff0000; }

.buy_now_btn {display: block; position: absolute; width: 110px; height: 36px; bottom: 14px; right: 12px; background: url(images/buy_now_btn.png); }

div.testimonials {margin-top: 12px;}

.testimonial_list {list-style-type: none; }
.testimonial_list li {display: block; float: left; }
.testimonial_list li a {display: block; height: 82px; width: 112px; }
.testimonial_list li a.p1 {background: url(images/testimonial_pics.jpg) no-repeat;}
.testimonial_list li a.p2 {background: url(images/testimonial_pics2.jpg) no-repeat;}
.testimonial_list li a.p3 {background: url(images/testimonial_pics3.jpg) no-repeat;}
.testimonial_list li a.p4 {background: url(images/testimonial_pics4.jpg) no-repeat;}

.testimonial_list li a.t1:hover {background-position: 0px -85px; }
.testimonial_list li a.t2 {background-position: -122px 0px; }
.testimonial_list li a.t2:hover {background-position: -122px -85px; }
.testimonial_list li a.t3 {background-position: -240px 0px; }
.testimonial_list li a.t3:hover {background-position: -240px -85px; }
.testimonial_list li a.t4 {background-position: -362px 0px; }
.testimonial_list li a.t4:hover {background-position: -362px -85px; }

p.quote {width: 400px; font-size: 16px; height: 90px; clear: both; padding-top: 2px; margin-left: 20px; color: #555;}


/****************************** TESTIMONIAL SUBMISSION **************************/
#submit_testimonial {text-decoration: underline; color: #FF0000; font-size: 14px; position: absolute; bottom: 0px; right: 12px; padding: 20px 0px 0px 30px;}
#testimonial_details {position: absolute; bottom: 20px; right: 12px; width: 260px; border: 4px solid #0bc02a; padding: 6px; background: #eee; display: none; }
#testimonial_details p {margin-bottom: 6px; }
#testimonial_details a {text-decoration: underline; } /*bottom: 34px; right: 18%; */

/************************* PHONE DETAILS ********************************/

#plan_descriptions .phone_link a{color: #F00; font-size: 13px; position: relative; text-decoration: underline; font-weight: normal; padding-bottom: 2px;}

.phone_link span.phone_details {display: none; position: absolute; top: 18px; left: 0px; }
.phone_link:hover span.phone_details, span.phone_details:hover {display: block; font-size: 14px; color: #000; border: 4px solid #0bc02a; padding: 6px; background: #eee; width: 280px; text-decoration: none;}
.phone_details ul {margin-left: 66px;  clear: both;}
.phone_details img {float: left; margin: 0 6px 6px 0; }



/**************************** PLAN OPTION PAGE *********************************/
.plan_option {width: 427px; height: 121px; background: url(images/payment_option_box.png) no-repeat; float: left; margin-right: 8px; position: relative; cursor: pointer;}
.plan_option input {margin: 52px 14px 40px 10px; float: left;}
.plan_option h3 {margin-top: 6px; margin-bottom: 6px; }
.plan_option .plan_price {position: absolute; bottom: 6px; right: 10px; color: red; font-weight: bold; }


/**************************** PHONE SELECT PAGE ********************************/
.phone_box {width: 860px; min-height: 121px; background: url(images/phone_box_2.png); margin-bottom: 12px;
}
.large_phone_box {height: 136px; background: url(images/phone_box_large.png); }
* html .phone_box {height: 121px; }
.phone_box:hover {-moz-opacity: 1; }
.phone_box img {float: left; margin: 12px 8px 0px 33px; }
.phone_box div {float: left; width: 597px;}
.phone_box div strong {color: #0bc021; margin-left: 0; margin-top: 12px; display: block; width: 350px;}
.phone_box div p {width: 580px; float: left; margin-left: 0; clear: none; margin-bottom: 8px;}
.phone_box ul {float: left; width: 597px; clear: none; margin: 0 0 0 10px; list-style-type:disc;}
.phone_box ul li {float: left; width: 199px;  text-indent: 0; font-size: 12px; }
.phone_box label {display: block; float: left; height: 36px; width: 110px; margin-top: 8px; }
.phone_box label input {display: block; float: left; height: 36px; margin-right: 4px;}
.phone_box label span.option {color: #0bc021; font-weight: bold; text-transform: uppercase;}
.phone_box label.top {margin-top: 16px;}
.phone_box label.solo {margin-top: 40px; }
.phone_box label span.solo {line-height: 36px; }

.continue_btn {display: block; text-decoration: none; height: 36px; margin-bottom: 14px; width: 112px; background: url(images/continue_btn.png) no-repeat; float: right; clear: both; border: 0; cursor: pointer;}
.change_btn {display: block; text-decoration: none; height: 36px; margin-bottom: 14px; width: 144px; background: url(images/change_btn.png) no-repeat; float: left; clear: both; border: 0; cursor: pointer; margin-top: 8px;}

input.continue_btn {margin-top: 8px; clear: both;}

/***************************** CHECKOUT PAGE **************************/

#checkoutinfo {margin: 0; position: relative;}
#billinginputs {width: 310px; float: left; margin-bottom: 20px;}
#shippinginputs {width: 310px; float: left; position: relative;}
#shippinginputs span#sameasbilling{position: absolute; top: 16px; right: 4px; font-size: 14px; }
#checkoutinfo h3 {margin: 20px 0 10px 20px; }
#checkoutinfo label {display: block; width: 290px; background: #eee; padding: 3px 0 6px 0;  margin: 4px 0 4px 16px; position: relative; text-indent: 6px;}
#checkoutinfo label input {width: 140px; }
#checkoutinfo label input, #checkoutinfo label select {position: absolute; top: 4px; left: 136px; padding: 1px 2px; border: 1px solid #ccc;}
#checkoutinfo select {padding: 0; }
#checkoutinfo option {padding: 0 2px; margin-bottom: 1px;}
#sameas {margin-top: 5px; }
#submit {}

#checkoutinfo .continue_btn {position: absolute; top: 434px; right: 20px; }


/**************************** CHECKOUT BAR ***************************/
h2#checkout_bar {background: url(images/checkout_bar.png) no-repeat; height: 25px; width: 862px;}
h2#checkout_bar ol {line-height: 25px;}
h2#checkout_bar li {display: inline; padding: 0 43px; }
#plans_pg h2#checkout_bar {background-position: 0 -25px; }
#phones_pg h2#checkout_bar {background-position: 0 -50px; }
#info_pg h2#checkout_bar {background-position: 0 -75px; }
#confirmation_pg h2#checkout_bar {background-position: 0 -100px; }


/*************************** CHECKOUT BOX *****************************/

#orderreview {width: 210px; float: left; margin-left: 8px; padding-bottom: 20px;}
#orderreview h3 {margin-left: 10px; }
#order {border: 1px solid #ccc; padding-top: 10px; background: #eee;}
#orderreview span {font-size: 13px; display: block; float: left; clear: left;  margin: 0 0 10px 10px; width: 110px;}
#orderreview span.price {float: right; clear: none; margin: 0 10px 10px 0; width: auto;}
#orderreview span.descrip {margin-left: 70px; clear: both; margin-right: 10px; margin-bottom: 10px;}
#checkout_phone_image {clear: both; }
#checkout_phone {margin-bottom: 10px; font-size: 13px;}
#orderreview span.tiny {font-size: 10px; float: none; margin-top: 10px; width: auto;}


/********************* ERROR MESSAGE ***************************/
#phones_pg #warning, #plans_pg #warning {display: none; }
#info_pg #warning {position: absolute; top: 374px; left: 534px; width: 300px;}
#warning {color: red; border: 1px solid red; text-align: center; padding: 4px; margin-bottom: 8px; background: #FFCFCF;}
#warning a {text-decoration: underline; color: red;}