/* 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;
}

#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;
}
/* 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;
    }
}