Team:USTC-Software/css/team style

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/* style for the photo zone, some elements' names are for the javascript */
+
{{Template:Team:USTC-Software/hidden}}
-
#photo_zone_line_up{
+
{{Template:Team:USTC-Software/global_header}}
-
position:relative;
+
<html>
-
width:100%;
+
<head>
-
height:40px;
+
    <title>USTC-Software Team</title>
-
background:url("https://static.igem.org/mediawiki/2012/d/dd/USTC-Software-images-photo_zone_line.png");
+
    <link rel="stylesheet" href="https://2012.igem.org/Team:USTC-Software/css/style?action=raw&ctype=text/css" type="text/css"/>
-
}
+
    <link rel="stylesheet" href="https://2012.igem.org/Team:USTC-Software/css/team_style?action=raw&ctype=text/css" type="text/css" media="screen" title="no title" charset="utf-8">
-
 
+
    <link href='http://fonts.googleapis.com/css?family=Bubbler+One' rel='stylesheet' type='text/css'>
-
 
+
    <link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>
-
.da-slider{
+
    <link href='http://fonts.googleapis.com/css?family=Coda' rel='stylesheet' type='text/css'>
-
width: 100%;
+
    <script src="https://2012.igem.org/Team:USTC-Software/js/jquery-1.7.1.min?action=raw&ctype=text/javascript" type="text/javascript" charset="utf-8"></script>
-
min-width: 520px;
+
   
-
height: 400px;
+
    <script type="text/javascript">
-
position: relative;
+
        $(document).ready(function(){
-
margin: 30px auto;
+
            $('div.member_details').hide();
-
overflow: hidden;
+
            $('div.member').click(function(){
-
-webkit-transition: background-position 1s ease-out 0.6s;
+
                $('div.member_details').hide();
-
-moz-transition: background-position 1s ease-out 0.6s;
+
                var detail = $(this).attr('id');
-
-o-transition: background-position 1s ease-out 0.6s;
+
                $('div#'+detail+'-details').fadeIn('slow'); //  display the coresponding details
-
-ms-transition: background-position 1s ease-out 0.6s;
+
            });
-
transition: background-position 1s ease-out 0.6s;
+
            $('div.detail_close').click(function(){
-
}
+
                $(this).parents('div.member_details').fadeOut('speed'); //  close the coresponding details
-
 
+
            });
-
#photo_zone_line_down{
+
        });
-
position:relative;
+
    </script>
-
width:100%;
+
   
-
height:40px;
+
</head>
-
background:url("https://static.igem.org/mediawiki/2012/d/dd/USTC-Software-images-photo_zone_line.png");
+
<body>
-
}
+
   
-
 
+
    <!-- members' thumbnails -->
-
.da-slide{
+
    <div id="member_feature_wrapper">
-
position: absolute;
+
        <div id="members">
-
width: 100%;
+
            <div id="meet-team"></div>
-
height: 100%;
+
           
-
top: 0px;
+
            <div class="member" id="member-kai">    <div class="member-name"><h5>Kai Kang</h5></div>    </div>
-
left: 0px;
+
            <div class="member" id="member-kaifeng"> <div class="member-name"><h5>Kaifeng Chen</h5></div>    </div>
-
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
+
            <div class="member" id="member-chao">    <div class="member-name"><h5>Chao Xu</h5></div>    </div>
-
text-align: left;
+
            <div class="member" id="member-litong">  <div class="member-name"><h5>Litong Jiang</h5></div>    </div>
-
}
+
            <div class="member" id="member-kaishuai"><div class="member-name"><h5>Kaishuai Yang</h5></div>    </div>
-
.da-slide-current{
+
            <div class="member" id="member-sen">    <div class="member-name"><h5>Sen Jiang</h5></div>    </div>
-
z-index: 1000;
+
            <div class="member" id="member-qi">      <div class="member-name"><h5>Qi Hu</h5></div>    </div>
-
}
+
            <div class="member" id="member-wenjuan"> <div class="member-name"><h5>Wenjuan Zhang</h5></div>    </div>
-
.da-slider-fb .da-slide{
+
            <div class="member" id="member-yunlong"> <div class="member-name"><h5>Yunlong Zheng</h5></div>    </div>
-
left: 100%;
+
       
-
}
+
            <!-- team logo -->
