/*-----------------------Common CSS [Don't Change]-----------------------*/
body {
	-webkit-user-select: none;
	-ms-user-select:none;
	-moz-user-select: none;
	overflow:auto;
	padding:0px;
	margin:0px;
}
@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.woff?5n7df5') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "HelveticaNeue-Bold";
	font-style: normal;
	font-weight: 400;
	src: local('HelveticaNeue-Bold'), local('HelveticaNeue-Bold'), url('../fonts/HelveticaNeue-Bold.otf') format('truetype');
}
@font-face {
	font-family: "HelveticaNeue-Light";
	font-style: normal;
	font-weight: 400;
	src: local('HelveticaNeue-Light'), local('HelveticaNeue-Light'), url('../fonts/HelveticaNeue-Light.otf') format('truetype');
}
@font-face {
	font-family: "AnonymousPro-Regular";
	font-style: normal;
	font-weight: 400;
	src: local('AnonymousPro-Regular'), local('AnonymousPro-Regular'), url('../fonts/AnonymousPro-Regular.ttf') format('truetype');
}
@font-face {
	font-family: "OpenSans-Regular";
	font-style: normal;
	font-weight: 400;
	src: local('OpenSans-Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.ttf') format('truetype');
}
.displayClass{
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	justify-content: center;
}
.mainContainer{
	position:absolute;
	width:1024px;
	height:768px;
	margin:auto;
	/* border:solid 1px #000000; */
	overflow:hidden;
}
.contentContainer{
	position:absolute;
	width:1024px;
	height:768px;
	top:0px;
	/* background-image:url('../media/bg.png'); */
}
#loaderScreen{
	width:1024px;
	height:768px;
	position:absolute;
	z-index:10000;
	background-color:white;
}
.loadWrapper{
	position:absolute;
	width:1024px;
	height:768px;
}
/*-----------------------Loading Screen [can be changed based on the Loading spinner you want]-----------------------*/
.spinner {
	width: 60px;
	height: 60px;
	background-color: #00bfff;
	-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
	animation: sk-rotateplane 1.2s infinite ease-in-out;
	position: absolute;
    top: 301px;
    left: 475px;
}
@-webkit-keyframes sk-rotateplane {
	0% { -webkit-transform: perspective(120px) }
	50% { -webkit-transform: perspective(120px) rotateY(180deg) }
	100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
/*-----------------------Start writing Your CSS from here-----------------------*/
.topBar{
	position:absolute;
	top:0px;
	left:0px;
	width:1024px;
	height:80px;
	background-color:#00c3aa;
}
.barImage{
	position:absolute;
	top:14px;
	left:19px;
	width:100px;
	height:54px;
	background-image:url('../media/barImage.png');
}
.barText{
	position:absolute;
	top:28px;
	left:124px;
	width:300px;
	height:30px;
	color:#FFFFFF;
	font-size:26px;
	font-family:HelveticaNeue-Light;
}
.contentArena{
	position:absolute;
	top:80px;
	left:0px;
	width:1024px;
	height:688px;
	background-color:#283745;
}
.helpButton{
	position:absolute;
	top:7px;
	left:972px;
	width:28px;
	height:28px;
	color:#41b3f9;
	font-size:22px;
	font-family:HelveticaNeue-Bold;
	border-radius:50%;
	border:solid 1px #41b3f9;
	cursor:pointer;
}
.blinkClass {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 1.0; 	color:#ffdd50; border:solid 1px #ffdd50; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 1.0; 	color:#ffdd50; border:solid 1px #ffdd50; }
    100% { opacity: 1.0; }
}
@keyframes blinker {
    0% { opacity: 1.0; color:#41b3f9; border:solid 1px #41b3f9;}
    25% { opacity: 1.0; color:#ffdd50; border:solid 1px #ffdd50;}
    50% { opacity: 1.0; color:#41b3f9; border:solid 1px #41b3f9;}
    75% { opacity: 1.0; color:#ffdd50; border:solid 1px #ffdd50;}
    100% { opacity: 1.0; }
}
.cpuConatiner{
	position:absolute;
	top:40px;
	left:10px;
	width:1000px;
	height:480px;
}
.programMemoryContainer{
	position:absolute;
	top:0px;
	left:0px;
	width:255px;
	height:354px;
}
.programMemoryText{
	position:absolute;
	top:0px;
	left:0px;
	width:268px;
	text-align:center;
	color:#41b3f9;
	font-size:16px;
	font-family:HelveticaNeue-light;
}
.ProgramMemorytable{
	position:absolute;
	top:30px;
	left:0px;
	width:255px;
	height:340px;
}
#programMemory {
	position:absolute;
	width:220px;
	height:390px;
	color:#53595b;
	padding:5px;
	font-size:16px;
	font-family:AnonymousPro-Regular;
	border-radius:5px;
	resize: none;
	overflow: auto;
	white-space: pre;
	background: url(../media/line.png) #a4bcb8;
	background-attachment: local;
	background-repeat: no-repeat;
	padding-left: 27px;
	padding-top: 3px;
	border:1px solid #ccc;
	outline:none;
	background-position:-5px -8px;
}

textarea#programMemory::selection{
    color: red;
}

textarea#programMemory::-moz-selection {
    color: red;
}


.connectorContainer{
	position:absolute;
	top:30px;
	left:276px;
	width:460px;
	height:420px;
}
.iconClass{
	position:absolute;
	color:#939393;
}
[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-01:before {
	content: "\e900";
}
.icon-02:before {
	content: "\e906";
}
.icon-03:before {
	content: "\e907";
}
.icon-04:before {
	content: "\e901";
}
.icon-05:before {
	content: "\e905";
}
.icon-06:before {
	content: "\e902";
}
.icon-07:before {
	content: "\e904";
}
.icon-08:before {
	content: "\e903";
}
#statementToGear{
    font-size: 378px;
    top: -134px;
    left: -232px;
}
#gearToInput1{
    font-size: 378px;
    top: 72px;
    left: -241px;
}
#gearToInput2{
    font-size:378px;
    top: 109px;
    left: -260px;
}
#gearToOperator{
    font-size:378px;
    top: 150px;
    left: -96px;
}
#Input1ToOperator{
    font-size:378px;
    top: 45px;
    left: -123px;
}
#Input2ToOperator{
    font-size:378px;
    top: 191px;
    left: -95px;
}
#OperatorToOutput{
    font-size:378px;
	top: 172px;
    left: 52px;
}
#OutputToStatement{
    font-size:378px;
	top: 15px;
    left: 165px;
}

