* { margin: 0; padding: 0; } html { background: #fff; } body { color: #333; font: 14px/24px sans-serif; margin: 0 auto; max-width: 700px; _width: 700px; padding: 0 30px; text-align: center; -webkit-font-smoothing: antialiased; } #wrapper { float: left; width: 100%; margin-bottom: 50px; } h1 { font: 600 24px/32px sans-serif; margin: 50px 0; } .rslides { margin: 0 auto; } .rslides_container { margin-bottom: 50px; position: relative; float: left; width: 100%; } .rslides1_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 50%; left: 0; opacity: 0.7; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 61px; width: 38px; background: transparent url(../img/arrows.gif) no-repeat left top; margin-top: -45px; } .rslides1_nav:active { opacity: 1.0; } .rslides1_nav.next { left: auto; background-position: right top; right: 0; } .rslides2_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 0; left: 0; display: block; background: #fff; /* Fix for IE6-9 */ opacity: 0; filter: alpha(opacity=1); width: 48%; text-indent: -9999px; overflow: hidden; height: 91%; } .rslides2_nav.next { left: auto; right: 0; } .rslides3_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); opacity: 0.6; text-indent: -9999px; overflow: hidden; top: 0; bottom: 0; left: 0; background: #000 url(../img/arrows.gif) no-repeat left 50%; width: 38px; } .rslides3_nav:active { opacity: 1.0; } .rslides3_nav.next { left: auto; background-position: right 50%; right: 0; } .rslides1_nav:focus, .rslides2_nav:focus, .rslides3_nav:focus { outline: none; } .rslides_tabs { margin-top: 10px; text-align: center; } .rslides_tabs li { display: inline; float: none; _float: left; *float: left; margin-right: 5px; } .rslides_tabs a { text-indent: -9999px; overflow: hidden; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #ccc; background: rgba(0,0,0, .2); display: inline-block; _display: block; *display: block; -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); width: 9px; height: 9px; } .rslides_tabs .rslides_here a { background: #222; background: rgba(0,0,0, .8); } @media screen and (max-width: 600px) { .rslides1_nav, .rslides3_nav { background-position: -6px 50%; width: 26px; } .rslides1_nav.next, .rslides3_nav.next { background-position: -44px 50%; } }