<style>

/* This makes all images behave on small screens */
/* This ensures images never "poke out" or get cropped */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    /* Forces the image to stay in its own 'row' space */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- SPECIFIC RULE --- */
/* Restores the side-by-side look for small thumbnails/icons */
.repo-item img,
.nav-search img,
.footer img {
    display: inline-block !important;
    margin: 0 12px 0 0 !important;
    /* Provides a gap to the right of the icon */
    vertical-align: top !important;
    /* Keeps icon aligned with the top of the text */
}

/* FullMaster CSS - Repaired 17 April */
/* 1. GLOBAL & BACKGROUND */
body {
    background: #516113 url("/images/Home_page_bckgr.jpg") no-repeat center center fixed !important;
    background-size: cover !important;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

p {
    widows: 3;
    orphans: 3;
    line-height: 1.3;
}

.wrapper {
    width: 90% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    background-color: transparent !important;
    position: relative !important;
}

/* 2. REPOSITORY MACRO CLASSES - NEW */
.repo-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 5px !important;
    padding: 5px !important;
    border-bottom: 1px solid #ccc !important;
}

.bg-prefab {
    background-color: #FFF9E3 !important;
}

/* Light Yellow */
.bg-legacy {
    background-color: #F8E1D7 !important;
}

/* Light Red-Ochre */

.repo-item img {
    margin-right: 12px !important;
    border: 1px solid #999 !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.repo-item .item-text {
    flex: 1 !important;
    min-width: 0 !important;
}

/* 3. LOGO AREA */
.logo-area {
    padding: 20px 0 0 0 !important;
    text-align: center !important;
}

.logo-area h2 {
    background-color: #f0f0f0 !important;
    color: #007FFF !important;
    font-size: 30px !important;
    font-family: "Arial Black", sans-serif !important;
    padding: 10px 40px !important;
    display: inline-block !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}

/* 4. NAVIGATION */
/* 1. The Container (The Green Bar) */

nav {
    background-color: #99ff00 !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 5px 20px !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
}

/* 2. The Tabs List */
.main-nav {
    display: flex !important;
    list-style: none !important;
    margin: 0 auto !important;
    /* This "Auto" margin centers the tabs in the remaining space */
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 3. Search Bar specific tweak */
.nav-search {
    flex-shrink: 0;
    /* This ensures the search bar stays put on the left */
}

.main-nav>li {
    display: inline-block !important;
    position: relative !important;
    margin: 0 5px !important;
}

.main-nav li a {
    display: block !important;
    background-color: #CC9933 !important;
    color: #000 !important;
    padding: 12px 25px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 22px !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3) !important;
}

.main-nav li ul.submenu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: #CC9933 !important;
    min-width: 220px !important;
    z-index: 9999 !important;
    list-style: none !important;
    padding: 0 !important;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3) !important;
}

.main-nav li:hover>ul.submenu {
    display: block !important;
}

.repo-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    /* Creates 2 columns */
    gap: 10px;
    background-color: transparent;
}

.repo-item {
    display: flex !important;
    align-items: flex-start;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Forces Headers to stretch across both columns */
.repo-head-prefab,
.repo-head-legacy {
    grid-column: span 2 !important;
    margin-top: 15px !important;
}

/* 5. CONTENT AREA */
.content-area {
    max-width: 1200px !important;
    width: 100% !important;
    background-color: white !important;
    margin: 0 auto !important;
    display: block;
    overflow: hidden;
    min-height: 400px;
    clear: both;
}

.left_side,
.right_side {
    float: left;
    width: 50%;
    min-width: 0 !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
    padding: 10px !important;
}

.left_side {
    background-color: #e8e8e8 !important;
}

.right_side {
    background-color: #f5f5f5 !important;
}

.honeycomb-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    gap: 20px !important;
    margin-top: 10px !important;
    margin-bottom: 10px;
    clear: both !important;
}

/* 6. UPDATES & FOOTER */
.updates-phrase {
    background-color: #e3bc6f !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.footer {
    background-color: #CC9966 !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    clear: both !important;
    text-align: center;
}

/* Zone Headings: Flush with items and color-matched */
.repo-head-prefab {
    background-color: #FFF9E3 !important;
    /* Match Yellow Zone */
    color: #516113 !important;
    /* Dark Green text */
    margin: 0 !important;
    /* Removes wasted space above/below */
    padding: 12px 10px 5px 10px !important;
    font-size: 1.1em !important;
    border-bottom: 2px solid #516113;
    /* Stronger separator */
    text-transform: uppercase;
}

.repo-head-legacy {
    background-color: #F8E1D7 !important;
    /* Match Ochre Zone */
    color: #8B4513 !important;
    /* Dark Brown text */
    margin: 20px 0 0 0 !important;
    /* Space only ABOVE the section */
    padding: 12px 10px 5px 10px !important;
    font-size: 1.1em !important;
    border-bottom: 2px solid #8B4513;
    /* Stronger separator */
    text-transform: uppercase;
}

/* Add this to the locked <style> area of your DWT */
.repo-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Forces 2 columns */
    gap: 10px !important;
    width: 100%;
}

