/* ==========================================================
 * slidemapper.js v0.1.2
 * A jQuery plugin to create an animated slideshow tied to a Leaflet map.
 * http://github.com/cavis/slidemapper
 * ==========================================================
 * Copyright (c) 2012 Ryan Cavis
 * Licensed under http://en.wikipedia.org/wiki/MIT_License
 * ========================================================== */

/* slideshow element */
.smapp {}
.smapp-show {
  overflow: hidden;
    position: absolute;
    width: 30%;
    z-index: 999;background:#4385f5;height: 100%;
	box-shadow: 1px 0 7px 0 #808080;
}
.smapp-slides-ct {}

/* slides */
.smapp-show .slide {
 	border-bottom: 5px solid #4385f5;
    bottom: 0;
    display: none;
    left: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}
.smapp-show .slide.active { left: 0; display: block; }
.smapp-show .slide-inner { position: relative; overflow: hidden; }

/* side controls */
.ctrl-side {
  display: none;
  position: absolute;
  height:100px;
  line-height: 80px;
  margin-top:-50px;
  top:50%;
  width: 30px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100px;
  font-weight: 100;
  text-align: center;
  color: #fff;
  background: #6c0;
  cursor: pointer;
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -ms-user-select: none;
}
.ctrl-side.active { display: block; }
.ctrl-side.ctrl-left {
  left: 0;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 2px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.ctrl-side.ctrl-right {
  right: 0;
  -webkit-border-top-left-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-bottomleft: 2px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.ctrl-side:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 1.0;
  filter: alpha(opacity=100);
}

/* top controls */
.ctrl-top {
  position: absolute;
  top:50%;
  right: 10px;
  width :100%;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -ms-user-select: none;
}
.ctrl-top span {
  display: inline-block;
  line-height: 20px;
  vertical-align: bottom;
  position: relative;
  font-weight: normal;
  text-shadow: none;
  text-align: center;
}
.ctrl-top .ctrl-count {
  padding: 7px 7px 5px;
  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #ccc;
  background: #444;
  display:none;
}
.ctrl-top .ctrl-left, .ctrl-top .ctrl-right {
 background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #fff;
    cursor: pointer;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 90px;
    font-weight: 100;
    height: 50px;
    opacity: 0.5;
    padding: 0;
    width: 50px;
}
.ctrl-top .ctrl-left:hover, .ctrl-top .ctrl-right:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.ctrl-top .ctrl-left {
  -webkit-border-top-left-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-bottomleft: 2px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  left:5px;
}
.ctrl-top .ctrl-right {
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 2px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  right:-10px;
}

/* leaflet map */
.smapp-map { width: 100%; }


.ctrl-left {
  float: left;
    margin-left: 11px;
    text-align: left !important;
    width: 46% !important;
}
.ctrl-right {
    float: left;
    text-align: right !important;
    width: 50% !important;
}