Difference between revisions of "Team:Hong Kong HKUST/Danson"

Line 1: Line 1:
−
{{Hong_Kong_HKUST}}
 
−
<html>
 
−
<head>
 
−
<link rel="stylesheet" type="text/css"  href="https://2016.igem.org/Template:Hong_Kong_HKUST/coverpageStyles?action=raw&ctype=text/css" />
 
−
<link rel="shortcut icon" href="/wiki/images/d/d6/T--Hong_Kong_HKUST--HKUST_iGEM_logo_copy.png">
 
−
</head>
 
−
<style>
 
  
−
</style>
+
#sideMenu, #top_title {display:none;}
−
<body>
+
#globalWrapper, #content {
−
         <body>
+
  width: 100%;
−
         <div id="circleContainer">
+
  height: 100%;
−
            <div id="tramWrapper">
+
  border: 0px;
−
                <img src="https://static.igem.org/mediawiki/2016/4/44/T--Hong_Kong_HKUST--rail.png" id="rail">
+
  margin: 0px;
−
                <a href="/Team:Hong_Kong_HKUST/tourDebug"><img src="https://static.igem.org/mediawiki/2016/7/74/T--Hong_Kong_HKUST--tram.png" id="tram"></a>
+
  padding: 0px;
−
            </div>
+
  font-size: 100%;
−
            <div id="cvHome">
+
}
−
                <div id="cvHomeTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Danson';"></div>
+
         #globalWrapper{border:1px soli orange;}
−
            </div>
+
#content { padding:0px; width:100%; height:100%; margin-top:-7px; margin-left:0px; border: 1px dotte blue; background: transparent;}
−
            <div id="coverAbout">
+
body {background-color:white;}
−
                <div id="coverAboutTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/The_Team';"></div>
+
         #HQ_page {height:100%;}
−
                <div id="coverAboutTeam" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/The_Team';">The Team</div>
+
        #bodyContent {border: 1px soli red; height:100%;}
−
                <div id="coverAboutAttribution" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Attribution';">Attribution</div>
+
        #mw-content-text {height:100%;}
−
                <div id="svgAboutWrapper">
+
        #content_wrapper {width:100%;}
−
                    <svg width="507" height="222" viewBox="0 0 507 222" id="svgAbout" version="1.1">
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
                    <g>
+
div#circleContainer {
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1" d="m 6.5419355,80.530645 374.5258045,0 66.2371,-67.054839"/>
+
    border: 1px soli black;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 107.12419,209.73387 382.70323,0"/>
+
    border-radius: 50%;
−
                    </g>
+
    width: 450px;
−
                    </svg>
+
    height: 450px;
−
                </div>
+
    position: absolute;
−
            </div>
+
    top: 50%;
−
            <div id="coverProject">
+
    left: 50%;
−
                <div id="coverProjectTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Project_Overview';"></div>
+
    transform: translate(-50%, -50%);
−
                <div id="coverProjectOverview" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Project_Overview';">Project Overview</div>
+
    opacity: 0;
−
                <div id="coverProjectIdea" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Ideas_and_Mechanism';">>Idea development and Parts</div>
+
}
−
                <div id="coverProjectResults" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Results';">Results</div>
+
div#coverHomeTab {
−
                <div id="svgProjectWrapper">
+
    border: 1px soli black;
−
                    <svg width="463" height="333" viewBox="0 0 463 333" id="svgProject" version="1.1">
+
    position: absolute;
−
                    <g>
+
    width: 695px;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 3.733871,79.096774 377.120969,0 64.96935,-64.969355"/>
+
    height: 360px;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 59.741936,204.55484 382.348384,0"/>
+
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 0;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 46.3,320.30484 385.33548,0"/>
+
    left: -124px;
−
                    </g>
+
    top: -171px;
−
                    </svg>
+
    transform: scale(0.20);
−
                </div>
+
    cursor: pointer;
−
            </div>
+
}
−
            <div id="coverModeling">
