@charset "utf-8";

@import url("fontawesome-4.6.3.min.css");
@import url("custom.flexslider.css");
@import url("timetable_framework.css");

table { empty-cells: show; text-align: center}
#smallTimetable{display:none;}
.centerSmall{}
.leftTextSmall{}


.scroll-wrapper {
	-webkit-overflow-scrolling: touch;
  	overflow-y: scroll;

	/* important:  dimensions or positioning here! */
}

.scroll-wrapper iframe {
	/* nada! */
}

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row1{border-bottom:1px solid;}
.row2{border-bottom:1px solid; margin:auto; text-align:center}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}



/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#CBCBCB; background-color:#1A1A1A;}
a{color:#003C68;}
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#56AED4;}
.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.80);}
.rightBorder{border-color:#D7D7D7;}
.leftBorder{border-color:#D7D7D7;}
.borderbox{border-color:#253A54;}
.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#253A54; border-color:#ffffff;}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}

.icon{color:#003C68; border-color:inherit;}
.icon:hover{color:#FFFFFF; background-color:#003C68;}

/* Rows */
.row1{color:#FFFFFF; border-color:rgba(255,255,255,.2);}
.row2, .row2 a{}
.row3 {
    color: #888888;
    background-color: #FFFFFF;
}
.row4{color:#CBCBCB; background-color:#272727;}
.row5, .row5 a{color:#CBCBCB; background-color:#1A1A1A;}

.coloured{color:#FFFFFF; background:linear-gradient(to top right,#253A84,#253A54);}
.coloured .btn{color:inherit; background-color:transparent; border-color:inherit;}
.coloured .btn:hover{color:#000000; background-color:#FFFFFF;}

/* Header */
#header #logo a{color:inherit;}


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:978px){
	.hoc{max-width:978px;}

}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:900px){
	.hoc{max-width:90%;}
	
	#largeTimetable{display:none;}
	#smallTimetable{display:block;}

	#header{padding:30px 0 15px;}
	#header #logo{margin:0;}

	#mainav{ }
	#mainav ul{display:none; }
	#mainav form{display:block; width:100vw;}

	#breadcrumb{}

	.container{}
	.sideHeader{ display:block;}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}


@media screen and (max-width:750px){

	.leftTextSmall{ text-align:left}
	.centerSmall{width:100%}
	.rightBorder{border:none}
	.leftBorder{border:none}
	.half_sized{width:auto}
	.imgl, .imgr{float:none; margin:0 auto; display:block; padding:0px; width:100%; }
	.imgl, .imgr{padding-bottom:30px}
	.fl_left, .fl_right{display:block; float:none;}
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; padding:0;}

	#header{text-align:center;}
	#header #logo{margin-bottom:15px;}

	.cta > :first-child{margin-top:0;}

	#footer{padding-bottom:50px;}/* Not needed, just looks a little better */
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){

	
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}

	#pageintro li article{max-width:none; width:100%;}
	#pageintro li .heading{font-size:2rem;}

	#introblocks ul, #introblocks ul li{display:block; width:100%; height:100%;}
	#introblocks ul li{padding:25px; border-width:0 0 1px 0;}
}.centerSmall {
}
.leftTextSmall {
}