body { background-image: url(../images/bgCoogan.jpg); font-family: arial, sans-serif; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; z-index: 0;}

	p, input, h1, h2, h3, h4, h5, h6, h7 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

	.clearMe { clear: both; }


	/* ------------------------------------- Structure/Layout ------------------------------------- */
	/* Explanation:
	 * There are two main containers, one for the background, and one for the content. The background container
	 * contains the x-repeating backgrounds, which are absolutely positioned within it. Both of these containers
	 * are absolutely positioned within a master containter, at the same location. The content container is given
	 * a higher z-index so that it is forced on top of the background container. 
	 *
	 * The content container spans the entire browser window (via the width: 100% statement). In order to center
	 * content within it, another container is required, "centeredContainer", which holds the real content of the
	 * page. This container is NOT absolutely positioned, therefore, auto margins can be used with it, thus 
	 * centering it wrt to its parent (whose width is the entire browser window, thus, centeredContainer is nicely
	 * centered wrt to the browser window). This nested container system is necessary since auto margins do not work
	 * with absolutely positioned elements, and the contentContainer is absolutely positioned (on top of the BG container).
	 */

	#masterContainer { position: relative; }

	#backgroundContainer {
		position: absolute; top: 0px; left: 0px;
		width: 100%;
		height: 1000px;
		z-index: 2;
	}
	* html #backgroundContainer { height: 1100px; }

	#contentContainer {
		position: absolute; top: 0px; left: 0px;
		width: 100%;
		z-index: 3;
	}

	#fixes {
		position: relative;
		width: 650px; height: 0px;
		margin-left: auto; margin-right: auto;
		z-index: 100;
	}
/*
	.grayBorderBox { width: 5px; height: 25px; background-color: gray; z-index: 500; position: absolute; }
	#mainNavGrayLeft { top: 135px; left: -5px; }
	#mainNavGrayRight { top: 135px; right: -5px; }
	#footerGrayLeft { top: 945px; left: -5px; }
	#footerGrayRight { top: 945px; right: -5px; }
*/

	/*
	#testDiv {
		position: absolute; top: 0px; left: -20px;
		margin-left: -40px;
		margin-top: 0px;
		width: 700px; height: 20px;
		background-color: yellow;
		z-index: 500;
	}
	*/

	#centeredContainer { /* child of content container */
		position: relative;
		width: 650px; height: 1000px; overflow: hidden;
		padding-top: 30px; 
		margin-left: auto; margin-right: auto;
		background-color: white;
		border-left: 2px solid black; 
		border-right: 2px solid black;
		z-index: 0;
	}
	* html #centeredContainer { height: 1100px; }


	#titleBarBG {
		position: absolute; top: 30px; left: 0px;
		width: 100%;
		background-image: url(../images/blackBar-op60.png);
		/*background-color: #0000CD;*/
		background-repeat: repeat-x;
		height: 100px;
	}

