Template:Team:CHINA CD UESTC/style

<script src="https://2015.igem.org/Team:CHINA_CD_UESTC/gallery_Script?action=raw&ctype=text/javascript" type="text/javascript"></script> <style type="text/css"> /*************gallery 2***********/

1. gal {

 position:relative;
 width:700px;
 height:400px;
 margin:0 auto;
 top:100px;
 background:#000;

}

1. gal:after {

 content:;
 position:absolute;
 bottom:24px;
 right:0;
 left:0;
 width:100%;
 height:1px;
 background:rgba(255,255,255,0.35);
 z-index:3;

}

1. gal ul {list-style-type:none;}

input[class="re_radio"], input[class="re_radio"] + label[class="re_label"] {

 position:absolute;
 bottom:80px;
 display:block;
 width:22px;
 height:22px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 cursor:pointer;

} input[class="re_radio"] {

 opacity:0;
 z-index:200;

} input[value="one"], input[value="one"] + label[class="re_label"] {left:30px;} input[value="two"], input[value="two"] + label[class="re_label"] {left:90px;} input[value="three"], input[value="three"] + label[class="re_label"] {left:150px;} input[value="four"], input[value="four"] + label[class="re_label"] {left:210px;} input[value="five"], input[value="five"] + label[class="re_label"] {left:270px;} input[value="six"], input[value="six"] + label[class="re_label"] {left:330px;} input[value="seven"], input[value="seven"] + label[class="re_label"] {left:390px;} input[value="eight"], input[value="eight"] + label[class="re_label"] {left:470px;}

input[class="re_radio"] + label[class="re_label"] {

 background:rgba(243,243,243,0.55);
 z-index:7;
 -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -webkit-transition:all .3s;
 -moz-transition:all .3s;
 -o-transition:all .3s;
 transition:all .3s;

} [class*="entypo-"]:before {

 position:absolute;
 font-family: 'entypo', sans-serif;

} figure[class*="entypo-"]:before {

 left:10px;
 top:5px;
 font-size:2rem;
 color:rgba(255,255,255,0);
 z-index:1;
 -webkit-transition:color .1s;
 -moz-transition:color .1s;
 -o-transition:color .1s;
 transition:color .1s;

} a[class*="entypo-"]:before {

 top:8px;
 left:9px;
 font-size:1.5rem;
 color:white;

} a:hover[class*="entypo-"]:before {

 color:white;

} figure, figure img, figcaption {

 position:absolute;
 top:0;
 right:0;

} figure {

 bottom:0;
 left:0;
 width:600px;
 height:300px;
 display:block;
 overflow:hidden;

} figure img {

 bottom:0;
 left:0;
 display:block;
 width:700px;
 height:400px;
 z-index:1;
 -webkit-transform:translateX(600px);
 -moz-transform:translateX(600px);
 -ms-transform:translateX(600px);
 -o-transform:translateX(600px);
 transform:translateX(600px);
 -webkit-transition:all .15s .15s, z-index 0s;
 -moz-transition:all .15s .15s, z-index 0s;
 -o-transition:all .15s .15s, z-index 0s;
 transition:all .15s .15s, z-index 0s;

} figcaption {

 display:block;
 width:270px;
 height:300px;
 padding-top:20px;
 background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
 background-size:600px 600px;
 background-repeat:no-repeat;
 background-position:-300px -150px;
 text-align:center;
 z-index:3;
 -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 -webkit-transform:translateX(300px);
 -moz-transform:translateX(300px);
 -ms-transform:translateX(300px);
 -o-transform:translateX(300px);
 transform:translateX(300px);
 -webkit-transition:all .35s;
 -moz-transition:all .35s;
 -o-transition:all .35s;
 transition:all .35s;

}

figcaption nav ul {display:block;padding-top:10px;} figcaption nav ul li {display:inline-block;margin-left:5px;} figcaption nav ul li a {

 position:relative;
 display:block;
 width:40px;
 height:40px;
 background:rgba(255,255,255,0.2);
 text-decoration:none;
 color:white;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 -webkit-transition:all .15s;
 -moz-transition:all .15s;
 -o-transition:all .15s;
 transition:all .15s;

} figcaption nav ul li a:hover {

 background:rgba(255,255,255,0);
 -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);

} figcaption p {

 padding:50px 15px;
 font-family:'Titillium Web', sans-serif;
 font-weight:300;
 color:#333;
 background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
 background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-size:1px 100%;
 background-repeat:no-repeat;
 background-position:50% 0%;

}

input[class="re_radio"]:hover + label[class="re_label"] {

 background:rgba(255,255,255,0.6);

} input[class="re_radio"]:checked + label[class="re_label"] {

 background:rgba(130,195,217,0.9);
 -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);

} input[class="re_radio"]:checked + label[class="re_label"]:before {} input[class="re_radio"]:checked ~ figure img {

 z-index:2;
 -webkit-transform:translatex(0px);
 -moz-transform:translatex(0px);
 -ms-transform:translatex(0px);
 -o-transform:translatex(0px);
 transform:translatex(0px);
 -webkit-transition:all .15s, z-index 0s;
 -moz-transition:all .15s, z-index 0s;
 -o-transition:all .15s, z-index 0s;
 transition:all .15s, z-index 0s;

} input[class="re_radio"]:checked ~ figure[class*="entypo-"]:before {

 z-index:3;
 color:rgba(255,255,255,0.5);
 -webkit-transition:color .5s;
 -moz-transition:color .5s;
 -o-transition:color .5s;
 transition:color .5s;

} input[class="re_radio"]:checked ~ figure figcaption {

 z-index:8;
 -webkit-transform:translateX(0px);
 -moz-transform:translateX(0px);
 -ms-transform:translateX(0px);
 -o-transform:translateX(0px);
 transform:translateX(0px);
 -webkit-transition:all .35s, .7s;
 -moz-transition:all .35s, .7s;
 -o-transition:all .35s, .7s;
 transition:all .35s, .7s;

} .entypo-forward { margin: 0; width: 100%; height: 100%; border: 20px solid #FDFDFD;

} .entypo-forward p { color: #000; font-size: 20px; font-family: 'Microsoft YaHei' }

/********end of gallery 2*********/ </style>