.sm-blue { background: transparent; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active { padding: 10px 20px; /* make room for the toggle button (sub indicator) */ padding-right: 58px; background: #3092c0; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: linear-gradient(to bottom, #3298c8, #2e8cb8); color: white; font-family:  Arial, Helvetica, sans-serif; font-size: 12px; /*  font-weight: bold;  */ line-height: 16px; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .sm-blue a.current { background: #006892; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c)); background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c); background-image: -moz-linear-gradient(to bottom, #006188, #006f9c); background-image: -o-linear-gradient(to bottom, #006188, #006f9c); background-image: linear-gradient(to bottom, #006188, #006f9c); color: white; } .sm-blue a.disabled { color: #a1d1e8; } .sm-blue a span.sub-arrow { position: absolute; top: 50%; margin-top: -17px; left: auto; right: 4px; width: 34px; height: 34px; overflow: hidden; font: bold 16px/34px monospace !important; text-align: center; text-shadow: none; background: rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .sm-blue a.highlighted span.sub-arrow:before { display: block; content: '-'; } .sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a { -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; -ms-border-radius: 8px 8px 0 0; -o-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } .sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul { -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; -ms-border-radius: 0 0 8px 8px; -o-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } .sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .sm-blue ul { background: white; } .sm-blue ul ul { background: rgba(102, 102, 102, 0.1); } .sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active { background: transparent; color: #2b82ac; font-size: 16px; text-shadow: none; border-left: 8px solid transparent; } .sm-blue ul a.current { background: #006892; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c)); background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c); background-image: -moz-linear-gradient(to bottom, #006188, #006f9c); background-image: -o-linear-gradient(to bottom, #006188, #006f9c); background-image: linear-gradient(to bottom, #006188, #006f9c); color: white; } .sm-blue ul a.disabled { color: #b3b3b3; } .sm-blue ul ul a, .sm-blue ul ul a:hover, .sm-blue ul ul a:focus, .sm-blue ul ul a:active { border-left: 16px solid transparent; } .sm-blue ul ul ul a, .sm-blue ul ul ul a:hover, .sm-blue ul ul ul a:focus, .sm-blue ul ul ul a:active { border-left: 24px solid transparent; } .sm-blue ul ul ul ul a, .sm-blue ul ul ul ul a:hover, .sm-blue ul ul ul ul a:focus, .sm-blue ul ul ul ul a:active { border-left: 32px solid transparent; } .sm-blue ul ul ul ul ul a, .sm-blue ul ul ul ul ul a:hover, .sm-blue ul ul ul ul ul a:focus, .sm-blue ul ul ul ul ul a:active { border-left: 40px solid transparent; } .sm-blue ul li { border-top: 1px solid rgba(0, 0, 0, 0.05); } .sm-blue ul li:first-child { border-top: 0; } @media (min-width: 769px) { /* Switch to desktop layout ----------------------------------------------- These transform the menu tree from collapsible to desktop (navbar + dropdowns) -----------------------------------------------*/ /* start... (it's not recommended editing these rules) */ .sm-blue ul { position: absolute; width: 12em; } .sm-blue li { float: left; } .sm-blue.sm-rtl li { float: right; } .sm-blue ul li, .sm-blue.sm-rtl ul li, .sm-blue.sm-vertical li { float: none; } .sm-blue a { white-space: nowrap; } .sm-blue ul a, .sm-blue.sm-vertical a { white-space: normal; } .sm-blue .sm-nowrap > li > a, .sm-blue .sm-nowrap > li > :not(ul) a { white-space: nowrap; } /* ...end */ .sm-blue { background: #3092c0; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: linear-gradient(to bottom, #3298c8, #2e8cb8); -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted { padding: 13px 24px; background: #3092c0; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: linear-gradient(to bottom, #3298c8, #2e8cb8); color: white; } .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted { background: #2b82ac; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #2d89b4), color-stop(100%, #297ca3)); background-image: -webkit-linear-gradient(to bottom, #2d89b4, #297ca3); background-image: -moz-linear-gradient(to bottom, #2d89b4, #297ca3); background-image: -o-linear-gradient(to bottom, #2d89b4, #297ca3); background-image: linear-gradient(to bottom, #2d89b4, #297ca3); } .sm-blue a.current { background: #006892; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c)); background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c); background-image: -moz-linear-gradient(to bottom, #006188, #006f9c); background-image: -o-linear-gradient(to bottom, #006188, #006f9c); background-image: linear-gradient(to bottom, #006188, #006f9c); color: white; } .sm-blue a.disabled { background: #3092c0; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: linear-gradient(to bottom, #3298c8, #2e8cb8); color: #a1d1e8; } .sm-blue a span.sub-arrow { top: auto; margin-top: 0; bottom: 2px; left: 50%; margin-left: -5px; right: auto; width: 0; height: 0; border-width: 5px; border-style: solid dashed dashed dashed; border-color: #a1d1e8 transparent transparent transparent; background: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .sm-blue a.highlighted span.sub-arrow:before { display: none; } .sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a { -webkit-border-radius: 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px; -ms-border-radius: 8px 0 0 8px; -o-border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px; } .sm-blue > li:last-child > a, .sm-blue > li:last-child > :not(ul) a { -webkit-border-radius: 0 8px 8px 0 !important; -moz-border-radius: 0 8px 8px 0 !important; -ms-border-radius: 0 8px 8px 0 !important; -o-border-radius: 0 8px 8px 0 !important; border-radius: 0 8px 8px 0 !important; } .sm-blue > li { border-left: 1px solid #2b82ac; } .sm-blue > li:first-child { border-left: 0; } .sm-blue ul { border: 1px solid #a8a8a8; padding: 7px 0; background: white; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -ms-border-radius: 0 0 4px 4px; -o-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; -webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); } .sm-blue ul ul { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background: white; } .sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted { border: 0 !important; padding: 9px 23px; background: transparent; color: #2b82ac; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -ms-border-radius: 0 !important; -o-border-radius: 0 !important; border-radius: 0 !important; } .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted { background: #3092c0; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8)); background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8); background-image: linear-gradient(to bottom, #3298c8, #2e8cb8); color: white; } .sm-blue ul a.current { background: #006892; background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c)); background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c); background-image: -moz-linear-gradient(to bottom, #006188, #006f9c); background-image: -o-linear-gradient(to bottom, #006188, #006f9c); background-image: linear-gradient(to bottom, #006188, #006f9c); color: white; } .sm-blue ul a.disabled { background: white; color: #b3b3b3; } .sm-blue ul a span.sub-arrow { top: 50%; margin-top: -5px; bottom: auto; left: auto; margin-left: 0; right: 10px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #a1d1e8; } .sm-blue ul li { border: 0; } .sm-blue span.scroll-up, .sm-blue span.scroll-down { position: absolute; display: none; visibility: hidden; overflow: hidden; background: white; height: 20px; } .sm-blue span.scroll-up-arrow, .sm-blue span.scroll-down-arrow { position: absolute; top: -2px; left: 50%; margin-left: -8px; width: 0; height: 0; overflow: hidden; border-width: 8px; border-style: dashed dashed solid dashed; border-color: transparent transparent #2b82ac transparent; } .sm-blue span.scroll-down-arrow { top: 6px; border-style: solid dashed dashed dashed; border-color: #2b82ac transparent transparent transparent; } .sm-blue.sm-rtl.sm-vertical a span.sub-arrow { right: auto; left: 10px; border-style: dashed solid dashed dashed; border-color: transparent #a1d1e8 transparent transparent; } .sm-blue.sm-rtl > li:first-child > a, .sm-blue.sm-rtl > li:first-child > :not(ul) a { -webkit-border-radius: 0 8px 8px 0; -moz-border-radius: 0 8px 8px 0; -ms-border-radius: 0 8px 8px 0; -o-border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0; } .sm-blue.sm-rtl > li:last-child > a, .sm-blue.sm-rtl > li:last-child > :not(ul) a { -webkit-border-radius: 8px 0 0 8px !important; -moz-border-radius: 8px 0 0 8px !important; -ms-border-radius: 8px 0 0 8px !important; -o-border-radius: 8px 0 0 8px !important; border-radius: 8px 0 0 8px !important; } .sm-blue.sm-rtl > li:first-child { border-left: 1px solid #2b82ac; } .sm-blue.sm-rtl > li:last-child { border-left: 0; } .sm-blue.sm-rtl ul a span.sub-arrow { right: auto; left: 10px; border-style: dashed solid dashed dashed; border-color: transparent #a1d1e8 transparent transparent; } .sm-blue.sm-vertical { -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .sm-blue.sm-vertical a { padding: 9px 23px; } .sm-blue.sm-vertical a span.sub-arrow { top: 50%; margin-top: -5px; bottom: auto; left: auto; margin-left: 0; right: 10px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #a1d1e8; } .sm-blue.sm-vertical > li:first-child > a, .sm-blue.sm-vertical > li:first-child > :not(ul) a { -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; -ms-border-radius: 8px 8px 0 0; -o-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } .sm-blue.sm-vertical > li:last-child > a, .sm-blue.sm-vertical > li:last-child > :not(ul) a { -webkit-border-radius: 0 0 8px 8px !important; -moz-border-radius: 0 0 8px 8px !important; -ms-border-radius: 0 0 8px 8px !important; -o-border-radius: 0 0 8px 8px !important; border-radius: 0 0 8px 8px !important; } .sm-blue.sm-vertical > li { border-left: 0 !important; } .sm-blue.sm-vertical ul { -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; -ms-border-radius: 4px !important; -o-border-radius: 4px !important; border-radius: 4px !important; } .sm-blue.sm-vertical ul a { padding: 9px 23px; } } /*small menu toggle*/ .main-menu-btn { position: relative; display: inline-block; width: 28px; height: 28px; text-indent: 28px; white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); } /* hamburger icon */ .main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after { position: absolute; top: 50%; left: 2px; height: 2px; width: 24px; background: #f00; -webkit-transition: all 0.25s; transition: all 0.25s; } .main-menu-btn-icon:before { content: ''; top: -7px; left: 0; } .main-menu-btn-icon:after { content: ''; top: 7px; left: 0; } /* x icon */ #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon { height: 0; background: transparent; } #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* hide menu state checkbox offscreen (so it stays visible to screen readers) */ #main-menu-state { position: absolute; top: -99999px; } /* hide the menu in mobile view */ #main-menu-state:not(:checked) ~ #main-menu { display: none; } #main-menu-state:checked ~ #main-menu { display: block; } @media (min-width: 769px) { /* hide the button in desktop view */ .main-menu-btn { position: absolute; top: -99999px; } /* always show the menu in desktop view */ #main-menu-state:not(:checked) ~ #main-menu { display: block; } }