/* app css stylesheet */

.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

/* Added from Gouch 7/14/2015 */

/* normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* Responsive | good defaults for responsive layouts */

img, video {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Grid | layout utilities */

.container, .container-fluid {
  position: relative;
  padding: 1.25rem;
}

.layout-clear:before,
.layout-clear:after {
  content: "";
  display: table;
}
  .layout-clear:after {
    clear: both;
  }

.layout-grid {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -10px;
}

/* Base | theme root elements to project aesthetic */

html {
  font: 16px/1.125 "Source Sans Pro", sans-serif;
}

body {
  color: #222;
  background-color: #e8e8e8;
}

section {
  padding-bottom: 2rem;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 1rem 0;
}

h1 {
  color: #1f1f1f;
  border: 1px solid rgba(0, 0, 0, .2);
  border-image: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 1;
  border-width: 0 0 1px 0;
  font-size: 40px;
  font-weight: 200;
  margin-bottom: 1.25rem;
}

a {
  color: #246492;
  text-decoration: none;
}
  a:hover {
    color: #79a3c9;
  }

/* Components | namespaced units of functionality */

.active-test {
  border-radius: 2px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
  .active-test .header {
    background-color: rgb(255, 255, 255);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    padding: 14px 20px;
  }
  .active-test .header > div {
  }
  .active-test .header .name {
    font-size: 24px;
    font-weight: 600;
  }
  .active-test .header .status {
    font-size: 14px;
    line-height: 1;
    margin: 10px 0;
  }
  .active-test .header .status .current-status {
    font-size: 16px;
    font-weight: 600;
  }
  .active-test .header .status .current-status.is-running {
    color: #48a354;
  }
  .active-test .header .status .action {
    margin: 6px 0;
  }
  .active-test .header .status .action .button {
    padding: 3px 12px;
  }
  .active-test .header .details {
    font-size: 14px;
    margin-top: 10px;
  }
  .active-test .header .details ul,
  .active-test .header .details-large ul {
    list-style: none;
    margin: 4px 0;
    padding-left: 0;
  }
  .active-test .header .details ul li,
  .active-test .header .details-large li {
    border-left: 1px solid #c6c6c6;
    float: left;
    list-style: none;
    padding: 0 6px;
  }
  .active-test .header .details li:first-child,
  .active-test .header .details-large li:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .active-test .main {
    background: #f9f9f9;
    padding: 20px;
  }

.button {
  color: #fff;
  background-color: rgb(67, 125, 173);
  border: 0;
  border-radius: 2px;
  font-weight: 600;
  line-height: 1.25;
  padding: 6px 10px;
  display: inline-block;
}
  .button:hover {
    color: #fff;
    background-color: #2b6998;
  }
  .button.var-green {
    background-color: #48a354;
  }
  .button.var-green:hover {
    background-color: #318d41;
  }
  .button.var-red {
    background-color: #bb5758;
  }
  .button.var-red:hover {
    background-color: #a34245;
  }

.card-component {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  margin: 10px;
  width: calc(33.33333% - 20px);
}
  .card-component .main {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
  }
  .card-component .name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
  }

.error-log {
  border: 1px solid #e8e8e8;
  line-height: 1.33333;
  overflow: scroll;
  height: 400px;
}
  .error-log > .entry {
    background: rgba(255, 255, 255, .8);
    border-bottom: 1px solid #e8e8e8;
    padding: .75em;
  }
  .error-log > .entry > span {
    display: block;
  }
  .error-log > .entry .index {
    float: left;
  }
  .error-log > .entry .summary {
    font-weight: 600;
  }
  .error-log > .entry .timestamp {
    color: #777;
    float: right;
  }
  .error-log > .entry .url {
    color: #777;
  }

.graph {
  border: 1px solid #e8e8e8;
    width: 100%;
    height: 100%;
 }
  .graph img {
    display: block;
  }
  .graph .ct-line {
    fill: none;
    stroke: #bb5758;
    stroke-width: 2px
  }
  .graph .ct-point {
    stroke: #bb5758;
    stroke-width: 7px;
  }
  .graph .ct-label {
    color: #777;
  }

.heading-with-button {
  position: relative;
  margin-bottom: 1.25rem;
}

.load-profile {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  overflow: hidden;
  margin: 10px;
  width: calc(50% - 20px);
}
  .load-profile .action {
    color: #fff;
    background: no-repeat center;
    display: block;
    width: 60px;
  }
  .load-profile .main {
    position: relative;
    padding: 16px 20px 20px;
    width: 100%;
  }
  .load-profile .details-large {
    margin: 4px 0 10px;
  }
  .load-profile .details {
    font-size: 14px;
  }
  .load-profile .name,
  .load-profile .name a {
    color: inherit;
    font-size: 24px;
    font-weight: 600;
  }
  .load-profile .settings {
    background: url(images/gear.svg) no-repeat;
    background-size: 16px;
    direction: ltr;
    text-indent: -9999px;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: .8;
    width: 16px;
    height: 16px;
  }
  .load-profile .settings:hover {
    opacity: 1;
  }

  /* States */
  .load-profile.is-warning .action {
    background-color: #bf8500;
    background-image: url(images/warning.svg);
    background-size: 8px;
  }
  .load-profile.is-warning .name {
    color: #a16b00;
  }
  .load-profile.is-ready .action {
    background-color: #48a354;
    background-image: url(images/play.svg);
    background-size: 20px;
  }
  .load-profile.is-ready .action:hover {
    background-color: #318d41;
  }
  .load-profile.is-ready .name {
    color: #2a883c;
  }

.panel {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
    resize: vertical;
  overflow: auto;
}
  .panel .panel-list {
    list-style: none;
    margin: 0 0 1em;
    padding-left: 0;
    width: 25%;
  }
  .panel .panel-list li {
    background: rgb(242,242,242);
    padding: 0;
  }
  .panel .panel-list li:nth-child(even) {
    background: rgb(222,222,222);
  }
  .panel .panel-list li a {
    color: inherit;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 7px 20px 7px 0;
    height: 100%;
  }
  .panel .panel-list li a:hover {
    color: #79a3c9;
  }
  .panel .panel-list li.active a {
    color: #fff;
    background: linear-gradient(to left, rgb(67, 125, 173), rgba(60, 112, 155,0.9));
  }
  .panel .panel-list li .label {
    color: #555;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
  }
  .panel .panel-list li .value {
    color: #777;
    text-overflow: ellipsis;
    float: right;
    margin-left: auto;
    overflow: hidden;
    white-space: nowrap;
  }
  .panel .panel-list li.active a .label,
  .panel .panel-list li a:hover .label,
  .panel .panel-list li.active a .value,
  .panel .panel-list li a:hover .value {
    color: inherit;
  }
  .panel .panel-view {
    width: 75%;
    height: calc(100% - 30px);
  }
  .panel .panel-view img {
    width: 100%;
    height: 100%;
  }
  .panel .panel-info {
    font-size: 12px;
    text-align: center;
    height: 20px;
    width: 100%;
  }
  .panel .panel-info ul {
    background: #e8e8e8;
    border-radius: 2px;
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 4px;
    padding-bottom: 5px;
  }
  .panel .panel-info li {
    display: inline-block;
    padding: 0 3px;
  }

.secondary-navigation {
  font-size: 14px;
  padding-left: 0;
  margin: 0;
  padding-bottom: 1rem;
}
  .secondary-navigation li {
    border-left: 1px solid #c6c6c6;
    float: left;
    list-style: none;
    padding: 0 6px;
  }
  .secondary-navigation li:first-child {
    border-left: 0;
  }
  .secondary-navigation li a {
    color: #777;
    display: block;
    padding-bottom: 1px;
  }
  .secondary-navigation li a:hover {
    color: #474747;
    background: linear-gradient(to bottom, #919191, #919191) repeat-x bottom;
    background-size: 1px 1px;
  }

.site-footer {
  color: #777;
  background: url(images/footer-logo.png) no-repeat top;
  background-size: 28px;
  padding: 0 0 2rem;
  opacity: .8;
  height: 28px;
}

.site-header {
  background: #fff;
}
  .site-header > .container {
    padding-bottom: 0;
  }
  .site-header .logo {
    max-width: 282px;
  }

.site-navigation {
  background: linear-gradient(to top, rgb(232,232,232), rgba(232,232,232,0)) no-repeat;
  background-size: 1px 100%;
  line-height: 1.5;
  padding-left: 0;
}
  .site-navigation > li {
    background: linear-gradient(to top, rgb(232,232,232), rgba(232,232,232,0)) no-repeat right;
    background-size: 1px 100%;
    list-style: none;
    float: left;
    position: relative;
  }
  .site-navigation a {
    color: rgb(119, 119, 119);
    display: block;
    padding: .375em 10px;
  }
  .site-navigation a:hover,
  .site-navigation li.is-current a {
    color: #79a3c9;
    background: linear-gradient(to top, rgb(248,248,248), rgba(248,248,248,0));
  }

  /* Variations */
  .site-navigation .var-admin {
    color: #d16a69;
  }

.site-navigation li.var-dropdown > a {
  background: url(images/dropdown-arr.svg) no-repeat right;
  background-position: right 11px top calc(1em + 1px);
  padding-right: 25px;
}
  .site-navigation li.var-dropdown > ul {
    background: linear-gradient(to top, rgb(232,232,232) 0%, rgb(255,255,255) 100%);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    font-size: 14px;
    line-height: 1.1;
    list-style: none;
    display: none;
    padding-bottom: .5em;
    padding-left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
  }
  .site-navigation li.var-dropdown:hover > ul {
    display: block;
  }
  .site-navigation li.var-dropdown > ul li {
  }
  .site-navigation li.var-dropdown > ul a {
    box-sizing: border-box;
    padding: .5em 15px;
    width: 100%;
  }
  .site-navigation li.var-dropdown > ul a:hover {
    background: #fff;
  }

.test-result {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  margin: 10px;
  width: calc(33.33333% - 20px);
}
  .test-result .main {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
  }
  .test-result .name {
    font-weight: 600;
    margin: 13px 0 3px;
  }
  .test-result .details {
    font-size: 14px;
  }
  .test-result .details > div {
    margin: 4px 0;
  }
  .test-result .actions {
    text-align: center;
  }
  .test-result .actions a {
    color: #246492;
    background: url(images/new-window.svg) no-repeat left;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    margin: 0 .5em;
    padding: 11px 0 11px 20px;
  }
  .test-result .actions a:hover {
    opacity: .8;
  }
  .test-result .actions a.var-engineer {
    color: #2a883c;
    background-image: url(images/new-window-green.svg);
  }

.text-caps {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.text-mute {
  color: #555;
}

/* Layout: Desktop */

@media (min-width: 700px) {
  .active-test .header .status {
    text-align: right;
    position: absolute;
    top: 10px;
    right: 20px;
  }

  .heading-with-button .button {
    top: 6px;
    right: 0;
    position: absolute;
  }

  .secondary-navigation {
    position: absolute;
    top: 2.66666rem;
    right: 1.25rem;
  }
}

/* Layout: Mobile */

@media (max-width: 699px) {
  .card-component {
    width: 100%;
  }

  .load-profile {
    width: 100%;
  }

  .panel .panel-list,
  .panel .panel-view {
    width: 100%;
  }

  .site-navigation {
    border: 1px solid rgb(232,232,232);
    border-radius: 2px;
  }
    .site-navigation > li {
      width: 50%;
    }

  .test-result {
    width: 100%;
  }
}

