/* ############################################################################
   ## 
   ##  MAIN MENU
   ##
   ######################################################################### */

/* ####################################
   GLOBAL - List Layout
   ################################## */

.menuList {
    /* The nav object. (A <ul> in the standard platform.) */
    position: relative; /* DON'T CHANGE - Assures nav container has proper cascading position. */
    float: left; /* DON'T CHANGE - Makes IE and FF behave the same regarding ul dimensions. */
    margin: 0; /* DON'T CHANGE - Removes margin around the ul for neat layout. */
    padding: 0; /* DON'T CHANGE - Removes padding within the ul for neat layout. */
    list-style: none; /* DON'T CHANGE - Removes bullet points from list items. */
    width: 100%;
    font-size: 110%;
	display:flex;
	justify-content: center;
}

.menuList li {
    /* All list items within the nav object */
    float: left; /* float: left; makes the top level horizontal. */
	background:none;
	/*flex-grow: 1;*/
    text-align: left;
}
	.menuList li:last-child{
		border-right:none;
		background-image:none;
	}
* html .menuList li {
    /* IE6 Only */
    width: 10px; /* IE6 needs a width the menu layout breaks. The white-space and padding options below simulate the variable width seen in other browsers but only of the text in the menu items is short enough. */
    white-space: nowrap;
}

    .menuList li:hover, .menuList li.sfhover {
        /* All list items within the nav object - Hover */
    }
		
/* ####################################
   GLOBAL - Anchors (Links)
   ################################## */

    .menuList a:link {
        /* All anchor tags within the nav object */
        display: block; /* DON'T CHANGE - Fills the width of the li with link rollover. */
        padding: 10px 15px;
        color: var(--colour-blue);
        font-family: "FocoCCBold", "FocoBold", Arial, Helvetica, Sans Serif;
		color: #fff;
    }

		.menuList a:visited {
			color: #fff;
		} 
* html .menuList a {
    /* IE6 Only */
    /* All anchor tags within the nav object */
    width: 100%; /* DON'T CHANGE - Fills the width of the li with link rollover for IE6 (display:block fix). Be careful if margin/padding/border is added. */
}

    .menuList a:hover {
        /* All anchor tags within the nav object - Hover */
        background: #ececec;
        text-decoration: none;
		color:#0196D8;
    }
/* ####################################
   LEVEL 2+ - List Layout
   ################################## */

.menuList li ul {
    /* Second level lists (all sub lists within list items) */
    position: absolute; /* DON'T CHANGE - Places second level lists in the right spot. */
    left: -10000em; /* DON'T CHANGE - Drop-down hover trick - Hide the menu off the screen. */
    margin: 0; /* DON'T CHANGE - Removes margin around the ul for neat layout. */
    padding: 0; /* DON'T CHANGE - Removes padding within the ul for neat layout. */
    list-style: none; /* DON'T CHANGE - Removes bullet points from list items. */
    background: #ffffff;
    font-size: 90%;
    font-weight: normal;
    border: #ececec 1px solid;
    border-bottom: 0;
	z-index:10;
}
	.menuList li ul.level2{
		-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	}
.menuList li:hover ul.level2, .menuList li.sfhover ul, .menuList li li.sfhover ul {
    /* Second level lists (all sub lists within list items) - Hover over the containing li */
    left: auto; /* DON'T CHANGE - Drop-down hover trick - Re-align the menu on the screen on rollover. */
}

.menuList li ul li {
    /* Second level list items */
    float: none; /* DON'T CHANGE - Makes second level list items vertical. */
    width: auto;
    padding-right: 0;
    border-right:0;
	background-image:none;
}
* html .menuList li ul li {
    width: 140px; /* Otherwise each li is a different width. */
    white-space: normal; /* Allows menu items to span multiple rows, overridden from first level. */
}

    .menuList li ul li:hover, .menuList li ul li.sfhover {
        /* Second level list items - Hover */
    }

    .menuList li ul li:hover {
        /* Second level list items - Anchor tags - Hover */
        background:var(--colour-blue-light-100);
    }

