/**
	By Palmer
	CSS to go along with the progress bar widgets in /assets/js/rogb.js.
*/

/*********************************************************/
/* ROGB Progress bar */
/*********************************************************/

/* Colors */

.aops-rogb-inactive {
	background-color: #7c7b71;
}
.aops-rogb-red {
	background-color: #e2002b;
}
.aops-rogb-orange {
	/*background-color: #ff8800;*/
	background-color: #ef7f00;
}
.aops-rogb-green {
	/*background-color: #188800;*/
	background-color: #3da000;
}
.aops-rogb-blue {
	/*background-color: #00b5f4;*/
	background-color: #1496d8;
}

.aops-rogb-light {
	opacity: 0.4;
}

.aops-rogb-inactive.aops-rogb-dark {
	background-color: #4c4b41;
}
.aops-rogb-red.aops-rogb-dark {
	background-color: #a2000b;
}
.aops-rogb-orange.aops-rogb-dark {
	/*background-color: #e95f0b;*/
	background-color: #ef5700;
}
.aops-rogb-green.aops-rogb-dark {
	/*background-color: #105a00;*/
	background-color: #2a6d00;
}
.aops-rogb-blue.aops-rogb-dark {
	/*background-color: #4979d2;*/
	background-color: #1076a9;
}

/* Bar / Bar container */

.aops-rogb-container {
	position: relative;
	/* Default; you probably want to override these */
	height: 24px;
	line-height: 24px;
}
.aops-rogb-container.aops-rogb-inset {
	background-color: #eee;
}

.aops-rogb-bar {
	position: absolute;
	white-space: nowrap;
	overflow-x: visible;
	z-index: 2;
	height: 100%;
	/* Width set in JS, obviously */
}

.aops-rogb-container .aops-bar-caption {
	position: absolute;
	left: 6px;
	font-size: 8pt;
	z-index: 3;
}

.aops-rogb-container .aops-bar-int-caption {
	position: absolute;
	top: 0;
	/* left/right set in JS */

	color: #fff;
	/* Default; you probably want to override these */
	line-height: 24px;
	font-size: 12pt;
	font-weight: bold;
	z-index: 4;
}
.aops-rogb-container .aops-bar-int-caption.aops--outside {
	color: #9f9f9f;
}

/* Topic container */

.aops-rogb-topic-container {
	position: relative;
}

.aops-rogb-topic-container .aops-set-focus-button {
	z-index: 3;
}

.aops-rogb-topic-container .aops-topic-name {
	font-size: 10pt;
	padding: 0;
}
.aops-rogb-topic-container .btn.aops-topic-name {
	padding: 0;
}

/* Marks */

.aops-rogb-mark {
	position: absolute;
	/* Left set in JS */
	top: 0px;
	width: 1px;
	height: 100%;
	z-index: 1;
}
.aops-rogb-container.aops-rogb-inset .aops-rogb-mark {
	z-index: 3;
}

/*********************************************************/
/* Array of small progress bars */
/*********************************************************/

.aops-rogb-bar-array {
	position: relative;
}
.aops-rogb-bar-array.aops--vert {
	vertical-align: bottom;
}
.aops-rogb-bar-array.aops--horiz {
	vertical-align: middle;
}

.aops-rogb-bar-array .aops--bar {
	float: left;
}
.aops-rogb-bar-array.aops--horiz .aops--bar {
	height: 2px;
	width: 100%;
}
.aops-rogb-bar-array.aops--vert .aops--bar {
	width: 2px;
	height: 100%;
}

.aops-rogb-bar-array .aops--bar div {
	background-color: white;
	float: right;
}
.aops-rogb-bar-array.aops--vert .aops--bar div {
	width: 100%;
}
.aops-rogb-bar-array.aops--horiz .aops--bar div {
	height: 100%;
}