body {
	background-color: #000010; /* Dark blue */
}

@media (min-width:1200px) and (max-width:4000px) { 
/* Desktop or large tablet */
	.dropbutton { /* Hide mobile dropdown menu */
		display: none;
	}
	.droppingcontent {
		display:none;
	}
	#menuDropdown {
		display:none;
	}
	
	nav { /* format for navigation bar */
		background-color: #000010;
		padding: 50px;
		text-align: center;
		font-size: 11pt;
		margin:10px;
		line-height: 2;
	}
	.leftart { /* Articles on the left of the page */
		width: 40%;
		float: left;
		height: 40%;
		vertical-align: top;
	}
	.rightart { /* Articles on the right of the page */
		width: 40%;
		float: right;
		height: 40%;
	}
	a img { /* Images that are links */
		width:100%;
		height:400px;
	}
	#contact { /* Contact details for Wandsworth Council */
		float: right;
		margin: 50px;
		vertical-align: bottom;
		font-size: larger;
	}
	.restimage { /* Images that go alongside articles */
		float:right; 
		padding: 20px;
		width: 40%;
		vertical-align: bottom;		
	}
}

@media (min-width: 481px) and (max-width:1199px)  
/* Medium tablet */
{
	body {
		font-size: 10pt;
	}
	.dropbutton { /* Hide the mobile dropdown menu */
		display: none;
	}
	.droppingcontent {
		display: none;
	}
	#menuDropdown {
		display: none;
	}
	nav { /* Navigation bar */
		padding: 5px;
		text-align: center;
		font-size: 8pt;
		line-height: 2;
	}
	.leftart { /* Articles on the left of the page */
		width: 40%;
		float: left;
	}
	.rightart { /* Articles on the right of the page */
	width: 40%;
	float: right;
	}
	a img { /* Images that are links */
		width: 100%;
		height: 200px;
	}
	#contact { /* Contact details for Wandsworth Council */
		float: right;
		margin: 50px;
		vertical-align: bottom;
		font-size: larger;
	}
	.restimage { /* Images that sit alongside an article */
		float:right; 
		padding: 20px;
		width: 40%;
	}
}

@media (max-width:480px) { /* Mobile phone */
	body {
		font-size: 10pt;
	}
	.dropbutton { /* The dropdown menu */
		display: block;
		width: 100px;
		height: 100px;
		background: url(threelines.png);
		background-color: #000010;
		padding: 18px;
		font-size: 18px;
		border: none;
		cursor: pointer;
	}
	.droppingcontent
	{
		display: none;
		z-index: 1;
	}
	.droppingcontent a {
		display: block;
		font-size: 12pt;
		padding: 10px;
		background-color: #000040;
	}
	.show {
		display: block;
	}
	.burger {
		position: relative;
		display: inline-block;
	}
	
	nav { /* Navigation bar */
		display: none;
	}
	article { /* Articles that are half the width of a desktop are the full width of a mobile screen */
		width: 100%;
	}
	a img { /* Images that are links */
		width: 90%;
	}
	h1 {
		font-size: 14pt;
	}
	#contact { /* Contact details for Wandsworth Council */
		float: left;
		margin: 50px;
		vertical-align: bottom;
		font-size: larger;
	}
	
	.restimage { /* Images that go with an article */
		float: left;
		width: 90%;
		max-width: 90%;
		padding-bottom: 30px;
	}
}


body {
	box-sizing: border-box;
	color: white;
	font-family: "Cordia New", Arial; /* Sans-serif fonts chosen for accessibility */
}


h1 {
	font-size:36pt;
	padding: 5px;
	text-align: center;
}

nav a { /* Links in the navigation bar */
	color: ghostwhite;
	text-decoration: none;
	padding:10px;
	margin:5px;
	margin-bottom: 200px;
}

.hidden {  /* Formatting screen reader users' "Skip to Content" links as invisible */
	position: absolute;
	left: -10000px
}

h2 {
	padding-top: 10px;
}

article {
	margin:2.5%;
	padding:2.5%;
}

.emptydiv {
	clear: both;
}

article img { /* Images that are part of an article */
	border-width: 10px;
	border-color: #000060;
	border-style: double;
}

a { /* Default formatting for links */
	color:ghostwhite;
	text-decoration: none;
	white-space: nowrap;
}

a:hover { /* Increase brightness of links when mouse pointer is over them */
	color: yellow;
	filter: brightness(150%);
}

footer {
	float:bottom;
}

footer img { /* Images in the footer */
	float:left;
	width: 50%;
}

ul { /* Use coronavirus image as bullet */
	list-style-image: url('cicon.gif');
} 

li { /* Increase padding around bulleted items, to enhance readability */
	padding-bottom: 20px;
}

.implink { /* Formatting for particularly urgent links */
	color: lightpink;
}

.correct { /* Correct quiz answers have a dark green background */
	background-color: #002000;
	font-size: larger;
}

.wrong { /* Incorrect quiz answers have a dark red background */
	background-color: #400000;
	font-size: larger;
}

button {
	font-size: larger; 
	padding: 10px;
}