body{margin:0 auto; font-family:"Verdana", Geneva, sans-serif; line-height:1.75;}
textarea { width: 90%; height:15em; margin:0; padding:.2em; border-width:5;}
div{padding:0em 1em 0em 1em;}

datalist{margin:.3em;}
input[type="button"]{width:6em; padding:.2em; margin:.3em;}
input[type="reset"]{width:6em; padding:.2em; margin:.3em;}
input[type="text"]:focus {	background-color: yellow; margin:.3em;} 

input[type="number"]{
	margin-bottom:10px;
	text-align: right;
	background-color: #FAEBD7;
	width:12em;
}
input[type="radio"]{margin:0.2em 0.2em 0.2em 0.5em;}

select{	text-align: center; background-color: #FAEBD7; width:16em;}

/*
table{	cellspacing: 20; margin-left:auto; margin-right:auto}
td{	text-align: right; width:10em;}
*/


table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
  border: 1px solid #ddd;
  padding: .1em;
}

table tr:nth-child(even){background-color: #f2f2f2;}

table tr:hover {background-color: #ddd;}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}



fieldset{border:2em; background:#darkgreen;}


form {
	background:none repeat scroll 0 0 #ECF1EF;
	border: 2px solid black;
	margin-left: auto;
	margin-right: auto;
            margin-top:0em;
	padding: 0em;
}

#graph{background-color:white;}
	
/*
label{
	width: 10em;
	float: left;
	text-align: right;
	margin-right: 0.5em;
	display: block
}
*/
	
.titlebar{background-color:#00005d; color:white; cursor:pointer;}
.answer{color:brown;}


/*my use*/
.titlebar{background-color:slateblue; color:white;}
.wide{	text-align: left; background-color:#FAEBD7; width:16em;}
.quick_note {
	position:fixed;
	bottom:25px;
	left:.4em;
	width:120px;
	border:1px solid black;
	font-size:0.75em;
	background:lavender;
	opacity:0.85;
}
#results {
  position:fixed;
  bottom:25px;
  left:10em;
  width:180px;
  border:1px solid black;
  font-size:0.75em;
  background:lavender;
  opacity:0.85;
}


/* Slider for image opacity*/
.slidecontainer {
  width: 40%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 10%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey 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;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/* input[type="range"]{width:12em;}
*/

#sliders label{
  width: 14em;
  float: left;
  text-align: right;
  margin-right: 1.5em;
  display: block;
}