Template:Team:USTC Software/Header

From 2010.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<style>
+
<head>
-
/* USTC_Software | 20100717 */
+
      <style type="text/css">
-
/* BEGIN CSS RESET */
+
      body {behavior: url(http://www.xs4all.nl/~peterned/htc/csshover3-source.htc);}
-
html, body, div, span, applet, object, iframe,
+
-
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+
-
a, abbr, acronym, address, big, cite, code,
+
-
del, dfn, em, font, img, ins, kbd, q, s, samp,
+
-
small, strike, strong, sub, sup, tt, var,
+
-
b, u, i, center,
+
-
dl, dt, dd, ol, ul, li,
+
-
fieldset, form, label, legend,
+
-
table, caption, tbody, tfoot, thead, tr, th, td {
+
-
margin: 0;
+
-
padding: 2;
+
-
border: 0;
+
-
outline: 0;
+
-
vertical-align: baseline;
+
-
background: transparent;
+
-
line-height: 1;
+
-
}
+
-
body {
+
-
line-height: 1;
+
-
}
+
-
ol, ul {
+
-
list-style: none;
+
-
vertical-align: ;
+
-
}
+
-
blockquote, q {
+
-
quotes: none;
+
-
}
+
-
blockquote:before, blockquote:after,
+
-
q:before, q:after {
+
-
content: '';
+
-
content: none;
+
-
}
+
-
/* remember to define focus styles! */
+
      .clear {clear:both;}
-
:focus {
+
body.mediawiki {
-
outline: 0;
+
background-color:#494d51;
-
}
+
background-position: center center;
 +
background-attachment: fixed;
 +
background-repeat: no-repeat;
 +
font-family: Calibri, Verdana, helvetica, sans-serif;
 +
}
 +
h2 {padding: 10px 20px;
 +
font-size: 18px;
 +
color: #eb8300;
 +
text-decoration: none;
 +
font-weight: bold;}
 +
border: none;
 +
h2 a {color: #eb8300;}
 +
h3 {padding: 10px 20px;
 +
font-size: 16px;
 +
color: #000;
 +
font-decoration: none;
 +
font-weight: bold;}
 +
h1.firstHeading {
 +
display: none;
 +
}
 +
p {
 +
text-align: justify;
 +
}
 +
a:link {
 +
color: #00a5ea;
 +
text-decoration: none
 +
}
 +
a:visited {
 +
color:#00a5ea;
 +
text-decoration: none
 +
}
 +
a:hover {
 +
                        color: #eb8300;
 +
text-decoration: none
 +
}
 +
a:active {
 +
color:#f29400;
 +
text-decoration: none
 +
}
 +
#bodyContent { width: 970px; margin: 225px 0px 0px; background-color:#ede8e2;}
 +
                #content {padding-left: 0px; width: 970px;}
 +
table#team_members { text-align: justify; border: 0; }
 +
table#team_members h2, table#team_members h3 { clear: both; }
 +
#content * a:hover {text-decoration:none;}
 +
#main_wrapper {
 +
                        position:absolute; left:0px; top:0px;
 +
margin: 0;
 +
width: 969px;
 +
height: 221px;
 +
align: center;
 +
border-style: solid;
 +
                        border-color: white;
 +
}
 +
#header {
 +
position:absolute; left:0px; top:0px;
 +
margin: 0;
 +
width: 969px;
 +
height: 221px;
 +
align: left;
 +
background-color: gray;
 +
<!--            background-image: url(https://static.igem.org/mediawiki/2010/c/c3/USTC_Software_Logo.png);-->
 +
}
 +
#navigation {
 +
position:absolute; left:0px; top:150px; width:793px; height:69px;
 +
z-index:100; background-color: transparent; float: left;
 +
color: #0000FF;
 +
}
 +
#super_main_wrapper {
 +
                        position:absolute; left:0px; top:227px;
 +
width: 975px;
 +
align: center;
 +
background-color: #ede8e2;
 +
                        heigth: auto;
 +
                }
-
/* remember to highlight inserts somehow! */
+
                #SubWrapper {width: 645px;
