/*** ESSENTIAL STYLES ***/ .sf-contener { clear: both; float: left; width: 100%; } .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { position: relative; padding: 0; width: 100%; border-bottom: 3px solid #e9e9e9; background: #f6f6f6; } @media (max-width: 767px) { .sf-menu { display: none; } } .sf-menu ul { position: absolute; top: -999em; background: #fff; } @media (max-width: 767px) { .sf-menu ul { top:0; position: relative; } } .sf-menu > li > a { font: 600 18px/22px "Open Sans", sans-serif; text-transform: uppercase; color: #484848; display: block; padding: 17px 20px; } .sf-menu .sf-sub-indicator { display:none; } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu > li { float: left; position: relative; border-right: 1px solid #eadbdb; } .sf-menu a { display: block; position: relative; color:#000; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 57px; /* match top ul list item height */ z-index: 99; width:auto; } 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: 300px; /* 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: 300px; /* match ul width */ top: 0; } /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; } .sf-menu a { display:block; padding: 5px 22px 5px 20px; line-height:34px; border: 0; text-decoration:none; } .sf-menu a, .sf-menu a:visited { color: rgba(0, 0, 0, 0.65); white-space:nowrap; text-shadow: 1px 1px 0px #fff; } .sf-menu li li { background: rgba(246, 246, 246, 0.9); } .sf-menu li li li { background: rgba(246, 246, 246, 0.9); } .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: rgba(255, 255, 255, 0.98); } .sf-menu ul li:hover, .sf-menu ul li.sfHover, .sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active { background: rgba(255, 255, 255, 0.98); outline: 0; } /*** arrows **/ .sf-sub-indicator { position: absolute; display: block; right: 10px; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; } .sf-sub-indicator:after { font-family: 'Material Icons'; content: '\e5cc'; } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: 11px; 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('../img/shadow.png') no-repeat bottom right; */ /* padding: 0 8px 9px 0; */ -moz-border-bottom-left-radius: 17px; -moz-border-top-right-radius: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; } .sf-shadow ul.sf-shadow-off { background: transparent; } li.sf-search { background: inherit; float: right; line-height: 25px; } li.sf-search input { border-radius: 5px; padding: 8px 0; padding-left: 10px; font-size:16px; margin: 6px 6px 0 0; background: #ffffff; border:1px solid #eadbdb; } /* hack IE7 */ .sf-menu a, .sf-menu a:visited { height:34px !IE; } .sf-menu li li { width:300px; background:#726f72 !IE; } .sf-menu .category-thumbnail img { max-width:100%; height:auto; } @media (max-width: 767px){ .sf-menu .sf-search { display: none !important; } .sf-menu > li span { position: absolute; right: 6px; top: 20px; width: 30px; height: 30px; z-index: 2; } .sf-menu > li span:after { font-family: "Material Icons"; content: "\e145"; font-size: 26px; } .sf-menu li, .sf-menu li ul { width:100%!important; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 0px; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left:0; } .menu-mobile { display:none; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: 0; } ul.sf-menu li ul li ul li { padding-left:15px; } ul.sf-menu li ul li ul li:before { width:1px; height:44px; display:inline-block; float:left; position:relative; margin-left:10px; background:#ece7e7; content:' ' } .sf-menu > li span.active:after { content: "\e15b"; } } .cat-title { display: none; } @media (max-width: 767px) { .cat-title { display: block; font: 600 18px/22px "Open Sans", sans-serif; text-transform: uppercase; color: #484848; display: block; padding: 17px 20px; border-bottom: 3px solid #e9e9e9; background: #f6f6f6; position: relative; } .cat-title:hover { background: #333; border-bottom-color: #666666; color: #fff; } .cat-title:after { display: block; font-family: "Material Icons"; content: "\e5d2"; position: absolute; right: 15px; top: 18px; font-size: 26px; } .cat-title.active:after { content: "\e14c"; } } .submenu-container, .submenu-container ul { box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2); } .sf-menu li:last-child { border:none!important; } #block_top_menu { padding:0px; } .sf-menu li { position:relative!important; }