@charset "utf-8";
/* CSS Menu  */
/* http://dhirajkumarsingh.wordpress.com/2012/05/20/css3-animated-dropdown-menu/ */
/* changed to remove black button background Ian */

/*

<ul id="kmenu">
        <li><a href="#">Home</a></li>
        <li>
                <a href="#">Categories</a>
                <ul>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">Graphic design</a></li>
                        <li><a href="#">Development tools</a></li>
                        <li><a href="#">Web design</a></li>
                </ul>
        </li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
</ul>


*/

/* Mini reset
Reset the default ul styles. */

#kmenu, #kmenu ul {
        margin: 0;
        padding: 0;
        list-style: none;
}


/*
Main level
The #kmenu is basically the main ul for this menu. CSS3 things like gradients, shadows and rounded corners 

*/

#kmenu {
        width: 575px;		/*  960px;  */
/*        margin: 60px auto;			*/
/*
        border: 1px solid #222;
        background-color: #111;
        background-image: linear-gradient(#444, #111);
        border-radius: 6px;
        box-shadow: 0 1px 1px #777;
*/
}

/*  Clear Floats  */


#kmenu:before,
#kmenu:after {
        content: "";

        display: table;
}

#kmenu:after {
        clear: both;
}

#kmenu {
        zoom:1;
}

/* 

List Elements 
Please notice the #kmenu li:hover > a  selector. This is perhaps the most important CSS trick for this CSS3 dropdown menu.
So, this is how this works: Select an “a” element that is child of a “li” ; the “li” element must be a descendant of the “#kmenu”.
Read more http://www.w3.org/TR/CSS2/selector.html#child-selectors

*/


#kmenu li {
        float: left;
        border-right: 1px solid #FFF;		/*  #222;  */
        box-shadow: 1px 0 0 #444;
        position: relative;
		z-index: 100;
}

#kmenu a {
        float: left;
        padding: 10px 10px;		/*  12px 30px;  */
        /* color: white;		/*  #999;  */
		color: #DBDBDB;
        text-transform: uppercase;
/*
        font:  18px Arial, Helvetica;  /*  bold 12px Arial, Helvetica;  */
/*
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
*/		
		
		
		
	width: auto;
	list-style-type: none;
	border-right-width: 0px;
	border-right-style: none;
	border-right-color: black;  /*  #666666;  */
	padding-right: 5px;  /*  0px;  */
	padding-left: 5px;  /* 0px;  */
	border-left-width: 0px;
	border-left-style: none;
	border-left-color: #666666;
	letter-spacing: .1em;
	
			
}

#kmenu li:hover > a {
        /*  color: #fafafa;  */
		color: #0580FC;		/* F7BA59;		 text colour of sub menu when cursor passes over it */

}

*html #kmenu li a:hover { /* IE6 only */
        /*  color: #fafafa;  */
		color: #F7BA59;		/* text colour of sub menu when cursor passes over it */
}


/*  

Submenus
With CSS3 transitons we can animate changes to CSS properties like margin or opacity and I’ve used this for animating the CSS3 sub-menus. 
*/


#kmenu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 1;

        background: #CADEF9;			/* F7BA59;	 #444;  */
        background: linear-gradient(0275E8, 02488E);		/* (#5775F9, #394CA0);			/* (#F7BA59, #BF8E44);			/* (#444, #111); */
        box-shadow: 0 -1px 0 (255,255,255,.3);  				/*  rgba(255,0,0,.3);   */
        border-radius: 3px;
		
        transition: all .2s ease-in-out;
		
		letter-spacing: 0em;
		font-size: 90%;
		border-right-width: 0px;
		border-right-style: none;
		border-right-color: black;  /*  #666666;  */
		padding-right: 0px;  /*  0px;  */
		padding-left: 0px;  /* 0px;  */
		border-left-width: 0px;
		border-left-style: none;
		border-left-color: #666666;
		

}

#kmenu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
}

#kmenu ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
/*
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
*/
}

#kmenu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
/*		
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
*/
}

#kmenu ul li:last-child {
        box-shadow: none;
}

#kmenu ul a {
        padding: 10px;
        width: 130px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
		color: #382C0D;
}

#kmenu ul a:hover {
        background-color: #CADEF9;		/* dark brown 42340D;				#sea blue 0186ba;  */
        background-image: linear-gradient(#5775F9, #394CA0);		/* brown (#82671F, #42340D);		 ( bluey #04acec, #0186ba);  */
		color: white;		/* text colour of sub menu when cursor passes over it */
}



