/** * @version 1.0 May 15, 2011 * @author Mariusz Boloz http://www.mariuszboloz.com * @copyright Copyright (C) 2011 Mariusz Boloz */ /*-----------------------------------------------------------------------------------*/ /* Normal navigation /*-----------------------------------------------------------------------------------*/ /* navigation container */ #navigation {display:block; float:right;} #navigation ul {margin:0;} /* left offset of submenus need to match (see below) */ #navigation .sf-menu ul {width:160px;} /* match ul width */ #navigation ul.sf-menu li li:hover ul, #navigation ul.sf-menu li li.sfHover ul {left:160px;} /* match top ul list item height */ #navigation .sf-menu > li:hover > ul, #navigation .sf-menu > li.sfHover > ul {/*top:100px; defined in style-declaration.php file*/} #navigation ul.main-nav {margin:0;} /*root menu items*/ #navigation .sf-menu li {background:0; margin:0;} #navigation .sf-menu a {border:0; border-bottom:solid 2px rgba(0,0,0,0); padding:0 15px; color:#fff; font-size:13px; opacity:0.8; font-weight:600; filter:alpha(opacity=80); transition-duration: 0.1s; transition-timing-function: linear; transition-delay: 0.1s; -webkit-transition-duration: 0.1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0.1s;} /*active root menu items*/ #navigation .sf-menu li:hover, #navigation .sf-menu li.sfHover, #navigation .sf-menu li.sfHover a, #navigation .sf-menu li.current-menu-item a, #navigation .sf-menu a:focus, #navigation .sf-menu a:hover, #navigation .sf-menu a:active, #navigation .sf-menu li.selected a, #navigation .current-menu-parent a {background:none; color:#fff; opacity:1; filter:alpha(opacity=100);} #navigation > .sf-menu > li.sfHover > a, #navigation > .sf-menu > li.current-menu-item > a, #navigation > .sf-menu > li > a:focus, #navigation > .sf-menu > li > a:hover, #navigation > .sf-menu > li > a:active, #navigation > .sf-menu > li.selected > a, #navigation > .sf-menu > li.current-menu-parent > a {border-bottom: solid 2px #329bd1;} /*arrows*/ #navigation .sf-menu a.sf-with-ul {padding-right:30px;} #navigation .sf-sub-indicator {right:13px; height:100%; width:13px; bottom:0!important;} #navigation .sf-sub-indicator i {position:absolute; font-size:12px; line-height:12px; display:block; width:12px; height:12px; margin-top:-6px; top:50%;} #navigation li li .sf-sub-indicator, #navigation li li .sf-sub-indicator i {display:none;} /*dropdown menu items*/ #navigation .sf-menu li li {border-bottom:solid 1px #454647;} #navigation .sf-menu li li:last-child {border:0;} #navigation .sf-menu li li a {font-weight:normal; font-size:13px; text-shadow: none; padding:9px 15px; border-bottom:0; border-left:0; background-color:#353637!important; opacity:1; filter:alpha(opacity=100); color:#cecece!important;} /*dropdown hover and active menu items*/ #navigation .sf-menu li li a:hover, #navigation .sf-menu li li a:focus, #navigation .sf-menu li li a:active {opacity:1; filter:alpha(opacity=100); background-color:#2b2c2d!important; color:#4cade6!important;} /*style for ul dropdown container*/ #navigation .sf-menu li ul {border:0; border-top:solid 2px #329bd1; background:0;} #navigation .sf-menu li ul ul {/*border-top:0;*/ margin-top:-2px; padding-top:0; background:#313232;} /*-----------------------------------------------------------------------------------*/ /* Mobile navigation /*-----------------------------------------------------------------------------------*/ /* hide mobile navigation */ #mobile-nav, #mobile-menu, #mobile-menu-open {display:none;} /* mobile menu show link */ #mobile-menu-open {width:28px; height:28px; margin:0 auto;} #mobile-menu-open i {font-size:28px; line-height:28px;} /* mobile navigation container */ #mobile-nav {width:100%; background:#353637; position:absolute; z-index:999;} /* mobile menu style */ #m-menu, #m-menu ul {margin:0; padding:0;} #m-menu li {list-style:none; margin:0; padding:0;} #m-menu li a {color:#cecece; text-decoration:none; padding:10px 15px; display:block; font-weight:600; font-size:16px; border-bottom:solid 1px #454647; transition-duration: 0.1s; transition-timing-function: linear; transition-delay: 0.1s; -webkit-transition-duration: 0.1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0.1s;} /* add different background color for root menu items */ #m-menu > li > a {background-color:#353637;} #m-menu li a:hover {background-color:#2b2c2d; color:#4cade6;} /* submenu item */ #m-menu li li a, #m-menu li li li a, #m-menu li li li li a {font-weight:normal; font-size:13px; color:#cecece; padding-top:5px; padding-bottom:5px;} #m-menu li li a {padding-left:30px;} #m-menu li li li a {padding-left:60px; font-style:italic;} /*-----------------------------------------------------------------------------------*/ /* Fixed navigation /*-----------------------------------------------------------------------------------*/ #fixed-navigation #fixed-menu {float:right;} /* left offset of submenus need to match (see below) */ #fixed-navigation .sf-menu ul {width:160px;} /* match ul width */ #fixed-navigation ul.sf-menu li li:hover ul, #fixed-navigation ul.sf-menu li li.sfHover ul {left:160px;} /* root menu items */ #fixed-navigation .sf-menu li {background:0; margin:0;} #fixed-navigation .sf-menu li a {border:0; font-size:13px; color:#8a8a8a; opacity:1; filter:alpha(opacity=100); padding:0 15px; transition-duration: 0.1s; transition-timing-function: linear; transition-delay: 0.1s; -webkit-transition-duration: 0.1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0.1s;} #fixed-navigation > .wrap > .col-24 > .sf-menu > li > a {height:50px; line-height:50px;} /*active root menu items*/ #fixed-navigation > .wrap > .col-24 > .sf-menu > li:hover, #fixed-navigation > .wrap > .col-24 > .sf-menu > li.sfHover, #fixed-navigation > .wrap > .col-24 > .sf-menu > li.sfHover > a, #fixed-navigation > .wrap > .col-24 > .sf-menu > li.current-menu-item > a, #fixed-navigation > .wrap > .col-24 > .sf-menu > li > a:focus, #fixed-navigation > .wrap > .col-24 > .sf-menu > li > a:hover, #fixed-navigation > .wrap > .col-24 > .sf-menu > li > a:active, #fixed-navigation > .wrap > .col-24 > .sf-menu > li.selected > a, #fixed-navigation > .wrap > .col-24 > .current-menu-parent > a {background:none; color:#4cade6;} /*arrows*/ #fixed-navigation .sf-menu a.sf-with-ul {padding-right:30px;} #fixed-navigation .sf-sub-indicator {right:13px; height:100%; width:13px; bottom:0!important;} #fixed-navigation .sf-sub-indicator i {position:absolute; font-size:12px; line-height:12px; display:block; width:12px; height:12px; margin-top:-6px; top:50%;} #fixed-navigation li li .sf-sub-indicator, #fixed-navigation li li .sf-sub-indicator i {display:none;} /*dropdown menu items*/ #fixed-navigation .sf-menu > li:hover > ul, #fixed-navigation .sf-menu > li.sfHover > ul {top:50px;} #fixed-navigation .sf-menu li li {border-bottom:solid 1px #454647;} #fixed-navigation .sf-menu li li:last-child {border:0;} #fixed-navigation .sf-menu li li a {font-weight:normal; font-size:13px; text-shadow: none; padding:9px 15px; border-bottom:0; border-left:0; background-color:#353637!important; opacity:1; filter:alpha(opacity=100); color:#cecece!important;} /*dropdown hover and active menu items*/ #fixed-navigation .sf-menu li li a:hover, #fixed-navigation .sf-menu li li a:focus, #fixed-navigation .sf-menu li li a:active {opacity:1; filter:alpha(opacity=100); background-color:#2b2c2d!important; color:#4cade6!important;}