Team:Tsinghua-A/css/index.css

From 2012.igem.org

(Difference between revisions)
 
(62 intermediate revisions not shown)
Line 4: Line 4:
FENG Zili & GUO Mingzhou, Tsinghua-A Team, iGEM
FENG Zili & GUO Mingzhou, Tsinghua-A Team, iGEM
2012.09.07
2012.09.07
 +
#search-controls,.fistHeading,
*/
*/
-
 
+
#contentSub,#catlinks,#footer-box,#p-logo
 +
{
 +
display:none;
 +
}
 +
.normalTextWrapper
 +
{
 +
        width:900px;
 +
        margin-left:20px;
 +
        padding:20px;
 +
}
 +
.jump
 +
{
 +
        height:0;
 +
        width:0;
 +
}
 +
ul{
 +
list-style: none !important;
 +
list-style-type: none !important;
 +
padding:0px;
 +
margin:0px;
 +
}
 +
li {
 +
list-style-type:none !important;
 +
list-style:none !important;
 +
}
body {
body {
text-align: center;
text-align: center;
Line 14: Line 39:
h2
h2
{
{
-
font-size: 3em;
+
font-size: 48px;
text-align: left;
text-align: left;
font-family: 'Raleway Dots', cursive;
font-family: 'Raleway Dots', cursive;
 +
}
 +
h4
 +
{
 +
        font-family:'Quantico', sans-serif;
}
}
p
p
Line 24: Line 53:
font-family: 'Oxygen Mono', sans-serif;
font-family: 'Oxygen Mono', sans-serif;
}
}
 +
li.topButton
li.topButton
{
{
Line 29: Line 59:
margin-left: 0;
margin-left: 0;
margin-top: 0px;
margin-top: 0px;
-
width:122px;
+
width:90px;
height: 37px;
height: 37px;
-
font-size: 1.2em;
+
font-size: 20px;
text-decoration:none;
text-decoration:none;
background-color:white;
background-color:white;
Line 38: Line 68:
display:inline;
display:inline;
}
}
-
/*li#teamButton:hover  
+
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
{
{
-
color: red;
+
background-color: rgb(255,246,237);
-
background-color:#93278F;
+
}
-
}*/
+
#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{
a{
float: left;
float: left;
-
font-size: 1em;
+
font-size: 16px;
-
text-decoration: none;
+
text-decoration: none !important;
font-family: 'Quantico', sans-serif;
font-family: 'Quantico', sans-serif;
-
color: gray;
+
color: red;
}
}
-
a.navigationButtonA
+
a#subButtonTeamA
 +
{
 +
font-size: 15px;
 +
color:rgb(243,169,143);
 +
}
 +
a#subButtonProjectA
 +
{
 +
font-size: 15px;
 +
color:rgb(255,193,121);
 +
}
 +
a#subButtonModelingA
 +
{
 +
font-size: 15px;
 +
color:rgb(137,202,154);
 +
}
 +
a#subButtonWetlabA
 +
{
 +
 
 +
font-size: 15px;
 +
color:rgb(133,212,246);
 +
}
 +
a#subButtonSafetyA
 +
{
 +
font-size: 15px;
 +
color:rgb(142,150,201);
 +
}
 +
