@import url("editorstyles.css");
/* change this file to rebrand your version of Xerte Online Toolkits */

body {
	background:#1c1c1c;
	font-family:	Arial, sans-serif;
	color: #cfcfcf;
}
a, #x_pageDiv span.x_glossary, #x_pageDiv span.x_glossary:link, #x_pageDiv span.x_glossary:visited, #x_pageDiv span.x_glossary:hover, #x_pageDiv span.x_glossary:active {
	color: #cfcfcf;
}

#x_mainHolder {
	border:		1px solid #1c1c1c;
	background-color: #1c1c1c;
}

#x_headerBlock {
	color: #cfcfcf;
		background-image: none;
	background-color: #1c1c1c;
}

#x_footerBlock {
	font-size:		1em;
	color:			#FFFFFF;
		background-image: none;
	background-color: #1c1c1c;
}

#x_footerBg {
	background-image: none;
}

#x_footerChevron {
	color: #CFCFCF;
}
#x_footerChevron:focus, #x_footerChevron:hover {
	color: #FFFFFF;
}

#x_pageNo {
	background:	#1c1c1c;
}

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

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

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

.featherlight .featherlight-content {
	background-color: #1c1c1c;
}

.qSeparator hr {
	background-color: #cfcfcf;
	border-color: #cfcfcf;
	border: solid 1px #cfcfcf;
}
.sliderHolder .labelHolder a p {
	color: #cfcfcf;
}

/* 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.svg"); 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.svg"); 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_home {					background-image: url("home.svg"); 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.svg"); 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.svg"); 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.svg"); 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.svg"); 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.svg"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_next {		background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_next {		background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_next {	background-position: -84px 0px; }

.ui-button .ui-icon.x_prev {					background-image: url("previous.svg"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_prev {		background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_prev {		background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_prev {	background-position: -84px 0px; }

.ui-button .ui-icon.x_prev_hist {					background-image: url("previous_hist.svg"); background-position: 0px 0px; }
.ui-button.ui-state-hover .ui-icon.x_prev_hist {	background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_prev_hist {	background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_prev_hist {	background-position: -84px 0px; }

.ui-button .ui-icon.x_colourChanger { background-image: url("colour_changer.svg"); 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_saveSession { background-image: url("save_session.svg");background-position: 0px 0px;}
.ui-button.ui-state-hover .ui-icon.x_saveSession {	background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_saveSession {	background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_saveSession {	background-position: -84px 0px; }

.ui-button .ui-icon.x_projectIntro { background-image: url("project_intro.svg");background-position: 0px 0px;}
.ui-button.ui-state-hover .ui-icon.x_projectIntro {	background-position: -42px 0px; }
.ui-button.ui-state-focus .ui-icon.x_projectIntro {	background-position: -42px 0px; }
.ui-button.ui-state-active .ui-icon.x_projectIntro {	background-position: -84px 0px; }

#x_footerBlock button.customIconBtn {
	color: #CFCFCF;
}

#x_footerBlock button.customIconBtn:not(.ui-state-disabled):hover, #x_footerBlock button.customIconBtn:not(.ui-state-disabled):focus {
	color: #FFFFFF;
}

.ui-dialog .ui-widget-header {
border: 1px solid #010101;
/*background: #010101 url(ui-bg_highlight-soft_75_2d2a2a_1x100.svg) 50% 50% repeat-x;*/
background-color: #1c1c1c;
color: #ffffff;
font-weight: bold;
background-image: none;
}

.panel {
	padding:			10px;
	background-color:	#1c1c1c;
	border:				1px solid #cfcfcf;
	-moz-box-shadow:    2px 2px 5px #888888;
	-webkit-box-shadow: 2px 2px 5px #888888;
	box-shadow:         2px 2px 5px #888888;
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#888888')";  for IE 8 
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#888888');  for IE 5.5-7 */
}

.panel.inline {
	display:	inline-block;
	margin:		0 20px 20px;
	background-color:	#1c1c1c;
}

/*.ui-widget-content {
  border: 1px solid #aaaaaa;
  background: #1c1c1c; url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; 
  color: yellow !important;
}*/

/*change font color for cards*/
#pageContents .card {
  color: #000000;
}

