@charset "UTF-8";



/*@font-face {

  font-family: codingFont;

  src: url("");

}*/

#documentTitle {
	background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0));
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-top: 5px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-right: -5px;
	margin-top: -7px;
}


div.bgBarH {

	height: 250px;

	width: 100%;

	position: absolute;

	top: -40%;

	xbackground-image: linear-gradient(rgba(1,123,196,1),rgba(0,0,0,0));

	background-color: rgba(1,123,196,.5);

	opacity: 1;

}



div.bgBar {

	height: 90%;

	width: 250px;

	position: absolute;

	top: 0px;

	cbackground-color: rgba(255,255,255,.2);

	background-image: linear-gradient(rgba(1,123,196,1),rgba(0,0,0,0));

	opacity: 0;

}



@keyframes moveBarUpx {

  0% {top: -10%;}

  15% {opacity: 1;}

  50% {opacity: 1;}

  100% {top: 100%;opacity:0}

}



@keyframes moveBarUp {

  0% {top: -40%;}

  50% {opacity: 1;}

  100% {top: 100%;opacity:0}

}



@keyframes moveBarLeft {

  0% {left: -10%;}

  50% {opacity: 1;}

  100% {left: 100%;opacity:0}

}



@keyframes moveBarRight {

  0% {left: 100%;}

  10% {opacity: 1;}

  100% {left: -10%;opacity:0}

}

div#bgAnimation {

	overflow: hidden;

	width: 100%;

	background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));

	height: 700px;

	position: absolute;

	opacity: .5;

	opacity: 1;

}



div.b1 {

	animation-name: moveBarLeft;

	animation-duration: 24s;

	animation-delay: 5s;

	animation-iteration-count: infinite;

	animation-direction:alternate;

	xbackground-color: red;

}

div.b2 {

	animation-name: moveBarLeft;

	animation-duration: 20s;

	animation-delay: 4s;

	animation-iteration-count: infinite;

	animation-direction:alternate;

	xbackground-color: green;

}

div.b3 {

	animation-name: moveBarLeft;

	animation-duration: 16s;

	animation-delay: 3s;

	animation-iteration-count: infinite;

	animation-direction:alternate;

	xbackground-color: blue;

}



div.b4 {

	animation-name: moveBarRight;

	animation-duration: 19s;

	animation-delay: 4s;

	animation-iteration-count: infinite;

	animation-direction:alternate;

	xbackground-color: red;

}

div.b5 {

	animation-name: moveBarRight;

	animation-duration: 15s;

	animation-delay: 3s;

	animation-iteration-count: infinite;

	animation-direction:alternate;

	xbackground-color: green;

}

div.b6 {

	animation-name: moveBarRight;

	animation-duration: 11s;

	animation-delay: 2s;

	animation-iteration-count: infinite;

	animation-direction:alternate;

	xbackground-color: blue;

}

div.b7 {

	animation-name: moveBarRight;

	animation-duration: 30s;

	animation-delay: 5s;

	animation-iteration-count: infinite;

	animation-direction:alternate;

	xbackground-color: red;

}

div.b8 {

	animation-name: moveBarRight;

	animation-duration: 26s;

	animation-delay: 2s;

	animation-iteration-count: infinite;

	animation-direction:alternate;

	xbackground-color: green;

}

div.b9 {

	animation-name: moveBarRight;

	animation-duration: 22s;

	animation-delay: 10s;

	animation-iteration-count: infinite;

	animation-direction:alternate;

	xbackground-color: blue;

}

div.a1 {

	animation-name: moveBarUp;

	animation-duration: 5s;

	animation-delay: 2s;

	animation-iteration-count: infinite;

	zanimation-direction:alternate;

	xbackground-color: red;

}

div.a2 {

	animation-name: moveBarUp;

	animation-duration: 5s;

	animation-delay: 3s;

	animation-iteration-count: infinite;

	zanimation-direction:alternate;

	xbackground-color: green;

}

div.a3 {

	animation-name: moveBarUp;

	animation-duration: 5s;

	animation-delay: 4s;

	animation-iteration-count: infinite;

	zanimation-direction:alternate;

	xbackground-color: blue;

}



