/*
 * Navigataur: A pure CSS responsive navigation menu
 * Author: Mike King (@micjamking)
 */

/*
         Notes:
 
         - Media queries should be edited in both style sections if you require 
          a different breakpoint for your navigation.
          
        - Toggle class & menu anchor tags in list items have box-sizing: border-box 
          style property to allow padding inside the container without conflicting with layout.        

*/


/*--------------------------------
 Functional Styles (Required)
---------------------------------*/

.header { position: relative; }
#toggle, .toggle { display: none; }
.menu > li { list-style: none; float:left; }

/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

@media only screen and (max-width: 768px){
        .menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
        .menu > li { display: block; width: 100%; margin: 0; }
        .menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
        .toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; font-family:Tahoma, sans-serif; }
        #toggle:checked + div .menu { display: block; opacity: 1;}
}

#nav{ 
        display: block; 
        float: right;
		text-align:right;
}

.nav, .menu, .menu > li, .menu > li > a{ 
        height: 100%; 
}

.menu > li { display:inline-block; line-height:15px; float:left; }

.menu > li > a{
	padding-left:6px; padding-right:6px; padding-top:4px; padding-bottom:4px; color:#603813; text-decoration:none; font-size:13px; font-family:"Tahoma", sans-serif; letter-spacing:0.1em; font-weight:bold;
}

.menu > li > a:hover, .menu > li > a:focus{
 color:#aa8e63;
}

.menu > li { color:#e7decf; font-size:25px; position:relative; }
.menu-text { position:relative; top:5px; }

.menu > li > a:hover, .menu > li > a.current{
 color:#603813;
}

.toggle{ 
        z-index: 22222222222222222222222222; 
}

@media only screen and (max-width: 768px){
        .menu{
                background: #a98e66;
				z-index:9999999999999999999999999; text-align:left;
        }
        
		.menu > li > a:focus {  }
		
        .menu, .menu > li, .menu > li > a{
                height: auto; color:#fff;
        }
        
        .menu > li > a{
                padding: 5px 5px; border-bottom:1px solid #8f7754;
        }
		
		.menu-text { position:relative; top:5px; display:none; }
        
        .menu > li > a:hover, .menu > li > a:focus{
                background: #5f3817; color:#fff;
                box-shadow: inset 5px 0px #fff;
                padding: 5px 5px 5px 10px; background:url(../images/nav-icon.gif) no-repeat right #5f3817;
        }
        
        .toggle:after {
                content: attr(data-open);
                display: block;
                width: 50px;
                margin: 0 0;
                padding: 6px 6px;
                background: #a98e66;
                -webkit-border-radius: 2px;
                border-radius: 2px;
                text-align: center;
                font-size: 12px;
                color: #FFFFFF;
                -webkit-transition: all 0.5s linear;
                -moz-transition: all 0.5s linear;
                -o-transition: all 0.5s linear;
                transition: all 0.5s linear;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
				margin-top:75px;
        }
        
        .toggle:hover:after{
                background: #5f3817;
        }
        
        #toggle:checked + div .toggle:after{
                content: attr(data-close);
        }
}

@media only screen and (max-width: 479px){
        .header > h1 { 
                text-align: center;
        }
        .header > h1, .nav, .toggle:after{ 
                float: none; 
        }
        .toggle:after { 
                text-align: center; margin-top:20px; margin-bottom:20px;       }
}