/*<meta />*/

/*some adjustments to Soledad's default styles in MainStyles.css  */
	body,p,a {font-family: 'Maven Pro', sans-serif;font-size:0.9rem;}
	h1 {color:#ff8c00;font-size:2rem;line-height:1.2;font-family: 'Luckiest Guy', cursive;margin: 0 0 10px;}
	
	
	/* links */
		/* let's put a hover animation effect on the link  */
		p>a {color: #ff8c00;
		text-decoration:none;
		font-weight:600;
		-webkit-transition: .5s;
		transition: .5s;
	}
		p>a:hover {background-color: #ff8c00;color:#fff;}
		
		/* cross-references  */
		a.MCXref.xref {
	    color: #ff8c00;
	    border: none;
	    padding: 0;}
		a.MCXref.xref:hover {background:#e3e3e3;color:#ff8c00;}
		
		/* let's remove borders for our topic menu items  */
		li>a {border:none;}

	
	/* images */
		.full {width: 100%;max-width: 500px;}
		.mc-wrapper img {width:100%;}/*sets the slideshow image width to 100%  */
		
	/* ditch that gray bg on the body */
	section.main-section {background: #fff;margin:0 10px;}
	
	/* content container.  Let's make it a flex object  */
	div.content-container{display:flex;flex-flow: row wrap;
	justify-content: space-between;align-items: stretch;align-content: flex-start;padding:0;
gap: 20px;
}

	/* new container for full-width content  */
	div.content-full {flex:1 1 100%; padding:0;margin: 0;}
	
	/* new container for middle content -  Set it as a 2/3 container */
	div.content-middle {flex:1; padding-right:0px;padding-bottom:20px;margin: 0;}
	
	/*side-content -- set it as a 1/3 container. */
	div.side-content {
	  float: none;
	  margin:0 auto 0 0;
	  flex:0 0 215px;
	  width:215px;
	  /*! text-align: left; */
	  /*! align-self: flex-start; */
	}
	img {display: block;transition:all 0.25s ease;max-width:99%;}
	div.side-content:hover img{transform:scale(1.25);-webkit-transform:scale(1.25);}

/* Let's add animated orange borders below the main navigation links. Initially, the border width is set to 0%.  */

	ul.navigation li > a::after, p.tile-title>a:after {
	-webkit-transition: width 0.3s;
	transition: width 0.3s;
	background: #ff8c00;
	content: '';
	display: block;
	height: 2px;
	margin: 0px auto;
	width: 0;
	}

	/* When hovered over (or active), the bottom border grows to 80% of the link's width  */
	ul.navigation li > a:hover::after, ul.navigation li > a.active::after, p.tile-title>a:hover:after {width: 80%;max-width:150px;}
			
/* Let's hide the lower level menus.*/
	ul.navigation li:hover > ul,
	ul.navigation > li.has-children:hover:after,
	ul.navigation > li.has-children:after,
	ul.navigation li:hover > ul, ul.navigation > li.has-children:hover:after{
	visibility: hidden;
	opacity: 0;
	display:none;
	}
	p.tile-title>a {color:#fff;}
	p.tile-title>a:hover {background:none;}

/*  dropdowns  */

	/* let's add a orange dotted border (similar to the breadcrumb on the Routes page) to the bottom of the dropdown.  */
	.MCDropDownBody.dropDownBody {
	border-bottom: 4px dotted  #ff8c00;
	border-left: 2px dotted #ff8c00;
	border-radius: 16px;
	border-top-left-radius: 0;
	padding-left: 10px;
	padding-right: 10px;
	}
	
	/* let's style the dropdown head hotspot in orange  m*/
	.MCDropDownHotSpot_.MCHotSpotImage {color: #ff8c00;padding:5px;display:inline-block;}
	
	/* let's style the dropdown head link closed */
	.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage {
	border:none;
    background-position: left 25px;
    background-image: url('arrow-right-gray.png');
    padding-left: 20px;
    padding-right: 10px;}
	
	/* let's style the dropdown head link, but only when it is open */
	.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage {
	color: #ff8c00;
	 border-bottom: 2px solid #ff8c00;
	 padding:4px;
	 padding-left: 20px;
background-position: left 25px;
	}
	
	
	/* Search Bar  */
	
	/* let's style the bg color of the search button orange on hover  */
	.search-bar.search-bar-container .search-submit {transition:0.5s;}
	.search-bar.search-bar-container .search-submit:hover {background-color: #ff8c00;}	
	
	
	
	/*  ROUTE MENU  */
	
	/* 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;}
	
/*==Page Footer==*/

div.footer
{
	padding: 10px 20px;
	background: black;
	background: -webkit-linear-gradient(#004863, black, black);
	background: -o-linear-gradient(#004863, black, black);
	background: -moz-linear-gradient(#004863, black, black);
	background: linear-gradient(#004863, black, black);
	margin:0 0 0 -15px;
	width:100%;
	text-align: center;
}
div.footer p 
{
	font-size: 0.8em;
	color: #b1b1b1;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
div.footer p img {margin:0 auto;}
div.footer a
{
	text-decoration: none;
	color: #DADADA;
}
div.footer p a img {display:inline-block;padding-right:10px;position:relative;vertical-align: middle;}
	
@media only screen and (max-width: 767px) {
	div.content-middle {flex:1 100%;}	
	div.side-content {display:none;}
}