/***
****    Basic Styling Rules
***/

:root {
    --fonts-serif: Georgia, Times, "Times New Roman", serif;
    --fonts-sans-serif: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;
    --text-color-dark: #f0e0e0;
    --shaded-table-background: #ddd;
    --shaded-table-text: black;
    --light-shaded-table-background: #eee;
}
@media (prefers-color-scheme: dark) {
:root {
    --shaded-table-background: #4b4d58;
    --shaded-table-text: #eee;
    --light-shaded-table-background: transparent;
}
}

body,
h1,
h2,
h3,
h4
{
    font-family: var(--fonts-serif);
    color: black;
    background-color: white;
}

@media print {
    body { 
        font-size: 11pt;
        color: black !important;
        background-color: transparent !important;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        font-family: var(--fonts-sans-serif);
        line-height: 1.3;
    }
    body,
        h1,
        h2,
        h3,
        h4
    {
        color: var(--text-color-dark);
        background-color: #2A2A30;
    }
}

h1
{
    text-align: center;
    font-style: italic;
    font-weight: bold;
    font-size: 2em;
}

h2
{
    text-align: left;
    font-style: normal;
    font-weight: bold;
    font-size: 1.5em;
}

h3
{
    text-align: left;
    font-style: italic;
    font-weight: normal;
    font-size: 1.2em;
}

h4
{
    text-align: left;
    font-style: italic;
    font-weight: normal;
    font-size: 1em;
}

h5
{
    text-align: left;
    font-style: normal;
    font-weight: bold;
    font-size: 0.8em;
}


table,
th,
td
{
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: inherit;
}

img { border: 0; }

/* One-off small tables — e.g., the future meetings table on the notices page,
** or the members table on the members page.
*/
table.small-table {
    text-align: left; 
    margin : 0 0 1em 3em;
    border-spacing: 0;
    border-collapse: collapse;
}
.small-table td, .small-table th { 
    padding: 3px 12px;
}
.small-table thead,
.small-table caption { 
    background: var(--shaded-table-background);
    color: var(--shaded-table-text);
}
.small-table tbody tr {
    border-top: 1px solid;
}
.small-table tbody tr:first-child { border-top: 0; }
@media print {
    .small-table tbody tr:first-child { border-top: 1px solid; }
}

.small-table caption {
    caption-side: top;
    text-align: center;
    font-weight: bold;
    padding-bottom: 3px;
    border-bottom: 1px white solid;
}



/*
** Suppress special link processing for target <A> tags.
*/

a:any-link
{
    text-decoration: underline;
    color: #336;
}

a:hover
{
    background-color: #ddf;
    color: #00f;
}

a:active
{
    background-color: inherit;
    color: #00f;
}

@media (prefers-color-scheme: dark) {
    a:any-link
    {
        text-decoration: none;
        color: #A7ABCD; 
    }
    a:hover
    {
        background-color: #4C4C57;
        color: #818FD8;
    }
    a:active
    {
        background-color: inherit;
        color: #99A8F4;
    }
}
 
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover
{
    color: inherit;
    background-color: inherit;
}

@media print {
    a
    {
        text-decoration: none !important;
        font-weight: normal;
        color: black !important;
        background-color: inherit !important;
    }
    
    a[rel~=external][href]:after
    {
        content: " (" attr(href) ")";
        font-size: 90%;
        color: #222;
    }
}

/*** The primary page elements are:
****
****        the header, which is a horizontal bar at the top of the page that
****            contains the town logo and site title
****
****        the navigation, which contains the key site navigation links, and which
****            might be displayed as a traditional sidebar menu, as a small 
****            horizontal menu, or not at all, on different pages of the site
****
****        the content, which is the actual content of the page
****
****        the footer, which, like the header, fills the entire page width, 
****            and contains miscellaneous material not directly related to the 
****            main page content
***/

body { max-width: 960px; }

header
{
    padding-bottom: 1em;
    font-style: normal;
}

header img { float: left; }

header p
{
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 2em;
    margin: 0;
}


