* { box-sixing: border-box; }

		body {
			background-color: #dddddd;
		}

		#bodyDiv {
			margin:30px;
			padding: 20px;
			background-color: #ffffff66;
			border-radius: 10px;
		}
	
		a {
			color:#0ba1ab;
		}
		a:hover {
			color:#2fc590;
		}
		img {
			width:400px;
			border: solid 1px #000000;
		}
		img.example {
			width:150px;
			border: solid 1px #000000;
		}

		li {
			margin-top: 24px;
			margin-bottom: 12px;
		}
		.myButton {
			box-shadow:inset 0px 2px 5px 1px #ffffff;
			background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
			background-color:#cdcdcd;
			border-radius:6px;
			border:1px solid #b7b7b7;
			display:inline-block;
			cursor:pointer;
			color:#666666;
			font-family:Arial;
			font-size:15px;
			font-weight:bold;
			padding:12px 41px;
			text-decoration:none;
			text-shadow:0px 1px 0px #ffffff;
	    line-height: 1.2;
			margin-bottom: 15px;
		}
		.myButton:hover {
			background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
			background-color:#e9e9e9;
			color:#5d9767;
		}
		.myButton:active {
			position:relative;
			top:1px;
		}

		.myInputTextLabel {
			padding:0px;
			padding-left: 5px;
	    line-height: 1.2;
			font-size: small;
		}

		.myInputText {
			background:#fdfdfd;
	    font-size: 18px;
	    color: #333;
	    line-height: 1.2;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 25px;
			padding-right: 25px;
			border-radius: 5px;
			border: 1px solid;
			border-color: #c4c4c4;
			margin-bottom: 15px;			
		}

		.myInputText:focus {
			background:#ffffff;
		}

		.myInputText[disabled] {
			background-color: #e1e1e1;
			cursor: not-allowed;
		}

		.mySliderLabel {
			padding:0px;
			padding-left: 5px;
	    line-height: 1.2;
			font-size: small;
		}


		.mySlider {
		  -webkit-appearance: none;
		  width:200px;
		  height: 15px;
		  border-radius: 5px;   
		  background: #d3D3D3;
		  outline: none;
		  opacity: 0.7;
		  -webkit-transition: .2s;
		  transition: opacity .2s;
		}
		
		.mySlider::-webkit-slider-thumb {
		  -webkit-appearance: none;
		  appearance: none;
		  width: 25px;
		  height: 25px;
		  border-radius: 50%; 
		  background: #707070;
		  cursor: pointer;
		}
		
		.mySlider::-moz-range-thumb {
		  width: 25px;
		  height: 25px;
		  border-radius: 50%;
		  background: #707070;
		  cursor: pointer;
		}
		.mySelectLabel {
			padding:0px;
			padding-left: 5px;
	    line-height: 1.2;
			font-size: small;
		}

		.mySelect {
		  position: relative;
		  display: inline-block;
		  vertical-align: middle;
		}
		
		.mySelect select {
			background-color:#fdfdfd;
	    font-size: 18px;
	    color: #333;

			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 25px;
			padding-right: 25px;
			border-radius: 5px;
			border: 1px solid;
			border-color: #c4c4c4;
		  margin: 0;
			margin-bottom: 15px;			

		  text-indent: 0.01px;
		  text-overflow: '';
		  -webkit-appearance: button; /* hide default arrow in chrome OSX */
		}
		
		.mySelect::before,
		.mySelect::after {
		  content: "";
		  position: absolute;
		  pointer-events: none;
		}
		
		.mySelect::after { /*  Custom dropdown arrow */
		  /*content: "\25BC";*/
		  height: 1em;
		  font-size: .625em;
		  line-height: 1.5;
		  right: 1.2em;
		  top: 50%;
		  margin-top: -.5em;
		}
		
		.mySelect::before { /*  Custom dropdown arrow cover */
		  width: 2em;
			height:43px;
		  right: 0;
		  top: 0;
		  bottom: 0;
		  border-radius: 0 3px 3px 0;
		}
		
		.mySelect select[disabled] {
		  color: rgba(0,0,0,.3);
		}
		
		.mySelect select[disabled]::after {
		  color: rgba(0,0,0,.1);
		}
		
		.mySelect::before {
		  background-color: rgba(0,0,0,.15);
		}
		
		.mySelect::after {
		  color: rgba(0,0,0,.4);
		}