/*
First and last list elements styles
css3-dropdown-first-last-items  */

#kmenu ul li:first-child > a {
        border-radius: 3px 3px 0 0;
}

#kmenu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
}

#kmenu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-right: 6px solid #3b3b3b;
}

#kmenu ul li:first-child a:hover:after {
        border-bottom-color: #04acec;
}

#kmenu ul ul li:first-child a:hover:after {
        border-right-color: #0299d3;
        border-bottom-color: transparent;
}

#kmenu ul li:last-child > a {
        border-radius: 0 0 3px 3px;
}


/*
The jQuery

As you already get used to, IE6 gets some extra attention:

$(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
        $('li').has('ul').mouseover(function(){
                $(this).children('ul').css('visibility','visible');
                }).mouseout(function(){
                $(this).children('ul').css('visibility','hidden');
                })
  }
});

While the :hover pseudo-class does not work for other elements than anchor, we just need to add this small jQuery snippet to fix it. It’s pretty self-explanatory.

*/

/*
Update: Mobile navigation support
css3-mobile-dropdown
This is something I wished to do for a while and I finally made it. I just added support for mobile devices and fixed the navigation for iPad.
You know how much I love CSS only solutions, but this time we’ll be using some jQuery to enhance this menu. To view the result, you can narrow your browser window or browse it with your smartphone.
The viewport meta tag
To maintain everything at the correct scale, the first thing added is the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

*/

/*
Small HTML update
You need to wrap the above HTML structure using something like: <nav id="kmenu-wrap">. This will be our relative holder for the mobile navigation.
The jQuery add
After page loads, we’ll add the #kmenu-trigger element which does exactly what you think: will trigger the mobile menu when it will be clicked. Further, in the CSS, you’ll see that this element is displayed using CSS3 media queries.
Another thing here is the iPad device detection. As you can see below, we’ll remove the fancy transition effect and stick to toggling display: none/block. This way, the functionality will be maintained also on the iPad.

/* Mobile */
/*
$('#kmenu-wrap').prepend('<div id="kmenu-trigger">Menu</div>');
$("#kmenu-trigger").on("click", function(){
        $("#kmenu").slideToggle();
});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#kmenu ul').addClass('no-transition');
*/


/*
The mobile CSS

Here, the CSS3 media queries do the trick. We’ll add CSS rules to override the initial styles:

*/


#kmenu-trigger { /* Hide it initially */
        display: none;
}

@media screen and (max-width: 600px) {

        #kmenu-wrap {
                position: relative;
        }

        #kmenu-wrap * {
                box-sizing: border-box;
        }

        #kmenu-trigger {
                display: block; /* Show it now */
                height: 40px;
                line-height: 40px;
                cursor: pointer;
                padding: 0 0 0 35px;
                border: 1px solid #222;
                color: #fafafa;
                font-weight: bold;
/*				
                background-color: #111;
*/
                /* Multiple backgrounds here, the first is base64 encoded */
/*
                background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
                border-radius: 6px;
                box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
*/				
        }

        #kmenu {
                margin: 0; padding: 10px;
                position: absolute;
                top: 40px;
                width: 100%;
                z-index: 1;
                display: none;
                box-shadow: none;
        }

        #kmenu:after {
                content: '';
                position: absolute;
                left: 25px;
                top: -8px;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #444;
        }       

        #kmenu ul {
                position: static;
                visibility: visible;
                opacity: 1;
                margin: 0;
                background: none;
                box-shadow: none;
        }

        #kmenu ul ul {
                margin: 0 0 0 20px !important;
                box-shadow: none;
        }

        #kmenu li {
                position: static;
                display: block;
                float: none;
                border: 0;
                margin: 5px;
                box-shadow: none;
        }

        #kmenu ul li{
                margin-left: 20px;
                box-shadow: none;
        }

        #kmenu a{
                display: block;
                float: none;
                padding: 0;
                color: #999;
        }

        #kmenu a:hover{
                color: #fafafa; 
        }       

        #kmenu ul a{
                padding: 0;
                width: auto;
        }

        #kmenu ul a:hover{
                background: none;
        }

        #kmenu ul li:first-child a:after,
        #kmenu ul ul li:first-child a:after {
                border: 0;
        }               

}

@media screen and (min-width: 600px) {
        #kmenu {
                display: block !important;
        }
}       

/* iPad */
.no-transition {
        transition: none;
        opacity: 1;
        visibility: visible;
        display: none;
}

#kmenu li:hover > .no-transition {
        display: block;
}