/*
BASE (MOBILE) SCREENS
These base styles apply to all screen sizes, but may be overridden on larger screns by the media query-driven styles that appear later in this file.
*/

nav ul,
nav ul li ul {
    list-style-type: none;
}

nav ul li ul {
    margin-left: 0px;
    padding-left: 0px;
}

/*Mobile Menu*/

.menu-toggle {
	display:block;
	float:right;
	clear:right;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 20px;
	width: 75px; 
	background-color: #E8D94C;  /* RCAN yellow */
	color: black;
	cursor:pointer;
	text-transform:uppercase;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 16px;
}

.menu-toggle.toggled-on {
}

.srt-menu.toggled-on {
	display:block;
	position:relative;
	z-index:10;
}

.srt-menu {
	display:none;
	clear:both;
	margin-bottom: 2em;
	border-top: 1px solid white;
}

/*Mobile menu*/

.srt-menu li {
	margin-top: 0; 
	padding-left: 0;
}

.srt-menu li a {
	display: block;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color:#FFFFFF;
	background-color:  #23864D; /* RCAN green */
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-right: 6px;
	padding-left: 6.33333333%;
	text-decoration: none;
}

/*Mobile menu, all levels*/
.srt-menu li a:hover,
.srt-menu li a.current {
	color:#FFFFFF;
}

/*Mobile menu, second level*/
.srt-menu li li a {
	color: #000000;
	background: #CCCCCC;
	padding-left: 12.5%;
}

/*Mobile menu, third level */
.srt-menu li li li a {
	color: #000000;
	background: #CCCCCC;
	padding-left: 20%;
}


/*
PHONES in LANDSCAPE ORIENTATION
*/

@media only screen and (min-width: 450px) { 

/* placeholder */

}



/*
PHABLETS in LANDSCAPE ORIENTATION
*/

@media only screen and (min-width: 600px) {

.menu-toggle {
	width: 90px;
	padding-left: 24px;
	padding-top: 5px;
	padding-bottom: 7px;
	font-size: 18px;
}

/*Mobile menu*/
.srt-menu li a {
	font-size: 17px;
}

/*Mobile menu, first level*/
.srt-menu li a {
	padding-left: 5%;
}

/*Mobile menu, second level*/
.srt-menu li li a {
	padding-left: 12.5%;
}

/*Mobile menu, third level */
.srt-menu li li li a {
	padding-left: 20%;
}

}




/*
TABLETS in PORTRAIT ORIENTATION

*/
@media only screen and (min-width: 700px) {

/* placeholder */

} 



/*
TABLETS in LANDSCAPE & SMALLER LAPTOPS
This is the first appearance of the "desktop layout"
*/
@media only screen and (min-width: 900px) {

/*** DROPDOWN MENU for TABLETS and DESKTOPS ***/

.menu-toggle {
	display:none;
}

#menu-main-navigation {
	display:block;
}

.srt-menu, .srt-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

.srt-menu {
	float: left;
	margin-bottom: 0;
	border: 0;
}

.srt-menu li {
	position: relative;
	background: black;
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background 2s;
}

.srt-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
	background: #FFFFFF;
	min-width: 5em; /* allow long menu items to determine submenu width */
	*width: 5em; /* no auto sub width for IE7, see white-space comment below */
}

.srt-menu > li {
	float: left;
}

.srt-menu li:hover > ul,
.srt-menu li.sfHover > ul {
	display: block;
}

.srt-menu a {
	display: block;
	position: relative;
	padding: 0;
	text-decoration: none;
	zoom: 1; /* IE7 */
}

.srt-menu li a {
	font-size: 17px; 
	font-weight: 600;
	color: #717073;   /* Pantone Cool Gray 11C */  
	background: white;
	display:block;
	margin: 0px;  /* adds top and bottom margin to all menu items, showing background color of the parent div */
	padding-top: 4px; /* add padding to active block of each top-level menu item */
	padding-right: 13px;
	padding-bottom: 6px;
	padding-left: 13px;
	border: 0;
	text-decoration:none;
}

.srt-menu li a:hover,
.srt-menu li a.current { /* top-level menu rollover colors AND current state */
	color: #717073;   /* Pantone Cool Gray 11C */  
	background:#E6E6E6; /* 90% white */
}

.srt-menu ul ul {
	top: 0;
	left: 100%; 
}

.srt-menu li:hover,
.srt-menu li.sfHover {
	background: black;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

.srt-menu li li a,
.srt-menu li li li a { /* drop-down menu colors */
	color: #717073;   /* Pantone Cool Gray 11C */  
	background: white;
	padding-left:13px; 
	padding-right:13px; 
}

.srt-menu li li a:hover,
.srt-menu li li li a:hover { /* drop-down menu hover colors */
	color: #717073;   /* Pantone Cool Gray 11C */  
	background:#E6E6E6; /* 90% white */
}

}



/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1100px) {

.srt-menu, .srt-menu * {
}

.srt-menu li a {
	font-size: 20px; 
	padding-top: 8px; /* add padding to active block of each top-level menu item */
	padding-right: 17px;
	padding-bottom: 10px;
	padding-left: 17px;
}

.srt-menu li li a { /* drop-down menu */
	padding-left:17px; 
	padding-right:17px; 
}

}
/* Stylesheet: menu-2020 Modified On 2020-11-23 00:02:20 */
