Team:SYSU-Software/humanpra

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 
-
<head>
 
-
<title>Team:SYSU-Software</title>
 
-
 
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-
<meta http-equiv="Content-Style-Type" content="text/css" />
 
-
 
-
<link href="https://raw.github.com/lovedayluk/iGEM2013/master/style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
 
-
<link href="https://2012.igem.org/Team:SYSU-Software/prefix.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
 
-
 
-
<link href="https://2012.igem.org/Team:SYSU-Software/bootstrap.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
 
-
<link href="https://2012.igem.org/Team:SYSU-Software/flatui.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
 
-
<link href="https://2013.igem.org/Team:SYSU-Software/humanpra.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
 
-
<!-- <link href="human practice/css/human practice.css" rel="stylesheet" type="text/css" /> -->
 
-
<link href="https://2013.igem.org/Team:SYSU-Software/header.css?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" />
 
-
 
-
 
-
<script src="https://2013.igem.org/Team:SYSU-Software/jquery-1.9.1.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
-
<script src="https://2013.igem.org/Team:SYSU-Software/bootstrap.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
-
<script src="https://2013.igem.org/Team:SYSU-Software/prefix.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
-
<script src="https://2013.igem.org/Team:SYSU-Software/humanpra.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
-
 
-
 
-
 
-
<style type="text/css">
 
*{list-style-type:none;}
*{list-style-type:none;}
/* zoombox */
/* zoombox */
.zoombox{width:970px;margin:20px auto 0 auto;}
.zoombox{width:970px;margin:20px auto 0 auto;}
-
.zoompic{border:solid 1px #dfdfdf;width:968px;height:500px;background:url(https://static.igem.org/mediawiki/2013/4/42/Loading.gif) no-repeat 50% 50%;}
+
.zoompic{width:968px;height:500px;background:url(https://static.igem.org/mediawiki/2013/4/42/Loading.gif) no-repeat 50% 50%;text-align:center;}
-
.zoompic img{height: 500px;}
+
.zoompic img{height: 500px;width:auto;margin:auto;}
.sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;}
.sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;}
.sliderbox .arrow-btn{z-index:1000;width:38px;height:76px;background:url(https://static.igem.org/mediawiki/2013/e/ed/Arrow-btn.png) no-repeat;cursor:pointer;}
.sliderbox .arrow-btn{z-index:1000;width:38px;height:76px;background:url(https://static.igem.org/mediawiki/2013/e/ed/Arrow-btn.png) no-repeat;cursor:pointer;}
Line 40: Line 15:
.sliderbox .slider li img{border:solid 1px #dfdfdf;}
.sliderbox .slider li img{border:solid 1px #dfdfdf;}
.sliderbox .slider li.current img{border:solid 1px #3366cc;}
.sliderbox .slider li.current img{border:solid 1px #3366cc;}
-
</style>
 
-
<script type="text/javascript">
 
-
</script>
 
-
<head>
 
-
<meta charset="utf-8">
 
-
<title>new</title>
 
-
</head>
 
 +
*{
 +
padding:0px;
 +
margin: 0px;
 +
}
 +
body {
 +
height: 100%;
 +
width: 100%;
 +
font-family: 'Arial';
 +
}
-
<body>
+
/*human practice container*/
-
<div id="navigation"></div>
+
#practice-container{
 +
width: 100%;
 +
margin: 0 auto;
 +
}
 +
#practice-top-image{
 +
width: 100%;
 +
}
 +
#practice-content{
 +
background-color: white;
 +
width:100%;
 +
margin: auto;
 +
}
 +
#practice-content-image{
 +
padding-top: 8px;
 +
width: 980px;
 +
margin: 0 auto;
 +
}
 +
#practice-content-image img{
 +
width: 100%;
 +
}
 +
#practice-content-header{
 +
padding-top: 40px;
-
<div class="wrapper colored-wrapper-dff5f2">
+
width: 200px;
-
  <div id="practice-container">
+
margin: 0 auto;
-
<!-- practice content -->
+
-
    <div id="practice-top">
+
-
      <img id="practice-top-image" src="https://static.igem.org/mediawiki/2013/b/b7/Human_practice_00.png">
+
-
    </div>
+
-
    <div id="practice-content">
+
font-size: 35px;
-
      <div id="practice-content-header">
+
color: #34495e;
-
        TEDx Salon
+
font-weight: bolder;
-
      </div>
+
}
-
      <div id="practice-content-image">
+
#practice-introduction{
-
        <img src="https://static.igem.org/mediawiki/2013/0/09/Human_practice_11.png">
+
padding-top: 40px;
-
      </div>
+
-
      <div id="practice-introduction">
+
width: 151px;
-
        Introduction
+
margin:0 auto;
-
      </div>
+
-
      <div id="practice-introduction-text">
+
font-size: 25px;
-
        Accurate simulation and gene circuit design are essential but difficult parts in synthetic biology.Here, we designed CAST to cover the workflow from beginning to end, users can focus on function design and the gene circuit would be automatically designed. Furthermore, we developed a new simulation model that work with standard dynamic characteristic and verified by wetlab experiments. Moreover, we build an expandable database that users can contribute their own dynamic information which would lead to more accurate and sufficient dynamic information of all the Biobricks. Finally, our software is designed as an easy deployed server so that it can be used on personal purpose or shared by a whole lab or institution.
+
color:#65d2c0;
-
      </div>
+
font-weight: bolder;
 +
}
 +
#practice-introduction-text{
 +
padding-top: 70px;
 +
width: 800px;
 +
margin:0 auto;
-
      <div id="practice-slide">
+
text-align: justify;
-
        <div class="zoombox">
+
font-size: 18px;
-
          <div class="zoompic">
+
line-height: 25px;
-
            <img src="https://static.igem.org/mediawiki/2013/a/a2/Sysutedx_%283%29title.jpg" width="1000" height="400"  />
+
}
-
          </div>
+
-
 
+
-
          <div class="sliderbox">
+
-
            <div id="btn-left" class="arrow-btn dasabled"></div>
+
-
              <div class="slider" id="thumbnail">
+
-
                <ul>               
+
-
                  <li class="current">
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/6/6b/Sysutedx_%281%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/6/6b/Sysutedx_%281%29.jpg" width="115" height="74" />
+
-
</span>
+
-
                  </li>
+
-
                  <li>
+
#practice-slide{
-
<span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/4/48/Sysutedx_%282%29.jpg">
+
margin-top: 100px;
-
                      <img src="https://static.igem.org/mediawiki/2013/4/48/Sysutedx_%282%29.jpg" width="115" height="74" />
+
}
-
</span>
+
-
                  </li>
