Team:UESTC/style.css

From 2013.igem.org

.panel { max-width: 1400px; } /* 

   nav style
   */

nav{ position:fixed; z-index: 50; top:15px; 

   width:100%;
   height:45px;
   background-color:#EC6100;
   left:0%;
   text-align:center;

} .toggleMenu { 

   display:  none;
   background-color:#EC6100;
   padding: 10px 15px;
   color: #fff;
   position: absolute;
   top: -30px;
   left: 0px;
   font:1.6em BuxtonSketch,arial,verdana;
   color:white;

} .nav { 

   position:relative;
   top:0px;
   display: inline-block;
   margin:0px;
   padding:0px;
   list-style: none;
   background:#EC6100;
   height: 45px;
   font:22px/1em BuxtonSketch,arial,verdana;

} .nav:before, .nav:after { 

   content: " "; 
   display: block;

} .nav:after { 

   clear: both;

} .nav ul { 

   list-style: none;
   width: 9em;

} .nav a { 

   padding: 10px 15px;
   color:#fff;

}


.nav li { 

   position: relative;

} .nav > li { 

   float: left;
   border-top: 1px solid #EC6100;

} .nav > li > .parent { 

   background-image: url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png');
   background-repeat: no-repeat;
   background-position: right;

} .nav > li > a { 

   display: block;

} .nav li ul { 

   position: absolute;
   left: -9999px;

} .nav > li.hover > ul { 

   left: 0;
   top:30px;

} .nav li li.hover ul { 

   left: 100%;
   top: 0;

} .nav li li li a { 

   background:#EC6100;
   z-index:200;
   border-top: 1px solid #1d7a62;

}

.nav ul { 

   padding:0;
   width:110px;
   background-color:#EC6100;
   border:1px solid #7788aa;

} .part { 

   background-color: white;
   width: 100%;
   height: auto;

} /* 

   projects nav style
   */
  1. nav_proj { 
   width: 100%;
   height: 100px;
   z-index:50;
   background-color:white;

} /* 

   notebook nav style
   */
  1. nav_notebook { 
   height: 250px;
   z-index: 50;
   background-color:white;

} /* 

   home part style
   */
 .gwd-gen-f18lgwdanimation {
       -webkit-animation: gwd-gen-f18lgwdanimation_gwd-keyframes 1.2s linear 0s 1 forwards;
     }
     .gwd-div-vixx {
       -webkit-transform-style: preserve-3d;
       -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -418, 0, 1);
     }
     @-webkit-keyframes gwd-gen-f18lgwdanimation_gwd-keyframes {
       0% {
         -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -418, 0, 1);
         -webkit-animation-timing-function: linear;
       }
       100% {
         -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
         -webkit-animation-timing-function: linear;
       }
     }
  1. home { 
   height: 560px;
   background-color:#0EA6EA;

background:-webkit-gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE)); background:-ms-gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE)); background:gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE)); background:-moz-linear-gradient(top,#0EA6EA,#F8FCFE); background:-0-linear-gradient(top,#0EA6EA,#F8FCFE); background:linear-gradient(top,#0EA6EA,#F8FCFE); filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#0EA6EA',endColorstr='#F8FCFE'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#0EA6EA',endColorstr='#F8FCFE')"; 

   z-index:0;

}

  1. logo { 
   height: 150px;
   width:46.875%;/* 600/1280 */
   margin:0 auto;
   position:relative;
   top:90px;
   z-index:10;

} 

   #logo #team_logo {
       float: left;
   }
   #logo #igem_logo {
       float: right;
   }

/* 

   moving cloud style
   */
  1. experiment{ 
	position: relative;
	top:0px;
   height:200px;
	z-index: 5;
}
  1. background {

background: url('https://2013.igem.org/File:Cloud_back.png') repeat-x; 

   background: url('https://static.igem.org/mediawiki/2013/7/70/UESTC_cloud2.png') 5% 5%, url('https://static.igem.org/mediawiki/2013/3/33/Cloud_front.jpg') 50% 50%, url('https://2013.igem.org/File:Cloud_back.png') 90% 110% repeat-x;
   top: -136px;
   left: 0;
   right: 0;
   position:absolute;
   -webkit-transition: left 300s linear;
   -moz-transition: left 300s linear;
   -o-transition: left 300s linear;
   -ms-transition: left 300s linear;
   transition: left 300s linear;
   z-index: 5;
   height:275px;

}

