@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		7;
	dw-num-cols-desktop:	9;
	dw-gutter-percentage:	15;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Global properties for all mobile, tablet and desktop setttings. Some of the
   settings directly below are specific for phones, then tablet and desktop 
	 have more settings defined via media queries below the global properties. */
	 
h1{
	color:#003;
	font-size:180%;
  border-bottom: 1px groove #069;
}

h2{
	color:#0A3854;
	font-size:160%;
}

h3{
	color:#0A3854;
	font-size:130%;
}

h4{
	color:#0A3854;
	font-size:110%;
}

h5{
	color:#fff;
	font-size:110%;
	margin-bottom:.4em;
}

p{
	color:#003;
}

a{
	color:#0066FF;
	text-decoration:none;
}

a:visited{
  color:#0066FF;
}

a:hover{
	text-decoration:underline;	
}

/* This stops phone numbers on apple phones from being formatted as blue with an underline for all phone numbers. */
a[href^=tel]{
	color:inherit;
	text-decoration:none;
}

ul li{
	margin-bottom:5px;
  color:#003;
}

ul.no_list_style{
	padding-left:0;
}
	ul.no_list_style li{
		list-style:none;
	}
	
ol li{
	margin-bottom:.6em;
}

input[type='submit']{
  padding:5px;
  background-color:#006699;
  color:white;
}
	

	
/*******************************************************/
		
/* This is the CSS for most of the site, however the menu is mostly styled by sm-simple_custom.css.

/*******************************************************/

.gridContainer {
	width: 98%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0%;
	padding-right: 0%;
}

#header_container {
	clear: both;
	float: left;
	margin:0 0 1.9em 0;
	width: 100%;
	display: block;
	background: url(../images/header_container_bg_sml.gif) repeat-x top left;	
}

	#header {   
		width: 100%;
		height: 100%;
		margin:0 auto 0 auto;
		max-width: 550px;
		position:relative;
		border:0px solid #0F0;
	}
	
		#logo {
			position:absolute;
			top:.6em;
			left:2%;
			width:10.5em;
			border:0px solid #ccc;
		}	
		
		#logo_xmas {
			position:absolute;
			top:.1em;
			left:2%;
			width:10.5em;
			border:0px solid yellow;
		}			
					
		#mini_contact_details{
			display:block;
			margin-top:0.5em;
			border:0px solid yellow;
		}						
			#mini_contact_details p{
				text-align:right;
				margin:0 1em 0 0;
				font-size:1.3em;
				line-height:1.5em;
				color:#dddddd;
			}	
			
		/* The div container that holds the menu_toggle link. */
		#menu_button{
			text-align:right;
			margin:1em 1em 0 0;
			border:0px solid yellow;
		}
			#menu_button a{
				font-size:1.3em;
				color:white;
				text-decoration:none;
				padding-left:15px;
				border:0px solid red;
				cursor:pointer;
		  }
		  #menu_button a:hover{
				color:yellow; 
		  }			
			 
			/* #menu_toggle is defined in sm-simple_custom.css */

		/* nav_menu is the container for the main-menu. It's handled by sm-core-css.css and sm-simple_custom.css */
		#nav_menu {
			width:100%;
			font-size: 1.25em;
			margin-top:0.7em;
			border:0px solid orange;
		}
		
		/* This is the container that holds the user_menu, which is controlled by sm-core-css.css and sm-simple_custom.css */
		#user_nav{
			width:100%;
			font-size: 1.25em;
			border:0px solid orange;			
		}
								
		#user_search {
			display:none;
			width:100%;
			background-color:white;
			padding:0.8em 0;
		}
			#user_search form{
				width:90%;
				margin:0 auto;
			}
				#user_search form input{
					background-color:#eee; 
					border-radius:0.3em;
					border-color:white;
					border-width:1px;
					color:#777777;
					width:100%;
					font-size:1.3em;
					padding:0.5em 0;
					text-align:center;
				}

#main_image {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	/*background: url(../images/main_image_bg_sml.jpg) no-repeat top center;*/
	/*height:12.4em;*/
	border:0px solid #ccc;
	
}
	
#page_header_image_container{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
	#page_header_image{
		max-width:990px;
		margin:0 auto;
	}

#main_content_container {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom:2em;
}

	#main_content{
		width: 100%;
		max-width: 550px;
		margin: 0em auto 0 auto;
		padding:0;
		border-radius:1em;
	}	
	
		#content{ /* For all pages other than home page. */
			background-color:#fff; 
			padding:0.5em 1.5em 2.5em 1.5em; 
			border-radius:0; 
			margin-top:0; 
			min-height:40em;
		}
		
		#quick_link_container{
			float:left; 
			width:100%; 
		}
		
		#news_box_container{
			float:left; 
			width:100%; 
		}

