Team:USTC CHINA/xyshao/home.css

From 2013.igem.org

Latest revision as of 13:11, 8 August 2013

@charset "utf-8"; /* CSS Document */

.Container { background:#fff; margin:0 auto 0px; padding:5px 0px 0px;

       overflow:hidden;
       width:960px;

}

.top{

       width:960px;

background-image:url(); height:150px;

       margin-bottom:10px;

border-radius:10px; } .nav{ width:960px; height:66px; z-index:1; }

strong { font-style: normal; font-weight: normal; font-weight: bold; } a { cursor: pointer; text-decoration: none; }

1. container {

width: 960px; }

1. nav, .nav-container, .nav-container ul, #nav .nav-sub a:hover, #nav .nav-sub a:hover span {

margin:0px; padding:0px; }

1. nav, .nav-container, .nav-container ul, #nav .nav-sub a:hover, #nav .nav-sub a:hover span, #nav .nav-master-a:hover, #nav .nav-master-a:hover strong, #nav li.current .nav-master-a strong, #nav li.current .nav-master-a {

background-image:url(""); background-repeat: no-repeat; }

1. nav {

position: relative; height: 66px; background-position: 0pt -230px; background-repeat: repeat-x;

} .nav-container { padding-left: 15px;/**/ height: 66px; background-position: 0pt 0pt; } .nav-container ul { height: 100%; background-position: right -66px; } .nav-container ul ul.nav-sub { background: none repeat scroll 0% 0% transparent; height: auto; } .nav-master { display: block; float: left; height: 36px; line-height: 36px; text-align: center; padding-right: 6px; } .nav-master-a { display: block; font-size:20px; height: 26px; line-height: 26px; overflow: hidden; background: none repeat scroll 0% 0% transparent; text-decoration: none; margin-top: 5px; } .nav-master-a strong { display: block; color: rgb(255, 255, 255); height: 100%; } li.current .nav-master-a strong, #nav li.current .nav-master-a:hover strong { color: rgb(0, 0, 0); } .nav-master-a:hover { text-decoration: none; background-position: 0pt -315px; } .nav-master-a:hover strong { background-position: right -360px; }

1. nav li.current .nav-master-a strong {

background-position: right -180px; padding-top: 2px; }

1. nav li.current .nav-master-a {

background-position: 0pt -131px; overflow: hidden; color: rgb(0, 0, 0); height: 31px; }

1. nav li.current .nav-master-a:hover strong {

color: rgb(0, 0, 0); } ul.nav-sub { position: absolute; width: 920px;/*菜单总宽*/ text-align: left; top: 38px; left: 15px;/*调整二级菜单位置*/ display: none; background: none repeat scroll 0% 0% transparent; }

1. nav .current .nav-sub {

display: block; } .nav-sub li { float: left; display: block; width:122px;/*调整一、二级菜单每栏宽*/ text-align: center; height: 35px; padding-right:4px; }

1. nav .nav-sub a {

display: block; height: 22px; overflow: hidden; color: rgb(77, 77, 77); font-weight:300;/**/ font-size:16px;/**/ text-decoration: none; }

1. nav .nav-sub a span {

display: block; line-height: 22px; height: 22px; }

1. nav .nav-sub a:hover {

background-position: 0pt -405px; }

1. nav .nav-sub a:hover span {

background-position: right -446px; }

1. slider {

   width: 940px; /* important to be same as image width */
   height:360px; /* important to be same as image height */
   position: relative; /* important */

overflow: hidden; /* important */ margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left:auto; border-radius:10px; }

1. slider img{

   border: 0px;

}

1. sliderContent {

   width: 940px; /* important to be same as image width or wider */
   position: absolute;
   top: 0;
   margin-left: 0;

} .sliderImage {

   float: left;
   position: relative;
   display: none;

} .sliderImage span {

   position: absolute;
   font: 12px/14px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width:940px;
   height:40px;
   background-color: #000;
   color: #fff;
   display: none;

} .clear {

   clear: both;

} .sliderImage span strong {

   font-size: 14px;

} .bottom {

   bottom: 0;
   left: 0;

} ul { list-style-type: none;}

1. content1 {

height:460px; width: 900px; margin-top: 0px; margin-right: auto; margin-bottom:10px; margin-left: auto; border-radius:10px; background-color:#D0ECF4; overflow:hidden; padding:20px; }

1. content1p{

       width:900px;

font-size:28px; font-weight:bold;

       background:#transparent;

}

1. content2p{

width:900px; font-size:16px; background:#transparent; margin-top:20px; }

1. thanks{

   width:940px;
   height:280px;
   margin:0 auto;
   background-color:#F2F2F2;
   border-radius:10px;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left:auto;

}

1. sponsors-title{

   color: #174974;
   position:relative;
   font-family: 'McLaren', cursive;
   font-size:40px;
   line-height:40px;

}

.sponsor{

   display:block;
   float:left;
   width:280px;
   height:68px;
   margin: 10px;
   overflow:hidden;
   color:#174974;
}
   .sponsor:hover p{
    margin-top:-65px;
   }
   .sponsor p{
       display:block;
       width:290px;
       height:65px;
       line-height:20px;
       font-size:16px;
       text-align:center;
       vertical-align:center;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       margin:0;
       
       -webkit-transition: margin-top 0.2s linear;
       -moz-transition: margin-top 0.2s linear;
       -o-transition: margin-top 0.2s linear;
       -ms-transition: margin-top 0.2s linear;
       transition: margin-top 0.2s linear;
       }
   .sponsor a img{
       opacity:0;
       -webkit-transition:all 0.3s linear;
       -o-transition:all 0.3s linear;
       -ms-transition:all 0.3s linear;
       -moz-transition:all 0.3s linear;
       transition:all 0.3s linear;
       -moz-transform: rotate(6deg);
       -o-transform: rotate(6deg);
       -webkit-transform: rotate(6deg);
   }
   .sponsor:hover a img{
       opacity:1;
       -webkit-transform:rotate(0deg);

-moz-transform:rotate(0deg); -o-transform:rotate(0deg);

   }
   
   .sponsor a p{
       height:45px;
       padding:10px;
       font-family: 'Petit Formal Script', cursive;
       font-size:14px;
       
       opacity:0;
       -webkit-transition:all 0.3s linear;
       -o-transition:all 0.3s linear;
       -ms-transition:all 0.3s linear;
       -moz-transition:all 0.3s linear;
       transition:all 0.3s linear;
       
       -webkit-transform: rotate(6deg);
   }
   .sponsor:hover a p{
       opacity:1;
       -webkit-transform:rotate(0deg);
   }