/**
 * 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;
}

#x_headerBlock {
	color:			#FFFFFF;
	background:		#434343; /* for non-css3 browsers */
	filter:			progid:DXImageTransform.Microsoft.gradient(startColorstr="#010101", endColorstr="#434343"); /* for IE */
	background:		-webkit-gradient(linear, left top, left bottom, from(#010101), to(#434343)); /* for webkit browsers */
	background:		-moz-linear-gradient(top,  #010101,  #434343); /* for firefox 3.6+ */
	background-image:	-o-linear-gradient(#010101, #434343); /* for Opera */
}

#x_footerBlock {
	font-size:		1em;
	color:			#FFFFFF;
	background:		#434343; /* for non-css3 browsers */
	filter:			progid:DXImageTransform.Microsoft.gradient(startColorstr="#434343", endColorstr="#010101"); /* for IE */
	background:		-webkit-gradient(linear, left top, left bottom, from(#434343), to(#010101)); /* for webkit browsers */
	background:		-moz-linear-gradient(top,  #434343,  #010101); /* for firefox 3.6+ */
	background-image:	-o-linear-gradient(#434343, #010101); /* for Opera */
}

#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; }


/* 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: grey;
}

/* 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"; }

/* 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 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;
	}
}