#footer_container {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #003351;
	color: white;
	height: 100%;
	margin-top:2em;
	padding-bottom:2em;
}	
	#footer {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		max-width: 550px;
		/*padding-top: 1em;*/
	}
		#footer_left {
			float: left;
			width: 100%;
			text-align:center;
			background-color:#041F2F;
			margin-bottom:1em;
		}
			#footer_left a{
				color:white;
			}
			#footer_left a.calendar{
				background:url(../images/calendar_icon.png) left top no-repeat; 
				padding-left:21px;
			}
			#footer_left a#news{
				background:url(../images/news_icon.png) left top no-repeat; 
				padding-left:21px;
			}
			#footer_left a#contact{
				background:url(../images/contact_icon.png) left top no-repeat; 
				padding-left:21px;
			}
		#footer_middle {
			float: left;
			width: 100%;
			text-align: center;
		}
      #footer_middle p{
        color:white;
      }		
		#footer_right {
			float: right;
			width: 100%;
			text-align: center;
		}
      #footer_right a{
        color:white; 
      }
	#footer ul{
		padding-left:1.5em;
	}

/* Universal properties for the small quick link boxes. */
.quick_link_box {
	clear: none;
	float: left;
	margin-left: 2.5%;
	margin-top:1.5em;
	width: 46%;
	display: block;
}
	.quick_link_box a{
		color:white;
		text-decoration:none;
	}
	.quick_link_box_header{
	width: 100%;
	color: #ffffff;
	font-size: 1.1em;
	text-align: center;
	padding: 0.7em 0;
	border-radius: 1em 1em 0em 0em;
	letter-spacing: 0.05em;
	background-color: #0078A8;
	}
	.quick_link_box_body{
		min-height: 6.6em;
		width: 100%;
		color: #ffffff;
		font-size: 1.1em;
		background-color:#008FC6;
		position:relative;
	}
		.quick_link_box_body p{
			z-index:1;
			color:white;
		}			
		.quick_link_box_body img{
			position:absolute;
			bottom:0;
			right:0;
		}
    .quick_link_box_body ul{
      margin:0; 
      padding:.8em .8em .3em 1.8em; 
    }


/* Specific properties for the small quick link boxes. */
#principals_box{
	text-decoration:none;
}
	#principals_box_header{
		background-color: #A45200;
	}
	#principals_box_body {
		background-color: #D96D00;
	}
		#principals_box_body p{
			margin: 0;
			position: absolute;
			left: 0.7692em;
			top: 1.2em;
		}

#newsletter_box{
	text-decoration:none;
}
	#newsletter_box_header{
		background-color: #777700;
	}
	#newsletter_box_body {
		background-color: #A8A800;
	}
		#newsletter_box_body p{
			margin: 0;
			position: absolute;
			left: 0.7692em;
			top: 0.5em;
			z-index:1;
			line-height:1.9em;
		}
		#newsletter_box_body img{
			position: absolute;
			right: 0px;
			bottom: 0px;
		}

#contact_box{
	display:block;
}
	#contact_box_header{
		background-color: #207D00;
	}
	#contact_box_body {
		background-color: #2DB200;
	}
		#contact_box_body p{
			margin: 0;
			position: absolute;
			left: 0.7692em;
			top: 0.5em;
			z-index:1;
			color:white; /* Required for the phone number. */
			line-height:1.9em;
		}

#stud_protection_box p{
  margin: 0;
  position: absolute;
  left: 0.7692em;
  top: 1.2em;
}#stud_protection_box img{
  top:0;
}
	
/* Student Notes */
#spare_box1{
	text-decoration:none;
}
	#spare_box1 p{
		margin: 0;
		position: absolute;
		left: 0.7692em;
		top: 1.1em;
		z-index:1;
	}
	
/* Mercy College App */
#spare_box2{
	text-decoration:none;
}
	#spare_box2 p{
		margin: 0;
		position: absolute;
		left: 0.7692em;
		top: 1.7em;
		z-index:1;
	}

/* Used for special promos like Christmas and promo video. */
#spare_box3{
	text-decoration:none;
}
	#spare_box3 .quick_link_box_header{
		/*background:url(../images/temp/christmas_decoration.png) left top no-repeat;*/
    /*background-color:#F1082A;*/
    background-color: #6F4E40;
		color:#fff;
		font-size:1.2em;
	}
	#spare_box3 .quick_link_box_body{
		/*background:url(../images/temp/christmas_video_bg.jpg) center top no-repeat;*/
    background:url(../images/temp/mercy_promo_video.jpg) left top repeat-x;
	}
		#spare_box3 p{
			margin:0;
			position:absolute;
      bottom:5px;
      right:10px;
			text-align:center;
      font-size:16px;
      color:#ffffff;
	}
		#spare_box3 p:nth-child(2){
			margin:0;
			padding-top:.7em;
			text-align:center;
	}
		#spare_box3 p:nth-child(3){
			margin:0;
			margin-top:.7em;
			padding-top:.5em;
			text-align:center;
			border-top:1px solid #ccc;
			color:#FFFF73;
	}	

