/*--------------------
Holy Family School
-------------------- */
body {
	margin: 0;
	padding: 0px;
	text-align: center;
	font: normal 10pt/12pt Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background: url(images/bg_pg_gray.gif) repeat;	
}

#topbar {
background-color: #000066;
	height: 3px;
	width: auto;
}

#banner {
	padding: 20px 0px 82px 0px;
	font: normal 20pt/22pt Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	background: url(images/hfsheader5.jpg) no-repeat;
}

 
/* =Page Layout (Create the big boxes)
--------------------------------------------------------------*/	  
.boxall { background: url(images/hfs-5.png) no-repeat; width:750px;}

/* Use the below width to change the height of the page ---------*/
.boxag1 { width: 300px; background-color:#fff; float:left; height:925px;}
.boxag1 p {
	padding: 0 5px 0 10px;
	margin: 0;
	font: normal 100% Arial;
	color: #333;
	text-align: left;
}
.boxag1 h2 {
 font: bold 100% Arial;
 color: #000;
 text-align: left;
 padding: 20px 0px 0px 10px;
 margin: 0;
}

.boxag1 ul {margin: 0 0 0 25px;}
.boxag1 li {padding: 0 10px 0 0; text-align:left;font: normal 90% Arial;color: #333; 
text-indent:0; margin: 0;}

/* Use the below width to change the height of the page ---------*/
.boxag2 { width: 450px; background-color:#fff; height:925px; float: right; }
.boxag2 p {
	padding: 0 15px 0 15px;
	margin: 0;
	font: normal 100% Arial;
	color: #333;
	text-align: left;
}
.boxag2 h2 {
 font: bold 100% Arial;
 color: #000;
 text-align: left;
 padding: 20px 0px 0px 10px;
 margin: 0;
}

.boxag2 ul {margin: 0 0 0 35px;}
.boxag2 li {padding: 0 10px 0 0; text-align:left;font: normal 90% Arial;color: #333; 
text-indent:0; margin: 0;}


.boxag3 { width: 750px; background-color:#fff; }
.boxag3 p {
	padding: 0 15px 10px 15px;
	margin: 0;
	font: normal 100% Arial;
	color: #333;
	text-align: left;
}
.boxag3 h2 {
 font: bold 100% Arial;
 color: #000;
 text-align: left;
 padding: 20px 0px 0px 15px;
 margin: 0;
}

.boxag3 h3 {
 font: bold 100% Arial;
 color: #000;
 text-align: left;
 padding: 20px 0px 0px 0px;
 margin: 0;
}

.boxag3 h1 {
	font-size: 12pt;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	padding: 20px 0 15px 15px;
	margin:0;
}

.boxag3 ul {
	padding: 0 15px 0 15px;
	font: normal 100% Arial;
	color: #333;
	text-align: left;
}
.boxag3 li {
	padding: 0 15px 5px 15px;
	font: normal 100% Arial;
	color: #333;
	text-align: left;
}

.boxfooter { 
 text-align: center;
 height: 20px;
 background-color: #465f98;
 color: #fff;
 font-size: 80%;
 padding-top: 5px;
}

/*====== This code is for the logon link =======
===============================================*/
#linkmap a {
  position: absolute;
  height: 10px;
  width: 40px;
  top: 77px; 
  text-decoration: none;
  }
#linkmap2 a i { visibility: hidden; }
a#logonlink { left: 730px; }


/* 
==================================
==================================
=== Stu Nicholls Menu code ======= 
==================================
==================================
*/
.menuspace {padding-top: 96px;}
.menu2 {
float:left; width:100%; font: arial; font-size:10px; 
background-color: transparent; text-align: left;
margin:0 0px 0px 10px; /* for this demo only */ 
}
.menu2 ul {
padding:0;margin:0;list-style-type:none;
}
.menu2 ul li {
float:left; position:relative;
}
.menu2 ul li.group {display:block; text-indent:10px; background:#fff; color:#000066; width:152px; padding:4px 0;}

.menu2 ul li a, .menu2 ul li a:visited {
float:left; display:block; text-decoration:none; color:#000066; padding:0px 10px; line-height:25px; height:30px;
border-right: 1px solid #ccc;
}

.menu2 ul li:hover {width:auto;}

.menu2 ul li a:hover {background: #f7f6f7; color:#000066;}

.menu2 ul li:hover a {background:#fff; color:#000066;}

.menu2 ul li ul {
display: none;
}
.menu2 table {
margin:0; border-collapse:collapse; font-size:10px; position:absolute; top:0; left:0;
}

/* specific to non IE browsers */
.menu2 ul li:hover ul {
display:block; position:absolute;top:29px; background:#f7f6f7; margin-top:1px; left:0; width:152px;
}

.menu2 ul li:hover ul.scroller {
height:138px; width:172px; overflow:auto;}

.menu2 ul li:hover ul.endstop {
left:-90px;
}
.menu2 ul li:hover ul li ul {
display: none;
}
.menu2 ul li:hover ul li a {
display:block; background:#f7f6f7; color:#000066;height:auto;line-height:15px;padding:4px 16px; width:120px;
}
.menu2 ul li:hover ul li a.drop {
background:#e8e8e8;
}
.menu2 ul li:hover ul li a:hover {
color:#000066; background: #e8e8e8;
}

.menu2 ul li:hover ul li a:hover.drop {background: #fff; color:#000;}

.menu2 ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-70px; color:#000; left:152px; height:138px; width:172px; overflow:auto; background:#e8e8e8;
}
.menu2 ul li:hover ul li:hover ul li a {background:#e8e8e8;}
.menu2 ul li:hover ul li:hover ul li.group {width:152px; padding:5px 0;}


.menu2 ul li:hover ul li:hover ul.left {
left:-172px;
}
.menu2 ul li:hover ul li:hover ul li a:hover {background:#fff; color:#000066;}



/*== specific to IE5.5 and IE6 browsers ========*/
.menu2 ul li a:hover ul {
display:block;position:absolute;top:30px; t\op:29px; background:#e8e8e8;left:0; marg\in-top:1px;
}
.menu2 ul li a:hover ul.scroller {
height:138px; overflow:auto;}

.menu2 ul li a:hover ul.endstop {
left: -90px;
}
.menu2 ul li a:hover ul li a {
display:block; color:#000066; height:1px; line-height:15px; padding:4px 16px; width:152px; w\idth:120px;
}

.menu2 ul li a:hover ul li a.drop {
background:#e8e8e8; padding-bottom:5px;
}
.menu2 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; width:0;
}
.menu2 ul li a:hover ul li a:hover {
color:#000066; background: #f7f6f7;
}

.menu2 ul li a:hover ul li a:hover.drop {background: #fff; color:#000066;}
.menu2 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:-69px; t\op:-70px; color:#000; left:152px; height:138px; width:170px; overflow:auto; background:#e8e8e8;
}


.menu2 ul li a:hover ul li a:hover ul.left {
left:-170px;
}
.menu2 ul li a:hover ul li a:hover ul li a:hover {background:#fff; color:#000066;}
.left {clear:both;}