/* AnythingSlider v1.7+ Default (base) theme By Chris Coyier: http://css-tricks.com with major improvements by Doug Neiner: http://pixelgraphics.us/ based on work by Remy Sharp: http://jqueryfordesigners.com/ */ /***************************** SET DEFAULT DIMENSIONS HERE *****************************/ /* change the ID to match your slider */ #slider { width: 700px; height: 390px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; } /***************** SET COLORS HERE *****************/ /**** Default state (no keyboard focus) ****/ /* start-stop button, stopped, default state */ div.anythingSlider .start-stop { background-color: #040; color: #fff; } /* start-stop button, playing, default state */ div.anythingSlider .start-stop.playing { background-color: #800; } /* start-stop button, default hovered text color (when visible) */ div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { color: #ddd; } /**** Active State (slider has keyboard focus) ****/ /* start-stop button, stopped, active state */ div.anythingSlider .start-stop { background-color: #080; color: #fff; } /* start-stop button, playing, active state */ div.anythingSlider .start-stop.playing { background-color: #d00; } /* start-stop button, active slider hovered text color (when visible) */ div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { color: #fff; } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */ div.anythingSlider { display: block; margin: 0 auto; overflow: visible !important; /* needed for Opera and Safari */ position: relative; padding: 0 45px 28px 45px; float: right; margin: 0 10px 0 10px; } /* anythingSlider viewport window */ div.anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } div.anythingSlider .anythingWindow p { font-family: Verdana,Geneva,sans-serif !important; font-weight: normal !important; font-size: 12px !important; color: #3f3f3f !important; line-height: 16px !important; margin-top: 0 !important; } div.anythingSlider .anythingWindow h2 { font-family: Verdana,Geneva,sans-serif; font-weight: bold; font-size: 22px; color: #110941; line-height: 26px; margin-bottom: 14px; margin-top: 0; } div.anythingSlider .anythingWindow h2 span { color: #ff680a; } /* anythingSlider base (original element) */ .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* all panels inside the slider */ /*.anythingBase .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; }*/ .anythingBase .panel.vertical { float: none; } .anythingWindow .panel{display:none !important;} .anythingWindow .activePage{display:block !important;} /*.anythingBase .panel { filter: alpha(opacity=00); opacity: 0; } .anythingBase .panel.activePage { filter: alpha(opacity=99); opacity: 1; }*/ /* make sure active panel is visible */ /* Navigation Arrows */ div.anythingSlider .arrow { top: 50%; position: absolute; display: block; } div.anythingSlider .arrow a { display: block; height: 52px; margin: -70px 0 0 0; /* half height of image */ width: 15px; text-align: center; outline: 0; } /* hide text, target the span so IE7 doesn't text-indent the link */ div.anythingSlider .arrow a span { display: block; visibility: hidden; } /* back arrow */ div.anythingSlider .back { left: 0; } div.anythingSlider .back a { background: url('img/slider-arrow-left.png') no-repeat; } div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { opacity: 0.9;filter: alpha(opacity = 90); } div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ /* forward arrow */ div.anythingSlider .forward { right: 0; } div.anythingSlider .forward a { background: url('img/slider-arrow-right.png') no-repeat; } div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { opacity: 0.9;filter: alpha(opacity = 90); } div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ /* Navigation Links */ div.anythingSlider .anythingControls { outline: 0; display: none; left: -250px; position: absolute; top: 0; width: 240px; } div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; width: 100%; } div.anythingSlider .anythingControls ul li { display: table; width: 240px; height: 38px; position: relative; margin-bottom: 1px; } div.anythingSlider .anythingControls ul a { text-align: left; padding-left: 7px; padding-right: 17px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Verdana,Geneva,sans-serif; font-weight: normal; font-size: 12px; line-height: 15px; color: #3f3f3f; background: #f1f1f1 url('img/slider-control-nav-arrows.png') no-repeat 229px 0; text-decoration: none; display: table-cell; height: 100%; vertical-align: middle; border-bottom: 3px solid #e5e5e5; } div.anythingSlider .anythingControls ul a:hover, div.anythingSlider .anythingControls ul a.cur{ background-color: #110941; background-position: 229px -38px; color: #fff; border-bottom: 3px solid #014051; } /* Navigation size window */ div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; } /* slider autoplay right-to-left, reverse order of nav links to look better */ div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ div.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ div.anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } /* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */ /* Autoplay Start/Stop button */ div.anythingSlider .start-stop { background-image: url('img/default.png'); background-position: center -288px; background-repeat: repeat-x; padding: 2px 5px; width: 40px; text-align: center; text-decoration: none; float: right; z-index: 100; outline: 0; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } /* hide cell shading on hover - makes the button appear to come forward */ div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; } /* probably not necessary, but added just in case */ div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop { transition-duration: 0; -o-transition-duration: 0; -moz-transition-duration: 0; -webkit-transition-duration: 0; }