/* Existing styles from style.css.txt*/
body
{
    background: white url(/static/img/background_filtered.gif) 0 0 no-repeat;
    margin: 0; padding: 0;
    line-height: 1.2em;
/* font-family: Times New Roman, serif*/
    font-family: Arial, sans-serif;
}

#header
{
    margin: 0;
    padding: 0 0 2px;
    background: #4ab4ce url(/static/img/background.gif) 0 0 no-repeat;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    text-align: right;
}
#header img
{
    float: left;
    padding-top: 3px;
    padding-left: 250px;
}
#header a
{
    background: #004c78;
    border: 1px solid black;
    white-space: nowrap;
    color: #d04f4f;
    font-weight: bold;
    text-decoration: none;
}
#header a:hover
{
    background: #205880;
    color: #D45353;
}

div.clearer
{
    clear: both;
    line-height: 0;
    height: 0;
}

/* Styles for the main desktop navbar */
#navbar /* Applies to both, unfortunately, due to duplicate IDs. Need specificity. */
{
    padding: 0px 0 3px 60px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: bold;
    font-family: Ariel, sans-serif
}
#navbar a
{
    padding: 2px 8px 3px;
    border: 1px solid black;
    border-bottom: 2px solid black;
    text-decoration: none;
    background: #ddf;
    color:#5522bb;
}
#navbar a.here
{
    border-style: none;
    padding-left: 9px;
    padding-right: 9px;
    background: none;
}
#navbar a.nothere:hover
{
    background: #fda84f;
    color: #ffa;
}

#subnav
{
    border-bottom: solid #d0d0d0 1px;
    color: #3b1098;
    margin-left: 60px;
    margin-right: 10px;
    font-size: 23px;
}
#subnav a
{
    text-decoration: none;
    padding-right: 15px;
}
#subnav a:link
{
    color: #3b1098;
}
#subnav a:visited
{
    color: #3b1098;
}
#subnav a.nothere
{
    color: #d1c6e9;
}
#subnav a.nothere:visited
{
    color: #d1c6e9;
}
#subnav a.nothere:hover
{
    color: #fd7837;
}
h2, h3, h4
{
    border-bottom: solid #d0d0d0 1px;
    color: #3B1098;
}
h2
{
    margin: 0; padding: 0;
    margin-left: 60px;
    margin-right: 10px;
    font-size: 23px;
    font-weight: normal;
}

#page, #nonnavpage
{
    padding-left: 10px;
    padding-right: 10px;
}
#nonnavpage
{
    padding-top: 10px;
    border-top: solid #004c78 2px;
}

h3
{
    margin-left: 5px;
    font-size: 16px;
    font-weight: bold;
}
h3.unindented
{
    margin-left: 0;
}
h4
{
    margin-left: 12px;
    font-size: 14px;
    font-weight: bold;
}

#firstcolumnfloat
{
    float: left;
    width: 40%;
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
}
#firstcolumn
{
    margin: 15px;
    padding: 15px;
    padding-top: 0;
    border: solid #296E8B 2px;
}
#firstcolumn p
{
    font-size: 14px;
}
#firstcolumn li
{
    font-size: 14px;
}
#firstcolumn div.nestedbox
{
    padding: 8px;
    border: dashed #dd9201 1px;
}

#secondcolumn
{
    float: right;
    width: 57%;
    margin: 0;
    padding: 0;
}


#maincontent
{
    float: left;
    width: 74%;
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 13px;
}

#maincontent p, #maincontent table, #maincontent ul
{
    margin-left: 9%;
    margin-right: 9%;
}
#maincontent h3
{
    margin-left: 4%;
    margin-right: 4%;
}
#maincontent h4
{
    margin-left: 9%;
    margin-right: 6%;
}


#sidebarfloat
{
    float: right;
    width: 23%;
    margin: 0;
    padding: 0;
}
#sidebarfloat div
{
    margin: 8px;
    padding: 8px;
    padding-top: 0;
    border: solid #296E8B 3px;
    background: url(/static/img/texture5.jpg) 0 0;
    font-size: 12px;
}


a:link
{
    color:#0000dd;
    background:transparent;
    text-decoration:underline;
}
a:active
{
    color:#5500dd;
    background:transparent;
    text-decoration:underline;
}
a:visited
{
    color:#5522bb;
    background:transparent;
    text-decoration:underline;
}
a:hover
{
    color:#000099;
    background:transparent;
    text-decoration:underline;
}

span.like_link
{
    color:black;
    background:transparent;
    text-decoration:underline;
}

table.logo { font-family: Verdana, Helvetica; font-size: 17px }