#spare_box4{
	text-decoration:none;
}
	#spare_box4 p{
		margin: 0;
		position: absolute;
		left: 0.7692em;
		top: 1.1em;
		z-index:1;
	}

#spare_box4{
	text-decoration:none;
}
	#spare_box4 p{
		margin: 0;
		position: absolute;
		left: 0.7692em;
		top: 1.1em;
		z-index:1;
	}

/* Used for special promo videos. */
#spare_box5{
	text-decoration:none;
}
	#spare_box5 .quick_link_box_header{
    background:url(../images/temp/christmas_decoration.png) left top no-repeat;    
    background-color: #BE0003;
		color:#fff;
		font-size:1.2em;
	}
	#spare_box5 .quick_link_box_body{
    background:url(../images/temp/christmas_2019.jpg) left top no-repeat;
	}
		#spare_box5 p{
			margin:0;
			position:absolute;
      bottom:5px;
      right:10px;
			text-align:center;
      font-size:16px;
      color:#ffffff;
	}
		#spare_box5 p:nth-child(2){
			margin:0;
			padding-top:.7em;
			text-align:center;
	}
		#spare_box5 p:nth-child(3){
			margin:0;
			margin-top:.7em;
			padding-top:.5em;
			text-align:center;
			border-top:1px solid #ccc;
			color:#FFFF73;
	}	

/* Used for special promo videos. */
#spare_box6{
	text-decoration:none;
}
	#spare_box6 .quick_link_box_header{
    background-color: #0078A8;
		color:#fff;
		font-size:1.2em;
	}
	#spare_box6 .quick_link_box_body{
    background:url(../images/temp/hpv_race.jpg) left top repeat-x;
	}
		#spare_box6 p{
			margin:0;
			position:absolute;
      bottom:5px;
      right:10px;
			text-align:center;
      font-size:16px;
      color:#ffffff;
	}
		#spare_box6 p:nth-child(2){
			margin:0;
			padding-top:.7em;
			text-align:center;
	}
		#spare_box6 p:nth-child(3){
			margin:0;
			margin-top:.7em;
			padding-top:.5em;
			text-align:center;
			border-top:1px solid #ccc;
			color:#FFFF73;
	}	

/* Temporary box to display pre-enrolment info and link to enrolment page. */
#pre-registration{
	width:95%;
}
	#pre-registration .quick_link_box_header{
		font-size:1.5em;
	}
	#pre-registration .quick_link_box_body{

	}
		#pre-registration .quick_link_box_body p{
			margin:0;
			padding:10px;
		}		
		#pre-registration .quick_link_box_body p#link{
			text-align:center; 
			font-weight:bold; 
			font-size:1.5em;
		}
	
#calendar_box{
	clear: none;
	float: left;
	margin-left: 2.5%;
	margin-top:1.5em;
	width: 94.5%;
	display: block;
	color:white;
}

	#calendar_box_header{
		width: 100%;
		color: #ffffff;
		font-size: 1.1em;
		text-align: center;
		padding:0.7em 0;
		border-radius: 1em 1em 0em 0em;
		letter-spacing: 0.05em;
		background-color:#0078A8;
	}
		#calendar_box_header a{
			color:#ffffff;
			text-decoration:none;
		}
	
	#calendar_box_body{
		width: 100%;
		color: #ffffff;
		font-size: 1.1em;
		background-color:#008FC6;
		max-height:12em;
		overflow:auto; /* Leave this as hidden, else the calendar doesn't display the colours correctly. The footer spills into the body. */
	}
		
		#calendar_box_body table{
			margin:0 .5em;
		}
    #calendar_box_body table tr.row1 td{
      text-align:center; 
    }
    #calendar_box_body table tr.row1 td a{
      color:white; 
    }
		#calendar_box_body table td{
			padding:0.3em;
		}
		
	#calendar_box_footer{
		background-color:#0078A8;
		text-align:center;
		padding:0.7em 0;
	}		
		#calendar_box_footer a{
			color:white;
			text-decoration:none;
			font-weight:bold;
		}

