@charset "UTF-8";

/*  This file will eventually be phased out but right now is needed for control styling  */

/*  Controls:  */

*[id^="jo-ctls"] {
    display: none;
    position: absolute;
    -webkit-flex-flow: column;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    bottom: 0;
    margin: 0;
    padding: 0;
    min-width: 72px;
    min-height: 72px;
}
html[data-touch] *[id^=jo-ctls] {
    display: flex;
}
#jo-ctls-lf {
    left: 0;
}
#jo-ctls-rt {
    right: 0;
}
*[id^="jo-ctlr"] {
    display: flex;
    -webkit-flex-flow: row;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}
*[id^="jo-ctrl"] {
    background-image: url(gui/ctrl.png);
    background-size: 600% 600%;
    background-position: 100% 20%;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}
*[id^="jo-ctrl"][data-control-active] {
    background-position: 100% 60%;
}
#jo-ctrl-strt {
    background-position: 0% 0%;
}
#jo-ctrl-strt[data-control-active] {
    background-position: 0% 40%;
}
#jo-ctrl-selc {
    background-position: 20% 0%;
}
#jo-ctrl-selc[data-control-active] {
    background-position: 20% 40%;
}
#jo-ctrl-menu {
    background-position: 40% 0%;
}
#jo-ctrl-menu[data-control-active] {
    background-position: 40% 40%;
}
#jo-ctrl-look {
    background-position: 60% 0%;
}
#jo-ctrl-look[data-control-active] {
    background-position: 60% 40%;
}
#jo-ctrl-exit {
    background-position: 80% 0%;
}
#jo-ctrl-exit[data-control-active] {
    background-position: 80% 40%;
}
#jo-ctrl-actn {
    background-position: 100% 0%;
}
#jo-ctrl-actn[data-control-active] {
    background-position: 100% 40%;
}
#jo-ctrl-uprw {
    background-position: 0% 20%;
}
#jo-ctrl-uprw[data-control-active] {
    background-position: 0% 60%;
}
#jo-ctrl-dnrw {
    background-position: 20% 20%;
}
#jo-ctrl-dnrw[data-control-active] {
    background-position: 20% 60%;
}
#jo-ctrl-lfrw {
    margin-right: 24px;
    background-position: 40% 20%;
}
#jo-ctrl-lfrw[data-control-active] {
    background-position: 40% 60%;
}
#jo-ctrl-rtrw {
    background-position: 60% 20%;
}
#jo-ctrl-rtrw[data-control-active] {
    background-position: 60% 60%;
}

/*  Horizontal layout:  */

html[data-jo-layout="horizontal"] *[id^="jo-ctls"] {
    top: 0;
}

/*  Vertical layout:  */

html[data-jo-layout="vertical"] #jo-ctls-lf {
    right: 50%;
}
html[data-jo-layout="vertical"] #jo-ctls-rt {
    left: 50%;
}

/*  Debug:  */

html[data-jo-debug] {
    background: white;
}
html[data-jo-debug] body {
    background: black;
}
html[data-jo-debug] canvas {
    background: orangered;
}
html[data-jo-debug] #jo-ctls-lf {
    background: blue;
}
html[data-jo-debug] #jo-ctls-rt {
    background: yellow;
}