Team:SYSU-Software/team.css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
body {
+
    *{
 +
      padding:0px;
 +
      margin: 0px;
 +
    }
 +
    body {
 +
      height: 100%;
 +
      width: 100%;
       background-color: #CCC;
       background-color: #CCC;
-
    }
+
       font-family: 'Arial';
-
    #content {
+
-
       background-color: #FFF;
+
-
      border-radius: 5px;
+
-
    }
+
-
    #content .main {
+
-
      padding: 20px;
+
-
    }
+
-
    #content .sidebar {
+
-
      padding: 10px;
+
-
    }
+
-
    #content p {
+
-
      line-height: 30px;
+
     }
     }
-
    #team-container{
+
 
-
      width: 980px;
+
 
-
     }
+
     /*header images */
     #team-header{
     #team-header{
 +
      margin: 0 auto;
 +
      z-index: 100;
 +
       height: 200px;
       height: 200px;
       width: 980px;
       width: 980px;
       background-color: white;
       background-color: white;
 +
 +
      font-family: 'Arial';
     }
     }
     #team-header-logo{
     #team-header-logo{
-
      display:block;
 
-
      width: 140px;
 
-
      height: 140px;
 
-
      border-radius: 70px;
 
-
      background-color:#445d72;
 
-
 
       position: relative;
       position: relative;
-
       left: 15px;
+
       left: 20px;
       top:30px;
       top:30px;
     }
     }
     #team-header-text{
     #team-header-text{
-
       position: absolute;
+
       position: relative;
-
       left: 355px;
+
       left: 130px;
-
       top: 50px;
+
       top: -67px;
 +
    }
-
      font-family:'Berlin Sans FB Demi';
+
    #boss-header-image{
-
       font-size: 50px;
+
       position: relative;
-
       color: #A8DBD2;
+
       left: 285px;
-
       line-height: 47px;
+
       top: -85px;
     }
     }
-
 
+
 
 +
    /*navigation*/
 +
    #navigation1{
 +
      float: right;
 +
      height: 40px;
 +
 
 +
      z-index: 100;
 +
 
 +
      position: relative;
 +
      top: -37px;
 +
    }
 +
 
 +
    .navbar {
 +
    margin-bottom: 0px;
 +
    overflow: visible;
 +
    }
 +
 
     .nav{
     .nav{
-
       height: 46px;
+
      display: inline;
 +
 
 +
       height: 40px;
       background-color:#A8DBD2;     
       background-color:#A8DBD2;     
     }
     }
-
   
+
       
     .navbar-inverse .nav > li > a{
     .navbar-inverse .nav > li > a{
-
       font-size: 16px;
+
       font-size: 14px;
-
      padding: 16px 15px 15px;
+
       border: none;
       border: none;
 +
      height: 40px;
 +
      padding:0px 20px;
 +
 +
      line-height: 40px;
     }
     }
     #nav-li{
     #nav-li{
       height: 40px;
       height: 40px;
     }
     }
-
     #navigation1{
+
      
-
       width: 580px;
+
    .navbar-inverse .nav > li.active > a{
 +
       background-color: #FFE14B;
       height: 40px;
       height: 40px;
-
 
-
      position: absolute;
 
-
      left:577px;
 
-
      top: 93px;
 
-
      z-index: 100;
 
     }
     }
     .navbar-inverse .nav > li.active > a{
     .navbar-inverse .nav > li.active > a{
-
       background-color: #FFE14B;
+
       background-color: #FFE14B;  
-
       height: 15px;
+
    }
 +
    /*sub navs*/
 +
    #sub-link1{
 +
       width:90px;
 +
      background-color:#A8DBD2;
 +
    }   
 +
    .navbar .nav > li > ul:before {
 +
      border-width: 0px;
     }
     }
 +
    #sub-link2{
 +
      width:100px;
 +
      background-color:#A8DBD2;
 +
    }   
 +
    #sub-link3{
 +
      width:135px;
 +
      background-color:#A8DBD2;
 +
 +
    }   
 +
    #sub-link4{
 +
      background-color:#A8DBD2;
 +
      width:70px;
 +
    }   
 +
 +
 +
 +
    /*team contents*/
 +
    #team-container{
 +
      width: 980px;
 +
      margin: 0 auto;
 +
    }
     #team-content{
     #team-content{
       background-color: #544444;
       background-color: #544444;
       width: 980px;
       width: 980px;
-
      height: 1050px;
 
     }
     }
     #content-head-text{
     #content-head-text{
