/* =Styles Import
--------------------------------------------------------------------------------------- */
@import url("reset.css");
@import url("hacks.css");

/* =Wrapper
--------------------------------------------------------------------------------------- */
#wrapper{
    background: white url(/chrome/header_background_grey.png) left top repeat-x;
}

/* =Header Layout
--------------------------------------------------------------------------------------- */
#header{
    width:944px;
    margin:0 auto;
    height:114px;
    position:relative;
    background-color: #eaeae8;
    background:url(/chrome/header_background_grey.png) center top no-repeat;
}


/* =Logo
--------------------------------------------------------------------------------------- */
#header h1 a{
    position:absolute;
    left:25px;
    top:25px;
    display:block;
    text-indent:-2000em;
    background:url(/images/webdotpt.png) left top no-repeat;
    width:260px;
    height:60px;
    /* Hack for IE PNG */
    /* behavior: url(../js/iepngfix.htc); */
}

/* =Main Navigation
--------------------------------------------------------------------------------------- */
#main_nav{ height:32px; position:absolute; right:0; top:60px; font-size:15px}


/* =Middle Layout
--------------------------------------------------------------------------------------- */
#container{
    clear:both;
    width:944px;
    margin:0 auto;
    padding-bottom: 20px;
}


/* =Content Area
--------------------------------------------------------------------------------------- */
.allow_for_left_sidebar{
    margin-left: 257px;
}

#main_content{
    float: left;
    width:710px;
}

/* =Sidebar Area
TODO this shares a lot in common with reason_list. Refactor.
--------------------------------------------------------------------------------------- */

#sidebar{ 
	width:227px;
    float: left;
    background-color: #FAFAFA;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    border-right: 1px solid #f4f4f4;
    border-left: 1px solid #f4f4f4;
}

#sidebar h2{
    font: 12px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    font-weight: bold;
    color: black;
    background-color: #E0E0E0;
    line-height: 25px;
    padding: 3px 10px;
}

#sidebar h3 {
    font: 12px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    color: black;
    font-weight: normal;
    padding: 5px 10px 0px 10px;
    border-right: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

#sidebar p {
    font: 11px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    font-weight: normal;
    color: #666;
    padding: 5px 10px 0px 10px;
    border-right: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    margin-bottom: 0px;
}

#sidebar a {
    display:block;
    width:195px;
    height:100%;
    padding: 5px 10px 5px 20px;
    color: #666;
    text-decoration:none;
}

#sidebar li {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #fff;
    border-right: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    list-style:none;
}

#sidebar a:hover {
    border-left: 10px solid #eee;
    padding-left: 10px;
    color: #0276d6;
    text-shadow: #bbb 0px 2px 2px;
}

#sidebar li.selected {
    border-top: 1px solid #eee;
}

#sidebar li.selected a {
    color: black;
    font-weight: bold;
    background-color: #eee;
}





#right_sidebar{ width:225px; float:right; }

h1.title {
    font: 24px Verdana, Arial, Helvetica, sans-serif;
    border-bottom: 1px solid gray;
    width: 99%;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

h1.subtitle {
    font: 22px Verdana, Arial, Helvetica, sans-serif;
    border-bottom: 1px solid gray;
    width: 99%;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

h1.subsubtitle {
    font: 18px Verdana, Arial, Helvetica, sans-serif;
    width: 99%;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

h1 {
    font: 16px Verdana, Arial, Helvetica, sans-serif;
}
h3 {
    font: 14px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    font-weight: bold;
}

table {
    border-style: none;
    border-collapse: collapse;
    width: 100%;
    vertical-align: middle;
}

.feature_title {
    width: 10%;
    vertical-align: top;
    text-align: left;
    padding: 10px 10px 10px 10px;
}

.feature_text {
    width: 90%;
    vertical-align: top;
    text-align: left;
    padding: 10px 10px 10px 10px;
}

.feature_text h2 {
    padding-bottom: 10px;
}

.feature_text p {
}

#support {
    background: white url(/chrome/grid_bottom.gif) repeat-x scroll bottom;
}

#support td {
    border: 1px solid #b3b3b3;
    width: 33%;
    padding: 10px;
    vertical-align: top;
}

.support_button {
    float: right;
}

#support td p {
    margin-top: 10px;
}

#login td {
    border: none;
    padding: 2px;
}

.plans td {
    text-align: center;
    vertical-align: top;
    padding: 2px;
}

.plans tr td:first-child {
    text-align: left;
}

tr.head {
    font-weight: bold;
    border-style: none;
    background: gray url(/chrome/table_header_background.png) repeat-x;
    height: 27px;
    vertical-align: middle;
    color: #555555;
}

tr, td {
    border-style: none;
    vertical-align: middle;
}

tr.odd_row {
    background: #f0f0f0;
}

.visuals td {
    vertical-align: top;
    text-align: center;
}

/* =Body
--------------------------------------------------------------------------------------- */
body{
    background-color: white;
    /*background: #fff url(/chrome/bg.gif) left top repeat-x;*/
}