div.imageleft
{
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
}
div.imageleft img
{
    padding-left: 10px;
    padding-right: 20px;
}
div.imageleft i
{
    padding-left: 10px;
    padding-right: 20px;
}

.newsentry, .pressrelease, .event, .seealso
{
    padding: 3px;
    padding-bottom: 6px;
    border-bottom: dashed #b0b0b0 1px;
    margin-bottom: 6px;
}
.seealso
{
    border-bottom: none;
}

.newsentry h4, .pressrelease h4, .event h4, .seealso h4
{
    color: #296E8B;
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    font-size: 14px;
    border-bottom: solid #d0d0d0 1px;
}

.newsentry table, .pressrelease table, .event table, .seealso table
{
    border-bottom: solid #d0d0d0 1px;
}

.newsentry .date, .pressrelease .date, .event .date, .seealso .date
{
    color: #DD9201;
    font-weight: bold;
    font-size: 13px;
    display: block;
}
.newsentry .heading
{
    color: #296E8B;
    font-weight: bold;
    font-size: 14px;
}
.pressrelease .heading
{
    color: #009060;
    font-weight: bold;
    font-size: 14px;
}
.event .heading
{
    color: #ce3b8a;
    font-weight: bold;
    font-size: 14px;
}
.seealso .heading
{
    color: black;
    font-weight: bold;
    font-size: 14px;
}
.newsentry p, .pressrelease p, .event p, .seealso p
{
    font-size: 12px;
    margin: 0;
}

#footer
{
    margin: 35px 0 0;
    background-color: #4ab4ce;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: smaller;
    clear: both;
    text-align: right;
    color: black;
}
#footer p
{
    margin: 0 80px 0 0;
    padding: 3px 0;
}

ul.bullet
{
    margin-left: 8%;
    margin-right: 8%;
}
ul.bullet li
{
    margin: 0.7em 0;
}

p.quote
{
    font-style: italic;
    font-family: Times New Roman, serif;
    padding-left: 8%;
}

div.quote
{
    border-bottom: solid #d0d0d0 1px;
}

img.textReplacement {
    display: inline-block;
}

/* --- NEW RESPONSIVE RULES --- */

/* Default (Desktop): Hide the mobile <details> menu */
details.menu {
    display: none;
}

/* Mobile Styles (screens <= 768px wide) */
@media screen and (max-width: 768px) {

    /* Hide the main desktop #navbar and #subnav */
    div#stuffBeforeFooter > div#navbar {
        display: none;
    }
    div#stuffBeforeFooter > div#subnav {
        display: none;
    }

    /* --- Mobile Navigation Styling --- */

    /* Show and position the mobile <details> menu container */
    details.menu {
        display: block;
        margin-bottom: 6px;
    }

    /* Style the summary element like a navbar item */
    details.menu summary {
        display: block;
        padding: 8px 10px;
        border: 1px solid black;
        border-bottom: 2px solid black;
        background: rgb(192, 192, 233);
        color: #4b19af;
        font-weight: bold;
        text-decoration: none;
        cursor: pointer;
        font-size: 14px;
        font-family: Arial, sans-serif;
        position: relative; /* Needed for positioning the ::after pseudo-element */
        list-style: none; /* Remove default marker */
    }
     details.menu > summary::-webkit-details-marker {
        display: none; /* Hide marker on Chrome/Safari */
     }

    /* Add a custom open/close indicator */
    details.menu summary::after {
        content: '+'; /* Indicator when closed */
        position: absolute;
        right: 15px; /* Position on the right */
        top: 50%; /* Center vertically */
        transform: translateY(-50%);
        font-weight: bold;
        font-size: 1.2em; /* Make indicator slightly larger */
    }

    /* Change indicator when details element is open */
    details.menu[open] summary::after {
        content: '-'; /* Indicator when open */
    }

    /* Style the links within the details element */
    details.menu > a {
        display: block;
        padding: 8px 10px;
        /* margin-bottom: 3px; <= REMOVED as requested */
        margin-bottom: 0; /* Links touch vertically */
        border: 1px solid black;
        border-bottom: 2px solid black;
        /* Add a top border to separate items visually since margin is gone */
        border-top: none; /* Avoid double border with summary/previous item */
        background: #ddf;
        color: #5522bb;
        font-weight: bold;
        text-decoration: none;
        font-size: 14px;
        font-family: Arial, sans-serif;
    }

/* --- Mobile Navigation Current Item Highlight --- */

details.menu > a.youarehere {
    color: #7653bd; /* Text colour is slightly lighter than other entries in the nav menu */
    cursor: default;      /* Change cursor to default */
}

/* --- Mobile Header Adjustments --- */

#header {
    text-align: right;
    padding: 4px;
}