-
ins {
+
                        padding: 0px;
-
text-decoration: none;
+
                        border-left:4px solid #ede8e2;
-
}
+
                        float: left;
-
del {
+
                        margin-top: 3px;
-
text-decoration: line-through;
+
                        background-color: #ede8e2;}
-
}
+
                #SubWrapper * p, #SubWrapper p  {padding: 0 20px;
-
/* tables still need 'cellspacing="0"' in the markup */
+
                        text-align: justify;
-
table {
+
                        font-size: 12px;}
-
border-collapse: collapse;
+
                #SubWrapper * h3, #SubWrapper h3 {padding-top: 10px;
-
border-spacing: 0;
+
                        font-size: 18px;}
-
}
+
                #news {width: 322px;
-
/* END CSS RESET */
+
                        margin-top: 3px;
-
                                .tabbed_content .tabs {background-color : gray; }
+
                        float: left;
-
.tabbed_content .slide_content {
+
                        background-color: #d8d5d0;
-
overflow: hidden;
+
                        border-right:4px solid #ede8e2;}
-
width: 650px;
+
              #news p {padding: 0 20px 20px 20px;
-
}
+
                        text-align: justify;
-
.slide_content {
+
                        font-size: 12px;}
-
margin-top: -2em!important;
+
                #news h3 {padding: 10px 20px;
-
}
+
                        font-size: 18px;}
-
.tabslider {
+
                div.tleft {border-width: 0px; margin:0; padding:0;border-color:transparent;}
-
width: 10000px;
+
-
overflow: auto;
+
-
}
+
-
.tabslider ul {
+
               
-
float: left;
+
<!-- ################# Navi styles ######################### -->
-
width: 650px;
+
#menu * {
-
                                                padding-top: 15px;
+
margin: 0;
-
                                                padding-left: -2px;
+
padding: 0;
-
                                                padding-right: -2px;
+
}
-
}
+
-
.lavaLampBottomStyle {
+
#menu {
-
position: relative;
+
behavior: url(http://www.xs4all.nl/~peterned/htc/csshover3-source.htc); <!-- fuer ie6 -->
-
height: 29px;
+
font-family: calibri, verdana, sans-serif;
-
width: 1000px;
+
font-size: 14px;
-
padding: 15px;
+
background-color: transparent;
-
margin: 0 5px 0 0;
+
float:left;
-
overflow: hidden;
+
padding: 10px 0 0 0;
-
}
+
}
-
.lavaLampBottomStyle li {
+
-
float: left;
+
-
list-style: none;
+
-
}
+
-
.lavaLampBottomStyle li.back {
+
-
border-bottom: 0px solid #F5FFFA;
+
-
width: 9px;
+
-
height: 30px;
+
-
z-index: 8;
+
-
position: absolute;
+
-
}
+
-
.lavaLampBottomStyle li a {
+
-
font: bold 10pt Courier;
+
-
text-decoration: none;
+
-
color: darkblue;
+
-
outline: none;
+
-
text-align: center;
+
-
top: 7px;
+
-
letter-spacing: 0;
+
-
z-index: 10;
+
-
display: block;
+
-
float: left;
+
-
height: 30px;
+
-
position: relative;
+
-
overflow: hidden;
+
-
margin: auto 10px;
+
-
+
-
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
+
-
border: none;
+
-
}
+
 +
#menu ul {
 +
float: left;
 +
list-style: none;
 +
}
-
/* Wiki Hacks - START */
+
#menu ul li {
 +
background-color:transparent;
 +
        position:relative;
 +
float:left;
 +
list-style: none;
 +
padding: 10px 15px 0 0;
 +
        font-weight: bold;
 +
        width: auto;
 +
}
-
#globalWrapper {
+
#menu a {
-
background-color: transparent;
+
color: #FFF;
-
border: none;
+
display: inline;
-
margin: 0;
+
text-decoration: none;
-
padding: 0;
+
}
-
}
+
-
#content {
+
#menu a:visited {
-
background-color: transparent;
+
color:#FFFFFF;
-
border: none;
+
text-decoration: none
-
padding: 0;
+
}
-
margin: 0;
+
-
width: 100%;
+
-
}
+
-
#bodyContent {
+
#menu a:hover {
-
border: none;
+
color: #00a5ea;
-
padding:0;
+
}
-
margin:0;
+
-
width:100%;
+
-
}
+
-
#top-section {
+
#menu ul li ul {
-
height: 20px;
+
display: none;
-
margin-left: auto;
+
position: absolute;
-
width: 99%;
+
left: -20px;  
-
margin-right: auto;
+
        width: 155px;
