body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
}

.button, .button:visited {
  display: inline-block;
  padding: 5px 10px 6px;
  color: #000;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.9em /*!important*/;				/* IE */
  border: 1px solid grey;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.25);	/* Opera */
  border-left: 1px solid rgba(255, 255, 255, 0.25);	/* Opera */
  border-right: 1px solid rgba(0, 0, 0, 0.25);		/* Opera */
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);		/* Opera */
  position: relative;
  cursor: pointer;
  width: auto;						/* IE */
  overflow: visible;					/* IE */
}


.small.button, .small.button:visited {
  font-size: 11px;
}

.tiny.button, .tiny.button:visited {
  font-size: 11px;
  padding: 4px 4px 4px;
  margin-top: -2px;
}

.button, .button:visited,
.medium.button, .medium.button:visited {
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

.large.button, .large.button:visited {
  font-size: 14px;
  padding: 8px 14px 9px;
}

.super.button, .super.button:visited {
  font-size: 34px;
  padding: 8px 14px 9px;
}


.grey.button, grey.button:visited {
  background-color: #9E989A;
}

.grey.button:hover {
  background-color: #7D797B;
}

.image.button, .image.button:visited {
  display: inline-block;
  padding: 1px 1px 1px;
  color: #fff;
/*
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
*/
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  position: relative;
  cursor: pointer;
}

.image.button.hover {
  background-color: #FFFFFF
}


.roundButton {
  display: inline-block;
  text-align: center;
/*  position: relative;*/
  overflow: hidden;
  z-index: 1;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size:  24px;
  width:  40px;
  height: 40px;
  line-height: 40px;
}

.squareButton {
  overflow: hidden;
  z-index: 1;
  padding: 0;
  cursor: pointer;
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
}

.squareButton.detGeom {
  background-color: #eee;
  border: 1px solid #bbb;
  position: absolute;
  z-index: 0;
  width: 40px;
  height: 40px;
}

.squareButton.detGeom.tiny {
  width: 28px;
  height: 26px;
  font-size: 15px;
  line-height: unset;
}

.squareButton.detGeom:hover {
  background-color: #ddd;  
}

.squareButton.detGeom.selected {
  background-color: #aaa;  
}


.roundButton.detGeom {
  background-color: #eee;
  border: 1px solid #bbb;
  position: absolute;
  z-index: 0;
}

.roundButton.detGeom:hover {
  background-color: #ddd;
}

.roundButton.detGeom.selected {
  background-color: #aaa;
}

.roundButton.large { 
  width:  56px;
  height: 56px;
  line-height: 56px;
  font-size: 28px;
}

.roundButton.small {
  width: 32px;
  height: 32px;
  line-height: 24px;
  font-size: 18px;
}

.roundButton.tiny {
  width: 28px;
  height: 26px;
  line-height: unset;
  font-size: 15px;
}   

h1 {
  margin-left: 0.5em;
  color: #12467b;
}

h2 {
  margin-left: 0.3em;
  color: #12467b;
}

h4 {
  font-size: 0.98em;
  margin-left: 6px;
  color: #036;
  margin-top: 10px;
}

.centeredText {
  text-align: center;
}

span.labeledText {
  font: bold 12px Arial, Helvetica, sans-serif;
  display: block;
}

span.italics {
  font-style:italic;
}

span.labeledText.srsText {
  display: inline-block;
  width: 60px;
  text-align: center;
}

div.spacer10 {
  clear: both;
  padding-top: 10px;
  display: block;
}

div.footerSpacer {
  padding-top: 30px;
  display: block; 
  clear: both;
  border-bottom: 1px solid #0b3c5d;
}

div.footer {
  font: 12px Arial, Helvetica, sans-serif;
  padding-top: 10px;
}


span.footerRight {
  float: right;
}

span.footerLeft {
  float: left;
}

div.widgetContainer {
  border: 3px solid #c4c2c3;
  background-color: #E6E4DB;
  width: 450px;
  overflow: auto;
  padding: 10px;
}

div.subWidgetContainer {
  border: 1px solid #aaa;
  margin-left: 10px;
}

div.subWidgetContainer.help {
  padding: 10px;
}

div.minorContainer {
  padding: 5px;
  margin: 5px;
  border: 1px solid #a9a9a9;
  background-color: #ebf0fa;
}

/* Tab stuff */
ul#tabnav {
  text-align: left;
  margin: 1em 0 1em 0;
  font: bold 12px Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #0b3c5d;
  list-style-type: none;
  padding: 3px 10px 3px 10px;
}