#OutputToMemory{
	position:absolute;
	top:61px;
	left:288px;
	width:308px;
	height:270px;
	background-color:#939393;
}
.iconNewClass{
	position:absolute;
	background-color:#939393;
}
#OTS_main{
	position:absolute;
	top:0px;
	left:-130px;
}
#OTS_0{
	top:152px;
	left:555px;
	height:200px;
	width:4px;
}
#OTS_1{
	top:152px;
	left:365px;
	height:4px;
	width:194px;
}
#OTS_2{
	top:46px;
	left:365px;
	height:107px;
	width:4px;
}
#OTS_3{
    top:53px;
    left:359px;
    height:17px;
    width:17px;
    border-radius:50%;
}
#STM_0{
	top:152px;
	left:555px;
	height:4px;
	width:54px;
}
#STM_1{
    top:145px;
    left:584px;
    height:17px;
    width:17px;
    border-radius:50%;
}
.statementToMemory{
	position:absolute;
	top:62px;
	left:270px;
	width:325px;
	height:133px;
}
.inputGroup{
	position:absolute;
    width:433px;
    height:91px;
    left:275px;
}
#inputGroup_0{
	top:0px;
}
.inputLabel{
	position:absolute;
	top:4px;
	left:19px;
	width:433px;
	text-align:center;
	color:#41b3f9;
	font-size:16px;
	font-family:HelveticaNeue-light;
}
.inputBoxClass{
	position:absolute;
	left:22px;
	top:31px;
	width:410px;
	height:40px;
	padding:10px;
	text-align:center;
	font-size:20px;
	font-family:OpenSans-Regular;
	background-color:#ffefd4;
	border-radius:7px;
    border: 0px solid;
}
.gearContainer{
	position:absolute;
	left:274px;
	top:110px;
	width:91px;
	height:122px;
	border-radius:20px;
	background-color:#000000;
	border:solid 1px #a4bcb8;
}
.gear {
	float: none;
	position: absolute;
	text-align: center;
	-moz-animation-name:ckw;
	-moz-animation-duration:1.5s;
	-webkit-animation-name:ckw;
	-webkit-animation-duration: 1.5s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: 3;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 3;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
}
.gearStop{
	float: none;
	position: absolute;
	text-align: center;
	-moz-animation-name:cckw;
	-moz-animation-duration:2s;
	-webkit-animation-name:cckw;
	-webkit-animation-duration:2s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
}
.gear1{
	float: none;
	position: absolute;
	text-align: center;
	-moz-animation-name:ckw1;
	-moz-animation-duration:1.5s;
	-webkit-animation-name:ckw1;
	-webkit-animation-duration: 1.5s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: 3;
	-moz-animation-direction: reverse;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: backwards;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 3;
	-webkit-animation-direction: reverse;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: backwards;
}
.gearStop2{
	float: none;
	position: absolute;
	text-align: center;
	-moz-animation-name:cckw1;
	-moz-animation-duration:2s;
	-webkit-animation-name:cckw1;
	-webkit-animation-duration:2s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
}
.gearBig{
	position:absolute;
	top:14px;
	left:13px;
	width:53px;
	height:52px;
	background-image:url('../media/gearBig.png');	
}
.gearSmall{
	position:absolute;
	top:60px;
	left:30px;
	width:45px;
	height:45px;
	background-image:url('../media/gearSmall.png');
}

