Difference between revisions of "Team:HUST-China/css/index"

Revision as of 03:02, 19 October 2016

/*css reset code */

   /* for everything else */
   /*字体边框等初始化*/
   
   body,
   dl,
   dt,
   dd,
   ul,
   ol,
   li,
   h1,
   h3,
   h4,
   h5,
   h6,
   pre,
   form,
   fieldset,
   input,
   textarea,
   p,
   blockquote,
   th,
   td {
       padding: 0;
       margin: 0;
   }
   
   h2 {
       border-bottom: none;
   }
   
   li {
       margin-bottom: 0;
   }
   
   table {
       border-collapse: collapse;
       border-spacing: 0;
   }
   
   fieldset,
   img {
       border: 0;
   }
   
   img {
       display: block;
   }
   
   ol,
   ul {
       list-style: none;
   }
   
   caption,
   th {
       text-align: left;
   }
   
   q:before,
   q:after {
       content: ;
   }
   
   abbr,
   acronym {
       border: 0;
   }
   
   a {
       color: #343434;
       text-decoration: none;
   }
   
   a:hover {
       color: #b60a0a
   }
   
   .mw-content-ltr ul,
   .mw-content-rtl .mw-content-ltr ul {
       margin: 0;
   }
   
   body {
       font-family: "Arial", sans-serif !important;
   }
   
   .clr {
       clear: both;
   }
   /*index*/
   
   header {
       width: 100%;
       position: fixed;
       top: 0;
       z-index: 1000;
       background: #545454;
       padding-top: 30px;
       font-family: "Microsoft YaHei", sans-serif !important;
   }
   
   .logo {
       float: left;
       width: 4%;
       margin-right: 50px;
   }
   
   .navigation {
       width: 100%;
       text-align: center;
   }
   
   .banner-top {
       width: 79%;
       float: left;
       margin-top: 8px;
   }
   
   ul.navig {
       padding: 0;
       width: 69%;
       float: left;
       margin: 1% auto 0;
       text-align: center;
   }
   
   ul.navig li {
       display: inline-block;
       margin: 0 10px;
   }
   
   ul.navig li a {
       text-transform: uppercase;
       font-size: 1em;
       color: #fff;
       font-weight: 700;
   }
   
   ul.navig li a:hover {
       color: #838383;
   }
   
   nav a,
   ul.navig a {
       position: relative;
       margin: 0px 0px 3px;
       outline: none;
       text-decoration: none;
       text-transform: capitalize;
       letter-spacing: 1px;
       font-weight: 400;
       text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
       font-size: 1.35em;
   }
   
   nav a:hover,
   nav a:focus,
   ul.navig a:hover,
   ul.navig a:focus {
       outline: none;
   }
   
   span.menu {
       display: none;
   }
   
   @media screen and (max-width: 1280px) {
       .logo {
           width: 4%;
       }
       .banner-top {
           width: 88%;
       }
   }
   
   @media screen and (max-width: 1024px) {
       .logo {
           width: 5%;
           margin-right: 4%;
       }
       .logo img {
           width: 100%;
       }
       .banner-top {
           width: 56%;
       }
       span.menu {
           display: block;
           cursor: pointer;
           float: none;
           margin: 3px auto 0em auto;
           width: 10%;
           background-color: #f0c11b;
           color: #000;
           text-align: center;
           padding: 6px;
           font-size: 16px;
           font-weight: 500;
           position: relative;
       }
   }
   
   @media screen and (max-width: 768px) {
       .logo {
           width: 5%;
           margin-right: 0;
           margin-top: 7px;
       }
   }
   
   @media screen and (max-width: 640px) {
       .logo {
           width: 6%;
       }
   }
   
   @media screen and (max-width: 480px) {
       span.menu {
           width: 17%;
           padding: 4px;
           font-size: 14px;
       }
       .logo {
           width: 31%;
           margin-top: 5px;
       }
   }
   
   @media screen and (max-width: 320px) {
       span.menu {
           width: 100%;
           padding: 5px;
           margin: 50px auto 0em auto;
       }
       .logo {
           width: 52%;
           margin-top: 8px;
       }
   }
   
   .container-fluid {
       padding: 0;
   }
   
   .navbar {
       border: 0 !important;
       border-radius: 0 !important;
       background-color: #545454;
       margin-bottom: 10px;
   }
   
   .navbar a {
       font-size: 18px;
       color: #fff;
   }
   
   .navbar-default {
       box-shadow: none !important;
   }
   
   .navbar-default .navbar-nav > li > a {
       /*color: #fff;*/
       -webkit-transition: all 0.2s ease-out;
       -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
       -ms-transition: all 0.2s ease-out;
       transition: all 0.2s ease-out;
   }
   
   .navbar-default .navbar-nav > li > a:hover {
       background-color: #e8cc4e;
       color: #000;
   }
   
   .navbar-default .navbar-nav > li > a:focus {
       color: #fff;
   }
   
   #bs-example-navbar-collapse-1 {
       background-color: #545454 !important;
   }
   
   ul.navbar-nav {
       margin-left: 10em;
   }
   
   .navbar-header {
       background: #545454;
   }
   
   .banner-container {
       width: 100%;
       background-color: #545454;
   }
   
   .banner-content {
       max-width: 1200px;
       margin: -70px auto;
   }
   
   .banner-content img {
       padding-top: 7em;
   }
   
   .banner-content h2 {
       font-size: 34px;
       color: #e8cc4e;
       text-align: center;
       padding-bottom: 100px;
   }
   
   .work-header {
       text-align: center;
       margin-bottom: 66px;
   }
   
   .how-work {
       background-color: #f2f2f2;
   }
   
   @media (max-width: 1199px) {
       .work-content {
           text-align: center;
       }
   }
   
   .work-header h2 {
       width: 350px;
       color: #0a3c63;
       font-weight: bold;
       padding-bottom: 10px;
       margin: 62px auto 37px auto;
       border-bottom: 2px solid #0a3c63;
   }
   
   .work-header p,
   .work-content {
       color: #868687;
   }
   
   .work-header h2 span {
       color: #e8cd4d;
   }
   
   .work-content {
       margin-bottom: 50px;
   }
   
   @media (min-width: 1600px) {
       .container {
           width: 1500px;
       }
   }
   
   @media screen and (device-width: 1024px) {
       .container {
           width: 990px;
       }
   }
   
   .index-details {
       color: #868687;
   }
   /*.index-details img{
   margin: 80px 0;

}*/

   .index-details .caption {
       margin: 20% 0;
       color: #868687;
   }
   
   .index-details .caption h3:before {
       content: url(../images/h-before.jpg);
       position: relative;
       top: 20px;
       margin-right: 15px;
   }
   
   .index-details .caption h3 {
       margin-bottom: 40px;
   }
   
   .index-details .caption p:last-child {
       margin-top: 20px;
   }
   
   .index-details .caption p:last-child a {
       background-color: #0a3c63;
       border: none;
       -webkit-transition: all 0.2s ease-out;
       -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
       -ms-transition: all 0.2s ease-out;
       transition: all 0.2s ease-out;
   }
   
   .index-details .caption p:last-child a:hover {
       background-color: #206295;
   }
   
   .index-details2 {
       background-color: #f2f2f2;
   }
   
   .index-headline {
       width: 270px;
       margin: 0 auto;
       font-size: 28px;
       font-weight: bold;
       padding-top: 20px;
       padding-bottom: 10px;
       color: #0a3c63;
       border-bottom: 1px solid #0a3c63;
   }
   
   .index-headline2 {
       width: 400px;
       padding-top: 50px;
       margin-bottom: 20px;
   }
   
   .index-headline span {
       color: #f0c11b;
   }
   
   footer {
       width: 100%;
   }
   
   footer address {
       width: 50%;
       position: relative;
       top: 3px;
   }
   /* footer address:after {
       content: url();
       width: 10px;
       height: 50px;
       position: absolute;
       left: 19em;
       bottom: -4px;
   } */
   
   .footer-img {
       width: 960px;
       margin: 0 auto;
       margin-top: 70px;
   }
   
   .footer-img li {
       float: left;
       margin-left: 50px;
   }
   
   .footer-img li:first-child {
       margin: 0;
   }
   
   @media screen and (max-width: 992px) {
       .footer-img {
           width: 550px;
       }
       .work-content div {
           margin-bottom: 30px;
       }
       .work-content div img {
           margin: 0 auto;
       }
       .index-details .caption {
           margin: 5% 0;
       }
   }
   /*Member*/
   
   .member-head {
       margin-top: 55px;
       background-color: #3ea79d;
   }
   
   .member-head h2 {
       color: #fff;
       padding: 50px 0;
   }
   
   .member-about {
       margin-top: 40px;
   }
   
   .member-about img {
       margin: 20px 0;
   }
   
   .member-about h5 {
       color: #3ea79d;
   }
   
   .member-content {
       padding-top: 50px;
       background-color: #f2f2f2;
   }
   
   .member-content div.row {
       margin-top: 50px;
   }
   
   .member-content div.row div {
       position: relative;
       /*width: 10%;*/
   }
   
   .memberPhoto {
       position: absolute;
       z-index: 901;
       top: 6%;
       left: 7%;
       width: 85%;
   }
   
   .returnTop {
       position: fixed;
       bottom: 8%;
       right: 3%;
       cursor: pointer;
   }
   /*@media screen and (min-width: 1366px) {
       .photo-content img.memberPhoto{
       -webkit-transition: all .35s ease-out;
       -o-transition: all .35s ease-out;
       transition: all .35s ease-out;
   }

.photo-content img.memberPhoto:hover{

       -webkit-transform: rotate(360deg);
       -ms-transform: rotate(360deg);
       -o-transform: rotate(360deg);
       transform: rotate(360deg);
   }

}*/

   .photo-content+h3 {
       color: #3ea79d;
       margin-top: 20px;
       margin-bottom: 10px;
   }
   
   .photo-content+h3 +h4 {
       font-style: italic;
       padding-bottom: 10px;
   }
   
   .photo-content+h3 +h4 +p {
       padding-bottom: 30px;
   }
   
   @media screen and (max-width: 991px) {
       .memberPhoto {
           top: 6%;
           left: 19.5%;
           width: 61%;
       }
       .photo-content img:first-child {
           margin: 0 auto;
       }
       .member-content div.col-md-4 {
           text-align: center;
           margin-bottom: 50px;
       }
   }
   
   @media screen and (width: 1366px) {
       .memberPhoto {
           top: 6.3%;
       }
   }
   
   .text-content {
       margin-top: 40px;
   }
   
   .text-content article {
       margin-bottom: 100px;
   }
   
   .text-content article h2 {
       margin-bottom: 15px;
   }
   
   .text-content article h3 {
       margin: 30px 0;
       font-style: italic;
   }
   
   .text-content article h2:before {
       content: url();
       margin-right: 10px;
       position: relative;
       top: 13px;
   }
   
   .text-content article p span {
       color: #3ea79d;
   }
   
   .text-content article img {
       margin: 20px 0;
   }
   
   .text-content article .note span.see_more {
       text-align: right;
       position: absolute;
       right: 80px;
       margin-top: -30px;
       display: none;
   }
   /*文章目录颜色修改*/
   
   .tocible_header {
       background-color: #545454 !important;
   }
   
   .tocible .tocible_heading {
       background: #2B3352;
   }
   
   .note li {
       background-color: #f2f2f2;
       margin-bottom: 10px;
       cursor: pointer;
   }
   
   .note li:hover {
       background-color: #e2e1e1;
   }
   
   .note li h4 {
       font-size: 24px;
       line-height: 50px;
       /*color: #868586;*/
       margin: 0 0 0 10px;
       position: relative;
   }
   
   .note li i {
       /*margin-left: 85%;*/
       position: absolute;
       left: 94%;
       top: 24%;
       display: inline-block;
       width: 43px;
       height: 30px;
   }
   
   .noteHide {
       cursor: auto;
       background-color: #f2f2f2 !important;
       margin: -7px 0 10px 0;
       padding: 10px;
   }
   
   .toggleNote {
       background-color: #58bbb6 !important;
       color: #fff !important;
   }
   
   .toggleNote i:before {
       content: url() !important;
   }
   
   .index-details .caption p a:visited {
       color: #fff !important;
   }
   
   i.icon-chevron-down:before {
       content: url();
   }
   
   .img-example {
       font-size: 13px;
       font-family: "Arial", sans-serif;
   }
   /* tocible */
   /*
* jquery.tocible.css v1.2.0, jQuery Tocible
*
* A lightweight table of contents navigation plugin
* https://github.com/markserbol/tocible
*
*/
   
   .tocible {
       background: #666;
       color: #FFF;
       font-size: 14px;
       height: auto;
       left: auto;
       right: auto;
       margin: 0;
       /*position: fixed !important; 
   top: 15% !important;
   left: 4% !important;*/
   }
   
   .tocible_header {
       text-transform: uppercase;
       cursor: pointer;
       padding: 5px 40px 5px 15px;
       position: relative;
       background: #333;
   }
   
   .tocible_header span {
       position: absolute;
       top: 15px;
       right: 15px;
       width: 0;
       height: 0;
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
       border-top: 6px solid #999;
       font-size: 0;
       line-height: 0;
       transition-property: -moz-transform, -webkit-transform, -o-transform, -ms-transform;
       transition-timing-function: linear;
       transition-duration: 0.4s;
   }
   
   .tocible_header span.toc_open {
       -moz-transform: rotate(-90deg);
       -webkit-transform: rotate(-90deg);
       -o-transform: rotate(-90deg);
       -ms-transform: rotate(-90deg);
       transform: rotate(-90deg);
   }
   
   .tocible ul {
       list-style: none;
       padding: 0;
       margin: 0;
       overflow: hidden;
   }
   
   .tocible li {
       border-bottom: 1px solid #000;
       cursor: pointer;
       white-space: nowrap;
       display: block;
   }
   
   .tocible li a {
       color: inherit;
       text-decoration: none;
       display: block;
       padding: 5px 15px;
       text-align: center;
       word-wrap: break-word;
       white-space: pre-wrap;
       white-space: -moz-pre-wrap
   }
   
   .tocible li:hover {
       background: #444;
   }
   
   .tocible li.toc_scrolled {
       background: #000;
       font-size: 18px;
   }
   
   .tocible .tocible_subheading {
       background: #666;
       font-size: 12px;
   }
   /* nav */
   
   label.mobile_menu span {
       margin-left: 10px;
       color: #FFF;
       font-size: 1em;
       display: none;
   }
   
   .nav {
       position: absolute;
       margin: 0;
   }
   
   ul.nav {
       padding: 0;
       list-style: none;
   }
   
   ul.nav1 {
       padding: 0;
       list-style: none;
   }
   
   .nav > li {
       display: inline-block;
       float: left;
       margin: 0;
   }
   
   .nav1 > li {
       display: inline-block;
       float: left;
       margin: 0;
   }
   
   .nav li .active a,
   .nav li a:hover {
       color: #fff !important;
   }
   
   .nav1 li .active a,
   .nav1 li a:hover {
       color: #fff !important;
   }
   
   .nav > li:nth-child {
       border-right: none;
   }
   
   .nav1 > li:nth-child(4) {
       border-right: none;
   }
   
   .nav > li:nth-child(1) {
       display: block;
       color: #FFED04;
       margin: 0;
       font-size: 11px;
       border: none;
       letter-spacing: 1px;
       background: none;
   }
   
   .nav1 > li:nth-child(1) {
       display: block;
       color: #FFED04;
       margin: 0;
       font-size: 11px;
       border: none;
       letter-spacing: 1px;
       background: none;
   }
   
   .banner-nav > li {
       background: none;
   }
   
   .banner-nav > li:nth-child(10) {
       border-right: none;
   }
   
   .banner-nav > li:nth-child(4) {}
   
   .banner-nav > li > a {
       font-weight: 400;
       font-style: normal !important;
       padding: 7px 20px !important;
       color: #fff !important;
       margin: 0 5px! important;
       font-size: 14px !important;
       letter-spacing: 1px !important;
       font-family: "Arial", sans-serif;
       /*text-transform: uppercase;*/
   }
   
   .banner-nav > li > a:hover {
       color: #000 !important;
       background: #e8cc4e;
   }
   
   .banner-nav > li > a.active {
       color: #000 !important;
       background: #e8cc4e;
   }
   
   .banner-nav> li > ul {
       top: 60px !important;
       width: 190px !important;
   }
   /* Link Style */
   
   .nav > li > a {
       padding: 0px 26px 0 15px;
       display: block;
       color: #FFED04;
       margin: 0;
       font-size: 11px;
       letter-spacing: 1px;
   }
   
   .nav1 > li > a {
       padding: 0px 26px 0 15px;
       display: block;
       color: #FFED04;
       margin: 0;
       font-size: 11px;
       letter-spacing: 1px;
       text-decoration: none;
   }
   
   .nav > li > a span {
       font-style: italic;
       padding: 0;
       display: block;
       color: #787878;
       margin: .5em 0 0 0;
       font-size: 11px;
       letter-spacing: 0px;
   }

} .nav > li:nth-child(1) > a, .nav > li:nth-child(5) > a, .nav > li:nth-child(6) > a, .nav > li:nth-child(7) > a {

   background: none;

} .nav > li:nth-child(1) > a:hover, .nav > li:nth-child(5) > a:hover, .nav > li:nth-child(6) > a:hover, .nav > li:nth-child(7) > a:hover {} .nav > li:hover > a {

   color: #bbbbbb;

} .nav li > ul li a:hover {

   text-decoration: none;
   color: #fff !important;

} .nav > li > a:hover, .nav > li > a:focus {

   color: #000 !important;
   background-color: #E8CC4E;

}

/* Simple multilevel dropdown */ .nav > li > ul {

   opacity: 0;
   visibility: hidden;
   position: absolute;
   list-style: none;
   top: 34px ! important;
   width: 100%;
   text-align: left;
   left: 5px;
   margin-top: 30px;
   padding: 0px;
   z-index: 99;
   border-bottom-right-radius: 6px;
   -webkit-border-bottom-right-radius: 6px;
   -ms-border-bottom-right-radius: 6px;
   -moz-border-bottom-right-radius: 6px;
   -o-border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
   -webkit-border-bottom-left-radius: 6px;
   -ms-border-bottom-left-radius: 6px;
   -moz-border-bottom-left-radius: 6px;
   -o-border-bottom-left-radius: 6px;

}

/* First level appear */ .nav > li:hover > ul {

   opacity: 1;
   visibility: visible;
   margin-top: 0px;
   background-color: #f3d15b;
   padding: 10px;

}

/* Style for dropdown links */ .nav li > ul li {

   position: relative;
   border-bottom: solid 1px rgba(120, 120, 120, 0.27);

} .nav li > ul li:last-child {

   border: none;

} .nav li > ul li:nth-child(4) {

   border-bottom: none;

} .nav li > ul li a {

   color: #000;
   font-size: 13px;
   font-family: "Arial", sans-serif;
   display: block;
   background-color: #e8cc4e;
   padding: 10px 10px;
   position: relative;
   -moz-transition: all 0.2s linear;
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;

} .nav li > ul li a span.arrow {

   width: 15px;
   height: 10px;
   position: absolute;
   right: 5px;
   top: 15px;

} .nav > li > ul li:hover {

   color: #000;
   -moz-transition: all 0.5s linear;
   -webkit-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;

} .nav ul.dropdown2 {

   color: #FFF;

} .nav ul li:hover > a {

   color: #787878;
   background: none;

}

