Team:SYSU-Software/humanpra.css

From 2013.igem.org

(Difference between revisions)
 
(7 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;}
-
      font-family: 'Arial';
+
.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;}
-
    /*human practice container*/
 
-
    #practice-container{
 
-
      width: 980px;
 
-
      margin: 0 auto;
 
-
      height: 100%;
 
-
    }
 
-
    #practice-top-image{
 
-
      width: 100%;
 
-
    }
 
-
    #practice-content{
 
-
      background-color: white;
 
-
      width:100%;
 
-
    }
 
-
    #practice-content-image{
 
-
      padding-top: 8px;
 
-
      width: 1000px;
 
-
      margin: 0 auto;
 
-
    }
 
-
    #practice-content-image img{
 
-
      width: 1000px;
 
-
      height: 350px;
 
-
    }
 
-
    #practice-content-header{
 
-
      padding-top: 40px;
 
-
      width: 200px;
 
-
      margin: 0 auto;
 
-
      font-size: 35px;
 
-
      color: #34495e;
 
-
      font-weight: bolder;
 
-
    }
 
-
    #practice-introduction{
+
*{
-
      padding-top: 40px;
+
padding:0px;
 +
margin: 0px;
 +
}
 +
body {
 +
height: 100%;
 +
width: 100%;
 +
font-family: 'Arial';
 +
}
-
      width: 151px;
+
/*human practice container*/
-
      margin:0 auto;
+
#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;
-
      font-size: 25px;
+
width: 290px;
-
      color:#65d2c0;
+
margin: 0 auto;
-
      font-weight: bolder;
+
-
    }
+
-
    #practice-introduction-text{
+
-
      padding-top: 70px;
+
-
      width: 800px;
+
-
      margin:0 auto;
+
-
      text-align: justify;
+
font-size: 35px;
-
      font-size: 18px;
+
color: #34495e;
-
      line-height: 25px;
+
font-weight: bolder;
-
    }
+
}
-
    #practice-slide{
+
#practice-introduction{
-
      margin-top: 100px;
+
padding-top: 40px;
-
    }
+
-
    #practice-slide{ 
+
width: 151px;
-
      padding-bottom: 60px;
+
margin:0 auto;
-
    }
+
-
    /*human practice content*/
+
-
    #practice-game{
+
-
      background-color: #dff5f2;
+
-
    }
+
-
  #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;
+
font-size: 25px;
-
      bottom: 0px;
+
color:#65d2c0;
-
      overflow: hidden;
+
font-weight: bolder;
 +
}
 +
#practice-introduction-text{
 +
padding-top: 30px;
 +
width: 800px;
 +
margin:0 auto;
-
      background-color: #dff5f2;
+
text-align: justify;
-
    }
+
font-size: 18px;
-
    #bottom-image{
+
line-height: 25px;
-
      width: 100%;
+
}
-
    }
+
 +
#practice-slide{
 +
margin-top: 100px;
 +
}
 +
#practice-slide{ 
 +
padding-bottom: 60px;
 +
width: 980px;
 +
margin: 0 auto;
 +
}
 +
/*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;
 +
        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;
-
    a:focus{
+
position: relative;
-
      outline-color:#544444;  
+
bottom: 0px;
-
    }
+
overflow: hidden;
 +
 
 +
background-color: #dff5f2;
 +
}
 +
#bottom-image{
 +
width: 100%;
 +
}
 +
 
 +
 
 +
 
 +
a:focus{
 +
outline-color:#544444;  
 +
}
 +
 
 +
.thumbnails {
 +
cursor: pointer;
 +
}
 +
 
 +
#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);}
 +
}
 +
#practice-top .medal {
 +
width: 80px;
 +
vertical-align: top;
 +
}
 +
#practice-top {
 +
text-align: center;
 +
vertical-align: top;
 +
border-top: solid 8px #6f3802;
 +
width: 100%;
 +
padding-bottom: 15px;
 +
}
 +
#top_board {
 +
padding: 0 50px;
 +
}

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"