Team:Newcastle/CSS/carousel

From 2013.igem.org

  1. carousel{
   margin-top:10px;

}

  1. wrapper{
   width:938px;
   overflow:hidden;
   position:relative;
   height:280px;

/*border-top:solid 10px #0563af; border-left:solid 10px #0563af; border-right:solid 10px #00467F; border-bottom:solid 10px #00467F;*/ margin:0px auto;

   z-index:500;
   background-color:#000000;

}

.circular{

width:35px; height:35px; border-radius:30px; border:solid 5px #00467F; text-align:center; vertical-align:middle; background-color:#002D42; /* IE10 Consumer Preview */ background-image: -ms-radial-gradient(center, circle closest-corner, #FFFFFF 0%, #002D42 100%);

/* Mozilla Firefox */ background-image: -moz-radial-gradient(center, circle closest-corner, #FFFFFF 0%, #002D42 100%);

/* Opera */ background-image: -o-radial-gradient(center, circle closest-corner, #FFFFFF 0%, #002D42 100%);

/* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #002D42));

/* Webkit (Chrome 11+) */ background-image: -webkit-radial-gradient(center, circle closest-corner, #FFFFFF 0%, #002D42 100%);

/* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle closest-corner at center, #FFFFFF 0%, #002D42 100%); }

.circular img{ margin:auto; width:20px; height:20px; }

.arrow-right { margin:7px 0px 0px 12px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #0563af; }

.arrow-left { margin:7px 0px 0px 7px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 15px solid #0563af; }

  1. left-arrow,
  2. right-arrow{

z-index:501; position:relative; float:left; top:140px; }

  1. left-arrow:hover,
  2. right-arrow:hover{
   cursor:pointer;

}

  1. left-arrow{
   right:20px;

/*box-shadow:15px 0px 15px -5px #000000;*/ }

  1. right-arrow{

left:870px; /*box-shadow:-15px 0px 15px -5px #000000;*/ }

.full{

   position:absolute;
   width:100%;
   height:100%;

}

.full img{ width:938px; height:280px; }

  1. carousel-1{
   left:0px;
   background-color:#ac2014;

}

  1. carousel-2{
   background-color:#ebcfa1;

}

  1. carousel-3{
   background-color:#00a;

}

  1. carousel-4{
   background-color:#0a0;

}

  1. carousel-selector{
   position:relative;
   margin:0px;
   top:-30px;
   left:-20px;
   z-index:800;

}

  1. carousel-selector-highlight{
   position:relative;
   width:15px;  
   height:15px;
   border:solid 4px #0563af;
   float:left;
   top:4px;
   z-index:100;
   border-radius:5px;

}

.clear{

   clear:both;

}