#header img {
    float: none;
    display: block;
    padding-left: 0;
    margin: 0 auto 4px;
    max-width: 250px;
    width: 85%;
    height: auto;
}

#header a {
    /* Adjust link styles */
    float: none; /* Ensure link doesn't float */
    display: inline-block; /* Make it inline-block to fit content width */
    text-align: center; /* Center text within the link (if needed) */
    font-size: 10px;    /* Set smaller font size */
    padding: 2px 8px; /* Adjust padding for a snug fit */
    margin: 2px 0;     /* Add vertical margin */
    /* Keep other styles like background, border, color, text-decoration as needed */
    background: #004c78;
    border: 1px solid black;
    white-space: nowrap;
    color: #d04f4f;
    font-weight: bold;
    text-decoration: none;
}

/* --- Mobile Content Column Flow --- */

#firstcolumnfloat,
#secondcolumn,
#maincontent,
#sidebarfloat {
    float: none;    /* Remove the float */
    width: auto;    /* Let the width be determined by content/padding, effectively 100% of parent */
    margin-left: 0; /* Remove any specific horizontal margins if they exist */
    margin-right: 0;/* Remove any specific horizontal margins if they exist */
    padding-bottom: 15px; /* Add some bottom padding/margin for spacing when stacked */
}

/* Optional: Adjust padding/margin on inner elements if needed */
/* For example, the border containers inside might need margin adjustment */
#firstcolumn,
#sidebarfloat div {
   margin-left: 5px;  /* Example: Reduce side margins */
   margin-right: 5px; /* Example: Reduce side margins */
}

/* Ensure the clearer div doesn't take up space if float context changes */
.clearer {
    display: none; /* Hide clearer divs if they cause unwanted space */
}

/* --- Mobile Spacing Adjustments --- */

#page, #nonnavpage {
    padding-left: 5px;  /* Reduce side padding */
    padding-right: 5px; /* Reduce side padding */
}

h2 {
    margin-left: 10px;  /* Reduce large left margin */
    margin-right: 10px; /* Add a right margin for consistency */
    font-size: 20px; /* Slightly smaller H2 for mobile */
}

h3 {
     margin-left: 10px; /* Standardize H3 left margin */
     font-size: 15px; /* Slightly smaller H3 for mobile */
}
h4 {
     margin-left: 15px; /* Standardize H4 left margin */
     font-size: 13px; /* Slightly smaller H4 for mobile */
}


#maincontent p,
#maincontent table,
#maincontent ul {
    margin-left: 10px;  /* Reduce side margins */
    margin-right: 10px; /* Reduce side margins */
}

#maincontent h3 { /* Specific rule for h3 inside maincontent */
    margin-left: 10px;  /* Reduce side margins */
    margin-right: 10px; /* Reduce side margins */
}

#maincontent h4 { /* Specific rule for h4 inside maincontent */
    margin-left: 15px;  /* Reduce side margins */
    margin-right: 10px; /* Reduce side margins */
}

/* Adjust margins/padding for the previously floated column inner containers */
#firstcolumn {
    margin: 10px 5px;  /* Reduce overall margin, keep small side margin */
    padding: 10px;    /* Reduce padding */
}
#sidebarfloat div {
    margin: 10px 5px; /* Reduce overall margin, keep small side margin */
    padding: 8px;     /* Keep padding or adjust slightly */
}


ul.bullet {
    margin-left: 20px;  /* Reduce left indent */
    margin-right: 10px; /* Reduce right margin */
}
ul.bullet li {
    margin: 0.5em 0; /* Slightly reduce vertical spacing between items */
}

p.quote {
    padding-left: 15px; /* Reduce quote indent */
    margin-left: 10px;  /* Add small base margin */
    margin-right: 10px; /* Add small base margin */
}

#footer p {
    margin-right: 10px; /* Reduce large right margin */
    text-align: center; /* Center footer text on mobile */
    padding: 5px 0;   /* Adjust vertical padding */
}
#footer {
    text-align: center; /* Ensure parent alignment allows centering */
}

/* --- Mobile Image Scaling --- */

#page img { /* Target images within the main page area */
    max-width: 100%; /* Ensure image doesn't exceed container width */
    height: auto;    /* Maintain aspect ratio when width changes */
    display: block;  /* Ensure image behaves as a block for margin/centering */
    margin-left: auto; /* Help center block images if needed */
    margin-right: auto;/* Help center block images if needed */
}

/* Specific override for the logo image in the first column which has inline styles */
#firstcolumn img[src="/static/img/mediumLogo.png"] {
    width: 70%; /* Example: Set a relative width, max-width above still applies */
    max-width: 180px; /* Example: Set a maximum pixel width if needed */
    /* height: auto; is inherited from the rule above */
}

} /* End of @media query */