/* 

	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.




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




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: 5px;
}

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: Arial, Helvetica, sans-serif;
	text-transform: none;

	
}

	ul.mega_menu li
	{
		float: left;
		line-height: 1;
		position: relative;
		width: 280px;
		text-align: center;
		z-index: 90;

	}
	
		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: 5px 0 6px;
			margin-left:15px;
			text-decoration: none;
			display: block;
			color: white;
			
		}
		
		
		
			ul.mega_menu li a:hover
			{
				background: rgb(235,235,235);
			}
			
			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: 15px;
			left: 0;
			opacity: 0;
			background: white;
			background: rgba(255,255,255,0.9);
			/*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;*/
			box-shadow: 2px 2px 4px #bdbcb0;
			-webkit-box-shadow: 2px 2px 4px #bdbcb0;
			-moz-box-shadow: 2px 2px 4px #bdbcb0;
			border-top: 0;
			border-radius: 5px;
			transition: all .2s ease-in-out;
			-o-transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
			-webkit-transition: all .2s ease-in-out;
			width: 250px
		}
		
			ul.mega_menu li:hover ul
			{
				visibility: visible;
				top: 5px; /* 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: 150px;
			}
			
			/*
				Three column lists are 3 times the width (simple, really, isn't it)
			*/
			ul.mega_menu li.three_columns ul
			{
				width: 200px;
			}
			
			
			/* 
				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: 250px;
					padding: 2px;
					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;
				}
				
				li#navWhyAccept ul, li#navCommunity ul, li#navSupport ul, li#navResources ul, li#navCompany ul { width: 200px;
	
}
				
				ul.mega_menu li:hover ul li:hover
				{
					/*border: 1px solid rgb(100,100,100);*/
					background-color: rgba(209,209,209,0.39);
				}
				
					ul.mega_menu li:hover ul li h2
					{
						font-size: 11px;
						/*text-transform: uppercase;*/
						margin-bottom: 5px;
					}
					
						ul.mega_menu li:hover ul li h2 a
						{
							padding: 0;
							background-color: transparent;
							color: rgb(100,100,100);
						}
						
					ul.mega_menu li ul li p
					{
						font-size: 12px;
						line-height: 1.2;
						font-family: Arial, Helvetica, San_serif;
						color: rgb(255,255,255);
					}
				


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

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


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

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


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

.first {padding-bottom:-20px;}
.last {padding-bottom:-20px;}
#navAccept360Requirements {padding-bottom:-20px;}