body {
	font-family: 'Verdana';

	  background-color:#269;
	  background-image: linear-gradient(white 2px, transparent 2px),
	  linear-gradient(90deg, white 2px, transparent 2px),
	  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
	  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
	  background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
	  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

#container {
	display:none;
}
.navbar {
	display: none;
}

.settingbox {
	-webkit-box-shadow: 20px 20px 50px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 20px 20px 50px 0px rgba(0,0,0,0.75);
	box-shadow: 20px 20px 50px 0px rgba(0,0,0,0.75);
	position: absolute;
	z-index: 2;
}

#settotalsbox {
	top: -150px;
}

.popover {
	max-width: 800px;
	width: 800px;
}

#displaypanelbox {
	top: -40px;
	left: 50px;
}

#controlbox {
	top: -120px;
	left: -20px;
}

#jackstripbox {
	top: -30px;
	right: 100px;
}

#kpanelbox {
	left:-280px;
}

#patternsbox {
	bottom: -120px;
	right: -40px;
}

#spanbox {
	top: -120px;
}

#printerbox {
	top: 400px;
	width: 300px;
}

#xsettingbox {
	bottom: -100px;
	left: -70px;
}

#ssettingbox {
	top: -110px;
	left: -55px;
}

#msettingbox {
	top: -110px;
	left: -55px;
}

#bedsteadfarbox {
	bottom: 200px;
	left: 110px;
}

#bedsteadnearbox {
	bottom: 200px;
	left: 110px;
}

.gridback {
	width: 6800px;
	height: 2800px;
}

/* C Panel : Set Totals & Printer */

#C-PANEL {
	width: 1400px;
	height: 3000px;
	position: absolute;
	left:0px;
	top:100px;
	border:1px solid #ccc;
	background-repeat:no-repeat;
	background-image:url("../images/CPanelBack1.jpg");
}

#settotalspanels {
	position: absolute;
	top:1400px;
	left:30px;
	background-color:#ccc;
	padding:0px;
	width: 1340px;
	height: 700px;
}

/* RELAY-RACK :  */

#RELAY-RACK {
	width: 4400px;
	height: 3000px;
	position: absolute;
	left:1400px;
	top:100px;
	border:1px solid #ccc;
	background-repeat:no-repeat;
	background-image:url("../images/RelayRackBack1.jpg");
}

#LHRELAYS {
	width: 800px;
	height: 2960px;
	float:left;
}

#lamps {
	position:absolute;
	top:0px;
	left:150px;
}

.lamp {
	float:left;
	width: 80px;	
	height: 80px;
	background-repeat:no-repeat;
    background-position:0px 0px;
    position:relative;
    margin: 0 20px;
}

.lampred {
	background-image:url("../images/lgebulb_red.png");
}
.lampyellow {
	background-image:url("../images/lgebulb_yellow.png");
}
.lamporange {
	background-image:url("../images/lgebulb_orange.png");
}
.lampwhite {
	background-image:url("../images/lgebulb_white.png");
}
.lampon {
	background-position:0px -80px;
}

#testpanel {
	position: absolute;
	top:1400px;
	left:0px;
	width:780px;
	background-color:#333;
}
.testpanelsection {
	padding-left:20px;
}

#printer {
	position: absolute;
	top:2500px;
	left:0px;	
	z-index:10;
}
#printeroutput {
	background-color:white;	
	width: 500px;
	height: 76px;
	position: absolute;
	top:110px;
	left:140px;
}
#printout {
	color:black;
	font-family: 'Cutive Mono', monospace;
	margin-left:20px;
	margin-top:20px;
	margin-bottom:20px;
	font-size:16px;
	padding-bottom:36px;
}
#printerbase {
	position: absolute;
	top:127px;
	left:7px;
	background-repeat:no-repeat;
	background-image:url("../images/IBMPrinterBase.gif");
	width: 700px;
	height: 333px;	
}
#printercarriage {
	position: absolute;
	top:0px;
	left:0px;
	background-repeat:no-repeat;
	background-image:url("../images/IBMPrinterCarriage.gif");
	width: 978px;
	height: 274px;		
}
#printerroller {
	position: absolute;
	top:89px;
	left:85px;
	background-repeat:no-repeat;
	background-image:url("../images/IBMPrinterRoller.gif");
	width: 567px;
	height: 32px;		
}

#MAINRELAYS {
	position: relative;
	float:left;
}

#displaypanelouter {
	background-color:#999;
	padding:100px;
	position: absolute;
	top:1200px;
	left:0px;
}

