Team:Imperial College/Template:Welcome

From 2013.igem.org

(Difference between revisions)
Line 2: Line 2:
   <style type="text/css">
   <style type="text/css">
   /* Compulsory IDs ***********************************************************/
   /* Compulsory IDs ***********************************************************/
-
#navigation {
+
.wrapper {
-
width: 950px;
+
    width: 100%;
-
height: 50px;
+
    height: 80px;
-
margin: 0;
+
    background : #464646;
-
padding: 0;
+
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
-
background: url(Navigation-bg.jpg) no-repeat left top;
+
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-
}
+
    border-top: 2px solid #939393;
-
#navigation ul {
+
    position: relative;
-
list-style: none;
+
    margin-bottom: 30px;
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
#navigation ul li {
+
-
display: inline;
+
-
margin: 0px;
+
-
}
+
-
#navigation ul li a {
+
-
height:33px;
+
-
display: block;
+
-
float: left;
+
-
padding: 17px 15px 0 15px;
+
-
font: bold 12px Arial;
+
-
color: #FFF;
+
-
text-decoration: none;
+
-
background: url(Navigation-separator.png) no-repeat right center;
+
-
}
+
-
 
+
-
#navigation ul li a:hover {
+
-
color:#134264;
+
-
background: url(Navigation-hover.png) repeat-x left top;
+
}
}
-
#navigation ul li#active a {
+
ul {
-
color:#134264;
+
    margin: 0;
-
background: url(Navigation-hover.png) repeat-x left top;
+
    padding: 0;
}
}
 +
 +
ul.menu {
 +
    height: 80px;
 +
    border-left: 1px solid rgba(0,0,0,0.3);
 +
    border-right: 1px solid rgba(255,255,255,0.3);
 +
    float:left;
 +
}
 +
 +
ul.menu li {
 +
    list-style: none;
 +
    float:left;
 +
    height: 79px;
 +
    text-align: center;
 +
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
 +
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
 +
    }
 +
 +
ul li a {
 +
    display: block;
 +
    padding: 0 20px;
 +
    border-left: 1px solid rgba(255,255,255,0.1);
 +
    border-right: 1px solid rgba(0,0,0,0.1);
 +
    text-align: center;
 +
    line-height: 79px;
 +
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
 +
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
 +
    -webkit-transition-property: background;
 +
    -webkit-transition-duration: 700ms;
 +
    -moz-transition-property: background;
 +
    -moz-transition-duration: 700ms;
 +
    }
 +
 +
ul li a:hover {
 +
    background: transparent none;
 +
}
 +
 +
ul li.active a{
 +
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
 +
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
 +
}
 +
 +
   /**************************************************************/
   /**************************************************************/
   </style>
   </style>
</html>
</html>

Revision as of 11:45, 19 August 2013