Team:Hong Kong HKUST/advisors

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu li").hover(function(){
$(this).find("ul>li").stop().fadeToggle(10);	
});
});
</script>

<style type="text/css">
.menu ul{
margin:0;
padding:0;
list-style:none;
}

.menu{
position:absolute;
z-index:+1;
}

body{
font-family:auto;
background-color:white;
padding:0px;
}

.menu ul li{
float:left;
width:160px;
height:30px;
line-height:30px;	
text-align:center;
background-color:green;
}

.menu ul li a{
text-decoration:none;
color:yellow;
}

.menu ul li li{
background-color:green;
color:white;
display:none;
}

.menu ul li li:hover{
background:#555;
}

.menu ul li li a{
text-decoration:none;
color:white;
}
</style>
<style>
.pos_fixed
{
position:fixed;
top:300px;
left:10px;
}

ol.pos_fixed
{
list-style-type:none;
margin:0;
padding:0;
}
.pos_fixed a:link,.pos_fixed a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.pos_fixed a:hover,.pos_fixed a:active
{
background-color:#7A991A;
}

</style>
</head>
<body>

<div class="menu">
<ul>

<li><a href="">Home</a></li>

<li><a href="team">Team</a>
<ul>
<li><a href="members">Members</a></li>
<li><a href="advisors">Advisors</a></li>
<li><a href="instructors">Instructors</a></li>
</ul>
</li>

<li><a href="project">Project</a>
<ul>
<li><a href="abstract">Abstract(Details)</a></li>
<li><a href="modelling">Modelling</a></li>
<li><a href="characterization">Characterization</a></li>
<li><a href="parts">Parts</a></li>
<li><a href="datapage">Data Page</a></li>
<li><a href="results">Results</a></li>
</ul>
</li>

<li><a href="wetlab">Wetlab</a>
<ul>
<li><a href="notebook">Notebook</a></li>
<li><a href="protocols">Protocols</a></li>
<li><a href="safety">Safety</a></li>
</ul>
</li>

<li><a href="achievements">Achievement</a>
<ul>
<li><a href="medalrequirements">Medal Requirements</a></li>
<li><a href="prizes">Prizes</a></li>
</ul>
</li>

<li><a href="humanpractice">Human Practice</a></li>

</ul>

</div>





</body>
<head>

<style>
.menu ol
{
list-style-type:none;
margin:0;
padding:0;
}
.menu li
{
float:left;
}
.menu a:link,.menu a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.menu a:hover,.menu a:active
{
background-color:#7A991A;
}




</style>




<title>Team</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("#team1").mouseover(function(){
    $("#team1").animate({width:"110px"});
  });
  $("#team2").mouseleave(function(){
    $("#team1").animate({width:"220px"});
  });
  $("#wetlab1").mouseover(function(){
    $("#wetlab1").animate({width:"110px"});
  });
  $("#wetlab2").mouseleave(function(){
    $("#wetlab1").animate({width:"220px"});
  });
  $("#hp1").mouseover(function(){
    $("#hp1").animate({width:"215px"});
  });
  $("#hp2").mouseleave(function(){
    $("#hp1").animate({width:"430px"});
  });
  $("#project1").mouseover(function(){
    $("#project1").animate({width:"110px"});
  });
  $("#project2").mouseleave(function(){
    $("#project1").animate({width:"220px"});
  });
  $('#menubar').mouseover(function(){
    $('#menubar').stop().animate({top:"0px"},500);
  });
  $('#menubar').mouseleave(function(){
    $('#menubar').stop().animate({top:"-20px"},500);
  });
  $('#menubar.right-menu').mouseover(function(){
    $('#menubar.right-menu').stop().animate({top:"0px"},500);
  });
  $('#menubar.right-menu').mouseleave(function(){
    $('#menubar.right-menu').stop().animate({top:"-20px"},500);
  });
});
</script>
<body>

