#nav
	{
		/* container */
		z-index:999;
	}
	#nav > a
	{
		display:none;
		height:37px;
		width:41px;
		background: url('../images/mobile-tab.png') left top no-repeat; 
		color:#333333; 
		margin:0;
	}
	
	#nav li
	{
		position: relative;
	}
 
	/* first level */
 
	#nav > ul {
		padding:0px 20px 0 0;
		margin:0;
	}
		#nav > ul > li
		{
			float: right;
			list-style-type:none;
			display:block;			
			font-family:'Open Sans', arial, helvetica, san-serif; 
			font-size:13px;
			color:#333333; 
			text-shadow: 0 0 1px rgba(89,89,89,0.2);
			padding:8px 25px;
			background-color:#ececec;
			margin:0 1px 0 0;
		}
		
		#nav > ul > li:hover
		{
			background-color:#666666;
			color:#ffffff;
		}
		
		#nav > ul > li > a:hover
		{
			color:#ffffff;
		}
		
		#nav > ul > li.on
		{
			background:#dfdfdf;
		}
		
		#nav > ul > li > a
		{
			text-decoration:none;
			color:#333333; 
		}
 
 
	/* second level */
 
	#nav li ul
	{
		display: none;
		position: absolute;
		top: 100%;
	}
		#nav li:hover ul
		{
			display: block;
		}
			
			
@media only screen and ( max-width: 40em ) /* 640 */
{
    #nav
    {
        position: relative;
    }
        #nav > a
        {

        }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type
        {
            display: block;
			
        }
 
    /* first level */
 
    #nav > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		top:28px;
    }
        #nav:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {            
            float: none;
			padding:8px 45px;
			border-bottom:1px solid #eeeeee;
        }
 
    /* second level */
 
    #nav li ul
    {
        position: static;
    }
	
	.logo {
		padding:15px 0 15px 80px;
	}
}