@charset "utf-8";

@import url("common.css?v=1.0");
@import url('../font/museo700.css');

/* ------------------------------------------------------------------------------ */
/* index page */
/* ------------------------------------------------------------------------------ */
#wrapperIndex { background:url(../img/framebg.jpg) top center no-repeat; }

#wrapperHeaderIndex { height:552px; }
	
	#logo {
		position:absolute;
		top:8px;
		width:160px;
		height:135px;
		background:url(../img/homenavi.jpg) no-repeat;
	}
	
	#navigationFrameIndex { width:920px; height:145px; }

	#schoolName {
		width:920px;
		height:38px;
		background:url(../img/school-name.png) no-repeat;
	}
	#flash {
		width:920px;
		height:369px;
		background:url(../img/flash.jpg) no-repeat;
	}

#wrapperBodyIndex {
/*
	height:470px;
	overflow:hidden;
	background:url(../img/flash-bottom.png) no-repeat;
	padding-top:15px;
*/

	background:url(../img/bodyfooterbghome.jpg) bottom no-repeat;
	background-color:#fff;
	padding-bottom:30px;
}
	#flashBottom {
		position:absolute;
		left:0px;
		width:920px;
		height:60px;
		background:url(../img/flash-bottom.png) 0px 0px no-repeat;
		z-index:0;
	}

	#wrapperLeft {
		position:relative;
		float:left;
		width:360px;
		padding-top:20px;
		background:url(../img/shadow-divider.png) no-repeat;
		background-position:right center;
		z-index:1;
	}
			 
		 #wrapperLeft p#welcome {
		 	margin:-2px 0px 0px 30px;
			padding:0px 30px 55px 0px;
		 	font-family: 'Museo700',Arial,sans-serif;
			font-size:18px;
			font-weight:normal;
			line-height:24px;
			color:#00465c;
			background:url(../img/waves.png) bottom no-repeat;
			}
		
		#wrapperLeft ul#pods {
			list-style:none;
			width:340px;
			/* JX 20121025 temporary style, remove when school tour link is enabled */
			margin-top:33px;
		}
		
			#wrapperLeft ul#pods li { width:228px; overflow:hidden; padding-left:121px; }
			#wrapperLeft ul#pods li p { color:#0e3253; margin:3px 0px 5px 0px; padding-bottom:5px; }
			#wrapperLeft ul#pods li a { background:url(../img/pods.gif) no-repeat; }
			
			#wrapperLeft ul#pods li#message-from-principal { margin-top:15px;}
			
				#wrapperLeft ul#pods li#message-from-principal a.title {
					display:block;
					margin-top:22px;
					width:225px;
					height:22px;
					background-position:0px -21px;
				}
				
				#wrapperLeft ul#pods li#message-from-principal a.title:hover { background-position:-321px -21px; }
			
			#wrapperLeft ul#pods li#take-school-tour { 
				 
				margin-top:30px; background:url(../img/pods_img_takeschooltour.png) no-repeat;}
			
				#wrapperLeft ul#pods li#take-school-tour a.title {
					display:block;
					margin-top:7px;
					width:158px;
					height:22px;
					background-position:0px -127px;
				}
				
				#wrapperLeft ul#pods li#take-school-tour a.title:hover { background-position:-351px -127px; }
				
			#wrapperLeft ul#pods li#userManaged { width:317px; overflow:hidden; padding-left:23px;margin-top:30px; }
			#wrapperLeft ul#pods li#userManaged img{ position:absolute;  }
			#wrapperLeft ul#pods li#userManaged p,
			#wrapperLeft ul#pods li#userManaged a{ padding-left:100px !important; }
			#wrapperLeft ul#pods li#userManaged .button_more{ background-position: 100px -66px !important; }
			
				#wrapperLeft ul#pods li#userManaged a.title {
					display:block;
					margin-top:0px;
					width:158px; 
					font-family: 'MyriadProLightCondBold';
					font-size:25px !important; line-height:26px;
					font-weight:normal;
					color:#00a66e;
					background-image:none;
				}
				
				#wrapperLeft ul#pods li#userManaged a.title:hover { color:#27b9e9;	 }
		
		#wrapperRight {
			position:relative;
			float:left;
			margin-left:30px;
			width:520px;
			padding-top:20px;
			color:#3a3a3a;
			z-index:2;
		}
			#latestNews {
				width:94px;
				height:22px;
				background:url(../img/latest-news.png) 0 0 no-repeat;
				margin:0px 0px 10px 0px;
			}
			
			#wrapperRight ul#news {
				float:left;
				width:510px;
/*
				height:285px;
*/
				list-style:none;
				margin-bottom:11px;
			}
			
				#wrapperRight ul#news li {
					position:relative;
					overflow:hidden;
					float:left;
					margin-left:30px;
					padding-top:150px;
					width:230px;
