/*     required:   HDR-Viewer styling, adjust as needed     */

.hdr_viewer_container {
	width: 100%;
	max-width: 1200px;
	padding-top: 50%;
}

.hdr_viewer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

	.hdr_controller {
			 
			height: 42px;
			padding: 0px; 
	
			opacity: 0.4;
			filter: alpha(opacity = 40);

	/*	put it on the bottom of the image	
			position: absolute;
			bottom: 0;
    */
	}
	
	
	.exposure_label {
			display: inline-block;
			color: white; 
			font-family: sans-serif, Helvetica Narrow; 
			width: 180px;
			padding: 10px 10px 5px 10px;
			position: absolute;
	}
	
	.labelnumber { 
			text-align: right;					
			display: inline-block;
			width: 70px;
	}


.hdrslidecontainer {
/*	position: absolute; left: 100px;  */

    width: 50%; /* Width of the outside container */
    height: 38px;
    margin-top: 2px;
    padding: 0px;
    display: inline-block;
}


/* The slider itself */
.hdrslider {
	display: inline;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 38px; /* Specified height */
    background: none; /* Grey background */
    outline: none; /* Remove outline */
    
}



/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.hdrslider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25%; /* Set a specific slider handle width */
    height: 38px; /* Slider handle height */
    opacity: 0.5; /* Set transparency (for mouse-over effects on hover) */
    background: #FFFFFF center center url('slider-black.png') no-repeat;
	-webkit-border-radius: 3px;
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
    cursor: pointer; /* Cursor on hover */
}

.hdrslider::-moz-range-thumb {
    width: 25%; /* Set a specific slider handle width */
    height: 36px; /* Slider handle height */
    opacity: 0.5; /* Set transparency (for mouse-over effects on hover) */
    background: #FFFFFF center center url('slider-black.png') no-repeat;
    -moz-border-radius: 3px;
    transition: opacity .2s;
    cursor: pointer; /* Cursor on hover */
}

/* Mouse-over effects */
.hdrslider::-webkit-slider-thumb:hover {
	background-color: #FF5020;
    opacity: .8; /* Fully shown on mouse-over */
}
.hdrslider::-moz-slider-thumb:hover {
	background-color: #FF5020;
    opacity: .8; /* Fully shown on mouse-over */
}