Difference between revisions of "Team:CHINA CD UESTC/Gallery"

Line 1: Line 1:
−
{{Template:Team:CHINA_CD_UESTC/menu}}
+
/* General Slides */
−
<!DOCTYPE html>
+
#RightContent {
−
<html >
+
float: right;
−
<head>
+
position: fixed;
−
    <script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script>
+
left: 260px;
 +
top: 0px;
 +
right: 0;
 +
height:100%;
 +
overflow-y: scroll;
 +
transition: all 200ms ease-out;
 +
transform: translate3d(0, 0, 0);
 +
z-index:5;
 +
}
 +
.transparent_class  {
 +
border-radius: 0px;
 +
position: absolute;
 +
top: 350px;
 +
left: 50px;
 +
right: 50px;
 +
background-color: #0072E3;
 +
color:#000000;
 +
filter:alpha(opacity=80);
 +
-moz-opacity:0.8;
 +
-khtml-opacity: 0.8;
 +
opacity: 0.8;
 +
}
 +
.blockWords{
 +
font-family:Arial, Helvetica, sans-serif;
 +
font-size: 19px;
 +
padding: 15px;
 +
color: #ffffff;
 +
}
  
−
    <link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" />
+
#HZpic {
−
</head>
+
background-position:0 0 !important;
−
    <style type="text/css">
+
width:100%;
−
/*************************************************
+
padding:10px 40px 20px 40px;
−
                whole right section
+
margin-top:20px;
−
                https://static.igem.org/mediawiki/2015/4/44/CHINA_CD_UESTC_TEAMbg.jpg
+
}
−
                    background-size: 180px;
+
#content{
 +
height:90px;
 +
padding: 0px 0px 0px 0px;
 +
border-left: 0px solid #444444;
 +
border-right: 0px solid #444444;
 +
background:none;
 +
}
 +
#title {
 +
position: fixed;
 +
font-size: 80px;
 +
left:260px;
 +
z-index: 5;
  
−
***********************************************/
+
}
−
#RightSection {
+
−
    position: fixed;
+
−
    left: 260px;
+
−
    top: 0;
+
−
    right: 0;
+
−
    height:100%;
+
−
    background:#F0F0F0;
+
−
    background-image:url("https://static.igem.org/mediawiki/2015/4/44/CHINA_CD_UESTC_TEAMbg.jpg");
+
−
    overflow-y: scroll;
+
−
    background-repeat: repeat; 
+
−
    background-size: 180px;
+
  
−
    transition: all 200ms ease-out;
+
#firstTitle {
−
    transform: translate3d(0, 0, 0);
+
font-family: Arial, Helvetica, sans-serif;
−
    z-index:1;
+
position: fixed;
 +
width:1000px;
 +
margin-top:0;
 +
margin-bottom:0;
 +
top: 60px;
 +
font-size: 80px;
 +
color: #FFFFAA;
 +
overflow: hidden;
  
 
}
 
}
 +
#firstTitle p {
 +
text-align: center;
 +
    font-size: 80px;
 +
}
 +
 +
.transparent_class  {
 +
border-radius: 0px;
 +
position: absolute;
 +
top: 350px;
 +
width:1000px;
 +
left: 50px;
 +
right: 50px;
 +
background-color: #0072E3;
 +
color:#000000;
 +
filter:alpha(opacity=80);
 +
-moz-opacity:0.8;
 +
-khtml-opacity: 0.8;
 +
opacity: 0.8;
 +
}
 +
 
#RightContentText {
 
#RightContentText {
−
    background:rgba(35, 37, 35, 0.26)
+
position: absolute;
 +
top: 510px;
 +
width: 1048px;
 +
left:28px;
 +
right:8px;
 +
background:#FFFFFF;
 +
color: #000000;
 +
transition: all 200ms ease-out;
 +
transform: translate3d(0, 0, 0);
 
}
 
}
−
.gallery-container ul {
+
 
−
    list-style: none;
+
 
 +
.slide{
 +
background-attachment: fixed;
 +
width:100%;
 +
height:100%;
 +
position: relative;
 +
padding:0 10px 0 10px;
 +
margin: 0 10px 0 10px;
 +
z-index:12;
 +
overflow:hidden;
 
}
 
}
  
−
</style>
 
−
<body id="homeIndexBody">
 
−
    <div id="RightSection"></div>
 
  
−
    <div id="title">
+
#RightContentText h2 {
−
        <div id="firstTitle">
+
display:block;
−
            <p>
+
margin:0 0 23px;
−
                <B>GALLERY</B>
+
padding:0;
−
            </p>
+
text-transform:none;
−
        </div>
+
text-align:left;
−
     </div>
+
font-style:normal;
 +
border-bottom:1px solid #e0e0e0;
 +
font-family: Helvetica ;
 +
font-size: 30px;
 +
line-height: 82px;
 +
color:#343434;
 +
font-weight: 300;
 +
}
 +
 
 +
#RightContentText h3 {
 +
margin:0;
 +
padding:40px 0 32px 0;
 +
text-align:center;
 +
font-family: Helvetica ;
 +
font-weight:800;
 +
font-size:32px;
 +
font-style:normal;
 +
line-height:36px;
 +
}
 +
 
 +
 
 +
#RightContentText h4 {
 +
margin:0;
 +
padding:0 0 15px;
 +
text-transform:none;
 +
text-align:left;
 +
font-family: Helvetica ;
 +
font-weight:300;
 +
font-size:32px;
 +
font-style:normal;
 +
line-height:36px;
 +
color:#222;
 +
}
 +
 
 +
img.icon_img {
 +
float:left;
 +
margin-right:20px;
 +
margin-top:20px;
 +
margin-bottom:25px;
 +
}
 +
 
 +
.effect_2 {
 +
background:url(../images/effect_2.png) repeat left top;
 +
position:relative;
 +
top:0;
 +
bottom:-57px;
 +
height:100%;
 +
z-index:999 !important;
 +
}
 +
 
 +
/*________________________Judging__________________*/
 +
#bronze h3{
 +
background-image: url();
 +
background-repeat: no-repeat;
 +
text-decoration:underline;
 +
color: #e8b77c;
 +
}
 +
#silver h3{
 +
background-image: url();
 +
background-repeat: no-repeat;
 +
text-decoration:underline;
 +
color: #b4c8cb;
 +
}
 +
#gold h3{
 +
background-image: url();
 +
background-repeat: no-repeat;
 +
text-decoration:underline;
 +
color: #fbca23;
 +
}
 +
 
 +
.req_list{
 +
width: 90%;
 +
}
 +
.req_list h1{
 +
background:url(https://static.igem.org/mediawiki/2015/4/4e/CHINA_CD_UESTC_YesIcon.png) no-repeat;
 +
background-size: 6%;
 +
margin:0;
 +
padding:10px 0 0px 50px;
 +
margin-left: 50px;
 +
font-family: Helvetica ;
 +
font-weight:800;
 +
font-size:20px;
 +
font-style:normal;
 +
line-height:36px;
 +
}
 +
.req_list p{
 +
margin:0;
 +
margin-left: 120px;
 +
font-family: 'Microsoft Yahei' ;
 +
font-weight:500;
 +
font-size:15px;
 +
font-style:normal;
 +
line-height:26px;
 +
}
 +
/* ____________ Slide 2 标准文本_______________ */
 +
 
 +
#slide2 {
 +
width:100%;
 +
padding:20px 0 20px;
 +
}
 +
 
 +
.det_inf {margin-bottom:24px;
 +
}
 +
.det_inf li {margin-bottom:10px;
 +
}
 +
.det_inf li a  {
 +
color:#929292;
 +
}
 +
.det_inf li a:hover {
 +
color:#f14833;
 +
}
 +
 
 +
 
 +
 
 +
/* ________________ //Slide 2 ________________ */
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* ______________ Slide 4  service旋转四列__________ */
 +
 
 +
#slide4 {
 +
width:100%;
 +
padding:86px 0 69px;
 +
}
 +
#slide4 h2 {
 +
color:#b8b8b8;
 +
border-bottom:1px solid #3b3b3b;
 +
}
 +
 
 +
 
 +
/* ____________ SERVICES_BLOCK ___________ */
 +
a.servc_block {
 +
display:block;
 +
position:relative;
 +
text-align:center;
 +
color:#6f6f6f;
 +
}
 +
 
 +
.icon_bord {
 +
position:relative;
 +
z-index:10;
 +
top:0;
 +
left:50%;
 +
margin-left:-51px;
 +
width:102px;
 +
height:116px;
 +
}
 +
 
 +
.icon1, .icon1_h {
 +
position:absolute;
 +
z-index:1;
 +
top:0;
 +
left:0;
 +
}
 +
 
 +
.servc_block .icon1 {
 +
transition: all 0.5s ease-out;
 +
opacity: 1;
 +
}
 +
