gtav-src/tools_ng/web/dev/stats/css/single-chart.css

/* left aligned chart (or timeline) */
#chart {
	width: 65%;
	/*height: 96%;*/
	height: 70em;
	position: relative;
 	float: left;
 	/*text-align: center;*/
}

#chart svg text {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
}

/* not used */
#arcs path {
	stroke: #aaa;
	stroke-width: 1;
}

#linegraph path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
 
#linegraph line {
    stroke: black;
}

#linegraph circle {
    stroke: steelblue;
    stroke-width: 2;
    fill: #fff;
}

/* right aligned chart options */

#chart-options {
	width: 30%;
	position: relative;
	float: right;
}

/* profile stats definitions specific */

#stat-list {
	width: 100%;
	position: relative;
	float: right;
}

#stat-list input {
	position: relative;
	float: right;
}

#stat-list select {
	margin-top: 0.5em;
	position: relative;	
	width: 100%;
	height: 40em;
}

#graph-type {
	width: 100%;
	position: relative;
	float: right;
}

#bucket-options {
	width: 100%;
	position: relative;
	float: right;
}

#bucket-options-left {
	width: 50%;
	float: left;
}

#bucket-options-right {
	width: 50%;
	float: right;
}

#bucket-options-input {
	vertical-align: middle;
}

/* session timeline specific */

#session-game-type select {
	width: 65%;
	position: relative;
	float: right;
}

#session-list select{
	margin-top: 0.5em;
	position: relative;	
	width: 100%;
	height: 40em;
}

#timeline {
	margin: 0;
	padding: 0;
	height: auto;
	width: 800px;
}

.item {
	width: 300px;
	margin-top: 1.5em;
	margin-bottom: 1em;
	margin-left: 10px;
	margin-right: 10px;
	min-height: 3em;
	float: left;
	background-color: #ffffff;
	color: #558621;
	border: #ccc 0.1em solid;
	box-shadow: 0.1em 0.1em #ccc;
	border-radius: 0.8em;
	text-align: justify;
	text-transform: capitalize;
	word-wrap: break-word;
	padding: 0.5em 10px;
}

.item:hover {
	border: #fcb131 0.1em solid;
	box-shadow: 0.1em 0.1em #fcb131;
}

.item .item-header {
	background-color: #ffffff;
    color: #558621;
    border: #fcb131 0.1em solid;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0.2em;
}

.item .bg-left {
	background-repeat: no-repeat;
	background-position: left center; 
}

.item .bg-right {
	background-repeat: no-repeat;
	background-position: right center; 
}

.item .item-label {
	font-style: italic;
}

#timeline-start {
	
}

#timeline-stop {
	margin-bottom: 2em;
}

.timeline-start-stop {
	width: 300px;
	left: 178px; /* (10 + 10 + 300 +10 + 10 - 2) - (10 + 300 + 10)/2 [(m+p+w+p+m -bar/2) - (p+w+p)/2] */
	background-color: #558621;
    color: #ffffff;
    padding: 0.5em 10px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	border-radius: 0.8em;
	position: relative;
	box-shadow: 0.1em 0.1em #ccc;
}

#timeline-bar-container {
	width: 16px;
	min-height: 5em;
	height: auto;
	text-align: center;
	display: block;
	margin: 0;
}
#timeline-bar {
	margin: 0;
	background-color: #558621;
	display: block;
	height: 100%;
	left: 340px;
	position: absolute;
	width: 4px;
}

#timeline-bar:hover {
	margin: 0;
	background-color: #fcb131;
}

.right-arrow {
	background-image: url(../../images/right-arrow-hover.png);
	display: block;
	width: 13px;
	height: 15px; /* Pixels to match the image height */
	margin-left: 310px;
	margin-top: 0.5em;
	padding: 0;
	vertical-align: top;
	position: absolute;
	z-index: 2;
}

.left-arrow{
	background-image: url(../../images/left-arrow-hover.png);
	display: block;
	height: 15px; /* Pixels to match the image height */
	width: 13px;
	margin-left: -23px; 
	margin-top: 0.5em;
	position: absolute;
	z-index: 2;
}

.telemetry-event{
	background-image: url(../../images/telemetry.png);
}
.positional-event{
	background-image: url(../../images/positional.png);
}
.weapon-event{
	background-image: url(../../images/weapon.png);
}
.death-event{
	background-image: url(../../images/death.png);
}
.vehicle-event{
	background-image: url(../../images/vehicle.png);
}
.wanted-level-event{
	background-image: url(../../images/wanted-level.png);
}
.emergency-services-event{
	background-image: url(../../images/emergency-services.png);
}
.cutscene-event{
	background-image: url(../../images/cutscene.png);
}
.mission-event{
	background-image: url(../../images/mission.png);
}
.radio-station-event{
	background-image: url(../../images/radio-station.png);
}