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

@media screen and (min-width: 1024px){
	
/*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:400px; 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 (in the template I have used a 25px gutter for most spacings in desktop styles) */
.padding-right { margin:0; padding-right:25px;}

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

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

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

/*quote and word definition panels*/

.quote {
	position:relative;
    padding-left:67px;}

.quote:before {
        position:absolute;
        font-family:FontAwesome;
        top:15px;
        left:15px;
        content: "\f10d";
		font-size:38px;
		color:#BBBBBB;}
	
.key {
	position:relative;
    padding-left:67px;}

.key:before {
        position:absolute;
        font-family:FontAwesome;
        top:15px;
        left:15px;
        content: "\f084";
		font-size:38px;
		color:#377495;}

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

body{
	margin:0;
	padding:0;
	font-family:Calibri, Arial, Helvetica, sans-serif;}
	
.clear{
	clear:both;}

.current { text-decoration:underline; font-weight:bold;color:#377495;}
	
#container-wrapper{
	margin:0 auto 0 auto;
	padding:45px 30px 55px 30px;
	width:auto;
	max-width:1400px;}
	
#container{
	margin:0;
	padding:0;}

#header a:hover { color:#E0FFCC;}
	
#header-inner{
	margin:0;
	padding:12px 0 20px 25px;
	width:auto;}

#fixed-top-band{
	margin:0;
	padding:10px 16px 0px 16px;
	position:fixed;
	left:0;
	top:0;
	right:0;
	height:52px;
	background-color:#062736;
	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;
	z-index:500;
}
	
#fixed-top-band a{
	font-size:30px;
	color:#FFFFFF;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);
	text-decoration:none;}
	
#fixed-top-band a:hover{ color:#377495;}

#menu-toggle{
	margin:0;
	padding:0;
	float:left;
	width:60px;
	display:none;}
	
#menu-inner{
	margin:0;
	padding:0;
	width:auto;
	float:left;
	display:none;}
	
#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;}
	
.fittext-menu i:hover { color:#E0FFCC;}

#section{
	margin:0;
	padding:0;
	float:left;
	width:60%;}
	
#section-title{
	margin:0;
	padding:0;
	width:auto;
	float:left;}
	
#section-title h1{
	margin:0;
	padding:0 30px 0 0;
	text-align:left;
	font-size:1.5e;
	color:#FFFFFF;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);
	display:inline;}

#help{
	margin:0;
	padding:0;
	position:relative;
	float:right;
	width:63px;}
	
#help a {font-size:31px;}
	
#help i{
	margin:0;
	padding:0 0 0 13px;}
	
.icon-key {
	margin:0;
	padding:0;
	display:block;
	float:right;}
	
#keyModal h2{
	text-align:center;}
	
#keyModal hr{ padding:0 0 15px 0;}

#sticky-bits{
	margin:0;
	padding:0;
	width:70px;
	float:right;}

#sticky-bits .buttons{
	margin:0;
	padding:0;
	float:right;
	width:65px;}
	
#sticky-bits .buttons p{
	margin:0;
	padding:0;
	line-height:1;}
	
#sticky-bits .buttons a{color:#FFF;}
#sticky-bits .buttons a:hover{color:#377495;}
	
#sticky-bits .btn-back, #sticky-bits .btn-fwd{
	margin:0;
	padding:0;
	width:50%;
	display:block;}
	
#sticky-bits .btn-fwd{
	float:right;
	text-align:right;}
	
#sticky-bits .btn-back{
		float:left;
	text-align:left;}
	
#sticky-bits .btn-fwd p, #sticky-bits .btn-back p{
	margin:0;
	padding:0;
	line-height:1;
	display:block;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);}
		
#sticky-bits i.icon-chevron-left, #sticky-bits i.icon-chevron-right { font-size:30px;}

.sticky-inner {
	margin: 0;
	padding:0;}

.buttons{
	margin:0;
	padding:0;
	float:right;
	width:8%;}
	
.buttons p{
	margin:0;
	padding:0;
	line-height:1;}
	
.buttons a{color:#FFF;}
.buttons a:hover{color:#E0FFCC;}
	
.btn-back, .btn-fwd{
	margin:0;
	padding:0;
	width:50%;
	float:left;
	text-align:left;
	display:block;}
	
.btn-fwd{
	float:right;
	text-align:right;}
	
.btn-back{
	float:left;
	text-align:left;}
	
.btn-fwd p, .btn-back p{
	margin:0;
	padding:0;
	line-height:1;
	display:block;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);
	font-size:37px;}
	
#page{
	margin:0;
	padding:25px 25px 0 25px;
	min-height:500px;
	position:relative;
	background-color:#FFF;
	border: 3px solid #E0FFCC;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.41);
	min-height:400px;}
	