+
-
                  <li>
+
#practice-slide{ 
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/a/a2/Sysutedx_%283%29title.jpg">
+
padding-bottom: 60px;
-
                      <img src="https://static.igem.org/mediawiki/2013/a/a2/Sysutedx_%283%29title.jpg" width="115" height="74" />
+
width: 980px;
-
</span>
+
margin: 0 auto;
-
                  </li>
+
}
 +
/*human practice content*/
 +
#practice-game{
 +
background-color: #dff5f2;
 +
margin: auto;
 +
width: 980px;
 +
}
 +
#game-header{
 +
text-align: center;
 +
padding-top: 50px;
 +
font-size: 33px;
 +
color: #34495e;
 +
font-weight: bolder;
 +
}
 +
#game-show{
 +
padding-top: 60px;
 +
padding-bottom: 110px;
 +
width: 968px;
 +
margin: 0 auto;
 +
}
 +
#game-presentaion img{
 +
width:500px;
 +
}
 +
#game-introdution{
 +
margin-left: 30px;
 +
width: 430px;
 +
display: block;
 +
text-align: justify;
 +
font-size: 18px;
 +
line-height: 25px;
 +
}
 +
/*footer*/
 +
#sysu-footer{
 +
width: 100%;
 +
margin:0 auto;
-
                  <li>
+
position: relative;
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/0/07/Sysutedx_%284%29.jpg">
+
bottom: 0px;
-
                      <img src="https://static.igem.org/mediawiki/2013/0/07/Sysutedx_%284%29.jpg" width="115" height="74" />
+
overflow: hidden;
-
</span>
+
-
                  </li>
+
-
                  <li>
