Template:BIT-China/basicCSS/templateStyleCss

@import url(http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css);

/*************************************/

@font-face { 

   font-family: 'Roboto';
   font-style: normal;
   font-weight: 100;
   src: local('Roboto Thin'), local('Roboto-Thin'),
   url(http://fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg13YhjbSpvc47ee6xR_80Hnw.woff) format('woff');

}

.page-title{ 

   font-family: 'Roboto',san-serif;
   font-size: 50px;color: white;
   display: block;
   height: 200px;
   line-height: 200px;
   background: rgba(20,41,60,0.7);
   position:absolute;text-align: center;left: 0;

}

.circle_img_2s{ 

   -webkit-animation:logoSizing 1s ease-in-out 0s 2;

}

/*logo大小变化效果*/ @-webkit-keyframes logoSizing { 

   0%,100%{
       -webkit-transform: scale(1);
       -moz-transform: scale(1);
       -ms-transform: scale(1);
       -o-transform: scale(1);
       transform: scale(1);
   }
   50%{
       -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
       -ms-transform: scale(1.5);
       -o-transform: scale(1.5);
       transform: scale(1.5);
   }

}

.top-title{ 

   font-size:48px;
   font-weight: bold;
   color:#141d3d;

}

.panel-title a{ 

   display:block;
   padding:20px 20px 20px 20px;
   color:#FFF !important;
   font-size:18px;
   font-weight:500;

}

.accordion-light .panel-title a{ 

   display:block;
   padding:20px 20px 20px 20px;
   color:#666 !important;
   font-size:18px;
   font-weight:500;

}

/**************************************************/

.home-nav-wrapper{ 

   padding: 10px 0 30px 0;

}

.bottom-title{ 

   color:rgb(21,40,60) !important;
   font-size:16px;
   margin-top: 10px;
   margin-bottom:40px;
   text-align: center;
   /*font-family: 'Raleway', sans-serif !important;*/

}

.header-xsmall, .header-xsmall a { 

   display: block;
   padding-top: 10px;
   margin: 10px;
   font-size:25px;
   text-decoration: underline;
   text-align: center;
   font-weight:bold;

}

/************************************************************************/


/*---------------------------------*/ /* 23. COUNTER STYLES */ /*---------------------------------*/

.bg-overlay-dark { 

   background: rgba(51,51,51,0.8);

} .bg-overlay { 

   overflow: hidden;
   height: 100%;
   z-index: 2;
   padding: 70px 0;

}

.text-white-center{ 

   color:#FFF !important;
   text-align:center !important;

}

.counter-wrapper{ 

   margin:10px auto 10px auto;
   width:200px;
   height:200px;
   border-radius:100px;
   -moz-border-radius: 100px;
   -webkit-border-radius: 100px;
   border:6px solid #EEE;
   color:#EEE;
   font-size:45px;
   text-align:center;
   line-height:190px;

}

.counter-wrapper-gray{ 

   border:3px solid #666;
   color:#666 !important;

}

.counter-wrapper-green{ 

   border:4px solid #68C3A3;

}

.counter-wrapper-green-2{ 

   border:4px solid #68C3A3;
   color:#666;

}

.counter-wrapper-red{ 

   border:4px solid #eb5d68 ;

}

.counter-wrapper-blue{ 

   border:4px solid #3498DB ;

}

.counter-wrapper-bg-dark{ 

   background-color:#666;

}

.counter-wrapper-bg-green{ 

   background-color:#68C3A3;
   color:#FFF;

}

.counter-wrapper-bg-blue{ 

   background-color:#3498DB;
   color:#FFF;

}

.counter-wrapper-bg-red{ 

   background-color:#eb5d68;
   color:#FFF;

}

.counter-header{ 

   margin-bottom:50px;

}

.counter-text-white{ 

   font-family: 'Raleway', sans-serif;
   text-align:center;
   color:#EEE;
   padding:0 40px 0 40px;

}

.counter-text-2{ 

   text-align:center;
   padding:0 40px 0 40px;

}


/*---------------------------------------------*/ /* 30. CONTACT PAGE & CONTACT FOOTER STYLES */ /*---------------------------------------------*/

.contact, .contact2, .contact3{ 

   background-color:#FFF;
   border:1px solid #E5E5E5;
   padding:20px 15px;
   margin-left:auto;
   margin-right:auto;

}

.contact-header-bg{ 

   background-color:#666;
   color:#FFF;
   padding:8px 15px 8px 15px;
   display:inline-block;
   font-size:16px;
   margin:0 0 10px 0;

}

.contact hr, .contact2 hr, .contact3 hr{ 

   margin-top:10px;

}

.contact h4, .contact2 h4, .contact3 h4{ 

   margin-top:20px;

}

.contact-map-area{ 

   width:100%;
   margin-bottom:20px;
   overflow:hidden;
   height:250px;
   border:1px solid #E5E5E5;

}

.contact-map-area2, .contact-map-area3{ 

   width:100%;
   margin-bottom:20px;
   overflow:hidden;
   height:350px;
   border:1px solid #E5E5E5;

}

.contact-info ul{ 

   margin:20px 0 0 0;
   padding:0;

}

.contact-info ul li{ 

   list-style:none;
   margin-bottom:15px;

}

.contact-info ul li i{ 

   margin-right:20px;
   font-size:18px;
   color:#666;

}

.contact-form-area{ 

   background-color:#F5F5F5;
   padding:45px 10px;
   border:1px solid #DDD;

}

.contact-form-area2, .contact-form-area3{ 

   background-color:#F5F5F5;
   padding:20px 10px;
   border:1px solid #DDD;

}

.contact-form3{ 

   margin-top:40px;

}

.contact-onepage-light{ 

   background-color:#F7F7F7 !important;

}

.contact-onepage-light h3{ 

   color:#3f444a !important;

}

.contact-onepage-light p, .contact-onepage-light a{ 

   color:#5c6873 !important;

}

.contact-onepage p, .contact-onepage li, .contact-onepage a{ 

   color:#888 !important;
   font-size:16px;

}

.contact-onepage{ 

   padding:80px 0 !important;

}

.contact-onepage i{ 

   color:#AAA !important;

}

.contact-one-page-form-area button{ 

   margin-top:20px;

}

.contact-one-page-form-area input, .contact-one-page-form-area textarea{ 

   background-color:#333;
   border:1px solid #444;
   color:#DDD;

}

.onepage-footer{ 

   padding:40px 0 25px 0;
   background-color:#282828;

}

.onepage-footer p{ 

   color:#777;

}

.op-contact-social{ 

   float:right;

}

.op-contact-social li{ 

   display:inline-block;
   list-style:none;
   padding:10px;
   background-color:#333;
   margin-left:10px;
   width:40px;
   height:40px;
   text-align:center;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;

}

.op-contact-social li:hover{ 

   background-color:#555;

}

.op-contact-social li a{ 

   font-size:18px;
   color:#666;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;

}

.op-contact-social li:hover a{ 

   color:#FFF;

}

.btn1-md{ 

   font-size:14px;
   padding:6px 20px;
   line-height:25px;

} .btn1-default, .btn1-blue, .btn1-red, .btn1-orange, .btn1-dark, .btn1-white{ 

   font-size:14px;
   color:#FFF;
   text-align:center;
   padding:5px 20px;
   border:none;
   margin:5px 0 5px 0;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
   line-height:25px;
   border-radius:2px;

}

.contact-page{ 

   padding-top: 20px;
   /*padding-bottom: 20px;*/

}

/****************/ /******导航栏样式*********/ /*** Header and header elements

      • /

.header { 

   /*box-shadow: 0 5px 7px #CA01F9;*/

   box-shadow: 0 5px 7px #620053;
   /*background: #fff;*/
   border-radius: 0;
   /*margin-bottom: 23px;*/
   /*z-index: 999;*/
   position: relative;
   -webkit-transition: all ease-in-out 0.2s;
   -moz-transition: all ease-in-out 0.2s;
   -ms-transition: all ease-in-out 0.2s;
   -o-transition: all ease-in-out 0.2s;
   transition: all ease-in-out 0.2s;

}

