@charset "utf-8";
/* CSS Document */
@import "reset.css";

body{
text-align:center;
background-color:#b7b7b7;
}

#wrapper{
	width:778px;
	height:590px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;

}

#friendsbanner{
	background-image: url(images/banner.gif);
	background-repeat: no-repeat;
	background-color:#1b5896;
	background-position: right;

}

#banner{
	width:778px;
	height:72px;

}

#time{
	float:left;
	width:200px;
	height:45px;
	text-align:right;
	margin-left:10px;
	display:inline;
}

#topnav{
	width:778px;
	height:21px;
}

.menu4 {
      width: 100%;
      margin: 0em 0;
	  padding: 0;
    }
.menu4 ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
.menu4 li {
	margin: 0;
	padding: 0;
	float: left;
	width: 56px;
	text-align: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #1b5896;
	border-right-color: #1b5896;
	border-bottom-color: #1b5896;
	border-left-color: #1b5896;
	display:inline;
	background-color: #355fa8;
	background-image: url(images/tab-back.gif);
	background-repeat: no-repeat;
}

.menu4 .active{
	background-image: url(images/tab-back-a.gif);
	background-repeat: no-repeat;
}
		
/* Hides this from IE 6 and older - fixes the padding/width problem - see padding-left: 20px below*/	
	html>body .menu4 li {
width:76px;
}
	
	
.menu4 .smaller {
	width: 50px;
    }
	
	.menu4 .end {
	border:none;
    }
	
    .menu4 a {
      display: block;
      width: 100%;
      text-decoration: none;
	  padding-top:5px;
	  color:#FFFFFF;
	  font-size:10px;
	  height:16px;
	  letter-spacing: -1px;
    }

	.menu4 .calendar{
	background-image:url(images/icon-calendar.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .calendar:hover{
	background-image:url(images/icon-calendar-o.gif);
	background-repeat: no-repeat;
	}
	
	.menu4 .news{
	background-image:url(images/icon-news.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .news:hover{
	background-image:url(images/icon-news-o.gif);
	background-repeat: no-repeat;
	}
	.menu4 .stjames{
	background-image:url(images/icon-stjames.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .stjames:hover{
	background-image:url(images/icon-stjames-o.gif);
	background-repeat: no-repeat;
	}
	.menu4 .home{
	background-image:url(images/icon-home.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .home:hover{
	background-image:url(images/icon-home-o.gif);
	background-repeat: no-repeat;
	}
	.menu4 .about-us{
	background-image:url(images/icon-about-us.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .about-us:hover{
	background-image:url(images/icon-about-us-o.gif);
	background-repeat: no-repeat;
	}
	.menu4 .school-life{
	background-image:url(images/icon-school-life.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .school-life:hover{
	background-image:url(images/icon-school-life-o.gif);
	background-repeat: no-repeat;
	}
	.menu4 .admissions{
	background-image:url(images/icon-admissions.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .admissions:hover{
	background-image:url(images/icon-admissions-o.gif);
	background-repeat: no-repeat;
	}
	.menu4 .links{
	background-image:url(images/icon-links.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .links:hover{
	background-image:url(images/icon-links-o.gif);
	background-repeat: no-repeat;
	}
	.menu4 .contact-us{
	background-image:url(images/icon-contact.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .contact-us:hover{
	background-image:url(images/icon-contact-o.gif);
	background-repeat: no-repeat;
	}
	.menu4 .parents{
	background-image:url(images/icon-parents.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	}
	.menu4 .parents:hover{
	background-image:url(images/icon-parents-o.gif);
	background-repeat: no-repeat;
	}
    .menu4 a:hover {
	color:#000000;
    }


#title{
	height:101px;
	width:778px;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #FFFFFF;
}

#content{
position:relative;
width:778px;
height:391px;
background-color:#FFFFFF;
}

#newswrapper{
	width:778px;
	height:371px;
	position:absolute;
	top:0px;
	left:0px;
}

#sectionmenu{
	position:absolute;
	top:0px;
	left:0px;
	width:122px;
	height:371px;
	background-image: url(images/sub-back.gif);
	background-repeat: repeat-y;
	z-index:10;
}


#sectionmenu ul li a {
   display:block;
   height:28px; width:123px;
   text-indent:-9009px;
   padding:0px;
   margin:0px;
   line-height:28px;
   }

/* Side menu images Friends*/
#sectionmenu ul li .home{ background:transparent url(images/sub-button-home.gif) no-repeat 0 0;}
#sectionmenu ul li .what-we-do{ background:transparent url(images/sub-button-what-we-do.gif) no-repeat 0 0;}
#sectionmenu ul li .who-we-are{ background:transparent url(images/sub-button-who-we-are.gif) no-repeat 0 0;}
#sectionmenu ul li .diary-of-events{ background:transparent url(images/sub-button-diary-of-events.gif) no-repeat 0 0;}
#sectionmenu ul li .contact-us{ background:transparent url(images/sub-button-contact-us.gif) no-repeat 0 0;}


#sectionmenu ul li a:hover {
   background-position: 0px -28px;;
   }
#sectionmenu ul li .active {
   background-position: 0px -56px;;
   }
#sectionmenu ul li .active:hover {
   background-position: 0px -56px;;
   }



#sectiontitle{
	position:absolute;
	top:0px;
	left:122px;
	width:242px;
	height:371px;
}

#subwrapper{
	width:414px;
	height:370px;
	left:364px;
	position:absolute;
}

#newsskin{
	position:absolute;
	top:0px;
	left:127px;
	height:371px;
	width:650px;
	color:#000000;
	overflow:auto;
}

#friends-content{
	position:absolute;
	top:40px;
	left:147px;
	height:331px;
	width:630px;
	color:#000000;
	overflow:auto;
	line-height:14px;
}

#friends-right{
	position:absolute;
	top:4px;
	right:35px;
	height:250px;
	width:200px;
}

#friends-title{
	position:absolute;
	top:10px;
	left:140px;
	width:232px;
	height:20px;
}


#calendarskin{
	position:absolute;
	top:0px;
	left:121px;
	height:371px;
	width:656px;
	color:#000000;
	overflow:auto;
}

.content{
margin-right:10px;
}

.contentbody{
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}

.readmore{
margin-top:5px;
}

#newsskin h2{
	color:#777EBF;
	margin-top:5px
}

#newsskin h1 a{
color:#003366;
}
#newsskin h1{
margin-top:5px;
margin-bottom:5px;
font-size:1.4em;
color:#003366;


}

#content a{
	text-decoration:none;
	color:#0061C1;
}