+
background-color: #dff5f2;
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/3/3d/Sysutedx_%285%29.jpg">
+
}
-
                      <img src="https://static.igem.org/mediawiki/2013/3/3d/Sysutedx_%285%29.jpg" width="115" height="74" />
+
#bottom-image{
-
</span>
+
width: 100%;
-
                  </li>
+
}
-
                  <li>
 
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/7/77/Sysutedx_%286%29.jpg">
 
-
                      <img src="https://static.igem.org/mediawiki/2013/7/77/Sysutedx_%286%29.jpg" width="115" height="74" />
 
-
</span>
 
-
                  </li>
 
-
                  <li>
 
-
    <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/5/53/Sysutedx_%287%29.jpg">
 
-
                      <img src="https://static.igem.org/mediawiki/2013/5/53/Sysutedx_%287%29.jpg" width="115" height="74" />
 
-
</span>
 
-
                  </li>
 
-
                  <li>
+
a:focus{
-
                  <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/7/72/Sysutedx_%288%29.jpg">
+
outline-color:#544444;
-
                      <img src="https://static.igem.org/mediawiki/2013/7/72/Sysutedx_%288%29.jpg" width="115" height="74" />
+
}
-
</span>
+
-
                  </li>
+
-
                  <li>                   
+
.thumbnails {
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/a/a5/Sysutedx_%289%29.jpg">
+
cursor: pointer;
-
                      <img src="https://static.igem.org/mediawiki/2013/a/a5/Sysutedx_%289%29.jpg" width="115" height="74" />
+
}
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
#top_board.rotate {
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/a/a7/Sysutedx_%2810%29.jpg">
+
transform-origin: 50% 0%;
-
                      <img src="https://static.igem.org/mediawiki/2013/a/a7/Sysutedx_%2810%29.jpg" width="115" height="74" />
+
-webkit-transform-origin: 50% 0%;
-
      </span>
+
-moz-transform-origin: 50% 0%;
-
                  </li>
+
-o-transform-origin: 50% 0%;
 +
animation: myrotate 2s linear;
 +
-webkit-animation: myrotate 2s linear;
 +
-moz-animation: myrotate 2s linear;
 +
-o-animation: myrotate 2s linear;
 +
}
-
                  <li>                   
+
@keyframes myrotate {
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/8/82/Sysutedx_%2811%29.jpg">
+
0% {transform:rotate(0deg);}
-
                      <img src="https://static.igem.org/mediawiki/2013/8/82/Sysutedx_%2811%29.jpg" width="115" height="74" />
+
25% {transform:rotate(30deg);}
-
      </span>
+
75% {transform:rotate(-20deg);}
-
                  </li>
+
100% {transform:rotate(0deg);}
-
                  <li>                   
+
}
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/1/10/Sysutedx_%2812%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/1/10/Sysutedx_%2812%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/e/e3/Sysutedx_%2813%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/e/e3/Sysutedx_%2813%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/d/d7/Sysutedx_%2814%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/d/d7/Sysutedx_%2814%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/b/be/Sysutedx_%2815%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/b/be/Sysutedx_%2815%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/7/76/Sysutedx_%2816%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/7/76/Sysutedx_%2816%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/e/e1/Sysutedx_%2817%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/e/e1/Sysutedx_%2817%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/0/09/Sysutedx_%2818%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/0/09/Sysutedx_%2818%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/3/3f/Sysutedx_%2819%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/3/3f/Sysutedx_%2819%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/1/13/Sysutedx_%2820%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/1/13/Sysutedx_%2820%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/d/da/Sysutedx_%2821%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/d/da/Sysutedx_%2821%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/a/ab/Sysutedx_%2822%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/a/ab/Sysutedx_%2822%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/f/f9/Sysutedx_%2823%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/f/f9/Sysutedx_%2823%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/c/c1/Sysutedx_%2824%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/c/c1/Sysutedx_%2824%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/c/c3/Sysutedx_%2825%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/c/c3/Sysutedx_%2825%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/8/8c/Sysutedx_%2826%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/8/8c/Sysutedx_%2826%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/9/9f/Sysutedx_%2827%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/9/9f/Sysutedx_%2827%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/8/8c/Sysutedx_%2828%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/8/8c/Sysutedx_%2826%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/9/9f/Sysutedx_%2829%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/8/8c/Sysutedx_%2826%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/d/d8/Sysutedx_%2830%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/d/d8/Sysutedx_%2830%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/a/a5/Sysutedx_%2831%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/a/a5/Sysutedx_%2831%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                  <li>                   
+
-
      <span class="thumbnails" data-path="https://static.igem.org/mediawiki/2013/6/66/Sysutedx_%2832%29.jpg">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/6/66/Sysutedx_%2832%29.jpg" width="115" height="74" />
