|
|
Line 1: |
Line 1: |
− | /*general*/
| + | {{SMMU-China}} |
− | @font-face{
| + | <html> |
− | font-family: 'SMMUFONT';
| + | |
− | src:url('https://static.igem.org/mediawiki/2019/8/8f/T--SMMU-China--SMMUFONT.ttf') format('truetype');
| + | |
− | }
| + | |
− | body,h1,h2,h3,h4,h5,h6,p,th,td{font-family:"SMMUFONT"!important;}
| + | |
− | a{color:#333; text-decoration:none;}
| + | |
− | h1{font-size: 27px; line-height: 50px;}
| + | |
− | h2{font-size: 25px; line-height: 50px;}
| + | |
− | h3{font-size: 23px; line-height: 50px;}
| + | |
− | h4{font-size: 21px; line-height: 50px;}
| + | |
− | h5{font-size: 19px; line-height: 50px;}
| + | |
− | h6{font-size: 17px; line-height: 50px;}
| + | |
| | | |
| + | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_main&action=raw&ctype=text/css" /> |
| + | <!--<link rel="stylesheet" href="main.css" />--> |
| | | |
− | .big_framework {
| + | <style type="text/css"> |
− | background-color: white;
| + | |
− | display: block;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
| | | |
− | .big_framework .page_banner {
| + | </style> |
− | margin: auto;
| + | |
− | width: 100%;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
| | | |
− | .big_framework .page_big_title_box {
| + | <div class="big_framework"> |
− | margin: 30px auto; | + | <div class="index-nav"> |
− | width: 1160px;
| + | <div class="index-nav-frame clearfix"> |
− | height: 180px;
| + | <div class="nav-line"> |
− | text-align: right;
| + | <div class="index-nav-frame-logo-mobile"> |
− | border-right: 10px solid #3B3B3B;
| + | <img src="https://static.igem.org/mediawiki/2019/a/a5/T--SMMU-China--xiaotian_logo.png" alt="XiaoTian"> |
− | padding-right: 30px;
| + | </div> |
− | }
| + | </div> |
| + | <div class="nav-small" tabindex="-1"> |
| + | <div class="nav-small-focus" tabindex="-1"> |
| + | |
| + | </div> |
| + | <img src="https://static.igem.org/mediawiki/2019/7/70/T--SMMU-China--header_icon.png"/> |
| + | </div> |
| + | <div class="index-nav-frame-logo"> |
| + | <img src="https://static.igem.org/mediawiki/2019/a/a5/T--SMMU-China--xiaotian_logo.png" alt="XiaoTian"> |
| + | </div> |
| + | <div class="index-nav-frame-line active first-one" tabindex="-1"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China">Home</a> |
| + | <div class="index-nav-frame-line-center need-to-be-hidden"> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China">Home</a> |
| + | </div> |
| + | </div> |
| + | <div class="index-nav-frame-line-focus" tabindex="-1"></div> |
| + | </div> |
| + | <div class="index-nav-frame-line" tabindex="-1"> |
| + | PROJECT |
| + | <div class="index-nav-frame-line-center"> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Description">Description</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Design">Design</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Team">Team</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Experiments">Experiments</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Notebook">Notebook</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Contribution">Contribution</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Results">Results</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Demonstrate">Demonstrate</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Improve">Improve</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Attributions">Attributions</a> |
| + | </div> |
| + | </div> |
| + | <div class="index-nav-frame-line-focus" tabindex="-1"></div> |
| + | </div> |
| + | <div class="index-nav-frame-line" tabindex="-1"> |
| + | PARTS |
| + | <div class="index-nav-frame-line-center"> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Parts">Parts Overview</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Basic_Part">Basic Parts</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Composite_Part">Composite Parts</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Part_Collection">Part Collection</a> |
| + | </div> |
| + | </div> |
| + | <div class="index-nav-frame-line-focus" tabindex="-1"></div> |
| + | </div> |
| + | <div class="index-nav-frame-line" tabindex="-1"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Safety">Safety</a> |
| + | <div class="index-nav-frame-line-center need-to-be-hidden"> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Safety">Safety</a> |
| + | </div> |
| + | </div> |
| + | <div class="index-nav-frame-line-focus" tabindex="-1"></div> |
| + | </div> |
| + | <div class="index-nav-frame-line HP-button" tabindex="-1"> |
| + | HUMAN PRACTICES |
| + | <div class="index-nav-frame-line-center"> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Human_Practices">Human Practices</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Public_Engagement">Education & Engagement</a> |
| + | </div> |
| + | </div> |
| + | <div class="index-nav-frame-line-focus" tabindex="-1"></div> |
| + | </div> |
| + | <div class="index-nav-frame-line" tabindex="-1"> |
| + | AWARDS |
| + | <div class="index-nav-frame-line-center"> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Model">Model</a> |
| + | </div> |
| + | <div class="index-nav-frame-line-li"> |
| + | <a href="https://2019.igem.org/Team:SMMU-China/Software">Software</a> |
| + | </div> |
| + | </div> |
| + | <div class="index-nav-frame-line-focus" tabindex="-1"></div> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="blank_framework"></div> |
| | | |
− | .big_framework .page_big_title_box .page_big_title{
| + | <div class="home_banner"> |
− | font-size: 100px; | + | <div class="home_banner_title"> |
− | color: #EE2C2C;
| + | WuKong |
− | line-height: 120px;
| + | </div> |
− | font-weight: 1000;
| + | <div class="home_banner_subtitle"> |
− | }
| + | <span class="typeWriter" data-end="2000" data-speed="3" data-text='["This is test sentence ONE!", "This is test sentence TWO!", "This is test sentence THREE!"]'></span> |
| + | </div> |
| + | </div> |
| | | |
− | .big_framework .page_big_title_box .page_big_subtitle{ | + | <div class="index_block"> |
− | font-size: 40px; | + | <img style="width: 100%" src="https://static.igem.org/mediawiki/2019/6/63/T--SMMU-China--index_bg_2.jpg" alt="index_bg_2"> |
− | color: #3B3B3B;
| + | </div> |
− | line-height: 60px;
| + | |
− | }
| + | |
| | | |
− | .big_framework .medium_framework {
| + | <div class="index_block"> |
− | margin: auto; | + | <img style="width: 100%" src="https://static.igem.org/mediawiki/2019/b/bf/T--SMMU-China--index_bg_3.jpg" alt="index_bg_3"> |
− | max-width: 1200px;
| + | </div> |
− | padding: 20px 0px;
| + | |
− | width: 90%; | + | |
− | text-align: center;
| + | |
− | }
| + | |
| | | |
− | .big_framework .medium_framework p{ | + | <div class="index_block"> |
− | font-size: 17px!important;
| + | <img style="width: 100%" src="https://static.igem.org/mediawiki/2019/6/61/T--SMMU-China--index_bg_4.jpg" alt="index_bg_4"> |
− | line-height: 30px;
| + | </div> |
− | }
| + | |
| | | |
− | .home_banner{
| + | <div class="index_block"> |
− | background-image: url(https://static.igem.org/mediawiki/2019/7/70/T--SMMU-China--index_bg_1.jpg);
| + | <img style="width: 100%" src="https://static.igem.org/mediawiki/2019/f/fe/T--SMMU-China--index_bg_5.jpg" alt="index_bg_5"> |
− | background-repeat:no-repeat;
| + | </div> |
− | background-size: 100% auto;
| + | |
− | background-position: top;
| + | |
− | background-attachment: fixed;
| + | |
− | height: 790px;
| + | |
− | }
| + | |
| | | |
− | .home_banner_title{
| + | <div class="index_block"> |
− | padding: 100px 0vh 0vh 0vh;
| + | <img style="width: 100%" src="https://static.igem.org/mediawiki/2019/f/f1/T--SMMU-China--index_bg_6.jpg" alt="index_bg_6"> |
− | text-align: center;
| + | </div> |
− | line-height: 400px;
| + | |
− | font-size: 250px;
| + | |
− | color: #FFF;
| + | |
− | font-weight: 700;
| + | |
− | text-shadow:5px 2px 6px #000;
| + | |
− | }
| + | |
| | | |
− | .home_banner_subtitle{
| + | </div> |
− | text-align: center; | + | |
− | line-height: 50px;
| + | |
− | font-size: 30px;
| + | |
− | color: #FFF;
| + | |
− | font-weight: 500;
| + | |
− | text-shadow:5px 2px 6px #000;
| + | |
− | }
| + | |
| | | |
− | @media only screen and (max-width:1600px) {
| + | <div class="footer"> |
− | .home_banner{
| + | <div class="footer_left"> |
− | height: 675px;
| + | <div class="footer_title">Contact Us</div> |
− | }
| + | <div class="footer_text"> |
− | }
| + | E-Mail: igem-smmu@smmu.edu.cn<br> |
| + | Phone: +86 021-81870925 |
| + | </div> |
| + | </div> |
| + | <div class="footer_right"> |
| + | <div class="footer_title"></div> |
| + | <div class="footer_text"> |
| + | © 2019. SMMU. All rights reserved. |
| + | </div> |
| + | </div> |
| + | </div> |
| | | |
− | @media only screen and (max-width:1400px) {
| + | <script src="https://2019.igem.org/Template:SMMU-China/JS_typelighter?action=raw&ctype=text/javascript"></script> |
− | .home_banner{
| + | |
− | height: 593px;
| + | |
− | }
| + | |
| | | |
− | .home_banner_title{
| + | </html> |
− | padding: 100px 0vh 0vh 0vh;
| + | |
− | text-align: center;
| + | |
− | line-height: 300px;
| + | |
− | font-size: 200px;
| + | |
− | color: #FFF;
| + | |
− | font-weight: 700;
| + | |
− | text-shadow:5px 2px 6px #000;
| + | |
− | }
| + | |
− | | + | |
− | .home_banner_subtitle{
| + | |
− | text-align: center;
| + | |
− | line-height: 40px;
| + | |
− | font-size: 25px;
| + | |
− | color: #FFF;
| + | |
− | font-weight: 500;
| + | |
− | text-shadow:5px 2px 6px #000;
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | @media only screen and (max-width:1200px) {
| + | |
− | .home_banner{
| + | |
− | height: 480px;
| + | |
− | }
| + | |
− | | + | |
− | .home_banner_title{
| + | |
− | padding: 50px 0vh 0vh 0vh;
| + | |
− | text-align: center;
| + | |
− | line-height: 260px;
| + | |
− | font-size: 180px;
| + | |
− | color: #FFF;
| + | |
− | font-weight: 700;
| + | |
− | text-shadow:5px 2px 6px #000;
| + | |
− | }
| + | |
− | | + | |
− | .home_banner_subtitle{
| + | |
− | text-align: center;
| + | |
− | line-height: 30px;
| + | |
− | font-size: 20px;
| + | |
− | color: #FFF;
| + | |
− | font-weight: 500;
| + | |
− | text-shadow:5px 2px 6px #000;
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | @media only screen and (max-width:1000px) {
| + | |
− | .home_banner{
| + | |
− | background-attachment: unset;
| + | |
− | height: auto;
| + | |
− | background-position: center;
| + | |
− | }
| + | |
− | | + | |
− | .home_banner_title{
| + | |
− | padding: 30px 0vh 0vh 0vh;
| + | |
− | text-align: center;
| + | |
− | line-height: 100px;
| + | |
− | font-size: 80px;
| + | |
− | color: #FFF;
| + | |
− | font-weight: 700;
| + | |
− | text-shadow:5px 2px 6px #000;
| + | |
− | }
| + | |
− | | + | |
− | .home_banner_subtitle{
| + | |
− | padding: 0vh 0vh 30px 0vh;
| + | |
− | text-align: center;
| + | |
− | line-height: 25px;
| + | |
− | font-size: 18px;
| + | |
− | color: #FFF;
| + | |
− | font-weight: 500;
| + | |
− | text-shadow:5px 2px 6px #000;
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .column50{
| + | |
− | display: inline-block;
| + | |
− | width: 45%;
| + | |
− | padding: 0px 2%;
| + | |
− | margin-bottom: 0px;
| + | |
− | }
| + | |
− | | + | |
− | .blank_framework{
| + | |
− | height: 90px;
| + | |
− | }
| + | |
− | | + | |
− | .footer{
| + | |
− | margin-top: 50px;
| + | |
− | height: 300px;
| + | |
− | background-color: #282828;
| + | |
− | margin-bottom: -10px;
| + | |
− | }
| + | |
− | | + | |
− | .footer_left{
| + | |
− | width: 50%;
| + | |
− | display: inline-block;
| + | |
− | }
| + | |
− | | + | |
− | .footer_right{
| + | |
− | width: 50%;
| + | |
− | display: inline-block;
| + | |
− | float: right;
| + | |
− | }
| + | |
− | | + | |
− | .footer_title{
| + | |
− | margin: auto;
| + | |
− | padding-top: 30px;
| + | |
− | height: 120px;
| + | |
− | line-height: 120px;
| + | |
− | font-size: 40px;
| + | |
− | color: #FFF;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | .footer_text{
| + | |
− | display: inline-block;
| + | |
− | height: 150px;
| + | |
− | width: 100%;
| + | |
− | line-height: 40px;
| + | |
− | font-size: 20px!important;
| + | |
− | color: #FFF;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | /*header*/ | + | |
− | .index-nav{
| + | |
− | width: 100%;
| + | |
− | border-bottom: 3px solid #eeeeee;
| + | |
− | height: 83px;
| + | |
− | box-sizing: border-box;
| + | |
− | background:white;
| + | |
− | position: fixed;
| + | |
− | margin-top: 7px;
| + | |
− | z-index: 999;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav a{
| + | |
− | color: #333;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame{
| + | |
− | margin: 0px 50px;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line{
| + | |
− | color: #333333;
| + | |
− | background: #ffffff00;
| + | |
− | float: left;
| + | |
− | position: relative;
| + | |
− | display: block;
| + | |
− | outline: none;
| + | |
− | cursor: pointer;
| + | |
− | width: 135px;
| + | |
− | line-height: 80px;
| + | |
− | text-align: center;
| + | |
− | font-weight: 700;
| + | |
− | font-size: 16px;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line.HP-button{
| + | |
− | width: 210px;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-logo{
| + | |
− | background: #ffffff00;
| + | |
− | float: left;
| + | |
− | position: relative;
| + | |
− | display: block;
| + | |
− | outline: none;
| + | |
− | width: 400px;
| + | |
− | height: 80px;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-logo-mobile{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-logo img{
| + | |
− | width: 400px;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line.active{
| + | |
− | color:#b63b4d;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line.first-one{
| + | |
− | margin-left: 3%;
| + | |
− | width: 96px;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line.active > a{
| + | |
− | color:#b63b4d;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-center{
| + | |
− | opacity: 0;
| + | |
− | height: 0;
| + | |
− | position: absolute;
| + | |
− | overflow: hidden;
| + | |
− | width: 100%;
| + | |
− | transition: all 0.5s;
| + | |
− | -webkit-transition: all 0.5s;
| + | |
− | -moz-transition: all 0.5s;
| + | |
− | /* Firefox 4 */
| + | |
− | -o-transition: all 0.5s;
| + | |
− | /* Opera */
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-center.need-to-be-hidden{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-li{
| + | |
− | width: 100%;
| + | |
− | font-weight: 500;
| + | |
− | text-align: center;
| + | |
− | background: white;
| + | |
− | color: #666666;
| + | |
− | line-height: 50px;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-li:hover{
| + | |
− | background: #444359;
| + | |
− | color: white;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-li:hover a{
| + | |
− | background: #444359;
| + | |
− | color: white;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-focus:focus{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line:hover .index-nav-frame-line-center{
| + | |
− | height:auto;
| + | |
− | opacity: 1;
| + | |
− | }
| + | |
− | | + | |
− | .nav-line{
| + | |
− | height: 50px;
| + | |
− | width: 100%;
| + | |
− | position: relative;
| + | |
− | display: none;
| + | |
− | outline: none;
| + | |
− | }
| + | |
− | | + | |
− | .nav-small{
| + | |
− | width: 30px;
| + | |
− | height: 30px;
| + | |
− | position: absolute;
| + | |
− | right: 10px;
| + | |
− | top:10px;
| + | |
− | cursor: pointer;
| + | |
− | display: none;
| + | |
− | outline: none;
| + | |
− | }
| + | |
− | | + | |
− | .nav-small img{
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | object-fit: cover;
| + | |
− | }
| + | |
− | | + | |
− | .nav-small-focus{
| + | |
− | position: absolute;
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | .nav-small-focus:focus{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /* Timeline */
| + | |
− | | + | |
− | .timeline-container *, .timeline-container *:after, .timeline-container *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
| + | |
− | | + | |
− | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
| + | |
− | .clearfix:before, .clearfix:after { content: " "; display: table; }
| + | |
− | .clearfix:after { clear: both; }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | .timeline-main,
| + | |
− | .timeline-container > header {
| + | |
− | width: 95%;
| + | |
− | max-width: 1100px;
| + | |
− | margin: 0 auto;
| + | |
− | padding: 0 1.875em 3.125em;
| + | |
− | }
| + | |
− | | + | |
− | .timeline-container > header {
| + | |
− | padding: 2.875em 1.875em 1.875em;
| + | |
− | }
| + | |
− | | + | |
− | .timeline-container > header h1 {
| + | |
− | font-size: 2.125em;
| + | |
− | line-height: 1.3;
| + | |
− | margin: 0;
| + | |
− | float: left;
| + | |
− | font-weight: 400;
| + | |
− | }
| + | |
− | | + | |
− | .timeline-container > header span {
| + | |
− | display: block;
| + | |
− | font-weight: 700;
| + | |
− | text-transform: uppercase;
| + | |
− | letter-spacing: 0.5em;
| + | |
− | padding: 0 0 0.6em 0.1em;
| + | |
− | }
| + | |
− | | + | |
− | .timeline-container > header nav {
| + | |
− | float: right;
| + | |
− | }
| + | |
− | | + | |
− | .timeline-container > header nav a {
| + | |
− | display: block;
| + | |
− | float: left;
| + | |
− | position: relative;
| + | |
− | width: 2.5em;
| + | |
− | height: 2.5em;
| + | |
− | background: #fff;
| + | |
− | border-radius: 50%;
| + | |
− | color: transparent;
| + | |
− | margin: 0 0.1em;
| + | |
− | border: 4px solid #47a3da;
| + | |
− | text-indent: -8000px;
| + | |
− | }
| + | |
− | | + | |
− | .timeline-container > header nav a:after {
| + | |
− | content: attr(data-info);
| + | |
− | color: #47a3da;
| + | |
− | position: absolute;
| + | |
− | width: 600%;
| + | |
− | top: 120%;
| + | |
− | text-align: right;
| + | |
− | right: 0;
| + | |
− | opacity: 0;
| + | |
− | pointer-events: none;
| + | |
− | }
| + | |
− | | + | |
− | .timeline-container > header nav a:hover:after {
| + | |
− | opacity: 1;
| + | |
− | }
| + | |
− | | + | |
− | .timeline-container > header nav a:hover {
| + | |
− | background: #47a3da;
| + | |
− | }
| + | |
− | | + | |
− | .icon-drop:before,
| + | |
− | .icon-arrow-left:before {
| + | |
− | font-family: 'fontawesome';
| + | |
− | position: absolute;
| + | |
− | top: 0;
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | speak: none;
| + | |
− | font-style: normal;
| + | |
− | font-weight: normal;
| + | |
− | line-height: 2;
| + | |
− | text-align: center;
| + | |
− | color: #47a3da;
| + | |
− | -webkit-font-smoothing: antialiased;
| + | |
− | text-indent: 8000px;
| + | |
− | padding-left: 8px;
| + | |
− | }
| + | |
− | | + | |
− | .timeline-container > header nav a:hover:before {
| + | |
− | color: #fff;
| + | |
− | }
| + | |
− | | + | |
− | .icon-drop:before {
| + | |
− | content: "\e000";
| + | |
− | }
| + | |
− | | + | |
− | .icon-arrow-left:before {
| + | |
− | content: "\f060";
| + | |
− | }
| + | |
− | | + | |
− | @font-face {
| + | |
− | font-family: 'ecoico';
| + | |
− | src:url('https://static.igem.org/mediawiki/2019/3/36/T--SMMU-China--timelineicons_ecoico.eot');
| + | |
− | src:url('https://static.igem.org/mediawiki/2019/3/36/T--SMMU-China--timelineicons_ecoico.eot?#iefix') format('embedded-opentype'),
| + | |
− | url('https://static.igem.org/mediawiki/2019/8/80/T--SMMU-China--timelineicons_ecoico.woff') format('woff'),
| + | |
− | url('https://static.igem.org/mediawiki/2019/f/f9/T--SMMU-China--timelineicons_ecoico.ttf') format('truetype'),
| + | |
− | url('https://static.igem.org/mediawiki/2019/a/a7/T--SMMU-China--timelineicons_ecoico.svg#ecoico') format('svg');
| + | |
− | font-weight: normal;
| + | |
− | font-style: normal;
| + | |
− | } /* Made with http://icomoon.io/ */
| + | |
− | | + | |
− | .cbp_tmtimeline {
| + | |
− | margin: 30px 0 0 0;
| + | |
− | padding: 0;
| + | |
− | list-style: none;
| + | |
− | position: relative;
| + | |
− | }
| + | |
− | | + | |
− | /* The line */
| + | |
− | .cbp_tmtimeline:before {
| + | |
− | content: '';
| + | |
− | position: absolute;
| + | |
− | top: 0;
| + | |
− | bottom: 0;
| + | |
− | width: 10px;
| + | |
− | background: #afdcf8;
| + | |
− | left: 20%;
| + | |
− | margin-left: -10px;
| + | |
− | }
| + | |
− | | + | |
− | /* The date/time */
| + | |
− | .cbp_tmtimeline > li .cbp_tmtime {
| + | |
− | display: block;
| + | |
− | width: 25%;
| + | |
− | padding-right: 100px;
| + | |
− | position: absolute;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li .cbp_tmtime span {
| + | |
− | display: block;
| + | |
− | text-align: right;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li .cbp_tmtime span:first-child {
| + | |
− | font-size: 0.9em;
| + | |
− | color: #bdd0db;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li .cbp_tmtime span:last-child {
| + | |
− | font-size: 2.9em;
| + | |
− | color: #3594cb;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
| + | |
− | color: #6cbfee;
| + | |
− | }
| + | |
− | | + | |
− | /* Right content */
| + | |
− | .cbp_tmtimeline > li .cbp_tmlabel {
| + | |
− | margin: 0 0 15px 25%;
| + | |
− | background: #3594cb;
| + | |
− | color: #fff;
| + | |
− | padding: 2em;
| + | |
− | font-size: 1.2em;
| + | |
− | font-weight: 300;
| + | |
− | line-height: 1.4;
| + | |
− | position: relative;
| + | |
− | border-radius: 5px;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
| + | |
− | background: #6cbfee;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li .cbp_tmlabel h2 {
| + | |
− | margin-top: 0px;
| + | |
− | padding: 0 0 10px 0;
| + | |
− | border-bottom: 1px solid rgba(255,255,255,0.4);
| + | |
− | color: #FFF;
| + | |
− | font-weight:700;
| + | |
− | }
| + | |
− | | + | |
− | /* The triangle */
| + | |
− | .cbp_tmtimeline > li .cbp_tmlabel:after {
| + | |
− | right: 100%;
| + | |
− | border: solid transparent;
| + | |
− | content: " ";
| + | |
− | height: 0;
| + | |
− | width: 0;
| + | |
− | position: absolute;
| + | |
− | pointer-events: none;
| + | |
− | border-right-color: #3594cb;
| + | |
− | border-width: 10px;
| + | |
− | top: 10px;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
| + | |
− | border-right-color: #6cbfee;
| + | |
− | }
| + | |
− | | + | |
− | /* The icons */
| + | |
− | .cbp_tmtimeline > li .cbp_tmicon {
| + | |
− | width: 40px;
| + | |
− | height: 40px;
| + | |
− | font-family: 'ecoico';
| + | |
− | speak: none;
| + | |
− | font-style: normal;
| + | |
− | font-weight: normal;
| + | |
− | font-variant: normal;
| + | |
− | text-transform: none;
| + | |
− | font-size: 1.4em;
| + | |
− | line-height: 40px;
| + | |
− | -webkit-font-smoothing: antialiased;
| + | |
− | position: absolute;
| + | |
− | color: #fff;
| + | |
− | background: #46a4da;
| + | |
− | border-radius: 50%;
| + | |
− | box-shadow: 0 0 0 8px #afdcf8;
| + | |
− | text-align: center;
| + | |
− | left: 20%;
| + | |
− | top: 0;
| + | |
− | margin: 0 0 0 -25px;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmicon-phone:before {
| + | |
− | content: "\e000";
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmicon-screen:before {
| + | |
− | content: "\e001";
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmicon-mail:before {
| + | |
− | content: "\e002";
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmicon-earth:before {
| + | |
− | content: "\e003";
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | @media only screen and (max-width:1400px) {
| + | |
− | .blank_framework{
| + | |
− | height: 61px;
| + | |
− | }
| + | |
− | | + | |
− | .big_framework .page_big_title_box{
| + | |
− | height: 120px;
| + | |
− | width: 90%;
| + | |
− | margin: 20px auto;
| + | |
− | text-align: left;
| + | |
− | border-left: 10px solid #3B3B3B;
| + | |
− | border-right: none;
| + | |
− | padding-left: 30px;
| + | |
− | padding-right: 0px;
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | .big_framework .page_big_title_box .page_big_title{
| + | |
− | font-size: 50px;
| + | |
− | color: #EE2C2C;
| + | |
− | line-height: 80px;
| + | |
− | font-weight: 1000;
| + | |
− | }
| + | |
− | | + | |
− | .big_framework .page_big_title_box .page_big_subtitle{
| + | |
− | font-size: 20px;
| + | |
− | color: #3B3B3B;
| + | |
− | line-height: 40px;
| + | |
− | }
| + | |
− | | + | |
− | .column50{
| + | |
− | display: inline-block;
| + | |
− | width: 100%;
| + | |
− | padding: 0px;
| + | |
− | margin-bottom: 20px;
| + | |
− | }
| + | |
− | | + | |
− | .footer{
| + | |
− | height: 600px;
| + | |
− | }
| + | |
− | | + | |
− | .footer_left{
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .footer_right{
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .index-nav{
| + | |
− | height: inherit;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-li a{
| + | |
− | display: block;
| + | |
− | color: white;
| + | |
− | }
| + | |
− | | + | |
− | .nav-line{
| + | |
− | display: block;
| + | |
− | border-bottom: 1px solid #eeeeee;
| + | |
− | }
| + | |
− | | + | |
− | .nav-small{
| + | |
− | display: block;
| + | |
− | }
| + | |
− | | + | |
− | .nav-small:focus~.index-nav-frame-line{
| + | |
− | height: auto;
| + | |
− | border-bottom: 1px solid #ccc;
| + | |
− | }
| + | |
− | | + | |
− | .nav-small:focus .nav-small-focus{
| + | |
− | display: block;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame{
| + | |
− | width: 100%;
| + | |
− | margin: 0px;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-logo{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-logo-mobile{
| + | |
− | background: #ffffff00;
| + | |
− | position: relative;
| + | |
− | display: block;
| + | |
− | outline: none;
| + | |
− | width: inherit;
| + | |
− | height: inherit;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-logo-mobile img{
| + | |
− | height: inherit;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line{
| + | |
− | width: 100%;
| + | |
− | height: 0;
| + | |
− | overflow: hidden;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line.first-one{
| + | |
− | margin-left: 0px;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line.HP-button{
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-center{
| + | |
− | position: relative;
| + | |
− | background: #444359;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-center.need-to-be-hidden{
| + | |
− | display: block;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line:hover .index-nav-frame-line-center{
| + | |
− | height:0;
| + | |
− | opacity: 0;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-li{
| + | |
− | border-bottom: 1px solid #4b4a5e;
| + | |
− | color: #d9d9d9;
| + | |
− | background: #444359;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-li:hover{
| + | |
− | background: #b63b4d;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line:focus{
| + | |
− | height: auto;
| + | |
− | border-bottom: 1px solid #ccc;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line:focus>.index-nav-frame-line-center{
| + | |
− | height:auto;
| + | |
− | opacity: 1;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line:focus .index-nav-frame-line-header{
| + | |
− | color: #B63B4D;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line-focus{
| + | |
− | display: none;
| + | |
− | width: 100%;
| + | |
− | height: 50px;
| + | |
− | position: absolute;
| + | |
− | left: 0;
| + | |
− | top: 0;
| + | |
− | }
| + | |
− | | + | |
− | .index-nav-frame-line:focus .index-nav-frame-line-focus{
| + | |
− | display: block;
| + | |
− | }
| + | |
− | | + | |
− | /*Timeline*/
| + | |
− | .cbp_tmtimeline:before {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li .cbp_tmtime {
| + | |
− | width: 100%;
| + | |
− | position: relative;
| + | |
− | padding: 0 0 20px 0;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li .cbp_tmtime span {
| + | |
− | text-align: left;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li .cbp_tmlabel {
| + | |
− | margin: 0 0 30px 0;
| + | |
− | padding: 1em;
| + | |
− | font-weight: 400;
| + | |
− | font-size: 95%;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li .cbp_tmlabel:after {
| + | |
− | right: auto;
| + | |
− | left: 20px;
| + | |
− | border-right-color: transparent;
| + | |
− | border-bottom-color: #3594cb;
| + | |
− | top: -20px;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
| + | |
− | border-right-color: transparent;
| + | |
− | border-bottom-color: #6cbfee;
| + | |
− | }
| + | |
− | | + | |
− | .cbp_tmtimeline > li .cbp_tmicon {
| + | |
− | position: relative;
| + | |
− | float: right;
| + | |
− | left: auto;
| + | |
− | margin: -55px 5px 0 0px;
| + | |
− | }
| + | |
− | }
| + | |