/**************************************************************
 * Title			rada_upper (CSS template)
 * Version			2.2
 * Author			Jed Staton
 * Joomla			3.x
 * Extension		JSE Mega Menu
 * Copyright		© RADA - The Royal Academy of Dramatic Art
**************************************************************/


@media screen and (max-width: 767px) { /* overrides default hiding at 767px */
  #js-mainnav.rada_upper.megamenu.noJS ul.megamenu li {
    display: block; }}

#js-mainnav.rada_upper { /* gradient background for main lower nav */
	float: right; /* floats upper nav to one side (requires menu below to clear this float) */
	background-color: #FFF;
	z-index: 10; /* places top menu in front of lower menu */ }

#js-mainnav.rada_upper ul { /* fixes excess padding on child ULs */
	padding: 0; }

/* overrides (removes) default arrow placement on level 0 items */
#js-mainnav.rada_upper.megamenu.horizontal ul.level0 li a.haschild.mega span.menu-title,
#js-mainnav.rada_upper.megamenu.horizontal ul.level0 li a.haschild-over.mega span.menu-title,
#js-mainnav.rada_upper.megamenu ul.level0 li.haschild a.mega span.menu-desc,
#js-mainnav.rada_upper.megamenu ul.level0 li.haschild-over a.mega span.menu-desc {
	background: none;
	padding: 0; }

/* new arrow placement on level 0 items */
#js-mainnav.rada_upper.megamenu.horizontal ul.level0 li a.haschild.mega,
#js-mainnav.rada_upper.megamenu.horizontal ul.level0 li a.haschild-over.mega {
	background: url('../../images/arrow3.png') no-repeat 95% center;
	padding-right: 2em; }

/* overrides (removes) description line from title - forces single row */
#js-mainnav.rada_upper.megamenu ul.level0 li span.menu-desc {
	display: none; }

#js-mainnav.rada_upper.megamenu.horizontal ul.level1 li a,
#js-mainnav.rada_upper.megamenu.horizontal ul.level1 li a.haschild.mega /* required for override */,
#js-mainnav.rada_upper.megamenu.horizontal ul.level1 li a.haschild-over.mega /* required for override */ {
	background: none;
	padding-left: 0.5em; }

#js-mainnav.rada_upper ul.megamenu.level1 li { /* overrides width setting for child menu items */
	width: 100%; }

/* overrides top and bottom padding for level0 menu items */
#js-mainnav.rada_upper.megamenu ul.level0 li.mega span.mega,
#js-mainnav.rada_upper.megamenu ul.level0 li.mega a.mega {
	font-size: 0.9em;
	font-weight: bold;
	padding: 0.25em 1.5em; }

/* restores correct and uniform size/padding to menu child items after (0) sizing above */
#js-mainnav.rada_upper.megamenu ul.level1 li.mega span.mega,
#js-mainnav.rada_upper.megamenu ul.level1 li.mega a.mega {
	font-size: 1em;
	font-weight: normal;
	padding: 0.5em 0.5em; }


/*** LEVEL 0 (menu titles/headers) ***/
#js-mainnav.rada_upper ul.level0 {
	font-size: 1.25em;
	text-transform: uppercase; }

#js-mainnav.rada_upper ul.level1 {
	font-size: 0.9em;
	text-transform: none; }

@media screen and (max-width: 960px) { /* shrinks menu titles at smaller screen widths (minimizing line-wrapping) */
	#js-mainnav.rada_upper ul.level0 li.mega span.menu-title,
	#js-mainnav.rada_upper ul.level0 li.mega span.menu-desc {
		font-size: 100%; }

	#js-mainnav.rada_upper ul.level0 ul.level1 li.mega span.menu-title,
	#js-mainnav.rada_upper ul.level0 ul.level1 li.mega span.menu-desc {
		font-size: 1em; }}

#js-mainnav.rada_upper ul.level0 li.mega a.mega {
	border-left: 1px solid #FFF; /* this will be invisible against the white background, but keeps the size uniform */
	border-right: 1px solid #EEE;
	color: #000; }

#js-mainnav.rada_upper ul.level0 li.mega.last a.mega { /* removes right-hand border from last menu item (0) - NOTE: results may not be exact if other items are hidden. */
	border-right: none; }

#js-mainnav.rada_upper ul.level1 li.mega a.mega {
	border-left: none;
	border-right: none; }

