* {
	margin: 0;
	padding: 0;
	font-family: 'Gudea', Univers;
	color:#4C5768;
}

html {
	background:url('../images/back.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-width:600px;
	font-family: 'Gudea', Univers;
	font-size: 20px;
	color:#4C5768;
	width:100%;
	height:100%;
	min-height: 600px;
	min-width: 600px;
}

#body-back {
	background:#E0E0E0;
	width:100%;
	height:100%;
	position:fixed;
	z-index:-100;
	-moz-opacity: 0.70; 
	-khtml-opacity: 0.70; 
	opacity: 0.70;
	background-color:rgba(255,255,255,0.7);
	overflow: hidden;
}

#control {
	z-index:10000;
	opacity:0.5;
	-moz-opacity: 0.50;
	-khtml-opacity: 0.50;

	position:absolute;
	background:white;
	width:46px;
	height:100%;
	background: linear-gradient(white, rgba(0,0,0,0.2));
	z-index: 100;
}

#control .button {
	font: normal normal normal 14px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 30px;
	text-align: center;

	margin:10px auto;
	width:30px;
	height:30px;
	color:#0c4474;

	-webkit-transition: color 500ms ease, text-shadow 500ms ease, background 500ms ease;
	transition: color 500ms ease, text-shadow 500ms ease, background 500ms ease;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

#control .button.plot-btn.fa-line-chart {
	font-size: 27px !important;
}

#control .button.image-btn.fa-image {
	font-size: 27px !important;
}

#control .button:hover {
	color:#0c2454;
	cursor:pointer;
	text-shadow: 0px 1px 4px rgba(0,0,0,0.5);
}

#control .button.info {
	margin:0;
	padding:0;
	padding-top:13px;
	font-size:24px;
	width:46px;
	height:36px;
	background: rgba(200,200,10, 0.6);
	color:white;
	text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
}
#control .button.info:hover {
	background: rgba(200,200,10, 0.9);
}

/*** Window ***/
.window {
	position:absolute;
	background-color: rgba(255,255,255,0.3);
	left:47px;
	top:80px;
	z-index: 1;
}
.window:focus {
	outline: 0;
}

/*** Info ***/
#info {
	display:none;
	font-size:70%;
	padding:10px;
	left:48px;
	top:0px;
}

#tips .header {
	padding:0;
	height:30px;
	background:rgba(245,245,245,0.5);
	cursor: move;
}
#tips .header .close-button, .image .header .change-image-button {
	display:block;
	float:right;
	padding-right: 1%;
}
#tips .header .name {
	display:block;
	float:left;
	padding-left: 1%;
}
#tips .body {
	width: 800px;
	height: 600px;
	overflow-y: scroll;
	background: white;
	opacity: 0.9;
}

/**** Commit Table ****/
.commit-table {
	font-size:70%;
	line-height:150%;
}
.commit-table .window {
	width:100%;
}
.commit-table .header {
	font-size:140%;
	max-width:100%;
	position:relative;
}
.commit-table .header span {
	cursor: move;
	position:absolute;
	bottom:0;
}
.commit-table .header input {
	position:absolute;
	float:right;
	bottom:0;
	width:0;
	border:none;
	font-size: 70%;
	background:rgba(255,255,255,0.95);
	padding:0 3px;
}
.commit-table .body {
	height:200px;
	margin: 0;
	padding: 0;
	overflow-y:scroll;
	overflow-x:hidden;
}
.commit-table .footer, .commit-table .footer th {
	font-weight:lighter;
	color: #3C4758;
}
.commit-table .fa-line-chart{
	color:#8C97A8;
}

.commit-table .fa-image{
	color:#8C97A8;
}

/**** Plot ****/
.plot {
	position:absolute;
	left: 650px;
}
.plot .header {
	padding:0;
	height:30px;
	background:rgba(245,245,245,0.5);
	cursor: move;
}
.plot .header .close-button, .plot .header .change-plot-button {
	display:block;
	float:right;
	padding-right: 1%;
}
.plot .header .name {
	display:block;
	float:left;
	padding-left: 1%;
}
.plot .canvas {
	margin:0px;
	width:525px;
	height:500px;
}

/**** Image ****/
.image {
	position:absolute;
	left: 650px;
	width:525px;
	height:500px;
}
.image .header {
	padding:0;
	height:30px;
	background:rgba(245,245,245,0.5);
	cursor: move;
}
.image .header .close-button, .image .header .change-image-button {
	display:block;
	float:right;
	padding-right: 1%;
}
.image .header .name {
	display:block;
	float:left;
	padding-left: 1%;
}
.image .canvas {
	margin:0px;
	width:100%;
	height:100%;
}

.image .canvas img {
	max-width: 99%;
	width: 99%;
	margin-left: 0.5%;
}


/**** Branches ****/
.branches {
	position:absolute;
	left: 50px;
	top: 1px;
	width: 200px;
	background:rgba(245,245,245,0.8);
}
.branches .body {
	padding:10px;
}

.branches .header {
	padding:0;
	height:30px;
	background:rgba(245,245,245,0.5);
	cursor: move;
}
.branches .header .close-button {
	display:block;
	float:right;
	padding-right: 1%;
}
.branches .header .name {
	display:block;
	float:left;
	padding-left: 1%;
}
.branches .item {
	cursor:pointer;
}
.branches .item:hover {
	color: #0c2454;
	text-decoration: underline;
}

.inline-block {
	display: inline-block;
}

.title{
	width:1%;
	margin: 0 auto;
	font-size:150%;
	padding:1% 0;
}

h1 {
	padding:0;
	margin:1% 0;
	font-size:130%;
}

a { text-decoration:none; color: #384870; cursor:pointer; }
a:hover { color: #2b3d66; text-decoration:underline; }
a:visited {  }

table {
	text-align: center;
}
table td {
	padding:0px 8px;
	vertical-align: middle;
}
table th {
	cursor: pointer;
}
table tr:hover {
	background-color:rgba(230,230,230,0.95) !important;
}
table tr.selected {
	background-color:rgba(245,245,225,1.0) !important;
}
table tr {
	background-color:rgba(255,255,255,0.7);
}
table tr:nth-child(even)  {
	background-color:rgba(250,250,250,0.7);
}
table thead {
	padding:0;
	margin: 0;
}