p {
	line-height: 1.5;
	margin-bottom: 1.5em;
}

p, li, div {
    font: 12px/18px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; 
    color: #666666;
}

p.jump {
    background: blue url(/chrome/blue_gem_background.png);
    height: 24px;
    float: right;
    vertical-align: top;
}
p.jump:before { content: url(/chrome/blue_gem_left_cap.png) }
p.jump:after { content: url(/chrome/blue_gem_right_cap.png) }

p.jump a {
    color: white;
    text-decoration:none;
    font-weight: bold;
    vertical-align: 8px;
}

#grid {
    background: white url(/chrome/grid_bottom.gif) repeat-x scroll bottom;
    border-left: 2px solid #b3b3b3;
    border-right: 2px solid #b3b3b3;
    overflow: hidden;
}

#grid div {
    width:33%;
    float:left;
    border-top: 1px solid #b3b3b3;
    border-right: 1px solid #b3b3b3;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    margin-right: -1px;
}

#grid div.rowend {
    width:34%;
    float:right;
    border-right: none;
    margin-right: 0px;
}

#grid div p, #grid div h1 {
    margin: 10px;
}

/* =Miscellaneous
--------------------------------------------------------------------------------------- */
.floatleft{ float:left !important; }
.floatright{ float:right !important; }


/* =Layout Inside Elements
--------------------------------------------------------------------------------------- */

/* ========== Content */
#top_big_banner{
    background:url(/chrome/table_top.png) center 150px no-repeat;
    width:710px;
    height:325px;
    clear:both;
    margin-bottom:10px;
    position:relative;
}
/*#top_big_banner span{ visibility:hidden; }*/
.signup_now{ width:223px; height:64px; display:block; text-indent:-2000em; background:url(/chrome/signup_now.gif) left top no-repeat; position:absolute; right:80px; top:120px; }
.view_plans{ width:193px; height:38px; display:block; text-indent:-2000em; background:url(/chrome/our_plans.gif) left top no-repeat; position:absolute; right:97px; top:184px; }

#top_big_banner h1 {
	/*
    font: 20px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    padding: 5px;
    color: #0276d6;
    text-shadow: #bbb 0px 2px 2px;
	*/
	text-indent:-2000em;
	background: url(/chrome/strapline.png) no-repeat;
	width: 710px;
	height: 45px;
}

#reason_list {
    float: left;
    margin-top: 20px;
    background-color: #FAFAFA;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    border-right: 1px solid #f4f4f4;
    border-left: 1px solid #f4f4f4;
    width: 227px;
	margin-left: 0px;
}

#reason_list, ol {
    list-style-position: inside;
} 

#reason_list h2{
    font: 12px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    font-weight: bold;
    color: black;
    background-color: #E0E0E0;
    line-height: 25px;
    padding: 3px 10px;
}

#reason_list li {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #fff;
    border-right: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    padding: 10px;
    cursor: pointer;
}

#reason_list li:hover {
    background-color: #eee;
}

#reason_list li.selected_reason {
    /*font-size: 14px;
    font-weight: bold;*/
    color: #0276d6;
    text-shadow: #bbb 0px 2px 2px;
}

#reason_details {
    width: 310px;
    height: 170px;
	padding: 10px 10px 60px 10px;
	margin: 40px 60px 0 0;
    float: right;
	background: url(/chrome/reason_details_background.png);
}

#reason_details div {
    width: 100%;
    height: 100%;
}

#reason_details div p {
    color: #eee;
	margin: 9px 20px;
}

#reason_details div ul li{
    color: #eee;
    list-style:none;
    background:url(/chrome/light_bullet.gif) left 3px no-repeat;
    padding-left: 20px;
    margin: 9px 20px;
}

#reason_details * b {
	color: white;
}

#reason_details div blockquote p {
    font: 14px/23px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    text-align: center;
    padding: 10px 20px 0 10px;
	margin: 0;
    font-style: italic;
	color: white;
}

#reason_details cite {
    text-align: right;
    float: right;
    font-style: normal;
    color: white;
    padding-right:10px;
    line-height: 1;
}


#news_boxes{
	clear:both;
	border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    border-right: 1px solid #f4f4f4;
    border-left: 1px solid #f4f4f4;
}

.news{
    display: block;
    /*width:207px;*/
    width:214px;
    height:180px;
    /*margin-right:14px;*/
    padding: 8px 10px 10px 10px;
    float:left;
    position:relative;
    border: 1px solid #e0e0e0;
	background-color: #FAFAFA;
}

.news:hover {
    background-color: #eee;
}

.left_news{
	border-right: 1px solid #eee;
}
.middle_news{
	border-right: 1px solid #eee;
	border-left: 1px solid #fff;
}
.right_news{
	border-left: 1px solid #fff;
}

.news_link{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top: 0px;
    left: 0px;
}

.news h2{
    text-align:center;
    color: #333;
    font: 12px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    /*text-shadow: #bbb 0px 2px 2px;*/
    font-weight: bold;
    margin-bottom:30px;
}
.news img{
    float: left;
    margin: 0 10px;
}

