|
|
| (One intermediate revision not shown) |
| Line 1: |
Line 1: |
| - | /*** ESSENTIAL STYLES ***/
| |
| - | a.collapseLink {
| |
| - | font-weight:bold;
| |
| - | font-size:1em;
| |
| - | color:#9e1e1e;
| |
| - | }
| |
| - | .sf-menu, .sf-menu * {
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | list-style: none;
| |
| - | }
| |
| - | .sf-menu {
| |
| - | line-height: 1.0;
| |
| - | }
| |
| - | .sf-menu ul {
| |
| - | position: absolute;
| |
| - | top: -999em;
| |
| - | width: 195px; /* left offset of submenus need to match (see below) */
| |
| - | }
| |
| - | .sf-menu ul li {
| |
| - | width: 100%;
| |
| - | }
| |
| - | .sf-menu li:hover {
| |
| - | visibility: inherit; /* fixes IE7 'sticky bug' */
| |
| - | }
| |
| - | .sf-menu li {
| |
| - | float: left;
| |
| - | position: relative;
| |
| - | width: 195px;
| |
| - | }
| |
| - | .sf-menu a {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | }
| |
| - | .sf-menu li:hover ul,
| |
| - | .sf-menu li.sfHover ul {
| |
| - | left: 0;
| |
| - | top: 2.5em; /* match top ul list item height */
| |
| - | z-index: 99;
| |
| - | }
| |
| - | ul.sf-menu li:hover li ul,
| |
| - | ul.sf-menu li.sfHover li ul {
| |
| - | top: -999em;
| |
| - | }
| |
| - | ul.sf-menu li li:hover ul,
| |
| - | ul.sf-menu li li.sfHover ul {
| |
| - | left: 15.3em; /* match ul width */
| |
| - | top: 0;
| |
| - | }
| |
| - | ul.sf-menu li li:hover li ul,
| |
| - | ul.sf-menu li li.sfHover li ul {
| |
| - | top: -999em;
| |
| - | }
| |
| - | ul.sf-menu li li li:hover ul,
| |
| - | ul.sf-menu li li li.sfHover ul {
| |
| - | left: 10em; /* match ul width */
| |
| - | top: 0;
| |
| - | }
| |
| | | | |
| - | /*** DEMO SKIN ***/
| |
| - | .sf-menu {
| |
| - | float: left;
| |
| - | margin-bottom: 1em;
| |
| - | }
| |
| - | .sf-menu a {
| |
| - | border-left: 1px solid #fff;
| |
| - | border-top: 1px solid #826554;
| |
| - | padding: 0.37em 1em 0.37em 1em;
| |
| - | text-decoration:none;
| |
| - | font-family: 'Lucida Grande', sans-serif;
| |
| - | font-size:1.4em;
| |
| - | }
| |
| - | .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
| |
| - | color: #FFFFFF;
| |
| - | }
| |
| - | .sf-menu li {
| |
| - | background: #7E2217;
| |
| - | }
| |
| - | .sf-menu li li {
| |
| - | background: #000000;
| |
| - | }
| |
| - | .sf-menu li li li {
| |
| - | background: #4F3221;
| |
| - | }
| |
| - | /***change this to change the colour when it is hovered over***/
| |
| - | .sf-menu li:hover, .sf-menu li.sfHover,
| |
| - | .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
| |
| - | background: #C85A17;
| |
| - | outline: 0;
| |
| - | }
| |
| - |
| |
| - | /*** arrows **/
| |
| - | .sf-menu a.sf-with-ul {
| |
| - | cursor: default;
| |
| - | padding-right: 2.25em;
| |
| - | min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
| |
| - | }
| |
| - | .sf-sub-indicator {
| |
| - | position: absolute;
| |
| - | display: block;
| |
| - | right: .75em;
| |
| - | top: 1.05em; /* IE6 only */
| |
| - | width: 10px;
| |
| - | height: 10px;
| |
| - | text-indent: -999em;
| |
| - | overflow: hidden;
| |
| - | background: url('https://static.igem.org/mediawiki/2011/2/2f/ICL_MenuArrow.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
| |
| - | }
| |
| - | a > .sf-sub-indicator { /* give all except IE6 the correct values */
| |
| - | top: .8em;
| |
| - | background-position: 0 -100px; /* use translucent arrow for modern browsers*/
| |
| - | }
| |
| - | /* apply hovers to modern browsers */
| |
| - | a:focus > .sf-sub-indicator,
| |
| - | a:hover > .sf-sub-indicator,
| |
| - | a:active > .sf-sub-indicator,
| |
| - | li:hover > a > .sf-sub-indicator,
| |
| - | li.sfHover > a > .sf-sub-indicator {
| |
| - | background-position: -10px -100px; /* arrow hovers for modern browsers*/
| |
| - | }
| |
| - |
| |
| - | /* point right for anchors in subs */
| |
| - | .sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
| |
| - | .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
| |
| - | /* apply hovers to modern browsers */
| |
| - | .sf-menu ul a:focus > .sf-sub-indicator,
| |
| - | .sf-menu ul a:hover > .sf-sub-indicator,
| |
| - | .sf-menu ul a:active > .sf-sub-indicator,
| |
| - | .sf-menu ul li:hover > a > .sf-sub-indicator,
| |
| - | .sf-menu ul li.sfHover > a > .sf-sub-indicator {
| |
| - | background-position: -10px 0; /* arrow hovers for modern browsers*/
| |
| - | }
| |
| - |
| |
| - | /*** shadows for all but IE6 ***/
| |
| - | .sf-shadow ul {
| |
| - | background: url('https://static.igem.org/mediawiki/2011/9/9f/ICL_Shadow.png') no-repeat bottom right;
| |
| - | padding: 0 8px 9px 0;
| |
| - | -moz-border-radius-bottomleft: 17px;
| |
| - | -moz-border-radius-topright: 17px;
| |
| - | -webkit-border-top-right-radius: 17px;
| |
| - | -webkit-border-bottom-left-radius: 17px;
| |
| - | }
| |
| - | .sf-shadow ul.sf-shadow-off {
| |
| - | background: transparent;
| |
| - | }
| |
"
