/*
 @import url('https://fonts.googleapis.com/css?family=Space+Mono'); 

@font-face {
	font-family: 'Space+Mono';
	src: url('ext/Space_Mono/SpaceMono-Regular.ttf');
}
*/

body {
  font-family: helvetica, arial, sans-serif;
  font-size: 18px;
}

	/*
	document, body, p, div {
		margin:  0px;
		spacing:  0px; 
	 	background: _#FFBF00;
	 	color: black; 
	 	font-family: monospace; , 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 : white; 
	  margin:  0px;
	  padding:  0px; 
	}	

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

	button {
		 border-radius: 0px;
		 border: 1px solid black; 
	}

	.actionbutton {
		display: inline; 
		background: darkred; goldenrod; 
		color: white; 
		padding-left: 10px; 
		padding-right: 10px;
		margin-right: 10px; 
	}

	.actionbuttonstate {
		opacity: 0.5;
		background: none;
	}

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


	.console {
		max-width:  800px;

	}

	.menu {
		background: gold;  color: black;
	}
		.menutitle {
			color: darkred;
		}
		#sourcecode_selection {
			background: gold; /* rgba(255,215,0,0.8);  */
			opacity: 0.8;
			border: 1px solid golden;
			width: 60%;

		}

		@media only screen and (max-width: 767px) { /* 767 */
				#sourcecode_selection {
					width: 95%;
				}
		}




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

			padding:  10px; 
		}

		#container_display { 
			width: 20%; min-width:  20%; max-width:  20%;
			
		}
			#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%;
	}


	.code_category_container {

		border-top: 1px solid gold; 
	}

	.code_category_content  {

		background: rgba(255,215,0,0.25); 
		padding-left: 20px; padding-right: 0px;
		padding-top: 10px;
		padding-bottom: 20px;
	}

	.code_category {

		background: gold; 
		color: black;
		font-size: 120%; 
		color: black;
		margin-bottom: 5px;

		padding-left: 5px; 
		

	}
		  .code_category_distance {

		  		height: 5px;
		  		min-height: 5px;
				max-height: 5px;
				font-size: 40%;
			}	


	.editdetail {
		margin-top: 10px;
		padding-left: 5px;
		background: gold;
		color: black;
	}

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

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


	body {
	  /* font-size: 80%; */
	}
		
		#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;
	}


}