/*
search for:  COLOR CHANGE - when wanting to adjust colors used e.g., holiday colors
colors used:
blue body background #99CCFF
blue background in header of events box = #0066FF
yellow text in header of events box = #FFFF99
red border in events box = #FF3333
reds in welcome logo = #CC0000 (dark); #FF3333 (light)
red in st cletus logo = #FF0000 (bright); also includes #CC0000 and in #FF3333 "C" border
red/pink: #FF9D9D
*/

/* ********** GLOBAL STRUCTURE SETTINGS ********** */
body {
	background: #003399 url(../images/New_Images/Rays-BG.png) no-repeat fixed center top;
	margin-top: 0px;
	behavior:url("/school/styles/csshover.htc"); /* HACK for IE hover behavior */
	}
* {margin:0; padding:0;}


}
/* --- CSS Reset 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0px;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
--- */


/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/

#main_content {

}

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_4 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	background-color:#FFFFFF;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 4 Columns
----------------------------------------------------------------------------------------------------*/

.container_4 .grid_1 {
	width:220px;
}

.container_4 .grid_2 {
	width:460px;
}

.container_4 .grid_3 {
	width:700px;
}

.container_4 .grid_4 {
	width:940px;
}



/* Prefix Extra Space >> 4 Columns
----------------------------------------------------------------------------------------------------*/

.container_4 .prefix_1 {
	padding-left:240px;
}

.container_4 .prefix_2 {
	padding-left:480px;
}

.container_4 .prefix_3 {
	padding-left:720px;
}



/* Suffix Extra Space >> 4 Columns
----------------------------------------------------------------------------------------------------*/

.container_4 .suffix_1 {
	padding-right:240px;
}

.container_4 .suffix_2 {
	padding-right:480px;
}

.container_4 .suffix_3 {
	padding-right:720px;
}



/* Push Space >> 4 Columns
----------------------------------------------------------------------------------------------------*/

.container_4 .push_1 {
	left:240px;
}

.container_4 .push_2 {
	left:480px;
}

.container_4 .push_3 {
	left:720px;
}



/* Pull Space >> 4 Columns
----------------------------------------------------------------------------------------------------*/

.container_4 .pull_1 {
	left:-240px;
}

.container_4 .pull_2 {
	left:-480px;
}

.container_4 .pull_3 {
	left:-720px;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/


/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}