.gcoder p{
	font-family: 'Open Sans';
	font-size: 18px;
	margin: 0px;
	padding: 0px;	
}

.highlight{
	background: yellow;
}

.gcoder a{
	color: #000000;
	text-decoration: none;
}

.gcoder h1{
	font-family: 'Open Sans';
	font-weight: 700;
	font-size: 40px;
	letter-spacing: -1px;
	margin: 0px 0px 10px 0px;
}

.gcoder .line{
	clear: both;
	width: 100%;
	height: 1px;
	background: #333333;
	margin-bottom: 30px;
}

.gcoder h2{
	font-family: 'Open Sans';
	font-weight: 700;
	font-size: 30px;
	line-height: 33px;
	color: #777777;
	margin: 0px 0px 30px 0px;
}

.gcoder input[type=submit]{
	cursor: pointer;
}

.gcoder #image{
	cursor: pointer;
}

/* Style for messages */

.successMessage{
	padding: 5px;
	background: green;
	color: white;
}

.errorMessage{
	padding: 5px;
	background: red;
	color: white;
}

.msgTable{
	margin: -1px 0px -1px 0px;
}

.msgTable tr td:not(:last-child){
	cursor: pointer;
}

.msg{
	padding: 10px 10px 20px;
	font-size: 12pt;
}

.msg .line{
	margin: 10px 0px;
}

/* End style for messages */

/* Style for messages */

.gcoder .studentMessage{
	padding: 10px;
	background: #E7F0F5;
	border: 0px;
}

.gcoder .studentMessage:nth-child(2n){
	background: #FFFFFF;
	border: 1px solid #E7F0F5;
}

/* End style for messages */

/* Style look of Pages */

.gcoder{
	width: 100%;
	background: #FFFFFF;
/*	margin: 54px 0px 0px -500px;
	position: relative;
	left: 50%; */
	padding: 20px 20px 60px;
}

.gcoder input[type=text]{
	width: 70%;
	padding: 10px;
	font-size: 30px;
	font-family: "Open Sans";
}

.gcoder input[type=text].smaller{
	width: 50%;
}

.gcoder .gcodertext a{
	font-weight: bold;
	text-decoration: underline;
}

.gcoder select{
	width: 75%;
	padding: 10px;
	font-size: 30px;
	font-family: "Open Sans";
}

.gcoder select.smaller{
	width: 50%;
}

.gcoder select[multiple]{
	margin-top: 0px;
	float: right;
	height: 262px;
}

.gcoder #text{
	width: 70%;
	height: 60%;
	max-height: 60%;
	padding: 10px;
	font-family: "Open Sans";
	border: 1px solid #9A9A9A;
	overflow: auto;
}

.gcoder #text a{
	font-weight: bold;
	text-decoration: underline;
}

.gcoder input[type=submit], .gcoder .button, #activateMeasureBox input[type=submit]{
	width: 20%;
	padding: 15px 0px;
	float: right;
	background: #333333;
	color: #FFFFFF;
	border: 0px;
	font-family: "Open Sans";
	font-size: 18px;
	margin-top: 10px;
	text-align: center;
	margin: 10px 0px 10px 10px;
	cursor: pointer;
}

#chooseStatistic{
	width: 15%;
	height: 192px;
	padding: 20px;
	background: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -131px 0px 0px -116px;
	border: #808080 solid 1px;
    z-index: 999;
    box-shadow: 2px 2px 10px #777777;
}

.buttonnofloat{
	width: 20%;
	display: inline-block;
	padding: 15px 0px;
	background: #333333;
	color: #FFFFFF;
	border: 0px;
	font-family: "Open Sans";
	font-size: 18px;
	margin-top: 10px;
	text-align: center;
	margin: 5px 0px 5px 0px;
	cursor: pointer;
}

.gcoder input[type=file]::-webkit-file-upload-button {
  visibility: hidden;
}

.gcoder input[type=file]::before{
	content: 'Image for upload';
	display: inline-block;
	background: #333333;
	color: #FFFFFF;
	border: solid 1px #9A9A9A;
	width: 100%;
	padding: 15px 0px;
	outline: none;
	cursor: pointer;
	font-size: 18px;
	font-family: "Open Sans";
	text-align: center;
}

.gcoder input[type=file]{
	float: right;
	width: 100%;
	margin: 2px 0px -18px 0px;
}

.gcoder input[type=file]:focus{
	outline: none;
}

.gcoder img{
	max-width: 900px;
	margin: 10px 0px;
}

.gcoder video{
	max-width: 900px;
	margin: 10px 0px;
}

.gcoder table#statHead .statBBold{
	font-weight: bold;
	font-size: 14pt;
	line-height: 7pt;
	padding-left: 10px;
}

.gcoder table#statHead td{
	line-height: 24pt;
}

.gcoder .testHeader{
	text-align: center;
	width: 940px;
	padding: 10px;
	background: #333333;
	color: #FFFFFF;
	margin-bottom: 2px;
	clear: both;
	cursor: pointer;
}

