/* Armeg CSS */

/* 
Note on url paths:
To run locally use: url(../images/design/wrapper.gif)
To run on Websiter use: url(/images/design/wrapper.gif)
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 14px;
	line-height: 16px;
	margin: 9px 0px; border: 0px; padding: 0px;
	background-color: #FFFFFF; /* #FFFFFF Reset as #ED2D38 in template-style.css */
}

/*  The main wrapper div */
#wpr {
	position: relative;
	width: 990px;
	margin: 0px auto;
	border: 0px; padding: 0px;
	background: url(/images/design/wpr-bg.gif) 0 0 repeat-y #FFFFFF;
}

/* Header divs */
#hd {
	position: relative;
	margin: 0px; border: 0px; padding: 0px;
	left: 0px; top: 0px;
	width: 990px;
	height: 172px;
	background: url(/images/Armeg_elexcov10_background.jpg) 0px 34px no-repeat #000000;
}

#hd-txt { /* Innovative Drilling & Tool Solutions */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 9px; left: 15px;
	width: 419px; height: 23px;
	background: url(/images/design/hd-txt-bg.gif) 0 0 no-repeat;
}

#hd-armeg { /* Armeg logo pop-up text*/
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 52px; left: 15px;
	width: 228px; height: 104px;
}

#content {
	position: relative;	
	width: 731px;
	height: 590px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 50px 0px 20px 0px; /* Margin at bottom is distance between end of content and footer */
	border: 0px; padding: 0px;
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 590px;
}

/* Add right padding and a bit of space between points in lists within the content area */
#content ol, #content ul {margin: 0px; border: 0px; padding: 0px 10px 5px 52px;}
#content li {
	margin-bottom: 0.5em;
	font-size: 12px; /* Set font size and color same as for p */
	color: #000000;
}

p {
	text-align: left;
	font-size: 12px; 
	line-height: 16px;
	margin: 0px 5px 10px 0px;
	border: 0px;
	padding: 0px 16px 0px 25px; /* p and h1-3 padding-left ties in with #content width */
	color: #000000;
}
p.no-indent {padding: 0px;} /* Removes left padding. Used for images that are to fill page width as Websiter forces img to be within a p */

/* Standard headings */

h1, h2, h3, .h1, .h2, .h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: normal;
	margin: 0px 0px 14px 0px;
	border: 0px;
	padding: 6px 16px 6px 25px; /* p and h1-3 padding-left ties in with #content width */
}
h2, h3, .h2, .h3 {margin: 0px 0px 5px 0px;}