+
div#coverAbout{
−
                <div id="coverModelingTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Modelling';"></div>
+
    border: 1px soli black;
−
                <div id="coverModelingModel" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Modelling_Prediction_Model';">Prediction Model</div>
+
    position: absolute;
−
                <div id="coverModelingStability" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Modelling_Stability_Analysis';">Stability Analysis</div>
+
    left: 272px;
−
                <div id="svgModelingWrapper">
+
    top:-2px;
−
                    <svg width="513" height="230" viewBox="0 0 513 230" id="svgModeling" version="1.1">
+
}
−
                    <g>
+
div#coverAboutTab {
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+
border: 1px soli black;
−
                            d="m 55.437097,6.596774 380.199193,0 63.71129,65.779839"/>
+
    position: absolute;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 5.7919355,150.56774 296.2161245,0 63.7113,66.19355"/>
+
    width: 695px;
−
                    </g> 
+
    height: 359px;
−
                    </svg>
+
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 -365px;
−
                </div>
+
    left: -272px;
−
            </div>
+
    top: -129px;
−
            <div id="coverHP">
+
    transform: scale(0.20) rotate(36deg);
−
                <div id="coverHPTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/HP_Intro';"></div>
+
    transition: background 0.5s;
−
                <div id="coverHPIntroduction" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/HP_Intro';">Introduction</div>
+
    cursor: pointer;
−
                <div id="coverHPProduct" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/HP_Product_Design';">Product Design</div>
+
}
−
                <div id="coverHPInfo" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/HP_Education';">Education</div>
+
div#coverAboutTeam {
−
                <div id="coverHPLearning" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/HP_Intellectual_Property_Rights_Learning';">Intellectual Property Rights</div>
+
    border: 1px soli black;
−
                <div id="svgHPWrapper">
+
    position: absolute;
−
                    <svg width="581" height="348" viewBox="0 0 581 348" id="svgHP" version="1.1">
+
    left: 197px;
−
                        <g>
+
    top: 4px;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+
    width: 150px;
−
                        d="m 260.4126,80.298496 241.85903,0 60.2991,-62.286983"/>
+
}
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+
div#coverAboutAttribution {
−
                        d="m 187.8879,145.5871 157.90081,0"/>
+
    border: 1px soli black;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+
    position: absolute;
−
                        d="m 62.316936,211.18387 245.050804,0"/>
+
    left: 207px;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+
    top: 45px;
−
                        d="m 4.2169355,268.34677 243.1766145,0 60.44274,61.84839"/>
+
}
−
                        </g>
+
div#svgAboutWrapper {
−
                    </svg>
+
    position: absolute;
−
                </div>
+
    border: px solid black;
−
            </div>
+
    top: 0px;
−
            <div id="coverFuture">
+
    left: -98px;
−
                <div id="coverFutureTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Future_Plan';"></div>
+
    height: 30px;
−
            </div>
+
    transform: scale(0.2);
−
            <div id="coverAchievements">
+
}
−
                <div id="coverAchievementsTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Parts_Submitted';"></div>
+
div#coverProjectTab {
−
                <div id="coverAchievementsParts" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Parts_Submitted';">Parts Submitted</div>
+
    border: 1px soli black;
−
                <div id="coverAchievementsMedal" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Medal_Requirements';">Medal Requirements</div>
+
    position: absolute;
−
                <div id="svgAchievementsWrapper">
+
    width: 697px;
−
                    <svg width="396" height="214" viewBox="0 0 396 214" id="svgAchievements" version="1.1">
+
    height: 360px;
−
                    <g>
+
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 -729px;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 229.29677,13.445161 -213.329028,0"/>
+
    left: 78px;
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 387.69677,134.16129 -239.51612,0 -64.509682,67.06452"/>
+
    top: -25px;
−
                    </g>
+
    transform: scale(0.20) rotate(72deg);
−
                    </svg>
+
    cursor: pointer;
−
                </div>
+
}
−
            </div>
+
div#svgProjectWrapper {
−
            <div id="coverLab">
