/* -----------------------------------
Navigation
----------------------------------- */
#nav-toggle {
    float: right;
    width: 36px;
    height: 36px;
    color: #fff;
    background-color: #999;
    background-image: url(../img/responsive-nav.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-top:20px;
}

#nav {
    clear: right;
}

#nav ul {
    padding: 0 0 20px 0;
    margin: 0;
    list-style: none;
}

#nav li {
    display:inline;
}

#nav a {
    display:block;
    padding: .3em 0;
    color:#666;
    border-bottom: 1px solid #ddd;
    line-height: 36px;
    text-align: right;
    text-decoration:none;
    text-transform: uppercase;
}

#nav a:focus, #nav-toggle:focus {
    color: #fff;
    background-color: #000;
}
#nav a:hover, #nav-toggle:hover{
    color: #000;
    background-color: #dedede;
}
#nav a:active, #nav-toggle:active{
    color: #fff;
    background-color: firebrick;
}
/* predefined */
.js #nav
{
	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	display: block;
	overflow: hidden;
	zoom: 1;
}

#nav.opened { max-height: 9999px; }

/* -----------------------------------
50em
----------------------------------- */

@media (min-width:50em)
{

    #nav {
        overflow: hidden;
        zoom:1;
        float:right;
        width:55%;
    }
    
    #nav a {
        float: left;
        width:16.5%;
        margin-top: 30px;
        border:0;
        text-align: center;
    }
	/* predefined */
	.js #nav { position: relative; }
	.js #nav.closed { max-height: none; }
	#nav-toggle { display: none; }
}