document, body, p, div {
		margin:  0px;
		spacing:  0px; 
	 	background: _#FFBF00;
	 	color: black; 
	 	font-family: helvetica, arial, sans serif;
	}

	a {
		color:  darkred;
		text-decoration:  none;
	}


	textarea {
		font-size:  120%;
		font-family: helvetica, arial, sans serif;

	}

	input[type="text"], textarea {
	  background-color : #dedede; 
	  margint:  0px;
	  padding:  0px; 
	}	

	input {
	  background-color : orange; 
	  border:  1px solid white; 
	  vertical-align: middle
	}	

	.bodycontainer { max-width: 1024; margin: auto; margin-top: 20px;  }


	.console {
		max-width:  800px;

	}

	/* flex or grid */ 
	#container { display:  flex; width: 100%; vertical-align: top; text-align: top;  }
		#container_editor {  margin:  0px; padding:  0px; 
			width: 50%; min-width:  50%; max-width:  50%;

			padding:  10px; 
		}

		#container_display { 
			width: 50%; min-width:  50%; max-width:  50%;
			
		}
			#container_editor_ta { margin:  1px;  padding:  2px; width: 100%; height: 30vh }

			tr { margin: 0px; padding: 0px; }
				td { margin: 0px; padding: 0px; }

			.tablecell {
				margin: 0px; padding:  0px;
			}			

			.cell {
				margin:  0px;
				padding:  0px;
				overflow:  hidden;

				/* border:  1px solid gray; */
				margin: 0px; 
				padding:  0px;

				width:  6%;
				min-width:  6%;
				max-width:  6%;
				
				height:  15px;
				min-height:  15px;
				max-height:  15px;

				font-size:  100%;
				font-weight:  bold;
			}

	#output_container {
		width:  100%;
		min-width:  100%;
		max-width:  100%;
		max-height: 100%;
	}

		#output {
			width:  100%;
			min-width:  100%;
			max-width:  100%;
			max-height: 100%;
			overflow:  auto;
			background:  #eeeeee; 
			/* background: url("../imgs/endless_paper.png") repeat-y; */

		}


	.info_table {
		font-size:  100%;
		border:  1px solid gray; 
		margin-top:  10px;
		margin-bottom:  10px;

	}

	.img_info {
		width:  50%;
	}

/* 
--------------------------------------
mobile phone version 
--------------------------------------
*/

/* don't show things ...  */
@media only screen and (max-width: 767px) { /* 767 */

	body {  }


	

		#container {
			display:  blocK;
			padding:  5px;
		}

		#container_info {
			display:  blocK;			
			padding:  10px;
			background:  red; 
		}

		#container_display {  
			display:  block; width: 100%; min-width:  100%; max-width:  100%;
						padding:  5px;

		}

		#container_editor {  
			display:  block; width: 100%; min-width:  100%; max-width:  100%;
			margin:  0%;
			padding:  5px; 

		}



	.img_info {
		width:  75%;
		align-content: middle;
	}


}