/* #################### STRUCTURE DEFAULTS & RESETS ######################## */
body {					position:relative; margin:0; padding:0; height:100%; border-top:4rem solid white; border-collapse:collapse; background-color:var(--GraySlate); }
/* form is required in .NET forms pages */
body > form > nav {		position:fixed; z-index:101; top:0; left:0; width:100%; height:4rem; max-height:4rem; box-shadow:0 1px 3px 1px rgba(0,0,0,0.4); background-color:white; }
body > form > header {	position:relative; float:left; clear:left; width:100%; background-color:white; }
body > form > main {	position:relative; float:left; clear:left; width:100%; background-color:white; }
body > form > footer {	position:relative; float:left; clear:left; width:100%; background-color:var(--GraySlate); }


/* ###################### NAV ############################## */

/* RESET COMMON ELEMENTS IN CONTEXT */
nav ul { margin:0; padding:0; }
nav li { margin:0; padding:0; list-style-type:none; }
nav button {
	-webkit-appearance:	none;
	-moz-appearance:	none;
	border:				none;
	cursor:				pointer;
	display:			inline-block;
	margin:				unset;
	padding:			unset;
	white-space:		nowrap;
	font-family:		'odudo', Arial, Sans-serif;
	font-size:			unset;
	line-height:		unset;
	font-weight:		800;
	border-radius:		unset;
	text-align:			center;
	text-decoration:	none; 
	color:				unset;
	background-color:	unset;
}
nav button:link,
nav button:visited,
nav button:hover,
nav button:active,
nav button:focus { 
	text-decoration:	unset; 
	color:				unset;
	background-color:	unset;
	outline:			unset;
	outline-offset:		unset;
}

nav a:link:focus,
nav a:visited:focus,
nav button:focus {
	outline:1px dotted var(--BlueSea);
	outline-offset:1px;
}

/* layout */
nav > ul { position:relative; width:100%; max-width:1280px; min-width:320px; margin:0 auto; padding:0; }


/* ###################################################### */

