Team:Tsinghua-A/css/index.css

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!--
+
/*
-
Basic page structure
+
Basic CSS format
FENG Zili & GUO Mingzhou, Tsinghua-A Team, iGEM
FENG Zili & GUO Mingzhou, Tsinghua-A Team, iGEM
-
2012.09.08
+
2012.09.07
-
-->
+
*/
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
#contentSub,#search-controls,.fistHeading,#footer-box,#catlinks,#p-logo
-
<head>
+
{
-
<link rel="stylesheet" type="text/css" href="css/index.css"/>
+
display:none;
-
<link href='http://fonts.googleapis.com/css?family=Oxygen+Mono|Raleway+Dots|Quantico:400' rel='stylesheet' type='text/css'>
+
}
-
<link rel="stylesheet" type="text/css" href="css/style-original.css"/>
+
ul{
-
<script type="text/javascript" src="javascript/jquery.js"></script>
+
-
<script type="text/javascript" src="javascript/index.txt"></script>
+
-
</head>
+
-
<body class="home blog windows chrome ch21">
+
-
<div id="pageWrapper">
+
padding:0px;
-
<p id="2" style=" position: absolute;margin-top: 510px"/>
+
margin:0px;
-
<div id="topWrapper">
+
}
-
<img src="css/pictures/topBackground.png" />
+
li {
-
</div>
+
list-style-type:none !important;
-
<ul id="banner">
+
}
-
<li class="topButton" id="teamButton" >
+
body {
-
<a  href="http://www.baidu.com" id="teamButtonA">Team</a>
+
text-align: center;
-
<ul class="buttonMenu" id="teamButtonMenu">
+
background-color: #FFFFFF;
-
<li class="subButtonTeam"><a href="#" id="subButtonTeamA">Members</a></li>
+
}
-
<li class="subButtonTeam"><a href="#" id="subButtonTeamA">Lab</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="topButton" id="projectButton" onmouseover="OnMouseOverProject()" onmouseout="OnMouseOutProject()">
+
-
<a href="#" id="projectButtonA">Project</a>
+
-
<ul class="buttonMenu" id="projectButtonMenu">
+
-
<li class="subButtonProject"><a href="#" id="subButtonProjectA">Overview</a></li>
+
-
<li class="subButtonProject"><a href="#" id="subButtonProjectA">Design</a></li>
+
-
<li class="subButtonProject"><a href="#" id="subButtonProjectA">Timetable</a></li>
+
-
<li class="subButtonProject"><a href="#" id="subButtonProjectA">Details</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="topButton" id="modelingButton" onmouseover="OnMouseOverModeling()" onmouseout="OnMouseOutModeling()">
+
-
<a href="#" id="modelingButtonA">Modeling</a>
+
-
<ul class="buttonMenu" id="modelingButtonMenu">
+
-
<li class="subButtonModeling"><a href="#" id="subButtonModelingA">Introduction</a></li>
+
-
<li class="subButtonModeling"><a href="#" id="subButtonModelingA">Method</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="topButton" id="wetlabButton" onmouseover="OnMouseOverWetlab()" onmouseout="OnMouseOutWetlab()">
+
-
<a  href="#" id="wetlabButtonA">Wetlab</a>
+
-
<ul class="buttonMenu" id="wetlabButtonMenu">
+
-
<li class="subButtonWetlab"><a href="#" id="subButtonWetlabA">Overview</a></li>
+
-
<li class="subButtonWetlab"><a href="#" id="subButtonWetlabA">Wetlab</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="topButton" id="safetyButton" onmouseover="OnMouseOverSafety()" onmouseout="OnMouseOutSafety()">
+
-
<a href="#" id="safetyButtonA">Safety</a>
+
-
<ul class="buttonMenu" id="safetyButtonMenu">
+
-
<li class="subButtonSafety"><a href="#" id="subButtonSafetyA">Question1</a></li>
+
-
<li class="subButtonSafety"><a href="#" id="subButtonSafetyA">Question2</a></li>
+
-
<li class="subButtonSafety"><a href="#" id="subButtonSafetyA">Question3</a></li>
+
-
<li class="subButtonSafety"><a href="#" id="subButtonSafetyA">Question4</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="topButton" id="humanPracticeButton" onmouseover="OnMouseOverHP()" onmouseout="OnMouseOutHP()">
+
-
<a href="#" id="humanPracticeButtonA">HumanPractice</a>
+
-
<ul class="buttonMenu" id="humanPracticeButtonMenu">
+
-
<li class="subButtonHumanPractice"><a href="#" id="subButtonHumanPracticeA">Overview</a></li>
+
-
</ul>
+
-
</li>
+
-
</ul>
+
-
<div id="footer"></div>
+
h2
-
<div id="mainField">
+
{
-
<div id="textWrapper">
+
font-size: 3em;
-
<div id="post" class="post" >
+
text-align: left;
 +
font-family: 'Raleway Dots', cursive;
 +
}
 +