+
-
      </span>
+
-
                  </li>
+
-
                </ul>
+
-
              </div>
+
-
            <div id="btn-right" class="arrow-btn"></div>
+
-
          </div>
+
-
 
+
-
        </div><!--slider end-->
+
-
      </div>
+
-
    </div>
+
@-webkit-keyframes myrotate {
 +
0% {-webkit-transform:rotate(0deg);}
 +
25% {-webkit-transform:rotate(30deg);}
 +
75% {-webkit-transform:rotate(-20deg);}
 +
100% {-webkit-transform:rotate(0deg);}
 +
}
-
    <div id="practice-game">
+
@-moz-keyframes myrotate {
-
      <div id="game-header">
+
0% {-moz-transform:rotate(0deg);}
-
        Game
+
25% {-moz-transform:rotate(30deg);}
-
      </div>
+
75% {-moz-transform:rotate(-20deg);}
-
      <div>
+
100% {-moz-transform:rotate(0deg);}
-
        <div id="game-show">
+
}
-
          <table>
+
-
            <tr>
+
-
              <td>
+
-
                <a href="">
+
-
                  <span id="game-presentaion">
+
-
                    <img src="https://static.igem.org/mediawiki/2013/5/51/Wikiad.png.png">
+
-
                  </span>
+
-
                </a>
+
-
              </td>
+
-
              <td>
+
@-o-keyframes myrotate {
-
                <span id="game-introdution">
+
0% {-o-transform:rotate(0deg);}
-
                  Accurate simulation and gene circuit design are essential but difficult parts in synthetic biology.Here, we designed CAST to cover the workflow from beginning to end, users can focus on function design and the gene circuit would be automatically designed. Furthermore, we developed a new simulation model that work with standard dynamic characteristic and verified by wetlab experiments. Moreover, we build an expandable database that users can contribute their own dynamic information which would lead to more accurate and sufficient dynamic information of all the Biobricks. Finally, our software is designed as an easy deployed server so that it can be used on personal purpose or shared by a whole lab or institution.
+
25% {-o-transform:rotate(30deg);}
-
                </span>
+
75% {-o-transform:rotate(-20deg);}
-
            </td>
+
100% {-o-transform:rotate(0deg);}
-
            </tr>
+
}
-
          </table>
+
#practice-top .medal {
-
        </div>
+
width: 80px;
-
      </div>
+
vertical-align: top;
-
    </div>
+
}
-
  </div>
+
#practice-top {
-
</div>
+
text-align: center;
-
<!--page footer-->
+
vertical-align: top;
-
  <div id="sysu-footer"> 
+
border-top: solid 8px #6f3802;
-
    <img id="bottom-image" src="https://static.igem.org/mediawiki/2013/d/d9/Sysu-footer.png">
+
margin-top: 100px;
-
  </div>
+
width: 100%;
 +
padding-bottom: 15px;
 +
}
 +
#top_board {
 +
padding: 0 50px;
 +
}
-
</body>
+
.zoompic img {
-
</html>
+
/* transition: all 0.3s; */
 +
/* -webkit-transition: all 0.3s; */
 +
/* -moz-transition: all 0.3s; */
 +
/* -o-transition: all 0.3s; */
 +
}

Revision as of 06:22, 27 September 2013

  • {list-style-type:none;}