body:target #background { 

   left: -5000px;

}

body:hover #background { 

   left: -9999px;

}

  1. hi { 
   height: auto;
   width: 46.875%; /* 600/1280 */
   position:relative;
   top:-25px;
   margin:0 auto;
   font: 27px/1.8em BuxtonSketch,arial,verdana;
   z-index:5;
   text-align:center;

}

  1. team_photo { 
   position:relative;
   top: -56px;
   display:block;
   margin:0 auto;
   z-index:5;

} /* 

   responsive pic
   */

img { 

   max-width: 100%;

}

  1. project { 
   height: 700px;
   background-color:orange;
   z-index:1;

} 

#project .line {
       position:relative;
       top:683px;
       height:18px;
       background: url(UESTC_line_team_info.png) repeat-x;
    }

/* 

   project slideshow style
   */
  1. camera_wrap_1 { 
   max-width: 1280px;
   max-height: 720px;
   width:95%;
   margin: 0 2.25%;
   z-index:5;

} 

   .fadeFromBottom h1 {
       font: 28px/2em arial,verdana;
       color:white;
   }
   .fadeFromBottom span {
       color: red;
   }

/* 

project style
* */
  1. nebula {

background: url(UESTC-bg1.jpg); }

  1. transpeeder {

background: url(UESTC-bg3.jpg) }

  1. ibricks {

background-color: #66CCFF; } .proj_info { height: auto; width: 80%; text-align: justify; margin: 0 auto; font: 18px/1.5em museo100regular, arial,verdana; } .proj_info .red { color: red; } .proj_pic { width: 24.0742%; height: auto; margin: 0 auto; float: left; padding: 10px; } .proj_pic span { font: 0.6em museo100regular, arial,verdana; margin: 0 auto; display: block; width:130px; } .nebula-pic { width: 39.25%; height: auto; margin: 0 auto; padding: 10px; float:left; font: 0.6em museo100regular, arial,verdana; } .nebula-pic span { margin: 0 auto; display: block; width：110px; } .nebula-pic-block { width: 100%; height:300px; } .nebula-pic-promoter { width:58.25%; height: auto; font: 0.6em museo100regular, arial,verdana; } .nebula-pic-promoter span { margin: 0 auto; display: block; width: 253px; } .nebula-pic-cds { width: 65%; height: auto; font: 0.6em museo100regular, arial,verdana; padding: 10px; } .nebula-pic-cds span { margin: 0 auto; display: block; width: 215px; } .nebula-pic-terminator { width: 39%; height: auto; font: 0.6em museo100regular, arial,verdana; padding: 10px;

} .nebula-pic-terminator span { margin: 0 auto; display: block; width: 260px; } .nebula-pic-devices { width: 39%; height: auto; font: 0.6em museo100regular, arial,verdana; padding: 10px;

} .nebula-pic-devices span { margin: 0 auto; display: block; width: 232px; } .nebula-pic-rank { width: 47.875%; height:auto; font: 0.6em museo100regular, arial,verdana; padding: 10px; } .nebula-pic-rank span { margin: 0 auto; display: block; width: 175px; } .transpeeder-online { width: 57.875%; height:auto; font: 0.6em museo100regular, arial,verdana; padding: 10px; } .transpeeder-online span { margin: 0 auto; display: block; width: 140px; } .transpeeder-desktop { width: 46.875%; height:auto; font: 0.6em museo100regular, arial,verdana; padding: 10px; } .transpeeder-desktop span { margin: 0 auto; display: block; width: 150px; } .transpeeder-exp { width: 46.875%; height: auto; font: 0.6em museo100regular, arial,verdana; padding: 10px; } .transpeeder-exp span { margin: 0 auto; display: block; width: 165px; } /* 

   team info style
   */
  1. team_info { 
   height: auto;
   background:url(UESTC_team-bg.png) #1B1B1B;

}

  1. greetings { 
   width: 80%;
   height: auto;
   text-align: justify;
   margin: 0 auto;
   font: 18px/1.5em museo100regular, arial,verdana;
   color:white;

} 

   #greetings h1 {
       color: white;
       font: 2.0em museo100regular, arial,verdana;
   }

