1/** 2 * BxSlider v4.0 - Fully loaded, responsive content slider 3 * http://bxslider.com 4 * 5 * Written by: Steven Wanderski, 2012 6 * http://stevenwanderski.com 7 * (while drinking Belgian ales and listening to jazz) 8 * 9 * CEO and founder of bxCreative, LTD 10 * http://bxcreative.com 11 */ 12 13 14/** RESET AND LAYOUT 15===================================*/ 16 17.bx-wrapper { 18 position: relative; 19 margin: 0 auto 60px; 20 padding: 0; 21 *zoom: 1; 22} 23 24.bx-wrapper img { 25 max-width: 100%; 26 display: block; 27} 28 29/** THEME 30===================================*/ 31 32.bx-wrapper .bx-viewport { 33 -moz-box-shadow: 0 0 5px #ccc; 34 -webkit-box-shadow: 0 0 5px #ccc; 35 box-shadow: 0 0 5px #ccc; 36 border: solid #fff 5px; 37 left: -5px; 38 background: #fff; 39} 40 41.bx-wrapper .bx-pager, 42.bx-wrapper .bx-controls-auto { 43 position: absolute; 44 bottom: -30px; 45 width: 100%; 46} 47 48/* LOADER */ 49 50.bx-wrapper .bx-loading { 51 min-height: 50px; 52 background: url(images/bx_loader.gif) center center no-repeat #fff; 53 height: 100%; 54 width: 100%; 55 position: absolute; 56 top: 0; 57 left: 0; 58 z-index: 2000; 59} 60 61/* PAGER */ 62 63.bx-wrapper .bx-pager { 64 text-align: center; 65 font-size: .85em; 66 font-family: Arial; 67 font-weight: bold; 68 color: #666; 69 padding-top: 20px; 70} 71 72.bx-wrapper .bx-pager .bx-pager-item, 73.bx-wrapper .bx-controls-auto .bx-controls-auto-item { 74 display: inline-block; 75 *zoom: 1; 76 *display: inline; 77} 78 79.bx-wrapper .bx-pager.bx-default-pager a { 80 background: #666; 81 text-indent: -9999px; 82 display: block; 83 width: 10px; 84 height: 10px; 85 margin: 0 5px; 86 outline: 0; 87 -moz-border-radius: 5px; 88 -webkit-border-radius: 5px; 89 border-radius: 5px; 90} 91 92.bx-wrapper .bx-pager.bx-default-pager a:hover, 93.bx-wrapper .bx-pager.bx-default-pager a.active { 94 background: #000; 95} 96 97/* DIRECTION CONTROLS (NEXT / PREV) */ 98 99.bx-wrapper .bx-prev { 100 left: 10px; 101 background: url(images/controls.png) no-repeat 0 -32px; 102} 103 104.bx-wrapper .bx-next { 105 right: 10px; 106 background: url(images/controls.png) no-repeat -43px -32px; 107} 108 109.bx-wrapper .bx-prev:hover { 110 background-position: 0 0; 111} 112 113.bx-wrapper .bx-next:hover { 114 background-position: -43px 0; 115} 116 117.bx-wrapper .bx-controls-direction a { 118 position: absolute; 119 top: 50%; 120 margin-top: -16px; 121 outline: 0; 122 width: 32px; 123 height: 32px; 124 text-indent: -9999px; 125 z-index: 9999; 126} 127 128.bx-wrapper .bx-controls-direction a.disabled { 129 display: none; 130} 131 132/* AUTO CONTROLS (START / STOP) */ 133 134.bx-wrapper .bx-controls-auto { 135 text-align: center; 136} 137 138.bx-wrapper .bx-controls-auto .bx-start { 139 display: block; 140 text-indent: -9999px; 141 width: 10px; 142 height: 11px; 143 outline: 0; 144 background: url(images/controls.png) -86px -11px no-repeat; 145 margin: 0 3px; 146} 147 148.bx-wrapper .bx-controls-auto .bx-start:hover, 149.bx-wrapper .bx-controls-auto .bx-start.active { 150 background-position: -86px 0; 151} 152 153.bx-wrapper .bx-controls-auto .bx-stop { 154 display: block; 155 text-indent: -9999px; 156 width: 9px; 157 height: 11px; 158 outline: 0; 159 background: url(images/controls.png) -86px -44px no-repeat; 160 margin: 0 3px; 161} 162 163.bx-wrapper .bx-controls-auto .bx-stop:hover, 164.bx-wrapper .bx-controls-auto .bx-stop.active { 165 background-position: -86px -33px; 166} 167 168/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ 169 170.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { 171 text-align: left; 172 width: 80%; 173} 174 175.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { 176 right: 0; 177 width: 35px; 178} 179 180/* IMAGE CAPTIONS */ 181 182.bx-wrapper .bx-caption { 183 position: absolute; 184 bottom: 0; 185 left: 0; 186 background: #666\9; 187 background: rgba(80, 80, 80, 0.75); 188 width: 100%; 189} 190 191.bx-wrapper .bx-caption span { 192 color: #fff; 193 font-family: Arial; 194 display: block; 195 font-size: .85em; 196 padding: 10px; 197}