/* zoombox */ .zoombox{width:970px;margin:20px auto 0 auto;} .zoompic{width:968px;height:500px;background:url(Loading.gif) no-repeat 50% 50%;text-align:center;} .zoompic img{height: 500px;width:auto;margin:auto;} .sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;} .sliderbox .arrow-btn{z-index:1000;width:38px;height:76px;background:url(Arrow-btn.png) no-repeat;cursor:pointer;} .sliderbox #btn-left{float:left;background-position:0 0;} .sliderbox #btn-left.dasabled{background-position:0 -76px;} .sliderbox #btn-right{float:right;background-position:-38px 0;} .sliderbox #btn-right.dasabled{background-position:-38px -76px;} .sliderbox .slider{float:left;height:76px;width:870px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;} .sliderbox .slider ul{position:absolute;left:0;width:999em;} .sliderbox .slider li{float:left;width:121px;height:76px;text-align:center;} .sliderbox .slider li img{border:solid 1px #dfdfdf;} .sliderbox .slider li.current img{border:solid 1px #3366cc;}



  • {

padding:0px; margin: 0px; } body { height: 100%; width: 100%; font-family: 'Arial'; }

/*human practice container*/

  1. practice-container{

width: 100%; margin: 0 auto; }

  1. practice-top-image{

width: 100%; }

  1. practice-content{

background-color: white; width:100%; margin: auto; }

  1. practice-content-image{

padding-top: 8px; width: 980px; margin: 0 auto; }

  1. practice-content-image img{

width: 100%; }

  1. practice-content-header{

padding-top: 40px;

width: 200px; margin: 0 auto;

font-size: 35px; color: #34495e; font-weight: bolder; }

  1. practice-introduction{

padding-top: 40px;

width: 151px; margin:0 auto;

font-size: 25px; color:#65d2c0; font-weight: bolder; }

  1. practice-introduction-text{

padding-top: 70px; width: 800px; margin:0 auto;

text-align: justify; font-size: 18px; line-height: 25px; }

  1. practice-slide{

margin-top: 100px; }

  1. practice-slide{

padding-bottom: 60px; width: 980px; margin: 0 auto; } /*human practice content*/

  1. practice-game{

background-color: #dff5f2; margin: auto; width: 980px; }

  1. game-header{

text-align: center; padding-top: 50px; font-size: 33px; color: #34495e; font-weight: bolder; 

}
#game-show{

padding-top: 60px; padding-bottom: 110px; width: 968px; margin: 0 auto; 

}
#game-presentaion img{

width:500px; 

}
#game-introdution{

margin-left: 30px; width: 430px; display: block; text-align: justify; font-size: 18px; line-height: 25px; 

}
/*footer*/
#sysu-footer{

width: 100%; margin:0 auto;

position: relative; bottom: 0px; overflow: hidden;

background-color: #dff5f2; }

  1. bottom-image{

width: 100%; }


a:focus{ outline-color:#544444; }

.thumbnails { cursor: pointer; }

  1. top_board.rotate {

transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; animation: myrotate 2s linear; -webkit-animation: myrotate 2s linear; -moz-animation: myrotate 2s linear; -o-animation: myrotate 2s linear; }

@keyframes myrotate { 0% {transform:rotate(0deg);} 25% {transform:rotate(30deg);} 75% {transform:rotate(-20deg);} 100% {transform:rotate(0deg);} }

@-webkit-keyframes myrotate { 0% {-webkit-transform:rotate(0deg);} 25% {-webkit-transform:rotate(30deg);} 75% {-webkit-transform:rotate(-20deg);} 100% {-webkit-transform:rotate(0deg);} }

@-moz-keyframes myrotate { 0% {-moz-transform:rotate(0deg);} 25% {-moz-transform:rotate(30deg);} 75% {-moz-transform:rotate(-20deg);} 100% {-moz-transform:rotate(0deg);} }

@-o-keyframes myrotate { 0% {-o-transform:rotate(0deg);} 25% {-o-transform:rotate(30deg);} 75% {-o-transform:rotate(-20deg);} 100% {-o-transform:rotate(0deg);} }

  1. practice-top .medal {

width: 80px; vertical-align: top; }

  1. practice-top {

text-align: center; vertical-align: top; border-top: solid 8px #6f3802; margin-top: 100px; width: 100%; padding-bottom: 15px; }

  1. top_board {

padding: 0 50px; }

.zoompic img { /* transition: all 0.3s; */ /* -webkit-transition: all 0.3s; */ /* -moz-transition: all 0.3s; */ /* -o-transition: all 0.3s; */ }

Retrieved from "http://2013.igem.org/Team:SYSU-Software/humanpra"