-
margin-bottom: 10px;
+
        heigth: 1%;
-
margin-top: 3px;
+
font-size: 12px;
-
border-bottom: 0px dashed gray;
+
opacity: 0.8;
-
}
+
list-style: none;
 +
        top: 19px;
 +
        padding-top: 9px;
 +
        z-index:500;
 +
}
-
#p-logo {
+
#menu ul li:hover ul {
-
height:1px;
+
display: inline;
-
overflow:hidden;
+
        background-position: bottom;
-
display: none;
+
}
-
}
+
-
#search-controls {
+
-
overflow:hidden;
+
-
top: 20px;
+
-
left: 0px;
+
-
display:block;
+
-
background: none;
+
-
position: absolute;
+
-
}
+
-
.left-menu {
+
#menu ul li ul li {
-
width: 400px;
+
width: 100%;
-
display:block;
+
list-style: none;
-
float:left;
+
        background-color: #000;
-
margin-top:-80px;
+
        margin: -1px;
-
border: none;
+
        padding: 0 0 0 5px;
-
}
+
        display: inline;
 +
}
-
.left-menu ul {
+
body#home #mainHome a,
-
border: none;
+
body#team .aTeam,
-
}
+
body#project .aProject,
-
#menubar li a {
+
body#notebook .aNotebook,
-
color: #ffffff;
+
body#modeling .aModeling,
-
}
+
body#sponsors .aSponsors,
 +
body#eucaryopedia .aEucaryopedia,
 +
body#parts .aParts
 +
{ color: #F08F03; <!--cursor: default;--> }
-
#menubar.right-menu {
 
-
width:300px;
 
-
display:block;
 
-
float:left;
 
-
margin-top:-80px;
 
-
border: none;
 
-
}
 
-
.right-menu ul {
+
</style>
-
border: none;
+
</head>
-
}
+
-
#footer-box {
 
-
background-color: transparent;
 
-
border: none;
 
-
width: 965px;
 
-
margin: 0 auto;
 
-
padding: 0;
 
-
color: black;
 
-
}
 
-
#footer {
+
<!-- ############################# BODY!!!!! #################################### -->
-
border: none;
+
-
width: 965px;
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
.firstHeading {
+
<body>
-
display: none;
+
<!--[if IE]>
-
}
+
<style type="text/css">
 +
#SubWrapper {width: 645px;}
 +
#news {width: 317px;}
 +
#super_main_wrapper {position:static;}
 +
#navigation {left: 15px;}
 +
#menu ul li ul {left: -2px; top: 22px;}
 +
</style>
 +
<![endif]--> 
 +
<div id="main_wrapper">
 +
<div id="header">
 +
<img src="https://static.igem.org/mediawiki/2010/c/c3/USTC_Software_Logo.png" width="350px" height="150px" alt="iGEM USTC 2010">
 +
<p style="float: right; margin-right: 30px">
 +
Welcome to<br>
 +
<span style="margin-left: 2em">iGEM USTC Software</span>
 +
</p>
 +
<div id="navigation">
 +
<div id="menu" style="position:static">
 +
<ul>
 +
<li id="mainHome"><a class="aMain" href="https://2010.igem.org/Team:USTC_Software/home">Home</a></li>
 +
<li id="mainModel"><a class="aModel" href="https://2010.igem.org/Team:USTC_Software/MoDeL">MoDeL</a> </li>
 +
<li id="mainProject"><a class="aProject" href="https://2010.igem.org/Team:USTC_Software/project">Project</a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:USTC_Software/project">overview</a></li>
 +
<li><a href="https://2010.igem.org/Team:USTC_Software/project">project1</a></li>
 +
</ul>
 +
</li>
 +
<li id="mainDemo"><a class="aDemo" href="https://2010.igem.org/Team:USTC_Software/downloads">Demo</a> </li>
 +