.roll-nav{ 

   z-index: 3;
   padding: 0;
   position: fixed;
   background: url(T--BIT-China--img--top_bg.png);
   /*background:  url(../img/top_bg.jpg);*/
   margin-top: -10px;

   -webkit-transition: all ease-in-out 0.2s;
   -moz-transition: all ease-in-out 0.2s;
   -ms-transition: all ease-in-out 0.2s;
   -o-transition: all ease-in-out 0.2s;
   transition: all ease-in-out 0.2s;

   -webkit-box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);
   box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);

}

.roll-nav-hide{ 

   -webkit-transform: translateY(-500px);
   -moz-transform: translateY(-500px);
   -ms-transform: translateY(-500px);
   -o-transform: translateY(-500px);
   transform: translateY(-500px);

}


.home-img{ 

   padding-left: 200px;padding-right: 200px;

}

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

   .home-img{
       padding-left: 100px;padding-right: 100px;
   }

}

.site-logo{ 

   /*float: left;*/
   /*padding-left: 10px;*/

}

/* 导航栏 */ .header-navigation { 

   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 18px;
   font-weight: bold;
   /*margin: 0 10px 0 0;*/
   margin: 0;
   padding: 0;
   float: left;
   /*text-transform: uppercase;*/



   /*background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(216,209,183, 0.2)), to(rgba(237,111,0, 0.2)));*/
   /*background-image: -webkit-linear-gradient(top, rgba(216,209,183, 0.2), rgba(237,111,0, 0.2));*/
   /*background-image:    -moz-linear-gradient(top, rgba(216,209,183, 0.2), rgba(237,111,0, 0.2));*/
   /*background-image:      -o-linear-gradient(top, rgba(216,209,183, 0.2), rgba(237,111,0, 0.2));*/
   /*background-image:         linear-gradient(to bottom, rgba(216,209,183, 0.2), rgba(237,111,0, 0.2));*/

} .header-navigation ul { 

   margin: 0;
   padding: 0;
   list-style: none;

} .header-navigation > ul > li { 

   float: left;
   padding:0 10px;
   /*box-shadow: 5px 0 rgba(216,209,183, 0.2);*/

}

