.XmasUI {
    font-family: 'PetMe64Web';
}

.hues-x-controls {
    position: absolute;
    bottom: 0;
    max-width: 992px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    left: 8px;
    right: 8px;
    color: rgba(255,255,255,0.7);
    z-index: 1;
}

.hues-x-beatbar {
  position: absolute;
  top: 0;
  max-width: 992px;
  height: 30px;
  margin: 0 auto;
  overflow: hidden;
  left: 8px;
  right: 8px;
  color: white;
}

.hues-x-beatbar{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: transform 1s ease-out;
    -webkit-transition: -webkit-transform 1s ease-out;
}

.hues-x-controls {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: transform 1s ease-out;
    -webkit-transition: -webkit-transform 1s ease-out;
}

.hues-x-beatbar.hidden{
    transform: translateY(-40px);   
    -webkit-transform: translateY(-40px);
}

.hues-x-controls.hidden {
    transform: translateY(104px);
    -webkit-transform: translateY(104px);
}

.hues-x-light {
    position: absolute;
    width: 68px;
    height: 113px;
    transform-origin: 32px 69px;
    -webkit-transform-origin: 32px 69px;
    background-image: url("../img/lightbase.png");
}

.hues-x-light > div > img {
    position: absolute;
}

.hues-x-fade{
    transition: opacity 0.1s linear;
    -webkit-transition: opacity 0.1s linear;
}

.hues-x-lighton {
    opacity: 1;
}

.hues-x-lightoff {
    opacity: 0;
}

.hues-x-lighton.off{
    opacity: 0;
}

.hues-x-lightoff.off{
    opacity: 1;
}

.hues-x-wiresleft, .hues-x-wiresbottom, .hues-x-wiresright {
    position: absolute;
    background-repeat: no-repeat;
}

.hues-x-wiresleft, .hues-x-wiresright {
    height: 100%;
    top: 0px;
    overflow: hidden;
}

.hues-x-wiresleft {
    width: 200px;
    left: 0px;
    background-image: url("../img/wiresleft.png");
}

.hues-x-wiresright {
    width: 200px;
    right: 0px;
    background-image: url("../img/wiresright.png");
    background-position: 141px 0px;
}

.hues-x-wiresbottomhelper {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.hues-x-wiresbottom {
    height: 200px;
    width:2889px;
    background-image: url("../img/wiresbottom.png");
    background-position: 0px 144px;
    left:50%;
    margin-left: -1444.5px;
    overflow: hidden;
}