/* St. Joseph School */

body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, li, a, #header

{
	margin: 0;		/* Set margin and padding to 0 to even out browser differences. */
	padding: 0;
}

body {
	background-color:#000066;
}
	
	/** wrapper **/
/* This div contains all the real content on the page. It contains the header div, the column-wrapper div, and the footer div. */
#wrapper {
	margin: 0 auto 0 auto;
	width: 770px;
	background: url(../images/wrapper_bg.jpg) top left repeat-y;
}

/** header **/
/* This div is just the header (banner) image across the top of the container div */
#header {
	height: 191px;	
	background: url(../images/header_bg.jpg)  0 0 no-repeat;
	}
#footer {
    height: 20px;
	background: url(../images/footer_bg.jpg) bottom left no-repeat;
	}
#menu{
	height: 42px;
	background: url(../images/menu.jpg) 0 0 no-repeat;
}

/** container **/
#container {
}


/** Secondary Content **/
#secondary_content{
	position: relative;
	float: left;
	width: 177px;
	padding: 0px 0px 0px 0px;
	}
	
#secondary_content_title_sm{
	background: url(../images/PageTitle.jpg) 0 0 no-repeat;
	height: 40px;
	width: 177px;
	}
#secondary_content_title_sm p{
	font: bold 20px "Times New Roman", Times, serif;
	color:#000066;
	text-align: center;
	padding: 4px 2px 2px;
	}
#secondary_content_title{
	background: url(../images/PageTitle.jpg) 0 0 no-repeat;
	height: 40px;
	width: 177px;
	}
#secondary_content_titleBOB{
	background: url(../images/PageTitle.jpg) 0 0 no-repeat;
	height: 90px;
	width: 177px;
	}
#secondary_content_titleBOB p{
	font: bold 24px "Times New Roman", Times, serif;
	color:#000066;
	text-align: center;
	padding: 4px 2px 2px;
	}
#secondary_content_title p{
	font: bold 24px "Times New Roman", Times, serif;
	color:#000066;
	text-align: center;
	padding: 4px 2px 2px;
	}
#secondary_content_2line_title{
	background: url(../images/PageTitle.jpg) 0 0 repeat;
	height: 80px;
	width: 177px;
	}
#secondary_content_2line_title p{
	font: bold 24px  "Times New Roman", Times, serif;
	color:#000066;
	text-align: center;
	padding: 4px 2px 2px;
	}
	
#secondary_content_header{
	background: url(../images/PageMenuHeader.jpg) 0 0 no-repeat;
	width: 177px;
	height: 6px;
	}


#secondary_content .secondary_content_list
{
	background: url(../images/PageMenuMid.gif);
}

#secondary_content .secondary_content_list ul {
	list-style: none;	/* Don't use bullets for the lists. */
}

#secondary_content .secondary_content_list li {
	text-align: left;
	color:#000066;
	width: 177px;
	background: url(../images/PageMenuMid.gif) 0 0 repeat;
	height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#secondary_content  .secondary_content_list li a{
	padding-left:1.1em;
	padding-top:.2em;
	display: block;			/* Making the links block elements makes the whole list item clickable (rather than just the text itself). */
	color: #000066;			/* The links in the nav area are blue and are not underlined. */
	text-decoration: none;
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	
}

#secondary_content  .secondary_content_list  li a:link,
#secondary_content  .secondary_content_list li a:visited {
	color: #000066;				/* Link color. */
}

#secondary_content  .secondary_content_list li a:hover {
	/* The background of the list items uses this partially transparent white background. */
 
	color: #FFF;				/* Link color. */
}
#secondary_content_footer{
	background: url(../images/PageMenuBottom.jpg) 0 0 no-repeat;
	height: 8px;
	width: 177px;
}

	
#newsscroller{
	position: relative;
	float: left;
	width: 164px;
	margin: 75px 7px 0px 7px;	
	background-image: url(/images/news_bg.gif);
	}	
	
	
/** Header Navigation **/
#header #nav {
	width: 340px;
	font: 10px "Times New Roman", Times, serif;
	padding-top: 0px;
	padding-bottom: 0px;
	vertical-align: middle;
	padding-left: 430px;
	}

#header #nav ul {
	list-style: none;	/* Don't use bullets for the lists. */
	float: right;
}

#header #nav li {
	float: left;
	text-align: center;
	border: 1px solid #000066;
	width: 66px;
	color:#FFF;
	background: url(../images/top_menu.gif) 0 0 repeat;
	height: 16px;
	padding-top: 4px;
}

#header #nav a{
	display:block;
	color:#FFFFFF;
	text-decoration:none;
}

#header #nav a:hover{
color:#000066;
background-color:#FFFFFF;
}

