﻿ul.slimmenu i, ul.slimmenu, ul.slimmenu ul, ul.slimmenu li, .menu-collapser {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 17px; 
	/*font-size: 12px; */
	font: inherit;
	vertical-align: baseline;
}

/* HTML from JS: <div class="menu-collapser">
 * <div class="collapse-button"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
 * </div></div> */

/* subcollapser holds arrows for dropdowns:
 * <span class="sub-collapser"><i>&#9660;</i></span> */

/* to remove padding on buttons of dd menu */
body { 	line-height: 1; }

/* full width bar for mobile menu */
.menu-collapser {      background-color: transparent;     color: #ffffff; font-size: 12px;  }

/* width and bg of top level tabs */
ul.slimmenu li {     background-color: transparent;     width: 18.5%; }
ul.slimmenu li.wider { width:  20%; }
ul.slimmenu li.narrower { width:  6%; }

/* DD color width */
ul.slimmenu li ul li { background-color: #372820; width: 100%;  }

/* menu link color, text-align  */
ul.slimmenu li a {      color: #f1ecf2; font-size: 0.8em;  text-align: center; }

/* hover tab bg color */
ul.slimmenu li a:hover {    color: #ffffff;  background-color: #111111; }

/* styles for mobile li's */
ul.slimmenu.collapsed li {     width: 100%; background : #333333; border-bottom: 1px solid #000000; }


/* arrow color, size */
ul.slimmenu li .sub-collapser > i {      color: #fffacd;     font-size: 18px; }

/* keep same line heights  - change .menu-collapser padding to alter height of mobile bar */
ul.slimmenu li a, .menu-collapser   { line-height: 100%;  padding-top: 7px; padding-bottom: 7px;  }
.menu-collapser {  padding: 8px;   }
ul.slimmenu li a {     padding: 7px 40px 7px 10px; /* was 12 64 12 10 */ }
ul.slimmenu li a.nodd {  padding: 7px 0px 7px 0px;  }

/*  Keep arrow bg height same as line height  */
ul.slimmenu.collapsed li .sub-collapser {
    height: 32px; /* was 40px  */
}
.menu-collapser { height: 32px; }

/* collapse button bg on mobile menu */
.collapse-button {
background: #2a301c;     color: #ffffff;
   /* background-image: linear-gradient(to bottom, #151515, #040404); */
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
}   
.collapse-button:hover, .collapse-button:focus {    background-color: #ffffff;       color: #2a301c;  }
/*  horiz lines in collapse button  */
.collapse-button .icon-bar {       background-color: #ffffff;  }



ul.slimmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%; 
}

/* negative margin-right: no. of li -1 (?)  */
ul.slimmenu li {     position: relative;     display: inline-block; margin: 0 -4px 0 0;  }
ul.slimmenu > li { } /* was margin-right -5px  */
/* to round corners of first and last nav li:
ul.slimmenu > li:first-child { border-left: 0;   border-radius: 6px 0 0 6px; -moz-border-radius: 6px  0 0 6px;  -webkit-border-radius: 6px 0 0 6px; }
ul.slimmenu > li:last-child { margin-right: 0; border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px  6px 0;  -webkit-border-radius: 0 6px  6px 0; 
} 
ul.slimmenu > li:first-child a {  border-radius: 6px 0 0 6px; -moz-border-radius: 6px  0 0 6px;  -webkit-border-radius: 6px 0 0 6px; }
ul.slimmenu > li:last-child a {  border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px  6px 0;  -webkit-border-radius: 0 6px  6px 0; }
*/
ul.slimmenu li a {
    display: block;
    font-weight: normal;
   /*  text-shadow: 0 1px 0 rgba(255,255,255,0.9);  */
    transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -webkit-transition: background-color 0.5s ease-out;
}

ul.slimmenu li a:hover {   text-decoration: none; }

ul.slimmenu li ul {     margin: 0;     list-style-type: none; }

ul.slimmenu li > ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 999;
    width: 200px /* was 100% */ ;
}
ul.slimmenu li > ul > li ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 999;
    width: 200px  /* was 100% */;
}

ul.slimmenu.collapsed li {     display: block;     width: 100%;
border-radius: 0 0 0 0; -moz-border-radius: 0  0 0 0;  -webkit-border-radius: 0 0 0 0;
    /* box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box */
}
ul.slimmenu.collapsed li a {     display: block;     
    /* box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box */
}

ul.slimmenu.collapsed li > ul {     display: none;     position: static;  }
ul.slimmenu.collapsed li > ul, ul.slimmenu.collapsed li > ul > li {   width: 100%; }
ul.slimmenu li .sub-collapser {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.075);
    position: absolute;
    right: 0;
    top: 0;
    width: 40px; /*  was 48  */
    height: 100%;
    text-align: center;
    z-index: 999;
    cursor: pointer;
}
ul.slimmenu li .sub-collapser:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
ul.slimmenu li .sub-collapser > i {     display: inline-block;     vertical-align: middle; }


.menu-collapser {
    position: relative;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    width: 100%;
    /* height: 48px;  */
    height: auto; 
    padding-left:  8px; padding-right: 8px; 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}
.collapse-button {
    position: absolute;
    right: 8px;
    top: 50%;
   /*  width: 40px; */
   width: 32px; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);
    /* padding: 7px 10px; */
    padding: 4px 6px; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 14px;
    text-align: center;

    transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}
.collapse-button:hover, .collapse-button:focus {     background-image: none;  }
.collapse-button .icon-bar {
    border-radius: 1px 1px 1px 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    display: block;
    height: 2px;
    width: 18px;
    margin: 2px 0;
}