.header-navigation > ul > li:last-child{ 

   box-shadow: none;

}

.header-navigation > ul > li > a { 

   /*color: #333;*/
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;

   /*color: rgb(136, 41, 129);*/
   color: #FFFFFF;
   height:86px;
   display: block;
   padding: 29px 3px 30px;
   font-size: 14px;
   /*padding: 2em 1em 2em;*/

}

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

   .header-navigation > ul > li{
       padding: 0;
   }

}

/*.header-navigation > ul >li >a:after{*/ 

   /*content: '\e828';*/
   /*position: absolute;*/
   /*right: 10px;*/
   /*top: 50%;*/

/*}*/

.header-navigation ul > li.active > a, .header-navigation ul > li > a:hover, .header-navigation ul > li > a:focus, .header-navigation ul > li.open > a, .header-navigation ul > li.open > a:hover, .header-navigation ul > li.open > a:focus { 

   /*color: rgb(136, 41, 129);*/
   color: #FFFFFF;
   text-decoration: none;
   display: block;
   background:rgba(20,41,60,0.3);

} .header-navigation ul > li.active > a { 

   background: rgba(47,47,47,0.3);
   border-bottom: 2px solid #e64f00;

}

/* 下拉菜单*/ .header-navigation .tabdown-menu { 

   left: auto;
   top: 80px;
   padding: 0;
   position: absolute;
   border: none;
   text-transform: none;
   letter-spacing: 0;
   border-radius: 0;

   z-index: 5;



   /*perspective*/
   -webkit-perspective: 400px;
   -moz-perspective: 400px;
   -ms-perspective: 400px;
   -o-perspective: 400px;
   perspective: 400px;

}

.header-navigation .tabdown-menu:before, .header-navigation .tabdown-menu:after { 

   display: none !important;

} .header-navigation > ul > li > .tabdown-menu { 

   background:rgb(20,41,60);
   /*border-top: solid 3px transparent;*/
   /*z-index: 1001;*/
   /*background: url(../img/footer_bg.jpg);*/
   /*background: url(https://static.igem.org/mediawiki/2016/c/c5/T--BIT-China--img--footer_bg.png);*/

}

/*/!*hover产生的小三角形效果*!/*/ /*.header-navigation > ul > li.tabdown:hover > a:after ,.header-navigation > ul > li.tabdown:focus > a:after {*/ 

   /*/!*bottom: 0;*!/*/



   /*top: 80px;*/
   /*width: 0;*/
   /*height: 0;*/
   /*z-index: 1002;*/
   /*content: " ";*/
   /*display: block !important;*/
   /*position: absolute;*/
   /*border-bottom: 8px solid #e6400c;*/
   /*border-right: 8px solid transparent;*/
   /*border-left: 8px solid transparent;*/



   /*/!*延迟动画*!/*/
   /*-webkit-transition: opacity .4s, -webkit-transform .5s;*/
   /*-moz-transition: opacity .4s, -moz-transform .5s;*/
   /*-ms-transition: opacity .4s, -ms-transform .5s;*/
   /*-o-transition: opacity .4s, -o-transform .5s;*/
   /*transition: opacity .4s, transform .5s;*/

/*}*/

/*首个选项顶部红色*/ .header-navigation .tabdown-menu > li:first-child { 

   border-top: solid 2px #692117;

}