div#header_wrap #js-mainnav.rada_upper ul.level0 a:hover, /* Hovered menu item (0) - without child items */
div#header_wrap #js-mainnav.rada_upper ul.level0 a.active /* Active menu item (0) - without child items */ {
	background-color: #C03; /* default fallback value */
	background: #C03;
	background: -webkit-gradient(linear, left top, left bottom, from(#C03), to(#711));
	background: -webkit-linear-gradient(top, #C03, #711);
	background: -moz-linear-gradient(top, #C03, #711);
	background: -ms-linear-gradient(top, #C03, #711);
	background: -o-linear-gradient(top, #C03, #711); }
	
div#header_wrap #js-mainnav.rada_upper ul.level0 li.haschild a:hover, /* Hovered menu item (0) - with child items */
div#header_wrap #js-mainnav.rada_upper ul.level0 li.haschild a.active /* Active menu item (0) - with child items */ {
	background-color: #C03; /* default fallback value */
	background: url('../../images/arrow3.png') no-repeat 95% center, #C03;
	background: url('../../images/arrow3.png') no-repeat 95% center, -webkit-gradient(linear, left top, left bottom, from(#C03), to(#711));
	background: url('../../images/arrow3.png') no-repeat 95% center, -webkit-linear-gradient(top, #C03, #711);
	background: url('../../images/arrow3.png') no-repeat 95% center, -moz-linear-gradient(top, #C03, #711);
	background: url('../../images/arrow3.png') no-repeat 95% center, -ms-linear-gradient(top, #C03, #711);
	background: url('../../images/arrow3.png') no-repeat 95% center, -o-linear-gradient(top, #C03, #711); }

div#header_wrap #js-mainnav.rada_upper ul.level0 li.mega a:hover, /* Hovered menu item (0) */
div#header_wrap #js-mainnav.rada_upper ul.level0 li.mega a.active /* Active menu item (0) */ {
	border-left: 1px solid #A33;
	border-right: 1px solid #600; }

div#header_wrap #js-mainnav.rada_upper ul.level0 ul.level1 a:hover, /* Hovered menu item (1+), overrides (0) hover colour */
div#header_wrap #js-mainnav.rada_upper ul.level0 ul.level1 a.active { /* Active menu item (1+), overrides (0) active colour */
	background: none;
	background-color: transparent;
	border: none; }

#js-mainnav.rada_upper ul.level0 li:hover a span { /* LAYERED HOVER STATE, PT.1: Hovered menu title colour (0) */
  color: #C03; }

#js-mainnav.rada_upper ul.level0 li:hover a:hover span { /* LAYERED HOVER STATE, PT.2: Overrides menu title colour on DIRECT hover (0) */
  color: #FFF; }

#js-mainnav.rada_upper ul.level0 li.active a { /* Active menu item (0) */
	background-color: #C03; }

#js-mainnav.rada_upper ul.level0 li.active a[id^="menu"] { /* Active menu item (1+) */
	color: #FFF; }

#js-mainnav.rada_upper ul.level1 li.active a[id^="menu"].active span { /* Active menu item (1+) */
	color: #FFF;
	font-weight: bold; }


/* lv - 1 and below
-----------------------------------*/

/** Layout **/

/* Columns ---*/
#js-mainnav.rada_upper .megacol { /* affects child-item top border, might also align multi-column layouts */
	float: left;
	border-top: 1px solid #000; }

/* Styling ---*/
#js-mainnav.rada_upper ul.level1 li.mega { /* border separators on dropdown list items */
	border-top: 1px dotted #666; }

#js-mainnav.rada_upper ul.level1 li.mega.first { /* removes border separator on first list item */
	border-top: none; }

#js-mainnav.rada_upper ul.level1 li.mega a.mega span.menu-title {
  background: none; padding: 0; }

#js-mainnav.rada_upper ul.level1 li.over, 
#js-mainnav.rada_upper ul.level1 li.haschild-over {
	background: none; }

/*  Makes ALL links at level1 and below grey  */
#js-mainnav.rada_upper ul.level1 li a:link span, 
#js-mainnav.rada_upper ul.level1 li a:visited span {
	color: #888; }

/*  Makes ALL hovered links at level1 and below grey  */
#js-mainnav.rada_upper ul.level1 li a:hover span, 
#js-mainnav.rada_upper ul.level1 li a:active span {
	color: #FFF; }

#js-mainnav.rada_upper ul.level1 li a.mega.active:hover span {
	cursor: default; }/* default arrow cursor on hover of current page - link is still clickable, however */

#js-mainnav.rada_upper ul.level1 li.haschild,
#js-mainnav.rada_upper ul.level1 li.haschild-over { /* adds arrow indicator to list items containing child items */
	background-image: url('../../images/arrow.png');
	background-repeat: no-repeat;
	background-position: 95% center; }


 /* CHILD CONTENT
-----------------------------------*/
/* Using .MM_HIDEMENU hides a link from the drop-down menu. */
/* Using .MM_HIDESUBMENU hides an entire submenu from a parent drop-down menu. */
div#header_wrap div#js-mainnav.rada_upper li.mm_hidemenu,
div#header_wrap div#js-mainnav.rada_upper li.mm_hidesubmenu > div {
	display: none; }
	
/* In conjunction with .MM_HIDESUBMENU hiding a submenu, it also removes the 'arrow' from the parent item that indicates the presence of a submenu. */
div#header_wrap div#js-mainnav.rada_upper li.mm_hidesubmenu {
	background-image: none; }

/*	Styles JSE list items that have been assigned the MM_PRIMARY class.  These are intended for aliases
	that point back to a main page that might otherwise be less prominent thanks to the drop-down menus.
	Remember to add HIDDEN class to regular menu link CSS if you don't want the alias to appear in other
	menus (such as left-hand or right-hand columns). */
div#header_wrap div#js-mainnav.rada_upper .mm_primary a {
  font-size: 1.3em;
  padding: 0.7em 0.35em 1em;
  text-transform: uppercase; }

#js-mainnav.rada_upper .childcontent-inner {
	background-color: #222; /* dropdown menu background colour */
	border-left: 0.7em solid #888; /* dropdown menu left border */
	border-right: none; /* dropdown menu right border */
	color: #888; /* dropdown menu text color, fallback (won't usually be visible) */
	border-bottom: 1px solid #888; /* dropdown menu bottom border */ }
	
/* Keeps first-tier sub-menu at correct height (otherwise the subsequent fix would shift this out of place */
#js-mainnav.rada_upper ul.level0 li.haschild > div.childcontent {
	border: 1px solid #888;
    margin-top: 0em; }

/* Ensures that sub-menus appear parallel to their parent (making them easier to navigate to with the mouse) */
#js-mainnav.rada_upper ul.level0 li.haschild > div.childcontent div.childcontent {
    margin-top: -2.5em; }