/*
					height:110px;
*/
					background:url(../img/news_thumb.jpg) no-repeat;
				}
				
				#wrapperRight ul h5 {
					font-size:15px;
					line-height:20px;
					font-style:bold;
					color:#12AD42;
					margin:0px;
					padding:0px 0px 5px 0px;
				}
				
				#wrapperRight ul h5 a {color:#12AD42; }
				#wrapperRight ul h5 a:hover {color:#48C0E7; }
				
				#wrapperRight ul#news li:first-child,
				#wrapperRight ul#news li.first-child { margin-left:0px; }
				
				#wrapperRight ul#news li img {position:absolute; top:0px; width:230px; height:140px; overflow:hidden; }
				#wrapperRight ul#news li a img {border:none; }
				#wrapperRight ul#news li p { margin-bottom:15px; line-height:16px; padding-right:5px; overflow:hidden; }
				
				#wrapperRight ul#news li p.calendar {
						position:absolute;
						top:0px;
						right:10px;
						padding:7px 10px 0px 10px;
						height:33px;
						text-transform:uppercase;
						color:#fff;
						text-align:center;
						font-size:10px;
						line-height:14px;
						background-color:rgb(0,0,0);
						background-color:rgba(0,0,0,0.3);
						}
						
						#wrapperRight ul#news li p.calendar span { font-weight:bold; font-size:18px; }
			
			#waves {
				clear:both;
				width:520px;
				height:20px;
				margin-bottom:20px;
				background:url(../img/waves-long.png) bottom no-repeat;
			}
				
			#wrapperRight #upcomingEvents { clear:both; margin-bottom:10px; width:134px; height:22px; background:url(../img/upcoming-events.png) no-repeat; }
			
				#wrapperRight ul#events {
					float:left;
					list-style:none;
					width:495px;
					overflow:hidden;
				}
				
					#wrapperRight ul#events li {
						float:left;
						width:235px;
						margin-left:25px;
					}
					
					#wrapperRight ul#events li:first-child,
					#wrapperRight ul#events li.first-child { margin-left:0px; }
					
					#wrapperRight ul#events li p.calendar {
						float:left;
						padding-top:7px;
						margin-right:9px;
						width:40px;
						height:33px;
						background:url(../img/datebg.jpg) no-repeat;
						text-transform:uppercase;
						color:#1b3e66;
						text-align:center;
						font-size:10px;
						line-height:14px;
						}
						
						#wrapperRight ul#events li p.calendar span { font-weight:bold; font-size:18px; }
						
					#wrapperRight ul#events li p { float:left; width:185px; line-height:16px; overflow:hidden; }
					#wrapperRight ul#events li p a {
						text-decoration:none;
						font-size:15px;
						font-weight:bold;
						line-height:20px;
						font-style:bold;
						color:#12AD42;
					}
					#wrapperRight ul#events li p a:hover { text-decoration:none; color:#48c0e7; }

a.button_more { display:block; width:50px; height:20px; background:url(../img/pods.gif) 0px -66px no-repeat!important; }
a.button_more:hover { background-position:-351px -66px!important; }

/*ul#topNavigation li#topNavi01 { left:20px; width:39px; display:none; }*/
ul#topNavigation li#topNavi01 a{
   background-position:-872px -71px !important; 
}
/* primary navigation */

ul#primaryNavigationIndex {
	position:relative;
	margin-left:160px;
	width:760px;
	height:50px;
	list-style:none;
}

	ul#primaryNavigationIndex li {
		float:left;
		display:inline;
		height:50px;
	}
	
	ul#primaryNavigationIndex li a {
		display:block;
		height:50px;
		background:url(../img/homenavi.jpg) 0 0 no-repeat;
	}
	
	ul#primaryNavigationIndex li#navi01 { width:101px; }
	ul#primaryNavigationIndex li#navi01 a { background-position:-160px -42px; }
	ul#primaryNavigationIndex li#navi01 a:hover { background-position:-160px -92px; }
	
	ul#primaryNavigationIndex li#navi02 { width:98px; }
	ul#primaryNavigationIndex li#navi02 a { background-position:-261px -42px; }
	ul#primaryNavigationIndex li#navi02 a:hover { background-position:-261px -92px; }
	
	ul#primaryNavigationIndex li#navi03 { width:118px; }
	ul#primaryNavigationIndex li#navi03 a { background-position:-359px -42px; }
	ul#primaryNavigationIndex li#navi03 a:hover { background-position:-359px -92px; }
	
	ul#primaryNavigationIndex li#navi04 { width:102px; }
	ul#primaryNavigationIndex li#navi04 a { background-position:-477px -42px; }
	ul#primaryNavigationIndex li#navi04 a:hover { background-position:-477px -92px; }
	
	ul#primaryNavigationIndex li#navi05 { width:107px; }
	ul#primaryNavigationIndex li#navi05 a { background-position:-579px -42px; }
	ul#primaryNavigationIndex li#navi05 a:hover { background-position:-579px -92px; }
	
	ul#primaryNavigationIndex li#navi06 { width:114px; }
	ul#primaryNavigationIndex li#navi06 a { background-position:-686px -42px; }
	ul#primaryNavigationIndex li#navi06 a:hover { background-position:-686px -92px; }
	
	ul#primaryNavigationIndex li#navi07 { width:120px; }
	ul#primaryNavigationIndex li#navi07 a { background-position:-800px -42px; }
	ul#primaryNavigationIndex li#navi07 a:hover { background-position:-800px -92px; }
	
	