/* Second and third dropdown level */ .nav > li > ul li ul {

   opacity: 0;
   visibility: hidden;
   position: absolute;
   list-style: none;
   top: 0px;
   left: 200px;
   width: 200px;
   text-align: left;
   padding: 0px;
   margin-left: 30px;

} .nav > li > ul li ul li:hover {

   background-color: #FFF;

} input#mobile_menu {

   display: none;

} .nav > li > ul li ul li ul {

   background-color: #FFF;

} .nav > li > ul li ul li ul li:hover {

   color: #0572B8;

}

/* Second and third level appears */ .nav > li ul li:hover > ul {

   opacity: 1;
   visibility: visible;
   margin-left: 0px;

}

/* Full width dropdown */ .nav > li > .fulldrop {

   opacity: 0;
   visibility: hidden;
   position: absolute;
   list-style: none;
   top: 118px;
   left: 0px;
   background-color: #0078b3;
   width: 100%;
   min-height: 100px;
   text-align: left;
   margin-top: 30px;
   padding: 0;
   z-index: 99;
   overflow: hidden;

}

/* Full dropdown appears */ .nav > li:hover .fulldrop {

   opacity: 1;
   visibility: visible;
   margin-top: 0px;

} .nav ul li:hover:after {

   color: white;

}

/* coldrop based dropdown */ .nav .coldrop {

   opacity: 0;
   visibility: hidden;
   position: absolute;
   list-style: none;
   top: 118px;
   background-color: #0078b3;
   min-height: 100px;
   text-align: left;
   margin-top: 30px;
   padding: 0;
   padding: 0 10px;
   z-index: 99;

} .nav > li:hover .coldrop {

   opacity: 1;
   visibility: visible;
   margin-top: 0px;

} .nav .coldrop .column {

   width: 130px;
   margin: 0 9px;

}

