Team:SYSU-Software/medal.css

From 2013.igem.org

(Difference between revisions)
Line 2: Line 2:
       padding:0px;
       padding:0px;
       margin: 0px;
       margin: 0px;
 +
    }
 +
    body {
 +
      height: 100%;
 +
      width: 100%;
 +
      background-color: white;
 +
      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*/
 +
    #navigation{
 +
      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;
 +
    }   
 +
/*medal content*/
/*medal content*/
Line 11: Line 112:
   height: 100%;
   height: 100%;
-
   background-color: #544444;
+
   background-color: #f5f5f5;
}
}
#medal-title{
#medal-title{
-
   width: 980px;
+
   width: 200px;
 +
  margin: 0 auto;
 +
  padding-top: 70px;
}
}
-
#medal-image{
+
#medal-part1{
 +
  margin-left: 8px;
 +
}
 +
#medal-part1-image{
   position: relative;
   position: relative;
-
   left: 70px;
+
   top: -13px;
-
  margin-top: 70px;
+
-
  margin-bottom: 50px;
+
}
}
 +
#medal-part1-area{
 +
  margin-top: 80px;
 +
  margin-left: 0px;
-
#medal-text{
+
  display: block;
-
   width: 980px;
+
   width: 645px;
-
   height: 100%;
+
   height: 330px;
 +
  border-radius: 9px 0px 0px 9px;
-
   background-color: #5e4e4e;
+
   background-color: #fed6d6;
}
}
 +
#medal-content table{
 +
  text-align: justify;
 +
}
 +
#medal-part1-slide{
 +
  margin-top: 80px;
 +
  display: block;
 +
  width: 88px;
 +
  height: 330px;
 +
  margin-left: -5px;
-
#medal-content{
+
   border-radius: 0px 9px 9px 0px;
-
   margin-left: 5%;
+
   background-color: #fb7f7f;
-
   width: 90%;
+
}
}
 +
/*text-content part*/
 +
#medal-part-text{
 +
  padding-left: 20px;
 +
  padding-right: 20px;
-
#content-header{
+
  width: 600px;
-
   font-family: 'Arial';
+
  color: #526a7c;
-
   font-size: 15px;
+
}
-
   color: white;
+
#medal-header{
 +
   position: relative;
 +
   top: 20px;
 +
   left: 50%;
 +
  margin-left: -75px;
 +
  font-weight: bold;
 +
  font-size: 24px;
 +
}
 +
#medal-question{
   position: relative;
   position: relative;
-
   top: 15px;
+
   top: 30px;
-
   left: 22px;
+
 
-
   width: 200px;
+
   font-size: 17px;
 +
  font-weight: bold;
 +
  line-height: 26px;
 +
}
 +
#medal-answer{
 +
  position: relative;
 +
  top: 30px;
 +
  margin-left: 10px;
 +
 
 +
  color: #4e4d49;
 +
  font-size: 16px;
 +
  line-height: 25px;
 +
}
 +
#checked img{
 +
  margin-left: 15px;
 +
   width: 30px;
 +
  height: 25px;
}
}
-
#content-text{
+
#medal-part2{
 +
  margin-top: 120px;
 +
  margin-left: 8px;
 +
}
 +
 
 +
#medal-part2-image{
   position: relative;
   position: relative;
-
   left: 37px;
+
   top: -180px;
-
   top: 45px;
+
}
 +
#medal-part2-area{
 +
   margin-top: 80px;
 +
  margin-left: 0px;
-
   width: 250px;
+
  display: block;
-
   margin-bottom: 80px;
+
   width: 645px;
 +
  height: 665px;
 +
   border-radius: 9px 0px 0px 9px;
-
   color: #a8dbd4;
+
   background-color: #fff2ad;
}
}
-
/*footer*/
+
#medal-part2-slide{
-
    #team-footer{
+
  margin-top: 80px;
-
      width: 980px;
+
  display: block;
-
      margin:0 auto;
+
  width: 88px;
 +
  height: 665px;
 +
  margin-left: -5px;
-
      position: relative;
+
  border-radius: 0px 9px 9px 0px;
-
      bottom: 0px;
