static/css/js-anythingslider.css

   1 /*
   2     AnythingSlider v1.4
   3
   4     By Chris Coyier: http://css-tricks.com
   5     with major improvements by Doug Neiner: http://pixelgraphics.us/
   6     based on work by Remy Sharp: http://jqueryfordesigners.com/
   7 */
   8
   9 /******* SET DEFAULT DIMENSIONS HERE ********/
  10 div.anythingSlider {
  11         width: 700px;
  12         height: 390px;
  13         margin: 0 auto;
  14 }
  15
  16 div.anythingSlider img {
  17         padding: 0;
  18 }
  19
  20 /****** SET COLORS HERE *******/
  21 /* Default State */
  22 div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a {
  23         background: #880400;
  24 }
  25 div.anythingSlider .anythingWindow {
  26         border-top: 2px solid #880400;
  27         border-bottom: 2px solid #880400;
  28 }
  29 /* Active State */
  30 div.anythingSlider.activeSlider .thumbNav a.cur {
  31         color: white;
  32         background-color: #880400;
  33 }
  34
  35 div.anythingSlider.activeSlider .thumbNav a {
  36         background-color: white;
  37 }
  38
  39 div.anythingSlider.activeSlider .anythingWindow {
  40         border-color: #880400;
  41 }
  42
  43 /**** DO NOT CHANGE BELOW THIS LINE ****/
  44 /* anythingSlider viewport window */
  45 div.anythingSlider .anythingWindow {
  46         overflow: hidden;
  47         position: relative;
  48         width: 100%;
  49         height: 100%;
  50 }
  51 /* wrapper: 45px right & left padding for the arrows, 28px @ bottom for naviagation */
  52 div.anythingSlider {
  53         position: relative;
  54         padding: 0 35px 28px;
  55         /*padding: 0 35px 28px 35px;*/
  56 }
  57 /* anythingSlider base UL */
  58 ul.anythingBase {
  59         background: transparent;
  60         list-style: none;
  61         position: absolute;
  62         top: 0; left: 0;
  63         margin: 0;
  64 }
  65 ul.anythingBase li.panel {
  66         background: transparent;
  67         display: block;
  68         float: left;
  69         padding: 0;
  70         margin: 0;
  71 }
  72
  73 /* Navigation Arrows */
  74 div.anythingSlider .arrow {
  75         top: 50%;
  76         position: absolute;
  77         display: block;
  78 }
  79 div.anythingSlider .arrow a {
  80         display: block;
  81         height: 70px;
  82         margin-top: -70px;
  83         width: 35px;
  84         text-align: center;
  85         outline: 0;
  86         background: url(../images/anythingslider/arrows.png) no-repeat;
  87         text-indent: -9999px;
  88 }
  89 div.anythingSlider .forward { right: 0; }
  90 div.anythingSlider .back { left: 0; }
  91 div.anythingSlider .forward a { background-position: 0 -70px; }
  92 div.anythingSlider .back a { background-position: -35px -70px; }
  93 div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 0; }
  94 div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: -35px 0; }
  95
  96 /* Navigation Links */
  97 div.anythingSlider .thumbNav { margin: 0; }
  98 div.anythingSlider .thumbNav li { display: inline; }
  99 div.anythingSlider .thumbNav a {
 100         color: #880400;
 101 /*      font: 11px/18px Georgia, Serif; */
 102         display: inline-block;
 103         text-decoration: none;
 104         padding: 2px 8px;
 105         height: 18px;
 106         margin: 0 5px 0 0;
 107         background-image: url(../images/anythingslider/cellshade.png);
 108         background-repeat: repeat-x;
 109         text-align: center;
 110         outline: 0;
 111 /*      -moz-border-radius-bottomleft: 5px;
 112         -moz-border-radius-bottomright: 5px;
 113         -webkit-border-bottom-right-radius: 5px;
 114         -webkit-border-bottom-left-radius: 5px; */
 115 }
 116 div.anythingSlider .thumbNav a:hover { background-image: none; }
 117
 118 /* slider autoplay right-to-left, reverse order of nav links to look better */
 119 div.anythingSlider.rtl .thumbNav a { float: right; } /* reverse order of nav links */
 120 div.anythingSlider.rtl .thumbNav { float: left; }    /* move nav link group to left */
 121 /* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
 122
 123 /* Autoplay Start/Stop button */
 124 div.anythingSlider .start-stop {
 125         z-index: 10;
 126         background-color: #880400;
 127         color: white;
 128         padding: 2px 5px;
 129         width: 40px;
 130         text-align: center;
 131         text-decoration: none;
 132         float: right;
 133 /*      -moz-border-radius-bottomleft: 5px;
 134         -moz-border-radius-bottomright: 5px;
 135         -webkit-border-bottom-right-radius: 5px;
 136         -webkit-border-bottom-left-radius: 5px; */
 137 }
 138 div.anythingSlider .start-stop.playing { background-color: #880400; }
 139 div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; color: white }
 140