@charset "utf-8";
/* CSS Document */
/* Create two equal columns that floats next to each other */
* {
	box-sizing: border-box;
}
.column {
	float: left;
	width: 50%;/* padding: 10px;
  height: 600px; /* Should be removed. Only for demonstration */
}
.rows {
	margin: auto;
	width:100%;
	border:1px double aqua;
	display: flex;
	flex-wrap: wrap;
}
/* Clear floats after the columns */
.rows:after {
	content: "";
	display: table;
	clear: both;
}
#drag-container {
	position:relative;
	height:100%;
	margin:0;
	padding:0;
	width:100%;
	border:1px double #900;
	overflow:hidden;
	display: inline-block;
}
.ui-resizable-e {
	cursor: col-resize;
	width: 14px;
	right: 5px;
	top: 0;
	height: 100%;
	border:1px dashed #333;
	background-color:#EFEFEF;
}
#drag-left {
	position:relative;
	float:left;
	height:610px;
	max-width: calc(100% - 320px);
	min-width:320px;
}
#drag-right {
	position:relative;
	float:left;
	height:600px;
}
#divLeft, #divRight {
	border: none;
	width: 40px;
	background-color: #000;
	color: #ccc;
	font-size:8pt;
	font-family:Arial, Helvetica, sans-serif;
	padding:2.5px;
	text-align:center;
}
#divLeft {
	margin-right: auto;
	margin-left: 0;
}
#divRight {
	margin-left: auto;
	margin-right: 0;
	margin-top:-35px;
}
#Preview {
	font-family:'Lucida Console', Monaco, monospace;
	font-size:1.5em;
	background:#eee;
	height:55px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#result {
	height:100%;
	position: absolute;
	padding-top:17px;
	padding:10px;
	margin-top:15px;
	width:95% !important;
	margin:5px !important;
}

#textareaCode, #HTMLCode, #CSSCode, #JSCode, .ASPCode, #ASPNetCode, #SQLCode, #DelphiCode, #VBSCode, #ResourcesCode {
	background-color: #ffffff;
	font-family: consolas, Menlo, "courier new", monospace;
	font-size:15px;
	height: 450px !important;
	/*height:100%;*/
	width:95%;
	padding:8px;
	resize: none;
	border:none;
	line-height:normal;
	border:2px double #000;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
    box-sizing: border-box;
	
}
.CodeSheet{
  position: absolute;
  height:80% !important;
  width:90%;
  padding-left:10px;
    	/*This was needed in order for all the Textareas to stack on top of one another, 
	If not, we could not select or edit anything in the Type=Code Section of the Multi-level Tabs*/
  z-index: 10;

}

.InnerCodeSheet{
  top: 30px;
  width:100%;
  height:100%;
    	/*This was needed in order for all the Textareas to stack on top of one another, 
	If not, we could not select or edit anything in the Type=Code Section of the Multi-level Tabs*/
  z-index: 10;
}
#HTMLtab, #CSStab, #JStab, #ASPtab, #ASPNettab, #SQLtab, #Resourcestab {
	/*border:1px double #3F0;*/ 
	height:84% !important;
	/*height:95%;*/
	width:100%; /*This helps to make it shrink when the window is smaller*/
	box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	margin-left:-10px;
}
#CSStab, #JStab, #ASPtab, #ASPNettab, #SQLtab, #Resourcestab {
	display: none;
}

@media screen and (max-width: 742px) {
 .column {
 flex: 50%;
 width: 100%;
}
 .TagList {
 margin: 5px 0;
}
 .rows {
 flex-direction: column;
 border:1px double aqua;
}
 .columnInner {
 width:100%;
 border:none;
}

 .ui-resizable-e, #divLeft, #divRight {
 display:none;
 pointer-events: none;
 opacity: 0.4;
}
 .panel-one {
 max-width:90%;
}
 #drag-left {
 border:2px double #09C;
 max-width:95%;
 margin-left:5px !important;
 height:500px !important;
}

 #drag-right {
 border:1px double #09C;
 width:95% !important;
 height:500px !important;
}
 #result {
 max-width:100%;
 margin-left:15px !important;
 height:100%;
}
 #drag-left, #drag-right {
 margin:10px;
}
 .tab {
/* width:95%;*/
}
#HTMLCode{
    width: 100%;
    height: 450px; 
    box-sizing: border-box;
}
 #textareaCode, #HTMLCode, #CSSCode, #JSCode, #ASPCode, #ASPNetCode, #SQLCode, #DelphiCode, #VBSCode, #ResourcesCode {
/* height:95% !important;
 width:100% !important;*/
 margin-left:-10px; /*This is added to move our Textarea over towards the left.*/
  width: 100%;
 
    box-sizing: border-box;
}
.SubEdit{
	 height:50% !important;
}
#JSCode, .ASPCode, #ASPNetCode {
 height:250px !important;
}
 .tabcontent {
 height:450px !important;
}
#HTMLtab, #CSStab, #JStab, #ASPtab, #ASPNettab, #SQLtab, #Resourcestab {
	border:1px double pink;
	width:95%; /*This helps to make it shrink when the window is smaller*/
	margin-left:1px;
}
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
#HTMLCode{
    width: 100%;
    box-sizing: border-box;
}
}



#mydiv {
/*  position: absolute;
  z-index: 9;*/
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 100%;
  margin-bottom:10px;
  /*width: calc(100% - 342px);
  width:1200px;*/
}
.ahref {  display:inline-block; cursor:pointer; } 
.box1{
	display:none;
}
.filename:hover{
	color:#006;
	text-decoration:overline underline;
	padding-right: 24px;
    padding-left:8px;
}