Template:WHUcss

From 2011.igem.org

(Difference between revisions)
 
(429 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
<link href='http://fonts.googleapis.com/css?family=Prata|Vidaloka|Adamina|Andika|Vollkorn|Numans|Tienne|Alice|Lobster|Droid+Serif|Droid+Sans|Open+Sans|Oswald|PT+Sans|Ubuntu' rel='stylesheet' type='text/css'>
 +
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<style type="text/css">
<style type="text/css">
-
body{
+
 
-
        font-family:Calibri;
+
html, body {
-
        position:absolute;
+
font-family:Calibri;
-
        z-index:-3;
+
  margin: 0;
-
        background-color:#B6A587;
+
  padding: 0;
 +
}
 +
#visit h3
 +
{
 +
font-family: 'Lobster',"Bodoni MT",tahoma,宋体b8b\4f53,sans-serif, cursive;
 +
font-size:22px;
 +
color:#EB5649;
 +
}
 +
div.back
 +
{
 +
background:#FCD208;
 +
height:160px
}
}
-
#content1
+
.static
{
{
-
position:relative;
+
font-size:22px;
-
height:auto;
+
font-style:semi-bold;
-
top:320px;
+
margin:5px;
 +
font-family: 'Vollkorn',tahoma,宋体b8b\4f53,sans-serif;
 +
color:#4CB848;
 +
}
 +
.dyna
 +
{
 +
font-size:25px;
 +
margin:5px;
 +
font-family: 'Vollkorn',tahoma,宋体b8b\4f53,sans-serif;
 +
font-style:Italic;
 +
color:#EB5649;
}
}
-
#menulist{
 
-
position:absolute;
 
-
        left:15px;
 
-
top:185px;
 
-
        height:30px;
 
-
width:1000px;
 
-
list-style:none;
 
-
        margin-left:5px;
 
-
        z-index:10;
 
-
      }
 
-
#menus{
 
-
font-size:18px;
 
-
list-style-image: none;
 
-
list-style-type: none;
 
-
 
-
}
 
-
ul.menu 
+
 
-
{
+
#menus
-
display:none;  
+
{
-
        list-style:none;  
+
height:26px;
-
left:-10px;
+
text-align:center;
-
        z-index:1
+
position:absolute;
 +
top:167px;
 +
width:960px;
 +
left:35px;
}
}
-
ul.menu li
+
 
 +
#menus ul li ul{
 +
position:absolute;
 +
        z-index:99;
 +
        display:none;
 +
        top:22px;
 +
        left:-19px;
 +
        -webkit-border-radius: 5px;
 +
        -moz-border-radius:5px;
 +
        background-color:#FFF;
 +
     
 +
}
 +
#menus ul li ul a li
{
{
-
margin-left:-26px;
+
display:block; width:118px; height:26px;-moz-border-radius:5px; -webkit-border-radius: 5px;
-
margin-top:-5px;
+
       
-
height:30px;
+
}
}
-
li:hover .menu,.over .menu{
+
li.mainlevel
-
display:block;      
+
{
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius:5px;  
}
}
-
#menulist li
+
#menulist a
{
{
-
    float:left;
+
width:90px;
-
    width:88px;
+
}
}
-
#menulist a{
+
#menus ul li
-
        background-color:trasparent;
+
{
-
display:block;  
+
position:relative;
-
text-decoration:none;
+
width:88px;  
-
color:black;
+
float:left;  
-
        text-align:center;
+
height:26px;
-
       
+
display:inline;
-
}
+
padding:0px 5px;
-
#menulist a:hover{
+
 
-
background-color:blue;
+
}
-
font-size:18px;
+
#menus ul li a{
-
width:auto;
+
        font-size:18.5px;
 +
        text-decoration:none;
 +
        color:black;
 +
        height:26px;
 +
        z-index:99;
 +
        width:118px;
 +
        font-family: 'Lobster',tahoma,宋体b8b\4f53,sans-serif, cursive;
 +
     
}
}
-
#subcontent
+
#menulist a:hover{color:#fff;text-decoration:none;}
 +
 
 +
 
 +
 
 +
#groupparts
{
{
-
        position:relative;
+
position:absolute;
-
height: auto;
+
top:230px;
-
width: 1000px;
+
z-index:1;
-
        z-index:-2;
+
left:150px;
-
        background-color:white;
+
}
}
 +
#head{margin:auto; width:1000px;}
 +
