#x_footerBlock {
  font-size:		1em;
  color:			$footerfontcolor;
  background-image:	none;
  width: 100%;
  background: $footerbackgroundcolor;
  box-shadow: $interfaceboxshadow;
}
#x_footerBg {
  background-image:none;
}
#x_pageNo {
  background:	none;
}
.pbBar {
  background-color: $progressBarColor;
  border: 1px solid $progressBarColor;
}
.pbContainer {
  background-color: $footerbackgroundcolor;
  border: 1px solid $progressBarColor;
}
.pbTxt {
  color: $footerfontcolor;
}
  /* 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, button#x_footerChevron { color: $footerfontcolor; }
#x_footerBlock button.ui-state-hover, button#x_footerChevron:hover { color: $footerhoverfontcolor }
#x_footerBlock button.ui-state-focus, button#x_footerChevron:focus { color: $footerhoverfontcolor }
#x_footerBlock button.ui-state-active, button#x_footerChevron:active { color: $footerhoverfontcolor }

#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;
}

/*****TOC****/
.ui-dialog.ui-widget-content {
  border-color: $bordercolor;
  background: $panelcolor;
  color: $mainfontcolour;
}
.ui-dialog .ui-widget-header {
  border-color: $bordercolor;
  background: $headerbackgroundcolor;
  color: $headerfontcolor;
  font-weight: bold;
}
.ui-dialog .ui-widget-header .ui-dialog-titlebar-close:hover, .ui-dialog .ui-widget-header .ui-dialog-titlebar-close:active, .ui-dialog .ui-widget-header .ui-dialog-titlebar-close:focus {
  border-color: $btnhovertxtcolor;
}

#x_introStartBtn {
  margin-bottom: 1em;
}
.x_pswdBlock .x_pswdError p {
  color: $red;
}

//*****TABLE OF CONTENTS****/
#menuItems .chapterItem {
  background: $panelcolor;
  color:$mainfontcolour;
  border: 1px solid $bordercolor;
}
.chapterHolder, .chapterPageHolder {
  background: $panelcolor;
}
.chapterPageHolder {
  border: 1px solid $bordercolor;
  border-top: 0;
}
#menuItems .menuItem.current {
  border: 1px solid $bordercolor;
  background: $btnhoverbackgroundcolor;
  color: $btnhovertxtcolor;
}
#menuItems .menuItem:not(.current):hover, #menuItems .chapterItem:hover, #menuItems .menuItem:not(.current):focus, #menuItems .chapterItem:focus {
  background: $midyellow !important;
  color: $blackordarkest !important;
}

//*****SIDE BAR****/
#x_sideBar {
	background-color: $panelcolor;
    border-right: 1px solid $bordercolor;
}
#x_mainHolder + #x_sideBar {
  border-right: none;
  border-left: 1px solid $bordercolor;
}
#x_sideBarToggleBtn {
	border-color: $bordercolor;
	color: $mainfontcolour;
}
#x_sideBarToggleBtn:hover, #x_sideBarToggleBtn:focus, #x_sideBarToggleBtn:active {
  background: $darkyellow;
  color: $bordercolor;
  border-color: $bordercolor;
}
#x_sideBar #x_sideBarBtnHolder button {
	color: $iconBtn;
}
#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:not(:last-child) {
	border-color: $bordercolor
}
#x_sideBar.sideBarLarge #x_sideBarBtnHolder button span.ui-icon {
  color: $panelcolor;
  background: $iconBtn;
  border-color: $iconBtn;
}
#x_sideBar.sideBarSmall #x_sideBarBtnHolder button:hover, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:focus, #x_sideBar.sideBarSmall #x_sideBarBtnHolder button:active {
  background: $midyellow;
  color: $iconBtn;
  border-color: $bordercolor;
}
#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 {
  color: $panelcolor;
  background: $iconHoverBtn;
  border-color: $iconHoverBtn;
}

//******** 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 {
    width: 1em;
    margin-left: 5px;
  }
  .pbContainer {
    display:block;
    margin-top: 1.2em;
  }
  .pbTxt {
    display:block;
    text-align: center;
  }
}
//----------------end of smartphones portrait---------------------------------