<li id="mainNotebook"><a class="aNotebook" href="https://2010.igem.org/Team:USTC_Software/notebook">Notebook</a> </li>
 +
<li id="mainHumanPractice"><a class="aHumanPractice" href="https://2010.igem.org/Team:USTC_Software/human_practice">Human Practice</a> </li>
 +
<li id="mainResources"><a class="aMainResource" href="https://2010.igem.org/Team:USTC_Software/resources">Resources</a> </li>
 +
<li id="mainTeam"><a class="aTeam" href="https://2010.igem.org/Team:USTC_Software/team">Team And Sponsors</a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:USTC_Software/team">Team</a></li>
 +
<li><a href="https://2010.igem.org/Team:USTC_Software/team>Sponsors"</a>Sponsors</li>
 +
</ul>
 +
</li>
 +
</ul>
-
#f-list a {
+
</div><!-- end drop menu -->
-
color: #333;
+
</div> <!-- end navigation -->
-
font-size: 10px;
+
</div>
-
}
+
</div>
-
 
+
<!-- For IE 6 -->
-
#f-list a:hover {
+
<script type="text/javascript">
-
color: #666;
+
<!--window.onload = function() {-->
-
}
+
<!--      var lis = document.getElementsByTagName('li');-->
-
 
+
<!--      for(i = 0; i < lis.length; i++) {-->
-
#footer ul {
+
<!--            var li = lis[i];-->
-
margin: 0;
+
<!--            if (li.id == 'mainTeam' || li.id == 'mainProject' || li.id == 'mainNotebook') {-->
-
padding: 0;
+
<!--                  li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }-->
-
}
+
<!--                  li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }-->
-
 
+
<!--            }-->
-
#footer ul li {
+
<!--      }-->
-
margin-top: 0;
+
<!--}-->
-
margin-bottom: 0;
+
-
margin-left: 10px;
+
-
margin-right: 10px;
+
-
padding: 0;
+
-
}
+
-
 
+
-
/* Wiki Hacks - END - Thanks TU-Delft, saved a lot of trouble!*/
+
-
 
+
-
html {
+
-
height: 100%;
+
-
}
+
-
#overallMask {
+
-
position: relative;
+
-
margin: 3% auto 2em auto;
+
-
width: 800px;
+
-
}
+
-
#contentWrapper {
+
-
height: 100%;
+
-
padding-bottom: 4em;
+
-
min-height: 500px;
+
-
border-top: 0px solid #000080;
+
-
-moz-box-shadow: rgba(0, 0, 0, 0.3) 8px 8px 8px;
+
-
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 8px 8px 8px;
+
-
box-shadow: rgba(0, 0, 0, 0.3) 8px 8px 8px;
+
-
background-color: white;
+
-
                                                color: black;
+
-
}
+
-
 
+
-
#headerWrapper {
+
-
font-family: Courier, Futura, Impact, sans-serif;
+
-
-moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px;
+
-
font-size: 20pt; color: white;
+
-
height: 100px;
+
-
                                                background-color: gray;
+
-
padding-top: 50px;
+
-
}
+
-
#headerWrapper img {
+
-
margin-left: 20px;
+
-
margin-top: -40px;
+
-
}
+
-
#otherContent {
+
-
padding: 0em 0 2em 2em;
+
-
width: 650px;
+
-
}
+
-
#otherContent * {
+
-
line-height: 1.3em;
+
-
}
+
-
#textWrapper {
+
-
width: 650px;
+
-
text-align: justify;
+
-
font-family:  Verdana, sans-serif;
+
-
font-size: 10pt;
+
-
color: black;
+
-
}
+
-
#textWrapper, #textWrapper * {
+
-
margin-top: 20px;
+
-
}
+
-
#textWrapper .head {
+
-
font-family: Courier, "Lucida Grande", Tahoma, Helvetica, Verdana, Arial, sans-serif;
+
-
color: black;
+
-
line-height: 1!important;
+
-
padding: 0; margin: 0; /* again oh boy do I screw up */
+
-
font-weight: bold;
+
-
font-size: 20pt;
+
-
}
+
-
#sponsorWrapper {
+
-
position: absolute;
+
-
left: 700px;
+
-
z-index: 1000;
+
-
width: 200px;
+
-
height: auto;
+
-
background-color: gray;
+
-
margin-top: -4px; /* stupid fix to make sure the top of the text does not leak */
+
-
font-family:  Arial, "Arial Narrow", Verdana, sans-serif;
+
-
font-size: 10pt;
+
-
font-weight: bold;
+
-
color: white;
+
-
}
+
-
</style>
+
-
 
