/* ================== SuperFish Menu Essential Styles (DO NOT CHANGE)================== */ .sf-menu,.sf-menu * { list-style:none;margin:0;padding:0; } .sf-menu { line-height:1.0; } .sf-menu ul { position:absolute;top:-999em;width:10em; } .sf-menu ul li { width:100%; } .sf-menu li:hover { visibility:inherit; } .sf-menu li { float:left;position:relative; } .sf-menu a { display:block;position:relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left:0;top:0;z-index:999; } .sf-menu a.sf-with-ul { padding-right:2.25em;min-width:1px; } .sf-sub-indicator { background-position:-10px -100px;background-repeat:no-repeat;position:absolute;display:block;right:.75em;top:1.05em;width:10px;height:10px;text-indent:-999em;overflow:hidden; } a > .sf-sub-indicator { top:.8em;background-position:0 -100px; } 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; } .sf-menu ul a > .sf-sub-indicator { background-position:0 0; } .sf-shadow ul.sf-shadow-off { background:transparent; } ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul,ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul { top:-999em; } ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul,ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul { left:10em;top:0; } .sf-menu ul .sf-sub-indicator,.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; } /* == Clearfix == */ .clear:before, .clear:after, .clearfix:before, .clearfix:after {display: table;content: "";} .clear:after, .clearfix:after {content: ".";visibility: hidden;display: block;height: 0;clear: both;} /* ================== Menu Styles ================== */ /* Default Background */ #access { background-color: #fbfbfb; background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5)); background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); background-image: linear-gradient(top, #ffffff, #f5f5f5); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); border: 1px solid #cccccc; /* Border Radius */ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /* Height of Menu */ height: 40px; margin: 20px; } /* Menu Link styles */ #primary-menu li a { color: #666666; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; } /* Top level only */ #primary-menu > li > a { line-height: 40px; /* Shapes the HEIGHT of the 1st level anchors */ padding: 0 20px; /* Left/Right Padding of links */ } /* Top link Dividers */ #primary-menu > li { border-right: solid 1px #dddddd; } /* Top Level Hover and Active States */ /* #primary-menu > li > a:hover { background: #f2f2f2; } */ #primary-menu > li > a:hover { background: #dbdbdb; } #primary-menu li a.active { background: #ffffff; } /* First Top Level Active/Hover Link to match #access border radius on the left side */ #primary-menu > li:first-child a.active, #primary-menu > li:first-child a:hover { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } /* == Level 2 and 3 (Children) == */ #primary-menu ul { background: #ffffff; border: 1px solid #dddddd; -webkit-box-shadow: 0px 0px 5px #eee; -moz-box-shadow: 0px 0px 5px #eee; box-shadow: 0px 0px 5px #eee; width: 200px; /* Width of dropdown menus */ } #primary-menu li li a { padding: 7px 10px; } #primary-menu li li a:hover { background: #f2f2f2; } #primary-menu li li a.active { background: #f2f2f2; } /* == Level 2 only == */ #primary-menu > li > ul { border-top: none; margin-left: -1px; /* Shifts dropdowns to the left 1px so they line up with left borders. */ margin-top: 41px; /* Matches line-height of first level's anchors plus 1px for menu wrapper's bottom border, which positions the dropdown at the base of the anchors. */ } /* == Level 3 only == */ #primary-menu ul ul { left: 200px; /* Matches width of dropdown menus */ } /* ============================================================ * Dark Version * - Add class "dark" to the #access div *