@font-face {
	font-family: PT Sans Narrow;
	font-weight: bold;
	src: url("./fonts/PT_Sans-Narrow-Web-Bold.ttf");
}

@font-face {
	font-family: PT Sans Narrow;
	font-weight: bold; /* fake bold! */
	src: url("./fonts/PT_Sans-Narrow-Web-Regular.ttf");
}

@font-face {
	font-family: PT Sans;
	font-weight: normal;
	src: url("./fonts/DroidSans.ttf");	
}

@font-face {
	font-family: PT Sans;
	font-weight: bold;
	src: url("./fonts/DroidSans-Bold.ttf");	
}

body {
	font-family: PT Sans,Droid Sans,DejaVu Sans,Sans,Helvetica,Arial,sans-serif;
	font-size: 18px;
	padding: 0;
	margin: 0;

	background-attachment: fixed;
	background-color: #eeeeee;
	background-image: -moz-linear-gradient(center top , silver, white 100%);
	background-repeat: no-repeat;

}

header {
	font-family: PT Sans Narrow,Droid Sans,DejaVu Sans,Sans,Helvetica,Arial,sans-serif;
	font-size: 28px;
	font-weight: bold;
	color: #cccccc;
	background-color: #666666;
	padding: 8px;
}

nav#main_nav {
	font-family: PT Sans Narrow,Droid Sans,DejaVu Sans,Sans,Helvetica,Arial,sans-serif;
	font-size: 32px;
	background: #404040;
	color: white;
	height: 1.5em;
	padding-left: 0px;
}

nav#scrollbar, nav#comp {
	font-family: PT Sans Narrow,Droid Sans,DejaVu Sans,Sans,Helvetica,Arial,sans-serif;
	border: black;
	width: 72px;
	position: fixed;
	right: 32px;
}

nav#scrollbar {
	bottom: 32px;
}

nav#comp {
	top: 108px;
}

nav ul {
	margin: 0;
	padding: 0 0 0 0px;
	list-style-type: none;
}

nav#main_nav ul li.active {
	background: #cccccc;
	color: black;
}

nav#main_nav ul li {
	height: 100%;
	box-sizing: border-box;
	padding: 0.1em 0.375em;
}

nav#scrollbar ul li a, nav#comp ul li a {
	display: block;
	text-align: center;
	vertical-align: middle;
	height: 64px;
	width: 64px;
	line-height: 64px;
	border: thin #cccccc solid;	
	margin: 12px;
	background: white;
	box-shadow: 0 0 10px #888888;
}

nav#scrollbar ul li a:active, nav#comp ul li a:active {
	box-shadow: 0 0 2px #222222;
	border: thin black solid;
}

nav#scrollbar ul li a img, nav#comp ul li a img {
	padding: 8px;
}

a {
	color: inherit;
	text-decoration: none;
}

footer {
	font-size: 10px;	
	text-align: center;
}

div#message {
	background: #faebaf;
	margin-bottom: 1em;
	border: solid #f1c40f 2px;
	padding: 0.5em;
}

div#content {
	margin: 20px 20px;
	width: 85%;
}

#clock.error {
	color: #CF9893;
}

.left {
	float: left;
}

.right {
	float: right;
}

.break {
	clear: both;
}

.center {
	text-align: center;
}

.bold {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border: #aaaaaa solid thin;
}

table.data {
	width: 100%;
}

thead {
	background: red;

}

th {
	text-align: left;
	padding: .5em;
	background: #777777;
	color: white;
	font-weight: normal;
}

tr {
/*border: thin solid red;*/
}

tr.clickable {
	cursor: pointer;
}

table.data tr:nth-child(even) {
	background: #e8e8e8;
}

table.data tr:nth-child(odd) {
	background: #e0e0e0;
}

td {
	padding: .5em;
	vertical-align: text-top;
}

td.lane, td.bib, td.rank {
	width: 32px;
	text-align: center;
}

td.result {
	text-align: right;
	width: 96px;
}

table.data tr.yellow_card {
	background-color: #FFFFAA;
}

div.compHeader {
	background: #666666;
	color: white;
	padding: 8px;
	line-height: 133%;
}

img#indicator {
}

.boatComment {
	text-decoration: underline;
}

.boatLabel {
	font-weight: bold;
}

.state {
	color: black;
	font-weight: normal;
	padding: 0.25em 1em;
}

.state0 { background: #CCCCCC; }
.state1 { background: #FFFFAA; }
.state2 { background: #FFCCAA; }
.state3 { background: #AAAAFF; }
.state4 { background: #AAFFAA; }
.state5 { background: #AACCFF; }
.state6 { background: #FFAACC; }

.cancelled { background: black; color: white; }

div.athlete {
    display: inline-block;
    margin-right: .5ex;
}

div.athlete.tainted {
    text-decoration: underline dashed;
}

div.athlete.missing {
    color: gray;
}

div.athlete span.lastName {
    text-transform: uppercase;
}

div.referees {
	padding-left: 1em;
}

div.progressionRule {
	padding-left: 1em;
	padding-top: 1em;
}

div.progressionRule span.label {
	font-weight: bold;
}

div.withdrawals {
	padding-left: 1em;
}

div.withdrawals ul {
	list-style: none;
	padding-left: 3.25em;
}

div.withdrawals ul li span.bib {
	width: 3em;
	display: inline-block;
}

@media (max-height: 768px) {

nav#scrollbar ul li a, nav#comp ul li a {
	height: 48px;
	width: 48px;
	line-height: 48px;
/*	margin: 6px;*/
	box-shadow: 0 0 5px #888888;
}

nav#scrollbar, nav#comp  {
	right: 16px;
}

nav#scrollbar ul li a img, nav#comp ul li a img {
	width: 32px;
	height: 32px;
}

}

@media (max-height: 640px) {

nav#scrollbar {
	display: none;
}

nav#comp {
	right: 8px;
}

}