/*
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 {
	margin: 0; padding: 0;
	background: #f6f6f6 url("http://www.stcletusparish.com/school/assets/images/bg-newmenu.png") repeat-x;
	}
	
* {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.
*/


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

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