@-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes cckw {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes cckw {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
/* second animation */
@-webkit-keyframes ckw1 {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes ckw1 {
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes cckw1 {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes cckw1 {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
.containerALU{
	position:absolute;
    top: 317px;
    left: 379px;
    width: 350px;
    height: 168px;
}
.smallInputBox{
    position:absolute;
    left:1px;
    width:58px;
    height:35px;
    padding:10px;
    text-align:center;
    font-size:20px;
    font-family:OpenSans-Regular;
    background-color:#f9cf7a;
    border-radius:5px;
}
#smallInput_0{
    top: 5px;
}
#smallInput_1{
    top: 86px;
}
.smallInputLabel{
    position: absolute;
    top: 144px;
    left: 0px;
    width: 78px;
    height: 21px;
    color: #41b3f9;
    text-align: center;
    font-size: 16px;
    font-family: HelveticaNeue-light;
}
.operatorBox{
    position:absolute;
    top:45px;
    left:172px;
    width:62px;
    height:58px;
    background-color:#69dc6d;
    border-radius:5px;
    text-align:center;
    font-size:20px;
    font-family:OpenSans-Regular;
}
.operatorBoxLabel{
    position: absolute;
    top: 104px;
    left: 161px;
    width: 78px;
    height: 21px;
    color: #41b3f9;
    text-align: center;
    font-size: 16px;
    font-family: HelveticaNeue-light;
}
.outputBox{
	position:absolute;
	left:313px;
	top:45px;
    width:292px;
    height:38px;
	padding:10px;
	background-color:#43ecd6;
	border-radius:5px;
	text-align:center;
	font-size:20px;
	font-family:OpenSans-Regular;
}
.outputBoxLabel{
    position: absolute;
    top: 104px;
    left: 312px;
    width: 313px;
    height: 21px;
    color: #41b3f9;
    text-align: center;
    font-size: 16px;
    font-family: HelveticaNeue-light;
}
.dataMemoryContainer{
	position:absolute;
	top:0px;
	left:736px;
	width:260px;
	height:341px;
}
.memoryLabel{
	position:absolute;
	top:3px;
	left:0px;
	width:260px;
	height:40px;
	color:#41b3f9;
	text-align:center;
	font-size:16px;
	font-family:HelveticaNeue-light;
}
.tableConatiner{
	position:absolute;
	top:32px;
	left:1px;
	width:258px;
	height:298px;
	border-radius:5px;
}
table{
	position:static;
	width:100%;
	border-collapse:separate;
    border-radius:5px;
    -moz-border-radius:5px;
}
tr{
	width:100%;
}
td, th {
	text-align:center;
	/* width:33.3%; */
	height:30px;
}
td.column_1, th.td.column_1{
	width:39.6%;
}
td.column_2, th.td.column_2{
	width:24%;
}
td.column_3, th.td.column_3{
	width:36.3%;
}
th {
    border-top: none;
	color: #53595b;
	background-color:#a4bcb8;
	font-family:HelveticaNeue-light;
	font-size:15px;
}
td{
	background-color:#a4bcb8;
}
/* td:first-child, th:first-child {
     border-left: none;
} */
tr>td{
	font-size:14px;
	font-family:HelveticaNeue-light;
}
.buttonConatiner{
	position: absolute;
    top: 520px;
    left: 518px;
    width: 490px;
    height: 35px;
	z-index:1000;
}
.buttonClass{
	position:relative;
	float:left;
	top:3px;
	width:145px;
	height:28px;
	line-height:28px;
	margin-left:5px;
	text-align:center;
	font-size:16px;
	font-family:HelveticaNeue-light;
	border:solid 1px #41b3f9;
}
.deactiveBtns{
	color:#a5a5a5;
	border:solid 1px #a5a5a5;
	cursor:default;
	outline:0;
	pointer-events:none;
}
.activeBtns{
	color:#41b3f9;
	border:solid 1px #41b3f9;
	cursor:pointer;
}
.activeBtns:hover{
	color:#ffdd50;
	border:solid 1px #ffdd50;
}
.consoleContainer{
	position:absolute;
	top:558px;
	left:20px;
	width:984px;
	height:114px;
	color:red;
	font-size:28px;
	font-family:HelveticaNeue-light;
}
.textAreaWrapper{
	position:absolute;
	width:982px;
	height:117px;
}
#myTextArea{
	position:absolute;
	left:498px;
	width:474px;
	height:107px;
	color:#ffffff;
	font-size:14px;
	font-family:AnonymousPro-Regular;
	background-color:#000000;
	overflow-y:auto;
	resize:none;
	padding: 2px 5px;
	border:solid 1px #a5a5a5;
}
#myTextAreaHistory{
	position:absolute;
	width:984px;
	color:#ffffff;
	font-size:14px;
	font-family:AnonymousPro-Regular;
	background-color:#000000;
	overflow-y:auto;
	resize:none;
	display:none;
	height:auto;
	padding: 2px 5px;
	border:solid 1px #a5a5a5;
}
#myTextAreaOperLog{
	position:absolute;
	width:473px;
	height:107px;
	color:#ffffff;
	font-size:14px;
	font-family:AnonymousPro-Regular;
	background-color:#000000;
	overflow-y:auto;
	resize:none;
	padding: 2px 5px;
	border:solid 1px #a5a5a5;
}
.helpStatements{
	position:absolute;
	width:1024px;
	height:768px;
	z-index:1000;
}
.wrapper{
	position:absolute;
	width:1024px;
	height:768px;
	background-color:#ffffff;
	opacity:0.2;
}
.statementConatiner{
	position:absolute;
	width:392px;
	height:58px;
}
#statementSet_0{
	top:600px;
    left:140px;
}
#statementSet_1{
	top:261px;
    left:356px;
}
#statementSet_2{
	top: 335px;
    left: 406px;
}
#statementSet_3{
	top:416px;
	left:406px;
}
#statementSet_4{
	top:375px;
	left:570px;
}
#statementSet_5{
	top:375px;
	left:614px;
}
#statementSet_6{
	top: 496px;
    left: 168px;
} 
#statementSet_7{
	top:497px;
	left:260px;
}
#statementSet_8{
	top:497px;
	left:395px;
}
#statementSet_9{
	top:497px;
	left:565px;
}
#statementSet_10{
	top:532px;
	left:30px;
}
#statementSet_11{
	top:532px;
	left:170px;
}
/* 
#statementSet_6{
	top:497px;
	left:215px;
}
#statementSet_7{
	top:497px;
	left:370px;
}
#statementSet_8{
	top:497px;
	left:520px;
}
#statementSet_9{
	top:532px;
	left:30px;
}
#statementSet_10{
	top:532px;
	left:170px;
} */
.prevBtn{
	position:absolute;
	float:left;
	width:26px;
	height:58px;
	color:#d4d4d4 ;
	background-color:#db5637;
	line-height:50px;
	text-align:center;
	font-size:22px;
	font-family:HelveticaNeue-light;
	cursor:pointer;
}
.inactivePrevBtn{
	position:absolute;
	float:left;
	width:26px;
	height:58px;
	color:#d4d4d4 ;
	background-color:#ec9581;
	line-height:50px;
	text-align:center;
	font-size:22px;
	font-family:HelveticaNeue-light;
}
.textWrapper{
	position:absolute;
	float:left;
	width:326px;
	padding:5px;
	height:47px;
	left:27px;
	background-color:#ffffff;
	/* opacity:0.8; */
}
.statementText{
	position:absolute;
	float:left;
	width:326px;
	padding:5px;
	height:47px;
	left:27px;
	text-align:center;
	font-size:16px;
	font-family:OpenSans-Regular;
}
.switchBtn{
	position:absolute;
	float:left;
	width:26px;
	height:58px;
	left:364px;
	color:#d4d4d4 ;
	background-color:#db5637;
	line-height:50px;
	text-align:center;
	font-size:22px;
	font-family:HelveticaNeue-light;
	cursor:pointer;
}
.nextBtn{
	position:absolute;
	float:left;
	width:26px;
	height:58px;
	left:364px;
	color:#d4d4d4 ;
	background-color:#db5637;
	line-height:50px;
	text-align:center;
	font-size:22px;
	font-family:HelveticaNeue-light;
	cursor:pointer;
}
.closeBtn{
	position:absolute;
	float:left;
	width:26px;
	height:58px;
	left:364px;
	color:#d4d4d4 ;
	background-color:#db5637;
	line-height:58px;
	text-align:center;
	font-size:22px;
	font-family:HelveticaNeue-light;
	cursor:pointer;
}
.statementConnectorLeft{
	position:absolute;
	width:5px;
	height:50px;
	top:57px;
	left:20px;
	background-color:#ffffff;
	opacity:0.8;
}
.statementConnectorRight{
	position:absolute;
	width:5px;
	height:50px;
	top:57px;
	left:364px;
	background-color:#ffffff;
	opacity:0.8;
}
.statementConnectorTop{
	position:absolute;
	width:5px;
	height:50px;
	top:-50px;
	left:20px;
	background-color:#ffffff;
	opacity:0.8;
}
.statementConnectorBottom{
	position:absolute;
	width:5px;
	height:50px;
	top: 58px;
    left: 18px;
	background-color:#ffffff;
	opacity:0.8;
}
.cActive{
	color:#66c1dd;
}
#totalvalArray, #jsonValArray, #outputValue, #outputValue2, #currentLineNumber,#runClick{
	display:none;
}
#tokenArray{
	display:none;
}
#showOutputToUser{
	display:none;
	line-height:40px;
}
.localMemoryCnt{
	position: absolute;
    top: 80px;
    left: 0px;
    width: 1024px;
    height: 688px;
    z-index: 100;
    display: none;
}
.funcPopupCnt{
	position: absolute;
    top: 364px;
    left: 41px;
    width: 324px;
    height: 203px;
    background-color: #4478a0;
    color: #fff;
    padding: 12px;
    cursor: move;
}
.FunctionCall_1{
	z-index: 1000;
}
.FunctionCall_2{
	z-index: 1010;
	top:280px;
}
.FunctionCall_3{
	z-index: 1030;
	top:230px;
}
.FunctionCall_4{
	z-index: 1040;
	top:180px;
}
.FunctionCall_5{
	z-index: 1050;
	top:130px;
}
.FunctionCall_6{
	z-index: 1060;
	top:80px;
}
.FunctionCall_7{
	z-index: 1070;
	top:330px;
	left:670px;
}
.FunctionCall_8{
	z-index: 1080;
	top:280px;
	left:670px;
}
.FunctionCall_9{
	z-index: 1090;
	top:230px;
	left:670px;
}
.FunctionCall_10{
	z-index: 1100;
	top:180px;
	left:670px;
}

