
//***********************************Media*************************************
//default highlight if not overriden
.highlight {
  background: $lightestcolor;
}
//*****audio slideshow********/
.x_audioSlideshow_page .slide {
  margin-left: 5px;
}
//*****multiple perspectives******/
#thumbHolder .thumbBox h3, .x_responsive #thumbHolder .thumbBox h3{
  color: $blackordarkest;
}
//*****Synched Video*******/
//add padding to right holder
#x_mainHolder.x_videoSynch_page .right{
  padding-top: 10px;
  padding-left: 20px;
}
//*****transcript reader******/
.x_transcriptReader_page .highlight {
  background:transparentize($whiteorlightest, .6);
}
//***********************************Navigators*************************************/
//*****Accordion page*******/
.ui-accordion .ui-accordion-content {
  border-radius: $smallroundedcorners;
  background: $lightestcolor;
  color:$blackordarkest;
}
.ui-accordion .ui-accordion-header {
  border-radius: $smallroundedcorners;
  background: $contrastcolor;
  color:#ffffff;
}
.ui-accordion .ui-accordion-header a,
.chapterItem.ui-state-active a, .chapterItem.ui-state-active a:link, .chapterItem.ui-state-active a:visited {
  border-radius: $smallroundedcorners;
  color: $whiteorlightest !important; //doesn't work without important
  background: darken($lightestcolor, 40%);
}
.ui-accordion .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  text-decoration: none;
  background: darken($lightestcolor, 70%) !important;
  border-radius: $smallroundedcorners;
  color: $blackordarkest;
}
.ui-accordion.chapterHolder .ui-state-active a, .ui-accordion.chapterHolder .ui-state-active a:link, .ui-accordion.chapterHolder .ui-state-active a:visited {
  background: darken($lightestcolor, 40%) !important;
}

.ui-tabs-panel a:visited, .ui-accordion-content a:visited {
  color: $linkcolor;
}
.ui-tabs-panel a:link, .ui-accordion-content a:link {
  color: $linkcolor;
}

.ui-tabs-panel a:hover, .ui-accordion-content a:hover {
  color: $linkhover;
}

//*****button navigator*****/
.ui-button {
  border-radius: $smallroundedcorners;
  background: darken($lightestcolor, 60%);
  border: none;
  color: #ffffff;
}
.ui-buttonset .ui-button {
  margin-left: 0;
  margin-right: .2em;
}
.ui-state-active{
  border-radius: $smallroundedcorners;
  background: darken($lightestcolor, 70%);
  border: none;
  color: $whiteorlightest;
}
.x_nav_page #pageContents.button button.selected {
  background-color: $blackordarkest;
}
//***Flash cards***/
.front.panel{
  background:$lightestcolor;
  border:$lightestcolor;
  color:$fontcolorforlightestcolor;
}
.back.panel{
  background:darken($lightestcolor, 20%);
  border:$contrastcolor;
  color:$fontcolorforcontrastcolor;
}
//*****hyperlinks******/
.x_links_page #linkHolder a{
  color:$linkcolor;
}
.x_links_page #linkHolder a:visited{
  color:$linkvisited;
}
.x_links_page #linkHolder a:hover{
  color:$linkhover;
}
//*****navigator*****/
#pageContents.button button.selected {
  background-color: $lightestcolor;
}
#pageContents.slide #btnHolder button {
  background: darken($lightestcolor, 70%);
  border-color: darken($lightestcolor, 70%);
}
//****tabbed navigator****/
.ui-tabs .ui-tabs-nav li {
  border-radius: $smallroundedcorners;
  background: darken($lightestcolor, 50%);
  border:none;
  color:$fontcolorforcontrastcolor;
}

.paneInfo{
  /*color:$fontcolorfobrightcolor;*/
}
.paneList a, .paneList a:link, .paneList a:visited{
  /*color: $linkcolor !important;*/
}
.ui-tabs-panel a:link, /*.ui-accordion-content a:link*/ {
  /*color: $linkcolor;*/
}
.ui-tabs .ui-tabs-nav {
  border-radius: $smallroundedcorners;
  background: none;
  border: none;
}
.ui-tabs .ui-tabs-nav li a {
  color: $whiteorlightest;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  text-decoration: none;
  background: darken($lightestcolor, 70%) !important;
  color:$whiteorlightest !important;
  border-radius: $smallroundedcorners;
  border: none;
}

