/* = Customize IR
-------------------------------------------------------------------------------------- */
#listdropwrap { 

}
#listdrop 					{ width:100%; } /* this is necessary for the menu background to show up correctly in IE... stupid IE */

#listdrop li				{ margin-right: 12px;}

/* height of menuitem (half of image height if two stages...) */
#listdrop a 				{ height: 50px; }
#listdrop a span 			{ padding-top: 50px; }
/* width of menuitem (for non-uniform widths, add the widths to each item below */
#listdrop a					{ }

/* change IDs to match menuitems and add more items as needed, also add correct urls for each corresponding image.  Also make sure the width is correct */
#listdrop #home a 			{ background-image: url(/cms/wp-content/plugins/listdrop/images/menu_01.gif); width: 64px; }
#listdrop #explore a 		{ background-image: url(/cms/wp-content/plugins/listdrop/images/menu_02.gif); width: 113px; }
#listdrop #fairs a 		{ background-image: url(/cms/wp-content/plugins/listdrop/images/menu_03.gif); width: 66px;}
#listdrop #about a 		{ background-image: url(/cms/wp-content/plugins/listdrop/images/menu_04.gif); width: 84px;}
#listdrop #news a 		{ background-image: url(/cms/wp-content/plugins/listdrop/images/menu_05.gif); width: 84px;}
#listdrop #contact a 			{ background-image: url(/cms/wp-content/plugins/listdrop/images/menu_06.gif); width: 77px; margin-right:0 !important; } /* gets rid of right margin on last item so that it can go to the edge */

/* change IDs to match menuitems and add more items as needed */
#listdrop #home ul a,
#listdrop #explore ul a,
#listdrop #fairs ul a,
#listdrop #about ul a,
#listdrop #news ul a,
#listdrop #contact ul a { background:none; height:auto; width:14em; } /* reset the width here for drop downs. especially important if you used non-uniform widths for items */


/* Two Image States:
	If you are using two different states for you image, use this.
	This would be for rollovers only.
* /
#listdrop a:hover, 
#listdrop li.current_page_item a { background-position: 0 -35px; } /* adjust the menu height, should just be bottom, but IE likes to give you trouble... */

/* Three Image States:
	If you are using three different states for you image, use this.
	This would be for rollovers, with a different state for current-page menu-items.
*/
/* change position to match menuitem height for rollovers */
#listdrop a:hover			{ background-position: 0 -50px; }
#listdrop li.current_page_item a { background-position: 0 -50px; }
/**/


/* = Customize drop down
-------------------------------------------------------------------------------------- */
/* style the dropdown menu items */
#listdrop ul a {
	padding: 0.5em 1em;
	text-decoration: none;
	color: #000; /* set dropdown text color */
	margin: 0;
	}
#listdrop li li	{ border:none; }

/* adds arrow to items with children. update with parent menuitem ids for it to work */
#listdrop #home ul a.parent span,
#listdrop #explore ul a.parent span,
#listdrop #fairs ul a.parent span,
#listdrop #about ul a.parent span,
#listdrop #news ul a.parent span,
#listdrop #contact ul a.parent span {
	background: url(images/listdrop_arrow_wht.gif) no-repeat center right;
	}

/* style dropdown */
#listdrop li ul {
	width: 16em;
	background-color: #ffe38c; /* set dropdown background color */
	border:2px #ffc411 solid;
	}
#listdrop li ul 	{ width: 16em; } 		/* width of dropdown menus */
#listdrop li ul ul 	{ margin-left: 16em; }	/* the left margin of the second level dropdowns should match the dropdown widths */
#listdrop li ul ul 	{ margin-top: -2em; }	/* adjust the y-location of the second level dropdowns relative to the parent item */


/* background color for hover and selected dropdown menu items */
#listdrop ul li:hover, #listdrop ul li.hover,
#listdrop ul a:hover,
#listdrop ul li.current_page_item, #listdrop ul li.current_page_item a {
	background-color: #ffa711;
	color: #000;
	}