Team:SYSU-China/css/main.css

From 2014.igem.org

@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
---------------------------------------------*/


  1. IGEMlogo img{

height:3em; width:3.4em; position:fixed; left:3em; top:1.5em; }

  1. section0{

background-image:url(Sysuchina_bg1.png);

}

  1. section1{

background-image:url(Sysuchina_bg2.png); background-repeat:repeat-x; }

  1. section1 h1{

position: absolute;

bottom: 200px; left: 50%; margin: -700px; z-index: 10000; }


  1. section1 p{

position: absolute; top: 85%; left: 8%; z-index: 100; }



  1. section2{

background-image:url(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; z-index: 1010; }

.button:hover { position: absolute; left: 50%; bottom: 482.5px; width: 130px; margin: 0 0 0 -39px; z-index: 1010; 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; }

  1. section0 h1{

position:absolute; top: 8%; right: 10%; }

  1. section0 p{

position:absolute; top: 22%; right: 10%; }

  1. section2 .intro {

position:absolute; top:10%; left:17%; }

  1. section2 .ch-grid{ 
   position: absolute;
   bottom: 44%;

}

  1. section2 .ch-grid li {

position: absolute; left: 50%; }

  1. section2 .ch-grid li:nth-child(1) {

margin: 0 0 0 -515px; }

  1. section2 .ch-grid li:nth-child(2) {

margin: 0 0 0 -300px; }

  1. section2 .ch-grid li:nth-child(3) {

margin: 0 0 0 -85px; }

  1. section2 .ch-grid li:nth-child(4) {

margin: 0 0 0 130px; }

  1. section2 .ch-grid li:nth-child(5) {

margin: 0 0 0 345px; }

  1. section2 h1{

color:#000; text-align:center; }


  1. 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; }

  1. footer h3{

text-transform:uppercase; font-size:14px; }

  1. footer p{

font-size:12px; }

  1. board {

position: absolute; width: 220px; margin-top: 70px; left: 990px; }

.bottom { position: absolute; bottom: 0; margin: 0; width: 100%; z-index: 5; }

  1. bottom1 {

height: 75px; background-color: white; }

  1. bottom2 {

padding-top: 30px; height: 20%; background-color: rgb(217, 102, 73); }

  1. lefttear {

position: absolute; width: 1px; height: auto; left: 94px; top: 55px; }

  1. 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; }

  1. wheel1 {

margin-left: 345px; }

  1. wheel2 {

margin-left: 660px; }

  1. wheel3 {

margin-left: 968px; }

  1. worker1 {

position: absolute; left: 50px; }

  1. worker2 {

position: absolute; left: 385px; }

  1. worker3 {

position: absolute; left: 700px; }

  1. 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; z-index: 1011; }

.batman2 { position: absolute; left: 50%; margin: 0 0 0 200px; width: 110px; bottom: 260px; z-index: 1011; }


.superman1 { position: absolute; left: 50%; margin: 0 0 0 0px; width: 60px; bottom: 350px; z-index: 1011; }


.superman2 { position: absolute; left: 50%; margin: 0 0 0 200px; width: 90px; bottom: 440px; z-index: 1011; }

.in1 { position: absolute; left: 50%; margin: 0 0 0 -200px; width: 50px; bottom: 460px; z-index: 1011; }

.in2 { position: absolute; left: 50%; margin: 0 0 0 -5px; width: 50px; bottom: 348px; z-index: 1011; }

.down { position: absolute;

}

  1. hide1 {

position: absolute; left: 50%; bottom: 60px; width: auto; height: auto; margin: 0 0 0 -45px; z-index: 1005; }

  1. hide2 {

position: absolute; left: 50%; bottom: 45px; width: auto; height: auto; margin: 0 0 0 -45px; z-index: 1005; }

  1. hide3 {

position: absolute; left: 50%; top:0; width: auto; height: auto; margin: 0 0 0 -45px; z-index: 1005; }

  1. hide4 {

position: absolute; left: 50%; top:0; width: auto; height: auto; margin: 0 0 0 -45px; z-index: 1005; }

  1. arr1:hover {

cursor: pointer; }

  1. arr2:hover {

cursor: pointer; }

.firstHeading { padding-top: 0px !important; }

.headinghide { filter:alpha(opacity=1); -moz-opacity:0.01; opacity:0.01;

}

.headingshow { filter:alpha(opacity=99); -moz-opacity:0.99; opacity:0.99; }

  1. headdiv {

position: absolute; left: 50%; top: 0; margin: 0 0 0 -487px; z-index: 10000; 

       height: 14px;
       width: 975px;

}

.single-item img: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;

  • /

.navigation2 a:hover { 

 text-decoration: blink !important;

}

.navigation2 li { 

 font-size: 12px !important;

} .navigation2 li { 

 margin-bottom: 0px !important;

}

.navigation2 ul { 

 line-height: 0.5em !important;
 margin-bottom: 0px;
 margin-top: 0px;
 margin-left: 0px;

}

.navigation img:hover { 

cursor:pointer;

}

.flexnav .touch-button { 

 width: 35px;
 height: 35px;

}

.flexnav li { 

 font-size: 150%;
 line-height: 25px;

}

Retrieved from "http://2014.igem.org/Team:SYSU-China/css/main.css"