img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} html {--12px: 0.75rem; --14px: 0.875rem; --15px: 0.9375rem; --16px: 1.0rem; --17px: 1.0625rem; --18px: 1.125rem; --20px: 1.25rem; --24px: 1.5rem; --28px: 1.75rem; --32px: min(2rem,42px); } a { position: relative } :is(a[target='_blank'],a[href^=tel],a[href$=pdf],a[href^=mailto])::after { position: absolute; left: 50%; transform: translateX(-50%); top: -30px; z-index: 999; padding: 3px 6px; border: 1px solid black; color: black; background-color: #fff; font-size: 12px; font-family: sans-serif; text-align: center; letter-spacing: 0; display: none; text-transform: none; font-weight: normal; white-space: nowrap } a[target='_blank']::after { content: "(Opens in new window)"; } a[href^=tel]::after { content: "(Dials this phone call)"; } a[href^=mailto]::after { content: "(Email this recipient)"; } a[href$=pdf]::after { content: "(PDF opens in new window)"; } :is(a[target='_blank'],a[href^=tel],a[href^=mailto]):is(:hover,:focus)::after { display: block; } .ccpaNotice i { letter-spacing: 0; } .jump { position: absolute; top: 0; left: 150px; padding: 10px 20px; border-width: 1px; border-color: #ff9a1f; border-style: none solid solid; transform: translateY(-200%); font-weight: bold; font-size: var(--16px); border-radius: 0 0 5px 5px; margin: 0 !important; z-index: 999; background-color: #fff } :is(.jump,.jumpside,.jumpfoot):focus-visible { transform: translateY(0%) } :is(a, input[type=submit], .wrap,button):focus-visible { outline-style: solid; outline-width: 2px; outline-color: #000; outline-offset: 4px; border-radius: 3px; transition: all .3s linear .01s; } :is(.hero .wrap, footer .wrap,.hero a, footer a, nav a,footer button):focus-visible { outline-color: #fff } :is(footer .alt, .a8bmark,.hero .grid > div:last-of-type) a:focus-visible { outline-color: #000 !important } :is(nav a, footer .wrap):focus-visible { outline-offset: -5px !important; border-radius: 12px !important } main:focus-visible { outline-offset: -4px; outline-style: inset; outline-width: 4px; outline-color: #666 } .jumpside, .jumpfoot { position: absolute; background-color: #fff; padding: 6px 10px; margin: 5px; transform: translateY(-150%) } .jumpside { left: 10px; top: 10px; padding: 5px 10px; margin: 5px; } .jumpfoot { right: 8px; } footer .wrap { outline-offset: -5px } * { scroll-behavior: smooth } body { font-family: 'Red Hat Display', Arial, Helvetica, sans-serif; line-height: 1.5; text-align: center; min-width: 320px; } body, .hero .grid > div:last-of-type h2, .hero .grid > div:last-of-type p, aside a, .report a { color: #403d39; } body, header ul, .hero h1 { padding: 0; margin: 0; } .hero p { margin: 0; padding: 15px 0 } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } h1, .home h2, h2.important, header a, header button, aside h2 { color: #246c4f; } img, iframe { max-width: 100%; height: auto; display: block; margin: 0 auto } iframe { display: block; aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; } .fullwidth { width: 100%; } a img, iframe { border: none; } a:hover { transition: ease-in-out .3s; } header a:hover, .btn, .btn:hover { text-decoration: none; } header a:hover { color: #f47621; } main a, .jumpfoot, .embeds a span, main button { color: #246c4f; text-decoration-color: #FFBB33; text-decoration-thickness: 1px; font-weight: bold; } .embeds a span { text-decoration-line: underline; display: block } a:hover, .embeds a:hover span { text-decoration: underline; text-decoration-thickness: 1px; } a, a:hover, .embeds a:hover span { text-underline-offset: 4px } .embeds h2 { margin-top: 0 } hr { border-width: 1px; border-color: #e7e7e7; border-style: none none solid; margin: 40px 0; } .imgLeft, .imgRight { max-width: 45%; } .imgLeft { float: left; margin: 10px 4% 2% 0; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 10px 0 2% 4%; } .imgRight > img { margin: 0 auto } .clear { clear: both; } .nowrap, a[href^=tel] { white-space: nowrap; } .hide { display: none; } sup { line-height: 0; } .center, .ccpaNotice, .hero p, .hero .grid > div:last-of-type h2, .cta h2, .cta li, .smarthub .features p, .smarthub .start h2, .smarthub .start h3, .smarthub .start p, .smarthub .support h2, .smarthub .support h3, .smarthub .support p, .smarthub .support li { text-align: center; } .wrap { display: block; max-width: 1100px; margin: 0 auto; position: relative; } .pad { padding: 0 10px } .mid { align-items: center; align-self: center; } .grid, .content { display: grid; grid-gap: 10px 40px; } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.fourth { grid-template-columns: repeat(4,1fr); } .bgimg { position: relative } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 } img.fillbg { max-width: calc(100% + 20px); margin: 0 -10px } header .wrap { padding: 10px; } header .grid { grid-template-columns: 350px 1fr; } header .grid, .subfoot .grid > div:last-of-type { text-align: right; } header .grid { font-size: 24px; font-weight: 700; } header .phone { display: inline-block; padding: 4px } header a { text-decoration: none } header #logo { margin: 0 auto } nav { position: relative; z-index: 999 } nav .wrap { padding: 0; } nav a, nav a:hover, footer h2, footer .grid.fourth, footer .grid.fourth a, .hero h1, .hero h2, .hero p { color: #fff; } nav, footer { background-color: #246c4f; } nav { border-color: #246c4f; border-width: 1px; border-style: solid none } footer, .subfoot, .ccpaNotice { border-top: 1px solid #246c4f } nav li { display: inline-block; } nav a { display: block; padding: 10px 20px; } nav a:hover, footer button:hover { background-color: #f47621; } .curragenda span { display: none } .hero, .featured { position: relative; } .hero { z-index: 2; padding: 20px } .hero h1, .home .cta h2 { font-size: 36px; } .hero h1, .hero .grid > div:first-of-type h2, .hero > .wrap > p { text-shadow: 1px 1px 1px #000,-1px -1px 1px #000 } .hero { height: 400px; } .hero:before { content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); position: absolute; top: 0; left: 0; } .hero:before, .hero > .wrap { z-index: 1 } .hero > .wrap, .smarthub .support .wrap { top: 50%; transform: translateY(-50%); } .hero strong { display: block; font-size: 32px; } .hero .grid.resources { grid-gap: 10px } body .hero .grid > div:first-of-type p { text-align: left; margin: 0; } body .hero .grid.resources { margin: 40px 0 } .grid.resources p { padding: 0 } .hero .grid > div:last-of-type { background-color: rgba(255,255,255,.7); padding: 40px 40px 50px; } .hero .grid > div:last-of-type .btn { margin-top: 40px; } .home .grid.half.pad a img { transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 3px; } .home .grid.half.pad a:hover img { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.15); outline: 2px solid #FFBB33; outline-offset: 2px; } .service { padding: 40px 10px 0; } .featured { padding: 80px 10px; margin: 50px 0; } .featured:before { content: ""; width: 100%; height: 100%; background-image: linear-gradient(#fff,transparent,transparent,#fff); position: absolute; top: 0; left: 0; } .featured svg { vertical-align: middle; margin-left: 10px; } .featured .grid { grid-gap: 0; } .featured .grid > div:nth-of-type(1) { padding-right: max(4vw,10px); } .featured .grid > div:nth-of-type(2) { border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding-left: max(4vw,10px); padding-right: max(4vw,10px); } .featured .grid > div:nth-of-type(3) { padding-left: max(4vw,10px); } .featured .btn, .featured p:last-of-type { margin: 0 } .featured .grid > div { padding-bottom: 80px } .featured p:last-of-type { position: absolute; bottom: 30px } .latest { padding: 0 10px 40px; } .latest h3 { margin-top: 40px; } .media { padding: 40px 10px; overflow: hidden } .media img { transform: rotate(-5deg); box-shadow: -3px 3px 6px rgba(0,0,0,.2); } .vision { padding: 0 10px 80px; } .vision img { transform: rotate(5deg); box-shadow: 3px 3px 6px rgba(0,0,0,.2); } .vision figure { margin: 0 } .vision blockquote { font-size: 18px; font-weight: 400; padding: 0; margin: 1em 0; border: none; } .cta { padding: 80px 10px 100px; } .cta.bgimg > img:first-of-type { object-position: 50% 30%; } fieldset { border: none; margin: 0; padding: 0 } legend { text-align: left; font-weight: bold; font-size: var(--20px); color: #246c4f } form { text-align: left; margin: 20px 0; } form .grid { grid-gap: 0 10px; } form label { display: block; } input, select, textarea, .btn, button { font-family: 'Red Hat Display', sans-serif; font-size: 16px; } input, select, textarea { background-color: #fff; margin-bottom: 10px; padding: 0 10px; border: 1px solid #eee; box-sizing: border-box; height: 50px; width: 100% } input[type=file] { margin-left: 10px; border-radius: 0; } textarea { height: 150px; padding: 15px 10px; } input[type=submit], .btn, button { display: inline-block; min-width: 110px; font-weight: 700; text-align: center; line-height: 1.6; background-color: #FFBB33; color: #403d39; padding: 10px 40px; border: none; transition: ease-out .3s; border: 1px solid #ff9a1f; border-radius: 3px } input[type=submit], .btn { margin: 10px 0; } button { margin: 5px 0 } input[type=submit] { min-width: 250px; margin: 0; } input[type=submit]:hover, .btn:hover, button:hover { cursor: pointer; background-color: #246c4f; color: #fff; border-color: #00F0A5 } input[type=checkbox] { height: auto; width: auto; display: inline-block; margin: 0 auto } .btn.flip { background-color: #246c4f; color: #fff; border-color: #00F0A5 } .btn.flip:hover { background-color: #FFBB33; border-color: #ff9a1f; color: #403d39 } footer .wrap { padding: 20px 10px; } footer a { display: block; text-decoration: none } footer .grid > div:first-of-type, .subfoot { background-color: #fff; } footer .grid > div:first-of-type, footer .grid > div:first-of-type h2, footer .grid > div:first-of-type a { color: #403d39; } footer .grid .alt { padding: 0 20px; border-radius: 10px; } .a8bmark { text-align: right; position: relative } .a8bmark a { display: inline-block } footer p.center a { color: #fff } .invis, .specific.invis { display: none; } .error { color: red; } .dtable { display: table; width: 100%; text-align: left; } .dtable > div { display: table-row; padding: 5px; } .dtable .header { font-weight: bold; } .dtable > div > div { display: table-cell; border-bottom: 1px solid #ccc; padding: 5px 10px; } .dtable .header > div:first-of-type { width: 154px; padding: 10px } .dtable > div:nth-last-of-type(n+2):hover { background-color: #f0f0f0 } .dir { text-transform: capitalize; } blockquote, .highvis { border-left: 10px solid #00F0A5; margin: 0; padding: 20px 40px; font-size: 130%; font-weight: bold } h1 + img, .full { width: 100% } #lists h2 { margin-top: 80px; padding-bottom: 0; } .hero, main, nav, footer { font-size: 1.125em } .content { padding: 40px 10px 50px; } aside { background-color: #f5f5f5; padding: 10px 10px 0; margin: 20px 0; border-radius: 10px; position: relative; overflow: hidden } aside h2 { padding: 0 10px } aside h2:last-of-type { margin-top: 40px; } aside li { border-bottom: 1px solid #ddd; } aside li:last-of-type { border: none; } aside li a { display: block; padding: 5px 10px; text-decoration: none } aside li a:hover, aside li a:focus { background-color: #FFBB33; text-decoration: none } main { background-size: contain; background-position-y: 60%; background-repeat: no-repeat; } main h1, .home h2, h2.important, .hero h2, .cta, .report h2 { font-size: 24px; } main h2, aside h2, .home h3, .hero .grid > div:last-of-type p, .report { font-size: 20px; } main h3, footer h2, .join p { font-size: 18px; } main h4 { font-size: 16px; } main ul, main ol { padding-left: 25px; } main li, aside li, footer li { margin: 10px 0; } .nolist, aside ul, footer ul { list-style: none; padding-left: 0; } .nolist li { margin: 5px 0; } .alpha { list-style-type: lower-alpha; } .alpha ul { list-style-type: disc; } .board img { object-fit: cover; width: 250px; height: 320px; } ul.meetings { padding: 0; margin: 0 0 2em; column-count: 2; column-gap: 20px; column-span: none; } h3.meetings { margin: 1em 0 0 } div[id^=details] ul.meetings { column-count: unset } .meetings li { list-style: none; column-span: none } .meetings a { display: block } .smarthub .wrap { padding: 30px 10px 40px; } .smarthub .grey { background-color: #f5f5f5; } .smarthub .features .wrap { padding: 20px 10px; } .smarthub .features p { font-weight: bold; margin-top: 0; } .smarthub .features p span { text-transform: uppercase; } .smarthub .features .grid { grid-gap: 10px } .smarthub .start .wrap { padding: 50px 10px 40px; } .smarthub .start .grid > div { background-color: rgba(255,255,255,.8); padding: 40px 20px 20px; margin-top: 50px; } .smarthub .start h3 { position: relative; } .smarthub .start h3 span { display: inline-block; width: 48px; font-size: 32px; background-color: #246c4f; color: #fff; padding: 15px; border-radius: 50px; position: absolute; top: -95px; left: 50%; transform: translateX(-50%); } .smarthub .start .btn { margin: 20px 0; } .smarthub .support { height: 400px; } .bill table { width: 100%; border-collapse: collapse; padding: 0; margin: 20px 0; } .bill table tr:nth-of-type(odd) { background-color: #eee; } .bill table tr:nth-of-type(even) { background-color: #fafafa; } .bill table td, .bill table th { padding: 10px 20px; } .docframe { display: inline-block; width: 100%; border: 1px solid #eee } .docframe embed { display: block; width: 100%; height: 250px; overflow: hidden; } .docframe { text-align: left; margin-top: 0; } .docframe span { display: block; padding: 10px; border-top: 1px solid #eee } .report { margin: 30px auto 50px; } .grid.report { grid-template-columns: 200px 1fr } .community img { max-height: 190px; display: inline-block; } .carbon-free { width: 100px; margin:0 auto 0 0;padding:20px 0} .rebate-doubled { text-align: center; font-size: var(--20px); color: #403d39; background-color: #FFBB33; padding: 15px 10px; border: 2px solid #ff9a1f; border-radius: 3px; margin-bottom: 20px; } .rebate-doubled strong { color: inherit; } @media(prefers-reduced-motion) { * { transition: all 0s !important; scroll-behavior: unset; animation: none } } @media(forced-colors:active) { .hero:before { background-color: unset } } @media(max-width:500px) { .jump { left: unset; right: 0 } } @media(max-width:62.5rem) { .back, .smarthub .grid p span { display: block } footer .grid.fourth { grid-template-columns: 1fr 1fr } } @media(max-width:47.99rem) { body .content, .featured .grid { grid-template-columns: 1fr } footer .grid.fourth { grid-template-columns: 1fr } footer .grid.fourth .alt :is(h2,li,p){text-align:center} .carbon-free{margin:0 auto} footer .grid div:nth-of-type(n+2) ul { display: flex; flex-wrap: wrap; margin: 1em -5px } footer .grid div:nth-of-type(n+2) li { flex: 1 0 100px; margin: 0 } footer .grid div:nth-of-type(n+2) a { white-space: nowrap; padding: 5px 10px; margin: 5px; background-color: #FFBB33; border-radius: 3px; color: #403d39; font-size: var(--15px); text-align: center; font-weight: bold } .featured { padding: 20px 10px } .featured .grid > div { padding: 0 !important; border: none !important } .featured p:last-of-type { position: relative; margin: 1em auto; bottom: unset } .featured h2, .featured p { text-align: center; max-width: 500px; margin-left: auto; margin-right: auto } } @media(max-width:43.75rem) { header .grid, main .grid.half, .hero .grid.half, .start .grid.third { grid-template-columns: 1fr } .smarthub .grid.fourth { grid-template-columns: 1fr 1fr } header .grid, body .hero .grid > div:first-of-type p, .hero h1 { text-align: center } nav a { margin: 5px; padding: 5px 15px } .media img, .vision img { transform: none } .media .grid > div { order: 2 } body main { background-image: none } body .home .hero { height: auto; } .hero .grid > div:last-of-type { padding: 20px 10px } .latest + .wrap { display: none } .hero h2 { text-align: center } .hero { padding: 20px 15px 30px } } @media(max-width:37.5rem) { } @media(max-width:31.25rem) { nav >.wrap>ul { display: grid; grid-template-columns: 1fr 1fr } nav > .wrap > ul>li:last-of-type:nth-of-type(odd){grid-column: 1 / -1} nav a { text-align: center } .subfoot .grid.half { grid-template-columns: 1fr } .subfoot p, .a8bmark { text-align: center; margin: .5em 0 } footer .wrap { padding: 20px 10px } .hero { height: 300px } ul.meetings { column-count: unset } } @media(max-width:25rem) { nav a, header .wrap { padding: 5px } .imgRight { float: none; margin: 0 auto; max-width: 100% } }