#title
 +
{text-align:center;  font-family: 'Lobster',"Bodoni MT",tahoma,宋体b8b\4f53,sans-serif, cursive;
 +
font-size:22px;padding-top: .5em;font-weight: bold;
 +
color:#EB5649;}
 +
#countdown
 +
{
 +
position:absolute;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius:5px;
 +
width:170px;
 +
height:200px;
 +
top:1460px;
 +
background:#FCD208;
 +
left:1010px;
 +
font-size:15px;
 +
}
 +
 +
#back
 +
{
 +
text-align:left;
 +
}
 +
#visit
 +
{
 +
position:absolute;
 +
text-align:center;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius:5px;
 +
width:170px;
 +
height:150px;
 +
top:1682px;
 +
left:1015px;
 +
background:#FCD208;
 +
}
 +
 +
   
   
#WHU1 {
#WHU1 {
Line 79: Line 148:
height: 220px;
height: 220px;
width: 1000px;
width: 1000px;
 +
        top:-26px;
}
}
Line 143: Line 213:
#menubar li a {
#menubar li a {
color:#8C8984;
color:#8C8984;
-
        background-color:transparent;
+
        background-color:transparent
}
}
Line 149: Line 219:
color:transparent;
color:transparent;
         background-color:transparent;
         background-color:transparent;
 +
        border:none;
}
}
Line 176: Line 247:
#content
#content
{
{
-
background:transparent;
+
background-color:transparent;
-
border:hidden;
+
height:auto;
height:auto;
 +
border:none;
 +
}
 +
#content1
 +
{
 +
position:absolute;
 +
background-image:url(/wiki/images/c/c0/Whu-backpeice.jpg);
 +
background-repeat:repeat;
 +
z-index:1;
 +
width:1000px;
 +
margin-left:5px;
 +
top:204px;
}
}
#p-logo
#p-logo
Line 194: Line 275:
z-index:5;
z-index:5;
height:20px;
height:20px;
-
overflow:hidden
+
overflow:hidden;
 +
        border:none;
 +
}
 +
#footer-box
 +
{
 +
display:none;
}
}
#top-section {
#top-section {
Line 205: Line 291:
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
 +
 +
var mouseover_tid = [];
 +
var mouseout_tid = [];
 +
jQuery(document).ready(function(){
 +
jQuery('#menulist > li').each(function(index){
 +
jQuery(this).hover(
 +
 +
function(){
 +
var _self = this;
 +
clearTimeout(mouseout_tid[index]);
 +
mouseover_tid[index] = setTimeout(function() {
 +
jQuery(_self).css({"background":"#BA353E"}).find('ul:eq(0)').slideDown(260);
 +
}, 50);
 +
},
 +
 +
function(){
 +
var _self = this;
 +
clearTimeout(mouseover_tid[index]);
 +
mouseout_tid[index] = setTimeout(function() {
 +
jQuery(_self).css({"background":"transparent"}).find('ul:eq(0)').slideUp(90);
 +
}, 50);
 +
}
 +
 +
);
 +
});
 +
$("#menus ul li ul a li").hover(function(){
 +
    $(this).css({"background-color":"#BA353E"});
 +
},function(){
 +
$(this).css({"background-color":"transparent"});
 +
})
 +
});
 +
$(function() {
 +
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
 +
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
 +
});
</script>
</script>
</head>
</head>
-
<body>
+
<body background="/wiki/images/4/4e/WHU-Background.jpg">
<div id="content">
<div id="content">
<div class="WHUlogo" id="WHU1">
<div class="WHUlogo" id="WHU1">
-
<img src="/wiki/images/1/16/Whu1.jpg" height="220" width="1000">
+
<a href="https://2011.igem.org/Team:WHU-China"><img src="/wiki/images/d/de/Whu-Head.png" height="220" width="1000"></a>
 +
<a href="https://igem.org/Main_Page" title="igem.org"><img src="/wiki/images/9/90/Whu-igem.png" height="80" width="100" style="position:absolute;top:30px;right:50px;"></a>
</div>
</div>
<div id="menus">  
<div id="menus">  
<ul id="menulist">  
<ul id="menulist">  
-
    <li><a href="/Team:WHU-China">Home</a>  
+
  <li class="mainlevel"> <a href="/Team:WHU-China">Home</li></a>  
-
    <li><a href="/Team:WHU-China/Team">Team</a>  
+
  <li class="mainlevel"><a href="/Team:WHU-China/Team"> Team</a>  
-
         <ul class="menu">  
+
         <ul>  
