/**
*翿
*  Really Simple™ Slideshow -- CSS
*/

.rs-slideshow {
  /*border: 2px solid #f9d041;*/
  /*border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -khtml-border-radius: 12px;
  margin: 24px auto;*/
  height: 357px;
  width: 580px;
  overflow: hidden;
  position: relative;
}

.rs-slideshow .slide-container {
  background-color: #444;
  position: absolute;
  left: 0;
  overflow: hidden;
  top: 0;
  height: 100%;
  width: 100%;
}

.rs-slideshow .slide-container img {
  /*position: relative;*/
  /*width: 580px;*/
}

.rs-slideshow .slide-container .slide-caption {
  background-color: #000;
  bottom: 0;
  color: #fff;
  display: block;
  left: 0;
  padding: 6px 12px;
  position: absolute;
  text-align: center;
  right: 0;
  filter: alpha(opacity=70); /* internet explorer */
  -khtml-opacity: 0.7;      /* khtml, old safari */
  -moz-opacity: 0.7;       /* mozilla, netscape */
  opacity: 0.7;           /* fx, safari, opera */
}

.rs-slideshow .slides {
  display: none;
}

.rs-slideshow .slide-container img,
.rs-slideshow .slide-container .slide-caption,
.rs-slideshow .slide-container a {
  filter: inherit;
}


/**
*  These styles make the list of links to slide images visible to users
*  who don't have JavaScript enabled. By adding the 'no-js' class to 
*  the HTML element, and using Modernizr to remove this class for JS
*  users, we can style for both scenarios.
*  http://www.modernizr.com/
*/

.no-js .rs-slideshow {
  height: auto;
}
.no-js .rs-slideshow .slide-container, 
.no-js .rs-slideshow .slide-container img {
  position: relative;
}
.no-js .rs-slideshow .slides {
  display: block;
  /*margin: 24px 48px;*/
}
.no-js .rs-slideshow .slides li {
  margin: 0;
}



/**
*  The following styles are used in the demos with slideshow controls, 
*  such as play/pause and prev/next buttons.
*/

.rs-controls {
  clear: both;
  margin: 12px auto;
  width: 580px;
}
.rs-play-pause, .rs-prev, .rs-next {
  float: left;
  margin-right: 12px;
}
.rs-controls ul {
  float: left;
  list-style: none;
  margin: 0 6px 0 0;
  padding: 0;
}
.rs-index-list li {
  float: left;
  margin-right: 6px;
}
.rs-controls a {
  background-color: #eee;
  border: 1px solid #ddd;
  /*border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;*/
  color: #444;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 5px;
  text-decoration: none;
}
.rs-controls a:hover {
  background-color: #ddd;
  color: #444;
}
.rs-controls .rs-active {
  background-color: #444;
  border: 1px solid #444;
  color: #eee;
}


#callback-messages,
#slide-class-message {
  margin: 48px auto;
  width: 620px;
}
.slide-container.some-custom-class .slide-caption {
  background-color: #890;
  font-size: 3em;
  font-style: italic;
  font-weight: bold;
  text-align: right;
  top: 0;
  /*width: 28%;*/
}



/*  Clearfix  */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }