html {
    margin: 0;
}

:root {
    --palette-fgreen: #0e8f3f;          /* macedon flag green */
    --palette-fgreen-comp: #b4715e;     /* subtle complement to primary */
    --palette-fade: whitesmoke;         /* for terminating gradients, usually */
    --palette-bluewater: #85aac5;       /* blue water */
    --palette-teal: #009688;            /* palette refreshing teal */
    --palette-softyellow: #FFEB3B;      /* palette soft yellow */
    --palette-orange: #ffa500;          /* palette orange */

    /*--palette-green: #00796B; /* from palette green*; 
    /*--palette-netgreen: #646f35;  /* from macdontown.net green */
    /*--palette-blue: #80deea;  /* palette blue */

}

/* hide user advice about suppressed content */
.suppressed {
    display: none;
}

.standout {
    background-color: var(--palette-teal);
    border-radius: 10px;
    padding: 0.2em;
}

.department {
    font-weight: bold;
}

.sitesearch {
    font-family: 'Roboto', sans-serif;
}

.sitesearch#searchnow {
    padding: 0 .2em;
    border-radius: 20%;
}

.attn {
    text-align: center;
    padding-bottom: .5em;
    /*text-shadow: 2px 2px black;*/
    letter-spacing: 0.1em;
}

.err-attn {
    font-weight: bold;
    background-color: yellow;
}

.articleemphasis {
    font-weight: bold;
    font-size: small;
    font-family: "Inter", sans-serif;
    letter-spacing: 0.5px;
    background-color: var(--palette-orange); /* to contrast with the blue backgrounds */
    font-variant-caps: all-small-caps;

}

body {
    background: var(--palette-fade);
    /*background: linear-gradient(to bottom,
                var(--palette-fgreen) 0%,
                var(--palette-fgreen) 20%,
                var(--palette-fgreen) 20%,
                var(--palette-fade) 100%); */
    font-family: 'Roboto', sans-serif;
    margin: 0;
    min-height: 99vh;
}

#mainbody {
    width: 840px;
    /* width of .hdrback class */
    height: 99vh;
    /* entire height of viewport, so JS expansions will work */
}

#pagebody {
    width: 840px;
    height: 100%;
}

.pageheader {
    margin-top: 10px;
    font-size: x-large;
    color: var(--palette-fade);
}

/* try using this construct rather than tables */
.data-grid {
    /* extended classes need to specify 'grid' and column layout */
}

.data-grid .gridhead {
    font-weight: bold;
    color: var(--palette-bluewater);
}

.data-grid .ambulancerow {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    border: 1px dotted var(--palette-bluewater);
}

.data-grid .contactrow {
    display: grid;
    grid-template-columns: 7fr 7fr 4fr 4fr 9fr;
    border: 1px dotted var(--palette-bluewater);
}

.contactemail {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    font-family: monospace;
}

.contactemail .smaller {
    font-size: x-small;
}

.my-button {
    display: inline-block;
    padding: .5em;
    margin-bottom: .15em;
    text-decoration: none;
    border-radius: 1em;
    text-align: center;
    color:black;
}

.my-button.not-link {
    color: grey;
    font-size: smaller;
}

.my-button.tb, .TBd {
    background-color: var(--palette-bluewater);
    border-radius: 1em;
    padding: 0.2em;
}

.my-button.pb, .PBd {
    background-color: var(--palette-fgreen);
    border-radius: 1em;
    padding: 0.2em;
}

.my-button.zb, .ZBA {
    background-color: var(--palette-teal);
    border-radius: 1em;
    padding: 0.2em;
}

.my-button:hover {
    background-color: var(--palette-teal);
}

.electee {
    background-color: var(--palette-fgreen);
    padding: 0 .2em;
    border: 1px solid black;
    border-radius: 10%;
}

.depthead {
    font-weight: bold;
    font-variant: petite-caps;
}

.deptname {
    background-color: var(--palette-bluewater);
    color: black;
    padding: 0 0 0 .2em
}

.conoffice {
    overflow: hidden;
}

.conterm {

}

.conterm.expired {
    background-color: var(--palette-orange);
}

.data-grid .minutesrow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px dotted var(--palette-bluewater);
}

hr {
    height: 2px;
    background-color: grey;
}

#menu-search {
    padding-left: 3%;
    min-width: 97%;
    margin-bottom: 1em;
}

