Team:Newcastle/CSS/carousel
From 2013.igem.org
- carousel{
margin-top:10px;
}
- 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; }
- left-arrow,
- right-arrow{
z-index:501; position:relative; float:left; top:140px; }
- left-arrow:hover,
- right-arrow:hover{
cursor:pointer;
}
- left-arrow{
right:20px;
/*box-shadow:15px 0px 15px -5px #000000;*/ }
- right-arrow{
left:870px; /*box-shadow:-15px 0px 15px -5px #000000;*/ }
.full{
position:absolute; width:100%; height:100%;
}
.full img{ width:938px; height:280px; }
- carousel-1{
left:0px; background-color:#ac2014;
}
- carousel-2{
background-color:#ebcfa1;
}
- carousel-3{
background-color:#00a;
}
- carousel-4{
background-color:#0a0;
}
- carousel-selector{
position:relative; margin:0px; top:-30px; left:-20px; z-index:800;
}
- 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;
}