.sm { position: relative; z-index: 9999 } .sm,.sm li,.sm ul { list-style: none; margin: 0; padding: 0; line-height: normal; direction: ltr; text-align: left; -webkit-tap-highlight-color: transparent } .sm,.sm li { display: block } .sm-rtl,.sm-rtl li,.sm-rtl ul { direction: rtl; text-align: right } .sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6 { margin: 0; padding: 0 } .sm ul { display: none } .sm a,.sm li { position: relative } .sm a,.sm:after { display: block } .sm a.disabled { cursor: not-allowed } .sm:after { content: " "; height: 0; font: 0/0 serif; clear: both; visibility: hidden; overflow: hidden } .sm,.sm *,.sm :after,.sm :before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } .main-menu-btn { position: relative; display: inline-block; width: 36px; height: 36px; text-indent: 36px; margin-left: 8px; white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent } .main-menu-btn-icon { top: 50%; left: 2px } .main-menu-btn-icon,.main-menu-btn-icon:after,.main-menu-btn-icon:before { position: absolute; height: 2px; width: 24px; background: #364D7C; -webkit-transition: all .25s; transition: all .25s } .main-menu-btn-icon:before { content: ""; top: -7px; left: 0 } .main-menu-btn-icon:after { content: ""; top: 7px; left: 0 } #main-menu-state:checked~.main-menu-btn .main-menu-btn-icon { height: 0 } #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) } #main-menu-state { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(1px,1px,1px,1px) } #main-menu-state:not(:checked)~#main-menu { display: none } #main-menu-state:checked~#main-menu { display: block } @media (min-width:768px) { .main-menu-btn { position: absolute; top: -99999px } #main-menu-state:not(:checked)~#main-menu { display: block } } .sm-dox { background-color: white } .sm-dox a,.sm-dox a:active,.sm-dox a:focus,.sm-dox a:hover { padding: 0 43px 0 12px; font-family: 'Lucida Grande',Geneva,Helvetica,Arial,sans-serif; font-size: 13px; line-height: 36px; text-decoration: none; color: #283A5D; outline: 0 } .sm-dox a:hover { background-color: #DCE2EF; border-radius: 5px } .sm-dox a.current { color: #d23600 } .sm-dox a.disabled { color: #bbb } .sm-dox a span.sub-arrow { position: absolute; top: 50%; margin-top: -14px; left: auto; right: 3px; width: 28px; height: 28px; overflow: hidden; font: 700 12px/28px monospace!important; text-align: center; text-shadow: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px } .sm-dox a span.sub-arrow:before { display: block; content: "+" } .sm-dox a.highlighted span.sub-arrow:before { display: block; content: "-" } .sm-dox>li:first-child>:not(ul) a,.sm-dox>li:first-child>a { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px; border-radius: 5px 5px 0 0 } .sm-dox>li:last-child>:not(ul) a,.sm-dox>li:last-child>a,.sm-dox>li:last-child>ul,.sm-dox>li:last-child>ul>li:last-child>:not(ul) a,.sm-dox>li:last-child>ul>li:last-child>a,.sm-dox>li:last-child>ul>li:last-child>ul,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul { -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0; border-radius: 0 0 5px 5px } .sm-dox>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>a.highlighted,.sm-dox>li:last-child>ul>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>ul>li:last-child>a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>:not(ul) a.highlighted,.sm-dox>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>ul>li:last-child>a.highlighted { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0 } .sm-dox ul { background: white } .sm-dox ul a,.sm-dox ul a:active,.sm-dox ul a:focus,.sm-dox ul a:hover { font-size: 12px; border-left: 8px solid transparent; line-height: 36px; text-shadow: none; background-color: white; background-image: none } .sm-dox ul a:hover { background-color: #DCE2EF; border-radius: 5px } .sm-dox ul ul a,.sm-dox ul ul a:active,.sm-dox ul ul a:focus,.sm-dox ul ul a:hover { border-left: 16px solid transparent } .sm-dox ul ul ul a,.sm-dox ul ul ul a:active,.sm-dox ul ul ul a:focus,.sm-dox ul ul ul a:hover { border-left: 24px solid transparent } .sm-dox ul ul ul ul a,.sm-dox ul ul ul ul a:active,.sm-dox ul ul ul ul a:focus,.sm-dox ul ul ul ul a:hover { border-left: 32px solid transparent } .sm-dox ul ul ul ul ul a,.sm-dox ul ul ul ul ul a:active,.sm-dox ul ul ul ul ul a:focus,.sm-dox ul ul ul ul ul a:hover { border-left: 40px solid transparent } @media (min-width:768px) { .sm-dox ul { position: absolute; width: 12em; border: 1px solid #bbb; padding: 5px 0; background: white; -moz-border-radius: 5px!important; -webkit-border-radius: 5px; border-radius: 5px!important; -moz-box-shadow: 0 5px 9px rgba(0,0,0,.2); -webkit-box-shadow: 0 5px 9px rgba(0,0,0,.2); box-shadow: 0 5px 9px rgba(0,0,0,.2) } .sm-dox li { float: left; border-top: 0; padding: 3px } .sm-dox.sm-rtl li { float: right } .sm-dox ul li,.sm-dox.sm-rtl ul li,.sm-dox.sm-vertical li { float: none } .sm-dox a { white-space: nowrap } .sm-dox ul a,.sm-dox.sm-vertical a { white-space: normal } .sm-dox .sm-nowrap>li>:not(ul) a,.sm-dox .sm-nowrap>li>a { white-space: nowrap } .sm-dox,.sm-dox a span.sub-arrow { background-color: white } .sm-dox { padding: 0 10px; line-height: 36px } .sm-dox a span.sub-arrow { top: 15px; right: 10px; box-sizing: content-box; padding: 0; margin: 0; display: inline-block; width: 5px; height: 5px; border-right: 2px solid #B6C4DF; border-bottom: 2px solid #B6C4DF; transform: rotate(45deg); -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0 } .sm-dox a,.sm-dox a.highlighted,.sm-dox a:active,.sm-dox a:focus,.sm-dox a:hover { padding: 0 6px } .sm-dox a:hover { background-color: #DCE2EF; border-radius: 5px!important } .sm-dox a:hover span.sub-arrow { background-color: #DCE2EF; border-right: 2px solid #90A5CE; border-bottom: 2px solid #90A5CE } .sm-dox a.has-submenu { padding-right: 24px } .sm-dox>li>ul:after,.sm-dox>li>ul:before { content: ""; position: absolute; top: -18px; left: 30px; width: 0; height: 0; overflow: hidden; border-width: 9px; border-style: dashed dashed solid; border-color: transparent transparent #bbb } .sm-dox>li>ul:after { top: -16px; left: 31px; border-width: 8px; border-color: transparent transparent white transparent } .sm-dox ul a span.sub-arrow { transform: rotate(-45deg); top: 3px; } .sm-dox ul a,.sm-dox ul a.highlighted,.sm-dox ul a:active,.sm-dox ul a:focus,.sm-dox ul a:hover { color: #555555; background-image: none; line-height: normal; border: 0!important } .sm-dox ul a:hover { background-color: #DCE2EF; border-radius: 5px } .sm-dox span.scroll-down,.sm-dox span.scroll-up { position: absolute; display: none; visibility: hidden; overflow: hidden; background: white; height: 36px } .sm-dox span.scroll-down:hover,.sm-dox span.scroll-up:hover { background: #eee } .sm-dox span.scroll-up:hover span.scroll-down-arrow,.sm-dox span.scroll-up:hover span.scroll-up-arrow { border-color: transparent transparent #d23600 } .sm-dox span.scroll-down:hover span.scroll-down-arrow { border-color: #d23600 transparent transparent } .sm-dox span.scroll-down-arrow,.sm-dox span.scroll-up-arrow { position: absolute; top: 0; left: 50%; margin-left: -6px; width: 0; height: 0; overflow: hidden; border-width: 6px; border-style: dashed dashed solid; border-color: transparent transparent #555555 transparent } .sm-dox span.scroll-down-arrow { top: 8px; border-style: solid dashed dashed; border-color: #555555 transparent transparent transparent } .sm-dox.sm-rtl a.has-submenu { padding-right: 6px; padding-left: 24px } .sm-dox.sm-rtl a span.sub-arrow { right: auto; left: 6px } .sm-dox.sm-rtl.sm-vertical a.has-submenu,.sm-dox.sm-vertical a,.sm-dox.sm-vertical ul a { padding: 10px 20px } .sm-dox.sm-rtl ul a span.sub-arrow,.sm-dox.sm-rtl.sm-vertical a span.sub-arrow { right: auto; left: 8px; border-style: dashed solid dashed dashed; border-color: transparent #555 transparent transparent } .sm-dox.sm-rtl>li>ul:before { left: auto; right: 30px } .sm-dox.sm-rtl>li>ul:after { left: auto; right: 31px } .sm-dox.sm-rtl ul a.has-submenu { padding: 10px 20px!important } .sm-dox.sm-vertical { padding: 10px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px } .sm-dox.sm-vertical a.highlighted,.sm-dox.sm-vertical a:active,.sm-dox.sm-vertical a:focus,.sm-dox.sm-vertical a:hover { background: #fff } .sm-dox.sm-vertical a span.sub-arrow { right: 8px; top: 50%; margin-top: -5px; border-width: 5px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #555 } .sm-dox.sm-vertical>li>ul:after,.sm-dox.sm-vertical>li>ul:before { display: none } .sm-dox.sm-vertical ul a.highlighted,.sm-dox.sm-vertical ul a:active,.sm-dox.sm-vertical ul a:focus,.sm-dox.sm-vertical ul a:hover { background: #eee } .sm-dox.sm-vertical ul a.disabled { background: white } }