/***
****    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,
section h1
{
    text-align: left;
    font-style: normal;
    font-weight: bold;
    font-size: 1.5em;
}

main > hgroup > h2
{
    text-align: center;
    font-style: italic;
}

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

h4,
section h3, 
section section h2,
section section section h1
{
    text-align: left;
    font-style: italic;
    font-weight: normal;
    font-size: 1em;
}

h5,
section h4, 
section section h3,
section section section h2,
section section section section h1
{
    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 { 
    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; }
}




/*
** 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,
header
{
    padding-bottom: 1em;
    font-style: normal;
}

#header img, header img { float: left; }

/*  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;
}

#footer,
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: #778;
    --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 article pages (ordinance[/YYYY]/ordinance_NN.html)
**
**  Index pages (top-level and previous-year) have a <main> element under the
**  <body>. Article pages have a <section> element under the <body>.
*/

/*  The aside describing what year an ordinance is from. (Used in both index
    and article 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
   article pages of the ordinance or sections in an article). 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;
}

/*  Article pages. */

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

/*  A section heading contains both a section number and a title, which are
    formatted independently, so they are epresented as a <span class="number">
    and a <span class="label">. */
    
/*  By default, in order to mimic the appearance of the printed Ordinance as
    much as possible, the body of an article page has a left margin, and section
    numbers appeat in the margin. On phone-sized screens, save the margin space
    and just put the title at the top of the section. */
    
.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;
}

.ordinance > section h3 .label,
.ordinance > section h4 .label,
.ordinance > section h5 .label
{
    float: left;
    margin-right: 5px;
}

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

.ordinance > section h2.standalone .label,
.ordinance > section h3.standalone .label,
.ordinance > section h4.standalone .label,
.ordinance > section h5.standalone .label
{
    float: none;
    margin-right: 0;
}

.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,
.ordinance p > span.label
{
    text-decoration: underline;
}

/*  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; }

/* 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,
.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;
}