/*离开页面*/ .tabdown > .tabdown-menu{ 

   -webkit-transform: translateX(1000%);
   -moz-transform: translateX(1000%);
   -ms-transform: translateX(1000%);
   -o-transform: translateX(1000%);
   transform: translateX(1000%);
   /*display: none;*/

} .tabdown:focus > .tabdown-menu,.tabdown:hover > .tabdown-menu{ 

   /*display: block;*/
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);

}

.header-navigation .tabdown-menu li { 

   padding: 0;
   margin: 0;
   border-bottom: solid 2px #efefef;
   position: relative;
   display:block;
   float: none;

   /*初始状态*/
   opacity: 0;

   -webkit-transform: rotateY(90deg);
   -moz-transform: rotateY(90deg);
   -ms-transform: rotateY(90deg);
   -o-transform: rotateY(90deg);
   transform: rotateY(90deg);

   -webkit-transition: opacity .4s, -webkit-transform 0.3s;
   -moz-transition: opacity .4s, -moz-transform 0.3s;
   -ms-transition: opacity .4s, -ms-transform 0.3s;
   -o-transition: opacity .4s, -o-transform 0.3s;
   transition: opacity .4s, transform 0.3s;

}

.header-navigation > ul >li:hover .tabdown-menu li,.header-navigation > ul >li:focus .tabdown-menu li{ 

   /*显示各个子菜单*/
   opacity: 1;

   -webkit-transform: none;
   -moz-transform: none;
   -ms-transform: none;
   -o-transform: none;
   transform: none;

}

.header-navigation .tabdown-menu li:last-child { 

   border: none;

} .header-navigation .tabdown-menu li > a { 

   padding: 10px 20px;
   display: block;
   font-weight: 400;

   /*background: #fff;*/
   color:#eeeeee;
   text-shadow: 1px 2px 5px #692117;
   box-shadow: 2px 2px rgba(20, 29, 61, 0.3);

}

/*二级菜单a标签hover效果*/ .header-navigation .tabdown-menu > li > a:hover, .header-navigation .tabdown-menu > li.active > a, .header-navigation .header-navigation-content .header-navigation-col li > a:hover, .header-navigation .header-navigation-content .header-navigation-col li.active > a { 

   background-color: rgb(0,0,21);
   color: #cccccc;

}

/* 特殊导航 多分栏 —————————— 暂时弃用*/ .header-navigation-content { 

   padding: 20px 30px;
   min-width: 600px;

} .header-navigation-content .header-navigation-col { 

   padding: 0;

} .header-navigation-content h4, .ecommerce .header-navigation-content h4 { 

   font: bold 15px 'Open Sans', Arial, sans-serif;
   margin: 0 0 6px;
   padding: 10px 10px 5px;
   border-bottom: solid 1px #f0f0f0;

} .header-navigation-content ul { 

   padding: 0;
   margin: 0 0 10px;
   list-style: none;

} .header-navigation-content li { 

   padding: 0;
   border: none !important;

} .header-navigation-content li > a { 

   display: block;

}

/*菜单渐显和渐隐效果*/ /****************************************/ .header-navigation > ul >li:hover .tabdown-menu li:nth-child(1), .header-navigation > ul >li:focus .tabdown-menu li:nth-child(1) { 

   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -ms-transition-delay: 0s;
   -o-transition-delay: 0s;
   transition-delay: 0s;

} .header-navigation > ul >li:hover .tabdown-menu li:nth-child(2), .header-navigation > ul >li:focus .tabdown-menu li:nth-child(2) { 

   -webkit-transition-delay: 50ms;
   -moz-transition-delay: 50ms;
   -ms-transition-delay: 50ms;
   -o-transition-delay: 50ms;
   transition-delay: 50ms;

} .header-navigation > ul >li:hover .tabdown-menu li:nth-child(3), .header-navigation > ul >li:focus .tabdown-menu li:nth-child(3) { 

   -webkit-transition-delay: 100ms;
   -moz-transition-delay: 100ms;
   -ms-transition-delay: 100ms;
   -o-transition-delay: 100ms;
   transition-delay: 100ms;

} .header-navigation > ul >li:hover .tabdown-menu li:nth-child(4), .header-navigation > ul >li:focus .tabdown-menu li:nth-child(4) { 

   -webkit-transition-delay: 150ms;
   -moz-transition-delay: 150ms;
   -ms-transition-delay: 150ms;
   -o-transition-delay: 150ms;
   transition-delay: 150ms;

} .header-navigation > ul >li:hover .tabdown-menu li:nth-child(5), .header-navigation > ul >li:focus .tabdown-menu li:nth-child(5) { 

   -webkit-transition-delay: 200ms;
   -moz-transition-delay: 200ms;
   -ms-transition-delay: 200ms;
   -o-transition-delay: 200ms;
   transition-delay: 200ms;

} .header-navigation > ul >li:hover .tabdown-menu li:nth-child(6), .header-navigation > ul >li:focus .tabdown-menu li:nth-child(6) { 

   -webkit-transition-delay: 250ms;
   -moz-transition-delay: 250ms;
   -ms-transition-delay: 250ms;
   -o-transition-delay: 250ms;
   transition-delay: 250ms;

} .header-navigation > ul >li:hover .tabdown-menu li:nth-child(7), .header-navigation > ul >li:focus .tabdown-menu li:nth-child(7) { 

   -webkit-transition-delay: 300ms;
   -moz-transition-delay: 300ms;
   -ms-transition-delay: 300ms;
   -o-transition-delay: 300ms;
   transition-delay: 300ms;

} .header-navigation > ul >li:hover .tabdown-menu li:nth-child(8), .header-navigation > ul >li:focus .tabdown-menu li:nth-child(8) { 

   -webkit-transition-delay: 350ms;
   -moz-transition-delay: 350ms;
   -ms-transition-delay: 350ms;
   -o-transition-delay: 350ms;
   transition-delay: 350ms;

}

