/* Homepage style sheet */
body {
	background: url("../images/breakfast_1.jpg") repeat;
	text-align: center;
	font: 17px arial, sans-serif;
	color: #000;}
h2 {
	font: arial, sans-serif;
	font-weight: bold;}
/*style for banner */
#banner {
	width: 770px;
	height: 150px;}
/*style for horizontal menu */
nav ul {
	list-style-type: none;
	margin: 0;
    padding: 0;
	background-color: #000;}
nav {
	background: #000;
	padding: 5px;
	border-bottom: solid 2px #000;}
nav li {
	display: inline-block;}
nav a {
	display: inline-block;
	width: 130px;
    font-weight: bold;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
	font: 18px arial, sans-serif;
	color: #fffff0;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 2px 2px 2px #000;}	
nav ul ul {
	display: none;}
	nav ul li:hover > ul {
		display: inline-block;
		position: absolute;
		width: 1px;
		background-color: #000;}
nav ul {
	background: #000; 
	list-style: none;
	position: relative;
	display: inline-block;}
	nav ul:after {
		content: ""; 
		clear: both; 
		display: inline-block;}
nav ul li {
	float: left;}
		nav ul li:hover a {
			color: #fffff0;
			background-color: #000;}
nav ul ul {
	position: absolute;
	top: 100%;}
	nav ul ul li {
		position: relative;
		top: 100%;
		right: 70px;}
		nav ul ul li a {
			color: #FFFFF0;
			text-align: left;
			padding-left: 5px;}	
			nav ul ul li a:hover {
				background: #000;
				opacity: 1;}
#container {
	background: #fffff0;
	width: 770px;
	margin: 0 auto;
	text-align: center;
	border: solid;
	border-width: 2px;
	}
/*style for written contents in second container */
#containercontent {
	padding: 20px;
	text-align: left;}
/*introduction statment style */
.decorative {
	text-align: center;}
/* style for featured recipe box */
#featured  a{
	text-decoration: none;}
#featured img {
	box-shadow: 10px 10px 10px #505050;}
#featured img:hover{
	box-shadow: none;}
#featured .imageone{
	display: inline;
	padding: 20px;}	
.imageone {
	position: relative;
	height: 200px;
	width: 200px;}
.imageonedescription{
	position: absolute;
	top:0 10px;
	bottom: 0;
	left: 0;
	right: 0;
	color: #fffff0;
	visibility: hidden;
	opacity: 0;
	font: 20px arial, sans-serif;
	text-align: left;
	margin-left: 25px;
	width: 190px;
	}
.imageone:hover .imageonedescription {
	visibility: visible;
	opacity: 1;
	background-color:rgba(0,0,0,0.3);}
/*image two style*/
#featured .imagetwo{
	display: inline;
	padding: 20px;}	
.imagetwo {
	position: relative;
	height: 200px;
	width: 200px;}
.imagetwodescription{
	position: absolute;
	top:0 10px;
	bottom: 0;
	left: 0;
	right: 0;
	color: #fffff0;
	visibility: hidden;
	opacity: 0;
	font: 20px Arial, sans-serif;
	text-align: left;
	margin-left: 25px;
	width: 190px;
	}
.imagetwo:hover .imagetwodescription {
	visibility: visible;
	opacity: 1;
	background-color:rgba(0,0,0,0.3);}
/*image three style*/
#featured .imagethree{
	display: inline;
	padding: 20px;}	
.imagethree {
	position: relative;
	height: 200px;
	width: 200px;}
.imagethreedescription{
	position: absolute;
	top:0 10px;
	bottom: 0;
	left: 0;
	right: 0;
	color: #fffff0;
	visibility: hidden;
	opacity: 0;
	font: 20px Arial, sans-serif;
	text-align: left;
	margin-left: 25px;
	width: 190px;
	}
.imagethree:hover .imagethreedescription {
	visibility: visible;
	opacity: 1;
	background-color:rgba(0,0,0,0.3);}
#lowernavigation {
	text-align: center;
	text-decoration: none;
	padding-top: 20px;}
/* style for foot nav hyperlinks */
#lowernavigation a:link {
	color: sienna; 
	text-decoration: none; }
#lowernavigation a:visited {
	color: sienna; 
	text-decoration: none;}
#lowernavigation a:hover {
	color: sienna; 
	font-weight: bold; 
	cursor: hand; 
	text-decoration: none;}
#lowernavigation a:active {
	color: sienna;
	font-weight: bold; 
	cursor: pointer; 
	text-decoration: none;}
#metadata {
	font-size: 10px;
	text-align: center;}