p
 +
{
 +
text-align: left;
 +
float:justify;
 +
font-family: 'Oxygen Mono', sans-serif;
 +
}
 +
li.topButton
 +
{
 +
float:left;
 +
margin-left: 0;
 +
margin-top: 0px;
 +
width:90px;
 +
height: 37px;
 +
font-size: 1.2em;
 +
text-decoration:none;
 +
background-color:white;
 +
padding:0px;
 +
border-right:1px solid white;
 +
display:inline;
 +
}
 +
li.subButtonTeam{
 +
width: 90px;
 +
height: 30px;
 +
background-color: rgb(255,246,237);
 +
}
 +
li.subButtonProject{
 +
width: 120px;
 +
height: 30px;
 +
background-color: rgb(255,255,236);
 +
}
 +
li.subButtonModeling{
 +
width: 140px;
 +
height: 30px;
 +
background-color: rgb(233,244,233);
 +
}
 +
li.subButtonWetlab{
 +
width: 110px;
 +
height: 30px;
 +
background-color: rgb(227,248,255);
 +
}
 +
li.subButtonSafety{
 +
width: 110px;
 +
height: 30px;
 +
background-color: rgb(236,235,255);
 +
}
 +
li.subButtonHumanPractice{
 +
width: 140px;
 +
height: 30px;
 +
background-color: rgb(246,229,248);
 +
}
 +
#teamButton:hover
 +
{
 +
background-color: rgb(255,246,237);
 +
}
 +
#projectButton:hover
 +
{
 +
background-color: rgb(255,255,236);
 +
}
 +
#modelingButton:hover
 +
{
 +
background-color: rgb(233,244,233);
 +
}
 +
#wetlabButton:hover
 +
{
 +
background-color: rgb(227,248,255);
 +
}
 +
#safetyButton:hover
 +
{
 +
background-color: rgb(236,235,255);
 +
}
 +
#humanPracticeButton:hover
 +
{
 +
background-color: rgb(246,229,248);
 +
}
 +
#teamButton{
 +
width:90px;
 +
}
 +
#projectButton{
 +
width: 120px;
 +
}#modelingButton{
 +
width: 140px;
 +
}
 +
#wetlabButton{
 +
width: 110px;
 +
}
 +
#safetyButton{
 +
width: 110px;
 +
}
 +
#humanPracticeButton{
 +
width: 140px;
 +
}
 +
a{
 +
float: left;
 +
font-size: 1em;
 +
text-decoration: none !important;
 +
font-family: 'Quantico', sans-serif;
 +
color: gray;
 +
}
 +
a#subButtonTeamA
 +
{
 +
font-size: 0.8em;
 +
color:rgb(243,169,143);
 +
}
 +
a#subButtonProjectA
 +
{
 +
font-size: 0.8em;
 +
color:rgb(255,193,121);
 +
}
 +
