/* ** ** ** ** ** ** www.coxspecials.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. ORDER FORM 7. CONFIRMATION PAGE A. CONFIRMATION MESSAGES 8. SERVICE CHECK/ORDER WAIT PAGES 9. FORM ELEMENTS 10. 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: #eee; margin: 0;} 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: #0E9E6E;} /* Secondary anchor class */ a.edit, a:hover.edit {font-weight: 800; text-decoration: underline; color: #333;} /* EDIT: h1 color */ h1 {font-size: 16px; line-height: 12px; color: #3366CC;} /* EDIT: h2 color */ h2 {margin: -10px -10px 0 -10px; padding: 2px 6px; background: #666; border-top: 3px solid #3366CC; 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 {} h5 {} h6 {margin: 0; font-size: 14px;} #container {width: 750px; margin: 0 auto 20px auto; background: #fff;} #content {margin: 30px 0 44px 0; padding: 0 40px;} /* EDIT: #header background color */ #header {height: 100px; border-bottom: 1px solid #999;} #lp_header { height: 169px; width: 750px; padding: 0px; background: url(http://media.www.coxspecials.com/m/site/coxspecials.com/exp/default/images/CX_HSD_lp_header.gif) no-repeat; / *change per mso */ font-family: "Arial", "sans-serif"; } #orderblock { color:#ffffff; / *change image per mso */ margin-top: 0px; margin-left: 354px; / *change image per mso */ line-height: 13px; height: 55px; padding-top: 19px; padding-right: 10px; text-align: right; } .orderbyphone { font-size: 13px; padding-left: 21px; } .phonenumber { font-size: 18px; font-weight: 600; } .repsavailable { font-size: 9px; } .promocode { font-size: 11px; } /* Chat to Order styling */ #order_by_phone p.chat_to_order { height: 41px; background: url(http://media.www.coxspecials.com/m/mso/cox/images/chat_online.gif) 36px 3px no-repeat; padding: 15px 0 0 93px; text-align: left; font-size: 13px; font-weight: 800px; } #order_by_phone p.chat_to_order.unavailable { background: url(http://media.www.coxspecials.com/m/mso/cox/images/chat_offline.gif) 30px 3px no-repeat; padding: 15px 0 0 88px; cursor: auto; } .chat_link { text-decoration: underline; } /* EDIT: #footer background image */ #footer {height: 23px; width: 730px; padding: 10px; text-align: left;} #footer a {margin-right: 9px; padding-left: 12px; text-decoration: none; color: #666;} #footer a:hover {text-decoration: underline;} .copyright {float: right; color: #666;} #footer_pop{text-align:right; border-top:1px solid #999999; height:23px; margin:0; padding:10px; } div#footer_pop { color:#666666; font-weight:400; text-align:right; } /* Used mainly on the confirmation page to automatically color the confirmation number */ strong strong {color: #3366CC;} 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;} .premium_header {margin-top: 5px; padding-top: 5px; border-top: 1px dashed #cbcbcb; font-size: 14px; font-weight: 800;} /* 2. LANDING PAGE --------------------------------------------------- */ #lp_container {width: 750px; margin: 0 auto 20px auto; background: url(http://media.www.coxspecials.com/m/default/images/header_lp.gif) no-repeat #fff;} /* Hides the title for the background image */ .title {display: none;} /* A. LP PACKAGE -------- */ /* EDIT: #lp_package declarations */ #lp_package {position: absolute; width: 330px;} * html:first-child #lp_package {position: absolute; width: 330px; margin-top:-21px;} /* B. INFO FORM -------- */ #info_form_container {position: relative; top: 107px; left: 411px; width: 330px; min-height:318px;} /* html:first-child #info_form_container {position: relative; top: 0px; left: 407px; width: 330px;} */ #info_form {padding-top: 15px; margin: 0; background: url(http://media.www.coxspecials.com/m/default/images/bg_lp_form.gif) bottom repeat-x #fff; border-left: 1px solid #a5a5a5; border-right: 1px solid #a5a5a5; min-height: 237px;} *html #info_form{height:237px;} /* EDIT: .headline color */ .headline {margin: -15px 0 -20px 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 800; color: #333; text-align: left;} .headline .sub {font-size: 12px;} #info_form p {padding: 0 10px; text-align: left;} #info_form p.required_input {width: 285px; margin-bottom: 8px; text-align: right;} #info_form .customer_information_input {margin-top: 20px;} .getoffers {position: relative; top: 7px; left: 117px; background: none; border: 0;} html:first-child .getoffers{top:0px; !important;} /* Rounded Corners for #info_form */ #info_form_top {width: 330px; height: 14px; background: url(http://media.www.coxspecials.com/m/default/images/bg_info_form_corners.gif) 0 0 no-repeat;} #info_form_bottom {position: absolute; width: 330px; height: 14px; background: url(http://media.www.coxspecials.com/m/default/images/bg_info_form_corners.gif) 0 -14px no-repeat;} /* Adds a taller margin for the landing page #footer only */ #lp_container #footer {margin-top: 170px;} /* Header link on landing page */ a#details, a:hover#details {position: relative; float: right; display: block; height: 19px; top: 30px; margin-right: 10px; padding: 5px 110px 0 0; background: url(http://media.www.coxspecials.com/m/default/images/click_for_details.gif) no-repeat right top; font-size: 11px; font-weight: 800; text-decoration: none; color: #fff;} #disclaimer {padding: 0 10px 20px 10px; text-align: justify;} #disclaimer p {color: #666;} /* EDIT: p.offer_ends color */ span.offer_ends {display: block; margin-top: 32px; font-size: 16px; font-weight: 800; color: #009966; text-align: center;} html:first-child span.offer_ends{margin-top:30px; !important;} p.last_updated {margin-top: 15px; text-align: right; font-size: 10px; display:none;} /* 3. BREADCRUMB --------------------------------------------------- */ #breadcrumb {position: absolute; top: 78px; margin-left: 20px; font-family: Geneva, Arial, Helvetica, sans-serif;} #breadcrumb p, #breadcrumb em {display: inline; color: #999;} #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: 7px solid #3366CC;} /* EDIT: #breadcrumb span.box.selected p color */ #breadcrumb span.box.selected p {color: #3366CC;} #breadcrumb span.box.selected em {color: #3366CC;} /* 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; background-color: #fff;} .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;} .customer_information_input .nobr { width: 170px; text-align: left;} .customer_information_input .nobr input { margin: 2px 6px 0 0;} .customer_information_input .nobr #user_service_phone_0{margin-top:4px;} .customer_information_input .nobr #user_service_phone_1{margin-left:-3px;} .customer_information_input .nobr #user_service_phone_2{margin-left:-3px;} /* Required icon */ em.required_icon span {display: inline; color: #3366CC;} em.required_icon {padding: 0 3px; background: url(http://media.www.coxspecials.com/m/default/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(http://media.www.coxspecials.com/m/default/images/icon_phone.gif) 0 7px no-repeat;} /* EDIT: margin-left - align with .upsell background image */ h3.upsell_header {padding-left: 45px; font-size: 16px; font-weight: 800; color: #3366CC;} .upsell_selection {margin: 5px 0 20px 0;} #button {height: 47px; width: 447px; margin: -11px 0 0 0; background: url(http://media.www.coxspecials.com/m/default/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 {padding: 5px; background: #eee; border: 1px solid #686868;} .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 {margin-left: 50px;} 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;} .select_this_plan {position: absolute; margin: -40px 0 0 0;} .monthlyfee {margin-top: 0; padding: 3px; background: #686868; font-size: 13px; font-weight: 800; color: #fff;} /* 6. ORDER FORM --------------------------------------------------- */ #order_form {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(http://media.www.coxspecials.com/m/default/images/bg_info_form_right.gif) repeat-x top #fff;} /* Classes for plan info */ .view_plan_details {margin: -5px 0 15px 0; padding-right: 20px; background: url(http://media.www.coxspecials.com/m/default/images/icon_plus.gif) no-repeat right; text-align: right;} .change_info {margin: -5px 0 15px 0; padding-right: 20px; background: url(http://media.www.coxspecials.com/m/default/images/icon_right_arrow.gif) no-repeat right;} /* Styles the main price promotion */ p.plan_header {font-size: 12px; font-weight: 800;} .service_offer {font-size: 11px; font-weight: 800;} /* 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;} .options_legend_header {display: none;} .options-select {margin-top: -20px;} .options-select fieldset {border: 0;} .text-label {display: block;} a.view_details, a.view_details:hover {color:#515151;} h5.bundle_header_left, h5.bundle_header_right {color:#FFFFFF;margin:0;padding:4px;} h5.bundle_header_left {font-size:14px;line-height:14px;} h5.bundle_header_right span.big {font-size:24px;} h5.bundle_header_right {color:#000000; font-size: 14px;} .bundle_title {background:#666666 none repeat scroll 0 0; width:40%;} .bundle_price {background:#FFFFFF none repeat scroll 0 0;border-bottom:1px solid #000000;text-align:right;width:60%;} .bundle_left_borderless {border:0 none;width:445px;} .bundle_box {border:1px solid #686868;margin-bottom:20px;padding-bottom:10px;} .button_order_bundle {border:0 none;margin:-55px 0 0 295px;padding:0;position:absolute;} .bundle_subhead p {font-size:12px;font-weight:800;margin:10px 5px;} .bundle_left, .bundle_right {padding:10px;} .bundle_box_left {border-right:1px solid #999999;} .bundle_offers {color:#666666;font-size:11px;font-weight:800;margin:4px 0 8px;} .voiceoffer {color:#000098;display:block;font-size:12px;font-weight:800;margin-bottom:5px;padding:3px 0 2px 25px;} .videooffer {color:#000098;display:block;font-size:12px;font-weight:800;margin-bottom:5px;padding:3px 0 2px 25px;} .dataoffer {color:#000098;display:block;font-size:12px;font-weight:800;margin-bottom:5px;padding:3px 0 2px 25px;} /* Secondary class styles */ /* EDIT: .color color */ .color, a.color, a.color:hover {color: #14C3EC;} em.grey {font-style: normal; color: #aaa;} /* 7. 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; 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(http://media.www.coxspecials.com/m/default/images/step_1.gif) 0 0 no-repeat;} li.step2 {background: url(http://media.www.coxspecials.com/m/default/images/step_2.gif) 0 0 no-repeat;} li.step3 {background: url(http://media.www.coxspecials.com/m/default/images/step_3.gif) 0 0 no-repeat;} .special_offers {font-size: 14px; font-weight: 800;} /* Reacharound Icons */ /* EDIT: background images */ .ra_ph {height: 40px; padding-left: 50px; padding-top: 15px; background: url(http://media.www.coxspecials.com/m/default/images/icon_phone.gif) 0 15px no-repeat; border-top: 1px dashed #ccc;} .ra_vid {height: 40px; padding-left: 50px; padding-top: 15px; background: url(http://media.www.coxspecials.com/m/default/images/icon_video.gif) 0 15px no-repeat; border-top: 1px dashed #ccc;} .ra_hsd {height: 40px; padding-left: 50px; padding-top: 15px; background: url(http://media.www.coxspecials.com/m/default/images/icon_hsd.gif) 0 15px no-repeat; border-top: 1px dashed #ccc;} .print {float:right;margin:-84px -20px 0 0;padding:10px 0 10px 30px;width:233px;} #confirmation_number_box {position: absolute; top: 115px; 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;} /* 8. 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;} .mastercard {font-size: 1.3em;} *html .mastercard {font-size: 1.4em;} *:first-child+html .mastercard {font-size: 1.4em;} #wait_2line p {margin-top: -40px;} *html #wait_2line p {margin-top: -43px;} *:first-child+html #wait_2line p {margin-top: -39px;} .registered {line-height: 0px;} /* 9. 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(http://media.www.coxspecials.com/m/default/images/bg_input.gif) repeat-x; 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;} /* Current Customer and Select Options Submit Button Styles */ .current_customer_submit_button {margin: 0; background: #fff; border: 0;} .select_options_submit_button {position: absolute; margin: 12px 0 0 140px; background: #fff; border: 0;} /* 10. 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: 15px 2px 0 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;} span.input_error #id_user_address {background: #ffc60c; border: 1px solid #f00; !important;} span.input_error #id_user_zipcode {background: #ffc60c; border: 1px solid #f00; !important;} 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;} .bundle_icons {margin-bottom: 12px;} /* RIGHT NAV CALL CENTER INFO STYLING */ #order_by_phone {width: 254px; border: 1px solid #686868; border-top: none; padding-bottom: 5px;} #order_by_phone p {text-align: center; margin: 5px 0 0 0; color: #666;} #order_by_phone h2 {margin: 0;} .order_headline {text-align: center; font-size: 14px;} .order_phone_number {text-align: center; font-size: 20px; font-weight: 800;} .order_promo_code {text-align: center; font-size: 12px;} #sms_number_entry {display:none;}