body {
  font-family: sans-serif;
}

h1 {
  margin-top: 0px;
  margin-bottom: 2px;
  text-align: center;
  font-size: 14pt;
  font-weight: normal;
  letter-spacing: 3px;
  word-spacing: 20px;
}
  #resetBtn {
    vertical-align: middle;
    margin-left: 20px;
  }

  button.delegate {
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
    vertical-align: middle;
    font-size: 10pt;
    letter-spacing: 2px;
    text-align: center;
  }

  #examples {
    max-width: 200px;
    letter-spacing: normal;
    word-spacing: normal;
    text-align: left;
  }

h5 {
  margin-top: 2px;
  margin-bottom: 2px;
  font-weight: normal;
  text-align: center;
}

#tools {
  position: absolute;
  width: 175px;
}

  #testResult {
    padding: 3px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
  }

  #tools button {
    margin: 2px;
  }

  #tools input[type="text"], #tools textarea {
    width: 170px;
  }
  #tools textarea {
    height: 145px;
  }

  #tools label {
    font-size: smaller;
  }

#mainHolder {
  margin-left: 180px;
  min-width: 500px;
}

#machineGraph {
  min-height: 330px;
  border: 1px solid #aaa;
  position: relative;
  overflow: auto;
}

  #start {
    position: absolute;
    top: 50%;
    left: 0;
    cursor: default;
  }

  div.state {
    position: absolute;
    display: flex;
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: #add;
    padding-left: 5px;
    cursor: move;
    border-radius: 15px;
    text-align: center;
  }

    div.dragHover {
      background-color: #aff;
    }

    div.current {
      background-color: #8c8;
    }

    div.plumbSource {
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin: 0 5px;
      top: 5px;
      background-color: #55a;
      cursor: pointer;
      border-radius: 6px;
    }

    span.stateName {
      flex-grow: 1;
    }

    input[type="checkbox"].isAccept {
      margin: 5px;
      height: 20px;
    }

    div.state div.delete {
      position: absolute;
      left: 0;
      width: 100%;
      height: 0;
    }
    div.state img.delete {
      position: relative;
      top: -18px;
      cursor: pointer;
    }

div.delete {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #aaa;
  z-index: 100;
}

#fsmDebugInputStatus {
  display: inline-block;
  margin-left: 250px;
}

  span.consumedInput {
    text-decoration: line-through;
  }
  span.currentInput {
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
  }
  span.futureInput {
    font-style: italic;
  }

.fsmStatus {
  padding-left: 2px;
  padding-right: 2px;
  font-size: 9pt;
  letter-spacing: 2px;
}

#machineGraph .fsmStatus {
  position: absolute;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 2px;
}

  span.stackBody {
    border-right: 1px solid #aaa;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
  }

#resultConsole {
  font-size: small;
  height: 180px;
  border-bottom: 1px solid #aaa;
  border-left: 1px solid #aaa;
  overflow: auto;
}

  #resultConsole div {
    padding-left: 5px;
  }

  .pending {
    background-color: #bbf;
  }

  .Pass {
    background-color: #bfb;
  }

  .Fail {
    background-color: #fbb;
  }

#footer {
  clear: both;
  font-size: 8pt;
  text-align: center;
  margin-top: 2px;
}

/* Dialog styling */
.loadSave .ui-dialog-content {
  padding: 0;
  margin: 0;
}

.loadSave .ui-dialog-buttonpane {
  padding: .05em;
  margin-top: .1em;
}

.loadSave .ui-tabs, .loadSave .ui-tabs-panel, .loadSave .ui-dialog-content textarea {
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;      /* For IE and modern versions of Chrome */
  -moz-box-sizing: border-box;   /* For Firefox                          */
  -webkit-box-sizing: border-box; /* For Safari                           */
}

.loadSave .ui-dialog-content textarea {
  font-size: x-small;
  border: 1px solid #aaa;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

span.tranStart:after {
  content:url('../images/transition_start.png');
  vertical-align: bottom;
}
span.tranEnd:before {
  content:url('../images/transition_end.png');
  vertical-align: bottom;
}

/* Local Storage Widget */
#machineName {
  width: 98%;
}

#storedMachines {
  max-height: 250px;
}

  li.machineName {
    position: relative;
    cursor: pointer;
  }

  li.machineName:hover {
    background-color: #aea;
  }

  li.machineName div.delete {
    position: absolute;
    top: 0;
    right: 0;
  }

/* jsPlumb z-index styles */
._jsPlumb_connector {
  z-index: 3;
}

._jsPlumb_endpoint {
  z-index: 4;
}

._jsPlumb_overlay {
  z-index: 5;
}

/* Image Configurations */
button.image img, img.delete {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

img.delete {width:16px; height: 16px; background-position: 0 -198px;}
img.delete:hover {background-position: 0 -176px;}

#loadBtn img {background-position: 0 -264px;}
#loadBtn:disabled img {background-position: 0 -286px;}

#saveBtn img {background-position: 0 -220px;}
#saveBtn:disabled img {background-position: 0 -242px;}

#addStateBtn img {background-position: 0 0;}
#addStateBtn:disabled img {background-position: 0 -22px;}

#testBtn img {background-position: 0 -44px;}
#testBtn:disabled img {background-position: 0 -66px;}

#stopBtn img {background-position: 0 -132px;}
#stopBtn:disabled img {background-position: 0 -154px;}

#debugBtn img {background-position: 0 -88px;}
#debugBtn:disabled img {background-position: 0 -110px;}

#bulkTestBtn img {background-position: 0 -44px;}
#bulkTestBtn:disabled img {background-position: 0 -66px;}

#resetBtn img {background-position: 0 -308px;}
#resetBtn:disabled img {background-position: 0 -330px;}