/* Key Creative Mobile Menu v1.0 LESS web compiler: http://less2css.org ======================================================================== HTML / jQUERY ======================================================================== [HTML / EE] ** STICK HTML CODE BELOW UNDER ** [jQuery] * */ /*======================================================================== * DEFINITIONS *========================================================================*/ /*** LOG IN / REGISTER MENU ***/ /*** MOBILE MENU *** * Change the values of the @variables below before LESS CSS compilation. * There are some automatic color shift calculations applied for things like submenus. * Also applied are automatic color gradation for menu items. */ /* Normal Menu Item State */ /* Active/Hover Menu Item State */ /* Submenu Items */ /*======================================================================== * LESS MIXINS *========================================================================*/ /*======================================================================== * STYLES *========================================================================*/ #toplinks { display: none; } @media all and (max-width: 480px) { /*** TOPLINKS STYLES ***/ #toplinks { display: block; height: 30px; margin: 0; padding: 0; font: 12px Helvetica, Arial, sans-serif; text-align: center; width: 100%; } #toplinks #login { color: #ffffff; width: 50%; float: left; background: #e26c28; } #toplinks #login a { color: #ffffff; line-height: 30px; } #toplinks #register { width: 50%; float: right; color: #ffffff; background: #663399; } #toplinks #register a { color: #ffffff; line-height: 30px; } } /*** MOBILE MENU STYLES ***/ #mobnav-wrapper { margin: 0; padding: 10px 0 0; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%); /* W3C */ /* Arrow pushed left to prevent text jumping (Aesthetics) */ } #mobnav-wrapper .arrow-n, #mobnav-wrapper .arrow-e, #mobnav-wrapper .arrow-s, #mobnav-wrapper .arrow-w { /* * In Internet Explorer, The"border-style: dashed" will never be * rendered unless "(width * 5) >= border-width" is true. * Since "width" is set to "0", the "dashed-border" remains * invisible to the user, which renders the border just like how * "border-color: transparent" renders. */ border-style: dashed; border-color: transparent; border-width: 0.53em; font-size: 8px; display: -moz-inline-box; display: inline-block; padding: 0 !important; height: 0; line-height: 0; position: relative; vertical-align: middle; width: 0; } #mobnav-wrapper .arrow-n { border-bottom-width: 1em; border-bottom-style: solid; border-bottom-color: #666666; bottom: 0.25em; } #mobnav-wrapper .arrow-e { border-left-width: 1em; border-left-style: solid; border-left-color: #666666; left: 0.25em; } #mobnav-wrapper .menu-box .arrow-e { margin-left: -7px; margin-top: -5px; } #mobnav-wrapper .arrow-s { border-top-width: 1em; border-top-style: solid; border-top-color: #666666; top: 0.25em; margin-left: -3px; margin-top: -5px; } #mobnav-wrapper .arrow-w { border-right-width: 1em; border-right-style: solid; border-right-color: #666666; right: 0.25em; } #mobnav-wrapper #navbar { z-index: 999; display: none; padding: 5px 0 3px; box-shadow: 0 2px 2px #666; -webkit-box-shadow: 0 2px 2px #666; -moz-box-shadow: 0 2px 2px #666; position: relative; height: 55px; } #mobnav-wrapper #navbar:after { display: block; clear: both; content: ''; } #mobnav-wrapper #navbar #logo-mobile { margin-top: -15px; margin-left: 8px; height: 90px; } #mobnav-wrapper #navbar #logo-mobile img { width: auto; margin-top: 5px; height: 75%; display: block; } #mobnav-wrapper #navbar .menu-box { padding: 1px 17px 20px 0; float: right; font: 25px / 30px 'League Gothic', Impact, Helvetica, Arial, sans-serif; position: absolute; bottom: 0; right: 0; } #mobnav-wrapper #navbar .menu-box .menu-opener { text-transform: uppercase; color: #46166b; text-decoration: none !important; padding: 0 10px 0 0; background: none !important; } #mobnav-wrapper .menu-holder { position: relative; width: 100%; margin: 0; display: none; z-index: 998; /* Arrow pushed left a pixel for alignment (Aesthetics) */ } #mobnav-wrapper .menu-holder li { list-style-type: none; text-align: center; } #mobnav-wrapper .menu-holder > li.first, #mobnav-wrapper .menu-holder .menu-holder > li.last { height: 20px; } #mobnav-wrapper .menu-holder li ul li.first, #mobnav-wrapper .menu-holder li ul li.last { height: 0; } #mobnav-wrapper .menu-holder .mobmenu { top: 0; left: 0; margin: 0; padding: 0; width: 100%; background: #cbcbcb; box-shadow: 0 3px 3px #888; -webkit-box-shadow: 0 3px 3px #888; -moz-box-shadow: 0 3px 3px #888; display: none; /** Active/Hover Arrow Colors **/ /* If you want all submenu arrows to be a single color */ } #mobnav-wrapper .menu-holder .mobmenu ul { margin: 0; padding: 0; } #mobnav-wrapper .menu-holder .mobmenu li:hover a span { /* background:url(/themes/beach_towel/images/bg-menu-arrow-h.png) no-repeat 100% 50%; */ } #mobnav-wrapper .menu-holder .mobmenu li:hover a span.arrow-n, #mobnav-wrapper .menu-holder .mobmenu .mobmenu li.expanded a.opener span.arrow-n { border-bottom-color: #ffffff; } #mobnav-wrapper .menu-holder .mobmenu .mobmenu li.expanded a span.arrow-n { border-bottom-color: #ffffff; } #mobnav-wrapper .menu-holder .mobmenu li:hover a span.arrow-e, #mobnav-wrapper .menu-holder .mobmenu li.expanded a.opener span.arrow-e { border-left-color: #ffffff; } #mobnav-wrapper .menu-holder .mobmenu li.expanded a span.arrow-e { border-left-color: #ffffff; } #mobnav-wrapper .menu-holder .mobmenu li:hover a span.arrow-s, #mobnav-wrapper .menu-holder .mobmenu li.expanded a.opener span.arrow-s { border-top-color: #ffffff; } #mobnav-wrapper .menu-holder .mobmenu li.expanded a span.arrow-e { border-left-color: #ffffff; } #mobnav-wrapper .menu-holder .mobmenu li:hover a span.arrow-w, #mobnav-wrapper .menu-holder .mobmenu li.expanded a.opener span.arrow-w { border-right-color: #ffffff; } #mobnav-wrapper .menu-holder .mobmenu li.expanded a span.arrow-w { border-left-color: #ffffff; } #mobnav-wrapper .menu-holder .mobmenu li a { text-align: left; text-decoration: none; display: block; color: #46166b; font-size: 13px; line-height: 26px; text-shadow: 0 1px 1px #ffffff; border: solid #cbcbcb; border-width: 0 0 1px; background: #fefefe; /* Old browsers */ background: -moz-linear-gradient(top, #fefefe 0%, #e4e4e4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #e4e4e4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fefefe 0%, #e4e4e4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fefefe 0%, #e4e4e4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fefefe 0%, #e4e4e4 100%); /* IE10+ */ background: linear-gradient(to bottom, #fefefe 0%, #e4e4e4 100%); /* W3C */ } #mobnav-wrapper .menu-holder .mobmenu li:hover a, #mobnav-wrapper .menu-holder .mobmenu li.expanded a, #mobnav-wrapper .menu-holder .mobmenu li ul li:hover a, #mobnav-wrapper .menu-holder .mobmenu li ul li.hover a { border-width: 1px 0 0; border-color: #12003e; color: #ffffff; text-shadow: 0 1px #333333; background: #46166b; /* Old browsers */ background: -moz-linear-gradient(top, #46166b 0%, #36005a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #46166b), color-stop(100%, #36005a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #46166b 0%, #36005a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #46166b 0%, #36005a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #46166b 0%, #36005a 100%); /* IE10+ */ background: linear-gradient(to bottom, #46166b 0%, #36005a 100%); /* W3C */ } #mobnav-wrapper .menu-holder .mobmenu li ul li:hover a, #mobnav-wrapper .menu-holder .mobmenu li ul li.hover a, #mobnav-wrapper .menu-holder .mobmenu li ul li:focus a, #mobnav-wrapper .menu-holder .mobmenu li ul li:active a { border-width: 0 0 1px; } #mobnav-wrapper .menu-holder .mobmenu li.has-drop:hover a span { /*background:url(/themes/beach_towel/images/arrow-02.png) no-repeat 100% 50%;*/ } #mobnav-wrapper .menu-holder .mobmenu li a span { font: 20px 'League Gothic', Impact, Helvetica, Arial, sans-serif; display: inline-block; padding: 7px 27px 7px 12px; /* background:url(/themes/beach_towel/images/bg-menu-arrow.png) no-repeat 100% 50%; */ } #mobnav-wrapper .menu-holder .mobmenu li a span.arrow-n, #mobnav-wrapper .menu-holder .mobmenu li a span.arrow-e, #mobnav-wrapper .menu-holder .mobmenu li a span.arrow-s, #mobnav-wrapper .menu-holder .mobmenu li a span.arrow-w { font-size: 8px; } #mobnav-wrapper .menu-holder .mobmenu li.expanded ul { display: block; } #mobnav-wrapper .menu-holder .mobmenu li.expanded li a { border-width: 0 0 1px; border-color: #581167; text-shadow: 0 1px 1px #000000; color: #ffffff; background: #803a88; /* Old browsers */ background: -moz-linear-gradient(top, #803a88 0%, #61227e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #803a88), color-stop(100%, #61227e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #803a88 0%, #61227e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #803a88 0%, #61227e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #803a88 0%, #61227e 100%); /* IE10+ */ background: linear-gradient(to bottom, #803a88 0%, #61227e 100%); /* W3C */ } #mobnav-wrapper .menu-holder .mobmenu li.expanded li a span, #mobnav-wrapper .menu-holder .mobmenu li li a span, #mobnav-wrapper .menu-holder .mobmenu li.has-drop:hover li a span { /* background:url(/themes/beach_towel/images/subnav-bullet.png) no-repeat 12px 50%; */ padding: 5px 11px 5px 27px; } #mobnav-wrapper .menu-holder .active, #mobnav-wrapper .menu-holder .mobmenu { display: none; } #mobnav-wrapper .menu-holder span.arrow-n, #mobnav-wrapper .menu-holder span.arrow-e, #mobnav-wrapper .menu-holder span.arrow-s, #mobnav-wrapper .menu-holder span.arrow-w { float: right; margin: 15px 15px 0; } #mobnav-wrapper .menu-holder span.arrow-s { margin: 15px 17px 0 15px; } @media all and (max-width: 480px) { #mobnav-wrapper { display: block; } #mobnav-wrapper .menu-holder .active, #mobnav-wrapper .menu-holder .mobmenu { display: block; } #mobnav-wrapper .has-drop { display: none; } #mobnav-wrapper .top-block, #mobnav-wrapper .menu-box, #mobnav-wrapper #navbar { display: block; } }