* {
	font-family: "proxima-nova","Lucida Grande", sans-serif;
}

h1, h2, h3 {
	font-family: "proxima-nova","Lucida Grande", sans-serif;
	font-weight: bold;
}

h2 {
	font-size: 18px;
}

h3 {
	font-family: "proxima-nova","Lucida Grande", sans-serif;
	font-weight: bold;
}

h2 span {
	font-weight: normal;
}

/* the color used for lines in d3 charts */
svg .line {
  fill: none;
  stroke: #A8A5A2;
  stroke-width: 2.5px;
}

.container {
  margin-top: 20px;
  display:table;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin:0;
}

.main_container {
	border-top: 7px solid #00A3CC;
}

/** bootstrap overrides for 100% height columns **/

.row
{
	height: 100%;
  display: table-row;
}

.col-md-8, .col-md-4, .col-md-6
{
	display: table-cell;
	float: none;
	vertical-align: top;
}

/** general layout **/

.container .row > .col-md-8 {
	border-bottom: 1px solid #E1E1E1;
}

/** top area - contains the header + overview **/

/* time + pause/play */
#toggle {
	border: 1px solid #E1E1E1;
	border-radius: 20px;
	background: #fff;
	float: right;
	padding: 5px 14px;
	font-size: 12px;
	color: #000;
	font-weight: bold;
  cursor:pointer;
}


#toggle img {
	vertical-align: middle;
}

#toggle span {
	padding-top: 6px;
}

#toggle *:nth-child(2){
	margin-left: 10px;
	margin-right: 5px;
}

#toggle .disabled {
	opacity: 0.3;
}


#top .row.header_row .col-md-6{
	padding-top: 10px;
	padding-bottom: 15px;
}

#top .row{
	background: #FCF8F6;
}

.container .row:first-child {
	background: #FCF8F6;
	border-bottom: 1px solid #E1E1E1;
}

/* the larger left column */
#top .col-md-8 {
	margin:0;
}

#top .chart_container{
	margin-bottom: 20px;
}

/* top sidebar */

#sidebar_top {
	background: #282524;
	font-size: 14px;
	color: #7B7B7B;
	line-height: 130%;
	padding: 0;
	border-bottom: 1px solid #444140;
}

#hostname {
	margin-bottom:15px;
	color: #fff;
}

#sidebar_top div span {
	color: #fff;
}

#sidebar_top div.info {
	margin: 15px 0;
	border-bottom: 1px solid #343434;
	font-weight: bold;
	padding: 0 15px 15px 15px;
}

#sidebar_top div.info:last-child {
	border-bottom-width:0;
	padding-bottom: 0;
}

#sidebar_top div.info .value {
	font-size: 18px;
}

#sidebar_bottom {
	background: #35312F;
  color: #fff;
}

/** overview charts **/
.chart {
  height:55px;
  width:100%;
  cursor:crosshair;
}

.chart_container h3 {
	color: #A3A3A3;
	font-size: 16px;
	margin-top: 0;
	float: left;
}

.chart_container .latest_value {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  float: right;
}

.chart_container .chart_info {
  font-size: 0.8em;
  height: 1em;
  color: #000;
  position: relative;
  top: -15px;
}

.chart_section {
  fill-opacity: 0;
}



/** processes table **/

#processes {
	width: 100%;
	margin-top: 10px;
}

#processes thead th {
	font-size: 12px;
	color: #9DB1BC;
	padding: 10px 20px;
	border-bottom: 1px solid #eaeaea;
	background: #fff;
}

#processes td:not(:first-child) {
		width: 26.6666%; /* 3 cols of data. 1st col in table is 20% */
}

#processes td:first-child{
	font-size: 14px;
	font-weight: bold;
	width: 20%;
	vertical-align: bottom;
}

#processes tr:last-child td:first-child{
	border-bottom: 1px solid #eaeaea;
}

#processes td {
	color: #666;
	padding: 14px 20px;
	border-bottom: 1px solid #eaeaea;
	font-size: 13px;
	background: #fff;
}

#processes tr.compact td {
  padding-left: 16px;
  padding-right: 16px;
}

.process_chart,.disk_chart {
	display: inline-block;
}


/* process chart */

#processes .chart {
  height: 15px;
}

#processes .latest_value {
  float:right;
}