Team:Calgary/TestPageSliderCSS
From 2013.igem.org
- Slider {
position: relative; width: 100%; }
- Slider .Slides {
width: 100%; height: 100%; background-size: 100%, auto; }
- Slider #Slide0 {
/*background-image: url(TestSlide0.jpg);*/ background: red; }
- Slider #Slide1 {
/*background-image: url(TestSlide1.jpg);*/ background: orange; display: none; }
- Slider #Slide2 {
/*background-image: url(TestSlide2.jpg);*/ background: green; display: none; }
- Slider #Slide3 {
/*background-image: url(TestSlide3.jpg);*/ background: blue; display: none; }
- Slider #Slide4 {
/*background-image: url(TestSlide4.jpg);*/ background: purple; display: none; }
- Slider #BottomLinks {
position: absolute; width: 100%; padding: 0; bottom: 0; background: #787675; text-align: center; opacity: 0.8; filter: alpha(opacity=80); }
- Slider #BottomLinks li {
display: inline-table; list-style: none; height: 100%; color: #FFFFFF; font: 24px Raleway, Arial, san-serif; text-align: center; padding: 15px 20px; }
- Slider #BottomLinks li:hover {
cursor: pointer; text-decoration: underline; }
- Slider .SideBar {
position: absolute; top: 0; width: 90px; z-index: 1; }
- Slider #LeftBar {
left: 0; }
- Slider #RightBar {
right: 0; }
- Slider #LeftArrow {
position: absolute; width: 60px; height: 60px; margin-left: 30px; background: url(ArrowLeft.png) top no-repeat; }
- Slider #RightArrow {
position: absolute; width: 60px; height: 60px; margin-right: 30px; background: url(ArrowRight.png) top no-repeat; }
- Slider #LeftArrow:hover, #Slider #RightArrow:hover {
background-position: bottom; cursor: pointer; }