/******************************************************************
Copyright Blue Chilli Studio 2010 | www.bluechillistudio.co.uk 
******************************************************************/
@media only screen and (max-width: 1249px) {
	#mainHeader {
		/*background: #FF0000 /*RED*/;
	}
}
@media only screen and (max-width: 1120px) {
	#mainHeader {
		/*background: #00FF00 /*GREEN*/;
	}
	#mainHeader #logo {
		left: 5px;
	}
	#mainHeader #search {
		right: 5px;
	}
	#mainHeader #SHNav ul li a {
		padding-left: 12px;
		padding-right: 12px;
	}
	#mainHeader #SHNav ul li.first a {
		padding-left: 0;
	}
}
@media only screen and (max-width: 979px) {
	#mainHeader {
		/*background: #0000FF /*VERY BLUE*/;
	}
	#mainHeader #SHNav ul li a {
		padding-left: 7px;
		padding-right: 7px;
		font-size: 14px;
	}
	#mainHeader #SHNav ul li.first a {
		padding-left: 0;
	}
}
@media only screen and (max-width: 820px) {
	#mainHeader {
		/*background: #FFFF00 /*YELLOW*/;
	}
	#mainHeader #logo {
		top: 5px;
		width: 14%;
	}
	#mainHeader #schoolName, #mainHeader #search {
		top: 25px;
	}
	#mainHeader .navbar-collapse .navbar-nav {
		padding-left: 0;
	}
	#mainHeader #SHNav ul li a {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 14px;
	}
	#mainHeader #SHNav ul li.first a {
		padding-left: 10px;
	}
}
@media only screen and (max-width: 780px) {
	.news-article .listMedia {
		padding-left: 0;
	}
	.staff-page .staff-img {
		margin-right: 25px;
	}
}
@media only screen and (max-width: 767px) {
	body {
		padding-bottom: 50px;
	}
	#mainHeader {
		/*background: #00FFFF /*CYAN*/;
		box-shadow: none;
	}
	#mainHeader #SHNav .navbar-toggle {
		float: right;
		margin-right: 0;
	}
	#mainHeader #SHNav .navbar-collapse {
		background: #f6d500;
	}
	#mainHeader #SHNav .navbar-collapse ul li {
		float: none;
		text-align: right;
		border: none;
	}
	#mainHeader #SHNav .navbar-collapse ul li a {
		padding-right: 25px;
		border-bottom: 1px solid #666;
		color: #666;
	}
	#mainHeader #SHNav .navbar-collapse ul li a:hover {
		color: #666;
	}
	#mainHeader #SHNav .navbar-collapse ul li.dropdown b.caret {
		display: none;
	}
	#mainHeader #SHNav .navbar-collapse ul li.dropdown:hover > ul.dropdown-menu {
		display: none;
	}
	#homepageBanner {
		margin-bottom: 0;
	}
	.homePod {
		padding-left: 0px;
		padding-right: 0px;
	}
	.homePod .podOne, .homePod .podTwo, .homePod .podThree {
		height: auto;
	}
	#templateOptions,#templateBack {
		display: none;
	}
	#templateOptionsMob {
		display: block !important;
	}
	#mainContent {
		padding-top: 15px;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		margin: 0 !important;
	}
	#mainContent .mainText {
		padding-right: 0;
	}
	#mainContent .mainText .newsEvents li {
		padding-left: 0;
		padding-right: 0;
	}
	#mainContent .leftColMob {
		margin-bottom: 15px;
	}
	.blog_feed .media {
		position: relative;
		display: block;
		text-align: center;
	}
	.galleryOverview_default .galCover {
		height: auto !important;
	}
	.galleryOverview_default .galCover img {
		width: 100%;
		height: auto !important;
	}
	.galleryOverview_default h3 {
		padding: 5px;
	}
}
@media only screen and (max-width: 735px) {
	#mainHeader {
		/*background: #FF00FF /*MAGENTA*/;
	}
}
@media only screen and (max-width: 640px) {
	.staff-page .staff-img, .staff-page .staff-details {
		width: 100%;
		clear: both;
	}
	.staff-page .staff-img {
		margin-bottom: 15px;
	}
	.staff-page .staff-img img {
		display: block;
		margin: 0 auto;
	}
	#mainHeader {
		/*background: #FF9900 /*ORANGE*/;
		height: 152px;
	}
	#mainHeader #search {
		display: none;
	}
	#mainHeader #logo {
		height: 92px;
		width: 82px;
	}
	#mainHeader #schoolName {
		left: 102px;
	}
	#mainHeader #schoolTag {
		left: 102px;
	}
	body {
		font-size: 13px;
	}
	#footer {
		margin: 0;
	}
	#footer #footerInner {
		min-height: 270px;
	}
	#footer #footerInner .contactDetails {
		display: none;
	}
	#footer #footerInner .contactDetailsMob {
		display: block;
	}
	#footer #footerInner .address, #footer #footerInner .schoolHub {
		float: none;
		width: 100%;
		text-align: center !important;
	}
}
@media only screen and (max-width: 420px) {
	#mainHeader {
		/*background: #CCCCFF /*LILLACK*/;
	}
	#mainHeader #schoolName {
		font-size: 20px;
	}
}