a#subButtonModelingA
 +
{
 +
font-size: 0.8em;
 +
color:rgb(137,202,154);
 +
}
 +
a#subButtonWetlabA
 +
{
 +
font-size: 0.8em;
 +
color:rgb(133,212,246);
 +
}
 +
a#subButtonSafetyA
 +
{
 +
font-size: 0.8em;
 +
color:rgb(142,150,201);
 +
}
 +
a#subButtonHumanPracticeA
 +
{
 +
font-size: 0.8em;
 +
color:rgb(171,136,188);
 +
}
 +
a#subButtonTeamA:hover,a#teamButtonA:hover
 +
{
 +
color: red;
 +
}
 +
a#subButtonProjectA:hover,a#projectButtonA:hover
 +
{
 +
color: rgb(152,107,55);
 +
}
 +
a#subButtonModelingA:hover,a#modelingButtonA:hover
 +
{
 +
color: rgb(12,117,34);
 +
}
 +
a#subButtonWetlabA:hover,a#wetlabButtonA:hover
 +
{
 +
color: rgb(0,118,167);
 +
}
 +
a#subButtonSafetyA:hover,a#safetyButtonA:hover
 +
{
 +
color: blue;
 +
}
 +
a#subButtonHumanPracticeA:hover,a#humanPracticeButtonA:hover
 +
{
 +
color: purple;
 +
}
 +
a.navigationButtonA
 +
{
 +
color: #0C7522;
 +
}
 +
a#teamButtonA
 +
{
 +
color: rgb(243,169,143);
 +
}
 +
a#projectButtonA
 +
{
 +
color: rgb(255,193,121);
 +
}
 +
a#modelingButtonA
 +
{
 +
color: rgb(137,202,154);
 +
}
-
+
a#wetlabButtonA
-
    <h2 id="Idea">Idea</h2>
+
{
-
<div class="entry-content">
+
color: rgb(133,212,246);
-
<p>'Life' is too big a word, especially when we are talking about synthetic biology, but we still find it interesting, in our life, when everyone meets alternatives and makes his decisions, that colorful behaviors and lifestyles just differentiate from small left-or-right choices, and that widely-differed ones make up a well-operated society. This year our study will be concentrated on controllable choice-making E. Coli, with left-or-right directions of gene expression to be determined, thus to realize the life-like differentiation and dedifferentiation, and synthesized function of the cell 'teamwork'. That's the idea why we named our project after 'E. CoLIFE'.<a class="textLink" href="www.baidu.com">readmore</a></p>
+
}
-
+
a#safetyButtonA
-
</div><!-- .entry-content -->
+
{
-
</div>
+
color: rgb(142,150,201);
-
</div>
+
}
 +
a#humanPracticeButtonA
 +
{
 +
color: rgb(171,136,188);
 +
}
 +
 
 +
 
 +
a.textLink
 +
{
 +
float:none;
 +
}
 +
ul.buttonMenu
 +
{
 +
text-align: left;
 +
float: left;
 +
width: 122px;
 +
background-color: transparent;
 +
position: fixed;
 +
top: 130px;
 +
display: none;
 +
}
 +
li.navigationButton
 +
{
 +
padding:0px;
 +
float:left;
 +
width:140px;
 +
height:30px;
 +
text-decoration: none;
 +
color: white;
 +
background-color: #E9F4E9;
 +
border-bottom: 1px solid white;
 +
display:block;
 +
 
 +
}
 +
#topWrapper
 +
{
 +
position: fixed;
 +
float: left;
 +
top:0;
 +
}
 +
.textWrapper
 +
{
 +
z-index:1;
 +
position: static;
 +
text-align: left;
 +
margin:30px 0 30px 0;
 +
padding:20px;
 +
padding-top: 0px;
 +
padding-right:0; 
 +
/*top:100px;*/
 +
border:solid ;
 +
border-image: url(pictures/bgp.png)10 10 10 10;
 +
-webkit-border-image:url(pictures/bgp.png)10 10 10 10;
 +
-moz-border-image:url(pictures/bgp.png)10 10 10 10;
-
<div id="textWrapper" >
+
}
-
<div id="post" class="post" >
+
#pageWrapper {
 +
