/* LAYOUT IMPACTING HTML ELEMENTS */
html {
	background-color: black;
}

/* 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 / head background */
	#DYN .head {
		/* background: url(/images/css/scwc/bg-images/SCWC-banner-ps.jpg) no-repeat; */
		background: auto;
		overflow: visible;
		height: 117px;
		padding-top: 110px;
		padding-left: 365px;
		width: auto;
	}
	
	/* dynamic .body background */
	#DYN .body {
		background-image: url(/images/css/scwc/bg-images/SCWC-body-ps.jpg);
		background-repeat: repeat-y;
		z-index: 5;
	}
	
	/* dynamic foot background */
	#DYN .foot {
		background-image: url(/images/css/scwc/bg-images/SCWC-footer-ps.jpg);
		background-repeat: repeat-y;
		z-index: 5;
		height: 58px;
		margin-top: -10px;
		padding-left: 20px;
		padding-right: 20px;
	}
		
	/* dynamic page widths */
	#DYN .page {
		width:953px;
	}
	
	/* extend columns to allow for common column widths */
	#DYN .leftCol {
		width:50%;
		margin-left: 15px;
		margin-right: -10px;
	}
	
	#DYN .main {
		width:;
	}
	
	
	.schedule .main, .single-entry .main, .filterby .main, .contact .main, .registration .main {
		padding-left: 16px;
	}
	
	
	#DYN .rightCol {
		width:25%;
		margin-right: 26px;
		margin-left: -8px;
	}