+
    position: absolute;
−
                <div id="coverLabTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Protocols_Logbook';"></div>
+
    border: 1x solid black;
−
                <div id="coverLabProtocol" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Protocols_Logbook';">Protocols and Logbook</div>
+
    top:113px;
−
                <div id="coverLabSafety" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Safety';">Safety</div>
+
    left: 271px;
−
                <div id="svgLabWrapper">
+
    height: 30px;
−
                    <svg width="523" height="202" viewBox="0 0 523 202" id="svgLab" version="1.1">
+
    transform: scale(0.2);
−
                    <g>
+
}
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 459.88514,6.9514372 -381.14994,0 -62.630273,64.4197088"/>
+
div#coverProjectOverview {
−
                        <path style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 518.93654,122.07184 -298.23939,0 -63.82323,65.61267">
+
    border: 1px soli black;
−
                    </g>
+
    position: absolute;
−
                    </svg>
+
    left: 552px;
−
                </div>
+
    top: 115px;
−
            </div>
+
    width: 150px;
−
            <div id="coverColla">
+
}
−
                <div id="coverCollaTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Collab';"></div>
+
div#coverProjectIdea {
−
            </div>
+
    border: 1px soli black;
−
            <div id="coverInterlab">
+
    position: absolute;
−
                <div id="coverInterLabTab" onclick="window.location='https://2016.igem.org/Team:Hong_Kong_HKUST/Interlab';"></div>
+
    left: 552px;
−
            </div>
+
    top: 155px;
−
        </div>
+
    width: 200px;
−
<script type="text/javascript" src="https://2016.igem.org/Template:Hong_Kong_HKUST/jQuery_lettering?action=raw&ctype=text/javascript"></script>
+
}
−
<script type="text/javascript" src="https://2016.igem.org/Template:Hong_Kong_HKUST/jQuery_drawsvg?action=raw&ctype=text/javascript"></script>
+
div#coverProjectResults {
−
<script type="text/javascript" src="https://2016.igem.org/Template:Hong_Kong_HKUST/TweenMax?action=raw&ctype=text/javascript"></script>
+
    border: 1px soli black;
−
<script type="text/javascript" src="https://2016.igem.org/Template:Hong_Kong_HKUST/coverpageJS?action=raw&ctype=text/javascript"></script>
+
    position: absolute;
 +
    left: 548px;
 +
    top: 180px;
 +
    width: 200px;
 +
}
 +
div#coverModelingTab {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    width: 697px;
 +
    height: 361px;
 +
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 -1093px;
 +
    left: 80px;
 +
    top: 108px;
 +
    transform: scale(0.20) rotate(-72deg);
 +
    cursor: pointer;
 +
}
 +
div#svgModelingWrapper {
 +
    position: absolute;
 +
    border: 1p solid black;
 +
    top: 275px;
 +
    left: 250px;
 +
    height: 30px;
 +
    transform: scale(0.2);
 +
}
 +
div#coverModelingModel {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: 559px;
 +
    top: 294px;
 +
    width: 200px;
 +
}
 +
div#coverModelingStability {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: 533px;
 +
    top: 323px;
 +
    width: 200px;
 +
}
 +
div#coverHPTab {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    width: 695px;
 +
    height: 337px;
 +
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 -1457px;
 +
    left: 4px;
 +
    top: 228px;
 +
    transform: scale(0.20) rotate(-36deg);
 +
    cursor: pointer;
 +
}
 +
div#svgHPWrapper {
 +
    position: absolute;
 +
    border: 1p solid black;
 +
    top: 375px;
 +
    left: 112px;
 +
    height: 30px;
 +
    transform: scale(0.2);
 +
}
 +
div#coverHPIntroduction {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: 462px;
 +
    top: 377px;
 +
    width: 200px;
 +
}
 +
div#coverHPProduct {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: 417px;
 +
    top: 404px;
 +
    width: 200px;
 +
}
 +