z-index: -1;
 +
width: 960px;
 +
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: transparent;
 +
}
 +
 
-
<p class="entry-title"><a href="http://wufei.me/2012/live-it-my-way/" rel="bookmark"></a></p>
+
#banner {
-
    <h2>Overview</h2>
+
z-index: 10;
-
<div class="entry-content">
+
position:fixed;
-
<p>'Life' is too big a word, especially when we are talking about synthetic biology, but we still find it interesting, in our life, when everyone meets alternatives and makes his decisions, that colorful behaviors and lifestyles just differentiate from small left-or-right choices, and that widely-differed ones make up a well-operated society. This year our study will be concentrated on controllable choice-making E. Coli, with left-or-right directions of gene expression to be determined, thus to realize the life-like differentiation and dedifferentiation, and synthesized function of the cell 'teamwork'. That's the idea why we named our project after 'E. CoLIFE'.</p>
+
width: 790px;
-
+
margin-top:90px;
-
</div><!-- .entry-content -->
+
margin-left: 180px;
-
</div>
+
padding: 0;
-
</div>
+
height: 55px;
-
</div>
+
background-color: transparent;
 +
}
 +
#navigationBar {
 +
position: fixed;
 +
text-align: center;
 +
margin-left: 15px;
 +
top:200px;
 +
width: 0px;
 +
float: left;
 +
height: 800px;
 +
background-color: transparent;
 +
}
-
<ul id="navigationBar">
+
#mainField {
-
<li class="navigationButton" id="navigationBarDetail0"><a class="navigationButtonA" href="#">Idea</a></li>
+
position:relative;
-
<li class="navigationButton" id="navigationBarDetail1"><a class="navigationButtonA" href="#2">Overview</a></li>
+
top:175px;
-
</ul>
+
left:180px; /*200px*/
-
<!--ul id="topNavigationBanner">
+
float: left;
-
<li class="topNavigationButton" id="1"><a href="#">1</a></li>
+
width: 760px;
-
</ul-->
+
height: 1500px;
 +
background-color: transparent;
 +
}
-
</div>
+
#footer {
-
</body>
+
clear: both;
-
</html>
+
height: 40px;
 +
background-color: white;
 +
}

Revision as of 21:41, 21 September 2012

