/**
  * >>>>>  Migrated over from the old Drupal 7 version of the Maryland Sea Grant site.  <<<<<
  * >>>>>  Some tweaks made.  <<<<<
 */

/*
 * Modify Superfish css (dj)
 */

/* Navigation Button
 * sf-accoridion-toggle is class used by Superfish 2.0
 * #superfish-4-toggle created by sfsmallscreen.js (i.e., toggleID)
 * css based on Canton's nav-button class used with the menu toggle block
 *
 * no need to hack sfsmallscreen.js so that toggle background is part of the link
 * change line 140 in sfsmallscreen.js (v1.3b) from
 * var toggle = '<div class="sf-accordion-toggle ' + styleClass + '"><a href="#" id="' + toggleID + '"><span>' + options.title + '</span></a></div>';
 * to
 * var toggle = '<a class="sf-accordion-toggle ' + styleClass + '" href="#" id="' + toggleID + '"><span>' + options.title + '</span></a>';
 *
 */

.sf-accordion-toggle { /* toggle button */
	display: block;
	position: relative;
  font-family: 'NewsGothicBTW01-BoldCn',Arial,Helvetica,sans-serif;
	top: 0;
	right: 0;
	cursor: pointer;
	border: 0 none;
	z-index: 999;
	color: #fff !important;
	text-shadow: 1px 1px #000;
	padding: 6px 10px 7px 10px;
	text-decoration: none !important;
	font-size: 2em;
}

#superfish-main-menu--2-toggle {
	border: none;
	display: block;
	padding: 0 .4em 0 0;
	transition: color .5s;
	-moz-transition: color .5s; /* Firefox 4 */
	-webkit-transition: color .5s; /* Safari and Chrome */
	-o-transition: color .5s; /* Opera */
	visibility: visible;
	/* three bar image as background */
	background: url('../images/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/menu-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/menu-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/menu-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 36px, 100%;
	/* text */
	width: 110px;
	text-align: right;
	color: #ffffff; /* #00bff3 */
	text-decoration: none;
	text-transform: capitalize; /* text-transform: uppercase; */
}

#superfish-main-menu--2-accordion {
	/* X image as background - turned on by script.js */
	background: url('../images/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/close-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/close-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/close-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 36px, 100%;
	background-color: #203641
}

#superfish-main-menu--2-accordion li a {
	font-family: "NewsGothicBTW01-BoldCn";
}

#superfish-main-menu--2-accordion li a {
	font-family: 'NewsGothicBTW01-BoldCn';
}

#superfish-main-menu--2-accordion li a,#superfish-main-menu--2-accordion li span.nolink {
	border: none;
	color: #00bff3;
	display: block;
	padding: 0;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.314em;
	transition: color .5s;
	-moz-transition: color .5s;
	-webkit-transition: color .5s;
	-o-transition: color .5s;
	visibility: visible;
	line-height: 38px;
	margin-left: 15px;
}

/* End Navigation Button */

#superfish-main-menu--2-accordion ul.sf-has-clone-parent li.sf-clone-parent {
	display: none !important;
}

#superfish-main-menu--2-accordion ul.sf-has-clone-parent {
	background-color: #27414e;
}

#superfish-main-menu--2-accordion ul.sf-has-clone-parent li {
	background-color: #27414e;
	margin-left: 14px;
}

#superfish-main-menu--2-accordion ul.sf-has-clone-parent li a {
	color: #fff;
	text-transform: capitalize;
	font-size: 1.188em;
	line-height: 1.9em;
}

@media all and (min-width: 768px) { /* hide mobile menu */
	#block-mainmenu-7 { display: none !important; }
	/* shadow adjustment - do not display home in horizontal menu */
	#main-menu-menu-link-content3c2e092c-c637-4704-81e7-1cb3f440374e { display: none !important; }
	#zone-menu ul.sf-main-menu .triangle { /* triangle indicating children */
		display: none;
	}
	.post-bottom-widgets .region-post-bottom-first #block-socialmediamobile {
	  display: none;
    }
}

