
.page-wrap {
 max-width: 939px;
 margin: 0 auto;
 position: relative;
}

.main-content {
 float: none;
 width: auto;
 margin: 0 25px;
}


header {
 padding: 5px 20px 15px 20px;
 border-top: 10px solid #266d2f;
 border-bottom: 3px solid #ccc;
}

nav {
 position: absolute;
 width: 100%;
 display: block; 
 top: 42px;  
 z-index:1000;
}

nav ul {
 margin-left: 111px;
}

nav ul li { 
 font-size: 10px !important;
 padding-right: 7px;
}

nav ul > li:nth-child(2) { 
 padding-right: 0;
}

nav ul li div {
 font-size: 14px;
}
nav ul li span {
 position: absolute;
 top: 30px;
 right: 5px;
}
nav > ul > li > a {
 padding: 7px;
}

nav ul ul li a {
 font-size: 13px;
}

nav ul ul {
 left: -111px;
}

/* ------ MAIN CONTENT STYLES for MEDIUM SCREENS ------ */

.to-do-alt {
 display: block;
 width: auto;
 background: #fff;
 padding: 30px;
 margin: 0 0 20px 0;
}
.to-do-alt ul {
 display: block;
 list-style: none;
 padding: 0;
 margin: 0;
}
.to-do-alt ul li span {
 display: inline-block;
 vertical-align: middle;
 margin: 0 5px 0 0;
}

.property-compare-alt {
 display: block;
 width: auto;
 height: 245px;
 background: #fff;
 padding: 30px;
 margin: 0 0 20px 0;
 background: #fff url(../img/graph-property.gif) no-repeat 30px 82px;
}


.property-compare-alt h3,
.to-do-alt h3 {
 font-size: 18px;
 color: #212121;
 padding: 0 0 10px 0;
 margin: 0;
 border: 0;
}


/* ------ GREEN STEP ARROW BAR for MEDIUM SCREENS ------ */

.steps-3 {
 display: block;
 list-style-type: none;
 width: 383px;
 height: 70px;
 padding: 10px 0 0 18px;
 margin: 0 0 0 12px;
 position: relative; 
 background: url(../img/tablet-steps-3-bg.png) no-repeat top center; 
}

.steps-6 {
 display: block;
 list-style-type: none;
 width: 728px;
 height: 70px;
 padding: 10px 0 0 20px;
 margin: 0 0 0 10px;
 background: url(../img/tablet-steps-6-bg.png) no-repeat top center;
}

.steps-3 li {
 float: left;
 width: 140px !important;
 height: 50px !important; 
 padding: 0;
 margin: 0; 
}

.steps-3 li:last-child {
 float: left;
 width: 144px !important;
 height: 50px !important; 
 padding: 0;
 margin: 0; 
}

.steps-3 li:first-child + li,
.steps-3 li:first-child + li + li {
 margin-left: -36px;
}


.steps-6 li {
 float: left;
 width: 142px;
 height: 50px; 
 padding: 0;
 margin: 0;
}
.steps-6 li:last-child {
 width: 145px !important;
}

.steps-6 li:first-child + li,
.steps-6 li:first-child + li + li,
.steps-6 li:first-child + li + li + li,
.steps-6 li:first-child + li + li + li + li,
.steps-6 li:first-child + li + li + li + li + li {
 margin-left: -33px;
}




/* ------ HELP BUBBLES for MEDIUM SCREENS ------ */

.help-stop-service {
 display: block;
 margin: 7px 0 0 188px;
}
.help-our-technicians {
 display: block;
 margin: 7px 0 0 0;
}

.bill-important-info {
 display: block;
 margin-top: 25px;
 margin-bottom: -20px;
}

/* also called info bubble */
.help-bubble {
 position: relative;
 width: 370px;
 background: #e2e2e2;
 border-color: #e2e2e2;
 padding: 15px;
 margin: -5px 0 20px 0;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}

.help-bubble:after {
 content: "";
 position: absolute;
 top: -28px;
 left: 20px;
 border-bottom: 15px solid #e2e2e2;
 border-bottom-color: inherit; 
 border-left: 15px solid transparent;
 border-right: 15px solid transparent; 
}

#tabletHelpTxt {
 display: block;
 position: relative;
 color: #212121;
 padding: 13px;
 margin: -18px 4% 10px 26%;
 background: #e2e2e2;
 -moz-border-radius-bottomleft: 6px;
 -moz-border-radius-bottomright: 6px;
 border-bottom-left-radius: 6px;
 border-bottom-right-radius: 6px;
}

.tablet {
 display: block;
}

/* ------ SPRITE STYLES for MEDIUM SCREENS ------ */

header a.logo {
  float: left;
  width: 100px;
  height: 67px;
  background-position: -6px -213px;
  border: 0;
  margin: 14px 10px 0 0;
}

.arrow {
 display: inline-block;
 width: 10px;
 height: 8px;
 margin: 1px 0 0 3px;
 background-position: -98px -350px; 
}

.step-one,
.step-long-one {
 width: 133px !important;
 height: 50px !important;
 margin: 0;
 background-position: -5px -713px;
}
.step-one:hover,
.step-long-one:hover {
 color: #fff;
 background-position: -5px -769px;
}

.step,
.step-long {
 width: 146px !important;
 height: 50px !important;
 margin: 0;
 background-position: -5px -828px;
}
.step:hover,
.step-long:hover,
.step-long-current {
 background-position: -5px -888px;
}

/* ------ CALENDAR WIDGET and ANY LIST SCROLLER for MEDIUM SCREENS ------ */


.content-well {
 float: none;
 width: auto;
 background: #fff;
 padding: 30px;
 margin: 20px;
}

table.days {
 width: 600px;
 background: #212121;
 margin: 0;
 border-collapse: separate;
 border-spacing: 0 .5px; 
}


/* ------ FOOTER STYLES for MEDIUM SCREENS ------ */

footer {
 position: relative;
 width: auto;
 height: 100%;
 background: #fff;
 font-size: .85em;
 color: #7d7d7d;
 padding: 20px 25px 25px 25px;
}




/* ------ FORM STYLES for MEDIUM SCREENS ------ */


#serviceApptForm {
 margin: 0 0 0 0;
}

#warning { 
 display: none; 
 clear: both;
 width: auto !important;
 background: #fff;
 padding: 30px;
 margin: 20px;
}

#serviceApptForm .error {
 color: #c62127;
}

#serviceApptForm div.error {
 display: none;
 border: 0 !important;
 width: 0px;
 height: 0px;
 color: transparent;
}

.error > placeholder,
input.error > placeholder {
 color: #c62127;
}

input placeholder {
 color: #7a7a7a;
}

/* Form Validation for Static Form Code */

#warning-standalone { 
 display: block; 
 clear: both;
 width: auto !important;
 background: #fff;
 padding: 30px;
 margin: 20px;
}

div.error-standalone {
 display: none;
 float: none;
 margin-left: 0;
 border: 0 !important;
 width: 0;
 height: 0;
 color: transparent;
}


input#homeownersPhone {
 color: #c62127 !important;
}


/******* STYLES OMITTED and or INCLUDED on MEDIUM SCREENS  *******/


aside,
.r-sidebar,
.account-msgs,
.navobile-navigation,
.promo,
.quick-links,
.messages-mobile,
.mobile,
.mobile-home,
.mobile-edit,
.mobile-home,
.mobile-person,
.mobile-question,
.mobile-phone,
.help-txt { 
 display: none;
}


