/* 

	Richard Tape
	http://iamfriendly.com/
	http://twitter.com/iamfriendly
	
	HTML5 CSS Reset by Rich Clark (http://richclarkdesign.com/) and modified slightly by me
	Minified it, too.
	
	If your existing site already has a reset, feel free to remove this section - don't forget that if you're using
	html 5 elements in your markup, you will need to 'display: block' them in your CSS elsewhere if you remove this
	reset.

*/ /*

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{
	margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
	
body {
		line-height:1.6;}
		
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
			display:block;}
			
	
blockquote,q{
	quotes:none;}
	
blockquote:before,blockquote:after,q:before,q:after{
	
	content:'';content:none;}
	
	a{
		margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}
	
	ins{
		background-color:#ff9;color:#000;text-decoration:none;}
	
	mark{
		background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
	
	del{
		text-decoration: line-through;}
	
	abbr[title],dfn[title]{
		border-bottom:1px dotted #000;cursor:help;}
	
	table{
		border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
	
	input,select{
		vertical-align:middle;}*/

/* -------------------------------------------------------------------------------------------------------------- */

/*

	00: Overall Layout
	------------------

*/

html, body
{
	/*height: 100%;*/
}

body
{
	/*background: transparent url(../friendly-css3-megamenuhoriz-vert-wtransitions-source/images/main_background_tile.jpg) repeat scroll 0 0;*/
}

a
{
	text-decoration: none;
	opacity: 0.65;
	transition: opacity .3s ease-in-out;
	-o-transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
}

a:link
{
	color: rgb(223,38,38);
}

a:visited
{
	color: rgb(223,38,38);
}

a:hover
{
	color: rgb(244,25,25);
	opacity: 0.9;
}

a:active
{
	position: relative;
	top: 1px;
}

#wrap
{
	overflow: visible;
	padding-bottom: -55px;
	min-height: 100%;
}



nav
{
	width: 960px;
	margin: 0 auto;
}


	



/* -------------------------------------------------------------------------------------------------------------- */

/*

	01: Mega Menu Drop DOWN
	-----------------------

*/

header nav, footer nav
{
	/* 
		The element that contains the menu MUST have a height. 
		Set here to the total vertical padding (20px + 20px) plus the font-size (15px) = 55px (line height is set to 1);
	*/
	height: 45px;
}