a.topic.highlight {
  background: darken($lightestcolor, 70%);
  color:$fontcolorfobrightcolor;
}
a.topic.highlight:hover {
  background: $lightestcolor;
  color:$fontcolorforlightestcolor;
}
div.infoHolder.ui-tabs.ui-widget.ui-widget-content.ui-corner-all{
  background:$lightestcolor;
}
//***********************************Interactivity*************************************/
//most text areas unless changed for specifc pages
#pageContents textarea {
  border-radius: $mediumroundedcorners;
  padding: 10px;
}
//most input boxes unless changed for specifc pages
#pageContents input {
  border-radius: $smallroundedcorners;
  padding-left: 10px;
}
//*****highlight text******/
.x_textHighlight_page .ui-widget-content button.ui-state-default {
  border-radius: $smallroundedcorners;
  background: darken($lightestcolor, 60%);
  border: none;
  color: #ffffff;
}
.x_textHighlight_page .ui-widget-content button.ui-state-default.ui-state-active {
  background: darken($lightestcolor, 70%);
  color: $whiteorlightest;
}
.x_textHighlight_page .ui-tabs {
	border-radius:$mediumroundedcorners;
	background: $lightestcolor;
}
//*****annotated diagram******/
#listholder a.listitem, a:visited {
  color:$contrastcolor ;
}
.x_annotatedDiagram_page .highlight{
  background:$lightestcolor;
}
.x_annotatedDiagram_page .hotspot{
  background:none;
}
.x_annotatedDiagram_page #infoHolder{
  background:$defaultpagebackground;
}
//*******Drag and Drop Labelling*********/
.target.ui-droppable.border.highlight {
  //show transparent background when clicking target hotspots
  background-color: transparentize($lightestcolor, .6) !important;
}
.x_dragDropLabel_page #infoHolder{
  padding:20px;
  margin-right:20px;
}
.x_dragDropLabel_page .label.panel{
  background:transparentize(darken($lightestcolor, 70%), .2 )!important;
  border-color:$lightestcolor;
  color:$whiteorlightest;
  //darken($lightestcolor, 70%)
}
.x_dragDropLabel_page #targetHolder .highlight{
 // background-color: rgba(83, 70, 69, 0.30);
  background:none;
}
//*****categories*****/
#categoryHolder .category {
  border-radius: $smallroundedcorners;
}
#categoryHolder h3 {
  color:$blackordarkest;
}
.x_categories_page #dragDropHolder {
  background: $whiteorlightest;
  padding:10px;
  border-radius: $mediumroundedcorners;
}
.x_categories_page .label.panel{
  background:darken($lightestcolor, 70%);
  border:darken($lightestcolor, 70%);
  color:$whiteorlightest ;
  border-radius: $smallroundedcorners;
}
#categoryHolder .highlight {
  border-radius: $smallroundedcorners;
  background: $lightestcolor;
}
//*******decision tree********//
.x_decision_page .highlight{
  background: $lightestcolor;
}
//*****Dictation*****/
.x_dictation_page #answerTxt {
  width: 98%;
  margin-bottom: 10px;
  border-radius: $mediumroundedcorners;
  padding:10px;
}
//*****gap fill*****/
#targetHolder .target {
  border-radius: $mediumroundedcorners;
}
#targetHolder .highlight {
  background:$whiteorlightest;
}
#labelHolder .label.panel {
  //background: purple;
}
.x_gapFill_page #targetHolder .highlight {
  background:transparentize($whiteorlightest, .1);
}
.x_gapFill_page .label.panel {
  background: darken($lightestcolor, 50%);
  border-color:darken($lightestcolor, 50%) !important;
  color:$whiteorlightest;
}
.x_gapFill_page #labelHolder .label.selected {
	border: 2px solid green !important;
}
.x_gapFill_page .target.correct{
  color:green;
  font-weight:bold;
  background-color:transparentize($whiteorlightest, .8);
}
//*****hotspot image*****/
a.hotspot, a.hotspot.selected {
  background: none;
}
.hsinfo{
  padding:1%;
}

.x_hotspotImage_page #infoHolder {
  background: none;
}
//******Interactive lists*******/
.x_interactiveText_page .highlight{
  background: $lightestcolor;
}
//******Interactive lists*******/
.x_list_page .highlight{
  background: darken($lightestcolor, 70%);
  color:$fontcolorforcontrastcolor;
}
//*********matching texts*********/
.x_textMatch_page #dragDropHolder {
  background: $lightestcolor;
  padding:10px;
  border-radius: $mediumroundedcorners;
}
.x_textMatch_page .label.panel{
  background:darken($lightestcolor, 70%);
  border-color:darken($lightestcolor, 70%);
  color:$whiteorlightest;
}

