/* Copyright Superior Shooting Systems 2012 - 2013
 * v0.6 - 2/14/2013
 *
 * canvas.css: A set of styles for ordering the canvas layers and stretching them to fill the screen.
 */

#content {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
position: absolute;
overflow: hidden;
min-height: 0 !important;
}

html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
}

.layer {
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-repeat: no-repeat;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-moz-transform: translate3d(0,0,0) scale3d(1,1,1);
-ms-transform: translate3d(0,0,0) scale3d(1,1,1);
-o-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
}

#layerBackground { z-index: 1; }
#layerForeground { z-index: 2; }
#layerMask { z-index: 3; }
#layerUserInterface { z-index: 4; }
#settingsContainer { z-index: 5; }

.sprite {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
background-repeat: no-repeat;
/*-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;*/
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-moz-transform: translate3d(0,0,0) scale3d(1,1,1);
-ms-transform: translate3d(0,0,0) scale3d(1,1,1);
-o-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
}

.markerLine {
position:absolute;
width: 33%;
border: 1px solid green; 
left: 50%;
margin-left: -16%;
top: 0px;
}

.spriteLabel {
width: 200px;
height: 30px;
text-align: center;
text-shadow: none;
color: #000000;
position: absolute;
left: 0;
top: 0;
font-size: 50px;
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-moz-transform: translate3d(0,0,0) scale3d(1,1,1);
-ms-transform: translate3d(0,0,0) scale3d(1,1,1);
-o-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
}

#settingsButtonWrapper {
position:absolute;
top: 0px;
right: 0px;
z-index: 100;
display: none;
}

legend {
color: #dddddd;
}

/* resize the settings panel */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay {
-webkit-transform: translate3d(34em,0,0);
-moz-transform: translate3d(34em,0,0);
transform: translate3d(34em,0,0);
}
.ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: 0;
right: 0;
}

#settingsPanel {
width: 34em;
max-width: 100%;
box-sizing: border-box;
height: 100%;
background-color: #111111;
padding: 15px;
color: #dddddd;
text-shadow: 0 1px 0 #000;
overflow-y: auto;
z-index: 2000;
}

.ui-panel-inner {

}

.ui-controlgroup-controls {
text-align: center;
width: auto !important;
}

.divider{
width: 100px;
height: 10px;
}

.ui-slider-track {
margin: 0 118px 0 0;
}

input.ui-input-text.ui-slider-input {
float: right;
}

.settingsSlider {
margin-right: 50px;
position: relative;
}

.settingsSliderUnit {
width: 50px;
text-align: center;
float: right;
height; 22px;
line-height: 22px;
margin-top: 3px;
}

.ui-panel-animate.ui-panel-content-wrap {
height: 100%;
}

.ui-field-contain .ui-controlgroup-label, .ui-field-contain label.ui-slider {
min-width: 150px;
max-width: 100%;
width: auto;
}

.toggleSwitch .ui-slider-switch{
width: 150px !important;
}

.ui-field-contain div.ui-slider {
width: 100%;
}