/*  Annotate an element with the "if_narrow" class to make it visible only on a
**  narrow (portrait-orientation phone-size) display.  Use the "if_wide" class
**  to make it visible only on a non-narrow display. This is useful for
**  cuatomizing text that refers to directional relation between elements that
**  are located differently depending on screen size.
*/
.if_narrow { display: none; }
.if_wide { display: initial; }
@media only screen and (max-width: 629px) {
    .if_narrow { display: initial; }
    .if_wide { display: none; }
}

@media only screen and (max-width: 629px) {
    body { font-size: 95%; }
    /* Don't bother showing the Town Seal icon on small screens. */
    header img { display: none; }
}

header a:link,
header a:visited,
header a:hover,
header a:active
{
    text-decoration: none;
    color: inherit;
    background-color: inherit;
}

header h1 {
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 2em;
    margin: 0;
}

body { position: relative; }

header a.skip_to_content {
  background: #EE0;
  color: black;
  font-weight: 700;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-200%);
  transition: transform 0.3s;
}

header a.skip_to_content:focus {
  transform: translateY(0%);
}

footer
{
    clear: both;
    margin-top: 0.25em;
    border-top: 1px solid;
}

footer address
{
    font: inherit;
}

footer p {
    margin-top: .5em;
    margin-bottom: .5em;
}

main > h1:first-child { margin-top: 0; }

.decisions #navigation,
.decisions nav,
.caseIndex #navigation,
.caseIndex nav.menu.site
{
    display: none;
}

.decisions #content,
.decisions main,
.caseIndex #content,
.caseIndex main
{
    padding-left: 0;
}


/*  MARK - Navigation Menus */

/*  A navigation menu is a list of links, visually presented as a menu. They are
**  used for the site navigation menu on top-level pages and for the page
**  navigation menu on the minutes index page.
**
**  Site Menu:
**
**      <nav (class="menu site")>
**          <ul class="collapsed">
**              <li><a class="toggle_menu">Site Menu</a></li>
**              <li><a>page name 1</a></li>
**              ...
**              <li><a>page name n</a></li>
**          </ul>
**      </nav>
**
**  Minutes Menu:
**
**      <nav (class="menu minutes")>
**          <ul>
**              <li><a>year range 1</a></li>
**              ...
**              <li><a>year range n</a></li>
**          </ul>
**      </nav>
**
*/

/*
**  The `menu` class defines the basic visual appearance of a navigation menu.
**  Size, positioning, and collapsibility are handled separately, below.
*/

nav {
    --cell-color: #bbc;
    --text-color: #223;
    --hover-cell: #dde;
    --hover-text: black;
    --active-cell: #667;
    --active-text: white;
    --nw-border: #eef;
    --se-border: #99a;
}

@media (prefers-color-scheme: dark) {
nav {
    --cell-color: #4E4E55;
    --text-color: #CBCBCB;
    --hover-cell: #303034;
    --hover-text: var(--text-color);
    --active-cell: #889;
    --active-text: #223;
    --nw-border: #6E6E78;
    --se-border: #5C5C64;
}
}

nav.menu ul
{
    list-style: none;
	font: bold 11px/25px var(--fonts-sans-serif);
	text-align: center;
	padding: 0;
	margin: 0;
	border: 2px solid;
	border-color: var(--nw-border) var(--se-border) var(--se-border) var(--nw-border);
	background-color: var(--cell-color);
}

nav.menu ul :any-link
{
	text-decoration: none;
	display: block;
	margin: 0;
	padding: 0;
  	border: 1px solid;
	border-color: var(--nw-border) var(--se-border) var(--se-border) var(--nw-border);
}

nav.menu ul a:any-link
{
    color: var(--text-color);
}

nav.menu ul a:hover
{
	background: var(--hover-cell);
	color: var(--hover-text);
}

nav.menu ul a:active
{
    background: var(--active-cell);
    color: var(--active-text);
    /* Swap border colors to create depressed effect. */
	border-color: var(--se-border) var(--nw-border) var(--nw-border) var(--se-border);
}

/* Special coloring for the "current page" link. */
nav.menu ul a#currentPage
{
    background: var(--active-cell);
    color: var(--active-text);
}

