/**
 * @file
 * CSS file for the map
 */

/**
 * Main Layout.
 */
html, body {
  height: 100%;
  font-family : Roboto, Arial, sans-serif;
}


.container-fluid, .row, #map-canvas, #sidebar {
  height : 100%;
}

#sidebar {
 background-color: #575F4E;
 color : #FFF;
}

#sidebar-inner {
  padding: 10px;
}

#sidebar form {
  cursor : pointer;
  padding : 10px;
  border : 3px dashed #EEE;
  text-align : center;
  font-family : cursive;
  font-style : italic;
}

/** FIX for Bootstrap and Google Maps Info window styes problem **/
/*img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
  max-width: none;
}*/

select {
  text-transform : capitalize;
}

/**
 * jGrowl Notification.
 */
#jGrowl.top-left {
}

.jGrowl .jGrowl-notification.error .jGrowl-header {
  color : #FF0000;
}

.jGrowl .jGrowl-notification.warning .jGrowl-header {
  color : #FF8000;
}

.jGrowl .jGrowl-notification.success .jGrowl-header {
  color : #04B404;
}

.jGrowl-header {
  text-transform: capitalize;
}

.jGrowl-message {
  font-size: 0.9em;
}

/**
 * Filename List.
 */
#file-handler .populated {
  background : repeating-linear-gradient(45deg, #575F4E, #575F4E 20px, #879279 20px, #879279 40px);
  border: 1px solid #FFF;
  margin-top: 10px;
  padding-left : 5px;
}

#filenameList {
 list-style: none;
 padding : 5px 0px 5px 20px;
 cursor: pointer;
}


#filenameList:hover {
  text-decoration : underline;
}

#export-waypoints {
  margin-bottom : 10px;
}

gm-panel li {
  border: none;
}


/**
 * Taskboard.
 */
#taskboard {
  clear : both;
  margin-top: 10px;
  min-height: 100px;
  border : 1px solid #EEE;
  border-radius: 2px;
  background-color: #879279;
  background-image: linear-gradient(45deg, #575F4E 25%, transparent 25%, transparent 75%, #575F4E 75%), 
  linear-gradient(45deg, #575F4E 25%, transparent 25%, transparent 75%, #575F4E 75%);
  background-size:20px 20px;
  background-position: 0 0, 50px 50px;
}

#taskboard .label {
  text-transform : uppercase;
  margin-right : 10px;
}

#taskboard-header {
  font-weight: bolder;
  color : #FFF;
  text-shadow: 0px 0px 10px #000;
  font-style: italic;
  font-family: cursive;
  font-size: 1.2em;
  text-align: center;
  margin-bottom : 10px;
}

#taskboard-content ul {
  padding-left : 5px;
}

#taskboard-content li {
  cursor: pointer;
  list-style-image : none;
  list-style-type : none;
  text-shadow : 0px 0px 10px #000;
}

#taskboard-content li:hover {
  text-decoration: underline;
}

#taskboard #task-distance {
  margin-top: 20px;
  text-align: right;
  font-size: 1.5em;
  text-shadow : 0px 0px 10px #000;
  font-style: italic;
  padding-right: 10px;
  font-weight: bold;
  clear: both;
}

#taskboard .turnpointDistance {
  float : right;
  font-size : 0.7em; 
  width: 100px;
  text-align: right;
}

#taskboard .taskboard-item {
  clear : both;
  margin-bottom: 5px;
}

/**
 * Fullboard
 */
#full-board {
  margin-top : 10px;
}

#task-config .container-fluid {
  border : 1px solid #CCC;
  margin : 10px 0px;
}

#task-config .form-group {
  padding-top : 10px; 
}

#task-config .tp-name {
  font-size : 0.8em;
} 

#task-config i {
  margin-right : 10px;
}

#task-config ol, #task-config ul {
  padding-left : 15px;
}

#task-config ol li, #task-config ul li {
  list-style-type : none;
  list-style-image : none;
}

#fullboard-arrow, #fullboard-turn-word {
  text-align : center;
}

#fullboard-turnpoint ol {
  counter-reset: item;
  list-style-type: decimal;
}

#fullboard-turnpoint ol li:before {
  content: 'B' counter(item, decimal) ' ';
  counter-increment: item;
  font-weight : bold;
}

#fullboard-turnpoint ol li {
  padding : 10px 0px;
}

#fullboard-turnpoint ol li:not(:last-child) {
  border-bottom : 1px dashed #CCC;
}

#fullboard-turnpoint span:first-of-type {
  margin-left : 10px;
}

#task-config h5, #task-config label {
  text-transform : uppercase;
}

#task-config h5 {
  color : #ac2925;
}

#fullboard-content span.tp-id {
  cursor : pointer;
} 

#fullboard-times .label {
  margin-right : 5px;
}

/**
 * Xavier Murillo hommage.
 */
span#fullboard-xm {
  float: right;
  font-size:0.2em;
}

/**
 * Waypoints Exporter
 */
#waypoints-exporter label {
  margin-right : 10px;
}

/**
 * Throber Spinner
 */
.glyphicon.spinning {
  animation: spin 1s infinite linear;
  -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

/**
 * QR Code
 */
#save-qrcode {
  text-align : center;
}