/* 
**
**  DRE3 Stylesheet
**  Verison 4.0
**  Created by M. Biscan
**  Created May/2007
**  www.moverhotline.com
**
Contents:
---------
1. GLOBAL
2. LANDING PAGE
  A. LP PACKAGE
  B. INFO FORM
3. BREADCRUMB
4. CUSTOMER INFORMATION INPUT
5. SELECT PLAN
  A. ELEMENT PLAN INFO
6. BUNDLES => Found in each experience as experience.css
7. ORDER FORM 
8. CONFIRMATION PAGE  
  A. CONFIRMATION MESSAGES
9. SERVICE CHECK/ORDER WAIT PAGES
10. FORM ELEMENTS
11. ERRORS
**
Order of Declaration Values:
----------------------------
1. CONTAINER MODEL: position > float > display/visibility > top > left > height > width > margin > padding > 
2. CONTAINER VISUAL: background (img > repeat > left/right > top/bottom > color) > border (size > line-type > color) > 
3. FONT & ORIENTATION: font-family > font-size > font-weight > font-style > text-decoration > line-height > color > text-alignment
**
What is EDIT?
-------------
EDIT is used to call out styles that need to change per site schema.
**
*/


/* 1. GLOBAL
--------------------------------------------------- */

body {background-color: #fff; margin: 0; background: #ececec;}

p, div {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333;}

/* EDIT: a, a:hover color */
a, a:hover {font-weight: 400; text-decoration: underline; color: #46ABB9;}
/* Secondary anchor class */
a.edit, a:hover.edit {font-weight: 800; text-decoration: underline; color: #333;}

/* EDIT: h1 color */
h1 {margin-bottom: -4px; font-size: 16px; line-height: 12px; color: #1AC3D3;}
/* EDIT: h2 color */
h2 {margin: -10px -10px 0 -10px; padding: 2px 6px; background: #666; border-top: 3px solid #1AC3D3; font-size: 12px; color: #fff;}
  h2 p {float: right; margin-top: 1px; color: #fff; font-weight: 800;}
  h2 span {font-weight: 400;}
h3 {font-size: 12px;}
  h3 span {font-weight: 400;}
/* h4 look in 6. BUNDLES */
/* h5 look in 6. BUNDLES */
h6 {margin: 0; font-size: 14px;}

#container {width: 750px; margin: 0 auto 20px auto; background: #fff;}

#content {margin: 30px 0 40px 0; padding: 0 40px;}

/* EDIT: #header background color */
#header {text-align: left;}

/* EDIT: #footer background image */
#footer {width: 730px; margin-top: 15px; padding: 10px; background: url(content-bg.png);}
    #footer a {margin-right: 9px; padding-left: 12px; background: url(icon_bullet.gif) no-repeat left; text-decoration: none; color: #666;}
      #footer a:hover {text-decoration: underline;}
    .copyright {float: right; color: #666;}
    
.livechat {height: 155px; margin: 0 -10px -20px -10px; text-align: center;}
  .livechat .livechat_link {margin-top: -5px;}

/* Used mainly on the confirmation page to automatically color the confirmation number */
strong strong {color: #68BAC6;}

img {border: none;}
label {cursor: text;}
li {margin-bottom: 5px;}
.strong {font-weight: 800;}

/* text-align optional classes */
.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

/* PREMIUMS */
#premiums {padding: 5px;}
	#premiums p {color: #999;}

/* FAQ TABLE OF CONTENTS */
#toc p {line-height: 5px;}


/* 2. LANDING PAGE
--------------------------------------------------- */

#lp_container {width: 750px; margin: 0 auto 20px auto; padding-top: 3px; background: #fff; text-align: center;}
  
  #lp_top {margin: 20px 0 5px 0;}
      .lp_logo {margin: 0 73px 0 10px; padding-right: 3px;}
  
  #lp_form {background: #494571; text-align: left;}
  #lp_form_inside {padding: 5px 20px 5px 30px;}
    #lp_form input {padding: 9px 5px; font-size: 14px; color: #494571; font-weight: 800;}
    #lp_form .button {position: absolute; margin: -17px 0 0 2px; background: none; border: 0;}
    .lp_form_required {font-size: 10px; color: #fff;}
  #lp_form .error {margin: 0; background: #fff;}
    #lp_form .error p, #lp_form .error li {margin: 5px 0; padding-left: 60px;}
  
  #lp_container div.error {padding: 10px; text-align: left;}
  
  #lp_middle {height: 350px; margin: 0 2px 0 2px; text-align: center;}
    #lp_middle div.column {float: left; width: 221px; margin: 6px 2px 0 2px; padding: 5px 10px; text-align: left;}
      #lp_middle div.column h1 {height: 38px; padding: 13px 0 0 20px; font-size: 15px; font-weight: 800; background: url(bg_subhead.gif) 0 0 no-repeat; color: #494571;}
      #lp_middle div.column p {color: #494571;}
      a.lp {color: #d70705; font-weight: 800; text-decoration: none; cursor: pointer;}
        a:hover.lp {text-decoration: underline;}
        
      ol.checklist {margin: 0; padding: 0 0 0 25px; list-style-image: url(bullet_check.gif);}
        ol.checklist li {color: #494571;}
      
      ul.linklist {margin: 0; padding: 0; list-style-type: none;}
      ul.linklist li {padding: 8px; background: url(bg_linklist.gif) no-repeat;}
        ul.linklist li a {color: #fff; text-decoration: none; font-weight: 800;}
          ul.linklist li a:hover {color: #fff; text-decoration: underline;}
          
      .cablevsdish {position: absolute; margin-top: 10px;}
    
    .a_list {margin: 0 -10px;}
      .a_list a {display: block; margin: 2px 0; padding: 9px 30px; color: #494571; font-weight: 800; text-decoration: none;}
        .a_list a:hover {text-decoration: underline;}

#disclaimer {padding: 9px; text-align: justify;} 
  #disclaimer p {color: #666;}

p.last_updated {margin-top: 15px; text-align: right; font-size: 10px;}


/* 3. BREADCRUMB
--------------------------------------------------- */

#breadcrumb {position: absolute; top: 69px; margin-left: 20px; font-family: Geneva, Arial, Helvetica, sans-serif;}

  #breadcrumb p, #breadcrumb em {display: inline; color: #999; font-weight: 800;}    
    #breadcrumb p {font-size: 11px;}
    #breadcrumb em {margin: 5px 4px 0 0; font-size: 16px; font-style: normal;}
    
    #breadcrumb span.box {display: block; float: left; height: 22px; padding: 0 10px;}
      /* Secondary class used to style selectedbread crumb items */
      /* EDIT: #breadcrumb span.box.selected bottom-border color */
      #breadcrumb span.box.selected {border-bottom: 6px solid #1AC3D3;} 
        /* EDIT: #breadcrumb span.box.selected p color */
        #breadcrumb span.box.selected p {color: #1AC3D3;}
        #breadcrumb span.box.selected em {color: #1AC3D3;}
        

/* 4. CUSTOMER INFORMATION INPUT
--------------------------------------------------- */

.customer_information, .customer_information_input {margin-top: 10px; border: 0;}  
  .customer_information label {display: block; clear: both; margin-bottom: 10px; text-align: left;}
  .customer_information_input label {display: block; clear: both; margin-bottom: 2px; text-align: left;}
  
  .customer_information_input input {margin-top: 2px;}
  .customer_information_input span.disp {display: inline; float: none; font-weight: 800;}
  
  .customer_information span, .customer_information_input span {float: left; display: block; width: 112px; margin-right: 5px; text-align: right;}    
  .customer_information span {font-weight: bold;}
  
  /* Required icon */
  em.required_icon span {display: inline; color: #fbac38;}
  em.required_icon {padding: 0 3px; background: url(images/icon_required.gif) no-repeat 0 2px;}
  em.required_icon span {visibility: hidden; float: none;}
  
.form_section {padding: 20px 0 10px 0; margin-top: 10px; border: 0; border-top: 1px dashed #666;}
.install_option {margin: -20px 0 10px 0; border: 0;}
  .install_option input, .form_section input {float: left; margin: -1px 8px 0 0; border: 0; background: #fff;}  
  .install_option p, .install_option h3, .form_section p, .form_section h3 {padding-left: 25px;}
  .install_option .list_fix ul .radiogroup-options, .form_section .list_fix ul .radiogroup-options {margin-left: -20px;}
  .install_option .list_fix ul li input, .form_section .list_fix ul li input {margin-left: -30px;}
  .install_option .list_fix ul, .form_section .list_fix ul {margin-bottom: -10px;}
    .radiogroup-options input {background: #fff;}
    
  .mail_in_rebate {font-size: 10px; font-weight: 400;}
  .form_section fieldset {border: 0;}
    .install_options {margin-top: -20px;}
  
  /* EDIT: .upsell backgorund image */
  .upsell_phone {background: url(/site-media/images/bundles/icon_lg_voiceoffer.gif) 8px 20px no-repeat;}
  /* EDIT: margin-left - align with .upsell background image */
  h3.upsell_header {padding-left: 45px; font-size: 14px; font-weight: 800;}
  .upsell_selection {margin: 5px 0 20px 0;}

#button {height: 47px; width: 447px; margin: -11px 0 0 0; background: url(images/bg_button.gif) no-repeat top #fff;}
  #button input {background: none;}
  input.search {border-style: none; background: none;}
  
  .submit {cursor: pointer; margin-bottom: 10px; background: #fff; border: 0;}
  
  .required_input {font-weight: 800;}
  .parenthesis {margin: -1px 0 4px 0; padding-left: 120px;}
    

/* 5. SELECT PLAN
--------------------------------------------------- */
  
  /*   A. ELEMENT PLAN INFO - Stand-alone HSD with CDV Upsell */
  .results_box_promo {margin-top: 10px; padding: 5px; background: #eee; border: 1px dashed #000;}
  .results_box_plan_details {padding: 10px;}
  .results_box_plan_title {margin: 0 0 5px 0; font-weight: bold; font-size: 13px; color: #333;}
  .plan-title em {font-size:10px;}
  .results_plan_details {padding: 5px; color: #666;}
  .plan-select {width: 500px; color: #666; padding: 5px;}
  table.plan-copy .label {vertical-align: top; text-align: right; font-weight: bold; width: 150px; padding: 0px;}
  table.plan-copy .detail {vertical-align: top; text-align: left; width: 250px; padding: 0px; padding-left: 5px;}
  

/* 6. BUNDLES => Found in each experience as experience.css
--------------------------------------------------- */


/* 7. ORDER FORM
--------------------------------------------------- */

#order_form {width: 710px; margin: -30px 10px 20px 10px;}
  
  #order_form table {width: 100%;}  
  #order_form tr {vertical-align: top;}  
  #order_form td {padding: 0;}
  
.order_form_left, .order_form_right {padding: 10px; border: 1px solid #686868;}
  .order_form_left {padding-bottom: 20px; width: 425px; border-bottom: 0;}
    .order_form_left_borderless {width: 425px; margin-top: 10px; border: 0;}
    .order_form_left_options {padding: 10px 10px 0 10px; width: 425px; border: 1px solid #686868;}
      .current_customer_options {display: block; padding: 0 20px;}
        .current_customer_options .radiogroup-label {font-size: 12px;}
  .order_form_right {width: 234px; background: url(images/bg_info_form_right.gif) repeat-x top #fff;}
  
  div.options-select fieldset {margin: 0; padding: 0; border: 0;}
  div.options-select fieldset fieldset { padding: 0;}
  .option_select {background: none;}
    .option_select legend {margin: 0 0 4px 0; padding: 0; font-size: 12px; font-weight: 800; color: #666;}
    .option_select input {border: 0; background: 0; border: 1px solid #666;}
    .option_select ul li input {margin-left: -15px;}
    
    .options_legend_header {font-size: 12px; font-weight: 800; line-height: 12px; color: #1AC3D3;}
  
    /* Classes for plan info */
    .view_plan_details {margin: -5px 0 15px 0; padding-right: 20px; background: url(images/icon_plus.gif) no-repeat right; text-align: right;}
    .change_info {margin: -5px 0 15px 0; padding-right: 20px; background: url(images/icon_right_arrow.gif) no-repeat right;} 
    
    /* Used to align promotions with icons */
    .promo {margin-top: 10px;}
    .promo .icon {display: block;}  
    .promo p {margin: -30px 0 0 40px; padding-top: 0; font-size: 12px; font-weight: 800;}
    .promo a {font-size: 11px; font-weight: 400;}
    
/* Secondary class styles */
/* EDIT: .color color */
.color, a.color, a.color:hover {color: #14C3EC;}

em.grey {font-style: normal; color: #aaa;}


/* 8. CONFIRMATION PAGE
--------------------------------------------------- */

#order_form .confirmation_info span {float: none; text-align: left;}
#order_form .subhead {margin-bottom: 10px; border-bottom: 1px solid #444; font-size: 12px; font-weight: 800;}

.ordered_plan {margin-bottom: 4px; padding: 1px 8px 8px 8px; background: #ececec;}

#confirmation_message_box {width: 445px; margin-right: 10px; padding: 5px;}
  #confirmation_message_box table img {margin-right: 10px;}

/* A. CONFIRMATION MESSAGES -------- */
.receipt {margin: 20px 0; padding: 10px 15px 15px 15px; background: #ececec;}
  .receipt li {margin-bottom: 10px;}
  .receipt table {margin: 5px 0 -5px 0;} 
    .install {font-size: 12px; font-weight: 800;}
    
  
  /* Installation Steps: List Images */
  li.installation {min-height: 31px; margin: 0 0 20px -40px; padding-left: 36px; list-style-type: none;} 
    li.step1 {background: url(images/step_1.gif) 0 0 no-repeat;}
    li.step2 {background: url(images/step_2.gif) 0 0 no-repeat;}
    li.step3 {background: url(images/step_3.gif) 0 0 no-repeat;}
    
    .special_offers {font-size: 14px; font-weight: 800;}
 
.print {float: right; width: 233px; margin: -10px -35px 0 0; padding: 10px 0 10px 30px; background: url(images/icon_printer.gif) 0 5px no-repeat;}

#confirmation_number_box {position: absolute; top: 110px; margin-left: 225px; padding: 5px 10px; border: 1px solid #000; font-size: 14px; font-weight: 800; text-align: center;}
  #confirmation_number_box span {font-size: 11px; font-weight: 400;}


/* 9. SERVICE CHECK/ORDER WAIT PAGES
--------------------------------------------------- */

#container_wait {width: 750px; margin: 0 auto 20px auto; background: #fff;}
#content_wait {position: relative; left: 50%; width: 350px; margin: 50px auto; margin-left: -175px;} 

  .cylon {float: left; margin: 0 20px;}
  
  .check_wait {padding-top: 10px; text-align: left;}   
    .check_wait .header {font-size: 14px; font-weight: 800; font-style: italic;}
    .check_wait .copy {font-size: 9px;}
  
  .promo_info {width: 350px; margin-top: 60px; padding-bottom: 10px; background: #fff; border: 1px solid #686868; text-align: left;}   
    .promo_info .promo {margin: 20px 0 20px 40px;} 
      .promo_info .promo p {padding-top: 7px;}
    .promo_info h2 {margin: 0;}
       
      
/* 10. FORM ELEMENTS
   These classes are output by code and can't be modified -- they WILL be in 
   any page that has form elements.
--------------------------------------------------- */

/* EDIT: input background */
input {padding: 1px; background: url(images/bg_input.gif) repeat-x #fff; border: 1px solid #333; font-family: Arial, Helvetica, sans-serif; font-size: 11px;}

form {}
option {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background-color: #f7f7f7;}
select {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background-color: #a9a9a9;}
textarea {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background-color: #f7f7f7; border: 1px solid #66c;}
label.required {background: none; border: none;}
.label.area-code {display: none;}
.label.prefix {margin-right: 5px;}
.order-button {margin: 14px 0 20px 0;}
.phone input {margin-right: 6px;}
.required_field_safari_fix {background-color: #FC0;}
.radiogroup-options li {list-style: none;}
.radiogroup-options input {border: none;}
.checkbox-options {list-style: none;}

/* Current Customer and Select Options Submit Button Styles */
.current_customer_submit_button {margin: 20px 0; background: #fff; border: 0;}
.select_options_submit_button {position: absolute; margin: 10px 0 0 140px; background: #fff; border: 0;}


/* 11. ERRORS
   The error class is output by code and can't be changed -- it WILL
   be present in any page that uses forms and outputs an error.
--------------------------------------------------- */

div.error {margin: 2px; padding: 0 10px 5px 10px; font-weight: bold; color: #f00;}
div.error img {position: absolute;}
p.error {margin: -5px 0 0 45px;}
ul.error li {list-style: none; margin-left: 15px;}
input.error {background: #ffc60c; border: 1px solid #f00;}
span.hint {display: none; width: 0px;}
.hv .hint {position: absolute; right: 10%; top: 30%; display: block; text-decoration: none; cursor: default; color: #000; border: 1px dotted red; padding: 10px; width: 125px; background: #fee;}