#displaypanel {
	width: 860px;
	font-family: 'Gochi Hand', cursive;
	background-color:black;
	padding:10px;
}

#jackstrippanel {
	position: absolute;
	top:1665px;
	left:970px;
	background-color:#999;
	padding:100px;
}

#controlpanel {
	position: absolute;
	left:1060px;
	top: 1250px;
	background-color:#000;
	padding:20px;
}

/*  K-Panel : Main Q Bus switches and X Plug Panel */
#K-PANEL {
	width: 1800px;
	height: 3000px;
	position: absolute;
	left:5800px;
	top:100px;
	border:1px solid #ccc;
	background-repeat:no-repeat;
	background-image:url("../imagesnew/KPanelBack1.jpg");
}

#kpanel {
	position: absolute;
	top:460px;
	left:180px;
	width:1400px;
}

#xplugpanelouter {
  position:absolute;
  top:2405px;
  left:40px;
  z-index:1;
}

/* J-PANEL */

#J-PANEL {
	width: 2100px;
	height: 3000px;
	position: absolute;
	left:7600px;
	top:100px;
	border:1px solid #ccc;
	background-repeat:no-repeat;
	background-image:url("../images/JPanelBack1.jpg");
}
#spanspanels {
	position: absolute;
	left: 20px;
	top: 1100px;
	background-color:#ccc;
	padding:40px;
	width: 2060px;
}

#patternpanels {
	position: absolute;
	left: 1160px;
	top: 1520px;
	width: 660px;
}


/* Bedstead */

#bedsteadnear {
	width: 2000px;
	height: 3350px;
	position: absolute;
	left:9700px;
	top:10px;
	background-repeat:no-repeat;
	background-image:url("../images/BedsteadBack.gif");
}
#bedsteadfar {
	width: 2000px;
	height: 3350px;
	position: absolute;
	left:10200px;
	top:10px;
	background-repeat:no-repeat;
	background-image:url("../images/BedsteadBack.gif");
}

.tapeinstalled {
	background-position:-2000px 0px;	
}
.taperunning {
	background-position:-4000px 0px !IMPORTANT;
}

.bedsteadswitch {
	position: absolute;
	top:1100px;
	background-repeat:no-repeat;
	background-image:url("../images/BedsteadSwitch.png");
	width: 223px;
	height: 248px;
	cursor:pointer;
	background-position:0px 0px;
}

#bedsteadswitchnear {
	left:40px;
}
#bedsteadswitchfar {
	right:40px;
}

.bedsteadswitchon {
	background-position:0px -248px;
}

/* Panels */






#slinkpanels {
	position: absolute;
	left: 4800px;
	top: 600px;
	background-color:#000;
	padding: 0px;
}

#mlinkpanels {
	position: absolute;
	left: 5200px;
	top: 600px;
	background-color:#000;
	padding: 0px;
}




#mctrlpanels {
	position: absolute;
	left: 5050px;
	top: 1200px;
	background-color:#000;
	padding: 20px;
	width: 660px;
}



#tapeview {
	overflow-y:hidden;
	height: 1200px;
	position: absolute;
	top:500px;
	left:5800px;
	background-color:white;
}




#tracepanel {
	position: absolute;
	top:2510px;
	left:1000px;
	background-color:#fff;
	padding:50px;
	width: 2500px;
	height: 250px;
	display:none;
}

/* Link boards */

.boardname {
	position:absolute;
	top:0px;
	right:40px;
	color:white;
	font-size:30px;
	z-index:2;
}
.linkboard {
	clear:both;
	padding:40px;
	position: relative;
}
.linkrow {
	width: 250px;
}
.link {
	float:left;
	width: 50px;
	height: 20px;
	background-repeat:no-repeat;
	cursor:pointer;
	background-position:0px 0px;
	position:relative;
	background-image:url("../imagesnew/link.png");	
}
.linkset {
	background-position:0px -20px;
}

/* X Plug board */

#xplugpanel {

}



#xplugpanel {
  position:relative;
  top:0px;
  left:0px;
  height: 560px;
  background-color:#ccc;
  padding:80px;
  -webkit-transform: perspective( 600px ) rotateX( 5deg );
     -moz-transform: perspective( 600px ) rotateX( 5deg );
       -o-transform: perspective( 600px ) rotateX( 5deg );
          transform: perspective( 600px ) rotateX( 5deg );    
}

