Template:Template HD 1

From 2011.igem.org

(Difference between revisions)
Line 28: Line 28:
#menu
#menu
-
{ margin: 0;
+
{
-
padding: 0;
+
        width: 100%;
-
z-index: 30}
+
        margin: 0;
 +
        padding: 10px 0 0 0;
 +
        list-style: none;
 +
        background: #111;
 +
        background: -moz-linear-gradient(#444, #111);
 +
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
 +
        background: -webkit-linear-gradient(#444, #111);
 +
        background: -o-linear-gradient(#444, #111);
 +
        background: -ms-linear-gradient(#444, #111);
 +
        background: linear-gradient(#444, #111);
 +
        -moz-border-radius: 50px;
 +
        border-radius: 50px;
 +
        -moz-box-shadow: 0 2px 1px #9c9c9c;
 +
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
 +
        box-shadow: 0 2px 1px #9c9c9c;
 +
}
#menu li
#menu li
-
{ margin: 0;
+
{
-
padding: 0;
+
        float: left;
-
list-style: none;
+
        padding: 0 0 10px 0;
-
float: left;
+
        position: relative;
-
font: bold 11px tahoma}
+
}
-
#menu li a
+
#menu a
-
{ display: block;
+
{
-
margin: 0 1px 0 0;
+
        float: left;
-
padding: 4px 10px;
+
        height: 25px;
-
width: 57px;
+
        padding: 0 25px;
-
background: #FFB674;
+
        color: #999;
-
color: #000;
+
        text-transform: uppercase;
-
text-align: center;
+
        font: bold 12px/25px Arial, Helvetica;
-
text-decoration: none}
+
        text-decoration: none;
 +
        text-shadow: 0 1px 0 #000;
 +
}
-
#menu li a:hover
+
#menu li:hover > a
-
{ background: #269434}
+
{
 +
        color: #fafafa;
 +
}
-
#menu div
+
*html #menu li a:hover /* IE6 */
-
{ position: absolute;
+
{
-
visibility: hidden;
+
        color: #fafafa;
-
margin: 0;
+
}
-
padding: 0;
+
-
background: #FFB674;
+
-
border: 1px solid #000}
+
-
#menu div a
+
#menu li:hover > ul
-
{ position: relative;
+
{
-
display: block;
+
        display: block;
-
margin: 0;
+
}
-
padding: 5px 10px;
+
-
width: auto;
+
-
white-space: nowrap;
+
-
text-align: left;
+
-
text-decoration: none;
+
-
background: #FFB674;
+
-
color: #000;
+
-
font: 11px tahoma}
+
-
#menu div a:hover
+
/* Sub-menu */
-
{ background: #269434;
+
 
-
color: #000}
+
#menu ul
 +
{
 +
    list-style: none;
 +
    margin: 0;
 +
    padding: 0;
 +
    display: none;
 +
    position: absolute;
 +
    top: 35px;
 +
    left: 0;
 +
    z-index: 99999;
 +
    background: #444;
 +
    background: -moz-linear-gradient(#444, #111);
 +
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
 +
    background: -webkit-linear-gradient(#444, #111);
 +
    background: -o-linear-gradient(#444, #111);
 +
    background: -ms-linear-gradient(#444, #111);
 +
    background: linear-gradient(#444, #111);
 +
    -moz-border-radius: 5px;
 +
    border-radius: 5px;
 +
}
 +
 
 +
#menu ul li
 +
{
 +
    float: none;
 +
    margin: 0;
 +
    padding: 0;
 +
    display: block;
 +
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
 +
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
 +
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
 +
}
 +
 
 +
#menu ul li:last-child
 +
{
 +
    -moz-box-shadow: none;
 +
    -webkit-box-shadow: none;
 +
    box-shadow: none;
 +
}
 +
 
 +
#menu ul a
 +
{
 +
    padding: 10px;
 +
        height: auto;
 +
    line-height: 1;
 +
    display: block;
 +
    white-space: nowrap;
 +
    float: none;
 +
        text-transform: none;
 +
}
 +
 
 +
*html #menu ul a /* IE6 */
 +
{
 +
        height: 10px;
 +
        width: 150px;
 +
}
 +
 
 +
*:first-child+html #menu ul a /* IE7 */
 +
{
 +
        height: 10px;
 +
        width: 150px;
 +
}
 +
 
 +
#menu ul a:hover
 +
{
 +
    background: #0186ba;
 +
        background: -moz-linear-gradient(#04acec,  #0186ba);
 +
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 +
        background: -webkit-linear-gradient(#04acec,  #0186ba);
 +
        background: -o-linear-gradient(#04acec,  #0186ba);
 +
        background: -ms-linear-gradient(#04acec,  #0186ba);
 +
        background: linear-gradient(#04acec,  #0186ba);
 +
}
 +
 
 +
#menu ul li:first-child a
 +
{
 +
    -moz-border-radius: 5px 5px 0 0;
 +
    border-radius: 5px 5px 0 0;
 +
}
 +
 
 +
#menu ul li:first-child a:after
 +
{
 +
    content: '';
 +
    position: absolute;
 +
    left: 30px;
 +
    top: -8px;
 +
    width: 0;
 +
    height: 0;
 +
    border-left: 5px solid transparent;
 +
    border-right: 5px solid transparent;
 +
    border-bottom: 8px solid #444;
 +
}
 +
 
 +
#menu ul li:first-child a:hover:after
 +
{
 +
    border-bottom-color: #04acec;
 +
}
 +
 
 +
#menu ul li:last-child a
 +
{
 +
    -moz-border-radius: 0 0 5px 5px;
 +
    border-radius: 0 0 5px 5px;
 +
}
 +
 
 +
/* Clear floated elements */
 +
#menu:after
 +
{
 +
        visibility: hidden;
 +
        display: block;
 +
        font-size: 0;
 +
        content: " ";
 +
        clear: both;
 +
        height: 0;
 +
}
 +
 
 +
* html #menu            { zoom: 1; } /* IE6 */
 +
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
</style>

Revision as of 07:11, 3 August 2011

Retrieved from "http://2011.igem.org/Template:Template_HD_1"