#menu-search #whatfor {
    background-color: var(--palette-orange);
}

td.column_title {
    font-weight: bold;
    text-align: center;
    font-variant: small-caps;
    border: 1px solid black;
}

td.column_subtitle {
    font-style: italic;
    text-align: center;
    border: 1px dotted black;
}

.sidebox {
    margin-left: 3%;
    padding-left: 2%;
    min-width: 95%;
    margin-bottom: 1em;
    border: 1px solid black;
    border-radius: 10px;
}

.offset {
    /* background-image: linear-gradient(to bottom, var(--palette-fgreen), var(--palette-fade)); */
    background-image: linear-gradient(to bottom,
                var(--palette-fgreen) 0px,
                var(--palette-fade) 40px,
                var(--palette-fade) 100%);
}

.diversion {
    background-image: linear-gradient(to top, var(--palette-fade), var(--palette-orange) );
}

.sidebox_title {
    font-weight: bold;
}


.gradient {
    background-image: linear-gradient(to right, red, white 80%);
}

.newstable {
    border: 0;
    margin-left: 0;
    width: 100%;
}

.newstable div.headline {
    color: #000000;
    font-weight: bold;
}

.newstable div.byline {
    display: flex;
    justify-content: space-between;
    color: var(--palette-fgreen);
    font-size: smaller;
    vertical-align: top;

}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.diminutive {
    font-size: x-small;
}

.newstable div.xnewsdetail {
    vertical-align: top;
}

.newstable div.xstory {
    background-color: var(--palette-fade);
    padding: 0.25em 0.75em;
}

.newstable div.xteaser {
    background-image: linear-gradient(to bottom, darkgrey, lightgrey);
    color: #222222;
    /* not quite so stark a black */
    padding: 0.25em 0.25em;
}

.Xexpiry {
    color: black;
    font-size: smaller;
    vertical-align: top;
    width: 20%;
}

.principal_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /*justify-content: center;*/
    /* horizontal centering */
    width: 98%;
    max-width: 900px;
    min-height: 300px;
    margin: auto;
    padding-top: 1.5em;
}

.flexbyrow {
    /* for pages where we do want some horizontal stacking */
    flex-direction: row;
}


#main_column {
    width: 70%;
}

#accy_column {
    width: 30%;
}

.main {
    flex: 2;
    width: 70%
}

.accessory {
    flex: 1;
    width: 30%;
}


.css-target {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: radial-gradient(circle, black 10%, transparent 10.5%, black 35%, transparent 35.5%);
}


#staffuse {
    position: absolute;
    /* because it is rendered inside the hdrback div */
    bottom: 10px;
    right: 12px;
    display: block;
}

#staffuse .staffmenu {
    position: absolute;
    top: 100%;
    /* submenu will descend */
    left: 0;
    display: none;
    background: white;
    border: 1px solid #ccc;
    /* padding: 10px; */
    width: max-content;
    z-index: 1000;
}

#staffuse ul {
    list-style: none;
    margin: 0 1em 0 -1em;
    padding: 0;
    float: left;
    /* width: 9em; */
    /* NOTE: For adjustable menu boxes you can comment out the above width rule.
    However, you will have to add padding in the "#menuh a" rule so that the menu boxes
    will have space on either side of the text -- try it */
}

#staffuse li {
    position: relative;
    min-height: 1px;
    vertical-align: bottom;
    margin: 0.2em;
    border-top: none;
}

#staffuse li a {
    text-align: left;
    display: block;
    color: black;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

#staffuse li a#staffroot {
    color: white;
    padding-left: 4em;
}

/* Hide 2nd level submenus when hovering over specific level. */
div#staffuse li:hover ul ul,
div#staffuse li li:hover ul ul,
div#staffuse li li li:hover ul ul,
div#staffuse li li li li:hover ul ul {
    display: none;
}

/* Show 2nd level submenus when hovering over specific level. */
div#staffuse li:hover ul,
div#staffuse li li:hover ul,
div#staffuse li li li:hover ul,
div#staffuse li li li li:hover ul {
    display: block;
}

/************************************************************************************************
************************************************************************************************/

.menuhv {
    display: flex;
    flex-direction: row;
    position: relative;
}

/* Submenu behavior for row mode (default) */
.menuhv .submenu {
    position: absolute;
    /* static or relative no worky */
    top: 100%;
    /* Moves submenus below (in horizontal mode) */
    left: 0;
    display: none;
    /* invisible for now) */
    background: #ccc;
    border: 1px solid #ccc;
    width: max-content;
    z-index: 9999 !important;
}

