#treemenu
{
	width: 100%;
	display: inline-block;
	padding: 0px;
	padding-top: 10px;
	vertical-align: top;
	text-align: left;
}
#treemenu > .branch
{
	cursor: pointer;
	display: block;
	font-size: 1em;
	color: #333;
	background-color: #202020;
	padding-left: 10px;
}
.branch > .options
{
	display: none;
}
.branch.open > .options
{
	display: block;
}
.branch.open > .options > .branch > a
{
	padding-left: 30px;
}
.branch.open > .options > .branch > .options > .branch > a
{
	padding-left: 60px;
}
.branch div.img
{
	padding: 10px;
	padding-top: 10px;
	vertical-align: -5px;
	float: right;
	background: url('../images/right.gif') 50% 100% no-repeat;
}
.branch.open div.img
{
	background: url('../images/down.gif') 50% 100% no-repeat;
}
.branch a
{
	text-decoration: none;
	color: #fff;
	padding: 5px;
	display: block;
	border-bottom: 1px solid #666;
}
.branch a:hover
{
	background-color: rgba(199, 28, 34, .4);
	opacity: .7;
	color: #fff !important;
}
.branch.open > .options a.selected
{
	background: url('../images/right-red.gif') 5px 50% no-repeat;
}

.tree-wrapper
{
	overflow-x:hidden;
	overflow-y:auto;
	width:275px;
	top:0;
	left:0;
	bottom:0;
	position:absolute;
}
.centerbox
{
	/*width: 80%;*/
	position: fixed;
	left:285px;
	top: 60px;
	bottom: 30px;
	right: 20px;
	overflow: hidden;
}
.centerbox .buttons
{
	padding: 20px 0 10px;
	height: 50px;
}
.centerbox .buttons div
{
	display: inline-block;
	padding: 5px;
	cursor: pointer;
}
.centerbox .buttons div.selected
{
	background-color: #c71c22;
}
#codeHTML, #codeJS, #codeASPX, #codeC, #codeVB
{
	visibility: hidden;
}
textarea
{
	width: 100%;
}
#main
{
	padding: 0;
	overflow: auto;
	position: absolute;
	top: 60px;
	bottom: 30px;
	width: 100%;
	background-color: #202020;
}
.open
{
	height:100% !important;
	visibility:visible !important;	
}

.content
{
	background-color: #fff;
	position: absolute;
	top: 50px;
	bottom: 0;
	left: 0;
	right: 0;
}
.content > iframe,
.content > textarea,
.content > div
{
	height:0;
	visibility:hidden;		
}

iframe
{
	width: 100%;
	height: 100%;
	border: none;
}
.buttons > a.tab
{
	padding: 10px;
	background-color: #c71c22;
	opacity: 0.5;
	color: #fff;
	border-radius: 5px 5px 0 0;
	cursor: pointer;
	border: 1px solid #c71c22;
	margin-bottom: 15px;
}
.buttons > a.tab:hover
{
	color: #fff;
	opacity: .7;
}
.buttons > a.tab.active
{
	opacity: 1;
}
/*.buttons > a.button
{
	background-color: #202020 !important;
	float: right;
	padding: 0 5px 0 5px;
	margin-top: -10px;
}
.buttons > a.button > img
{
	padding-right: 5px;
}
.buttons p
{
	display: inline-block;
	padding-left: 10px;
	color: #fff;
	line-height: 10px;
}*/
.CodeMirror
{
	border: 1px solid #c71c22;
	/*height: 90% !important;*/
	width: 100% !important;
}
#btnRun
{
	background-color:#202020;
}
/*.run
{
	position: absolute;
	visibility: visible !important;
	padding-top:10px;
	position:absolute;
	top:0px;
	right:20px;
	z-index:100;
}
#run
{
	color: #fff;
	cursor: pointer;
	padding:10px;
	background-color:#c71c22;
	border-radius:5px;
}*/
.footer
{
	height: 30px;
	background-color: #202020;
	position: absolute;
	bottom: 0;
	width: 100%;
	color: #a9a9a9;
	text-align: center;
	font-family: Roboto;
	font-size: small;
	line-height: 30px;
}
.gsc-control-cse
{
	padding: 0 !important;
}

.loader
{
	display:none;	
}

.loader.open
{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100% !important;	
	z-index:100;
	background-color: #202020;
	color: #ccc;
	text-align: center;
	padding-top:15%;
}

.loader .image 
{
	display: inline-block;
    border: 16px solid #ccc;
    border-top: 16px solid #c71c22;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}