/* coldrop for full width dropdown */ .nav .column {

   width: 14.1%;
   float: left;
   color: white;
   margin: 0 0 0 2.2%;

} .nav .column ul {

   padding: 0;
   margin: 0;

} .nav .column ul li {

   padding: 0;
   list-style: none;
   font-size: 11px;

} .nav .column h3 {

   font-size: 14px;
   padding: 14px 0;
   font-weight: 400;
   margin: 5px 0 5px 0;

} .nav .column ul li a {

   display: block;
   padding: 0 0 15px 0;

} .nav > li > ul li ul, .nav li >ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li {

   transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   /* Firefox 4 */
   
   -webkit-transition: all 0.3s ease-in-out;
   /* Safari and Chrome */
   
   -o-transition: all 0.3s ease-in-outs;
   /* Opera */

} @media all and (max-width:1280px) {

   .nav > li > a {
       4font-size: 13px;
       letter-spacing: 0;
   }
   
   .navigation {
       margin-top: -10px;
   }

} @media all and (max-width:1024px) {

   .nav > li > ul {
       width: 155px !important;
       top: 40px !important;
   }
   
   .nav > li {
       margin: 0;
   }
   
   .nav > li > a span {
       font-size: 11px;
   }
   
   .banner-nav > li > a {
       padding: 11px 19px !important;
   }
   
   .nav > li:nth-child(1) {
       padding: 0px 6px;
   }

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

   .nav > li > a {
       padding: 10px 12px;
   }

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

   .nav {
       display: none;
   }
   
   label.mobile_menu span {
       display: inline;
   }
   
   label.mobile_menu {
       width: 100%;
   }
   
   label.mobile_menu {
       position: relative;
       display: block;
       width: 100%;
       background-color: #454B50;
       padding: 10px 0;
       border-bottom: 1px solid white;
       margin-top: 10px;
       cursor: pointer;
   }
   
   .nav {
       padding: 0;
   }
   
   ul.nav {
       padding: 0;
       list-style: none;
       padding: 0;
       margin: 0;
       z-index: 9999;
       position: absolute;
       width: 100%;
       left: 0;
   }
   
   .nav > li > a {
       border-width: 0;
   }
   
   .nav li {
       width: 100%;
       text-align: left;
       margin-left: 0;
   }
   
   .nav > li {
       border-right: none;
       padding: 5px 0px;
       position: relative;
   }
   
   .nav > li > a {
       display: block;
       font-size: 0.85em;
   }
   
   .nav li ul,
   .nav li .fulldrop,
   .nav li .coldrop {
       top: 45px;
   }
   
   .nav > li {
       background: none;
   }
   
   .nav li ul {
       padding: 0;
   }
   
   .nav > li:hover > a {
       background-color: #CACACA;
   }
   
   .nav .fulldrop,
   .nav .coldrop {
       width: 95%;
       padding: 0 2.5%;
   }
   
   .nav li > ul li {
       padding: 18px 0px;
   }
   
   .nav .column,
   .nav .coldrop .column {
       width: 94%;
       padding: 0 3%;
   }
   
   .nav > li > ul {
       width: 100%;
   }
   
   .nav > li > ul li ul {
       width: 100%;
       top: 36px;
       left: 0;
       margin-top: 30px;
       z-index: 2;
   }
   
   .nav > li > ul > li:hover ul {
       margin-top: 0;
   }
   
   #mobile_menu:checked+.nav {
       display: block
   }
   
   label.mobile_menu:after {
       position: absolute;
       top: -2px;
       right: 10px;
       content: "\2261";
       font-size: 30px;
       color: white;
   }
   
   .nav > li > ul li ul li ul {
       width: 100%;
       top: 43px;
       left: 0px;
       margin-left: 0;
       margin-top: 30px;
   }
   
   .nav > li > ul > li ul li:hover ul {
       margin-top: 0;
   }
   
   .nav > li > ul li {
       padding: 0px 0 0px 0%;
       width: 100%;
   }
   
   .nav > li > ul li ul {
       margin-left: 0;
   }
   
   .nav > li > ul li ul li {
       padding: 5px 0 5px 0%;
       width: 100%;
   }
   
   .nav > li > ul li ul li ul li {
       padding: 15px 0 15px 0%;
       width: 100%;
   }
   
   .nav ul li.dropdown:after {
       left: 90%;
   }
   /* 移动设备禁用动画 */
   
   .nav > li > ul li ul,
   .nav li >ul li,
   .nav > li > .fulldrop,
   .nav > li > .coldrop,
   .nav > li > ul,
   .nav > li {
       transition: none;
       -moz-transition: none;
       -webkit-transition: none;
       -o-transition: none;
   }
   
   .navigation {
       margin-top: 0;
   }

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

   .banner-nav > li > a {
       padding: 7px 18px !important;
       margin: 0 3px! important;
       font-size: 13px !important;
   }
   
   .nav > li > ul {
       top: 32px ! important;
       left: 3px;
   }

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

   .banner-nav > li > a {
       padding: 7px 13px !important;
       margin: 0 0px! important;
       font-size: 13px !important;
   }
   
   .nav > li > ul {
       left: 0px;
   }

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

   .nav > li > a.down-scroll {
       background: url(../images/menu-arrow.png) no-repeat 97% 48%;
       /*折叠导航二级菜单展开小箭头*/
   }
   
   .nav > li > ul {
       top: 23px ! important;
   }

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

   .nav > li > ul {
       width: 35% !important;
       margin-left: 16%;
   }
   
   .banner-nav > li > a {
       padding: 14px 13px !important;
   }
   
   ul.nav {
       background-color: rgba(61, 175, 164, 0.7);
   }
   
   .nav li > ul li a span.arrow {
       right: 20px;
   }
   
   .nav > li:hover > a {
       background: ;
   }
   
   .nav > li:nth-child(1) {
       padding: 0px 0px;
       background: none;
   }

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

   .banner-nav > li > a {
       padding: 10px 14px !important;
   }

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

   label.mobile_menu {
       padding: 7px 0;
       margin-top: 8px;
   }
   
   label.mobile_menu:after {
       font-size: 25px;
   }

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

   .nav1 > li > a {
       padding: 0px 10px 0 10px;
   }
   
   .banner-nav > li > a {
       padding: 6px 14px !important;
   }
   
   .nav > li > ul {
       top: 39px ! important;
   }

}