div#coverHPInfo {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: 410px;
 +
    top: 420px;
 +
    width: 200px;
 +
}
 +
div#coverHPLearning {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: 410px;
 +
    top: 449px;
 +
    width: 200px;
 +
}
 +
div#coverFutureTab {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    width: 696px;
 +
    height: 363px;
 +
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) -695px 0;
 +
    left: -124px;
 +
    top: 257px;
 +
    transform: scale(0.20);
 +
    cursor: pointer;
 +
}
 +
div#coverAchievementsTab {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    width: 695px;
 +
    height: 361px;
 +
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) -700px -366px;
 +
    left: -251px;
 +
    top: 217px;
 +
    transform: scale(0.20) rotate(36deg);
 +
    cursor: pointer;
 +
}
 +
div#svgAchievementsWrapper {
 +
    position: absolute;
 +
    border: 1p solid black;
 +
    top: 400px;
 +
    left: -143px;
 +
    height: 30px;
 +
    transform: scale(0.2);
 +
}
 +
div#coverAchievementsParts {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: -87px;
 +
    top: 405px;
 +
    width: 200px;
 +
}
 +
div#coverAchievementsMedal {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: -104px;
 +
    top: 446px;
 +
    width: 200px;
 +
}
 +
div#coverLabTab {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    width: 698px;
 +
    height: 362px;
 +
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) -697px -729px;
 +
    left: -329px;
 +
    top: 108px;
 +
    transform: scale(0.20) rotate(72deg);
 +
    cursor: pointer;
 +
}
 +
div#svgLabWrapper {
 +
    position: absolute;
 +
    border: 1p solid black;
 +
    top: 276px;
 +
    left: -318px;
 +
    height: 30px;
 +
    transform: scale(0.2);
 +
}
 +
div#coverLabProtocol {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: -254px;
 +
    top: 299px;
 +
    width: 200px;
 +
}
 +
div#coverLabSafety {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    left: -121px;
 +
    top: 318px;
 +
    width: 200px;
 +
}
 +
div#coverCollaTab {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    width: 695px;
 +
    height: 360px;
 +
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) -695px -1092px;
 +
    left: -327px;
 +
    top: -23px;
 +
    transform: scale(0.20) rotate(-72deg);
 +
    cursor: pointer;
 +
}
 +
div#coverInterLabTab {
 +
    border: 1px soli black;
 +
    position: absolute;
 +
    width: 695px;
 +
    height: 360px;
 +
    background: url(https://static.igem.org/mediawiki/2016/3/36/T--Hong_Kong_HKUST--DNAStrandSprite.png) -698px -1454px;
 +
    left: -249px;
 +
    top: -130px;
 +
    transform: scale(0.20) rotate(-36deg);
 +
    cursor: pointer;
 +
}
 +
div#circleContainer span{position: relative;}
 +
#tram{
 +
    transform: scale(0.33);
 +
    position: absolute;
 +
    top:-279px;
 +
    left:-280px;
 +
}
 +
#rail{
 +
    transform: scale(0.15);
 +
    position: absolute;
 +
    top: -671px;
 +
    left: -275px;
 +
}
  
−
<div id="scrollButton">
+
div{border: 0px solid black;}
−
<a href=" #scroll">
+
#scrollButton {
−
<img class="button" src="https://static.igem.org/mediawiki/2016/b/b5/T--Hong_Kong_HKUST--scroll_button.svg" style="width: 4%; height: auto; margin-top: 8%; position: absolute; z-index: 999; left:48%;">
+
display: inline;
−
</a>
+
transform: translate(50px, 0);
−
</div>
+
}
  