.mem_panel { 

   width: 80%;
   height: auto;
   display: block;
   margin: 0 auto;

} 

   .mem_panel h1 {
       font: 25px/2.0em museo100regular, arial,verdana;
       color: white;
   }
   .mem_list {
       padding: 0;
       list-style-type: none;
       overflow: visible;
       text-align:center;
   }
       .mem_list li {
           display: block;
           width:150px;
           margin:0.8em 2em;
           height:auto;
           float:left;
           z-index:0;
       }
           .mem_list li span {
               margin: 0 auto;
               font: 12px/1.0em museo100regular, arial,verdana;
               color:white;
           }
  1. student_members { 
   height: 510px;

}

  1. advisors { 
   height: 290px;

}

  1. instructors { 
   height: 290px;

} .show { 

   position: relative;
   top: 150px;
   left: 150px;

} .show_content { 

   z-index: 5;

} /* 

   contact us style
   */
  1. contact { 
   width: 80%;
   margin: 0 auto;
   height: 160px;
   font: 16px/1.2em museo100regular, arial,verdana;
   color: white;

}

  1. contact h1 { 
   font: 25px/2.0em museo100regular, arial,verdana;
   color: white;

}

/* 

   notebook style
   */
  1. notebook { 
   height: auto;
   background:url(UESTC_notebookBG.jpg);

}

  1. container { 
   height: 600px;

}

  1. container nav { 
   width: auto;
   height: auto;
   background-color: white;

}


/* 

   mf style
   */
  1. mf { 
   height: auto;
   background:url(UESTC_notebookBG.jpg);

}

  1. medal_standard {

width: 80%; height: auto; text-align: justify; margin: 0 auto; 

   font: 18px/1.5em museo100regular, arial,verdana;

}

  1. medal_standard span {

color: red; } /* 

   human practice style
   */
  1. hp { 
   height: auto;
   background-color: #99D8F6;
   background: -webkit-gradient(linear,left top,left bottom,from(#FFFFFF),to(#99D8F6));
   background: -ms-gradient(linear,left top,left bottom,from(#FFFFFF),to(#99D8F6));
   background: gradient(linear,left top,left bottom,from(#FFFFFF),to(#99D8F6));
   background: -moz-linear-gradient(top,#FFFFFF,#99D8F6);
   background: -0-linear-gradient(top,#FFFFFF,#99D8F6);
   background: linear-gradient(top,#FFFFFF,#99D8F6);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#FFFFFF',endColorstr='#99D8F6');
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#FFFFFF',endColorstr='#99D8F6')";

}

  1. action_info { 
   width: 80%;
   height: auto;
   text-align: justify;
   margin: 0 auto;
   font: 18px/1.5em museo100regular, arial,verdana;
   margin-bottom:20px;

} /* 

   #pg style
   */
  1. pg { 
   position:relative;
   top:-20px;
   height: auto;
   background-color:#99D8F6;

}

  1. photo_gallery { 
   width: 80%;
   height: 668px;
   margin: 0 auto;

} 

   #photo_gallery h1 {
       font: 2.5em museo100regular, arial,verdana;
   }
   #photo_gallery span {
       font: 12px/1.2em museo100regular, arial,verdana;
       color:red;
       display: block;
       width: 245px;
       height: auto;
       position: relative;
       top: 0px;
       left: 0px;
   }

.gallery { 

   margin: 0 0 5em;
   padding: 0;
   list-style-type: none;
   overflow: visible;
   height: auto;

} 

   .gallery li {
       display: block;
       width: 150px;
       margin: 0.8em 2em;
       float: left;
       z-index: 0;
   }

/* 

* #safety style
*/
  1. safety {

position:relative; 

   top:-20px;
   height: auto;
   background-color:#99D8F6;

}

  1. safety-form {

width: 80%; 

   height: auto;
   margin: 0 auto;
   font: 18px/1.5em museo100regular, arial,verdana;

}

  1. safety-form span {

color: #0000FF; } /* 

* #parts-submission style
*/
  1. my-parts-submission {

position:relative; 

   top:-30px;
   height: auto;
   background-color:#99D8F6;

}

  1. submission {

width: 80%; 

   height: auto;
   margin: 0 auto;
   font: 18px/1.5em museo100regular, arial,verdana;
   padding-bottom: 30px;

} /* 

   #main_footer style
   */
  1. main_footer { 
   position:relative;
   top:-20px;
   height: auto;
   background-color: #59493F;

} 

   #main_footer #footer_head_1 {
       display: block;
       width:80%;
       position: relative;
       top: 27px;
       left: 13%;
       font: 2.5em museo100regular, arial,verdana;
       color:white;
   }
   #main_footer #footer_head_2 {
       display: block;
       width: 68%;
       height:100px;
       position: relative;
       top: 80px;
       left: 13%;
       font: 2.5em museo100regular, arial,verdana;
       color: white;
   }
   #main_footer #footer_p {
       display: block;
       width: 80%;
       position: relative;
       top: 43px;
       left: 13%;
       font: 1.5em museo100regular, arial,verdana;
       color: white;
   }
  1. thanks_people { 
   position: relative;
   height:150px;
   top: 45px;

}

  1. thanks_org { 
   position: relative;
   height:120px;
   top: 76px;

}

  1. thanks_org .mem_list li { 
           display: block;
           width:250px;
           margin:0.8em 3em;
           height:auto;
           float:left;
           z-index:0;
       }

/* 

   some media queries
   */

@media screen and (min-width:1011px) and (max-width:1150px) { 

   /*
       change in #team_info
       */
   .mem_list li {
       margin: 0.8em 2em;
   }
   #student_members {
       height: 482px;
   }
   #school_StreetView {
       width: 100%;
   }
   /*
       change in #team_photo
       */
   #team_photo {
       top: -65px;
   }

   /*
       change in #pg
       */
   .gallery li{
       margin: 0.8em 1em;
   }

} @media screen and (max-width:1010px) { 

   /*
       change in #home
       */
   #hi {
       width: 51.875%;
   }
   /*
       change in #project
       */
   #project {
       height: 567px;
   }
       #project .line {
           top: 550px;
       }
    /*
       change in #team_info
       */
   .mem_list li {
       margin: 0.8em 1em;
   }
     #school_StreetView {
       width: 100%;
   }
   /*
       change in #pg
       */
   .gallery li {
       margin: 0.8em 1em;
   }
   .test {
       display: none;
   }

}

