Team:SYSU-China/newmain.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:50px; width:auto; position:absolute; left:40px; top:90px; }

  1. navihide {

position: absolute; left: 50%; top: 0px; margin: 0 0 0 -683px; width: 1366px; height: 60px !important; z-index: 999; color: white; }

  1. icons {

position: relative; margin: 0 0 0 0; padding: 0 0 0 0; background-color: inherit; height: 60px; } .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

.navigation { position: absolute; left: 50%; top: 0px; margin: 0 0 0 -683px; width: 1366px; height: 60px; z-index: 1000; background-color: rgb(37, 37, 37); color: white; }

.navigation2 { position: absolute; left: 50%; top: 60px; margin: 0 0 0 180px; width: 35%; height: 60px; z-index: -10000; background-color: rgb(37, 37, 37); color: white; }

.navigation img { position: absolute; width: 50px; height: auto; top:9%; cursor: pointer; }

.navigation img:nth-child(1) { left: 64%; }

.navigation img:nth-child(2) { left: 71%; }

.navigation img:nth-child(3) { left: 78%; }

.navigation img:nth-child(4) { left: 85%; }

.navigation img:nth-child(5) { left: 92%; }


.firstNav:nth-child(1) { left: 0px; }

.firstNav:nth-child(2) { left: 100px; }

.firstNav:nth-child(3) { left: 200px; }

.firstNav:nth-child(4) { left: 300px; }

.firstNav:nth-child(5) { left: 400px; }


.navigation2 ul a {

}

.navigation2 li { background-color: transparent !important; }

.navigation2 ul { background-color: transparent !important; }

.navigation2 { background-color: transparent !important; }

.navigation2 li a{ border-left: 1px !important; }


  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: 50%; left: 50%; margin: 180px 0 0 -600px; z-index: 100; }



  1. section2{

background-image:url(Sysuchina_bg3.png); }

  1. section3{

background-image:url(Sysuchina_bg3.png); }

.worker{ position:absolute; bottom: 413px; left: 16.7%; margin: 0 0 0 -620px; }

.worker img { }

.pipeline { z-index: 100; left: 16.7%; position: absolute; margin: 0 0 0 -650px; bottom: 40px; }

.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: 452px; margin: 0 0 0 -37px; width: 126px; z-index: 1010; }

.button:hover { position: absolute; left: 50%; bottom: 452.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: 50%; left: 16.7%; margin: -250px 0 0 100px; font-size: 38px; }

  1. section0 p{

position:absolute; top: 50%; left: 16.7%; margin: -200px 0 0 100px; }

  1. section2 .intro {

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

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

}

  1. section2 .ch-grid li {

position: absolute; bottom: 44%; left: 50%; }

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

margin: 0 0 0 -450px; }

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

margin: 0 0 0 -115px; }

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

margin: 0 0 0 220px; }


  1. section2 h1{

color:#000; text-align:center; font-size: 38px; }

  1. desgin {

height: 80%; }

  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: 40px; margin: 0; width: 33.33%; z-index: 5; }

  1. bottom1 {

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

  1. bottom2 {

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

  1. lefttear {

position: absolute; width: 1px; height: auto; left: 50%; top: 50%; margin: 40px 0 0 65px; }

  1. righttear {

position: absolute; width: 1px; height: auto; left: 50%; top: 50%; margin: 40px 0 0 190px; }

.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: 16.7px; }

  1. worker2 {

position: absolute; left: 385px; }

  1. worker3 {

position: absolute; left: 700px; }

  1. chaplin {

height: 330px; position: absolute; left: 50%; bottom: 180px; 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: 190px; margin: 0 0 0 -120px; z-index: 1007; }

.batman1 { position: absolute; left: 50%; margin: 0 0 0 -10px; width: 80px; bottom: 320px; z-index: 1011; }

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


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


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

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

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

.down { position: absolute;

}

  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;

}

  1. imgShow {

position: relative; float: left; margin: 0 0 0 0; background-color: rgb(120, 196, 166); width: 55%; height: 100%; }

  1. linkShow {

position: relative; float: left; margin: 0 0 0 0; height: 100%; width: 45%; }

  1. linkShow span {

position: relative; height: 100%; width: 22.5%; }

  1. linkShow span:nth-child(1) {

}

  1. linkShow span:nth-child(2) {

}

  1. linkShow span:nth-child(3) {

}

  1. linkShow span:nth-child(4) {

}

.title0 { position: absolute; bottom: 0; left: 0; width: 55%; height: 94%; padding-left: 30px; background-color: rgb(120, 196, 166); }

.titleright { position: absolute; bottom: 0; left: 55%; width: 45%; height: 100%; background-color: rgb(10, 16, 166); }

.title1 {

padding-top: 30px; background-color: rgb(254, 222, 175); font-size: 20px !important; cursor: pointer; }

.title2 { padding-top: 30px; background-color: rgb(108, 188, 213); cursor: pointer; }

.title3 { background-color: rgb(172, 232, 243); cursor: pointer; }

.title4 { background-color: rgb(249, 152, 110); cursor: pointer; }


.shadowtitle2 { position: absolute; width: 22.5%; height: 50%; left: 55%; top: 0; background-color: rgb(27, 27, 27); filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; z-index: 100; cursor: pointer;

}

  1. win {

position: absolute; background-color: pink; left: 50%; top: 50%; }

.winstyle1 { margin-left: -10%; width: 20%; height: 10%; }

.winstyle2 { margin-left: -20%; width: 40%; height: 20% }

.shadowtitle3 { position: absolute; width: 22.5%; height: 50%; left: 77.5%; top: 0; background-color: rgb(27, 27, 27); filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; z-index: 100; cursor: pointer; }

.shadowtitle4 { position: absolute; width: 22.5%; height: 50%; left: 55%; top: 50%; background-color: rgb(27, 27, 27); filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; z-index: 100; cursor: pointer; }

.shadowtitle5 { position: absolute; width: 22.5%; height: 50%; left: 77.5%; top: 50%; background-color: rgb(27, 27, 27); filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; z-index: 100; cursor: pointer; }


.ch-item7 { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: pointer; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }

  1. myslider {

margin-top: 100px; }

  1. regch li {

position: absolute; margin: 0 0 0 0; }

  1. regch li:nth-child(1) {

width: 22.5%; height: 50%; left: 0; bottom: 50%;

}

  1. regch li:nth-child(2) {

width: 22.5%; height: 50%; left: 22.5%; bottom: 50%; }

  1. regch li:nth-child(3) {

width: 22.5%; height: 50%; left: 0; bottom: 0; }

  1. regch li:nth-child(4) {

width: 22.5%; height: 50%; left: 22.5%; bottom: 0; }

  1. regch {

width: 100%; height: 100%; top: 0; left: 0; }

.flexslider img { 

width : 60%;
height : 70%;

}

  1. regch {

background-color: transparent; }

  1. regch div {

background-color: transparent; }

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