html {

	scroll-behavior: auto;

}

body {

	scroll-behavior: auto;

	margin:0;

	padding: 0;

	xbackground-color: #025A8F;

	background-color: rgba(1,123,196,1);

	xbackground-image: linear-gradient(rgba(0,0,0,1),rgba(1,123,196,1));

	xbackground-color: lightgray;

	transition-property: opacity;

	transition-duration: .5s;

	transition-delay: .1s;

	opacity: 0;

	xdisplay:none;

	zoom: 1;

}

div#commentBlocker {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 105px;

	background-color: rgba(255,255,255,.5);

	display: none;

}

div.info {

	position: absolute;

	top: 22px;

	left: 140px;

	font-family: arial;

	color: rgba(255,255,255,1);

	font-size: 14px;

	text-shadow: 2px 2px 1px rgba(0,0,0,.3);

}

div.info button {

	margin-right: 2px;

	box-shadow: 2px 2px 1px rgba(0,0,0,.3);

	min-width: 75px;

}

input#infoName {

	height: 25px;

	margin-right: 2px;

	outline: none;

	box-shadow: 2px 2px 1px rgba(0,0,0,.3);

	border: none;

	padding-left: 10px;

}



div#splashScreen {

	position: absolute;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	xbackground-color: #025A8F;

	xbackground-color: #017bc4;

	background-color: rgba(0,0,0,.5);

	z-index: 3;

	xtransition-property: opacity, z-index;

	xtransition-duration: 1s;

	xtransition-delay: 1.5s;

	xclip-path: circle(100%);

	xtransition-property: clip-path;

	clip: rect(0px, 3000px, 3000px, 0px);

	transition-property: clip, width;

	transition-duration: .7s,.4s;

	transition-delay: 1s,.2s;

	transition-timing-function: linear;



}



div#splashScreen #movingBackground {

	width: 100%;

	height: 100%;

	border-right: 0px solid white;

	xmargin-left: 10px;

	xmargin-right: -10px;

	xbackground-color: white;

	position: absolute;

	top: 0px;

	left: 0px;

	z-index: 1;

	xclip: rect(0px,100%,100%,0px);

	transition-property: width, border-right;

	transition-duration: .5s;

	transition-delay: 5s;

	box-sizing: border-box;

}



div#splashScreen p {

	font-family: arial;

	font-size: 60px;

	transition-property: margin-left;

	transition-duration: .5s;

	display: inline-block;

	margin-left: -1500px;

	z-index: 2;

	position: relative;

	xtext-shadow: 0px 0px 10px orange;

	xbackground-color: white;

	padding: 20px;

	xfont-weight: bold;

	xbox-shadow: 0px 0px 30px -10px;

	xborder: 2px solid black;

	color: white;

	text-shadow: 0px 0px 30px rgba(0,0,0,1);

	xtransition-timing-function: ease-in;

	transition-delay: 0s;

}



div#splashScreen p img {

	width: 100px;

	vertical-align: middle;

		margin-top: -10px;

		xbox-shadow: 2px 2px 1px rgba(0,0,0,.3);

	xbox-shadow: 0px 0px 50px rgba(0,0,0,.5);

}



header {

min-width: 700px;

font-family: arial;

color: white;

padding-top: 20px;

font-size: 30px;

text-shadow: 2px 2px 1px rgba(0,0,0,.3);

xfilter: blur(100px);

z-index: 1;

}

    

header img:first-of-type {

	xmargin-top: 20px;
	xmargin-left: 1.5vw;

	height: 45px;

xbox-shadow: 2px 2px 1px rgba(0,0,0,.3);

vertical-align: middle;

margin-top: -5px;

margin-right: 5px;

	

}

