/*	module: /animations/html5/patient-education/visual-field/animation-slider.css
	date:	july 16, 2020
	author: hendra d.
	description: css for visual-field animation.*/
	
/* default overrides */
	
	div#visual-field{
		position: relative;/* as reference point for loader */
		font-family: Arial, Helvetica, sans-serif;
		font-size: medium;/* reset */
		line-height:  normal !important;/*reset*/
		background-color: whitesmoke;
		margin: 1em auto;/*center animation whenever width rule is applied*/
	}
	div#visual-field *{/* reset */
		font-size: inherit;
		line-height: inherit;
	}
	div#visual-field img,/* all images and canvas inside div#visual-field elements */
	div#visual-field canvas{
		display: block;
		max-width: 100%;
		height: auto;
	}

/* loader */

	div#visual-field>div:first-child{
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		background-image: url(loading-bar.gif);
		background-position: center center;
		background-repeat: no-repeat;
		background-color: rgba(255,255,255,0.9);
		opacity: 1;
		z-index: 2;
		transition: 1s opacity;
	}
	div#visual-field.loaded>div:first-child{
		opacity: 0;
	}
	
/*top*/
	
	div#visual-field>div:first-child+div{
		position: relative; /* as reference to abs positioned logo and also to tracker's spans */
	}
	div#visual-field>div:first-child+div:after{
		content: '';
		display: block;
		clear: both;
	}

/* slides */

	div#visual-field>div:first-child+div ul{
		position: relative;/* as reference point for absolutely positioned li children */
		float: left;
		width: 45%;
		list-style: none;
		padding-left: 0 !important;
		margin: 0;
		opacity: 0;
		transition: 1s opacity;
	}
	div#visual-field.loaded>div:first-child+div ul{
		opacity: 1;
	}
	div#visual-field>div:first-child+div ul li{
		position: absolute;
		top: 0;
		list-style: inherit;
	}
	div#visual-field>div:first-child+div ul li.selected{
		position: relative;/*so z-index may be used*/
		z-index: 1;
	}
	div#visual-field>div:first-child+div ul li img{
		width: 100%;
	}
	
/* logo image */

	div#visual-field>div:first-child+div ul+div{
		position: absolute;
		left: 0.2em;
		bottom: 0.2em;
		width: 10%;
		z-index: 1;
	}

/* tracker */
	
	div#visual-field>div:first-child+div ul+div+div{
		float: left;
		width: 10%;
		text-align: center;
	}
	
	div#visual-field>div:first-child+div ul+div+div span{/* container to Healthy text*/
		display: block;
		position: relative;
	}
	div#visual-field>div:first-child+div ul+div+div span:first-child{
		font-size: 0.9em;
	}
	div#visual-field>div:first-child+div ul+div+div span:first-child+span{/*container to input[type="range"] */
		position: absolute;
		width: 10%;
		height: calc(100% - 2.4em);
		top: 1.2em;
	}

	div#visual-field>div:first-child+div ul+div+div span:first-child+span+span{/*container to ptosis text*/
		color: red;
		position: absolute;
		bottom: 0;
		font-size: 0.9em;
		text-align: center;
		width: 10%;
	}

	div#visual-field>div:first-child+div ul+div+div input[type="range"]{
		margin: 0;
		height: 2em;
		padding: 0;
		cursor: pointer;
		background-color: transparent;
		-webkit-appearance: none;
		transform: rotate(90deg);
		transform-origin: top left;
		position: absolute;
		top: 5%;
		left: calc(50% - -1em);
		width: 200%;
	}	

	div#visual-field>div:first-child+div ul+div+div input[type="range"]:focus{
		outline: none;
	}

/* tracker thumb (optimizing below won't work, so don't) */

	div#visual-field>div:first-child+div ul+div+div input[type="range"]::-moz-range-thumb{
		width: 1em;
		height: 1.2em;
		background-color: transparent;
		background-image: url(slider-handle.jpg);
		background-repeat: no-repeat;
		background-size: 100% auto;
		border: 0;
		border-radius: 0;
	}
	div#visual-field>div:first-child+div ul+div+div input[type="range"]::-webkit-slider-thumb{
		width: 1em;
		height: 1.2em;
		margin-top: -0.3em;
		background-color: transparent;
		background-image: url(slider-handle.jpg);
		background-repeat: no-repeat;
		background-size: 100% auto;
		-webkit-appearance: none;/*hides webkit default thumb*/
		border-radius: 0;
	}
	div#visual-field>div:first-child+div ul+div+div input[type="range"]::-ms-thumb{
		width: 1em;
		height: 1.2em;
		margin-top: 0;
		background-color: transparent;
		background-image: url(slider-handle.jpg);
		background-repeat: no-repeat;
		background-size: 100% auto;
		border: 0;
		border-radius: 0;
	}

/* tracker track (optimizing below won't work, so don't) */

	div#visual-field>div:first-child+div ul+div+div input[type="range"]::-webkit-slider-runnable-track{
		height: 0.5em;
		background-image: linear-gradient(90deg,white,red);
	}
	div#visual-field>div:first-child+div ul+div+div input[type="range"]::-moz-range-track{
		height: 0.5em;
		background-image: linear-gradient(90deg,white,red);
	}
	div#visual-field>div:first-child+div ul+div+div input[type="range"]::-ms-track{
		height: 0.5em;
		border: 0;/*ie-specific*/
		color: transparent;/*ie-specific*/
		background-image: linear-gradient(90deg,white,red);
	}
	div#visual-field>div:first-child+div ul+div+div input[type=range]::-ms-fill-lower,
	div#visual-field>div:first-child+div ul+div+div input[type=range]::-ms-fill-upper{
	  background-color: transparent;/*ie-specific*/
	}

/* right canvas*/
	
	div#visual-field>div:first-child+div ul+div+div+div{
		float: left;
		width: 45%;
	}
	div#visual-field>div:first-child+div ul+div+div+div canvas{
		width: 100%;
	}

/*bottom: container to "Use the control to adjust the amount of ptosis" text */

	div#visual-field>div:first-child+div+div{
		font-size: 1.2em;
		text-align: center;
		padding: 0.2em;
	}