+
  background-color: #fed700;
-
      overflow: hidden;
+
}
 +
#fangdajing2{
 +
  position: relative;
 +
  left: -55px;
 +
  top: -145px;
 +
}
-
      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;
+
#medal-part3{
-
      font-size: 25px;
+
  margin-left: 8px;
-
    }
+
  margin-top: 120px;
-
    #subscribe-content{
+
}
-
      position: relative;
+
-
      top: 45px;
+
-
      left: 145px;
+
-
      font-weight: bold;
+
#medal-part3-area{
-
      line-height: 10px;
+
  margin-top: 80px;
-
    }
+
  margin-left: 0px;
-
    #link{
+
-
      position: relative;
+
-
      left: 100px;
+
-
    }
+
-
    #link-header{
+
-
      position: relative;
+
-
      top: 20px;
+
-
      left: 180px;
+
-
      font-weight:bolder;
+
  display: block;
-
      font-size: 25px;
+
  width: 645px;
-
    }
+
  height: 890px;
-
    #link-content{
+
  border-radius: 9px 0px 0px 9px;
-
      position: relative;
+
 
-
      top: 34px;
+
  background-color: #cfefee;
-
      left: 180px;
+
}
-
    }
+
#medal-part3-text{
 +
  position: absolute;
 +
}
 +
#medal-part3-slide{
 +
  margin-top: 80px;
 +
  display: block;
 +
  width: 88px;
 +
  height: 890px;
 +
  margin-left: -5px;
 +
 
 +
  border-radius: 0px 9px 9px 0px;
 +
  background-color: #69ceca;
 +
}
 +
#medal-part3-image{
 +
  position: relative;
 +
  top: -292px;
 +
}
 +
 
 +
#medal-content ul li{
 +
  list-style: none;
 +
}
 +
#fangdajing3{
 +
  position: relative;
 +
  left: -55px;
 +
  top: -220px;
 +
}
 +
 
 +
 
 +
#medal-part4{
 +
  padding-bottom: 80px;
 +
}
 +
#medal-part4-area{
 +
  margin-top: 80px;
 +
  margin-left: 230px;
 +
 
 +
  display: block;
 +
  width: 645px;
 +
  height: 860px;
 +
  border-radius: 9px 0px 0px 9px;
 +
 
 +
  background-color: #04ff51;
 +
}
 +
#medal-part4-text{
 +
  position: absolute;
 +
}
 +
#medal-part4-slide{
 +
  margin-top: 80px;
 +
  display: block;
 +
  width: 88px;
 +
  height: 860px;
 +
  margin-left: -5px;
 +
 
 +
  border-radius: 0px 9px 9px 0px;
 +
  background-color: #01f918;
 +
}
 +
 
 +
#medal-content ul li{
 +
  list-style: none;
 +
}
 +
#fangdajing4{
 +
  position: relative;
 +
  left: -55px;
 +
  top: -220px;
 +
}
 +
 
 +
#fangdajing{
 +
  position: relative;
 +
  left: -55px;
 +
  top: 20px;
 +
}
 +
 
 +
 
 +
 
 +
/*footer*/
 +
    #sysu-footer{
 +
      width: 100%;
 +
      margin:0 auto;
-
    #link-content a{
 
-
      text-decoration: none;
 
-
    }
 
-
    /*bottom image*/
 
-
    #bottom-image{
 
       position: relative;
       position: relative;
       bottom: 0px;
       bottom: 0px;
-
    }
+
      overflow: hidden;
-
 
+
 +
      background-color: #f5f5f5;
 +
    }
     a:focus{
     a:focus{
       outline-color:#544444;  
       outline-color:#544444;  
     }
     }

Revision as of 06:44, 25 September 2013

*{
     padding:0px;
     margin: 0px;
   }
   body {
     height: 100%;
     width: 100%;
     background-color: white;
     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*/
   #navigation{
     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;
   }


