Team:Tsinghua-A/css/index.css
From 2012.igem.org
(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: | + | 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: | + | width:90px; |
height: 37px; | height: 37px; | ||
- | font-size: | + | font-size: 20px; |
text-decoration:none; | text-decoration:none; | ||
background-color:white; | background-color:white; | ||
Line 38: | Line 68: | ||
display:inline; | 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 | ||
{ | { | ||
- | color: | + | background-color: rgb(255,246,237); |
- | background-color:# | + | } |
- | } | + | #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: | + | font-size: 16px; |
- | text-decoration: none; | + | text-decoration: none !important; |
font-family: 'Quantico', sans-serif; | font-family: 'Quantico', sans-serif; | ||
- | color: | + | color: red; |
} | } | ||
- | a | + | 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: | + | 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: | + | color: rgb(152,107,55); |
} | } | ||
- | a#modelingButtonA:hover | + | a#subButtonModelingA:hover,a#modelingButtonA:hover |
{ | { | ||
- | color: | + | color: rgb(12,117,34); |
} | } | ||
- | a#wetlabButtonA:hover | + | a#subButtonWetlabA:hover,a#wetlabButtonA:hover |
{ | { | ||
- | color: | + | 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; | ||
} | } | ||
- | + | a.navigationButtonA | |
{ | { | ||
- | + | margin-top: 5px; | |
- | margin- | + | 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 | |
- | + | { | |
- | background-color: | + | color: rgb(133,212,246); |
- | display: | + | } |
+ | 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: | + | padding-right:10px; |
float:left; | float:left; | ||
- | width: | + | 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: | + | 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: | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
#banner { | #banner { | ||
+ | z-index: 10; | ||
position:fixed; | position:fixed; | ||
width: 790px; | width: 790px; | ||
margin-top:90px; | margin-top:90px; | ||
- | margin-left: | + | 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: | + | margin-left: 35px; |
- | + | top:185px; | |
- | top: | + | |
width: 0px; | width: 0px; | ||
float: left; | float: left; | ||
Line 165: | Line 337: | ||
#mainField { | #mainField { | ||
- | |||
position:relative; | position:relative; | ||
- | top: | + | top:124px; |
- | left: | + | left:190px; /*200px*/ |
float: left; | float: left; | ||
- | width: | + | 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; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } |
Latest revision as of 19:54, 26 October 2012
/* Basic CSS format
FENG Zili & GUO Mingzhou, Tsinghua-A Team, iGEM 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 { 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); }
- 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: 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;
}
- 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
{ 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;
}
- pageWrapper {
z-index: -1; width: 960px; text-align: center; margin-left: auto; margin-right: auto; background-color: transparent; }
- banner {
z-index: 10; position:fixed; width: 790px; margin-top:90px; margin-left: 180px; padding: 0; height: 55px; background-color: transparent; }
- navigationBar {
position: fixed; text-align: center; margin-left: 35px; top:185px; width: 0px; float: left; height: 800px; background-color: transparent; }
- mainField {
position:relative; top:124px; left:190px; /*200px*/ float: left; text-align: left; width: 730px; height: 1500px; background-color: transparent; }
- footer {
clear: both; height: 40px; background-color: white; }