/* ===================================================================
   DE OPEN CIRKEL - MAIN STYLESHEET
   Consolidated from master_style.css and allpages.css
   =================================================================== */

/* ===================================================================
   1. BASE STYLES & RESET
   =================================================================== */

body {
    background: #C9D2CD;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #333333;
    line-height: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: small;
    font-family: Arial, Helvetica, sans-serif;
}

ul {
    list-style-position: outside;
    margin: 0;
    padding: 0;
    margin-left: 35px;
}

/* ===================================================================
   2. LAYOUT - CONTAINER & STRUCTURE
   =================================================================== */

#container {
    width: 100%;
    max-width: 1040px;
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    /*min-height: 100vh;*/
}

#header {
    background: #DDDDDD;
    flex-shrink: 0;
    position: relative;
}

    #header h1 {
        margin: 0;
    }

    #header img {
        width: 100%;
        max-width: 1040px;
        height: auto;
        display: block;
    }

#sitepath {
    border-bottom: 1px solid black;
    margin-bottom: 10px;
    padding: 5px 10px;
    flex-shrink: 0;
    overflow-x: auto;
}

#content {
    display: flex;
    flex: 1;
    gap: 10px;
}

/* ===================================================================
   3. SIDEBAR 1 - NAVIGATION
   =================================================================== */

#sidebar1 {
    width: 130px;
    background: #EBEBEB;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    align-self: stretch; /* Makes sidebar stretch to match content height */
}

.menu-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1; /* Takes remaining space between menu toggle and logo */
}

.logo-container {
    margin-top: auto; /* Pushes logo to bottom */
    padding: 10px;
    background: #EBEBEB;
}

    .logo-container .logo {
        width: 120px;
        height: 81px;
        display: block;
    }

    /* ===================================================================
   4. MAIN CONTENT AREA
   =================================================================== */

#mainContent {
    flex: 1;
    padding: 20px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

    #mainContent > * {
        max-width: 100%;
        box-sizing: border-box;
    }

    #mainContent p {
        text-align: justify;
        max-width: 100%;
    }

    #mainContent h3 {
        max-width: 100%;
    }

    #mainContent table {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }

    #mainContent img {
        max-width: 100%;
        height: auto;
    }

#main .logo_div {
    display: flex;
    height: fit-content;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
}

    #main .logo_div p {
        margin: 10px auto;
        width: 70%;
    }

#main .logo {
    max-width: 100%;
    height: auto;
    background-color: #FFFFFF;
}

