/*Shared HTML5 Interactive User Interface Elements*/
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
}
/*Module container*/
#html5module {
    position:relative;
    width:800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #999;
    box-shadow: 5px 5px 4px #EEE;
    text-shadow: none;
    background: #adc8d7; /* Old browsers */
    background: -webkit-linear-gradient(top,  #adc8d7 0%,#7da6b4 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  #adc8d7 0%,#7da6b4 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #adc8d7 0%,#7da6b4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adc8d7', endColorstr='#7da6b4',GradientType=0 ); /* IE6-9 */

}

#introscreen {
    position: absolute;
    width: 800px;
    height: 600px;
    z-index: 10;
    font: 18px Arial, Helvetica, sans-serif;
    color: black;
    background-image: url('../images/SaplingLearning_logo_intro.png');
    /*Image set for higher density displays*/
    background-image: -webkit-image-set( url(../images/SaplingLearning_logo_intro.png) 1x,
    url(../images/SaplingLearning_logo_intro_2x.png) 2x);
    background-repeat:no-repeat;
    background-position: center 55px;
    left:0;
    background-color: white;
}
#introtext{
    position:absolute;
    width:640px;
    top:140px;
    text-align:left;
    margin-left: 90px;
    margin-right:100px;
    font: 18px Arial, Helvetica, sans-serif;
    -webkit-text-size-adjust: none;
}

#introButtonContainer{
    position: absolute;
    top:480px;
    left:340px;
}


/*Help message text box*/
.help-text {
    visibility: hidden;

}
#message {
    position: absolute;
    top: 8px;
    left: 180px;
    width: 440px;
    border: 1px #999 solid;
    background-color: #FFFFE5;
    padding:12px 16px 16px 16px;
    border-radius: 8px;
    font: 14px Arial, Helvetica, sans-serif;
    text-align: left;
    box-shadow: 3px 3px 5px #CCC;
    z-index: 1;
    display: block;
    cursor: default;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	-moz-user-select: none;
	-webkit-user-select: none;
    user-select:none;
}

#content {
    position: relative;
    width: 800px;
    height: 600px;
}

#canvas {
    position: absolute;
    top: 0;
    background:transparent;
    background:url(../images/table.png) no-repeat;
    background-position: left bottom;

}
#lampSourceLabel{
    position:absolute;
    top:116px;
    left:10px;
}
#buttons{
    position:absolute;
    z-index: 1;
    left: 40px;
    top: 400px;
    width: 324px;
    color: #000;
}
.button{
    text-align:center;
    display:inline-block;
}
.button:hover{
    cursor:pointer;
}
span.buttonLabel{
    position: relative;
    top: 58px;
    width: inherit;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    moz-user-select: text;
}
span.buttonLabel.selected{
    background-color:white;
}

#sunlight{
    width:60px;
    height:80px;
    background-image: url(../images/sun.svg);
    background-size: 60px 60px;
    background-repeat:no-repeat;
    background-position: center top;
    margin-left:60px;
}
#lightbulb{
    width:70px;
    height:80px;
    background-image: url(../images/lightbulb.svg);
    background-size: 60px 60px;
    background-repeat:no-repeat;
    background-position: center top;

}
#sunlight > span.buttonLabel.stored, #sunlight_zoom.stored {
    background-color : #FFFF99;
}
#lightbulb > span.buttonLabel.stored, #lightbulb_zoom.stored{
    background-color: #ffccff;
}
#hydrogen > span.buttonLabel.stored, #hydrogen_zoom.stored{
    background-color: #9933FF;
}
#mercury > span.buttonLabel.stored, #mercury_zoom.stored{
    background-color: #00ffff;
}
#sodium > span.buttonLabel.stored, #sodium_zoom.stored{
    background-color: #ffff00;
}
#neon > span.buttonLabel.stored, #neon_zoom.stored{
    background-color: #ff4500;
}
#helium > span.buttonLabel.stored, #helium_zoom.stored {
    background-color: #FF00FF;
}

#zoomButtons{
    position:absolute;
    z-index: 1;
    left: 40px;
    top: 270px;
    width: 100px;
    color: #000;
}
.zoomButton{
    width: 85px;
    height:30px;
    padding: 4px;
    text-align: center;
    background-color: white;
    margin-bottom: 6px;
    line-height:30px;
    border-radius: 6px;
    border:2px solid #999;

}

.zoomButton:hover{
    cursor:pointer;
}
.zoomButton.selected{
    border:2px solid black;
    box-shadow: 2px 2px 4px #000;
}
.bar{

    width:70px;
    height:80px;
    background-image: url(../images/bar.svg);
    background-size: 70px 60px;
    background-repeat:no-repeat;
    background-position: center top;
}

