/*
---------------------------------------------------------------
  Note that styles you apply to the main menu items are inherited by the sub menus items too.
  If you'd like to avoid this, you could use child selectors (not supported by IE6) - for example:
  .sm-apwa > li > a { ... } instead of .sm-apwa a { ... }
---------------------------------------------------------------*/


/* Menu box
===================*/

	.sm-apwa {
		border-bottom:2px solid #f3f4f2;
		background:#fff;
        font-family: Arial, geneva, Sans-Serif;
        font-size: .85em; 
	}
	.sm-apwa-vertical {
		border-right:2px solid #f3f4f2;
		border-bottom:0;

	}
	.sm-apwa ul {
		padding:8px 0;
		background:#f3f4f2;
        font-family: Arial, geneva, Sans-Serif;

		/*-moz-border-radius:0 4px 4px 4px;
		-webkit-border-radius:0 4px 4px 4px;
		border-radius:0 4px 4px 4px;*/
		/*-moz-box-shadow:0 4px 3px rgba(0,0,0,0.25);
		-webkit-box-shadow:0 4px 3px rgba(0,0,0,0.25);
		box-shadow:0 4px 3px rgba(0,0,0,0.25);*/
	}
	.sm-apwa-vertical ul,
	.sm-apwa ul ul {
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		border-radius:4px;
	}


/* Menu items
===================*/

	.sm-apwa a {
		border-bottom:2px solid #fff;
		padding:11px 20px 9px 20px;
		color:#000;
		font-size: 1.1em; 
		line-height:17px;
		font-family:Arial,sans-serif;
		text-decoration:none;
        font-family: Arial, geneva, Sans-Serif;
	    font-weight: bolder;
	    border-right: 1px solid #f4f2ef;

		/*-moz-border-radius:4px 4px 0 0;
		-webkit-border-radius:4px 4px 0 0;
		border-radius:4px 4px 0 0;*/
	}
	.sm-apwa a:hover, .sm-apwa a:focus, .sm-apwa a:active {
		/*border-bottom-color:#a0a0a5;*/
		background:#f3f4f2;
		color:#000;
	}
	.sm-apwa a.highlighted {
		border-bottom-color:#f3f4f2 !important;
		background:#f3f4f2;
		color:#000;
		/*-moz-box-shadow:0 4px 3px rgba(0,0,0,0.25);
		-webkit-box-shadow:0 4px 3px rgba(0,0,0,0.25);*/
		/*box-shadow:0 4px 3px rgba(0,0,0,0.25);*/
	}
	.sm-apwa-vertical a {
		-moz-border-radius:4px 0 0 4px;
		-webkit-border-radius:4px 0 0 4px;
		border-radius:4px 0 0 4px;
	}
	.sm-apwa-vertical a:hover, .sm-apwa-vertical a:focus, .sm-apwa-vertical a:active,
	.sm-apwa-vertical a.highlighted {
		border-bottom-color:#f3f4f2 !important;
		background:#f3f4f2;
		color:#f3f4f2;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		box-shadow:none;
	}
	.sm-apwa ul a {
		border-bottom:0;
		padding:10px 20px;
		font-size:14px;
		line-height:normal;
		-moz-border-radius:0;
		-webkit-border-radius:0;
		border-radius:0;
	}
	.sm-apwa ul a:hover, .sm-apwa ul a:focus, .sm-apwa ul a:active,
	.sm-apwa ul a.highlighted {
		background:#dcdcdc;
		color:#10100f;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		box-shadow:none;
	}
	/* current items - add the class manually to some item or check the "markCurrentItem" script option */
	.sm-apwa a.current, .sm-apwa a.current:hover, .sm-apwa a.current:focus, .sm-apwa a.current:active {
		border-bottom-color:#8db863;
	}
	.sm-apwa-vertical a.current, .sm-apwa-vertical a.current:hover, .sm-apwa-vertical a.current:focus, .sm-apwa-vertical a.current:active {
		border-right:2px solid #8db863;
		border-bottom-color:#fff;
	}
	.sm-apwa ul a.current, .sm-apwa ul a.current:hover, .sm-apwa ul a.current:focus, .sm-apwa ul a.current:active {
		border-right:0;
		border-bottom:0;
		font-weight:bold;
	}
	.sm-apwa a.has-submenu {
		padding-right:32px;
	}


/* Sub menu indicators
===================*/

	.sm-apwa a span.sub-arrow {
		position:absolute;
		right:17px;
		top:50%;
		margin-top:-3px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-top:6px solid #a0a0a5; /* tweak size of the arrow */
		border-left:4px dashed transparent;
		border-right:4px dashed transparent;
	}
	.sm-apwa a:hover span.sub-arrow, .sm-apwa a:focus span.sub-arrow, .sm-apwa a:active span.sub-arrow {
		border-top-color:#f3f4f2;
	}
	.sm-apwa a.highlighted span.sub-arrow {
		border-top-color:#a0a0a5;;
	}
	.sm-apwa-vertical a span.sub-arrow,
 	.sm-apwa ul a span.sub-arrow {
		right:15px;
		margin-top:-4px;
		border-left:6px solid #a0a0a5; /* tweak size of the arrow */
		border-top:4px dashed transparent;
		border-bottom:4px dashed transparent;
	}
	.sm-apwa-vertical a:hover span.sub-arrow, .sm-apwa-vertical a:focus span.sub-arrow, .sm-apwa-vertical a:active span.sub-arrow,
	.sm-apwa-vertical a.highlighted span.sub-arrow,
 	.sm-apwa ul a:hover span.sub-arrow, .sm-apwa ul a:focus span.sub-arrow, .sm-apwa ul a:active span.sub-arrow,
 	.sm-apwa ul a.highlighted span.sub-arrow {
		border-left-color:#f3f4f2;
		border-top-color:transparent;
	}


/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." in the default download package
===================*/

	.sm-apwa span.scroll-up, .sm-apwa span.scroll-down {
		position:absolute;
		display:none;
		visibility:hidden;
		overflow:hidden;
		background:#f3f4f2;
		height:20px;
		/* width and position will be automatically set by the script */
	}
	.sm-apwa span.scroll-up-arrow, .sm-apwa span.scroll-down-arrow {
		position:absolute;
		top:6px;
		left:50%;
		margin-left:-8px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-bottom:8px solid #a0a0a5;; /* tweak size of the arrow */
		border-left:6px dashed transparent;
		border-right:6px dashed transparent;
	}
	.sm-apwa span.scroll-down-arrow {
		border-top:8px solid #a0a0a5;; /* tweak size of the arrow */
		border-bottom:0;
	}