#main .activities p {
    font-size: 32px;
    font-weight: bold;
    font-family: `'Segoe UI';
    text-align: center;
    margin: 30px auto;
}

/* ===================================================================
   5. SIDEBAR 2
   =================================================================== */

#sidebar2 {
    width: 205px;
    background: #FFFFFF;
    padding: 20px 10px;
    flex-shrink: 0;
}

    #sidebar2 img {
        width: 100%;
        max-width: 200px;
        height: auto;
        margin-bottom: 20px;
        display: block;
    }

#mainContent.loaded {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#footer {
    padding: 10px 20px;
    background: #DDDDDD;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    flex-wrap: wrap;
    gap: 10px;
}

    #footer p {
        margin: 0;
        padding: 10px 0;
        font-family: 'Segoe UI';
        font-size: small;
        font-variant: normal;
        font-style: italic;
    }

#copyright {
    margin-top: 3px;
}

#siteseal {
    display: flex;
    align-items: center;
}

/* ===================================================================
   7. UTILITY CLASSES
   =================================================================== */

.fltrt {
    float: right;
    margin-left: 8px;
}

.fltlft {
    float: left;
    margin-right: 8px;
}

.clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0;
}

.clearfix:after {
    content: ".";
    height: 0;
    clear: both;
    visibility: hidden;
}

.auto-style1 {
    height: 278px;
}

/* ===================================================================
   8. TYPOGRAPHY
   =================================================================== */

.copy {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: black;
}

.lighter {
    color: #666666;
    margin-top: 5px;
}

.page_header {
    color: #666666;
    margin-bottom: 10px;
    font-size: 24px;
}

.page_title {
    color: #666666;
    margin-top: 3px;
    margin-bottom: 5px;
    font-size: 22px;
}

.page_subtitle {
    color: #666666;
    margin-top: 5px;
    font-size: 18px;
    max-width: 622px;
    width: 100%;
}

/* ===================================================================  
   9. SITEMAP & NAVIGATION
   =================================================================== */

.siteMapPath {
    font: 10px Segoe UI, Serif;
}

.currentNodeStyle {
    font-weight: bold;
}

.nodeStyle {
    text-decoration: none;
}

.pathSeparatorStyle {
    background-color: Yellow;
    margin: 10px;
}

.rootNodeStyle {
    text-decoration: none;
}

/* ===================================================================
   10. CONTENT ELEMENTS
   =================================================================== */

.back {
    background-color: #C9D2CD;
}

.imagespace {
    margin: 0 18px 5px 0;
}

.popup {
    text-align: left;
}

.popupbackg {
    text-align: left;
    background-color: #CCCC99;
}

.weblinks {
    margin: 5px 2px;
    padding: 2px;
    border: dashed 1px #C9D2CD;
    background-color: #E4E8E6;
}

.subheader {
    width: 100%;
    max-width: 1040px;
    background: #FFFFFF;
    margin: 0 auto;
}

/* ===================================================================
   11. LOGIN & ADMIN
   =================================================================== */

.login_status {
    position: absolute;
    top: 10px;
    right: 110px;
    width: auto;
    font: 10px Segoe UI, Serif;
    text-align: right;
}

.modify_page {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto;
    padding-right: 0;
    font: 10px Segoe UI, Serif;
    text-align: right;
}

/* ===================================================================
   12. MAP
   =================================================================== */

.map {
    top: 3px;
    left: 10px;
    right: 10px;
    height: 400px;
    max-width: 100%;
    border: #555555 2px solid;
}

.AddressField {
    margin-left: 2px;
}

.addressLabel {
    vertical-align: top;
    font-size: small;
}

/* ===================================================================
   13. BLOG COMPONENTS
   =================================================================== */

.blog_comment {
    font-size: small;
}

.blog_comment_cite {
    font-size: small;
    font-style: italic;
}

.blog_comment_disabled {
    font-size: small;
    background-color: darkgoldenrod;
}

/* Blog Container - Column Flexbox Layout */
.blog-container-flex {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

/* Blog Post Section */
.blog_post {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Blog Response Section - Flexbox Layout */
.blog-response-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.response-count-header {
    display: flex;
    align-items: center;
    width: 100%;
}

.response-count-header h3 {
    margin: 0;
}

/* Blog outline container for individual comments */
.blog_outline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fafafa;
}

.blog_comment {
    display: flex;
    flex-direction: column;
}

.blog_comment_cite {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #666;
}

/* Blog Selector Dropdown for Mobile */
.blog-selector-mobile {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
}

.blog-selector-dropdown {
    width: 100%;
    padding: 10px;
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
}

    .blog-selector-dropdown:focus {
        outline: 2px solid #4CAF50;
        border-color: #4CAF50;
    }

/* Show dropdown on smaller screens, hide sidebar repeater */
@media screen and (max-width: 768px) {
    .blog-selector-mobile {
        display: flex;
    }

    #sidebar2 {
        display: none;
    }

    .blog_entrytext {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide blog title and footer on small screens since dropdown shows the title */
    .blog_header {
        height: 17px;
        display: none !important;
    }

    .blog_footer {
        height: 17px
    }
}

/* ===================================================================
   14. CALENDAR
   =================================================================== */

.running_text {
    text-align: center;
    background: white;
    line-height: 20;
}

.narrow_column {
    width: 5px;
}

.calendar_comment {
    background-color: greenyellow;
    text-align: center;
    font-weight: bold;
}

/* ===================================================================
   15. EVENT COMPONENTS
   =================================================================== */

.event {
    font-family: 'Segoe UI';
}

.eventdate {
    float: left;
    align: top;
    border: 4px solid #b6b7bc;
    border-top: 19px solid #b6b7bc;
    width: 54px;
    height: 59px;
    text-align: center;
    font: consolas bold 8px;
    border-radius: 5px;
}

.eventdate_day {
    position: relative;
    top: -10px;
    font-family: inherit;
    font-size: 20pt;
    width: 34px;
    margin-left: 10px;
    text-align: center;
    border-bottom: 1px solid #C0C0C0;
}

.eventdate_dw {
    position: relative;
    font-family: inherit;
    top: -8px;
    font-size: 10pt;
}

.eventdate_mo {
    position: relative;
    top: -18px;
    font-family: inherit;
    font-size: 10pt;
}

.event_text {
    padding-left: 16px;
    width: 500px;
    float: left;
}

.event_title {
    font: Segoe UI;
    font-weight: 700;
    font-family: inherit;
    font-size: 14pt;
    padding-bottom: 5pt;
}

.event_data {
    font: Segoe UI;
    font-family: inherit;
    font-size: 12pt;
    line-height: 20px;
}

.event_remark {
    border-style: outset;
    border-width: thin;
    padding: 5px 5px 5px 5px;
    font-size: 10pt;
    font-style: italic;
    background-color: #E4E8E6;
}

/* ===================================================================
   16. WORKSHOP COMPONENTS
   =================================================================== */

.workshop_image {
    max-width: 100%;
    height: auto;
}

.workshop_text_1 {
    max-width: 100%;
}

.workshop_nav_link {
    max-width: 100%;
}

.workshop_main {
    max-width: 100%;
}

.workshop_place_date_table {
    width: 100%;
    overflow-x: auto;
}

.workshop_place_date_col_1 {
    width: 106px;
    text-align: left;
    vertical-align: top;
    font-weight: bold;
}

.workshop_place_date_name {
    min-width: 106px;
}

.workshop_place_date_email {
    min-width: 150px;
}

.workshop_place_date_phone {
    min-width: 100px;
}

.workshop_show_closed {
    border-style: outset;
    border-width: thin;
    text-align: center;
    font-weight: 700;
    background-color: #FFFF99;
    width: 100%;
    max-width: 187px;
}

.workshop_show_register {
    border-style: outset;
    border-width: thin;
    width: 100%;
    max-width: 187px;
    text-align: center;
    font-weight: 700;
    background-color: #FFFF99;
}

/* ===================================================================
   17. RESPONSIBLE DISCLOSURE
   =================================================================== */

.rc_header {
    border-bottom-color: rgb(238, 238, 238);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: rgb(51, 51, 51);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: normal;
    margin: 20px 0 30px 0;
    orphans: 2;
    padding-bottom: 9px;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    -webkit-text-stroke-width: 0;
    white-space: normal;
    word-spacing: 0;
}

.rc_main > p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 10px 0 10px 0;
}

.rc_footer {
    display: inline !important;
    float: none;
    background-color: rgb(255, 255, 255);
    color: rgb(66, 72, 79);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    letter-spacing: normal;
    line-height: 20px;
    orphans: 2;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    -webkit-text-stroke-width: 0;
    white-space: normal;
    word-spacing: 0;
}

.rc_main > ul {
    color: rgb(51, 51, 51);
    font-family: 'Segoe UI';
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: normal;
    margin: 0 0 10px 25px;
    orphans: 2;
    padding: 0 0 0 0;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    -webkit-text-stroke-width: 0;
    white-space: normal;
    word-spacing: 0;
}

.rc_main > ul > li {
        line-height: 20px;
    }

    /* Response Entry Form - Flexbox Layout */
.response-entry-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 620px;
    margin-top: 20px;
}

.response-header {
    width: 100%;
    margin-top:10px;
    margin-bottom:10px;
    font-weight: 500;
    font-size: 24px;
}

.response-field {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.response-field-full {
    width: 100%;
}

.response-label-group {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    flex-shrink: 0;
}

.response-input-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
    .response-field {
        flex-direction: column;
        align-items: stretch;
    }
    
    .response-label-group {
        min-width: auto;
    }
    
    .blog_comment_cite {
        flex-wrap: wrap;
    }
}

/* ===================================================================
   18. LEGACY/MISC ELEMENTS
   =================================================================== */

mso-element {
    border: none;
    border-bottom: solid #B1B1B1 1.0pt;
    padding: 0 0 3.0pt 0;
    background: white;
}

/* ===================================================================
   19. RESPONSIVE DESIGN - TABLET (max-width: 1040px)
   =================================================================== */

@media screen and (max-width: 1040px) {
    #container {
        width: 100%;
    }

    #header img {
        height: auto;
    }

    #mainContent {
        padding: 15px;
    }
}

/* ===================================================================
   20. RESPONSIVE DESIGN - SMALL TABLET/LARGE PHONE (max-width: 768px)
   =================================================================== */

@media screen and (max-width: 768px) {
    /* Layout Changes */
    #content {
        flex-direction: column;
        gap: 0;
    }

    /* Sidebar 1 */
    #sidebar1 {
        width: 100%;
        min-height: auto;
        order: 1;
        position: relative;
    }

    /* Main Content - Single Column */
    #mainContent {
        order: 2;
        padding: 15px;
        width: 100%;
        max-width: 100%;
        display: block;
    }

        #mainContent > * {
            width: 100% !important;
            max-width: 100% !important;
            display: block;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        #mainContent p {
            text-align: left;
            width: 100%;
        }

        #mainContent h3 {
            width: 100%;
        }

        #mainContent table {
            display: table;
            width: 100%;
            table-layout: auto;
        }

            #mainContent table td,
            #mainContent table th {
                display: table-cell;
                word-wrap: break-word;
            }

        #mainContent .fltrt,
        #mainContent .fltlft {
            float: none !important;
            width: 100% !important;
            margin: 10px 0 !important;
        }

        #mainContent [class*="col-"],
        #mainContent [class*="grid-"] {
            width: 100% !important;
            float: none !important;
            display: block !important;
        }

    /* Sidebar 2 */
    #sidebar2 {
        width: 100%;
        order: 3;
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        visibility: hidden;
    }

        #sidebar2 img {
            max-width: 200px;
            margin-bottom: 10px;
        }

    /* Footer */
    #footer {
        padding: 15px;
        flex-direction: column;
        text-align: center;
    }

    #copyright,
    #siteseal {
        width: 100%;
    }

    #sitepath {
        font-size: 12px;
        white-space: nowrap;
    }

    /* Utility Classes */
    .fltrt,
    .fltlft {
        float: none;
        margin: 10px auto;
        display: block;
        max-width: 100%;
    }

    .page_subtitle {
        max-width: 100%;
    }

    .login_status,
    .modify_page {
        position: static;
        display: block;
        text-align: center;
        width: 100%;
        margin: 5px 0;
    }

    .map {
        height: 300px;
        left: 0;
        right: 0;
    }

    /* Workshop Elements */
    .workshop_image,
    .workshop_text_1,
    .workshop_nav_link,
    .workshop_main {
        position: static;
        width: 100%;
        margin: 10px 0;
    }

    .workshop_place_date_table {
        display: block;
        overflow-x: auto;
    }

    /* Event & Calendar Responsive Styles */
    .calendar-item,
    .event-item,
    .event,
    [class*="cal_"],
    [class*="event_"] {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box;
    }

    .event {
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .event_text {
        width: calc(100% - 70px) !important;
        max-width: calc(100% - 70px);
        float: none;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }

    .eventdate {
        float: none;
        margin-right: 10px;
        flex-shrink: 0;
    }

    /* Calendar tables */
    .calendar-table,
    table[class*="calendar"],
    table[class*="event"] {
        width: 100%;
        display: block;
        overflow-x: auto;
    }

        .calendar-table thead,
        .calendar-table tbody,
        .calendar-table tr,
        .calendar-table td,
        .calendar-table th {
            display: block;
            width: 100%;
        }

        .calendar-table thead {
            display: none;
        }

        .calendar-table tr {
            margin-bottom: 15px;
            border: 1px solid #ddd;
            padding: 10px;
        }

        .calendar-table td {
            text-align: left;
            padding: 5px 0;
            border: none;
        }

            .calendar-table td:before {
                content: attr(data-label);
                font-weight: bold;
                display: inline-block;
                width: 100px;
            }

    /* Calendar grid layouts */
    .calendar-grid,
    [class*="grid"] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .calendar-grid > * {
            width: 100% !important;
        }
}

/* ===================================================================
   21. RESPONSIVE DESIGN - MOBILE (max-width: 480px)
   =================================================================== */

@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
    }

    #mainContent {
        padding: 10px;
    }

        #mainContent > * {
            max-width: 100% !important;
        }

        #mainContent table {
            font-size: 12px;
        }

            #mainContent table td,
            #mainContent table th {
                padding: 5px 3px;
                font-size: 12px;
            }

    #sidebar2 {
        padding: 10px;
    }

        #sidebar2 img {
            max-width: 100%;
        }

    #footer {
        padding: 10px;
        font-size: 12px;
    }

    /* Typography */
    .page_header {
        font-size: 20px;
    }

    .page_title {
        font-size: 18px;
    }

    .page_subtitle {
        font-size: 16px;
    }

    /* Menu */
    .menu-toggle {
        padding: 12px;
    }

    .menu-icon {
        width: 30px;
        height: 4px;
        margin: 6px 0;
    }

    .logo-container .logo {
        width: 120px;
        height: 81px;
    }

    /* Workshop Elements */
    .workshop_place_date_name,
    .workshop_place_date_email,
    .workshop_place_date_phone {
        display: block;
        width: 100%;
        margin: 5px 0;
    }

    /* Event & Calendar Mobile Styles */
    .calendar-item,
    .event-item,
    .event {
        font-size: 14px;
    }

    .calendar-table td:before {
        width: 80px;
        font-size: 12px;
    }

    /* Stack event date and text vertically on very small screens */
    .event {
        flex-direction: column;
    }

    .event_text {
        width: 100% !important;
        max-width: 100% !important;
        float: none;
        padding-left: 0;
        margin-top: 10px;
    }

    .eventdate {
        float: none;
        margin: 0 auto 10px auto;
    }

    .event_title {
        font-size: 12pt;
    }

    .event_data {
        font-size: 11pt;
    }
}

/* ===================================================================
   22. PRINT STYLES
   =================================================================== */

@media print {
    #sidebar1,
    #sidebar2,
    #sitepath,
    .login_status,
    .modify_page,
    .menu-toggle {
        display: none;
    }

    #container {
        width: 100%;
        max-width: none;
    }

    #mainContent {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    #footer {
        border-top: 1px solid #000;
        margin-top: 20px;
    }
}

/* Workshop WS_2020_Albrecht_Mahr Styles */
.sidebar-spacer {
    height: 50px;
}

.workshop-container {
    position: relative;
    top: -26px;
    left: 0;
    height: 1600px;
    width: 633px;
}

/* Table cell styles */
.workshop-place-cell {
    height: 29px;
}

.workshop-datetime-cell {
    height: 42px;
}

.workshop-costs-cell {
    height: 88px;
}

.workshop-cancellation-cell {
    text-align: left;
    vertical-align: top;
}

.workshop-registration-cell {
    height: 52px;
}

.workshop-register-info-cell {
    height: 73px;
}

/* ===================================================================
   FORM VALIDATION
   =================================================================== */

.validator-text {
    font-size: small;
}