Team:Calgary/TestPageSliderCSS

From 2013.igem.org

Revision as of 17:38, 16 August 2013 by Wkeithvan (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
  1. Slider {

position: relative; width: 100%; }

  1. Slider .Slides {

width: 100%; height: 100%; background-size: 100%, auto; }

  1. Slider #Slide0 {

/*background-image: url(TestSlide0.jpg);*/ background: red; }

  1. Slider #Slide1 {

/*background-image: url(TestSlide1.jpg);*/ background: orange; display: none; }

  1. Slider #Slide2 {

/*background-image: url(TestSlide2.jpg);*/ background: green; display: none; }

  1. Slider #Slide3 {

/*background-image: url(TestSlide3.jpg);*/ background: blue; display: none; }

  1. Slider #Slide4 {

/*background-image: url(TestSlide4.jpg);*/ background: purple; display: none; }

  1. Slider #BottomLinks {

position: absolute; width: 100%; padding: 0; bottom: 0; background: #787675; text-align: center; opacity: 0.8; filter: alpha(opacity=80); }

  1. 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; }

  1. Slider #BottomLinks li:hover {

cursor: pointer; text-decoration: underline; }

  1. Slider .SideBar {

position: absolute; top: 0; width: 90px; z-index: 1; }

  1. Slider #LeftBar {

left: 0; }

  1. Slider #RightBar {

right: 0; }

  1. Slider #LeftArrow {

position: absolute; width: 60px; height: 60px; margin-left: 30px; background: url(ArrowLeft.png) top no-repeat; }

  1. Slider #RightArrow {

position: absolute; width: 60px; height: 60px; margin-right: 30px; background: url(ArrowRight.png) top no-repeat; }

  1. Slider #LeftArrow:hover, #Slider #RightArrow:hover {

background-position: bottom; cursor: pointer; }