/* ----------------------------------------------------------------------------------------------------------------
.side-nav
------------------------------------------------------------------------------------------------------------------- */
#mainWrapper ul.side-nav,
#mainWrapper ul.side-nav li,
#mainWrapper ul.side-nav ul,
#mainWrapper ul.side-nav ul li
{
	padding: 0;
	margin: 0;
	list-style: none;
}
#mainWrapper ul.side-nav
{
	display: block;
	width: 100%;
	float: left;
	clear: both;
	margin: 12px 0 0 -15px; /* ANNA left margin allows aligning properly with other column content */
	padding: 0;
	text-align: left; /* ANNA was centre */
}
	/* JAN2022 probably don't need subs? */
	#mainWrapper ul.side-nav li ul
	{
		display: none;
	}

#mainWrapper ul.side-nav li
{
	display: inline-block; /* to allow centred list items */
}
#mainWrapper ul.side-nav li a
{
	display: block;
	text-decoration: none;
	color: #848484;
	width: auto;
	font-size: 16px;
	line-height: normal;
	padding: 12px 15px;
	box-sizing: border-box; 
}
#mainWrapper ul.side-nav li a:hover
{
	color: #ec008c;
}
#mainWrapper ul.side-nav li.current_page_item a
{
	font-weight: 500;
	color: #ec008c;
}


/* ----------------------------------------------------------------------------------------------------------------
MOBILE .side-nav
------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:1010px)
{
	/* JAN2022: the following is needed to cancel out some inline CSS set via Wordpress Customise! */
	#mainWrapper ul.side-nav
	{
		margin-top: 0;
		margin-bottom: 25px;
	}	
}

/* was 750px */
@media screen and (max-width:820px)
{
	#mainWrapper ul.side-nav,
	#mainWrapper ul.side-nav li,
	#mainWrapper ul.side-nav ul,
	#mainWrapper ul.side-nav ul li
	{
	}
	#mainWrapper ul.side-nav
	{
		border-radius: 9px;
		overflow: hidden;
		margin-left: 0; /* ANNA cancel negative left margin */
	}
	#mainWrapper ul.side-nav li
	{
		box-sizing: border-box;
		display: block;
		float: left;
		width: 33.3333%;
		border: 1px solid #fff;
	}
	#mainWrapper ul.side-nav li a
	{
		font-size: 14px;
		padding: 13px 11px;
		background: #e0e0e0; /* was #dcdcdc */
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
		color: #323232;
		text-align: center;
	}
	#mainWrapper ul.side-nav li a:hover
	{
	}
	#mainWrapper ul.side-nav li.current_page_item a
	{
		background: #ec008c; /* default pink */
		color: #fff !important;
	}

	/* ----------------------------------------------------------------------------------------------------------------
	rounded corners
	------------------------------------------------------------------------------------------------------------------- */		
	#mainWrapper ul.side-nav li:last-child a
	{
		border-bottom-right-radius: 4px;
	}
}

@media screen and (max-width:575px)
{
	#mainWrapper ul.side-nav li a
	{
		font-size: 12px;
		padding: 12px 9px;
	}
}

/* ----------------------------------------------------------------------------------------------------------------
THEME COLOURS FOR .side-nav
------------------------------------------------------------------------------------------------------------------- */
body.pink #mainWrapper ul.side-nav li.current_page_item > a
{ color: #ec008c !important; }

body.sky-blue #mainWrapper ul.side-nav li.current_page_item > a
{ color: #de5b27 !important; }

body.medium-blue #mainWrapper ul.side-nav li.current_page_item > a 
{ color: #00a3e2 !important; }

body.navy-blue #mainWrapper ul.side-nav li.current_page_item > a
{ color: #263693 !important; }

body.lime-green #mainWrapper ul.side-nav li.current_page_item > a
{ color: #a3b037 !important; }

body.purple #mainWrapper ul.side-nav li.current_page_item > a
{ color: #631d74 !important; }

body.dark-purple #mainWrapper ul.side-nav li.current_page_item > a 
{ color: #2e0c37 !important; }

body.gold #mainWrapper ul.side-nav li.current_page_item > a 
{ color: #8f4815 !important; }

body.grey #mainWrapper ul.side-nav li.current_page_item > a 
{ color: #8c8c8c !important; }

body.light-purple #mainWrapper ul.side-nav li.current_page_item > a 
{ color: #a52ba5 !important; }

body.dark-green #mainWrapper ul.side-nav li.current_page_item > a 
{ color: #4ba046 !important; }

body.dark-blue #mainWrapper ul.side-nav li.current_page_item > a
{ color: #8d7e57 !important; }



/* ----------------------------------------------------------------------------------------------------------------
HOVER COLOURS FOR .side-nav
------------------------------------------------------------------------------------------------------------------- */
body.pink #mainWrapper ul.side-nav li a:hover
{ color: #ec008c !important; }

body.sky-blue #mainWrapper ul.side-nav li a:hover
{ color: #de5b27 !important; }

body.medium-blue #mainWrapper ul.side-nav li a:hover
{ color: #00a3e2 !important; }

body.navy-blue #mainWrapper ul.side-nav li a:hover
{ color: #00a3e2 !important; }

body.lime-green #mainWrapper ul.side-nav li a:hover
{ color: #a3b037 !important; }

body.purple #mainWrapper ul.side-nav li a:hover
{ color: #631d74 !important; }

body.dark-purple #mainWrapper ul.side-nav li a:hover
{ color: #2e0c37 !important; }

body.gold #mainWrapper ul.side-nav li a:hover 
{ color: #8f4815 !important; }

body.grey #mainWrapper ul.side-nav li a:hover
{ color: #8c8c8c !important; }

body.light-purple #mainWrapper ul.side-nav li a:hover
{ color: #a52ba5 !important; }

body.dark-green #mainWrapper ul.side-nav li a:hover
{ color: #4ba046 !important; }

body.dark-blue #mainWrapper ul.side-nav li a:hover
{ color: #8d7e57 !important; }



/* IMPORTANT: media width here MUST match value of other mobile CSS for this section: */
@media screen and (max-width:820px)
{
	/* ----------------------------------------------------------------------------------------------------------------
	MOBILE-ONLY BG COLOURS FOR .side-nav
	------------------------------------------------------------------------------------------------------------------- */
	body.pink #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #ec008c !important; color: #fff !important;
	}
	body.sky-blue #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #de5b27 !important; color: #fff !important;
	}
	body.medium-blue #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #00a3e2 !important; color: #fff !important;
	}
	body.navy-blue #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #263693 !important; color: #fff !important;
	}
	body.lime-green #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #a3b037 !important; color: #fff !important;
	}
	body.purple #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #631d74 !important; color: #fff !important;
	}
	body.dark-purple #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #2e0c37 !important; color: #fff !important;
	}
	body.gold #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #8f4815 !important; color: #fff !important;
	}
	body.grey #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #8c8c8c !important; color: #fff !important;
	}
	body.light-purple #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #a52ba5 !important; color: #fff !important;
	}
	body.dark-green #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #4ba046 !important; color: #fff !important;
	}
	body.dark-blue #mainWrapper ul.side-nav li.current_page_item a
	{
		background: #8d7e57 !important; color: #fff !important;
	}
}



/* ----------------------------------------------------------------------------------------------------------------
This is no longer needed in 2022 version:
------------------------------------------------------------------------------------------------------------------- */
#mainWrapper ul.side-nav li.section-main-link
{
	display: none !important;
}