/* Basic CSS format

FENG Zili & GUO Mingzhou, Tsinghua-A Team, iGEM 2012.09.07

  • /
  1. contentSub,#search-controls,.fistHeading,#footer-box,#catlinks,#p-logo

{ display:none; } ul{

padding:0px; margin:0px; } li { list-style-type:none !important; } body { text-align: center; background-color: #FFFFFF; }

h2 { font-size: 3em; text-align: left; font-family: 'Raleway Dots', cursive; } p { text-align: left; float:justify; font-family: 'Oxygen Mono', sans-serif; } li.topButton { float:left; margin-left: 0; margin-top: 0px; width:90px; height: 37px; font-size: 1.2em; text-decoration:none; background-color:white; padding:0px; border-right:1px solid white; display:inline; } li.subButtonTeam{ width: 90px; height: 30px; background-color: rgb(255,246,237); } li.subButtonProject{ width: 120px; height: 30px; background-color: rgb(255,255,236); } li.subButtonModeling{ width: 140px; height: 30px; background-color: rgb(233,244,233); } li.subButtonWetlab{ width: 110px; height: 30px; background-color: rgb(227,248,255); } li.subButtonSafety{ width: 110px; height: 30px; background-color: rgb(236,235,255); } li.subButtonHumanPractice{ width: 140px; height: 30px; background-color: rgb(246,229,248); }

  1. teamButton:hover

{ background-color: rgb(255,246,237); }

  1. projectButton:hover

{ background-color: rgb(255,255,236); }

  1. modelingButton:hover

{ background-color: rgb(233,244,233); }

  1. wetlabButton:hover

{ background-color: rgb(227,248,255); }

  1. safetyButton:hover

{ background-color: rgb(236,235,255); }

  1. humanPracticeButton:hover

{ background-color: rgb(246,229,248); }

  1. teamButton{

width:90px; }

  1. projectButton{

width: 120px; }#modelingButton{ width: 140px; }

  1. wetlabButton{

width: 110px; }

  1. safetyButton{

width: 110px; }

  1. humanPracticeButton{

width: 140px; } a{ float: left; font-size: 1em; text-decoration: none !important; font-family: 'Quantico', sans-serif; color: gray; } a#subButtonTeamA { font-size: 0.8em; color:rgb(243,169,143); } a#subButtonProjectA { font-size: 0.8em; color:rgb(255,193,121); } a#subButtonModelingA { font-size: 0.8em; color:rgb(137,202,154); } a#subButtonWetlabA { font-size: 0.8em; color:rgb(133,212,246); } a#subButtonSafetyA { font-size: 0.8em; color:rgb(142,150,201); } a#subButtonHumanPracticeA { font-size: 0.8em; color:rgb(171,136,188); } a#subButtonTeamA:hover,a#teamButtonA:hover { color: red; } a#subButtonProjectA:hover,a#projectButtonA:hover { color: rgb(152,107,55); } a#subButtonModelingA:hover,a#modelingButtonA:hover { color: rgb(12,117,34); } a#subButtonWetlabA:hover,a#wetlabButtonA:hover { color: rgb(0,118,167); } a#subButtonSafetyA:hover,a#safetyButtonA:hover { color: blue; } a#subButtonHumanPracticeA:hover,a#humanPracticeButtonA:hover { color: purple; } a.navigationButtonA { color: #0C7522; } a#teamButtonA { color: rgb(243,169,143); } a#projectButtonA { color: rgb(255,193,121); } a#modelingButtonA { color: rgb(137,202,154); }

a#wetlabButtonA { color: rgb(133,212,246); } a#safetyButtonA { color: rgb(142,150,201); } a#humanPracticeButtonA { color: rgb(171,136,188); }


a.textLink { float:none; } ul.buttonMenu { text-align: left; float: left; width: 122px; background-color: transparent; position: fixed; top: 130px; display: none; } li.navigationButton { padding:0px; float:left; width:140px; height:30px; text-decoration: none; color: white; background-color: #E9F4E9; border-bottom: 1px solid white; display:block;

}

  1. topWrapper

{ position: fixed; float: left; top:0; } .textWrapper { z-index:1; position: static; text-align: left; margin:30px 0 30px 0; padding:20px; padding-top: 0px; padding-right:0; /*top:100px;*/ border:solid ; border-image: url(pictures/bgp.png)10 10 10 10; -webkit-border-image:url(pictures/bgp.png)10 10 10 10; -moz-border-image:url(pictures/bgp.png)10 10 10 10;

}

  1. pageWrapper {

z-index: -1; width: 960px; text-align: center; margin-left: auto; margin-right: auto; background-color: transparent; }


  1. banner {

z-index: 10; position:fixed; width: 790px; margin-top:90px; margin-left: 180px; padding: 0; height: 55px; background-color: transparent; }

  1. navigationBar {

position: fixed; text-align: center; margin-left: 15px; top:200px; width: 0px; float: left; height: 800px; background-color: transparent; }

  1. mainField {

position:relative; top:175px; left:180px; /*200px*/ float: left; width: 760px; height: 1500px; background-color: transparent; }

  1. footer {

clear: both; height: 40px; background-color: white; }

Retrieved from "http://2012.igem.org/Team:Tsinghua-A/css/index.css"