woodpecker/server/app/styles/drone.css

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
}
.hidden {
  display: none !important;
  visibility: hidden;
}
.invisible {
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.nowrap {
  white-space: nowrap;
}
.border_box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.fix3d {
  -webkit-transform: translate3D(0, 0, 0);
}
.border_box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.invert {
  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
  -ms-filter: invert(100%);
  -o-filter: invert(100%);
  filter: invert(100%);
}
html {
  height: 100%;
}
body {
  font-family: 'Open Sans';
  font-weight: normal;
  margin: 0px;
  color: #262626;
  background: #fff;
  font-size: 13px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  position: relative;
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 55px;
  position: relative;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
#header {
  background: #262626;
  position: fixed;
  height: 55px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  color: #fff;
  font-size: 15px;
  line-height: 55px;
  text-align: center;
}
#header .brand {
  display: inline-block;
  font-family: 'Orbitron';
  font-size: 26px;
  line-height: 55px;
  text-decoration: none;
  text-transform: uppercase;
  color: #CCC;
}
#header .burger {
  position: absolute;
  top: 0px;
  left: 31px;
  height: 55px;
  font-size: 22px;
  color: #CCC;
}
#header .burger i.fa {
  line-height: 55px;
}
#header .login,
#header .user {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  white-space: nowrap;
  margin-right: 20px;
  display: inline-block;
}
#header .login a,
#header .user a {
  color: #CCC;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 55px;
  font-size: 15px;
}
#header .login a img,
#header .user a img {
  border-radius: 50%;
  float: right;
  width: 32px;
  height: 32px;
  margin-top: 10px;
  margin-left: 20px;
}
#body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  min-width: 100%;
  flex-direction: row-reverse;
  justify-content: space-between;
}
#body article {
  width: 100%;
}
#drawer {
  visibility: hidden;
  position: fixed;
  z-index: 10;
  left: 0px;
  top: 55px;
  bottom: 0px;
  width: 255px;
  background: #363636;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
