/* Layout: background and color for #page-intro */ @media screen { #page-intro { background: #6aa url(../img/rf_welcome-compressed.jpg) center top no-repeat; background-size: cover; } #page-intro, #page-intro a { color: white; } } .iti__flag { background-image: url("//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.2/img/flags.png"); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .iti__flag { background-image: url("//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.2/img/flags@2x.png"); } } /* Layout: Position */ /* center over background */ @media screen and (min-width: 350px) { html { background: #f8f8f8 url(../img/rf_bg-compressed.jpg) 50% no-repeat fixed; background-size: cover; min-height: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; } /* workaround for internet explorer -- which doesn't support min-height on display: flex */ html::after { content: ' '; display: block; height: 100vh; width: 0; } body { word-wrap: break-word; box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04); border-radius: calc(0.15rem - 1px); width: calc(100vw - 30px); max-width: 370px; } } @media screen and (min-width: 576px) { body { max-width: none; width: 510px; } } @media screen and (min-width: 768px) { body { width: 570px; } } @media screen and (min-width: 992px) { body.long-page { width: 670px; } body:not(.long-page) { width: auto; } body:not(.long-page) > form { display: -ms-flexbox; display: flex; } body:not(.long-page) #page-intro { width: 338px; min-height: 471.4px; } body:not(.long-page) #page-content-container { width: 432px; } } @media screen and (min-width: 1200px) { body:not(.long-page) #page-intro { width: 367px; } body:not(.long-page) #page-content-container { width: 553px; } } @media screen and (min-width: 1440px) { body:not(.long-page) #page-intro { width: 367px; } body:not(.long-page) #page-content-container { width: 769px; } } /* Layout: Padding */ @media screen { #page-intro, #page-content-container { padding: 35px 30px; } #page-content-container { padding-top: 0; } #page-content-top-links { min-height: 35px; } } @media screen and (min-width: 576px) { #page-intro { padding: 40px 60px; } #page-content-container { padding: 60px; } #page-content-container { padding-top: 0; } #page-content-top-links { min-height: 60px; } } @media screen and (min-width: 992px) { body:not(.long-page) #page-intro { padding: 80px 40px; } body:not(.long-page) #page-content-container { padding: 80px; } body:not(.long-page) #page-content-container { padding-top: 0; } body:not(.long-page) #page-content-top-links { min-height: 80px; } } @media print { #page-content-top-links { padding-top: 15px; padding-bottom: 15px; } #page-content-container { padding-bottom: 35px; } } /* Layout: Footer */ #footer-links { padding: 20px 30px 20px 30px; text-align: center; border-top: 1px dotted #ddd; } @media screen and (min-width: 992px) { body:not(.long-page) > form { position: relative; } body:not(.long-page) #footer-links { padding: 0; text-align: left; border-top: none; position: absolute; bottom: 30px; left: 40px; line-height: 30px; width: 270px; } body:not(.long-page) #footer-links, body:not(.long-page) #footer-links a { color: white; } } /* Page Intro - Typography */ #page-intro h1 { font-size: 1.4rem; } @media (min-width: 576px) { #page-intro h1 { font-size: 1.6rem; } } @media (min-width: 768px) { #page-intro h1 { font-size: 1.75rem; } } /* Page Content - Layout Options */ @media screen and (min-width: 992px) { body:not(.long-page) #page-content.constrain-width { max-width: 522px; } body:not(.long-page) #page-content.scroll { height: 390.4px; overflow-y: auto; margin-right: -80px; padding-right: 80px; margin-bottom: -79px; padding-bottom: 79px; } body:not(.long-page) #page-content.scroll::after { display: block; content: ''; margin-bottom: 20px; } } /* Home page - login button */ #btn_Login { padding: 0.75rem 2.6rem 0.6rem 2.6rem; } #btn_Login:disabled { color: #fff; background-color: #0f3d64; border-color: #0f3d64; opacity: 1; } /* Home page logo */ #home-page-logo-container { min-height: 55px; } #home-page-logo-container img { width: 60%; max-width: 313px; color: rgb(52, 86, 134); font-size: 2rem; } @media (min-width: 576px) { #home-page-logo-container { min-height: 95px; } } /* Other page logo and logout link */ #page-content-top-links #homeLogoContainer img { height: 25px; } @media (min-width: 576px) { #page-content-top-links #homeLogoContainer img { height: 30px; } } @media screen { #page-content-top-links { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; } } /* ASP.NET Web Forms styling */ ul.RadioButtonList { padding-left: 0; list-style: none; } ul.RadioButtonList > li { position: relative; display: block; padding-left: 1.25rem; } ul.RadioButtonList > li > input { position: absolute; margin-top: .3rem; margin-left: -1.25rem; } ul.RadioButtonList > li > label { line-height: 24px; margin-bottom: 0; } /* My Plans Table - imitate list group styling */ .MyPlansTable, .MyPlansTable > *, .MyPlansTable tr, .MyPlansTable tr > * { display: block; margin: 0; padding: 0; } .MyPlansTable { margin-bottom: 1rem; } .MyPlansTable tr { position: relative; padding: .75rem 1.25rem .75rem 1.25rem; } .MyPlansTable tbody tr { border: 1px solid rgba(0,0,0,.125); border-top-width: 0px; } .MyPlansTable tbody tr:first-child { border-top-width: 1px; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .MyPlansTable tbody tr:last-child { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .MyPlansTable tbody a { color: #145388; } .MyPlansTable tbody tr { transition: background-color 200ms; } .MyPlansTable tbody tr:hover { background-color: rgba(102, 170, 170, 0.27); } .MyPlansTable tbody tr:focus-within { /* this rule is separate because Edge does not support focus-within */ background-color: rgba(102, 170, 170, 0.27); } .MyPlansTable tbody tr:focus-within a:focus { /* this rule checks :focus-within because Edge does not support focus-within */ outline: none; color: #145388; } .MyPlansTable td:first-child { font-weight: bold; } .MyPlansTable td:last-child { /* These styles put the "amount" column on TOP of the stretched-link so you can copy it more easily */ display: inline-block; position: relative; z-index: 2; cursor: text; padding: 0 .25rem; margin: 0 -.25rem; } .MyPlansTable tfoot td:last-child { font-weight: bold; } /* My Plans: Move benefit amount to right-hand side (when it will fit) */ @media screen and (min-width: 768px) and (max-width: 991.98px), screen and (min-width: 1440px) { .MyPlansTable tr { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: start; align-items: flex-start; } .MyPlansTable td:first-child { margin-right: 1.25rem; } .MyPlansTable td:last-child { white-space: nowrap; } /* Indent the "Total" label */ .MyPlansTable tfoot td:first-child { padding-left: 1.25rem; } }