.servc_block:hover .icon1 {
 +
transform: rotate(720deg) scale(0);
 +
opacity: 0;
 +
}
 +
 
 +
.servc_block .icon1_h {
 +
transition: all 0.5s ease-out;
 +
transform: rotate(720deg) scale(0);
 +
opacity: 0;
 +
}
 +
.servc_block:hover .icon1_h {
 +
transform: rotate(720deg) scale(1);
 +
opacity: 1;
 +
transition-delay: 0.4s;
 +
}
 +
 
 +
.servc_block p {
 +
font-family: Helvetica ;
 +
font-weight:300;
 +
font-size:20px;
 +
line-height:22px;
 +
color:#a3a3a3;
 +
transition: all 0.2s ease-in-out;
 +
-moz-transition: all 0.2s ease-in-out;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
-o-transition: all 0.2s ease-in-out;
 +
}
 +
.servc_block:hover p {
 +
color:#f14833;
 +
transition-delay: 0.7s;
 +
}
 +
 
 +
 
 +
/* ____________ SERVICES_BLOCK ___________ */
 +
 
 +
/* _______________ //Slide 4 _____________ */
 +
 
 +
 
 +
 
 +
/* _______________ Slide 6 时间轴_________ */
 +
 
 +
#slide6 {
 +
background:url(../images/slide6_bg.jpg) repeat left top;
 +
width:100%;
 +
padding:30px 0 30px;
 +
}
 +
 
 +
#slide6 h2 {color:#222;
 +
}
 +
 
 +
/* ______________ exhib_block _________ */
 +
.exhib_block {position:relative;}
 +
.exhib_block .fleft {margin-left:1px;}
 +
.exhib_line_center {
 +
position:absolute;
 +
left:50%;
 +
top:12px;
 +
width:1px;
 +
height:100%;
 +
background:#c3c3c3;
 +
}
 +
.exhib_block p {
 +
padding-bottom:9px;
 +
font-family: Helvetica ;
 +
font-weight:400;
 +
font-size:20px;
 +
color:#343434;
 +
transition: all 0.2s ease-in-out;
 +
-moz-transition: all 0.2s ease-in-out;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
-o-transition: all 0.2s ease-in-out;
 +
}
 +
.exhib_cont:hover p {color:#f14833;
 +
}
 +
 
 +
.exhib_p_top {margin-left:80px;
 +
}
 +
 
 +
.exhib_cont {
 +
position:relative;
 +
width:420px;
 +
margin-top:30px;
 +
padding:13px 20px 9px;
 +
background:#fff;
 +
color:#8d8d8d;
 +
border:1px solid #dedede;
 +
border-radius:12px;
 +
transition: all 0.2s ease-in-out;
 +
-moz-transition: all 0.2s ease-in-out;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
-o-transition: all 0.2s ease-in-out;
 +
}
 +
 
 +
 
 +
.exhib_block .fright {
 +
position: relative;
 +
left:52%;
 +
margin-top:50px;
 +
}
 +
 
 +
 
 +
.exhib_cont:hover {
 +
-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.15);
 +
-moz-box-shadow: 0 0 16px rgba(0,0,0,0.15);
 +
box-shadow: 0 0 16px rgba(0,0,0,0.15);
 +
}
 +
 
 +
.exhib_date_right, .exhib_date_left, .exhib_date_top {
 +
display:block;
 +
position:absolute;
 +
font-family: Helvetica ;
 +
font-weight:300;
 +
font-size:26px;
 +
line-height:20px;
 +
color:#91B517;
 +
transition: all 0.2s ease-in-out;
 +
-moz-transition: all 0.2s ease-in-out;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
-o-transition: all 0.2s ease-in-out;
 +
}
 +
.exhib_date_top {
 +
left:49.5%;
 +
top:0;
 +
width:95px;
 +
text-align:right;
 +
}
 +
 
 +
.exhib_date_left {
 +
left:-220px;
 +
top:27px;
 +
}
 +
.exhib_date_right {
 +
right:-230px;
 +
top:27px;
 +
text-align:right;
 +
}
 +
.exhib_cont:hover .exhib_date_right, .exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_top {font-size:30px;
 +
}
 +
 
 +
 
 +
 
 +
/* _____________ //exhib_block _______________ */
 +
 
 +
 
 +
 
 +
/* ________________ //Slide 6 _________________ */
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* _______________ Slide 12 左图右文______________ */
 +
 
 +
#slide12 {
 +
background:url(..) repeat left top;
 +
background-position:0 0 !important;
 +
width:100%;
 +
padding:10px 0 20px;
 +
margin-top:20px;
 +
}
 +
 
 +
#slide12 h2 {color:#OOOOOO;
 +
font-size:50px !important;
 +
}
 +
 
 +
#slide12 p {color:#888888;
 +
}
 +
#slide12 .foto {
 +
float:left;
 +
margin:0 20px 20px 0;
 +
}
 +
 
 +
#slide12 h5 {
 +
margin:50px 0 0 0;
 +
padding-bottom:8px;
 +
text-transform:none;
 +
font-family: Helvetica ;
 +
font-size: 32px;
 +
line-height: 31px;
 +
font-weight: 300;
 +
color:#acacac;
 +
}
 +
#slide12 h6 {
 +
margin:0 0 0 0;
 +
padding-bottom:2px;
 +
text-transform:none;
 +
font-family: Helvetica ;
 +
font-size: 20px;
 +
line-height: 23px;
 +
font-weight: 300;
 +
color:#acacac;
 +
}
 +
.client_foto {
 +
float:left;
 +
position:relative;
 +
margin:0 5px 10px 0;
 +
height:460px;
 +
width:400px;
 +
}
 +
.client_foto img {
 +
position:absolute;
 +
left:0;
 +
top:0;
 +
z-index:10;
 +
width: 90%;
 +
}
 +
.foto {z-index:5 !important;}
 +
 
 +
.contact_det,
 +
.contact_det a {
 +
color:#888888;
 +
line-height:26px;
 +
}
 +
