#map {
 background-color: #7391AD;
}

#Lw4nclogger {
  z-index: 999;
  display: block;
  position: absolute;
  top: 7px;
  /*right: 7px;*/
  right: 250px;
  padding: 10px;
  width: 200px;
  background: #999;
  color: #fff;
  border: solid 1px #ccc;
  opacity: 0.9;
  font-size: 9px;
  filter: alpha(opacity=10);
}

/* Mouse position text */
.olControlMousePosition {
  color: #111;
  background-color: white;
  border: 0;
  font-weight: bold;
}

.olControlMousePositionActive {
  cursor : crosshair;
}

.loading {
  position:absolute;
  border: 8px solid #A6D1E6;
  color: #111;
  top:50%;
  /*top: 100%;*/
  left: 50%;
  /*left: 100%;*/
  margin-top: -60px;
  margin-left: -100px;
  /*margin-top: -120px;
  margin-left: -120px;*/
  text-align: center;
  background-color: white;
  z-index: 9999;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  box-shadow: 10px 10px 6px #666;
  -webkit-box-shadow: 10px 10px 6px #444;
  -moz-box-shadow: 10px 10px 6px #444;
  visibility: hidden
}

/* olControlPanel is a mysterious css class of elements which seem to catch button click events */
.olControlPanel div {
  margin-left: 60px;
  margin-top: 10px;
  width: 36px;
  height: 19px;
  border: 1px solid RED;
}

#i18n img {
    margin: 4px 6px 0px 0px;
    border: 2px solid #DFE8F6;
}

#i18n img:hover {
    border: 2px solid #11BED5;
}

#title{
  margin-left: 80px;
  line-height: 60px;
  font-size: 30px;
  color: #15428b;

}

.layerOn{-webkit-transition:opacity .3s cubic-bezier(0,0,0.96,1);-moz-transition:opacity .3s cubic-bezier(0,0,0.96,1);-o-transition:opacity .3s cubic-bezier(0,0,0.96,1);transition:opacity .5s cubic-bezier(0,0,0.96,1);opacity:1}
.layerOff{-webkit-transition:opacity .3s cubic-bezier(0.9,0,1,1);-moz-transition:opacity .3s cubic-bezier(0.9,0,1,1);-o-transition:opacity .3s cubic-bezier(0.9,0,1,1);transition:opacity .5s cubic-bezier(0.9,0,1,1);opacity:0}
.layerOnFast{opacity:1}
.layerOffFast{opacity:0}

#map-player-widget{
  position: absolute;
  top: 10px;
  left: 50px;
  min-height: 70px;
  padding: 10px 20px;
  background-color: #a0a0a0;
  background-color: rgba(160, 160, 160, 0.55);
  color: #444;
  font-family: tahoma,arial,verdana,sans-serif;
  z-index: 99999;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  box-shadow: 5px 5px 10px #444;
  -webkit-box-shadow: 5px 5px 10px #444;
  -moz-box-shadow: 5px 5px 10px #444;
}

#map-player-widget button{
  background-color: #BB6C00;
  color: #FFFFFF;
  font-size: 1.05em;
  border: 1px solid #FFFFFF;
  height: 27px;
  width: 120px;
  cursor: hand;
  position: absolute;
  left: 20px;
}

#map-player-widget button.play{
  top: 30px;
}
#map-player-widget button i{
  display: block;
  width: 20px;
  height: 20px;
  float: left;
}

#map-player-widget button.play i{
  background: url(../images/play.png);
}
#map-player-widget button.resume i{
  background: url(../images/forward.png);
}
#map-player-widget button.loop i{
  background: url(../images/repeat.png);
}
#map-player-widget button.stop i{
  background: url(../images/stop.png);
}
#map-player-widget button.pause i{
  background: url(../images/pause.png);
}




#map-player-widget button.resume{
  top: 15px;
}
#map-player-widget button.loop{
  top: 45px;
}

#map-player-widget button:hover{
  background-color: #f7a433;
  box-shadow: 5px 5px 10px #444;
  -webkit-box-shadow: 5px 5px 10px #444;
  -moz-box-shadow: 5px 5px 10px #444;
}

#map-player-widget .list-times{
  list-style: none;
  padding: 0;
  display: block;
  margin-left: 130px;
  height: 50px;
}

#map-player-widget .init-msg{
  position: absolute;
  top: 10px;
  left: 150px;
}
#map-player-widget .current-time{
  margin-left: 130px;
  color: #4d60ed;
  display: none;
}

#map-player-widget .current-time span{
  color: #FFFFFF;
}


#map-player-widget .list-times li{
  padding: 0;
  text-align: center;
  float: left;
  height: 70px;
  font-size: 0.75em;
}

#map-player-widget .list-times li.item-legend{
  width: 40px;
  margin-right: 10px;
  color: #444;
  font-weight: bold;
}

#map-player-widget .legend-mapplayer{
  margin-top: 5px;
  float: right;
  margin-right: 100px;
}

#map-player-widget .legend-mapplayer li{
  padding: 0;
  text-align: center;
  float: left;
  height: 30px;
  font-size: 0.75em;
  margin-left: 10px;
}

#map-player-widget .list-times li.item-legend .legend-hour,
#map-player-widget .list-times li.item-legend .legend-day{
  line-height: 20px;
  height: 20px;
}
#map-player-widget .list-times li.item-legend .legend-day{
  margin-top: 26px;
}


#map-player-widget .list-times li .legend{
  height: 20px;
  line-height: 20px;
  width: 40px;
}

#map-player-widget .list-times li .day{
  display: none;
}

#map-player-widget .list-times li .hour{
  display: none;
  color: #4d60ed;
}

#map-player-widget .list-times li .visible-day,
#map-player-widget .list-times li:hover .hour,
#map-player-widget .list-times li.active .hour{
  display: inline;
}

#map-player-widget .list-times li.active .visible-day,
#map-player-widget .list-times li:hover .visible-day{
  color: #4d60ed;
}

#map-player-widget li .box{
  height: 25px;
  width: 100%;
  cursor: hand;
}

#map-player-widget .legend-mapplayer li .box{
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 5px;
}
#map-player-widget .legend-mapplayer li .label{
  float: left;
}

#map-player-widget li.unload .box{
  background-color: #EEE;
}

#map-player-widget li.loaded .box{
  background-color: #444;
}

#map-player-widget .list-times li:hover .box{
  background-color: #DDD;
}
#map-player-widget li.active .box{
  background-color: #4d60ed;
}
#map-player-widget li.error .box{
  background-color: #E60000;
}

.button-image .x-btn-text{
  height: 70px !important;
  width: 100%;
  background-size: 100% 100%;
  white-space: normal;
  font-size: 12px;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-weight: bold;
  text-shadow: 2px 2px #FFFFFF;
}

.button-timeseries .x-btn-text{
  background-image: url(../images/bg-timeseries.png);
}

.button-transect .x-btn-text{
  background-image: url(../images/bg-transect.png);
}
.button-markers .x-btn-text{
  background-image: url(../images/bg-markers.png);
}
.button-animation .x-btn-text{
  background-image: url(../images/bg-animation.png);
  padding-bottom: 25px;
}