img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} html {--12px:0.75rem; --13px:0.8125rem; --14px: 0.875rem; --15px: 0.9375rem; --16px: 1rem; --17px: 1.0625rem; --18px: 1.125rem; --19px: 1.1875rem; --20px: 1.25rem; --21px: 1.3125rem;--24px:1.5rem;--30px:1.875rem;--34px:2.125rem } :root { --primary: #256ba2; --primary-accent: #49bbfa; --dark: #363839; --dark-text: #aaa; --light: #ccc; --subfoot-bg: #282a2b; --subfoot-text: #909090; --black: #000; --biosketch: #317abe } *:focus-visible, input[type=submit]:focus-visible { outline-style: solid; outline-width: 2px; outline-color: #000; outline-offset: 6px; border-radius: 3px; transition: all .3s linear .01s; } .jump { text-decoration-line: underline; text-decoration-color: var(--primary-accent); text-underline-offset: 4px; position: absolute; left: 0; top: -6px; transform: translateY(-100%); width: auto; transition: all .3s linear 0s;z-index:999 } .top .jump a,.top .jump { color: #000; font-size: var(--18px); padding: 10px; background: #fff; border-width: 2px; border-color: var(--primary); border-style: none solid solid; display: block; border-radius: 0 0 15px 15px; outline-offset: 0 } .jump:focus-within { transform: translateY(0%); outline-offset: 0; } .top .jump a:focus { color: #000 } .top:focus-visible{outline-offset:-6px;border-radius:15px} footer :is(a,button):focus-visible { outline-color: var(--light); color: var(--light) } a[target="_blank"] { position: relative } a[target="_blank"] i { padding: 4px; border: 1px solid black; color: #000; background-color: #fff; text-decoration: none; position: absolute; left: 0; top: -30px; z-index: 999; width: 8.125rem; display: none; font-size: var(--12px); font-family: sans-serif; text-align: center; letter-spacing: 0 } a[target="_blank"]:hover i, a[target="_blank"]:focus i { display: block;top:-35px } a.donate[target="_blank"] i { bottom: -40px; left: unset; top: unset; right: 0 } * { scroll-behavior: smooth; } button:hover{cursor:pointer} html{scroll-padding-top:150px} body { font-family: 'PT Sans', calibri, sans-serif; background-color: #282a2b; color: #747474; line-height: 1.5; text-align: center; min-width: 320px; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, .top ul, nav ul, header ul, aside ul, main ul, main ol { padding: 0; margin: 0; } img, iframe { display: block; max-width: 100%; height: auto } a img, iframe { border: none; } a, a:focus, nav li a:is(:hover, :focus), .latest a:is(:hover, :focus) h3, nav button { text-decoration: none; color: var(--primary); transition: all .3s linear 0s; } nav button:is(:hover, :focus) { color: var(--primary) } .latest a:hover h3, featured a:focus-visible span { color: var(--primary-accent) } a, .featured a > span, .latest h3, .latest a:hover h3, footer a:focus-visible,footer button { text-decoration-color: var(--primary-accent); text-decoration-line: underline; text-underline-offset: 4px } a:hover,footer button:hover { text-decoration-thickness: 2px; } nav a, aside a { text-decoration: none } hr { border: none; border-bottom: 2px solid #eee; margin: 20px 0; } main > img { min-height: 250px; object-fit: cover; object-position: center } .center { text-align: center; } .container { background-image: url(/images-design/bg.jpg); background-size: cover; background-attachment: fixed } .wrap { max-width: 1100px; display: block; margin: 0 auto; position: relative; } .grid.content { background-color: #fff; padding: 0 20px 20px; grid-gap: 0 20px; } .pad { padding-left: 20px; padding-right: 20px } .featured a, .latest, .latest a, .comments { display: inline-block; vertical-align: top; } .grid { display: grid; grid-gap: 15px } .grid.mid { align-items: center } .grid.half { grid-template-columns: 1fr 1fr } .featured a, .latest a { text-decoration: none } .nowrap, a[href^=tel] { white-space: nowrap; } button { font-family: 'PT Sans', sans-serif; font-size:var(--16px)} .top { font-size: var(--13px); background-color: #197DB3; border-bottom: 1px solid #197DB3; padding: 0 10px } .top,.top button { font-family: 'PT Sans', sans-serif; } .top, .top li a { color: #fff; } .top a:hover, .top a:focus { color: #fff; text-decoration-color: var(--primary-accent); text-decoration-line: underline; text-underline-offset: 4px } .top .grid { grid-template-columns: 1fr 150px; padding: 10px 0 } .top a { padding: 0; display: inline; } .top li:last-of-type { text-align: right; } .top i { margin-right: 5px; } nav { width: 100%; position: sticky; top: 0; background-color: rgba(255, 255, 255, .95); box-shadow: 0 0 10px rgba(0, 0, 0, .1); z-index: 888; } nav .menu :is(a, button) { display: block; color: #333; padding: 10px 5px; margin: 5px; font-size: var(--14px); border: none; background: none; font-family: 'Roboto Slab', serif; } nav {border-bottom:1px solid #eee} nav .menu button{position:relative;padding-right:20px} nav .menu :is(a,button):focus { outline-offset: 0; border-radius: 9px } nav .menu button[aria-expanded=true]:after { transform: rotate(-135deg) } nav .menu button:after { content: ""; border-bottom: 1px solid #000; border-right: 1px solid #000; height: 6px; margin-left: 6px; width: 6px; transform: rotate(45deg); display: inline-block; position: absolute; top: 15px } nav li { position: relative; } nav ul ul { width: 210px; display: none; position: absolute; background-color: rgba(255, 255, 255, .95); border-top: 2px solid #1a80b6; box-shadow: 0 0 10px rgba(0, 0, 0, .1); border-left: 1px solid #eee; border-right: 1px solid #eee } nav ul ul li { width: 100%; border-bottom: 1px solid #eee; } nav li li a { box-sizing:border-box; padding-top: 10px; padding-bottom: 10px; } nav li li a:hover { color: #333; background-color: rgba(238, 238, 238, .5); } nav ul ul { z-index: 888; } nav ul ul ul { top: 0; left: 210px; border-top: none; } nav li:hover > ul { display: block !important; } header { background-color: #fff; border-bottom: 2px solid #eee; padding: 15px; grid-template-columns: 260px 1fr; align-items: center } nav li, header li, header a, header ul, .copy, .mark { display: inline-block; vertical-align: middle; } header a { margin: 0 auto; display: block; max-width: 300px } header li { font-size: var(--34px); color: #333; padding: 0 8px 0 12px; border-left: 2px solid #333; } header li:first-child { padding-left: 0 } header li:last-child { padding-right: 0 } header li:first-child, header li:last-child { border: none; } header .tagline { font-size: 26px; text-transform: uppercase; text-align: center; display: block; color: var(--primary); margin-top: 15px; padding: 0; } .bgimg { position: relative;} .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 } .banner.home { height: 400px;position:relative;text-align:right } .banner.home>img{object-position:33% 50%} .banner.home>div{position:relative;padding:0 20px;display:inline-block;margin:0 auto;background-color:rgba(0,0,0,.7);max-width:37%;height:100%;position:relative} .banner .offset { top: 50%; transform: translateY(-50%); position: relative } .banner.home b, .banner.home p{color:#fff;text-shadow:1px 1px 1px #000} .banner.home b{font-size:var(--24px);display:block} .banner.home p{font-size:var(--21px);margin:1em auto;max-width:600px;text-align:center} h1,h2.homefirst { font-family: 'Roboto Slab', serif; font-size: var(--18px); font-weight: normal; background-color: #f6f6f6; color: #333; margin: 0; padding: 15px clamp(10px,3vw,30px); border-bottom: 2px solid #eee } .banner.home h1{margin:0 0 20px;font-family:"PT Sans", Calibri, sans-serif;font-size:var(--24px)} .banner.home p:last-of-type{margin-bottom:0} aside li { list-style: none; } aside li a { display: block; padding: 10px 0; border-bottom: 2px solid #eee; } aside li a:hover, aside a:focus-within { color: #333; border-bottom: 2px solid #49bbfa; } aside ul ul li a { padding-left: 20px; } aside ul ul li a:hover { background-color: #fafafa; border-bottom: 2px solid #eee; } main:focus-visible { border-radius: 15px } main > img:first-of-type { width: 100% } main h1, main h2, main h3, main h4, aside h2 { font-family: 'Roboto Slab', serif; color: #333; font-weight: normal; } main h1, main h2, aside h2 { font-size: var(--18px); } main h3 { font-size: var(--16px); } main h4 { font-size: var(--14px); } .big{font-size:var(--20px)} main li { margin: 0 0 5px 20px; } .bod img { margin-top: 20px; } .grid.bod { grid-template-columns: 120px 1fr } .grid.fourth { grid-template-columns: 1fr 1fr 1fr 1fr } .nobull { margin: 15px 0; } .nobull li { list-style: none; margin: 10px 0; } a.button { font-size: var(--16px); display: inline-block; margin: 10px 0; } main ul ul { margin-top: 5px; } .grid.featured{margin:20px 0} .featured a { position: relative; padding-bottom: 30px; z-index: 1 } .featured h2 { font-size: var(--18px); margin-top: 10px; } .featured h2 i { background-color: #333;border:1px solid #333; color: #fff; padding: 8px 5px; margin-right: 10px; border-radius: 100px;width:23px;height:18px;display:inline-block } .featured a:hover h2 i, .featured a:focus h2 i { background-color: #1a80b6; } .featured p { color: #747474; } .featured a > span { display: block; text-align: left; position: absolute; bottom: 0; z-index: -1; transition: all .3s linear 0s; } .featured a:hover > span, .featured a:focus > span, .latest a:hover > h3, .latest a:focus > h3 { color: var(--black); background-color: var(--primary-accent); outline: 6px solid var(--primary-accent); border-radius: 2px; box-shadow: 4px 4px 8px #000; transition: all .3s linear 0s; } .latest { text-align: left } .latest h2, .comments h2 { font-size: var(--18px); } .latest h3 { font-size: var(--14px); display: inline-block; transition: all .3s linear 0s; } .latest p { color: #747474; margin-top: 0 } .latest img{width:100%} .latest>.grid { grid-template-columns: 1fr 1fr 1fr;} .comments figure { background-color: #eee; border-radius: 3px; font-style: italic; padding: 20px 20px 60px; position: relative; margin: 1em clamp(10px, 2vw, 20px); color: #6b6b6b; border: 1px solid #eee } .comments blockquote { margin:0 } .comments i { color: #333; margin-right: 5px; } .comments figcaption{display:block;position:absolute;bottom:20px} .comments .grid{grid-gap:0} form { margin: 20px 0; text-align: left } form input[type=text], form input[type=email], form input[type=phone], form input[type=submit], form textarea { font-family: 'PT Sans', sans-serif; font-size: var(--14px); display: block; } form input[type=text], form input[type=email], form input[type=phone], form textarea { width: 100%; box-sizing: border-box; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 2px; } form .grid input, form label { margin-bottom: 0 } form .grid { margin-bottom: 15px } form input[type=text], form input[type=email], form input[type=phone] { height: 35px; } form textarea { height: 75px; padding: 10px; } form input[type=submit], .button { background-color: #197DB3; border: 1px solid #197DB3; color: #fff; padding: 10px 50px; border-radius: 2px; } form input[type=submit]:hover, .button:hover, form input[type=submit]:focus, .button:focus { cursor: pointer; background-color: #49bbfa; color: #fff; } fieldset { margin: 0; border-radius: 2px; padding: 0 20px;border:1px solid var(--dark-text) } legend { padding: 0 8px; font-size: var(--20px) } #contact textarea { height: 150px; } footer, footer a, .copy, footer button { color: var(--dark-text); } footer { background-color: var(--dark); } footer > .wrap { padding: 20px 0 10px; } footer .grid { grid-gap: 0 15px } footer ul { padding: 0; } footer li { list-style: none; margin: 8px 0; } footer a:focus{color:#fff} footer button{border:none;background:none} footer h2 { font-family: 'Roboto Slab', serif; font-size: var(--16px); font-weight: normal; color: var(--light); } footer .links { text-align: center; border-top: 1px solid var(--dark-text); margin: 0 20px; padding-top: 10px } footer .links li { display: inline-block } .subfoot { color: var(--subfoot-text); background-color: var(--subfoot-bg); padding: 10px 0 } .subfoot .grid { grid-template-columns: 1fr 154px; } footer, .subfoot,.ccpaNotice { border-top: 1px solid #4b4c4d; } .mark a{display:inline-block} .mark img { margin: 0 auto;filter:invert(1) } .biosketch { color: var(--biosketch); font-weight: bold } h2.biosketch { margin-top: 2em; font-size: var(--21px) } @media(prefers-reduced-motion) { * { transition: all 0s !important; scroll-behavior: unset } } @media(forced-colors:active) { .mark img { filter: unset } } @media(max-width:62.5rem) { nav .menu.disclosure-nav button { display: none } nav button:after { border: none } .disclosure-nav ul { display: block !important; position: relative; width: unset; left: unset } .disclosure-nav ul li:nth-of-type(n+2) { display: none !important } nav ul ul{border:none;box-shadow:none;background:unset} nav ul ul li:first-of-type{border:none} nav .menu a{padding:5px !important} nav ul ul { display: none !important } nav .menu { padding: 5px 0 } nav a { padding: 5px 10px; margin: 5px } .container { background-image: none } header li { font-size: var(--30px) } header .tagline { font-size: var(--24px) } footer .grid.fourth { grid-template-columns: 1fr 1fr } footer .grid.fourth ul:nth-of-type(1) { order: 3 } footer .grid.fourth ul:nth-of-type(2) { order: 1 } footer .grid.fourth ul:nth-of-type(4) { order: 4 } footer .grid.fourth ul:nth-of-type(3) { order: 2 } } @media(max-width:47.99rem) { header, body .grid.content { grid-template-columns: 1fr } nav { position: relative } main{order:1} aside { order: 2 } aside > ul { text-align: left; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px } .featured.grid.fourth { grid-template-columns: 1fr 1fr } .pad, .grid.content, fieldset { padding-left: 10px; padding-right: 10px } main:focus { outline-offset: 5px; } body main > img:first-of-type { width: calc(100% + 20px); max-width: calc(100% + 20px); margin: 0 -10px } } @media(max-width:43.75rem) { .banner.home{height:auto} .banner.home > div { max-width: unset; display: block; padding: max(10vw,50px) 30px; background-color: rgba(0,0,0,.6);height:auto } .banner.home .offset { top: unset; transform: none; } } @media(max-width:37.5rem) { .grid, .grid.bod,.latest .grid { grid-template-columns: 1fr } .latest img { float: right; margin: 20px 0 0 20px; max-width: 45% } .latest a { clear: both } } @media(max-width:31.25rem) { .latest img { float: none; margin: 0 auto; max-width: 100% } .latest, .latest h2, .subfoot p, .top li, .top li:last-of-type { text-align: center } .latest p { max-width: 400px; margin: 1em auto } .subfoot .grid, .top .grid,.grid.half { grid-template-columns: 1fr } .menu { display: grid; grid-template-columns: 1fr 1fr; align-items: center } .menu li { text-align: center } .menu li:last-child:nth-of-type(odd) { grid-column: 1 / -1 } header li { font-size: 6.25vw } header .tagline { font-size: min(6.875vw,24px) } .banner.home > div { } } @media(max-width:25rem) { header li { padding: 0 4px 0 8px; } .featured.grid.fourth, footer .grid.fourth, aside > ul, form .grid.half { grid-template-columns: 1fr } footer .grid.fourth li, footer .grid.fourth h2 { text-align: center } .featured a { padding-bottom: 0 } .featured a > span { position: relative; bottom: unset } form input[type=submit] { width: 100% } nav a span{display:block} }