ul.mega_menu, ul.mega_menu ul, ul.mega_menu ul ul
{
	/* 
		If you change the font size, ensure you adjust the height of the containing element above and the top
		property for "ul.mega_menu li:hover ul" below 
	*/
	font-size: 12px;
	list-style-type: none;
	list-style-position: inside;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	z-index:300;
}

	ul.mega_menu li
	{
		float: left;
		line-height: 1;
		position: relative;
		width: 110px;
		text-align: center;
		
	}
	
		ul.mega_menu li a
		{
			/*
				If you change the padding, ensure you adjust the height of the containing element above and the 
				'top' property for "ul.mega_menu li:hover ul" below
			*/
			padding: 20px 0 21px;
			text-decoration: none;
			display: block;
			color: white;
			background-image:url(../images/nav/bkg.png);
		background-repeat:no-repeat;
		}
		
			ul.mega_menu li a:hover
			{
				/*background: rgb(100,100,100);*/
				background-image:url(../images/nav/bkg.png);
		background-repeat:no-repeat;
			}
			
			ul.mega_menu li a span.darr
			{
				font-size: 12px;
				display: inline-block;
				padding: 0 5px;
				position: relative;
				top: -2px;
				
			}
	
		ul.mega_menu li ul
		{
			overflow: hidden;
			visibility: hidden;
			position: absolute;
			top: 55px;
			left: 0;
			opacity: 0;
			background: white;
			/*background: rgba(255,255,255,0.99);*/
			border: 5px solid white;
			-moz-border-radius-bottomleft: 5px;
			-moz-border-radius-bottomright: 5px;
			-moz-border-radius-topright: 0;
			-moz-border-radius-topleft: 0;
			-webkit-border-bottom-left-radius: 5px;
			-webkit-border-bottom-right-radius: 5px;
			-webkit-border-top-right-radius: 0;
			-webkit-border-top-left-radius: 0;
			border-top: 0;
			border-radius: 5px;
			transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-webkit-transition: all .3s ease-in-out;
			width: 460px
		}
		
			ul.mega_menu li:hover ul
			{
				visibility: visible;
				top: 55px; /* Same as the height of the containing element, 55px by default */
				opacity: 1;
			}
			
			/*
				The single coloum lists are very straight forward, the only difference is that they are half
				of the width of the two-column ones.
			*/
			ul.mega_menu li.single_column ul
			{
				width: 230px;
			}
			
			/*
				Three column lists are 3 times the width (simple, really, isn't it)
			*/
			ul.mega_menu li.three_columns ul
			{
				width: 690px;
			}
			
			
			/* 
				Sometimes the hover menu is on the right hand side of the page so we'll need to shift the menu
				to the left so it doesn't break out of the window. This is almost trivial. We just need	to double 
				the 'padding' element from below.
			*/
			ul.mega_menu li.shift_left ul
			{
				left: auto;
				right: 0;
			}
			
			/* 
				For the vertical menus, we sometimes need to shift the last item(s) up
			*/
			
			ul.mega_menu li.shift_up ul
			{
				top: auto !important;
				bottom: 0 !important;
			}
			
			/*
			
				Sometimes we need to place an item separate to the others, aligned on the right
			
			*/
			
			ul.mega_menu li.place_on_right
			{
				float: right;
			}
			
				ul.mega_menu li:hover ul li
				{
					width: 200px;
					padding: 9px;
					border: 1px solid transparent;
					float: left;
					margin: 5px;
					overflow: hidden;
					background-color: transparent;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					text-align: left;
				}
				
				ul.mega_menu li:hover ul li:hover
				{
					border: 1px solid rgb(220,220,220);
					background-color: rgb(250,250,250);
				}
				
					ul.mega_menu li:hover ul li h2
					{
						font-size: 12px;
						text-transform: uppercase;
						margin-bottom: 5px;
					}
					
						ul.mega_menu li:hover ul li h2 a
						{
							padding: 0;
							background-color: transparent;
							color: #CF4226;
						}
						
					ul.mega_menu li ul li p
					{
						font-size: 12px;
						line-height: 1.2;
						font-family: Garamond, Times, "Times New Roman", serif;
						color: rgb(30,30,30);
					}
				
					ul.mega_menu li ul li img
					{
						float: left;
						margin: 0 5px 2px 0;
					}
					
					ul.mega_menu li ul li.image_right img
					{
						float: right;
						margin: 0 0 2px 5px;
					}
					
					/*
						Sometimes we'd prefer a larger, full-width image
					*/
					li.full_width_images img
					{
						padding-bottom: 10px;
					}

					/*
						The 'Products' list is slightly different in that it contains divs which allow us to 
						have a title and description on one side and a price on the other.
					*/
					ul.mega_menu li:hover ul.mega_sub_products li div.product_desc
					{
						width: 135px;
						float: left;
					}
					
					ul.mega_menu li:hover ul.mega_sub_products li div.product_price
					{
						width: 65px;
						float: left;
						text-align: right;
					}
					
					ul.mega_menu div.product_price p.intro
					{
						font-size: 10px;
						text-transform: uppercase;
					}
					
					ul.mega_menu li:hover ul.mega_sub_products li div.product_price p.price
					{
						font-weight: bold;
						color: rgb(200,0,0);
						font-size: 15px;
					}
					
						ul.mega_menu li:hover ul.mega_sub_products li div.product_price p.price:first-letter
						{
							font-weight: normal;
							font-size: 10px;
							float: none;
							vertical-align: top;
							padding: 0 3px 0 0;
						}
						
						ul.mega_menu li:hover ul.mega_sub_products li div.product_price p.price span.pennies
						{
							font-size: 10px;
							position: relative;
							top: -4px;
						}
						
/* -------------------------------------------------------------------------------------------------------------- */

/*

	02: Mega Menu Drop UP
	---------------------

*/

ul.mega_up ul
{
	top: auto !important;
	bottom: 55px !important;
	position: absolute;
}

ul.mega_up li:hover ul
{
	
	z-index: 9999;
	border: 5px solid white;
	border: 5px solid rgba(100,100,100,0.1);
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border-bottom: none;
}