-
.da-slider-fb  .da-slide.da-slide-current{
+
            <div id="slogon"></div>
-
left: 0px;
+
        </div>
-
}
+
    </div>
-
.da-slide p.h2,
+
    <!-- end of members' thumbnails -->
-
.da-slide p,
+
   
-
.da-slide .da-link,
+
    <!-- members' details -->
-
.da-slide .da-img{
+
    <div id="member_details_wrapper">
-
position: absolute;
+
        <div class="member_details" id="member-kai-details">
-
opacity: 0;
+
            <div class="detail_close"></div>
-
left: 110%;
+
            <div class="details_member_name">
-
}
+
                <p class="h1">Kai Kang</p>
-
.da-slider-fb .da-slide p.h2,
+
            </div>
-
.da-slider-fb .da-slide p,
+
            <div class="member_photo" id="photo_kai"></div>
-
.da-slider-fb .da-slide .da-link{
+
            <div class="resume">
-
left: 10%;
+
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
opacity: 1;
+
            </div>
-
}
+
        </div>
-
.da-slider-fb .da-slide .da-img{
+
        <div class="member_details" id="member-kaifeng-details">
-
left: 60%;
+
            <div class="detail_close"></div>
-
opacity: 1;
+
            <div class="details_member_name">
-
}
+
                <p class="h1">Kaifeng Chen</p>
-
.da-slide p.h2{
+
            </div>
-
color: #fff;
+
            <div class="member_photo" id="photo_kaifeng"> </div>
-
font-size: 66px;
+
            <div class="resume">
-
        line-height:70px;
+
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
width: 50%;
+
            </div>
-
top: 60px;
+
        </div>
-
white-space: nowrap;
+
        <div class="member_details" id="member-chao-details">
-
z-index: 10;
+
            <div class="detail_close"></div>
-
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
+
            <div class="details_member_name">
-
font-family: 'Economica', Arial, sans-serif;
+
                <p class="h1">Chao Xu</p>
-
font-weight: 700;
+
            </div>
-
}
+
            <div class="member_photo" id="photo_chao"></div>
-
.da-slide p{
+
            <div class="resume">
-
width: 45%;
+
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
top: 155px;
+
            </div>
-
color: #ffffff;
+
        </div>
-
font-size: 18px;
+
        <div class="member_details" id="member-litong-details">
-
line-height: 26px;
+
            <div class="detail_close"></div>
-
height: 80px;
+
            <div class="details_member_name">
-
overflow: hidden;
+
                <p class="h1">Litong Jiang</p>
-
font-family: 'Economica', Arial, sans-serif;
+
            </div>
-
font-weight: 400;
+
            <div class="member_photo" id="photo_litong"> </div>
-
font-style: italic;
+
            <div class="resume">
-
}
+
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
.da-slide .da-img{
+
            </div>
-
text-align: center;
+
        </div>
-
width: 30%;
+
        <div class="member_details" id="member-kaishuai-details">
-
top: 70px;
+
            <div class="detail_close"></div>
-
height: 256px;
+
            <div class="details_member_name">
-
line-height: 320px;
+
                <p class="h1">Kaishuai Yang</p>
-
left: 110%; /*60%*/
+
            </div>
-
}
+
            <div class="member_photo" id="photo_kaishuai"></div>
-
.da-slide .da-link{
+
            <div class="resume">
-
top: 270px; /*depends on p height*/
+
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
border-radius: 30px;
+
            </div>
-
text-decoration:none;
+
        </div>
-
font-family: 'Economica', Arial, sans-serif;
+
        <div class="member_details" id="member-sen-details">
-
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+
            <div class="detail_close"></div>
-
color: #fff;
+
            <div class="details_member_name">
-
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+
                <p class="h1">Sen Jiang</p>
-
border: 4px solid rgba(255,255,255,0.8);
+
            </div>
-
padding: 2px 20px 0px;
+
            <div class="member_photo" id="photo_sen"></div>
-
font-size: 18px;
+
            <div class="resume">
-
line-height: 30px;
+
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
width: 80px;
+
            </div>
-
text-align: center;
+
        </div>
-
background: rgba(0,0,0,0.1);
+
        <div class="member_details" id="member-qi-details">
-
}
+
            <div class="detail_close"></div>