.column_right{
	position:absolute;
	width:340px;
	left:14px;
	font-family:HelveticaNeue-light;
}

.localMemoryContainer{
	position:absolute;
	top:0px;
	left:0px;
	width:320px;
	height:215px;
}
.localMemoryLabel{
	position:absolute;
	top:0px;
	left:0px;
	width:320px;
	height:25px;
	color:#fff;
	padding-left:3px;
	font-size:15px;
	font-family:HelveticaNeue-light;
}
.localMemoryLabel span{
   text-align: right;
   padding-right: 6px;
   float: right;
}
.localMemoryTableCnt{
	position: absolute;
    top: 27px;
    left: 1px;
    width: 320px;
    height: 172px;
    border-radius: 5px;
}
table.localMemory{
	color:#53595b;
}
.borderTopLeftRadius {
	border-top-left-radius:5px;
}
.borderTopRightRadius {
	border-top-right-radius:5px;
}
.borderBottomLeftRadius {
	border-bottom-left-radius:5px;
}
.borderBottomRightRadius {
	border-bottom-right-radius:5px;
}

#modalContainer {
	background-color:rgba(0, 0, 0, 0.3);
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:10000;
	background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
	position:relative;
	width:300px;
	min-height:100px;
	margin-top:50px;
	border:1px solid #666;
	background-color:#fff;
	background-repeat:no-repeat;
	background-position:20px 30px;
}

