@charset "utf-8";
/*@import url("nav.css"); */
/* CSS Document */

/*Base Styles

Clear the default margins and padding. Squishing the divs right up next to each other so any default browser spacing will ruin the layout.

Simple color to the background so the white portions of our menu will stand out. Then we’ll toss in some basic font styles and add a slight shadow to the menu. 
Note that the margin set in the nav block centers the menu on the page, this is for display purposes only and should be removed when you want to nudge the menu into place.

Finally, we’ll add some dimensions and background color to the nav and menu-item selectors.:*/

* {
	margin: 0px;
	padding: 0px;
}
 
 
nav {
  	font-family: Arial, Helvetica, sans-serif;
  	line-height: 1.0;
  	margin: 30px auto; /*for display only*/
  	width: 230px;
  	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,5.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,5.2);
	box-shadow: 2px 2px 5px rgba(0,0,0,5.2);
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: 0;	
	cursor: pointer;
}
 
.menu-item {
  	width: 240px;
  	background: #f1dbaa;
  	background-color: #480b06;
}

/*Header Styles

Now it’s time to style our h4 tags and turn them into the horizontal bars that we saw in our mockup. To do this, we just need a little padding and a background color. While we’re here we can begin to style the typography as well. We’re inheriting the font-family we set up before so we don’t need to re-type that. Instead we just need to set a size and weight. */

.menu-item h4 {
  	color: #f1dbaa;
  	font-size: 15px;
  	font-weight: 500;
  	padding: 7px 12px;
  	background: #a90329;
}

/*Header Links

Obviously, the blue link is no good so we need to change that to white. We also want to ditch any text decoration (the underline). Now, we could stop here but the default behavior would be that only the text is clickable and not the whole bar, which is not ideal. To make the entire bar a link, we set the display property to block and the width to the full menu size (200px).*/

.menu-item h4 a {
  	color:#f1dbaa;
	display: block;
	text-decoration: none;
	width: 200px;
	text-align: left;
	font-weight: bold;
}

/*Making It Pretty

If you want to stick with something simple, you can skip this step, but I’m going to trudge on and add a few more visual tweaks. Go back and modify that header style block to include a gradient and some very subtle borders. You likely won’t even be able to spot the borders until the menu is closed, but combined with the gradients they’ll really help differentiate each section so they don’t all look like one big block. */

/*Menu Header Styles*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.5);
  border-top: 1px solid rgba(0,0,0,0.5);
  color: #f1dbaa;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 30px;
   
  /*Gradient*/
  background: #480b06; /* Old browsers */
  background: -moz-linear-gradient(top, #240604 0%, #480b06 44%,#400E0A 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#240604), color-stop(44%,#480b06), color-stop(100%,#400E0A)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #240604 0%,#480b06 44%,#400E0A 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #240604 0%,#480b06 44%,#400E0A 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #240604 0%,#480b06 44%,#400E0A 100%); /* IE10+ */
  background: linear-gradient(top, #240604 0%,#480b06 44%,#400E0A 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1dbaa', endColorstr='#f1dbaa',GradientType=0 ); /* IE6-9 */
  background-position: top;
}



/*Hover Styles

Next we’re going to add a subtle hover style to the bar links. All we’re going to do is tweak the colors on the gradient a little so they get brighter when you hover.*/

.menu-item h4:hover { 
  background: #c4262e; /* Old browsers */
  background: -moz-linear-gradient(top, #240604 0%, #c4262e 44%,#400E0A 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#240604), color-stop(44%,#c4262e), color-stop(100%,#400E0A)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #240604 0%,#c4262e 44%,#400E0A 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #240604 0%,#c4262e 44%,#400E0A 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #240604 0%,#c4262e 44%,#400E0A 100%); /* IE10+ */
  background: linear-gradient(top, #240604 0%,#c4262e 44%,#400E0A 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

/*Paragraph Styles

Remember that the first item in our menu holds a paragraph and not an unordered list, so next we’ll attack this to get it looking nice. The lists will take a sizable chunk of code but the paragraph hardly requires anything. Just define the size and color, then toss in some padding.


First Item Styles*/
.alpha p {
    font-size: 14px;
	padding: 8px 12px;
	color: #f1dbaa;
	font-weight: bold;
	text-align: left;
}



/*Unordered List Styles

As you can see, the first block targets the unordered list as a whole unit. Here I set some basic sizing and font styles and removed the bullet point by setting list-style-type to none.

Next I targeted the links specifically. I moved them over, removed the underlines, set the color and performed the same display:block trick that we saw before to make the clickable area larger.

To finish things off, I applied a few custom styles to the list items themselves. The bottom border creates a separation between each item and the hover style changes the background.

/*ul Styles*/
.menu-item ul {
  background: #f1dbaa;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
 
.menu-item ul a {
	margin-left: 50px;
	text-decoration: none;
	color: #f1dbaa;/*Text colour between choices*/
	display: block;
	width: 240px;
	text-align: left;
	font-weight: bold;
}
 
/*li Styles*/
.menu-item li {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f1dbaa	;/* Lines colour between choices*/
}
 
.menu-item li:hover {
	background-color: #c4262e;/*Box colour between menu choices*/
}

/*Collapse And Animate

Up to this point, we’ve kept our menu opened up so that we could see it while we style the elements within. Now that we know that all of our visual styles are exactly like we want them, it’s time to collapse each section and then set them up to pop open on hover.

By default, browsers will set the height of those unordered lists to auto, meaning they’ll be just tall enough to hold all of the content within. To collapse the menu sections so that only the bars show, we can target those unordered lists and set the height to 0. Notice that we’re leaving the paragraph alone, this will ensure that our top section is always open.*/

/*ul Styles*/
.menu-item ul {
	font-size: 13px;
	line-height: 30px;
	height: 0px; /*Collapses the menu*/
	list-style-type: none;
	overflow: hidden;
	padding: 0px;
	/*Animating the Transition

Next we’ll want to open these menus back up on hover, but before we do that, let’s set up an animation so the transition is nice and gradual. Make sure you insert the various browser extensions and target the height property.*/

	-webkit-transition: height .6s ease;
	-moz-transition: height .6s ease;
	-o-transition: height .6s ease;
	-ms-transition: height .6s ease;
	transition: height 1s ease;
	background-color: #663300;/*Menu Base Colour*/
}

/*Expanding on Hover

All that’s left to do now is make it so that when you hover, the ul expands. This is tricky though so be careful. Your instinct may be to do something like “ul:hover” but that’s not what we want. Instead, we want to make it so that you can hover anywhere in that menu item, either in the bar or the unordered list. However, the item that we want expanded is still only the ul. Here’s what our selector looks like:
*/

.menu-item:hover ul {
  height: 123px;/*This is how much roll down happens to uncover menu choices*/
}