/*Strip the ul of padding and list styling*/
.page .menu ul {
	list-style-type:none;
	display:inline-table;
	margin:10px 0;
	padding:0;
}

/*Create a horizontal list with spacing*/
.page .menu li 
{
	display:inline-block;
	float:left;
}
.page .menu li~li {border-left:1px solid #000000;}

/*Style for menu links*/
.page .menu li a 
{
    display:block;
    color:Black;
    padding:3px 6px;
}

/* Hover state for top level links */
.page .menu li:hover a {background:#e2f1f6;}
/* Selected state for top level links */
.page .menu ul li a.current {color:Blue;}

/*Style for dropdown links*/
.page .menu li:hover ul a {
	background: #dcebf2;
	color: #01325d;
	height: 26px;
	line-height: 26px;
}

/*Hover state for dropdown links*/
.page .menu li:hover ul a:hover {
	background: #0470a1;
	color: #fff;
}

/*Hide dropdown links until they are needed*/
.page .menu li ul {
	display: none;
}

/*Make dropdown links vertical*/
.page .menu li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
.page .menu li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

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

/*Style 'show menu' label button and hide it by default*/
.page .menu .show-mainmenu
{
	text-decoration:none;
	color:Black;
	background:#e2f1f6;
	line-height:40px;
	font-size:1.5em;
	width:100%;
	text-align:center;
	display:none;
}

/*Hide checkbox*/
.page .menu input.mainmenu[type=checkbox]{display: none;}

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


@media screen and (max-width:800px)
{

/* increase menu size */
.page .menu {clear:both;height:40px;border-bottom:none;}

/*Make dropdown links appear inline*/
.page .menu ul{position:static;display:none;background:#dcebf2;}
/*Create vertical spacing*/
.page .menu li {margin-top:1px;height:40px;float:none;}
.page .menu li a{height:40px;line-height:40px;padding:0;font-size:1.5em;}
/*Make all menu links full width*/
.page .menu ul li, .page .menu li a {width:100%;}
/*Hover colour*/
.page .menu li:hover a{background:#01325d;color:Yellow;}

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