#modalContainer > #alertBox {
	position:fixed;
}

#alertBox h1 {
	margin:0;
	font:bold 0.9em verdana,arial;
	background-color:#3073BB;
	color:#FFF;
	border-bottom:1px solid #000;
	padding:2px 0 2px 5px;
}

#alertBox p {
	font:0.7em verdana,arial;
	height:50px;
	padding-left:5px;
	margin-left:55px;
}

#alertBox #closeBtn {
	display:block;
	position:relative;
	margin:5px auto;
	padding:7px;
	border:0 none;
	width:70px;
	font:0.7em verdana,arial;
	text-transform:uppercase;
	text-align:center;
	color:#FFF;
	background-color:#357EBD;
	border-radius: 3px;
	text-decoration:none;
}

/* unrelated styles */

#mContainer {
	position:relative;
	width:600px;
	margin:auto;
	padding:5px;
	border-top:2px solid #000;
	border-bottom:2px solid #000;
	font:0.7em verdana,arial;
}

h1,h2 {
	margin:0;
	padding:4px;
	font:bold 1.5em verdana;
	border-bottom:1px solid #000;
}

code {
	font-size:1.2em;
	color:#069;
}

#credits {
	position:relative;
	margin:25px auto 0px auto;
	width:350px; 
	font:0.7em verdana;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	height:90px;
	padding-top:4px;
}