−
<div id="scroll" style="margin: 10%; position: absolute; margin-left: 190px; margin-top: 700px; z-index: 0;">
+
img.button {
−
<div class="content_wrapper">
+
    opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
  
−
  <h1>Abstract</h1>
+
img.button:hover {
−
  <p>The Tristable switch was derived from advanced studies of other synthetic networks like toggle switches and oscillators. We think it would be helpful to create a synthetic network which produces distinct signals under specific induction. We hope to create a biological device that could perform three discrete, but alternating, steady states driven by three different repressible promoters. The presence of a transient pulse of inducer allows effective state shifting, while preventing signal interference.
+
    opacity: 0.7;
−
During data-mining, we noticed that iGEM Team Brown University has tried to build tristable switches in 2006 and 2007 but had low outputs. Therefore, we troubleshot and investigated improvements that can be applied to their design.</p>
+
    filter: alpha(opacity=80); /* For IE8 and earlier */
−
</div>
+
}
−
</div>
+
−
 
+
−
</body>
+
−
</html>
+

Revision as of 07:48, 19 September 2016

#sideMenu, #top_title {display:none;}

  1. globalWrapper, #content {
 width: 100%;
 height: 100%;
 border: 0px;
 margin: 0px;
 padding: 0px;
 font-size: 100%;

} 

       #globalWrapper{border:1px soli orange;}

#content { padding:0px; width:100%; height:100%; margin-top:-7px; margin-left:0px; border: 1px dotte blue; background: transparent;} body {background-color:white;} 

       #HQ_page {height:100%;}
       #bodyContent {border: 1px soli red; height:100%;}
       #mw-content-text {height:100%;}
       #content_wrapper {width:100%;}

