/* Layout Stylesheet - Wall-to-Wall Menu Hover & Full Width Colors */
body {
    /* EDGE-TO-EDGE FIX */
    margin: 0px;
    padding: 0px;
    background: transparent url(background.gif);
    color: #333333;
    font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
    width: 20;
}

#hdr {
    height: 170px;
    width: 1600px;
    background: transparent url(WebBanner1600.png) no-repeat scroll left;
    color: #333333;
    border-width: 0;
    margin: 0px;
    padding: 0px;
}

/* --- MENU SECTION UPDATED --- */
.markermenu {
    float: left;
    border-width: 0px;

    /* Placement */
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;

    /* REMOVED PADDING HERE so the links can touch the edges */
    padding: 0px;

    /* INCREASED WIDTH to fill the whole sidebar column (matches Content margin) */
    width: 260px;
    background: #FFFAF0;
}

.markermenu li {
    list-style: none;

    /* Ensure no bullets appear */
    margin: 0;
    padding: 0;
}

.markermenu li a {
    /* BACKGROUND ARROW: Adjusted position to 30px from left to match new indent */
    background: #FFFAF0 url(arrow-list-red.gif) no-repeat 30px center;
    font: bold 17px Calibri, Verdana, Helvetica, sans-serif;
    color: #336600;
    display: block;

    /* Makes the link a "box" */
    width: 100%;

    /* Forces the box to fill the container width */
    /* PADDING MOVED HERE: 
       Top/Bottom: 10px 
       Left: 60px (pushes text over so it looks centered) */
    padding: 10px 0 10px 60px;

    /* CRITICAL: Keeps padding inside the width calculation */
    box-sizing: border-box;
    text-decoration: none;

    /* Border now spans the full width because the link spans full width */
    border-bottom: 1px solid #B5B5B5;
}

/* IE-Only Star Hack preserved */
* html .markermenu li a {
    width: 260px;
    color: #336600;
}

.markermenu li a:visited,
.markermenu li a:active {
    color: Black;
}

.markermenu li a:hover {
    color: #336600;

    /* This background color will now touch both left and right edges */
    background-color: #FFCC33;
    background-image: url(arrow-list.gif);
    background-repeat: no-repeat;
    background-position: 30px center;
}

/* --- END MENU SECTION --- */
#cont {
    /* FORCE STANDARD MATH */
    box-sizing: content-box;

    /* POSITIONING */
    margin-left: 260px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 12px;

    /* PADDING */
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px;

    /* RESPONSIVE WIDTH FIX */
    width: auto;
    max-width: 1260px;

    /* APPEARANCE */
    background: #FFFAF0;
    font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #333333;
    border: thin dashed Black;
    border-width: 0 0 0 0px;
    text-align: left;
}

P {
    color: Black;
    font: 20px/30px Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

UL {
    color: Black;
    font: 20px/30px Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
    list-style: square;
}

H1 {
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 28px;
    color: #336600;
}

H2 {
    margin-top: 60px;
    text-align: left;
    font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #336600;
    font-weight: bolder;
}

H3 {
    margin-top: 30px;
    font-style: italic;
    text-align: left;
    font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: #336600;
}

H4 {
    margin-top: 20px;
    font-variant: small-caps;
    font-weight: bold;
    text-align: left;
    font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: Black;
}

A {
    font: 20px/30px Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

A:LINK {
    color: #990000;
    font-weight: normal;
    text-decoration: underline;
}

A:VISITED {
    color: #336600;
    text-decoration: underline;
}

A:HOVER {
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
}

A:ACTIVE {
    font-style: normal;
    color: Black;
    text-decoration: none;
}

#ftr {
    /* FORCE STANDARD MATH */
    box-sizing: content-box;
    margin-left: 260px;
    margin-top: 0px;
    padding: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    height: auto;
    text-align: center;
    background: #FFCC33;
    color: #336600;

    /* RESPONSIVE WIDTH FIX */
    width: auto;
    max-width: 1340px;
    border: 0px none black;
    font: normal 14px Calibri, sans-serif;
}

/* Empty IDs reserved */
#top {
}

#1 {
}

#2 {
}

#3 {
}

#4 {
}

#5 {
}

#6 {
}

#7 {
}

#8 {
}

#9 {
}

img {
    border: 1px dashed Black;
    float: right;
    margin: 0px 0px 15px 20px;
    width: 300;
}

/* Footer Links Spacing */
#ftr a {
    margin: 0 15px;

    /* Adds 15px of space to the Left and Right of every link */
    white-space: nowrap;

    /* Keeps "Who we work with" on one line */
}

/* =========================================
   MOBILE RESPONSIVE SECTION
   (Applies only to screens smaller than 768px)
   ========================================= */
@media only screen and (max-width: 768px) {
    /* 1. Make the Body fill the screen comfortably */
    body {
        width: 100%;
        overflow-x: hidden;

        /* Prevents horizontal scrolling */
        padding: 0;
    }

    /* 2. Fix the Header/Banner */
    #hdr {
        width: 100% !important;

        /* Force it to fit the phone width */
        height: 100px;

        /* Make it shorter on phones */
        background-position: center;

        /* Keep the center of the image */
        background-size: cover;

        /* Ensure it covers the area without white space */
    }

    /* 3. Stack the Menu on top */
    .markermenu {
        float: none;

        /* Stop it from sitting to the left */
        width: 100%;

        /* Make it full width */
        margin-bottom: 0px;
        border: none !important;

        /* Ensure no dashed lines */
    }

    .markermenu li a {
        /* Center the text on mobile for easier tapping */
        padding-left: 0;
        text-align: center;
        background-position: 10px center;

        /* Move arrow closer */
    }

    /* 4. Fix the Content Box */
    #cont {
        margin-left: 0px !important;

        /* Remove the big left margin */
        width: 100% !important;

        /* Fill the screen */
        box-sizing: border-box;

        /* Ensure padding doesn't break width */
        /* Adjust padding for small screens */
        padding-left: 20px;
        padding-right: 20px;
        border: none !important;

        /* Double check: No dashed lines */
    }

    /* 5. Fix the Footer */
    #ftr {
        margin-left: 0px !important;
        width: 100% !important;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 6. Stack Footer links so they are tap-able */
    #ftr a {
        display: inline-block;
        margin: 5px 10px;
    }
}