/*===============ml changes -- mobile first 
r-menu-mf.css
2013 Dec 22
works, but dropdown has a shorter white green line that I can't get rid of
=================*/

.menu-bar {
	clear: both; /* added after bk that worked */
    margin-top: 10px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%;
	color: #fff;		
	float: none; /* previous had float left */
}
/* Some stylesheet reset */
#r-nav, #r-nav ul {  /* all */
	list-style: none;
	margin: 0;
	padding: 0;
}
#r-nav {
		/* mobile */
		position: relative; /* ml added here */		
		width: 100%;
		max-width: 768px;
		border-radius: 3px;  	
		background: #7b0d0e; 	
		height: 32px; 		/* change was 44 --moved from desktop */	
}

#r-nav li {  /* mobile */		
		float: none;
		background:#7b0d0e; 		
		padding: 0 10px;
		display: none;
}

#r-nav>li>a {		/* mobile */		
		padding: 8px 10px;
			/* Typography from desktop*/
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
	border-color: #ffffff; /* from desktop */
	display: block; /* from desktop */
}

.dropdown>a::after {		/* mobile */		
		display: none;
}

#r-nav ul {		/* mobile */		
		position: relative;
		background: #7b0d0e; 		 
		top: 0px;
		left: 0px;
		right: auto;
		opacity: 1;
		clear: both;
}

#r-nav ul li, #r-nav>li:hover>ul>li {		/* is box behind mobile box around dropdown color on desktop*/		
		height: auto;
		position: relative;
		background: #fff; /*#ecfee2;*/ /*#9a84c2;		 */		
}

#r-nav ul li a {		/* mobile */		
		padding: 3px 10px; 
		width: auto;
/*		height: auto; */
line-height:22px;
	/* Typography - moved from desktop*/
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	text-decoration: none;
	color: #000;
	font-weight: 400;		
	/* Background & effects */
		background: #fff; /*#ecfee2;*/ /*#9a84c2;		 */		
}

#r-nav #toggleMenu {		/* mobile */		
		display: block;
}

#r-nav #toggleMenu>a, #r-nav #hideMenu>a {		/* mobile */		
		padding: 13px 10px;
		z-index: 999;
}

#r-nav:target li {		/* mobile */		
		display: block;
}

#r-nav:target #toggleMenu {		/* mobile */		
		display: none;
}

#r-nav:target #hideMenu {		/* mobile */		
		display: block;
		background: rgba(0, 0, 0, .13);
}

#r-nav #hideMenu>a {		/* mobile */		
		color: #fff;
}

#toggleMenu>a::after, #hideMenu>a::after {		/* has to do with 2 of 3 bars mobile */		
		position: absolute;
		content: "";
		right: 20px;
		top: 16px;
		height: 3px;
		width: 20px;
		border-top: 2px solid #ffffff;
		border-bottom: 2px solid #ffffff;
		z-index: 1;		
}

#toggleMenu>a::before, #hideMenu>a::before {		/*has to do with one bar mobile */		
		position: absolute;
		content: "";
		right: 20px;
		top: 23px;
		height: 3px;
		width: 20px;
		border-bottom: 2px solid #ffffff;
		z-index: 1;		
}

#hideMenu>a::after, #hideMenu>a::before {
		/* mobile */		
		border-color: #fff; 
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!for bigger */
@media screen and (min-width: 768px) {	

.menu-back { /* gave dark green bar across page -- not in bk that worked */
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #7b0d0e; 	
}

 .menu-bar { /* in one that worked only had float left */
 	width: 100%; /*just shifted left */
	float: none;
	margin-left: auto;
	margin-right: auto;	
} 

 #r-nav {
	 width: 96%;
	 max-width: 96%;
	 
 }
#r-nav #toggleMenu, #r-nav #hideMenu {/* desktop */	
	width: 100%;
	display: none;	
}

#r-nav:target #hideMenu {		/* desk ml added:  remove the mobile menu top line*/		
		display: none;
}

/* The main r-navigation bar */
#r-nav {/* desktop */	
	position: relative;
	width: 100%; /* The menu will take the width of its container */
	display: block;	
	align: center; /* don't think matters - remove later */
}

#r-nav>li {/* desktop */	
	display: block;
	float: left;
	position: relative;
/*	padding-top: 4px; *//* no- only did dk green area trying to see if eleminates funny top line */
}

/* The main r-navigation links */
#r-nav>li>a { /* desktop */	
	/* Layout */
	padding: 3px 12px;  /* wow - seems if do less than 3 px can't get to dropdown but give funny line at top
	horizonatl nav bar */
}

/* The hover state of the links */
#r-nav>li:hover>a {  /* desktop */	
	color: #fff;
	border-top-color: #fff;
}

#r-nav>li.dropdown>a {/* desktop */	
	padding-right: 28px;
}

/* The arrow indicating a dropdown menu */
.dropdown>a::after {/* desktop */	
	position: absolute;
	display: block;
	content: ""; 
	height: 0;
	width: 0;
	border: 4px solid transparent;
	border-top-color: inherit;
	right: 11px;
	top: 9px; /* was 21 px, try less - maybe shows dropdown arrow here*/
}

/*  The submenus */
#r-nav ul {/* desktop */	
	display: block;
	position: absolute;
	top: 18px; /* if less get funny line above -- maybenot*/
	left: -9999px;
	opacity: 0;
	cursor: pointer;
}

#r-nav ul li {/* desktop */	
	display: block;
	position: absolute;
	height: 0px;
}

/* The submenu appears when its parent is hovered */
#r-nav>li:hover>ul {/* desktop */	
	left: 0px;
	opacity: 1;
}

#r-nav li:hover>ul>li {/* desktop */	
	position: relative;
	height: 25px;
}

/* The submenu links */
#r-nav ul li a {/* desktop */		/* Layout */
line-height:20px;
	display: block;
/*	padding: 2px 12px 2px 7px; */ /*bottom was 22 make smaller : didn't change main look*/
	width: 100px;  /* 130px; original */
}

/* Changing the link color on hover */
#r-nav ul li:hover>a { /* desktop */	
	color: #d7a637;
}

}