/* This is an excellent base 2-column layout with a header and footer that is anchored on the left.
 *
 * There are some restrictions to the layout; it isn't made to be "centered" on screen. Meant for top-left anchored layouts.
 *
 * Our Layout Requirements:
 * 1. Top-Left anchored or centered layouts.
 * 2. Ability to have the main layout nicely "scoot down" if there is a "menu" added in above it.
 * 3. Two-column layout.
 * 4. Ability to have full-height left nav backgrounds.
 * 5. Ability to use background images for the left nav, either for the whole thing, or combo "image + bg fill".
 * 6. No floats in the template.
 * 7. Header and footer.
 * 8. Ability to have background image for the entire page and have it show up seamlessly under each block in the layout.
 * 9. Highly Compatible: Safari, Firefox, IE 6, IE 5/5.5 (untested), Opera (Untested).
 * 10. It uses no floats, allowing use of floats inside your templates that don't break in IE.
 * 11. Full-height background for content area should its content not be tall enough to extend past the left nav.
 * 12. Avoid "horizontal scrollbar" problem where scroller is visible at any width.
 *
 * NOTES:
 * The use of the divNameOuter/divNameInner is because of the IE box model problem.
 * The Outer should always the desired margin, border, and padding values and no specified width.
 * The Inner should have the desired content width only, and no other properties in most cases.
 * All classes and id's used by this layout are prefixed with 'tpl' for namespace purposes.
 */
/* STRUCTURE */
body {
    margin: 0;
    padding: 0;
    background: #AAAAAA;
    text-align: center;
}

#tplMenu {
    text-align: left;
}

#tplCenterContainer {
    margin: auto;
    border: 1px solid black;
    width: 810px;       /* desired width here, if using centered layout */
}

#tplContainerOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 0;         /* desired padding here */
    text-align: left;
}
#tplContainerInner {
    width: 810px;        /* desired page width here; if using centered layout, same as width of tplCenterContainer */
}

#tplHeaderOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 0;      /* desired padding here */
    background: gray;
}
#tplHeaderInner {
    width: auto;        /* desired width here */
    height: 153px;
}

#tplSmallColumnOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 0;       /* desired padding here */
    position: absolute;
    background: url(/156/skins/agent156/standard/left.png) no-repeat;   /* same bg as tplSmallColumnFullHeightBox */
    height: 430px;      /* can force a minimum height here if you want your col tall enough to show a background image's entire height; you'll likely want to set repeat: none on the background. */
}
#tplSmallColumnInner {
    width: 160px;       /* desired CONTENT width here */
}
#tplSmallColumnFullHeightBox {
    background: url(/156/skins/agent156/standard/leftColSolidColor.png) repeat-y;   /* same bg as tplSmallColumnOuter, or maybe just a continuing fill if there's an image above */
}

#tplContentOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 10px;      /* desired padding here */
    margin-left: 160px; /* should be: tplSmallColumnOuter:margin + tplSmallColumnOuter:padding + tplSmallColumnOuter:border + tplSmallColumnOuter:width. Don't forget margin/padding/border can be on BOTH sides. */
    background: white;
    min-height: 1000px;      /* minimum height of this box; should be >= min hieght of the tplSmallColumnOuter */
    height: auto !important; /* this line and the next are an IE6 "trick" for implementing min-height. IE6 doesn't do min-height, but it does implement height as if it were min-height. */
    height: 1000px;          /* IE6 also doesn't do !important. So, this trick makes ie see only height: X; while all other browsers see min-height + height: auto; */
}
#tplContentInner {
    width: auto;        /* desired width here */
}

#tplFooterOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 10px;
    border-top: 1px solid black;
    text-align: center;
    background: white;
}
#tplFooterInner {
    width: auto;        /* desired width here */
}