Team:SYSU-Software/humanpra.css

From 2013.igem.org

(Difference between revisions)
(Created page with " *{ padding:0px; margin: 0px; } body { height: 100%; width: 100%; background-color: #CCC; font-family: 'Arial'; } /*head...")
 
(9 intermediate revisions not shown)
Line 1: Line 1:
-
    *{
+
*{list-style-type:none;}
-
      padding:0px;
+
/* zoombox */
-
      margin: 0px;
+
.zoombox{width:970px;margin:20px auto 0 auto;}
-
    }
+
.zoompic{width:968px;height:500px;background:url(https://static.igem.org/mediawiki/2013/4/42/Loading.gif) no-repeat 50% 50%;text-align:center;}
-
    body {
+
.zoompic img{height: 500px;width:auto;margin:auto;}
-
      height: 100%;
+
.sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;}
-
      width: 100%;
+
.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;}
-
      background-color: #CCC;
+
.sliderbox #btn-left{float:left;background-position:0 0;}
-
      font-family: 'Arial';
+
.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;}
-
    /*header images */
 
-
    #team-header{
 
-
      margin: 0 auto;
 
-
      z-index: 100;
 
-
      height: 200px;
+
*{
-
      width: 980px;
+
padding:0px;
-
      background-color: white;
+
margin: 0px;
 +
}
 +
body {
 +
height: 100%;
 +
width: 100%;
 +
font-family: 'Arial';
 +
}
-
      font-family: 'Arial';
+
/*human practice container*/
-
    }
+
#practice-container{
-
    #team-header-logo{
+
width: 100%;
-
      position: relative;
+
margin: 0 auto;
-
      left: 20px;
+
}
-
      top:30px;
+
#practice-top-image{
-
    }
+
width: 100%;
-
    #team-header-text{
+
}
-
      position: relative;
+
#practice-content{
-
      left: 130px;
+
background-color: white;
-
      top: -67px;
+
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;
-
    #boss-header-image{
+
width: 290px;
-
      position: relative;
+
margin: 0 auto;
-
      left: 285px;
+
-
      top: -85px;
+
-
    }
+
-
    /*navigation*/
+
font-size: 35px;
-
    #navigation1{
+
color: #34495e;
-
      float: right;
+
font-weight: bolder;
-
      height: 40px;
+
}
-
      z-index: 100;
+
#practice-introduction{
 +
padding-top: 40px;
-
      position: relative;
+
width: 151px;
-
      top: -37px;
+
margin:0 auto;
-
    }
+
-
    .navbar {
+
font-size: 25px;
-
    margin-bottom: 0px;
+
color:#65d2c0;
-
    overflow: visible;
+
font-weight: bolder;
-
    }
+
}
 +
#practice-introduction-text{
 +
padding-top: 30px;
 +
width: 800px;
 +
margin:0 auto;
-
    .nav{
+
text-align: justify;
-
      display: inline;
+
font-size: 18px;
 +
line-height: 25px;
 +
}
-
      height: 40px;
+
#practice-slide{
-
      background-color:#A8DBD2;   
+
margin-top: 100px;
-
    }
+
}
-
       
+
-
    .navbar-inverse .nav > li > a{
+
-
      font-size: 14px;
+
-
      border: none;
+
-
      height: 40px;
+
-
      padding:0px 20px;
+
-
      line-height: 40px;
+
#practice-slide{ 
-
    }
+
padding-bottom: 60px;
-
    #nav-li{
+
width: 980px;
-
      height: 40px;
+
margin: 0 auto;
-
    }
+
}
-
   
+
/*human practice content*/
-
    .navbar-inverse .nav > li.active > a{
+
#practice-game{
-
      background-color: #FFE14B;
+
background-color: #dff5f2;
-
      height: 40px;
+
margin: auto;
-
    }
+
width: 980px;
-
    .navbar-inverse .nav > li.active > a{
+
}
-
      background-color: #FFE14B;  
+
#game-header{
-
    }
+
text-align: center;
-
    /*sub navs*/
+
padding-top: 50px;
-
    #sub-link1{
+
font-size: 33px;
-
      width:90px;
+
color: #34495e;
-
      background-color:#A8DBD2;  
+
font-weight: bolder;
-
    }  
+
}
-
    .navbar .nav > li > ul:before {
+
#game-show{
-
      border-width: 0px;
+
padding-top: 60px;
-
    }
+
padding-bottom: 110px;
 +
width: 968px;
 +
margin: 0 auto;
 +
}
 +
#game-presentaion img{
 +
width:500px;
 +
        height:350px;
 +
}
 +
#game-introdution{
 +
margin-left: 30px;
 +
width: 470px;
 +
display: block;
 +
text-align: justify;
 +
font-size: 18px;
 +
line-height: 25px;
 +
}
 +
/*footer*/
 +
#sysu-footer{
 +
width: 100%;
 +
margin:0 auto;
-
    #sub-link2{
+
position: relative;
-
      width:100px;
+
bottom: 0px;
-
      background-color:#A8DBD2;
+
overflow: hidden;
-
    }   
+
-
    #sub-link3{
+
-
      width:135px;
+
-
      background-color:#A8DBD2;  
+
-
    }   
+
background-color: #dff5f2;
-
    #sub-link4{
+
}
-
      background-color:#A8DBD2;  
+
#bottom-image{
-
      width:70px;
+
width: 100%;
-
    }  
+
}
-
    /*human practice container*/
+
a:focus{
-
    #practice-container{
+
outline-color:#544444;  
-
      width: 980px;
+
}
-
      margin: 0 auto;
