@import url("editorstyles.css");
/**
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for
 * additional information regarding copyright ownership.

 * The Apereo Foundation licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except in
 * compliance with the License. You may obtain a copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* change this file to rebrand your version of Xerte Online Toolkits */

body {
	font-family:	Arial, sans-serif;
}

#x_mainHolder {
	border:		1px solid #010101;
	box-sizing: border-box;
}

#x_headerBlock {
	color:			#FFFFFF;
	background: #010101; /* Old browsers */
	background: -moz-linear-gradient(top,  #010101 0%, #434343 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#010101), color-stop(100%,#434343)); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top,  #010101 0%,#434343 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top,  #010101 0%,#434343 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top,  #010101 0%,#434343 100%); /* IE10 preview */
	background: linear-gradient(to bottom,  #010101 0%,#434343 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010101', endColorstr='#434343',GradientType=0 ); /* IE6-9 */
}

#x_footerBlock {
	font-size:		1em;
	color:			#FFFFFF;
	background: #010101; /* Old browsers */
	background: -moz-linear-gradient(top,  #010101 0%, #434343 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#010101), color-stop(100%,#434343)); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top,  #010101 0%,#434343 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top,  #010101 0%,#434343 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top,  #010101 0%,#434343 100%); /* IE10 preview */
	background: linear-gradient(to bottom,  #010101 0%,#434343 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010101', endColorstr='#434343',GradientType=0 ); /* IE6-9 */
}

#x_footerBg {
	background-image:	url("../dots.png");
	background-repeat:	repeat-x;
}

#x_pageNo {
	background:	black;
}

h1 {
	font-size:	1em;
	margin:		0px;
}

h2 {
	font-size:	1.2em;
	margin:		5px 0px 0px;
}

h3 {
	font-size:	1em;
	margin:		0px;
}

.noFocus {
	border: 2px solid transparent;
}

.focusBorder {
	border-color: orange;
}

.bgDarken {
	background-color: black;
}

/* see pngs in modules/xerte/parent_templates/Nottingham/common_html5 to see how replacement images for buttons should be made (with 4 states in one image file) */
/* the easiest way is to keep button dimensions the same (42 x 40px) so background-positions below don't need adjusting */