-
      font-family: 'Script MT Bold';
 
-
      font-size: 120px;
 
-
      color: #FFFFFF;
 
-
 
-
      -moz-transform:rotate(-20deg);
 
-
      -webkit-transform:rotate(-20deg);
 
-
      -o-transform:rotate(-20deg);
 
-
      -ms-transform:rotate(-20deg);
 
-
      transform:rotate(-20deg);
 
-
 
       position: relative;
       position: relative;
-
       left: 100px;
+
       left: 130px;
-
       top: -120px;
+
      top: 50px;
 +
    }
 +
    #fly{
 +
      position: relative;
 +
      left: 35px;
 +
       top: -40px;
 +
    }
 +
    #fly img:hover{
 +
      -moz-transform:scale(1.4);
 +
      -webkit-transform:scale(1.4);
 +
      -o-transform:scale(1.4);
 +
      -ms-transform:scale(1.4);
 +
      transform:scale(1.4);
     }
     }
     #content-text{
     #content-text{
-
       font-size: 16px;
+
       font-size: 15px;
       font-weight: bolder;
       font-weight: bolder;
       color: #A8DBD2;
       color: #A8DBD2;
       line-height: 25px;
       line-height: 25px;
 +
 +
      display: block;
 +
      width: 370px;
       position: relative;
       position: relative;
-
       top: -109px;
+
       top: -90px;
-
       left: 498px;
+
       left: 515px;
     }
     }
-
     p:first-letter{
+
     #content-text:first-letter{
       font-size: 30px;
       font-size: 30px;
     }
     }
 +
 +
 +
 +
     #myModal{
     #myModal{
 +
      position: absolute;
 +
      left: 44%;
 +
       border-radius: 0px;
       border-radius: 0px;
-
       width: 560px;
+
       width: 700px;
       height: 400px;
       height: 400px;
     }
     }
     #content-image{
     #content-image{
       position: relative;
       position: relative;
-
       left: 157px;
+
       top: -10px;
-
       top: -30px;
+
 
 +
       margin-bottom: 80px;
     }
     }
     .teamer-image-list{
     .teamer-image-list{
 +
      margin:0 auto;
       table-layout: auto;
       table-layout: auto;
-
       width: 665px;
+
       width: 68%;
     }
     }
     .teamer-image{
     .teamer-image{
-
       width: 75px;
+
       display: inline;
-
       height: 75px;
+
       margin-left: 10px;
-
       border-radius: 50px;
+
       margin-right: 0px;
-
       margin: 10px;
+
       margin-bottom: 25px;
     }
     }
-
     #teamer-lable{
+
     .teamer-image:hover{
-
       position: relative;
+
       -moz-transform:scale(1.2);
-
       left: 0px;
+
       -webkit-transform:scale(1.2);
-
       top: -28px;
+
       -o-transform:scale(1.2);
 +
      -ms-transform:scale(1.2);
 +
      transform:scale(1.2);
     }
     }
 +
 
 +
 +
     #instructor-image{
     #instructor-image{
       position: relative;
       position: relative;
-
      top: 10px;
 
-
      left: 252px;
 
     }
     }
     #instructor-image-list{
     #instructor-image-list{
 +
      margin:0 auto;
       table-layout: auto;
       table-layout: auto;
       width: 460px;
       width: 460px;
     }
     }
     .teacher-image{
     .teacher-image{
-
       width: 100px;
+
       margin-bottom: 40px;
-
       height: 100px;
+
    }
-
       border-radius: 50px;
+
    .teacher-image:hover{
 +
       -moz-transform:scale(1.2);
 +
       -webkit-transform:scale(1.2);
 +
      -o-transform:scale(1.2);
 +
      -ms-transform:scale(1.2);
 +
      transform:scale(1.2);
 +
    }
 +
 
-
       margin:15px;
+
    /*footer*/
 +
    #team-footer{
 +
      width: 980px;
 +
       margin:0 auto;
 +
 
 +
      position: relative;
 +
      bottom: 0px;
 +
      overflow: hidden;
 +
 
 +
      background-color: #ebdfd2;
     }
     }
-
     .teacher-lable1{
+
     /*instructions*/
 +
    #team-sub{
       position: relative;
       position: relative;
-
       top: -27px;
+
 
-
      left: 9px;
+
       margin-bottom: 30px;
     }
     }
-
     #bottom-image{
+
     #subscribe{
-
       position:relative;
+
       position: relative;
-
       left: -1px;  
+
    }
