* { box-sizing: border-box; }

.dashboards {
  padding: 0.5em;
}
.dashboards > a {
  padding: 0.5em;
  background: #eee;
  color: blue;
}

body {
  margin: 0;
  font-family: sans-serif;
  padding: 0; margin: 0;
  color: #222;
}
 
.container {
  max-width: 900px;
  margin: 0 auto;
}
 
p, pre, ul, ol { margin: 20px; }
 
h1, h2, h3, h4 {
  margin: 20px 0;
  padding: 0;
  color: #375EAB;
  font-weight: bold;
}
 
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
 
h2 { background: #E0EBF5; padding: 2px 5px; }
h3, h4 { margin: 20px 5px; }
 
dl, dd { font-size: 14px; }
dl { margin: 20px; }
dd { margin: 2px 20px; }
 
.clear {
  clear: both;
}
 
.button {
  padding: 10px;
  
  color: #222;
  border: 1px solid #375EAB;
  background: #E0EBF5;
  
  border-radius: 5px;
  
  cursor: pointer;
  
  margin-left: 60px;
}
 
/* navigation bar */
 
#topbar {
  padding: 10px 10px;
  background: #E0EBF5;
}
 
#topbar a {
  color: #222;
}
#topbar h1 {
  float: left;
  margin: 0;
  padding-top: 5px;
}
 
#topbar nav { 
  float: left;
  margin-left: 20px;
}
#topbar nav a {
  display: inline-block;
  padding: 10px;
  
  margin: 0;
  margin-right: 5px;
 
  color: white;
  background: #375EAB;
    
  text-decoration: none;
  font-size: 16px;
    
  border: 1px solid #375EAB;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
 
.page {
  margin-top: 20px;
}
 
/* settings panels */
aside {
  margin-top: 5px;
}
 
.panel {
  border: 1px solid #aaa;
  border-radius: 5px;
  margin-bottom: 5px;
}
 
.panel h1 {
  font-size: 16px;
  margin: 0;
  padding: 2px 8px;
}
 
.panel select {
  padding: 5px;
  border: 0;
  width: 100%;
}
 
/* results table */
 
table {
  margin: 5px;
  border-collapse: collapse;
  font-size: 11px;
}
 
table td, table th, table td, table th {
  vertical-align: top;
  padding: 2px 6px;
}
 
table tr:nth-child(2n+1) {
  background: #F4F4F4;
}

table tr.commit:hover {
  background-color: #ffff99 !important;
}
 
table thead tr {
  background: #fff !important;
}
 
/* build results */
 
.build td, .build th, .packages td, .packages th {
  vertical-align: top;
  padding: 2px 4px;
  font-size: 10pt;
}
      
.build .hash {
  font-family: monospace;
  font-size: 9pt;
}
 
.build .result {
  text-align: center;
  width: 2em;
}
 
.build .col-desc, .build .col-result, .build .col-metric, .build .col-numresults {
  border-right: 1px solid #ccc;
}

.build .row-commit {
  border-top: 2px solid #ccc;
}

.build .arch {
  font-size: 83%;
  font-weight: normal;
}

.build .time {
  color: #666;
}

.build .ok {
  font-size: 83%;
}

.build .desc, .build .time, .build .user {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
 
.build .desc {
  max-width: 150px;
}

.build .user {
  max-width: 50px;
}
 
.good   { text-decoration: none; color: #000000; border: 2px solid #00E700}
.bad    { text-decoration: none; text-shadow: 1px 1px 0 #000000; color: #FFFFFF; background: #E70000;}
.noise  { text-decoration: none; color: #888; }
.fail   { color: #C00; }

/* pagination */
 
.paginate nav {
  padding: 0.5em;
  margin: 10px 0;
}
 
.paginate nav a {
  padding: 0.5em;
  background: #E0EBF5;
  color: blue;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
 
.paginate nav a.inactive {
  color: #888;
  cursor: default;
  text-decoration: none;
}

/* diffs */
 
.diff-meta {
  font-family: monospace;
  margin-bottom: 10px;
}
 
.diff-container {
  padding: 10px;
}
 
.diff table .metric {
  font-weight: bold;
}
 
.diff {
  border: 1px solid #aaa;
  border-radius: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  float: left;
}
 
.diff h1 {
  font-size: 16px;
  margin: 0;
  padding: 2px 8px;
}

.diff-benchmark {
  clear: both;
  padding-top: 5px;
}

/* positioning elements */
 
.page {
  position: relative;
  width: 100%;
}
 
aside {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
}
 
.main-content {
  position: absolute;
  top: 0;
  left: 210px;
  right: 5px;
  min-height: 200px;
  overflow: hidden;
}
 
@media only screen and (max-width: 900px) {
  aside {
    position: relative;
    display: block;
    width: auto;
  }
 
  .main-content {
    position: static;
    padding: 0;
  }
  
  aside .panel {
    float: left;
    width: auto;
    margin-right: 5px;
  }
  aside .button {
    float: left;
    margin: 0;
  }
}