#news_box {
	clear: none;
	float: left;
	margin-left: 2.5%;
	margin-top:1.5em;
	width:95%;
	display: block;
	border:
}

	#news_box ul{
		padding:0;
		margin:0;	
	}
	
	#news_box_header{
		width: 100%;
		background-color:#444444;
		opacity:0.8;
		filter:alpha(opacity=80); /* For IE8 and earlier. */
		padding: 1em 0;
		border-radius: 1.5em 1.5em 0em 0em;
		position:relative;
	}
	
		#news_box_header p{
			color: #ffffff;
			text-align: center;
			font-size: 1.9em;
			letter-spacing: 0.05em;
			margin:0 auto 0 auto;
			width:82%;
		  border:0px solid #000;
		}
		#news_box_header p a{
			color:white;
			text-decoration:none;
		}
		#news_box_header img.news_button_previous{
			/*float:left;*/
			position:absolute;
			top:50%;
			margin-top:-1em;
			left:0.4em;
			display:block;			
			cursor:pointer;
		}
		
		#news_box_header img.news_button_next{
			/*float:right;*/
			position:absolute;
			top:50%;
			margin-top:-1em;
			right:0.4em;
			display:block;
			cursor:pointer;
		}
		
	#news_box_body{
		font-size: 1.1em;
		padding:0.8em;
		background: url(../images/news_box_body_bg.gif) repeat;
	}
		#news_box_body p{
			margin-top:0;
		}
      #news_box_body p.author{
        font-style: italic;
        text-align: right;
      }
		#news_box_body img{
			display: block;
			margin: 0 auto;
			border: 1px solid #333333;
		}
		#news_box_body ul{
			margin-left:1em;
      margin-bottom: 1em;
      font-size: .9em;
		}
      #news_box_body ul li{
        margin-bottom:.3em;
      }
		
	#news_box_footer{
		color: #ffffff;
		font-size: 1.1em;
		background-color:#444444;
		text-align:center;
		padding:1em 0;
	}

		#news_box_footer a{
			color:white;
			text-decoration:none;
			font-weight:bold;
		}
		
.image{
	margin:0.8em 0.8em 0.8em 0;
	border:1px solid #999;
}		
	
.image_right{
	float:right;
	margin:0.8em 0 0.8em 0.8em;
	border:1px solid #999;
}		

.image_left{
	float:left;
	margin:0.8em 0.8em 0.8em 0;
	border:1px solid #999;
}	

.image_left_no_border{
	float:left;
	margin:0.8em 0.8em 0.8em 0;
}

.image_right_no_border{
	float:right;
	margin:0.8em 0 0.8em 0.8em;
}	

/* A general format for all tables. */
table.general_tbl{
	width:100%;
	border-left:1px solid #ccc;
	margin-top:10px;
	font-size:100%;
} /* The 'font-size' attribute was added for IE 5.0, which displayed the text too large. */

table.general_tbl th{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	border-top:1px solid #ccc;
	background-color:#003366;
	color:#ffffff;
	text-align:center;
	padding:0.5em 0;
}

table.general_tbl td{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:0.5em 0.3em;
}

table.general_tbl tr.odd_row{
	background-color:#ffffff;
}

table.general_tbl tr.even_row{
	background-color:#E7F1F5;
}

table.general_tbl td ul{
	margin-left:12px;
	padding-left:12px;
}

/* A general format for all tables with left aligned headings and columns and no borders or backgrounds. */
table.general_tbl_left{
	width:100%;
	margin-top:10px;
	font-size:100%;
} /* The 'font-size' attribute was added for IE 5.0, which displayed the text too large. */

table.general_tbl_left th{
	text-align:left;
}

table.general_tbl_left td{
	padding:0.3em 0.3em;
	text-align:left;
	vertical-align:top;
}

/* A general format for all tables with no border. */
table.borderless_tbl{
	width:95%;
	margin-top:10px;
	font-size:100%;
} /* The 'font-size' attribute was added for IE 5.0, which displayed the text too large. */

table.borderless_tbl th{
	background-color:#003366;
	color:#ffffff;
	text-align:center;
}

table.borderless_tbl td{
	padding:1px 0px 1px 3px;
}		

/* A table with headings running down the left column of the table. Use the general_tbl then add this one. */
table.horizontal_tbl{
  border-top:1px solid #ccc;
}

table.horizontal_tbl th{
  padding-left: .5em;
  padding-right: .5em;
  background-color: #069;
  width:40px;
}

table.horizontal_tbl td{
  
}
	
/* For lists that need more space between items. */	
ul.spacey_list{
	margin-left:1.0em;
	padding-left:1.0em;	
} 
	ul.spacey_list li, ol.spacey_list li{
		margin-bottom:0.8em;
	}
	
/* For lists with a small left margin. */
ul.small_left_margin{
	margin-left:0.4em;
	padding-left:0.4em;
}
	ul.small_left_margin li, ol.small_left_margin li{
		margin-bottom:0.8em;
	}

/* Calendar of events table. */
table#event_calendar{
	width:100%;
	border-top:1px solid #003366;
	border-left:0px solid #ccccff;
	margin-top:10px;
	font-size:100%;
} /* The 'font-size' attribute was added for IE 5.0, which displayed the text too large. */

table tr#show_hide_events{
	background-color:#ddd;
}

table#event_calendar th{
	border-right:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	background-color:#003366;
	color:#fff;
	text-align:center;
	padding:5px;
}

table#event_calendar th a{
	color:#CCFFFF;
}

table#event_calendar tr.odd_row{
	background-color:#ffffff;
}

table#event_calendar tr.even_row{
	background-color:#E7F1F5;
}

table#event_calendar td{
	border-right:0px solid #ccccff;
	border-bottom:0px solid #ccccff;
	padding:7px 0px 7px 0px;
}