#drawer ul {
  margin-top: 20px;
}
#drawer ul a {
  color: #CCC;
  text-decoration: none;
  padding: 10px 0px 10px 30px;
  display: block;
  font-size: 14px;
}
#drawer ul a i {
  margin-right: 10px;
  font-size: 16px;
  opacity: 0.3;
  min-width: 16px;
  display: inline-block;
}
#drawer ul span.divider {
  display: block;
  height: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 15px;
  margin-bottom: 15px;
}
#drawer .signout {
  position: absolute;
  bottom: 20px;
  right: 30px;
  color: #CCC;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
}
#drawer .signout i {
  margin-left: 20px;
}
#drawer-checkbox {
  position: fixed;
  top: 7px;
  left: 10px;
  width: 45px;
  height: 40px;
  display: block;
  z-index: 9999;
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
}
#drawer-checkbox:checked ~ #drawer {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#drawer-checkbox:checked ~ #drawer {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#drawer-checkbox:checked ~ #header .fa-bars:before {
  content: "\f00d";
  color: #999;
}
nav {
  padding-left: 30px;
  background: #FFF;
  min-height: 77px;
  max-height: 77px;
  line-height: 77px;
  font-family: 'Open Sans';
  font-size: 22px;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid #EEE;
  position: relative;
  z-index: 2;
}
nav a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.7);
}
nav a:last-child {
  color: #000;
}
nav a span.fa {
  margin-right: 20px;
}
nav div.options {
  float: right;
  margin-right: 20px;
}
nav div.options .pure-button {
  color: #FFF;
  text-transform: lowercase;
  font-size: 14px;
  background: #f2f5f8;
  padding: 10px 30px;
  color: rgba(0, 0, 0, 0.5);
}
nav div.options .pure-button i {
  margin-right: 10px;
  margin-left: -10px;
}
@supports (position:sticky) {
  nav {
    position: sticky;
    top: 55px;
  }
}
@supports (position:-moz-sticky) {
  nav {
    position: -moz-sticky;
    top: 55px;
  }
}
@supports (position:-webkit-sticky) {
  nav {
    position: -webkit-sticky;
    top: 55px;
  }
}
.cards .card {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 20px;
  padding-bottom: 20px;
  text-decoration: none;
  position: relative;
  color: #262626;
  font-family: 'Open Sans';
}
.cards .card .l-box {
  background: #FFF;
  border: 1px solid #DDD;
  position: relative;
  padding: 30px 20px;
  height: 200px;
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.cards .card .l-box:hover {
  border: 1px solid #262626;
}
.cards .card .l-box em {
  position: absolute;
  bottom: 20px;
  right: 20px;
  left: 20px;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  text-align: right;
  padding-right: 45px;
  padding-top: 20px;
  font-size: 14px;
  color: #666;
}
.cards .card .l-box img {
  position: absolute;
  right: 20px;
  bottom: 20px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.cards .card .l-box .timeago {
  position: absolute;
  bottom: 85px;
  left: 25px;
  right: 25px;
  text-align: right;
  font-size: 14px;
  color: #849299;
  display: none;
}
.cards .card h2 {
  font-size: 18px;
  font-weight: normal;
  min-height: 52px;
  max-height: 52px;
  height: 52px;
  text-align: center;
  vertical-align: middle;
  line-height: 26px;
  color: #262626;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.cards .card h2 .separator {
  margin: 0px 0px;
}
.cards .card.card-inactive .l-box {
  position: relative;
  box-shadow: none;
  background: #4ab1ce;
  color: #FFF;
  height: 180px;
  border-color: #4ab1ce;
}
.cards .card.card-inactive .l-box:hover {
  background: #3197b4;
}
.cards .card.card-inactive .l-box:hover:before {
  background: #3197b4;
}
.cards .card.card-inactive h2 {
  padding-top: 10px;
  color: #FFF;
}
.cards .card.card-inactive em {
  position: absolute;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  bottom: 15px;
  font-size: 13px;
  left: 25px;
  right: 25px;
  line-height: 1.3;
  padding: 0px;
  padding-top: 20px;
  text-align: center;
  display: block;
  height: 30px;
  text-transform: uppercase;
  color: #FFF;
}
.cards .card.card-browse-inactive,
.cards .card.card-browse {
  text-align: center;
  color: #4ab1ce;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}
.cards .card.card-browse-inactive .l-box,
.cards .card.card-browse .l-box {
  padding-top: 75px;
  background: #FFF;
  height: 180px;
}
.cards .card.card-browse-inactive .l-box {
  box-shadow: none;
}
.cards .progressContainer {
  height: 5px;
  background-color: #e97041;
  position: absolute;
  bottom: 65px;
  left: 20px;
  right: 20px;
}
.cards .progressContainer .activeProgress,
.cards .progressContainer .secondaryProgress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.cards .progressContainer .activeProgress {
  background-color: #68c598;
}
.cards .progressContainer .secondaryProgress {
  background-color: #68c598;
}
#commitpage {
  max-width: 1180px;
  margin: 0px auto;
  margin-bottom: 50px;
  margin-top: 70px;
}
#commitpage section {
  margin-top: 30px;
}
#commitpage section .commits {
  border: 1px solid #DDD;
  border-bottom: 0px solid #DDD;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#commitpage section .commits a {
  padding: 20px 45px;
  display: block;
  border-bottom: 1px solid #dadcdd;
  color: #262626;
  text-decoration: none;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#commitpage section .commits a h2 {
  font-family: 'Open Sans';
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}
#commitpage section .commits a img {
  border-radius: 50%;
  margin-right: 10px;
  float: left;
  display: none;
}
#commitpage section .commits a p {
  color: #363636;
  line-height: 22px;
  vertical-align: middle;
}
#commitpage section .commits a[data-status]:before {
  background: transparent;
  width: 7px;
  min-width: 7px;
  max-width: 7px;
  position: absolute;
  left: -1px;
  top: 0px;
  bottom: 0px;
  text-align: left;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  font-family: 'Open Sans';
  padding-left: 2px;
  overflow: hidden;
  content: " ";
}
#commitpage section .commits a[data-result="Killed"],
#commitpage section .commits a[data-status="Error"],
#commitpage section .commits a[data-status="Failure"] {
  background: #fff9f5;
}
#commitpage section .commits a[data-result="Killed"]:before,
#commitpage section .commits a[data-status="Error"]:before,
#commitpage section .commits a[data-status="Failure"]:before {
  background: #e97041;
  content: "!";
}
#commitpage section .commits a[data-status="Success"]:before {
  background: #68c598;
}
#commitpage .date span {
  display: inline-block;
  text-align: right;
  font-size: 14px;
  width: 100%;
  padding-right: 30px;
  margin-top: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#loginpage .pure-g {
  padding: 30px;
  border: 1px solid #DDD;
  max-width: 400px;
  margin: 0px auto;
  margin-top: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#loginpage .pure-g a {
  display: block;
  background: #45494b;
  color: #fff;
  padding: 14px 20px;
  font-size: 15px;
  border-radius: 5px;
  text-decoration: none;
}
#loginpage .pure-g a:hover {
  background: #262626;
}
#loginpage .pure-g [class*="fa-"] {
  float: left;
  font-size: 20px;
  position: relative;
  top: -3px;
  left: -3px;
  padding-right: 10px;
  min-width: 27px;
  min-height: 20px;
}
#loginpage .pure-g .pure-u-1 a {
  margin-bottom: 10px;
}
#loginpage .pure-g .pure-u-1:last-child a {
  margin-bottom: 0px;
}
#homepage {
  width: 100%;
  background: #f2f5f8;
}
#homepage section {
  padding: 40px 0px 20px 0px;
  border-bottom: 1px solid #EEE;
}
#homepage section div {
  max-width: 1180px;
  margin: 0px auto;
}
#homepage section:nth-child(2) {
  background: #FFF;
  padding: 40px 0px 20px 0px;
}
#homepage section:nth-child(3) {
  border-bottom: 0px solid #EEE;
}
#repospage {
  width: 100%;
}
#repospage section {
  border-bottom: 1px solid #eee;
  max-width: 768px;
  margin: 0px auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
