"

From 2012.igem.org

/* -------------------

Title: front.css Team: Shenzhen Author: BGI_K2 Twitter: @BGI_K2 Email: im.ss.kk@gmail.com

Please contact me if you would like to use this script

---

*/

@font-face {

   font-family: 'WebSymbolsRegular';
   src: url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.eot');
   src: url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.woff') format('woff'),
       url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
       url('http://reinkk.my3gb.com/igem/css/websymbols/websymbols-regular-webfont.svg?action=raw&ctype=xml/svg#WebSymbolsRegular') format('svg');
   font-weight: normal;
   font-style: normal;

}

body{ background-color: #ccc !important; } .content{ background-color:#aaa !important; width: 1200px; MARGIN-RIGHT: auto; MARGIN-LEFT: auto; top:50px; }

1. logo {

position: absolute; top:90px; z-index:100; }

.ca { position: absolute; left:470px; } .notice{ position: absolute; background-color: #333; text-align: center; height: 112px; line-height:20px; top:322px; width: 304px; border:16px; left:308px; z-index:99; }

.ca-menu,.ca-menu-b{

   padding:0;

height:300px;

   margin:4px auto;
   width: 612px;

position: relative; z-index:200; } .ca-menu-b{ top:140px; }

.ca-menu li,.ca-menu-b li{

   width: 150px;
   overflow: hidden;
    position: absolute;
   -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   margin-right: 4px;
   margin-bottom: 4px;
   -webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
   -o-transition: all 300ms linear;
   -ms-transition: all 300ms linear;
   transition: all 300ms linear;

}

.ca-green-b,.ca-green { background: #8CC541; height: 240px; } .ca-orange-b,.ca-orange { background: #FBB042; height: 180px; } .ca-yellow-b,.ca-yellow { background: #FFDD0F; height: 300px; } .ca-yellow,.ca-orange,.ca-green {

    bottom:0px;

} .ca-yellow-b,.ca-orange-b,.ca-green-b {

    top:0px;

}

1. ca-orange-b1, #ca-green1{

   left:0px;

}

1. ca-yellow-b1, #ca-orange1{

   left:154px;

}

1. ca-green-b1, #ca-yellow1{

   left:308px;

}

1. ca-orange-b2, #ca-green2{

   left:462px;

}

1. ca-green-b1 span{

   bottom:40px;

}

1. ca-orange-b1 span{

   bottom:65px;

}

1. ca-yellow-b1 span{

   bottom:5px;

}

1. ca-orange-b2 span{

   bottom:60px;

}

.ca-menu li:last-child,.ca-menu-b li:last-child{

   margin-right: 0px;

} .ca-menu li a,.ca-menu-b li a{

   text-align: left;
   width: 100%;
   height: 100%;
   display: block;
   color: #333;

position: absolute; } .ca-icon,.ca-icon-b{

   font-family: 'WebSymbolsRegular', cursive;
   font-size: 60px;
   color: #333;
   text-shadow: 0px 0px 1px #333;
   line-height: 150px;
   position: absolute;
   width: 100%;
   height: 50%;
   left: 0px;
   text-align: center;
   -webkit-transition: all 400ms linear;
   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

.ca-icon{ top: 30px; }

.ca-icon-b{ bottom:0px; } .ca-content, .ca-content-b{

   position: absolute;
   left: 0px;
   width: 100%;

} .ca-content{ top:20px; } .ca-content-b{ bottom:130px; } .ca-main{

   font-size: 20px;
   opacity: 0.8;
   text-align: center;
   -webkit-transition: all 200ms linear;
   -moz-transition: all 200ms linear;
   -o-transition: all 200ms linear;
   -ms-transition: all 200ms linear;
   transition: all 200ms linear;

}

.ca-menu-b li:hover,.ca-menu li:hover{

   background-color: #000;

} .ca-menu li:hover .ca-icon,.ca-menu-b li:hover .ca-icon-b{

   color: #fff;
   font-size: 90px;

} .ca-menu-b li:hover .ca-main,.ca-menu li:hover .ca-main{

   color: #7FCFD4;
   -webkit-animation: moveFromLeftRotate 300ms ease;
   -moz-animation: moveFromLeftRotate 300ms ease;
   -ms-animation: moveFromLeftRotate 300ms ease;

}

@-webkit-keyframes moveFromLeftRotate{

   from {
       -webkit-transform: translateX(-100%) rotate(-90deg);
   }
   to {
       -webkit-transform: translateX(0%) rotate(0deg);
   }

} @-moz-keyframes moveFromLeftRotate{

   from {
       -moz-transform: translateX(-100%) rotate(-90deg);
   }
   to {
       -moz-transform: translateX(0%) rotate(0deg);
   }

} @-ms-keyframes moveFromLeftRotate{

   from {
       -ms-transform: translateX(-100%) rotate(-90deg);
   }
   to {
       -ms-transform: translateX(0%) rotate(0deg);
   }

}

@-webkit-keyframes moveFromBottom {

   from {
       -webkit-transform: translateY(100%);
   }
   to {
       -webkit-transform: translateY(0%);
   }

} @-moz-keyframes moveFromBottom {

   from {
       -moz-transform: translateY(100%);
   }
   to {
       -moz-transform: translateY(0%);
   }

} @-ms-keyframes moveFromBottom {

   from {
       -ms-transform: translateY(100%);
   }
   to {
       -ms-transform: translateY(0%);
   }

}