|
|
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <head>
| |
| - | <title>2012 iGEM KAIST</title>
| |
| - | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
| |
| - | <meta name="description" content="Awesome Bubble Navigation with jQuery" />
| |
| - | <meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
| |
| - | <link rel="stylesheet" href="https://2012.igem.org/Team:KAIST_Korea/css" type="text/css" media="screen"/>
| |
| | | | |
| - |
| |
| - |
| |
| - | <style>
| |
| - | #searchInput{
| |
| - | background-color:transparent;
| |
| - | z-index:100;
| |
| - | color:#FFFFFF;
| |
| - | font:Arial;
| |
| - | text-align:center;
| |
| - |
| |
| - | background:url('https://static.igem.org/mediawiki/2011/2/2e/Kaist2011_head_searchbar.png') no-repeat;
| |
| - | background-position:0px 0px;
| |
| - | vertical-align:middle;
| |
| - |
| |
| - | width: 184px;
| |
| - | height: 22px;
| |
| - | border: none;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | #searchGoButton {
| |
| - | font-size:0pt;
| |
| - | background:url('https://static.igem.org/mediawiki/2011/5/5f/Kaist2011_head_arrow.png') no-repeat;
| |
| - | background-position:left 0px;
| |
| - | cursor:pointer;
| |
| - | cursor: hand; /* for IE 5.x */
| |
| - |
| |
| - | width: 29px;
| |
| - | height: 29px;
| |
| - | border: none;
| |
| - | }
| |
| - | #mw-searchButton {
| |
| - | position:relative;
| |
| - | left:35px;
| |
| - | font-size:0pt;
| |
| - | background:url('https://static.igem.org/mediawiki/2011/a/a1/Kaist2011_head_search.png') no-repeat;
| |
| - | background-position:left 0px;
| |
| - | cursor:pointer;
| |
| - | cursor: hand; /* for IE 5.x */
| |
| - |
| |
| - | width: 29px;
| |
| - | height: 29px;
| |
| - | border: none;
| |
| - | }
| |
| - | .firstHeading {display:none;}
| |
| - |
| |
| - | #top-section {
| |
| - | height:80px; width:1000px;
| |
| - | border:none;
| |
| - | z-index:0;
| |
| - | }
| |
| - |
| |
| - | <!--Remove the banner-->
| |
| - | #p-logo {position:relative; top:0px; z-index:0; height:1px; width:10px; overflow:hidden;}
| |
| - | #p-logo a{color:black;}
| |
| - | img[src*="/wiki/skins/common/images/wiki.png"]{
| |
| - | visibility:hidden;
| |
| - | top:-100px;
| |
| - | width:10px;
| |
| - | height:0px;
| |
| - | margin-top:20px;
| |
| - | background:transparent;
| |
| - | }
| |
| - |
| |
| - | #menubar{
| |
| - | clear:both;
| |
| - | top:0px;
| |
| - | z-index:1;
| |
| - | font-size:8pt;
| |
| - | font-family:"Arial";}
| |
| - | #menubar:hover{
| |
| - | background-color:transparent;
| |
| - | }
| |
| - |
| |
| - | .left-menu {margin-top:0px; left:-20px;}
| |
| - | .left-menu ul {border:none;}
| |
| - | .right-menu {margin-top:0px; right:-5px;}
| |
| - | .right-menu ul {border:none;}
| |
| - | .right-menu ul a {background-color:transparent;}
| |
| - | .left-menu li a {color: #ffffff;}
| |
| - | .left-menu li a:visited {color: #ffffff;}
| |
| - | .left-menu li a:hover { color:#bbe0e9;}
| |
| - | .left-menu li a:active{ color:#bbe0e9; font-weight:bold;}
| |
| - | .right-menu li a {color: #000000;}
| |
| - | .right-menu li a:visited {color: #000000;}
| |
| - | .right-menu li a:hover {color:#ababab; text-decoration:none;}
| |
| - | .right-menu li a:active {color:#ababab; text-decoration:none;font-weight:bold;}
| |
| - |
| |
| - | #menubar li {
| |
| - | margin: 6px;
| |
| - | }
| |
| - |
| |
| - | #catlinks {
| |
| - | position:relative;
| |
| - | top:5px;
| |
| - | left:-5px;
| |
| - | width:990px;
| |
| - | border:none;
| |
| - | background-color:transparent;
| |
| - | padding-top:5px;
| |
| - | clear: both;
| |
| - | }
| |
| - |
| |
| - | #footer-box {width:965px; background-color:transparent; border:none; position:relative; top:-50px; padding-top:25px;}
| |
| - | #footer {
| |
| - | position:relative;
| |
| - | bottom:5%;
| |
| - | background-color:transparent;
| |
| - | font-size:8pt;
| |
| - | font-family:"Arial";
| |
| - | z-index:1;
| |
| - | }
| |
| - | #footer li a {color:#000000;}
| |
| - | #footer img {
| |
| - | margin:10px;
| |
| - | border:none;
| |
| - | }
| |
| - | #footer li a:visited {color::#000000;}
| |
| - | #footer li a:hover { color:#ababab; text-decoration:none; }
| |
| - | #footer li a:active{ color:#ababab; text-decoration:none; font-weight:bold}.navigation{
| |
| - | margin: 0em auto;
| |
| - | font-family: "Trebuchet MS", sans-serif;
| |
| - | font-size: 1.5em;
| |
| - | font-style: normal;
| |
| - | font-weight: bold;
| |
| - | letter-spacing: 0.0875em;
| |
| - | }
| |
| - | .navigation .item{
| |
| - | position:absolute;
| |
| - | }
| |
| - | .navigation .item2{
| |
| - | position:absolute;
| |
| - | }
| |
| - | .ehome{
| |
| - | top:38.375em;
| |
| - | left:24.5em;
| |
| - | }
| |
| - | .eteam{
| |
| - | top:10.75em;
| |
| - | left:3.125em;
| |
| - | }
| |
| - | .epart{
| |
| - | top:4.6875em;
| |
| - | left:14.375em;
| |
| - | }
| |
| - | .eproject{
| |
| - | top:3em;
| |
| - | left:26.875em;
| |
| - | }
| |
| - | .emodeling{
| |
| - | top:5.75em;
| |
| - | left:39.6875em;
| |
| - | }
| |
| - | .enote{
| |
| - | top:13em;
| |
| - | left:50.75em;
| |
| - | }
| |
| - | .esafety{
| |
| - | top:23.75em;
| |
| - | left:58.4375em;
| |
| - | }
| |
| - | .eatt{
| |
| - | top:35.9375em;
| |
| - | left:61.5625em;
| |
| - | }
| |
| - | .face{
| |
| - | top:40.9375em;
| |
| - | left:76.25em;
| |
| - | }
| |
| - | .twit{
| |
| - | top:44.375em;
| |
| - | left:76.25em;
| |
| - | }
| |
| - | .maill{
| |
| - | top:37.5em;
| |
| - | left:76.25em;
| |
| - | }
| |
| - | a.icon2{
| |
| - | width:4.875em;
| |
| - | height:4.875em;
| |
| - | position:absolute;
| |
| - | top:0em;
| |
| - | left:0em;
| |
| - | cursor:pointer;
| |
| - | }
| |
| - | a.icon{
| |
| - | width:3.25em;
| |
| - | height:3.25em;
| |
| - | position:absolute;
| |
| - | top:0em;
| |
| - | left:0em;
| |
| - | cursor:pointer;
| |
| - | }
| |
| - | .ehome a.icon2{
| |
| - | background:transparent url(../images/ehome.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .eteam a.icon{
| |
| - | background:transparent url(../images/eteam.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .epart a.icon{
| |
| - | background:transparent url(../images/epart.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .eproject a.icon{
| |
| - | background:transparent url(../images/eproject.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .emodeling a.icon{
| |
| - | background:transparent url(../images/emodeling.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .enote a.icon{
| |
| - | background:transparent url(../images/enote.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .esafety a.icon{
| |
| - | background:transparent url(../images/esafety.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .eatt a.icon{
| |
| - | background:transparent url(../images/eatt.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .face a.icon{
| |
| - | background:transparent url(../images/face.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .twit a.icon{
| |
| - | background:transparent url(../images/twit.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .maill a.icon{
| |
| - | background:transparent url(../images/maill.png) no-repeat 0em 0em;
| |
| - | }
| |
| - | .navigation .item a.active{
| |
| - | background-position:0em -3.25em;
| |
| - | }
| |
| - | .navigation .item2 a.active{
| |
| - | background-position:0em -4.875em;
| |
| - | }
| |
| - | .item img.circle{
| |
| - | position:absolute;
| |
| - | top:0em;
| |
| - | left:0em;
| |
| - | width:3.25em;
| |
| - | height:3.25em;
| |
| - | opacity:0.1;
| |
| - | }
| |
| - | .item h2{
| |
| - | position:absolute;
| |
| - | width:9.1875em;
| |
| - | height:3.25em;
| |
| - | color:#222;
| |
| - | font-size:1.125em;
| |
| - | top:0em;
| |
| - | left:3.25em;
| |
| - | text-indent:0.625em;
| |
| - | line-height:3.25em;
| |
| - | text-shadow:0.0625em 0.0625em 0.0625em #fff;
| |
| - | text-transform:uppercase;
| |
| - | }
| |
| - | .item h2.active{
| |
| - | color:#fff;
| |
| - | text-shadow:0.0625em 0em 0.0625em #555;
| |
| - | }
| |
| - | .item ul{
| |
| - | list-style:none;
| |
| - | position:absolute;
| |
| - | top:3.75em;
| |
| - | left:1.5625em;
| |
| - | display:none;
| |
| - | }
| |
| - | .item ul li a{
| |
| - | font-size:0.9375em;
| |
| - | text-decoration:none;
| |
| - | letter-spacing:0.09375em;
| |
| - | text-transform:uppercase;
| |
| - | color:#222;
| |
| - | padding:0.1875em;
| |
| - | float:left;
| |
| - | clear:both;
| |
| - | width:7.1875em;
| |
| - | text-shadow:0.0625em 0.0625em 0.0625em #fff;
| |
| - | }
| |
| - | .item ul li a:hover{
| |
| - | background-color:#fff;
| |
| - | color:#444;
| |
| - | -moz-border-radius:0.3125em;
| |
| - | -webkit-border-radius:0.3125em;
| |
| - | border-radius:0.3125;
| |
| - | -moz-box-shadow:0.0625em 0.0625em 0.25em #666;
| |
| - | -webkit-box-shadow:0.0625em 0.0625em 0.25em #666;
| |
| - | box-shadow:0.0625em 0.0625em 0.25em #666;
| |
| - | }
| |
| - |
| |
| - | *{
| |
| - | font-size:16px;
| |
| - | margin:0 auto;
| |
| - | margin-bottom:0em;
| |
| - | padding:0;
| |
| - |
| |
| - | }
| |
| - | body{
| |
| - |
| |
| - |
| |
| - | font-family:Arial;
| |
| - | background:#fff url(https://static.igem.org/mediawiki/2012/thumb/3/3a/Bg.png/800px-Bg.png) no-repeat top left;
| |
| - | }
| |
| - | .title{
| |
| - | width:34.25em;
| |
| - | height:7.4375em;
| |
| - | position:absolute;
| |
| - | top:12.5em;
| |
| - | left:10em;
| |
| - | background:transparent url(images/etitle.png) no-repeat top left;
| |
| - | }
| |
| - | a.back{
| |
| - | background:transparent url(images/iGEM.png) no-repeat top left;
| |
| - | position:absolute;
| |
| - | width:9.375em;
| |
| - | height:6.25em;
| |
| - | outline:none;
| |
| - | top:41.25em;
| |
| - | left:0em;
| |
| - | }
| |
| - | #content{
| |
| - | margin:0 auto;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | </style>
| |
| - |
| |
| - | </head>
| |
| - |
| |
| - | <body>
| |
| - |
| |
| - | <div id="content">
| |
| - | <a class="back" href="https://igem.org/Main_Page"></a>
| |
| - | <div class="title"></div>
| |
| - |
| |
| - | <div class="navigation" id="nav">
| |
| - | <div class="item2 ehome">
| |
| - | <a href="./menu_home.html" class="icon2"></a>
| |
| - |
| |
| - | </div>
| |
| - | <div class="item eteam">
| |
| - | <img src="images/bg_user.png" alt="" width="12.4375em" height="12.4375em" class="circle"/>
| |
| - | <a href="#" class="icon"></a>
| |
| - | <h2>Team</h2>
| |
| - | <ul>
| |
| - | <li><a href="./menu_team_profile.html">Team Profile</a></li>
| |
| - | <li><a href="./menu_team_gallery.html">Gallery</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - | <div class="item epart">
| |
| - | <img src="images/bg_shop.png" alt="" width="12.4375em" height="12.4375em" class="circle"/>
| |
| - | <a href="#" class="icon"></a>
| |
| - | <h2>Part</h2>
| |
| - | <ul>
| |
| - | <li><a href="./menu_part_biobrick.html">Bio Bricks</a></li>
| |
| - | <li><a href="./menu_part_about.html">About Bricks</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - | <div class="item eproject">
| |
| - | <img src="images/bg_home.png" alt="" width="12.4375em" height="12.4375em" class="circle"/>
| |
| - | <a href="#" class="icon"></a>
| |
| - | <h2>Project</h2>
| |
| - | <ul>
| |
| - | <li><a href="./menu_project_background.html">Background</a></li>
| |
| - | <li><a href="./menu_project_expDesign.html">Exp Design</a></li>
| |
| - | <li><a href="./menu_project_expResult.html">Results</a></li>
| |
| - | <li><a href="./menu_project_future.html">Future Plan</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - |
| |
| - | <div class="item emodeling">
| |
| - | <img src="https://static.igem.org/mediawiki/2012/2/22/Bg_camera.png" alt="" width="12.4375em" height="12.4375em" class="circle"/>
| |
| - | <a href="#" class="icon"></a>
| |
| - | <h2>Modeling</h2>
| |
| - | <ul>
| |
| - | <li><a href="./menu_modeling_modeling1.html">Model1</a></li>
| |
| - | <li><a href="./menu_modeling_modeling2.html">Model2</a></li>
| |
| - | <li><a href="./menu_modeling_modeling3.html">Model3</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - | <div class="item enote">
| |
| - | <img src="images/bg_fav.png" alt="" width="12.4375em" height="12.4375em" class="circle"/>
| |
| - | <a href="#" class="icon"></a>
| |
| - | <h2>Notebook</h2>
| |
| - | <ul>
| |
| - | <li><a href="./menu_notebook_protocol.html">Protocol</a></li>
| |
| - | <li><a href="./menu_notebook_labnote.html">Labnote</a></li>
| |
| - | <li><a href="./menu_notebook_result.html">Overview</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - | <div class="item esafety">
| |
| - | <img src="images/bg_keys.png" alt="" width="12.4375em" height="12.4375em" class="circle"/>
| |
| - | <a href="#" class="icon"></a>
| |
| - | <h2>Safety</h2>
| |
| - | <ul>
| |
| - | <li><a href="./menu_safety_safety1.html">Safety1</a></li>
| |
| - | <li><a href="./menu_safety_safety2.html">Safety2</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - | <div class="item eatt">
| |
| - | <img src="https://static.igem.org/mediawiki/2012/5/5e/Bg_att.png" alt="" width="12.4375em" height="12.4375em" class="circle"/>
| |
| - | <a href="#" class="icon"></a>
| |
| - | <h2>Attribution</h2>
| |
| - | <ul>
| |
| - | <li><a href="./menu_attribution_attr1.html">Attr1</a></li>
| |
| - | <li><a href="./menu_attribution_attr2.html">Attr2</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - | <div class="item face">
| |
| - | <a href="http://www.facebook.com/pages/KAIST-iGEM-2012/450165755011680" class="icon"></a>
| |
| - | </div>
| |
| - |
| |
| - | <div class="item twit">
| |
| - | <a href="http://twitter.com/#!/KAIST_iGEM_2012" class="icon"></a>
| |
| - | </div>
| |
| - | <div class="item maill">
| |
| - | <a href="#" class="icon"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div>
| |
| - | <!-- The JavaScript -->
| |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
| |
| - | <script type="text/javascript" src="https://2012.igem.org/Team:KAIST_Korea/js_easing"></script>
| |
| - | <script type="text/javascript">
| |
| - | $(function() {
| |
| - | $('#nav > div').hover(
| |
| - | function () {
| |
| - | var $this = $(this);
| |
| - | $this.find('img').stop().animate({
| |
| - | 'width' :'12.4375em',
| |
| - | 'height' :'12.4375em',
| |
| - | 'top' :'-1.5625em',
| |
| - | 'left' :'-1.5625em',
| |
| - | 'opacity' :'1.0'
| |
| - | },500,'easeOutBack',function(){
| |
| - | $(this).parent().find('ul').fadeIn(700);
| |
| - | });
| |
| - |
| |
| - | $this.find('a:first,h2').addClass('active');
| |
| - | },
| |
| - | function () {
| |
| - | var $this = $(this);
| |
| - | $this.find('ul').fadeOut(500);
| |
| - | $this.find('img').stop().animate({
| |
| - | 'width' :'3.25em',
| |
| - | 'height' :'3.25em',
| |
| - | 'top' :'0em',
| |
| - | 'left' :'0em',
| |
| - | 'opacity' :'0.1'
| |
| - | },5000,'easeOutBack');
| |
| - |
| |
| - |
| |
| - | $this.find('a:first,h2').removeClass('active');
| |
| - |
| |
| - | }
| |
| - | );
| |
| - |
| |
| - |
| |
| - | });
| |
| - | </script>
| |
| - |
| |
| - | </body>
| |
| - | </html>
| |
"