.menuhv li a {
    text-align: left;
    display: block;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    text-decoration: none;
}



/* menu at rest */
.menuhv li a:link,
.menuhv li a:visited {
    color: black;
}

/* menu on mouse-over  */
.menuhv li a:hover {
    background-color: black;
    color: white;
}



.menuhv ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    /* width: 9em; */
    /* NOTE: For adjustable menu boxes you can comment out the above width rule.
    However, you will have to add padding in the "#menuh a" rule so that the menu boxes
    will have space on either side of the text -- try it */
}



.menuhv li {
    position: relative;
    min-height: 1px;
    vertical-align: bottom;
    margin: 0.2em;
    border-top: 1px solid var(--palette-orange);
    padding: 0 1em;
    /* z-index:1010; */
}

.menuhv a.outsider {
    /* for external links */
    background-image: url(/assets/urarrow_f5eadb_padded_15pct.gif);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 1.2em;
}

.menuhv a.doc {
    /* for documents */
    background-image: url(/assets/document-thumb.png);
    background-color: transparent;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 1.2em;
}

/* Hide 2nd level submenus when hovering over specific level. */
div.menuhv li:hover ul ul,
div.menuhv li li:hover ul ul,
div.menuhv li li li:hover ul ul,
div.menuhv li li li li:hover ul ul {
    display: none;
}

/* Show 2nd level submenus when hovering over specific level. */
div.menuhv li:hover ul,
div.menuhv li li:hover ul,
div.menuhv li li li:hover ul,
div.menuhv li li li li:hover ul {
    display: block;
}



/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

p {
    margin-top: .5em;
}

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

h1, h2, h3, h4 {
    padding-top: 0.5em;
    padding-bottom: 0.75em;
    margin-top: 1em;
}

h4.inline {
    display:inline;
}

ol {
    padding-left: 1.5em;
    /* or 0, or match your layout needs */
    margin-left: 0;
}

table {
    border-collapse: collapse;
    text-indent: initial;
    border-spacing: 2px;
}


td {
    display: table-cell;
    vertical-align: inherit;
    unicode-bidi: isolate;
}

.caution {
    color: red;
}

ul {
    margin-left: 2em;
    margin-bottom: 1em;
}

#innerbody {
    margin: 1em 2em;
    min-height: 15em;
    /*avoid trivial sizes*/
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
}

.icon-text-container {
    display: flex;
    /* Use flexbox to align items */
    align-items: center;
    /* Vertically centers the text next to icons */
    justify-content: flex-start;
    /* Align items horizontally */
    font-size: 16pt;
}

.text-container {
    margin-left: 15px;
    /* Space between icons and text */
    font-size: 16px;
    /* Font size of the text */
}

.vmid {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.social-facebook {
    background-image: url('/pd/images/fb2.png');
    display: inline-block;
    border-radius: 50%;
    width: 25px;
    /* Set width of the clickable area */
    height: 25px;
    /* Set height of the clickable area */
    background-size: cover;
    /* Cover the entire area */
    background-position: center;
    /* Center the image */
    text-indent: -9999px;
    /* Hide text visually */
    /* overflow: hidden; */
}

xnav {
    display: flex;
    align-items: center;
    margin-left: 0em;
}

.xnav-links {
    list-style: none;
    display: flex;
}

.xnav-links li {
    margin: 0 10px;
    /* space between horizontal menu links */
}

.xnav-links a {
    text-decoration: none;
    color: white;
}

/* Image Scroll */
/* try to minimize blank gap at end */
.scroll-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
    white-space: nowrap;
    position: relative;
}

.scroll-container {
    display: flex;
    gap: 2px;
    /* added to create small intra-pic gap */
    animation: none;
    background-color: #003366;
    max-height: 300px;
    /* added when input pics are not all same width naturally */
}

/* Ensures images maintain aspect ratio */
.scroll-container img {
    height: auto;
    width: 400px;
    flex-shrink: 0;
}

.scroll-container:hover {
    animation-play-state: paused;
}

/* Hero Section */
.hero {
    padding: 20px 20px;
    background: #003366;
    /* "thin blue line" color */
    color: white;
}

.btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: white;
    color: #007bff;
    text-decoration: none;
    border-radius: 5px;
}