.x_grid_page #grid ul li {
	color: black !important;
}
.x_grid_page #gridBorders {
	background-color: inherit;
}
#x_footerBlock .ui-button-text{
	color:white;
}
.x_annotatedDiagram_page .listItem.highlight{
	background-color: #cfcfcf;
	color: #1c1c1c;
}

.x_gapFill_page #targetHolder .highlight {
	background:#000;
}

.x_gapFill_page #targetHolder .target.answerShown {
	color: #888;
}

.x_gapFill_page #targetHolder.outline .target.highlight {
	border: 1px dashed #cfcfcf;
}
.x_gapFill_page #targetHolder.underline .target.highlight {
	border-bottom: 1px solid #cfcfcf;
}

.x_audioRecord_page .deleteClipBtn {
	color: #cfcfcf;
}

.x_audioRecord_page .deleteClipBtn:hover, .x_audioRecord_page .deleteClipBtn:focus, .x_audioRecord_page .deleteClipBtn:active {
	color: white;
}

.x_audioRecord_page .clip.highlight {
	background-color: #000;
}


#x_headerBlock #x_pageIntroBtn {
	color: #cfcfcf;
}

#x_headerBlock #x_pageIntroBtn.pageIntroBg {
	color: #1c1c1c;
	background-color: #cfcfcf;
}

#x_headerBlock #x_pageIntroBtn.ui-button.ui-state-hover, #x_headerBlock #x_pageIntroBtn.ui-button.ui-state-focus, #x_headerBlock #x_pageIntroBtn.ui-state-active {
	color: #FFFFFF;
}

#x_headerBlock #x_pageIntroBtn.pageIntroBg.ui-button.ui-state-hover, #x_headerBlock #x_pageIntroBtn.pageIntroBg.ui-button.ui-state-focus, #x_headerBlock #x_pageIntroBtn.pageIntroBg.ui-state-active {
	color: #1c1c1c;
	background-color: #FFFFFF;
}


/*****thumbnailViewer******/
.x_thumbnailViewer_page #thumbOverlayLeft,
.x_thumbnailViewer_page #thumbOverlayRight {
  background: #1c1c1c;
}
.x_thumbnailViewer_page #thumbBar button { color: #CFCFCF; }
.x_thumbnailViewer_page #thumbBar button.ui-state-hover { color: #FFFFFF; }
.x_thumbnailViewer_page #thumbBar button.ui-state-focus { color: #FFFFFF; }
.x_thumbnailViewer_page #thumbBar button.ui-state-active { color: #FFFFFF; }


/***********************************Tables*************************************/
/*default background of table rows*/
.x_grid_page table tr,
.x_table_page table tr,
.x_interactiveText_page table tr,
.x_documentation_page table tr,
.x_results_page table tr,
.x_results_page tr td {
  background: #1c1c1c;
}

table th, table td, table tr, table {
	border-color: #cfcfcf !important;
}

/*background of shaded/alternate rows*/
table tr.shaded,
.x_results_page tr.alt td {
	background:	rgba(255,255,255,0.1);
}

/*header/footer shaded*/
table.header.shaded thead tr:first-child,
table.header.shaded tr.header,
table.header.shaded :not(tbody) > tr:first-child,
.x_grid_page table.header.shaded tr:first-child,
table.footer.shaded tbody tr:last-child,
table.headerCol.shaded td.header {
	background:	rgba(255,255,255,0.4);
	color: #1c1c1c;
}

/* progress bar */
.pbContainer {
	background-color: #1c1c1c;
	border: 1px solid #cfcfcf;
}
#x_footerBlock .pbBar {
	background-color: #cfcfcf;
}
#x_headerProgress .pbContainer {
	background-color: #cfcfcf;
	border: none;
}
#x_headerProgress .progressMarker {
	border-color: #cfcfcf;
	background-color: #1c1c1c;
}

/* page resources */
.resourceLink, .resourceLink:visited, .resourceLink:focus {
	color: #cfcfcf;
}

/* hotspot image connector */
#hotspot_bubble {
	color: #cfcfcf;
	background: #1c1c1c;
	border-color: #1c1c1c;
}