/* CSS Document */


#canvas{border:1px solid red; margin:0 auto; }



form {
  max-width: 95%;
  margin: 0 auto;
}
.fov {
	padding: 0px 10px 10px 10px;
	text-align: center;
	font-size:12px;
	position:relative;
}

.fov select {
  position:relative;
  margin: 5px 10px 5px 2px;
  width: 75px;
  padding: 5px 5px 5px 5px;
  font-size: 12px;
  color: #ff0;
  border: 1px solid #f90;
  height: 28px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px;
  background: url(https://www.projectimmersion.com/favicon.ico) 96% / 28.125% no-repeat #333;
}
.fov .selectlong {
	width: 300px;
	background: url(https://www.projectimmersion.com/favicon.ico) 100% / 8% no-repeat #333;
}

.fov select:focus {
	border-color: #f00;
	outline: none;
	box-shadow: 0 0 2px #f00;
}
.fov label {
	display:inline-block;
	width: 75px;
	text-align:right;
}
.fs_top label {
	width: 100%;
  display: block;
  text-align:center;
}

.fov fieldset {
  margin: 0 0 1em;
  padding: 0.5em;
  border: 1px solid #f90;
  -webkit-border-radius: 8px; 
  -moz-border-radius: 8px; 
  border-radius: 8px;
  text-align: left;
}
#fovresult {
	position:absolute;
	margin: 0 0 1em;
	bottom: -5px;
	right: 42px;
	width: 300px; 
	height: 75px;
	line-height: 75px;
	border: 1em;
	font-size:36px;
	border: 1px solid #f90;
  	-webkit-border-radius: 8px; 
  	-moz-border-radius: 8px; 
  	border-radius: 8px;
	text-align:center;
}



/******************************************************/
/*                      Sliders                       */
/******************************************************/


input[type="range"] {
  display: block;
  width: calc(100% - 5em);
  margin:auto;
}


/******************************************************/
/*                Horizontal Slider                   */
/******************************************************/


/******************************************************/
/*                  Vertical Slider                   */
/******************************************************/
input[type="range"][orient=vertical]
{
  -webkit-appearance: slider-vertical;  /* Override default CSS styles */
  appearance: slider-vertical;
  width: 8.4px; /* specified width */
  height: 175px; /* Specified height */
  background: #ff0; /* background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;	
}





[type=range]:disabled::-webkit-slider-thumb, [type=range]:disabled::-moz-range-thumb, [type=range]:disabled::-ms-thumb, [type=range]:disabled::-webkit-slider-runnable-track, [type=range]:disabled::-ms-fill-lower, [type=range]:disabled::-ms-fill-upper {
  cursor: not-allowed;
}