/* Main Content */
.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 40px 20px;
    text-align: center;
}

.clickable-area:hover {
    background-color: darkblue;
}

.hcenter {
    text-align: center;
}

.hangingindent {
    padding-left: 22px;
    text-indent: -22px;
}

footer {
    text-align: center;
    padding: 20px 20px;
    position: relative;
    margin-top: 2em;
    border-top-left-radius: 50% 20px;
    border-top-right-radius: 50% 20px;
    background-color: var(--palette-fgreen);
}

footer.pd {
    background-color: #003366;
    color: white;
}

footer a {
    color: grey;
}

.solid-square {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid black;
    border-radius: 4px;
}

/* The width will never be smaller than 40%.
It will try to be 90% on small screens.
It will never be wider than 600px
*/
.responsive-box {
    width: clamp(50%, 90%, 600px);
}

table.notused tr:nth-child(even) {
    background-color: #ccc;
    /* Light gray */
}

table.notused tr:nth-child(odd) {
    background-color: #bbb;
    /* slightly darker gray */
}

.newstable {
    border-collapse: collapse;
    margin-left: 0;
}

.newstable tbody.row-group {
    width: 100%;
    /* constant width regardless of story content */
    margin-top: .5em;
    /* small gap between bulletin entries */
    border: 2px solid black;
    /* Wraps two rows together */
    display: table;
    /* Keeps table structure intact */
}

td {
    padding: 0.2em
}

.newstable td.newsdetail {
    width: 60%;
    vertical-align: top;
}

.newstable td.expiry {
    color: black;
    font-size: smaller;
    vertical-align: top;
    width: 40%;
}

.newstable div.headline {
    color: #000000;
    font-weight: bold;
    word-wrap: break-word;
    /* Break long words */
    overflow-wrap: break-word;
    /* Ensures breaking works in all browsers */
    white-space: normal;
    /* Allows wrapping */
}

.newstable div.story {
    background-color: var(--palette-fade);
    padding: 0.25em 0.75em;
}

.hdrback {
    margin: auto;
    background-image: url('/assets/tom-text2.gif'), url('/assets/town-back-swath2.png');
    background-repeat: no-repeat, no-repeat;
    background-position: left 10% top 10%, center;
    background-size: 20% auto, cover;
    width: 100vw;
    height: 150px;
    position: relative;
}






.viewport-center {
    display: flex;
    justify-content: center;
    /* horizontal centering */
}

#globalnav {
    display: flex;
    justify-content: center;
    width: 100vw;
}

.card {
    background: #ddd;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--palette-bluewater);
    border-left: 10px solid var(--palette-bluewater);
    display: block;
    color: black;
    text-decoration: none;
}

.teaser {
    position: relative;
    background: #f0f0f0;
    border-radius: 8px;
}

.news_advice {
    font-size: 1em;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: black;
}

.news_button {
    background-color: transparent;
    border: none;
    font-size: large;
}

/* Base container */
.popup-box {
    position: relative;
    display:
        /*inline-*/
        block;
}

/* Headline */
.popup-box summary {
    position: relative;
    cursor: pointer;
    padding: 0.5em 1em;
    background-color: var(--palette-bluewater);
    color: #111;
    font-size: .75em;
    border-radius: 6px;
    min-height: 3em;
    list-style: none;
    z-index: 5;
    /* hide behind content */
}

/* Floating content box */
.popup-content {
    position: absolute;
    top: 0.1em;
    left: 2.3em;
    z-index: 10;
    /*appear over summary */
    min-width: 200px;
    max-width: 400px;
    padding: 1em;
    background: skyblue;
    border: 3px solid var(--palette-fgreen);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 6px;

    /* Animations */
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.25s ease;
    pointer-events: none;
    /* Prevent interaction while hidden */
}

/* Show only when <details> is open */
.popup-box[open] .popup-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.pagetitle {
    margin: 1em auto;
    font-weight: bold;
    color: var(--palette-fgreen);
    text-align: center;
}

.social-facebook {
    background-image: url('/pd/images/fb2.png');
    display: inline-block;
    border-radius: 50%;
    width: 25px;
    /* Set width of the clickable area */
    height: 25px;
    /* Set height of the clickable area */
    background-size: cover;
    /* Cover the entire area */
    background-position: center;
    /* Center the image */
    text-indent: -9999px;
    /* Hide text visually */
    /* overflow: hidden; */
}