/*
  Routegadget RG2 Custom CSS
  */

html, body {
	width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  display: block;
  font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

#rg2-header-container {
    background: #002bd9;
    color: white;	
    position: relative;
    height: 30px;
    border-bottom: 4px solid black;
    font-size: 20px;
    line-height: 30px;
}

#rg2-course-select, #rg2-name-select {
  float: right;
  min-width: 200px;
  max-width: 200px;
}

#rg2-manager-event-select {
  /*margin-top:100px;*/
  width: 100%;
}

#rg2-new-comments {
	margin-top:10px;
	margin-bottom: 10px;
	width: 100%;
	height: 50px;
}

.rg2-ani-row {
    background: silver;
    color: white;	
    position: absolute;
    vertical-align: middle;
    height: 36px;
	  width: 240px;
    right: 0;
	  border: 4px solid darkgray;
  	z-index: 100;
    line-height: 36px;
}

.row-1 {
    bottom: 120px;
    font-size: 20px;
}

.row-2 {
    bottom: 80px;
}

.row-3 {
    bottom: 40px;
    color: black;
}

.row-4 {
    bottom: 0;
    color: black;   
}

#rg2-resize-info {
	position: absolute;
  vertical-align: middle;
  padding-right: 10px;   
}

#rg2-header {
	position: absolute;
  vertical-align: middle;
  left: 35px;
}

.rg2-button {
  background: silver;
  color: white;
	float: right;
	width: 30px;
	text-align: center;
	border-left: 4px solid darkgray;
}

.rg2-button:hover {
  color: darkgray;
}

#btn-edit-delete-event, #btn-add-event {
    margin:0 auto;
    display:block;
}

#rg2-about {
   position: absolute;	
   right: 0;
   padding-right: 20px;
}

#rg2-about-dialog {
	 font-size: 0.75em;
   display: none;
}

.splitstable {
	 font-size: 0.75em;
}

.splitstable th {
  font-weight: bold;
  background-color: white;
}

.splitsname-row {
  background-color: #C0C0C0;
}

.splitstime-row {
  background-color: #E0E0E0;
}


.splitsdistance-row {
  background-color: white;
}

.showcourse {
	float: right;
}
.event-info-icon {
	float: right;
}

.allitemsrow {
  font-weight: bold;  
}

.rg2-hr {
	margin-top: 10px;
	margin-bottom: 10px;
}
#rg2-clock {
   font-weight: bold;
   font-size: 26px;
   color: black;
 	 text-align: center;
}

#rg2-tails-type {
	padding-left: 5px;
	border-right: 4px solid darkgray;
	width: 100px;
}

#spn-tail-length {
  width: 30px;
}

#rg2-tails-spinner {
  float: right;
  padding-right: 5px;
}


#spn-map-intensity, #spn-course-width, #spn-route-width, #spn-name-font-size, #spn-route-intensity, #spn-control-circle {
  width: 40px;
}

.options {
  float: right;
  padding-right: 5px;
  margin-top: 5px;
  clear:both;
}

#rg2-container {
	 height: 100%;
   width: 100%;
   position: relative;
   background: white;
   overflow: hidden;
   display: none;
}

#rg2-info-panel {
   font-size: 0.75em;
	 width: 360px;
   position: absolute;
	 z-index: 100;
	 height: 99%;
}

#rg2-info-panel-tab-headers {
   overflow: hidden; 
   position: relative;
}

#rg2-info-panel-tab-headers .ui-tabs-nav a {
   padding: .5em .5em;
}

#rg2-info-panel-tab-body {
   overflow: auto; /* add scroll bars if needed */
   height: 95.5%
}

#rg2-event-list .ui-menu-item {
  list-style-image: none;
}

#rg2-event-list .ui-menu-item a {
  text-decoration: none;
}

#rg2-event-list li:nth-child(odd) {
  background: #eee;
}

.rg2-active-event {
   border: 2px solid black;
}
   
#rg2-hide-info-panel-control {
  position:absolute;
  left: 366px;
  top: 4px;
  z-index: 100;
  color: black;
  width: 20px;
  text-align: center;
  border: 1px solid #AAAAAA;
  background: #E0E0E0;
}

#rg2-map-canvas {
   position: absolute;
   z-index: 50;
}

#rg2-load-progress {
   border: 1px solid darkgray;
   background: rgb(204, 204, 204);
   background: rgba(204, 204, 204, 1.0);
   padding : 2px;
   position: absolute;
   font:1.0em/1.0em arial;
   text-align:center;
   top: 100px;
   left: 400px;
   height: auto;
   width: 200px;
   z-index: 90;
}

#rg2-track-names, #rg2-animation-names {
   border: 1px solid darkgray;
   background: rgb(204, 204, 204);
   background: rgba(204, 204, 204, 0.75);
   padding : 2px;
   position: absolute;
   font:0.75em/0.4em arial;
   top: 50px;
   right: 20px;
   height: auto;
   width: auto;
   z-index: 90;
   max-height: 500px;
   overflow: auto;
}

#rg2-replay-start-control {
  float: left;
  padding-left: 5px;    
}