.ui-button .ui-icon.x_help {					background-image: url("../help.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_help {		background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_help {		background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_help {	background-position: -84px 0px; }

.ui-button .ui-icon.x_info {					background-image: url("../info.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_info {		background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_info {		background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_info {	background-position: -84px 0px; }

.ui-button .ui-icon.x_colourChanger {				background-image: url("../colour_changer.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_colourChanger {		background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_colourChanger {		background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_colourChanger {		background-position: -84px 0px; }

.ui-button .ui-icon.x_home {					background-image: url("../home.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_home {		background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_home {		background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_home {	background-position: -84px 0px; }

.ui-button .ui-icon.x_glossary {				background-image: url("../glossary.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_glossary {	background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_glossary {	background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_glossary {background-position: -84px 0px; }

.ui-button .ui-icon.x_maximise {				background-image: url("../maximise.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_maximise {	background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_maximise {	background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_maximise {background-position: -84px 0px; }

.ui-button .ui-icon.x_minimise {				background-image: url("../minimise.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_minimise {	background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_minimise {	background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_minimise {background-position: -84px 0px; }

.ui-button .ui-icon.x_media {					background-image: url("../media.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_media {	background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_media {	background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_media {	background-position: -84px 0px; }

.ui-button .ui-icon.x_next {					background-image: url("../next.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_next {		background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_next {		background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_next {	background-position: -88px 0px; }

.ui-button .ui-icon.x_prev {					background-image: url("../previous.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_prev {		background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_prev {		background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_prev {	background-position: -88px 0px; }

.ui-button .ui-icon.x_prev_hist {					background-image: url("../previous_hist.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_prev_hist {	background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_prev_hist {	background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_prev_hist {	background-position: -88px 0px; }

.ui-button .ui-icon.x_saveSession {					background-image: url("../save_session.png"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_saveSession {	background-position: -44px 0px; }
.ui-button.ui-state-focus .ui-icon.x_saveSession {	background-position: -44px 0px; }
.ui-button.ui-state-active .ui-icon.x_saveSession {	background-position: -88px 0px; }

/* only used on flashCards page at the moment but could be used elsewhere too to better style buttons that only have font awesome icon on (no text) */
.circleBtn.ui-button .ui-button-text, .circleBtn.ui-button .ui-button-icon-primary, .circleBtn.ui-button .ui-button-icon-secondary {
	color: white;
}

.circleBtn.ui-button {
	border-radius: 100%;
}

.flatRBtn.ui-button {
	border-radius: 100% 0 0 100%;
}

.flatLBtn.ui-button {
	border-radius: 0 100% 100% 0;
}

.circleBtn.ui-button {
	background: #555;
	border-color: #555;
}

.circleBtn.ui-button.ui-state-hover, .circleBtn.ui-button.ui-state-focus, .circleBtn.ui-button.ui-state-active {
	background: #FF9900;
	border-color: #FF9900;
}

.circleBtn.ui-button-icon-only {
	height: 2.4em;
}

/*styling for optional show/hider footer tools*/
#x_footerChevron{
    color: white;
	background: none;
	border: none;
	height:45px;
	font-size: 14px !important;
	width:25px !important;
}

#x_footerChevron:focus, #x_footerChevron:hover {
	color: #FF9900;
}

/* PROGRESS BAR */
.pbContainer {
	background-color: #ddd;
}

.pbPercent {
	color: #ffffff;
}

.pbBar {
	background-color: #2196F3;
}

/* FONT AWESOME BUTTON ICONS */

/* chevron */
.fa-x-next:before { content: "\f054"; }
.fa-x-prev:before { content: "\f053"; }
.fa-x-next-circle:before { content: "\f138"; } /* circle versions are used in multiple perspectives & thumbnail viewer pages */
.fa-x-prev-circle:before { content: "\f137"; }

/* Media */
.fa-x-play:before   { content: "\f04b"; }
.fa-x-pause:before  { content: "\f04c"; }
.fa-x-mute:before   { content: "\f028"; }
.fa-x-unmute:before { content: "\f6a9"; }

/* arrow */
/*
.fa-x-next:before { content: "\f061"; }
.fa-x-prev:before { content: "\f060"; }
.fa-x-next-circle:before { content: "\f0a9"; }
.fa-x-prev-circle:before { content: "\f0a8"; }
*/
.fa-x-close:before { content: "\f00d"; }
.fa-x-refresh:before { content: "\f021"; }
.fa-x-acc-hide:before { content: "\f0da"; }
.fa-x-acc-show:before { content: "\f0d7"; }
.fa-x-btn-hide:before { content: "\f0d8"; } /* btn-hide/show used on transcript buttons */
.fa-x-btn-show:before { content: "\f0d7"; }
.fa-x-zoom-in:before { content: "\f00e"; }
.fa-x-zoom-out:before { content: "\f010"; }
.fa-x-download:before { content: "\f019"; }
.fa-x-copy:before { content:"\f0c5" }
.fa-x-info-circle:before { content:"\f05a" }
.fa-x-circle:before { content:"\f111" }
.fa-x-circle-o:before { content:"\f10c" }

/* decision tree overview icons */
.fa-x-info:before { content:"\f129" }
.fa-x-question:before { content:"\f128" }
.fa-x-lightbulb:before { content:"\f0eb" }

.fa-x-tick-circle:before { content:"\f058"} /* used for visited ticks in table of contents */

/* marking on interactivity pages */
.fa-x-tick:before { font-family: FontAwesome; content: "\f00c"; color: #62c562; }
.fa-x-cross:before { content: "\f00d"; color: #ff0000; }

/* Just the colour */
.fa-x-tick {
	font-family: FontAwesome; content: "\f00c"; color: #62c562;
}
.fa-x-cross {
	content: "\f00d"; color: #ff0000;
}

/* Media */
.fa-x-play:before { content: "\f04b"; }
.fa-x-pause:before { content: "\f04c"; }
.fa-x-mute:before { content: "\f028"; }
.fa-x-unmute:before { content: "\f6a9"; }

/*class for hidden screenreader only content*/
.sr-only {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.wcagLogo{
	position:absolute;
	top:3%;
	right:1%;
}
a:focus .wcagLogo {
	outline: -webkit-focus-ring-color auto 1px;
}

@media only screen
and (max-width :500px) {
	/*hide progress bar by default when viewed in portrait mode on mobiles*/
	/*if required change to display:block on themes where FA buttons are used*/
	#x_footerProgress {
		display: none;
	}
	.wcagLogo{
		position:relative !important;
		display:block;
		margin-bottom:10px;
		margin-top:10px;
		width:80px;
	}
}

/*fix button and text issue with footer narration controls in some themes*/
#x_footerBlock .mejs-controls .mejs-button button {
    font-size: 0 !important;
    height: 16px !important;
    width: 16px !important;
}
.featherlight iframe {
	height: 85vh;
	width: 85vw;
}

.featherlight-content {
	max-width: 95vw;
}

.x_homePageLink, .x_homePageLink:visited, .x_homePageLink:hover, .x_homePageLink:focus {
	color: inherit;
	text-decoration: none;
}

.skip-link {
	background: #000000;
	color: #ffffff;
	font-weight: 700;
	left: 50%;
	padding: 4px;
	position: absolute;
	transform: translateY(-100%);
	transition: transform 0.3s;
}
.skip-link a, .skip-link a:visited{
	color:#ffffff !important;
}

.skip-link:focus {
	transform: translateY(0%);
	color:#ffffff !important;
}
/*gap fill: change styling of correct and disable answers*/
.x_gapFill_page #targetHolder input[readonly].correct, .x_gapFill_page #targetHolder .target.correct, .x_gapFill_page #targetHolder input[correct], .x_gapFill_page #targetHolder select[disabled].correct {
	color:unset;
	color: green;
	opacity:1.0;
	font-weight:400;
	border-color: unset;
	border-width:2px;
	border-style:outset;
	background:#ffffff;
	cursor: default;
	padding:initial !important;
	caret-color: transparent;
}
/*gap fill: add ticks to correct answers*/
.x_crossword_page .li-clue p.correct:after, .x_gapFill_page #targetHolder input[readonly].correct+span:before, .x_gapFill_page #targetHolder input[correct]+span:before, .x_gapFill_page #targetHolder .target.correct+span:before,.x_gapFill_page #targetHolder select[disabled].correct+span:before{
	font-family: FontAwesome;
	content: "\f00c";
	color: green;
	margin-left:1px;
}
/*gap fill: drop down show answers styling*/
#targetHolder select[disabled].answerShown {
	color: #c36b00;
	opacity:1.0;
	font-weight:400;
	border-color: unset;
	border-width:2px;
	border-style:outset;
	background:#ffffff;
	cursor: default;
	padding:initial !important;
}
/*gap fill: show red crosses when incorrect and in tracking mode*/
.x_crossword_page .li-clue p.incorrect:after, .x_gapFill_page #targetHolder select[disabled]+span:before,.x_gapFill_page #targetHolder .target.incorrect+span:before, .x_gapFill_page #pageContents input[readonly]+span:before{
	font-family: FontAwesome;
	content: "\f00d";
	color: red;
	margin-left:1px;
}
/*gap fill: styling of disabled/incorrect responses when in tracking mode*/
.x_gapFill_page #targetHolder select[disabled],.x_gapFill_page #targetHolder .target.incorrect,  .x_gapFill_page #targetHolder input[readonly]{
	opacity:1.0;
	font-weight:400;
	border-color: unset;
	border-width:2px;
	border-style:outset;
	background:#ffffff;
	cursor: default;
	padding:initial !important;
}
/*gap fill: remove red crosses when show answers selected*/
.x_gapFill_page #targetHolder .target.answerShown+span:before, .x_gapFill_page #targetHolder select[disabled].answerShown+span:before, .x_gapFill_page #targetHolder input.answerShown+span:before {
	content:"";
}

#x_embed_overlay.embed-overlay-inactive {
	display: none;
}

#x_embed_overlay.embed-overlay {
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color: rgba(0,0,0,0.3);
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4em;
}