/*! Responsive menu version: 0.2.1 */ /* Suggested HTML: Menus ... Theme class options: rm-lighten(as illustrated above), rm-darken. rm-lighten theme lightens menu item backgrounds. rm-darken theme darkens menu item backgrounds. Set menu background color to any color to work with the chosen theme. */ /* Set menu background color here */ .rm-nav ul, .rm-menu { background-color: rgb(128, 51, 0); margin-top: 0; } /* Required styles =========================================================== */ /* Add clearfix to nav element container*/ .rm-container:after { content: " "; display: table; clear: both; } /* Toggle Link styles */ .rm-toggle { display: none; float: right; padding: 0 .75em; margin: 1em; height: 2em; line-height: 2em; text-decoration: none; text-transform: uppercase; background-color: rgb(128, 128, 128); /* fallback */ background-color: rgba(128, 128, 128, .5); } .rm-toggle.rm-show { display: inline-block; } /* Toggle Button styles */ .rm-toggle.rm-button { /* Use data uri */ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1NjU2N0Q1RTNBMkZFMjExQTlCNjg5QjQzQTBGRDY1QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkIzMDBDNTJGODIxMUUyOTgzN0ExQ0FEREZERTE4MCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkIzMDBDNDJGODIxMUUyOTgzN0ExQ0FEREZERTE4MCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU3NTY3RDVFM0EyRkUyMTFBOUI2ODlCNDNBMEZENjVBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU2NTY3RDVFM0EyRkUyMTFBOUI2ODlCNDNBMEZENjVBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+S+feugAAAFtJREFUeNpi/P//PwMtAeOQt4AFjU8V2xgZGXmA1E8g/oPuA2pZoAykXgLxVxQLgBLcQEociHkotOMLLgtAQcaOJehIBX+wBhHQApqnotFIHo3k0UgeipEMEGAADaRXEC7WAy0AAAAASUVORK5CYII=); /* Or use png */ /*background-image:url(menu-btn.png);*/ background-repeat:no-repeat; background-position:center center; padding: 0; width: 2.5em; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* Menu Container Element */ .rm-nav { clear: both; } /* Menu Element */ .rm-nav > ul, .rm-top-menu { clear: both; list-style: none; padding: 0; margin-left: 0; margin-bottom: 0; zoom: 1; } /* Menu & Sub Menu Items */ .rm-nav li, .rm-menu-item { position: relative; } .rm-nav > ul > .rm-last, .rm-top-menu > .rm-last { margin-bottom: 1em; } .rm-nav li a, .rm-menu-item a { padding: .75em 1em; display: block; position: relative; color:#fff; text-decoration: none; } /* Sub Menus */ .rm-nav li ul, .rm-menu-item .rm-menu { width: 100%; padding:0; margin-left: 0; list-style: none; z-index: 500; zoom: 1; } .rm-nav .rm-hover ul, .rm-nav .rm-hover .rm-menu { z-index: 600; } /* Sub Menu Items */ .rm-nav li li a, .rm-menu-item .rm-menu-item a { z-index:500; padding-left: 2em; } .rm-nav li li.rm-last a, .rm-menu-item .rm-menu-item.rm-last a { padding-bottom: 1em; } .rm-nav li li ul, .rm-menu-item .rm-menu-item .rm-menu { position: static; } .rm-nav li li li a, .rm-menu-item .rm-menu-item .rm-menu-item a { z-index:600; padding-left: 3em; } /* CSS Animations ============================================================= */ .rm-accelerate { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-backface-visibility:hidden; -webkit-perspective: 1000; } .rm-css-animate { display: block; max-height: 0; overflow: hidden; } .rm-css-animate.rm-menu-expanded { overflow: visible; } /* Theme styles ============================================================= */ .rm-nav a { -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .rm-toggle:hover, .rm-toggle:focus { background-color: rgb(156, 156, 156); /* fallback */ background-color: rgba(156, 156, 156, .5); outline: none; } .rm-lighten li li a, .rm-lighten li a:focus, .rm-lighten li a:hover, .rm-lighten li.rm-hover a, .rm-lighten .rm-menu-item .rm-menu-item a, .rm-lighten .rm-menu-item a:focus, .rm-lighten .rm-menu-item a:hover, .rm-lighten .rm-menu-item.rm-hover > a { background-color: rgb(32, 32, 32); /* fallback */ background-color: rgba(255, 255, 255, .1); outline: none; } .rm-lighten li li li a, .rm-lighten li li a:focus, .rm-lighten li li a:hover, .rm-lighten li li.rm-hover a, .rm-lighten .rm-menu-expanded li a:focus, .rm-lighten .rm-menu-expanded li a:hover, .rm-lighten .rm-menu-item .rm-menu-item .rm-menu-item a, .rm-lighten .rm-menu-item .rm-menu-item a:focus, .rm-lighten .rm-menu-item .rm-menu-item a:hover, .rm-lighten .rm-menu-item .rm-menu-item.rm-hover a, .rm-lighten .rm-menu-expanded li a:focus, .rm-lighten .rm-menu-expanded li a:hover { background-color: rgb(96, 96, 96); /* fallback */ background-color: rgba(255, 255, 255, .2); } .rm-lighten li li li a:focus, .rm-lighten li li li a:hover, .rm-lighten li li li.rm-hover a, .rm-lighten li .rm-menu-expanded a:focus, .rm-lighten li .rm-menu-expanded a:hover, .rm-lighten .rm-menu-item .rm-menu-item .rm-menu-item a:focus, .rm-lighten .rm-menu-item .rm-menu-item .rm-menu-item a:hover, .rm-lighten .rm-menu-item .rm-menu-item .rm-menu-item.rm-hover a, .rm-lighten .rm-menu-item .rm-menu-expanded a:focus, .rm-lighten .rm-menu-item .rm-menu-expanded a:hover { background-color: rgb(128, 128, 128); /* fallback */ background-color: rgba(255, 255, 255, .3); } .rm-darken li li a, .rm-darken li a:focus, .rm-darken li a:hover, .rm-darken li.rm-hover a, .rm-darken .rm-menu-item .rm-menu-item a, .rm-darken .rm-menu-item a:focus, .rm-darken .rm-menu-item a:hover, .rm-darken .rm-menu-item.rm-hover > a { background-color: rgb(192, 192, 192); /* fallback */ background-color: rgba(0, 0, 0, .1); outline: none; } .rm-darken li li li a, .rm-darken li li a:focus, .rm-darken li li a:hover, .rm-darken li li.rm-hover a, .rm-darken .rm-menu-expanded li a:focus, .rm-darken .rm-menu-expanded li a:hover, .rm-darken .rm-menu-item .rm-menu-item .rm-menu-item a, .rm-darken .rm-menu-item .rm-menu-item a:focus, .rm-darken .rm-menu-item .rm-menu-item a:hover, .rm-darken .rm-menu-item .rm-menu-item.rm-hover a, .rm-darken .rm-menu-expanded li a:focus, .rm-darken .rm-menu-expanded li a:hover { background-color: rgb(160, 160, 160); /* fallback */ background-color: rgba(0, 0, 0, .2); } .rm-darken li li li a:focus, .rm-darken li li li a:hover, .rm-darken li li li.rm-hover a, .rm-darken li .rm-menu-expanded a:focus, .rm-darken li .rm-menu-expanded a:hover, .rm-darken .rm-menu-item .rm-menu-item .rm-menu-item a:focus, .rm-darken .rm-menu-item .rm-menu-item .rm-menu-item a:hover, .rm-darken .rm-menu-item .rm-menu-item .rm-menu-item.rm-hover a, .rm-darken .rm-menu-item .rm-menu-expanded a:focus, .rm-darken .rm-menu-item .rm-menu-expanded a:hover { background-color: rgb(128, 128, 128); /* fallback */ background-color: rgba(0, 0, 0, .3); } /* Expanded Layout styles - .rm-layout-expanded class is applied by plugin ========= */ .rm-layout-expanded .rm-nav > ul, .rm-layout-expanded .rm-top-menu { margin-bottom: 0; } .rm-layout-expanded .rm-nav > ul > li, .rm-layout-expanded .rm-top-menu > .rm-menu-item { float: left; } .rm-layout-expanded .rm-nav > ul > .rm-last, .rm-layout-expanded .rm-top-menu > .rm-last { margin-bottom: 0; } .rm-layout-expanded .rm-nav > ul > li > a, .rm-layout-expanded .rm-top-menu > .rm-menu-item > a { height: 3em; line-height: 3em; /* match with height to center vertically */ padding-top: 0; padding-bottom: 0; } .rm-layout-expanded li ul, .rm-layout-expanded .rm-menu-item .rm-menu { width: 15em; position: absolute; left: 0; } .rm-layout-expanded li.rm-last ul, .rm-layout-expanded .rm-menu-item.rm-last .rm-menu, .rm-layout-expanded li.rm-2nd-last ul, .rm-layout-expanded .rm-menu-item.rm-2nd-last .rm-menu { left: auto; right: 0; } .rm-layout-expanded li li ul, .rm-layout-expanded .rm-menu-item .rm-menu-item .rm-menu { position: absolute; left: 100%; top: 0; } .rm-layout-expanded li li.rm-last ul, .rm-layout-expanded .rm-menu-item .rm-menu-item.rm-last .rm-menu, .rm-layout-expanded li li.rm-2nd-last ul, .rm-layout-expanded .rm-menu-item .rm-menu-item.rm-2nd-last .rm-menu{ right: 100%; left: auto; } .rm-layout-expanded li a, .rm-layout-expanded li li a, .rm-layout-expanded li li li a, .rm-layout-expanded .rm-menu-item a, .rm-layout-expanded .rm-menu-item .rm-menu-item a, .rm-layout-expanded .rm-menu-item .rm-menu-item .rm-menu-item a { padding-left: 1em; } /* clearfix */ .rm-layout-expanded .rm-nav > ul:before, .rm-layout-expanded .rm-nav > ul:after, .rm-layout-expanded .rm-top-menu:before, .rm-layout-expanded .rm-top-menu:after { content: " "; display: table; } .rm-layout-expanded .rm-nav > ul:after, .rm-layout-expanded .rm-top-menu:after { clear: both; } /* No JS Styles ============================================================= */ /* Hide Sub Menus */ .no-js .rm-nav li ul, .rm-nojs li ul, .no-js .rm-nav .rm-menu-item .rm-menu, .rm-nojs .rm-menu-item .rm-menu { position: absolute; left: -999em; } .rm-toggle.rm-nojs { display: inline-block; visibility: hidden; } /* Expanded layout if JS not supported */ /* Note: The min-width value here should match minWidth value set in JS */ @media screen and ( min-width: 769px ) { .rm-nojs > ul > li, .no-js .rm-nav > ul > li, .rm-nojs > .rm-menu > .rm-menu-item, .no-js .rm-nav > .rm-menu > .rm-menu-item { float: left; } .rm-nojs li a, .no-js .rm-nav li a, .rm-nojs .rm-menu-item a, .no-js .rm-nav .rm-menu-item a { padding-left: 1em; } /* clearfix */ .rm-nojs > ul:before, .rm-nojs > ul:after, .no-js .rm-nav > ul:before, .no-js .rm-nav > ul:after, .rm-nojs > .rm-menu:before, .rm-nojs > .rm-menu:after, .no-js .rm-nav > .rm-menu:before, .no-js .rm-nav > .rm-menu:after{ content: " "; display: table; } .rm-nojs > ul:after, .no-js .rm-nav > ul:after, .rm-nojs > .rm-menu:after, .no-js .rm-nav > .rm-menu:after { clear: both; } .rm-toggle.rm-nojs { display: none; } } /* Calculation Styles ============================================================ * Applied and removed by jQuery during menu height calculations */ .rm-calculate { position: absolute !important; max-height: none !important; overflow: visible !important; } .rm-layout-contracted .rm-calculate { width: 100% !important; } /* Accessibility ============================================================ */ .rm-container .accessibly-hidden { position: absolute; left: -999em; }