* { 
	box-sizing: border-box;
    	margin: 0;
}
body {
	font-family: Verdana, Arial, sans-serif;
	background-color: #CCCCCC;
}
#wrapper {
	background-color: #999999;h1 color: #DC260C;
        
}

}
header {
	color: white;
	background-color: #DC260C;
	background-image: url(images/RoyalLePage.jpeg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	padding: .5em 0 .5em 5.5em;
}
main {   
	background-color: #FFFFFF;
      color: #000000;
	padding: 1em; 
}
aside { 
	text-align: center; 
}
footer {
	background-color: #DC260C;
	font-size: 80%;
	text-align: center;
	padding: 0.5em 0;
	color: white;
}
img { 
	padding: 1em; 
}
h2 {
	color: #DC260C;
}

.floatRight{
	float:right;
	margin-left:6px;
	
}

/* Styles to configure navigation links as horizontal areas */
nav ul { 
	list-style-type: none;
      padding-left: 0; 
	border-top: 1px solid #EEEEEE;
}
nav li { 
	border-bottom: 1px solid #EEEEEE;  
      text-align: center;
	padding-top: .5em;
	padding-bottom: .5em;
}
nav a { 
	text-decoration: none;
		font-weight: bold;
}
nav a:link {
	color: #DC260C;
}
nav a:hover {
	color: #FF3737;
}
nav a:visited {
	color:#FFFFFF;
}
/* make the current page's link look different */
nav #page { 
	font-weight: bold;
      color: #FEFEFE; 
}

/* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
header, nav, main, footer, aside, figure { 
	display: block; 
}

/* Medium Display */
@media (min-width: 600px) {
#wrapper { 
 	display: grid; 
	grid-template-columns: 55% auto;
	grid-template-rows: auto auto auto auto;
	 }
header { 
	grid-row: 1 / 2; grid-column: 1 / 3; }
nav    { 
	grid-row: 2 / 3; grid-column: 1 / 3; }
main   { 
	grid-row: 3 / 4; grid-column: 1 / 2; }
aside  { 
	grid-row: 3 / 4; grid-column: 2 / 3; }
footer {
 	grid-row: 4 / 5; grid-column: 1 / 3; }
nav ul { 
	display: flex; 
	flex-direction: row; 
	flex-wrap: nowrap; 
	justify-content: space-around; }
nav ul li { 
	border-bottom: none; } 
 							 }
/* Large Display */
@media (min-width: 1024px) {
body     { 
	background-color: #cfcfcf; 
}
nav ul { 
	display: flex; 
	flex-direction: column; 
	flex-wrap: nowrap; 
}
#wrapper { 
	width: 80%; 
      margin: auto; 
      max-width: 1200px; 
      display: grid; 
	grid-template-columns: 150px auto auto;
	grid-template-rows: auto auto auto ; 
}
header { 
	grid-row: 1 / 2; 
	grid-column: 1 / 4; 
}
nav    { 
	grid-row: 2 / 3; 
	grid-column: 1 / 2; 
}
main   { 
	grid-row: 2 / 3; 
	grid-column: 2 / 3; 
}
aside  { 
grid-row: 2 / 3; 
grid-column: 3 / 4; 
}
footer { 
	grid-row: 3 / 4; 
	grid-column: 1 / 4; 
}

					} 
	 

.floatRight {
	float: right;
}
	 

.clearBoth {
	clear: both;
}
	 

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.topnav a.active {
    background-color: #04AA6D;
    color: white;