.gcoder .statAnswerWrong{
	background: #C24949;
	cursor: help;
}

.gcoder .statAnswerWrong:hover{
	background: red;
}

.gcoder table#answerInfo{
	width: 100%;
	margin: -20px 0px 40px 0px;
}

.gcoder table#answerInfo td{
	border-bottom:1px solid black;
}

.gcoder .statAnswerRight{
	background: #8DB900;
	cursor: help;
}

.gcoder .statAnswerRight:hover{
	background: BEFA00;
}

.gcoder .statistics .button{
	margin: 0px 0px 25px 10px;
}

.gcoder .gcoderid{
	display: none;
}

#copyPage{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 280px;
	height: 134px;
	margin: -77px 0 0 -150px;
	background: #FFFFFF;
	box-shadow: 0px 0px 30px #555555;
	z-index: 99;
	padding: 10px;
}

#copyPage select{
	width: 280px;
}

#copyPage input{
	width: 280px;
	padding: 10px;
	border-radius: 0px;
	background: #333333;
	color: #FFFFFF;
	font-family: 'Open Sans';
	font-size: 14px;
	border: 1px solid black;
	font-weight: 400;
	margin-top: 2px;
}

/* Notes and hightlight */

.gcoder table#tblHighlight tr:nth-child(2n){
	background: #E7F0F5;
}

.note{
	display: inline-block;
	cursor: pointer;
	width: 918px;
	padding: 10px 20px;
	font-size: 18px;
	margin-bottom: 1px;
	background: #E7F0F5;
}

.note:nth-child(2n+1){
	background: #FFFFFF;
	border-bottom: 1px solid #D0D8DD;
}

.note:last-of-type{
	background: #E7F0F7;
	border-bottom: 0px;
	border-top: 0px;
}

/* end */

.letsgo{
	display: inline-block;
	width: 640px;
	padding: 15px 0px;
	background: #333333;
	color: #FFFFFF;
	border: 0px;
	font-family: "Open Sans";
	font-size: 18px;
	text-align: center;
}

#addBookmark{
	position: absolute;
	display: inline-block;
	width: 100px;
	padding: 5px 0px;
	background: #333333;
	color: #FFFFFF;
	text-align: center;
	cursor: pointer;
	opacity: 0.5;
	border-radius: 5px;
}

#addBookmark:after {
    content: "";
    position: absolute;
    top: 33px;
    right: 60px;
    border-style: solid;
    border-width: 15px 15px 0px;
    border-color: #333333 transparent;
    display: block;
    width: 0;
    z-index: 1;
}

#addBookmark:before {
    content: "";
    position: absolute;
    top: 34px;
    right: 60px;
    border-style: solid;
    border-width: 15px 15px 0px;
    border-color: #808080 transparent;
    display: block;
    width: 0;
    z-index: 0;
}

/* Questions */

.answerBtn{
	width: 100%;
	padding: 15px 0px;
	color: #FFFFFF;
	background: #333333;
	margin-top: 10px;
	text-align: center;
	font-weight: 700;
	cursor: pointer;
}

/* Navigation */

#pageNavi{
	position: absolute;
	width: 300px;
	color: #FFFFFF;
	left: 50%;
	margin-left: -150px;
	text-align: center;
}

#prevPageBtn{
	float: left;
	padding: 0px 20px;
	cursor: pointer;
	border-right: 1px solid white;
}

#nextPageBtn{
	float: right;
	padding: 0px 20px;
	cursor: pointer;
	border-left: 1px solid white;
}

.inactiveBtn{
	cursor: default;
	color: #AAAAAA;
}

/* End style look of Page */


/* Style for tests */

form h2{
	font-size: 20pt;
}

.testQ label{
	display: inline-block;
	width: 478px;
	padding: 15px 0px;
	background: #333333;
	color: #FFFFFF;
	text-align: center;
	margin-top: -20px;
	cursor: pointer;
	font-size: 10pt;
}

.testQ label:nth-child(4n){
	margin-left: 4px;
}

.testQ label:nth-child(3n){
	margin-top: 4px;
}

.testQ label.chosen{
	background: #DDDDDD;
	color: #333333;
}

.testQ label.missing{
	background: #B30000;
	color: #FFFFFF;
}



.correctAnswer{
	font-weight: bold;
	color: green;
}

.wrongAnswer{
	font-weight: bold;
	color: red;
}

/* End style for tests */


/* Style for exercise boxes (used for measuring tools and exercises) */

.exerciseBox input[type=text]{
	text-align: center;
}

.mesheader{
	font-weight: bold;
}

td < span{
	background: #CCCCCC;
}

/* End style for exercise boxes (used for measuring tools and exercises) */


/* Style for controls */

#controls a, #inserPageImage{
	margin: 10px 10px 10px 0px;
	float: left;
}

/* End style for controls */


/* Style for NC Programming */