/* article */ header .navbar-logo img {

   width: 60px;
   position: absolute;
   left: 30px;
   top: 23px;
   z-index: 2;

} .text-content article p {

   text-indent: 20px;
   margin: 10px 0;
   font-size: 15px;
   line-height: 24px;

} .text-content article img {

   width: 80%;
   padding-left: 20%;
   /* margin-left: 20%; */

}

igem_home_logo {

   position: relative;

}

igem_home_logo>img {

   position: absolute;
   /* top: 20%; */
   
   left: 10%;
   /* padding-top: 0; */

}

/* for the carousel */ .carousel-control.left, .carousel-control.right {

   background-image: none;
   padding-top: 18%;

} .carousel-indicators li {

   background-color: #fff;
   border: 1px solid #a94442;

} .carousel-indicators li.active {

   background-color: #f0ad4e;

}

/* for disable iGEM settings */

contentSub,
contentcontainer,
footer-box,
sitesub,
catlinks,
search-controls,
p-logo,

.h3, .printfooter, .firstHeading, .visualClear {

   display: none;

}

sideMenu,
top_title {

   display: none;

}

bodyContent h1,
bodyContent h2,
bodyContent h3,
bodyContent h4,
bodyContent h5 {

   margin-bottom: 0px;

}

search_text {

   color: #000;

}

globalWrapper,
content {

   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   width: 100%;
   height: 100%;
   border: 0px;
   background-color: transparent;
   margin: 0px;
   padding: 0px;

} html {

   overflow-x: hidden;
   width: 100%;

} .banner-top {

   margin-left: 15%;

}

igem_home_logo {

   width: 100%;
   margin-top: 80px;

} @media (min-width: 992px) {

   .work-content .col-md-4 {
       width: 25%;
       margin-right: 8%;
   }

} .text-content article table {

   font-size: 12px;
   color: #333333;
   width: 80%;
   margin-left: 10%;
   border-width: 1px;
   border-color: #729ea5;
   border-collapse: collapse;

} .text-content article table th {

   font-size: 12px;
   background-color: #acc8cc;
   border-width: 1px;
   padding: 8px;
   border-style: solid;
   border-color: #729ea5;
   text-align: left;

} .text-content article table tr {

   background-color: #d4e3e5;

} .text-content article table td {

   font-size: 12px;
   border-width: 1px;
   padding: 8px;
   border-style: solid;
   border-color: #729ea5;

} .text-content article table tr:hover {

   background-color: #ffffff;

} .text-content article img {

   padding-left: 20%;

}