//*****opinion********/
.x_opinion_page #pageContents input {
  padding-left: 0;
}
.qPanel {
  overflow-x:hidden;
}
.qSeparator hr {
  background-color: lighten($lightestcolor, 15%);
  border-color: lighten($lightestcolor, 15%);
  border: solid 1px lighten($lightestcolor, 15%);
}
.sliderHolder .labelHolder a p {
  color: $blackordarkest;
}

//*****sortable grid*****/

/*****timeline matching pairs*****/
.x_timeline_page #dragDropHolder {
  background: $whiteorlightest;
}
//the target boxes
.x_timeline_page #targetHolder .target {
  border-radius: $mediumroundedcorners;
  background-color:$lightestcolor;
}
.x_timeline_page .label.panel.ui-draggable {
  background: darken($lightestcolor, 50%);
  color: $fontcolorfobrightcolor;
  border-color:darken($lightestcolor, 40%);
}
//***********************************Connectors*************************************/
//*****menu connector*****/
#subMenuItems .subMenuItem {
  background: darken($lightestcolor, 70%);
  color:$fontcolorforcontrastcolor;
}
//***********************************Charts*************************************/
//***Charts Table***/
.x_table_page table.header.simple tr:first-child {
  border:none;
}
.x_table_page table.simple {
  border: none;
}
//***********************************Games*************************************/
//*****games memory*****/
#pageContents .card {
  border-radius: $smallroundedcorners;
  border-color: $contrastcolor;
}
#cardTopHolder .card{
  border-color: $contrastcolor;
}
//*****games puzzle*****/
#puzzle {
  border-radius: $mediumroundedcorners;
}
//*****memory******/
#pageContents .card {
  color: $darkestcolor;
}
#cardTopHolder .card {
  background-image: url('card_back.svg') !important; //doesn't work without important
}
//***********************************Misc*************************************/
//*****youtube feed page*****/
.x_youtuberss_page #resultsHolder div {
  width:97%;
  min-height: 50px;
  padding-top: 5px;
  border-radius: $mediumroundedcorners;
  background-color: $lightestcolor;
  margin:.5em;
}
.x_youtuberss_page .shadedDiv {
  background-color: lighten($lightestcolor, 20%) !important; //doesn't work without important
  border-radius: $mediumroundedcorners;
}
.x_youtuberss_page .shadedDiv p{
  color:$blackordarkest !important;
}
//*****qr code******/
div#shorturltodisplay a{
  color:$darkestcolor;
}
//*****RSS feed******/
.x_rss_page #resultsHolder div {
  border-radius: $mediumroundedcorners;
  background-color: $lightestcolor;
}
.x_rss_page #resultsHolder div p {
  color: $blackordarkest;
}
.x_rss_page #resultsHolder .shadedDiv {
  background-color: lighten($lightestcolor, 20%) !important; //doesn't work without important
  border-radius: $mediumroundedcorners;
}
.x_rss_page #resultsHolder div a {
  color: darkblue;
}
//*****results page*****/
.x_results_page td {
  background:$lightestcolor;
}
.x_results_page #questionScores  th{
  background-color: darken($lightestcolor, 70%);
}
.x_results_page tr.alt td{
  background: darken($lightestcolor, 50%);
  color:$fontcolorforcontrastcolor;
}
.x_results_page .details th {
  background: darken($lightestcolor, 70%);
  color: $fontcolorfordarkestcolor;
}
.x_results_page #general_summary th {
  background: #ffffff;//hide otherwise black line at to of summary table
}
//*****audio record page*****/
.x_audioRecord_page .deleteClipBtn {
  color: $blackordarkest;
}
.x_audioRecord_page .deleteClipBtn:hover, .x_audioRecord_page .deleteClipBtn:focus, .x_audioRecord_page .deleteClipBtn:active {
  color: lighten($blackordarkest,10%);
}
.x_audioRecord_page .clip.highlight {
  background-color: darken($lightestcolor,10%);
}
.x_audioRecord_page #recBtn.recording .ui-icon, .x_audioRecord_page #recBtn.recording .ui-button-text {
  color: $whiteorlightest;
}

//***********************************Media query/responsive changes*************************************/
//*****change tick/cross size on all pages where used******/
.tick, img.result{
  @media (min-width: 768px) {
    width: 2.5vmin;
  }
}


//***********************************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 {
  background: darken($lightestcolor, 10%);
}

//background of shaded/alternate rows
table tr.shaded {
	background: darken($lightestcolor, 30%);
}

// 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: darken($lightestcolor, 50%);
	color:$whiteorlightest;
}
