/*
 {$BRAND_NAME`}
 Copyright (c) ocProducts, 2004-2016
*/

/*
The dropdown CSS is generally split into "toplevel" and "nlevel", with a different set of HTML and rules for each.
"nlevel" is everything other than the top level.

For example:
 "toplevel" makes the whole li clickable by making the inside anchor a block. The image is in the link.
 "nlevel" has the image to the left of the anchor, like with most of the other menu types.
*/


.menu_type__dropdown {
	/*{+START,IF,{$CONFIG_OPTION,fixed_width}}{+START,IF,{$NOT,{$MOBILE}}}*/
		width: 980px;
		margin: 0 auto;
	/*{+END}{+END}*/
	overflow: hidden;
}

.menu_type__dropdown li.toplevel {
	float: {!en_left};
	border-{!en_left}: 1px solid #cacaca;
	margin-bottom: 0;
	{$BETA_CSS_PROPERTY,transition: color\,background-color 0.5s linear;}
	font-size: 0.9em;
	padding: 0.5em 0.25em;
	{$BETA_CSS_PROPERTY,box-sizing: border-box;}
	/*{+START,IF,{$AND,{$CONFIG_OPTION,fixed_width},{$NOT,{$MOBILE}}}}*/
		width: 109px;
	/*{+END}*/
	/*{+START,IF,{$NAND,{$CONFIG_OPTION,fixed_width},{$NOT,{$MOBILE}}}}*/
		width: {$DIV_FLOAT*,100,9}%;
	/*{+END}*/
}

.menu_type__dropdown li.toplevel.last {
	border-{!en_right}: 1px solid #cacaca;
	float: none !important; /* so it eats all space remaining */
	overflow: hidden; /* so it is shunted against its left-hand neighbours without overlapping */
	margin-{!en_right}: 0 !important; /* as would cause wrapping with the overflow hidden */
	width: auto;
}

.menu_type__dropdown li.toplevel.first.brethren_1 {
	width: 50%; /* Otherwise it looks ugly */
}

.menu_type__dropdown li.toplevel.menu_spacer {
	height: 1.15em;
	width: 4em;
	padding: 0.5em;
	float: {!en_left};
}

.menu_type__dropdown li.toplevel.current, .menu_type__dropdown li.toplevel:hover {
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, #ffffff\, #cbdbeb);}
}

.menu_type__dropdown a.toplevel_link {
	display: block;
	padding: 0.4em 0.5em;
	outline: 0;
	text-decoration: none;
	text-align: center;
	color: {$GET,area_text};
}

.menu_type__dropdown a.toplevel_link span {
	display: block;
}

.menu_type__dropdown .toplevel_link a, .menu_type__dropdown .toplevel_link a:visited, .menu_type__dropdown .toplevel_link a:hover {
	text-decoration: none;
}

.menu_type__dropdown .toplevel_link img {
	margin-right: 0;
	margin-bottom: 0.75em;
}


.menu_type__dropdown ul.nlevel, .menu_type__dropdown div.nlevel {
	{$BETA_CSS_PROPERTY,box-shadow: 3px 5px 13px #c9c9c9;}
	line-height: 1.4em;
}

.menu_type__dropdown .nlevel ul.nlevel {
	margin-top: -1px; /* To compensate for border size */
}

.menu_type__dropdown .nlevel li {
	padding: 0.3em 0.4em !important;
	white-space: nowrap;
	overflow: hidden; /* Needed as images are set to float */
}

.menu_type__dropdown .nlevel li:hover, .menu_type__dropdown .nlevel li.current {
	background-color: #e8f4ff;
	background-image: none;
}

.menu_type__dropdown .nlevel li, .menu_type__dropdown div.nlevel, .menu_type__dropdown .nlevel .menu_spacer {
	background-color: {$GET,dropdown_menu_background};
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, #cbdaed\, #d8e4f0);}
	font-weight: normal;
	border-bottom: 1px solid #e7eef8;
	min-height: 20px;

	/* We do want wrapping for this, as menu labels could be longer than the available space between the start of the dropdown label and the edge of the fixed width */
	white-space: normal;
}

.menu_type__dropdown .nlevel .menu_spacer {
	display: block;
	padding-{!en_right}: 0;
}

.menu_type__dropdown ul.nlevel li a { /* ul li added to ensure precedence over ".nl li" selector, whilst not forcing us to use up our only !important */
	padding-{!en_left}: 14px;
	background-size: 6px 6px;
}

.menu_type__dropdown .nlevel a, .menu_type__dropdown .nlevel a:visited {
	text-decoration: none;
}

.menu_type__dropdown .nlevel a:hover span {
	text-decoration: underline;
}

.menu_type__dropdown .nlevel, .menu_type__dropdown .nlevel a, .menu_type__dropdown .nlevel a:visited, .menu_type__dropdown .nlevel a:hover {
	color: {$GET,slightly_seeded_text};
}

.menu_type__dropdown .nlevel .current a {
	background: transparent url('{$IMG;,1x/menus/menu_bullet_current}') no-repeat 5px 6px !important;
}
.menu_type__dropdown .nlevel .has_img>a, .menu_type__dropdown .nlevel.current.has_img>a {
	background: none !important;
}

.menu_type__dropdown .nlevel .non_current a {
	background: transparent url('{$IMG;,1x/menus/menu_bullet}') no-repeat 5px 6px;
}

.menu_type__dropdown .nlevel .non_current a:hover {
	background: transparent url('{$IMG;,1x/menus/menu_bullet_hover}') no-repeat 5px 6px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.menu_type__dropdown .nlevel .current a {
		background-image: url('{$IMG;,2x/menus/menu_bullet_current}');
	}

	.menu_type__dropdown .nlevel .non_current a {
		background-image: url('{$IMG;,2x/menus/menu_bullet}');
	}

	.menu_type__dropdown .nlevel .non_current a:hover {
		background-image: url('{$IMG;,2x/menus/menu_bullet_hover}');
	}
}

.menu_type__dropdown .nlevel .has_img>img {
	width: 20px;
	float: left; /* So that wrapping alignment is neat */
}


.menu_type__dropdown img, .menu_type__dropdown span {
	vertical-align: middle;
}

.menu_type__dropdown img {
	margin-right: 0.5em;
}
