/* CSS for ST Michael's written by
P Vogel, for PBV studios 2016
colours for St Michaels are:
	Maroon:- #782C36 
	Yellow:- #FFF388
*/

/* General pages formatting */
.header .nav .sidebar .footer .content {
	display: block;
}

.float_right {
	float: right;
}

.float_left {
	float: left;
}

html { 
  background: url(images/background.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 
}

* {
	margin: 0px;
	box-sizing: border-box;
}

.page {
	width: 80%;
	margin-left: 10%;
	background-color: white;
	height: auto;
	margin-bottom: 10px;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}

.content p{
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	color: #636363;
	position: relative;
	background-color: white;
	margin: auto;
	}

.links a{
	color: #782C36;
}
	
.fixed_width {
	width: 100%;
	padding: 30px 5px 20px 20px;
	color: #636363;
	height: auto;
	overflow: hidden;
}
	
.full_page {
	padding: 30px 20px 20px 25px;
	min-height: 900px;
	overflow: hidden;	
}

h1{
	color: #782C36;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}

h2, h3, h4, h5{
	font-style: italic;
	color: #782C36;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}	

.bold {
	font-weight: bold;
}

.header {
	position: relative;
	background-color: white;
	height: 150px;
	margin: auto;
	margin-top: 10px;
}

.school_name h1{
	line-height: 40px;
	font-size: 2.2em;
	font-family: "Times New Roman", Times, serif;
	color: #782C36;
	margin-left:20px;
	padding-top:40px;
}

.school_name h3{
	line-height: 60px;
	font-size: 1.8em;
	font-family: "Times New Roman", Times, serif;
	color: #782C36;
	margin-left:20px;
	margin-top: -15px;
}

.logo {
	float: left;
	padding: 20px 50px 20px 50px;
	}

/*photobanner formatting*/
 .photobanner {
	width: 100%;
	position: relative;
	margin: auto;
}

/* Photo caption text */
.caption_text {
	font-size: 1.5em;
	font-style: italic;
	padding: 15px 15px 20px 15px;
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
	background-color: white;
	opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

.maroon {
	/*color: #782C36;*/
	color: black;
	opacity: 1;
	font-weight: bold;
}

.yellow {
	color: #FFF388
}

.active {
	background-color: #717171;
}

/* fading picture */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {
	from{opacity:.4}
	to{opacity:1}
}

@keyframes fade {
	from{opacity:.4}
	to{opacity:1}
}

/* Main navigation */
.nav {
	width: 100%;
	margin: 0 auto;
	background-color: #FFF388;
	display: block;
}
	
.nav ul {
	margin: auto;
	padding: 0;
	position: relative;
	background-color: #FFF388;
	}
	
.nav li {
    list-style: none;
	display: block;
	float: left;
    text-align: center;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
    width: 16.6667%; 
    width: calc(100% / 6);
    box-sizing: border-box;
	background-color: #FFF388;
	position: relative;
}	

.nav ul li ul {
	width: 100%;
	min-width: 160px;
	top: 100%;
}

.nav ul li a {
    display: block;
	width: 100%;
    text-decoration: none;
    color: #782C36;
    padding: 10px 0;
}   

.nav ul ul {
	display: none;
	position: absolute;
	top: 110%;
	min-width: 180px;
	background-color: #FFF388;
	left: 0;
	padding: 0;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.nav ul ul li{
	float: none;
	display: block;
	width: 100%;
	border-bottom: 1px solid #FFF;
	position: static;
	left: 0;
	padding: 0;
	width: 100%;
	background-color: #FFF388;
	color: #782C36;
}

.nav ul ul a {
	line-height: 40px;
	display: block;
	width: 100%;
	text-align: center;
	display: block;
	padding: 0;
}

.nav ul li:hover ul {
	left: auto;
	margin-top: -2px;
	display: block;
	z-index: 1;
	top: 100%;
}


/* Sidebar, news and event formatting */	
.sidebar {
	width: 24%;
	position: relative;
	background-color: #FFF;
	margin: auto;
	float: right;
	top: 10px;
	border-left: 2px solid #782C36;	
	padding: 15px 5px 15px 5px;
	text-align: center;
	height: auto;
	/*margin-bottom: -50px;*/
	}
	
#welcome {
	float: left;
	width: 74%;
}

.sidebar h2, h3 {
	font-style: none;
}

.news{
	text-align: center;
	padding-bottom: 5px;
}

.term_dates {
	margin-left: 30px;
}

/* create the circles for the dates */
.date {
	background-color: #FFF388;
	text-align: center;	
	height: 35px;
	width: 35px;
	line-height: 35px;
	color: #782C36;
	border-radius: 50%;
	font-weight: bold;
}

.event p{
	float: right;
	padding-left: 20px;
}

/*	formatting for the school prayer */
.prayer {
	line-height: 35px;
	font-style: italic;
	text-align: center;
}

.prayer p {
	font-size: 20px;
}

/* Formatting for the timeline table */	
.first {
	width: 120px;
	font-weight: bold;
	color: #636363;
}

.timeline td{
	color: #636363;
	/*font-size: 20px;*/
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}

/*formatting for curriculum page */
.curriculum li {
	color: #636363;
	line-height: 25px;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}

/* foratting for performance reports */
.reports a {
	color: #782C36;
}

.report_link li, ul {
	list-style-type: none;
}

/* -- Newsletter Table elements -- */
.newsletter_table table {
	border-collapse: collapse;
	margin: 10px 15px;	
}

.newsletter_table tr {
	height: 35px;
}

.newsletter_table td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #FFF;
	border-bottom: solid 1px #ffffff;
}

.newsletter_table a {
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	color: #636363;
	text-decoration: none;
}
	
.newsletter_table td.first,th.first {
	border-left: 0px;
}

.newsletter_table tr.row-a {
	background: #FFFBC6;
}

/* formatting for canteen page */
/*menu button */
.menu {
float: right;
padding: -40px 10px 50px 20px;
margin-left: 20px;
z-index: 9999;
}

#green_letter {
	color: green;
	font-weight: bold;
	font-size: 30px;
}

#amber_letter{
	color: orange;
	font-weight: bold;
	font-size: 30px;
}

.order {
	color: #636363;
	line-height: 25px;
}

/* school hours page */
.table_format {
	color: #636363;
	margin-left: 20px;
	line-height: 25px;
}

.list_circles ul li{
	color: #636363;
	margin-left: 20px;
	line-height: 25px;
	list-style-type: circle;
}

.list_none ul li{
	color: #636363;
	line-height: 25px;
}

/* uniform page and shop */
.uniform_season	{
	color: #636363;
}

.shop {
	color: #636363;
	padding-left: 20px;
}

.church {
	float: right;
	width: 10px;
}

.wrapper {
width: 100%
}

/* formatting for contact page */
.map {
	float: right;
	margin-top: -50;
	position: relative;
	
}

/* Bullets */
ul.bullet {
list-style-image: url(/images/phone.jpg);
}

.gallery {
	height: auto;
}

/*formatting for picture galleries */
.gallery img {
	float: left;
	padding: 5px 5px 15px 5px;
	border: 1px solid #636363;
	height: 150px;
	margin-right: 10px;
	margin-top: 10px;
}

.gallery { 
padding-bottom: 50px;
}

#centred {
	text-align: center;
}

/*Formatting for footer */
.footer {
	position: relative;
	background-color: #FFF388;
	margin-top: 20px;
	text-align: center;
	color: #782C36;
	line-height: 40px;
	bottom: 20px;
}

.clear {
	position: relative;
	clear: all;
}

.clear_both {
	clear: both;
}

.left {
	float: left;
	Padding-top: 10px;
}