"
Team:SYSU-China/css/main.css
From 2014.igem.org
| Line 7: | Line 7: | ||
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
| - | border: 0; } | + | border: 0; |
| + | } | ||
body { | body { | ||
| Line 29: | Line 30: | ||
#section0{ | #section0{ | ||
background-image:url(../images/sysuchina_bg1.png); | background-image:url(../images/sysuchina_bg1.png); | ||
| + | |||
} | } | ||
| Line 267: | Line 269: | ||
height: 20%; | height: 20%; | ||
background-color: rgb(217, 102, 73); | background-color: rgb(217, 102, 73); | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
} | } | ||
| Line 360: | Line 352: | ||
margin: 0 0 0 -30px; | margin: 0 0 0 -30px; | ||
z-index: 1001; | z-index: 1001; | ||
| - | |||
} | } | ||
| Line 368: | Line 359: | ||
width: 60px; | width: 60px; | ||
left: 50%; | left: 50%; | ||
| - | bottom: - | + | bottom: -70px; |
margin: 0 0 0 -30px; | margin: 0 0 0 -30px; | ||
| - | z-index: - | + | z-index: -10; |
} | } | ||
| Line 387: | Line 378: | ||
bottom: 220px; | bottom: 220px; | ||
margin: 0 0 0 -120px; | margin: 0 0 0 -120px; | ||
| + | z-index: 1007; | ||
} | } | ||
| Line 443: | Line 435: | ||
} | } | ||
| + | |||
| + | #hide1 { | ||
| + | position: absolute; | ||
| + | left: 50%; | ||
| + | bottom: 60px; | ||
| + | width: auto; | ||
| + | height: auto; | ||
| + | margin: 0 0 0 -45px; | ||
| + | z-index: 1005; | ||
| + | } | ||
| + | |||
| + | #hide2 { | ||
| + | position: absolute; | ||
| + | left: 50%; | ||
| + | bottom: 45px; | ||
| + | width: auto; | ||
| + | height: auto; | ||
| + | margin: 0 0 0 -45px; | ||
| + | z-index: 1005; | ||
| + | } | ||
| + | |||
| + | #hide3 { | ||
| + | position: absolute; | ||
| + | left: 50%; | ||
| + | top:0; | ||
| + | width: auto; | ||
| + | height: auto; | ||
| + | margin: 0 0 0 -45px; | ||
| + | z-index: 1005; | ||
| + | } | ||
| + | |||
| + | #hide4 { | ||
| + | position: absolute; | ||
| + | left: 50%; | ||
| + | top:0; | ||
| + | width: auto; | ||
| + | height: auto; | ||
| + | margin: 0 0 0 -45px; | ||
| + | z-index: 1005; | ||
| + | } | ||
| + | |||
| + | #arr1:hover { | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | #arr2:hover { | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
/* | /* | ||
Revision as of 15:48, 10 October 2014
@charset "utf-8"; /* CSS Document */ html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, label, form, hr, menu, nav {
vertical-align: baseline; padding: 0; margin: 0; border: 0;
}
body {
min-height: 100%; }
/*@section one pictures ---------------------------------------------*/
- IGEMlogo img{
height:3em; width:3.4em; position:fixed; left:3em; top:1.5em; }
- section0{
background-image:url(../images/sysuchina_bg1.png);
}
- section1{
background-image:url(../images/bg2/sysuchina_bg2.png); background-repeat:repeat-x; }
- section1 h1{
position: absolute; top: 75%; left: 8%; z-index: 100; }
- section1 p{
position: absolute; top: 85%; left: 8%; z-index: 100; }
- section2{
background-image:url(../images/bg3/sysuchina_bg3.png); }
.worker{ position:absolute; bottom: 373px; left: 50%; margin: 0 0 0 -620px; }
.worker img { }
.pipeline { z-index: 100; left: 50%; position: absolute; margin: 0 0 0 -650px; bottom: 0px; }
.pipeline img { float: left; }
.pipeline .wheel { z-index: 1000; width: 50px; position: absolute; bottom: 52px; }
.pipeline .line { position: absolute; width: 1300px; height: 35px; margin-left: 2.5%; bottom: 58px; z-index: 100; }
.bg2 {
padding-left: 15%;
height: 70%;
}
.bg2 .button { position: absolute; left: 50%; bottom: 482px; margin: 0 0 0 -37px; width: 126px; }
.button:hover { position: absolute; left: 50%; bottom: 482.5px; width: 130px; margin: 0 0 0 -39px; z-index: 100; cursor: pointer; }
.bg2 img {
}
.boardFont { position: absolute; z-index: 1001; top: 50px; left: 510px; }
/*@section one structure ---------------------------------------------*/
.section h1{ font-family:Arial, Helvetica, sans-serif; font-size:4em; color:#FFF; }
.section p{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#FFF; }
- section0 h1{
position:absolute; top: 8%; right: 10%; }
- section0 p{
position:absolute; top: 22%; right: 10%; }
- section2 .intro {
position:absolute; top:10%; left:17%; }
- section2 .ch-grid{
position: absolute; bottom: 44%;
}
- section2 .ch-grid li {
position: absolute; left: 50%; }
- section2 .ch-grid li:nth-child(1) {
margin: 0 0 0 -515px; }
- section2 .ch-grid li:nth-child(2) {
margin: 0 0 0 -300px; }
- section2 .ch-grid li:nth-child(3) {
margin: 0 0 0 -85px; }
- section2 .ch-grid li:nth-child(4) {
margin: 0 0 0 130px; }
- section2 .ch-grid li:nth-child(5) {
margin: 0 0 0 345px; }
- section2 h1{
color:#000; text-align:center; }
- sysu{
position: absolute; bottom: 130px; left: 50%; margin: 0 0 0 -280px; }
/* Fixed footer. * --------------------------------------- */
#footer{
display:block; width: 100%; background: #333; z-index:9; color: #f2f2f2; bottom:0px; position:absolute; font-family:Arial, Helvetica, sans-serif; text-align:center; }
.foo { height: 100px; line-height: 25px; padding: 20px 0 0 0; }
.fooback { height: 55px; line-height: 17px; padding: 10px 0 0 0; }
- footer h3{
text-transform:uppercase; font-size:14px; }
- footer p{
font-size:12px; }
- board {
position: absolute; width: 220px; margin-top: 70px; left: 990px; }
.bottom { position: absolute; bottom: 0; margin: 0; width: 100%; z-index: 5; }
- bottom1 {
height: 75px; background-color: white; }
- bottom2 {
padding-top: 30px; height: 20%; background-color: rgb(217, 102, 73); }
- lefttear {
position: absolute; width: 1px; height: auto; left: 94px; top: 55px; }
- righttear {
position: absolute; width: 1px; height: auto; left: 223px; top: 55px; }
.fire { position: absolute; left: 705px; width: 45px; height: 68px; top: -15px; z-index: 300; }
- wheel1 {
margin-left: 345px; }
- wheel2 {
margin-left: 660px; }
- wheel3 {
margin-left: 968px; }
- worker1 {
position: absolute; left: 50px; }
- worker2 {
position: absolute; left: 385px; }
- worker3 {
position: absolute; left: 700px; }
- chaplin {
height: 330px; position: absolute; left: 50%; bottom: 210px; margin: 0 0 0 -380px; }
.stroll { position: absolute; width: 90px; left: 50%; bottom: 0; margin: 0 0 0 -45px; }
.stroll:hover { cursor: pointer; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }
.down1 { /*visibility: hidden;*/ position: absolute; width: 60px; left: 50%; bottom: 50px; margin: 0 0 0 -30px; z-index: 1001; }
.down2 { /*visibility: hidden;*/ position: absolute; width: 60px; left: 50%; bottom: -70px; margin: 0 0 0 -30px; z-index: -10;
}
.think { position: absolute; width: 200px; left: 260px; top: -115px; }
.machine { position: absolute; height: 380px; left: 50%; bottom: 220px; margin: 0 0 0 -120px; z-index: 1007; }
.batman1 { position: absolute; left: 50%; margin: 0 0 0 -10px; width: 80px; bottom: 350px; }
.batman2 { position: absolute; left: 50%; margin: 0 0 0 200px; width: 110px; bottom: 260px; }
.superman1 {
position: absolute;
left: 50%;
margin: 0 0 0 0px;
width: 60px;
bottom: 350px;
}
.superman2 {
position: absolute;
left: 50%;
margin: 0 0 0 200px;
width: 90px;
bottom: 440px;
}
.in1 { position: absolute; left: 50%; margin: 0 0 0 -200px; width: 50px; bottom: 460px; }
.in2 { position: absolute; left: 50%; margin: 0 0 0 -5px; width: 50px; bottom: 348px; }
.down { position: absolute;
}
- hide1 {
position: absolute; left: 50%; bottom: 60px; width: auto; height: auto; margin: 0 0 0 -45px; z-index: 1005; }
- hide2 {
position: absolute; left: 50%; bottom: 45px; width: auto; height: auto; margin: 0 0 0 -45px; z-index: 1005; }
- hide3 {
position: absolute; left: 50%; top:0; width: auto; height: auto; margin: 0 0 0 -45px; z-index: 1005; }
- hide4 {
position: absolute; left: 50%; top:0; width: auto; height: auto; margin: 0 0 0 -45px; z-index: 1005; }
- arr1:hover {
cursor: pointer; }
- arr2:hover {
cursor: pointer; }
/*
in 1 position: absolute; left = 50%; margin: 0 0 0 -200px; width: 50px; bottom: 460px;
in 2 position: absolute; left; 50%; margin: 0 0 0 -5px; width: 50px; bottom: 348px;
super 1 position: absolute; left: 50%; margin: 0 0 0 0px; width: 60px; bottom: 350px;
super 2 position: absolute; left: 50%; margin: 0 0 0 200px; width: 90px; bottom: 440px;
bat 1 position: absolute; left: 50%; margin: 0 0 0 -10px; width: 80px; bottom: 350px;
bat 2 position: absolute; left: 50%; margin: 0 0 0 200px; width: 110px; bottom: 260px;
- /
