/* this is the menu for the route days.  

  SIDEMENU
	For the Route pages, let's show the map and indicate the portion of the map ridden that day.
	Because we rode South to North, I inverted the menu/TOC order.
*/

	/* set the background, border, position, and width of the sidemenu component.  */
	ul.menu._Skins_routeMenu.mc-component
	{
		color: #fbc98c;
		line-height: 1em;
		border: solid 2px #fbc98c;
		border-radius: 6px;
		margin: 0px;
		padding: 0px;
		width:100%;
		max-width: 215px;
		height: 100%;
		background: transparent url('../Images/OO60/OO60-sidemenu-wide.jpg') no-repeat;
		-pie-background: transparent url('../Images/OO60/OO60-sidemenu-wide.jpg') no-repeat;
		background-size: contain;
		overflow:hidden;
	}
	
	/* set the font specs for the sidemenu links  */
	ul.menu._Skins_routeMenu.mc-component a
	{
		color: #fbc98c;
		font-size: 0.85rem;
		font-style: normal;
	}
	
	/* set an opacity overlay on the menu for each link/list item and its position  
	In addition, hide the day until it is hovered over*/
	ul.menu._Skins_routeMenu.mc-component li > a{background-color: rgba(255,255,255,0.85);padding-left: 8px;color:transparent;}
	
	/* on hover, remove the opacity overlay for the hovered element
	make the background transparent so that the map shows without an opacity on top of it
	show the day and add a dashed border above/below the element
	 */
	ul.menu._Skins_routeMenu.mc-component li > a:hover {background-color:transparent;border-top: 1px dashed #ff8c00;border-bottom: 1px dashed #ff8c00;font-weight:600;}
	
	/* settings for the selected element  
	make the background transparent so that the map shows without an opacity on top of it
	set the color and weight to be more prominent and make the border solid
	*/
	ul.menu._Skins_routeMenu.mc-component li > a.selected,
	ul.menu._Skins_routeMenu.mc-component li > a.selected:hover
	{
		font-weight: 900;
		background-color: transparent;
		color: #3e3e3e;
		border-top: solid 1px #fbc98c;
		border-bottom: solid 1px #fbc98c;
	}
		
	/* hide any second/third/fourth level elements  */
	ul.menu._Skins_routeMenu.mc-component ul > li > a,
	ul.menu._Skins_routeMenu.mc-component ul ul > li > a,
	ul.menu._Skins_routeMenu.mc-component ul ul ul ul > li > a
	{display:none;}
	
/*  BREADCRUMBS  
	For the Route pages, let's show the route and change the breadcrumbs to indicate the route for the day.
	The background is an elevation of the route.
	Each route page will have a margin left amount set inline to move the breadcrumb over to the correct location.
	It could also have a different right/left padding to indicate the length of the ride that day.
*/

	/* Let's set up the breadcrumbs to have a bg of the route elevation. */
	div.breadcrumbs {
		min-height:50px;
		width:100%;
		background:transparent src(../Images/OO60/OO60-elevation-breadcrumbs.jpg) no-repeat contain;
		border-bottom: none;
		overflow: hidden;}
	
	/* Let's hide the default breadcrumb prefix and any breadcrumb link and the divider, so that only the current breadcrumb appears */
	.MCBreadcrumbsPrefix, a.MCBreadcrumbsLink, .MCBreadcrumbsDivider {display: none;}
	
	
	/*Set up the current breadcrumb to indicate the portion of the route ridden that day */
	.MCBreadcrumbsSelf {
		font-style: normal;
		font-weight: 700;
		text-transform: uppercase;
		background-color: #ff8c00;
		color: white;
		line-height: 2.5rem;
		border-radius: 4px;
		padding: 2px 4.25%;
		border:none;
		position: relative;
}
@media only screen and (max-width: 767px) {
	.MCBreadcrumbsSelf {
		color:transparent;
		font-size:1px;
		padding: 2px 6%;
		line-height:0.5;
		border-radius:0;
	}
	
	div.breadcrumbs{
		min-height:25px;
	}
}