/* This is the magic line that keeps headers from being squashed into one column */
.repo-head-prefab,
.repo-head-legacy {
    grid-column: span 2 !important;
    margin: 10px 0 5px 0 !important;
}

/* 1. The Invisible Spacer (Empty Box) */
.repo-spacer {
    visibility: hidden;
    /* Takes up space but is invisible */
    border: none !important;
    background: none !important;
}

/* 2. The Full-Width Box (Spans both columns) */
.repo-full-width {
    grid-column: span 2 !important;
}

/* 3. Helper to keep columns even heights */
.repo-grid {
    align-items: stretch;
}


/* 8. MOBILE RESPONSIVENESS */
@media only screen and (max-width: 768px) {

    /* Stop the iPhone side-sliding */
    html,
    body {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Force the 2-column grid to STACK into 1 column on mobile */
    .repo-grid {
        grid-template-columns: 1fr !important;
        /* Forces items to stack vertically */
        width: 100% !important;
    }

    /* Prevent items from spanning 2 columns on mobile */
    .repo-head-prefab,
    .repo-head-legacy,
    .repo-full-width {
        grid-column: span 1 !important;
    }

    /* Fix the Navbar for Mobile */
    nav {
        flex-direction: column !important;
        /* Stack Search and Tabs only on mobile */
        height: auto !important;
        padding: 10px !important;
    }

    .main-nav {
        flex-direction: column !important;
        /* Stack tabs only on mobile */
        width: 100% !important;
    }

    .main-nav li {
        width: 100% !important;
        margin: 5px 0 !important;
    }

    .main-nav li a {
        text-align: center !important;
        font-size: 18px !important;
        /* Slightly smaller for mobile screens */
    }

    .left_side,
    .right_side {
        width: 100% !important;
        flex: none !important;
        padding: 15px !important;
    }

    .repo-item {
        display: flex !important;
        flex-direction: row !important;
        /* Keeps thumbnail and text side-by-side */
        align-items: center !important;
    }

    /* Make sure the text doesn't feel cramped */
    .item-text {
        padding-left: 10px;
        font-size: 16px !important;
    }

    .item-text a {
        color: #8db600 !important;
        /* Blå färg (eller ändra till #8db600 för grön) */
        text-decoration: underline !important;
        /* Tvingar understrykning */
        font-weight: bold;
    }

    .item-text a:hover {
        color: #0056b3 !important;
        /* Mörkare färg när man för muspekaren över */
    }

    @media only screen and (max-width: 768px) {
        .repo-item {
            display: flex !important;
            flex-direction: row !important;
            /* Keeps thumbnail and text side-by-side */
            align-items: center !important;
            text-align: left !important;
        }

        .repo-item img {
            margin-right: 15px !important;
            flex-shrink: 0;
            /* Prevents the thumbnail from being squashed */
        }

        /* Make sure the text doesn't feel cramped */
        .item-text {
            padding-left: 10px;
            font-size: 16px !important;
        }

        .right_side,
        .left_side,
        .repo-grid {
            width: 100% !important;
            overflow: hidden !important;
            /* Prevents hidden wide elements from shrinking the page */
            padding: 10px !important;
            box-sizing: border-box !important;
        }

        /* Target the parent of your 3-column newspaper section */
        .newspaper-container {
            flex-direction: column !important;
        }

        /* Make each "column" take up the full phone width */
        .newspaper-container>div {
            flex: 0 0 100% !important;
            margin-bottom: 20px;
        }
    }

}

/* Ensure the Navbar stays horizontal on Desktop */
@media only screen and (min-width: 769px) {
    .main-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
    }

    /* If your 500px images are inside a div, make sure that div isn't wider than the phone */
    div {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

</style></head><body><div class="wrapper"><div class="logo-area"><h2>Saevfors Consulting</h2></div></div><nav><div class="nav-search"><form method="get" action="https://www.google.com/search" style="display: flex; margin: 0;"><input type="text" name="q" placeholder="Search site..."
style="padding: 6px 12px; border-radius: 20px 0 0 20px; border: 1px solid #ccc; width: 130px;"><input type="hidden" name="sitesearch" value="saevfors.se"><button type="submit"
style="background-color: #516113; color: white; border: none; padding: 6px 12px; border-radius: 0 20px 20px 0; cursor: pointer; font-weight: bold;"></button></form></div><ul class="main-nav"><li><a href="/index.html">Rationale</a></li>< !-- <li><a href="/web_26_contact.html">Contact 2026</a></li>--><li><a href="#">Prefab</a><ul class="submenu"><li><a href="/roof_struct.html">Roof Structures</a></li></ul></li><li><a href="/archives.html">Archives</a></li><li><a href="/articles.html">Articles</a></li></ul></nav><div class="content-area">< !-- TemplateBeginEditable name="Main content" -->< !-- TemplateEndEditable --></div><div style="clear: both; height: 1px; overflow: hidden;"></div><div class="updates-phrase"><p style="text-align: center; color: #000"><strong>Website under reconstruction - updates on a daily basis.</strong></p></div><div class="footer"><p style="margin: 0; text-align: center;  color: #000;"><strong>Friday 17 July,
2026</strong>| Copy with reference to www.saevfors.se | ingemar@saevfors.se | All rights reserved | </p></div></body></html>