body, html {
  width: 100%;
}

.app {
  margin: 0 auto;
  max-width: 960px;
  padding: 30px;
}

/* reusables */

.app .box {
  background: #EEE;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
}

.app .disabled {
  background: #CCC;
}

.app .right {
  float: right;
}
.app .left {
  float: left;
}

.app .clear:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden
}
.app .clear {
  zoom:1
}
/* field container */

.app .right button {
  font-size: 70%;
}


/* field inputs */

.app .disabled textarea,
.app .disabled input {
  color: #CCC;
}

.app .field textarea,
.app .field input {
  width: 300px;
  border-color: #DDD;
  border-radius: 5px;
  line-height: 25px;
  font-size: 12px;
  font-family: Courier;
}
.app .field textarea {
  height: 30px;
}
.app .field button,
.app .field select,
.app .field input {
  height: 35px;
}

.app .field input.short {
  width: 70px;
}
.app .field input.json,
.app .field input.fn,
.app .field input.long,
.app .field textarea.short{
  display: none;
}

/* no steps */
.no-steps {
  font-style: italic;
  font-size: 0.75em;
  padding: 20px;
}

/* code container */
.code {
  padding: 0px 50px;
}
/* bottom control buttons*/

.controls {
  text-align: center;
}

.controls button {
  margin: 5px
}

/* config ctrl */
div[ng-controller=ConfigController] {
  padding-top: 20px;
}

.importer {
  opacity: 0.9;
  background: whiteSmoke;
  text-align: center;
  position: absolute;
  margin: 20px;
  top: 0;
  right: 0;
  width: 500px;
  height: 300px;
}
.importer textarea {
  width: 400px;
  height: 200px;
  font-family: Courier;
}
.importer button {
  margin: 10px;
}

/* purecss customisations */

.pure-button-success,
.pure-button-error,
.pure-button-warning,
.pure-button-secondary {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.pure-button-success {
  background: rgb(76, 201, 71); /* this is a green */
}


/* CodeMirror customisations */
.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}