/*medal content*/

  1. medal-container{ 
 width: 980px;
 margin: 0 auto;
 height: 100%;

 background-color: #f5f5f5;

}

  1. medal-title{ 
 width: 200px;
 margin: 0 auto;
 padding-top: 70px;

}

  1. medal-part1{ 
 margin-left: 8px;

}

  1. medal-part1-image{ 
 position: relative;
 top: -13px;

}

  1. medal-part1-area{ 
 margin-top: 80px;
 margin-left: 0px;

 display: block;
 width: 645px;
 height: 330px;
 border-radius: 9px 0px 0px 9px;

 background-color: #fed6d6;

}

  1. medal-content table{ 
 text-align: justify;

}

  1. medal-part1-slide{ 
 margin-top: 80px;
 display: block;
 width: 88px;
 height: 330px;
 margin-left: -5px;

 border-radius: 0px 9px 9px 0px;
 background-color: #fb7f7f;

} /*text-content part*/

  1. medal-part-text{ 
 padding-left: 20px;
 padding-right: 20px;

 width: 600px;
 color: #526a7c;

}

  1. medal-header{ 
 position: relative;
 top: 20px;
 left: 50%;
 margin-left: -75px;

 font-weight: bold;
 font-size: 24px;

}

  1. medal-question{ 
 position: relative;
 top: 30px;

 font-size: 17px;
 font-weight: bold;
 line-height: 26px;

}

  1. medal-answer{ 
 position: relative;
 top: 30px;
 margin-left: 10px;
 
 color: #4e4d49;
 font-size: 16px;
 line-height: 25px;

}

  1. checked img{ 
 margin-left: 15px;
 width: 30px;
 height: 25px;

}

  1. medal-part2{ 
 margin-top: 120px;
 margin-left: 8px;

}

  1. medal-part2-image{ 
 position: relative;
 top: -180px;

}

  1. medal-part2-area{ 
 margin-top: 80px;
 margin-left: 0px;

 display: block;
 width: 645px;
 height: 665px;
 border-radius: 9px 0px 0px 9px;

 background-color: #fff2ad;

}

  1. medal-part2-slide{ 
 margin-top: 80px;
 display: block;
 width: 88px;
 height: 665px;
 margin-left: -5px;

 border-radius: 0px 9px 9px 0px;
 background-color: #fed700;

}

  1. fangdajing2{ 
 position: relative;
 left: -55px;
 top: -145px;

}


  1. medal-part3{ 
 margin-left: 8px;
 margin-top: 120px;

}

  1. medal-part3-area{ 
 margin-top: 80px;
 margin-left: 0px;

 display: block;
 width: 645px;
 height: 890px;
 border-radius: 9px 0px 0px 9px;

 background-color: #cfefee;

}

  1. medal-part3-text{ 
 position: absolute;

}

  1. medal-part3-slide{ 
 margin-top: 80px;
 display: block;
 width: 88px;
 height: 890px;
 margin-left: -5px;

 border-radius: 0px 9px 9px 0px;
 background-color: #69ceca;

}

  1. medal-part3-image{ 
 position: relative;
 top: -292px;

}

  1. medal-content ul li{ 
 list-style: none;

}

  1. fangdajing3{ 
 position: relative;
 left: -55px;
 top: -220px;

}


  1. medal-part4{ 
 padding-bottom: 80px;

}

  1. medal-part4-area{ 
 margin-top: 80px;
 margin-left: 230px;

 display: block;
 width: 645px;
 height: 860px;
 border-radius: 9px 0px 0px 9px;

 background-color: #04ff51;

}

  1. medal-part4-text{ 
 position: absolute;

}

  1. medal-part4-slide{ 
 margin-top: 80px;
 display: block;
 width: 88px;
 height: 860px;
 margin-left: -5px;

 border-radius: 0px 9px 9px 0px;
 background-color: #01f918;

}

  1. medal-content ul li{ 
 list-style: none;

}

  1. fangdajing4{ 
 position: relative;
 left: -55px;
 top: -220px;

}

  1. fangdajing{ 
 position: relative;
 left: -55px;
 top: 20px;

}


/*footer*/ 

   #sysu-footer{
     width: 100%;
     margin:0 auto;

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

     background-color: #f5f5f5;
   }

   a:focus{
     outline-color:#544444; 
   }
Retrieved from "http://2013.igem.org/Team:SYSU-Software/medal.css"