-
.da-slide .da-link:hover{
+
            <div class="details_member_name">
-
background: rgba(0,0,0,0.2);
+
                <p class="h1">Qi Hu</p>
-
text-decoration:underline;
+
            </div>
-
}
+
            <div class="member_photo" id="photo_qi"></div>
-
.da-dots{
+
            <div class="resume">
-
width: 100%;
+
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
position: absolute;
+
            </div>
-
text-align: center;
+
        </div>
-
left: 0px;
+
        <div class="member_details" id="member-wenjuan-details">
-
bottom: 0px;
+
            <div class="detail_close"></div>
-
z-index: 2000;
+
            <div class="details_member_name">
-
-moz-user-select: none;
+
                <p class="h1">Wenjuan Zhang</p>
-
-webkit-user-select: none;
+
            </div>
-
}
+
            <div class="member_photo" id="photo_wenjuan"></div>
-
.da-dots span{
+
            <div class="resume">
-
display: inline-block;
+
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
position: relative;
+
            </div>
-
width: 12px;
+
         </div>
-
height: 12px;
+
         <div class="member_details" id="member-yunlong-details">
-
border-radius: 50%;
+
            <div class="detail_close"></div>
-
background: black;
+
            <div class="details_member_name">
-
margin: 3px;
+
                <p class="h1">Yunlong Zheng</p>
-
cursor: pointer;
+
            </div>
-
box-shadow:
+
            <div class="member_photo" id="photo_yunlong"></div>
-
1px 1px 1px rgba(0,0,0,0.1) inset,
+
            <div class="resume">
-
1px 1px 1px rgba(255,255,255,0.1);
+
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
}
+
             </div>
-
.da-dots span.da-dots-current:after{
+
        </div>
-
content: '';
+
    </div>
-
width: 8px;
+
       
-
height: 8px;
+
     </div>
-
position: absolute;
+
      
-
top: 2px;
+
     <div id="thanks"></div>
-
left: 2px;
+
     <div id="links"></div>
-
border-radius: 50%;
+
</body>
-
background: rgb(255,255,255);
+
</html>
-
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
+
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
+
-
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
+
-
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
+
-
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
+
-
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
+
-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
+
-
}
+
-
.da-arrows{
+
-
-moz-user-select: none;
+
-
-webkit-user-select: none;
+
-
}
+
-
.da-arrows span{
+
-
position: absolute;
+
-
top: 200px;
+
-
height: 79px;
+
-
width: 38px;
+
-
cursor: pointer;
+
-
z-index: 2000;
+
-
opacity: 0;
+
-
-webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
+
-
-moz-transition: opacity 0.4s ease-in-out-out 0.2s;
+
-
-o-transition: opacity 0.4s ease-in-out-out 0.2s;
+
-
-ms-transition: opacity 0.4s ease-in-out-out 0.2s;
+
-
transition: opacity 0.4s ease-in-out-out 0.2s;
+
-
}
+
-
.da-slider:hover .da-arrows span{
+
-
opacity: 1;
+
-
}
+
-
.da-arrows span:after{
+
-
content: '';
+
-
position: absolute;
+
-
width: 38px;
+
-
height: 79px;
+
-
}
+
-
 
+
-
.da-arrows span.da-arrows-next:after{
+
-
background-position: top right;
+
-
}
+
-
.da-arrows span.da-arrows-prev{
+
-
left: 15px;
+
-
background: url('https://static.igem.org/mediawiki/2012/a/a2/USTC-Software-images-prev.png') no-repeat;
+
-
}
+
-
.da-arrows span.da-arrows-next{
+
-
right: 15px;
+
-
background: url('https://static.igem.org/mediawiki/2012/d/d3/USTC-Software-images-next.png') no-repeat;
+
-
}
+
-
 
+
-
.da-slide-current p.h2,
+
-
.da-slide-current p,
+
-
.da-slide-current .da-link{
+
-
left: 10%;
+
-
opacity: 1;
+
-
}
+
-
.da-slide-current .da-img{
+
-
left: 60%;
+
-
opacity: 1;
+
-
}
+
-
/* Animation classes and animations */
+
-
 
