/* 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: 860px;       /* 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: center;
}
#tplContainerInner {
    width: 860px;        /* desired page width here; if using centered layout, same as width of tplCenterContainer */
    text-align: left;
    margin: auto;
}

#tplHeaderOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 10px;      /* desired padding here */
}
#tplHeaderInner {
    width: auto;        /* desired width here */
}

#tplSmallColumnOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 5px;       /* desired padding here */
    position: absolute;
    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 {
}

#tplContentOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 10px;      /* desired padding here */
    margin-left: 152px; /* should be: tplSmallColumnOuter:margin + tplSmallColumnOuter:padding + tplSmallColumnOuter:border + tplSmallColumnOuter:width. Don't forget margin/padding/border can be on BOTH sides. */
    min-height: 500px;      /* minimum height of this box; should be >= min hieght of the tplLeftOuter */
    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: 500px;          /* 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;
}
#tplFooterInner {
    width: auto;        /* desired width here */
}
h1, h2, h3, h4, h5, h6 {
    color: #919701;
}