/* LAYOUT IMPACTING HTML ELEMENTS */


/* LAYOUT SKINNING IDs & CLASSES */
/* ------ adds a non-scrolling bg image to the page, default doesn't scale ------------------------------------- */

img#lyt-bg-image { position: fixed; top: 0%; left: 0%; z-index: 1; padding: 0px;}
#scrollable { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background: transparent; overflow: auto;}

/* ----- scale the background image, or not. make it scroll, or not. ------------------------------------------- */
.no-scale {background-size: auto;}
.auto-scale {width: 100%; height: 100%;} /* stretches bg-images to edges of container -------------------------- */
.auto-scale-x {width: 100%;} /* stretches bg-images to edges of container only along the horiz x-axis ---------- */
.auto-scale-y {height: 100%;} /* stretches bg-images to edges of container only along the vert y-axis */


/* LAYOUT BLOCK DEBUG (add #debug to body in LAYOUT.html to add colors for debugging.) Comment out to save space */ 
#debug .body{background-color:red;}
#debug .page{background-color:orange;}
#debug .main{background-color:yellow;}
#debug .leftCol{background-color:lime;}
#debug .rightCol{background-color:aqua;}

/* GRIDS-DEBUG (add #debug to body in LAYOUT.html to add colors for debugging.) Comment out to save space. ----- */
#debug .line{background-color:#e2e2e2;}
#debug .size1of1{background-color:pink;}
#debug .size1of2{background-color:red;}
#debug .size1of3{background-color:orange;}
#debug .size2of3{background-color: yellow;}
#debug .size1of4{background-color:lime;}
#debug .size3of4{background-color:green;}
#debug .size1of5{background-color:aqua;}
#debug .size2of5{background-color:blue;}
#debug .size3of5{background-color:purple;}
#debug .size4of5{background-color:magenta;}



/* ========== USE ONLY WITH LAYOUT-DYN .html TEMPLATE ============ */


	/* dynamic body / page background graphic; combined with lyt-bg-image and scrollable ids, allows for crazy transparency effects */
	body#DYN {
		background-image: ;
		background-repeat: repeat-y;
		z-index: 0;
		position: absolute;
		overflow: auto;
	}
	/* dynamic banner */
	#DYN .head {
		background: ;
		background: auto;
		overflow: visible;
		height: ;
		padding-top: 0px;
		padding-left: 0px;
		width: auto;
	}
		
	/* dynamic page widths */
	#DYN .page {
		width:;
	}
	
	/* extend columns to allow for common column widths */
	#DYN .leftCol {
		width:;
	}
	
	#DYN .main {
		width:;
	}
	
	#DYN .rightCol {
		width:;
	}