a#subButtonHumanPracticeA
{
{
-
color: #0C7522;
+
font-size: 15px;
 +
color:rgb(171,136,188);
}
}
-
a#teamButtonA:hover  
+
a#subButtonTeamA:hover,a#teamButtonA:hover  
{
{
color: red;
color: red;
}
}
-
a#projectButtonA:hover  
+
a#subButtonProjectA:hover,a#projectButtonA:hover  
{
{
-
color: orange;
+
color: rgb(152,107,55);
}
}
-
a#modelingButtonA:hover  
+
a#subButtonModelingA:hover,a#modelingButtonA:hover
{
{
-
color: yellow;
+
color: rgb(12,117,34);
}
}
-
a#wetlabButtonA:hover  
+
a#subButtonWetlabA:hover,a#wetlabButtonA:hover
{
{
-
color: green;
+
color: rgb(0,118,167);
}
}
-
a#safetyButtonA:hover  
+
a#subButtonSafetyA:hover,a#safetyButtonA:hover
{
{
color: blue;
color: blue;
}
}
-
a#humanPracticeButtonA:hover  
+
a#subButtonHumanPracticeA:hover,a#humanPracticeButtonA:hover
{
{
color: purple;
color: purple;
}
}
-
li.topNavigationButton
+
a.navigationButtonA
{
{
-
float: left;
+
margin-top: 5px;
-
margin-left: 0px;
+
margin-right: 10px;
-
text-decoration: none;
+
float: right;
 +
/*color: #0C7522*/;
 +
}
 +
a#teamButtonA
 +
{
 +
color: rgb(243,169,143);
 +
}
 +
a#projectButtonA
 +
{
 +
color: rgb(255,193,121);
 +
}
 +
a#modelingButtonA
 +
{
 +
color: rgb(137,202,154);
 +
}
-
width:133px;
+
a#wetlabButtonA
-
height: 20px;
+
{
-
background-color: orange;
+
color: rgb(133,212,246);
-
display: inline;
+
}
 +
a#safetyButtonA
 +
{
 +
color: rgb(142,150,201);
 +
}
 +
a#humanPracticeButtonA
 +
{
 +
color: rgb(171,136,188);
 +
}
 +
 
 +
 
 +
a.textLink
 +
{
 +
float:none;
 +
        color:red;
 +
}
 +
ul.buttonMenu
 +
{
 +
text-align: left;
 +
float: left;
 +
width: 122px;
 +
background-color: transparent;
 +
position: fixed;
 +
top: 130px;
 +
list-style-type: none !important;
 +
display: none;
}
}
li.navigationButton
li.navigationButton
{
{
-
padding:0px;
+
padding-right:10px;
float:left;
float:left;
-
width:140px;
+
width:120px;
height:30px;
height:30px;
text-decoration: none;
text-decoration: none;
color: white;
color: white;
 +
        text-align:right;
background-color: #E9F4E9;
background-color: #E9F4E9;
border-bottom: 1px solid white;
border-bottom: 1px solid white;
display:block;
display:block;
 +
}
 +
#topTitle
 +
{
 +
position: fixed;
 +
        margin-left:180px;
 +
top:20px;
 +
z-index: 3;
 +
}
 +
h2#titleText{
 +
z-index: 3;
 +
font-size: 32px;
 +
border-bottom: none !important;
 +
font-family: 'Quantico', sans-serif;
 +
font-weight: 100;
 +
color: rgb(243,169,143);
}
}
#topWrapper
#topWrapper
{
{
 +
z-index: 2;
position: fixed;
position: fixed;
float: left;
float: left;
Line 110: Line 289:
.textWrapper
.textWrapper
{
{
 +
float: left;
 +
z-index:1;
position: static;
position: static;
text-align: left;
text-align: left;
-
margin:30px 0 30px 0;
+
margin:70px 0 0px 0;
padding:20px;
padding:20px;
padding-top: 0px;
padding-top: 0px;
Line 124: Line 305:
}
}
#pageWrapper {
#pageWrapper {
 +
z-index: -1;
width: 960px;
width: 960px;
text-align: center;
text-align: center;
Line 131: Line 313:
}
}
-
#topNavigationBanner
+
 
-
{
+
-
position:fixed;
+
-
width: 800px;
+
-
top:0px;
+
-
margin-top: 80px;
+
-
margin-left:170px;
+
-
padding: 0;
+
-
height: 20px;
+
-
background-color: transparent;
+
-
}
+
#banner {
#banner {
 +
z-index: 10;
position:fixed;
position:fixed;
width: 790px;
width: 790px;
margin-top:90px;
margin-top:90px;
-
margin-left: 170px;
+
margin-left: 180px;
padding: 0;
padding: 0;
height: 55px;
height: 55px;
Line 155: Line 328:
position: fixed;
position: fixed;
text-align: center;
text-align: center;
-
margin-left: 0;
+
margin-left: 35px;
-
margin-left: -20px; /*-40*/
+
top:185px;
-
top:200px;
+
width: 0px;
width: 0px;
float: left;
float: left;
Line 165: Line 337:
#mainField {
#mainField {
-
z-index: -1;
 
position:relative;
position:relative;
-
top:175px;
+
top:124px;
-
left:180px; /*200px*/
+
left:190px; /*200px*/
float: left;
float: left;
-
width: 760px;
+
text-align: left;
 +