nav.minutes ul
{
	width: 20em;
	margin: 1em auto;
}

@media only screen and (max-width: 629px) {
    nav.menu ul li {
        font-size: 12px;
    }
}

/*  By deault, a site menu is floated as a sidebar to the left of the main
**  content and any disclaimers, which are padded on the left to make space for
**  it. However, this would be wasteful of precious screen width on a
**  portrait-orientation phone-size display, so in that case, the menu is
**  centered above the primary content instead. (See "Collapsible Menus" below
**  for the rest of the story.)
*/

nav.site
{
	width: 100px;
	float: left;
}

nav.site ~ main,
nav.site ~ article, 
nav.site ~ aside
{
    margin-left: 120px;
}

@media only screen and (max-width: 629px) {
    nav.site
    { 
        float: none;
        margin: 0 auto 1em;
    }
    nav.site ~ main,
    nav.site ~ article, 
    nav.site ~ aside
    {
        margin-left: 0;
    }
}

@media print {
    nav.site ~ main,
    nav.site ~ article, 
    nav.site ~ aside
    {
        margin-left: 0;
    }
}


/*  MARK - Collapsible site menus */

/*  On phone-size displays, site menus are centered above the main content (see
**  above), but they would still consume most of the first screen of a page.
**  Therefore, they are collapsed down to a single button by default, but can be
**  expanded by clicking on the button. (If scripting is disabled, the button is
**  a link to a standalone site menu page.) 
**
**  A collapsible menu is a navigation menu with the "collapsible" class added
**  to the <nav> element. The logic is in toggle_menu.js.
**
**  In principle, any navigation menu, or even multile menus in a page, could
**  be collapsible, but only the site menu actually uses this feature.
*/

/* By default, hide the menu button item. */
nav.menu.collapsible ul li:first-child { display: none; }

@media only screen and (max-width: 629px) {
    /* Hide collapsed menu items ... */
    nav.menu.collapsible.collapsed ul li { display: none; }
    
    /* ...except for the menu button item. */
    nav.menu.collapsible ul li:first-child { 
        display: initial;
        font-size: 135%;
    }
    
    /* Special formatting for the button item. */
    nav.menu.collapsible ul li:first-child *
    {
        background-color: black;
        color: white;
        border-color: black;
    }
    @media (prefers-color-scheme: dark) {
        nav.menu.collapsible ul li:first-child *
        {
            background-color: #414147;
            color: var(--text-color-dark);
            border-color: black;
        }
    }
}


/*  MARK - Bread Crumb Navigation */

/*  A horizontal strip near the top of a page, showing the location of the page
**  in the site hierarchy, starting with the site root and ending at the page.
**
**      <nav class="breadcrumbs">
**          <ul>
**              <li><a>site root</a></li>
**              <li><a>top level section</a></li>
**              ...
**              <li><a>current page name</a></li>
**          </ul>
**      </nav>
*/

nav.breadcrumbs {
    display: block;
    width: 100%;
}

nav.breadcrumbs ul {
    margin-left: 0;
    padding: 3px;
	background-color: var(--cell-color);
    font: bold 12px var(--fonts-sans-serif);
}

nav.breadcrumbs ul li {
    list-style: none;
    display: inline;
}

nav.breadcrumbs ul li:before {
    content: "> ";
}

nav.breadcrumbs ul li:first-child::before {
    content: "";
}

nav.breadcrumbs :any-link {
    text-decoration: none;
}

nav.breadcrumbs a:link,
nav.breadcrumbs a:active,
nav.breadcrumbs a:visited
{
    color: var(--text-color);
}

nav.breadcrumbs a:hover { 
    background-color: var(--hover-cell);
    color: var(--hover-text);
}

@media print {
    nav.menu.site,
    nav.breadcrumbs,
    nav.menu.minutes ul
    {
        display: none;
    }
    nav.menu.minutes a { font-weight: normal; }
}

/* MARK - Tabular Definition Lists */

/*  If a DL element has the "tabular" class, then it will be displayed like a
**  table, with the DT elements in the left column, bold-face, and suffixed with
**  a colon, and the DD elements in the right column (unless the browser doesn't
**  support CSS grid display or on phone-size displays, where the DD elements
**  are just indented under the DT elements).
*/