ul#tabnav li {
  display: inline;
  margin-left: 0px;	/* CHANGED HERE - to override Nik's style */
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4, body#tab5 li.tab5 , body#tab6 li.tab6, body#tab7 li.tab7, body#tab8 li.tab8 {
  border-bottom: 1px solid #fff;
  background-color: #fff;
}

/* Selected tab */
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a, body#tab5 li.tab5 a, body#tab6 li.tab6 a, body#tab7 li.tab7 a, body#tab8 li.tab8 a {
  background-color: #eee;
  position: relative;
  top: 1px;
  padding-top: 4px;
}

/* Added "tab" on the right side - for general motor moves.
 * Doesn't behave the same as other tabs, so doesn't need to affect
 * the body tabs.  Instead of selecting a tab, this one just pops out
 * a section with motor move controls
 */
li.rTab1 a {
  float: right;
  margin-top: -4px;
}

ul#tabnav li a {
  padding: 3px 4px;
  border: 1px solid #0b3c5d;            /* Style for top/side border of tab */
  background-color: #fff;		/* Unselected tab background color */
  color: #036;				/* Tab text color */
  margin-right: 0px;
  text-decoration: none;
  border-bottom: none;
}

ul#tabnav a:hover {
  background: #eee;
}

.hidden {
  display: none;
}

a.showLink, a.hideLink {
  text-decoration: none;
  color: #036;
}

a.srsShowHideLink {
  padding-left: 8px;
}

a.showLink:hover, a.hideLink:hover {
/*  border-bottom: 1px dotted #36f;*/
}


p {
  margin-left: 5px;
}

/*
p.centeredText {
  text-align: center;
}
*/

.largeInput {
  padding-top: 5px;
}

input.large {
  height: 22px;
}

canvas.plotter {
  background-color: #000000;
}

/* Classes to specify width */
.w30px { width: 30px; }
.w40px { width: 40px; }
.w50px { width: 50px; }
.w60px { width: 60px; }
.w70px { width: 70px; }
.w80px { width: 80px; }
.w90px { width: 90px; }
.w95px { width: 98px; }
.w100px { width: 100px; }
.w110px { width: 110px; }
.w120px { width: 120px; }
.w130px { width: 130px; }
.w140px { width: 140px; }
.w160px { width: 160px; }
.w180px { width: 180px; }
.w200px { width: 200px; }
.w300px { width: 300px; }
.w400px { width: 400px; }

div.plotterInfoContainer {
  display: block;
  width: auto;
  overflow: auto;
/*  padding: 10px;*/
/*  min-width: 1100px;*/
}

div#daqPlotInfoContainer {
  min-width: 1160px;
}

div.plotterSubContainer {
  float: left;
  padding: 8px;
  margin: 3px;
  width: auto;
  display: inline-block;
}

div#plotControlsContainer {
  padding-bottom: 11px;
}
div.plotterContainer {
  display: block;
  width: auto;
  overflow: auto;
  padding: 10px;
  margin-top: 10px;
}

select.large {
  -webkit-appearance: menulist-button;  /* Needed for Safari */
/*  height: 25px;*/
  padding: 3px 0px;
}

div#daqPlotterContainer {
  margin: 5px;
}

div#daqZoomContainer {
  margin: 5px;
}

input.daqDataInput {
  width: 160px;
  margin-right: 5px;
}

div#serverSettingsDiv {
  margin-top: 10px;
  width: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  display: none;
}

input#ipAddrText {
  width: 200px;
}

input#portNumText {
  width: 50px;
}

div#serverSettingsButtonDiv {
  margin: 10px;
  text-align: center;
}

span#settingsStatusSpan {
  width: 200px;
  padding-top: 5px;
}

/*
span#daqDataResponseText {
  padding-top: 6px;
  padding-bottom: 6px;
  display: inline-block;
}
*/
textarea#daqDataResponseText {
  width: 160px;
  height: 40px;
}

div#modPlotOptionsDiv {
  display: none;
  padding-top: 10px;

}

div.cursorSubDiv {
  float: left;
  text-align: left;
}

select.modPlotSelect {
  width: 120px;
}

label.radioLabel {
  padding-top: 2px;
}

div.scalingDiv {
  padding: 5px 20px 10px 5px;
  margin: 5px 5px 5px 60px;
  border: 1px solid #aaa;
  display: inline-block;
  width: auto;
}