.contact_det a:hover {color:#f14833;}
 +
 
 +
 
 +
 
 +
/* ____________ //Slide 12 ________________ */
 +
 
 +
 
 +
/*_____________gallery___________________*/
 +
@font-face {
 +
font-family: 'BebasNeueRegular';
 +
src: url('fonts/BebasNeue-webfont.eot');
 +
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
 +
url('fonts/BebasNeue-webfont.woff') format('woff'),
 +
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
 +
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
 +
font-weight: normal;
 +
font-style: normal;
 +
}
 +
 
 +
 
 +
.clr{
 +
clear: both;
 +
}
 +
 
 +
 
 +
.cr-gallery{
 +
width: 600px;
 +
height: 400px;
 +
position: relative;
 +
margin: 0 auto;
 +
overflow: hidden;
 +
border: 20px solid #fff;
 +
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 +
}
 +
.cr-gallery label{
 +
font-style: italic;
 +
width: 150px;
 +
height: 30px;
 +
cursor: pointer;
 +
color: #fff;
 +
line-height: 32px;
 +
font-size: 24px;
 +
float:left;
 +
position: relative;
 +
margin-top:350px;
 +
z-index: 1000;
 +
}
 +
.cr-gallery label:before{
 +
content:'';
 +
width: 34px;
 +
height: 34px;
 +
background: rgba(130,195,217,0.9);
 +
position: absolute;
 +
left: 50%;
 +
margin-left: -17px;
 +
border-radius: 50%;
 +
box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
 +
z-index:-1;
 +
}
 +
.cr-gallery label:after{
 +
width: 1px;
 +
height: 400px;
 +
content: '';
 +
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
 +
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 +
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 +
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 +
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
 +
position: absolute;
 +
bottom: -20px;
 +
right: 0px;
 +
}
 +
.cr-gallery label.cr-label-img-4:after{
 +
width: 0px;
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1,
 +
.cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2,
 +
.cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3,
 +
.cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4{
 +
color: #68abc2;
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
 +
.cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
 +
.cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
 +
.cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
 +
background: #fff;
 +
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
 +
}
 +
.cr-gallery input{
 +
display: none;
 +
}
 +
.cr-bgimg{
 +
width: 600px;
 +
height: 400px;
 +
position: absolute;
 +
left: 0px;
 +
top: 0px;
 +
z-index: 1;
 +
}
 +
.cr-bgimg{
 +
background-repeat: no-repeat;
 +
background-position: 0 0;
 +
}
 +
.cr-bgimg div{
 +
width: 150px;
 +
height: 100%;
 +
position: relative;
 +
float: left;
 +
overflow: hidden;
 +
background-repeat: no-repeat;
 +
}
 +
.cr-bgimg div span{
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0px;
 +
left: 0px;
 +
-webkit-transform: scale(1.5);
 +
-moz-transform: scale(1.5);
 +
-o-transform: scale(1.5);
 +
-ms-transform: scale(1.5);
 +
transform: scale(1.5);
 +
opacity: 0;
 +
z-index: 2;
 +
text-indent: -9000px;
 +
}
 +
 
 +
.cr-bgimg div:nth-child(1) span{
 +
background-position: 0px 0px;
 +
}
 +
.cr-bgimg div:nth-child(2) span{
 +
background-position: -150px 0px;
 +
}
 +
.cr-bgimg div:nth-child(3) span{
 +
background-position: -300px 0px;
 +
}
 +
.cr-bgimg div:nth-child(4) span{
 +
background-position: -450px 0px;
 +
}
 +
.cr-gallery input:checked ~ .cr-bgimg div span{
 +
-webkit-animation: scaleOut 0.6s ease-in-out;
 +
-moz-animation: scaleOut 0.6s ease-in-out;
 +
-o-animation: scaleOut 0.6s ease-in-out;
 +
-ms-animation: scaleOut 0.6s ease-in-out;
 +
animation: scaleOut 0.6s ease-in-out;
 +
}
 +
@-webkit-keyframes scaleOut{
 +
0%{ -webkit-transform: scale(1); opacity: 1; }
 +
100%{ -webkit-transform: scale(1.5); opacity: 0; }
 +
}
 +
@-moz-keyframes scaleOut{
 +
0%{ -moz-transform: scale(1); opacity: 1; }
 +
100%{ -moz-transform: scale(1.5); opacity: 0; }
 +
}
 +
@-o-keyframes scaleOut{
 +
0%{ -o-transform: scale(1); opacity: 1; }
 +
100%{ -o-transform: scale(1.5); opacity: 0; }
 +
}
 +
@-ms-keyframes scaleOut{
 +
0%{ -ms-transform: scale(1); opacity: 1; }
 +
100%{ -ms-transform: scale(1.5); opacity: 0; }
 +
}
 +
@keyframes scaleOut{
 +
0%{ transform: scale(1); opacity: 1; }
 +
100%{ transform: scale(1.5); opacity: 0; }
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
 +
.cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
 +
.cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
 +
.cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
 +
{
 +
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
-o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
-ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
-webkit-animation: none;
 +
-moz-animation: none;
 +
-o-animation: none;
 +
-ms-animation: none;
 +
animation: none;
 +
opacity: 1;
 +
-webkit-transform: scale(1);
 +
-moz-transform: scale(1);
 +
-o-transform: scale(1);
 +
-ms-transform: scale(1);
 +
transform: scale(1);
 +
z-index:10000;
 +
}
 +
.cr-titles h3{
 +
color: #fff;
 +
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 +
}
 +
.cr-titles h3 span{
 +
z-index: 10000;
 +
position: absolute;
 +
width: 100%;
 +
left: 0px;
 +
text-align: center;
 +
opacity: 0;
 +
top: 50%;
 +
}
 +
.cr-titles h3 span:nth-child(1){
 +
left: 0px;
 +
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
 +
font-size: 70px;
 +
letter-spacing: 7px;
 +
color: transparent;
 +
text-shadow: 0px 0px 10px #fff;
 +
-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
}
 +
.cr-titles h3 span:nth-child(2){
 +
margin-top: 84px;
 +
letter-spacing: 0px;
 +
background: rgba(104,171,194,0.9);
 +
font-size: 14px;
 +
padding: 10px 0px;
 +
font-style: italic;
 +
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 +
-webkit-transition: opacity 0.8s ease-in-out;
 +
-moz-transition: opacity 0.8s ease-in-out;
 +
-o-transition: opacity 0.8s ease-in-out;
 +
-ms-transition: opacity 0.8s ease-in-out;
 +
transition: opacity 0.8s ease-in-out;
 +
}
 +
.cr-gallery input:checked ~ .cr-titles h3 span{
 +
opacity: 0;
 +
text-shadow: 0px 0px 30px #fff;
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
 +
.cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
 +
.cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
 +
.cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
 +
opacity: 1;
 +
text-shadow: 0px 0px 1px #fff;
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
 +
.cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
 +
.cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
 +
.cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
 +
opacity: 1;
 +
}
 +
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
 +
@media screen and (max-width: 768px) {
 +
.cr-gallery input{
 +
display: inline;
 +
width: 24%;
 +
margin-top: 350px;
 +
z-index: 1000;
 +
position: relative;
 +
}
 +
.cr-gallery label{
 +
display: none;
 +
}
 +
}
 +
/*_______________gallery-end______________*/
 +
 
 +
 
 +
/**************gallery******************/
 +
.gallery-items {
 +
width:970px;
 +
height: 1000px;
 +
margin:100px 0 0 70px;
 +
position: relative;
 +
left: -150px;
 +
}
 +
.gallery-items a {
 +
display:inline-block;
 +
height:150px;
 +
position:relative;
 +
width:230px;
 +
margin-left: 10px;
 +
margin-right: 10px;
 +
margin-top: 10px;
 +
}
 +
.gallery-items a img {
 +
cursor:pointer;
 +
display:inline-block;
 +
height:100%;
 +
left:0px;
 +
position:absolute;
 +
top:0px;
 +
width:100%;
 +
z-index:0;
 +
border: 10px solid #fff;
 +
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 +
 
 +
 
 +
-moz-user-select: none;
 +
-khtml-user-select: none;
 +
user-select: none;
 +
 
 +
-moz-box-sizing:border-box;
 +
-webkit-box-sizing:border-box;
 +
box-sizing:border-box;
 +
 
 +
-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
-webkit-transition-duration:0.5s;
 +
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
-moz-transition-duration:0.5s;
 +
-o-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
-o-transition-duration:0.5s;
 +
transition-property:width, height, top, bottom, left, right, z-index, border;
 +
transition-duration:0.5s;
 +
}
 +
 
 +
p {
 +
    text-align: left;
 +
    font-family: inherit;
 +
    font-size: 18px;
 +
}
 +
/***********select-gallery*********/
 +
.gallery-container{
 +
width: 80%;
 +
margin: 60px auto 30px 170px;
 +
display: block;
 +
}
 +
 
 +
 
 +
 
 +
.gallery-container label {
 +
width: 20%;
 +
height: 30px;
 +
padding: 10px;
 +
cursor: pointer;
 +
line-height: 33px;
 +
font-size: 19px;
 +
 
 +
color: rgba(255,255,255,1);
 +
text-decoration: none;
 +
background-color: rgba(219,87,5,1);
 +
font-family: 'Yanone Kaffeesatz','Microsoft yahei';
 +
display: block;
 +
padding: 4px;
 +
-webkit-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
border-radius: 8px;
 +
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 +
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 +
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 +
text-align: center;
 +
 
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
 
 +
 
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 );
 +
float: left;
 +
}
 +
.gallery-container label.gallery-label-type-all{
 +
border-radius: 3px 0px 0px 3px;
 +
}
 +
.gallery-container label.gallery-label-type-3{
 +
border-radius: 0px 3px 3px 0px;
 +
}
 +
.gallery-container input.gallery-selector-type-all:checked ~ label.gallery-label-type-all,
 +
.gallery-container input.gallery-selector-type-1:checked ~ label.gallery-label-type-1,
 +
.gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2,
 +
.gallery-container input.gallery-selector-type-3:checked ~ label.gallery-label-type-3{
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
 +
 
 +
 
 +
 
 +
-webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
-moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
background-color: rgba(255, 178, 29, 0.9);
 +
color: rgb(255, 255, 255);}
 +
.gallery-container input{
 +
display: none;
 +
}
 +
 
 +
 
 +
 
 +
.gallery-items li{
 +
margin: 0px;
 +
float: left;
 +
width: 300px;
 +
height: 200px;
 +
-webkit-transition: all 0.6s ease-in-out;
 +
-moz-transition: all 0.6s ease-in-out;
 +
-o-transition: all 0.6s ease-in-out;
 +
-ms-transition: all 0.6s ease-in-out;
 +
transition: all 0.6s ease-in-out;
 +
}
 +
.gallery-items img {
 +
width: 400px;
 +
height: 400px;
 +
}
 +
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items .gallery-item-type-1,
 +
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items .gallery-item-type-2,
 +
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items .gallery-item-type-3{
 +
opacity: 1;
 +
-webkit-transform: scale(1.1);
 +
-moz-transform: scale(1.1);
 +
-o-transform: scale(1.1);
 +
-ms-transform: scale(1.1);
 +
transform: scale(1.1);
 +
}
 +
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1),
 +
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2),
 +
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3){
 +
opacity: 0.1;
 +
-webkit-transform: scale(0.5);
 +
-moz-transform: scale(0.5);
 +
-o-transform: scale(0.5);
 +
-ms-transform: scale(0.5);
 +
transform: scale(0.5);
 +
}
 +
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1) span,
 +
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2) span,
 +
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3) span{
 +
display:none;
 +
}
 +
 
 +
