Team:SYSU-China/css/main.css

From 2014.igem.org

(Difference between revisions)
 
(3 intermediate revisions not shown)
Line 40: Line 40:
#section1 h1{
#section1 h1{
position: absolute;
position: absolute;
-
top: 75%;
+
 
-
left: 8%;
+
bottom: 200px;
-
z-index: 100;
+
left: 50%;
 +
margin: -700px;
 +
z-index: 10000;
}
}
Line 110: Line 112:
margin: 0 0 0 -37px;
margin: 0 0 0 -37px;
width: 126px;
width: 126px;
-
        z-index: 1010;
+
z-index: 1010;
}
}
Line 388: Line 390:
width: 80px;
width: 80px;
bottom: 350px;
bottom: 350px;
-
        z-index: 1100;
+
z-index: 1011;
}
}
Line 397: Line 399:
width: 110px;
width: 110px;
bottom: 260px;
bottom: 260px;
-
        z-index: 1100;
+
z-index: 1011;
}
}
Line 407: Line 409:
width: 60px;
width: 60px;
bottom: 350px;
bottom: 350px;
-
        z-index: 1100;
+
z-index: 1011;
}
}
Line 417: Line 419:
width: 90px;
width: 90px;
bottom: 440px;
bottom: 440px;
-
        z-index: 1100;
+
z-index: 1011;
}
}
Line 426: Line 428:
width: 50px;
width: 50px;
bottom: 460px;
bottom: 460px;
-
        z-index: 1100;
+
z-index: 1011;
}
}
Line 435: Line 437:
width: 50px;
width: 50px;
bottom: 348px;
bottom: 348px;
-
        z-index: 1100;
+
z-index: 1011;
}
}
Line 490: Line 492:
cursor: pointer;
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;
 +
}
 +
 +
#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;
 +
}
 +
/*
/*
Line 536: Line 570:
*/
*/
-
.firstHeading {
+
.navigation2 a:hover {
-
padding-top: 0px !important;
+
  text-decoration: blink !important;
}
}
-
h1.firstHeading {
+
.navigation2 li {
-
padding-top: 0px !important;
+
  font-size: 12px !important;
 +
}
 +
.navigation2 li {
 +
  margin-bottom: 0px !important;
}
}
-
#headdiv {
+
.navigation2 ul {
-
position: absolute;
+
  line-height: 0.5em !important;
-
left: 50%;
+
  margin-bottom: 0px;
-
top: 0;
+
  margin-top: 0px;
-
margin: 0 0 0 -487px;
+
  margin-left: 0px;
-
z-index: 1000000 !important;
+
}
-
        height: 14px;
+
 
-
        width: 975px;
+
.navigation img:hover {
 +
cursor:pointer;
 +
}
 +
 
 +
.flexnav .touch-button {
 +
  width: 35px;
 +
  height: 35px;
 +
}
 +
 
 +
.flexnav li {
 +
  font-size: 150%;
 +
  line-height: 25px;
}
}

Latest revision as of 00:52, 18 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
---------------------------------------------*/


  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"