.news p {
    text-align:center;
    margin: 25px 10px 0 0;
    color: #333;
}
.news ul li{
    list-style:none;
    color: #333;
    background:url(/chrome/light_bullet.gif) left 3px no-repeat;
    padding-left: 20px;
    margin-left: 20px;
    margin-top: 5px;
}

.news p.footnote {
    margin: 0;
    padding-top: 20px;
    line-height: 1;
    font-size: 9px;
    color: #aaa;
}

.learn_more{ position:absolute; right:10px; bottom:10px; width:108px; height:30px; display:block; text-indent:-2000em; background:url(/chrome/learn_more.gif) left top no-repeat; }
.our_blog{ position:absolute; right:10px; bottom:10px; width:108px; height:30px; display:block; text-indent:-2000em; background:url(/chrome/our_blog.gif) left top no-repeat; }


/* ========== Sidebar Boxes */
.sb_box{
	border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    border-right: 1px solid #f4f4f4;
    border-left: 1px solid #f4f4f4;
    margin-bottom: 25px;
}

.sb_content {
    border: 1px solid #e0e0e0;
	background: #FAFAFA;
    padding-bottom: 7px;
}

.sb_box h3{
    color: white;
    font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
    font-weight: normal;
    background: green url(/chrome/green_box_header_tile.png) repeat-x;
    line-height: 25px;
    padding-left: 10px;
}

.sb_box h4, .sb_box p {
    padding: 0 10px;
    margin: 0;
}

.sb_box h4 {
    /*color:#0276d6;*/
	padding-top: 5px;
    color: #5C8B17;
    /*text-shadow: #bbb 0px 2px 2px;*/
}

.sb_box a{ color:#5C8B17; text-decoration:none; }
.sb_box a:hover{ color:#5C8B17; text-decoration:underline; }

#contact_form {
    width: auto;
    margin-top: 20px;
}

#contact_form tr{
}

#contact_form tr td{
    vertical-align: top;
    padding: 5px 10px 5px 0;
}

.contact_value input, .contact_value textarea{
    width: 100%;
}

.contact_submit {
    text-align: right;
}


.fast_reliable h3{ display:block; text-indent:-2000em; margin-bottom:10px; background:url(/chrome/fast_reliable.gif) left center no-repeat; height:20px; }
.complete_secure h3{ display:block; text-indent:-2000em; margin-bottom:10px; background:url(/chrome/complete_secure.gif) left center no-repeat; height:20px; }
.sb_box p{ font-size:11px; color:#5a5a5a; line-height:16px; margin-bottom:5px; }
* html .sb_box p{ margin-bottom:12px; }

.sb_support_ad a{ width:224px; height:96px; margin-bottom:10px; text-indent:-2000em; display:block; background:url(/chrome/support_banner.gif) left top no-repeat; }
.small_sb_box{ width:224px; height:92px; margin-bottom:10px; background:url(/chrome/small_sb.gif) left top no-repeat; }

.document ul {
    list-style-position: outside;
    margin: 10px 0 10px 20px;
}
.document ol {
    list-style-position: outside;
    margin: 10px 0 10px 20px;
    list-style-type: decimal;
}

.document ol ol {
    list-style-type: lower-alpha;
}

.document ol ol ol {
    list-style-type: lower-roman;
}

.line-block {
    margin: 10px 0 10px 20px;
}

.document h1 {
    margin-bottom: 10px;
}

.document h1 a {
    color: #7C1B31;
}

.document h1 a:hover {
    text-decoration:none;
}

/* ========== Footer */
#footer {
    background: url(/chrome/footer_background.png) repeat-x;
    clear:both;
    margin: 0;
    padding-top: 5px;
}

#footer p{
    clear:both;
    font-size:10px;
    text-align:center;
    color:#5a5a5a;
    margin: 0;
    padding-bottom: 5px;
}

a{ color:#0276d6; text-decoration:none; }
a:hover{ color:#0276d6; text-decoration:underline; }

/* ========== Forms */

#form_table td {
    padding-bottom: 5px;
    padding-top: 5px;
    vertical-align: top;
}

.field_label {
    font-weight: bold;
    width: 120px;
}

.field_value {
    width: 610px;
}

.field_small_value {
    width: 230px;
}

.signup_sep_row {
    text-align: center;
    background: #eee;
    font-weight: bold;
    color: #ff9933;
    margin: 10px 0 5px 0;
    padding: 5px 0 5px 0;
}

#error_message {
    padding: 10px;
    border:1px solid #ff3d3d;
    background-color: #ffcccc;
    font-weight: bold;
    color: #ff0000;
}

#warnings {
    padding: 10px;
    font-weight: bold;
    color: #ff9900;
}

#important_note {
    border: 2px solid #ff9900;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #ff9900;
}

.login_table {
    vertical-align: middle;
    width: 50%;
}

.login_table tr td {
    padding: 10px;
}