//***********************************Text*************************************
//*****title page******/
.titlePageTxt {
  //*without reducing the width here horizontal scroll bars show when the theme selected isn't 100% width*/
  width:98% !important;
  overflow: hidden;
}

a.x_glossary:link, a.x_glossary:visited, a.x_glossary:hover, a.x_glossary:active {
  color: $lightestcolor;
}
//***********************************Media*************************************
//default highlight if not changed
.highlight {
  background: $lightestcolor;
}
//*****audio slideshow********/
.x_audioSlideshow_page .slide {
  margin-left: 5px;
}
//*****multiple perspectives******/
#thumbHolder .thumbBox h3, .x_responsive #thumbHolder .thumbBox h3{
  color: $darkestcolor;
}
//*****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($brightcolor, .2);
}
//***********************************Navigators*************************************/

.ui-tabs-panel a:visited, .ui-accordion-content a:visited {
  color: $linkcolor;
}
//*****Accordion page*******/
.ui-accordion .ui-accordion-content {
  border-radius: $smallroundedcorners;
  background: $contrastcolor;
  color:$whiteorlightest;
}
.ui-accordion .ui-accordion-header {
  border-radius: $smallroundedcorners;
  background: $contrastcolor;
  color:#ffffff;
}
.ui-accordion .ui-accordion-header a {
  border-radius: $smallroundedcorners;
  color: $whiteorlightest !important; //doesn't work without important
  background: $brightcolor;
}
.ui-accordion .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  text-decoration: none;
  background: $lightestcolor;
  border-radius: $smallroundedcorners;
  color: $brightcolor !important;
}
//*****button navigator*****/
.x_buttonNav_page .ui-button {
  border-radius: $smallroundedcorners;
  background: $brightcolor;
  border: none;
 // color: #ffffff;
}
.x_buttonNav_page .ui-buttonset .ui-button {
  margin-left: 0;
  margin-right: .2em;
}
.x_buttonNav_page .ui-state-active .ui-button-text{
  border-radius: $smallroundedcorners;
  background: $lightestcolor;
  border: none;
  color: $darkestcolor;
}
//***Flash cards***/
.x_flashCards_page .front.panel{
  background:$contrastcolor;
  border:$contrastcolor;
  color:$whiteorlightest;
}
.x_flashCards_page .back.panel{
  background:$brightcolor;
  border:$brightcolor;
  color:$fontcolorfobrightcolor;
}
//*****hyperlinks******/
.x_links_page #linkHolder a{
  color:$darkestcolor;
}
.x_links_page #linkHolder a:hover{
  color:$lightestcolor;
}
//*****navigator*****/
#pageContents.button button.selected {
  background-color: $lightestcolor;
}
#pageContents.slide #btnHolder button {
  background: $brightcolor;
  border-color: $contrastcolor;
}
//****tabbed navigator****/
.ui-tabs .ui-tabs-nav li {
  border-radius: $smallroundedcorners;
  background: $brightcolor;
  border:none;
  color:$fontcolorforcontrastcolor;
}
//default paneInfo unless changed for specifc page types
.paneInfo{
  color:$fontcolorfobrightcolor;
}
.x_tabNavExtra_page .ui-tabs-panel a:link{
  color:$lightestcolor;
}
.x_tabNavExtra_page .ui-tabs-panel a:hover{
  color:$blackordarkest;
}
.paneList a, .paneList a:link, .paneList a:visited{
  color: $blackordarkest;
}
.paneList a:hover{
  color: $lightestcolor;
}
.ui-tabs-panel a:link {
  color: $lightestcolor;
}
.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: $lightestcolor;
  color:$blackordarkest !important;
  border-radius: $smallroundedcorners;
}