h1, h1.red, .h1 {
	color: #FFFFFE; /* Off-white in case SE's don't see bg styling and think it's white on white */
	font-size: 18px;
	line-height: 20px;
	background: url(/images/design/h1-red.gif) 0 center no-repeat #ED2D38; /* Background color required for (1) web editor, (2) ensures text can be seen if bg image doesn't load, (3) stop SE's thinking it's white on white */
}
h1.blue {background: url(/images/design/h1-blue.gif) 0 center no-repeat #013C80; color: #FFFFFE;}
h1.yellow {background: url(/images/design/h1-yellow.gif) 0 center no-repeat #FFF100; color: #000000;}
h1.black {background: url(/images/design/h1-black.gif) 0 center no-repeat #000000; color: #FFFFFE;}

h2, .h2 {
	color: #333333;
	font-size: 16px;
	line-height: 18px;
	font-weight: bold;
}

h3, .h3 {
	color: #333333;
	font-size: 14px;
	line-height: 16px;
	font-weight: bold;
}

table {margin: 10px 0px 10px 25px;} /* Product table CSS in product.css */

hr {
	color: #CCCCCC;
	/*background-color: #CCCCCC; This is set in templatestyle.css so it does not appear as a 1 char high solid line in the webeditor */
	height: 1px;
	margin: 10px;
}

/* Additional styles available from Websiter editor */
.centrealign {text-align: center;}
.rightalign {text-align: right;}

/* Armeg colours */
.red {color: #ED2D38;}
.yellow {color: #FFF100;}
.blue {color: #013C80}

/* Product colour-coded highlight boxes - can be applied to p tags */
.redbox, .bluebox, .yellowbox, .blackbox {
	margin: 0px 16px 10px 25px;
	padding: 10px;
	font-size: 14px;
	line-height: 20px;
}
.redbox {color: #FFFFFF; background-color: #ED2D38;}
.bluebox {color: #FFFFFF; background-color: #013C80;}
.yellowbox {color: #000000; background-color: #FFF100;}
.blackbox {color: #FFFFFF; background-color: #000000;}

.redbox a, .bluebox a, .blackbox a, h1 a, h1.red a, h1.blue a, h1.black a {color: #FFFFFF; text-decoration: underline;}
.yellowbox a, h1.yellow a {color: #000000; text-decoration: underline;}
.redbox a:hover, .bluebox a:hover, .blackbox a:hover, h1 a:hover, h1.red a:hover, h1.blue a:hover, h1.black a:hover {color: #FFF100;}
.yellowbox a:hover, h1.yellow a:hover {color: #ED2D38;}


/* Bullets for tel, e-mail, magnifying glass */
span.tel {
	padding-left: 10px;
	background: url(/images/design/tel-blt.gif) 0 center no-repeat;
}
h1 span.tel, h2 span.tel, h3 span.tel {background-image: url(/images/design/tel-blt-h1.gif);} /* Use larger image for headings */

span.email {
	padding-left: 15px;
	background: url(/images/design/email-blt.gif) 0 center no-repeat;
}

span.email a {
	text-decoration: none;
}
h1 span.email a, h2 span.email a, h3 span.email a {font-weight: normal;}
h1 span.email a {color: #FFFFFF;}
h1 span.email a:hover {color: #FFF100;}

span.magnify {
	padding-left: 19px;
	background: url(/images/design/magnify-blt.gif) 0 center no-repeat;
}

/* Image styles */
img.right, img.right-border {
	background: #FFFFFF;
	margin: 5px 0px 5px 10px;
	float: right;
	border: 0px; padding: 0px;
}

img.left, img.left-border {
	background: #FFFFFF;
	margin: 5px 10px 5px 0px;
	float: left;
	border: 0px; padding: 0px;
}
img.right-border, img.left-border {border: 1px solid #000000;}

/* Class to hide images so they can be pre-loaded. Can be used to hide any object */
.hdn {display: none;}

.nobold {font-weight: normal;}

img {
	background-position: center;
	vertical-align: middle;
}

/* Basic links */
a, p.a-link {
	color: #013C80;
	text-decoration: underline;
    font-weight: bold;
}
a:hover, p.a-link:hover {color: #ED2D38;}
/*a:visited {color: #532E4D;}*/

p.a-link:hover {cursor: pointer;}

/* See above for styling for .redbox a, etc */

a img {border: 0px;} /* Remove border from image links */

/* List of links - used for News box and Product features */
ul.link-list {margin: 0px; border: 0px; padding: 6px 0px 10px 12px;}

ul.link-list li {
	margin: 0px; border: 0px; padding: 0px 0px 0px 12px;
	/* width: 400px; */
	list-style: none;
	line-height: 12px;
}

/* The span.no-link styling allows text that is not a link to have the same format */
ul.link-list a, ul.link-list li span.no-link {
	margin: 0px; border: 0px; padding: 0px 0px 0px 12px;
	color: #013C80;
	/* display: block;  Stops text wrap below bullet. Requires width to be set on ul.link-list li */
	font-size: 12px;
	line-height: 12px;
	text-decoration: none;
	font-weight: bold;
	background: url(/images/design/link-list-blt.gif) 0 center no-repeat;
}
ul.link-list a:hover {background-position: 3px center; color: #ED2D38;} /* The active link hover styling is not applied to (ul.link-list li span.no-link) */

ul.link-list li span.no-link {background: url(/images/design/link-list-no-link-blt.gif) 0 3px no-repeat;} /* Different bullet to distinguish non-links */

/* Footer */
#ft {
	position: relative;
	margin: 0px; /* Margin top sets distance between content and footer */
	border: 0px; padding: 0px;
	width: 990px;
	height: 53px;
	background-color: #000000;
	clear: both;
}

/* Privacy, Terms, etc */
#ftl, #ftr {
	position: relative;
	margin: 20px 22px 0px 22px; border: 0px; padding: 0px;
	font-size: 12px;
	line-height: 12px;
	height: 14px;
	color: #FFFFFF;
	float: left;
}
#ftr {float: right;}

/* Footer links */
#ft a {
	margin: 0px; border: 0px; padding: 0px;
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: none;
}
#ft a:hover {color: #ED2D38;}
#ft a.swd:hover {color: #FFFFFF;}

/* Footer corners */
#ft-bl, #ft-br {
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 46px;
	left: 0px;
	width: 7px;
	height: 7px;
	background: url(/images/design/ft-bl.gif) 0 0 no-repeat;
}
#ft-br {left: 983px; background-image: url(/images/design/ft-br.gif);}

/* Quick links - right hand menu */
#ql-wpr { /* Quick links wrapper */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 223px; left: 747px;
	width: 226px;
	height: 620px;
	/*background-color: pink;*/
}

#ql-wpr h4 { /* Quick link box heading */
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFE; /* Off-white in case SE's don't see bg styling and think it's white on white */
	font-weight: bold;
	margin: 0px;
	border: 0px;
	padding: 0px 0px 0px 10px;
	font-size: 12px;
	line-height: 21px;
	background: url(/images/design/ql-hd-bg.gif) 0 center no-repeat #ED2D38;
}

.ql-box { /* Quick link box */
	position: relative;
	margin: 3px 0px 11px 0px; border: 0px; padding: 0px;
	width: 226px;
}

div.ql-brd { /* Brands */
	height: 101px; /* Background defined by .ql-brd-ct divs*/
}

div.ql-bl, div.ql-br { /* Bottom left and right corners*/
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	width: 10px; height: 10px;
}
div.ql-bl {
	background: url(/images/design/ql-bl.gif) 0 0 no-repeat;
	left: 0px;
}
div.ql-br {
	background: url(/images/design/ql-br.gif) 0 0 no-repeat;
	left: 216px;
}

div.ql-brd div.ql-bl, div.ql-brd div.ql-br {top: 91px;}

div.ql-brd-ct { /* Quick link brands content - divs within div.ql-brd, alternated by javascript */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 0px; left: 0px;
	width: 226px; height: 101px;
	background: url(/images/design/ql-brd-bg.jpg) 0 0 repeat-x #D5DADE;
}

div.ql-box img {
	margin: 0px 10px 0px 3px;
	border: 0px; padding: 5px 0px 0px 0px;
	float: right;
}

div.ql-box p {
	margin: 0px 0px 0px 10px;
	border: 0px; padding: 8px 0px 0px 0px;
	color: #000000;
	font-weight: bold;
	font-size: 12px;
	line-height: 14px;
}

div.ql-ln, div.ql-ln120 { /* Quick link line */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 72px; left: 6px;
	width: 214px; height: 3px;
	font-size: 3px; line-height: 3px;
	background: url(/images/design/ql-ln.gif) 0 0 repeat-x #A5A6A8;
}
div.ql-ln120 {width: 120px;}

a.ql-btm-lnk { /* Quick link bottom link */
	position: absolute;
	display: block;
	margin: 0px; border: 0px; padding: 0px 0px 0px 18px;
	top: 78px; left: 8px;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	font-size: 12px;
	line-height: 14px;
	background: url(/images/design/red-blt.jpg) 0 center no-repeat;
}
a.ql-btm-lnk:hover {color: #ED2D38; background-position: 3px center;}

div.ql-srh { /* Search by material */
	height: 40px;
	background: url(/images/design/ql-srh-bg.jpg) 0 0 repeat-x #D5DADE;
}
div.ql-srh div.ql-bl, div.ql-srh div.ql-br {top: 30px;}

div.ql-srh select {
	position: absolute;
	display: block;
	margin: 0px; border: 1px solid #6B6E73; padding: 0px;
	top: 8px; left: 8px;
	width: 160px; height: 16px;
	color: #000000;
	font-weight: normal;
	text-decoration: none;
	font-size: 12px;
	line-height: 14px;
	background-color: #C8CDD1;
}

div.ql-news { /* Latest News */
	height: 80px;
	background: url(/images/design/ql-brd-bg.jpg) 0 0 repeat-x #D5DADE;
}
div.ql-news div.ql-bl, div.ql-news div.ql-br {top: 70px;}

div.ql-news h5 {
	margin: 0px 0px 0px 10px;
	border: 0px; padding: 4px 0px 0px 0px;
	color: #000000;
	font-weight: bold;
	font-size: 12px;
	line-height: 14px;
}

div.ql-news h5 a {
	position: relative;
	display: block;
	margin: 0px; border: 0px; padding: 0px 0px 0px 18px;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	font-size: 12px;
	line-height: 14px;
	background: url(/images/design/red-blt.jpg) 0 center no-repeat;
}
div.ql-news h5 a:hover {color: #ED2D38; background-position: 3px center;}

div.ql-news p {
	margin: 4px 4px 0px 10px;
	border: 0px; padding: 0px;
	color: #000000;
	font-weight: normal;
	font-size: 12px;
	line-height: 14px;
}

/* Box to contain scrollable news items. Each news item has a height limited to 57px. This is also set in the html as parameter JPSCROLL_height */
#news-scrollbox {
	position: relative;
	width: 226px; height: 72px;
	top: 4px; left: 0px;
	/*background-color: yellow;*/
}

/* Note some styling for the scrolling area is defined within the div JPSCROLL_parameters in the html itself and is actioned by javascript. See www.jpowered.com/javascript/scrolling-text/index.htm for details. */
/* Divs JPSCROLL_content and JPSCROLL_parameters are defaults given by www.jpowered.com and come with the styling shown here */
/* Original changed from 'visibility: hidden' to 'display: none;' so these 2 divs take up no space on page which allows Websiter to include them anywhere within the page (and therefore have the scrolling html and code as a single include) rather than just before the </body> tag */
#JPSCROLL_content, #JPSCROLL_parameters {display: none; height: 100px; width: 100px; background-color: green; overflow: hidden;}

.ql-news-item {
	height: 72px;
	overflow: hidden; /* Hide text overflow to ensure each scroll event scrolls the entire news item */
}

div.ql-ask { /* Ask Armeg */
	height: 101px;
	background: url(/images/design/ql-brd-bg.jpg) 0 0 repeat-x #D5DADE;
}
div.ql-ask div.ql-bl, div.ql-ask div.ql-br {top: 91px;}

div.ql-ereg { /* e-registration */
	height: 97px;
	background: url(/images/design/ql-brd-bg.jpg) 0 0 repeat-x #D5DADE;
}
div.ql-ereg div.ql-bl, div.ql-ereg div.ql-br {top: 87px;}

/* Menu */

/* Menu (navigation) panel in top header - within #wpr */
#nav-wpr {/* Wrapper to contain right-aligned menu panel */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	left: 0px; top: 172px;
	width: 990px; height: 35px;
	background-color: #000000;
}

#nav {/* Menu (navigation) panel */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 10px; left: 0px;
	width: 100%;
	height: 14px; /* IE will re-size this if more menu options are added */
}
/* Standards compliant browsers recognise this height setting
This will allow new top-level menu options to be displayed if added without updating style sheet to increase width of #nav */
html>body div#nav {
  height: auto; 
  min-height: 14px;
}

#nav ul {margin: 0px; border: 0px; padding: 0px;}

#nav ul li {
	list-style: none;
	margin: 0px; border: 0px; padding: 0px;
	width: 100px;  /* Min top level menu width in case new meu items added without updating style sheet */
	float: left; /* Lines up the top level menu options from left to right */
}
#nav ul li li {width: 180px; border-bottom: 1px solid #EDEDED;} /* Required to set width of secondary menu levels in IE */

/* Set background on hover at top level only - set on "li a" not "li" or it breaks hover behaviour for sub-menus in IE and Mozilla */
#nav ul li a:hover {background: url(/images/design/nav-li-bg.gif) left bottom repeat-x;}
#nav ul li li a:hover {background-image: none;}

/* Width of top-level individual menu items reset here */
#nav ul li#map1 {width: 54px;}   /* Home.  Note: the full '#nav ul li#map1' rather than just '#map1' is required by IE */
#nav ul li#map2 {width: 68px;}   /* Products           */
#nav ul li#map55 {width: 99px;}  /* New Products!      */
#nav ul li#map3 {width: 86px;}   /* Applications       */
#nav ul li#map4 {width: 63px;}   /* Support            */
#nav ul li#map5 {width: 83px;}   /* Distributors       */
#nav ul li#map6 {width: 51px;}   /* News               */
#nav ul li#map7 {width: 56px;}   /* Events             */
#nav ul li#map8 {width: 73px;}   /* Company            */
#nav ul li#map9 {width: 80px;}   /* Contact Us         */
#nav ul li#map10 {display: none} /* Hide 'Pages not visible from main menu' */

/* Background colour to drop-down options */
#nav ul ul li {
	background-color: #000000;
	/* filter: alpha(opacity=95);  - Cannot set opcacity in IE, the opacity works but is breaks the pop-out functionality! For IE, 0 to 100 */
	opacity: 0.95;              /* CSS3 standard (not yet supported), 0 to 1 */
	-moz-opacity: 0.95;         /* for Mozilla, 0 to 1 */
} 
/* Remove opacity on hover 
#nav ul ul li:hover {
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}
*/

/* Specific colours for product headings */
/* Electrical          */
#nav ul li#map15, #nav ul li#map15 li {background-color: #FFF100;} /* Yellow */
#nav ul li#map15 a, #nav ul li#map15 li a {color: #000000;}
#nav ul li#map15 a:hover, #nav ul li#map15 li a:hover {color: #ED2D38;}

/* Plumbing            */
#nav ul li#map16, #nav ul li#map16 li {background-color: #013C80;} /* Blue */
#nav ul li#map16 a, #nav ul li#map16 li a {color: #FFFFFF;}
#nav ul li#map16 a:hover, #nav ul li#map16 li a:hover {color: #FFF100;}

/* Tiling              */
#nav ul li#map17, #nav ul li#map17 li {background-color: #000000;} /* Black */
#nav ul li#map17 a, #nav ul li#map17 li a {color: #FFFFFF;}
#nav ul li#map17 a:hover, #nav ul li#map17 li a:hover {color: #FFF100;}

/* Building / Drilling */
#nav ul li#map18, #nav ul li#map18 li {background-color: #ED2D38;} /* Red */
#nav ul li#map18 a, #nav ul li#map18 li a {color: #FFFFFF;}
#nav ul li#map18 a:hover, #nav ul li#map18 li a:hover {color: #FFF100;}

#nav a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	font-weight: normal;
	text-align: center;
	display: block;
	margin: 0px;
	border: 0px;
	border-right: 1px solid #C5C5C5;
	padding: 0px;
	color: #FFFFFF;
	text-decoration: none;
}
#nav ul li li a {line-height: 24px;}

#nav ul li#map1 a {margin: 0px 0px 0px 10px;} /* left indent before Home */
#nav ul li#map9 a {border: 0px;} /* Remove right border from 'Contact Us' - the right-most option in the list */

#nav a:hover {color: #FFF100;}

#nav ul li li a {text-align: left; margin: 0px 0px 0px 5px;} /* Left align text in pop-out options */

/* Position pop-out menus */
#nav li {position: relative;}

#nav ul ul {
	position: absolute;
	z-index: 500;
}

#nav ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* Show/Hide on hover */
div#nav ul ul,
div#nav ul li:hover ul ul,
div#nav ul ul li:hover ul ul
{display: none;}


div#nav ul li:hover ul,
div#nav ul ul li:hover ul,
div#nav ul ul ul li:hover ul
{display: block;}


/* CSS to replace tables - used for web enquiry forms */

/* The div with class tbl-out centres correctly in standards compliant browsers (as left and right margin set to auto). IE doesn't recognise auto. Div (centrefix) fixes this as IE incorrectly centres an element with text-align:center; */
.centrefix {text-align: center;} 

/* Width and margin set on a containing table wrapper (tbl-out) and not inner table div (tbl-in) to fix the IE width bug */
.tbl-out {
	width: 541px; 
	margin: 0px auto;
	border: 0px;
	padding: 0px;
	text-align: left;
}

.tbl-in {
	margin: 0px;
	border: 1px solid #EFD1D2;
	padding: 5px;
	background-color: #ECEAEB;
}

div.row {
  clear: both;
  margin: 0px; border: 0px; padding: 0px;
}
/* Standards compliant browsers don't add their own spacing so need top padding */
html>body div.row {padding: 2px 0px 0px 0px;}

div.half-space, div.space {
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0px; border: 0px; padding: 0px;
}
div.space {height: 12px; line-height: 12px;}

div.row label {
	float: left;
	width: 202px;
	text-align: right;
	font-size: 14px; 
	line-height: 18px;
	margin: 2px 0px 0px 0px;
	padding: 0px;
}
span.fld label {width: 80px;} /* Email & Phone radio labels */

/* Class fld (field) defines data input fields */
div.row span.fld {
  float: right;
  width: 300px;
  text-align: left;
  margin-right: 2px;	/* Required to stop right side touching the fieldset border in IE */
}

div.row span.fld-full-width {
  float: left;
  width: 510px;
  text-align: left;
  margin: 0px;
}

/* The spacer is used to ensure the table-div clears the last field. Note not required if fields are enclosed in a fieldset tag */
div.spacer {
  clear: both;
}

/* Class full (full width) ensures fields fill their containing element */
.full {width: 100%;}

.bld {font-weight: bold;}  /* Set bold text in selects */

fieldset {
	border: 1px solid #EFD1D2;
	padding: 0px 8px 10px 5px;	/* Can't add padding to top as IE incorrectly puts this outside the fieldset so have added a bottom margin on the legend */
}

legend {
	border: 1px solid #EFD1D2;
	padding: 2px 5px;
	margin: 0px 0px 10px 0px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #ED2D38;
}

form {border: 0px; margin: 0px; padding: 0px;}	/* Stops IE adding space around a form */

/* Style for the input boxes */
/* applied only to inputs within div class inputs so does not have to apply to inputs that are buttons (as cannot be undone with a specific input.btn class). */
div.inputs input, div.inputs select, div.inputs textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #222222;
	margin: 2px 0px 0px 0px; padding: 0px; border: 1px solid #7F9DB9; /* Remove border style to stick with sunken default */
	background-color: #FFFFFF !important;   /* Removes yellow background added by Google toolbar and other browser style sheets */
}

div.inputs input.checkbox, div.inputs input.radio {background-color: #ECEAEB !important; border: 0px} /* IE fix: Remove "div.inputs input" styling applied to radio buttons */

/* Buttons */
input.btn {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px; /* Required to vertically centre text in button in IE */
	color: #222222;
	width: 100px;
	margin: 0px; padding: 0px;
}

/* Site map */
#content #map10 {display: none;} /* Hide from site map: Pages not on main menu */
#content ul ul, #content ul ul ul, #content ul ul ul ul {margin-top: 8px;} /* Add space before lists for each sub-menu level */