.pushright {
	float: right;
}

#rg2-manage-edit .ui-button {
	margin-top: 10px;
  margin-bottom: 10px;
}

/* mass start/real time icon colour */
.active {
	color: green;
}

/* light green background*/
.valid {
  background-color: #99ffcc;
  border-radius: 3px;
}

.coursemenutable tr, td, th {
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

p.showcourse {
	padding-left: 5px;
}

/* apply style to first td or th element in table
/ which is Name in this case
*/
table.resulttable td, 
table.resulttable th {
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

table.resulttable td + td,
table.resulttable th + th {
	width: 80%;
	text-align: left;
}

table.resulttable tbody tr:nth-child(odd) {
  background: #eee;
}

#rg2-result-list .ui-accordion,
#rg2-result-list .ui-accordion-content {
padding: 0;
}


#rg2-select-gps-file .ui-button {
	width: 300px;
	margin-bottom: 10px;
}

#rg2-button-bar .ui-button-text-icon-primary,
#rg2-button-bar .ui-button-text, 
#rg2-button-bar .ui-button-text-icons,
#rg2-button-bar .ui-button-text {
	font-size: 0.75em;
	padding: .2em .2em .2em 1em;

}

#rg2-clock-slider {
  margin: 10px 15px;
}

#rg2-clock-slider .ui-state-default {
	background: silver;
	border: 4px solid darkgray;
}

#rg2-clock-slider .ui-state-focus {
	outline: none;
}

#rg2-clock-slider .ui-state-hover {
	background: darkgray;
}

#rg2-clock-slider .ui-slider-handle {
width: 15px;
height: 20px;
}

#rg2-tails-spinner .ui-widget-content {
  border: 2px solid darkgray;
}

#rg2-tails-spinner .ui-spinner {
	display: inline;
}

#rg2-tails-spinner .ui-state-default {
	background: silver;
	color: darkgray;
}

#rg2-tails-spinner .ui-state-active {
	color: silver;
}

#rg2-tails-spinner .ui-spinner input {
  font: 16px Helvetica, Helvetica Neue, Arial;
  margin-bottom: 9px
}

#rg2-event-comments {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 95%;
	height: 50px;
}

#rg2-add-new-event .ui-button {
  margin-top: 10px;
  margin-bottom: 10px;
}

#rg2-new-event-details input {
  margin-top: 5px;
  margin-bottom: 5px;
}
/* spinner icons */
#rg2-tails-spinner .ui-icon,
#rg2-tails-spinner .ui-widget-content .ui-icon {
	background-image: url(../img/ui-icons_222222_256x240.png);
}
#rg2-tails-spinner .ui-widget-header .ui-icon {
	background-image: url(../img/ui-icons_222222_256x240.png);
}
#rg2-tails-spinner .ui-state-default .ui-icon {
	background-image: url(../img/ui-icons_888888_256x240.png);
}
#rg2-tails-spinner .ui-state-hover .ui-icon,
#rg2-tails-spinner .ui-state-focus .ui-icon {
	background-image: url(../img/ui-icons_454545_256x240.png);
}
#rg2-tails-spinner .ui-state-active .ui-icon {
	background-image: url(../img/ui-icons_454545_256x240.png);
}
#rg2-tails-spinner .ui-state-highlight .ui-icon {
	background-image: url(../img/ui-icons_2e83ff_256x240.png);
}

#rg2-tails-spinner .ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url(../img/ui-icons_cd0a0a_256x240.png);
}

/* allow close button on dialog to be hidden
 * see http://api.jqueryui.com/dialog
 */
.no-close .ui-dialog-titlebar-close {
display: none;
}

/*
 * prevent selection of objects on the canvas
 */
image, canvas {
  -ms-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

.manage-input {
  margin-top: 3px;
  margin-right: 3px;
  width: 200px;
}

.manage-label {
  margin-left: 3px;
}

#rg2-draw label {
  margin-left: 3px;
}

.no-top-margin {
  margin-top: 0;
  margin-bottom: 2px;
}

#rg2-manage-create {
  padding-right: 5px;
}

#rg2-manage-create div, #rg2-manage-map div, #rg2-manage-edit div {
  margin-top: 5px;
}

.manage-file-input {
  margin-top: 4px;
  margin-bottom: 4px;
  width: 200px;
}

.manage-file-input-div {
  height: 41px;
}

.manage-file-label {
  margin-top: 9px;
  margin-bottom: 9px;
}

.manage-event-edit-div {
  height: 30px;
  }

.manage-event-edit-div label, .manage-event-edit-div input {
  display: inline-block;
}

.manage-event-edit-div label {
  width: 80px;
}


#manage-edit-options input {
  width: 220px;
}

#manage-edit-options .ui-accordion-content {
  padding: 1em 0.5em;
}

#rg2-option-controls input[type="checkbox"] {
  margin-left: 10px;
  margin-top: 10px;
  float: right;
}

#rg2-draw .ui-button {
  margin-left: 5px;
  margin-top: 5px;
}

#rg2-edit-event-comments {
  width: 95%;
  height: 50px;
}

#rg2-event-selected {
  width: 95%;
}