+
-
      height: 100%;
+
-
    }
+
 +
.thumbnails {
 +
cursor: pointer;
 +
}
-
    /*human practice content*/
+
#top_board.rotate {
-
    #shiyantai{
+
transform-origin: 50% 0%;
-
      background-color: #f4dc9c;
+
-webkit-transform-origin: 50% 0%;
-
      width: 980px;
+
-moz-transform-origin: 50% 0%;
-
    }
+
-o-transform-origin: 50% 0%;
-
    #shiyantai-image{
+
animation: myrotate 2s linear;
-
    }
+
-webkit-animation: myrotate 2s linear;
-
    #package{
+
-moz-animation: myrotate 2s linear;
-
      width: 400px;
+
-o-animation: myrotate 2s linear;
-
      position: absolute;
+
}
-
      top: 404px;
+
-
     
+
-
      left: 50%;
+
-
      margin-left: -200px;
+
-
    }
+
 +
@keyframes myrotate {
 +
0% {transform:rotate(0deg);}
 +
25% {transform:rotate(30deg);}
 +
75% {transform:rotate(-20deg);}
 +
100% {transform:rotate(0deg);}
 +
}
-
    #practice-content{
+
@-webkit-keyframes myrotate {
-
      color: #5d2f02;
+
0% {-webkit-transform:rotate(0deg);}
-
      height: 100%;
+
25% {-webkit-transform:rotate(30deg);}
-
      background-color: #f4dc9c;
+
75% {-webkit-transform:rotate(-20deg);}
-
    }
+
100% {-webkit-transform:rotate(0deg);}
-
    #part1-header{
+
}
-
      position: relative;
+
-
      font-size: 20px;
+
@-moz-keyframes myrotate {
-
      font-weight: bold;
+
0% {-moz-transform:rotate(0deg);}
 +
25% {-moz-transform:rotate(30deg);}
 +
75% {-moz-transform:rotate(-20deg);}
 +
100% {-moz-transform:rotate(0deg);}
 +
}
-
      padding-top: 65px;
+
@-o-keyframes myrotate {
-
      margin-left: 65px;
+
0% {-o-transform:rotate(0deg);}
-
    }
+
25% {-o-transform:rotate(30deg);}
-
    #part1-image{
+
75% {-o-transform:rotate(-20deg);}
-
      position: relative;
+
100% {-o-transform:rotate(0deg);}
-
      margin-top: 30px;
+
}
-
      margin-left: 65px;
+
#practice-top .medal {
-
    }
+
width: 80px;
-
    #part1-content{
+
vertical-align: top;
-
      margin-left: 65px;
+
}
-
      margin-top: 40px;
+
#practice-top {
-
      font-size: 15px;
+
text-align: center;
-
      font-weight: bold;
+
vertical-align: top;
-
 
+
border-top: solid 8px #6f3802;
-
    }
+
width: 100%;
-
    #part2-header{
+
padding-bottom: 15px;
-
      position: relative;
+
}
-
 
+
#top_board {
-
      font-size: 20px;
+
padding: 0 50px;
-
      font-weight: bold;
+
}
-
 
+
-
      margin-top: 65px;
+
-
      margin-left: 65px;
+
-
    }
+
-
    #part2-content{
+
-
      margin-left: 65px;
+
-
      margin-top: 40px;
+
-
      padding-bottom: 50px;
+
-
 
+
-
      font-size: 15px;
+
-
      font-weight: bold;
+
-
 
+
-
    }
+
-
 
+
-
    /*footer*/
+
-
    #team-footer{
+
-
      width: 980px;
+
-
      margin:0 auto;
+
-
 
+
-
      position: relative;
+
-
      bottom: 0px;
+
-
      overflow: hidden;
+
-
 
+
-
      background-color: #ebdfd2;
+
-
    }
+
-
    /*instructions*/
+
-
    #team-sub{
+
-
      position: relative;
+
-
 
+
-
      margin-bottom: 30px;
+
-
    }
+
-
    #subscribe{
+
-
      position: relative;
+
-
    }
+
-
    #subscribe-header{
+
-
      position: relative;
+
-
      top: 25px;
+
-
      left: 145px;
+
-
 
+
-
      font-weight: bolder;
+
-
      font-size: 25px;
+
-
    }
+
-
    #subscribe-content{
+
-
      position: relative;
+
-
      top: 45px;
+
-
      left: 145px;
+
-
 
+
-
      font-weight: bold;
+
-
      line-height: 10px;
+
-
    }
+
-
    #link{
+
-
      position: relative;
+
-
      left: 100px;
+
-
    }
+
-
    #link-header{
+
-
      position: relative;
+
-
      top: 20px;
+
-
      left: 180px;
+
-
 
+
-
      font-weight:bolder;
+
-
      font-size: 25px;
+
-
    }
+
-
    #link-content{
+
-
      position: relative;
+
-
      top: 34px;
+
-
      left: 180px;
+
-
    }
+
-
 
+
-
    #link-content a{
+
-
      text-decoration: none;
+
-
    }
+
-
    /*bottom image*/
+
-
    #bottom-image{
+
-
      position: relative;
+
-
      bottom: 0px;
+
-
    }
+
-
 
+
-
 
+
-
 
+
-
    a:focus{
+
-
      outline-color:#544444;  
+
-
    }
+

Latest revision as of 02:49, 28 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: 290px; 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: 30px; 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; 

        height:350px;
}
#game-introdution{

margin-left: 30px; width: 470px; 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; width: 100%; padding-bottom: 15px; }

  1. top_board {

padding: 0 50px; }

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