Difference between revisions of "Team:HFUT-China/teamcss"

Revision as of 16:11, 18 September 2015

html, body {

   width: 100%;
   min-width: 800px;
   font-family: "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;

}

div.container {

   width: 100%;
   height: 100%;
   padding-top: 5%;
   padding-bottom: 2%;
   overflow: auto;

}

.info-group {

   height: 100%;

}

div.sec-title {

   width: 95%;
   border-bottom: 1px solid #4C4C4C;
   padding-left: 10%;

}

div.sec-title h3.sec-head {

   font-size: 2em;
   color: #666666;

}

.members {

   margin-top: 5%;
   height: 100%;

}

.member-info {

   width: 65%;
   height: 70%;
   margin: 0 auto;
   display: block;

}

.member-info .member-photo {

   background-repeat: no-repeat;
   background-size: 200px 200px;
   width: 200px;
   height: 200px;

}

.member-info .member-intro, .member-info .member-photo {

   width: 48%;

}

.member-info .member-intro {

   margin-top: 3%;

}

.member-info .member-photo {

   margin-top: 3%;

}

.member-info .member-intro h3.member-name {

   font-size: 1.7em;
   color: #111;

}

.member-info .member-intro div.member-desc {

   font-size: 1.22em;

}

.left .member-intro {

   float: left;

}

.left .member-photo {

   margin-right: 5%;
   float: right;

}

.right .member-intro {

   float: right;

}

.right .member-photo {

   margin-left: 5%;
   float: left;

}

.whole-photo {

   width: 90%;
   margin: 20px auto 10%;

}

.clear {

   width: 0;
   height: 0;
   clear: both;

}

@media (min-width: 1300px) {

   div#Bowen {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Ron {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Rexar {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Bob {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Ray {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Bing {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Hui{
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Can{
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#all {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 800px 533px;
       width: 800px;
       height: 348px;
   }

}

@media (min-width: 1300px) {

   div#Bowen {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Ron {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Rexar {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Bob {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Ray {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Bing {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Hui{
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#Can{
       background-image: url();
       background-repeat: no-repeat;
       background-size: 300px 348px;
       width: 300px;
       height: 348px;
   }
   div#all {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 800px 533px;
       width: 800px;
       height: 348px;
   }

}

@media (min-width: 1070px) and (max-width: 1300px){

   div#Bowen {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 200px 232px;
       width: 200px;
       height: 232px;
   }
   div#Ron {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 200px 232px;
       width: 200px;
       height: 232px;
   }
   div#Rexar {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 200px 232px;
       width: 200px;
       height: 232px;
   }
   div#Bob {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 200px 232px;
       width: 200px;
       height: 232px;
   }
   div#Ray {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 200px 232px;
       width: 200px;
       height: 232px;
   }
   div#Bing {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 200px 232px;
       width: 200px;
       height: 232px;
   }
   div#Hui{
       background-image: url();
       background-repeat: no-repeat;
       background-size: 200px 232px;
       width: 200px;
       height: 232px;
   }
   div#Can{
       background-image: url();
       background-repeat: no-repeat;
       background-size: 200px 232px;
       width: 200px;
       height: 232px;
   }
   div#all {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 800px 533px;
       width: 800px;
       height: 533px;
   }

}

@media (max-width: 1070px){

   div#Bowen {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 150px 174px;
       width: 150px;
       height: 174px;
   }
   div#Ron {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 150px 174px;
       width: 150px;
       height: 174px;
   }
   div#Rexar {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 150px 174px;
       width: 150px;
       height: 174px;
   }
   div#Bob {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 150px 232px;
       width: 150px;
       height: 174px;
   }
   div#Ray {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 150px 174px;
       width: 150px;
       height: 174px;
   }
   div#Bing {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 150px 174px;
       width: 150px;
       height: 174px;
   }
   div#Hui{
       background-image: url();
       background-repeat: no-repeat;
       background-size: 150px 174px;
       width: 150px;
       height: 174px;
   }
   div#Can{
       background-image: url();
       background-repeat: no-repeat;
       background-size: 150px 174px;
       width: 150px;
       height: 174px;
   }
   div#all {
       background-image: url();
       background-repeat: no-repeat;
       background-size: 800px 533px;
       width: 800px;
       height: 533px;
   }

}