/*
Fix the navigation to the top so the user never has to
scroll to get to it. Set z-index to keep the nav on top.
100 may not be necessary, but it depends on the other
elements on the page. The fixed positioning has potential
to cause issues if the navigation gets too long. 
=========================================================*/
#primary-nav {
    position: fixed;
    top: 0;
	left: 20px;
	padding-top: 14px;
	padding-left: 0px;
	padding-right: 20px;
	color: #000000;
	font-size: 1.75em;
	height: 58px;
    z-index: 100;
	font-size: 1em;
	line-height: 1em;
	font-family: Avenir, Lato, "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

/*
The toggle button is created using the before: pseudo element
and is fixed to the top as well.
=========================================================*/
#primary-nav:before {
    position: fixed;
    top: 0;
	left: 20px;
	padding-top: 12px;
	padding-left: 0px;
	padding-right: 20px;
	color: #000000;
	font-size: 1.75em;
    content: "Menu";
	font-family: Avenir, Lato, "Helvetica Neue", "Helvetica", Arial, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
    padding: 20px 15px;
    text-align: center;
	background-color: #FFFFFF;
}

/*
This is an active state so the button is a different color
when the navigation is visible.
=========================================================*/
#primary-nav.open:before {
    background-color: #FFFFFF;
}

/* 
The unordered list is the main element of the navigation.
Initially it is positioned absolute far enough offscreen
to not be visible. It should not be positioned too far out
(e.g. 9999em) because the transform that will bring it
back into view will have to happen so quickly to cover that
much distance that the slide-in effect could be lost.
=========================================================*/
#primary-nav ul {
    position: absolute;
    top: 65px; // So it appears below the button
    right: -1999px; // Just far enough off so it's not visible to begin with
    z-index: 100;
    padding: 15px;
	margin-left: 0px;
    width: 500px;
	background-color: #FFFFFF;
	font-size: 1.65em;
	line-height: 1em;
	font-family: Avenir, Lato, "Helvetica Neue", "Helvetica", Arial, sans-serif;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    transition: .25s;
}

/*
The open state of the unordered list simply applies a
translate3d to move it back to it's "right: 0" position.
Notice above that the transitions did not specify what CSS
style attribute would be transitioned, so it defaults to
'all'. The purpose of that is to account for the browser
that does not support translate3d. Using translate3d
results in smoother animations on mobile devices compared
to transitioning the "right" style attribute.
=========================================================*/
#primary-nav.open ul {
    -webkit-transform: translate3d(-1999px,0,0);
    -moz-transform: translate3d(-1999px,0,0);
    -ms-transform: translate3d(-1999px,0,0);
    -o-transform: translate3d(-1999px,0,0);
    transform: translate3d(-1999px,0,0);
}

/*
Since IE less than IE10 does not support translate3d, we'll
simply transition the "right" attribute instead
=========================================================*/
.lt-ie10 #primary-nav.open ul {
    right: 0;
}

/*
This sets the nav items in a single column format,
primarily an overwrite of the default styles
=========================================================*/
#primary-nav ul li {
    margin-bottom: 16px;
    display: block;
}
#primary-nav ul li a {
	color: #000000;
	text-decoration:none;
	font-weight: bold;
	text-transform: uppercase;
}