dl.tabular > dt { 
    font-weight: bold;
}

/* Indent the first line of every dd, and indent subsequent lines more, to
   distinguish multiple dd's under a single dt. */
dl.tabular > dd {
    margin-left: 4em;
    padding-left: 0;
    text-indent: -2em;
}

dl.tabular > dd li {
    text-indent: 0;
}

/* Suppress any extra spacing between sub-elements of a dd. */
dl.tabular > dd > * {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

@supports (display: grid) {
    @media only screen and (min-width: 630px) {
        dl.tabular {
            display: grid;
            grid-template-columns: auto 1fr;
            -ms-grid-columns: auto 1fr;
        }
        dl.tabular > dt::after {
            content: ": ";
        }
        dl.tabular > dt {
            grid-column: 1;
            -ms-grid-column: 1;
            justify-self: right;
            -ms-grid-column-align: right;
        }
        dl.tabular > dd {
            grid-column: 2;
            -ms-grid-column: 2;
            margin-left: 2.75em;
        }
        /* Add some spacing above every entry except the first. */
        dl.tabular > dd + dt {
            padding-top: 1ex;
        }
        dl.tabular > dd + dt + dd {
            padding-top: 1ex;
        }
    }
}


/*
**  The "disclaimer" class is applied to the disclaimer paragraph
**  at the top of some pages in the web site.
*/

aside.disclaimer
{
    margin: 0 10% 1em;
    padding: 0.5em 1em;
    background-color: var(--shaded-table-background);
    font-family: var(--fonts-sans-serif);
}

.disclaimer p
{
    margin: 0;
    padding: 0.5em;
}

.disclaimer em
{
    font-style: italic;
    font-weight: bolder;
}

.disclaimer a { 
    color: inherit;
    text-decoration: underline;
}

@media print {
    .disclaimer
    {
        border: 1px solid black;
        font: bold 85%;
        font-family: inherit;
    }
}
    
p#lastModified
{
    margin-top: 0.5em;
    font-size: 80%;
}


/* MARK - Minutes Pages */

/* The "minutes" class is applied to the body of pages that contain the minutes
** of a meeting. (It isn't used for the minutes index.)
*/

.minutes h2
{
    font: oblique large Verdana, Arial, Helvetica, Geneva, sans-serif;
    text-align: left;
    margin-right: auto;
    border-bottom: thin solid;
}

.minutes h3
{
    font: normal larger Verdana, Arial, Helvetica, Geneva, sans-serif;
    text-align: left;
}

.minutes table { width: 100%; }

.minutes table.mtgInfo,
.minutes table.motions
{
    table-layout: fixed;
    margin: 1em 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
}
.minutes #mtgInfo th,
.minutes .mtgInfo th,
.minutes .motions th
{
    width: 15%;
    font-weight: bold;
    font-size: 90%;
    text-align: right;
    border: 0;
    vertical-align: baseline;
}
.minutes #mtgInfo td,
.minutes .mtgInfo td,
.minutes .motions td
{
    width: 80%;
    padding-left: 1em;
    margin: 0;
    border: 0;
    vertical-align: baseline;
}
/* 
.minutes table.motions
{
    background-color: #ff6;
}
 */
.minutes .motions tr { 
    border-top: 3px solid white;
}

.minutes #mtgInfo ul,
.minutes .mtgInfo ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* MARK - Ordinance */

/*  The "ordinance" class is applied to the body of all pages in the ordinance
**  subdirectory. These include:
**   -  the main ordinance index page (ordinance/index.html)
**   -  previous ordinance version index pages (ordinance/YYYY/index.html)
**   -  ordinance chapter pages (ordinance[/YYYY]/ordinance_NN.html)
**
**  Index pages (top-level and previous-year) have a <main> element under the
**  <body>. Chapter pages have a <section> element under the <body>.
*/

/*  The aside describing what year an ordinance is from. (Used in both index
    and chapter pages.) */

.ordinance aside.updated
{
    margin: 0 10% 1em;
    font-weight: bold;
}

/*  <nav class="versions"> wraps a list of links to versions of the ordinance
    from prior years. (Only used in the top-level index page, ) */

.ordinance nav.versions {
    display: block;
}

.ordinance nav.versions ul {
    width: 60%;
    margin-top: 0;
    margin-left: 2em;
    padding: 3px;
}

.ordinance nav.versions ul li {
    list-style: none;
    display: inline-block;
    width: 3em;
    margin: 0;
}

.ordinance nav.versions :any-link { text-decoration: none }

/* In any ordinance page, <nav class="TOC"> wraps a table of contents (either
   chapter pages of the ordinance or sections in an chapter). The usage is
   
   <nav class="TOC">
       <table>
            <tr>
                <td>Section or subsection number</td>
                <td>Section Title</td>
            <tr>
            ...
        </table>
    </nav>
*/

.ordinance nav.TOC
{
    margin: 1em 20% 0.5em 0;
    border: solid 1px black;
    padding: 0.5em 0.5em 0.5em 1em;
    line-height: 120%;
}

@media (prefers-color-scheme: dark) {
    .ordinance nav.TOC
    {
        border-color: #888;
    }
}

.ordinance nav.TOC table
{
    border-collapse: 0;
    border-spacing: 0;
}

.ordinance nav.TOC td
{
    padding: 0.1em 0 0 0;
}

.ordinance nav.TOC td:first-child
{
    text-align: right;
    padding-right: 1em;
}

.ordinance nav.TOC a
{
    text-decoration: none;
}

.ordinance nav.TOC dl {
    display: grid;
    grid-template-columns: auto 1fr;
    -ms-grid-columns: auto 1fr;
    row-gap: 0.1em;
    column-gap: 1em;
    margin: 0;
}

.ordinance nav.TOC dl > dt {
    grid-column: 1;
    -ms-grid-column: 1;
    justify-self: right;
    -ms-grid-column-align: right;
}

.ordinance nav.TOC dl > dd {
    grid-column: 2;
    -ms-grid-column: 2;
    margin-left: 0;
}

/*  Chapter pages. */

.ordinance > section
{
    border-top: ridge 3px;
}

/*  Section Header Presentation.

    A section heading is represented by an <hN> element. The heading contains a span
    the "number" class, whose content is the section number, and, optionally, a span
    with the "label" class, whose content is the section title.
    
    In the printed ordinance, section numbers appear in the left margine. The online
    ordinance attempts to mimic the appearance of the printed ordinance as closely as
    possible, so:
    
      - The body of a chapter has an 80pixel left margin.
      - The section numbers (the header number spans) are positioned left into the
        margin.
      - The section numbers are floated so the section titles (the header label spans)
       appear next to them at the left edge of the body.
       
    (To save space on narrow phone-sized screens, the margin is omitted and the section
    number and title just go at the left edge of the body.
    
    Also, in the printed ordinance, level 1 headers (the chapter title) and level 2
    headers (the top-level sections within the chapter) appear on a line of their own,
    but subsection titles are followed by the subsection content text on the same line.
    The trick, again, is to just to float label span, which allows the subsequent text
    to move  up next to them. (For sections without a title, the floating of the section
    number lets the subsequent text move up next to the number.) 
*/
    
.ordinance > section
{
    margin-left: 80px;
}

.ordinance > section h1 .number,
.ordinance > section h2 .number,
.ordinance > section h3 .number,
.ordinance > section h4 .number,
.ordinance > section h5 .number
{
    float: left;
    margin-left: -80px;
}

@media only screen and (max-width: 629px) {
    .ordinance > section
    {
        margin-left: 0;
    }
    .ordinance > section h1 .number,
    .ordinance > section h2 .number,
    .ordinance > section h3 .number,
    .ordinance > section h4 .number,
    .ordinance > section h5 .number
    {
        float: none;
        margin-left: 0;
    }
}

@media print {
    .ordinance nav.TOC
    {
        display: block;
        border-width: 0;
    }
    .ordinance nav.TOC a,
    .ordinance nav.versions a
    {
        font-weight: normal;
    }
    .ordinance > section a { 
        text-decoration: none;
        font-weight: normal;
        color: black !important;
        background-color: transparent !important;
    }
}

/*  Styling and positioning of section and subsection titles. */

.ordinance > section h1
{
    text-align: left;
    font-size: 150%;
    font-weight: bold;
    font-style: italic;
}

.ordinance > section h2
{
    text-align: left;
    font-size: 125%;
    font-weight: bold;
    font-style: italic;
}

.ordinance > section h3
{
    text-align: left;
    font-size: 100%;
    font-weight: bold;
    font-style: normal;
}

/*  If a level 3 or higher header is immediately followed by a paragraph, then
    the paragraph text is floated up next to the header's contained label span
    (except on narrow screens).
*/

.ordinance > section :is(h3, h4, h5):has(+ p) .label
{
    float: left;
    margin-right: 5px;
}

@media only screen and (max-width: 629px) {
    .ordinance > section :is(h3, h4, h5) .label
    {
        float: none !important;
        margin-right: 0 !important;
    }
}

/*  Similarly, if a level 3 or higher header doesn't have a label span, then
    float a following paragraph up next to the number (even on narrow screens).
*/

.ordinance > section :is(h3, h4, h5):has(+ p):not(:has(.label)) .number
{
    float: left;
    margin-right: 5px;
}


.ordinance .comment 
{ 
    font-weight: normal; 
    font-style: italic;
}

.ordinance > section span.label dfn
{
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
}

.ordinance li { margin-top: 1em; }

.ordinance li > span.label
{
    text-decoration: underline;
}

/*  Omitted Headers.

    Web accessibility best practices dictate that headers shouldn't “skip levels” —
    that is, a level N header should always be a child of a level N-1 header. This
    creates a tension with our desire to have the online ordinance be a strict web
    rendering of the printed ordinance, because headers in the printed ordinance don’t
    always follow this rule. This commonly occurs two ways.
    
    1.  Many chapters have preliminary information under subsections N.0.1, N.0.2, etc.
        But N.0 is the level 1 header (the chapter title), so N.0.1 is a level 3 header
        under a level 1 header.
        
    2.  Sometimes an intermediate level just doesn’t get a header. For example, in the
        Signs chapter, section 16.4 has subsections 16.4.1.1–16.4.1.4, but there is no
        section 16.4.1.
        
    The fix for case 1 is to add a level 2 header with no number and the title
    “Prologue”. The fix for case 2 is to add the missing intermediate level header,
    with the generic title “Section <number>”.
    
    Although these fixes may improve things for screen-reader users, they would break
    fidelity with the printed ordinance for browser users. Therefore, these bonus
    headers are marked with class="omitted-header". This technique, described in
    <https://webaim.org/techniques/css/invisiblecontent/>, makes the headers invisible
    to web browsers while leaving them available to screen readers.
*/

.omitted-header
{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

/*  Figures included in the body of the ordinance are structured as
        <figure>
            <img src= alt= height= width= >
            <figcaption>Figure section.number</figcaption>
        </figure>
*/

.ordinance section figure figcaption
{
    text-align: center;
    font-weight: bold;
}
.ordinance section figure img
{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90%;
  margin: 20px auto;
}

.ordinance a.rsaref:any-link
{
    text-decoration: underline;
    color: #633;
}

.ordinance a.rsaref:hover
{
    background-color: #fdd;
    color: #f00;
}

.ordinance a.rsaref:active
{
    background-color: inherit;
    color: #633;
}

@media (prefers-color-scheme: dark) {
    .ordinance a.rsaref:any-link
    {
        text-decoration: none;
        color: #CDA7A7; 
    }
    .ordinance a.rsaref:hover
    {
        background-color: #574C4C;
        color: #D88F8F;
    }
    .ordinance a.rsaref:active
    {
        background-color: inherit;
        color: #F4A0A0;
    }
}
 
.ordinance a.glossref:any-link
{
    text-decoration: underline;
    color: #363;
}

.ordinance a.glossref:hover
{
    background-color: #dfd;
    color: #0a0;
}

.ordinance a.glossref:active
{
    background-color: inherit;
    color: #363;
}

@media (prefers-color-scheme: dark) {
    .ordinance a.glossref:any-link
    {
        text-decoration: none;
        color: #A7CDA7; 
    }
    .ordinance a.glossref:hover
    {
        background-color: #4C574C;
        color: #8FD88F;
    }
    .ordinance a.glossref:active
    {
        background-color: inherit;
        color: #A0F4A0;
    }
}
 
.ordinance footer
{
    margin-top: 1em;
    padding-top: 0 1em;
    border-top: 2px solid;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.ordinance footer ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ordinance footer li { 
    display: inline-block;
    padding: 0 0.5em; 
}

@media only screen and (max-width: 629px) {
    .ordinance footer li
    {
        display: block;
        padding: 0;
        margin: 0;
    }
}

.ordinance footer img
{
    border: 0;
    vertical-align: middle;
    padding: 0 .25em;
}

.ordinance footer a
{ 
    text-decoration: none;
}

@media print {
    .ordinance footer { display: none; }
}

.ordinance table.traffic
{
    table-layout: fixed;
    width: 100%;
    padding-left: 0;
    border-collapse: collapse;
    border: 0;
}

.ordinance table.traffic thead { border-bottom: 1px solid black; }

.ordinance table.traffic thead th:nth-child(1) { width: 40%; }
.ordinance table.traffic thead th:nth-child(2) { width: 60%; }
.ordinance table.traffic th { text-align: left; }
.ordinance table.traffic td { text-align: left; }

.ordinance table.noise_table
{
    margin: 1em auto;
    border: 0;
    border-collapse: collapse;
}
.ordinance table.noise_table th,
.ordinance table.noise_table td
{
    border: 1px solid black;
    text-align: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.ordinance table.noise_table th:first-child,
.ordinance table.noise_table td:first-child
{
    text-align: left;
}

.ordinance table#solar_permitted_uses {
    margin: 1em auto;
    border: 0;
    border-collapse: collapse;
}
.ordinance table#solar_permitted_uses th
{
    border: 1px solid #bbb;
    text-align: center;
    font-size: 85%;
}
.ordinance table#solar_permitted_uses thead tr:first-child th { font-size: 100%; }
.ordinance table#solar_permitted_uses thead tr:last-child th
{
    transform: rotate(-90deg);
    height: 8em;
    text-align: left;
}
.ordinance table#solar_permitted_uses thead th { border-width: 1px 1px 0 1px; }
.ordinance table#solar_permitted_uses tbody th
{
    border-width: 1px 0 1px 1px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: left;
}
.ordinance table#solar_permitted_uses td
{
    text-align: center;
    border: 1px solid black;
}
.ordinance table#solar_permitted_uses caption
{
    caption-side: bottom;
    text-align: left;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    margin: 1em auto 0;
}

/* MARK - Case */
/*
** Rules applying to the "cases" section of the web site.
** Index pages for the section have the "caseIndex" class, and
** individual case pages have the "case" class.
*/


.decisions h2
{
    margin-top: 1em;
    padding-top: 1em;
    border-top: 2px solid black;
}

.decisions footer
{
    margin-top: 1em;
    padding-top: 1em;
    border-top: 2px solid black;
}

.case p.more
{
    padding-top: 1em;
    margin-top: 1em;
    border-top: 1px solid black;
}

/* MARK: Miscellaneous */

/*
** To center text or images, just apply the "centered" class to the containing element.
** To center a table, enclose the table in a DIV element with the centered class.
** (This is a workaround for some browsers that don't respect the auto margin-left
** and margin-right settings on table elements.)
*/

.centered { text-align: center; }

.centered table
{
    margin-left: auto;
    margin-right: auto;
}

.centered td { text-align: left; }
.quotation { margin: 0 3em; }
.numList { list-style-type: decimal; }
.romanList { list-style-type: upper-roman; }
.alphaList { list-style-type: lower-alpha; }

.numList .alphaList {
    counter-reset: alpha-paren-item;
    list-style-type: none;
}
.numList .alphaList li:before {
    content: '' counter(alpha-paren-item, lower-alpha) ') ';
    counter-increment: alpha-paren-item;
}


nav.