/* javascript and media queries do not mix.  */
.hamburger-hidden { display: none; /* Hide the menu by default (e.g., on mobile) */	}


	/* -- navCart -- */
	.navCart { }
	.navCart button { }
	.navCart button:hover,
	.navCart button:active { color:var(--BlueSea); }
	.navCart button .svgCart { margin:0.25rem 0 0 0; padding:1px; height:1.75rem; width:1.75rem; }
	.navCart button .cart-items-count {
		position:absolute; top:0.75rem; right:0; z-index:2;
		height:1.5em; width:auto; min-width:1.5em; max-width:2.5em; margin:0; padding:0 0.25em;
		border-radius:0.75em; border:1px solid white; background-color:var(--BlueOcean); 
		font-family:sans-serif; font-size:0.625rem; font-weight:600; line-height:1.365em; color:white; text-align:center; }
	.navCart button .cart-items-count.loading { display:none; }


	/* -- navUser -- */
	.navUser { text-align:right; }

	/* -- navUser a.tabSignIn -- */
	.navUser button.tabSignIn { position:relative; margin:0.365rem 0.25rem; padding:0 0.5em; height:1.5rem; text-decoration:none; color:white; transition:all 0.3s ease; border:2px solid var(--BlueSea); border-radius:0.375rem; background-color:var(--BlueSea);}
	.navUser button.tabSignIn > span { display:inline-block; margin:0; padding:0 0 0 0; height:1.5rem; width:auto; max-width:7.5rem;
		font-family:'odudo', sans-serif; font-size:0.875rem; font-weight:600; line-height:1.5; vertical-align:middle; text-align:right; overflow:hidden; }
	.navUser button.tabSignIn:hover,
	.navUser button.tabSignIn:active,
	.navUser button.tabSignIn:focus { color:white; border-color:var(--BlueOcean); background-color:var(--BlueOcean);}


	/* -- navUser button.tabUser -- */
	.navUser button.tabUser { position:relative; margin:0; padding:0 0 0 0.5em; height:2rem; font-size:0.875rem; text-decoration:none; color:var(--GraySlate); white-space:nowrap; border-top-left-radius:0.5rem; border-top-right-radius:0.5rem; transition:all 0.3s ease; box-shadow:0 -2px 0 0 transparent; }
	.navUser button.tabUser > span:first-child { display:inline-block; margin:0; padding:0; height:1.75rem; width:auto; max-width:8rem;
		font-family:'odudo', sans-serif; font-weight:600; font-size:0.875rem; line-height:2.5; text-align:right; overflow:hidden; }
	.navUser button.tabUser svg { display:inline-block; margin-bottom:-2px; width:1.5rem; }

	.navUser button.tabUser:hover,
	.navUser button.tabUser:active,
	.navUser button.tabUser:focus { color:var(--BlueSea); transition:all 0.4s ease; }

	.navUser button.tabUser[data-expanded="false"]	{ color:var(--GraySlate); background-color:white; }	
	.navUser button.tabUser[data-expanded="true"]	{ color:white; background-color:var(--BlueMidnight); } 
	.navUser button.tabUser[data-expanded="false"] > svg:nth-child(2)	{  }	
	.navUser button.tabUser[data-expanded="true"] > svg:nth-child(2)	{ transform:scaleY(-1); } 

	.navUser button.tabUser .notification-items-count {
		position: absolute; top: 0; right: 1rem; z-index: 2;
		margin: 0; padding: 0 0.25em;
		height: 1.5em; width: auto; min-width: 1.5em; max-width: 2.5em;
		border-radius: 0.75em; border: 1px solid white;
		background-color: var(--BlueSea);
		font-family: sans-serif; font-size: 0.625rem; font-weight:600; line-height: 1.365; color: white; text-align: center; }
	.navUser button.tabUser .notification-items-count.loading { display:none; }


	/* -- .navUser .navUserMenu -- */
	.navUserMenu { 
		display:flex;
		height:100%;
		padding:0.25rem;
		position: absolute;
		top: 0;
		right: 0;
		flex-direction: row;
		flex-wrap: wrap;
		flex: 1 1 0;
		width: 320px;
		height: auto;
		margin: 3rem 0 0 0;
		background: radial-gradient(circle farthest-side, #132b4d, var(--BlueMidnight));
		box-shadow: 0 0.25rem 0.25rem 0 rgba(0,0,0,0.5);
		border-radius: 1rem;
		transition: all 0.4s ease;}

	.navUserMenu.hide { display:none; }

	/* user dashboard "chiclet" items */
	a.chiclet {	display:flex; margin:0.25rem; padding:0; width:100%; border-radius:0.5rem; }
	a.chiclet:link,
	a.chiclet:visited { color:#f4f4f7; background-color:var(--BlueMidnight); background:radial-gradient(farthest-corner, #194f99, var(--BlueMidnight)); border:1px solid rgba(0,168,225,0.3); transition:all 0.3s linear; }
	a.chiclet:hover,
	a.chiclet:active { color:white; background:var(--BlueMidnight); border:1px solid var(--BlueOcean); box-shadow:inset 0 0 3px 1px var(--BlueOcean); text-decoration:none; transition:all 0.3s linear; }

	.chiclet > span { margin:0 auto; line-height:2rem; font-size:0.75rem; font-family:sans-serif; text-transform:uppercase; }

	/* "a" cklt "chicklets" */
	.chiclet { }
	.chiclet.wallet,
	.chiclet.points { flex-basis:304px; }
	.chiclet.coupons,
	.chiclet.deposit,
	.chiclet.withdraw,
	.chiclet.luckedraws,
	.chiclet.secondchancedraws,
	.chiclet.messagecenter,
	.chiclet.myaccount,
	.chiclet.security,
	.chiclet.bonusoffers,
	.chiclet.signout { flex-basis:148px; }

	/* chiclet-box */
	.chiclet-box { flex:1 1 auto; }

	.chiclet-box > span { display:block; margin:0.75rem 0 0 0; height:1.75rem; font-size:1.5rem; line-height:1; font-family:'odudo', Arial, sans-serif; text-align:center; vertical-align:top; white-space:nowrap; }
	.chiclet-box span.points {  }

	.chiclet-box span.value { color:white }
	.chiclet-box span.label { color:unset; display:block; margin:0 auto 0.25rem auto; padding:0; line-height:1.75; font-size:0.75rem; font-weight:normal; text-transform:uppercase; text-align:center; }
	.chiclet-box span.label:first-child { margin-top:0.75rem; }

	.chiclet-box span.pointspending > span.value { font-size:1.25rem; }
	.chiclet-box span.pointsexpiring > span.value { font-size:1.25rem; }

	.chiclet-box.pointsexpiring { display:none;} /* await feature release */

	.chiclet-box svg.svgIcon { display:inline-block; box-sizing:border-box; margin:0 !important; padding:1px 0.5rem 1px 1px !important; font-size:inherit; height:1em; width: 1.25em; vertical-align:top; }
	.chiclet-box.lastlogin { display:block; margin:0.75rem 0 0 0; height:1rem; font-size:0.75rem; line-height:1; font-family:'odudo', Arial, sans-serif; text-align:center; color:white; }

	/* Special Menu items */
	.chiclet-item-count {
		display:inline-block; height: 1.25rem; width: auto; min-width: 1.25rem; max-width: 2.5rem; margin-top:0.125rem;
		border-radius: 0.625rem; border: 0px solid var(--BlueOcean); background-color: var(--BlueSea); font-family: sans-serif;
		font-size: 1rem; font-weight: 600; line-height: 1.375; color: white; text-align: center; vertical-align:top;
	}



/* ################# Horizontal NAV and Default ################### */

@media screen and (min-width: 881px) { /* above 880 */

	/* nav */
	body > form > nav {	position:fixed; z-index:101; top:0; left:0; width:100%; height:4rem; max-height:4rem; box-shadow:0 1px 3px 1px rgba(0,0,0,0.4); background-color:white; }
	body > form > nav > ul { position:relative; display:flex; flex-direction:row; align-items:center; flex-wrap:nowrap; max-width:1280px; min-width:320px; height:4rem; }

	/* nav li children - classes */
	.navHome {	order:1; flex:0 0 10rem; height:4rem; min-height:4rem;				background-color:transparent;}
	.navMenu {	order:2; flex:1 1 auto; height:2rem; min-height:2rem;				background-color:white; border-left:1px solid var(--WhiteCloud); }
	.navUser {	order:3; flex:0 0 9rem; height:2rem; min-height:2rem; }
	.navCart {	order:4; flex:0 0 2rem; height:2rem; min-height:2rem; margin-left:0.5rem;}

	/* li navHome */
	.navHome {		display:block; width:12rem; height:4rem; margin:0.5rem; background-image:url("/Site/GFX/NCEL_Alt.svg"); background-repeat:no-repeat; background-size:contain; }
	.navHome > a {	display:block; width:100%; height:100%; text-decoration:none; }

	/* li navMenu */
	.navMenu > button {	display:none; } /* the hamburger menu button hidden here */
	.navMenu > ul {						display:flex; align-items:center; flex-wrap:nowrap; background-color:white; margin-left:0.5rem; margin-right:0; }
	.navMenu > ul > li {				position:relative; flex:0 1 auto; display:flex; height:2rem; padding:0 0.5rem; background-color:white; }
	.navMenu > ul > li > a {			display:inline-block; width:100%; height:2rem; font:600 0.865rem 'odudo', Sans-serif; line-height:2.5; background-color:transparent;}
	.navMenu > ul > li > a:link,
	.navMenu > ul > li > a:visited {	color:var(--GraySlate); box-shadow:inset 0 0 0 0 var(--WhiteCloud); text-decoration:none; transition:all 0.3s ease; }
	.navMenu > ul > li > a:hover,
	.navMenu > ul > li > a:active,
	.navMenu > ul > li > a:focus {		color:var(--BlueSea); box-shadow:inset 0 0.25em 0 0 var(--BlueSea); text-decoration:none; transition:all 0.3s ease; }
	.navMenu > ul > li > a.current:link,
	.navMenu > ul > li > a.current:visited { color:var(--BlueMidnight); box-shadow:inset 0 0.25em 0 0 var(--BlueMidnight); }
	/* margin hack for useragent inline text and buttons */
	.navMenu > ul > li > button {		display:inline-block; width:1.5rem; cursor:pointer; border:none; background-color:transparent; display:flex; align-items:center; }
	.navMenu > ul > li[data-expanded="false"] > button	{ }	/* controlled by javascript li.js-has-submenu : show/hide */
	.navMenu > ul > li[data-expanded="true"] > button	{ transform:scaleY(-1); } 
	.navMenu > ul > li > button > svg {	width:1.5rem; padding-top:0.25rem;}
	/* submenu */
	.navMenu > ul > li > ul {			position:absolute; top:2em; left:-0.5em; margin:0; width:12rem; background-color:white; box-shadow:0 5px 5px 0 rgba(0,0,0,0.4); border-bottom-left-radius:0.5rem; border-bottom-right-radius:0.5rem;}
	.navMenu > ul > li > ul[aria-hidden="false"] { display:flex; flex-direction:column; }		/* controlled by javascript li.js-has-submenu : show/hide */
	.navMenu > ul > li > ul[aria-hidden="true"] { display:none; } 
	.navMenu > ul > li > ul > li {		display:flex; flex-direction:row; height:2.5em; margin:0; padding:0; background-color:white; }
	.navMenu > ul > li > ul > li:last-child { margin:0 0 0.5rem 0; }
	.navMenu > ul > li > ul > li > a {	flex:0 0 100%; vertical-align:baseline; height:2.5em; margin:0; padding-left:1rem; font:600 0.875rem 'odudo', Arial, Sans-serif; line-height:2.25rem;}
	.navMenu > ul > li > ul > li > a:link,
	.navMenu > ul > li > ul > li > a:visited { color:var(--GraySlate); background-color:white; text-decoration:none; transition:all 0.3s linear; }
	.navMenu > ul > li > ul > li > a:hover,
	.navMenu > ul > li > ul > li > a:active,
	.navMenu > ul > li > ul > li > a:focus { color:var(--BlueSea); background-color:var(--WhiteCloud); box-shadow:inset 4px 0 0 0 var(--BlueSea); transition:all 0.3s linear; }

		/* body inheritance - current nav state preserver */
		body.PlayOnline .navMenu a[title="Play Online"]:link,
		body.PlayOnline .navMenu a[title="Play Online"]:visited,
		body.Games		.navMenu a[title="Games"]:link,
		body.Games		.navMenu a[title="Games"]:visited,
		body.Rewards	.navMenu a[title="Rewards"]:link,
		body.Rewards	.navMenu a[title="Rewards"]:visited,
		body.Winning	.navMenu a[title="Winning"]:link,
		body.Winning	.navMenu a[title="Winning"]:visited,
		body.Impact		.navMenu a[title="Impact"]:link,
		body.Impact		.navMenu a[title="Impact"]:visited,
		body.About		.navMenu a[title="About"]:link,
		body.About		.navMenu a[title="About"]:visited { color:var(--BlueSea); box-shadow:inset 0 4px 0 0 var(--BlueSea); }

	/* PlaySmart menu graphic item */
	.navMenu a.navPlaySmart { display:block; margin-top:0.375rem; width:6.5rem; height:1.25rem; background-image:url("/Site/GFX/PlaySmart.svg"); background-repeat:no-repeat; background-size:contain; background-position:center; }
	.navMenu a.navPlaySmart:link,
	.navMenu a.navPlaySmart:visited,
	.navMenu a.navPlaySmart:hover,
	.navMenu a.navPlaySmart:active,
	.navMenu a.navPlaySmart:focus { box-shadow:none; text-decoration:none; }

	}



/* ############################## HAMBURGER NAV ################################# */

@media screen and (max-width: 880px) { /* at 880 and below */

	body { border-top-width:2.5rem; }
	body > form > nav { height:2.5rem; }
	body > form > nav > ul { position:relative; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; max-width:880px; min-width:360px; height:2.5rem; }

	.navHome {	order:2; flex:1 0 auto; height:2.5rem;	background-color:white;}
	.navMenu {	order:1; flex:0 0 5rem; height:2.5rem;	background-color:white; border-left:none; }
	.navUser {	order:3; flex:0 0 2.5rem; height:2rem;	background-color:white; }
	.navCart {	order:4; flex:0 0 2.5rem; height:2rem;	background-color:white; margin-left:0.5rem; }

	.navHome {	display:block; width:auto; height:2.5rem; background-image:url("/Site/GFX/NCEL_Horz.svg"); background-repeat:no-repeat; background-size:contain; background-position:center; }
	.navHome > a {	display:block; width:100%; height:2.5rem; text-decoration:none; }

	.navMenu > button {	display:block; height:2.5rem; width:2.5rem; padding:0.25em; }
	.navMenu > button:hover,
	.navMenu > button:active,
	.navMenu > button:focus { color:var(--BlueSea);}

	.navMenu > ul {	position:absolute; top:2.5rem; left:0; width:16rem; background-color:white; margin-right:0; box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.4); border-bottom-right-radius:0.5rem; border-bottom-left-radius:0.5rem; border-top:1px solid #cccccc;}
	.navMenu > ul > li { display:block; float:left; width:100%; height:3rem; margin:0; padding:0; text-align:left; }
	.navMenu > ul > li:last-child { margin-bottom:0.5rem; }
	.navMenu > ul > li > a { display:inline-block; margin:0; padding:0; width:100%; height:3rem; font:600 0.865rem 'odudo', Sans-serif; line-height:3.25; text-align:center;}
	.navMenu > ul > li > a:link,
	.navMenu > ul > li > a:visited { color:var(--GraySlate); background-color:white; opacity:1; border-top:0; border-bottom:1px solid #cccccc; box-shadow:inset 4px 0 0 0 var(--BlueMidnight); text-decoration:none; }
	.navMenu > ul > li > a:hover,
	.navMenu > ul > li > a:active,
	.navMenu > ul > li > a:focus { color:var(--BlueSea); background-color:var(--WhiteCloud); opacity:1; border-top:0; border-bottom:1px solid #cccccc; box-shadow:inset 8px 0 0 0 var(--BlueOcean); text-decoration:none; }

	.navMenu > ul > li > ul { display:none; }


	/* PlaySmart menu graphic item */
	a.navPlaySmart { background-image:url("/Site/GFX/PlaySmart.svg"); background-repeat:no-repeat; background-size:5rem; background-position:center; }

		/* -- .navUser .navUserMenu -- */
	.navUserMenu { margin-top:2.25rem; }

	}


@media screen and (max-width:640px) {  /* 360 to 640 */

	.navHome {	display:block; width:auto; height:2.5rem; background-image:url("/Site/GFX/NCEL_bubble.svg"); background-repeat:no-repeat; background-size:2rem; background-position:center; }
	.navHome > a {	display:block; width:2.5rem; height:2.5rem; text-decoration:none; }

	}


footer { clear:left; float:left; width:100%; margin:0; padding:0 0 2rem 0; background-color:var(--BlueMidnight); }
footer > div { position:relative; width:100%; max-width:1280px; min-width:320px; min-height:3rem; margin:0 auto; padding:0; color:white; }
footer div.bot-row { display:flex; flex-flow:row wrap; }
footer div.bot-block { flex:1 1 50%; min-height:5rem; }
footer div.bot-block.bot-logo { text-align:left; padding-top:2rem;padding-left:1rem;}
footer div.bot-block.bot-logo img { height:2rem; }
footer div.bot-block.bot-social { text-align:left; }
footer div.bot-block.bot-social span { display:inline-block; width:2rem; height:2rem; margin:2rem 1rem 0 1rem;}
footer div.bot-block.bot-social a { color:white; text-decoration:none; }
footer div.bot-block.bot-social svg { height:2rem; width:2rem; fill:currentColor; }
footer div.bot-block.bot-3 { text-align:left; }
footer div.bot-block.bot-3 span { margin:0.125rem 1rem 0 1rem; display:block; font:normal 0.875rem odudo; vertical-align:text-top; height:2rem; display:flex; flex-flow:row; align-items:center;}
footer div.bot-block.bot-3 svg { display:inline-block; height:2rem; width:2rem; margin-right:0.5rem; fill:currentColor; }

/* midnight theme until MAIN is updated.*/
footer.midnight a { color:white; }
footer.midnight a:link,
footer.midnight a:visited { color:white; text-decoration:underline; }
footer.midnight a:active,
footer.midnight a:hover { color:var(--GoldenSky); text-decoration:underline; }
footer.midnight a:focus { outline: 1px dotted white; outline-offset: 1px; }

footer h6 { margin-top:2rem; color:#fff; }
footer p { font-size:0.875rem; line-height:2em;}
footer p.legal { margin:1rem 0.5rem 0 1rem; font-size:0.75rem; color:white; }

@media screen and ( max-width:799px ) { /* 799px and below */
	footer div.bot-block { flex:1 1 100%; }
	/* footer */
	footer .svgLogo.default { margin:0 auto; }
	footer .social { clear:both; float:left; margin:2rem 1rem 2rem 1rem; text-align:center; }
	footer .social a { color:white; text-decoration:none; }
	footer .social svg { margin-right:1em; height:2rem; width:2rem; fill:currentColor; }
}