.tabdown-menu li:nth-child(1) { 

   -webkit-transition-delay: 350ms;
   -moz-transition-delay: 350ms;
   -ms-transition-delay: 350ms;
   -o-transition-delay: 350ms;
   transition-delay: 350ms;

} .tabdown-menu li:nth-child(2) { 

   -webkit-transition-delay: 300ms;
   -moz-transition-delay: 300ms;
   -ms-transition-delay: 300ms;
   -o-transition-delay: 300ms;
   transition-delay: 300ms;

} .tabdown-menu li:nth-child(3) { 

   -webkit-transition-delay: 250ms;
   -moz-transition-delay: 250ms;
   -ms-transition-delay: 250ms;
   -o-transition-delay: 250ms;
   transition-delay: 250ms;

} .tabdown-menu li:nth-child(4){ 

   -webkit-transition-delay: 200ms;
   -moz-transition-delay: 200ms;
   -ms-transition-delay: 200ms;
   -o-transition-delay: 200ms;
   transition-delay: 200ms;

} .tabdown-menu li:nth-child(5) { 

   -webkit-transition-delay: 150ms;
   -moz-transition-delay: 150ms;
   -ms-transition-delay: 150ms;
   -o-transition-delay: 150ms;
   transition-delay: 150ms;

} .tabdown-menu li:nth-child(6) { 

   -webkit-transition-delay: 100ms;
   -moz-transition-delay: 100ms;
   -ms-transition-delay: 100ms;
   -o-transition-delay: 100ms;
   transition-delay: 100ms;

} .tabdown-menu li:nth-child(7){ 

   -webkit-transition-delay: 50ms;
   -moz-transition-delay: 50ms;
   -ms-transition-delay: 50ms;
   -o-transition-delay: 50ms;
   transition-delay: 50ms;

} .tabdown-menu li:nth-child(8){ 

   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -ms-transition-delay: 0s;
   -o-transition-delay: 0s;
   transition-delay: 0s;

}


/*顶部子导航*/

.sub-top-nav{ 

   -webkit-transition: all ease-in-out 0.2s;
   -moz-transition: all ease-in-out 0.2s;
   -ms-transition: all ease-in-out 0.2s;
   -o-transition: all ease-in-out 0.2s;
   transition: all ease-in-out 0.2s;

}

.sub-top-hide{ 

   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
   -ms-transform: translateX(-100%);
   -o-transform: translateX(-100%);
   transform: translateX(-100%);

}


.sub-top-nav-left{ 

   margin: 5px;
   padding: 2px;
   color: white;
   display: table;

}

.sub-top-nav-left span{ 

   font-size: 18px;
   display: table-cell;
   vertical-align: middle;

}

.sub-top-nav-right { 

   color: white;
   margin: 5px;
   padding: 2px;
   display: table;
   font-size: 12px;

}

.sub-top-nav-right span{ 

   display: table-cell;
   vertical-align: middle;

}

  1. sub-top-nav-right .nav-divider{
   display: inline-block;
   position: relative;
   margin: 0 0.85em 0 1.1em;
   vertical-align: top;
   text-align: center;

}