Template:USTC-Software/header2/css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
#menu { width:100%; background:#34495e; position:fixed; height:120px;
+
#header {
-
font:20px normal Verdana, Arial, Helvetica, sans-serif;}
+
      position: relative;
 +
  background-color:#34495e;
 +
      border-radius: 0 0 10px 10px;
 +
      -moz-border-radius: 0 0 5px 5px;
 +
      -webkit-border-radius: 0 0 15px 15px;
 +
      height:100px;
 +
      font-family: "Helvetica Neue","Arial",sans-serif;
 +
      border-top-width:0px;
 +
      max-width:100%;
 +
      width:100%;
-
#nav .mainlevel ul,#nav .mainlevel li {list-style-type:none; text-transform:capitalize;}
 
 +
}
-
.clear {clear:both; *display:inline;}
 
 +
#top {
 +
  background-color:#34495e;
 +
      width:100%;
 +
      height:100px;
 +
      z-index: 5000;
 +
      top:0px;
 +
      left:0px;
 +
  opacity:1;
 +
}
 +
.menu {
 +
font:18px Arial, Helvetica, sans-serif;
 +
width:100%;
 +
padding-top:50px;
 +
}
-
#nav { width:100%; display:block;}
 
 +
.menu ul {
 +
padding:0;
 +
margin:0;
 +
list-style-type: none;
 +
}
-
#nav .jquery_out {float:left;line-height:32px;display:block;
 
-
  text-align:center; color:#fff;font:18px/32px Arial, Helvetica, sans-serif; background:#34495e;}
 
 +
.menu ul li {
 +
float:left;
 +
position: relative;
 +
}
-
#nav .jquery_out .smile {padding-left:1em;}
 
 +
.menu ul li a, .menu ul li a:visited {
 +
display:block;
 +
text-align:center;
 +
text-decoration:none;
 +
width:130px;
 +
height:40px;
 +
color:#fff;
 +
border:1px solid #34495e;
 +
border-width:1px 1px 0 0;
 +
background:#34495e;
 +
line-height:40px;
 +
font-size:18px;
 +
letter-spacing:1px;
 +
}
-
#nav .jquery_inner {margin-left:0; height:100px;}
 
 +
.menu ul li ul {display: none;}
-
#nav .jquery {margin-right:1px;padding:0 2em;}
 
 +
.menu ul li:hover a {
 +
color:#000;
 +
background:#fff;
 +
}
-
#nav .mainlevel {background:#34495e; float:left; height:60px; padding-left:0px; padding-top:40px;}
 
 +
.menu ul li:hover ul {
 +
display:block;
 +
position:fixed;
 +
top:99px;
 +
width:150px;
 +
}
-
#nav .mainlevel a {color:#fff; text-decoration:none; line-height:40px; display:block;  width:120px;}
 
 +
.menu ul li:hover ul li a {
 +
display:block;
 +
background:#34495e;
 +
height:40px;
 +
line-height:40px;
 +
color:#fff;
 +
font-size:16px;
 +
}
-
#nav .mainlevel a:hover {color:#000; text-decoration:none; background:#fff;}
 
 +
.menu ul li:hover ul li a:hover {
 +
background:#7599bc;
 +
    color:#fff;
 +
}
-
#nav .mainlevel ul {display:none; position:absolute;}
 
 +
#igem {
 +
      float:right;
 +
      margin-top:-1px;
 +
      margin-right:-55px;
 +
      height:83px;
 +
      width:110px;
 +
      }
-
#nav .mainlevel li {  background:#34495e; width:120px; margin-left:-40px;}
 
-
#nav .mainlevel li a:hover {color:#fff; text-decoration:none; background:#4d77a1;}
+
#igem a img{
-
 
+
        transition:width 1s, height 1s;
-
 
+
        -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
-
.log {text-align:center; text-transform:capitalize; margin:0px auto;}
+
        -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
 +
        -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
 +
        -ms-transition:width 1s, height 1s, -ms-transform 1s;
 +
}
 +
#igem a img:hover{
 +
        transform:rotate(360deg);
 +
        -moz-transform:rotate(360deg); /* Firefox 4 */
 +
        -webkit-transform:rotate(360deg); /* Safari and Chrome */
 +
        -o-transform:rotate(360deg); /* Opera */
 +
        -ms-transition:width 1s, height 1s, -ms-transform 1s;/*IE*/
 +
}

Revision as of 12:13, 27 October 2013

  1. header { 
      position: relative;

background-color:#34495e; 

      border-radius: 0 0 10px 10px;
      -moz-border-radius: 0 0 5px 5px;
      -webkit-border-radius: 0 0 15px 15px;
      height:100px;
      font-family: "Helvetica Neue","Arial",sans-serif;

      border-top-width:0px;
      max-width:100%;
      width:100%;


}


  1. top {

background-color:#34495e; 

      width:100%;
      height:100px;
      z-index: 5000;
      top:0px;
      left:0px;

opacity:1; }

.menu { font:18px Arial, Helvetica, sans-serif; width:100%; padding-top:50px;

}


.menu ul { padding:0; margin:0; list-style-type: none; }


.menu ul li { float:left; position: relative; }


.menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:130px; height:40px; color:#fff; border:1px solid #34495e; border-width:1px 1px 0 0; background:#34495e; line-height:40px; font-size:18px; letter-spacing:1px; }


.menu ul li ul {display: none;}


.menu ul li:hover a { color:#000; background:#fff; }


.menu ul li:hover ul { display:block; position:fixed; top:99px; width:150px; }


.menu ul li:hover ul li a { display:block; background:#34495e; height:40px; line-height:40px; color:#fff; font-size:16px; }


.menu ul li:hover ul li a:hover { background:#7599bc; 

   color:#fff;

}


  1. igem { 
      float:right;
      margin-top:-1px;
      margin-right:-55px;
      height:83px; 
      width:110px; 
      }


  1. igem a img{ 
       transition:width 1s, height 1s;
       -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
       -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
       -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
       -ms-transition:width 1s, height 1s, -ms-transform 1s;

}

  1. igem a img:hover{ 
       transform:rotate(360deg);
       -moz-transform:rotate(360deg); /* Firefox 4 */
       -webkit-transform:rotate(360deg); /* Safari and Chrome */
       -o-transform:rotate(360deg); /* Opera */
       -ms-transition:width 1s, height 1s, -ms-transform 1s;/*IE*/

}

Retrieved from "http://2013.igem.org/Template:USTC-Software/header2/css"