@charset "utf-8";
/* CSS Document */

@media screen and (min-width: 768px) and (max-width: 1023px){
	
.menu-open {padding-left:260px !important;}
	
/*GALLERIA*/
/* This rule is read by Galleria to define the gallery height. There must be a height or it wont work. This is defined sperately in the 3 stylesheets so that you ca choose. The galleria on a specific pageis targeted by using the id of the page (which is entered in Modify > Template Properties) eg. id 'page-name' is used here*/
#page-name #galleria{height:300px;}
#galleria-gallery #galleria {height:300px; margin:0 0 15px 0;}

/*on pages with gallery in modal window, have everything centred*/
#galleryModal {text-align:center;}

/*add padding to the right of a column*/
.padding-right-tablet { margin:0; padding-right:15px;}

/*add padding to the bottom of things (in the template I have used a 25px gutter for most spacings)*/
.padding-bottom{padding:0 0 25px 0;}

/*no padding*/
.no-padding {padding:0;}

article ol {
    margin: 0;
    padding: 0 0 25px 15px;}
	
.img-float-left { width:300px; margin:0 15px 10px 0; float:left;}	
.img-float-right { width:300px; margin:0 0 10px 15px; float:right;}

/*Puts a white line between the content and the vertical tabs (the same as the other typs of tabs)*/
.tabs-content.vertical.active {border-left: 1px solid white;}

/*============================================*/

body{
	margin:0;
	padding:0;
	font-family:Calibri, Arial, Helvetica, sans-serif;}
	
.clear{
	clear:both;}
	
#container-wrapper{
	margin:0 auto 0 auto;
	padding:62px 7px 7px 7px;
	width:auto;}
	
#container{
	margin:0;
	padding:0;}
	
header a:hover, header a:focus { color:#E0FFCC;}
	
#header-inner{
	margin:0;
	padding:0 5px 10px 10px;
	width:auto;}
	
#fixed-top-band{
	margin:0;
	padding:12px 16px 0px 16px;
	position:fixed;
	left:0;
	top:0;
	right:0;
	height:62px;
	/*box-shadow:0px 0px 5px rgba(0, 0, 0, 0.41);*/
	overflow:visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	opacity: .9;
	z-index:500;}
	
#fixed-top-band a{
	font-size:30px;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);
	text-decoration:none;}
	
#menu-toggle{
	margin:0;
	padding:0;
	float:left;
	width:32px;}
	
#menu-inner{
	margin:0;
	padding:0;
	width:auto;
	float:left;
	display:block;}
	
#menu-inner a{
	margin:0;
	padding:0;}
	
#menu-inner p{
	margin:0;
	padding:0;
	font-size:37px;
	display: block;
	line-height:1;
	color:#FFFFFF;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);}
	
#menu-inner i{
	margin:0;
	padding:0;}
	
/*==============*/

/*a different button is shown in desktop version (the nav is different)*/

#menu-toggle-desktop{display:none;}
	
#menu-inner-desktop{display:none;}
	
/*==============*/
	
.fittext-menu i:hover, .fittext-menu i:focus { color:#E0FFCC;}
	
#section{
	margin:0;
	padding:0 0 0 25px;
	float:left;
	width:60%;}
	
#section-title{
	margin:0;
	padding:0;
	width:auto;
	float:left;}
	
#section-title h1{
	margin:0;
	padding:8px 10px 0 0;
	text-align:right;
	font-size:18px;
	color:#FFFFFF;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);}
	
#help{
	margin:0;
	padding:5px 0 0 0;
	position:relative;
	float:right;
	width:35px;}
	
#help i{
	margin:0;
	padding:0 0 0 20px;}
	
#help a {font-size:37px; display: flex;}
	
.icon-key {
	margin:0;
	padding:0;
	display:block;
	float:right;}
	
#keyModal h2{
	text-align:center;}
	
#keyModal hr{ padding:0 0 15px 0;}
	
.buttons{
	margin:0;
	padding:5px 0 0 0;
	float:right;
	width:65px;}
	
.btn-back, .btn-fwd{
	margin:0;
	padding:0;
	width:50%;
	float:left;}
	
.btn-fwd{float:right; text-align:right;}
	
.btn-back{float:left; text-align:left;}

.buttons p{margin:0; padding:0; line-height:1;}
	
.buttons i.icon-chevron-left, .buttons i.icon-chevron-right { 
	font-size:37px;
	line-height:1;
	/*display:block;*/
/*	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);*/}
	