#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } div#circleContainer { 

   border: 1px soli black;
   border-radius: 50%;
   width: 450px;
   height: 450px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;

} div#coverHomeTab { 

   border: 1px soli black;
   position: absolute;
   width: 695px;
   height: 360px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 0;
   left: -124px;
   top: -171px;
   transform: scale(0.20);
   cursor: pointer;

} div#coverAbout{ 

   border: 1px soli black;
   position: absolute;
   left: 272px;
   top:-2px;

} div#coverAboutTab { border: 1px soli black; 

   position: absolute;
   width: 695px;
   height: 359px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 -365px;
   left: -272px;
   top: -129px;
   transform: scale(0.20) rotate(36deg);
   transition: background 0.5s;
   cursor: pointer;

} div#coverAboutTeam { 

   border: 1px soli black;
   position: absolute;
   left: 197px;
   top: 4px;
   width: 150px;

} div#coverAboutAttribution { 

   border: 1px soli black;
   position: absolute;
   left: 207px;
   top: 45px;

} div#svgAboutWrapper { 

   position: absolute;
   border: px solid black;
   top: 0px;
   left: -98px;
   height: 30px;
   transform: scale(0.2);

} div#coverProjectTab { 

   border: 1px soli black;
   position: absolute;
   width: 697px;
   height: 360px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 -729px;
   left: 78px;
   top: -25px;
   transform: scale(0.20) rotate(72deg);
   cursor: pointer;

} div#svgProjectWrapper { 

   position: absolute;
   border: 1x solid black;
   top:113px;
   left: 271px;
   height: 30px;
   transform: scale(0.2);

} div#coverProjectOverview { 

   border: 1px soli black;
   position: absolute;
   left: 552px;
   top: 115px;
   width: 150px;

} div#coverProjectIdea { 

   border: 1px soli black;
   position: absolute;
   left: 552px;
   top: 155px;
   width: 200px;

} div#coverProjectResults { 

   border: 1px soli black;
   position: absolute;
   left: 548px;
   top: 180px;
   width: 200px;

} div#coverModelingTab { 

   border: 1px soli black;
   position: absolute;
   width: 697px;
   height: 361px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 -1093px;
   left: 80px;
   top: 108px;
   transform: scale(0.20) rotate(-72deg);
   cursor: pointer;

} div#svgModelingWrapper { 

   position: absolute;
   border: 1p solid black;
   top: 275px;
   left: 250px;
   height: 30px;
   transform: scale(0.2);

} div#coverModelingModel { 

   border: 1px soli black;
   position: absolute;
   left: 559px;
   top: 294px;
   width: 200px;

} div#coverModelingStability { 

   border: 1px soli black;
   position: absolute;
   left: 533px;
   top: 323px;
   width: 200px;

} div#coverHPTab { 

   border: 1px soli black;
   position: absolute;
   width: 695px;
   height: 337px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) 0 -1457px;
   left: 4px;
   top: 228px;
   transform: scale(0.20) rotate(-36deg);
   cursor: pointer;

} div#svgHPWrapper { 

   position: absolute;
   border: 1p solid black;
   top: 375px;
   left: 112px;
   height: 30px;
   transform: scale(0.2);

} div#coverHPIntroduction { 

   border: 1px soli black;
   position: absolute;
   left: 462px;
   top: 377px;
   width: 200px;

} div#coverHPProduct { 

   border: 1px soli black;
   position: absolute;
   left: 417px;
   top: 404px;
   width: 200px;

} div#coverHPInfo { 

   border: 1px soli black;
   position: absolute;
   left: 410px;
   top: 420px;
   width: 200px;

} div#coverHPLearning { 

   border: 1px soli black;
   position: absolute;
   left: 410px;
   top: 449px;
   width: 200px;

} div#coverFutureTab { 

   border: 1px soli black;
   position: absolute;
   width: 696px;
   height: 363px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) -695px 0;
   left: -124px;
   top: 257px;
   transform: scale(0.20);
   cursor: pointer;

} div#coverAchievementsTab { 

   border: 1px soli black;
   position: absolute;
   width: 695px;
   height: 361px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) -700px -366px;
   left: -251px;
   top: 217px;
   transform: scale(0.20) rotate(36deg);
   cursor: pointer;

} div#svgAchievementsWrapper { 

   position: absolute;
   border: 1p solid black;
   top: 400px;
   left: -143px;
   height: 30px;
   transform: scale(0.2);

} div#coverAchievementsParts { 

   border: 1px soli black;
   position: absolute;
   left: -87px;
   top: 405px;
   width: 200px;

} div#coverAchievementsMedal { 

   border: 1px soli black;
   position: absolute;
   left: -104px;
   top: 446px;
   width: 200px;

} div#coverLabTab { 

   border: 1px soli black;
   position: absolute;
   width: 698px;
   height: 362px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) -697px -729px;
   left: -329px;
   top: 108px;
   transform: scale(0.20) rotate(72deg);
   cursor: pointer;

} div#svgLabWrapper { 

   position: absolute;
   border: 1p solid black;
   top: 276px;
   left: -318px;
   height: 30px;
   transform: scale(0.2);

} div#coverLabProtocol { 

   border: 1px soli black;
   position: absolute;
   left: -254px;
   top: 299px;
   width: 200px;

} div#coverLabSafety { 

   border: 1px soli black;
   position: absolute;
   left: -121px;
   top: 318px;
   width: 200px;

} div#coverCollaTab { 

   border: 1px soli black;
   position: absolute;
   width: 695px;
   height: 360px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) -695px -1092px;
   left: -327px;
   top: -23px;
   transform: scale(0.20) rotate(-72deg);
   cursor: pointer;

} div#coverInterLabTab { 

   border: 1px soli black;
   position: absolute;
   width: 695px;
   height: 360px;
   background: url(T--Hong_Kong_HKUST--DNAStrandSprite.png) -698px -1454px;
   left: -249px;
   top: -130px;
   transform: scale(0.20) rotate(-36deg);
   cursor: pointer;

} div#circleContainer span{position: relative;}

  1. tram{
   transform: scale(0.33);
   position: absolute;
   top:-279px;
   left:-280px;

}

  1. rail{
   transform: scale(0.15);
   position: absolute;
   top: -671px;
   left: -275px;

}

div{border: 0px solid black;}

  1. scrollButton {

display: inline; transform: translate(50px, 0); }

img.button { 

   opacity: 1.0;
   filter: alpha(opacity=100); /* For IE8 and earlier */

}

img.button:hover { 

   opacity: 0.7;
   filter: alpha(opacity=80); /* For IE8 and earlier */

}