/*========================================================================== ============================================================================ ============================================================================ The following styles are set, and should not be edited. If an override is necessary, please put that declaration at the bottom of the stylesheet where it is explicitly called for by a comment block. ============================================================================ ============================================================================ ==========================================================================*/ /* ========================================================================== Sitefinity selector overrides ========================================================================== */ .cta-wrapper.lander p>a { width: 204px; } .cta-wrapper.lander > img { margin-top: -2px; } .cta-wrapper>ul>li img { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .hero .login{-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;-ms-border-radius:6px 6px 0 0;-o-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;-webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.4);-moz-box-shadow:0px 0px 8px rgba(0,0,0,0.4);box-shadow:0px 0px 8px rgba(0,0,0,0.4);float:right;margin-top:130px;width:270px} @media all and (max-width: 1440px){.hero .login{margin-top:35px}} @media all and (max-width: 1440px) and (max-height: 899px){.hero .login{margin-top:60px;}} @media all and (max-width: 1440px) and (max-height: 799px){.hero .login{margin-top:7px;}} @media all and (max-width: 800px){.hero .login{margin-top:15px}} @media all and (max-width: 800px) and (max-height: 899px){.hero .login{margin-top:60px}} @media all and (max-width: 800px) and (max-height: 799px){.hero .login{margin-top:7px}} @media all and (max-width: 700px){.hero .login{display:none}} .hero .login .login-title{-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;-ms-border-radius:6px 6px 0 0;-o-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;background:#313131;color:#ccc;font-size:0.950em;font-weight:normal;font-family:"ff-meta-sc-web-pro",sans-serif;padding:3px 15px 4px 36px;position:relative;text-transform:lowercase} .hero .login .login-title em.lock,#home-hero-slider .login .login-title em.lock{background-image:url("../img/icon_sprite.png");background-position:-180px 0px;background-repeat:no-repeat;display:inline-block;height:16px;width:13px;position:absolute;top:7px;left:12px} .lte-ie9 .hero .login .login-title{font-size:1.1em;padding:10px 15px 8px 36px} .hero .login .login-body{-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;-ms-border-radius:0 0 6px 6px;-o-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;background:url(../img/hero_login_bg.png) repeat;padding:15px 15px 0 15px} .hero .login .login-body input[type='text'],.hero .login .login-body input[type='password']{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";filter:alpha(opacity=90);-webkit-opacity:0.9;-moz-opacity:0.9;opacity:0.9;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;background:white;border:1px solid #cecece;font-size:0.950em;margin-bottom:12px;padding:4px 10px 4px 10px;width:241px} .hero .login .login-body .location label{color:#555;font-size:14px;margin-right:25px;float:none;} .hero .login .login-body .location input{margin-right:5px} .hero .login .login-body label.check{color:#555;font-size:0.8em;float:right;margin-top:19px} .hero .login .login-body label.check input{margin-right:2px} .hero .login .login-body .btn-blue{margin-top:10px} .hero .login .login-body .login-links{border-top:1px solid #eff0f0;padding:10px 15px;margin:20px -15px 0px -15px} .hero .login .login-body .login-links .left-column{float:left} .hero .login .login-body .login-links .right-column{float:right} .hero .login .login-body .login-links a{-webkit-transition:all 0.15s linear;-moz-transition:all 0.15s linear;-o-transition:all 0.15s linear;transition:all 0.15s linear;color:#1969b9;display:block;font-size:0.775em;text-decoration:none;margin-top:4px;padding-left:9px;position:relative} .hero .login .login-body .login-links a em.caret{-webkit-transition:all 0.05s linear;-moz-transition:all 0.05s linear;-o-transition:all 0.05s linear;transition:all 0.05s linear;background-image:url("../img/icon_sprite.png");background-position:-50px -30px;background-repeat:no-repeat;display:inline-block;height:6px;width:4px;position:absolute;left:0;top:7px} .hero .login .login-body .login-links a:hover{color:#ff8f01} .hero .login .login-body .login-links a:hover em.caret{left:2px} .lte-ie9 .hero .login .login-body input[type='text'],.lte-ie9 .hero .login .login-body input[type='password']{padding:8px 10px 7px 10px !important} .lte-ie9 .hero .login .login-body .login-links a{margin-bottom:7px} .lte-ie9 .hero .login .login-body .login-links em.caret{top:3px} footer, .page-push { clear: both; height: 0px; } div.rsmTemplate { padding-left: 0px !important; margin-right: 8px; } div.sfBreadcrumbWrp > div > ul { border: 0; list-style: none; margin: 0; padding: 0; *zoom: 1; margin-bottom: 20px; } div.sfBreadcrumbWrp > div > ul li { margin: 0; padding: 0; } div.sfBreadcrumbWrp > div > ul:before, .breadcrumb > ul:after { content: " "; display: table; } div.sfBreadcrumbWrp > div > ul:after { clear: both; } @media all and (max-width: 700px) { div.sfBreadcrumbWrp > div > ul { margin-top: -20px; } } div.sfBreadcrumbWrp > div > ul > li > div > a { -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; color: #6d6e70; display: inline-block; position: relative; padding-top: 2px; padding-left: 8px; } div.faq-breadcrumb { padding-top: 20px; } div.faq-breadcrumb > div > div.sfBreadcrumbWrp > div > ul > li, div.faq-breadcrumb > div > div.sfBreadcrumbWrp > div > ul > li > div > a { color: #ffffff; } div.faq-breadcrumb > div > div.sfBreadcrumbWrp > div > ul > li > div > a:hover, div.sfBreadcrumbWrp > div > ul > li > div > a:hover { color: #ff8f01; } div.sfBreadcrumbWrp > div > ul > li > div > a > i.home, a > i.home { background-image: url("../img/icon_sprite.png"); background-position: 0 -50px; background-repeat: no-repeat; display: inline-block; height: 16px; width: 16px; position: absolute; top: 0; left: 0; } div.sfBreadcrumbWrp > div > ul > li:first-child > div > a { background-image: url("/public/img/icon_sprite.png"); background-position: 0 -50px; background-repeat: no-repeat; display: inline-block; height: 16px; width: 16px; padding-left: 18px; margin-right: 32px; padding-left: 20px; } div.sfBreadcrumbWrp > div > ul > li.separator { color: #6d6e70; margin: -2px 7px 0 7px; } article.single > div > div.sfimageWrp > img, .sub-hero > div > div.sfimageWrp > img { max-width: 50%; float: right; margin-left: 20px; margin-bototm: 20px; } article > ul.newsinfo { list-style-type: none; } .sub-hero>.img>div>div>img { float: right; width: 100%; } .thumb-links { border: 0; list-style: none; margin: 0; padding: 0; } @media all and (max-width: 700px){ .thumb-links{margin:20px 20px 0 20px;} } .thumb-links>li { /*outline:1px solid red;*/ margin: 0; padding: 0; float: left; font-size: 0.9em; margin-bottom: 20px; min-height:100px; } .thumb-links .columns:last-child{float:left;} @media all and (max-width: 880px){ .thumb-links>li{min-height:110px;} } @media all and (max-width: 800px){ .thumb-links>li{min-height:120px;} } @media all and (max-width: 700px){ .thumb-links>li{min-height:100px;} } .thumb-links>li:nth-child(odd):after, .thumb-links>li:nth-child(odd):before { content: " "; display:table; } .thumb-links>li:nth-child(odd):after{clear:both;} .thumb-links>li span.thumb-title { margin-top: -1px; display: block; font-weight: bold; font-style: normal; } .thumb-links>li a { display: block; width: 85px; } .thumb-links>li .thumb-description { margin: 0; padding: 0 20px 0 100px; } .thumb-links>li img { border: 4px solid #eaeaea; float: left; margin: 0 10px 10px 0; max-width: 100px; } ul.sfCategoriesList { display: none; } ul.sfCategoriesList:first { display: inline; } .sfCategoriesList li { position: relative; float: left; margin-right: 10px; list-style: none; } .thumb-container>.video-thumb { overflow: hidden; height: 130px; } .thumb-container>.video-thumb>.sfimageWrp>img { /*width: 100%;*/ margin-top: -20px; } section.video-section { margin-bottom: 30px; } span.select-replace-cover { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-appearance: none; height: 30px; line-height: 28px; font-size: 0.8em; padding-left: 7px; border: 1px solid #dadada; background: url(../img/select_style.png) no-repeat top right; outline: 0; margin-bottom: 20px; } .h2-faqs { padding-top: 10px; } /*.container-faq .content { padding-right: 0px; width: 75%; }*/ div#main-container.container-faq { min-height: 650px; } div.faq-sidebar > div > div.container-faq.nav > div > ul.rtsUL > li > a { color: #6d6e70; display: block; padding: 5px 0 5px 0px; border-left: 4px solid #fff; text-align: left; } div.faq-sidebar > div > div.container-faq.nav > div > ul.rtsUL > li > a.rtsSelected { color: #ff8f01; border-left: 4px solid #ff8f01; } .faq-search-container { overflow: hidden; border: 1px solid #C0C0C0; width: 350px; border-radius: 4px; } @media all and (max-width: 400px) { .faq-search-container { width: 112%; } } #faq-search { border: 0; font-size: 14px; outline: 0; margin: 0; padding: 5px 6px 4px 6px; float: left; width: 316px; } @media all and (max-width: 400px) { #faq-search { width: 85%; } } #faq-search + input[type="submit"] { border: 1px solid #DDD; display: block; float: right; padding: 0; margin: -1px 0 -1px 0; position: relative; width: 32px; height: 32px; background-image: url("../img/icon_sprite.png"); background-position: -283px 6px; background-repeat: no-repeat; text-indent: -9999px; } /* Sitefinity overrides */ .RadMenu a.rmLink { cursor: default; display: block; } .RadMenu .rmLink { padding: 0; outline: 0; float: none; } .RadMenu .rmLink { width: auto; } /* Search */ header .search { /*@include clear(); @include rounded-corners(5px); @include box-shadow(0px, 1px, 0px, rgba(255,255,255,.8)); */ background: white; border: 1px solid #e5e5e5; overflow: hidden; margin: 0; padding: 0; position: absolute; top: 13px; right: 0; width: 260px; } header .search input[type='text'] { /*@include rounded-corners(5px);*/ border: 0px; float: left; font-size: 0.9em; outline: 0; margin: 0; padding: 5px 6px 4px 6px; width: 220px; } .lte-ie9 header .search input[type='text'] { padding: 9px 6px 0px 6px; } header .search input[type='submit'] { /*@include rounded-corners(5px);*/ /*@include gradient(#fafafa, #eaeaea);*/ border: 1px solid #ddd; display: block; float: right; margin: 0; padding: 0; position: relative; width: 32px; height: 32px; margin: -1px -1px -1px 0; background-image: url("../img/icon_sprite.png"); background-position: -283px 6px; background-repeat: no-repeat; text-indent: -999px; } header .search input[type='submit']:hover { /*@include gradient(#eaeaea, #fafafa);*/ cursor: pointer; } */ header .search input[type='submit'] em.search-icon { /*@include icon(-312px 1px, 17px, 17px);*/ display: block; position: absolute; top: 8px; left: 7px; } .lte-ie9 header .search > input[type='submit'] { border-right: 0px; border-bottom: 0px; margin: -1px 0px 0px 0px; } .lte-ie9 header .search > input[type='submit'] em.search-icon { top: -7px; left: 7px; } .ie9 header .search > input[type='submit'] em.search-icon { top: 7px; left: 8px; } /* Navigation */ .top-nav { z-index: 9999 !important; } .RadMenu, .RadMenu_nav { z-index: 90 !important; } header .nav > ul { list-style: none; margin: 0; padding: 0; position: absolute; bottom: -0px; right: 0; } header .nav > ul > li { cursor: pointer; float: left; padding: 0; position: relative; } header .nav > ul > li.first > a, header .nav > ul > li.rmFirst > a { border-left: 1px solid #d9dada; text-transform: none; -webkit-border-radius: 8px 0 0 0; -moz-border-radius: 8px 0 0 0; -ms-border-radius: 8px 0 0 0; -o-border-radius: 8px 0 0 0; border-radius: 8px 0 0 0; } header .nav > ul > li.last > a, header .nav > ul > li.rmLast > a { -webkit-border-radius: 0 8px 0 0; -moz-border-radius: 0 8px 0 0; -ms-border-radius: 0 8px 0 0; -o-border-radius: 0 8px 0 0; border-radius: 0 8px 0 0; } header .nav > ul > li > a { background: url(../img/header_nav_bg.png) repeat-x; border: 1px solid #d4d4d4; border-bottom: 0px; border-left: 0; color: #6d6e70; display: block; font-size: 0.9em; height: 39px; position: relative; padding: 2px 4px 0px 4px !important; text-decoration: none; text-shadow: 0px 1px 0px white; text-transform: uppercase; } header .nav > ul > li > a > span { display: block; padding: 8px 14px 5px 14px !important; } .lte-ie9 header .nav > ul > li > a { padding: 5px 4px 0px 4px; } .ie9 header .nav > ul > li > a { padding: 5px 4px 0px 4px; } header .nav > ul > li > a > span > i.caret { background-image: url( '../img/icon_sprite.png'); background-position: -20px -29px; background-repeat: no-repeat; display: inline-block; height: 7px; width: 8px; position: absolute; right: 13px; top: 18px; } .lte-ie9 header .nav > ul > li > a > span > i.caret { background-image: url( '../img/icon_sprite.png'); background-position: -20px -29px; background-repeat: no-repeat; display: inline-block; height: 7px; width: 8px; position: absolute; right: 13px; top: 16px; display: none; } header .nav > ul > li:hover > a, header .nav > ul > li > a.active { -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; -ms-border-radius: 8px 8px 0 0; -o-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; background: white; color: #ff8f01; height: 44px; margin-top: -5px; } header .nav > ul > li:hover { cursor: pointer !important; } header .nav > ul > li:hover > a span, header .nav > ul > li > a.active span { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; padding: 11px 14px 0px 14px !important; margin-top: 2px; background: #ebebeb; cursor: pointer !important; background: -moz-linear-gradient(top, #ebebeb 0%, #ffffff); background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ffffff)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebebeb, endColorstr=#ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebebeb, endColorstr=#ffffff)"; } header .nav > ul > li:hover > a i.caret, header .nav > ul > li > a.active span i.caret { top: 23px; } .lte-ie9 header .nav > ul > li:hover > a span { filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background: url(../img/nav_bg.png) repeat-x; } .lte-ie9 header .nav > ul > li > a.active span { filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background: white; } header .nav > ul > li > a.active > span { background: none; } header .nav > ul > li:hover > a.active > span { background: #ebebeb; background: -moz-linear-gradient(top, #ebebeb 0%, #ffffff); background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ffffff)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebebeb, endColorstr=#ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebebeb, endColorstr=#ffffff)"; } .lte-ie9 header .nav > ul > li:hover > a.active > span { filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background: url(../img/nav_bg.png) repeat-x; } /* Dropdowns */ header .nav > ul > li:hover > ul { display: inline-block; } header .nav ul li ul { -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; -ms-border-radius: 0 6px 6px 6px; -o-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; -webkit-box-shadow: 0px, 3px, 4px, rgba(0,0,0,.3); -moz-box-shadow: 0px, 3px, 4px, rgba(0,0,0,.3); box-shadow: 0px, 3px, 4px, rgba(0,0,0,.3); background: white; display: none; list-style: none; padding: 15px 0 15px 0 !important; margin: 0; position: absolute; top: 34px; min-width: 250px; z-index: 1000; } header .nav li ul li { margin: 0; padding: 0; } header .nav li ul a { -webkit-transition: color .10s linear; -moz-transition: color .10s linear; -o-transition: color .10s linear; transition: color .10s linear; color: #444; display: block; font-size: 0.850em; padding: 2px 0 !important; text-decoration: none; } header .nav li ul a:hover { color: #ff8f01; } .lte-ie9 header .nav li ul { border: 1px solid #ccc; border-top: 0px; left: -1px; } .lte-ie9 header .nav li ul li a { padding: 5px 18px; } header .nav > li.first ul { left: 1px; } /* Homepage CTA */ .page-home .cta-wrapper > ul > li p { display: none; } /* Global Notifications */ div #OucGlobalNotificationPanel { background: #282828; color: #efefef !important; font-size: 0.9em; } div#OucGlobalNotificationPanel div > div { padding: 5px 0px 3px; } /* Footer */ /*#FooterNavigation_T170B4012007{width:100% !important;}*/ footer .primary > div { display: inline-block; margin: 0 auto; max-width: 990px; width: 100%; height: auto!important; } footer .primary > div > div> ul { border-left: 1px solid #d4d4d4; display: inline-block; list-style: none; margin: 0; padding: 0 0 0 0; text-align: left; vertical-align: top; width: 25%; } footer .primary > div > div> ul:first-child { display: none; } footer .primary > div > div > ul > li { margin: 0; padding: 0; } footer .primary > div > div > ul > li:first-child { margin-bottom: 12px; } .lte-ie9 footer .primary > div > div > ul > li:first-child { margin-bottom: 20px; } footer .primary > div > div > ul > li:first-child > a, footer .primary > div > div > ul > li > ul > li > a { border-left: 1px solid #d4d4d4 !important; color: #555555 !important; display: block !important; font-size: 1.050em !important; text-decoration: none !important; padding-left: 23px !important; margin-left: -1px !important; margin-bottom: 3px !important; -webkit-transition: all .12s linear; -moz-transition: all .12s linear; -o-transition: all .12s linear; transition: all .12s linear; } footer .primary > div > div > ul > li:first-child > a { color: #444444 !important; font-size: 0.8em !important; font-weight: 600 !important; text-transform: uppercase; text-decoration: none; margin-bottom: 15px !important; } footer .primary a:hover, footer .primary > div > div > ul > li:first-child > a:hover { border-left: 4px solid #ff8f01 !important; color: #ff8f01 !important; } .lte-ie9 footer .primary ul li a { display: block; margin-bottom: 10px; } /* Side menu */ .RadTreeView_Sitefinity .rtLines .rtMid { background: none !important;} .RadTreeView .rtLines .rtTop, .RadTreeView .rtLines .rtMid, .RadTreeView .rtLines .rtBot { background: none !important;} .RadTreeView_Sitefinity .rtPlus, .RadTreeView_Sitefinity .rtMinus { background: none !important;} .RadTreeView_Sitefinity .rtLines .rtLI, .RadTreeView_Sitefinity .rtLines .rtFirst .rtUL { background: none !important;} .top-content { height: 30px !important; } .myouc.sidebar .rtSelected { border-right: 4px solid #ff8f01 !important; } .myouc.sidebar a { color: #555 !important;} .myouc.sidebar .rtSelected a { background: none !important; color: #ff8f01 !important; } #SideNavContent_T0DBDC211001 > div > ul > li > div, #SideNavContent_T0DBDC211001 > div > ul > li ul { padding-left: 0px !important; margin-left: 0px !important; } /* Media Queries */ @media all and (max-width: 1270px) { header .nav > li.last > ul { -webkit-border-radius: 6px 0px 6px 6px; -moz-border-radius: 6px 0px 6px 6px; -ms-border-radius: 6px 0px 6px 6px; -o-border-radius: 6px 0px 6px 6px; border-radius: 6px 0px 6px 6px; left: -132px; } .lte-ie9 header .nav > li.last > ul { -webkit-border-radius: 6px 0px 6px 6px; -moz-border-radius: 6px 0px 6px 6px; -ms-border-radius: 6px 0px 6px 6px; -o-border-radius: 6px 0px 6px 6px; border-radius: 6px 0px 6px 6px; left: -131px; } } @media all and (max-width: 1030px) { /*header .nav { bottom: -103px; }*/ /*footer .primary > div > div > ul { width: 225px; }*/ } @media all and (max-width: 1000px) { header .nav { bottom: -103px; } } @media all and (max-width: 960px) { /*footer .primary > div > div > ul { width: 215px; }*/ .lte-ie9 footer .primary { padding: 37px 0 27px 0; } } @media all and (max-width: 920px) { footer .primary ul { border-left: 0px; width: 200px; } .ie9 footer > .primary > ul {border-left: 0px; width: 196px;} footer .primary > div > div > ul > li > a { border-left: 0px; } footer .primary > div > div > ul li a:hover { border-left: 0px; } } @media all and (max-width: 815px) { footer .primary { display: none;} } @media all and (max-width: 800px) { .win header .nav > li > a { padding: 5px 4px 0px 3px; } .lte-ie9 header .nav > li > a { padding: 5px 4px 0px 3px; } .ie9 header .nav > li > a { padding: 5px 3px 0px 2px; } } .jPanelMenu, body { overflow: visible !important;} .h2-faqs, .h2-understanding { font-weight: bold; /*padding-top: 30px;*/ margin-bottom: 20px; color: #fff; -webkit-text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); -moz-text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); } .h2-understanding{padding-top:30px;} /* OUC (sitefinity) : Understanding My Bill ========================================== */ #understanding-my-bill-dropdown { margin-top: 40px; } .bill-description { width: 690px; } @media all and (max-width: 960px) { .bill-description { width: 100%; } } .bill-area { width: 100%; position: relative; margin: 10px 0 50px 0; *zoom: 1; } .bill-area:before, .bill-area:after { content: " "; display: table; } .bill-area:after { clear: both; } .bill-area .layer-container { width: 100%; min-height: 250px; padding-right: 275px; } @media all and (max-width: 1024px) { .bill-area .layer-container { padding-right: 235px; } } @media all and (max-width: 1000px) { .bill-area .layer-container { padding-right: 195px; } } @media all and (max-width: 960px) { .bill-area .layer-container { padding-right: 0px; } } .bill-area .layer-container .image-layer { position: relative; } @media all and (max-width: 960px) { .bill-area .layer-container .image-layer { text-align: center; } } @media all and (max-width: 700px) { .bill-area .layer-container .image-layer img { width: 100%; } } .bill-area .layer-container .image-layer .cta { left: 0; top: 0; position: absolute; display: none; width: 100%; height: 100%; } @media all and (max-width: 960px) { .bill-area .layer-container .image-layer .cta { display: block; } } @media all and (max-width: 700px) { .bill-area .layer-container .image-layer .cta { width: 100%; } } .bill-area .layer-container .image-layer .cta .cta-text { display: block; width: 220px; margin: 40% auto 0; background-color: #000; background-color: rgba(0, 0, 0, 0.75); text-align: center; padding: 10px 20px; font-weight: bold; color: #fff; -webkit-text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); -moz-text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .bill-area .layer-container .data-layer { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } @media all and (max-width: 960px) { .bill-area .layer-container .data-layer { display: none !important; } } .bill-area .layer-container .anno-container { position: absolute; height: 36px; width: 35px; margin: 0; padding: 0; } .bill-area .layer-container .anno { z-index: 10; position: absolute; cursor: pointer; display: block; height: 36px; width: 35px; background: transparent url("../img/understandingMyBill/annotation-sprites.png") left top no-repeat; } .bill-area .layer-container .anno span { display: none; } .bill-area .layer-container .anno.active + span { position: absolute; display: block; border: 2px solid #ff6701; } .bill-area .layer-container .anno-1 { background-position: left top; } .bill-area .layer-container .anno-1:hover { background-position: -35px top; } .bill-area .layer-container .anno-1.active { background-position: -70px top; } .bill-area .layer-container .anno-2 { background-position: left -36px; } .bill-area .layer-container .anno-2:hover { background-position: -35px -36px; } .bill-area .layer-container .anno-2.active { background-position: -70px -36px; } .bill-area .layer-container .anno-3 { background-position: left -72px; } .bill-area .layer-container .anno-3:hover { background-position: -35px -72px; } .bill-area .layer-container .anno-3.active { background-position: -70px -72px; } .bill-area .layer-container .anno-4 { background-position: left -108px; } .bill-area .layer-container .anno-4:hover { background-position: -35px -108px; } .bill-area .layer-container .anno-4.active { background-position: -70px -108px; } .bill-area .layer-container .anno-5 { background-position: left -144px; } .bill-area .layer-container .anno-5:hover { background-position: -35px -144px; } .bill-area .layer-container .anno-5.active { background-position: -70px -144px; } .bill-area .layer-container .anno-6 { background-position: left -180px; } .bill-area .layer-container .anno-6:hover { background-position: -35px -180px; } .bill-area .layer-container .anno-6.active { background-position: -70px -180px; } .bill-area .layer-container .anno-7 { background-position: left -216px; } .bill-area .layer-container .anno-7:hover { background-position: -35px -216px; } .bill-area .layer-container .anno-7.active { background-position: -70px -216px; } .bill-area .layer-container .anno-8 { background-position: left -252px; } .bill-area .layer-container .anno-8:hover { background-position: -35px -252px; } .bill-area .layer-container .anno-8.active { background-position: -70px -252px; } .bill-area .layer-container .anno-9 { background-position: left -288px; } .bill-area .layer-container .anno-9:hover { background-position: -35px -288px; } .bill-area .layer-container .anno-9.active { background-position: -70px -288px; } .bill-area .layer-container .anno-10 { background-position: left -324px; } .bill-area .layer-container .anno-10:hover { background-position: -35px -323px; } .bill-area .layer-container .anno-10.active { background-position: -70px -323px; } .bill-area .layer-container .anno-11 { background-position: left -360px; } .bill-area .layer-container .anno-11:hover { background-position: -35px -359px; } .bill-area .layer-container .anno-11.active { background-position: -70px -359px; } .bill-area .layer-container .anno-12 { background-position: left -396px; } .bill-area .layer-container .anno-12:hover { background-position: -35px -396px; } .bill-area .layer-container .anno-12.active { background-position: -70px -396px; } .bill-area .layer-container .anno-ouc-1 + .anno-hotspot { width: 135px; height: 75px; left: 25px; top: 5px; } .bill-area .layer-container .anno-ouc-2 + .anno-hotspot { width: 630px; height: 72px; left: 23px; top: -1px; } .bill-area .layer-container .anno-ouc-3 + .anno-hotspot { width: 286px; height: 28px; left: 23px; top: 4px; } .bill-area .layer-container .anno-ouc-4 + .anno-hotspot { width: 286px; height: 70px; left: 23px; top: 2px; } .bill-area .layer-container .anno-ouc-5 + .anno-hotspot { width: 286px; height: 21px; left: 23px; top: 8px; } .bill-area .layer-container .anno-ouc-6 + .anno-hotspot { width: 286px; height: 130px; left: 23px; top: 8px; } .bill-area .layer-container .anno-ouc-7 + .anno-hotspot { width: 150px; height: 308px; left: 10px; top: 8px; } .bill-area .layer-container .anno-ouc-8 + .anno-hotspot { width: 185px; height: 237px; left: 20px; top: 19px; } .bill-area .layer-container .anno-ouc-9 + .anno-hotspot { width: 230px; height: 110px; left: 20px; top: 3px; } .bill-area .layer-container .anno-ouc-10 + .anno-hotspot { width: 222px; height: 300px; left: 23px; top: 9px; } .bill-area .layer-container .anno-ouc-11 + .anno-hotspot { width: 160px; height: 105px; left: 23px; top: 9px; } .bill-area .layer-container .anno-ouc-12 + .anno-hotspot { width: 117px; height: 35px; left: 23px; top: 1px; } .bill-area .layer-container .anno-commercial-1 + .anno-hotspot { width: 135px; height: 75px; left: 25px; top: 5px; } .bill-area .layer-container .anno-commercial-2 + .anno-hotspot { width: 630px; height: 70px; left: 23px; top: 1px; } .bill-area .layer-container .anno-commercial-3 + .anno-hotspot { width: 286px; height: 25px; left: 23px; top: 4px; } .bill-area .layer-container .anno-commercial-4 + .anno-hotspot { width: 286px; height: 64px; left: 23px; top: -21px; } .bill-area .layer-container .anno-commercial-5 + .anno-hotspot { width: 286px; height: 22px; left: 23px; top: 6px; } .bill-area .layer-container .anno-commercial-6 + .anno-hotspot { width: 286px; height: 135px; left: 23px; top: 8px; } .bill-area .layer-container .anno-commercial-7 + .anno-hotspot { width: 150px; height: 308px; left: 10px; top: 8px; } .bill-area .layer-container .anno-commercial-8 + .anno-hotspot { width: 190px; height: 230px; left: 20px; top: 19px; } .bill-area .layer-container .anno-commercial-9 + .anno-hotspot { width: 230px; height: 105px; left: 20px; top: 3px; } .bill-area .layer-container .anno-commercial-10 + .anno-hotspot { width: 216px; height: 300px; left: 23px; top: 2px; } .bill-area .layer-container .anno-commercial-11 + .anno-hotspot { width: 165px; height: 94px; left: 23px; top: 9px; } .bill-area .layer-container .anno-commercial-12 + .anno-hotspot { width: 120px; height: 37px; left: 23px; top: 4px; } .bill-area .layer-container .anno-solar-1 + .anno-hotspot { width: 300px; height: 75px; left: 23px; top: 14px; } .bill-area .layer-container .anno-solar-2 + .anno-hotspot { width: 300px; height: 18px; left: 23px; top: 13px; } .bill-area .layer-container .anno-solar-3 + .anno-hotspot { width: 300px; height: 73px; left: 23px; top: -5px; } .bill-area .layer-container .anno-solar-4 + .anno-hotspot { width: 420px; height: 125px; left: 23px; top: 10px; } .bill-area .layer-container .anno-solar-5 + .anno-hotspot { width: 420px; height: 125px; left: 23px; top: 10px; } .bill-area .layer-container .anno-solar-6 + .anno-hotspot { width: 260px; height: 24px; left: -245px; top: 6px; } .bill-area .layer-container .anno-stcloud-1 + .anno-hotspot { width: 161px; height: 33px; left: 12px; top: 1px; } .bill-area .layer-container .anno-stcloud-2 + .anno-hotspot { width: 161px; height: 305px; left: 12px; top: 1px; } .bill-area .layer-container .anno-stcloud-3 + .anno-hotspot { width: 270px; height: 200px; left: -210px; top: -30px; } .bill-area .layer-container .anno-stcloud-4 + .anno-hotspot { width: 70px; height: 30px; left: -32px; top: 37px; } .bill-area .layer-container .anno-stcloud-5 + .anno-hotspot { width: 62px; height: 27px; left: 17px; top: 4px; } .bill-area .layer-container .anno-stcloud-6 + .anno-hotspot { width: 70px; height: 30px; left: -32px; top: 37px; } .bill-area .layer-container .anno-stcloud-7 + .anno-hotspot { width: 72px; height: 26px; left: 17px; top: 5px; } .bill-area .layer-container .anno-stcloud-8 + .anno-hotspot { width: 270px; height: 30px; left: -250px; top: 2px; } .bill-area .layer-container .anno-stcloud-9 + .anno-hotspot { width: 164px; height: 62px; left: 14px; top: 2px; } .bill-area .layer-container .anno-stcloud-10 + .anno-hotspot { width: 163px; height: 76px; left: -149px; top: -13px; } .bill-area .layer-container .anno-consolidated-1 + .anno-hotspot { width: 320px; height: 220px; left: 30px; top: 6px; } .bill-area .layer-container .anno-consolidated-2 + .anno-hotspot { width: 180px; height: 25px; left: 12px; top: 1px; } .bill-area .layer-container .anno-consolidated-3 + .anno-hotspot { width: 255px; height: 21px; left: 15px; top: 7px; } .bill-area .layer-container .anno-consolidated-4 + .anno-hotspot { width: 220px; height: 40px; left: 17px; top: 1px; } .bill-area .data-description { position: absolute; right: 0; top: 0; width: 275px; border: 1px solid #dadada; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } @media all and (max-width: 1024px) { .bill-area .data-description { width: 235px; } } @media all and (max-width: 1000px) { .bill-area .data-description { width: 195px; } } @media all and (max-width: 960px) { .bill-area .data-description { display: none; } } .bill-area .data-description .title { position: relative; background-color: #fff; border-bottom: 1px solid #dadada; padding: 7px 13px 5px 15px; margin: 0; font-weight: bold; -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; -ms-border-radius: 4px 4px 0px 0px; -o-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; *zoom: 1; width: 100%; } .bill-area .data-description .title:before, .bill-area .data-description .title:after { content: " "; display: table; } .bill-area .data-description .title:after { clear: both; } .bill-area .data-description em.annotation-mini { position: absolute; left: 10px; width: 30px; height: 30px; margin-right: 0; background: transparent url("../img/understandingMyBill/annotation-side-sprites.png") left top no-repeat; } .bill-area .data-description em.annotation-mini-2 { background-position: left -30px; } .bill-area .data-description em.annotation-mini-3 { background-position: left -60px; } .bill-area .data-description em.annotation-mini-4 { background-position: left -90px; } .bill-area .data-description em.annotation-mini-5 { background-position: left -120px; } .bill-area .data-description em.annotation-mini-6 { background-position: left -150px; } .bill-area .data-description em.annotation-mini-7 { background-position: left -180px; } .bill-area .data-description em.annotation-mini-8 { background-position: left -210px; } .bill-area .data-description em.annotation-mini-9 { background-position: left -240px; } .bill-area .data-description em.annotation-mini-10 { background-position: left -270px; } .bill-area .data-description em.annotation-mini-11 { background-position: left -300px; } .bill-area .data-description em.annotation-mini-12 { background-position: left -330px; } .bill-area .data-description span.text { display: block; font-size: 0.9em; padding: 3px 0 6px 30px; } .bill-area .data-description .body { background: #fcfcfc; background: -moz-linear-gradient(top, #fcfcfc 0%, #f2f2f2); background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f2f2f2)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fcfcfc, endColorstr=#f2f2f2); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#fcfcfc, endColorstr=#f2f2f2)"; -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; -ms-border-radius: 0px 0px 4px 4px; -o-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; padding: 8px 15px 20px 15px; } .bill-area .data-description .body p { margin: 0 0 12px 0; } .bill-area .data-description em.pointer-left { position: absolute; display: block; width: 8px; height: 12px; background: transparent url("../img/understandingMyBill/icon-pointer.png") left top no-repeat; left: -7px; top: 15px; } .bill-area .data-description .float-left, .bill-area .data-description .float-right { width: 47%; } .bill-area .data-description .float-right { margin-left: 6%; } .bill-area .data-description .btn { padding: 5px 10px; width: 100%; text-align: center; text-transform: uppercase; } @media all and (max-width: 1024px) { .bill-area .data-description .btn { font-size: 0.8em; } } .bill-area .data-description em.next { top: 10px; right: 10px; } @media all and (max-width: 1024px) { .bill-area .data-description em.next { display: none; } } .bill-area .data-description em.prev { top: 10px; left: 10px; } @media all and (max-width: 1024px) { .bill-area .data-description em.prev { display: none; } } #mobileModal { max-width: 520px; } #mobileModal .modal-body { padding: 0; } #mobileModal .entry-content { padding: 15px 25px 0px 15px; } #mobileModal .entry-img { max-width: 100%; border: 3px solid #eaeaea; margin-bottom: 5px; } #mobileModal .entry-title { text-align: left; font-weight: bold; margin-bottom: 0; padding-bottom: 0; } #mobileModal .entry-description { text-align: left; margin-top: 0px; padding-top: 0; } #mobileModal .understanding-my-bill-modal-footer { padding: 15px; background: transparent url("../img/start_service_divider.png") center top no-repeat; } /* OUC (sitefinity) : Start Services Landing =============================== */ .sub-hero-xl .img { width: 56.5%; max-width: 380px; } @media all and (max-width: 800px) { .sub-hero-xl .img { display: none; } } .sub-hero-xl .img > img { width: 100%; max-width: 380px; } .sub-hero-xl .copy { width: 43.5%; } @media all and (max-width: 800px) { .sub-hero-xl .copy { width: 100%; } } .new-customer-steps { text-align: center; *zoom: 1; } .new-customer-steps:before, .new-customer-steps:after { content: " "; display: table; } .new-customer-steps:after { clear: both; } .entry-steps { width: 30%; padding: 0px 10px; float: left; } .entry-steps img + h5 { margin-bottom: 5px; } .entry-steps img + h5 + p { margin-top: 0px; margin-bottom: 0; } .entry-steps > img { width: 100%; max-width: 179px; max-height: 188px; } .entry-steps .button-next { margin-top: 10px; } .entry-steps em.next { top: 33%; right: 20px; } @media all and (max-width: 900px) { .entry-steps em.next { display: none; } } .entry-steps .button-next .btn-fluid { padding: 10px 0; text-transform: uppercase; } @media all and (max-width: 900px) { .entry-steps { width: 33.3%; } } @media all and (max-width: 700px) { .entry-steps { width: 100%; } } @media all and (max-width: 700px) { .divider-orange-arrow + .entry-steps { margin-top: 25px; } } .divider-orange-arrow { display: block; float: left; width: 5%; padding-top: 11%; } .divider-orange-arrow > img { width: 100%; } @media all and (max-width: 900px) { .divider-orange-arrow { display: none; } } .centered { text-align: center; } /* OUC (sitefinity) : Stop Services Landing =============================== */ .bottom-hero { margin-top: 50px; width: 100%; text-align: center; } .bottom-hero > img { width: 100%; max-width: 580px; max-height: 546px; } @media all and (max-width: 800px) { .bottom-hero { margin-top: 35px; } } @media all and (max-width: 700px) { .bottom-hero { margin-top: 25px; } } .services-cta { padding-left: 25px; } @media all and (max-width: 700px) { .services-cta { padding-left: 0; } } .services-cta .btn { text-transform: uppercase; } .services-cta .button-next em.next { top: 30%; right: 15px; } @media all and (max-width: 800px) { .services-cta .button-next em.next { display: none; } } @media all and (max-width: 700px) { .services-cta .button-next em.next { display: block; } } /* ========================================================================== Pay In Person Table ========================================================================== */ .pip-locations { margin-bottom: 15px; width: 100%; } .pip-locations td { vertical-align: top; width: 33.3%; } .pip-locations td strong { display: block; } @media all and (max-width: 700px) { .pip-locations td { border-bottom: 1px solid #ddd; display: block; width: 100%; } } .payment-options { *zoom: 1; width: 100%; font-size: 0.9em; } @media all and (max-width: 700px) { .payment-options { display: none; } } .payment-options:before, .payment-options:after { content: " "; display: table; } .payment-options:after { clear: both; } .payment-options .table-col { float: left; min-width: 85px; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; } .payment-options .title-col, .payment-options .entry-col { width: auto; } .payment-options .title-col { width: 277px; border-left: 1px solid #d4d4d4; margin-top: 6px; font-weight: bold; } @media all and (max-width: 1024px) { .payment-options .title-col { width: 237px; } } @media all and (max-width: 1000px) { .payment-options .title-col { width: 197px; } } @media all and (max-width: 950px) { .payment-options .title-col { width: 147px; } } @media all and (max-width: 900px) { .payment-options .title-col { width: 97px; } } .payment-options .title-col > .table-row > .table-cell { padding: 0 30px; } @media all and (max-width: 950px) { .payment-options .title-col > .table-row > .table-cell { padding: 0 15px; } } @media all and (max-width: 900px) { .payment-options .title-col > .table-row > .table-cell { padding: 0 10px; } } .payment-options .table-row { display: table; width: 100%; border-bottom: 1px solid #d4d4d4; } .payment-options .table-row-last { border-bottom: none; } .payment-options .entry-col { width: 117px; text-align: center; } @media all and (max-width: 870px) { .payment-options .entry-col { width: 112px; } } @media all and (max-width: 800px) { .payment-options .entry-col { width: 98px; } } .payment-options .entry-col:hover { margin-top: -10px; background-color: #f5fbff; padding-bottom: 10px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.33); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.33); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.33); } .payment-options .table-cell { display: table-cell; vertical-align: middle; height: 88px; } .payment-options .header-row > .table-cell { height: 80px; } .payment-options .entry-col .table-row > .table-cell { padding: 0 10px; line-height: 1.2em; } .payment-options .spacer-row { height: 74px; border-bottom: none; } .payment-options .title-col > .spacer-row > .spacer-cell { padding-left: 0; max-width: 237px; height: 74px; background: transparent url("../img/paymentTable/type_header_spacer.jpg") left top; } .payment-options .header-row { border-bottom: none; } .payment-options .header-row > .table-cell { background: transparent url("../img/paymentTable/type_header_default.png") center top no-repeat; color: #444; font-weight: bold; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; border-top-left-radius: 7px; border-top-right-radius: 7px; } .payment-options .header-row + .table-row { background: transparent url("../img/paymentTable/type_header_default.png") center -80px no-repeat; } .payment-options .header-cell { position: relative; } .payment-options .header-cell > em { background-color: transparent; background-position: left top; background-repeat: no-repeat; display: block; margin: 10px auto 10px auto; } .payment-options .header-cell > em.echeck { width: 33px; height: 20px; background-image: url("../img/paymentTable/icon_echeck_sprite.png"); } .payment-options .header-cell > em.cc { width: 26px; height: 19px; background-image: url("../img/paymentTable/icon_cc_sprite.png"); } .payment-options .header-cell > em.autopay { width: 19px; height: 29px; background-image: url("../img/paymentTable/icon_autopay_sprite.png"); } .payment-options .header-cell > em.paybymail { width: 24px; height: 25px; background-image: url("../img/paymentTable/icon_mail_sprite.png"); } .payment-options .header-cell > em.paybyphone { width: 24px; height: 25px; background-image: url("../img/paymentTable/icon_phone_sprite.png"); } .payment-options .header-cell > em.payinperson { width: 38px; height: 20px; background-image: url("../img/paymentTable/icon_person_sprite.png"); } .payment-options .focused .header-row > .table-cell { background: transparent url("../img/paymentTable/type_header_focused.png") center top no-repeat; color: #fff; } .payment-options .focused .header-row + .table-row { background: transparent url("../img/paymentTable/type_header_focused.png") center -80px no-repeat; } .payment-options .focused .table-row { border-bottom: none; } .payment-options .focused .table-row > .table-cell { padding-top: 20px; } .payment-options .focused .header-row > .table-cell { padding-top: 0px; } .payment-options .js-link { -webkit-transition: all 0.2s ease-in-out; cursor: pointer; } .payment-options .focused em { background-position: left bottom; } .payment-options em.check { display: block; margin: 0 auto; width: 28px; height: 22px; background: transparent url("../img/billingAndPayment/home_icons_check_sprite.png") no-repeat left top; } /* ========================================================================== Forms ========================================================================== */ form .styled .field { *zoom: 1; position: relative; margin-bottom: 20px; } form .styled .field:before, form .styled .field:after { content: " "; display: table; } form .styled .field:after { clear: both; } @media all and (max-width: 700px) { form .styled .field { margin-bottom: 10px; } } form .styled .field.condensed { margin-bottom: 5px; } @media all and (max-width: 700px) { form .styled .field.condensed { margin-bottom: 5px; } } form .styled .field > label, .sfTxtLbl { color: #444; font-size: 0.9em; float: left; padding-top: 4px; width: 200px; } @media all and (max-width: 880px) { form .styled .field > label, .sfTxtLbl { width: 180px; } } @media all and (max-width: 800px) { form .styled .field > label, .sfTxtLbl { width: 170px; } } @media all and (max-width: 700px) { form .styled .field > label, .sfTxtLbl { float: none; clear: both; display: block; width: 100%; } } .lte-ie9 form .styled .field > label, .lte-ie9 .sfTxtLbl { padding-top: 7px; } @media all and (max-width: 700px) { .lte-ie9 form .styled .field > label, .lte-ie9 .sfTxtLbl { margin-bottom: 5px; } } form .styled .field > label.multiline { padding-top: 0px; margin-top: -3px; line-height: 1.3em; } @media all and (max-width: 700px) { form .styled .field > label.multiline { margin-top: 0; } } @media all and (max-width: 700px) { form .styled .field > label.multiline br { display: none; } } form .styled > .inline-actions { margin: 0 0 0 190px; padding: 0; } form .styled > .inline-actions .btn { margin: 0; } @media all and (max-width: 880px) { form .styled > .inline-actions { margin-left: 180px; } } @media all and (max-width: 800px) { form .styled > .inline-actions { margin-left: 170px; } } @media all and (max-width: 700px) { form .styled > .inline-actions { display: block; margin: 20px 0 0 0; } } form .styled .field em.required { color: red; float: left; display: block; font-style: normal !important; text-align: center; padding-top: 7px; margin-left: -20px; width: 20px; } .lte-ie9 form .styled .field em.required { padding-top: 11px; } form .styled input[type='text'], form .styled input[type='password'] { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; border: 1px solid #ccc; font-size: 0.9em; float: left; height: 30px; outline: 0; padding: 0 7px; width: 350px; } form .styled input[type='text']:focus, form .styled input[type='password']:focus { border: 1px solid #a0a2a5; outline: 0; } @media all and (max-width: 880px) { form .styled input[type='text'], form .styled input[type='password'] { width: 300px; } } @media all and (max-width: 800px) { form .styled input[type='text'], form .styled input[type='password'] { width: 280px; } } @media all and (max-width: 700px) { form .styled input[type='text'], form .styled input[type='password'] { float: none; width: 100%; } } form .styled textarea { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; border: 1px solid #ccc; font-size: 0.9em; float: left; height: 90px; outline: 0; padding: 5px; width: 350px; resize: none; } @media all and (max-width: 880px) { form .styled textarea { width: 300px; } } @media all and (max-width: 800px) { form .styled textarea { width: 280px; } } @media all and (max-width: 700px) { form .styled textarea { float: none; width: 100%; } } form .styled label.additional { padding-top: 0px; line-height: 1.2em; margin-top: 0px; } form .styled label.additional span { display: block; font-size: 0.8em; font-style: italic; margin-top: -3px; } @media all and (max-width: 700px) { form .styled label.additional { margin: 15px 0 5px 0; } } form .styled input[type='text'].long, form .styled input[type='password'].long { width: 460px; } @media all and (max-width: 880px) { form .styled input[type='text'].long, form .styled input[type='password'].long { width: 400px; } } @media all and (max-width: 800px) { form .styled input[type='text'].long, form .styled input[type='password'].long { width: 320px; } } @media all and (max-width: 700px) { form .styled input[type='text'].long, form .styled input[type='password'].long { float: none; width: 100%; } } form .styled input[type='text'].med, form .styled input[type='password'].med { width: 190px; } @media all and (max-width: 880px) { form .styled input[type='text'].med, form .styled input[type='password'].med { width: 180px; } } @media all and (max-width: 800px) { form .styled input[type='text'].med, form .styled input[type='password'].med { width: 160px; } } @media all and (max-width: 700px) { form .styled input[type='text'].med, form .styled input[type='password'].med { float: none; width: 100%; } } form .styled label.checkbox { position: relative; font-size: 0.9em; padding-left: 18px; } form .styled label.checkbox input { position: absolute; top: 5px; left: 0; } .lte-ie9 form .styled label.checkbox input { top: 0px; } form .styled label.condensed { width: 115px; } form .styled span.no-input { display: inline-block; font-size: 0.9em; margin-top: 5px; } form .styled span.change-question { display: none; float: left; width: 352px; } @media all and (max-width: 700px) { form .styled span.change-question { margin-left: 0px; margin-top: 15px; width: 100%; } } form .styled span.change-question input { margin-top: 5px; } form .styled .security_actions_container { clear: both; display: block; margin: 35px 0 0 189px !important; } form.placeholder > input[type='text'], form.placeholder > input[type='password'] { float: none; display: block; clear: both; margin-bottom: 15px; } form.placeholder > input[type='submit'] { clear: both; } .lte-ie9 form .styled input[type='password'] { font-family: sans-serif; } .lte-ie9 form .styled input[type='text'], .lte-ie9 form .styled input[type='password'] { line-height: 28px; } form .styled input[type='submit'] { margin-top: 15px; } form .styled .field .input-small { width: 70px !important; } form .styled .field .helper-small { display: inline-block; font-size: 0.8em; margin: 6px 0 0 10px; } form .styled .field .helper { color: #777777; clear: both; font-size: 0.7em; float: left; line-height: 1.1em; margin-left: 200px; margin-top: 5px; margin-bottom: -15px; width: 350px; } @media all and (max-width: 880px) { form .styled .field .helper { margin-left: 180px; width: 300px; } } @media all and (max-width: 800px) { form .styled .field .helper { margin-left: 170px; width: 290px; } } @media all and (max-width: 700px) { form .styled .field .helper { display: block; float: none; width: 100%; margin-left: 0px; margin-bottom: -8px; } } form .styled .field .helper .btn { padding: 8px 25px; } form .styled > .field > .checkbox-label { font-size: 0.9em; padding-left: 4px; } @media all and (max-width: 880px) { form .styled > .field > .checkbox-label { font-size: 0.8em; } } .styled select { width: 350px; } @media all and (max-width: 880px) { .styled select { width: 300px !important; } } @media all and (max-width: 800px) { .styled select { width: 280px !important; } } @media all and (max-width: 700px) { .styled select { width: 100% !important; } } .styled select.med { background: url(../img/select_style.png) no-repeat top right; width: 190px; } @media all and (max-width: 880px) { .styled select.med { width: 190px !important; } } @media all and (max-width: 800px) { .styled select.med { width: 190px !important; } } @media all and (max-width: 700px) { .styled select.med { float: none; width: 100% !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { .styled select { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-appearance: none; height: 30px; line-height: 28px; font-size: 0.8em; padding-left: 7px; border: 1px solid #dadada; background: url(../img/select_style.png) no-repeat top right; outline: 0; } } @-moz-document url-prefix() { .styled select { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background: url(../img/select_style.png) no-repeat top left; outline: 0; border: 1px solid #dadada; font-size: 0.8em; padding: 3px 3px 3px 4px; } } .sfRadioList { margin-top: 3px; } .sfRadioList label { font-size: 0.9em; margin-right: 3px; } .sfRadioList input { margin-left: 3px; margin-right: 5px; } .sfRadioList input:first-child { margin-left: 15px; } @media all and (max-width: 700px) { .sfRadioList input:first-child { margin-left: 0; } } @media all and (max-width: 1000px) { .sfRadioList { margin-left: 175px; } } @media all and (max-width: 880px) { .sfRadioList { margin-left: 165px; } } @media all and (max-width: 800px) { .sfRadioList { margin-left: 155px; } } @media all and (max-width: 700px) { .sfRadioList { float: none; clear: both; display: block; margin-left: 0; } } .horiz-radio-group { margin-top: 3px; } .horiz-radio-group em.paperless { background-image: url("../img/icon_sprite.png"); background-position: -260px 0px; background-repeat: no-repeat; display: inline-block; height: 12px; width: 18px; display: inline-block; } .horiz-radio-group label { font-size: 0.9em; margin-right: 3px; } .horiz-radio-group input { margin-left: 3px; margin-right: 5px; } form .styled .radio-group { float: left; } form .styled .radio-group label { clear: both; display: block; font-size: 0.9em; padding: 7px 0 0 0; } form .styled .radio-group input { margin-right: 10px; } @media all and (max-width: 700px) { form .styled .radio-group { padding-left: 1px; } } form .styled .radio-group .radio-input { clear: both; margin: 1px 0px 0px 21px; width: 168px; } .radio-input-error { clear: both; width: auto; color: red; line-height: 10px !important; font-weight: bold; font-size: 0.750em !important; margin: 0px 0 0 22px !important; padding: 0 0 0 0; } .action-field { clear: both; border-top: 1px solid #ddd; padding-top: 5px; margin-top: 20px; } .form-actions .cancel { border-left: 1px solid #ddd; display: inline-block; height: 40px; margin-left: 20px; } .form-actions .cancel > a { display: inline-block; font-size: 0.9em; margin: 8px 0 0 15px; text-decoration: underline; } /* ========================================================================== Form Errors ========================================================================== */ .field_with_errors input[type='text'], .field_with_errors input[type='password'], .field_with_errors select, .field_with_errors textarea { border: 1px solid #e64d4d !important; } .field_with_errors.radio-group .sfError { top: 108px; left: 300px !important; right: auto !important; } .sfError { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background: #e64d4d; color: white; display: inline-block; font-size: 0.7em; min-width: 86px; position: absolute; bottom: -13px; padding: 2px 5px 2px 5px; z-index: 9999; right: 150px; } .sfError:after { background-image: url("../img/icon_sprite.png"); background-position: -60px -30px; background-repeat: no-repeat; display: inline-block; height: 5px; width: 12px; content: ''; display: block; position: absolute; top: -4px; right: 5px; } @media all and (max-width: 700px) { .sfError { -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; left: 0 !important; width: 100%; top: 49px; } } /* ========================================================================== Form Buttons ========================================================================== */ input.field-btn { cursor: pointer; display: inline-block; font-size: 14px; padding: 6px 30px 5px 30px; position: relative; text-decoration: none; zoom: 1; *display: inline; } input.field-btn { -webkit-box-shadow: 0px 2px 0px #2262a2, inset 0px 1px 2px #82d4f4; -moz-box-shadow: 0px 2px 0px #2262a2, inset 0px 1px 2px #82d4f4; box-shadow: 0px 2px 0px #2262a2, inset 0px 1px 2px #82d4f4; background: #52b7ed; background: -moz-linear-gradient(top, #52b7ed 0%, #2b7bcb); background: -webkit-gradient(linear, left top, left bottom, from(#52b7ed), to(#2b7bcb)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#52b7ed, endColorstr=#2b7bcb); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#52b7ed, endColorstr=#2b7bcb)"; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; border: 1px solid #2b7bcb; color: #ffffff !important; text-shadow: 0px -1px 0px #2262a2; *background: #52b7ed; } input.field-btn:hover { background: #63c4ed; background: -moz-linear-gradient(top, #63c4ed 0%, #448fda); background: -webkit-gradient(linear, left top, left bottom, from(#63c4ed), to(#448fda)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#63c4ed, endColorstr=#448fda); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#63c4ed, endColorstr=#448fda)"; } input.field-btn:active { -webkit-box-shadow: 0px 1px 0px #2262a2, inset 0px 0px 6px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 0px #2262a2, inset 0px 0px 6px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 0px #2262a2, inset 0px 0px 6px rgba(0, 0, 0, 0.3); background: #4fbeee; background: -moz-linear-gradient(top, #4fbeee 0%, #4991d9); background: -webkit-gradient(linear, left top, left bottom, from(#4fbeee), to(#4991d9)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#4fbeee, endColorstr=#4991d9); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#4fbeee, endColorstr=#4991d9)"; top: 1px; } .lte-ie9 input.field-btn { border-bottom: 2px solid #2263a2; padding: 10px 30px 8px 30px; } .sfSuccess { margin-top: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background: #eaf8e5; border: 1px solid #d0efc5; color: #444444; font-size: 0.950em; margin-bottom: 15px; padding: 8px; position: relative; text-align: left; } .notice-success p { margin: 0 0 0 0 !important; padding: 1px 15px 2px 35px !important; } .search-entry + .search-entry{margin-top:20px;} .search-entry .permalink{color:#d4d4d4; font-size:0.9em;} .search-entry .small-margin{margin:3px 0;} #search-none-found ul{margin:10px 0 0 0; padding-left:1.125em;} #search-none-found ul li{font-size:0.9em; padding:8px 0;} .top-nav li em.caret { background-image: url("../img/icon_sprite.png"); background-position: 0px -26px; background-repeat: no-repeat; display: inline-block; height: 10px; width: 10px; position: absolute; top: 10px; right: 10px; } .top-nav li em.lock { background-image: url("../img/icon_sprite.png"); background-position: -218px 0px; background-repeat: no-repeat; display: inline-block; height: 14px; width: 14px; position: absolute; top: 8px; left: 10px; } .top-nav li em.logout { background-image: url("../img/icon_sprite.png"); background-position: -270px -80px; background-repeat: no-repeat; display: inline-block; height: 12px; width: 16px; position: absolute; top: 8px; left: 9px; } .lte-ie9 .top-nav li em.caret { top: 9px; } .lte-ie9 .top-nav li em.lock { top: 8px; } /* NEWS */ .news-intro { display: none; } .page-about-oucnews .news-intro { display: block; } .page-about-oucnews article h3 a { color: #444; font-weight: bold; } .page-about-oucnews article p { margin: 10px 0; font-size: 1.1em; } .page-about-oucnews article { border-top: 1px solid #ddd; padding: 20px 0px; } .page-about-oucnews .newsInfo, .sfnewsAuthorAndDate { font-size: 0.9em; color: #aaa; } .social { float: right; } .social .RadSocialShare_Default { border: none; } .sfnewsTitle { font-size: 2.2em; color: #444; } .cta-wrapper li > a { color: #fff !important; font-size: 17px; } .cta-wrapper p { margin: 5px 10px; color: #939598 !important; font-size: 14px; } .cta-wrapper p a { color: #509ce7 !important; font-size: 14px; } .page-_environment-community h2.sfitemShortTxt { padding-left: 145px; background: url('/public/img/sameascomp.png') no-repeat; height: 50px; } .page-_environment-community .eight.columns.cf { width: 100%; } /* main wrap */ .page-_site-map .container > ul { margin-top: 25px;} .page-_site-map .container > ul.rtUL { border: 1px solid #efefef; font-size: 0.9em; background: white; padding-bottom: 5px; width: 500px !important; margin: 25px auto !important; } /* section */ .page-_site-map .container > ul > .rtLI { border-top: 1px solid #efefef; padding-top: 20px; margin-top: 20px; } .page-_site-map .container .rtLI a { margin: 0; padding: 0;} .page-_site-map .container > ul > .rtLI:first-child { border: 0; margin-top: 0; } .page-_site-map .container > ul > .rtLI a:hover { border: 0; padding: 0; margin: inherit; } .page-_site-map .container > ul > .rtLI > div > a { color: #4db848; font-size: 1.2em; font-weight: 600; text-transform: uppercase; margin-bottom: 5px;} .page-_site-map .container > ul > .rtLI > ul > li > div > a {padding-bottom: 3px; margin-bottom: 3px;} .page-_site-map .container > ul > .rtLI > ul > li > ul > li > ul> li > div { border-left: 1px dotted #ccc; padding: 0; margin-left: 15px; padding-left: 15px; } .page-_site-map .container > ul > .rtLI > ul > li > ul > li > ul> li > div > a { font-size: 0.9em; text-decoration: underline; margin: 0; padding: 0; } .page-_site-map .container > ul > .rtLI > ul > li > ul > li > ul> li > div > a:hover { margin: 0; padding: 0; } /* sidebar */ .myouc.sidebar a { color: #555 !important; display: block; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap; white-space: -hp-pre-wrap; word-wrap: break-word; } .myouc.sidebar .rtSp, .myouc.sidebar .rtMinus, .myouc.sidebar .rtPlus { display: none; } /* ddev late in the game fixes */ .page-_myouc_orlando-customers .sticky-box{width:100%; z-index:100; background-color:#fff; padding:12px 10px;} .page-_myouc_orlando-customers .stuck{position:fixed; top:0; box-shadow:0px 1px 2px rgba(0,0,0,0.25);} .page-_myouc_orlando-customers .sticky-box h3{max-width:980px; width:100%; margin:0 auto; position:relative;} .page-_myouc_orlando-customers .sticky-box h3 .btn{margin-left:10px; margin-top:-3px;} @media screen and (max-width: 700px){ .page-_myouc_orlando-customers .stuck{position:relative} } /* ========================================================================== Mobile Header ========================================================================== */ .mobile-header { *zoom: 1; border-bottom: 1px solid #d9dada; display: none; } .mobile-header:before, .mobile-header:after { content: " "; display: table; } .mobile-header:after { clear: both; } @media all and (max-width: 700px) { .mobile-header { display: block; } } .mobile-header .left-column { float: left; width: 33%; text-align: left; } .mobile-header .center-column { float: left; width: 33%; text-align: center; } .mobile-header .right-column { float: left; width: 33%; text-align: right; } .mobile-header > .mobile-login { *zoom: 1; background: #333; display: none; padding: 12px; } .mobile-header > .mobile-login:before, .mobile-header > .mobile-login:after { content: " "; display: table; } .mobile-header > .mobile-login:after { clear: both; } .mobile-header > .mobile-login > input[type='text'], .mobile-header > .mobile-login > input[type='password'] { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; background: #444; border: 0px; color: white; display: block; font-size: 0.8em; outline: 0; padding: 7px; margin: 0 0 10px 0; width: 100%; } .mobile-header > .mobile-login > input[type='submit'] { font-size: 13px; padding: 12px 0 8px 0; width: 170px; } .win .mobile-header > .mobile-login > input[type='submit'] { padding: 9px 0 7px 0; } .mobile-header > .mobile-login > label { color: #ccc; float: right; font-size: 12px; margin-top: 13px; } .mobile-header > .mobile-login > .mobile-radio-group { color: #ccc; margin: 15px 0; display: block; } .mobile-header > .mobile-login > .mobile-radio-group label { font-size: 0.8em !important; margin-right: 15px; } .mobile-login > .additional { border-top: 1px solid #555555; margin-top: 15px; margin-bottom: 5px; padding-top: 5px; } .mobile-login > .additional .left-column { float: left; margin-right: 20px; } .mobile-login > .additional .right-column { float: left; text-align: left; } .mobile-login > .additional a { -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; color: #ccc; display: inline-block; font-size: 0.775em; text-decoration: none; padding-left: 11px; margin-top: 10px; position: relative; } .mobile-login > .additional a i.caret { -webkit-transition: all 0.05s linear; -moz-transition: all 0.05s linear; -o-transition: all 0.05s linear; transition: all 0.05s linear; background-image: url("../img/icon_sprite.png"); background-position: -40px -30px; background-repeat: no-repeat; display: inline-block; height: 6px; width: 4px; position: absolute; left: 0; top: 4px; } .mobile-login > .additional a:hover { color: white; } .mobile-login > .additional a:hover i.caret { left: 2px; } .win .mobile-login > .additional i.caret { top: 7px; } .lte-ie9 .mobile-login > .additional a { margin-bottom: 7px; } .lte-ie9 .mobile-login > .additional i.caret { top: 3px; } /* HAX & BUG[FEATURE] FIXES AND THAT */ /*.page-_myouc_orlando-customers h2{ padding-left:50px; outline:1px solid red; background: transparent url('../img/') no-repeat left top; }*/ #manage-or-04{} #interactiveConservationGuide{ width:1024px !important; } /* Mega Menu Styles */ /* Mega Menu Styles */ .sfNavHorizontalDropDownWrp{ position: absolute; top: 70px; right: 0px; } .sfNavHorizontalDropDownWrp .k-link{ font-family: "ff-meta-web-pro", sans-serif; font-size: .9em; color: #6d6e70; background-color: #f0f0f1; border-radius: 6px 6px 0 0; box-shadow: 0 0 2px #777; -webkit-box-shadow: 0 0 2px #777; -moz-box-shadow: 0 0 2px #777; -ms-box-shadow: 0 0 2px #777; -o-box-shadow: 0 0 2px #777; clip: rect(0px, 1000px, 1000px, -10px); } .sfNavHorizontalDropDownWrp .k-widget.k-menu-horizontal>.k-item { border-style: hidden; border-width: 0px; } .k-item { z-index: auto!important; } .k-menu .k-menu-group { width: inherit!important; } .sfNavList > .k-item:not(.k-first) > .k-link { text-transform: uppercase; } .sfNavWrp .sfSel { font-weight: normal!important; } .mega-menu{ display: none; position: absolute; top: 0px; right: 0px; margin: 0 auto; width: 100%; max-width: 980px; border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; -ms-border-radius: 0 0 8px 8px; -o-border-radius: 0 0 8px 8px; background-color: white; box-shadow: 0 0 8px #777; -webkit-box-shadow: 0 0 8px #777; -moz-box-shadow: 0 0 8px #777; -ms-box-shadow: 0 0 8px #777; -o-box-shadow: 0 0 8px #777; overflow: hidden; clip: rect(0px, 1000px, 1000px, -10px); } .mega-menu > div{ display: inline-block; vertical-align: top; float: left; } .mega-menu > .primary{ width: 36%; margin: 2% 0 0 2%; } .mega-menu > .secondary{ width: 38%; margin: 0 0 2% 3%; } @media all and (max-width:768px){ .mega-menu > .secondary{ width: 32%; } } .mega-menu > .ternary{ width: 18%; margin-left: 3%; } @media all and (max-width:768px){ .mega-menu > .ternary{ width: 24%; } } .mega-menu figure{ margin: 0; padding: 0; } .mega-menu img{ border: 3px solid #EAEAEA; } .mega-menu figure figcaption a{ color: #2482e1; } .mega-menu figure figcaption p{ color: #444; margin: 0; } .mega-menu > .primary img{ width: 100%; margin-bottom: 10px; } .mega-menu > .primary figcaption a{ font-size: 20px; } .mega-menu > .primary figcaption p{ font-size: 16px; } .mega-menu > .secondary figure{ overflow: hidden; margin: 5.4% 0 0 0; } .mega-menu > .secondary figure > *{ float: left; } .mega-menu > .secondary figure > a{ width: 41.25%; } .mega-menu > .secondary img { width: 100%; } @media all and (max-width:768px){ .mega-menu > .secondary figure > a{ width: 60%; } } .mega-menu > .secondary figcaption{ width: 55.25%; margin: 0 0 0 2.5%; } @media all and (max-width:768px){ .mega-menu > .secondary figcaption{ width: 100%; margin: 0; } } .mega-menu > .secondary figcaption a{ font-size: 16px; } .mega-menu > .secondary figcaption p{ font-size: 14px; } .mega-menu .ternary ul{ list-style: none; margin: 0; padding: 0; border-left: 1px solid #EAEAEA; } .mega-menu .ternary ul{ position: relative; } .mega-menu .ternary ul:after{ position: absolute; content: ""; bottom: -700%; left: -1px; height: 700%; background-color: #EAEAEA; width: 1px; } .mega-menu .ternary a{ display: block; padding: 15px; font-size: 14px; color: #2482e1; line-height: 1.25; border-top: 1px solid #EAEAEA; } .mega-menu .ternary li:first-child a{ border-top: none; } .mega-menu .ternary a:hover{ background-color: #EAEAEA; } nav ul > li:hover .mega-menu { display: block; } /* Outdated Browser Styles */ .outdated-browser{color:#444;font-size:14px;line-height:1.7em;margin:0 auto;margin-top:40px;margin-bottom:0 !important;text-align:center;width:980px}.outdated-browser h1{font-size:36px !important;margin-bottom:30px}.outdated-browser p{color:#444;font-size:14px;line-height:1.7em}.outdated-browser #logo{margin:20px auto 40px auto}.outdated-browser .browsers{margin:45px auto 80px auto;width:100%}.outdated-browser .browsers>a{display:inline-block;text-align:center;margin:0 16px}.outdated-browser .browsers i{margin-bottom:15px}.outdated-browser .browsers>a.browser-chrome>i{background:url(../img/browser_support_sprite.png) no-repeat 0 0;display:block;height:126px;width:128px}.outdated-browser .browsers>a.browser-firefox>i{background:url(../img/browser_support_sprite.png) no-repeat -160px 0;display:block;height:126px;width:128px}.outdated-browser .browsers>a.browser-safari>i{background:url(../img/browser_support_sprite.png) no-repeat -319px 0;display:block;height:126px;width:128px}.outdated-browser .browsers>a.browser-ie>i{background:url(../img/browser_support_sprite.png) no-repeat -479px 0;display:block;height:126px;width:128px}.outdated-browser .social{float:none; margin-top:20px}.outdated-browser .social>a{display:inline-block;text-align:center;margin:0 8px}.outdated-browser .social>a.facebook{background:url(../img/browser_support_sprite.png) no-repeat 0 -133px;height:23px;width:12px}.outdated-browser .social>a.twitter{background:url(../img/browser_support_sprite.png) no-repeat -32px -136px;height:19px;width:26px}.outdated-browser .social>a.youtube{background:url(../img/browser_support_sprite.png) no-repeat -73px -134px;height:23px;width:24px} form .field i.required, form .field em.required { color: red; float: right; display: block; font-style: normal !important; text-align: center; padding-top: 7px; margin-left: -20px; width: 20px; color: red; float: left; display: block; font-style: normal !important; text-align: center; padding-top: 7px; margin-left: -20px; width: 20px; position: absolute; top: -1px; right: 0px; } form .styled .field > label, .sfTxtLbl { position: relative; } /*========================================================================== ============================================================================ ============================================================================ Anything styles below this comment block are reserved for overrides. Please do not edit the above styles directly. ============================================================================ ============================================================================ ==========================================================================*/ .RadSiteMap .rsmList .rsmLink { padding-top: 0px !important; padding-left: 15px !important; border: clear !important; font-size: 12px !important; border-left: none !important; border-bottom: none !important; } .RadSiteMap .rsmTwoLevels .rsmList .rsmItem .rsmLink { padding-top: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border: clear !important; font-size: 12px !important; border-left: none !important; border-bottom: none !important; } .RadTreeView .rtUL .rtLI.rtMid .rtI { border: clear !important; color: ##9c27b0 !important; } header .search { right: 0; position: absolute !important; margin: 0; border: none; border-left: 1px solid #ddd; } header .search input[type='submit'] { position: absolute !important; right: 0; } header .search input[type='text'] { padding-left: 40px !important; } * { box-sizing: border-box; } /* all below to remove tree view lines */ .RadTreeView .rtLines .rtLI { background:url('TreeView/NodeSpan.gif') repeat-y 0 0; } .RadTreeView .rtLines .rtFirst { background:url('TreeView/FirstNodeSpan.gif') no-repeat 0 1.273em; } .RadTreeView .rtLines .rtLast, .RadTreeView .rtLines .rtLast .rtUL { background:none; } .RadTreeView .rtLines .rtTop { background:url('TreeView/TopLine.gif') 0 0 no-repeat; } .RadTreeView .rtLines .rtLast .rtTop { background:url('TreeView/SingleLine.gif') 0 0 no-repeat; } .RadTreeView .rtLines .rtMid { background:url('TreeView/MiddleLine.gif') 0 0 no-repeat; } .RadTreeView .rtLines .rtBot { background:url('TreeView/BottomLine.gif') 0 0 no-repeat; } #mobile-navigation .k-icon { display: none; } /* Preferred Contractors Styles */ .page-residentialresidential-preferred-contractorspreferred-contractor .select-replace-cover, .page-businessfind-a-preferred-contractorpreferred-contractor .select-replace-cover, .page-residentialresidential-preferred-contractorspreferred-contractor .select-replace-cover select, .page-businessfind-a-preferred-contractorpreferred-contractor .select-replace-cover select { width: 100%!important; } /* Accordion Styles */ .accordion { margin: 20px 0; } .accordion-header { color: #444; cursor: pointer; padding: 12px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; position: relative; border-top: 1px solid #D9D9D9; background: none!important; } .accordion-header.active > .title { font-weight: bolder; } .accordion-header:last-of-type { border-bottom: 1px solid #D9D9D9; } .accordion-header.active:last-of-type { border-bottom: none; } .accordion-header.active:last-of-type ~ .accordion-content { border-bottom: 1px solid #D9D9D9; } .accordion-header > .title { display: block; font-size: 26px; } .accordion-header:hover > .title { color: #3683C4; text-decoration: underline; } .accordion-header > .subtitle { display: block; } .accordion-header:before, .accordion-header:after { content: ''; display: block; position: absolute; background: none; top: 50%; right: 0; width: 30px; height: 1px; background-color: #000; transform-origin: 50% 50%; transition: all .25s; } .accordion-header:before { transform: rotate(90deg); } .accordion-header:after { transform: rotate(0deg); } .accordion-header.active:before { transform: rotate(45deg); } .accordion-header.active:after { transform: rotate(-45deg); } .accordion-content { font-size: 0.9em; padding: 12px; background-color: white; display: none; overflow: hidden; } .accordion-content.active { display: block; } .accordion-content img { max-width: 100%; } /* Tab Component CSS */ @media (min-width: 1001px) { ul.ouc-tabs { justify-content: center; grid-gap: 12px; } ul.ouc-tabs li a { padding: 8px 24px; } } @media (max-width: 1000px) { ul.ouc-tabs li { margin-right: 0; } ul.ouc-tabs { justify-content: flex-start; overflow-x: scroll; grid-gap: 2px; } ul.ouc-tabs li a { padding: 8px 8px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center; } } a:focus { outline: none !important; } ul.ouc-tabs { display: grid; margin: 0px; padding: 0px; list-style: none; grid-template-columns: auto; grid-auto-flow: column; } ul.ouc-tabs li { display: inline-block; cursor: pointer; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; background-color: #f0f0f0; margin-bottom: -1px; position: relative; z-index: 1; } ul.ouc-tabs li a { display: block; font-size: 0.9em; position: relative; text-shadow: 0px 1px 0px #d4d4d4; text-transform: uppercase; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } ul.ouc-tabs li:hover { background-color: white; } ul.ouc-tabs li.current { background-color: white; border-bottom: 1px solid #ffffff; } ul.ouc-tabs li.current a { border-bottom: none !important; background-color: #ffffff; } .ouc-tab-content { display: none; background: #ffffff; padding: 15px; border-top: 1px solid #dddddd; } .ouc-tab-content.current { display: inherit; } /* Modal Component CSS */ @media only screen and (max-width: 768px) { /* For desktop: */ .ambush-modal-content { width: 90vw !important; max-height: 80vh !important; } } .ambush-modal-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.1); z-index: 999; } .ambush-modal { display: none; } .ambush-modal-content { display: flex; flex-direction: column; max-height: 80vh; margin: auto; border: 1px solid #888; background-color: white; position: relative; top: 10vh; z-index: 1; } .ambush-modal-body { overflow: auto; display: flex; flex-direction: column; } /* The Close Button */ .ambush-close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; display: flex; align-self: flex-end; } .ambush-close:hover, .ambush-close:focus { color: #000; text-decoration: none; cursor: pointer; } .popup-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: gray; z-index: 999; } .popup-content { background-color: white; border: 1px solid black; z-index: 1; margin: 10% auto; width: 600px; padding: 1em; }