/* 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 and content 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. (NOT TRUE YET) Works if the left height > content height. HACK: can set the "height" of the tplContentOuter box to more than the tallest expected size of the nav. Works, but isn't dynamic. An alternative to make this look less bad is to move the footer divs to in between the end of tplContainerInner and tplContentOuter.
 * 12. Works if the left height < content height.
 * 13. 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.
 * To use the layout centered, surround everything in a div of class tplCenterContainer. To have the layout anchored left, don't do that.
 */
/* STRUCTURE */
body {
    margin: 0;
    padding: 0;
    text-align: center;
}

#tplMenu {
    text-align: left;
}

#tplCenterContainer {
    margin: auto;
    width: 800px;       /* 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 {
}

#tplHeaderOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 0;      /* desired padding here */
    text-align: center;
}
#tplHeaderInner {
    width: auto;        /* desired width here */
}

#tplSmallColumnOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 5px;       /* desired padding here */
    position: absolute;
    background: orange; /* url(leftColSolidColor.png) repeat-y;   /* same bg as tplSmallColumnFullHeightBox; or, if you want a non-repeat img followed by repeating bg color, switch this to that image an dsee notes in height below */
    height: 250px;      /* 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: 142px;       /* desired CONTENT width here */
}
#tplSmallColumnFullHeightBox {
    background: orange; /* url(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 */
    padding: 10px;      /* desired padding here */
    margin: 20px 0 0 0; /* should be: tplSmallColumnOuter:margin + tplSmallColumnOuter:padding + tplSmallColumnOuter:border + tplSmallColumnOuter:width. Don't forget margin/padding/border can be on BOTH sides. */
}
#tplContentInner {
    width: auto;        /* desired width here */
}

#tplFooterOuter {
    margin: 20px 0 0 0 ;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 15px 5px 0 5px;
    border-top: 1px solid #ABABAB;
}
#tplFooterInner {
    width: auto;        /* desired width here */
    text-align: center;
    font-size: 10pt;
}