.xplugrow {
	width: 1588px;
}
.xplughole {
	float:left;
	width: 38px;
	height: 38px;
	background-repeat:no-repeat;
	cursor:pointer;
	background-position:0px 0px;
	position:relative;
	background-image:url("../images/jackstripB.png");
}
.xplugholespacer {
	float:left;
	width: 38px;
	height: 38px;
}
/* Jack Strips */

.jackstriprow {
	width: 2390px;
	clear:both;
}

.jackhole {
	float:left;
	width: 38px;
	height: 38px;
	background-repeat:no-repeat;
	cursor:pointer;
	background-position:0px 0px;
	position:relative;
	background-image:url("../images/jackstrip.png");
}
.jackseperator {
	border-right:2px solid white;
}
.jackvspacer {
	width:760px;
	background-color:black;
	height:38px;
	float:left;	
}
.jackstriprowspacer {
	width: 30px;
	height: 38px;
	float:left;
}
.jackholeblack {
	float:left;
	width: 38px;
	height: 38px;
	background-repeat:no-repeat;
	background-position:0px 0px;
	position:relative;
	background-image:url("../images/jackstripBlack.png");
}
.jackblack {
	background-position:0px -114px;
}
.jackwhite {
	background-position:0px -76px;
}
.jackred {
	background-position:0px -38px;
}

/* Display Board */

.bulb {
	float:left;
	width: 32px;
	height: 32px;
    background-repeat:no-repeat;
    background-position:0px 0px;
    position:relative;
    margin:5px;
}
.bulb[data-bulb]::before {
	content: attr(data-bulb);
	position:absolute;
	top:-5px;
	left:8px;
	font-size:32px;
}
.bulbyellow {
	background-image:url("../imagesnew/bulb_yellow.png");
}
.bulbon {
	background-position:0px -32px;
}
.bulbred {
	background-image:url("../imagesnew/bulb_red.png");
}

.displayspacer {
	height: 42px;
	clear:both;
}

/* Settings Display */

.settingdisplayrow {
	background-color:black;
	height:42px;
}
.settingsection {
	float:left;
}

/* Counter Display */

.counterdisplayrow {
	background-color:black;
	height:42px;
}
.countersection {
	width:210px;
	float:left;
	border-top:1px solid white;
}

/* Control Switches */

.controlpanelrow {
	width:1000px;
}
.ctrlswitchsm {
	margin: 0px !IMPORTANT;
}
.ctrlswitch {
	float:left;
	width: 50px;
	height: 147px;
	background-repeat:no-repeat;
	cursor:pointer;
	background-position:0px -147px;
	position:relative;
	margin: 20px 0;
}
.ctrlswitch[data-label]::before {
	content: attr(data-label);
	position:absolute;
	top:-8px;
	left:0px;
	font-size:18px;
	color:white;
	margin:4px;
	width:90%;
	text-align:center;
}
.ctrlswitch[data-label2]::after {
	content: attr(data-label2);
	position:absolute;
	bottom:-4px;
	left:0px;
	font-size:18px;
	color:white;
	margin:4px;
	width:90%;
	text-align:center;
}
.ctrlswitch[data-label3]::before {
	content: attr(data-label3);
	position:absolute;
	top:-8px;
	left:20px;
	font-size:18px;
	color:white;
	margin:4px;
	width:90%;
	text-align:center;
	z-index:20;
}
.ctrlswitchup {
	background-position:0px 0px;
}
.ctrlswitchdn {
	background-position:0px -294px;
}

.ctrlswitchblack {
	background-image:url("../imagesnew/sw2_toggle_black.png");
}
.ctrlswitchred {
	background-image:url("../imagesnew/sw2_toggle_red.png");
}
.ctrlswitchyellow {
	background-image:url("../imagesnew/sw2_toggle_yellow.png");
}
.ctrlswitchgreen {
	background-image:url("../imagesnew/sw2_toggle_green.png");
}
.ctrlswitchgray {
	background-image:url("../imagesnew/sw2_toggle_gray.png");
}
.ctrlswitchblue {
	background-image:url("../imagesnew/sw2_toggle_blue.png");
}
.ctrlswitchbrown {
	background-image:url("../imagesnew/sw2_toggle_brown.png");
}
.ctrlswitchblank {
	background-image:url("../imagesnew/sw2_toggle_blank.png");
}

/* Motor Control Panel */
.mctrlpanel {
	position:relative;
	width: 290px;
	float:left;
	margin:0 10px;
	background-color:#333;
	padding-left:20px;
}

/* Pattern Panel */
.patternpanel {
	position:relative;
	width: 290px;
	float:left;
	margin:0 10px;
}