#repospage section .search {
  margin-bottom: 25px;
}
#repospage section .search input[type="text"],
#repospage section .search input[type="search"] {
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
  border: 1px solid #ccc;
  border-radius: 0px;
  box-shadow: none;
  padding: 12px;
}
#repospage section .search input[type="text"]:focus,
#repospage section .search input[type="search"]:focus {
  border-color: #129FEA;
}
#repospage section .repo {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}
#repospage section .repo:last-child > div {
  border-bottom: 1px solid #fff;
}
#repospage section .repo > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-bottom: 1px solid #fff;
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
}
#repospage section .repo > div > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 25px;
}
#repospage section .repo > div > div:last-child div {
  text-align: right;
}
#repospage section .repo > div:hover {
  border: 1px solid #262626;
}
#repospage section .repo h4 {
  font-size: 20px;
  margin-bottom: 2px;
  color: #262626;
}
#repospage section .repo span {
  color: #666;
  font-size: 14px;
}
#repospage section .repo i {
  color: #DDD;
  font-size: 22px;
  margin-left: 20px;
  margin-top: 15px;
}
#repospage section .repo i.fa-check-circle-o {
  color: #68c598;
}
#userspage {
  width: 100%;
}
#userspage section {
  border-bottom: 1px solid #eee;
  max-width: 768px;
  margin: 0px auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