@media screen and (max-width:993px) { 

   #footer-box {
       width: 98%;
   }

} @media screen and (max-width:920px) { 

   #hi {
       width: 60.875%;
   }

} @media screen and (max-width:890px) { 

   #student_members {
       height: 879px;
   }
   .mem_panel {
       width: 54%;
   }
   .mem_list li {
       margin: 0.8em 2em;
   }
   #instructors {
       height: 461px;
   }
   .gallery li {
       margin: 0.8em 0.2em;
   }
   #thanks_people {
       height: 400px;
   }
   #main_footer #footer_head_2 {
       height: 31px;
   }
   #thanks_org {
       width: 68%;
   }
   #thanks_org .mem_list li {
       margin: 0.8em 1em;
   }

} @media screen and (max-width:790px) { 

   #logo {
       width: 55.875%;
   }
   #hi {
       width: 68.875%;
   }
   .mem_list li {
       margin: 0.8em 1em;
   }
   #school_StreetView {
       height: 624px;
   }
       #school_StreetView .campus {
           margin: 1em;
           width:70%;
       }
   #voice_note span {
       width: 100px;
   }
   #photo_gallery {
       height: 837px;
   }
   .gallery li {
       margin: 0.8em 1.2em;
   }
   #thanks_org .mem_list li {
       margin: 0.8em 0.2em;
   }

} @media screen and (max-width: 650px) { 

     .active {
       display: block;
   }
   nav{
   	top: 51px;
       height:0px;
   }
   .nav {
       top: 16px;
       left: -39%;
   }
   .nav > li {
   	background-color:#EC6100;
       float: none;
       width:
   }
   .nav > li > .parent {
       background-position: 95% 50%;
   }
   .nav li li .parent {
       background-image: url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png');
       background-repeat: no-repeat;
       background-position: 95% 50%;
   }
   .nav ul {
       display: block;
       width: 100%;
       position:relative;
       top:0px;
   }
  .nav > li.hover > ul , .nav li li.hover ul {
       position: static;
   }
   #team_photo {
       display: none;
   }
   #project {
       height: 394px;
   }
       #project .line {
           top: 376px;
       }
   .mem_panel {
       width: 77%;
   }
   #photo_gallery {
       height: 1080px;
   }
   #school_StreetView .campus {
       margin: 1.5em 1em;
       width: 78%;
   }
   #logo {
       width: 65.875%;
   }

}

Retrieved from "http://2013.igem.org/Team:UESTC/style.css"