/* ####################################
   LEVEL 2+ - Anchors (Links)
   ################################## */

    .menuList li ul li a {
        /* Second level list items - Anchor tags */
        margin:0;
        padding: 11px 18px 8px 0px;
        color: #0196D8;
        background: none;
        border-bottom: #ececec 1px solid;
        font-family: "FocoCC", "Foco", Arial, Helvetica, Sans Serif;
    }
	.menuList li ul.level2 li:last-child a{
		border:none;
	}

/* ####################################
   Custom Stuff / Hard Coded Elements
   ################################## */

/*
Individual items can be hard coded, e.g.

.menuList li.item1 {
}

.menuList li#mainMenu_aboutus {
}
*/

/* ############################################################################
   ## 
   ##  LAYOUT FOR DIFFERENT SCREENS
   ##  Check the following URL for a good device size reference:
   ##  https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
   ##
   ######################################################################### */

/*Custom Main Menu*/
	.menuList li.level1 div.link-item-level1 a{padding-right:30px;background-image:url(/images/icons/svg/arrow-right-white.svg);background-position:right center;background-repeat:no-repeat;background-size: 23px;}
	.menuList li.level1:hover div.link-item-level1 a{background-image:url(/images/icons/svg/arrow-down-blue.svg);background-position: right top 12px;}
	.menuList li.level1 ul.level2 li div.link-item-level2 a{color:var(--colour-blue);}
	.menuList li ul{
		width:260px;
		height:600px;
	}
		.menuList li ul.level2{
		}
		.menuList li:last-child{
			border:none;
		}
		.menuList li:hover ul.level2, .menuList li.sfhover ul, .menuList li li.sfhover ul {
			left: auto;
			z-index: 501;
		}
			.menuList li#mainMenu_ccv_cancer-information:hover  ul.level2 {
				margin-left: 0;
			}
		.menuList li ul.level2 li.genericMainMenuContent{
			border:none;
			position:absolute;
			top:0;
			right:0;
		}
			.menuList li ul.level2 li.genericMainMenuContent div.summary{
				padding:8px 36px 0 12px;
				line-height:150%;
			}
			.menuList li ul.level2 li.genericMainMenuContent p.title{
				font-family: "FocoCC", "Foco", Arial, Helvetica, Sans Serif;
				color:var(--colour-blue);
				padding:8px 36px 0 12px;
				line-height:150%;
				display: none;
			}
				/*
				.menuList li ul.level2 li.genericMainMenuContent p.title a{
					margin:0;
					padding:0;
					background:none;
					color:var(--colour-blue);
					text-align:left;
					border:none;
					font-size:100%;
				}
				*/
		.menuList li ul.level2 li ul.level3 li.genericLevel3Content{
			border:none;
			text-align:left;
		}
            .menuList li ul.level2 li ul.level3 li.genericLevel3Content div {
                padding: 8px 36px 0 12px;
				font-size: 0.9rem;
            }
            .menuList li ul.level2 li ul.level3 li.genericLevel3Content div div {
				padding: 0px;
			}
            .menuList li ul.level2 li ul.level3 li.genericLevel3Content div.summary, .menuList li ul.level2 li ul.level3 li.genericLevel3Content div p.summary, .menuList li ul.level2 li ul.level3 li.genericLevel3Content div.summary p {
                font-size: 0.9rem;
                line-height: 160%;
			}
			.menuList li ul.level2 li ul.level3 li.genericLevel3Content p.title{
				font-size:120%;
				font-family: "FocoCC", "Foco", Arial, Helvetica, Sans Serif;
				color:var(--colour-blue);
				line-height:150%;
			}
				.menuList li ul.level2 li ul.level3 li.genericLevel3Content p.title a{
					margin:0;
					padding:0;
					background:none;
					color:var(--colour-blue);
					text-align:left;
					border:none;
					font-size:100%;
				}
		.menuList li ul.level2{
			background:var(--colour-blue-light-100) url(/App_Sites/ccv/Templates/Default/images/template/menu-bg.png) top left repeat-y;
		}
		.menuList li ul li ul.level3{
			width:260px;
			height:599px;
			top:0;
			left:-2000em;
			margin-left:260px;
			background:var(--colour-blue-light-100);
			border:none;
		}
			.menuList li#mainMenu_ccv_support-us{background: none}
			.menuList li#mainMenu_ccv_support-us ul{}
				.menuList li#mainMenu_ccv_support-us ul.level3{
					margin-left:260px;
				}
		.menuList li ul li:hover ul.level3{
			left:auto;
		}
			.menuList li ul.level3 li{
				border-bottom:var(--colour-blue-light-100) 1px solid;
			}
				.menuList li ul.level3 li a,.menuList li:hover ul.level3 li a{
					color:var(--colour-blue);
					font-weight:normal;
					font-family: "FocoCC", "Foco", Arial,Helvetica,Sans Serif;
					background:var(--colour-blue-light-100);
					text-align:left;
					font-size:125%;
				}
				.menuList li ul li:hover ul.level3 li a:hover{
					color:#333333;
				}
	.menuList li ul li{
		width:260px
	}
	.menuList li ul li ul li a {
		border:none;
	}
	.menuList li:hover a,.menuList li:hover a:hover,.menuList li:last-child:hover a{
		background:var(--colour-blue-light-100);
		color:var(--colour-blue);
	}
		.menuList li:last-child a{
			color:#ffd200;
		}
	.menuList li:hover ul li a,.menuList li:last-child:hover ul li a{
		padding-right:25px;
		color:var(--colour-blue);
		background:#ffffff;
		text-align:left;
	}
		.menuList li:hover ul li a:hover,.menuList li:hover ul.level2 li:hover a{
			background:var(--colour-blue-light-100);
			color:var(--colour-blue);
			border-bottom: #fff 1px solid;
		}
		.menuList li:hover ul li a.menuArrowLink{
			background:#ffffff url(/images/icons/svg/arrow-right-blue.svg) center right 5px no-repeat;
			background-size:18px;
		}
			.menuList li:hover ul li a.menuArrowLink:hover,.menuList li:hover ul.level2 li:hover a.menuArrowLink{
				background:var(--colour-blue-light-100) url(/images/icons/svg/arrow-right-blue.svg) center right 5px no-repeat;
				background-size:18px;
			}