/*
	#mainNavBG {
		position: absolute; top: 135px; left: 0px;
		width: 100%;
		background-color: black;
		background-image: url(../images/grayBar-op50.png);
		background-repeat: repeat-x;
		height: 25px;
	}

*/

	#footerBG {
		position: absolute; bottom: 30px; left: 0px;
		width: 100%;
		height: 25px;
		/* background-image: url(../images/grayBar-op50.png);
		background-repeat: repeat-x; */
	}


	/* ------------------------------------- Title & Logo ------------------------------------- */
	/* These are found within the centeredContainer. File-wise, they're located in common/titleArea.php */
	
	#topText {
		position: absolute; top: -19px; right: 0px;
		padding-right: 6px;
		width: 650px;
		height: 30px;
		color: #0000cd;
		font-size: 14px;
		text-align: right;
		z-index: 900;
	}

	#titleArea {
		position: absolute; top: 30px; left: 0px; 
		width: 650px; height: 100px;
		z-index: 1;
	}

	#titleBar {
		position: absolute; top: 0px; left: 0px;
		width: 650px; height: 100px;
		background-color: black;
		z-index: 2;
	}

	#titlePic { /* lollipop stand */
		position: absolute; top: 0px; right: 0px; 
		width: 450px; height: 100px;
		background-image: url(../images/titleCoogan.jpg);
		z-index: 3;
	}

	#logo {
		position: absolute; top: -20px; left: 25px;
		width: 160px; height: 162px;
		background-image: url(../images/logo.gif);
		z-index: 1000;
	}


	/* ------------------------------------- Footer ------------------------------------- */

	#footerBar {
		position: absolute; bottom: 20px; left: 0px; 
		width: 650px; height: 25px;
		background-color: #0000CD;
		z-index: 500;
	}
	* html #footerBar { bottom: 80px; }

	#footerBottom {
		position: absolute; bottom: -18px; left: 0px;
		width: 650px; 
		z-index: 501;
	}

	#manageLinkArea {
		width: 200px;
		float: left;
		margin: 0px 0px 0px 10px;
		font-size: 10px; color: black; text-align: left;
	}
	* html #manageLinkArea { margin-left: 5px; }

	#clearlyCredit {
		width: 200px;
		float: right;
		margin: 0px 10px 0px 0px;
		font-size: 10px; color: black; text-align: right;
	}
	* html #clearlyCredit { margin-right: 5px; }

	.manageLink:link {color: darkgreen; font-size: 10px; text-decoration: underline;}
	.manageLink:visited {color: darkgreen; font-size: 10px; text-decoration: underline;}
	.manageLink:hover {color: red; font-size: 10px; text-decoration: underline;}
	.manageLink:active {color: yellow; font-size: 10px; text-decoration: underline;}

	.clearlyLink:link {color: darkgreen; font-size: 10px; text-decoration: underline;}
	.clearlyLink:visited {color: darkgreen; font-size: 10px; text-decoration: underline;}
	.clearlyLink:hover {color: red; font-size: 10px; text-decoration: underline;}
	.clearlyLink:active {color: yellow; font-size: 10px; text-decoration: underline;}

	/*
	<div id="footerBottom">
		<p id="manageLinkArea"><a class="manageLink" href="../manage/manage.php">Manage</a></p>
		<p id="clearlyCredit">Site By: <a class="clearlyLink" href="http://www.clearlymosaic.com/">Clearly Mosaic</a></p>
	</div>
	*/


	/* ------------------------------------- Main-Nav ------------------------------------- */

	#mainNav {
		width: 710px; height: 25px;
		background-color: #0000CD;
		position: absolute; top: 105px; left: -15px; 
		z-index: 100;
	}

	#navBarList {
		color: white;
		font-family: verdana; font-size: 12px;
		text-decoration: none;
		margin: 5px 0px 0px 0px;
		width: 645px;
		padding-right: 15px;
		text-align: right;
	}

	.navBarLink:link {color: white; text-decoration: none;}
	.navBarLink:visited {color: white; text-decoration: none;}
	.navBarLink:hover {color: #FF1493; text-decoration: none;}
	.navBarLink:active {color: white; text-decoration: none;}



	/* ------------------------------------- Main-Content ------------------------------------- */

	#mainContent {
		margin: 160px 0px 0px 0px;
	}
	* html #mainContent { margin: 188px 0px 0px 0px; }

	#column1 {
		float: left;
		width: 220px; height: 600px;
		margin: -10px 0px 0px 20px;
	}
	* html #column1 { margin: 0px 0px 0px 10px; }

	#column2 {
		float: right;
		width: 350px; height: 600px;
		margin: -15px 20px 0px 5px;
	}
	* html #column2 { margin: 0px 14px 0px 5px; }

	#announcementsBox {
		height: 700px;
		overflow: auto;
	}

	#announcementPic {
		background-image: url(../images/annPic.jpg);
		width: 240px;  height: 690px;
		margin: -10px 0px 0px -12px;
		padding: 10px 10px 0px 10px;
		background-repeat: no-repeat;
	}
	* html #announcementPic { margin: 0px 0px 0px -5px; }


	/* ------------------------------------- Text & Titles ------------------------------------- */

	.text {
		font-family: verdana; font-size: 13px;
		color: black; text-align: left;
	}

	.textSmall {
		font-family: verdana; font-size: 12px;
		color: black; text-align: left;
	}
		

	.announcement {
		font-family: verdana; font-size: 12px;
		color: black; text-align: justify;
	}

	.note {
		font-family: verdana; font-size: 10px;
		color: white; text-align: center;
		margin-top: 5px;
	}

	.caption {
		font-family: verdana; font-size: 10px;
		font-weight: bold;
		text-align: center;
		margin: -10px 0px 5px 0px;
	}

	.h2 {
		font-size: 16px;
		font-weight: bold;
		color: #8E0004; text-align: center;
		margin: 0px 0px 0px 0px;
	}

	h3 {
		font-size: 17px;
		color:  black; text-align: center;
		text-decoration: underline;
		font-weight: bold;
		margin: 10px 0px -5px 0px;
	}
	* html h3 { margin-top: 20px; }

	.teachLinks {
		margin: -10px 0px 10px 0px;
		text-align: center;
		font-size: 11px;
	}

	#teachers {
		margin: 0 0 10px 0;
	}


/*------------------ Home Page ---------------------- */

	#homeImage {
		background-image: url(../images/dancers.jpg);
		width: 348px; height: 200px;
		border: 1px solid black;
		margin: 5px 0px 15px 0px;
	}

	#brendaImage {
		float: left;
		background-image: url(../images/brenda.jpg);
		width: 150px; height: 225px;
		border: 1px solid black;
		margin: 5px 20px 15px 0px;
	}

	#sarahImage {
		float: left;
		background-image: url(../images/sarah.jpg);
		width: 150px; height: 225px;
		border: 1px solid black;
		margin: 5px 20px 15px 0px;
	}

	#reginaImage {
		float: left;
		background-image: url(../images/regina.jpg);
		width: 150px; height: 225px;
		border: 1px solid black;
		margin: 5px 20px 15px 0px;
	}