#content a:hover{
text-decoration:underline;
}

#newsskin p{
color:#000000;
font-size:12px;
padding-bottom:10px;
padding-left:5px;
padding-right:8px;
}

#subsectionmenu{
	position:absolute;
	width:104px;
	height:371px;
	top:0px;
	left:0px;
	background-repeat: repeat-y;
}

#subsectioncontent{
	position:absolute;
	width:310px;
	height:349px;
	left:104px;
	top: 18px;
	overflow:auto;
	padding-top:5px;
}

#largersectiontitle{
	position:absolute;	
	width:414px;
	height:21px;
	left: 0px;
	top: 0px;
}

#largersectionconent{
	width:400px;
	height:370px;
	left:10px;
	position:absolute;
	overflow:auto;
	padding-top:5px;
	color:#000000;
}



#subsectioncontent-tertiary{
	position:absolute;
	width:310px;
	height:315px;
	left:104px;
	top: 52px;
	overflow:auto;
	padding-top:5px;
}

#subwrapper p{
color:#000000;
font-size:12px;
padding-bottom:10px;
padding-left:5px;
padding-right:8px;
}

#subsectiontitle{
	position:absolute;
	width:322px;
	height:21px;
	left: 94px;
	top: 0px;
}


#tertiary{
	position:absolute;
	width:320px;
	height:27px;
	left: 94px;
	top: 19px;
	background-color:#E4E4E4;
}

#tertiary ul{
font-size:10px;
margin-left:10px;
}

#tertiary a{
	display: block;
	text-decoration:none;
	color:#666666;
}
#tertiary a:hover{
	text-decoration:underline;
	color:#333333;
}

#tertiary li{
display:block;
float: left;
width:49px;
text-align:center;
line-height:13px;
}

#tertiary .singleline{
padding-top:7px;
}

#tertiary .active{
color:#000000;
}

#tertiary .big{
width:70px;
}

#tertiary .small{
width:43px;
}

#schoolinfo{
	position:absolute;
	left:0px;
	top:371px;
	height:21px;
	width:778px;
	background-color: #1b5896;
}

#schoolinfo p{
font-size:10px;
padding-top:4px;
padding-left:10px;
}

#time p{
	font-size:11px;
	padding-top:10px;
	padding-right:5px;
}

#subsectionmenu ul{
      margin-top: 30px;
      list-style-type: none;
	  text-align:right;
}

#subsectionmenu ul li{
	padding-top:4px;
	padding-bottom:5px;
	padding-right:20px;

}

#subsectionmenu .active{
	background-repeat: no-repeat;
	background-position: 94px 1px;
	font-weight:bold;
}

#subsectionmenu .active-twoline{
	background-repeat: no-repeat;
	background-position: 94px 8px;
	font-weight:bold;
}

#subsectionmenu a {
	width: 100%;
	text-decoration: none;
	color:#C8D5B7;
	font-size:11px;
	letter-spacing: 0px;
    }
	
	
#subsectionmenu a:hover {
	color:#FFFFFF;
}

	
strong{
font-weight:bold;
}
	
#friends-content {
background:#FFFFFF;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

#friends-content p{
color:#000000;
font-size:12px;
padding-bottom:10px;
padding-left:5px;
padding-right:8px;
}