+
-
/* Slide in from the right*/
+
-
.da-slide-fromright p.h2{
+
-
-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
+
-
-moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
+
-
-o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
+
-
-ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
+
-
animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
+
-
}
+
-
.da-slide-fromright p{
+
-
-webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
+
-
-moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
+
-
-o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
+
-
-ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
+
-
animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
+
-
}
+
-
.da-slide-fromright .da-link{
+
-
-webkit-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
+
-
-moz-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
+
-
-o-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
+
-
-ms-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
+
-
animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
+
-
}
+
-
.da-slide-fromright .da-img{
+
-
-webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
+
-
-moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
+
-
-o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
+
-
-ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
+
-
animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
+
-
}
+
-
@-webkit-keyframes fromRightAnim1{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-webkit-keyframes fromRightAnim2{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-webkit-keyframes fromRightAnim3{
+
-
0%{ left: 110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-webkit-keyframes fromRightAnim4{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
 
+
-
@-moz-keyframes fromRightAnim1{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-moz-keyframes fromRightAnim2{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-moz-keyframes fromRightAnim3{
+
-
0%{ left: 110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-moz-keyframes fromRightAnim4{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
 
+
-
@-o-keyframes fromRightAnim1{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-o-keyframes fromRightAnim2{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-o-keyframes fromRightAnim3{
+
-
0%{ left: 110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-o-keyframes fromRightAnim4{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
 
+
-
@-ms-keyframes fromRightAnim1{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-ms-keyframes fromRightAnim2{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-ms-keyframes fromRightAnim3{
+
-
0%{ left: 110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-ms-keyframes fromRightAnim4{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
 
+
-
@keyframes fromRightAnim1{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@keyframes fromRightAnim2{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@keyframes fromRightAnim3{
+
-
0%{ left: 110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@keyframes fromRightAnim4{
+
-
0%{ left: 110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
/* Slide in from the left*/
+
-
.da-slide-fromleft p.h2{
+
-
-webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
+
-
-moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
+
-
-o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
+
-
-ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
+
-
animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
+
-
}
+
-
.da-slide-fromleft p{
+
-
-webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
+
-
-moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
+
-
-o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
+
-
-ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
+
-
animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
+
-
}
+
-
.da-slide-fromleft .da-link{
+
-
-webkit-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
+
-
-moz-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
+
-
-o-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
+
-
-ms-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
+
-
animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
+
-
}
+
-
.da-slide-fromleft .da-img{
+
-
-webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
+
-
-moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
+
-
-o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
+
-
-ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
+
-
animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
+
-
}
+
-
@-webkit-keyframes fromLeftAnim1{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-webkit-keyframes fromLeftAnim2{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-webkit-keyframes fromLeftAnim3{
+
-
0%{ left: -110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-webkit-keyframes fromLeftAnim4{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
 
+
-
@-moz-keyframes fromLeftAnim1{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-moz-keyframes fromLeftAnim2{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-moz-keyframes fromLeftAnim3{
+
-
0%{ left: -110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-moz-keyframes fromLeftAnim4{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
 
+
-
@-o-keyframes fromLeftAnim1{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-o-keyframes fromLeftAnim2{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-o-keyframes fromLeftAnim3{
+
-
0%{ left: -110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-o-keyframes fromLeftAnim4{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
 
+
-
@-ms-keyframes fromLeftAnim1{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-ms-keyframes fromLeftAnim2{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-ms-keyframes fromLeftAnim3{
+
-
0%{ left: -110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@-ms-keyframes fromLeftAnim4{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
 
+
-
@keyframes fromLeftAnim1{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@keyframes fromLeftAnim2{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@keyframes fromLeftAnim3{
+
-
0%{ left: -110%; opacity: 0; }
+
-
1%{ left: 10%; opacity: 0; }
+
-
100%{ left: 10%; opacity: 1; }
+
-
}
+
-
@keyframes fromLeftAnim4{
+
-
0%{ left: -110%; opacity: 0; }
+
-
100%{ left: 60%; opacity: 1; }
+
-
}
+
-
/* Slide out to the right */
+
-
.da-slide-toright p.h2{
+
-
-webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
+
-
-moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
+
-
-o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
+
-
-ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
+
-
animation: toRightAnim1 0.6s ease-in-out 0.6s both;
+
-
}
+
-
.da-slide-toright p{
+
-
-webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
+
-
-moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
+
-
-o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
+
-
-ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
+
-
animation: toRightAnim2 0.6s ease-in-out 0.3s both;
+
-
}
+
-
.da-slide-toright .da-link{
+
-
-webkit-animation: toRightAnim3 0.4s ease-in-out both;
+
-
-moz-animation: toRightAnim3 0.4s ease-in-out both;
+
-
-o-animation: toRightAnim3 0.4s ease-in-out both;
+
-
-ms-animation: toRightAnim3 0.4s ease-in-out both;
+
-
animation: toRightAnim3 0.4s ease-in-out both;
+
-
}
+
-
.da-slide-toright .da-img{
+
-
-webkit-animation: toRightAnim4 0.6s ease-in-out both;
+
-
-moz-animation: toRightAnim4 0.6s ease-in-out both;
+
-
-o-animation: toRightAnim4 0.6s ease-in-out both;
+
-
-ms-animation: toRightAnim4 0.6s ease-in-out both;
+
-
animation: toRightAnim4 0.6s ease-in-out both;
+
-
}
+
-
@-webkit-keyframes toRightAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-webkit-keyframes toRightAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-webkit-keyframes toRightAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
99%{ left: 10%; opacity: 0; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-webkit-keyframes toRightAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
30%{ left: 55%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
 
+
-
@-moz-keyframes toRightAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-moz-keyframes toRightAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-moz-keyframes toRightAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
99%{ left: 10%; opacity: 0; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-moz-keyframes toRightAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
30%{ left: 55%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
 
+
-
@-o-keyframes toRightAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-o-keyframes toRightAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-o-keyframes toRightAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
99%{ left: 10%; opacity: 0; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-o-keyframes toRightAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
30%{ left: 55%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
 
+
-
@-ms-keyframes toRightAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-ms-keyframes toRightAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-ms-keyframes toRightAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
99%{ left: 10%; opacity: 0; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@-ms-keyframes toRightAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
30%{ left: 55%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
 
+
-
@keyframes toRightAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@keyframes toRightAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@keyframes toRightAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
99%{ left: 10%; opacity: 0; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
@keyframes toRightAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
30%{ left: 55%;  opacity: 1; }
+
-
100%{ left: 100%; opacity: 0; }
+
-
}
+
-
/* Slide out to the left*/
+
-
.da-slide-toleft p.h2{
+
-
-webkit-animation: toLeftAnim1 0.6s ease-in-out both;
+
-
-moz-animation: toLeftAnim1 0.6s ease-in-out both;
+
-
-o-animation: toLeftAnim1 0.6s ease-in-out both;
+
-
-ms-animation: toLeftAnim1 0.6s ease-in-out both;
+
-
animation: toLeftAnim1 0.6s ease-in-out both;
+
-
}
+
-
.da-slide-toleft p{
+
-
-webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
+
-
-moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
+
-
-o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
+
-
-ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
+
-
animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
+
-
}
+
-
.da-slide-toleft .da-link{
+
-
-webkit-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
+
-
-moz-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
+
-
-o-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
+
-
-ms-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
+
-
animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
+
-
}
+
-
.da-slide-toleft .da-img{
+
-
-webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
+
-
-moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
+
-
-o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
+
-
-ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
+
-
animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
+
-
}
+
-
@-webkit-keyframes toLeftAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-webkit-keyframes toLeftAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-webkit-keyframes toLeftAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-webkit-keyframes toLeftAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
70%{ left: 30%;  opacity: 0; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
 
+
-
@-moz-keyframes toLeftAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-moz-keyframes toLeftAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-moz-keyframes toLeftAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-moz-keyframes toLeftAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
70%{ left: 30%;  opacity: 0; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
 
+
-
@-o-keyframes toLeftAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-o-keyframes toLeftAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-o-keyframes toLeftAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-o-keyframes toLeftAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
70%{ left: 30%;  opacity: 0; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
 
+
-
@-ms-keyframes toLeftAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-ms-keyframes toLeftAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-ms-keyframes toLeftAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@-ms-keyframes toLeftAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
70%{ left: 30%;  opacity: 0; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
 
+
-
@keyframes toLeftAnim1{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@keyframes toLeftAnim2{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
30%{ left: 15%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@keyframes toLeftAnim3{
+
-
0%{ left: 10%;  opacity: 1; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
@keyframes toLeftAnim4{
+
-
0%{ left: 60%;  opacity: 1; }
+
-
70%{ left: 30%;  opacity: 0; }
+
-
100%{ left: -50%; opacity: 0; }
+
-
}
+
-
 
+
-
 
+
-
#s-logo{
+
-
    height:300px;
+
-
    width:192px;
+
-
    background:url('https://static.igem.org/mediawiki/2012/8/81/USTC-Software-images-s-logo.png');
+
-
    position:absolute;
+
-
    top:-100px;
+
-
    left:-80px;
+
-
    z-index:1000;
+
-
}
+
-
 
+
-
 
+
-
/* styles for the feature grid */
+
-
#features_grid{
+
-
    width:980px;
+
-
    margin:50px auto;
+
-
    margin-top: 100px;
+
-
    padding:30px 10px;
+
-
    position:relative;
+
-
    background:url('https://static.igem.org/mediawiki/2012/d/de/USTC-Software-images-half-black.png');
+
-
}
+
-
 
+
-
.feature{
+
-
    height:250px;
+
-
    margin:0 20px;
+
-
    padding:20px 10px;
+
-
}
+
-
 
+
-
.feature_left{
+
-
    height:100%;
+
-
    width:35%;
+
-
    float:left;
+
-
    background:white;
+
-
}
+
-
 
+
-
.feature_right{
+
-
    height:100%;
+
-
    width:60%;
+
-
    float:right;
+
-
}
+
-
 
+
-
.feature + .feature{
+
-
    border-top: 1px solid white;
+
-
}
+
-
 
+
-
.feature_name{
+
-
    height:40px;
+
-
    width:100%;
+
-
    margin-bottom:20px;
+
-
    padding-left:10px;
+
-
    }
+
-
    .feature_name p.h2{
+
-
        display:block;
+
-
         font-size:30px;
+
-
         line-height:35px;
+
-
        color:white;
+
-
        font-family: 'Coda', sans-serif;
+
-
    }
+
-
 
+
-
.details{
+
-
    width:100%;
+
-
    padding:10px;
+
-
    height:150px;
+
-
    }
+
-
    .details p{
+
-
        color:white;
+
-
        font-family: 'Economica', Arial, sans-serif;
+
-
        font-style:italic;
+
-
    }
+
-
 
+
-
.more{
+
-
    margin-left:10px;
+
-
    height:30px;
+
-
    width:100px;
+
-
    }
+
-
    .more p{
+
-
        font-size:20px;
+
-
        font-family: 'Yanone Kaffeesatz', sans-serif;
+
-
        color:white;
+
-
        }
+
-
        .more p a{
+
-
             text-decoration:none;
+
-
            color:white;
+
-
            }
+
-
            .more p a:hover{
+
-
                text-decoration:underline;
+
-
            }
+
-
 
+
-
#slogon{
+
-
     width:580px;
+
-
     height:125px;
+
-
     background:url('https://static.igem.org/mediawiki/2012/d/db/USTC-Software-images-slogon.png');
+
-
     position:absolute;
+
-
    right:-120px;
+
-
    bottom:-50px;
+
-
}
+

Revision as of 12:00, 24 September 2012

global_header

igem
USTC-Software Team
Kai Kang
Kaifeng Chen
Chao Xu
Litong Jiang
Kaishuai Yang
Sen Jiang
Qi Hu
Wenjuan Zhang
Yunlong Zheng

Kai Kang

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Kaifeng Chen

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Chao Xu

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Litong Jiang

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Kaishuai Yang

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sen Jiang

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Qi Hu

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wenjuan Zhang

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Yunlong Zheng

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Retrieved from "http://2012.igem.org/Team:USTC-Software/css/team_style"