Team:USTC Software/html5

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="author" content="Mort Yao" />
        <meta name="keywords" content="iGEM, USTC Software" />
        <meta name="description" content="2010 iGEM USTC Software wiki" />
        <meta name="robots" content="all" />
        <meta name="copyright" content="Copyright (C) 2010 Mort Yao. All rights reserved." />
        
        <link rel="copyright" href="http://creativecommons.org/licenses/by-sa/3.0/" />
        <link rel="alternate" type="application/rss+xml" title="USTC Software RSS Feed" href="#" />
        <link rel="alternate" type="application/atom+xml" title="USTC Software Atom Feed" href="#" />

        <title>USTC Software</title>
        
        
        
        <style id="main-style" type="text/css" media="screen">

        </style>

        <style id="bioMatrix-style" type="text/css" media="screen">

            #bioMatrix {
                margin: 1em auto;
                font-family: Verdana;
                width: 1280px;
                height: 800px;
                overflow: hidden;
                color: rgba(0, 255, 255, .7);
                text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
                position: fixed;
                top: 0px;
                left: 0px;
            }

            @-webkit-keyframes fade {
                0% { opacity: 1; }
                100% { opacity: 0; }
            }

            @-webkit-keyframes fall {
                from {top: -300px;}
                to {top: 600px;}
            }

            #bioMatrix div {
                position: absolute;
                top: 0;

                -webkit-transform-origin: 0%;
                -webkit-transform: rotate(90deg);

                -webkit-animation-name: fall, fade;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: normal;
                -webkit-animation-timing-function: ease-out;
            }

            #bioMatrix span {
                color: rgb(127, 255, 255);
                text-shadow: rgb(255, 255, 255) 0px 0px 5px;
            }

            .f1 {
                font-size: 1.2em;
            }

            .f2 {
                font-size: .9em;
            }

            .c1 {
                color: rgba(0, 255, 255, .5);
            }

            .d0 {
                -webkit-animation-duration: 2s;
            }

            .d1 {
                -webkit-animation-duration: 4s;
            }

            .d2 {
                -webkit-animation-duration: 6s;
            }

            .d3 {
                -webkit-animation-duration: 8s;
            }

            .d4 {
                -webkit-animation-duration: 10s;
            }

            .d5 {
                -webkit-animation-duration: 12s;
            }

            .d6 {
                -webkit-animation-duration: 14s;
            }

            .d7 {
                -webkit-animation-duration: 16s;
            }

            .d8 {
                -webkit-animation-duration: 18s;
            }

        </style>
        
        
        
        <!-- script type="text/javascript" src="./script/mootools.js"></script -->
        <script type="text/javascript" src="http://home.ustc.edu.cn/~soimort/igem_wiki/script/mootools.js"></script>
        
        <!-- script type="text/javascript" src="./script/imageMenu.js"></script -->
        <script type="text/javascript" src="http://home.ustc.edu.cn/~soimort/igem_wiki/script/imageMenu.js"></script>
        
        
        
        <!-- link rel="stylesheet" type="text/css" href="./css/main.css" media="screen" / -->
        <link rel="stylesheet" type="text/css" href="http://home.ustc.edu.cn/~soimort/igem_wiki/css/main.css" media="screen" />
        
        <!-- script type="text/javascript" src="./script/main.js"></script -->
        <script type="text/javascript" src="http://home.ustc.edu.cn/~soimort/igem_wiki/script/main.js"></script>
        
        
        
    </head>
    
    <body>
        
        <!-- BioMatrix -->
        <!-- div id="bioMatrix">
            <div class="d1 c1" style="left: 5px;">ATGGATCAATTCAGCAGCTTTTAAATA</div>
            <div class="d5 f1" style="left: 30px;">GATCAATTCAGC<span>AGC</span>TTTCTG</div>
            <div class="d7 f2 c1" style="left: 60px;">ATACGGCCAACAAAA</div>
            <div class="d4" style="left: 110px;">ATGGATCAATTCAGCAGCTTT<span>TAA</span>ATA</div>
            <div class="d3 f2 c1" style="left: 170px;">CTCCTACGAAAGGTGCACAAC</div>
            <div class="d6" style="left: 200px;">GATCAATTCAGCAGCTTT</div>
            <div class="d2" style="left: 290px;">TGACTCCTACGAAAGGTGCAC</div>
            <div class="d0 f1" style="left: 350px;">AGGTTG<span>TGA</span>ATTAATGCTCCG</div>
            <div class="d5" style="left: 410px;">ATGGATCAATTCAGCAGC</div>
            <div class="d8" style="left: 455px;">ATGGATCAATTCAGCAGCTTTTAAATA</div>
            <div class="d1 c1" style="left: 510px;">ATACGGCCAACAAAA</div>
            <div class="d4" style="left: 560px;">ATGGATCAATTCAGCAGCTTT<span>TAA</span>ATA</div>
            <div class="d3 f2 c1" style="left: 610px;">CTCCTACGAAAGGTGCACAAC</div>
            <div class="d0" style="left: 650px;">GATCAATTCAGCAGCTTT</div>
            <div class="d2" style="left: 740px;">TGACTCCTACGAAAGGTGCAC</div>
            <div class="d5 f1" style="left: 800px;">AGGTTG<span>TGA</span>ATTAATGCTCCG</div>
            <div class="d3" style="left: 830px;">TGACTCCTACGAAAGGTG<span>CAC</span>AATGCTCCG</div>
            <div class="d4" style="left: 860px;">ATGGATCAATTCAGCAGC</div>
            <div class="d8 f2" style="left: 910px;">GATCAACAATTCTTCAGCAGCTTT</div>
            <div class="d1 f1" style="left: 940px;">TGACTCCTACGAAAGGTGCAC</div>
            <div class="d2" style="left: 975px;">TGACTC<span>CTA</span>CGAAAGGTGCACAAC</div>
            <div class="d7 f2" style="left: 1020px;">ATACGGCCAACAAAA</div>
            <div class="d4" style="left: 1060px;">ATGGATCAATTCAGCAGCTTT<span>TAA</span>ATA</div>
            <div class="d6 f1" style="left: 1100px;">CTCCTACGAAAGGTGCACTGCAAC</div>
        </div -->
        
        
        
        <!-- Logo -->
        <div id="logo">
            <img src="http://home.ustc.edu.cn/~soimort/igem_wiki/images/ustc_software.logo.png" width=200 height=100 />
        </div>
        
        
        
        <!-- ImageMenu -->
        <div id="imageMenu">
        
            <ul>
                <li class="home">
                    <a href="#" onClick="showHome()">
                        Home
                    </a>
                </li>
                
                <li class="project">
                    <a href="#" onClick="showProject()">
                        Project
                    </a>
                </li>
                    
                <li class="model">
                    <a href="#" onClick="showMoDeL()">
                        MoDeL
                    </a>
                </li>
                    
                <li class="demo">
                    <a href="#" onClick="showDemo()">
                        Demo
                    </a>
                </li>
                    
                <li class="tools">
                    <a href="#" onClick="showTools()">
                        Tools
                    </a>
                </li>
                
                <li class="notebook">
                    <a href="#" onClick="showNotebook()">
                        Notebook
                    </a>
                </li>
                
                <li class="human_practice">
                    <a href="#" onClick="showHumanPractice()">
                        Human Practice
                    </a>
                </li>
                
                <li class="team">
                    <a href="#" onClick="showTeam()">
                        Team
                    </a>
                </li>
                
            </ul>
        </div>
        
        <!-- ImageMenu script -->
        <script type="text/javascript">
            window.addEvent('domready', function(){
                var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){;}});
            });
        </script>
        
        
        
        <!-- SideBar mask -->
        <div id="sideBar"></div>
        
        <!-- SideBar content: countdown -->
        <div id="sbCountdown">
            <embed width="100%" height="60" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" src="http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=00CCFF&amp;bgcolor=FFFFFF&amp;date_month=11&amp;date_day=05&amp;date_year=10&amp;un=IGEM JAMBOREE 2010&amp;size=normal&amp;mo=11&amp;da=05&amp;yr=2010">
        </div>
        
        <!-- SideBar content: follow -->
        <div id="sbFollow">
            
            <div class="followSites" style="background-image: url(https://static.igem.org/mediawiki/2010/7/7e/Twitter-32x32.png);">
                <a href="http://twitter.com/USTC_iGEM" title="Follow us on Twitter" style="width: 100%; height: 100%; display: block;"></a>
            </div>
            
            <div class="followSites" style="background-image: url(https://static.igem.org/mediawiki/2010/e/e7/Rss-32x32.png);">
                <a href="#" title="Subscribe to our RSS Feed" style="width: 100%; height: 100%; display: block;"></a>
            </div>
            
            <!-- div style="margin-right:5px;width:32px;height:32px;display:block;float:left;background-image:url(https://static.igem.org/mediawiki/2010/c/c8/Facebook-32x32.png);">
                <a href="#" title="USTC iGEM Team Facebook" style="width:100%;height:100%;display:block;"></a>
            </div>
            
            <div class="followSites" style="background-image:url(https://static.igem.org/mediawiki/2010/3/38/Youtube-32x32.png);">
                <a href="#" title="USTC iGEM Team YouTube" style="width:100%;height:100%;display:block;"></a>
            </div>
            
            <div style="margin-right:5px;width:32px;height:32px;display:block;float:left;background-image:url(https://static.igem.org/mediawiki/2010/e/e7/Rss-32x32.png);">
                <a href="#" title="USTC iGEM Team RSS" style="width:100%;height:100%;display:block;"></a>
            </div -->
            
        </div>
        
        <!-- SideBar content: share -->
        <div id="sbShare">
            <div class="addthis_toolbox addthis_default_style">
                <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c40c07f2e6f1372">
                    <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/>
                </a>
            </div>
        </div>
        
        <!-- SideBar content: share script -->
        <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c40c07f2e6f1372"></script>
        
        <div id="sbSponsors">
            
            <span style="position: absolute; left: 55px; color: #000070; font-size: 16px;">
                SPONSORS
            </span>
            
            <ul class="smoothie">
                <li>
                    <a href="http://www.ustcif.org/" title="The USTC Initiative Foundation">
                        <img src="https://static.igem.org/mediawiki/2010/b/ba/USTC_Software_IF_LOGO.jpg" height=60 width=60 />
                    </a>
                </li>
                
                <li>
                    <a href="http://biox.ustc.edu.cn/" title="USTC School of Life Science">
                        <img src="https://static.igem.org/mediawiki/2009/4/42/Sponsor2.png" height=30 width=155 />
                    </a>
                </li>
                
                <li>
                    <a href="http://ustcaf.org/" title="The USTC Alumni Foundation">
                        <img src="https://static.igem.org/mediawiki/2010/5/53/USTC_Software_alumni_logo.jpg" height=30 width=155 />
                    </a>
                </li>
                
                <li>
                    <a href="http://gradschool.ustc.edu.cn/" title="USTC Graduate School">
                        <img src="https://static.igem.org/mediawiki/2009/b/b8/Sponsor4.png" height=40 width=155 />
                    </a>
                </li>
                
                <li>
                    <a href="http://www.teach.ustc.edu.cn/" title="Teaching Affairs Office of USTC">
                        <img src="https://static.igem.org/mediawiki/2009/a/ac/Sponsor1.png" height=20 width=155 />
                    </a>
                </li>
                
                <li>
                    <a href="http://physics.ustc.edu.cn/" title="USTC School of Physical Sciences">
                        <img src="https://static.igem.org/mediawiki/2010/1/16/USTC_Software_ph_logo.jpg" height=25 width=155 />
                    </a>
                </li>
                
                <li>
                    <a href="http://cs.ustc.edu.cn/" title="USTC School of Computer Sciences">
                        <img src="https://static.igem.org/mediawiki/2010/e/e6/USTC_Software_cs_logo.jpg" height=20 width=155 />
                    </a>
                </li>
                
                <li>
                    <a href="http://math.ustc.edu.cn/" title="USTC Department of Mathematics">
                        <img src="https://static.igem.org/mediawiki/2010/8/87/USTC_Software_ma_logo.jpg" height=30 width=90 />
                    </a>
                </li>
                
            </ul>
        </div>
        
        
        
        
        <!-- ContentBox mask -->
        <div id="contentBox"></div>
        
        <!-- ContentBox content: page home -->
        <div id="pageHome" class="contentPage" style="visibility: visible;">
            </html><html>
            
            <img src="http://home.ustc.edu.cn/~soimort/igem_wiki/images/header.jpg" height=160 width=750 />
            
            <div style="overflow: auto; position: absolute; left: 0; top: 200px; height: 300px; width: 360px; border: dotted #777777; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
                <a href="#" style="text-decoration: none;">
                    <span style="position: absolute; left: 0; color: #007; font-size: 20px; font-weight: bold;">
                        Getting Started
                    </span>
                </a>
                <br/>
                
            </div>
            
            <div style="overflow: auto; position: absolute; left: 380px; top: 200px; height: 300px; width: 360px; border: dotted #777777; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
                <a href="#" style="text-decoration: none;">
                    <span style="position: absolute; left: 0; color: #007; font-size: 20px; font-weight: bold;">
                        What's New?
                    </span>
                </a>
                <br/>
                
            </div>
            
            <div style="overflow: auto; position: absolute; left: 0; top: 520px; height: 300px; width: 360px; border: dotted #777777; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
                <a href="#" style="text-decoration: none;" onClick="showProject()">
                    <span style="position: absolute; left: 0; color: #007; font-size: 20px; font-weight: bold;">
                        Project
                    </span>
                </a>
                <br/>
                
            </div>
            
            <div style="overflow: auto; position: absolute; left: 380px; top: 520px; height: 300px; width: 360px; border: dotted #777777; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
                <a href="#" style="text-decoration: none;" onClick="showMoDeL()">
                    <span style="position: absolute; left: 0; color: #007; font-size: 20px; font-weight: bold;">
                        MoDeL
                    </span>
                </a>
                <br/>
                
            </div>
            
            <div style="overflow: auto; position: absolute; left: 0; top: 840px; height: 300px; width: 360px; border: dotted #777777; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
                <a href="#" style="text-decoration: none;" onClick="showDemo()">
                    <span style="position: absolute; left: 0; color: #007; font-size: 20px; font-weight: bold;">
                        Demo
                    </span>
                </a>
                <br/>
                
            </div>
            
            <div style="overflow: auto; position: absolute; left: 380px; top: 840px; height: 300px; width: 360px; border: dotted #777777; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
                <a href="#" style="text-decoration: none;" onClick="showTools()">
                    <span style="position: absolute; left: 0; color: #007; font-size: 20px; font-weight: bold;">
                        Tools
                    </span>
                </a>
                <br/>
                
            </div>
            
            <div style="overflow: auto; position: absolute; left: 0; top: 1160px; height: 300px; width: 360px; border: dotted #777777; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
                <a href="#" style="text-decoration: none;" onClick="showNotebook()">
                    <span style="position: absolute; left: 0; color: #007; font-size: 20px; font-weight: bold;">
                        Notebook
                    </span>
                </a>
                <br/>
                
            </div>
            
            <div style="overflow: auto; position: absolute; left: 380px; top: 1160px; height: 300px; width: 360px; border: dotted #777777; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
                <a href="#" style="text-decoration: none;" onClick="showHumanPractice()">
                    <span style="position: absolute; left: 0; color: #007; font-size: 20px; font-weight: bold;">
                        Human Practice
                    </span>
                </a>
                <br/>
                
            </div>
            
            <div style="overflow: auto; position: absolute; left: 0; top: 1480px; height: 380px; width: 740px; border: dotted #777777; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
                <a href="#" style="text-decoration: none;" onClick="showTeam()">
                    <span style="position: absolute; left: 0; color: #007; font-size: 20px; font-weight: bold;">
                        Team
                    </span>
                </a>
                <br/>
                
            </div>
            
            <div style="overflow: auto; position: absolute; left: 0; top: 1880px; width: 160px;">
                <a href="http://www3.clustrmaps.com/counter/maps.php?url=https://2010.igem.org/Team:USTC_Software" id="clustrMapsLink">
                    <img src="http://www3.clustrmaps.com/counter/index2.php?url=https://2010.igem.org/Team:USTC_Software" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to the 2010 iGEM USTC Software wiki" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://www2.clustrmaps.com';" />
                </a>
            </div>
            
        </div>
        
        <!-- ContentBox content: page project -->
        <div id="pageProject" class="contentPage">
            
            <dl>
            
                <dt><a href="#projectOverview">Overview</a></dt>
                <dd id="projectOverview">
                    <style>dl #projectOverview { height: 200px; }; #projectOverview:target { height: 200px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/project}}<html>
                        
                        <br/>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
                        <br/>
                        
                        
                        
                    </div>
                </dd>
                
                <dt><a href="#projectFeatures">Features</a></dt>
                <dd id="projectFeatures">
                    <style>dl #projectFeatures:target { height: 400px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/Features}}<html>
                        
                    </div>
                </dd>
                
                <dt><a href="#projectUI">User Interface</a></dt>
                <dd id="projectUI">
                    <style>dl #projectUI:target { height: 400px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/User_Interface}}<html>
                        
                    </div>
                </dd>
                
                <dt><a href="#projectMoDeL">MoDeL</a></dt>
                <dd id="projectMoDeL">
                    <style>dl #projectMoDeL:target { height: 400px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/MoDeL}}<html>
                        
                    </div>
                </dd>
                
                <dt><a href="#projectModeling">Modeling</a></dt>
                <dd id="projectModeling">
                    <style>dl #projectModeling:target { height: 400px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/Simulation}}<html>
                        
                    </div>
                </dd>
                
                <dt><a href="#projectResources">Resources</a></dt>
                <dd id="projectResources">
                    <style>dl #projectResources:target { height: 400px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/resources}}<html>
                        
                    </div>
                </dd>
                
            </dl>
            
        </div>
        
        <!-- ContentBox content: page model -->
        <div id="pageMoDeL" class="contentPage">
            
            <dl>
            
                <dt><a href="#modelOverview">Overview</a></dt>
                <dd id="modelOverview">
                    <style>dl #modelOverview { height: 200px; }; #modelOverview:target { height: 200px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/MoDeL}}<html>
                        
                    </div>
                </dd>
                
                <dt><a href="#modelFeatures">Features</a></dt>
                <dd id="modelFeatures">
                    <style>dl #modelFeatures:target { height: 400px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/model_features}}<html>
                        
                    </div>
                </dd>
                
                <dt><a href="#modelLanguageSpec">Language Specifications</a></dt>
                <dd id="modelLanguageSpec">
                    <style>dl #modelLanguageSpec:target { height: 400px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/model_lang}}<html>
                        
                    </div>
                </dd>
                
            </dl>
            
        </div>
        
        <!-- ContentBox content: page demo -->
        <div id="pageDemo" class="contentPage">
            </html>{{:Team:USTC_Software/downloads}}<html>
        </div>
        
        <!-- ContentBox content: page tools -->
        <div id="pageTools" class="contentPage">
            </html>{{:Team:USTC_Software/tools}}<html>
        </div>
        
        <!-- ContentBox content: page notebook -->
        <div id="pageNotebook" class="contentPage">
            </html>{{:Team:USTC_Software/notebook}}<html>
        </div>
        
        <!-- ContentBox content: page human practice -->
        <div id="pageHumanPractice" class="contentPage">
            </html>{{:Team:USTC_Software/human_practice}}<html>
        </div>
        
        <!-- ContentBox content: page team -->
        <div id="pageTeam" class="contentPage">
            
            <dl>
            
                <dt><a href="#teamOverview">Overview</a></dt>
                <dd id="teamOverview">
                    <style>dl #teamOverview { height: 300px; }; #teamOverview:target { height: 300px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/team}}<html>
                        
                    </div>
                </dd>
                
                <dt><a href="#teamStudents">Students</a></dt>
                <dd id="teamStudents">
                    <style>dl #teamStudents:target { height: 600px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/Students}}<html>
                        
                    </div>
                </dd>
                
                <dt><a href="#teamInstructors">Instructors</a></dt>
                <dd id="teamInstructors">
                    <style>dl #teamInstructors:target { height: 600px; }</style>
                    <div>
                        </html>{{:Team:USTC_Software/Instructors}}<html>
                        
                    </div>
                </dd>
                
            </dl>
            
        </div>
        
        
        
        <div id="copyright">
            Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 Licence.
            
        </div>
        
    </body>

</html>