body {  
		box-sizing: border-box;
		background-color: #36454F;/*Charcoal*/
		/* Hide scrollbar for IE, Edge and  but remain functional */
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
		height: 100%;
		}
		
	ul { padding: 0; }

	li { display: flex; justify-content: space-between;}
	
	#input {
		margin: 6px 0 12px 0;
	}
	
	ul#fixed { 
		background-color: #7393B3;/*  Blue Gray*/
		height: 6.5em;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		margin: 0;
		padding: 0;
		}
			
	.input {
		display: none;
		position: absolute;
		top: 3px;
		left: 3px;
		}
		
	.active { 
		display: block;
		}
		
	.active:focus { 
		font-size: 1.2rem;
		height: 2rem;
		background-color:rgba(255,255,153, 1);/*  yellowish*/ 
		}
		
	#nav { 
		display: flex; 
		justify-content: 
		space-evenly; margin: 6px 0 6px 0; 
		}	
	
	.nav {
		padding: 0.4em; 
		border-color: #B2BEB5;/*  Ash gray*/ 
		background-color: #7393B3;/*  Blue Gray*/
		cursor: pointer; 
		}
		
	.nav.active { 
		border-color: #7393B3;/*  Blue Gray*/
		background-color: #B2BEB5;/*  Ash gray*/ 
		}
		
	.nav_input {
		display: none;
		}
		
	.nav_input.active {
		display: flex;
		justify-content: center;
		}

	#container {
		background-color: #B2BEB5;/*Ash Gray*/
		position: relative;
		top: 6em;
		}
		
	.content {
		display: none;
		}
		
	.content.active {
		display: block;
		}
		
	#container li {
		 padding: 0 0 .4rem 0;
		 }
		
	.doing { width: 58px; color: blue; background-color: SpringGreen; }
	.do {    width: 58px; color: blue; background-color: Yellow; }
	.wait {  width: 58px; color: blue; background-color: LightSalmon; }
	.done {  width: 58px; color: blue; background-color: Lavender; }
	.saved { width: 58px; color: blue; background-color: LightGray; }
	
	.button-remove { 
		background: url("remove.png");
		background-size: cover;
		border: 0;
		padding: .7em;
		margin:0 .7em 0 .7em;
		height: 1.2em;
		width: 1.2em;
		}
		
	.button-hide {
		background-image: url("hide.png");
		background-size: cover;
		background-color: transparent;
		border: 0;
		padding: .7em;
		margin:0 .7em 0 .7em;
		height: 1.2em;
		width: 1.2em;
		}
		
	.button-show {
		background-image: url("show.png");
		background-size: cover;
		background-color: transparent;
		border: 0;
		padding: .7em;
		margin:0 .7em 0 .7em;
		height: 1.2em;
		width: 1.2em;
		}
	.button-edit {
		background-image: url("edit-text.png");
		background-size: cover;
		background-color: transparent;
		border: 0;
		padding: .7em;
		margin:0 .7em 0 .7em;
		height: 1.2em;
		width: 1.2em;
		}
		
	.button-copy {
		background: url("copy.png");
		background-size: cover;
		border: 0;
		padding: .7em;
		margin: 0 .7em 0 .7em;
		height: 1.2em;
		width: 1.2em;
		}	
		
	.button-map {
		background: url("map.png");
		background-size: cover;
		border: 0;
		padding: .7em;
		margin: 0 .7em 0 .7em;
		height: 1.2em;
		width: 1.2em;
		}	
		
	.button-redo {
		background: url("reset.png");
		background-size: cover;
		border: 0;
		padding: .7em;
		margin: 0 .7em 0 .7em;
		height: 1.2em;
		width: 1.2em;
		}	
	
	.input-edit {
		flex-grow:2; 
		background:transparent; 
		border:0;
		}

	.input-edit:focus { 
		font-size: 1.2rem;
		height: 2rem;
		background-color:rgba(255,255,153, 1);/*  yellowish*/  
		width: 100%;
		}

	.span-edit {
		flex-grow:2; 
		background:transparent; 
		border:0;	
	}
	.span-edit:focus {
		font-size: 1.2rem;
		background-color:rgba(255,255,153, 1);/*  yellowish*/  
		width: 100%;
		overflow: hidden;
		resize: both;
		min-height: 40px;
		line-height: 20px;
	}
	
	.speak-focused { 
		font-size: 1.2rem;
		height: 2rem;
		background-color:rgba(255,255,153, 1);/*  yellowish*/  
		}

input[readonly] {
		background-color: Gainsboro;
	}
label.area {
		padding: 0.4em;
		margin:2px;		
		border-color:#B2BEB5; /* #B2BEB5;  Ash gray*/
		border-style: solid;
		border-width:2px;
		border-radius: 8px;
		cursor: pointer; 
		font-size:2vw;
}