/*
---------------------------------------------------------------
  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-museum > li > a { ... } instead of .sm-museum a { ... }
---------------------------------------------------------------*/


	#main-menu {
		position:relative;
		z-index:4999;
		width:auto;
	}
	#main-menu ul {
		width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
	}




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

	.sm-museum,
	.sm-museum ul {
		border-bottom:1px solid #d5d5d5;
		background:#fff;
	}


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

	.sm-museum a {
		padding:10px 20px;
		color:#656566;
		font-size:12px;
		line-height:17px;
		font-weight: bold;
		font-family: verdana,Arial,sans-serif;
		text-decoration:none;
		background: url(museummenu_back.gif) top left repeat-x;
		border-top: 1px solid #d5d5d5;
	}
	.sm-museum a:hover, .sm-museum a:focus, .sm-museum a:active,
	.sm-museum a.highlighted {
		background:#212963;
		color:#ffffff;
	}
	/* current items - add the class manually to some item or check the "markCurrentItem" script option */
	.sm-museum a.current, .sm-museum a.current:hover, .sm-museum a.current:focus, .sm-museum a.current:active {
		background:#212963;
		color:#fff;
		border-top: 1px solid #212963;
	}
	.sm-museum a.has-submenu {
		padding-right:32px;
	}
 	.sm-museum ul a.has-submenu,
	.sm-museum-vertical a.has-submenu {
		padding-right:23px;
	}

	
	.sm-museum li ul li a
	{
		background: #f8f8f8;	
		border-left: #808080 1px solid;
		border-right: #808080 1px solid;
	}
	

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

	.sm-museum a span.sub-arrow {
		position:absolute;
		right:12px;
		top:50%;
		margin-top:-8px;
		width:16px;
		height:16px;
		line-height:16px;
	}
 	.sm-museum ul a span.sub-arrow,
	.sm-museum-vertical a span.sub-arrow {
		right:auto;
		margin-left:-14px;
	}


/* Items separators
===================*/

	.sm-museum li {
		border-left:1px solid #eaeae9;
	}
	.sm-museum li:first-child {
		border-left:0;
	}
	.sm-museum ul li,
	.sm-museum-vertical li {
		border-left:0;
		border-top:1px solid #808080;
	}
	.sm-museum ul li:first-child,
	.sm-museum-vertical li:first-child {
		border-top:0;
	}


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

	.sm-museum span.scroll-up, .sm-museum span.scroll-down {
		position:absolute;
		display:none;
		visibility:hidden;
		overflow:hidden;
		border:solid #bbb;
		border-width:1px 0;
		background:#fff;
		height:20px;
		/* width and position will be automatically set by the script */
	}
	.sm-museum span.scroll-up-arrow, .sm-museum span.scroll-down-arrow {
		position:absolute;
		top:-2px;
		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-width:8px; /* tweak size of the arrow */
		border-style:dashed dashed solid dashed;
		border-color:transparent transparent #555 transparent;
	}
	.sm-museum span.scroll-down-arrow {
		top:6px;
		border-style:solid dashed dashed dashed;
		border-color:#555 transparent transparent transparent;
	}


/*
---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------*/


@media screen and (max-width: 2px) {

	/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
	ul.sm-museum{width:auto !important;}
	ul.sm-museum ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
	ul.sm-museum>li{float:none;}
	ul.sm-museum>li>a,ul.sm-museum ul.sm-nowrap>li>a{white-space:normal;}
	ul.sm-museum iframe{display:none;}

	/* Uncomment this rule to disable completely the sub menus for small screen devices */
	/*.sm-museum ul, .sm-museum span.sub-arrow, .sm-museum iframe {
		display:none !important;
	}*/


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

	.sm-museum ul {
		border:0;
		/* darken the background of the sub menus */
		background:rgba(100,100,100,0.1);
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		box-shadow:none;
	}


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

	.sm-museum a {
		padding-top:13px;
		padding-bottom:13px;
		background:transparent !important;
		color:#555 !important;
	}
	.sm-museum a.current {
		background:#555 !important;
		color:#fff !important;
	}
	.sm-museum a.has-submenu {
		padding-right:23px;
	}
	/* add some text indentation for the 2+ level sub menu items */
	.sm-museum ul a {
		border-left:8px solid transparent;
	}
	.sm-museum ul ul a {
		border-left:16px solid transparent;
	}
	.sm-museum ul ul ul a {
		border-left:24px solid transparent;
	}
	.sm-museum ul ul ul ul a {
		border-left:32px solid transparent;
	}
	.sm-museum ul ul ul ul ul a {
		border-left:40px solid transparent;
	}


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

	.sm-museum a span.sub-arrow {
		right:auto;
		margin-left:-14px;
	}
	/* Hide sub indicator when item is expanded - we enable the item link when it's expanded */
	.sm-museum a.highlighted span.sub-arrow {
		display:none !important;
	}


/* Items separators
===================*/

	.sm-museum li {
		border-left:0;
		border-top:1px solid rgba(0,0,0,0.05) !important;
	}
	.sm-museum li:first-child {
		border-top:0 !important;
	}

}