/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
	NAV
\*------------------------------------*/
.retailers{ font-size:14px; font-weight:normal;}
#retaildropnav{	list-style:none;font-weight:normal;margin-bottom:10px;/* Clear floats */float:right;width:100%;position:relative;z-index:5;	width:210px;background:#FFFFFF;margin-right:20px;margin-top:24px;padding:0 5px 0 5px;color:#000000;	border:1px solid #999999;}
#retaildropnav li{float:left;margin-right:0px;position:relative;width:190px;	color:#000000;}
#retaildropnav a{display:block;padding:0 0 0 0;	color:#000000;background:transparent;text-decoration:none;width:210px;margin:0 0 0 0px;	font-weight:normal;}
#retaildropnav a:hover, a:link; a:visited{display:block;padding:0 0 0 0;	color:#000000;text-decoration:none;width:210px;margin:0 0 0 0px;	font-weight:normal;}

/*--- DROPDOWN ---*/
#retaildropnav ul{background:transparent; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */	list-style:none;position:absolute;margin-left:-45px;left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */*margin-left:-5px;/* IE 7 and below*/width:190px;color:#000000;}
	
#retaildropnav ul li{padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */float:none;border-bottom:#999 1px dotted;width:220px;}

#retaildropnav ul a{padding:5px;white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */}

#retaildropnav li:hover ul{ /* Display the dropdown on hover */left:0; /* Bring back on-screen when needed */*border:1px solid #999;/* IE 7 and below*/
*width:220px;/* IE 7 and below*/*margin-left:-6px;/* IE 7 and below*/border:1px solid #999;width:220px;margin-left:-6px;padding:0px; background-image:url(../images/buttons/btn_retailer_dropdown.jpg);background-repeat:no-repeat;background-position:right;background:#FFFFFF;}
	
#retaildropnav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */background:transparent;	text-decoration:none;color:#000000;}
	
#retaildropnav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */text-decoration:none;background:white;}
	
#retaildropnav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */background:#CCC;}

/*------------------------------------*\

/*--------Phase8 Drop Down Menu Small----------------------------*/
#retaildropnav2{list-style:none;font-weight:normal;margin-bottom:10px;/* Clear floats */float:right;width:100%;position:relative;z-index:5;	width:210px;background:#FFFFFF;margin-right:15px;margin-top:14px;padding:0 5px 0 5px;color:#000000;	border:1px solid #999999;}
#retaildropnav2 li{float:left;margin-right:0px;position:relative;width:190px;	color:#000000;}
#retaildropnav2 a{display:block;padding:0 0 0 0;	color:#000000;background:transparent;text-decoration:none;width:210px;margin:0 0 0 0px;	font-weight:normal;}
#retaildropnav2 a:hover, a:link; a:visited{display:block;padding:0 0 0 0;	color:#000000;text-decoration:none;width:210px;margin:0 0 0 0px;	font-weight:normal;}

/*--- DROPDOWN ---*/
#retaildropnav2 ul{background:transparent; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */	list-style:none;position:absolute;margin-left:-45px;left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */*margin-left:-5px;/* IE 7 and below*/width:190px;color:#000000;}
	
#retaildropnav2 ul li{padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */float:none;border-bottom:#999 1px dotted;width:220px;}

#retaildropnav2 ul a{padding:5px;white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */}

#retaildropnav2 li:hover ul{ /* Display the dropdown on hover */left:0; /* Bring back on-screen when needed */*border:1px solid #999;/* IE 7 and below*/*width:220px;/* IE 7 and below*/*margin-left:-6px;/* IE 7 and below*/border:1px solid #999;width:220px;margin-left:-6px;padding:0px; background-image:url(../images/buttons/btn_retailer_dropdown.jpg);background-repeat:no-repeat;background-position:right;background:#FFFFFF;}
	
#retaildropnav2 li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */background:transparent;	text-decoration:none;color:#000000;}
	
#retaildropnav2 li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */text-decoration:none;background:white;}
	
#retaildropnav2 li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */background:#CCC;}