<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
header, main, nav, footer, section, article, figure, figcaption,
aside { display: block; }
* { box-sizing: border-box; }
body {font-family:Verdana, Arial, sans-serif;
  background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
 color: #000066;
 width: 80%;
		 margin: auto;
 min-width: 960px;
		 max-width: 1200px;
}
nav { float: left;
	  width: 150px;
}
nav ul { list-style-type: none;
		margin-left: 0;
		padding: 10px; }
nav a { text-decoration: none;
		padding: 10px;
		font-weight: bold; }
nav a:link { color: #ffffff; }
nav a:visited { color: #eaeaea; }
nav a:hover { color: #000066; }
main {  display: block; /* for Internet Explorer version 10 and below */
  margin-left: 155px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
}
header { background-color: #869dc7;
  color: #00005D;
  font-size: 150%;
  padding: 10px 10px 10px 155px;
		background-image: url(lighthouselogo.jpg);
		background-repeat: no-repeat;
}
h1 { margin-bottom: 0; }
span { font-size: .80em;
 font-style: italic;
	 color: #00005D;
	 padding-left: 20px;
}
h2 { color: #869dc7;
 font-family: arial, sans-serif;
	 font-size: 200%;
}

#floatright { margin: 10px;
  float: right;
}
article header { background-color: #FFFFFF;
 background-image: none;
				 font-size: 90%;
				 padding-left: 0;
				 height: auto;
}
aside { float: right;
  width: 200px;
		background-color: #CCCCCC;
		padding: 20px;
		margin-right: 40px;
		font-size: 80%;
		box-shadow: 5px 5px 5px;
		position: relative;
		top: -40px;
}
footer { font-size:70%;
 text-align: center;
		 clear: right;
 padding: 20px;
		 background-color: #869dc7;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

</head>
<body>
<div id="wrapper">
  <header>
  <h1>Lighthouse Island Bistro</h1>
	<span>the best coffee on the coast</span>
  </header>
  <nav>
  <ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="menu.html">Menu</a></li>
  <li><a href="directions.html">Directions</a></li>
  <li><a href="contact.html">Contact</a></li>
  </ul>
  </nav>
  <main>
  <section>
  <h2>Bistro Blog</h2>
  <aside>Watch for the March Madness Wrap next month!</aside>
  <article>
  <header><h3>Valentine Wrap</h3></header>
  <time datetime="2016-02-01">February 1, 2016</time>
  <p>The February special sandwich is the Valentine Wrap &mdash;
heart healthy organic chicken with roasted red peppers on a
whole wheat wrap.</p>
  </article>
  <article>
  <header><h3>New Coffee of the Day Promotion</h3></header>
  <time datetime="2016-01-12">January 12, 2016</time>
  <p>Enjoy the best coffee on the coast in the comfort of your
home. We will feature a different flavor of our gourmet,
locally roasted coffee each day with free bistro tastings
and a discount on one-pound bags.</p>
 </article>
 </section>
 </main>
 <footer>Copyright &copy; 2016
 </footer>
</div>
</body>
</html>