/* JX 20121025 temporary style, remove when school tour link is enabled */
#wrapperLeft ul.socialMedia {
	margin-top:44px;	
}
#wrapperLeft ul.socialMedia li{
	display:inline;
	float:left;
	width:135px;
	height:45px;
	margin:40px 0 0 20px;
}

#wrapperLeft ul.socialMedia #fb a{
	background:url(../img/socialMedia.png) no-repeat;
	background-position:0 0;
	display:block;
	width:135px;
	height:45px;
}

#wrapperLeft ul.socialMedia #twitter a{
	background:url(../img/socialMedia.png) no-repeat;
	background-position:-136px 0;
	display:block;
	width:135px;
	height:45px;
}

#wrapperLeft ul.socialMedia #fb a:hover{ 
	background-position:0 -45px; 
}

#wrapperLeft ul.socialMedia #twitter a:hover{ 
	background-position:-136px -45px; 
}

.ir{
	display: block;
	border: 0;
	text-indent: -999em;
	overflow: hidden;
	background-color: transparent;
	background-repeat: no-repeat;
	text-align: left;
	direction: ltr;
	line-height: 1px;	
}
	
	
/* ------------------------------------------------------------------------------ */
/* print CSS */
/* ------------------------------------------------------------------------------ */
@media print
{
	
/* ------------------------------------------------------------------------------ */
/* reset */
/* ------------------------------------------------------------------------------ */
*, html, body, div, ul, p { margin:0px; padding:0px; }
img { border: 0; }
ul { list-style:none; background:none; }
a { color: #000 !important; text-decoration: underline !important; }
.clear { clear:both; }

/* ------------------------------------------------------------------------------ */
/* global */
/* ------------------------------------------------------------------------------ */
html, body { background: none; background-color: #fff; font-family:Arial, Helvetica, sans-serif; width:100%; }

/* ------------------------------------------------------------------------------ */
/* hidden content */
/* ------------------------------------------------------------------------------ */
#navigationFrameIndex,
#primaryNavigationIndex,
#flash,
#upcomingEvents,
#latestNews,
#wrapperFooter p,
#wrapperFooter div,
#wrapperHeaderIndex 
{ display: none !important; }

/* ------------------------------------------------------------------------------ */
/* plain bg */
/* ------------------------------------------------------------------------------ */
#wrapperIndex,
#wrapperFrame,
#wrapperHeaderIndex,
#wrapperBodyIndex,
#welcome,
#wrapperLeft,
#wrapperRight,
#wrapperFooter
{ background: none !important; }

#wrapperLeft,
#wrapperRight,
#welcome,
#pods {
	width: 90%; 
	margin: 0 !important;
	padding: 0 !important; 
	position: static !important; 	
}
#wrapperLeft:before {
	font-size: 22pt;
	font-weight: bold;
	content: "Welcome";
	display: block;
	margin-bottom: 0.5em;
}
#pods {
	margin-bottom: 3em !important; 	
}
#news:before {
	font-size: 18pt;
	font-weight: bold;
	content: "Latest News";
	display: block;
	margin-bottom: 0.5em;
}
#events:before {
	font-size: 18pt;
	font-weight: bold;
	content: "Upcoming Events";
	display: block;
	margin-bottom: 0.5em;
}
#flashBottom { display: none; }
#wrapperBodyIndex {
	padding-bottom: 3em !important; 	
}



#wrapperFooter {
	margin-left: 0 !important;
	padding-left: 0 !important; 
	position: static !important; 	
}
#wrapperFooter:before {
	font-size: 10pt;
	content: "© Copyright 2012 Mount St. Joseph's Girls College";
	display: block;
	margin: 1em 0 !important;
}


/* ------------------------------------------------------------------------------ */
/* clear fix */
/* ------------------------------------------------------------------------------ */
/** {	float: none !important;	clear: both !important; }*/

}


/* Updates and fixes May 2016 */

#wrapperLeft ul#pods li#take-school-tour {
	display: none;
}


#wrapperBodyIndex #wrapperRight ul#news li p.calendar {
    display: none;
}