header, #container {

	transition-property: filter;

	transition-duration: .5s;

	transition-delay: .4s;

	filter: blur(5px);

	display: none;

	opacity: 0;

}

    

    #container {



        width: 99%;

        height: 79%;

	position: absolute;

	top: 80px;

	left: 1vw;

	padding-bottom: 50px;

	min-width: 842px;

	z-index: 2;

    }    

    #codeWindow {

        width: 50%;

        height: 100%;

        xbackground-color: lightslategray;

        background-color: white;

        xborder-right: 1px solid gray;

        float: left;

        xborder: 1px solid #e6e6e6;

	margin-right: 1vw;

	position: relative;

	xbox-shadow: 0px 0px 10px black;

	box-shadow: 5px 5px 5px rgba(0,0,0,.1);

	transition: width .2s;

    }

    form {

	width: 100%;

        height: 100%;

}

    form textarea {

        xtext-shadow: 1px 1px 2px black;

        line-height: 1.5em;

        tab-size: 4;

        xfont-family: codingFont;

        width: 100%;

        height: 100%;

        background-color: inherit;

        padding: 10px;

        margin: 0;

        border: none;

        box-sizing: border-box;

	resize: none;

	color: rgba(0,0,0,.7);

	outline: none;

	font-size: 16px;

	xbox-shadow: 0px 0px 25px -10px black inset;

    }

    form textarea::placeholder {

  	color: rgba(0,0,0,.4);

  xfont-size: 1.5em;

       x text-shadow: none;

}

    #liveWindow {

        float: left;

        width: 46.9%;

        height: 100%;

        box-sizing: border-box;

        position: relative;

        xborder: 1px solid #dbdbdb;

	background-color: white;

	xbox-shadow: 0px 0px 10px black;

	box-shadow: 5px 5px 5px rgba(0,0,0,.1);

  	xbox-shadow: 0px 0px 25px -10px black inset;

	transition: opacity .2s;

	xborder: 2px solid rgba(0,0,0,1);

    }

    #bodyWindow {

        width: 100%;

        height: 100%;

        position: absolute;

        right: 0;

        top: 0;

        overflow: hidden;

    }

    iframe {

        width: 100%;

        height: 100%;

        border: none;

    }

button {

  	xbox-shadow: 0px 0px 5px black;

	xbox-shadow: 3px 3px 1px rgba(0,0,0,.3);

	background-color: #dedede;

	border: 1px solid rgba(0,0,0,.4);

	padding: 5px 10px;

	outline: none;

}

button:hover {

	background-color: white;

}

button:active {

	background-color: #dedede;

}

button.visuallyDisabled {

	background-color: darkgray;

    border-color: gray;

    color: dimgray;

}





div.label {

	position: absolute;

	top: -20px;

	right: 5px;

	font-family: arial;

color: rgba(255,255,255,1);

	font-size: 14px;

text-shadow: 2px 2px 1px rgba(0,0,0,.3);

}

span#expandCode {

	font-size: 20px;

	margin-top: -7px;

	margin-right: -5px;

	display: inline-block;

	cursor: pointer;

	color: white;

}

span#expandCode:hover {

	color: #ffcd70;

}

span.label {

	color: white;

	font-family: arial;

	font-size: 13px;

}

span.label input {

	display: inline-block;

	height: 11px;

	margin-right: 2px;

}

div#coderAlert {

	background-color: #ffcd70;

	padding: 5px 10px;

	display: inline-block;

	position: fixed;

	top: 17px;

	left: 160px;

	font-family: arial;

	box-shadow: 2px 2px 1px rgba(0,0,0,.3);	

	opacity: 0;

	transition: opacity .2s, width .2s;

	font-size: 11px;

	z-index: 1;

	text-shadow: none;

}

.bold {

	font-weight: bold;

}

.underline {

	text-decoration: underline;

}

div#buttons {

	padding-top: 10px;

	min-width: 875px;

	width: 100%;

    xmargin-left: 1.5vw;

}

div.buttonGroup {

	display: inline-block;

	

}

div.buttonGroup {

	margin-bottom: 5px;

	xborder: 2px solid rgba(255,255,255,.2);

	background-color: rgba(255,255,255,.2);

	padding: 10px;

	margin-right: 5px;

	xbox-shadow: 2px 2px 1px rgba(0,0,0,.3);

	box-shadow: 3px 3px 5px rgba(0,0,0,.1);

	position: relative;

}

div.buttonGroup span.groupName {

	position: absolute;

	bottom: -20px;

	left: 0;

	font-family: arial;

	color: rgba(255,255,255,.5);

	font-size: 12px;

	xbackground-color: inherit;

	padding: 3px 5px;

	width: 100%;

	text-align: center;

	box-sizing: border-box;
display: none;

}

    input[type="checkbox"] {



    }

