/* BEGIN DEFAULT CSS --------------------------------------------> */ /* AvenirNext --------------------- 100 - Ultra Light 200 - Thin 300 - Light 400 - Regular 500 - Medium 600 - Demi Bold 700 - Bold 800 - Heavy Calluna --------------------- 400 - Regular //700 - Bold - not currently being called, so relying on free 'regular' version only */ html { /* make sure the browser doesn't go smaller than 320, and throws a scrollbar */ max-width: 320px; /* prevent vertical scrollbar jump */ overflow-y: scroll; /* horizontal scroll for the ^ 320px max */ overflow-x: visible; color: #000; font-family: 'AvenirNext', Calibri, Arial, sans-serif; line-height: 1.45; /* increased per janice */ /* adjust these on other elements */ --min-font-size: 16; --max-font-size: 21; /* you probably won't need to adjust these on other elements, but you can */ --fluid-start: 767; --fluid-end: 1695; --black: #171717; --darkblue: #002B49; /*--blue: #0075C9;*/ --blue: #0174B7; /* changed for ADA */ --lightblue: #D3EDFF; --teal: #2B5C7E; --rules: #CCCCCC; --limegreen: #8FD100; /*--limegreen: var(--darkgreen);*/ /* client requested */; /*--brightgreen: #80BB00;*/ --brightgreen: var(--darkgreen); /* client requested */ --newbrightgreen: #80BB00; --palegreen: #CDF080; /*--darkgreen: #578000;*/ --darkgreen: #547A00; /* needed a little bump for ADA when on gray backgrounds */ --yetanothergreen: #699705; --wcaggreen: #547A00; --orange: #E77525; } h1, h2, h3, h4, h5, h6, p, li, .title, .title2, .type, .linktext, .wideLink, #customSectionTitle, #bioTitle, .letterLinks a, .letterLinks span, .subtitle, .address, .phone, #sideTitle, #sideState, #subContent, .attachment_wrapper a, .vcalButton { /* fluid css - https://codepen.io/lowbatteries/full/qBEyXEP */ font-size: calc(var(--max-font-size) * 1px); /* IE11 */ font-size: max( var(--min-font-size) * 1px, min( var(--max-font-size) * 1px, var(--min-font-size) * 1px + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--fluid-start) * 1px) / (var(--fluid-end) - var(--fluid-start))) )); margin-top: max( var(--min-margin-top) * 1px, min( var(--max-margin-top) * 1px, var(--min-margin-top) * 1px + (var(--max-margin-top) - var(--min-margin-top)) * ((100vw - (var(--fluid-start) * 1px)) / (var(--fluid-end) - var(--fluid-start))) )); margin-bottom: max( var(--min-margin-bottom) * 1px, min( var(--max-margin-bottom) * 1px, var(--min-margin-bottom) * 1px + (var(--max-margin-bottom) - var(--min-margin-bottom)) * ((100vw - (var(--fluid-start) * 1px)) / (var(--fluid-end) - var(--fluid-start))) )); padding-top: max( var(--min-padding-top) * 1px, min( var(--max-padding-top) * 1px, var(--min-padding-top) * 1px + (var(--max-padding-top) - var(--min-padding-top)) * ((100vw - (var(--fluid-start) * 1px)) / (var(--fluid-end) - var(--fluid-start))) )); padding-bottom: max( var(--min-padding-bottom) * 1px, min( var(--max-padding-bottom) * 1px, var(--min-padding-bottom) * 1px + (var(--max-padding-bottom) - var(--min-padding-bottom)) * ((100vw - (var(--fluid-start) * 1px)) / (var(--fluid-end) - var(--fluid-start))) )); /* Make the default minimum font size and margin 70% of the max and no lower than 16px */ --min-font-size: max(16, calc(var(--max-font-size) * .7)); /* Make the default minimum font size and margin 50% of the max */ --min-margin-bottom: max(10, calc(var(--max-margin-bottom) * .5)); --min-margin-top: max(10, calc(var(--max-margin-top) * .5)); } html:not([data-whatintent="keyboard"]) *:focus { outline: 0; } /* above 321px no need for horizontal scroll */ @media (min-width: 321px) { html { max-width: unset; /* need to hide bottom scrollbar if using the calc(50vw - 50%) method */ overflow-x: hidden; } } body { position: relative; min-width: 320px; max-width: 1855px; /* in mobile or tablet we do not want anything outside the body bounds scrollable */ overflow-x: hidden; margin: 0 auto; padding: 0 16px 0 16px; background: #fff; box-sizing: border-box; } @media (min-width: 920px) { body { /* increased side padding */ padding: 0 44px 0 44px; } } @media (min-width: 1025px) { body { /* was hidden, now we want the default */ overflow-x: unset; } } @media (min-width: 1350px) { body { /* further increased side padding */ padding: 0 80px 0 80px; } } p { --min-font-size: 16; --max-font-size: 21; margin-top: 10px; --min-margin-bottom: 15; --max-margin-bottom: 25; } p.introtext { line-height: 1.66; color: var(--blue); --min-font-size: 18; --max-font-size: 24; } /* normalize cell padding in tables - https://codepen.io/lowbatteries/pen/vRPBar */ td p:first-child { margin-top: 0; padding-top: 0; } td p:last-child { margin-bottom: 0; padding-bottom: 0; } b, strong { /* relative, works better if you have a light base font */ font-weight: bolder; } b b, strong strong, strong b, b strong { /* bad HTML was making multiple levels of bold */ font-weight: inherit; } /* no blockquote, just padding - make it equal */ p[style*='padding-left: 30px'], td p[style*='padding-left: 30px'] { padding-right: 30px } p[style*='padding-left: 60px'], td p[style*='padding-left: 60px'] { padding-right: 60px } p[style*='padding-left: 90px'], td p[style*='padding-left: 90px'] { padding-right: 90px } sup, sub { line-height: 0; } a { color: var(--darkgreen); /*color: var(--brightgreen);*/ /*changed per janice */ text-decoration: none; } p a:hover, p a:focus { border-bottom: 1px solid currentColor; } /* search results highlight */ mark { background: var(--darkgreen); color: white; } /* needed for IE11 */ main, nav, footer { display: block } /* make tel: links look like normal text */ a[href^="tel:"] { color: inherit !important; text-decoration: inherit !important; } h1, h2, h3, h4, h5, h6 { padding: 0; --max-margin-bottom: 24; color: #000000; --max-margin-top: 44; line-height: 1.18; } h1, #customSectionTitle { color: #000; font-weight: 400; margin-top: 15px; margin-bottom: 20px; --min-font-size: 50; --max-font-size: 80; line-height: 1; /*line-height: .75;*/ /* this doesn't work well (from the mockup) */ font-family: 'Calluna'; } h1#contentPageTitle { --min-font-size: 28; --max-font-size: 38; } h2 { --min-margin-bottom: 15; --max-margin-bottom: 20; font-weight: 400; --max-font-size: 38; color: var(--darkblue); font-family: 'Calluna'; } #subContent h2 { --min-margin-top: 20; --max-margin-top: 30; --min-font-size: 20; /*--max-font-size: 24;*/ --max-font-size: 25; /* changed per janice */ color: var(--darkblue); } .results-criteria-wrapper h2 { font-weight: bold; font-size: 1.1em; } h3 { --max-font-size: 21; text-transform: uppercase; color: var(--darkblue); font-weight: 500; letter-spacing: 1px; } h4 { --max-font-size: 20; color: var(--blue); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; } h5 { text-transform: uppercase; font-weight: 500; letter-spacing: 1px; color: var(--darkblue); } /* Reserved for Print Pilot */ h6 { font-weight: bolder; --min-font-size: 14; --max-font-size: 22; } ul, ol { margin: 0 0 1em 0; padding: 0; } ol { padding-left: 1em; } li { --min-font-size: 16; --max-font-size: 21; margin: 1em 0em 1em 1.5em; padding: 0; } li ~ li { margin-top: 1em; } /* bullet graphic ul li { list-style: none url('../i/bullet.png'); /* data-uri *\/ } */ ol ol, ul ul { margin: .5em 0 0 0; padding: 0; } /* invalid directly-nested lists need the left margin from 'li' above */ ol > ol, ul > ul { margin-left: 1.5em; } /* wysiwyg sometimes puts text in lists inside paragraphs, making uneven spacing */ li > p { margin: 0; padding: 0; } img { border: 0; } /* make sure WYSIWYG images don't overflow content */ :not(td) > p img, :not(td) > h1 img, :not(td) > h2 img, :not(td) > h3 img, :not(td) > h4 img, :not(td) > h5 img, :not(td) > h6 img { max-width: 100%; height: auto; } #content > * > :first-child, #content > * > :first-child > :first-child { margin-top: 0; } #content a:hover svg path, #content a:focus svg path { fill: inherit; } @media (max-width: 767px) { /* make wys tables take up full width on smaller screens */ #mainContent table[style*=width] { width: 100% !important; height: auto !important; } } @media (max-width: 500px) { /* make wys images take up full width on smaller screens */ p > img, p > a:not(sp_pencil) > img { float: none !important; width: 100% !important; height: auto !important; margin: 10px 0 18px 0 !important; } } /* ---- START FLEXIBLE BACKGROUNDS --- items that need a background stripe - make sure the item itself has: - position:relative - a background color set - no uncleared floats (needs to stretch to its contents height - can't use overflow: hidden */ #footer::before, #homeNewsHeader::before, #header::before, #homeAnimation .info::before, #homeCareers::before, .beforeContentSearch::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; /* we need to be left offset by the width of the left margin, which is half the difference between page width and viewport width long version, before simplifying: -(100vw - 100%)/2 */ left: calc(50% - 50vw); width: 100vw; background: inherit; } /* Smooth Resizing of Elements -----------------------------------> */ #logo svg, #banner, .letterLinks > *, .bioList > ul > li, #homeNewsHeader, #footerSocial { transition-property: top, right, bottom, left, width, height, max-width, max-height, min-width, min-height, padding, margin; transition-duration: 500ms; transition-timing-function: ease; } /* Object Support ------------------------------------------------> */ .error, .errors, .mandatory { color: #c33; } .error a, .errors a { color: inherit; text-decoration: underline; } table.results_list { border-collapse: collapse; width: 100%; } table.results_list th { text-align: left; } table.results_list td:not(:last-child) { padding-right: 10px; } @media (max-width: 767px) { table.results_list, table.results_list td, table.results_list tr { display: block; } table.results_list th { display: none; } } #captcha_wrapper { grid-column-start: 1; clear: both; float: none; height: auto; } #captcha_wrapper img { display: inline-block; margin: 2px 10px 0 0; } #captcha_wrapper button.reloadCode { display: inline-block; position: relative; margin: 12px 0 0 0; padding: 0.25em; width: 2.25em; height: 2.25em; background: transparent; box-sizing: border-box; border: 0; font-size: 12px; vertical-align: top; -webkit-appearance: none; } .reloadCode.loading { animation: reloadRotate 600ms linear 10; } @keyframes reloadRotate { 100% { transform: rotate(360deg); } } .reloadCode:before, .reloadCode:after { content: ""; display: block; } .reloadCode:before { width: 1.5em; height: 1.5em; border: 0.125em solid currentColor; border-top-color: transparent; border-radius: 50%; transform: rotate(45deg); } .reloadCode:after { position: absolute; top: 0; left: 50%; width: 0; height: 0; border-width: 0.3125em 0 0.3125em 0.5em; border-style: solid; border-color: transparent transparent transparent currentColor; } .itemList ul, .itemList ul li { list-style: none; margin-left: 0; } .itemList > ul li { margin: 0em 0em .8em 0em; } #resultPageLinks { margin: 1em 0; } #resultPageLinks a, #resultPageLinks span { margin-left: 7px; padding: 0 3px 2px; } #resultPageLinks span { border-bottom: 2px solid #333333; } /* buttons to look like links */ .expandButton button, .collapseButton button { margin: 0 !important; padding: 0 !important; background: none !important; border: none; color: inherit; font: inherit; text-transform: inherit; text-align: inherit; cursor: pointer; } .expandButton button, .collapseButton button { color: var(--darkgreen); text-decoration: none; cursor: pointer; } .expandButton:hover, .expandButton:focus, .collapseButton:hover, .collapseButton:focus { color: #888888; } .expandButton.expanded { display: none; } .expandableContent { display: none; overflow: hidden; } .extraItems { display: none; /* prevent slideToggle jump */ overflow: hidden; } /* Keyboard Content Jumpers ---------------------------------------> */ /* how these content jumps should work on desktop: 1. Initially completely hidden (transparent, in the second block) 2. On focus, they are made fully visible and clickable */ .contentJump { display: block; position: fixed; z-index: 999; top: 5px; right: 50%; /* padding and background needed for keyboard-focus */ padding: 5px 15px; background: white; } /* make them transparent unless keyboard focused */ .contentJump:not(:focus), .contentJump:not(:focus)::selection { z-index: -1; color: transparent !important; background: transparent !important; pointer-events: none; } /* Header --------------------------------------------------------> */ #header { position: absolute; z-index: 2010; top: 0; left: 0; width: 100%; height: 136px; padding: 0 16px 0 16px; box-sizing: border-box; } #header::before { background: rgba(255,255,255,0.95); } body.scrolled #header { box-shadow: 0px 0px 5px rgba(0,0,0,0.25); } #logo { /* inline-block to prevent logo from interfering with nav */ display: inline-block; position: relative; /*z-index: 9999;*/ width: 40%; max-width: 200px; margin: 20px 0 0 0; } #logo svg { display: block; position: relative; width: 100%; fill: #000; transition: fill 0.5s ease-out; } body.mobileActive #logo svg { fill: #FFFFFF; } @media (min-width: 920px) { #header { padding: 0 44px 0 44px; } } @media (min-width: 1120px) { #logo svg { max-width: unset; } } @media (min-width: 1350px) { #header { position: fixed; padding: 0 80px 0 80px; } } /* Banner --------------------------------------------------------> */ #banner { position: relative; } body:not(.hasBeforeContent) #banner { margin-bottom: max(30px, min(50px, 30px + (50 - 30) * ((100vw - 767px) / (1460 - 767)) )); } #bannerImage { } /*#bannerImage::after { content: ''; position: absolute; z-index: 2; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #002B49; background: url('../i/overlay-background.png') no-repeat, #002B49; opacity: .4; background-position: right bottom; background-size: 100%; }*/ body:not(.blog).defaultBanner #bannerImage::after { display: none; } #bannerImage > picture > img { display: block; position: absolute; z-index: 1; width: 100vw; left: calc(50% - 50vw); height: 100%; object-fit: cover; object-position: center right; } #bannerContent { /*position: absolute; bottom: 0; left: 0;*/ position: relative; z-index: 10; padding-top: 220px; padding-bottom: 30px; color: #fff; } #bannerText { opacity: .9; line-height: 1.47; } #bannerText p { --max-font-size: 23; } #bannerContent * { color: inherit; } #bannerSectionTitle, body.contact-item #customSectionTitle, body.blog #customSectionTitle { text-transform: uppercase; letter-spacing: 2px; color: #C8DFEF; font-size: 21px; line-height: 1; } body.contact-item #customSectionTitle { /*text-shadow: 3px 3px 8px black;*/ color: #ffffff; } #customSectionTitle { margin: 0; } @media (min-width: 920px) { #banner { height: 73vh; min-height: 500px; max-height: 820px; } body.defaultBanner #banner { min-height: unset; max-height: unset; height: 475px; } body.defaultBanner #bannerImage { height: 100%; } #bannerContent { display: flex; justify-content: space-between; padding: 0 0 10vh; position: absolute; bottom: 0; left: 0; width: 100%; } body.defaultBanner #bannerContent { /* Keep changing this, hopefully this is it */ padding-bottom: 5%; bottom: 0; } #bannerContent > div { flex: 0 1 712px; justify-content: space-between; } #bannerContent > div + div { flex: 0 1 730px; } #bannerContent #bannerText { padding: 30px 0 0 40px; box-sizing: border-box; } } @media (min-width: 1350px) { body.defaultBanner #bannerContent { padding-bottom: 3%; } } /* Popup search --------------------------------------------------------> */ #searchJump { display: block; position: absolute; z-index: 10000; top: 55px; right: 77px; line-height: 1; cursor: pointer; } body.mobileActive #searchJump { position: fixed; top: 27px; } #searchJump svg { display: block; width: 100%; height: auto; width: 24px; fill: var(--darkblue); } #searchJump svg path { fill: inherit; } body.mobileActive #searchJump svg { fill: #FFF; } #searchJump:hover svg, #searchJump:focus svg { opacity: 1; fill: #888; transition: fill 0.3s, opacity 0.3s; } body.mobileActive #searchJump:hover svg, body.mobileActive #searchJump:focus svg { opacity: 0.7; } @media (min-width: 920px) { #searchJump { right: 105px; } } @media (min-width: 1350px) { #searchJump { top: 31px; right: 80px; } } #siteSearch { opacity: 0; visibility: hidden; position: fixed; z-index: 9999; top: 0; left: 0; right: 0; background: rgba(0,0,0,.85) !important; height: 0; overflow: hidden; /* this is the close transition - fade out, hide height */ transition: opacity 0.25s, height 0s 1s, visibility 0s 1s; } #siteSearch:target, #siteSearch.target { opacity: 1; visibility: visible; height: 100vh; /* this is the fade in transition, fade in - change height immediately */ transition: opacity 0.25s, height 0s; } #siteSearch > div { display: flex; justify-content: center; align-items: stretch; width: 70vw; min-width: 290px; max-width: 1500px; margin: 20vh auto auto auto; border-bottom: 2px solid white !important; } #siteSearch div > *:not(label) { display: block; overflow: hidden; margin: 0; background: none; } #siteSearch div button { position: static; margin-left: 2px; padding: 10px; border: 0; cursor: pointer; } #siteSearch div button img { height: 25px; } #siteSearch input#searchtext2 { flex-grow: 1; width: 80%; min-height: auto; padding: 2px 2px 2px 5px; border: 0; color: white; font:inherit; font-size: 30px; font-weight: bold; } #searchClose { display: none; } #searchClose { display: block; position: absolute; top: 15px; right: 10px; width: 0; height: 0; overflow: hidden; padding: 28px 28px 0 0; background: none !important; border: none; box-sizing: border-box; color: inherit; font: inherit; font-size: 0; text-align: inherit; text-transform: inherit; cursor: pointer; } #searchClose::after, #searchClose::before { content: ''; display: block; position: absolute; top: -2px; bottom: -2px; left: 50%; width: 0; border: 1px solid white; border-radius: 4px; transform: rotate(-45deg); } #searchClose::before { transform: rotate(45deg); } #searchPopup { display: block; position: fixed; overflow: auto; z-index: 10000; top: calc(20vh + 54px); left: calc(50% - 145px); width: calc(70vw); min-width: 290px; max-width: 2000px; max-height: calc(70vh - 84px); background: white; box-shadow: 0 4px 8px rgba(0,0,0,0.5); } .searchPopup > * { display: block; width: 100%; margin: 0; padding: 5px 36px; box-sizing: border-box; font-size: 16px !important; line-height: 1.4; } .searchPopup * p { margin: 0; padding: 0; } .searchPopup .link { font-weight: bold; } .searchPopup .selected { position: relative; background: #ddd; } .searchPopup .selected::after { content: '»'; position: absolute; bottom: 10px; right: 10px; width: 1.3em; height: 1.3em; background: white; border-radius: 50%; box-shadow: 0 0 1px black; color: #999; line-height: 1.3em; text-align: center; } /* search popup predictive */ #inlineSearchPopup { position: absolute; top: 100%; left: 0; width: 100%; max-height: 350px; } .searchPopup { display: block; position: fixed; z-index: 10000; top: calc(20vh + 54px); left: calc(50% - 145px); width: calc(70vw); min-width: 290px; max-width: 2000px; max-height: calc(70vh - 84px); overflow: auto; background: white; box-shadow: 0 4px 8px rgba(0,0,0,0.5); } .searchPopup a { background: none; color: black; font-weight: normal; text-shadow: none; } .searchPopup > * { display: block; width: 100%; margin: 0; padding: 5px 36px; box-sizing: border-box; font-size: 16px !important; line-height: 1.4; } .searchPopup * p { margin: 0; padding: 0; } .searchPopup .link { font-weight: bold; } .searchPopup .selectable:hover { background: #ebebeb; } .searchPopup .selected { position: relative; background: #ddd; } .searchPopup .selected::after { content: '»'; position: absolute; bottom: 10px; right: 10px; width: 1.3em; height: 1.3em; background: white; border-radius: 50%; box-shadow: 0 0 1px black; color: #999; line-height: 1.3em; text-align: center; } .searchPopup .popupHeader, #allSearch { position: -webkit-sticky !important; position: sticky !important; top: 0; margin-top: 14px; background: white; color: black; font-size: 19px !important; text-transform: uppercase; } .searchPopup .popupHeader, .searchPopup .popupHeader a { font-weight: bold; } #allSearch { top: auto; bottom: 0; } .searchPopup .popupHeader:not(.selected) a, #allSearch:not(.selected) a { color: inherit; } /* search popup results: bio */ .acBio .results_list > div { display: flex; padding-bottom: 10px; } .acBio a { font-weight: bold; } .acBio .photo { padding: 0 10px 0 0; } .acBio .photo img { display: block; max-width: 70px; max-height: 50px; border: 1px solid #ccc; } #allSearch { position: -webkit-sticky; position: sticky; bottom: 0; width: 100%; margin: 0px; padding: 10px 38px; background: #3a3a3a; font-size: 16px !important; } #allSearch a { color: white !important; font-weight: bold; } @media (min-width: 501px) { #searchPopup, .searchPopup { left: calc(50% - 50vw + 15vw); } } /* Main Navigation -----------------------------------------------> */ #mainNav { position: relative; font-weight: 400; line-height: normal; } /* base style resets */ #mainNav ul, #mainNav li { list-style: none; position: relative; margin: 0; padding: 0; text-align: left; } /* top level */ #mainNav > ul { width: 100%; } /* all menu links */ #mainNav a { color: var(--darkblue); text-decoration: none; } #mainNav li > a { display: block; padding: 10px 22px; } #mainNav li li:hover > a, html[data-whatintent="keyboard"] #mainNav li li:focus-within > a { /* using data-whatintent, because some browsers don't understand focus-within */ /*background: #aaa;*/ color: var(--limegreen); text-decoration: none; border-bottom: none !important; } /* main subnav items */ /* subnavs should be same background/color as main nav*/ #mainNav ul, #mainNav ul li { background: inherit; font-size: inherit; } #mainNav > ul ul { display: none; position: absolute; } /* #mainNav #navButton-professionals ul div { color: white; } #mainNav #navButton-professionals ul div form > div > div { flex-basis: 100%; } #mainNav .letterLinks { margin-left: 0; color: #ccc; } #mainNav .letterLinks a, #mainNav .letterLinks span { width: calc(100% / 13); } #mainNav .letterLinks > *:nth-child(12), #mainNav .letterLinks > *:last-child { width: calc(100% / 13 - 1px); } */ #mainNav > ul > li > a::after { position: relative; content: '+'; left: 8px; color: var(--newbrightgreen); font-weight: 600; } #mainNav > ul > li#navButton-practices > a::after, #mainNav > ul > li#navButton-team > a::after { display: none; } /* Desktop Navigation ------------------------------------------------> */ @media (min-width: 1350px) { #mainNav { display: flex; position: absolute; z-index: 9999; top: 70px; right: 60px; } #mainNav > ul, #mainNav > ul > li { display: inline-block; background: none; } /* we want real hover, not fake touch-hover */ html:not([data-whatintent="touch"]) #mainNav > ul :hover > ul, #mainNav > ul .touchOpen > ul, #mainNav > ul .keepOpen > ul { display: block; } /* focus-within separated because IE11 chokes on it, but if someone has focus within a menu we definitely want it to be visible */ #mainNav > ul .keepOpen > ul:focus-within { display: block; } /* last two double/triple drops go right like parent above */ #mainNav > ul > li:nth-last-child(-n + 2):hover > ul ul { left: inherit; right: 100%; } #mainNav > ul ul { /*** center the drops ***/ left: calc(50% - 150px); width: 240px; /*background: var(--darkblue);*/ background: #0F2849; /* changed per janice. Can't tell a diff between this and the --darkblue */ padding: 15px 42px 25px; color: #ffffff; border-top: 2px solid var(--newbrightgreen); } #mainNav > ul #navButton-contact ul { width: 480px; left: -360px; columns: 2; } #mainNav > ul > li > a { white-space: nowrap; font-size: 22px; } #mainNav > ul:first-of-type > li > a { font-size: 23px; } /* Removed per client request */ /* #mainNav li#navButton-insights ul li:nth-child(2) a { text-transform: uppercase; } #mainNav li#navButton-insights ul li:nth-child(2) a::after { position: relative; content: '+'; left: 5px; }*/ #mainNav > ul > li > a:hover, #mainNav > ul > li > a:focus { background: none; color: var(--teal); border: none; } /* second-level links */ #mainNav li li > a { padding-left: 0; padding-right: 0; color: #ffffff; font-size: 20px; } /* dropdown current page highlight */ #mainNav > ul > li > ul .current > a:not(:hover):not(:focus) { color: var(--limegreen); background: none; } #mainNav > ul + ul > li.current > a:not(:hover):not(:focus) { background: none; color: #2B5C7E; } /* only users who clicked in to the subnav need to see the header */ #mainNav .subNavHeader, #subNavBack { display: none; } /* push double drops out the width of the parent */ #mainNav > ul li > ul ul { display: none !important; /* no double drops by default */ top: 0; left: 100%; } /*** split menu styles ***/ #mainNav > ul:not(:only-child) { /* we want to right-align these */ display: flex; justify-content: flex-end; } /* position the second nav above and make it smaller */ #mainNav > ul + ul { position: absolute; right: 80px; top: -37px; width: auto; } /* hide drops on secondary nav */ #mainNav > ul + ul ul { display: none; } #mainNav > ul + ul > li { margin-left: 47px; } #mainNav > ul + ul > li > a { padding: 3px 0; font-weight: 500; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; color: var(--teal); } #mainNav > ul + ul > li > a:first-child::after { left: 5px } /* styles above, repeated, because some browsers don't understand focus-within */ #mainNav > ul + ul > li:focus-within > a { background: none !important; } /*** end split menu styles ***/ /* mobile nav button is not visible at this screen width */ button#navToggle { display: none; } /* mega menu styles */ /* #mainNav #navButton-professionals ul { width: 100vw; max-width: 600px; box-sizing: border-box; padding-left: 20px; padding-right: 20px; } #mainNav #navButton-practices ul { width: 100vw; max-width: 600px; box-sizing: border-box; } #navButton-practices > ul { columns: 2; } #mainNav #navButton-practices a { white-space: normal; break-inside: avoid; } /* sub practices *\/ #navButton-practices ul ul { display: block; position: static; width: auto; padding: 0; } /* third level practices *\/ #navButton-practices ul ul ul { padding-left: 1em; } #navButton-practices ul ul a::before { content: '– '; } */ } /* Mobile Navigation ------------------------------------------------> */ @media (max-width: 1349px) { #mainNav, #mainNav li ul { position: fixed; display: block; visibility: hidden; z-index: 9998; top: 0; right: -100vw; left: auto; width: 100vw; height: 100vh; border-top: 130px solid transparent; padding: 33px 172px 120px 0; background: #0F2849; box-sizing: border-box; box-shadow: 0 0 200px 15px rgba(0,0,0,.8); transition: right 0.7s; overflow: auto; } #mainNav { background: url('../i/nav-boxes.svgz') 117px center no-repeat, #0F2849; /* data-uri */ } #mainNav { display: flex; flex-direction: column; align-items: flex-end; /* need to keep nested items to the right side of screen */ /*padding-left: 0px; padding-right: 0px;*/ } #mainNav::before { display: none; } #mainNav li, #mainNav ul { background: none; } #mainNav > ul, #mainNav li ul { min-width: 320px; width: 28vw; /* put a max width on lists even though the parent expands the full viewport */ } #mainNav li ul { width: calc(28vw + 30px); padding-left: 3vw; } #mainNav li ul { box-sizing: content-box; } #mainNav li ul::-webkit-scrollbar-track { background: transparent; } #mainNav.target, #mainNav.target li ul { left: auto !important; /* might be set by repositionDrops, ignore it */ } /* needed to avoid a keyboard trap on mobile */ html[data-whatintent="keyboard"] #mainNav li:not(.touchOpen) > ul { visibility: hidden; } #mainNav li ul { box-shadow: none; } #mainNav.target, #mainNav li.touchOpen > ul { visibility: visible; right: 0; } #mainNav ul, #mainNav li { display: block; margin: 0; padding: 0; } #mainNav li > a { padding: 15px 0; } #mainNav a { color: #ffffff; } #mainNav li.current > a { color: #989797; } #mainNav > ul > li { font-size: 23px; letter-spacing: 1px; } #mainNav > ul + ul { padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--brightgreen); } #mainNav > ul + ul > li > a { font-size: 16px; text-transform: uppercase; color: var(--lightblue); } #mainNav > ul > li:hover > a, html[data-whatintent="keyboard"] #mainNav > ul > li:focus-within > a { /* using data-whatintent, because some browsers don't understand focus-within */ background: none; color: #cccccc; } #mainNav > ul ul > li { font-size: 1rem; text-transform: none; } #mainNav li li:hover > a, html[data-whatintent="keyboard"] #mainNav li li:focus-within > a { /* using data-whatintent, because some browsers don't understand focus-within */ background: none; color: #cccccc; } #mainNav #subNavBack { position: absolute; top: 0; } #mainNav #subNavBack a { position: relative; margin-left: 1px; padding-left: 20px; } #mainNav #subNavBack a::before { content: '‹'; position: absolute; left: 0; font-size: 2.5rem; font-weight: 300; line-height: 0.85rem; } #mainNav ul ul li.subNavHeader { margin-top: 12px; font-size: 1.2rem; text-transform: uppercase; } #mainNav #navButton-professionals ul li#megaSearch { display: none !important; /* hide megaSearch in mobile always */ } /* Mobile Nav 'Hamburger' Button */ button#navToggle { display: block; position: absolute; z-index: 9999; top: calc(50% - 14px); right: 40px; font-size: 0; } .mobileNav { display: inline-block; overflow: visible; margin: 0; padding: 4px; background-color: transparent; border: 0; color: inherit; font: inherit; text-transform: none; cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity, filter; } button#navToggle.mobileNav.isActive { position: fixed; /* allows for home page alert message repositioning */ top: 25px; } .mobileNav.isActive:hover, .mobileNav.isActive:focus, .mobileNav:hover, .mobileNav:focus { opacity: .7; } .mobileNavBox { position: relative; display: inline-block; width: 40px; height: 22px; } .mobileNavBox span { display: block; top: 50%; margin-top: -2px; } .mobileNavBox span { position: absolute; top: 10px; width: 40px; height: 4px; background-color: #000; border-radius: 4px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; } .mobileNav.isActive .mobileNavBox span { width: 30px; height: 2px; background-color: #fff; } .mobileNavBox span:first-child { top: 0; } .mobileNavBox span:last-child { top: 20px; } /* Add in a 'MENU' label if necessary, hidden by default */ .mobileNavLabel { display: none; /*display: inline-block; margin-left: 5px; color: #fff; font-weight: 600; vertical-align: middle; text-transform: uppercase;*/ } /* SPRING - default mobile nav button style */ /* see https://github.com/jonsuh/hamburgers for other effects */ .mobileNavSpring .mobileNavBox span { top: 0px; /*transition: background-color 0s linear .13s;*/ } .mobileNavSpring .mobileNavBox :first-child { top: 10px; transition: top .1s cubic-bezier(.33333, .66667, .66667, 1) .2s, transform .13s cubic-bezier(.55, .055, .675, .19); } .mobileNavSpring .mobileNavBox :last-child { top: 20px; transition: top .2s cubic-bezier(.33333, .66667, .66667, 1) .2s, transform .13s cubic-bezier(.55, .055, .675, .19); } .mobileNavSpring.isActive .mobileNavBox :nth-child(2) { transition-delay: .22s; background-color: transparent !important; } .mobileNavSpring.isActive .mobileNavBox :first-child { top: 0; transition: top .1s cubic-bezier(.33333, 0, .66667, .33333) .15s, transform .13s cubic-bezier(.215, .61, .355, 1) .22s; transform: translate3d(0, 10px, 0) rotate(45deg); } .mobileNavSpring.isActive .mobileNavBox :last-child { top: 0; transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), transform .13s cubic-bezier(.215, .61, .355, 1) .22s; transform: translate3d(0, 10px, 0) rotate(-45deg); } /* ToggleDrop version - subs expand below instead of swing in from side Just add .toggleDrop to the #mainNav element */ /* #mainNav.toggleDrop li ul { display: none; position: relative; right: auto !important; left: auto !important; height: auto; padding-top: 0px; padding-left: 10px; background: none; visibility: visible; transition: none; } #mainNav.toggleDrop li ul li.subNavHeader { display: none; } #mainNav.toggleDrop li > a:first-child:not(:last-child)::after { text-align: center; transform: rotate(90deg); transition: transform 150ms ease-out; } #mainNav.toggleDrop li > a.toggleDropOpen:first-child:not(:last-child)::after { transform: rotate(-90deg); transform-origin: 0px center; } */ } /* mobile stlyles cont. - for smaller screens */ @media (max-width: 919px) { #mainNav { background: #0F2849; } #mainNav > ul, #mainNav li ul { box-sizing: border-box; width: 100%; /*margin-left: 0px;*/ } #mainNav, #mainNav li ul { border-top-width: 90px; padding-top: 0px; padding-right: 30px; padding-left: 30px; } #mainNav li ul { padding-top: 35px; } #mainNav li > a:first-child:not(:last-child)::after { top: 2px; } #mainNav #subNavBack a::before { left: -10px; font-size: 3rem; line-height: 1.3rem; } #mainNav ul ul li.subNavHeader { margin-top: 10px; font-size: 1.6rem; } button#navToggle { right: 12px; } } @media (min-width: 920px) and (max-width: 1349px) { #mainNav li ul:last-child { height: calc(100vh - 66px - 180px); /* subtract padding-top + padding-bottom */ } } /* Sub Navigation ------------------------------------------------> */ #pageTools { display: flex; margin-bottom: 34px; } #pageTools * { display: block; width: 45px; height: 45px; margin-right: 15px; border: none; transition: all 250ms ease; } #pageTools svg { display: block; width: 100%; height: auto; fill: var(--orange); } #pageTools a:hover, #pageTools a:focus { transform: scale(1.08); } ul.subNavList { margin-bottom: 0; font-size: 1.2rem; text-transform: uppercase; /* changed per janice */ font-weight: 700; } ul.subNavList li { list-style: none; margin: 0 0 20px; padding: 0; line-height: 1.8; letter-spacing: 1px; color: var(--darkblue); } ul.subNavList ul { padding-left: 10px; } ul.subNavList li.here a, ul.subNavList li.hereParent a, ul.subNavList li a:is(:hover,:focus) { padding-bottom: 5px; color: var(--darkgreen); /* changed per janice */ /*color: var(--brightgreen);*/ border-bottom: 2px solid var(--darkgreen); font-weight: 700; } ul.subNavList li a:is(:hover,:focus) { border-bottom: none; } ul.subNavList li a { color: inherit; } ul.subNavList li:last-child { margin-bottom: 0; } /* Tabs and Expandable Headers ------------------------------------> */ /* these headings are to have similar styling */ .expandableHeading, h2.sectionTitle { position: relative; font-weight: 400; cursor: pointer; --max-margin-top: 38; } .expandableHeading button { display: block; width: 100%; margin: 0 !important; padding: 16px 40px 19px 65px !important; background: none !important; border: none; border-bottom: 1px solid var(--rules); color: var(--darkblue); font-size: 19px; font-weight: 700; text-transform: uppercase; text-align: left; font-family: 'AvenirNext', Calibri, Arial, sans-serif; text-transform: uppercase; cursor: pointer; letter-spacing: 1px; line-height: 1.36; } .expandableHeading button::before { position: absolute; left: 0; top: 0; content: ''; width: 0; height: 0; border-style: solid; border-width: 48px 48px 0 0; border-color: var(--newbrightgreen) transparent transparent transparent; } .expandableHeading button::after, h2.sectionTitle::after { position: absolute; right: 10px; top: 12px; content: '+'; font-size: 32px; line-height: 1; color: var(--newbrightgreen); } h2.sectionTitle::after { top: 6px; } .expandableHeading button:hover, .expandableHeading button:focus { /*color: var(--darkgreen);*/ color: var(--brightgreen); } .expandableHeading button:hover::before, .expandableHeading button:focus::before { /*border-color: var(--darkgreen) transparent transparent transparent;*/ border-color: var(--darkblue) transparent transparent transparent; } .expandableHeading button:is(:hover, :focus)::after, h2.sectionTitle:is(:hover, :focus)::after { position: absolute; right: 10px; top: 12px; content: '+'; font-size: 32px; line-height: 1; /*color: var(--darkgreen);*/ color: var(--darkblue); } .expandableHeading.expanded button { color: var(--darkblue); } .expandableHeading.expanded button::before { border-color: currentColor transparent transparent transparent; } .expandableHeading.expanded button::after, h2.sectionTitle.isOpen::after { color: currentColor; transform: rotate(45deg); } h2.sectionTitle.isOpen::after, h2.sectionTitle:is(:hover, :focus)::after { top: 5px; } /* mobile/tablet tabs */ @media (max-width: 1024px) { #tabLinks { display: none; } h2.sectionTitle { display: block; } .contentSection { display: block !important; } .contentSection > * { display: none; padding: 10px 0 10px 0; } #tabLinks a#tabViewAll { display: none; } } /* desktop tabs */ @media (min-width: 1024px) { #tabLinks { position: sticky; top: 0; left: 0; z-index: 100; width: 100%; padding: 34px max(30px, min(59px, 30px + (59 - 30) * ((100vw - 1024px) / (1400 - 1024)) )) 24px; margin-top: -90px; background: var(--darkblue); background: url('../i/tab-background.png') no-repeat, var(--darkblue); /* data-uri */ background-size: contain; background-position: right center; min-height: 87px; box-sizing: border-box; } #tabLinks a { display: inline-block; position: relative; padding: 0; padding-bottom: 7px; margin-right: max(30px, min(65px, 30px + (65 - 30) * ((100vw - 1024px) / (1800 - 1024)) )); color: #ffffff; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; line-height: 1; } #tabLinks .current, #tabLinks a:hover, #tabLinks a:focus { border-bottom: 2px solid var(--limegreen); color: var(--limegreen); text-decoration: none; cursor: default; } .sectionTitle { display: none; } #tabLinks a#tabViewAll { float: right; padding: 0.5em 0; border: none; } } @media (min-width: 1800px) { #tabLinks a { font-size: 18px; } } /* Basic Tiles ----------------------------------------------------> */ /* Make a tile like: $lister->attributes['div_results']['class'] = 'itemTile'; $lister->link_tags = array('WRAP'); */ .itemTile .results_list { position: relative; } .itemTile .results_list > * /* could be a div or li */ { display: flex; flex-direction: column; position: relative; width: 100%; margin: 0 0 20px 0; box-sizing: border-box; color: #fff; } .itemTile .results_list > * > a:not(.sp_pencil) { display: block; flex: 1 0 auto; padding: 20px; background: #cccccc; color: #fff; } .itemTile .results_list > * > a:not(.sp_pencil):hover, .itemTile .results_list > * > a:not(.sp_pencil):focus { background: #bbbbbb; text-decoration: none; } .itemTile .results_list > * .title { color: var(--darkgreen); font-weight: 700; font-size: 24px; } @media (min-width: 501px) { .itemTile .results_list { display: flex; flex-wrap: wrap; justify-content: space-between; } .itemTile .results_list > * { width: calc(50% - 10px); } } /* Content -------------------------------------------------------> */ #beforeContent { margin-bottom: max(30px, min(50px, 30px + (50 - 30) * ((100vw - 767px) / (1460 - 767)) )); } #content { display: flex; flex-direction: column; position: relative; max-width: 1468px; min-height: 350px; margin: 2.5rem auto; } #bottomContent { width: 100%; max-width: 1468px; padding-top: 1px; /* done to make margins of inside elements work */ margin: 0 auto; clear: both; order: 4; } main { order: 1; position: relative; width: 100%; margin: 1rem 0 0 0; padding: 0 0 0.5rem 0; box-sizing: border-box; } #subNav { order: 3; position: relative; width: 100%; margin: 1rem 0 0 0; padding: 1rem 0 0.5rem 0; box-sizing: border-box; } #subContent, #additionalSubcontent { order: 2; position: relative; width: 100%; margin: 1rem 0 0 0; padding: 1rem 0 0.5rem 0; box-sizing: border-box; color: #696969; /*border-top: 1px solid #e4e4e4;*/ /* this mandatory for mobile at least */ } @media (min-width: 920px) { #content { display: block; } #content::after { /* make div stretch to height of content */ content: ''; clear: both; display: block; } #mainContent:not(:only-child) { float: left; width: calc(100% - 19% - 130px); } #subNav, #subContent, #additionalSubcontent { clear: right; float: right; width: 19%; } } #subContent li { margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.4; } div.texthtml { margin: 5px 0 8px 0; } .texthtml p { padding: 0 0 8px 0; } ul.none { list-style: none; margin: 5px 0 8px 0; } ul.none li { padding: 0; margin: 0 0 8px 0; } /* JS now takes care of the hiding of these elements based on div class. It wouldn't be horrible to retain these in addition though. */ /* if there are 5 or more, hide any items after first 3 */ /*.expandableList .results_list > li:nth-last-child(n+6) ~ li:nth-child(n+5)*/ .expandableList .results_list > li ~ li:nth-child(n+10) { display: none; } /* hide all items for area, industry, and office 'professionals' */ .expandableFullList .results_list > li { display: none; } .popupPlayerPlaylist .expandableList, .popupPlayerPlaylist .expandableList li { display: block; } #subContent .itemSection:not(#bio_education) ul, #subContent .itemSection:not(#bio_education) ul li { list-style: none; margin-left: 0; } #mainContent .itemSection ul.results_list { margin-bottom: 0em; } #area_bio ul.results_list, #industry_bio ul.results_list, #office_bio ul.results_list { margin: 0 0 8px 0; } .itemSection ~ .itemSection > .extraItems > ul > li { margin-top: 0; } /* View More type links */ .view_more a, .linktext a, .expandButton button, .collapseButton button, .videomore a, .squareList .linktext, a.viewAll, .reviseButton a, .blog #historyLinks a { display: inline-block; width: auto; padding-bottom: 7px; margin: 15px 0 28px 0; /*color: var(--darkgreen);*/ /*color: var(--brightgreen); /* changed per janice - doesn't meet wcag though */ color: var(--wcaggreen); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; /*border-bottom: 2px solid var(--brightgreen) !important;*/ border-bottom: 2px solid var(--darkgreen) !important; } .view_more a:hover, .view_more a:focus { text-decoration: none; } .squareList .linktext:hover, .squareList .linktext:focus-within { transition: none !important; color: #ffffff; } .blog #historyLinks a:hover, .blog #historyLinks a:focus { color: var(--darkblue); } .rsvpButton { margin: 10px 0 0 0; } /* Static News */ .bottomSpotlights { margin-top: max(50px, min(80px, 50px + (80 - 50) * ((100vw - 767px) / (1460 - 767)) )) !important; margin-bottom: max(50px, min(80px, 50px + (80 - 50) * ((100vw - 767px) / (1460 - 767)) )); } .bottomSpotlights ul, .bottomSpotlights li { margin: 0; list-style: none; } .bottomSpotlights ul { display: grid; grid-gap: 37px; } .bottomSpotlights > div { margin-top: max(28px, min(40px, 28px + (40 - 28) * ((100vw - 767px) / (1460 - 767)) )); } .bottomSpotlights .image { aspect-ratio: 467 / 297; overflow: hidden; } .bottomSpotlights .image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all 250ms ease; } .bottomSpotlights .section { position: relative; padding: 16px 25px 15px; margin-bottom: 29px; line-height: 1.2; text-transform: uppercase; color: var(--lightblue); background: var(--darkblue); letter-spacing: 1px; font-size: 15px; } #newsroomBottomSpotlights .section.newsItem { background: var(--orange); } #newsroomBottomSpotlights .section.publicationItem { background: var(--blue); } #newsroomBottomSpotlights .section.blogpostItem, #blogSpotlights .section.blogpostItem { /*background: var(--brightgreen);*/ background: var(--darkgreen); } #blogSpotlights .section.blogpostItem a { color: inherit; } #newsroomBottomSpotlights { margin-top: 0 !important; /*margin-top: max(30px, min(50px, 30px + (50 - 30) * ((100vw - 767px) / (1460 - 767)) )) !important;*/ } #newsroomBottomSpotlights .section { color: #ffffff; } /*.bottomSpotlights a:hover .section,*/ /*.bottomSpotlights a:focus .section,*/ /* removed per janice/client */ .bottomSpotlights a:hover .title, .bottomSpotlights a:focus .title { /*color: var(--limegreen);*/ color: var(--darkgreen); } /*.bottomSpotlights a:hover .image img, .bottomSpotlights a:focus .image img { transform: scale(1.03); }*/ .bottomSpotlights .section::after { position: absolute; bottom: -31px; right: 0px; content: ''; width: 0; height: 0; border-style: solid; border-width: 33px 34px 0 0; border-color: var(--darkblue) transparent transparent transparent; } #newsroomBottomSpotlights .section.newsItem::after { border-color: var(--orange) transparent transparent transparent; } #newsroomBottomSpotlights .section.publicationItem::after { border-color: var(--blue) transparent transparent transparent; } #newsroomBottomSpotlights .section.blogpostItem::after, #blogSpotlights .section.blogpostItem::after { border-color: var(--darkgreen) transparent transparent transparent; } .bottomSpotlights .title { width: calc(100% - 40px); color: var(--black); line-height: 1.52; --min-font-size: 18; --max-font-size: 21; } @media (min-width: 768px) { .bottomSpotlights ul.results_list { grid-template-columns: repeat(3, 1fr); } } /* News list */ .newsList ul.results_list { display: grid; grid-gap: 40px; } .newsList ul.results_list li a { position: relative; display: block; min-height: 297px; height: 100%; padding: 42px 30px 110px; border: 1px solid #707070; box-sizing: border-box; color: var(--black); } .newsList ul.results_list li a::before { content: ''; position: absolute; bottom: -1px; left: -1px; display: block; width: calc(100% + 2px); height: 12px; background: var(--orange); transition: height 250ms ease; } .newsList.event ul.results_list li a::before { background: var(--darkblue); } .newsList.publication ul.results_list li a::before { background: var(--blue); } .newsList.blogpost ul.results_list li a::before { background: var(--brightgreen); } .newsList ul.results_list li a:hover, .newsList ul.results_list li a:focus { color: #ffffff; } .newsList ul.results_list li a:hover::before, .newsList ul.results_list li a:focus::before { height: calc(100% + 2px); } .newsList ul.results_list .title, .podcastItemList ul.results_list .title { position: relative; z-index: 5; color: inherit; --min-font-size: 20; --max-font-size: 23; } .podcastItemList ul.results_list .title { font-weight: 700; } .podcast { margin-top: 15px; } .speaker, .guest, .organization { color: #666666; } .podcastItemList ul.results_list .episodenumber { font-size: 15px; } .newsList ul.results_list .abstract { position: relative; z-index: 10; color: inherit; } .newsList ul.results_list .info { position: absolute; bottom: 0; left: 0; width: 100%; padding: inherit; padding-bottom: 32px; text-transform: uppercase; color: var(--blue); letter-spacing: 1px; font-size: 15px; overflow: hidden; box-sizing: border-box; } .newsList ul.results_list .info div { float: left; } .newsList ul.results_list a:hover .info, .newsList ul.results_list a:focus .info { color: inherit; } .newsList.blogpost ul.results_list img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /*.newsList ul.results_list .info > div + div::before { content: '|'; margin: 0 10px; }*/ .newsList ul.results_list .info > div:not(:last-child)::after { content: '|'; margin: 0 10px; } @media (min-width: 600px) { .newsList ul.results_list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .newsList ul.results_list { grid-template-columns: repeat(3, 1fr); } .newsList ul.results_list li a { padding-left: 37px; padding-right: 37px; } } /* Forms ---------------------------------------------------------> */ form { position: relative; margin: 0; padding: 0; } form > div > div { position: relative; margin-bottom: 20px; min-width: 0; } #subContent form > div > div { width: auto; margin-right: 0; } form > div > div.textarea_wrapper { } form > div > div.scrolling_checkbox_wrapper, form > div > div.checkbox_wrapper { grid-column-start: 1; width: 100%; padding: 5px 0 10px 0; } form > div > div.scrolling_checkbox_wrapper { padding-top: 45px; /*height: 300px; overflow: auto; border: 1px solid #d6d6d6;*/ } form > div > div.scrolling_checkbox_wrapper input[type=checkbox] { position: relative; top: -40px; } form > div > div.checkbox_wrapper > div > div { display: flex; margin: 0 0 10px 0; } label { display: block; } /* radio/checkboxes without a wrapper */ input + label { display: inline; } label p { margin-top: 0; } label p:last-of-type { display: inline; /* makes the red required asterisk appear at the end of text */ } form > div > :is(.textarea_wrapper, .checkbox_wrapper, .radio_wrapper) > label { display: block; position: relative; padding: 0 0 10px 0; line-height: 1.3; } form > div > div.checkbox_wrapper > div { line-height: 1.4; } form > div > div.checkbox_wrapper > div > div > input { align-self: flex-start; margin: 6px 6px 0 0; padding: 0; } form > div > div.checkbox_wrapper > div > div > label { /* in safari, unrestricted width was shrinking the actual checkbox */ max-width: calc(100% - 30px); } form > div > div.radio_wrapper { padding: 10px 0 0 0; } form > div > div.radio_wrapper > div > div { display: flex; padding-right: 12px; } form > div > div.radio_wrapper > div > div > label { display: inline-block; padding: 2px 0 0 4px; vertical-align: middle; } form > div > div.submit_wrapper { /* width: 100%; uncomment if you want this on its own line */ overflow: visible; } /* WebForm uses an id */ #submit_wrapper { grid-column: 1 / -1; width: 100%; } form > p { width: 100%; } /* hide the label via CSS by default if it has a value (class added in ItemSearch) */ form > div > div.hasValue > label { /* visibility: hidden; not necessary with labels visible above the field */ } /* remove the visibility: hidden the moment the field has any style added to it via JS */ form > div > div.hasValue > label[style] { visibility: visible; } /* reset button appearance on iOS */ input[type=submit], button, ::-webkit-file-upload-button, #paymentButtons a, .rsvpAction a { border-radius: 0; font: inherit; -webkit-appearance: none; } input[type=file] { font: inherit; } input:not([type]), input[type=text], input[type=tel], input[type=email], input[type=password], textarea, select, .customSelect { width: 100%; /* appease IE11 */ min-height: 52px; margin: 0; padding: 10px 7px 0 0; background: none; border: none; border-bottom: 1px solid #d6d6d6; border-radius: 0; box-sizing: border-box; color: #666766; font-size: 18px; line-height: 1.8; vertical-align: top; } textarea { min-height: 6.5em; } /* floating labels applied only to search forms, not other forms, for accessibility if you *must* do floating labels everywhere, remove the ".search_form" from the selector, and make sure to remove it in the inFieldLabels call in default.js */ form > div > div > label { /* needed for animation to work on .customSelect */ display: block !important; position: absolute; padding: 10px 7px 0 0; color: var(--darkblue); letter-spacing: 1px; font-size: 20px; line-height: 1.8; text-transform: uppercase; font-weight: 500; } form > div > div.hasFocus > label { display: block !important; z-index: 5; top: -10px; padding: 2px 4px 0 2px; background: none; border-radius: 3px; font-size: 0.6rem; line-height: 1; transition: all 0.3s ease; } select { /* make '-All-' camouflaged until customSelect takes over */ /* you may need to change this color to match your particular select bg color */ /* we switch back to the inherited color with select.hasCustomSelect below */ color: #ffffff; } .customSelect { display: inline-block !important; position: relative; overflow: hidden; /* make room for the arrow */ padding-right: 40px; text-transform: uppercase; letter-spacing: 1px; color: var(--darkblue); font-weight: 500; font-size: 20px; } .customSelect::after { content: '+'; display: block; position: absolute; top: 14px; right: 10px; color: var(--brightgreen); font-weight: 600; font-size: 26px; line-height: 1; } /* normalize selects */ select { /* customSelect tries to be useful and set the width, but it breaks a lot */ width: 100% !important; box-sizing: border-box; } /* this makes sure the invisible select always floats above */ select.hasCustomSelect { z-index: 1; padding: 5px 15px; /* we made this white to be camouflaged on load, but now must return to prev color */ color: #666766; } /* per swati, we always want this to be 16px out the gate */ option { color: inherit; font-size: 16px; } /* custom select color - somewhat buggy, leaving out for now select option:hover, select option:focus, select option:active, select option:checked { background: linear-gradient(var(--darkgreen), var(--darkgreen)); background-color: var(--darkgreen) !important; color: white !important; } */ .customSelectInner { display: block !important; width: 100% !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus, .customSelectFocus { /* there must be a visual change on focus for accessibility */ border-color: var(--darkblue); } /* invalid styles - pink! */ .errors + div > form input:not([type=radio]):invalid, .errors + div > form textarea:invalid, .errors + div > form select[data-invalid], .errors + div > form select[data-invalid] + .customSelect, form div.invalid { background-color: #fee; } /* invalid and focused - darker pink! */ .errors + div > form input:not([type=radio]):invalid:focus, .errors + div > form textarea:invalid:focus, .errors + div > form select[data-invalid]:focus, .errors + div > form select[data-invalid] + .customSelect:focus { background-color: #fcc; } /* wrapper divs for checkbox/radios need styling */ div.required.invalid { padding-left: 5px; } input[type=submit], button[type=submit], .standardButton, .packetButton, ::file-selector-button, ::-webkit-file-upload-button, #paymentButtons a, .rsvpAction a { /* needed to normalize vertical text alignment across and