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

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