Template:Team:Harvard BioDesign/CSS

From 2014.igem.org

(Difference between revisions)
Line 9,718: Line 9,718:
   content: "\f196";
   content: "\f196";
}
}
 +
 +
@import url(//fonts.googleapis.com/css?family=Jockey+One);
 +
/**************************
 +
*
 +
* GENERAL
 +
*
 +
**************************/
 +
.camera_wrap img,
 +
.camera_wrap ol, .camera_wrap ul, .camera_wrap li,
 +
.camera_wrap table, .camera_wrap tbody, .camera_wrap tfoot, .camera_wrap thead, .camera_wrap tr, .camera_wrap th, .camera_wrap td
 +
.camera_thumbs_wrap a, .camera_thumbs_wrap img,
 +
.camera_thumbs_wrap ol, .camera_thumbs_wrap ul, .camera_thumbs_wrap li,
 +
.camera_thumbs_wrap table, .camera_thumbs_wrap tbody, .camera_thumbs_wrap tfoot, .camera_thumbs_wrap thead, .camera_thumbs_wrap tr, .camera_thumbs_wrap th, .camera_thumbs_wrap td {
 +
background: none;
 +
border: 0;
 +
font: inherit;
 +
font-size: 100%;
 +
margin: 0;
 +
padding: 0;
 +
vertical-align: baseline;
 +
list-style: none;
 +
    line-height: ;
 +
}
 +
.camera_wrap {
 +
display: none;
 +
float: none;
 +
position: relative;
 +
z-index: 1;
 +
margin: 0 !important;
 +
    padding-bottom:45px;
 +
    background: #fff;
 +
}
 +
.camera_wrap img {
 +
max-width: none !important;
 +
    overflow: hidden;
 +
}
 +
.camera_fakehover {
 +
height: 100%;
 +
position: relative;
 +
width: 100%;
 +
/*z-index: 1;*/
 +
}
 +
.camera_src {
 +
display: none;
 +
}
 +
.cameraCont, .cameraContents {
 +
height: 100%;
 +
position: relative;
 +
width:100%;
 +
/*z-index: 1;*/
 +
    display: inline-block;
 +
}
 +
.cameraSlide {
 +
bottom: 0;
 +
left: 0;
 +
position: absolute;
 +
right: 0;
 +
top: 0;
 +
width: 100%;
 +
}
 +
.cameraContent {
 +
bottom: 0;
 +
display: none;
 +
left: 0;
 +
position: absolute;
 +
right: 0;
 +
top: 0;
 +
}
 +
.camera_target {
 +
bottom: 0;
 +
height: 100%;
 +
left: 0;
 +
overflow: hidden;
 +
position: absolute;
 +
right: 0;
 +
text-align: left;
 +
top: 0;
 +
width: 100%;
 +
z-index: 0;
 +
}
 +
.camera_overlayer {
 +
bottom: 0;
 +
height: 100%;
 +
left: 0;
 +
overflow: hidden;
 +
position: absolute;
 +
right: 0;
 +
top: 0;
 +
width: 100%;
 +
z-index: 0;
 +
}
 +
.camera_target_content {
 +
bottom: 0;
 +
left: 0;
 +
overflow: visible;
 +
position: absolute;
 +
right: 0;
 +
top: 0;
 +
/*z-index: 2;*/
 +
}
 +
.camera_target_content .camera_link {
 +
display: block;
 +
height: 100%;
 +
text-decoration: none;
 +
}
 +
.camera_loader {
 +
background:#efede0 url(../img/camera-loader.gif) no-repeat center;
 +
height: 36px;
 +
    width: 36px;
 +
    top: 50%;
 +
left: 50%;
 +
overflow: hidden;
 +
position: absolute;
 +
margin: -18px 0 0 -18px;
 +
z-index: 3;
 +
    border-radius:36px;
 +
}
 +
.camera_loader img {
 +
    border-radius:36px;
 +
}
 +
.camera_clear {
 +
display: block;
 +
clear: both;
 +
}
 +
.showIt {
 +
display: none;
 +
}
 +
.camera_clear {
 +
clear: both;
 +
display: block;
 +
height: 1px;
 +
margin: 0px;
 +
position: relative;
 +
}
 +
.slider{
 +
position: relative;
 +
    z-index:0;
 +
    top: 0;
 +
}
 +
.camera_pag {
 +
position: absolute;
 +
z-index: 10;
 +
bottom:9px;
 +
    width: 100%;
 +
padding:0;
 +
    text-align:center;
 +
display:inline-block;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
    left:0;
 +
}
 +
.camera-caption {
 +
position: absolute;
 +
top:50%;
 +
    margin-top:-148px;
 +
    width: 100%;
 +
display: block;
 +
    text-align:center;
 +
    padding:0;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
.camera-caption .title {
 +
    font:bold 60px/60px 'Arial Black';
 +
    color:#fff;
 +
    text-transform:uppercase;
 +
    margin-bottom:60px;
 +
}
 +
.camera-caption .description {
 +
    font:bold 72px/65px 'Arial';
 +
    color:#fff;
 +
    text-transform:uppercase;
 +
    margin-bottom:0;
 +
}
 +
.camera_prev span, .camera_next span{
 +
position: absolute;
 +
display: block;
 +
width:33px;
 +
height:33px;
 +
top:50%;
 +
cursor: pointer;
 +
z-index: 1000;
 +
    margin-top:-15px;
 +
}
 +
.camera_prev span{
 +
left:15%;
 +
    margin-right: 50px;
 +
background:url(../img/prev.png) no-repeat;
 +
}
 +
.camera_prev span:hover{
 +
    opacity: 0.7;
 +
    filter: alpha(opacity=70);
 +
}
 +
.camera_next span{
 +
right:15%;
 +
background:url(../img/next.png) 0 top no-repeat;
 +
}
 +
.camera_next span:hover{
 +
    opacity: 0.7;
 +
    filter: alpha(opacity=70);
 +
}
 +
.camera_pag_ul {
 +
    display: inline-block;
 +
}
 +
.camera_pag_ul li{
 +
text-indent: -100px;
 +
    float:left;
 +
    margin:0 0 0 3px;
 +
}
 +
.camera_pag_ul li:first-child {
 +
    margin-left:0;
 +
}
 +
.camera_pag_ul li>span{
 +
cursor: pointer;
 +
display: block;
 +
width:18px;
 +
height:18px;
 +
    border-radius:100%;
 +
    background:none;
 +
text-indent: -100px;
 +
overflow: hidden;
 +
    background:url(../img/pagination.png) 0 top no-repeat;
 +
    -webkit-transition: all 0.25s ease;
 +
    transition: all 0.25s ease;
 +
}
 +
.camera_pag_ul li>span>span{
 +
    display:none;
 +
}
 +
.camera_pag_ul li.cameracurrent span, .camera_pag_ul li:hover span{
 +
    background:url(../img/pagination.png) 0 bottom no-repeat;
 +
    -webkit-transition: all 0.25s ease;
 +
    transition: all 0.25s ease;
 +
}
 +
/*---------------------------------------------------------------------------------------------------------------------------*/
 +
@media (min-width: 1220px) {
 +
   
 +
}
 +
/*---------------------------------------------------------------------------------------------------------------------------*/
 +
@media (min-width: 992px) and (max-width: 1219px){
 +
}
 +
/*---------------------------------------------------------------------------------------------------------------------------*/
 +
@media (min-width: 768px) and (max-width: 991px) {
 +
.camera-caption {
 +
    margin-top:-65px;
 +
}
 +
.camera-caption .title {
 +
    font-size: 25px;
 +
    line-height: 25px;
 +
    margin-bottom:15px;
 +
}
 +
.camera-caption .description {
 +
    font-size: 50px;
 +
    line-height: 45px;
 +
}
 +
.camera_next span {
 +
    right: 15px;
 +
}
 +
.camera_prev span {
 +
    left: 15px;
 +
}
 +
}
 +
/*---------------------------------------------------------------------------------------------------------------------------*/
 +
@media (max-width: 767px) {
 +
.camera-caption {
 +
    margin-top:-65px;
 +
}
 +
.camera-caption .title {
 +
    font-size: 25px;
 +
    line-height: 25px;
 +
    margin-bottom:15px;
 +
}
 +
.camera-caption .description {
 +
    font-size: 50px;
 +
    line-height: 45px;
 +
}
 +
.camera_next span {
 +
    right: 15px;
 +
}
 +
.camera_prev span {
 +
    left: 15px;
 +
}
 +
}
 +
/*---------------------------------------------------------------------------------------------------------------------------*/
 +
@media (max-width: 626px) {
 +
.camera-caption {
 +
    margin-top:-47px;
 +
}
 +
.camera-caption .title {
 +
    font-size: 20px;
 +
    line-height: 20px;
 +
}
 +
.camera-caption .description {
 +
    font-size: 30px;
 +
    line-height: 30px;
 +
}
 +
}
 +
/*---------------------------------------------------------------------------------------------------------------------------*/
 +
@media (max-width: 560px) {
 +
}
 +
/*---------------------------------------------------------------------------------------------------------------------------*/
 +
@media (max-width: 480px) {
 +
.camera-caption {
 +
    margin-top:-35px;
 +
}
 +
.camera-caption .title {
 +
    font-size: 17px;
 +
    line-height: 18px;
 +
}
 +
.camera-caption .description {
 +
    font-size: 17px;
 +
    line-height: 18px;
 +
}
 +
}
 +
/*---------------------------------------------------------------------------------------------------------------------------*/
 +
@media (max-width: 320px) {
 +
}
 +

Revision as of 20:07, 17 October 2014

Retrieved from "http://2014.igem.org/Template:Team:Harvard_BioDesign/CSS"