width: 730px;
height: 1500px;
height: 1500px;
background-color: transparent;
background-color: transparent;
Line 179: Line 351:
height: 40px;
height: 40px;
background-color: white;
background-color: white;
-
}
 
-
 
-
a{text-decoration:none;}
 
-
 
-
#textWrapper{margin:0 auto;overflow:visible;width:760px;}
 
-
.entry-content{letter-spacing:0.05em;line-height:1.5em;text-align:justify;word-spacing:0.05em;}
 
-
 
-
 
-
#textWrapper div.post,
 
-
#textWrapper div.page{margin-bottom:50px;padding:25px;}body.home
 
-
#textWrapper div.post,body.search #textWrapper div.post,body.archive
 
-
#textWrapper div.post
 
-
{ background-color:#E9F3FA;
 
-
color:#336699;border:1px #4AA1D9 solid;
 
-
-webkit-box-shadow:0px 0px 7px #888888;
 
-
-moz-box-shadow:0px 0px 7px #888888;
 
-
box-shadow:0px 0px 7px #888888;
 
-
}
 
-
body.home #textWrapper div.post:hover,body.search #textWrapper div.post:hover,body.archive #textWrapper div.post:hover
 
-
{ cursor:pointer;border:1px #966C44 solid;
 
-
-webkit-box-shadow:0px 0px 5px #FFFFFF;
 
-
-moz-box-shadow:0px 0px 5px #FFFFFF;
 
-
box-shadow:0px 0px 5px #FFFFFF;}
 
-
#textWrapper h2.entry-title a,
 
-
#textWrapper h2.entry-title a:hover{color:#000000;text-shadow:1px 1px 3px #333333;}
 
-
body.single #textWrapper div.post,body.page #textWrapper div.page
 
-
{
 
-
background-color:#9ECAE1;
 
-
color:#000000;
 
-
-webkit-box-shadow:0px 0px 8px #333333;
 
-
-moz-box-shadow:0px 0px 8px #333333;
 
-
box-shadow:0px 0px 8px #333333;
 
-
}
 
-
#textWrapper h1.entry-title
 
-
{
 
-
color:#FFFFFF;
 
-
text-shadow:1px 1px 3px #333333;
 
}
}

Latest revision as of 19:54, 26 October 2012

/* Basic CSS format

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

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

{ display:none; } .normalTextWrapper {

       width:900px;
       margin-left:20px;
       padding:20px;

} .jump {

       height:0;
       width:0;

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

h2 { font-size: 48px; text-align: left; font-family: 'Raleway Dots', cursive; } h4 {

       font-family:'Quantico', sans-serif;

} 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: 20px; 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: 16px; text-decoration: none !important; font-family: 'Quantico', sans-serif; color: red; } a#subButtonTeamA { font-size: 15px; color:rgb(243,169,143); } a#subButtonProjectA { font-size: 15px; color:rgb(255,193,121); } a#subButtonModelingA { font-size: 15px; color:rgb(137,202,154); } a#subButtonWetlabA {

font-size: 15px; color:rgb(133,212,246); } a#subButtonSafetyA { font-size: 15px; color:rgb(142,150,201); } a#subButtonHumanPracticeA { font-size: 15px; 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 { margin-top: 5px; margin-right: 10px; float: right; /*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;

       color:red;

} ul.buttonMenu { text-align: left; float: left; width: 122px; background-color: transparent; position: fixed; top: 130px; list-style-type: none !important; display: none; } li.navigationButton { padding-right:10px; float:left; width:120px; height:30px; text-decoration: none; color: white;

       text-align:right;

background-color: #E9F4E9; border-bottom: 1px solid white; display:block;

}

  1. topTitle

{ position: fixed;

       margin-left:180px;

top:20px; z-index: 3; } h2#titleText{ z-index: 3; font-size: 32px; border-bottom: none !important; font-family: 'Quantico', sans-serif; font-weight: 100; color: rgb(243,169,143); }

  1. topWrapper

{ z-index: 2; position: fixed; float: left; top:0; } .textWrapper { float: left; z-index:1; position: static; text-align: left; margin:70px 0 0px 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: 35px; top:185px; width: 0px; float: left; height: 800px; background-color: transparent; }

  1. mainField {

position:relative; top:124px; left:190px; /*200px*/ float: left; text-align: left; width: 730px; height: 1500px; background-color: transparent; }

  1. footer {

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