.menu-button {
	overflow: hidden;
	cursor: pointer;
	/* add menu icon */
	background-image: url('../images/menu-dark.png');
	background-repeat: no-repeat;
	background-position: 95% center;
	margin: 0;

	margin-bottom: 0px;
	line-height: 1em;

	border: none;
	font-size: 1.2em;

	/*----- make menu button small -----*/
	width: 70px;
	padding-right: 20px;	
	background-position: 85% center;
	float: right;

	margin-top: 10px;
	padding: 10px 20px;

	display: none;
	float: right;

	-moz-border-top-left-radius: 7px;    /* for Firefox */
	-webkit-border-top-left-radius: 7px; /* for old Safari, KHTML */
	border-top-left-radius: 7px;         /* for CSS3 */

	-moz-border-top-right-radius: 7px;    /* for Firefox */
	-webkit-border-top-right-radius: 7px; /* for old Safari, KHTML */
	border-top-right-radius: 7px;         /* for CSS3 */
}

.menu-button-closed {
	background-image: url('../images/close-dark.png');
	border-bottom: none;
}

/*
 * Mobile first approach - define navigation menu for small screen
 */
ul#main-menu {
	display: none;
	border: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
ul#main-menu ul {
	display: none; /* important */
	margin: 0px;
	padding: 0px;
}

ul#main-menu .title {
	font-size: 1em;
	padding-left: 10px;
	padding-bottom: 10px;
	margin-top: -8px;
}
ul#main-menu li {	/*---- common to all list items ----*/
	display: block;
	list-style: none;
	cursor: default;
}
ul#main-menu li a {	/*---- common to all list items ----*/
	display: inline-block; /* Important! */
	text-decoration: none;
	/* border: solid 1px #808; */
	padding-left: 20px;
	font-size: 1.2em;
}
ul#main-menu li a:hover {
	text-decoration: underline;
}

/*
 * adding indent to anchor text based on the level 
 */
ul#main-menu li.title,
ul#main-menu li a { 	    /*----1st level----*/
	padding: 10px 0px;
	padding-left: 10px;
}
ul#main-menu li li .title,
ul#main-menu li li a { 	/*----2nd level----*/
	padding-left: 30px;
}
ul#main-menu li li li .title,
ul#main-menu li li li a { 	/*----3rd level----*/
	padding-left: 50px;
}

/*
 * position of icon image
 */
ul#main-menu li img {
	margin: 0px -5px 0px 10px;
}
ul#main-menu li li img {	/*----2nd level----*/
	margin: 0px -15px 0px 20px;
}
ul#main-menu li li li img {	/*----3ed level----*/
	margin: 0px -25px 0px 30px;
}

/*
 * add menu icon to the items that has a child ul
 */
ul#main-menu li.item-with-ul {
	background-image: url('../images/menu-dark.png');
	background-repeat: no-repeat;
	background-position: 95% 15px;
	cursor: pointer;
}
ul#main-menu li.item-with-ul-closed {
	background-image: url('../images/close-dark.png');
}

@media screen and (max-width: 800px) {
	.menu-button-connector {
		clear: both;
	}
    ul#main-menu li.searchbox {
     -moz-border-bottom-left-radius: 5px;    /* for Firefox */
     -webkit-border-bottom-left-radius: 5px; /* for old Safari, KHTML */
     border-bottom-left-radius: 5px;         /* for CSS3 */
     -moz-border-bottom-right-radius: 5px;    /* for Firefox */
     -webkit-border-bottom-right-radius: 5px; /* for old Safari, KHTML */
     border-bottom-right-radius: 5px;         /* for CSS3 */
    }
}
/*
 * Tablet and desktop PC (large screen)
 */
@media screen and (min-width: 801px) {
	#main-menu {
		margin-top: 6px;
		height: auto;
		display: none;
	}
	ul#main-menu, #secondary-menu {
		margin: 0px;
		padding: 0px;
		margin-top: 0px;
		display: inline-block;
		border: none;
		width: auto;
	}
	ul#main-menu > li {	/*---- top menu item without sub-menu ----*/
		padding: 0px;
		position: relative;
		list-style: none;
		float: left;
		background-color: transparent;
		padding-right: 5px;
		margin-right: 0px;	/* space between next menu item */
		border: none;
	}
	ul#secondary-menu {
	}
	/*
     * Add arrow image to the item that has sub-menu
     */

	ul#main-menu li.item-with-ul {	/*---- regular menu items with sub-menu ----*/
		background-image: url('../images/arrow-dark-right.png');
		background-position: 90% 10px;
	}
	ul#main-menu > li.item-with-ul {	/*---- top menu item with sub-menu ----*/
		padding-right: 26px; /* add space for menu icon */
		background-image: url('../images/arrow-dark-down.png');
		background-position: 90% 8px;
		background-color: transparent;
		border: none;
	}
	ul#main-menu > li.first {
	}

	ul#secondary-menu li a,
	ul#main-menu li a {	/*---- common to all list items ----*/
		display: inline-block;
		margin-left: 5px;
		padding: 3px 10px 4px 10px;
		font-size: 1.1em;
	}
	ul#secondary-menu li a {
		padding: 2px 10px 3px 10px;
		margin-left: 0px;
	}

	ul#secondary-menu li ul,
	ul#main-menu li ul {		/*---- top level sub-menu ----*/
		position: absolute;
		top: auto;
		left: -1px;
		width: 14em;
		z-index: 100;
		padding: 0px;
		height: 0;	/* important! */
	}
	ul#main-menu li li {
		display: block;
	}
	ul#main-menu li li ul {		/*---- second level sub-menu ----*/
		position: relative;
		/* this must match the height of the menu item */
		left: 100%;
		width: 14em;
		z-index: 200;
		background-color: #fff;
	}
	ul#main-menu li li li {
	}
	/*
     * hover highlight color
     */
	ul#main-menu li.nohover:hover {
		background-color: transparent;
	}

	/*
 	 * No indent in sub-menu item text
 	 */
	ul#main-menu li .title,
	ul#main-menu li li .title,
	ul#main-menu li li li .title {
		padding-left: 15px;	
		padding-right: 5px;
	}
	ul#main-menu li li a,
	ul#main-menu li li li a {
		padding-left: 10px;	
	}
	ul#main-menu li img,
	ul#main-menu li li img,
	ul#main-menu li li li img {
		margin: 0px -5px 0px 10px;
	}
}