table#event_calendar td.calendar_date{
	text-align:left;
}

table#event_calendar td.calendar_event{
	width:35%;
	padding-left:10px;
}

table#event_calendar td.calendar_details{
	width:55%;
	padding-left:10px;
}

/* The contact us table. */
table#contact_us{
	/*width:450px;*/
}

table#contact_us td{
	padding:3px;
	text-align:left;
}

table#contact_us th{
	padding:3px;
	font-weight:bold;
	vertical-align:top;
	text-align:left;
	border:0;
}

/* News in full table. */
div#full_news{
	margin-bottom:25px;
	padding-top:0px;
}

div#full_news div.article{
	border-radius:1em; 
	border:1px solid #ccc; 
	padding:1em; 
	padding-bottom:0;
	margin-top:2em;	
	background-color:#F9F9F9;
	clear:both;
  overflow:auto; 	/* So floated images don't poke out the bottom of the article. */
}

div#full_news div.article p.author{
  font-style: italic;
  text-align: right;
}

div#full_news h2{
  margin-bottom:15px;
	padding:3px;
	border:1px dotted #ccc;
	background-color:#FFFFCC;
}

div#full_news h3{
	clear:both;
	margin-bottom:3px;
}

div#full_news span.news_date{
	margin-top:0;
	margin-bottom:5px;
	font-size:85%;
	color:#999;
	display:block;
}

div#full_news div.news_body{
	margin-top:5px;
	margin-bottom:20px;
}

div#full_news div.news_body ul{
	padding-left:1em;
}

div#full_news div.news_body table{
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
}

div#full_news div.news_body table th{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:2px;
}

div#full_news div.news_body table td{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:2px;
}

/* Archived news. */
div#archived_news{
	margin-bottom:10px;
	margin-top:40px;
	clear:both;
}

div#archived_news span.news_date{
	margin-top:0;
	font-size:85%;
	color:#999;
}

div#archived_news h2{
	margin:0;
	margin-bottom:20px;
	border:1px dotted #ccc;
	background-color:#FFFFCC;
}

div#archived_news h3{
	margin:0;
}

div#archived_news h3 a{
	color:#333;
}

div#archived_news div.news_being_read{
	border:0px solid #39c;
	padding:5px;
}

div#archived_news div.body{
	margin-top:5px;
}

div#archived_news div.body p.author{
  font-style: italic;
  text-align: right;
}

div#archived_news div.body table{
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
}

div#archived_news div.body table th{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:2px;
}

div#archived_news div.body table td{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:2px;
}
	
/* For the Academic -> iPad Program and the Students -> iPad Setup & Help pages */
div#ipad_program_buttons{
	width:95%; 
	margin:0 auto; 
	border:0px solid #ccc;
}
	div#ipad_program_buttons a{
		width:40%; 
		background-color:#CC0; 
		display:block; 
		float:left; 
		margin-left:5%; 
		margin-top:1em;
		text-align:center; 
		height:1.5em; 
		padding:2.5em 0.1em;
		color:white;
		border-radius:1em;
	}
		div#ipad_program_buttons a:hover{
			text-decoration:none; 			
		}
	div#ipad_program_buttons a#goals_button{
		background-color:#06C;
		border:3px solid #005BB7;
	}
		div#ipad_program_buttons a#goals_button:hover{
			background-color:#005BB7;
		}		
	div#ipad_program_buttons a#requirements_button{
		background-color:#F60;
		border:3px solid #E85C00;
	}
		div#ipad_program_buttons a#requirements_button:hover{
			background-color:#E85C00;
		}		
	div#ipad_program_buttons a#responsibilities_button{
		background-color:#093;
		border:3px solid #00842B;
		margin-right:0;
	}
		div#ipad_program_buttons a#responsibilities_button:hover{
			background-color:#00842B;
		}		
	
	/* Found on the Students -> iPad Setup & Help page. */
	div#ipad_program_buttons a#setup_button{
		background-color:#06C;
		border:3px outset #06C;
		padding:1.5em .1em;
		font-size:1.4em;
	}
		div#ipad_program_buttons a#setup_button:hover{
			background-color:#005BB7;
			cursor:pointer;
		}
	div#ipad_program_buttons a#help_button{
		background-color:#F60;
		border:3px outset #F60;
		padding:1.5em .1em;
		font-size:1.4em;
	}
		div#ipad_program_buttons a#help_button:hover{
			background-color:#E85C00;
			cursor:pointer;
		}