#ncprgWrapper{
	width: 600px;
	background: #EEEEEE;
	position: absolute;
	padding: 0px;
	top: 50%;
	left: 50%;
	margin: -265px 0px 0px -121px;
}

#ncprgWrapperShow{
	height: 600px;
	width: 600px;
	background: #EEEEEE;
	position: relative;
	padding: 0px;
	top: 50%;
	left: 50%;
	margin: 30px 0px 0px -300px;
}

#ncprgWrapperStudent{
	width: 600px;
	background: #EEEEEE;
	display: block;
	position: relative;
	padding: 0px;
	top: 0;
}

#ncprgWrapperShowStudent{
	height: 600px;
	width: 600px;
	background: #EEEEEE;
	position: relative;
	padding: 0px;
	top: 50%;
	left: 50%;
	margin: 0px 0px 0px -300px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

#nccode{
	position: relative;
	background: #EEEEEE;
	height: 580px;
	width: 35%;
	padding: 10px;
	left: 50%;
	border: 1px solid #CCCCCC;
	float: right;
	margin: 0px 0px 0px 0px;
}

#nccode .nccode{
	font-family: "Courier New", Courier, monospace;
}

.dots, .dotdone, .dotred{
	position: absolute;
	width: 1.7%;
	height: 1.7%;
	background: blue;
	border-radius: 50%;
	z-index: 30;
}

.dotdone{
	background: gray;
	z-index: 15;
}

.dotred{
	background: red;
}

.dotred>span{
	opacity: 0;
}

.dots.coord{
	background: gray;
	z-index: 15;
}

.dotdone.coord{
	background: green;
	z-index: 15;
}

.dotcurrent.coord{
	background: blue;
	z-index: 15;
}

.coord span{
	position: relative;
	font-size: 14px;
	right: 33px;
	top: -140%;
	display: inline-block;
	width: 30px;
	text-align: right;
}

.tool{
	position: absolute;
	width: 5%;
	height: 5%;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 20;
}

.tool.milling{
	background-image: url('tool-milling.png');
}

.tool.turning{
	background-image: url('tool-turning.png');
}

.tool.milling.on{
	background-image: url('tool-milling.gif');
}

.tool.milling.on.fast{
	background-image: url('tool-milling-fast.gif');
}

.tool.milling.clockwise {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.faceplate {
	position: absolute;
	width: 5%;
	height: 5%;
	top: 47.5%;
	background-image: url('faceplate-stopped.png');
	background-size: contain;
	background-repeat: no-repeat;
}

.faceplate.cw {
	top: 37.5%;
	background-image: url('faceplate-running.png');
}

.faceplate.ccw {
	top: 57.5%;
	background-image: url('faceplate-running.png');
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipY;
    -ms-filter: "FlipY";
}

.arcpoint{
	position: absolute;
	width: 1.7%;
	height: 1.7%;
	background-image: url('arccenter.png');
	background-size: contain;
}

.square{
	float: left;
	box-sizing: border-box;
	width: 5%;
	height: 5%;
	margin: 0;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
}

#yAxis{
	position: absolute;
	top: 0px;
	left: 50%;
	width: 1px;
	height: 100%;
	background: #000000;
}

#xAxis{
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: #000000;
}

.yAxisStops:first-child{
	border: none;
}

.xAxisStops:first-child{
	border: none;
}

.yAxisStops{
	width: 20px;
	height: 5%;
	border-top: 1px solid black;
	position: relative;
	left: -10px;
	box-sizing: border-box;
}

.yAxisStops span{
	position: relative;
	font-size: 14px;
	right: 33px;
	top: -50%;
	display: inline-block;
	width: 30px;
	text-align: right;
}

.xAxisStops{
	float: left;
	width: 5%;
	height: 20px;
	border-left: 1px solid black;
	position: relative;
	top: -10px;
	box-sizing: border-box;
}

.xAxisStops span{
	position: relative;
	font-size: 14px;
	right: 50%;
	top: 100%;
	display: inline-block;
	width: 100%;
	text-align: center;
}

#coordinate{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -265px 0px 0px -120px;
}

#coordinateShow{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -336px 0px 0px -300px;
}

#coordinateShowStudent{
	position: absolute;
	// top: 0%;
	left: 50%;
	// padding-top: 100%;
	width: 100%;
	margin: -100% 0 0 -50%;
}

textarea#gcode{
	text-transform: uppercase;
	font-size: 18pt;
	width: 340px;
	height: 402px;
	resize: none;
}

#gcodeForm{
	margin-top: -50px;
}

#gcodeForm input[type=text]{
	width: 340px;
}

#gcodeForm input[type=submit], #gcodeForm .button{
	float:left;
	width: 165px;
}

#gcodeForm .button{
	margin-left: 0px;
}

.step, .hint, .hidden{
	display: none;
}

#ncprgWrapperStudent>div.dots:last-of-type {
    opacity: 0;
}
/* End style for NC Programming */