-
             <li><a href="/Team:WHU-China/Team/History">History</a></li>  
+
             <a href="/Team:WHU-China/Team/History"><li>History</li></a>  
-
             <li><a href="/Team:WHU-China/Team/Gallary">Gallery</a></li>  
+
             <a href="/Team:WHU-China/Team/Gallary"><li >Gallery</li></a>  
-
             <li style="width:auto"><a href="/Team:WHU-China/Team/Collaboration">Collaboration</a></li>  
+
             <a href="/Team:WHU-China/Team/Collaboration"><li>Collaboration</li></a>
 +
            <a href="/Team:WHU-China/Team/WhuUniversity"><li>Our University</li></a>
         </ul>
         </ul>
     </li>     
     </li>     
-
     <li><a href="/Team:WHU-China/Project">Project</a>  
+
     <li class="mainlevel"><a href="/Team:WHU-China/Project">Project</a>  
-
         <div ><ul class="menu">  
+
         <ul>  
-
             <li><a href="/Team:WHU-China/Project/Overview">Overview</a></li>  
+
             <a href="/Team:WHU-China/Project/Overview"><li>Overview</li></a>  
-
            <li><a href="/Team:WHU-China/Project/Modeling">Modeling</a></li>  
+
          <a href="/Team:WHU-China/Project/Design"> <li >Design</li></a>
-
             <li><a href="/Team:WHU-China/Project/Results">Results</a></li>  
+
            <a href="/Team:WHU-China/Project/Modeling"><li>Modeling</li> </a>
 +
             <a href="/Team:WHU-China/Project/Results"><li>Results</li></a>  
              
              
-
         </ul></div>   
+
         </ul>   
-
     </il>  
+
     </li>  
-
     <li><a href="/Team:WHU-China/Parts">Parts</a>  
+
     <li class="mainlevel" style="width:80px;"><a href="/Team:WHU-China/Parts">Parts</a>  
-
        <div  > <ul class="menu">   
+
        <ul>   
-
            <li><a href="/Team:WHU-China/Parts/BioBricks">BioBricks</a></li>
+
         
-
<li><a href="/Team:WHU-China/Parts/Submitted" >Submitted</a></li>
+
    <a href="/Team:WHU-China/Parts/Submitted" ><li >Submitted</li></a>
-
            <li><a href="/Team:WHU-China/Parts/Vectors">Vectors</a></li>  
+
            <a href="/Team:WHU-China/Parts/Data"><li>Data</li></a>
-
         </ul></div>  
+
         
 +
         </ul>  
     </li>  
     </li>  
      
      
-
     <li style="width:100px"><a href="/Team:WHU-China/Notebook">Notebook</a>  
+
     <li class="mainlevel" style="width:95px"><a href="/Team:WHU-China/Notebook">Notebook</a>  
-
         <div ><ul class="menu">  
+
         <ul>
-
            <li><a href="/Team:WHU-China/Notebook/Protocols">Protocols</a></li>  
+
          <a href="/Team:WHU-China/Notebook/Daytoday"> <li >Progress</li>  </a>
-
             <li style="width:150px;"><a href="/Team:WHU-China/Notebook/Daytoday">Daytoday Progress</a></li>  
+
             <a href="/Team:WHU-China/Notebook/Protocols"><li >Protocols</li></a>  
-
        </ul></div>  
+
         
 +
        </ul>  
     </li>  
     </li>  
-
     <li ><a href="/Team:WHU-China/Safety">Safety</a>  
+
     <li style="width:95px" class="mainlevel"><a href="/Team:WHU-China/Safety">Safety</a>  
     </li>  
     </li>  
-
     <li style="width:150px;"><a href="/Team:WHU-China/Humanpractice">Human Practice</a>  
+
     <li style="width:144px;" class="mainlevel"><a href="/Team:WHU-China/Humanpractice">Human Practice</a>  
     </li>  
     </li>  
-
     <li style="width:180px;"><a href="/Team:WHU-China/Acknowledgements">Acknowledgements</a>
+
     <li style="width:118px;" class="mainlevel"><a href="/Team:WHU-China/Standard">Standard</a>  
-
    </li>
+
-
    <li style="width:105px;"><a href="/Team:WHU-China/Data">Data Page</a>  
+
     </li>  
     </li>  
   
   
-
</ul>  
+
</ul>
 +
</div>
</div>
 +
<div id="countdown"><div id="title">
 +
Count Down</div>
 +
<div class="back">
 +