div#ipad_goals, div#ipad_requirements, div#ipad_responsibilities, div#ipad_help, div#ipad_setup{
	padding-top:1.5em;
}
	
	div#ipad_setup > div > h3, div#ipad_help > div h3{
		display:inline-block;
		margin:.7em 0;
		font-weight:normal;
	}

	div#ipad_setup a.show_hide, div#ipad_help a.show_hide{
		display:inline-block;
		background-color:#F9F9F9; 
		border:1px outset #ccc; 
		border-radius:.3em;
		padding:.2em;
		width:7em;
		text-align:center;	
		margin-left:.5em;
		text-decoration:none;
		color:#333;
		cursor:pointer;
	}
	
	div#ipad_setup a.show_hide:hover, div#ipad_help a.show_hide:hover{
		background-color:#E2E2E2; 
	}
	
	div#ipad_setup h3 a:visited, div#ipad_setup h3 a:link, div#ipad_setup h3 a:hover{
		text-decoration:none;
		color:#0A3854;
		font-weight:normal;
	}
	
	div#ipad_help div.section_heading{
		 font-size:1em;
		 border-bottom:1px dotted #ccc;
		 margin:2em 0 1em 0;
	}	

div.help_box{
	border-radius:1em; 
	border:1px solid #ccc; 
	padding:1em; 
	padding-bottom:0;
	margin-top:1em;	
	margin-bottom:1em;
	background-color:#F9F9F9;
}
	div.help_box h3{
		margin-top:0;
	}
    div.help_box h3 span.sub_heading{
      color:red;
      font-weight:normal;
    }
	div.help_box input[type='submit']{
		min-width:100px;
		padding:15px; 
		background-color:#0078A8; 
		border-radius:10px; 
		color:white; 
		text-align:center;
	}
	
	div.help_box input[type='text'], div.help_box input[type='password']{
		min-width:100px;
		padding:15px 0;  
		border-radius:10px;
		text-align:center;	
	}
	
a#enrol_ipad_button{
	display:block; 
	width:120px; 
	background-color:#0078A8; 
	padding:15px 0; 
	border-radius:10px; 
	color:white; 
	text-align:center;
}
	a#enrol_ipad_button:hover{
		text-decoration:none;			
	}
		
/* For links to PDF documents. */
a.pdf_link{
	padding-left:15px;
	background-image:url(../images/pdf_icon_sml.gif);
	background-position:left center;
	background-repeat:no-repeat;	
}

/* For email links. */
a.email_link{
	padding-left:18px;
	background-image:url(../images/mail_icon.gif);
	background-position:left center;
	background-repeat:no-repeat;
}		

/* For PDF lists .*/
ul.pdf_list{
	padding-left:1.5em;
	margin-bottom:2em;
}

	ul.pdf_list li{
		list-style-image:url(../images/pdf_icon_sml.gif);
		margin-bottom:.8em;
	}

ul.pdf_link_list{
	padding-left:1.1em;
}

ul.pdf_link_list li{
	list-style-type:none;	
	margin-bottom:.8em;
}

ul.pdf_link_list li a{
	padding-left:18px;
	background-image:url(../images/pdf_icon_sml.gif);
	background-position:left center;
	background-repeat:no-repeat;	
}
	
/* The iPad Apps required. */
div.ipad_app_icons{
	overflow:auto;
	border:0px solid #ccc;
}

	div.ipad_app_icons a{
		display:block;
		float:left; 
		width:135px; 
		min-height:150px;
		text-align:center;
	}
	
	div.ipad_app_icons a:hover{
		opacity:.8;
		text-decoration:none;
	}
	
	div.ipad_app_icons p{
		margin:5px 0;
	}
	
	div.ipad_app_icons h4{
		clear:left;
		margin-left:1em;
		padding-top:1.5em;
		padding-bottom:.5em;
		border-bottom:1px dotted #bbb;
		font-size:115%;
	}

/* Used for messages to the user when the successfully interacted with the database. */
.db_success{
	color:#00CC00;
}

.db_fail{
	color:red;
	background-color:white;
	margin:5px 0 5px 0;
	display:inline;
}

/* For the message displayed after adding or editing an assessment item. */
div#msg_success{
	background-color:#009900;
	color:white;
	padding:2px;
	margin-bottom:10px;
}

div#msg_fail{
	background-color:#FF0000;
	color:white;
	padding:2px;
	margin-bottom:10px;
}

/* For the displaying of the assessment calendar on the printer friendly page. */
body#print_view{
  background-color:white;
	color:black;
	font-size:10px;
}

body#print_view h2{
	color:#000;
}

body#print_view h3{
	color:#000;
	 margin-top:5px;
	 font-size:14px;
}

body#print_view a{
	color:#000;
}

body#print_view table{
  margin-top:0;
}

body#print_view table.general_tbl th{
  background-color:white;
	color:#000;
	border-color:#999;
	font-weight:bold;
	font-size:12px;
}

body#print_view table.general_tbl td{
  background-color:#ffffff;
	color:black;
	border-color:#999;	
	font-size:12px;
}

/* The logged in | ut info displayed in the left column when admin is logged in. The code for this id is in the footer. */
p#logged_in_logout{
	position:absolute;
	left:50%;
	top:10px;
	margin-left:-230px;
	background-color:#CCFFCC;
	width:365px;
	border:3px double #006600;
	padding:5px;
}

