"
Team:Imperial/css/carousel
From 2014.igem.org
/* General Demo Style */ a{ color:#000; text-decoration:none; } .clr{ clear:both; }
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:auto;
width:900px;
height:600px;
}
.ca-wrapper{
width:100%;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:300px;
height:100%;
text-align:center;
}
.ca-more{
position: absolute;
bottom: 10px;
right:0px;
padding:4px 15px;
font-weight:bold;
background: #ccbda2;
text-align:center;
color: white;
font-family: "Georgia","Times New Roman",serif;
text-shadow:1px 1px 1px #897c63;
}
.ca-close{
position:absolute;
top:10px;
right:10px;
background:#fff url(
) no-repeat center center;
width:27px;
height:27px;
text-indent:-9000px;
outline:none;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
opacity:0.7;
}
.ca-close:hover{
opacity:1.0;
}
.ca-item-main{
padding:20px;
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
background:#fff;
overflow:hidden;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-icon{
width:233px;
height:189px;
position:relative;
margin:0 auto;
background:transparent url(
) no-repeat center center;
}
.ca-item-2 .ca-icon{
background-image:url(
);
}
.ca-item-3 .ca-icon{
background-image:url(
);
}
.ca-item-4 .ca-icon{
background-image:url(
);
}
.ca-item-5 .ca-icon{
background-image:url(
);
}
.ca-item-6 .ca-icon{
background-image:url(
);
}
.ca-item-7 .ca-icon{
background-image:url(
);
}
.ca-item-8 .ca-icon{
background-image:url(
);
}
.ca-item-9 .ca-icon{
background-image:url(
);
}
.ca-item h3{
font-family: 'Coustard', sans-serif;
text-transform:uppercase;
font-size:20px;
color:#000;
margin-top:30px;
height:85px; text-align:center; text-shadow: 0px 1px 1px #e4ebe9; }
.ca-item .subject { text-transform:none; font-style:italic; margin-top:0px; margin-bottom:10px; font-family: "Georgia","Times New Roman",serif; font-size:16px; }
.ca-item h4{ font-family: "Georgia","Times New Roman",serif; font-style:italic; font-size:12px; text-align:auto; border-left:10px solid #ccc6b0; padding-left:10px; line-height:24px; margin:10px; position:relative; } .ca-item h4 span{ text-indent:0px; display:block; }
.ca-content-wrapper{ background:#ccc6b0; position:absolute; width:0px; /* expands to width of the wrapper minus 1 element */ height:600px; top:5px; text-align:left; z-index:10000; overflow:hidden; } .ca-content{ width:600px; overflow:hidden; } .ca-content-text{ font-size: 14px; font-family: "Georgia","Times New Roman",serif; margin:5px 10px; padding:5px 10px; line-height:24px; } .ca-content-text p{ padding-bottom:0px; }
.ca-content ul{
margin:20px 35px;
height:30px;
}
.ca-content ul li{
float:left;
margin:0px 2px;
}
.ca-content ul li a{
color:#fff;
background:#000;
padding:3px 6px;
font-size:14px;
font-family: "Georgia","Times New Roman",serif;
font-style:italic;
}
.ca-content ul li a:hover{
background:#fff;
color:#000;
text-shadow:none;
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(
) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-10px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-30px;
}
.ca-nav span:hover{
opacity:1.0;
}
/*
* CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */
.jspContainer { overflow: hidden; position: relative; }
.jspPane { position: absolute; }
.jspVerticalBar { position: absolute; top: 0; right: 0; width: 10px; height: 100%; background: #fff;
}
.jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #fff; }
.jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; }
.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { background: #fff; position: relative; }
.jspDrag { background: #000; position: relative; top: 0; left: 0; cursor: pointer; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }
.jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled { cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow { height: 10px; }
.jspHorizontalBar .jspArrow { width: 10px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { background: #eeeef4; float: left; height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
- html .jspCorner
{ margin: 0 -3px 0 0; }
