/* Box the menu is in*/
.navigation {
	display: table;/* NO EDIT / Table allows the menu items to be equally space no matter how many items*/
	table-layout: fixed;
    width: 100%;/* NO EDIT / If other than 100% menu will be on the left. If this is changed you will need to add colors, borders, etc*/
}

/*Strip the ul of padding and list styling*/
.navigation ul {
    display:table-row;
	margin: 0px;
	padding: 0px;
}

/*Create a horizontal list with spacing*/
.navigation ul li {
	display: table-cell;
}

/*Style for menu links*/
.navigation ul li a {
    display:block;/* NO EDIT / makes each top level menu item act like a block */
	min-width:115px;/* EDIT / Make this small as possible but large enough to accomodate the widest text on the top level menu */
	text-align: center;/* NO EDIT / Make the top menu items center */
	line-height: 40px;/* EDIT / This is the height of your top menu */
	font-family: "Georgia";/* EDIT / This is font of your top menu */
	border-top: 2px solid gold;/* EDIT / This is the color and size of the top border on the top menu */
	border-bottom: 2px solid gold;/* EDIT / This is the color and size of the bottom border on the top menu */
	color: #fff;/* EDIT / This is the color of the text on the top menu */
	background: #2f3036;/* EDIT / This is the color of the background on the top menu */
}

/*Hover state for top level links*/
.navigation ul li:hover a {
	background: brown;/* EDIT / This is the background color top menu item you are hovering over */
	text-decoration: none;/* NO EDIT / This prevents lines under your menu text */
}

/*Style for dropdown links*/
.navigation ul li:hover ul {
	display:table-row;
	padding: 0px;
		z-index:15;/* NO EDIT / Index of 3 is larger than other so this item will be on top of other content */
}

/*Style for dropdown links*/
.navigation ul li:hover li {
    width:200px;/* EDIT / width of your dropdown menu before you hover over it */
}

/*Style for dropdown links*/
.navigation ul li:hover ul li a {
	background: #f3f3f3;/* EDIT / Color of the background of the dropdown */
	color: #2f3036;/* EDIT / Color of the text of the dropdown */
	border-top: 2px solid white;/* EDIT / Width, color of the top border of the dropdown */
	border-bottom: 2px solid white;/* EDIT / Width, color of the bottom border of the dropdown */
	line-height: 40px;/* EDIT / Height of the dropdown */
}

/*Hover state for dropdown links*/
.navigation ul li:hover ul:hover {
	position: absolute;/* NO EDIT / This is needed if it is inheriting relative from another part of the css.  absolute so the drop down will not move other content */
}

/*Hover state for dropdown links*/
.navigation ul li:hover ul a:hover {
	background: brown;/* EDIT / this is the background color of the dropdown when you are hovering over it. */
	color: #fff;/* EDIT / this is the text color of the dropdown when you are hovering over it. */
	width: 200px;/* EDIT / this is width of the dropdown when you are hovering over it. */
	padding: 0px;
}

/*Hide dropdown links until they are needed*/
ul.hidden {
	display: none;
	padding: 0px;
}

/*Make dropdown links vertical*/
.navigation ul li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
.navigation ul li ul li a {
	width: auto;
	min-width:50px;/* EDIT / this is the min width of the dropdown.  Make it small as possible but wide enough to accomodate your largest dropdown text */
	padding: 0 5px;
}


/*Display the dropdown on hover*/
.navigation ul li a:hover + .hidden, .hidden:hover {
	display: block;
	position: absolute;/* NO EDIT / absolute so the drop down will not move other content when you hover over main menu */
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	display: none;/* NO EDIT / hides .show-menu */
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;/* NO EDIT / hides checkbox */
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: none;/* NO EDIT / displays checkbox??? */
}