#credits img {
	float:left;
	margin:5px 10px 5px 0px;
	border:1px solid #000000;
	width:80px;
	height:79px;
}

.important {
	background-color:#F5FCC8;
	padding:2px;
}

code span {
	color:green;
}

#pauseBtn{
	display:none;
}

.inputBox{
    position: absolute;
    height: 22px;
    width: 462px;
    bottom: 0px;
    left: 5px;
    z-index: 10000;
    line-height: 19px;
    display: none;
}
.inputBox span{
	float:left;
}
.inputBox .inputTxt{
	color:#ffffff;
	font-size:14px;
	font-family: AnonymousPro-Regular;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.inputBox input{
    background-color: transparent;
    border: 0px solid #fff;
    display: inherit;
    color: #fff;
    z-index: 1000;
    bottom: 0px;
    margin-left: 0px;
    line-height: 18px;
	font-size:14px;
	width:auto;
	white-space: pre-wrap;
    word-wrap: break-word;
	font-family: AnonymousPro-Regular;
}
.inputBox input:focus{
	 outline: none;
}
#stepBtnNext, .inputClass{
	display:none;
}
.programMemoryInput{
	display:none;
}

/* checkbox button */
.checkboxOperator{
	position: relative;
    float: left;
    top: 3px;
}
.checkboxOperator #checkboxLevel.deactive {
    cursor:default;
}
.checkboxOperator #checkboxLevel{
    display:inline-block;
    width:28px;
    height:28px;
    margin:0px;
    vertical-align:middle;
	text-align:center;
	cursor:pointer;
	background:#3b3f3e;
	border:solid 1px #a5a5a5;
}
.checkboxOperator #checkboxLevel.active{
	border:solid 1px #41b3f9;
}
.checkboxOperator #checkboxLevel.run{
	cursor:default;
}
.checkboxOperator .active{
	cursor:pointer;
}
.checkboxOperator span.tickmark {
	width: 18px;
    height: 28px;
    content: "\2713";
    vertical-align: middle;
    line-height: 28px;
    text-align: center;
    margin: 0px auto;
    display: inline-block;
    color: #70787e;
    font-size: 22px;
    font-weight: bold;
}
.checkboxOperator .active span{
    content: "\2713";
	color:#57afe2;
}
/* checkbox button */