/* For the assessment calendar form. */
form#assessment_form{
	
}
	form#assessment_form input, form#assessment_form select, form#assessment_form textarea{
		border:1px solid #999;
	}
	form#assessment_form input[type='file']
	{
		border:0;
	}
	form#assessment_form input[type='submit']
	{
		padding:0.5em 2em; 
		background-color:#069; 
		color:white
	}
	form#assessment_form input#date_due, form#assessment_form input#date_given{
		background-image:url(../images/calendar_icon.gif);
		background-repeat:no-repeat;
		background-position:right;
		cursor:pointer;
	}
	
/* For the Calendar page to display the form that filters the calendar events. */
form#event_selection{
	margin:1.5em auto 0.8em auto;
	border:0px solid #ccc;
	width:120px;
}
  form#event_selection span{
		display:block;
		margin-bottom:0.4em;
	}
	form#event_selection label{
		display:block;
		padding:0.35em 0;
	}	
	form#event_selection input[type='checkbox']{
		border:1px solid #ccc;
	}

  /* For the Academic -> Honour Roll page */
  div#honour_roll_buttons{
    width:100%; 
    margin:0 auto; 
    border:0px solid #ccc;
  }
    div#honour_roll_buttons a{
      width:100%; 
      background-color:#0078A8; 
      display:block; 
      margin-top:1px;
      text-align:center; 
      padding:.5em 0.1em;
      color:white;
    }
      div#honour_roll_buttons a:hover{
        background-color:#083957;
        text-decoration: none;
      }	
      div#honour_roll_buttons a.selected{
        background-color:#083957;
      }
	
/* Set the scroll bars with the webkit so they are visible with Safari on iPads (they still work in IE, Chrome and FF). */
::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 8px;
}
::-webkit-scrollbar-track {
	background-color: rgba(156,156,156, 1);
	border-radius: 8px;
}
::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background-color: rgba(80, 80, 80, .6);
}
	
/* Used to display videos from youtube, which are in an iframe. */
.youtube_container{
	position:relative;
	padding-bottom:56.25%; /* For 16:9 videos. Use 75% for 4:3 */
	padding-top:30px; /* Specific to Youtube videos. */
	height:100px;
	overflow:hidden;
	background-color:red;
}
	.youtube_container iframe{
		position:absolute;
		top:0;
		left:0;		
		width:100%;
		height:100%;
	}
	
/* For the Catholic Education Week silent auction. Apr 2016. */
#auction{
	display:block;
	width: 250px;
	clear:both;
	margin:25px auto 12px auto;
	border:1px solid #6873A3;
	border-radius:10px;
	background-color:#D8DAE6;
	text-decoration:none;
  font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	text-align:center;
}
  #auction p{
		margin:0;
		padding:7px 0;
	}
	#auction p#p2{
		background-color:#323754;
		color:white;
		font-size:1.3em;
		padding:3px 0;
	}

/* For the Student Protection Page. */
.stud_prot_link{
  background-color: aliceblue; 
  padding:5px; 
  text-align: center; 
  border:1px solid #B9E7F5; 
  display:block; 
  font-size:110%;
  width:96%;
  margin:0 auto;
}
  .stud_prot_link:hover{
    text-decoration: none;
  }
.stud_prot_contact{
  float: left;
  width:32%;
  text-align: center;
  margin-right:1%;
}
.stud_prot_contact img{
  margin-bottom: .5em;
}

/* about_us_staffing.php */
.staff_list .maternity_leave{
  color:#999;
}
	
.none {
}

.zeroMargin_mobile {
margin-left: 0;
}

.hide_mobile {
display: none;
}

/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/