#xAxisTitle{
    position:absolute;
    left:394px;
    top: 468px;
    width:360px;
    text-align:center;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
    color: white;

}
#xAxisTitle.zoomed{
    left:294px;
    top:428px;
}
#xAxisLabels{
    position:absolute;
    left: 332px;
    top: 450px;
    width:480px;
    color:white;
    text-shadow: none;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;

}
#xAxisLabels.zoomed{
    left:152px;
    top:405px;
    width: 680px;
}
.xAxisLabel{
    width:115px;
    text-align:center;
    display:inline-block;
    font-weight:normal;
}

.xAxisLabel.zoomed{
    width: 165px;
}

#yAxisLabels {
    position: absolute;
    left: 380px;
    top: 335px;
    width: 15px;
    height: 80px;
    color: white;

}
#yAxisLabels.zoomed{
    left: 220px;
    top:235px;
    height:150px;
}
.yAxisLabel{
 height: 84px;

}
.yAxisLabel.zoomed{
    height: 120px;
}
#yAxisTitle{
    position: absolute;
    left: 380px;
    top: 315px;
    width: 100px;
    color: white;
}
#yAxisTitle.zoomed{
    left: 208px;
    top: 210px;
}

#help {
	position: absolute;
    right: 10px;
	top: 0px;
	z-index: 2;
}

#helpLabels {
    position: relative;
	z-index: 1;
	text-align: center;
    text-shadow:none;
    color: #000;
}

#reset {
    position: absolute;
    left: 10px;
    top: 0px;
    z-index: 2;
}
#gas-discharge {
    position: absolute;
	top: 342px;
    left: 10px;
	text-align: left;

}
#slit {
    position: absolute;
	top: 280px;
    left: 205px;
    -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(15deg);
}
#prism {
    position: absolute;
	top: 260px;
    left: 300px;
}
#detector {
    position: absolute;
	top: 125px;
    left: 715px;
}
#computer {
    position: absolute;
	top: 540px;
    right: 10px;
    font-size: 16px;
}
#readoutDiv{
    position:absolute;
    left: 166px;
    top: 328px;
    width:200px;
    min-height: 78px;
    display:none;
    color:black;

}

#readoutDiv.zoomed{
    left:4px;
    top: 178px;
    z-index: 5;
    color:white;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 6px;
    border-radius: 4px;
}
#readoutInstructions{
    top:0;
    left:0;
    color: inherit;
    text-align:right;
    background-color: rgba(255, 255, 255, 0.6);
    margin-right: 10px;
    padding-right:5px;

}
#readoutInstructions.zoomed{
    background-color:inherit;
}
#readout{
    display:block;
    width: 100px;
    min-width:110px;
    min-height: 40px;
    background-color: #000;
    color: #FFFFFF;
    line-height:20px;
    text-align:center;
    float:right;
    margin-right:8px;

}
#readout.zoomed{
    border: 1px solid #999;
    margin-right: 8px;
    min-width: 110px;
}

div.readoutLabel{
    display:block;
    text-align:right;
    width:78px;
    float:left;
    line-height:20px;
}
#zoomedInText{
    font-style:italic;
    font-weight:bold;
    display:none;
    position:absolute;
    z-index:2;
    left: 210px;
    top: 155px;
    color: #000;
    text-align:center;
    width: 530px;
}

.slider-track {
    position: absolute;
    background-image:url(../images/slider_track.svg);
    width: 32px;
    height: 182px;
    top: 144px;
    background-size: 32px 182px;
    background-position: center center;
    background-repeat: no-repeat;
	touch-action: none; /* needed for IE 10 & 11 touch compatibility */
}
#track1 {
    left: 10px;
    display:none;

}

.slider {
    position: absolute;
    background-image:url(../images/ui_lab_slider_up.png);
    width: 32px;
    height: 32px;
    z-index:9;
    opacity:1;
    top:0px;
    cursor: pointer;
}
.slider:hover {
    opacity:.9;
}
.slider:active {
    opacity:1;
}
.slider-fill {
    position: absolute;
    left:12px;
    top:144px;
    width: 8px;
    height: 0px;
    background-color: #999;
    opacity: .8;
}

.hidden {
    display: none;
   /* opacity: .5;*/
}
/* Custom styles for jQuery Mobile components */
.ui-btn-up-a, .ui-btn-hover-a, .ui-btn-active-a, .ui-controlgroup-label{
    font-weight:normal;
}
.ui-overlay-c {
    text-shadow:none;
}
.ui-page {
    background: #FFFFFF;
}

*:focus{
    outline:none; 
}
.ui-btn-up-b {
    background: linear-gradient(#0093ae, #00788f) repeat scroll 0 0 #047584;
}
.ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon {
    background-color: #00869F;
}
.ui-btn-inner {
    text-overflow: clip;
}
.ui-focus, .ui-btn:focus {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}