/*#bottom-buttons i { text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);}*/
	
.buttons a{ 
	margin:0;
	padding:0;
	font-size:30px !important; 
	color:#FFF;}
	
.buttons a:hover, .buttons a:focus{color:#377495;}
	
#page{
	margin:0;
	padding:15px 15px 0 15px;
	position:relative;
	background-color:#FFF;
	min-height:400px;}
	
#sidr{
	margin:0;
	padding:0;
	float:left;
	border-right:none;
	display:none;}
	
nav {
	margin:0;
	padding:0;}
	
nav ul {
	margin:0;
	padding:0;}
	
nav li {
	margin:0;
	padding:0px 0 0px 0;
	border-top:1px solid #ffffff;}

nav li:last-child {
	border-bottom:1px solid #ffffff;}
	
nav a{
	margin:0;
	padding:0;
	color: #ffffff;
  	text-decoration: none;
	display:block;}
	
nav a:hover, nav a:focus{
	color:#377495;}
	
nav .icon-home, nav .icon-book{
	margin:0;
	padding:0 10px 0 10px;}
	
#content-wrapper{
	margin:0;
	padding:0;
	width:auto;
	float:none;}
	
article{
	margin:0;
	padding:0;
	width:auto;}	
	
article h1{
	margin:0 0 0.8em 0;
	text-align:center;}

article p{
	margin:0;
	padding:0 0 25px 0;}

article ul{
	margin:0;
	padding:0 0 25px 20px;}
	
article ol{
 	margin:0;
 	padding:0 0 25px 20px;}

/*==============================================*/
	
/*ICONS*/

.activity-wrapper {
	margin:0 0 25px 0;
	padding:15px;
	border:2px solid #062736;
	min-height:92px;
	-webkit-border-radius: 9px;
	border-radius: 9px;}

.activity-wrapper .fa-headphones, 
.activity-wrapper .fa-film, 
.activity-wrapper .fa-book, 
.activity-wrapper .fa-download, 
.activity-wrapper .fa-info-circle, 
.activity-wrapper .fa-link, 
.activity-wrapper .fa-font, 
.activity-wrapper .fa-print, 
.activity-wrapper .fa-question-circle, 
.activity-wrapper .fa-asterisk, 
.activity-wrapper .fa-comments-o, 
.activity-wrapper .fa-users, 
.activity-wrapper .fa-edit, 
.activity-wrapper .fa-history {
	margin:0 !important;
	margin:0 15px 0 0 !important;
	float:left !important;
	font-size:25px !important;
	color:#062736 !important;}
	
.activity-wrapper .fa-font {border:2px solid #062736; padding:2px 3px 2px 3px; font-size:17px !important; -webkit-border-radius: 6px; border-radius: 6px;}
	
.activity-wrapper p { padding:0 0 15px 0; color:#062736;}

.activity-wrapper h3 {color:#062736;}
	
/*==============================================*/


#footer-wrapper{
	margin:0;
	padding:0;}
	
footer{
	margin:0;
	padding:17px 0 0 0;}
	
#bottom-buttons{
	margin:0;
	padding:0;
	width:80px;
	float:right;}
	
.copyright-footer{
	margin:0;
	padding:15px 0 0 0;
	text-align:center;
	font-size:80%;
	clear:both;}
	
#progress-wrapper{
	margin:0;
	padding:0;
	position:fixed;
	left:0;
	bottom:0;
	right:0;
	height:35px;
	overflow:visible;
	z-index:501;
	/*box-shadow:0px 0px 5px rgba(0, 0, 0, 0.75);*/
	overflow:visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	opacity: .9;}
	
#progress-inner{
	margin:0;
	padding:12px 0 2px 10px;
	position:relative;
	float:left;
	width:100px;}
	
#pagination-numbers{
	margin:0;
	padding:8px 0 2px 13px;
	position:relative;
	width:70px;
	float:left;}
	
#pagination-numbers p {
	margin:0;
	padding:0;
	color:#0070c0;
	font-size:13px;
	text-align:left;}
	
.progress { height:13px;}

.progress .meter { background-color:#377495;}

button, .button{ background-color:#377495;}

section p { padding:0;}

#back-to-top{
	margin:0;
	padding:5px 20px 0 0;
	width:100px;
	float:right;}
	
#top-link p{
	margin:0;
	padding:0;
	display:block;
	text-align:right;}
	
a#top-link {
	margin:0;
	padding:0; 
	font-size:13px;
	color:#0070c0;}
	
}