.browsehappy{ text-align:center;}
.browsehappy a{ color:#000000;}
	
#sidr{
	margin:0 0 25px 0;
	padding:0;
	width:20%;
	float:left;
	border-right:3px solid #E0FFCC;}
	
nav {
	margin:0;
	padding:0 25px 0 0;}
	
nav ul {
	margin:0;
	padding:0;
	list-style:none;}
	
nav li {
	margin:0;
	padding:7px 0 7px 0;
	border-top:1px solid #062634;}

nav li:last-child {
	border-bottom:1px solid #062634;}
	
nav ul li ul {
	margin:0;
	padding:0 0 0 25px;}
	
nav ul li ul li {
	margin:0;
	padding:0;
	border-top:none;
	font-size:80%;}
	
nav ul li ul li:first-child {
	padding:8px 0 4px 0;}
	
nav ul li ul li:last-child {
	border-bottom:none;
	padding-bottom:2px;}
	
nav a{
	margin:0;
	padding:0;
	color: #062634;
  	text-decoration: none;
	display:block;}
	
nav a:hover{
	color:#377495;}
	
nav .icon-home, nav .icon-book{
	margin:0;
	padding:0 10px 0 10px;}
	
.index .columns-layouts a{ display:none;}
.book-shelf .columns-layouts a{ display:none;}
.slideshow .columns-layouts a{ display:none;}
	
#content-wrapper{
	margin:0;
	padding:0;
	float:right;}
	
article{
	margin:0;
	width:auto;}
	
/*=========================*/

/*styling for changing classes when nav is toggled*/

.content-width{width:80%;}
.content-full-width{width:100%;}
.article-padding{padding:0 0 0 25px;}
.article-remove-padding{padding:0;}

/*=========================*/
	
article h1{
	background-color:#062736;
	color:#FFF;
	margin:0 0 0.6em 0;
	padding:6px 0 6px 12px;}
	
article h2{ color:#377495;}

article h3{ color:#377495;}

article p{
	margin:0;
	padding:0 0 25px 0;}
	
article p a{color:#377495;}
article li a{color:#377495;}
article a:hover{color:#F15700;}

article ul{
	margin:0;
	padding:0 0 25px 15px;}
	
/*==============================================*/
	
/*ICONS*/

.activity, .reading, .info, .print, .writing-task, .reading-task, .download, .audio-sound, .watch-video, .web-link, .illustration, .map, .discussion, .game, .file, .text-file, .spreadsheet, .collaborate, .reflective-journal, .research {
	margin:0 0 25px 0;
	padding:15px;
	border:2px solid #062736;
	min-height:80px;
	-webkit-border-radius: 9px;
	border-radius: 9px;}

.activity i, .reading i, .info i, .print i, .writing-task i, .reading-task i, .download i, .audio-sound i, .watch-video i, .web-link i, .illustration i, .map i, .discussion i, .game i, .file i, .text-file i, .spreadsheet i, .collaborate i, .reflective-journal i, .research i {
	margin:0;
	padding:0 15px 5px 0;
	float:left;
	font-size:60px;
	color:#062736;}
	
.activity p, .reading p, .info p, .print p, .writing-task p, .reading-task p, .download p, .audio-sound p, .watch-video p, .web-link p, .illustration p, .map p, .discussion p, game p, .file p, .text-file p, .spreadsheet p, .collaborate p, .reflective-journal p, .research p { padding:0 0 15px 0; color:#062736;}

.activity p, .reading h3, .info h3, .print h3, .writing-task h3, .reading-task h3, .download h3, .audio-sound h3, .watch-video h3, .web-link h3,  .illustration h3, .map h3, .discussion h3, .game h3, .file h3, .text-file h3, .spreadsheet h3, .collaborate h3, .reflective-journal h3, .research h3 {color:#062736;}

.activity {border-color:#F15700;}
.activity i{color:#F15700;}
.activity p {color:#F15700;}
.activity h3 {color:#F15700;}

.info {border-color:#bbb;}
.info i{color:#bbb;}
.info p {color:#bbb;}
.info h3 {color:#bbb;}

.print {border-color:#377495;}
.print i{color:#377495;}
.print p {color:#377495;}
.print h3 {color:#377495;}
	
/*==============================================*/
	
#footer-wrapper{
	margin:0;
	padding:0;}
	
footer{
	margin:0;
	padding:18px 0 0 0;}
	
#uhi-logo{
	margin:0;
	padding:0;
	width:10%;
	float:left;}
	
#uhi-logo img{
	margin:0;
	padding:0;
	width:100%;
	max-width:100%;
	height:auto;}
	
#bottom-buttons{
	margin:0;
	padding:0;
	width:100px;
	float:right;}
	
/*editable area - this is the copyright text styles, for the background photo, located under the main page, and the progress bar*/
.copyright-footer{
	text-align:right; 
	margin:0;
	padding:10px 0 0 0;
	color:#CCC; 
	font-size:80%; 
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);}

#progress-wrapper{
	margin:0;
	padding:0;
	position:fixed;
	left:0;
	bottom:0;
	right:0;
	height:35px;
	overflow:visible;
	z-index:501;
	background-color:#062736;
	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 13px;
	position:relative;
	float:left;
	width:150px;}
	
#pagination-numbers{
	margin:0;
	padding:8px 0 2px 13px;
	position:relative;
	width:70px;
	float:left;}
	
#pagination-numbers p {
	margin:0;
	padding:0;
	color:#FFF;
	font-size:13px;
	text-align:left;}
	
.progress { height:13px;}

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

section p { padding:0;}

#back-to-top{
	margin:0;
	padding:8px 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:#FFF;}


.imageright {
    float: right !important;
    margin: 0 0 5px 25px;
    width: 50%; 
}
}