/**********select-gallery over*******/
 +
 
 +
#three-line-text p{
 +
margin-left: 20px;
 +
font-family: "Microsoft yahei";
 +
color: #0073A5;
 +
}
 +
#three-line-text a{
 +
font-family: "Microsoft yahei";
 +
color: #0073A5;
 +
}
 +
 
 +
#threeline-left {
 +
float: left;
 +
width: 270px;
 +
margin:10px 0 0 50px;
 +
}
 +
#threeline-middle {
 +
float: left;
 +
width: 290px;
 +
margin:10px 0 0 20px;
 +
}
 +
#threeline-right {
 +
float: right;
 +
width: 290px;
 +
margin: 10px 60px;
 +
 
 +
}
 +
/* _______________ Slide 10 照片________________ */  
 +
#slide10 {
 +
width:90%;
 +
padding: 20px 0 0 30px;
 +
}
 +
 
 +
/* _________________ PORTFOLIO ________________ */
 +
.gallery-list {
 +
text-align:center;
 +
margin-right:-20px !important;
 +
}
 +
#slide10 .hover_img {
 +
overflow:hidden;
 +
position:relative;
 +
height:291px;
 +
width:255px;
 +
background:#fff;
 +
}
 +
 
 +
 
 +
.img_block {
 +
display:inline-block;
 +
margin:0;
 +
width:251px;
 +
height:100%;
 +
}
 +
 
 +
.img_block_bg {
 +
position:absolute;
 +
z-index:100;
 +
left:0;
 +
top:0;
 +
}
 +
 
 +
.portfolio_zoom, .portfolio_link {
 +
width:42px;
 +
height:42px;
 +
position:absolute;
 +
z-index:110;
 +
bottom:85px;
 +
background-repeat:no-repeat;
 +
opacity:0.61;
 +
filter: alpha(opacity=61);
 +
transition: all 0.1s ease-in-out;
 +
-moz-transition: all 0.1s ease-in-out;
 +
-webkit-transition: all 0.1s ease-in-out;
 +
-o-transition: all 0.1s ease-in-out;
 +
}
 +
.portfolio_zoom {
 +
left:-77px;
 +
}
 +
.portfolio_link {
 +
right:-77px;
 +
}
 +
.portfolio_zoom:hover, .portfolio_link:hover {
 +
opacity:1;
 +
filter: alpha(opacity=100);
 +
z-index:310;
 +
}
 +
.portfolio_zoom a, .portfolio_link a {
 +
display:block;
 +
width:42px;
 +
height:42px;
 +
text-indent:-9999px;
 +
}
 +
 
 +
.img_block:hover .portfolio_zoom {left:83px;transition-delay: 0.3s;
 +
}
 +
.img_block:hover .portfolio_link {right:84px;transition-delay: 0.3s;
 +
}
 +
 
 +
.item_description {
 +
position:absolute;
 +
top:-273px;
 +
width:255px;
 +
height:291px;
 +
padding:0;
 +
background:#f14833;
 +
font-family: Helvetica ;
 +
font-size: 14px;
 +
line-height: 20px;
 +
font-weight: 400;
 +
text-align:center;
 +
color:#fff;
 +
transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
}
 +
.item_description p {
 +
padding:74px 10px 0 50px;
 +
text-transform:uppercase;
 +
font-size:18px;
 +
}
 +
.img_block:hover .item_description {
 +
top:20px;
 +
}
 +
.img_block .portf_img {
 +
position:absolute;
 +
left:18px;
 +
top:18px;
 +
width: 100%;
 +
height: 90%;
 +
transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
}
 +
.img_block:hover .portf_img {
 +
position:absolute;
 +
top:235px;
 +
}
 +
 
 +
 
 +
/* ________________ //PORTFOLIO _______________ */
 +
 
 +
/* ___________ //Slide 10 ___________________*/
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/****************gallery in education**********/
 +
/***************slide gallery***************/
 +
#owl-demo{position:relative;width:640px;height:390px;margin:20px auto 0 auto;}
 +
#owl-demo .item{ position:relative;display:block;}
 +
#owl-demo img{display:block;width:640px;height:390px;}
 +
#owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;background-color: rgba(95, 193, 42, 0.53);}
 +
 
 +
.owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;}
 +
.owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(https://static.igem.org/mediawiki/2015/7/78/CHINA_CD_UESTC_pribg01.png);*display:inline;*zoom:1;}
 +
.owl-pagination .active{width:25px;background-image:url(https://static.igem.org/mediawiki/2015/c/c9/CHINA_CD_UESTC_pribg02.png);}
 +
.owl-buttons{display:none;}
 +
.owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;}
 +
.owl-prev{left:0;background-image:url(https://static.igem.org/mediawiki/2015/2/29/CHINA_CD_UESTC_pribg03.png);}
 +
.owl-next{right:-20px;background-image:url(https://static.igem.org/mediawiki/2015/d/dc/CHINA_CD_UESTC_pribg04.png);}
 +
.owl-prev:hover{background-image:url(https://static.igem.org/mediawiki/2015/6/67/CHINA_CD_UESTC_pribg05.png);}
 +
.owl-next:hover{background-image:url(https://static.igem.org/mediawiki/2015/f/f7/CHINA_CD_UESTC_pribg06.png);}
 +
.owl-item {width: 100%;}
 +
/*
 +
* Core Owl Carousel CSS File
 +
* v1.3.3
 +
*/
 +
 
 +
/* clearfix */
 +
.owl-carousel .owl-wrapper:after {
 +
content: ".";
 +
display: block;
 +
clear: both;
 +
visibility: hidden;
 +
line-height: 0;
 +
height: 0;
 +
}
 +
/* display none until init */
 +
.owl-carousel{
 +
display: none;
 +
position: relative;
 +
width: 100%;
 +
-ms-touch-action: pan-y;
 +
}
 +
.owl-carousel .owl-wrapper{
 +
display: none;
 +
position: relative;
 +
-webkit-transform: translate3d(0px, 0px, 0px);
 +
}
 +
.owl-carousel .owl-wrapper-outer{
 +
overflow: hidden;
 +
position: relative;
 +
width: 100%;
 +
border: 10px solid #fff;
 +
     box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29);
 +
}
 +
.owl-carousel .owl-wrapper-outer.autoHeight{
 +
-webkit-transition: height 500ms ease-in-out;
 +
-moz-transition: height 500ms ease-in-out;
 +
-ms-transition: height 500ms ease-in-out;
 +
-o-transition: height 500ms ease-in-out;
 +
transition: height 500ms ease-in-out;
 +
}
 +
 +
.owl-carousel .owl-item{
 +
float: left;
 +
}
 +
.owl-controls .owl-page,
 +
.owl-controls .owl-buttons div{
 +
cursor: pointer;
 +
}
 +
.owl-controls {
 +
-webkit-user-select: none;
 +
-khtml-user-select: none;
 +
-moz-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 +
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 +
}
 +
 
 +
/* mouse grab icon */
 +
.grabbing {
 +
    cursor:url(grabbing.png) 8 8, move;
 +
}
 +
 
 +
/* fix */
 +
.owl-carousel  .owl-wrapper,
 +
.owl-carousel  .owl-item{
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility:    hidden;
 +
-ms-backface-visibility:    hidden;
 +
  -webkit-transform: translate3d(0,0,0);
 +
  -moz-transform: translate3d(0,0,0);
 +
  -ms-transform: translate3d(0,0,0);
 +
}
 +
 
 +
 
 +
/****4 windows gallery ***********/
 +
.gallery{
 +
width: 600px;
 +
height: 100%;
 +
position: relative;
 +
text-align: center;
 +
margin-right: 20px;
 +
display: inline;
 +
}
 +
 
 +
.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg,
 +
.cr-bgimg div span:nth-child(1){
 +
background-image: url(https://static.igem.org/mediawiki/2015/c/cb/CHINA_CD_UESTC_KINDER01.JPG);
 +
background-size: 400%;
 +
}
 +
.cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg,
 +
.cr-bgimg div span:nth-child(2){
 +
background-image: url(https://static.igem.org/mediawiki/2015/5/55/CHINA_CD_UESTC_KINDER02.JPG);
 +
background-size: 400%;
 +
 
 +
}
 +
.cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg,
 +
.cr-bgimg div span:nth-child(3){
 +
background-image: url(https://static.igem.org/mediawiki/2015/3/3c/CHINA_CD_UESTC_KINDER03.JPG);
 +
background-size: 400%;
 +
 
 +
}
 +
.cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg,
 +
.cr-bgimg div span:nth-child(4){
 +
background-image: url(https://static.igem.org/mediawiki/2015/6/62/CHINA_CD_UESTC_KINDER04.JPG);
 +
background-size: 400%;
 +
}
 +
/************two line picture********/
 +
.two_line_pic {
 +
display: inline-block;
 +
position: relative;
 +
margin: 10px 0px 50px 20px;
 +
padding: 20px;
 +
border: 10px solid #fff;
 +
box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29);
 +
}
 +
.left_pic {
 +
float: left;
 +
margin-left: 50px;
 +
}
 +
.right_pic {
 +
float: right;
 +
margin-left: 5px;
 +
}
 +
/**************end two line pic******/
 +
 
 +
/***************protocol************/
 +
#page {
 +
margin-bottom: 200px;
 +
z-index: 1000;
 +
}
 +
#page ul li{
 +
list-style: none;
 +
}
 +
.leftside{
 +
color: #000;
 +
float:left;
 +
width:17%;
 +
}
 +
#page .leftside li a {
 +
cursor:pointer;
 +
color: #000;
 +
}
 +
 
 +
.rightside{
 +
float:left;
 +
margin-left:5%;
 +
width:78%;
 +
height:600px; 
 +
overflow:hidden;
 +
}
 +
.protocol{
 +
display:none;
 +
width:95%;
 +
margin-bottom:20px;
 +
}
 +
.protocolactive{
 +
display:block;
 +
width:95%;
 +
border: 5px solid #DDE8E8;
 +
 
 +
margin-bottom:20px;
 +
}
 +
 
 +
/*********green button***********/
 +
.button{
 +
width: 160px;
 +
line-height: 38px;
 +
text-align: center;
 +
font-size: 20px;
 +
position: relative;
 +
overflow: hidden;
 +
 
 +
 
 +
color: rgba(255,255,255,1);
 +
text-decoration: none;
 +
background-color: rgba(219,87,5,1);
 +
font-family: 'Yanone Kaffeesatz','Microsoft yahei';
 +
display: block;
 +
padding: 4px;
 +
-webkit-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
border-radius: 8px;
 +
 
 +
}
 +
.button.green{
 +
-webkit-box-shadow:0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
 +
-moz-box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
 +
box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
 +
 
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
 
 +
 
 +
}
 +
.green.larrow:before{
 +
background: #64C878;
 +
}
 +
.green.larrow:after{
 +
-webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
-moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
background-color: rgba(255, 178, 29, 0.9);
 +
color: rgb(255, 255, 255);}}
 +
 
 +
/***green button over*/
 +
table.tftable {font-size:12px;color:#333333;width:90%;border-width: 1px;border-color: #bcaf91;border-collapse: collapse;}
 +
table.tftable th {font-size:12px;background-color:#ded0b0;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;text-align:left;}
 +
table.tftable tr {background-color:#ffffff;}
 +
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;}
 +
/*******************end protocol**********/
 +
 
 +
 
 +
 
 +
 
 +
/**************vector*****************/
 +
.vector {
 +
width: 80%;
 +
margin: 10px 0 0 200px;
 +
}
 +
.vector h2 {
 +
font-size: 20px;
 +
font-family: Helvetica;
 +
text-decoration: none;
 +
border: 0;
 +
font-weight: bold;
 +
}
 +
.vector p {
 +
font-size: 20px;
 +
font-family:Helvetica;
 +
 
 +
}
 +
.vector img {
 +
margin-top: 10px;
 +
}
 +
#brief_text {
 +
margin: 0;
 +
font-family: Helvetica;
 +
font-weight: 600;
 +
font-size: 20px;
 +
font-style: normal;
 +
line-height: 36px;
 +
}
 +
#pic_illustration {
 +
    font-size: 15px;
 +
    margin-left: -10%;
 +
    width: 90%;
 +
}
 +
 
 +
/*____________grid.css___________________*/
 +
 
 +
/* Computer */
 +
.grid_1 { width: 6.5%; }
 +
.grid_2 { width: 15%; }
 +
.grid_3 { width: 23.5%; }
 +
.grid_4 { width: 32%; }
 +
.grid_5 { width: 40.5%; }
 +
.grid_6 { width: 49%; }
 +
.grid_7 { width: 57.5%; }
 +
.grid_8 { width: 94%; font-family: Verdana,Arial  ;
 +
}
 +
.grid_9 { width: 74.5%; }
 +
.grid_10 { width: 83%; }
 +
.grid_11 { width: 91.5%; }
 +
.grid_12 { width: 100%; }
 +
 
 +
.grid_1,
 +
.grid_2,
 +
.grid_3,
 +
.grid_4,
 +
.grid_5,
 +
.grid_6,
 +
.grid_7,
 +
.grid_8,
 +
.grid_9,
 +
.grid_10,
 +
.grid_11,
 +
.grid_12 {
 +
margin:20px 0 0 0;
 +
float: left;
 +
display: block;
 +
}
 +
 
 +
.alpha {margin-left:0;}
 +
.omega {margin-right:0;}
 +
.gallery-list {margin:0;padding:0;}
 +
.little_respond {display:none;}
 +
 
 +
.container{
 +
width: 100%;
 +
max-width: 1000px;
 +
margin: auto;
  
−
    <div id="RightContent">
+
}
−
        <div class="transparent_class ">
+
−
            <p class="blockWords">
+
−
                &nbsp;&nbsp;Are we a group of nerd struggling with the experiments? NO!! Whether the rigorous experiments, or the broad social activities, we all happy to participate. Here you will see our members in experiments, discussions, meetings——which are enjoying the fun of gathering together by iGEM.
+
−
            </p>
+
−
        </div>
+
  
−
        <div id="RightContentText">
 
−
            <section class="gallery-container">
 
  
−
                <input id="select-type-all" name="radio-set-1" type="radio" class="gallery-selector-type-all" checked="checked" />
 
−
                <label for="select-type-all" class="gallery-label-type-all">All</label>
 
  
−
                <input id="select-type-1" name="radio-set-1" type="radio" class="gallery-selector-type-1" />
+
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
−
                <label for="select-type-1" class="gallery-label-type-1">Experiment</label>
+
.clearfix:after{position:relative;z-index:99;clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
  
−
                <input id="select-type-2" name="radio-set-1" type="radio" class="gallery-selector-type-2" />
+
@media (orientation: portrait) {
−
                <label for="select-type-2" class="gallery-label-type-2">Outreach</label>
+
.slide{background-attachment: scroll;background-position:0 0 !important;
 +
}
 +
}
  
−
                <input id="select-type-3" name="radio-set-1" type="radio" class="gallery-selector-type-3" />
+
@media only screen and (min-width: 321px) and (max-width: 980px) {
−
                <label for="select-type-3" class="gallery-label-type-3">Daily life</label>
+
#title {position: fixed;font-size: 80px;left:250px;z-index: 5;}
 +
#firstTitle {width:700px;}
 +
#firstTitle p {font-size: 60px;}
 +
.transparent_class{top: 280px;width: 640px;left: 20px;}
 +
#RightContentText {top: 470px;width: 655px;left: 13px;right: 8px;}
 +
.gallery-container {width: 80%;margin: 60px 0px 30px 100px;display: block;}
 +
.gallery-items {width: 800px;}.gallery-items li {width: 210px;height: 180px;}
 +
.gallery-items a {height: 130px;width: 190px;margin-left: 4px;margin-right: 4px;margin-top: 10px;
 +
}
 +
#HZpic {background-position: 0 0 !important;width: 90%;padding: 10px;margin-top: 20px;}
 +
.client_foto {height: 380px;width: 240px;}
 +
#slide12 {width: 97%;}
 +
#slide12 h5 {margin: 5px 0 0 0;font-size: 25px;line-height: 25px;}
 +
#slide12 h6 {font-size: 15px;line-height: 17px;}
 +
#slide12 p {font-size: 14px;font-family: Helvetica,'Microsoft Yahei';text-align: initial;}
 +
#content {height: 50px;}
 +
h2{font-size: 30px;line-height: 52px;}
 +
#RightContentText h4 {font-size: 22px;line-height: 36px;}
 +
p{font-size: 15px;}
 +
#threeline-left {float: left;width: 150px;margin: 10px 0 0 3px;}
 +
#threeline-middle {float: left;width: 230px;margin: 10px 0 0 0px;}
 +
#threeline-right {float: right;width: 250px;margin: 10px 20px 0 0px;}
 +
.two_line_pic img {width: 250px;height: 180px;}
 +
.left_pic {margin-left: 0px;}
 +
.button {width: 120px;}
 +
.exhib_cont {width: 240px;}
 +
.vector {width: 100%;margin: 10px 0 0 10px;}
 +
.owl-next {right: 50px;}
 +
.owl-pagination{width: 90%;}
 +
.owl-carousel .owl-wrapper-outer {width: 90%;}
 +
                        .clear {display: block;height: 30px;}
  
−
                <div class="clr"></div>
 
  
−
                <ul class="gallery-items">
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/2/25/CHINA_CD_UESTC_gallery03.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/a/ad/CHINA_CD_UESTC_gallery04.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/2/2a/CHINA_CD_UESTC_gallery07.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-2">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/e/e9/CHINA_CD_UESTC_gallery13.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/b/b3/CHINA_CD_UESTC_gallery08.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/d/d2/CHINA_CD_UESTC_gallery09.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-3">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/b/bf/CHINA_CD_UESTC_gallery02.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/6/64/CHINA_CD_UESTC_gallery12.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-2">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/9/9b/CHINA_CD_UESTC_gallery01.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-2">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/a/ae/CHINA_CD_UESTC_gallery05.JPG" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/3/39/CHINA_CD_UESTC_gallery14.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/1/1a/CHINA_CD_UESTC_gallery15.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-2">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/b/b2/CHINA_CD_UESTC_gallery10.JPG" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-3">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/b/b9/CHINA_CD_UESTC_gallery06.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/9/96/CHINA_CD_UESTC_gallery16.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-3">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/c/cf/CHINA_CD_UESTC_gallery17.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-1">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/1/1a/CHINA_CD_UESTC_gallery18.jpg" ></a>
 
−
                    </li>
 
−
                    <li class="gallery-item-type-2">
 
−
                        <a>
 
−
                            <img src="https://static.igem.org/mediawiki/2015/0/06/CHINA_CD_UESTC_gallery11.JPG" ></a>
 
−
                    </li>
 
  
−
                </ul>
+
}
−
            </section>
+
  
−
        </div>
 
  
−
    </div>
+
@media only screen and (min-width: 970px) and (max-width: 980px) {
−
</body>
+
.gallery-list {display: none;}
−
</html>
+
}

Revision as of 06:09, 11 September 2015

/* General Slides */

  1. RightContent {

float: right; position: fixed; left: 260px; top: 0px; right: 0; height:100%; overflow-y: scroll; transition: all 200ms ease-out; transform: translate3d(0, 0, 0); z-index:5; } .transparent_class { border-radius: 0px; position: absolute; top: 350px; left: 50px; right: 50px; background-color: #0072E3; color:#000000; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; } .blockWords{ font-family:Arial, Helvetica, sans-serif; font-size: 19px; padding: 15px; color: #ffffff; }

  1. HZpic {

background-position:0 0 !important; width:100%; padding:10px 40px 20px 40px; margin-top:20px; }

  1. content{

height:90px; padding: 0px 0px 0px 0px; border-left: 0px solid #444444; border-right: 0px solid #444444; background:none; }

  1. title {

position: fixed; font-size: 80px; left:260px; z-index: 5;

}

  1. firstTitle {

font-family: Arial, Helvetica, sans-serif; position: fixed; width:1000px; margin-top:0; margin-bottom:0; top: 60px; font-size: 80px; color: #FFFFAA; overflow: hidden;

}

  1. firstTitle p {

text-align: center; 

   font-size: 80px;

}

.transparent_class { border-radius: 0px; position: absolute; top: 350px; width:1000px; left: 50px; right: 50px; background-color: #0072E3; color:#000000; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; }

  1. RightContentText {

position: absolute; top: 510px; width: 1048px; left:28px; right:8px; background:#FFFFFF; color: #000000; transition: all 200ms ease-out; transform: translate3d(0, 0, 0); }


.slide{ background-attachment: fixed; width:100%; height:100%; position: relative; padding:0 10px 0 10px; margin: 0 10px 0 10px; z-index:12; overflow:hidden; }


  1. RightContentText h2 {

display:block; margin:0 0 23px; padding:0; text-transform:none; text-align:left; font-style:normal; border-bottom:1px solid #e0e0e0; font-family: Helvetica ; font-size: 30px; line-height: 82px; color:#343434; font-weight: 300; }

  1. RightContentText h3 {

margin:0; padding:40px 0 32px 0; text-align:center; font-family: Helvetica ; font-weight:800; font-size:32px; font-style:normal; line-height:36px; }


  1. RightContentText h4 {

margin:0; padding:0 0 15px; text-transform:none; text-align:left; font-family: Helvetica ; font-weight:300; font-size:32px; font-style:normal; line-height:36px; color:#222; }

img.icon_img { float:left; margin-right:20px; margin-top:20px; margin-bottom:25px; }

.effect_2 { background:url(../images/effect_2.png) repeat left top; position:relative; top:0; bottom:-57px; height:100%; z-index:999 !important; }

/*________________________Judging__________________*/

  1. bronze h3{

background-image: url(); background-repeat: no-repeat; text-decoration:underline; color: #e8b77c; }

  1. silver h3{

background-image: url(); background-repeat: no-repeat; text-decoration:underline; color: #b4c8cb; }

  1. gold h3{

background-image: url(); background-repeat: no-repeat; text-decoration:underline; color: #fbca23; }

.req_list{ width: 90%; } .req_list h1{ background:url(CHINA_CD_UESTC_YesIcon.png) no-repeat; background-size: 6%; margin:0; padding:10px 0 0px 50px; margin-left: 50px; font-family: Helvetica ; font-weight:800; font-size:20px; font-style:normal; line-height:36px; } .req_list p{ margin:0; margin-left: 120px; font-family: 'Microsoft Yahei' ; font-weight:500; font-size:15px; font-style:normal; line-height:26px; } /* ____________ Slide 2 标准文本_______________ */

  1. slide2 {

width:100%; padding:20px 0 20px; }

.det_inf {margin-bottom:24px; } .det_inf li {margin-bottom:10px; } .det_inf li a { color:#929292; } .det_inf li a:hover { color:#f14833; }


/* ________________ //Slide 2 ________________ */



/* ______________ Slide 4 service旋转四列__________ */

  1. slide4 {

width:100%; padding:86px 0 69px; }

  1. slide4 h2 {

color:#b8b8b8; border-bottom:1px solid #3b3b3b; }


/* ____________ SERVICES_BLOCK ___________ */ a.servc_block { display:block; position:relative; text-align:center; color:#6f6f6f; }

.icon_bord { position:relative; z-index:10; top:0; left:50%; margin-left:-51px; width:102px; height:116px; }

.icon1, .icon1_h { position:absolute; z-index:1; top:0; left:0; }

.servc_block .icon1 { transition: all 0.5s ease-out; opacity: 1; } .servc_block:hover .icon1 { transform: rotate(720deg) scale(0); opacity: 0; }

.servc_block .icon1_h { transition: all 0.5s ease-out; transform: rotate(720deg) scale(0); opacity: 0; } .servc_block:hover .icon1_h { transform: rotate(720deg) scale(1); opacity: 1; transition-delay: 0.4s; }

.servc_block p { font-family: Helvetica ; font-weight:300; font-size:20px; line-height:22px; color:#a3a3a3; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .servc_block:hover p { color:#f14833; transition-delay: 0.7s; }


/* ____________ SERVICES_BLOCK ___________ */

/* _______________ //Slide 4 _____________ */


/* _______________ Slide 6 时间轴_________ */

  1. slide6 {

background:url(../images/slide6_bg.jpg) repeat left top; width:100%; padding:30px 0 30px; }

  1. slide6 h2 {color:#222;

}

/* ______________ exhib_block _________ */ .exhib_block {position:relative;} .exhib_block .fleft {margin-left:1px;} .exhib_line_center { position:absolute; left:50%; top:12px; width:1px; height:100%; background:#c3c3c3; } .exhib_block p { padding-bottom:9px; font-family: Helvetica ; font-weight:400; font-size:20px; color:#343434; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .exhib_cont:hover p {color:#f14833; }

.exhib_p_top {margin-left:80px; }

.exhib_cont { position:relative; width:420px; margin-top:30px; padding:13px 20px 9px; background:#fff; color:#8d8d8d; border:1px solid #dedede; border-radius:12px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; }


.exhib_block .fright { position: relative; left:52%; margin-top:50px; }


.exhib_cont:hover { -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.15); -moz-box-shadow: 0 0 16px rgba(0,0,0,0.15); box-shadow: 0 0 16px rgba(0,0,0,0.15); }

.exhib_date_right, .exhib_date_left, .exhib_date_top { display:block; position:absolute; font-family: Helvetica ; font-weight:300; font-size:26px; line-height:20px; color:#91B517; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .exhib_date_top { left:49.5%; top:0; width:95px; text-align:right; }

.exhib_date_left { left:-220px; top:27px; } .exhib_date_right { right:-230px; top:27px; text-align:right; } .exhib_cont:hover .exhib_date_right, .exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_top {font-size:30px; }


/* _____________ //exhib_block _______________ */


/* ________________ //Slide 6 _________________ */





/* _______________ Slide 12 左图右文______________ */

  1. slide12 {

background:url(..) repeat left top; background-position:0 0 !important; width:100%; padding:10px 0 20px; margin-top:20px; }

  1. slide12 h2 {color:#OOOOOO;

font-size:50px !important; }

  1. slide12 p {color:#888888;

}

  1. slide12 .foto {

float:left; margin:0 20px 20px 0; }

  1. slide12 h5 {

margin:50px 0 0 0; padding-bottom:8px; text-transform:none; font-family: Helvetica ; font-size: 32px; line-height: 31px; font-weight: 300; color:#acacac; }

  1. slide12 h6 {

margin:0 0 0 0; padding-bottom:2px; text-transform:none; font-family: Helvetica ; font-size: 20px; line-height: 23px; font-weight: 300; color:#acacac; } .client_foto { float:left; position:relative; margin:0 5px 10px 0; height:460px; width:400px; } .client_foto img { position:absolute; left:0; top:0; z-index:10; width: 90%; } .foto {z-index:5 !important;}

.contact_det, .contact_det a { color:#888888; line-height:26px; } .contact_det a:hover {color:#f14833;}


/* ____________ //Slide 12 ________________ */


/*_____________gallery___________________*/ @font-face { font-family: 'BebasNeueRegular'; src: url('fonts/BebasNeue-webfont.eot'); src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue-webfont.woff') format('woff'), url('fonts/BebasNeue-webfont.ttf') format('truetype'), url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; }


.clr{ clear: both; }


.cr-gallery{ width: 600px; height: 400px; position: relative; margin: 0 auto; overflow: hidden; border: 20px solid #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); } .cr-gallery label{ font-style: italic; width: 150px; height: 30px; cursor: pointer; color: #fff; line-height: 32px; font-size: 24px; float:left; position: relative; margin-top:350px; z-index: 1000; } .cr-gallery label:before{ content:; width: 34px; height: 34px; background: rgba(130,195,217,0.9); position: absolute; left: 50%; margin-left: -17px; border-radius: 50%; box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3); z-index:-1; } .cr-gallery label:after{ width: 1px; height: 400px; content: ; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); position: absolute; bottom: -20px; right: 0px; } .cr-gallery label.cr-label-img-4:after{ width: 0px; } .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1, .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2, .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3, .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4{ color: #68abc2; } .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1:before, .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2:before, .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3:before, .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{ background: #fff; box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6); } .cr-gallery input{ display: none; } .cr-bgimg{ width: 600px; height: 400px; position: absolute; left: 0px; top: 0px; z-index: 1; } .cr-bgimg{ background-repeat: no-repeat; background-position: 0 0; } .cr-bgimg div{ width: 150px; height: 100%; position: relative; float: left; overflow: hidden; background-repeat: no-repeat; } .cr-bgimg div span{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); opacity: 0; z-index: 2; text-indent: -9000px; }

.cr-bgimg div:nth-child(1) span{ background-position: 0px 0px; } .cr-bgimg div:nth-child(2) span{ background-position: -150px 0px; } .cr-bgimg div:nth-child(3) span{ background-position: -300px 0px; } .cr-bgimg div:nth-child(4) span{ background-position: -450px 0px; } .cr-gallery input:checked ~ .cr-bgimg div span{ -webkit-animation: scaleOut 0.6s ease-in-out; -moz-animation: scaleOut 0.6s ease-in-out; -o-animation: scaleOut 0.6s ease-in-out; -ms-animation: scaleOut 0.6s ease-in-out; animation: scaleOut 0.6s ease-in-out; } @-webkit-keyframes scaleOut{ 0%{ -webkit-transform: scale(1); opacity: 1; } 100%{ -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes scaleOut{ 0%{ -moz-transform: scale(1); opacity: 1; } 100%{ -moz-transform: scale(1.5); opacity: 0; } } @-o-keyframes scaleOut{ 0%{ -o-transform: scale(1); opacity: 1; } 100%{ -o-transform: scale(1.5); opacity: 0; } } @-ms-keyframes scaleOut{ 0%{ -ms-transform: scale(1); opacity: 1; } 100%{ -ms-transform: scale(1.5); opacity: 0; } } @keyframes scaleOut{ 0%{ transform: scale(1); opacity: 1; } 100%{ transform: scale(1.5); opacity: 0; } } .cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) { -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); z-index:10000; } .cr-titles h3{ color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .cr-titles h3 span{ z-index: 10000; position: absolute; width: 100%; left: 0px; text-align: center; opacity: 0; top: 50%; } .cr-titles h3 span:nth-child(1){ left: 0px; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 70px; letter-spacing: 7px; color: transparent; text-shadow: 0px 0px 10px #fff; -webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; } .cr-titles h3 span:nth-child(2){ margin-top: 84px; letter-spacing: 0px; background: rgba(104,171,194,0.9); font-size: 14px; padding: 10px 0px; font-style: italic; font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out; } .cr-gallery input:checked ~ .cr-titles h3 span{ opacity: 0; text-shadow: 0px 0px 30px #fff; } .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1), .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1), .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1), .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){ opacity: 1; text-shadow: 0px 0px 1px #fff; } .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2), .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2), .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2), .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){ opacity: 1; } /* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */ @media screen and (max-width: 768px) { .cr-gallery input{ display: inline; width: 24%; margin-top: 350px; z-index: 1000; position: relative; } .cr-gallery label{ display: none; } } /*_______________gallery-end______________*/


/**************gallery******************/ .gallery-items { width:970px; height: 1000px; margin:100px 0 0 70px; position: relative; left: -150px; } .gallery-items a { display:inline-block; height:150px; position:relative; width:230px; margin-left: 10px; margin-right: 10px; margin-top: 10px; } .gallery-items a img { cursor:pointer; display:inline-block; height:100%; left:0px; position:absolute; top:0px; width:100%; z-index:0; border: 10px solid #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.1);


-moz-user-select: none; -khtml-user-select: none; user-select: none;

-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;

-webkit-transition-property:width, height, top, bottom, left, right, z-index, border; -webkit-transition-duration:0.5s; -moz-transition-property:width, height, top, bottom, left, right, z-index, border; -moz-transition-duration:0.5s; -o-transition-property:width, height, top, bottom, left, right, z-index, border; -o-transition-duration:0.5s; transition-property:width, height, top, bottom, left, right, z-index, border; transition-duration:0.5s; }

p { 

   text-align: left;
   font-family: inherit;
   font-size: 18px;

} /***********select-gallery*********/ .gallery-container{ width: 80%; margin: 60px auto 30px 170px; display: block; }


.gallery-container label { width: 20%; height: 30px; padding: 10px; cursor: pointer; line-height: 33px; font-size: 19px;

color: rgba(255,255,255,1); text-decoration: none; background-color: rgba(219,87,5,1); font-family: 'Yanone Kaffeesatz','Microsoft yahei'; display: block; padding: 4px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); text-align: center;

-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 ); float: left; } .gallery-container label.gallery-label-type-all{ border-radius: 3px 0px 0px 3px; } .gallery-container label.gallery-label-type-3{ border-radius: 0px 3px 3px 0px; } .gallery-container input.gallery-selector-type-all:checked ~ label.gallery-label-type-all, .gallery-container input.gallery-selector-type-1:checked ~ label.gallery-label-type-1, .gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2, .gallery-container input.gallery-selector-type-3:checked ~ label.gallery-label-type-3{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );


-webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); -moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); background-color: rgba(255, 178, 29, 0.9); color: rgb(255, 255, 255);} .gallery-container input{ display: none; }


.gallery-items li{ margin: 0px; float: left; width: 300px; height: 200px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .gallery-items img { width: 400px; height: 400px; } .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items .gallery-item-type-1, .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items .gallery-item-type-2, .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items .gallery-item-type-3{ opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1), .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2), .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3){ opacity: 0.1; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1) span, .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2) span, .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3) span{ display:none; }

/**********select-gallery over*******/

#three-line-text p{ margin-left: 20px; font-family: "Microsoft yahei"; color: #0073A5; } #three-line-text a{ font-family: "Microsoft yahei"; color: #0073A5; }

#threeline-left { float: left; width: 270px; margin:10px 0 0 50px; } #threeline-middle { float: left; width: 290px; margin:10px 0 0 20px; } #threeline-right { float: right; width: 290px; margin: 10px 60px;

} /* _______________ Slide 10 照片________________ */ #slide10 { width:90%; padding: 20px 0 0 30px; }

/* _________________ PORTFOLIO ________________ */ .gallery-list { text-align:center; margin-right:-20px !important; } #slide10 .hover_img { overflow:hidden; position:relative; height:291px; width:255px; background:#fff; }


.img_block { display:inline-block; margin:0; width:251px; height:100%; }

.img_block_bg { position:absolute; z-index:100; left:0; top:0; }

.portfolio_zoom, .portfolio_link { width:42px; height:42px; position:absolute; z-index:110; bottom:85px; background-repeat:no-repeat; opacity:0.61; filter: alpha(opacity=61); transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; } .portfolio_zoom { left:-77px; } .portfolio_link { right:-77px; } .portfolio_zoom:hover, .portfolio_link:hover { opacity:1; filter: alpha(opacity=100); z-index:310; } .portfolio_zoom a, .portfolio_link a { display:block; width:42px; height:42px; text-indent:-9999px; }

.img_block:hover .portfolio_zoom {left:83px;transition-delay: 0.3s; } .img_block:hover .portfolio_link {right:84px;transition-delay: 0.3s; }

.item_description { position:absolute; top:-273px; width:255px; height:291px; padding:0; background:#f14833; font-family: Helvetica ; font-size: 14px; line-height: 20px; font-weight: 400; text-align:center; color:#fff; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .item_description p { padding:74px 10px 0 50px; text-transform:uppercase; font-size:18px; } .img_block:hover .item_description { top:20px; } .img_block .portf_img { position:absolute; left:18px; top:18px; width: 100%; height: 90%; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .img_block:hover .portf_img { position:absolute; top:235px; }


/* ________________ //PORTFOLIO _______________ */

/* ___________ //Slide 10 ___________________*/




/****************gallery in education**********/ /***************slide gallery***************/

  1. owl-demo{position:relative;width:640px;height:390px;margin:20px auto 0 auto;}
  2. owl-demo .item{ position:relative;display:block;}
  3. owl-demo img{display:block;width:640px;height:390px;}
  4. owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;background-color: rgba(95, 193, 42, 0.53);}

.owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;} .owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(https://static.igem.org/mediawiki/2015/7/78/CHINA_CD_UESTC_pribg01.png);*display:inline;*zoom:1;} .owl-pagination .active{width:25px;background-image:url(https://static.igem.org/mediawiki/2015/c/c9/CHINA_CD_UESTC_pribg02.png);} .owl-buttons{display:none;} .owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;} .owl-prev{left:0;background-image:url(https://static.igem.org/mediawiki/2015/2/29/CHINA_CD_UESTC_pribg03.png);} .owl-next{right:-20px;background-image:url(https://static.igem.org/mediawiki/2015/d/dc/CHINA_CD_UESTC_pribg04.png);} .owl-prev:hover{background-image:url(https://static.igem.org/mediawiki/2015/6/67/CHINA_CD_UESTC_pribg05.png);} .owl-next:hover{background-image:url(https://static.igem.org/mediawiki/2015/f/f7/CHINA_CD_UESTC_pribg06.png);} .owl-item {width: 100%;} /* 

* 	Core Owl Carousel CSS File
*	v1.3.3
*/

/* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{ display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{ display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{ overflow: hidden; position: relative; width: 100%; border: 10px solid #fff; 

   box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29);

} .owl-carousel .owl-wrapper-outer.autoHeight{ -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; }

.owl-carousel .owl-item{ float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{ cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* mouse grab icon */ .grabbing { 

   cursor:url(grabbing.png) 8 8, move;

}

/* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; 

 -webkit-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);

}


/****4 windows gallery ***********/ .gallery{ width: 600px; height: 100%; position: relative; text-align: center; margin-right: 20px; display: inline; }

.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1){ background-image: url(CHINA_CD_UESTC_KINDER01.JPG); background-size: 400%; } .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2){ background-image: url(CHINA_CD_UESTC_KINDER02.JPG); background-size: 400%;

} .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3){ background-image: url(CHINA_CD_UESTC_KINDER03.JPG); background-size: 400%;

} .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4){ background-image: url(CHINA_CD_UESTC_KINDER04.JPG); background-size: 400%; } /************two line picture********/ .two_line_pic { display: inline-block; position: relative; margin: 10px 0px 50px 20px; padding: 20px; border: 10px solid #fff; box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29); } .left_pic { float: left; margin-left: 50px; } .right_pic { float: right; margin-left: 5px; } /**************end two line pic******/

/***************protocol************/ #page { margin-bottom: 200px; z-index: 1000; } #page ul li{ list-style: none; } .leftside{ color: #000; float:left; width:17%; } #page .leftside li a { cursor:pointer; color: #000; }

.rightside{ float:left; margin-left:5%; width:78%; height:600px; overflow:hidden; } .protocol{ display:none; width:95%; margin-bottom:20px; } .protocolactive{ display:block; width:95%; border: 5px solid #DDE8E8;

margin-bottom:20px; }

/*********green button***********/ .button{ width: 160px; line-height: 38px; text-align: center; font-size: 20px; position: relative; overflow: hidden;


color: rgba(255,255,255,1); text-decoration: none; background-color: rgba(219,87,5,1); font-family: 'Yanone Kaffeesatz','Microsoft yahei'; display: block; padding: 4px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;

} .button.green{ -webkit-box-shadow:0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7); -moz-box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7); box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);

-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;


} .green.larrow:before{ background: #64C878; } .green.larrow:after{ -webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); -moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); background-color: rgba(255, 178, 29, 0.9); color: rgb(255, 255, 255);}}

/***green button over*/ table.tftable {font-size:12px;color:#333333;width:90%;border-width: 1px;border-color: #bcaf91;border-collapse: collapse;} table.tftable th {font-size:12px;background-color:#ded0b0;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;text-align:left;} table.tftable tr {background-color:#ffffff;} table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;} /*******************end protocol**********/



/**************vector*****************/ .vector { width: 80%; margin: 10px 0 0 200px; } .vector h2 { font-size: 20px; font-family: Helvetica; text-decoration: none; border: 0; font-weight: bold; } .vector p { font-size: 20px; font-family:Helvetica;

} .vector img { margin-top: 10px; } #brief_text { margin: 0; font-family: Helvetica; font-weight: 600; font-size: 20px; font-style: normal; line-height: 36px; }

  1. pic_illustration {
   font-size: 15px;
   margin-left: -10%;
   width: 90%;

}

/*____________grid.css___________________*/

/* Computer */ .grid_1 { width: 6.5%; } .grid_2 { width: 15%; } .grid_3 { width: 23.5%; } .grid_4 { width: 32%; } .grid_5 { width: 40.5%; } .grid_6 { width: 49%; } .grid_7 { width: 57.5%; } .grid_8 { width: 94%; font-family: Verdana,Arial  ; } .grid_9 { width: 74.5%; } .grid_10 { width: 83%; } .grid_11 { width: 91.5%; } .grid_12 { width: 100%; }

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { margin:20px 0 0 0; float: left; display: block; }

.alpha {margin-left:0;} .omega {margin-right:0;} .gallery-list {margin:0;padding:0;} .little_respond {display:none;}

.container{ width: 100%; max-width: 1000px; margin: auto;

}


.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} .clearfix:after{position:relative;z-index:99;clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

@media (orientation: portrait) { .slide{background-attachment: scroll;background-position:0 0 !important; } }

@media only screen and (min-width: 321px) and (max-width: 980px) { #title {position: fixed;font-size: 80px;left:250px;z-index: 5;} #firstTitle {width:700px;} #firstTitle p {font-size: 60px;} .transparent_class{top: 280px;width: 640px;left: 20px;} #RightContentText {top: 470px;width: 655px;left: 13px;right: 8px;} .gallery-container {width: 80%;margin: 60px 0px 30px 100px;display: block;} .gallery-items {width: 800px;}.gallery-items li {width: 210px;height: 180px;} .gallery-items a {height: 130px;width: 190px;margin-left: 4px;margin-right: 4px;margin-top: 10px; } #HZpic {background-position: 0 0 !important;width: 90%;padding: 10px;margin-top: 20px;} .client_foto {height: 380px;width: 240px;} #slide12 {width: 97%;} #slide12 h5 {margin: 5px 0 0 0;font-size: 25px;line-height: 25px;} #slide12 h6 {font-size: 15px;line-height: 17px;} #slide12 p {font-size: 14px;font-family: Helvetica,'Microsoft Yahei';text-align: initial;} #content {height: 50px;} h2{font-size: 30px;line-height: 52px;} #RightContentText h4 {font-size: 22px;line-height: 36px;} p{font-size: 15px;} #threeline-left {float: left;width: 150px;margin: 10px 0 0 3px;} #threeline-middle {float: left;width: 230px;margin: 10px 0 0 0px;} #threeline-right {float: right;width: 250px;margin: 10px 20px 0 0px;} .two_line_pic img {width: 250px;height: 180px;} .left_pic {margin-left: 0px;} .button {width: 120px;} .exhib_cont {width: 240px;} .vector {width: 100%;margin: 10px 0 0 10px;} .owl-next {right: 50px;} .owl-pagination{width: 90%;} .owl-carousel .owl-wrapper-outer {width: 90%;} 

                       .clear {display: block;height: 30px;}


}


@media only screen and (min-width: 970px) and (max-width: 980px) { .gallery-list {display: none;} }