div#xManualScaleDiv {
  display: none;
}

div#yManualScaleDiv {
  display: none;
}

div#daqZoomInfoContainer {
  text-align: center;
}

div#daqZoomCenteredDiv {
  display: inline-block;
  height: auto;
  width: auto;
}

/*
table.select {
  margin: 0px 5px 10px 5px;
  padding: 5px 10px 5px 5px;
  border: 1px solid #999;
  border-radius: 3px;
  font: 12px Arial, Helvetica, sans-serif;
}

tr.select {
  padding-top: 3px;
  padding-bottom: 3px;
}

*/

label.bold {
 font: bold 12px Arial, Helvetica, sans-serif;
}

input.largeCheckbox {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  margin-right: 5px;
  margin-left: 5px;
}

div#errMsgContainer {
  margin: 10px;
  padding: 10px;
  min-height: 300px;
}

div.helpSection {
  margin: 0px 10px 5px 10px;
/*  padding: 5px 5px 5px 10px;*/
  padding: 15px;
  width: 250px;  /* Will be set to auto when expandedin Javascript */
  border-radius: 2px;
  border: 2px solid #ccc;
}

div.helpSection.expanded {
  width: auto;
}

div#helpWidgetContainer {
  margin-top: 10px;
  width: auto;
}
p.help {
  margin: 5px;
/*  width: 90%;*/
}

div.helpSubsection {
  margin-top: 5px;
  margin-bottom: 10px;
}

div.helpPic {
  display: inline-block;
  text-align: center;
  margin-bottom: 25px;
}

img.helpPic {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

span.picCaption {
 font-style: italic;
 display: block;
}

div.floatPics {
  float: left;
  display: inline-block;
  margin-right: 25px;
  height: 300px;
}

img#runControlsActive {
  height: unset;
}

div.lightboxContent {
  width: unset;
  display: inline-block;
  padding: 10px;
  background-color: #e6e4db;
  border: 5px solid #c4c2c3;
}

div.lightboxClose {
  margin: 10px;
  float: right;
}

div.lightbox a.lightboxClose:link {
  text-decoration: none;
  color: black;
}

div.lightboxClose a.lightboxClose:link {
  text-decoration: none;
}

div.lightboxMain {
  margin: 10px;
  clear: both;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

div.lightboxRow {
  margin-bottom: 5px;
}

div.lightboxApplyDiv {
  margin: 15px;
}

.lightboxMain > .paddedRowDiv > span {
  padding-top: 2px;
}

div.lightboxButtons {
  text-align: center;
  margin-top: 15px;
  clear: both;
}

label.lightboxLabel {
  width: 60px;
  display: inline-block;
  text-align: right;
}

.textLeft {
  text-align: left;
}

.textRight {
  text-align: right;
}

.textCenter {
  text-align: center;
}

label.leftLabel {
  margin-right: 5px;
  margin-left: 5px;
  text-align: right;
  display: block;
  float: left;
  width: 100px;
}

label.leftLabel.wide {
  width: 140px;
}

label.leftLabel.noWidth {
  width: unset;
}

label.largeSpan {
  margin-top: 2px;
}

label.topLabel {
  margin-left: 0px;
}

span.leftLabel {
  display: inline-block;
}

span.large {
  font-size: 14px;
}

div.paddedRowDiv {
  clear: both;
  padding: 5px;
}

div.column {
  float: left;
  width: auto;
  display: inline-block;
}

div.horizButtonDiv {
  margin: 5px;
  text-align: center;
  clear: both;
  padding-top: 5px;
}


input.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input.slider:hover {
  opacity: 1;
}

input.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #caebf2;
  cursor: pointer;
}

input.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #caebf2;
  cursor: pointer;
}

div.sliderContainer {
  width: 200px;
  display: inline-block;
}

label.sliderLabel {
  float: left;
  font-size: 24px;
}

a.sliderCtrl {
  text-decoration: none;
  color: #0b3c5d;
}


.button.small.symbol {
  font-size: 18px;
  padding-bottom: 4px;
  padding-top: 0px;
}

label.diag {
  width: 300px;
  display: inline-block;
}

span.active {
  color: #ff3b3f;  /* Red text if active! */
}

span.srsAuto {
  display: inline-block;
  float: left;
  margin-top: 3px;
}

label.offsetsLB {
  display: inline-block;
  width: 60px;
}