.gangpanel {
	float:left;
	width: 100%;
	height: 120px;
	background-color:#333;
	position:relative;
	padding-left:20px;
	padding-right:20px;
	font-size:20px;
	color:white;
}
.gtxttop {
	position:absolute;
	top:0px;
	left:0px;
	color:white;
	width: 100%;
	text-align:center;
}
.gtxtbot {
	position:absolute;
	bottom:0px;
	left:2px;
	width: 100%;
	text-align:center;
}
.gtxtsideT {
	position:absolute;
	top:20px;
	left:0px;
	font-size:16px;
	width: 25px;
	text-align:right;
}
.gtxtsideB {
	position:absolute;
	bottom:20px;
	left:0px;
	font-size:16px;
	width: 25px;
	text-align:right;
}
.mtxttop {
	position:absolute;
	top:0px;
	left:0px;
	color:white;
	width: 100%;
	text-align:center;
}
.mtxtbot {
	position:absolute;
	bottom:20px;
	left:20px;
	color:white;
}
.mtxtswt {
	position:absolute;
	top:20px;
	left:0px;
	color:white;
	width: 100%;
	text-align:center;
}
.gangswitch {
	float:left;
	width: 250px;
	height: 120px;
	background-repeat: no-repeat;
	cursor:pointer;
	background-position:0px -120px;
	position: relative;
}
.gangswitchup {
	background-position:0px 0px;
}
.gangswitchdn {
	background-position:0px -240px;
}
.gangswitchblack {
	background-image:url("../imagesnew/swgang_toggle_black.png");
}

/* Switches */

.switchrow {
	clear:both;
}
.markdot {
	float:left;
	width: 70px;
	height: 20px;
	background-image:url("../images/mark_dot.png");
	border-top:1px solid black;
	border-bottom:1px solid black;	
}
.markx {
	float:left;
	width: 70px;
	height: 20px;
	background-image:url("../images/mark_x.png");
	border-top:1px solid black;
	border-bottom:1px solid black;	
}
.markplus {
	float:left;
	width: 70px;
	height: 20px;
	background-image:url("../images/mark_plus.png");
	border-top:1px solid black;
	border-bottom:1px solid black;	
}
.markblank {
	float:left;
	width: 70px;
	height: 20px;
	background-color:#333;
	border-top:1px solid black;
	border-bottom:1px solid black;	
}
.mark1 {
	float:left;
	width: 70px;
	height: 20px;
	background-image:url("../images/mark_1.png");
	border-top:1px solid black;
	border-bottom:1px solid black;		
}
.mark2 {
	float:left;
	width: 70px;
	height: 20px;
	background-image:url("../images/mark_2.png");
	border-top:1px solid black;
	border-bottom:1px solid black;		
}
.mark3 {
	float:left;
	width: 70px;
	height: 20px;
	background-image:url("../images/mark_3.png");
	border-top:1px solid black;
	border-bottom:1px solid black;		
}
.mark4 {
	float:left;
	width: 70px;
	height: 20px;
	background-image:url("../images/mark_4.png");
	border-top:1px solid black;
	border-bottom:1px solid black;		
}
.mark5 {
	float:left;
	width: 70px;
	height: 20px;
	background-image:url("../images/mark_5.png");
	border-top:1px solid black;
	border-bottom:1px solid black;		
}
.sideblank {
	float:left;
	width: 20px;
	height: 75px;
	background-color:#333;
	border: 1px solid black;
}
.switch {
	float:left;
	width: 70px;
	height: 75px;
    background-repeat:no-repeat;
    cursor:pointer;
    background-position:0px -75px;
    position:relative;
    margin: 20px 0;
}
.switchup {
	background-position:0px 0px;
}
.switchdn {
	background-position:0px -150px;
}

.switchblack {
	background-image:url("../imagesnew/sw_toggle_black.png");
}
.switchyellow {
	background-image:url("../imagesnew/sw_toggle_yellow.png");
}
.switchred {
	background-image:url("../imagesnew/sw_toggle_red.png");
}
.switchgreen {
	background-image:url("../imagesnew/sw_toggle_green.png");
}
.switchgray {
	background-image:url("../imagesnew/sw_toggle_gray.png");
}
.switchblank {
	background-image:url("../imagesnew/sw_toggle_blank.png");
	cursor:default;
	float:left;
	width: 70px;
	height: 75px;
    background-repeat:no-repeat;
    cursor:pointer;
    background-position:0px -75px;
    position:relative;
    margin: 20px 0;
}
.above {
	position: absolute;
    top: -20px;
}
.below {
	position: absolute;
    top: 75px;
}