<h3><center><div id="kepala" style="height:121px;width:965px;"><img src="https://static.igem.org/mediawiki/2013/5/5a/Banner_gear.png" id="banner" style="height:121px;width:965px;align:middle;"></div></center></h3>
<h id="header"><font size = 50>Advisors</font></h>
<div id="introduction" style="background-color:cream;height:200px;width:260px;"><font size = 5>Here are our amazing advisors. They are the one who lead us to success!</font></div>
<div id="trevor" style="background-color:#FCFF27;height:200px;width:155px;">
<h>Trevor</h>
</div>
<div id="steven" style="background-color:green;height:200px;width:155px;">
<h>Steven</h>
</div>
<div id="bida" style="background-color:red;height:200px;width:155px;">
<h>Bida</h>
</div>
<div id="cosmos" style="background-color:orange;height:200px;width:155px;">
<h>Cosmos</h>
</div>
<div id="ted" style="background-color:blue;height:200px;width:155px;">
<h>Ted</h>
</div>
<div id="ilona" style="background-color:pink;height:200px;width:155px;">
<h>Ilona</h>
</div>
<div id="chelsi" style="background-color:violet;height:200px;width:155px;">
<h>Chelsi</h>
</div>
<div id="leon" style="background-color:yellow;height:200px;width:155px;">
<h>Leon</h>
</div>
<div id="sean" style="background-color:green;height:200px;width:155px;">
<h>Sean</h>
</div>
<div id="qiyi" style="background-color:red;height:200px;width:155px;">
<h>Qi Yi</h>
</div>
<div id="leechakpui" style="background-color:yellow;height:200px;width:155px;">
<h>Lee Chak Pui</h>
</div>
<div id="yulaicheong" style="background-color:yellow;height:200px;width:155px;">
<h>Yu Lai Cheong</h>
</div>
<div id="xukaichun" style="background-color:green;height:200px;width:155px;">
<h>Xu Kaichun</h>
</div>
<div id="sunfei" style="background-color:blue;height:200px;width:155px;">
<h>Sun Fei</h>
</div>
<div id="liyiming" style="background-color:pink;height:200px;width:155px;">
<h>Li Yiming</h>
</div>
<div id="copyright">© Copyright HKUST iGEM Team 2013, All Rights Reserved<br><br><br></div>




<style type="text/css">
.menu
{
position:absolute;
left:-10px;
top:140px;
}
#banner
{
position:absolute;
left:-15px;
top:15px;
}
#header
{
position:absolute;
left:600px;
top:260px;
}
#introduction
{
position:absolute;
left:60px;
top:440px;
}
#trevor
{
position:absolute;
left:50px;
top:190px;
}
#steven
{
position:absolute;
left:205px;
top:190px;
}
#bida
{
position:absolute;
left:360px;
top:190px;
}
#cosmos
{
position:absolute;
left:360px;
top:390px;
}
#ted
{
position:absolute;
left:515px;
top:390px;
}
#ilona
{
position:absolute;
left:360px;
top:590px;
}
#chelsi
{
position:absolute;
left:515px;
top:590px;
}
#leon
{
position:absolute;
left:670px;
top:390px;
}
#sean
{
position:absolute;
left:820px;
top:390px;
}
#qiyi
{
position:absolute;
left:205px;
top:590px;
}
#leechakpui
{
position:absolute;
left:50px;
top:590px;
}
#yulaicheong
{
position:absolute;
left:670px;
top:790px;
}
#xukaichun
{
position:absolute;
left:360px;
top:790px;
}
#sunfei
{
position:absolute;
left:515px;
top:790px;
}
#liyiming
{
position:absolute;
left:820px;
top:790px;
}
#copyright
{
position:absolute;
right:330px;
top:1050px;
}
#globalWrapper
{
background-color:#fff7e8;
height:560px;
}
#content
{
background-color:#fff7e8;
border-color:#fff7e8;

}
#menubar 
{ 
background-color:#EEECEC;
opacity:0.8;
top:-4px;
width:360px;
height:23px;
position:absolute;
top:-20px;
}
#menubar ul li a 
{ 
color:#8D1919;
}
#menubar.right-menu
{
background-color:#EEECEC;
opacity:0.8;
top:-4px;
width:240px;
height:23px;
position:absolute;
top:-20px;
}
.right-menu li a 
{ 
color:#8D1919;  
background-color:#EEECEC;
}

#p-logo
{
height:0px;
visibility:hidden;
}
#top-section
{
height:0px;
}
#footer-box
{
height:0px;
display:none;
visbility:hidden;
}
#catlinks
{
border-color:#fff7e8;
background-color:#fff7e8;
}
#search-controls
{
visibility:hidden
}
.firstHeading
{
visibility:hidden
}

</style>

</div>
</body>

</html>