/* standard  section */

/* strip the ul of padding and list styling */
.header-menu ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	z-index: 99; /* needed to show menu above scrolling images */	
}

/* create horizontal list with spacing */
.header-menu li {
	display:inline-block;
	float: left;
	margin-right: 0px;
}

/* style for menu links */
.header-menu li a {
	display:block;
	min-width:100px; /* increase or decrease to change spacing on links do affecting center location */
	height: 20px;  /* changed originally - 40px */
	text-align: center;
	line-height: 20px;  /* changed originally - 40px */
	font-family: Calibri;
	color: #172849; /* menu top level font colour */
	background: #FFFFFF; /* menu top level background colour */
	text-decoration: none;
}

/* hover state for top level links */
.header-menu li:hover a {
	background: #FFFFFF; /* menu top level hover background colour */
	color: #CEDA06; /* menu top level font hover colour */
}

/* style for dropdown links */
.header-menu li:hover ul a {
	background: #172849; /* menu drop down background colour */
	opacity: 0.8;
	color: #FFFFFF; /* menu drop down font colour */
	height: 30px;  /* changed originally - left the same - was 40px */
	line-height: 30px;  /* changed originally - left the same - was 40px */
	text-align: left;
}

/* Hover state for dropdown links */
.header-menu li:hover ul a:hover {
	background: #172849; /* menu drop down hover background colour */
	color: #CEDA06; /* menu top level font hover colour */
}

/* hide dropdown links until they are needed */
.header-menu li ul {
	display: none;
}

/* make dropdown links vertical */
.header-menu li ul li {
	display: block;
	float: none;
}

/* prevent text wrapping */
.header-menu li ul li a {
	width: auto;
	min-width: 100px;
	max-width: 400px;
	padding: 0 20px;
}

/* display the dropdown on hover */
.header-menu ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/* style 'show menu' label button and hide it by default */
.show-menu {
	font-family: Calibri;
	text-decoration: none;
	color: #FFFFFF; /* show menu font colour */
	background: #172849; /* show menu background colour */
	text-align: center;
	padding: 10px 0;
	display: none;
}

/* hide checkbox */
input[type=checkbox]{
    display: none;
}

/* show menu when invisible checkbox is checked */
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/* responsive section */

@media screen and (max-width : 760px){
	
/* make dropdown links appear inline */
.header-menu ul {
		position: static;
		display: none;
}
	
/* create vertical spacing */
.header-menu	li {
		margin-bottom: 0px;
}

/* make all menu links full width */
.header-menu	ul li, li a {
		width: 100%;
}
	
/* display dropdowns center */
	.header-menu li:hover ul a {
	text-align: center;
	background: #172849; /* added to change colour on mobile device - can be removed */
	opacity: 1.0; /* added to set opacity to 1 [none] - can be removed */
	color: #ffffff; /* added to change text colour on mobile device - can be removed */
}

/* Hover state for dropdown links */
.header-menu li:hover ul a:hover {
	background: #172849; /* set backgrount to white [i.e. no background colour] on mouse over on mobile device - can be removed */
	color: #CEDA06; /* set colour to green on mouse over on mobile device - can be removed */
}

/* display 'show menu' link */
	.show-menu {
		display:block;
}


.header-menu li a {
	background: #172849; /* makes the menu background blue on mobile */
	color: #ffffff; /* makes the menu font white on mobile */
}
.header-menu li:hover a {
	background: #172849; /* makes the menu background blue on mobile */
	color: #CEDA06; /* makes the menu font hover green on mobile */
}

}