div#codeControls {

	position: absolute;

	width: 35px;

	background-color: rgba(0,0,0,.1);

	bottom: 25px;

	right: 25px;

	text-align: center;

	color: white;

	padding-top: 10px;

	padding-bottom: 10px;

    opacity: 1;

}

div#codeControls span {

	display: block;

	width: 100%;

	cursor: pointer;

	line-height: 16px;

	margin-bottom: 8px;

}

div#codeControls span:hover {

    color: #ffcd70;

    cursor: pointer;

}



div#codeControls span:last-of-type {

	line-height: 25px;

	margin: 0;

}

div#codeControls span:first-of-type {

	line-height: 10px;

}

span.greenSymbol {

	font-weight: bold;

	color: #ffcd70;

}

span.greenCheck {

	color: green;

	background-color: white;

	display: inline-block;

	padding-left: 5px;

	padding-right: 5px;

	font-weight: bold;

}

div#validatorResults {

	position: relative;

	color: white;

	font-family: arial;

	display: none;

	margin-top: 6px;

	padding-bottom: 10px;

}

div#validatorResults td {

	padding: 10px;

	font-size: 20px;

}

div#validatorResults th {

	font-size: 24px;

	padding-bottom: 5px;

}



div#validatorResults table {

	border-spacing: 5px;

	margin-bottom: 50px;

	background-color: rgba(255,255,255,.2);

	box-shadow: 3px 3px 5px rgba(0,0,0,.1);

	padding: 10px;

	width: 100%;

}



div#validatorResults table tr td:first-of-type {

	height: 50px;

	text-align: center;

	width: 100px;

	font-size: 20px;

}



td.validationError {

	background-color: #ff2200;

	color: white;

}

td.validationWarning {

	background-color: orange;

	color: white;

}

div#validationBadge {

	position: absolute;

	width: 50px;

    height: 45px;

	bottom: 25px;

	right: 80px;

    opacity: .75;

    xbackground-image: url("images/html5.png");

    background-repeat: no-repeat;

    background-size: contain;

    font-family: arial;

    padding-top: 23px;

    box-sizing: border-box;
}

div#validationBadge.checkOnBadge::after {

    content: "✓";

    font-size: 30px;

    xfont-weight: bold;

    color: green;

    margin-left: 32px;

}

div#validationBadge.exOnBadge::after {

    content: "X";

    font-size: 30px;

   xfont-weight: bold;

    color: red;

    margin-left: 35px;
}

input[type="file"] {

    width: 200px;

    margin-right: 2px;

    padding: 3px;

    background-color: rgba(0,0,0,.1);

    color: rgba(255,255,255,.3);

}

div#availableFiles {

	color: white;

	font-family: arial;

	margin-top: 35px;

	padding-bottom: 10px;

    width: 500px;

}

div#availableFiles table {

	border-spacing: 0px;

	margin-bottom: 50px;

	background-color: rgba(255,255,255,.2);

	box-shadow: 3px 3px 5px rgba(0,0,0,.1);

	padding: 10px;

    width: 100%;

    xdisplay: none;

}

div#availableFiles table thead tr:nth-child(1) {

    font-size: 20px;

}

div#availableFiles table thead tr:nth-child(2) {

        display: none;

}

div#availableFiles table thead tr:nth-child(2) th {

    font-size: 16px;

    text-align: left;

    padding-left: 10px;

    padding-top: 10px;

    font-weight: normal;

}

div#availableFiles table tbody tr td {

    padding: 10px;

    padding-top: 13px;

}

div#availableFiles table tbody tr td:nth-child(3) {

	text-align: center;

	padding-left: 0;

	padding-left: 20px;

	padding-right: 30px;

}

div#availableFiles table tbody tr td:nth-child(4) {

	text-align: right;

}

div#availableFiles table tbody tr:nth-child(odd) {

    background-color: rgba(255,255,255,.1);

}

div#availableFiles img {

    height: 50px;

}

.desc::after {

	content: "\25BC";

}

.asc::after {

	content: "\25B2";

}