/* -------------------------------------------------------------------------------------------------------------- */

/*

	03: Mega Menu Vertical From The Left (flyout to the right)
	----------------------------------------------------------

*/

ul.mega_vert_right
{
	width: 180px; /* You will need to change this depending on how wide you want the menu */
}

	ul.mega_vert_right li
	{
		width: 180px;
	}
	
		ul.mega_vert_right li:hover ul
		{
			top: 0px;
			left: 180px; /* This needs to be the same as the width above */
		}

/* -------------------------------------------------------------------------------------------------------------- */

/*

	04: Mega Menu Vertical From The Right (flyout to the left)
	----------------------------------------------------------

*/

ul.mega_vert_left
{
	width: 180px; /* You will need to change this depending on how wide you want the menu */
}

	ul.mega_vert_left li
	{
		width: 180px;
	}
	
		ul.mega_vert_left li ul
		{
			right: 0;
			left: auto;
			top: 0;
		}
	
		ul.mega_vert_left li:hover ul
		{
			top: 0px;
			left: auto;
			right: 180px; /* This needs to be the same as the width above */
			
		}

/* -------------------------------------------------------------------------------------------------------------- */

/*

	Everything above is the 'default' style which is very basic and minimalist. However, it's dead easy to create a 
	colour scheme of your own to make this menu fit with your own branding. The main UL element in the example 
	markup has a container with a class of 'mega_lightbrown' - this is an example of how to create your own colour 
	scheme and how to implement it within your markup...
	
	note: the <header> element also has the same class, this is just to assist with the example styles, chances are 
	your existing header already has some styles.
	
	Basically, you need to set a few background colours, a border colour and some text colours - everything else 
	is dealt with for you.

*/


/*

	05: Light Brown/Turquoise Styles
	--------------------------------

*/

header.mega_lightbrown
{
	background: rgb(196, 196, 182); /* You may not necessarily need this, depending on your existing markup */
}

	nav.mega_lightbrown
	{
		background: rgb(196, 196, 182); /* The background colour of the main menu */
	}

		nav.mega_lightbrown ul li a /* The initial state of the main menu items */
		{
			color: black;
			text-shadow: 0 1px 0 white;
			text-transform: uppercase;
			font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
		}
		
			nav.mega_lightbrown ul li a:hover /* The hover state of the main menu items */
			{
				background: rgb(196, 196, 182);
				color: white;
				text-shadow: 0 1px 0 black;
			}
			
				nav.mega_lightbrown ul li:hover ul /* The appearance of the sub menus that appear on hover */
				{
					border-color: transparent;
					background: rgb(209, 206, 197);
				}
				
				/*
					
					The remainder of changes are going to be dependent on what content you have within your 
					dropdown menu. Here, we are just changing the headings colour.
					
				*/
				
					nav.mega_lightbrown ul li:hover ul li h2 a
					{
						color: rgb(100,100,100);
						text-shadow: none;
					}
					
						nav.mega_lightbrown ul li:hover ul li:hover h2 a
						{
							color: black;
						}

					
						nav.mega_lightbrown ul li:hover ul li h2 a:hover
						{
							text-shadow: none;
						}


/*

	Bonus: Snazzy tooltips
	----------------------
	
	The link that's in the main content has a class of 'tooltip' and we've created a property called 'tip' which 
	has a value. When someone hovers over the link in a browser, the content from that 'tip' property will be 
	popped up emulating what a browser normally does when it shows the 'title' element. Only this way is a lot more 
	interesting.
	
	You may want to change the background colour, text colour, width etc. Go wild!

*/



.tooltip:after
{
	content: attr(tip); 
	visibility: hidden;
	position: absolute; 
	padding: 5px 10px; 
	top: -5px; 
	margin: 1em 0 3em; 
	color: #fff; 
	left: 0px;   
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px; 
	border-radius: 4px;    
	background: #222;
	background: rgba(0,0,0,0.9);
	-moz-box-shadow: 0px 0px 4px #000;
	-webkit-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
	margin: 25px 0 0 10px;
	width: 200px;
	font-size: 11px;
}

.tooltip:hover
{
	z-index: 10;
	position: relative;
}

.tooltip:hover::after
{
	visibility: visible;
}