article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  body {
    padding: 30px;
    background: grey;
}


input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 0px solid white;
    /*required for proper track sizing in FF*/
    width: 180px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 180px;
    height: 7px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 18px;
    border-radius: 50%;
    //background: #76bd1d;
    background:  #33CC33;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 180px;
    height: 7px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 18px;
    border-radius: 50%;
    //background: #76bd1d;
    background: #33CC33 ;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 0px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 180px;
    height: 7px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 18px;
    border-radius: 50%;
    background: #33CC33; //#76bd1d;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

#main1{
  position: absolute;
  width: 490px;
  height: 1050px;
  top: 0px;
  left: 0px;
  border: 4px solid #33CC33;
  background: #d0d3d4 ;
}

#container{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 470px;
  z-index: 5;
  color: #ffffff;

}

#container2{                    /* ********************************************************* */
  
  position: absolute;
  top: 515px;
  left: 5px;
  width: 481px;
  z-index: 5;
  background: #404041;
  color: #ffffff;
}

#theimage{
  position: absolute;
  float:left;
  width: 475px;
  height: 285px;
  z-index:100;
}

#camimage{
  position: absolute;
  float:left;
  width: 470px;
  top: 220px;
  z-index:800;
}

#sliders{
  position: absolute;
  width: 290px;
  top: 290px;
  z-index: 200;
    background: #404041;
}


input.sliderCa{
 border: 0px solid white;
 width: 200px;
// position: absolute;
// left: 145px;
}

input[type=range]::-moz-range-track.sliderCa{
  width: 100px;
}

#direction{
 // width: 100px;
}

#answers{
  position: relative;
  //background-image: url("back-blur.jpg");
  background-size: cover;
  float: left;
  width: 185px;
  top: 290px;
  left: 293px;
  z-index: 200;
  // border: 2px solid red;
  background:  #ecf0f1;
  color: #000000;
}

#camans{
  position: relative;
  //background-image: url("back-blur.jpg");
  background-size: cover;
  float: left;
  width: 350px;
  top: 0px;
  left: 1px;
  z-index: 200;
   //border: 2px solid red;
   background:  #ecf0f1;
     color: #000000;
}
#outputD{
 position: absolute;
 top: 10px;
 left: 20px;
 z-index:500;
 
}
.Dans{
  position: relative;
  float: right;
  font-weight: bold;
}
.helpicon{
  width:10px;
  
}
#helpdiv{
  position: absolute;
  top:75px;
  left:8px;
   width: 470px;

   background: #fcf3cf;
  border: 4px solid yellow;
  display: block;
  z-index: 1000;
}
#camhelp{
  display: none;
    position: absolute;
  top:520px;
  left:10px;
  // width: 350px;
  background: white;
  border: 4px solid #yellow;
  z-index: 1000;
}
#bighelp{
    display: block;
    position: absolute;
  top:4px;
  left:4px;
  width: 17px;
  height: 17px;
  background: white;
  border: 4px solid #yellow;
  z-index: 1200;
}
#helpdiva{
  position: absolute;
  top:75px;
  left:8px;
   width: 470px;

   background: #fcf3cf;
  border: 4px solid yellow;
  display: none;
  z-index: 1;
}