#x_footerBlock {
  font-size:		1em;
  color:			$blackordarkest;
  background-image:	none;
  width: 100%;
  //border-top-left-radius: $largeroundedcorners;
  //border-bottom-left-radius: $largeroundedcorners;
  //*margin-left: 2%;*/
  //margin-bottom:1%;
  background: $whiteorlightest;
  box-shadow: $interfaceboxshadow;
}
#x_footerBg {
  background-image:none;
}
#x_pageNo {
  background:	none;
}
.pbBar {
  background-color: $progressBarColor;
}
/* these buttons will use font awesome icons instead of pngs */
.ui-button .ui-icon.x_help { background-image: none; }
.ui-button .ui-icon.x_info { background-image: none; }
.ui-button .ui-icon.x_home { background-image: none; }
.ui-button .ui-icon.x_glossary { background-image: none; }
.ui-button .ui-icon.x_maximise { background-image: none; }
.ui-button .ui-icon.x_minimise {	background-image: none; }
.ui-button .ui-icon.x_media { background-image: none; }
.ui-button .ui-icon.x_next { background-image: none; }
.ui-button .ui-icon.x_prev {	background-image: none; }
.ui-button .ui-icon.x_prev_hist { background-image: none; }
.ui-button .ui-icon.x_colourChanger { background-image: none; }
.ui-button .ui-icon.x_projectIntro { background-image: none; }
.ui-button .ui-icon.x_saveSession { background-image: none; }

#x_nextBtn:not(.customIconBtn) .ui-icon:before { content: "\f138"; }
#x_prevBtn:not(.customIconBtn) .ui-icon:before { content: "\f137"; }
#x_cssBtn:not(.customIconBtn) .ui-icon:before { content: "\f066"; }
#x_colourChangerBtn:not(.customIconBtn) .ui-icon:before { content: "\f042"; }
#x_mediaBtn:not(.customIconBtn) .ui-icon:before { content: "\f16a"; }
#x_glossaryBtn:not(.customIconBtn) .ui-icon:before { content: "\f02d"; }
#x_helpBtn:not(.customIconBtn) .ui-icon:before { content: "\f128"; }
#x_introBtn:not(.customIconBtn) .ui-icon:before { content: "\f129"; }
#x_menuBtn:not(.customIconBtn) .ui-icon:before { content: "\f0c9"; }
#x_saveSessionBtn:not(.customIconBtn) .ui-icon:before {content: "\f0c7"; }

#x_footerBlock button { color: darken($lightestcolor, 40%); }
#x_footerBlock button.ui-state-hover { color: lighten($blackordarkest, 10%); }
#x_footerBlock button.ui-state-focus { color: $blackordarkest; }
#x_footerBlock button.ui-state-active { color: lighten($blackordarkest, 10%); }

#x_footerBlock button {
  font-family: "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  font-size: 1.9em;
  width: 1.5em;
  padding-right: 0;
  margin-left: 5px;
}
#x_footerBlock button span.ui-button-text {
  display: none;
}
#x_footerBlock .x_floatLeft button, #x_footerBlock .x_floatRight button {
  padding: 0;
}
/*****footer tools chevron*****/
#x_footerChevron {
  color: $whiteorlightest;
}
#x_footerChevron:hover, #x_footerChevron:focus {
  color: $brightcolor;
}

/*****TOC****/
.ui-dialog .ui-widget-header {
  border: 1px solid $whiteorlightest;
  background: darken($lightestcolor,40);
  color: $whiteorlightest;
  font-weight: bold;
}
#menuItems .menuItem, #menuItems .chapterItem {
  background: $whiteorlightest;
  color:$blackordarkest;
}
#menuItems .menuItem:hover, #menuItems .chapterItem:hover {
  background: darken($lightestcolor,30);
  color:$whiteorlightest;
}

#menuItems .menuItem.current, #menuItems .chapterItem.current {
  border: 1px solid darken($lightestcolor,40);
}

.chapterPageHolder.ui-accordion-content {
  background: $whiteorlightest;
}

#menuItems .chapterPageHolder .menuItem {
  border: 1px solid transparent;
}

//*****SIDE BAR****/

#x_sideBar {
	background-color: $lightestcolor;
}

#x_sideBarToggleBtn {
	border-color: darken($lightestcolor, 50%);
	color: darken($lightestcolor, 50%);
}

#x_sideBarToggleBtn:hover, #x_sideBarToggleBtn:focus, #x_sideBarToggleBtn:active {
	color: $lightestcolor;
	background-color: darken($lightestcolor, 50%);
}

#x_sideBarBtnHolder button {
	color: darken($lightestcolor, 50%);
}

#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:not(:last-child) {
	border-color: darken($lightestcolor, 50%);
}

#x_sideBar.sideBarLarge #x_sideBarBtnHolder button span.ui-icon {
	border-color: darken($lightestcolor, 50%);
}

#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:hover, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:focus, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:active {
	background-color: darken($lightestcolor, 50%);
	color: $whiteorlightest;
}

#x_sideBar.sideBarLarge #x_sideBarBtnHolder button:hover span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:focus span.ui-icon, #x_sideBar.sideBarLarge #x_sideBarBtnHolder button:active span.ui-icon {
	background-color: darken($lightestcolor, 50%);
	color: $whiteorlightest;
}

/* progress bar */
.pbContainer {
  background-color: #BFBFBF;
}

//******** Smartphones (portrait) - change progress bar display for small screen-----------*/
@media only screen
and (max-width :500px) {
  //show progress bar in mobile portrait mode with this theme
  //but also reduce font/button sizes to fit//
  #x_footerProgress {
    display: block;
  }
  #x_pageNo {
    vertical-align: top;
    text-align: center;
    display: inline-block;
    padding: 12px 5px 0 5px;
    margin-right: -5px;
    height: 30px;
    width: auto;
    z-index: 100;
    font-size: 12px;
  }
  #x_footerBlock button {
   /* font-size: 1em;
    width: 1em;*/
    margin-left: 5px;
  }
  .pbContainer {
    display:block;
    margin-top: 1.2em;
  }
  .pbTxt {
    display:block;
    text-align: center;
  }
}
//----------------end of smartphones portrait---------------------------------