Template:Team:UESTC/style.css

From 2013.igem.org

/* 

   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: #666;
   padding: 10px 15px;
   color: #fff;
   position: absolute;
   top: 83px;
   left: 0px;

} .nav { 

   position:relative;
   top:0px;
   display: inline-block;
   margin:0px;
   padding:0px;
   list-style: none;
   background:#EC6100;
   height: 45px;
   font:1.6em 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 .current a, .nav li:hover > a { 

   background:#7788aa url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png') repeat-x 0 -20px;
   color:#000;

text-decoration:none; } .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:20px;

} .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 li:first-child > a { } .nav ul li:last-child > a { } .nav ul { 

   padding:0;
   width:300px;
   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
   */
  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:50px;
   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:-110px;
   margin:0 auto;
   font: 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:600px;
   width:95%;
   margin: 0 2.25%;
   z-index:5;

} 

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

/* 

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

}

  1. greetings { 
   width: 80%;
   height: auto;
   text-align: justify;
   margin: 0 auto;
   font: 1.8em BuxtonSketch,arial,verdana;
   color:white;

} 

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

.mem_panel { 

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

} 

   .mem_panel h1 {
       font: 2.0em BuxtonSketch,arial,verdana;
       color: white;
   }
   .mem_list {
       margin: 0 0 5em;
       padding: 0;
       list-style-type: none;
       overflow: visible;
       text-align:center;
   }
       .mem_list li {
           display: block;
           width:150px;
           margin:0.8em 3em;
           height:auto;
           float:left;
           z-index:0;
       }
           .mem_list li span {
               margin: 0 auto;
               font: 1.5em BuxtonSketch,arial,verdana;
               color:white;
           }
  1. student_members { 
   height: 480px;

}

  1. advisors { 
   height: 260px;

}

  1. instructors { 
   height: 260px;

} .show { 

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

} .show_content { 

   z-index: 5;

} /* 

   contact us style
   */
  1. contact { 
   width: 80%;
   margin: 0 auto;

}

  1. contact h1 { 
   font: 2.0em BuxtonSketch,arial,verdana;
   color: white;

}

  1. school_StreetView { 
   height: 400px;
   width:80%;
   margin:0 auto;
   text-align:center;

} 

   #school_StreetView .campus{
       display:block;
       height: 250px;
       width: 45%;
       margin: 0 1em;
       float:left;
   }
       #school_StreetView .campus embed {
           height: 250px;
           width: 100%;
       }
       #school_StreetView  .campus span {
           position: relative;
           top: 0px;
           margin: 0 auto;
           font:1.2em BuxtonSketch,arial,verdana;
           color:white;
       }
  1. streetView_info { 
   position: relative;
   top: 25px;
   margin: 0 auto;
   font:0.8em arial,verdana;
   color:white;

} /* 

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

}

  1. container { 
   height: 500px;

}

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

}

  1. voice_note { 
   display:block;
   position:relative;
   width: 80%;
   height: 500px;
   margin:0 auto;
   top:50px;

} /* 

   mf style
   */
  1. mf { 
   height: 300px;
   background-color: #D18817;

} /* 

   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: 1.8em BuxtonSketch,arial,verdana;
   margin-bottom:20px;

} /* 

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

}

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

} 

   #photo_gallery h1 {
       font: 2.5em BuxtonSketch,arial,verdana;
   }
   #photo_gallery span {
       font: 1.2em BuxtonSketch,arial,verdana;
       color:red;
       display: block;
       width: 200px;
       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 3em;
       float: left;
       z-index: 0;
   }

/* 

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

}

  1. main_footer .line { 
   position:relative;
   top:0px;
   height: 20px;
   background: url(UESTC_footer_line.jpg) repeat-x;

} 

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

}

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

}

  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:0px) and (max-width:1150px) { 

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

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

}

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