+
-
<script type="text/javascript" src="http://casualconnect.net/iGEM/jquery.easing.min.js"></script>
+
-
<script type="text/javascript" src="http://casualconnect.net/iGEM/jquery.address-1.2.1.min.js"></script>
+
-
<script type="text/javascript" src="http://casualconnect.net/iGEM/jquery.lavalamp.min.js"></script>
+
-
<script type="text/javascript">
+
-
$(function() {
+
-
$(".current").removeClass("current");
+
-
$('.lavaLampBottomStyle [rel='+$.address.value().substr(1) +']').parent().addClass("current");
+
-
 
+
-
var pages = ["Home", "MoDeL", "Project", "Notebook", "Demo","Resources","Human_Practice","Team"];
+
-
$("#tabs").lavaLamp({
+
-
fx: "backout",
+
-
speed: 700,
+
-
click: function(event, obj) {
+
-
$.address.value($(obj).find('a').attr('rel'));
+
-
if($("#home").length !== 0) {
+
-
return false;
+
-
}
+
-
else {
+
-
return true;
+
-
}
+
-
}
+
-
});
+
-
 
+
-
$.address.change(function(event) {
+
-
var currAddr = $.address.value().substr(1);
+
-
var page = event.path.substring(1);
+
-
v = $('.lavaLampBottomStyle [rel='+page+']').parent();
+
-
$(".lavaLampBottomStyle").trigger("move", v);
+
-
if($.inArray(page, pages) != -1) {
+
-
var margin = $(".slide_content").width();
+
-
margin = margin * ($.inArray(page, pages));
+
-
margin = margin * -1;
+
-
if(currAddr, pages) {
+
-
$(".tabslider").stop().animate({
+
-
marginLeft: margin + "px"
+
-
}, {
+
-
duration: 300
+
-
});
+
-
}
+
-
else {
+
-
$(".tabslider").css("marginLeft: " + margin + "px");  
+
-
}
+
-
}
+
-
});
+
-
});
+
</script>
</script>
-
 
+
</body></html>
-
<div id="overallMask">
+
-
<div id="headerWrapper">
+
-
<img src="https://static.igem.org/mediawiki/2010/c/c3/USTC_Software_Logo.png" width="350px" height="150px" alt="iGEM USTC 2010">
+
-
<p style="float: right; margin-right: 30px">
+
-
Welcome to<br>
+
-
<span style="margin-left: 2em">iGEM USTC Software</span>
+
-
</p>
+
-
</div>
+
-
<div id="contentWrapper">
+
-
<div class='tabbed_content'>
+
-
<div class='tabs'>
+
-
<ul class="lavaLampBottomStyle" id="tabs">
+
-
<li>
+
-
<a href="https://2010.igem.org/Team:USTC_Software#/home" rel="home">[Home]</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2010.igem.org/Team:USTC_Software#/idea" rel="idea">[Model]</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2010.igem.org/Team:USTC_Software#/project" rel="project">[Project]</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2010.igem.org/Team:USTC_Software#/notebook" rel="notebook">[Notebook]</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2010.igem.org/Team:USTC_Software#/downloads" rel="downloads">[Demo]</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2010.igem.org/Team:USTC_Software#/resources" rel="resources">[Resources]</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2010.igem.org/Team:USTC_Software#/human_practice"  rel="human_practice">[Human Practice]</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2010.igem.org/Team:USTC_Software#/team"  rel="team">[Team]</a>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
<div id="sponsorWrapper">
+
-
</html>{{Team:USTC_Software/Sidebar}}<html>
+
-
</div>
+
-
<div id="otherContent">
+

Revision as of 16:08, 12 October 2010