/** Content Navigation **/
#menu #nav {
	width: 770px;
	font: 12px "Times New Roman", Times, serif;
	padding-top: 10px;
	padding-bottom: 0px;
	padding-left: 30px;
	vertical-align: middle;
	color: #000066;
}

#menu #nav ul {
	list-style: none;	/* Don't use bullets for the lists. */
}

#menu #nav li {
	float: left;
	text-align: center;
	border: solid 1px #000066;
	width: 100px;
	background: url(../images/PageMenuMid.gif) 0 0 repeat;
	height: 16px;
	padding-top: 3px;
}

#menu #nav a{
display:block;
color:#000066;
text-decoration:none;
}


#menu #nav a:hover{
color:#000066;
	background: #FFF;
}

/** main-content column **/
/* This column has the main content div. */
#main-content {
	margin-left: 187px; 	/*The side-by-side columns are achieved by floating the secondary-content column and giving the main-content column a left margin equal to the width of the secondary-content column. */
	margin-right: 10px; 	/*The side-by-side columns are achieved by floating the secondary-content column and giving the main-content column a left margin equal to the width of the secondary-content column. */
}

#content p {
	margin: 1em;
	text-align: justify;
	text-indent: 30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000066;
}


#content dl {
	font:  12px/normal Verdana, Arial, Helvetica, sans-serif;
	list-style: url(none) none inside;
	padding: 0em 2em;
	color: #000066;
}

#content ul {
	font:  12px Verdana, Arial, Helvetica, sans-serif;
	list-style: disc url(none) outside;
	padding: 0em 2em;
	text-align: left;
	color: #000066;
}
/* CONTAINING FLOATS ---------------------------------------------------- */

.clearfix:after {
	content: "."; /* This dot is the actual appended content */
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
	}
.clearfix {display: inline-block;} /* Fixes MacIE */
/* Hides from MacIE \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* TEXT ---------------------------------------------------- */
/* --------------------------------------------------------- */
p {
	margin: 0 0 1.2em 0;
	line-height: 1.6;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	}
	
.no_indent{
	margin: 0 0 0 0;
	text-align: left;
}
.center{
	text-align:center;
}
.right{
	text-align:right;
}
.right_2{
	text-align:right;
	margin: 1em;
}

.centered_title {
	margin:  0.5em 0 0 0.5em;
	font: bold 170% "Times New Roman", Times, serif;
	color: #000066;
	text-align: center;
	}
.title {
	margin:  0.5em 0 0 0.5em;
	font: bold 170% "Times New Roman", Times, serif;
	color: #000066;
	text-align: left;
	}
	
h1 {
	margin:  0.5em 0 0 0.5em;
	font: bold 170% Arial, Helvetica, sans-serif;
	color: #000066;
	}
h2 {
	margin: 0.5em 0 0 0.5em;
	font: bold 120% Arial, Helvetica, sans-serif;
	color: #000066;
	}
h3 {
	margin: 0.5em 0 0 0.5em;
	font: bold 100% Arial, Helvetica, sans-serif;
	color: #000066;
	}
	
h4 {
	margin: 0.7em 0 .7em 0.5em;
	font:  normal 90% Verdana, Arial, Helvetica, sans-serif;
	color: #000066;
	}
	
.highlight {
	color: #000066;
	font-family: "Times New Roman", Times, serif;
	font-variant: small-caps;
	}
	
	
	
/* This rule is from Snippets - Community MX - CMX CSS Collection - Cheats and Productivity - Clearing Element for Floats */	
.brclear {
     clear:both; 		/* Clearing element for a float: this fix uses a break in the markup as a clearing element, */
     height:0; 			/* but it ensures that the break does not disturb the layout by reducing its values to 0. */
     margin:0;			/* Add this class to breaks as needed to clear a float. */
     font-size: 1px;	/* Please note that the container of the break needs a dimension on it. */     	
}


/* LINKS --------------------------------------------------- */
/* --------------------------------------------------------- */
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000066; /* Sets text color of links. */
	}

a:hover {
	color: #36f; /* Sets text color of links when they are hovered. */
	}


/* TABLES --------------------------------------------------- */
/* --------------------------------------------------------- */
table{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000066;
}

/** Footer text **/
#footer p{
	font:10px "Times New Roman", Times, serif;
	text-align:  center;
	color:#000066;
	padding-top: 6px;
}

#footer a{
	color:#000066;
	font: 10px "Times New Roman", Times, serif;
	font-style: italic;
	text-decoration:none;
}
#footer a:hover {
	color: #36f; /* Sets text color of links when they are hovered. */
	}
	
.nospam {display:none}
.black {
	color: #000000;
}