/*@import url(https://fonts.googleapis.com/css?family='Roboto');*/ @import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700&display=swap'); html { -webkit-text-size-adjust: none; } /*body, div, table, td, select, input {font-family: 'Heebo', Arial,Helvetica,sans-serif; font-size:16px; }*/ .main_body{ background-color: #ffffff; margin: 0px;} .demand-select { padding: 5px; margin-top: 5px; } a:a { color: #ac4982; TEXT-DECORATION: none; FONT-WEIGHT: normal;} a:link { color: #ac4982; TEXT-DECORATION: none; FONT-WEIGHT: normal;} a:visited { color: #ac4982; TEXT-DECORATION: none; FONT-WEIGHT: normal;} a:active { color: #ac4982; TEXT-DECORATION: none; FONT-WEIGHT: normal;} a:hover { color: #ac4982; TEXT-DECORATION: none; FONT-WEIGHT: normal;} /*h1,h2,h3,h4,h5,h6 { padding: 0px; margin: 0px; font-weight: normal;}*/ .error{ color: #CC0000; font-weight: bold; } form {padding: 0px; margin: 0px;} img {border: 0px;} .outermost { width: 100%; overflow: hidden; background-color: #ffffff; } /*Test Navbar*/ .navbar { z-index: 1; } .navbar-brand { height: 94px !important; padding: 0px !important; } .navbar-default { background-color: #FFFFFF !important; border-color: #FFFFFF !important; } .navbar, .navbar-default { border-radius: 0; border: none; margin-bottom: 0 !important; min-height: 80px; } .nav li { display: inline; color: white; } nav.navbar { width: inherit; top: 0%; left: 50%; transform: translateX(-50%); } .navbar-default .navbar-nav > li > a { font-size: 20px; font-weight: 700 !important; /*Bold*/ font-family: 'Heebo', 'Open Sans', Arial; color: #44403E; padding: 30px 25px 33px 25px; line-height: inherit; } .navbar-default .navbar-nav li a:hover { /*background-color: #444444;*/ transition: 0.7s all linear; height: 100%; color: #FFD24F !important; } #navlist { float: right; } /*end test navbar*/ #top { max-width: 960px; margin-right: auto; margin-left: auto; height: 65px; background: #fff; padding: 0 20px; box-sizing:border-box;} #logo {float: left;} /*#navlist { font-size: 20px; font-weight: 700 !important; font-family: 'Heebo', 'Open Sans', Arial; color: #44403E; } #navlist { float:right; } #navlist li { display: block; float: left; width: auto; margin: 0px; line-height: 70px;} #navlist li a { display: block; color: #44403e; text-decoration: none; padding-left: 10px; padding-right: 10px; height: 65px; } #navlist li a:hover { display: block; color: #44403e; text-decoration: none; padding-left: 10px; padding-right: 10px; height: 65px; } #navlist li.divider { width: 1px; height: 65px; }*/ #flasharea { max-width: 1100px; max-height: 500px; margin: auto; position:relative; overflow: hidden; } #signup { width: 700px; padding-top: 25px; text-align: left; } #flasharea .logo { position: absolute; padding-left: 0px; padding-top: 0px; background: #44403E; opacity: 0.95; margin: 50px; width: 242px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; padding: 40px; text-align: center;} #flasharea .logo p {color: #fff; font-size: 16px;} #flasharea .logo h2 {color: #ffd24f; font-size: 28px; padding-bottom: 10px;} #flasharea .sign-up-input {font-size:16px; border:#cccccc; border-style:solid; border-radius:15px; border-width:0px; text-align:left; padding:8px; margin-top:20px; float: left; width: auto;} #flasharea .sign-up-submit {border-radius: 15px; margin-top: 20px; margin-left: 5px; font-size: 16.5px; font-weight: bold; color: #44403E; background-color: #ffd24f; border: none; padding: 8px; } #flasharea-inside { width: 960px; height: 149px; margin-right: auto; margin-left: auto; margin-bottom: 8px; position:relative; } #flasharea-inside .logo { position: absolute; padding-left: 0px; padding-top: 0px; } #yellowbar { max-width: 960px; height: 30px; margin-right: auto; margin-left: auto; background-color: #f9e738; } #yellowtitle { max-width: 960px; margin-right: auto; margin-left: auto; background-color: #f9e738; padding: 12px; box-sizing: border-box; } #yellowtitle h2 { color: #ffffff; font-size: 36px; font-weight: normal; line-height: 30px;} #boxrow { max-width: 960px; margin-right: auto; margin-left: auto; height: 206px; } #boxrow .box1 { float: left; width: 314px; padding: 20px; height: 206px; background: url("../Global/Images/box1.jpg") no-repeat; margin-right: 8px; box-sizing: border-box; } #boxrow .box1 h2 { font-weight: normal; color: #176ec1 /*#327b06*/; font-size: 25px; padding-bottom: 15px; margin: 0; } #boxrow .box1 a { color: #176ec1; /*#9bd011*/} #boxrow .box1 span { font-size: 15px; font-weight: bold; /*color: #9bd011;*/} #boxrow .box2 { float: left; width: 275px; height: 166px; padding: 20px; background: url("../Global/Images/box2.jpg") no-repeat; margin-right: 8px; } #boxrow .box2 h2 { font-weight: normal; color: #176ec1; font-size: 25px; padding-bottom: 15px; } #boxrow .box2 a { color: #176ec1; } #boxrow .box2 span { font-size: 15px; font-weight: bold; } #boxrow .box2 ul { padding-left: 12px; padding-bottom: 15px; padding-top: 15px; } #boxrow .box3 { float: left; width: 275px; height: 166px; padding: 20px; background: url("../Global/Images/box3.jpg") no-repeat; } #boxrow .box3 h2 { font-weight: normal; color: #176ec1; font-size: 25px; padding-bottom: 15px; } #boxrow .box3 a { color: #176ec1; } #boxrow .box3 span { font-size: 15px; font-weight: bold;} #boxrow .box3 ul { padding-left: 12px; padding-bottom: 15px; } #content-home { max-width: 960px; margin-right: auto; margin-left: auto; margin-top: 40px; } #content-home h1 { font-size: 40px; font-weight: medium; color: #ffd24f; padding-bottom: 15px; line-height: 34px; } #content-home h2 { font-size: 24px; font-weight: regular; color: #6c6e70; padding-bottom: 15px; line-height: 34px; } #content-home h3 { font-size: 18px; font-weight: medium; color: #44403e; padding-bottom: 15px; line-height: 22px; } .content-inside { padding: 10px 10px 100px 10px; box-sizing: border-box; background: #fff;} .body-wrapper { background-color: #fff; width:100%;max-width:1110px;margin:0 auto; } .banner-wrapper-home-page { background-image: url("/images/default-source/redesign/hero_image.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; max-width: 1600px; height: 550px; margin: 0 auto; } .banner-wrapper-other-pages { background-color: #fff; width: 100%; max-width: 1600px; margin: 0 auto; } #content-inside { width: 100%; max-width: 960px; background-color: #ffffff; margin-right: auto; margin-left: auto; padding: 20px; line-height: 22px; overflow: hidden; box-sizing: border-box; } #content-inside h2{ font-size: 36px; color: #ffd24f; font-weight: normal; padding-bottom: 15px; } #content-inside h2.site{ font-size: 24px; color: #6c6e70; font-weight: normal; padding-bottom: 15px; line-height: 40px;} #content-inside h2.site img {height: 40px;} #content-inside h3.site { font-size: 18px; color: #1e74c5; font-weight: normal; padding-bottom: 15px; } #content-inside .divider { background: url("../Global/Images/divider.gif") no-repeat center; width: 920px; height: 30px; margin-top: 10px; margin-bottom: 10px; float: left; } #content-inside .company { width: 920px; overflow: auto; } #content-inside .company .logo { float: left; width: 140px; } #content-inside .company .plans { float: left; width: 739px; padding-left: 20px; margin-left: 20px; border-left: #ecebec 1px solid; } #content-inside .img-right { float: right; margin-left: 20px; margin-bottom: 20px; } #content-inside ul.site { display: block; margin: 0px; } #content-inside ul.site li { display: block; padding-top: 6px; padding-bottom: 8px; background: url("../Global/Images/one.jpg") no-repeat; padding-left: 32px; margin-left: 20px; } #content-inside ul.site li strong{ font-size: 16px; color: #1e74c5; font-weight: bold; } #content-inside a { color: #5ba1e6; } #content-inside strong { font-size: 16px; font-weight: bold; color: #00000; } #content-inside .contact-left { float: left; width: 610px; border-right: #ecebec 1px solid; padding-right: 20px; line-height: 19px; overflow: hidden; } #content-inside .contact-right { float: left; width: 210px; padding-left: 20px; line-height: 19px; } #content-inside input.security { width: 70px; border: #78c0e4 1px solid; background-color: #ffffff; padding: 4px; margin-bottom: 15px; margin-right: 3px; margin-top: 2px; -moz-box-shadow: 0 0 3px 3px #e9e9e9; -webkit-box-shadow: 0 0 3px 3px #e9e9e9; box-shadow: 0 0 3px 3px #e9e9e9; } .my-next-rate { max-width: 960px; min-height: 140px; margin: 0 auto; background: white; padding: 20px; box-sizing: border-box; } .btn.red { padding: .75em 2em; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-color: rgb(176, 37, 45); text-align: center; text-decoration: none; color: white; border: none; } #footer-outer { width: 100% } .footer-wrapper { background-color: #AAABAC; max-width: 1600px; margin: 0 auto; } #footer { max-width: 1100px; margin-right: auto; margin-left: auto; height: 66px; background-color: #AAABAC !important; font-family: 'Heebo', 'Open Sans', Arial !important; color: #FFFFFF !important; font-weight: 400; /*Normal*/ font-size: 14px; } #footer .copyright { float: left; color: #FFFFFF; font-size: 14px; line-height: 16px; background-color: #AAABAC; /*padding: 0 20px 0 20px;*/ } #footer .copyright a { color: #FFFFFF; } .legalTextWrapper { background-color: #AAABAC; max-width: 1600px; margin: 0 auto; } .legalText { max-width: 1100px; margin: 0 auto; /*height: 66px;*/ /*background-color: #44403E !important;*/ font-family: 'Heebo', 'Open Sans', Arial !important; color: #FFFFFF !important; font-weight: 400; /*Normal*/ font-size: 14px; } #footer .copyright img { padding-right: 2px; vertical-align: middle; } #footer .footer-logos { float: right; } * { margin: 0; padding: 0; } span.icon{ display:inline-block; width:20px; height:28px; background: url(/images/circle_icons.png) no-repeat; } span.info{ background-position: -65px 5px; } button{ cursor:pointer; } .unusual { padding: 5px; background-color: #F9E738; } .unusual .inner { margin-left: auto; margin-right: auto; width: 960px; padding: 3px 0 10px; font-size: 1em; line-height: 1.45; color: #484848; text-align:center; } .unusual .inner a { color: #484848; font-weight: bold; } .superior { padding: 5px; background-color: #fff; height:50px; } .superior .inner { margin-left: auto; margin-right: auto; width: 960px; padding: 3px 0 10px; font-size: 1em; line-height: 1.45; color: #484848; text-align:center; } .superior .links { margin-top: 10px; text-align: left; font-weight: bold; font-size: 12px; display:inline-block; } .superior .links a { color:#176EC1; } .superior p { font-size: 11px; margin-top: 9px; text-align: left; float:left; } #accordion h3 { padding-bottom: 5px; } /* Rates Table */ .rates-table { margin:0px;padding:0px; width:100%; } .rates-table table{ border-collapse: collapse; border-spacing: 0; width:100%; height:100%; margin:0px;padding:0px; } .rates-table td{ vertical-align:middle; border:1px solid #000000; text-align:left; padding:7px; font-size:12px; color:#000000; } .rates-table tr:nth-child(odd){ background-color:#f7f7f7; } .rates-table tr:nth-child(even){ background-color:#ffffff; } .rates-table tr th{ background:-o-linear-gradient(bottom, #61a2e4 5%, #4c80b5 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #61a2e4), color-stop(1, #4c80b5) ); background:-moz-linear-gradient( center top, #61a2e4 5%, #4c80b5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#61a2e4", endColorstr="#4c80b5"); background: -o-linear-gradient(top,#61a2e4,4c80b5); background-color:#61a2e4; border:1px solid #000000; text-align:center; font-size:14px; font-weight:bold; color:#ffffff; padding:7px; } .rates-table tbody tr td:first-child{text-align:left;} .rates-table tbody tr:first-child td{ /*background-color:#939393; border:1px solid #000000; text-align:center; font-size:14px; font-weight:bold; color:#ffffff;*/ } .required { /*color: darkred;*/ font-weight: bold; font-size: 900; } .required-color { color: darkred; font-weight: bold; font-size: 900; } .field-validation-error { font-weight:normal !important; } .pura { color: #1f6db8; font-size: 11px; padding-top: 7px; } .signup-clone { display: none; } .banner-image { display: none; } @media (min-width: 1023px){ #signup{ font-size: 14px; padding-top: 50px; } #flasharea { overflow: visible; } } @media (min-width: 959px) { .navbar-default .navbar-nav > li > a { padding: 60px 25px 0px 25px; } } @media (max-width: 959px) { .banner-image { display: initial; } .banner-wrapper-home-page { background-image: none; height: auto; } .signup { margin-left: 0; right: 0px; } #content-home { padding: 1%; } #flasharea { position: static; height: auto; max-height: none; } #navlist { float: none; } .navbar-brand { float: none !important; text-align: center; display: inline-block; padding: 0px !important; } .navbar-brand > img { display:inline; } .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } #signup { position:relative !important; text-align: center !important; padding-bottom: 25px; padding-left: 0px !important; width: 100% !important; } } @media (max-width: 720px) { #flasharea .logo { } #flasharea .logo img { width: 100%; height: auto; } .signup { display: none; } .signup-clone { display: block !important; margin: 0 0 20px 20px; } #footer-outer { padding: 1%; box-sizing: border-box; } #content-inside p img { float: none !important; margin: 0 !important; } } @media (max-width: 620px) { #top { height: 130px; } } @media (max-width: 420px) { #top { height: 150px; background: #FFFFFF; } #navlist li.divider { display: none; } #navlist li a { height: 40px; background-color: #FFFFFF; } #navlist li { line-height: 40px; } #navlist li a:hover { height: 40px; background: none; background-color: #FFFFFF; } #flasharea .logo { margin: 10px; } } /* SITEFINITY OVERRIDES */ .sfPublicWrapper { padding: 0 !important; width: 100% !important; } /***** Enrollment Widget */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700); @media (min-width: 1200px) and (max-width: 600px) { } /**** iPhone 5 and 5s, landscape ****/ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { #LastNameBox input { margin-top: 18px; } } /************** GLOBAL ************/ /*body { background: #e4e6e8; color: #717171; font-family: "Open Sans", Arial, sans-serif; font-size: 13px; line-height: 18px; width: 100%; }*/ /*h1 { border-bottom: 1px solid #FFD24F; color: #6c6e70; font-family: Helvetica; font-size: 26px; font-weight: bold; margin: 5px 20px 10px 0; padding-bottom: 10px; text-transform: uppercase; width: 100%; } h2 { font: 500 26px Helvetica; } h3 { font-family: Helvetica; font-weight: bold; font-size: 16px; margin: 12px 0 12px 0; }*/ body { background: #ffff; font-family: 'Heebo', 'Open Sans', Arial !important; font-size: 20px !important; font-weight: 400 !important; /*Normal*/ color: #44403E !important; } h1 { font-family: 'Heebo', 'Open Sans', Arial !important; font-size: 50px !important; font-weight: 900 !important; /*Extra Bold*/ color: #44403E !important; } h2 { font-family: 'Heebo', 'Open Sans', Arial !important; font-size: 36px !important; font-weight: 800 !important; /*Bold*/ color: #44403E !important; } h3 { font-family: 'Heebo', 'Open Sans', Arial !important; font-size: 26px !important; font-weight: 700 !important; /*Medium*/ color: #44403E !important; } .subtitle { font-family: 'Heebo', 'Open Sans', Arial !important; font-size: 26px !important; font-weight: 700 !important; /*Medium*/ color: #44403E !important; } .buttonMarketing { background-color: #FFD24F !important; border: none !important; font-family: 'Heebo', 'Open Sans', Arial !important; font-size: 30px !important; font-weight: 800 !important; /*Medium*/ color: #44403E !important; padding: 14px 28px !important; text-align: center !important; text-decoration: none !important; display: inline-block !important; cursor: pointer !important; margin: 4px 2px !important; } .buttonPartner { background-color: #171c21 !important; border: 12px solid #86978f !important; border-radius: 12px; font-family: 'Heebo', 'Open Sans', Arial !important; font-size: 30px !important; font-weight: 800 !important; /*Medium*/ color: white !important; padding: 14px 28px !important; text-align: center !important; text-decoration: none !important; display: inline-block !important; cursor: pointer !important; margin: 4px 2px !important; } .rowMarketing { margin-top: 10px; margin-bottom: 10px; } .banner-header-text { font-family: 'Heebo', 'Open Sans', Arial; font-size: 50px; font-weight: 800; /*Extra Bold*/ color: #44403E; line-height: 50px; } .banner-header-subtext { font-family: 'Heebo', 'Open Sans', Arial; font-size: 36px; font-weight: 800; /*Extra Bold*/ color: #44403E; line-height: 36px; } .marketingImage { max-height: 155px; margin-right: auto; margin-left: auto; position: relative; } .marketingImage img { max-height: 176px; } p { font-family: 'Heebo', 'Open Sans', Arial !important; font-size: 16px !important; font-weight: 400 !important; /*Normal*/ color: #44403E !important; text-align: left; margin: 1em 0px } hr { border: 0; border-bottom: 1px dashed #B1B1B1; clear: both; margin: 22px 0 12px; } img { max-width: 100%; } input[type="radio"] { margin: 0 1px 0 10px !important; vertical-align: middle !important; width: 20px !important; height: 20px !important; background-color: #fffaeb !important; border: 1px solid #bebeb9 !important; } input[type="checkbox"] { width: 20px !important; height: 20px !important; background-color: #fffaeb !important; border: 1px solid #bebeb9 !important; vertical-align: middle !important; margin: 0 5px 0 0 !important; } input[type="text"], input[type="tel"], input[type="password"] { background-color: #fffaeb !important; border: 1px solid #bebeb9 !important; box-sizing: border-box !important; display: block !important; height: 35px !important; margin-bottom: 5px !important; outline: none !important; padding: 0 10% 0 10px !important; width: 100% !important; -moz-box-sizing: border-box !important; -ms-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-transition: all 0.30s ease-in-out !important; -ms-transition: all 0.30s ease-in-out !important; -o-transition: all 0.30s ease-in-out !important; -webkit-transition: all 0.30s ease-in-out !important; } input[type=text]:focus, input[type="tel"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #FFD24F; box-shadow: 0 0 5px #FFD24F; } input[type=text].input-validation-error ,input[type=tel].input-validation-error ,input[type="password"].input-validation-error { background: #fffaeb url(../Images/cross.png) no-repeat 97% center; } input[type=text].valid ,input[type=tel].valid ,input[type="password"].valid { background: #fffaeb url(../Images/checkmark.png) no-repeat 97% center; } label { color: #717171; clear: both; display: block; font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 600; padding: 4px 0 3px 0; } textarea { border: 1px dotted #8c8c8c; height: 100px; margin-bottom: 15px; overflow: auto; width: 100%; } #EnrollForm a { color: #666666; } select::-ms-expand { display: none; } .styled-select { background: #fffaeb url(../Images/select-arrow.png) no-repeat right; border: 1px solid #bebeb9; box-sizing: border-box; cursor: pointer; height: 35px; margin-bottom: 10px; width: 100%; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; } .styled-select.disabled { background-image: none; } .styled-select select { background: transparent; border: 0; border-radius: 0; height: 35px; outline: none; padding: 5px; width: 100%; -moz-appearance: none; -webkit-appearance: none; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; } .right { float: right; } .note { color: #f00; clear: both; font-size: 12px !important; font-weight: normal; padding-bottom: 10px; } .note.black { color: #717171; } label.radio-label, label.check-box-label { display: inline-block !important; } label.check-box-label { font-size: inherit; } .hidden { display: none; } .smaller { font-size: .8em; } .header-add-on { margin-left: 15px; } .header-add-on label { display: inline-block; font-size: 13px; } .strong { font-weight: bold; } .question-box { background: url('../Images/question-box.gif') no-repeat right bottom; clear: both; display: block; float: right; min-height: 20px; padding-right: 26px; position: relative; width: 300px; } .question-box span { bottom: 0; right: 26px; position: absolute; } .center { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .emphasis { text-transform:uppercase; margin-bottom: 10px; font-size: 18px; font-weight: 600; } .color1 { color: #FFD24F !important; } .lighter-color1 { color: #FFD24F !important; } .breadcrumb-color1 { color: #6C6E70; } .color2 { color:#FFD24F !important; } .mobile-only { display: none !important; } .field-validation-error { color: #f00; } div.no-title-modal { background: #fff; } .no-title-modal .ui-dialog-titlebar { display:none; } div.ui-tooltip { background: #f1f0f0; border: 1px solid #FFD24F; color: #000; font-weight: normal; line-height: 1.4em; padding: 15px; } div.ui-tooltip.bill-sample { max-width: 600px; } div.ui-tooltip.name-code { max-width: 600px; white-space: pre-line; } div.ui-tooltip.cvv-tooltip { background: url(../Images/cvv-tooltip.png) no-repeat; background-color: white; height: 50px; width: 175px; background-size: 100%; } @media (max-width: 767px) { h1 { text-align: center; } .desktop-only { display: none !important; } .sageDetails div.column { display: inline-block; } } @media (max-width: 420px) { h1 { font-size: 20px; padding-bottom: 5px; } } @media (max-width: 350px) { h1 { font-size: 18px; } } .texas { display: none; } .RadDock .texas { display: inherit; /* Show it in the back end editor */ } .rollover { font-family: "Open Sans", Arial, sans-serif; font-size: 13px; font-weight: 600; } .rollover a, .rollover a:hover { color: #7ca12b !important; text-decoration: none; font-family: inherit; font-weight: inherit; cursor: pointer; } /************** PAGE LAYOUT ************/ .content-wrapper { margin: 0px auto; } #FormContents { float: left; width: 67%; } #Sidebar { float: right; width: 33%; } .sflanguagesHorizontalList { font-size: 24px; } @media (max-width: 768px) { #FormContents { width: 100%; } #Sidebar { display: none; } } /************** HEADER **************/ .page-header { margin: 40px 0 20px; } .page-header .right { text-align: right; } @media (max-width: 767px) { .page-header { text-align: center; } .sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 10000; border-top: 0; background: #fff; -webkit-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.75); box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.75); } } /************** FOOTER **************/ .page-footer { color: #949698; font-family: "Heebo", Arial, sans-serif; font-size: 11px; line-height: 15px; margin: 0 0 20px; width: 100%; margin-top: 50px; } .page-footer a { text-decoration: none; } .page-footer a:link, .page-footer a:visited { color: #949698; } .page-footer a:active, .page-footer a:hover { color: #6C6E70; } .footer-section { border-top: 1px solid #dde3a3; clear: both; margin: 10px 0 0 0; padding-top: 10px; } .historic-rates { border-top: 1px solid #DDE3A3; margin: 10px 0 0; padding-top: 10px; } .historic-rates a { color: #949698; font-size: 11px; text-decoration: none; } .historic-rates a:hover { color: #6C6E70; } .copyright { box-sizing: border-box; color: #949698; font-size: 10px; line-height: 30px; margin-top: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; } .copyright img { vertical-align: middle; } .copyright a:link, .copyright a:visited { color: #6C6E70; } .copyright a:active, .copyright a:hover { color: #6C6E70; } .awards { text-align: right; } .awards img { padding-left: 35px; } .awards li { display: inline-block; } @media (max-width: 420px) { .copyright { font-size: 10px; } } @media (max-width: 768px) { .awards { display: none; } .footer-section .left { width: 100% !important; } } /************** FORM **************/ #EnrollForm , .EnrollForm { padding: 10px 30px 10px 30px; } #EnrollForm .section , .EnrollForm .section { border-bottom: 1px dashed #B1B1B1 !important; padding-bottom: 15px !important; margin-bottom: 12px !important; } #EnrollForm .section.last , .EnrollForm .section.last { border-bottom: 0; /* Hide the border of the last section */ } #PropertyOwnershipSection { border-top: 1px dashed #B1B1B1; padding-top: 15px; margin-top: 12px; } .section:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .row { clear: both; } #EnrollForm .section h3 { color: #717171 !important; font-family: Arial, Helvetica, sans-serif !important; font-weight: bold !important; font-size: 16px !important; margin: 12px 0 12px 0 !important; } .section .row { color: #717171 !important; } #EmailDescription p { font-family: 'Roboto', Arial,Helvetica,sans-serif !important; color: #717171 !important; margin: 0 !important; font-size: 14px !important; font-weight: normal !important; } #EmailDescription a { color: #ac4982 !important; } /*#ESignatureBox { margin-top: 20px !important; margin-left: 80px !important; }*/ .row { margin-left: 0px !important; margin-right: 0px !important; } #ContinueButtonSection, #FinishButtonSection, #CloseButtonSection, #LookupButtonSection, #SwitchAndRenewalContinueButtonSection, #ContinueSolarButtonSection { border: 0 !important; margin-bottom: 0; text-align: center; } #LookupButtonSection { margin: 20px 0; } #ContinueButton, #CancelButton, #FinishButton, #CloseButton, #EsiLookupButton, #SwitchAndRenewalContinueButton, #ContinueSolarButton, div.threedomDetails button, div.sageDetails button, .submit-button { background: #FFD24F; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5OWQyNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZiYjEyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWM5MzAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: url(../Images/btn-arrow.png) no-repeat 240px 7px, -moz-linear-gradient(top, #f99d25 0%, #fbb12a 40%, #fec930 100%); /* FF3.6+ */ background: url(../Images/btn-arrow.png) no-repeat 240px 7px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99d25), color-stop(40%,#fbb12a), color-stop(100%,#fec930)); /* Chrome,Safari4+ */ background: url(../Images/btn-arrow.png) no-repeat 240px 7px, -webkit-linear-gradient(top, #f99d25 0%,#fbb12a 40%,#fec930 100%); /* Chrome10+,Safari5.1+ */ background: url(../Images/btn-arrow.png) no-repeat 240px 7px, -o-linear-gradient(top, #f99d25 0%,#fbb12a 40%,#fec930 100%); /* Opera 11.10+ */ background: url(../Images/btn-arrow.png) no-repeat 240px 7px, -ms-linear-gradient(top, #f99d25 0%,#fbb12a 40%,#fec930 100%); /* IE10+ */ background-position: right 20px center; border: none; color: #fff; cursor: pointer; font-size: 29px; height: 50px; line-height: 50px; padding-right: 95px; text-align: center; text-transform: uppercase; width: 100%; max-width: 300px; } #CancelButton.deposit { float: left; } #ContinueButton.deposit { float: right; } #ContinueSolarButton.solarOnly { max-width: 420px; } ul.further-processing { list-style-type: circle; padding-left: 20px; } .continue-button.disabled { background: #bebeb9; /* Old browsers */ background: url(../Images/btn-arrow.png) no-repeat 215px 0px, #bebeb9; cursor: default; } .spinner { display: none; height: 100px; position: absolute; width: 100px; z-index: 10001; } .spinner img { height: 100px; width: 100px; } .overlay { background-color: #000; display: none; height: 100%; left: 0; opacity: 0.1; position: fixed; top: 0; width: 100%; z-index: 10000; } @media (max-width: 420px) { #ContinueButton { width: 280px; } } /************** BREADCRUMBS **************/ #breadcrumbs { text-align: center; } #breadcrumbs .changePageLink { cursor: pointer; } #breadcrumbs .changePageLink :hover { cursor: pointer; } #breadcrumbs a { background-color: #898b8c; box-sizing: border-box; color: #fff; float: left; font-size: 15px; font-weight: bold; height: 54px; line-height: 14px; margin: 10px 0 10px 2.5%; padding-left: 10px; position: relative; text-align: center; text-decoration: none; width: 18%; } #breadcrumbs a:before { content: ""; position: absolute; right: 100%; top: 0px; width: 0px; height: 0px; border-top: 27px solid #898b8c; border-left: 15px solid transparent; border-bottom: 27px solid #898b8c; } #breadcrumbs a:after { content: ""; position: absolute; left: 100%; top: 0px; width: 0px; height: 0px; border-top: 27px solid transparent; border-left: 15px solid #898b8c; border-bottom: 27px solid transparent; } #breadcrumbs a.first { margin-left: 0; } #breadcrumbs a.first:before { border: 0; } #breadcrumbs a.last { padding-left: 0; } #breadcrumbs a.last:after { border: 0; } #breadcrumbs a.disabled { background-color: #bebeb9; } #breadcrumbs a.disabledBreadcrumbColor1 { background-color: #898b8c; } #breadcrumbs a.disabled , #breadcrumbs a.disabled:hover , #breadcrumbs a.disabled span , #breadcrumbs a.disabled:hover span , #breadcrumbs a.disabledBreadcrumbColor1 , #breadcrumbs a.disabledBreadcrumbColor1:hover , #breadcrumbs a.disabledBreadcrumbColor1 span , #breadcrumbs a.disabledBreadcrumbColor1:hover span , #breadcrumbs a.selected , #breadcrumbs a.selected:hover , #breadcrumbs a.selected span , #breadcrumbs a.selected:hover span { cursor: default; } #breadcrumbs a.disabled:after { border-left: 15px solid #bebeb9; } #breadcrumbs a.disabled:before { border-top: 27px solid #bebeb9; border-bottom: 27px solid #bebeb9; } #breadcrumbs a.disabledBreadcrumbColor1:before { border-top: 27px solid #898b8c; border-bottom: 27px solid #898b8c; } #breadcrumbs a.selected { background-color: #6c6e70; } #breadcrumbs a.selected:after { border-left: 15px solid #6c6e70; } #breadcrumbs a.selected:before { border-top: 27px solid #6c6e70; border-bottom: 27px solid #6c6e70; } #breadcrumbs span { display: block; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } #StartOverLink , .StartOverLink a { color: #6c6e70; } @media (max-width: 767px) { #breadcrumbs { font-size: 0; /* Removes the Spacing between the breadcrumbs */ } #breadcrumbs a , #StartOverLink , .StartOverLink a { color: #fff; border-right: 3px solid #6c6e70; display: inline-block; float:none; height: auto; font-size: 13px; line-height: 1em; margin: 0 0 10px; padding: 3px 20px; text-align:center; width: auto; white-space: nowrap; } #breadcrumbs a.selected { background-color: #6c6e70; border: 0; display:inline-block; } #breadcrumbs a.disabled { background: inherit; color: #bebeb9; } #breadcrumbs a.last { border: 0; padding-left: 20px; } #breadcrumbs a:before , #breadcrumbs a:after{ display: none; } #breadcrumbs span { display: inline; position: static; } #StartOverLink , .StartOverLink a { border: 0; color: #6c6e70; font-weight: bold; padding-left: 10px; text-decoration: none; } } /************** ENROLLMENT SUMMARY **************/ .product-table-column1 { padding-right: 10px; text-align: right; } .enrollment-summary { margin-left: 12px; position: relative; } .enrollment-summary a, .enrollment-summary a:visited { color: #6c6e70; cursor: pointer; } .enrollment-summary h3 { display: inline-block; text-transform: uppercase; } .enrollment-summary .summary-box { background-color: #fff; border: 1px solid #bebeb9; margin-bottom: 1.5em; padding: 20px 15px 0; } .enrollment-summary .summary-box-heading { font-size: 22px !important; color: #fff !important; background-color: #fbae2a; /* Old browsers */ background-image: -moz-linear-gradient(top, #f99d25 0%, #fbb12a 40%, #fec930 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99d25), color-stop(40%,#fbb12a), color-stop(100%,#fec930)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, #f99d25 0%,#fbb12a 40%,#fec930 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(top, #f99d25 0%,#fbb12a 40%,#fec930 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(top, #f99d25 0%,#fbb12a 40%,#fec930 100%); /* IE10+ */ border-top: 1px solid #bebeb9 !important; border-left: 1px solid #bebeb9 !important; border-right: 1px solid #bebeb9 !important; -webkit-border-radius: 12px 12px 0 0 !important; -moz-border-radius: 12px 12px 0 0 !important; border-radius: 12px 12px 0 0 !important; padding: 20px 10px !important; text-align: left !important; } .enrollment-summary h2, .enrollment-summary h3 { color: #717171 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 900 !important; line-height: 18px !important; } .enrollment-summary h2 { margin: 0 0 1em !important; } .enrollment-summary h3 { margin: 0 !important; } .enrollment-summary a:link { color: #6c6e70 !important; } .enrollment-summary label { display: inline-block !important; font-size: inherit !important; font-weight: 900 !important; padding: 0 !important; } .enrollment-summary ul { list-style-type: none !important; margin: 0 !important; padding-left: 30px !important; } .enrollment-summary .section { border: 0 !important; padding: 0 !important; margin-bottom: 1.5em !important; } .enrollment-summary .summary-box-promo { background-color: #fffaeb !important; padding: 20px 15px !important; border: 1px solid #bebeb9 !important; } .enrollment-summary .addon { margin-top: 1em !important; } #SummaryPlan{ /*, #SummaryBillingAddress, #SummaryEmail {*/ margin-top: 1.5em !important; } #SummaryPlan a, #SummaryServiceAddress a, #SummaryBillingAddress a { vertical-align: top !important; } .toggle-button { display:none; } #SidebarClone { display:none; } header { padding-right: 15px; } .slideout-menu { width: 256px; } .oldPrice { color: #F00; text-decoration: line-through; margin-right: 6px; } @media (min-width: 1025px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .slideout-panel { transform: none !important; -webkit-transform: none !important; } } @media (max-width: 1000px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .enrollment-summary .summary-box-heading { font-size: 20px; } } @media (max-width: 767px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { #Sidebar { display:none; } #FormContents { width: 100%; } #SidebarClone { display:block; } header { position: relative; transform: translateZ(0); -webkit-transform: translateZ(0); } .enrollment-summary a { display: block; } .toggle-button { border: medium none; top: -5px; position: absolute; right: 20px; outline: medium none; color: black; display:block; background: url("../Images/hamburger-icon.png"); background-size: 100% 100%; width: 25px; height: 25px; } .sticky .toggle-button { top: 0; } } /** Enroll Form Override New CSS Styles*/ #EnrollForm body, #EnrollForm div, table, td, select, input { font-family: 'Roboto', Arial,Helvetica,sans-serif; font-size: 14px; } #EnrollForm h1 { border-bottom: 1px solid #FFD24F !important; color: #6C6E70 !important; font-family: 'Heebo' !important; font-size: 26px !important; font-weight: bold !important; margin: 5px 20px 10px 0 !important; padding-bottom: 10px !important; text-transform: uppercase !important; width: 100% !important; } #EnrollForm h2 { font: 500 26px 'Heebo'; } #EnrollForm h3 { font-family: 'Heebo' !important; font-size: 16px !important; font-weight: bold !important; margin: 12px 0px 12px 0; } label { font-weight: 600; } /************** SELECT UTILITY **************/ .esi-search-box label { float: left; } #EsiWhatIsThis, #EsiIdQuestionBox{ display: inline-block; } #EsiOr { display: inline-block; vertical-align: middle; width: 19%; } #EsiIdLookupSection { display: inline-block; width: 100%; } #EsiIdQuestionBox { width: inherit; float: inherit; } #EsiWhatIsThis { float: none; } #EsiID-question-container { float: right; } #SmallCommercialQuestionBox { padding-right: 0px; padding-top: 1px; width: 25px; float: none; vertical-align: sub; display: inline-block; } #EsiIdResultsTable , #EsiIdResultsTable table { width: 100%; border-collapse: separate !important; border-spacing: 1px !important; } #EsiIdResultsTable td, #EsiIdResultsTable th { padding: 5px 5px 5px 10px; text-align: left; width: 40%; } #EsiIdResultsTable th { font-weight: 700; } #EsiIdResultsTable tr:nth-child(odd) { background-color: #DCE5D0; } #EsiAssistanceMessage { border-top: 1px solid #DCE5D0; margin-top: 15px; padding-top: 15px; } .SelectEsiIdLink { cursor: pointer; color: #5c8727; } .header-image { background: url(../Images/header-forest.png) no-repeat; margin: 10px 0px 28px; position: relative; height: 182px; background-size: 100%; } .side-image2 { background: url(../Images/sidebar-ecobee.png) no-repeat; background-size: 100%; display: none; max-width: 100%; height: 501px; } .side-image1 { background: url(../Images/sidebar-statue.png) no-repeat; background-size: 100%; max-width: 100%; height: 419px; } .header-image h2 { color: #fff; left: 0; padding: 54px 0 0 30px; position: absolute; top: 0; } .welcome-message, .welcome-message h2 { color: #999 !important; } .welcome-message h2 { font: bold 22px Helvetica !important; } #EnrollForm .welcome-message h3 { font-family: Helvetica !important; font-size: 18px !important; font-weight: normal !important; margin: 0 !important; color: #999 !important; } #PropertyTypeLabel { display: inline-block; vertical-align: top; width: 160px; } #PropertySection .section { max-width: 325px; padding-bottom: 10px; width: 100%; } #PropertySection .property-selections { display: inline-block; } #PropertySection .property-selections label { width: 125px; } #UtilitySection .large-electric-usage { margin-bottom: 10px; } .exceeds-usage-message { margin-top: 3px; } .esi-search-box { box-sizing: border-box; clear: none; display: inline-block; float: left; padding-right: 0px; vertical-align: middle; width: 40%; } #ServiceStreetAddressBox { float: none; } .select-utility-header { position: relative; margin: 10px 0 28px; } .select-utility-header img { min-height: 130px; width: 100%; } .select-utility-header .copy { color: #fff; position: absolute; left: 30px; top: 33%; } @media (max-width: 768px) { .select-utility-header .copy { left: 15px; } .select-utility-header h2 , .header-image h2 { font-size: 20px; } .header-image { height: 150px; background-size: inherit; } .select-utility-sidebar , .side-image1 , .side-image2 { display: none !important; } } @media (max-width: 420px) { .select-utility-header h2 { font-size: 16px; } .header-image h2 { font-size: 16px; padding: 15px; } .header-image { height: 100px; background-size: inherit; } #PropertySection .property-selections { display: block; margin-top: 15px; padding-left: 80px; } #PropertySection .property-selections input { clear: left; float: left; margin: 0 10px 10px 0; } #PropertySection .property-selections label { clear: none; float: left; } #SmallCommercialQuestionBox { margin-top: 30px; } .esi-search-box { box-sizing: border-box; display: block; float: none; width: 100%; } .esi-search-box label { float:none; display: block; } #EsiIdBox { position: relative; } #EsiID-question-container { position: absolute; top: -4px; right: 0; } #EsiOr { margin: 15px 0; } } /********* UPI STYLES **************************/ /* right column */ .colB { float: right; margin: 0; width: 100%; } /* ///// right column top banner or text (h1) ///////////////////////////////////////// */ /* if just text, show green bar */ .colB h1 { margin: 0 0 15px -10px; padding: 8px 15px; font-family: "Francois One", Arial Narrow, Helvetica Narrow, Arial, sans-serif; font-size: 17px; font-weight: normal; font-style: normal; line-height: 21px; text-transform: uppercase; color: #fff; width: 110%; background: #5e8b22; /* Old browsers */ background: -moz-linear-gradient(top, #5e8b22 0%, #a1bf2f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e8b22), color-stop(100%,#a1bf2f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5e8b22 0%,#a1bf2f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5e8b22 0%,#a1bf2f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5e8b22 0%,#a1bf2f 100%); /* IE10+ */ background: linear-gradient(to bottom, #5e8b22 0%,#a1bf2f 100%); /* W3C */ } .ie8 .colB h1 { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e8b22', endColorstr='#a1bf2f',GradientType=0 ); /* IE6-8 */ } .ie7 .colB h1, .ie6 .colB h1 { filter: none; background: #5e8b22; } .ie9 .colB h1 { filter: none; } /* green bar with link */ .colB h1.more-us_en, .colB h1.more-us_es { padding: 0; } .colB h1 a { display: block; } .colB h1 a:link, .colB h1 a:visited { color: #fff; text-decoration: none; } .colB h1 a:active, .colB h1 a:hover { color: #F6D320; text-decoration: none; } .colB h1.more-us_en a, .colB h1.more-us_es a { display: block; padding: 8px 75px 8px 8px; } .colB h1.more-us_en a:link, .colB h1.more-us_en a:visited { background: url(../images/bg-h1-more-off-us_en.png) right top no-repeat; } .colB h1.more-us_en a:active, .colB h1.more-us_en a:hover { background: url(../images/bg-h1-more-on-us_en.png) right top no-repeat; } .colB h1.more-us_es a:link, .colB h1.more-us_es a:visited { background: url(../images/bg-h1-more-off-us_es.png) right top no-repeat; } .colB h1.more-us_es a:active, .colB h1.more-us_es a:hover { background: url(../images/bg-h1-more-on-us_es.png) right top no-repeat; } /* if there is a banner image, use that for the h1 */ .colB h1.banner, .ie6 .colB h1.banner, .ie7 .colB h1.banner, .ie8 .colB h1.banner, .ie9 .colB h1.banner { margin: 0 0 15px 0; padding: 0; font-family: "Francois One", Arial Narrow, Helvetica Narrow, Arial, sans-serif; font-size: 24px; font-weight: normal; font-style: normal; line-height: 28px; text-transform: uppercase; color: #a3c131; filter: none ! important; background: none ! important; } .colB h1.banner img { margin: 0; padding: 0; max-width: 100%; width: auto; height: auto; } #UPIModal.ui-dialog-content, #SummaryUPIModal.ui-dialog-content { overflow: hidden; } /* ///// right column (main page) headings hierarchy ////////////////////////////////// */ .colB h2 { margin: 15px 0; padding: 0; font-family: "Open Sans", Arial, sans-serif; font-size: 21px; font-weight: bold; font-style: normal; line-height: 24px; text-transform: none; color: #5c8727; } .colB h2.alt { margin: 15px 0; padding: 0; font-family: "Open Sans", Arial, sans-serif; font-size: 18px; font-weight: normal; font-style: normal; line-height: 21px; text-transform: uppercase; color: #e6911f; } .colB h3 { margin: 15px 0; padding: 0; font-family: "Open Sans", Arial, sans-serif; font-size: 18px; font-weight: bold; font-style: italic; line-height: 21px; text-transform: none; color: #759c2a; } .colB h4 { margin: 0; padding: 0; font-family: "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: bold; font-style: italic; line-height: 18px; text-transform: none; color: #5c8727; } .colB blockquote { margin: 15px 0; padding: 15px 0; font-family: "Open Sans", Arial, sans-serif; font-size: 21px; font-weight: normal; font-style: normal; line-height: 24px; text-transform: uppercase; color: #a2c02f; border-top: 1px solid #f8f8f0; border-bottom: 1px solid #f8f8f0; } #UtilityPriceIndex { position: relative; height: 400px; width: 91%; } #UtilityPriceIndex strong { font-family: "Francois One", Arial Narrow, Helvetica Narrow, Arial,sans-serif; } #UtilityPriceIndex select { /* display: inline-block; */* margin-top: 4px; /* padding: 9px 6px 9px 6px; */ width: 382px;/* 368+14 */ height: 40px; line-height: 40px; /* border: 1px solid #cccccc; */ /* -webkit-border-radius: 5px; */ -moz-border-radius: 5px; border-radius: 5px; /* background-color: #ffffff; */ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } /* fix bad rounded corners in opera */ #UtilityPriceIndex .opera select { /* can't find a fix for the bar border radius yet */ } /* fix safari select height */ #UtilityPriceIndex .safari select { line-height: 34px; } /* each item in the dropdown */ #UtilityPriceIndex option { padding: 10px 6px 9px 6px; height: 21px; /*background: #eee;*/ } #UtilityPriceIndex .default option { padding: 3px 6px 3px 6px; } } /* the "label" option */ #UtilityPriceIndex option.defaultOption { background: #ccc; } /* undo the background color on options in ie, because it also colors the select area */ #UtilityPriceIndex .ie9 option, #UtilityPriceIndex .ie8 option, #UtilityPriceIndex .ie7 option, #UtilityPriceIndex .ie6 option { background: #fff; } /* multi-select */ #UtilityPriceIndex select[multiple], #UtilityPriceIndex select[size] { height: auto; } /* on focus, put a blue glow around the select */ #UtilityPriceIndex select:focus { border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); outline: 0; outline: thin dotted \9; } /* gray out a readonly/disabled select */ #UtilityPriceIndex select[disabled], #UtilityPriceIndex select[readonly] { cursor: default; -webkit-text-fill-color: #888; background-color: #f4f4f4; -webkit-text-fill-color: #888; } /* replacement select ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* the wrapper around the select */ #UtilityPriceIndex .select-container { float: left; position: relative; margin: 0; padding: 4px 6px; width: 368px; height: 30px; line-height: 30px; border: 1px solid #cccccc; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: #ffffff; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } /* blue glow on hover */ #UtilityPriceIndex .select-container:hover { border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); outline: 0; outline: thin dotted \9; } /* the is active, show all */ #UtilityPriceIndex ul.select.active li { display: block; } /* hover over an