#userspage section .search {
  margin-bottom: 25px;
}
#userspage section .search input[type="text"],
#userspage section .search input[type="search"] {
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
  border: 1px solid #ccc;
  border-radius: 0px;
  box-shadow: none;
  padding: 12px;
}
#userspage section .search input[type="text"]:focus,
#userspage section .search input[type="search"]:focus {
  border-color: #129FEA;
}
#userspage section .user {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}
#userspage section .user:last-child > div {
  border-bottom: 1px solid #fff;
}
#userspage section .user > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-bottom: 1px solid #fff;
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
}
#userspage section .user > div > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 25px;
  padding-right: 0px;
}
#userspage section .user > div:hover {
  border: 1px solid #262626;
}
#userspage section .user img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
#userspage section .user h4 {
  font-size: 20px;
  margin-bottom: 2px;
  color: #262626;
}
#userspage section .user h4 small {
  font-size: 16px;
  color: #666;
  margin-left: 5px;
}
#userspage section .user span {
  color: #666;
  font-size: 14px;
}
#accountpage {
  width: 100%;
}
#accountpage section {
  position: relative;
  max-width: 768px;
  margin: 0px auto;
  margin-top: 30px;
  border: 1px solid #eee;
}
#accountpage section.profile > div:first-child {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
}
#accountpage section.profile > div:last-child {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
}
#accountpage section.profile .fullname {
  font-size: 14px;
  margin-bottom: 2px;
  color: #666;
  display: block;
}
#accountpage section.profile .email {
  font-size: 14px;
  color: #666;
  display: block;
}
#accountpage section.token > div:first-child div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 16px;
  line-height: 22px;
}
#accountpage section.token > div:first-child i {
  margin-right: 7px;
}
#accountpage section.token > div:last-child {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  color: #666;
  line-height: 22px;
  font-size: 14px;
}
#accountpage section h4 {
  margin: 10px 0px;
  font-size: 22px;
}
#accountpage section img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
#accountpage section .notifications {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 20px;
}
#repopage {
  width: 100%;
  background: #f2f5f8;
}
#repopage section {
  padding: 40px 0px 20px 0px;
  border-bottom: 1px solid #EEE;
}
#repopage section > div {
  max-width: 1180px;
  margin: 0px auto;
}
#repopage section:nth-child(even) {
  background: #FFF;
}
#repopage section:first-child {
  background: #FFF;
}
#repopage section .card[data-status="Success"]:nth-child(2) .l-box {
  border-color: #68c598;
}
#repopage section .card[data-status="Success"] em {
  border-top: 5px solid #68c598;
}
#repopage section .card[data-status="Killed"]:nth-child(2) .l-box,
#repopage section .card[data-status="Failure"]:nth-child(2) .l-box,
#repopage section .card[data-status="Error"]:nth-child(2) .l-box {
  border-color: #e97041;
}
#repopage section .card[data-status="Killed"] em,
#repopage section .card[data-status="Failure"] em,
#repopage section .card[data-status="Error"] em {
  border-top: 5px solid #e97041;
}
#repopage section .card[data-status="Started"] em:before,
#repopage section .card[data-status="Pending"] em:before {
  -webkit-animation: progress 1s linear infinite;
  -moz-animation: progress 1s linear infinite;
  animation: progress 1s linear infinite;
  position: absolute;
  content: ' ';
  height: 5px;
  top: -5px;
  left: 0px;
  right: 0px;
  margin: 0px;
  background: #fee172;
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
  background-repeat: repeat-x;
  background-size: 30px 30px;
}
#repopage section .l-box:after {
  font-family: 'FontAwesome';
  content: "\f104";
  content: "\f0d9";
  position: absolute;
  right: -20px;
  width: 20px;
  text-align: center;
  color: rgba(0, 0, 0, 0.1);
  font-size: 22px;
}
#repopage section .card:last-child .l-box:after {
  content: '';
}
@-webkit-keyframes progress {
  to {
    background-position: 30px 0;
  }
}
@-moz-keyframes progress {
  to {
    background-position: 30px 0;
  }
}
@keyframes progress {
  to {
    background-position: 30px 0;
  }
}
#sidebar {
  width: 240px;
  min-width: 240px;
  position: relative;
  display: block;
  z-index: 5;
  padding: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#sidebar h1 {
  font-size: 28px;
  font-weight: 300;
}
#sidebar h2 {
  font-size: 22px;
  font-weight: 300;
  margin-bottom: 20px;
}
#sidebar dl {
  padding-top: 23px;
  border-top: 1px solid #ddd;
  margin-top: 5px;
}
#sidebar dl:first-child {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}
#sidebar dl dt {
  font-size: 12px;
  color: #849299;
  text-transform: uppercase;
  padding: 3px 0;
}
#sidebar dl dd {
  font-size: 14px;
  padding: 3px 0 20px;
}
#sidebar dl a {
  text-transform: none;
}
#sidebar dl small {
  font-size: 12px;
}
#sidebar dl .large {
  font-size: 18px;
  padding-bottom: 5px;
}
#sidebar dl .time {
  float: right;
  margin-left: 8px;
}
#sidebar dl .photo {
  margin-right: 4px;
}
#sidebar dl .negative {
  color: #e97041;
}
#sidebar dl .photoline {
  display: inline-block;
  position: relative;
  top: -10px;
  font-weight: bold;
}
#sidebar dl .small {
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
#sidebar .status {
  border: 1px solid transparent;
  display: block;
  text-align: center;
  padding: 5px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  margin: 0 -5px 10px;
  font-weight: bold;
}
#sidebar .status:before {
  float: left;
  margin-left: -5px;
}
#sidebar .status.status_ok {
  color: #68c598;
  border-color: #68c598;
}
#sidebar .status.status_ok:before {
  content: "\f00c";
  font-family: 'FontAwesome';
}
#sidebar .status.status_error {
  color: #e97041;
  border-color: #e97041;
}
#sidebar .status.status_error:before {
  content: "!";
}
#sidebar .result {
  background: #4ab1ce;
  background: #68c598;
  color: #fff;
  margin: -30px -30px -6px;
  padding: 30px;
  position: relative;
}
#sidebar .result .status {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
#sidebar .result .status:before {
  content: "\f00c";
  font-family: 'FontAwesome';
}
#sidebar .result dl dd {
  padding: 7px 0;
}
#sidebar .result dl dd strong {
  font-size: 16px;
}
#sidebar .result[data-result="Killed"],
#sidebar .result[data-result="Failure"],
#sidebar .result[data-result="Error"] {
  background: #e97041;
}
#sidebar .result[data-result="Killed"] .status:before,
#sidebar .result[data-result="Failure"] .status:before,
#sidebar .result[data-result="Error"] .status:before {
  content: "!";
}
#main {
  flex-grow: 2;
}
#main.output {
  background: #525252;
}
#main.output pre {
  margin: 0px auto;
  padding: 30px;
  color: #FFF;
  font-family: 'Droid Sans Mono';
  font-size: 13px;
  white-space: pre-wrap;
  overflow: hidden;
}