<p class="static" id="pday"> <span class="dyna" id="sday"></span> days</p>
 +
<p class="static" id="phour"><span class="dyna" id="shour"></span> hours</p>
 +
<p class="static" id="pmin"> <span class="dyna" id="smin"></span> minutes</p>
 +
<p class="static" id="psec"> <span class="dyna" id="ssec"></span> seconds</p>
 +
</div>
 +
</div>
 +
<script type="text/javascript">
 +
// to get the count time
 +
var now = new Date();
 +
function createtime(){
 +
var grt= new Date("11/5/2011 17:00:00");
 +
now.setTime(now.getTime()+250);
 +
days = (grt - now) / 1000 / 60 / 60 / 24;
 +
dnum = Math.floor(days);
 +
hours = (grt - now) / 1000 / 60 / 60 - (24 * dnum);
 +
hnum = Math.floor(hours);
 +
minutes = (grt - now) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
 +
mnum = Math.floor(minutes);
 +
seconds = (grt - now) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
 +
snum = Math.round(seconds);
 +
 +
 +
if(days>0)
 +
{
 +
    document.getElementById("sday").innerHTML = String(dnum);
 +
    document.getElementById("shour").innerHTML = hnum;
 +
    document.getElementById("smin").innerHTML = mnum;
 +
    document.getElementById("ssec").innerHTML = snum;
 +
}
 +
else
 +
{
 +
    document.getElementById("title").innerHTML = "iGEM 2011 Final";
 +
    document.getElementById("pday").style.display = "none";
 +
    document.getElementById("phour").innerHTML = "WHU Bioers";
 +
    document.getElementById("pmin").innerText = "Are the";
 +
    document.getElementById("psec").innerHTML = "BEST!";
 +
}
 +
}
 +
 +
var getd;
 +
if(getd==null)
 +
{
 +
    getd = setInterval("createtime()",250);
 +
}
 +
 +
 +
 +
 +
$(function()
 +
{
 +
$("#accordion").accordion({
 +
event: "click hoverintent"
 +
});
 +
});
 +
 +
var cfg = ($.hoverintent = {
 +
sensitivity: 1,
 +
interval: 150
 +
});
 +
 +
$.event.special.hoverintent = {
 +
setup: function() {
 +
$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
 +
},
 +
teardown: function() {
 +
$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
 +
},
 +
handler: function( event ) {
 +
event.type = "hoverintent";
 +
var self = this,
 +
args = arguments,
 +
target = $( event.target ),
 +
cX, cY, pX, pY;
 +
 +
function track( event ) {
 +
cX = event.pageX;
 +
cY = event.pageY;
 +
};
 +
pX = event.pageX;
 +
pY = event.pageY;
 +
function clear() {
 +
target
 +
.unbind( "mousemove", track )
 +
.unbind( "mouseout", arguments.callee );
 +
clearTimeout( timeout );
 +
}
 +
function handler() {
 +
if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
 +
clear();
 +
jQuery.event.handle.apply( self, args );
 +
} else {
 +
pX = cX;
 +
pY = cY;
 +
timeout = setTimeout( handler, cfg.interval );
 +
}
 +
}
 +
var timeout = setTimeout( handler, cfg.interval );
 +
target.mousemove( track ).mouseout( clear );
 +
return true;
 +
}
 +
};
 +
 +
 +
 +
 +
 +
 +
 +
</script>
 +
 +
</div>
 +
 +
 +
 +
</div>
 +
 +
 +
 +
<div id="visit">
 +
<h3>Visitor</h3>
 +
<div id="clustrmaps-widget" style="position:absolute;top:5px;left:5px;"></div><script type="text/javascript">var _clustrmaps = {'url' : 'https://2011.igem.org/Team:WHU-China', 'user' : 934877, 'server' : '4', 'id' : 'clustrmaps-widget', 'version' : 1, 'date' : '2011-09-24', 'lang' : 'zh', 'corners' : 'square' };(function (){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://www4.clustrmaps.com/counter/map.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);})();</script><noscript><a href="http://www4.clustrmaps.com/user/782e43dd"><img src="http://www4.clustrmaps.com/stats/maps-no_clusters/2011.igem.org-Team-WHU-China-thumb.jpg" alt="Locations of visitors to this page" width="230" height="160" /></a></noscript>
 +
 +
 +
</div>
</div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 10:46, 28 October 2011

Count Down

days

hours

minutes

seconds

Visitor

Retrieved from "http://2011.igem.org/Template:WHUcss"