/* QuickOrder.css - CSS definitions for the Quick Order page
 *
 * Revision History
 * TFS-719      2014-11-24  Red Arrow ("We")   - Change Flyout Menu to show results in columns of 10
 * ATS-770      2017-01-18  John Hildebrand    - Update the VPM to be single spaced
--------------------------------------------------------------------------------------------------------------*/
	
	/* We remove the margin, padding, and list style of UL and LI components */
	#menuwrapper ul, #menuwrapper ul li{
		/* margin:0; */
		padding:0;
		list-style:none;
		z-index:999999;
	}
	
	/* We apply background color */
	#menuwrapper ul li{
		width:210px;
		cursor:pointer;
	}
	
	/* We apply the background hover color when user hover the mouse over of the li component */
	#menuwrapper ul li:hover{
		background-color:#e4e4e4;
		position:relative;
	}
	
	/* We apply the link style */
	#menuwrapper ul li {
		/*ATS-770===padding:5px 2px;*/
        padding:2px 2px;    /*ATS-770*/
		color:#595959;
		display:inline-block;
	}
	
	#menuwrapper ul li a {
		text-decoration:none;
		color: #2D63AB;
	}
	
	#menuwrapper ul li a:hover {
		color:#2d63ab;
	}
	
	/**** SECOND LEVEL MENU ****/
	/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
	#menuwrapper ul li ul{
		position:absolute;
		display:none;
	}
	
	/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
	#menuwrapper ul li:hover ul{
		left:210px;
		top:0px;
		display:block;
		background-color:#e4e4e4;
		padding:5px;        
	}
	
	#menuwrapper ul li ul li {
		color:#000000;
		padding:2px 0px;
	}
	
	
	/* we apply different background color to 2nd level menu items*/
	#menuwrapper ul li ul li a{
		/*ATS-770===padding:4px 10px;*/
        padding:0px 10px;   /*ATS-770*/
		color:#595959;
		display:block;
	}
	
	/* We change the background color for the level 2 submenu when hovering the menu */
	#menuwrapper ul li ul li a:hover{
		color:#ffffff;
		background:#2d63ab;
		
	}

	#menuwrapper ul li:hover ul li ul {
		left:0;
		position: relative;
		padding-left:0px;
	}
	
	#menuwrapper ul li:hover ul li ul li {
		width:210px;
	}	
	
	/* Clear float */
	.clear{
		clear:both;
	}

    ul.split{
        display:inline-block;
    }
    
    ul.col1{ margin-left:0px;}
    ul.col2{ margin-left:210px;}
    ul.col3{ margin-left:420px;}
    ul.col4{ margin-left:630px;}
    ul.col5{ margin-left:840px;}
        
    .up { bottom:0% !important; top:auto !important; }