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

#tplMenu {
    text-align: left;
}

#tplContainerOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 0;         /* desired padding here */
}

#tplContainerInner {
	
		width: 100%;
		
}

#tplHeaderOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 0;			/* desired padding here */
}

#tplHeaderInner {
	width: 100%;
    height: 230px;
    position: relative;
}

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

#tplSmallColumnInner {
    width: 150px;       /* desired width here */
}

#tplSmallColumnFullHeightBox {
}

#tplContentOuter {
    margin: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 0;			/* desired padding here */
    margin-left: 150px; /* 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: 0;          /* desired margin here */
    border: 0;          /* desired border here */
    padding: 10px;
}

#tplFooterInner {
    width: auto;        /* desired width here */
}