a.topic.highlight {
  background: $brightcolor;
  color:$fontcolorfobrightcolor;
}
a.topic.highlight:hover {
  color:$linkhover;
}
div.infoHolder.ui-tabs.ui-widget.ui-widget-content.ui-corner-all{
  background:$contrastcolor;
  color:$fontcolorforcontrastcolor !important;
}
//***********************************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;
}
//*****annotated diagram******/
#listholder a.listitem, a:visited {
  color:$contrastcolor ;
}
.x_annotatedDiagram_page .highlight{
  background:$brightcolor;
}
.x_annotatedDiagram_page .hotspot{
  background:none;
}
.x_annotatedDiagram_page #infoHolder{
  background:$brightcolor;
  margin-left:10px;
}
//*******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;
  background:$contrastcolor;
}
.x_dragDropLabel_page .label.panel{
  background:transparentize($lightestcolor, .1 )!important;
  border-color:$lightestcolor;
}
//*****categories*****/
.x_categories_page #dragDropHolder {
  background: $contrastcolor;
  border-radius: $mediumroundedcorners;
}
#categoryHolder .category {
  border-radius: $mediumroundedcorners;
}
#categoryHolder h3 {
  color:$whiteorlightest;
}
.x_categories_page .label.panel{
  background:$lightestcolor;
  border:$lightestcolor;
  color:$blackordarkest;
}
.x_categories_page #categoryHolder .highlight {
  border-radius: $smallroundedcorners;
  background: $brightcolor;
}
//*******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, .5);
}
.x_gapFill_page .label.panel {
  background: $lightestcolor;
  border-color:$lightestcolor !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%;
}
//******Interactive lists*******/
.x_interactiveText_page .highlight{
  background: $lightestcolor;
}
//******Interactive lists*******/
.x_list_page .highlight{
  background: $brightcolor;
}
//*********matching texts*********/
.x_textMatch_page #dragDropHolder {
  background: $contrastcolor;
  padding:10px;
  border-radius: $mediumroundedcorners;
}
.x_textMatch_page .label.panel{
  background:$lightestcolor;
  border-color:$lightestcolor;
  color:$blackordarkest;
}
.x_textMatch_page #targetHolder .target {
  border-radius: $mediumroundedcorners;
  background:$brightcolor;
  color:$fontcolorfobrightcolor;
}
//*****model answer*****/
.x_modelAnswer_page #answerTxt {
  border-radius: $mediumroundedcorners;
  width: 98%;
}
//*****opinion********/
.x_opinion_page #pageContents input {
  padding-left: 0;
}
.qPanel {
  overflow-x:hidden;
}
.qSeparator hr {
  background-color: lighten($contrastcolor, 15%);
  border-color: lighten($contrastcolor, 15%);
  border: solid 1px lighten($contrastcolor, 15%);
}
.sliderHolder .labelHolder a p {
  color: $whiteorlightest;
}
//*****sortable grid*****/
//static text
.x_grid_page #grid ul li.static {
  background: none;
  border-color: transparent;
  color:$whiteorlightest !important;
}
//font colour of the header only
.x_grid_page #grid ul li.header {
  color: $whiteorlightest !important;
}
//background color of header
.x_grid_page table.header.shaded tr:first-child {
  background: $blackordarkest;
}
//default background of table rows
.x_grid_page table tr{
  background: $brightcolor;
}
//background of shaded/alternate rows
.x_grid_page tr.shaded {
  background: $contrastcolor;
}
//draggable items
.x_grid_page #grid ul li{
  background:$lightestcolor;
  border-color: transparent;
  color:$blackordarkest !important;
}

/*****timeline matching pairs*****/
#targetHolder .target {
  border-radius: $mediumroundedcorners;
}
.x_timeline_page .label.panel.ui-draggable {
  background: $lightestcolor;
  color:$blackordarkest;
  border-color:transparent;
}
//***********************************Connectors*************************************/
//*****menu connector*****/
#subMenuItems .subMenuItem {
  background: $brightcolor;
  color:$darkestcolor;
}
//***********************************Charts*************************************/
//***Charts Table***/
.x_table_page table tr.shaded {
  background: $lightestcolor;
}
.x_table_page table.header.shaded tr:first-child {
  background: $blackordarkest;
  color:$fontcolorforcontrastcolor;
}
.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*****/
#resultsHolder div {
  width:97%;
  min-height: 50px;
  padding-top: 5px;
  border-radius: $mediumroundedcorners;
  background-color: $lightestcolor;
  margin:.5em;
}
.shadedDiv {
   background-color: $lightestcolor !important; //doesn't work without important
   border-radius: $mediumroundedcorners;
 }
.shadedDiv p{
  color:$blackordarkest !important;
}
//*****qr code******/
div#shorturltodisplay a{
  color:$darkestcolor;
}
//*****RSS feed******/
#resultsHolder div {
  border-radius: $mediumroundedcorners;
  background-color: $lightestcolor;
}
#resultsHolder div p {
  color: $blackordarkest;
}
#resultsHolder .shadedDiv {
  //set via .shadedDiv above for youtube feed page
}
#resultsHolder div a {
  color: darkblue;
}
//*****results page*****/
.x_results_page td, th {
  border-radius: $mediumroundedcorners;
}
.x_results_page tr td {
  background-color: $brightcolor;
}
.x_results_page tr.alt td{
  background: $contrastcolor;
  color:$whiteorlightest;
}
.x_results_page .details th {
  background: $lightestcolor;
  color: $blackordarkest;
}
.x_results_page #general_summary th {
  background: #ffffff;//hide otherwise black line at to of summary table
}
//***********************************Media query/responsive changes*************************************/
//*****change tick/cross size on all pages where used******/
.tick, img.result{
  @media (min-width: 768px) {
    width: 2.5vmin;
  }
}