body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: Candara, Calibri, Helvetica, Arial, sans-serif;
background-color: #434; }
a {text-decoration: none;}

#menudiv {
text-align: center;
width: 99.5%;
padding: 0;
}
nav {
margin: 0;
padding: 0 2%;
color: #ABD;
background-color: #323;
width: 96.05%;
text-align: center;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0;
display: inline-block;
text-align: center;
color: #ABD;
background-color: #323;
border-top: 1px solid #212;
}
nav a {
display: block;
padding: 10px;
color: #ABD;
font-size: 90%;
text-decoration: none;
}
nav a:link { background-color: #323; color: #ABD;}
nav li:link { background: #323; color: #ABD;}
nav ul li ul li:link { background: #323; color: #ABD;}

nav a:visited { background-color: #323; color: #ABD;}
nav li:visited { background: #323; color: #ABD;}
nav ul li ul li:visited { background: #323; color: #ABD;}

nav a:hover { background-color: #457; color: #9CD;}
nav li:hover { background: #457; color: #9CD;}
nav ul li ul li:hover { background: #457; color: #9CD;}

nav ul ul {
display: none;
position: absolute;
}

nav ul li:hover > ul { display: inherit; }
nav ul ul li {
width: 150px;
display: list-item;
position: relative;
margin-left: -30px;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 120px;
}
li > a:after { 
content: none; 
}
.toggle, [id^=drop] {
display: none;
}
li > a:only-child:after 
{ content: ''; 
}

.sublink a:link, visted  {
	color:#BCE;
	background:#434;
}
.sublink a:hover, a:active {
	color:#9CD;
	background:#457;
}
.linkcolor {
	color: #ABD;
}

/*The CSS3 media queries to define how the navigation menu works on mobile devices (screen size < 768px).*/
@media all and (max-width : 768px) {


nav 
{ margin: 0; 
}
.toggle + a,
.menu { 
display: none; 
}
.toggle {
display: block;
background-color: #323;
padding: 0 10px;
color: #ABD;
font-size: 90%;
line-height: 40px;
text-decoration: none;
border: none;
}
.toggle:hover { 
background-color: #457; 
}

[id^=drop]:checked + ul { 
display: block; 
}

nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a { padding: 0 40px; line-height: 20px; text-indent: 25px;}
nav ul ul ul a { padding: 0 80px; }
nav a:hover,
nav ul ul ul a { background-color: #457; }
nav ul li ul li .toggle,
nav ul ul a { background-color: #323; }
nav ul ul {
float: none;
position: static;
color: #ABD;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li { position: static;
}
}

@media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}