/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/

/* Ashlar.com: Contains media queries*/

/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow,
.cycle-slideshow * {
          box-sizing: border-box;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.cycle-slideshow {
  /* Turned off due to transparent banners */
  /* background: url(/images/spinner.gif) 50% 50% no-repeat; */
  margin: 10px auto 0;
  padding: 0;
  /* Ashlar.com specific parameters */
  z-index: 10;
  max-width: 100%;
}
  /* Ashlar.com specific parameters */
  .cycle-slideshow img {border-radius: 5px;}

/* slideshow images (for most of the demos, these are the actual "slides") */

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static;
    z-index: 100;
}

/* pager */
.cycle-pager {
  margin: 1em 0 -2.5em 0;
  text-align: center;
  z-index: 150;
  width: 100%;
}

  .cycle-pager span {
    color: #ccc;
    cursor: pointer;
    font-size: 300%;
    margin: 0 2px;
  }

  .cycle-pager span.cycle-pager-active {color: #175092;}

  .cycle-pager > * {
    cursor: pointer;
  }

/* caption */
.cycle-caption {
  color: white;
  position: absolute;
  z-index: 700;
  bottom: 15px;
  right: 15px;
}


/* overlay */
.cycle-overlay { 
    background: black;
    color: white;
    opacity: .6;
    position: absolute;
    padding: 15px;
    z-index: 600;
    bottom: 0;
    width: 100%;
}


/* prev / next links */
.cycle-prev,
.cycle-next {
  cursor: pointer;
  opacity: 0;
   filter: alpha(opacity=0);
  position: absolute;
  z-index: 800;
  top: 0;
  width: 30%;
  height: 100%;
}

.cycle-prev {
  background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
  left: 0;
}

.cycle-next {
  background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
  right: 0;
}

  .cycle-prev:hover, .cycle-next:hover {
    opacity: .7;
     filter: alpha(opacity=70);
   }

.disabled {
  opacity: .5;
   filter:alpha(opacity=50);
}


/* display paused text on top of paused slideshow */
.cycle-paused:after {
    background: black;
    border-radius: 10px;
    color: white;
    content: 'Paused';
    opacity: .5;
     filter: alpha(opacity=50);
    padding: 10px;
    position: absolute;
    z-index: 500;
    top: 10px;
    right: 10px;
}

/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
/* Media queries dependent rules for Ashlar.com are in responsive.css file */

    /* Not needed on Ashlar.com
    .cycle-slideshow {
      width: 200px;
     }
    
    .cycle-overlay {
      padding: 4px;
     }
    
    .cycle-caption {
      bottom: 4px;
      right: 4px;
    }
*/
}