/*
 * kart.css: CSS styles
 */

/*
 * General rules.
 */

html, body {
	font-family: sans-serif;
	font-size: small;
	color: #303285;
	margin: 0;
	padding: 0;
	background-image: url('../img/StartScreen-light.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

tr {
	vertical-align: top;
}

div.kBody {
	position: absolute;
	width: 100%;
	min-height: 95%;
}

h1,h2,h3 {
	color: #A68300;
}

a {
	color: #4045c8;
	font-weight: bold;
	text-decoration: none;
}


/*
 * Reusable page blocks.
 */

.kDlgUnclosable .ui-dialog-titlebar-close {
	display: none;
}

.kWarning {
	color: #cc0000;
}

.kHeader {
	color: #000044;
	font-size: xx-large;
	font-weight: bold;
	margin-right: 30px;
	text-shadow: 1px 1px 1px #cccccc;
}

.kBodyText {
	font-size: large;
	margin-left: auto;
	margin-right: auto;
}

.kKartlyticsTitle {
	color: #000044;
	font-size: large;
	font-weight: bold;
	margin-right: 30px;
	text-shadow: 1px 1px 1px #cccccc;
}

.kKartlyticsTitle a {
	color: #000044;
	text-decoration: none;
}

.kSubHeader {
	color: #000044;
	font-size: large;
	font-weight: bold;
	margin-right: 30px;
}

.kSubHeaderLabel {
	margin-top: -8px;
}

table .kSubHeaderLabel {
	margin-top: 0px;
}

th {
	color: #000044;
}

.kHorizontalSeparator {
	border-bottom: 1px #000044 dashed;
}

div.kProgressBar {
	height: 10px;
}

/*
 * The "Console" is the actual body of the page where the real content lives.
 */
.kConsole {
	background-color: rgba(235, 235, 238, 0.9);
	border: 2px #9999aa solid;
	border-radius: 10px;

	position: absolute;
	margin-left: 5%;
	margin-right: 5%;
	min-width: 85%;

	margin-top: 2%;
	margin-bottom: 5%;
	min-height: 85%;

	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;

	box-shadow: 3px 3px 4px #777;
}

	.kConsoleHeader {
		height: 40px;
		white-space: nowrap;
	}

	.kConsoleHeaderBox {
		text-align: left;
		line-height: 1.6em;
		width: 450px;
		position: absolute;
		right: 15px;
		top: 20px;
	}

	.kConsoleHeaderBox > * {
		margin-right: 10px;
	}

	.kConsole > div {
		margin-bottom: 10px;
	}

table.kColumns table.kDataTable {
	margin-left: 0px;
}

.kDataTable {
	margin-left: 30px;
	margin-right: 30px;
}

	.kDataTable th {
		text-align: left;
		padding-left: 10px;
		padding-right: 10px;
	}

	.kDataTable td {
		text-align: left;
		padding-left: 10px;
		padding-right: 10px;
	}

	.kDataTable .kDataColumnUploaded {
		white-space: nowrap;
	}

	.kDataTable .kDataColumnState {
		white-space: nowrap;
	}

	.kDataTable .kDataColumnVideoName {
		white-space: nowrap;
	}


/*
 * kPropertyTable: Configure a list of key-value pairs.
 */
	table.kPropertyTable td {
		padding-top: 7px;
		padding-bottom: 7px;
	}

	table.kPropertyTable td.kTableLabel {
		font-weight: bold;
		text-align: right;
		padding-right: 8px;
		white-space: nowrap;
		width: 25%;
	}
	
	table.kPropertyTable td.kTableValue {
		padding-left: 8px;
		white-space: nowrap;
		width: 75%;
	}

		/*
		 * Space out both the labels for radio buttons and other buttons
		 * in the table.  We use padding on the radio button labels so
		 * that the extra space is still clickable, and we use margin on
		 * the other buttons because padding doesn't work.
		 */
		table.kPropertyTable td.kTableValue label {
			padding-right: 15px;
		}
		
		table.kPropertyTable td.kTableValue input[type="button"] {
			margin-right: 10px;
		}

td.kDataLabel {
	font-weight: bold;
	white-space: nowrap;
}


/*
 * Player configuration table
 */
table.kPlayerTable th {
	text-align: left;
}

td.kPlayerNumber {
	width: 30px;
}

td.kPlayerCharacter {
	width: 100px;
}

td.kPlayerPlace {
	width: 50px;
}

td.kPlayerHuman {
	width: 300px;
}

/*
 * Race table
 */
td.kDataRaceID, td.kDataVideoID {
	font-family: monospace;
	text-align: right;
}

td.kDataRaceNPl, th.kDataRaceNPl {
	width: 15px;
	padding-left: 5px;
	padding-right: 5px;
}

td.kDataRaceMode, th.kDataRaceMode {
	width: 15px;
	padding-left: 5px;
	padding-right: 5px;
}

td.kDataRaceLvl, th.kDataRaceLvl {
	width: 15px;
	padding-left: 5px;
	padding-right: 5px;
}

td.kDataRaceRank, th.kDataRaceRank {
	width: 15px;
	padding-left: 5px;
	padding-right: 5px;
}

td.kDataRaceLvl {
	text-align: right;
}

td.kDataRacePl, th.kDataRacePl {
	width: 15px;
	padding-left: 5px;
	padding-right: 5px;
}

td.kDataRaceDate {
	white-space: nowrap;
}

td.kDataRaceTrack {
	white-space: nowrap;
}

td.kDataRaceVStart {
	text-align: right;
}

td.kDataRaceVEnd {
	text-align: right;
}

td.kDataRaceTime {
	text-align: right;
	width: 20px;
}

td.kDataDateTime {
	white-space: nowrap;
}

/*
 * Player results table
 */
table td.kDataPlayerNum, table th.kDataPlayerNum {
	width: 15px;
	padding-left: 5px;
	padding-right: 5px;
}

td.kDataPlayerNum, td.kDataPlayerTime, td.kDataPlayerPercentage,
th.kDataPlayerNum, th.kDataPlayerTime, th.kDataPlayerPercentage {
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
	width: 15px;
}

th.kDataPlayerPercentageBar,
td.kDataPlayerPercentageBar {
	width: 50px;
	padding-left: 0px;
	padding-right: 0px;
	vertical-align: middle;
}

td.kDataPlayerPercentageBar div.kDataBar {
	height: 10px;
	background-color: #4682b4;
}

table.kDynamic {
	margin-bottom: 20px;
}

/*
 * Item information
 */
div.kItemGraphWidget {
	position: relative;
	height: 300px;
}

div.kItemGraphWidget > div.kItemGraph {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 300px;
}

div.kItemGraphWidget table.kDataTable {
	position: absolute;
	top: 0px;
	left: 300px;
}

table th.kDataItemColor,
table td.kDataItemColor {
	padding-left: 0px;
	padding-right: 0px;
	width: 12px;
}

div.kItemSquare {
	height: 10px;
	width: 10px;
	border: 1px #666 solid;
}

table td.kDataItemLabel {
	font-weight: bold;
	padding-right: 10px;
}
table td.kDataItemCount {
	text-align: right;
}

.axis path,
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.bar {
	fill: steelblue;
}

.x axis path {
	display: none;
}

/*
 * Race graphs
 */
.kRaceGraph {
	width: 850px;
	height: 150px;
}

.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 3px;
}
