/* 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-dialog .ui-widget-header {
  border: 1px solid #3D8EDF;
  /*background: #010101 url(ui-bg_highlight-soft_75_2d2a2a_1x100.svg) 50% 50% repeat-x;*/
  background-color: #3D8EDF;
  color: #ffffff;
  font-weight: bold;
  background-image: none;
  span {
    color: #fff;
  }
}