-
       top: -45px;
+
    #subscribe-header{
 +
       position: relative;
 +
       top: 25px;
 +
      left: 145px;
-
       -moz-transform:scaleX(1.012);
+
       font-weight: bolder;
-
       -webkit-transform:scaleX(1.012);
+
       font-size: 25px;
-
      -o-transform:scaleX(1.012);
+
-
      -ms-transform:scaleX(1.012);
+
-
      transform:scaleX(1.012);
+
     }
     }
 +
    #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{
     a:focus{
       outline-color:#544444;  
       outline-color:#544444;  
     }
     }

Revision as of 13:34, 25 August 2013

   *{
     padding:0px;
     margin: 0px;
   }
   body {
     height: 100%;
     width: 100%;
     background-color: #CCC;
     font-family: 'Arial';
   }


   /*header images */
   #team-header{
     margin: 0 auto;
     z-index: 100;
     height: 200px;
     width: 980px;
     background-color: white;
     font-family: 'Arial';
   }
   #team-header-logo{
     position: relative;
     left: 20px;
     top:30px;
   }
   #team-header-text{
     position: relative;
     left: 130px;
     top: -67px;
   }
   #boss-header-image{
     position: relative;
     left: 285px;
     top: -85px;
   }
   /*navigation*/
   #navigation1{
     float: right;
     height: 40px;
     z-index: 100;
     position: relative;
     top: -37px;
   }
   .navbar {
   margin-bottom: 0px;
   overflow: visible;
   }
   .nav{
     display: inline;
     height: 40px;
     background-color:#A8DBD2;     
   }
       
   .navbar-inverse .nav > li > a{
     font-size: 14px;
     border: none;
     height: 40px;
     padding:0px 20px;
     line-height: 40px;
   }
   #nav-li{
     height: 40px;
   }
   
   .navbar-inverse .nav > li.active > a{
     background-color: #FFE14B;
     height: 40px;
   }
   .navbar-inverse .nav > li.active > a{
     background-color: #FFE14B; 
   }
   /*sub navs*/
   #sub-link1{
     width:90px;
     background-color:#A8DBD2; 
   }    
   .navbar .nav > li > ul:before {
     border-width: 0px;
   }
   #sub-link2{
     width:100px;
     background-color:#A8DBD2; 
   }    
   #sub-link3{
     width:135px;
     background-color:#A8DBD2; 
   }    
   #sub-link4{
     background-color:#A8DBD2; 
     width:70px;
   }    


   /*team contents*/
   #team-container{
     width: 980px;
     margin: 0 auto;
   }
   #team-content{
     background-color: #544444;
     width: 980px;
   }
   #content-head-text{
     position: relative;
     left: 130px;
     top: 50px;
   }
   #fly{
     position: relative;
     left: 35px;
     top: -40px;
   }
   #fly img:hover{
      -moz-transform:scale(1.4);
     -webkit-transform:scale(1.4);
     -o-transform:scale(1.4);
     -ms-transform:scale(1.4);
     transform:scale(1.4);
   }
   #content-text{
     font-size: 15px;
     font-weight: bolder;
     color: #A8DBD2;
     line-height: 25px;
     display: block;
     width: 370px;
     position: relative;
     top: -90px;
     left: 515px;
   }
   #content-text:first-letter{
     font-size: 30px;
   }



   #myModal{
     position: absolute;
     left: 44%;
     border-radius: 0px;
     width: 700px;
     height: 400px;
   }
   #content-image{
     position: relative;
     top: -10px;
     margin-bottom: 80px;
   }
   .teamer-image-list{
     margin:0 auto;
     table-layout: auto;
     width: 68%;
   }
   .teamer-image{
     display: inline;
     margin-left: 10px;
     margin-right: 0px;
     margin-bottom: 25px;
   }
   .teamer-image:hover{
     -moz-transform:scale(1.2);
     -webkit-transform:scale(1.2);
     -o-transform:scale(1.2);
     -ms-transform:scale(1.2);
     transform:scale(1.2);
   }
 


   #instructor-image{
     position: relative;
   }
   #instructor-image-list{
     margin:0 auto;
     table-layout: auto;
     width: 460px;
   }
   .teacher-image{
     margin-bottom: 40px;
   }
   .teacher-image:hover{
     -moz-transform:scale(1.2);
     -webkit-transform:scale(1.2);
     -o-transform:scale(1.2);
     -ms-transform:scale(1.2);
     transform:scale(1.2);
   }
  
   /*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; 
   }