/* Tape */


#papertape {
	font-family: 'Cutive Mono', monospace;
	width:100px;
	border-left:1px solid black;
	border-right:1px solid black;
	font-size:50px;
	letter-spacing: -10px;
}
.taperow {
	display:inline-block;
	height: 10px;
}
.sprocket {
	font-size:20px;
	position:relative;
	top:-6px;
}

/* Rotary Switches */
.settotalcol {
	float:left;
	position:relative;
}
.rotarynotice {
	width: 150px;
	height: 150px;	
	position:relative;
	margin:20px;
	top:45px;
	left:40px;
}
.rotarynotice DIV {
	background-color:white;
	padding:5px;
	font-family: 'Gochi Hand', cursive;
	font-size: 30px;
	width: 100px;
	text-align:center;
	border:1px solid #666;
}
.rotaryswitch {
	background-image:url("../imagesnew/rotary_bg.png");
	width: 150px;
	height: 150px;
    background-repeat:no-repeat;
    cursor:pointer;
    position:relative;
    margin:20px;
}
.rotaryswitch DIV {
	background-image:url("../images/rotary.png");
	background-repeat:no-repeat;
	width: 150px;
	height: 150px;
    position:relative;

}

.rotary1 {
	-ms-transform: rotate(30deg); /* IE 9 */
	-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
	transform: rotate(30deg);
}
.rotary2 {
	-ms-transform: rotate(60deg); /* IE 9 */
	-webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */
	transform: rotate(60deg);
}
.rotary3 {
	-ms-transform: rotate(90deg); /* IE 9 */
	-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
	transform: rotate(90deg);
}
.rotary4 {
	-ms-transform: rotate(120deg); /* IE 9 */
	-webkit-transform: rotate(120deg); /* Chrome, Safari, Opera */
	transform: rotate(120deg);
}
.rotary5 {
	-ms-transform: rotate(150deg); /* IE 9 */
	-webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
	transform: rotate(150deg);
}
.rotary6 {
	-ms-transform: rotate(180deg); /* IE 9 */
	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
	transform: rotate(180deg);
}
.rotary7 {
	-ms-transform: rotate(210deg); /* IE 9 */
	-webkit-transform: rotate(210deg); /* Chrome, Safari, Opera */
	transform: rotate(210deg);
}
.rotary8 {
	-ms-transform: rotate(240deg); /* IE 9 */
	-webkit-transform: rotate(240deg); /* Chrome, Safari, Opera */
	transform: rotate(240deg);
}
.rotary9 {
	-ms-transform: rotate(270deg); /* IE 9 */
	-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
	transform: rotate(270deg);
}

.spancol {
	height: 280px;
	padding-left:60px;
	float:left;
	position: relative;
}
.spancol[data-label]::before {
	content: attr(data-label);
	position:absolute;
	top:260px;
	left:280px;
	font-size:30px;
	background-color:white;
}
.rotaryupper {
	float:left;
	top: -30px;
	margin: 0px;
}
.rotarylower {
	float:left;
	position: relative;
	top: 90px;
	margin: 0px;
}
.rotaryupper[data-label]::before {
	content: attr(data-label);
	position:absolute;
	top:60px;
	left:-70px;
	font-size:20px;
	background-color:white;
}
.rotarylower[data-label]::before {
	content: attr(data-label);
	position:absolute;
	top:60px;
	left:-70px;
	font-size:20px;
	background-color:white;
}

#settotalswitches {
	float:left;
	position:relative;
	padding: 20px 20px;
	background-color:#333;
	top:160px;
	left:10px;
}
.settotalswitch {
	width: 120px;
	height: 60px;
	background-repeat:no-repeat;
	cursor:pointer;
	background-position:-120px 0px;
	position:relative;
	margin: 0px 0;
	background-image:url("../images/sw_h_toggle_black.png");
}
.lessthan {
	background-position:0px 0px;
}
.morethan {
	background-position:-240px 0px;
}
.settotalswitchlabel {
	background-color:white;
	color:black;
	text-align:center;
	position: relative;
	top: -10px;
	padding:5px 0px;
	font-size:20px;
	font-weight:bold;
}

#loadertitle{
	width:100%;
	text-align:center;
	color:black;
	font-size:3em;
	top:10%;
	position:absolute;
	font-weight:bold;
	background-color:white;
}
#loadertitle2{
	width:100%;
	text-align:center;
	color:#333;
	font-size:1em;
	bottom:10%;
	position:absolute;
	font-weight:bold;
	background-color:white;
}