/* Tablet Layout: 551px to 768px. Inherits styles from Global layout above. */
@media only screen and (min-width:551px){	
	.gridContainer {
		width: 100%;
	}
	
	#header_container {
		margin-bottom:0;
		height:9.9em;
		background: url(../images/header_container_bg_med.gif) repeat-x top left;	
		border:0px solid yellow;
	}
	
		#header {
			max-width: 768px;			
			border:0px solid #0F0;
		}
		
			#logo {
				top:-.5em;
				width:9em;
				border:0px solid #ccc;
				z-index:1;
			}
			
			#logo_xmas {
				top:-.5em;
				width:9em;
				border:0px solid #ccc;
				z-index:1;
			}			
			
			#mini_contact_details{
				display:none;
			}		
			
			#menu_button{
				display:none;
			}
			
			#user_nav{
				display:block;
				margin:1.1em 0 0 auto;	
				border:0px solid red;
				width:20em;
			}
			
			#user_search {
				display:none;
				margin-top:0em;
				background-color:transparent;
				border:0px solid green;
			}
				#user_search form{
					width:12em;
					margin:0 6em 0 auto;
					text-align:center;
					border:0px solid yellow;
				}
					#user_search form input{
						background-color:white; 
						border-radius:0.6em;
						border-width:0;
						color:#cccccc;
						padding:0.25em 0;
					}
									
			#nav_menu {
				display:block;
				position:absolute;
				top:58px; /* Leave as px for better uniformity among browsers. */
			}
						
	#main_image { 
		/*background: url(../images/main_image_bg_med.jpg) no-repeat top center;*/
		/*height: 21.5em;*/
	}
	
	#main_content_container{
		margin-bottom:0;
	}	
	
		#main_content{
			width: 100%;
			max-width: 768px;
			margin: 0 auto 0 auto;
		}	
		
			#quick_link_container{
				width:60%; 
			}		
			
			#news_box_container{
				width:38%; 
			}
	
	#footer {
		max-width: 768px;
	}
		#footer_left {
			width:23%;
			background-color:#003351;
			text-align:left;
			padding-left:1em;
		}
		#footer_middle {
			width:50%;
		}
		#footer_right {
			width:23%;
      text-align:right;
		}
	
	#contact_box{
		display:block;
	}
		
	#spare_box1{
		display:block;
	}
				
	#calendar_box_body{
		overflow:auto;
		max-height:15em;
	}

	#news_box {
		clear: none;
		float: left;
		margin-left: 1.2%;
		width:100%;
		display: block;
		position:relative;
		top:-8.4em;
	}
	
		#news_box_header{
			width: 100%;
			background-color:#444444;
			opacity:0.8;
			filter:alpha(opacity=80); /* For IE8 and earlier. */
			padding: 1em 0;
			border-radius: 1.5em 1.5em 0em 0em;
			position:relative;
		}
			#news_box_header p{

			}
			#news_box_header img#news_button_previous{
				margin-top:-12px;
			}
			#news_box_header img#news_button_next{
				margin-top:-12px;
			}
			
		#news_box_body{
			max-height:38em;
			overflow:auto;
		}
				
		/* For the ipad program buttons. */
		div#ipad_program_buttons a{
			width:18%;
			margin-right:5%;
			margin-left:0;
		}
		
	/* For the Calendar page to display the form that filters the calendar events. */
	form#event_selection{
		margin:1.5em auto 0.8em auto;
		border:0px solid #ccc;
		text-align:center;
		width:450px;
	}
	  form#event_selection span{
			display:inline;
			margin-bottom:0;
		}
		form#event_selection label{
			display:inline-block;
			margin-left:1.8em;
			padding:0;
		}	
		form#event_selection input[type='checkbox']{
			border:1px solid #ccc;
		}
  
  /* For the Academic -> Honour Roll page */
  div#honour_roll_buttons a{
    width:14%; 
    float:left; 
    margin-left:.4em; 
    margin-top:1em;
    padding:2.5em 0.2em;
    border-radius:1.5em;
  }
		
	.none{
	}		
	.hide_tablet{
	display: none;
	}		
	.zeroMargin_tablet{
	margin-left: 0;
	}		
	
} /* End of @media only screen and (min-width: 551px) */

/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/

/* Desktop Layout: 769px to a max of 990px.  Inherits styles from: Tablet layout and Global layout. */
@media only screen and (min-width:769px){
	.gridContainer {

	}
	
	#header_container {
		height: 13.30em;
		background: url(../images/header_container_bg.gif) repeat-x top left;
	}
		#header {   
			max-width: 990px;
		}
		
			#logo {
				top:-.2em;
				width:29%;
				border:0px solid yellow;
			}
			
			#logo_xmas {
				top:0em;
				width:27%;
				border:0px solid yellow;
			}
							
			#user_search {
				margin-top:1em;
			}
				
			#nav_menu {
				top:96px; /* Leave as px for browser uniformity. */
				/*left:20px;*/
				width:100%; /* Modified 12/10/18. Was 72% */
				border:0px solid red;
			}
        #nav_menu ul{
          float: right;
          margin-right: 70px;
        }
				
	#main_image {
		background: url(../images/main_image_bg.jpg) no-repeat top center;
		/*height: 30.9em;*/
	}
	
	#main_content{
		max-width: 990px;
	}	
	
		#quick_link_container{
			width:69%; 
		}
		
		#news_box_container{
			width:29%; 
		}
			
		#footer {
			max-width: 990px;
		}
			
	/* Universal properties for the small quick link boxes. */
	.quick_link_box {
		margin-left: 1.4705%;
		width: 31%;
	}
			
	#calendar_box{
		margin-left: 1.4705%;
		width: 63.47%;
	}
	
		
	#news_box {
		position:relative;
	}
				
		#news_box_body{
			max-height:39.5em;
		}		
  
  /* For the Academic -> Honour Roll page */
  div#honour_roll_buttons a{
    width:15%; 
    float:left; 
    margin-left:.5em; 
    margin-top:1em;
    padding:2.5em 0.2em;
    border-radius:1.5em;
  }  
		
	.zeroMargin_desktop{
		margin-left: 0;
	}
	.hide_desktop{
		display: none;
	}
	
}  /* End of @media only screen and (min-width: 769px) */