/*Custom Mobile Menu*/
#Template.slideOut{margin-left:0;}
	#MobileMainMenu,#MenuUL .level4,#MenuUL .level5{display:none;}
@media screen and (max-width: 1024px) {
	body.mm-menu-show{overflow:hidden;}
	#Template.slideOut{margin-left:-90%;}
	#MobileMainMenu,#MobileMainMenuInner,#MobileMainMenu ul,#MobileMainMenu ul li,#MobileMainMenu ul li a{
		box-sizing:border-box;
		width:100%;
		padding:0;
		margin:0;
		display:inline-block;
	}
		#MobileMainMenu{
			width:90%;
			/*min-width: 140px;
			max-width: 440px;*/
			height:100%;
			position:fixed;
			top:0;
			right:0;
			z-index:21474836445 !important;
			display:none;
			-webkit-box-shadow: -91px 0px 241px -72px rgba(0,0,0,0.75);
			-moz-box-shadow: -91px 0px 241px -72px rgba(0,0,0,0.75);
			box-shadow: -91px 0px 241px -72px rgba(0,0,0,0.75);
		}
			#MobileMainMenuInner{
				min-height:100%;
				background:#fff;
			}
			#MobileMainMenu ul,#MobileMainMenu ul li{
				list-style:none;
				background:none;
			}
				#MobileMainMenu ul li{
					position:relative;
					list-style:none;
				}
					#MobileMainMenu ul li.mm-top-nav{
						height:35px;
						margin:0 0 5px 0;
						color:var(--colour-blue);
						font-size:16px;
						font-weight:bold;
						text-align:center;
					}
						#MobileMainMenu ul li.mm-top-nav div.mm-close{
							box-sizing:border-box;
							width:25px;
							height:25px;
							padding:10px 0;
							margin:5px 10px 5px 5px;
							float:right;
							display:block;
							cursor:pointer;
							background:url('/images/icons/svg/cross-blue.svg') center center no-repeat;
							background-size:25px;
						}
						#MobileMainMenu ul li.mm-search{
							height:40px;
							margin:0;
							display:none;
						}
							#MobileMainMenu #mm-level1 ul li.mm-search{display:inline-block;}
							#MobileMainMenu #mm-level1 ul li.mm-search label{display:none;}
							#MobileMainMenu ul li.mm-search input{
								box-sizing:border-box;
								width:72%;
								height:40px;
								padding:1% 3%;
								margin:0 0 0 3%;
								background: #ffffff;
								color: #888;
								border:1px solid #d2d4e4;
								border-right:none;
								border-top-left-radius: 20px;
								border-bottom-left-radius: 20px;
								float:left;
							}
							#MobileMainMenu ul li.mm-search span{
								box-sizing:border-box;
								width:22%;
								height:40px;
								padding:4.5px 10px 4.5px 0;
								margin:0 3% 0 0;
								background: #ffffff;
								border:1px solid #d2d4e4;
								border-left:none;
								border-top-right-radius: 20px;
								border-bottom-right-radius: 20px;
								float:left;
								text-align:right;
								cursor:pointer;
							}
								#MobileMainMenu ul li.mm-search span img{width:25px;margin-top:3px;}
					#MobileMainMenu #mm-bottom-nav{
						width:100%;
						height:110px;
						position:absolute;
						bottom:0;
						left:0;
						display:none;
					}
						#MobileMainMenu #mm-bottom-nav ul li a{
							height:55px;
							padding:10px 35px 10px 60px;
							font-size: 15px;
							line-height: 32px;
						}
							#MobileMainMenu #mm-bottom-nav ul li a:hover{
								color:#ffd200;
							}
							#mm-contact-link{
								background:url('/App_Sites/ccv/Templates/Default/images/template/menu-contact.png') left center no-repeat;
							}
								#MobileMainMenu #mm-bottom-nav ul li a#mm-contact-link:hover{
									background:url('/App_Sites/ccv/Templates/Default/images/template/menu-contact-hover.png') left center no-repeat;
								}
							#mm-donate-link{
								background:url('/App_Sites/ccv/Templates/Default/images/template/menu-donate.png') left center no-repeat;
							}
								#MobileMainMenu #mm-bottom-nav ul li a#mm-donate-link:hover{
									background:url('/App_Sites/ccv/Templates/Default/images/template/menu-donate-hover.png') left center no-repeat;
								}
					#MobileMainMenu ul li.mm-level-link{
						background:var(--colour-blue-light-100);
					}
					#MobileMainMenu ul li a{
						min-height:35px;
						padding:10px 15px;
						border-bottom:1px solid #d2d4e4;
						color:var(--colour-blue);
						font-size:16px;
						font-weight:bold;
						text-decoration:none;
					}
						#MobileMainMenu ul li:last-child a{
							border-bottom:1px solid #ececec;
						}
						#MobileMainMenu ul li a:hover{
							background:var(--colour-blue-light-100);
						}
					#MobileMainMenu ul li .mm-next{
						box-sizing:border-box;
						width:35px;
						height:35px;
						padding:10px 0 0 0;
						margin:0;
						position:absolute;
						top:0;
						right:5px;
						cursor:pointer;
						background:url('/images/icons/svg/arrow-right-blue.svg') center center no-repeat;
						background-size:20px;
					}
					#MobileMainMenu ul li .mm-back{
						box-sizing: border-box;
						width: 35px;
						height: 35px;
						padding: 10px 0 0 0;
						margin: 0;
						position: absolute;
						top: 0;
						left: 0;
						cursor: pointer;
						background: url(/images/icons/svg/arrow-tail-left.svg) top 8px left 10px no-repeat;
						background-size: 24px;
						min-height: 35px;
						padding: 10px 35px 10px 40px;
						color: var(--colour-blue);
						font-size: 14px;
						font-weight: bold;
						text-decoration: none;
					}
					#mm-panels{
						width:100%;
						height:100%;
						bottom:0px;
						left:0;
						position:absolute;
						overflow:hidden;
					}
					#mm-level1,.mm-level2,.mm-level3,.mm-level4,.mm-level5{
						box-sizing:border-box;
						width:100%;
						height:100%;
						padding:0;
						margin:0;
						display:inline-block;
						-webkit-overflow-scrolling:touch;
						overflow-x: hidden;
						overflow-y: auto;
						position:absolute;
						top:0px;
						right:-1060px;
						background:#fff;
					}
						#mm-level1{z-index:110;right:0;}
						.mm-level2{z-index:120;}
						.mm-level3{z-index:130;}
						.mm-level4{z-index:140;}
						.mm-level5{z-index:150;}
						#mm-level1 ul li.mm-top-nav .mm-back{display:none;}
}