@media screen and (max-width: 768px) { /* show/style mobile menu */
	#block-mainmenu { /*display: none !important;*/ }
	#block-utilitymenu { display: none !important; }
	.block-mainmenu-7 { display: block !important; }
	.region-primary-menu { border: none !important; }

  .main-header {
    background-color: #0e262d !important;
  }

  .region-primary-menu {
    border-radius: unset !important;
    padding: 5px !important;
    border-top: thin solid white !important;
  }
  .region-primary-menu .md-sea-grant ul.sf-main-menu li {
    border-right: none !important;
    padding: 10px !important;
  }
	.post-bottom-widgets .region-post-bottom-first #block-socialmediamobile {
	  display: block;
	  margin-left: -42px;
    }

	.post-bottom-widgets .region-post-bottom-first #block-socialmediamobile .layout ul li {
	  display: inline-block;
	  margin: 0;
	  padding: 0;
	}

  .sf-clone-parent {
    display: none !important;
  }
  .region-primary-menu .md-sea-grant ul.sf-main-menu li {
    float: none !important;
  }

  .region-primary-menu .md-sea-grant ul.sf-main-menu li ul {
    border-radius: 0 !important;
    background-color: white !important;
    display: block;
    border-top: thin dotted #ccc;
    width: 100% !important;
    margin: 10px 0 5px !important;
  }

  .region-primary-menu .md-sea-grant ul.sf-main-menu li ul a{
    color: #0a001f !important;
    background-color: transparent !important;
    width: 100% !important;
    padding: 10px !important;
    border-radius: 0 !important;
    font-size: 20px !important;
  }

	.post-bottom-widgets .region-post-bottom-first #block-socialmediamobile .layout ul li:hover {
	  opacity: .7;
	}

	.bottom-widgets .region-bottom-first, .bottom-widgets .region-bottom-second, .bottom-widgets .region-bottom-third {
      margin: 0 auto 20px auto !important;
	}
}

@media (max-width: 980px) and (min-width: 768px) {
	.bottom-widgets .region-bottom-first, .bottom-widgets .region-bottom-second {
	  width: 350px !important;
	}
}

#zone-menu  {
	font-family: 'NewsGothicBTW01-BoldCn',Arial,Helvetica,sans-serif;
	width: 100%;
	font-size: .75em;
	border: none;
}

#region-menu {
	padding: 0;
}

#zone-menu .sf-description { /* remove title display (description) */
	display: none;
}

	#zone-menu ul.sf-main-menu li {
		border: none;
		text-transform: capitalize;
	}
	/* parent triangle on right */
	#zone-menu ul.sf-main-menu .triangle { /* triangle indicating children */
		color: /* rgba(255,255,255,.5) */
		margin: 0;
		color: #cccccc;
		font-size: 1em;
		position: absolute;
		right: .5em;
	}
	#zone-menu ul.sf-main-menu .triangle-open { /* open showing children */
		font-size:.85em; /* make slightly smaller to look better */
	};
	/* original idea to just use pseudoelements */
	/*
	#zone-menu ul.sf-main-menu li a::after,
	#zone-menu ul.sf-main-menu li a.close::after  {
		content: "►";
		color: rgba(255,255,255,.5);
		float: right;
		margin: 0 .5em;
	}
	*/
	/* focus not work with Safari */
	/*
	#zone-menu ul.sf-main-menu li a:focus::after {
		content: "▼";
	}
	*/
	/* parent no triangle on right */
	#zone-menu ul.sf-main-menu .sf-no-children .triangle { /* no children */
		display:none;
	}
	/* original idea to just use pseudoelements
	#zone-menu ul.sf-main-menu li.sf-no-children a::after {
		content: none;
	}
	*/

	/* childen no triangle on right */
	#zone-menu ul.sf-main-menu li li a::after {
		content: none;
	}

	#zone-menu ul.sf-main-menu li:first-child { /* adjust 1st parent item */
		margin-left: .4em;
	}

	#zone-menu ul.sf-main-menu li li { /* child item */
		border: 0;
		padding: .2em 0;
		margin: 0;
		width: 100%;
		font-size: 1.3em;
	}

	#zone-menu ul.sf-main-menu li li: first-child {
		margin-left: 0;
		margin-top: 0.6em; /* move down so not overlay bottom of parent text */
	}

}