@font-face { font-family: 'Lemon';
    src:url('//s3.us-east-1.amazonaws.com/woomv/css/lmn.woff') format('woff');
    font-weight:normal;font-style:normal }
html {font-size:100%;-webkit-text-size-adjust:100%;background:#000} body{margin:0}
html,button,input,select,textarea, footer {font-family:sans-serif}
#map { background:transparent;display:none;position:relative;z-index:1;perspective:600;perspective-origin:50% 50% }
polygon.mo, path.mo { stroke:#000;fill:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px }
#youarehere { fill:green }
#map .tel { display:none}
#map h1, #map h2 { text-align:center;font-size:1em;color:#163fad;user-select:none;font-family:Lemon, Helvetica;text-shadow:-1px -1px 0px #fff, 1px 1px 0px #fff, -1px 0px 0px #fff, 0px 1px 0px #fff, 1px -1px 0px #fff }
#map .vcard { padding-left:4px}
#map h1 { padding-top:20px!important}
#map h2 { font-size:.8em;text-shadow:none;color:snow }
#map .street-address a:link, #map .street-address a:visited { text-decoration:none;color:inherit}
#map ul { margin:0;padding:0 } #map li { list-style:none}
body { overscroll-behavior:none;background-image:linear-gradient(135deg, #FDD957 0%, #FCCD4D 50%, #F8B500 51%, #FBDF93 100%)}
body>header { width:100%;position:fixed;top:0;left:0;z-index:5;background-size:cover;background-image:url(//s3.us-east-1.amazonaws.com/woomv/sky.webp),linear-gradient(135deg, #FDD957 0%, #FCCD4D 50%, #F8B500 51%, #FBDF93 100%);background-position:45% 0;transition:height .4s ease-in-out;height:170px;font-family:Lemon, Helvetica, sans-serif }
body.scrolled>header { height:110px }
body>header>div { width:280px;margin:31px auto 0 auto;transition:transform .5s ease-in-out;perspective:120px;z-index:-2 }
body.scrolled>header>div { transform:scale(.45,.45) translate(95%, -140px) }
body>header object { width:280px;margin:10px auto;display:block }
body>header h1 { user-select:none;-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;text-align:left;font-size:1.5em;font-family:Lemon, Helvetica;color:#FF3434;padding-left:20px;margin:10px 0 0 0;-webkit-text-stroke:1.2px rgba(255,255,255,.8)}
body>header h2 { user-select:none;-moz-user-select:none;-webkit-user-select:none;width:calc(100%);position:absolute;top:0;text-align:center;font-size:.6em;color:#fff;line-height:1.6;margin:0;padding:140px 0 0 0;transition:padding .5s ease-in-out;-webkit-text-stroke:.1px #333 }
body.scrolled>header h2 { padding-top:80px }
body>header>div>div{transition:transform 2s ease-in-out, filter 2.5s ease-out, opacity .2s ease-out;
-webkit-transform-origin:right;font-family:Helvetica, Arial, sans-serif;transform-origin:right;opacity:0;position:absolute;top:63px;left:116px;background:#8da9f4;width:28px;height:47px}
body.open>header>div>div{opacity:1;transform:rotateY(140deg);box-shadow:-2px 2px 12px #828282}
body.open>header>div>div.big { width:40px;margin-left:-11px }
body.scrolled.open>header>div>div { transform:rotateY(140deg)}
.walkout { opacity:.8;}.walkout .tel, .walkout span[itemprop=openinghours] { display:none }
.flag {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background:#003f87;
   color:#fff
}

nav { margin:0 0 5px 0;padding:8px 0;width:100%;;position:relative;height:33px;overflow:hidden;user-select:none;-moz-user-select:none;-webkit-user-select:none;
    background:linear-gradient(to top, rgba(30,87,153,1) 0%,rgba(125,105,252,1) 100%);
}
#addiv,#addiv img, #addiv1, #addiv2 { width:100%;position:-webkit-sticky;position:sticky;display:block;top:0px;z-index:10}
nav input { display:none } 
nav label { border-radius:4px;padding:2px;margin:0 1px;color:#fff;font-weight:bold;font-size:.5em;
    text-align:center;-moz-user-select:none;-webkit-user-select:none;user-select:none;display:inline-block;cursor:pointer;transition:background .1s ease-in;vertical-align:top }
nav label:last-of-type { margin-right:0}
nav label big { font-size:1.5em }
.labelicon { line-height:1.6;width:18px;height:18px;border-radius:3px;margin-right:6px;color:#fff;font-size:.8em;text-align:center;background:maroon;display:inline-block;font-family:sans-serif}
#side { width:100%;position:relative;background:snow;line-height:1.5;margin:170px 0 0 0;border-bottom:3px solid #fff }
#side>header { width:100%;position:sticky;position:-webkit-sticky;;display:block;top:110px;z-index:10 }
#side .vcard { width:95%;border-bottom:1px solid #ccc;padding-top:10px;text-align:left;font-weight:bold;margin:0 auto }
span[itemprop=openinghours] { color:#666;font-size:1em;font-weight:bold;white-space:nowrap }
.org { font-family:Lemon, Helvetica;color:#6D6D6D;margin-right:10px }
.Aquinnah{color:brown;fill:brown} .Chilmark{color:#9c5213;fill:#9c5213} .OakBluffs{color:#b40a0a;fill:#b40a0a}
.Edgartown{color:purple;fill:purple} .VineyardHaven{color:#015F8C;fill:#015F8C} .WestTisbury{color:#3b5e5b;fill:#3b5e5b}
div.Aquinnah{background:brown} div.Chilmark{background:#9c5213} div.OakBluffs{background:#b40a0a}
div.Edgartown{background:purple} div.VineyardHaven{background:#015F8C} div.WestTisbury{background:#3b5e5b}
nav>label { display:inline-block;min-height:27px;display:inline-flex;flex-direction: column}
nav>label .break { display:block;height:0}
nav.date>label { display:none!important}
nav.date>#datebutton { display:inline-block!important}
nav.date #datesearch { display:block }
nav input:checked + label { box-shadow:1px 1px 1px #000 }
nav input:checked + label[for="Aquinnah"], .Aquinnah>div{ background-color:brown }
nav input:checked + label[for="Chilmark"], .Chilmark>div { background-color:#9c5213}
nav input:checked + label[for="OakBluffs"], .OakBluffs>div { background-color:#b40a0a }
nav input:checked + label[for="Edgartown"], .Edgartown>div { background-color:purple }
nav input:checked + label[for="VineyardHaven"], .VineyardHaven>div { background-color:#015F8C }
nav input:checked + label[for="WestTisbury"], .WestTisbury>div { background-color:#3b5e5b }
#datebutton { box-shadow:1px 1px 1px #000;padding:0;min-width:35px;border:1px solid #fff;background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 100%);color:rgba(30,87,153,1);padding:0 0 3px 0;float:right;margin-right:5px }
#daikon { border-radius:2px;display:inline-block;width:15px;height:16px;line-height:2.3;border:2px solid #666;background:linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,0) 35%, rgba(255,255,255,0) 100%);color:rgba(30,87,153,1);font-size:.6em;text-align:center;font-family:Arial, Helvetica, sans-serif;color:#666;margin-right:7px }
#side>footer svg, #side>footer img { width:18px;margin-right:6px;margin-bottom:-4px }
#datebutton big { color:#fff }
#graphbutton { display:none;background:none;border:0;padding:0;color:#fff;outline:none;-webkit-appearance:none }
#datesearch { display:none;position:absolute;top:6px;pointer-events:all;text-align:center;z-index:10;border-radius:5px;font-size:1.3em;height:30px;text-align:center;width:170px;left:95px;border:0 }
#graph { display:none }
#side>span a[itemprop="url"]:link{color:#999;transition:color .2s ease-in-out;text-decoration:none;border-bottom:1px dotted #ccc}
#side>span a[itemprop="url"]:hover{color:#000}
#side>span a[itemprop="url"]:visited{color:#999;text-decoration:none;border-bottom:1px dotted #ccc}
.tel {box-shadow:1px 1px 1px #000;font-weight:300;font-size:1.2em;font-family:Helvetica,Arial;float:right;border-radius:5px;padding:3px 6px;font-weight:bold;margin:0 0 0 10px;background:linear-gradient(to bottom, #13910a 0%, #1e7735 100%);text-shadow:rgba(0,0,0,0.2) -1px 0, rgba(0,0,0,0.2) 0 -1px,rgba(0,0,0,0.2) -1px -1px, 
    rgba(255,255,255,0.2) 1px 0, rgba(255,255,255,0.2) 0 1px,rgba(255,255,255,0.2) 1px 1px;
}
.disabled { width:134px;text-align:center;background:#739779;color:#fff;cursor:not-allowed}
section.menusection { display:none }
section.menusection:first-of-type { display:block }
.menusection h1 { color:#f40;font-family:Lemon }
.menusection p { text-align:center;font-size:.8em }
#side>span nav a { margin:1px 8px;display:inline-block;font-family:Lemon;transition:color .3s ease-in}
#side>span nav a:link, #side>span nav a:visited { color:maroon;white-space:nowrap;text-decoration:none;border-bottom:0}
#side>span nav a.sel:link, #side>span nav a.sel:visited { color:red } 
#side table, #side div img { width:100% }
td { text-align:right;border-top:1px solid #ccc }
td[colspan="2"] { text-align:left;font-style:italic;font-size:.8em;font-weight:normal;border-top:0 ;color:#888}
td[colspan="2"] span { font-weight:bold}
th { color:#888;font-weight:normal;border-top:1px solid #ccc }
#side section h1 { font-size:1em }
.tel a:link{color:#fff;text-decoration:none;border:0;outline:none}
.tel a:visited{color:#fffafa;text-decoration:none;border:0}
#side .vcard footer {font-size:0.7em;display:block;float:right;text-align:right;clear:both;line-height:1.5;margin-top:9px}
.memo { color:tomato;font-style:italic;font-size:.9em}
.geo,.country-name,.region,.postal-code{display:none}
.adr{font-size:0.8em;margin:4px 0 5px 0;color:#9b9b9b;overflow:hidden}
svg.ico { cursor:pointer;float:right;margin:0 11px;width:15px }
svg.ico:focus,svg.ico:focus-visible,svg.ico *:focus,svg.ico *:focus-visible {outline:none}
svg.dog { width:20px}
svg.ico path { fill:#ccc;transition:fill .2s ease-in }
svg.ico:hover path { fill:red }
svg.report:hover path, .adr svg.map:hover path { fill:orange }
svg.map { width:13px}
svg.report { width:18px}
.faved svg.ico:first-of-type path { fill:red }
.faved svg.map path { fill:#ccc }
.ext { margin:0;float:none;width:12px }
#count { color:#fff;margin-top:10px;display:block;text-shadow:-1px -1px 0px #0060A5;font-size:1.5em;text-align:center}
#count { transform:scale(-1,1);font-weight:bold }
#side>footer { overflow:hidden;width:100%;text-align:center;font-size:.9em;font-weight:bold;color:#999;line-height:2;opacity:0;transition:opacity .3s ease-in 2s}
body.open #side>footer {opacity:1}
#side>footer>p { margin-left:10px;width:100%;color:#555;text-align:left;line-height:2}
footer a:link, footer a:visited{ color:#f60;text-decoration:none;pointer-events:all;transition:color .2s ease-in }
footer a:hover, footer a:active{ color:#00acee;text-decoration:none;pointer-events:all}
#lozenge{display:inline-block;width:60px;height:24px;cursor:pointer;vertical-align:middle}
#lozenge svg { height:24px!important;width:60px!important}
html[data-theme="light"] #cover{cx:45}
html[data-theme="dark"]  #cover{cx:15}
#togglelabel{margin-left:.5em;vertical-align:middle}
.centerline{display:block;text-align:center;margin-top:12px;cursor:pointer}
.saved-marker { cursor:pointer }

@media only screen and (min-width:380px) {
    body>header h2 { font-size:.8em }
    nav label { margin:0 3px;padding:2px 4px } { margin:0 3px;padding:2px 4px }
    body.scrolled>header>div { transform:scale(.5,.5) translate(105%, -110px) }
    #datesearch { top:8px;height:30px;font-size:1.5em }
    #side>footer{font-size:1em}
    #datebutton { min-width:42px;margin-right:10px}
}
@media only screen and (min-width:410px) {
    body>header h2 { font-size:.9em }
    nav label { margin:0 5px} 
    #datesearch { width:200px;left:69px; }
}
@media only screen and (min-width:768px) {
    body>header h1 { -webkit-text-stroke:.2px rgba(255,255,255,.8)}
    nav>label { min-height:42px}
    body.scrolled>header { height:inherit }
    body.scrolled>header>div { transform:none }
    body.scrolled>header h2 { padding-top:inherit }
    nav { background:linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(125,105,252,1) 100%)}
    .disabled { width:153px}
    #deskhead, #deskhead * { pointer-events:none;z-index:1}
    #deskhead button { pointer-events:all;z-index:2!important}
    #svgmap, #graph {width:calc(100% - 600px);position:fixed;top:180px;left:90px }
    #graph { top:0px;left:0;height:100vh;z-index:3;overflow-y:scroll;overflow-x:hidden }
    #map h1, #map h2,#map .org { color:snow;text-align:left;text-shadow:none }
    #map h1, #map h2 { color:#ffc300}
    #map { height:100%;background:transparent;display:block;width:calc(100% - 600px)!important;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.5) transparent }
    polygon.mo, path.mo { stroke:transparent;fill:rgba(255,255,255,.2) }
    #map::-webkit-scrollbar {
  width: 12px; /* Adjust width as needed */
}
    #map::-webkit-scrollbar-track {
  background: transparent; /* Transparent track */
}
    #map:::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent thumb */
  border-radius: 6px; /* Rounded corners */
  border: 3px solid transparent; /* Spacer */
}

    #map blockquote { width:100%!important} #map a:link { color:orange!important}
    .graph #map { display:none }
    .graph #graph { display:block }
    #graph>div { width:42px;height:500px;vertical-align:bottom;display:table-cell;margin-left:3px;border:1px solid rgba(255,255,255,.6);position:relative;transition:width .3s ease-out;pointer-events:all }
    #graph>div:hover { width:205px;border:1px solid rgba(255,255,255,.8) }
    #graph>div>div { width:42px;overflow:hidden;white-space:nowrap;font-size:.6em;color:#fff }
    #graph>div:hover>div { width:205px }
    #graph>div>div>div>div { width:42px;opacity:0;padding:1px 0;transition:opacity .2s ease-out;white-space:nowrap;transition:font-size .2s ease-in-out}
    #graph>div:hover>div>div>div { width:205px;}
    #graph>div:hover>div>div>div:hover { font-size:2em}
    #graph>div:hover>div>div>div { opacity:1;cursor:default }
    #graph>div>time { position:absolute;display:block;width:100%;text-align:center;top:0;left:0;font-size:1.7em;transition:font-size .3s ease-out;pointer-events:none}
    #graph>div:hover>time { font-size:3.7em}
    #graph>div>div>div { height:10px;width:100%;transition:height .2s ease-in-out }
    #graph>div>div>div:hover { height:20px }
    html { background:transparent}
    body { background-size:133% auto;
        background:#000 url(//s3.us-east-1.amazonaws.com/woomv/sunsetboat.webp);
        overflow-x:hidden;
        background-attachment:fixed;background-position:-111px -89px;
        background-repeat:no-repeat}
    body>header { position:fixed;transition:none;width:calc(100% - 480px);text-align:left;background-image:none }
    body>header>div { transition:none;float:left;width:254px;margin:0 }
    body>header>div>div { left:160px;top:83px;height:46px }
    body>header object { width:366px;height:176px;margin:0 }
    body>header h1, body>header h2{ position:relative;font-size:1.2em;text-align:center;margin-top:1.1em }
    body>header h2 { font-size:1em;padding:0;margin-top:.8em }
    nav { height:52px;border-bottom-left-radius:5px;text-align:left;padding:10px 15px 10px 5px }
    nav label { box-shadow:none!important;padding:3px 5px;margin:2px 1px;font-size:.6em;transition:background .1s ease-in }
    nav label big { font-size:2em }
    #datebutton { opacity:.6;transition:opacity .2s ease-in-out;min-width:55px;padding-top:3px}
    #datebutton:hover { opacity:1}
    #graphbuttoNn { position:absolute;bottom:-65px;right:34px;display:block;font-size:2em;opacity:.8;transition:opacity .2s ease-in-out }
    #graphbuttoNn:hover { opacity:1}
    #datesearch { font-size:2em;top:13px;width:250px;padding:5px;left:70px;height:39px;border:0}
    #side { float:right;width:443px;padding:0 0 10px 36px;min-height:860px;margin:0;background:url(//s3.us-east-1.amazonaws.com/woomv/spiral.webp) repeat-y,linear-gradient(to right, transparent 8px, rgb(255,255,255) 11px,rgb(255,255,255) 100%);background-size:30px,100%;box-shadow:15px 3px 10px #632E00;border-bottom:0}
    #side>header { top:0;box-shadow:1px 1px 5px #666;border-bottom-left-radius:5px}
    #side>footer { font-size:1em;margin-top:20px }
    #side .vcard { width:100% }
    .tel { font-size:1.4em;margin:0 5px }
    .tel:hover { box-shadow:1px 1px 10px orange }
}
@media only screen and (min-width:1024px) and (orientation:landscape) {
    #side>footer>p { background:#fff;border-radius:5px;border:1px solid #ccc;padding:10px 0 10px 12px;
        box-shadow:1px 1px 1px #000}
    body>header h1, body>header h2 { text-align:right;margin-top:1.9em }
    body>header h2 { margin-top:1em}
    body>header>div { margin:31px auto 0 auto }
}
@media only screen and (min-width:1280px) {
    body>header h1, body>header h2{ font-size:2.8em;text-align:center;margin-top:.8em }
    body>header h2 { font-size:1.1em;margin-top:.4em }
}
@media (prefers-color-scheme:dark){
    html[data-theme="auto"] #side, html[data-theme="dark"] #side {background:#000}
    html[data-theme="light"] #side {background:snow}
    html[data-theme="auto"] .org, html[data-theme="dark"] .org {color:#fff}
    
    html[data-theme="auto"] nav, html[data-theme="dark"] nav {background:#000}
    html[data-theme="light"] nav {background:linear-gradient(to top, rgba(30,87,153,1) 0%,rgba(125,105,252,1) 100%)}
    
    html[data-theme="auto"] #daikon, html[data-theme="dark"] #daikon { background:linear-gradient(to bottom, rgba(255,255,255,.3) 0%, rgba(255,255,255,.3) 35%, rgba(0,0,0,0) 35%, rgba(255,255,255,0) 100%);color:rgba(30,87,153,1)}
    html[data-theme="auto"] .tel, html[data-theme="dark"] .tel { background:linear-gradient(to bottom, #666 0%, #333 100%)}
    html[data-theme="light"] .tel { background:linear-gradient(to bottom, #0BA500 0%, #0BA533 100%)}
    html[data-theme="light"] #daikon { background:linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,0) 35%, rgba(255,255,255,0) 100%)}
}
@media (prefers-color-scheme:dark) and (min-width:768px){ 
    html[data-theme="auto"] #side, html[data-theme="dark"] #side { background:url(//s3.us-east-1.amazonaws.com/woomv/spiral.webp) repeat-y,linear-gradient(to right, transparent 8px, rgb(0,0,0) 11px,rgb(0,0,0) 100%);background-size:30px, 100%}
    html[data-theme="light"] #side {background:url(//s3.us-east-1.amazonaws.com/woomv/spiral.webp) repeat-y,linear-gradient(to right, transparent 8px, rgb(255,255,255) 11px,rgb(255,255,255) 100%);background-size:30px, 100%}
}
