@import url(http://fonts.googleapis.com/css?family=roboto); /* needed if you want to use a Google font */

section{
	background: white;  
	height: 200px;
	color: black;
	
}
section p{
margin: 0;
}

body {
	background: #212121;
	font-size: 1em;
	line-height: 32px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	word-wrap: break-word !important; /* "!important" ensures this rule cannot be overwritten */ 
	font-family: 'roboto', sans-serif;
}

/*setting for all links within the nav */
nav a {
	display: block; /* so that items don't appear alongside */
	padding: 0 0px;
	color: #FFF;
	font-size: 20px;
	line-height: 40px;
	text-decoration: none;
}

/* change list item bg colour when hover over second level list item */
nav ul li ul li:hover { background: #000000; }

/* change link bg colour when hover over link */
nav a:hover { background-color: #000000; }

/* sets level one list items have same display as parent */
nav ul li:hover > ul { display: inherit; }



#logo {
	display: block;
	padding: 0 30px;
	font-size: 20px;
	line-height: 60px;
}

.menuicon, [id^=drop]{
	display: none;
}

#menuicon {
	display: none;
}

/* setting for the first level menu items */
.menu {
	float: left; /* So that this is to the left of 2nd level menu items */
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative; /* relative to the normal position */
	width: 150px; 
	border: 1px solid #292929;
	-webkit-box-shadow: 0 0 5px #3c3c40;
    -moz-box-shadow: 0 0 5px #3c3c40;
    box-shadow: 0 0 5px #3c3c40;
}
 
 .menu li  {
	list-style-type: none;
	background-image: -moz-linear-gradient(top, #535357, #3c3c3f);
	background-image: -ms-linear-gradient(top, #535357, #3c3c3f);
	background-image: -webkit-linear-gradient(top, #535357, #3c3c3f);
	background-image: linear-gradient(top, #535357, #3c3c3f);
}

/* setting for the second level menu items */
.drop1 {
	display: none; /* hide until hover */
	position: absolute; /* relative to the last positioned parent */
	margin-top: -50px;	/* to line it with the parent, otherwise it would be below */
	margin-left: 114px; /* will be to the immediate right of the first level menu item (width + padding + border of parent) */
	list-style: none;
	width: 100%; 
}

/* sets level one list items have same display as parent */
.menu li:hover > ul { display: inherit; }

/* settings for the list items in each menu level */
.drop1 li {
	margin: 0px;
	float: none; /* only need the ul to float, not the li items as well */
}


.menu li a  {
	border-bottom: 1px solid #292929;
	display: block;
	padding: 5px 30px;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
	-webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2);
    -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2);
}

.menu li a:hover {
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
	background-color: #59595c;
	-webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), 0 1px 0px #292929;
    -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), 0 1px 0px #292929;
    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), 0 1px 0px #292929;
}

.menu li a:active {
	background-color: #414142;
	-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0, 0.2);
    -moz-box-shadow: inset 0 2px 3px rgba(0,0,0, 0.2);
    box-shadow: inset 0 2px 3px rgba(0,0,0, 0.2);
}


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 700px) {

.menu { 
	display: none; /* hides the menu options */ 
}

.menuicon {
	display: block;
	padding: 0 20px;
	font-size: 20px;
	line-height: 60px;
	background-image: -moz-linear-gradient(top, #535357, #3c3c3f);
	background-image: -ms-linear-gradient(top, #535357, #3c3c3f);
	background-image: -webkit-linear-gradient(top, #535357, #3c3c3f);
	background-image: linear-gradient(top, #535357, #3c3c3f);
 }

/* code for dropdown menu when clicked */
[id^=drop]:checked + ul {  /* when drop is selected ("checked") the UL will display */ 
	display: block; 
}
.menu li {
	display: block;
}

.drop1 {
	float: none;
	position: relative;
	color: #ffffff;
	margin-top: 0px;
	margin-left: -35px;
}

.drop1 li:hover > ul { 
	display: none;  /* to cancel the hover and display above */
}

}