/*
Filename: sitewide.css
Author: David Wysocki
Description:
*/

	
/* body and layout styles */
body {
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 0;
	padding: 0;
	font-size: 90% !important;
	color: rgba(0, 0, 0, 1);
	min-width: 770px;
	background-image: url(images/cornucopia.jpg);
	font-family: Arial, Helvetica, sans-serif;
  }

/* heading styles */
h3 {
	color: rgba(153, 153, 0, 1);
}

h5 {
	font-style: italic;

}

/* Header and Navigation */
/* Header ID */
#header {
	background: rgba(255, 255, 255, 1) url(images/topbanner.jpg) no-repeat;
	height: 95px;
	width: 550px;
  }

/* Navigation ID */
#nav {
	border: 1px solid rgba(255, 255, 255, 1);
  }
  
  /* Unordered list inside Navigation ID */
  #nav ul {
	width: 100%;
	background-color: rgba(255, 204, 1, 1);
	padding-left: 0;
	margin: 0;
	float: left;
  }
  
  /* List item inside Unordered list inside Navigation ID */
  #nav ul li {
	display: inline;
  }
  
  /* Link state for List item inside Unordered list inside Navigation ID */
  #nav ul li a {
	float: left;
	color: rgba(0, 0, 0, 1);
	padding: 6px 12px;
	border-right: 1px solid rgba(255, 255, 255, 1);
	width: auto;
  }
  
  /* Hover state for List item inside Unordered list inside Navigation ID */
  #nav ul li a:hover {
	background-color: rgba(255, 255, 153, 1);
	padding: 6px 12px;
	border-right: 1px solid rgba(255, 255, 255, 1);
  }

  /* Table styles */
table {
	border: none; /* Set border to none */
	font-size: 12px; /* Set font size to 12px */
	font-family: Arial, Helvetica, sans-serif; /* Set font family using single font property */
	margin: 0 2px 2px 2px; /* Set margin: 0px top, 2px right, 2px bottom, 2px left */
	table-layout: auto; /* Set table layout to auto */
	empty-cells: show; /* Show empty cells */
  }

  #recipetable {
	padding: 10px; /* Set padding to 10 pixels on each side */
	position: relative; /* Set position to relative */
	left: 5px; /* Set left offset to 5 pixels */
	top: -20px; /* Set top offset to -20 pixels */
	display: inline-table; /* Set display to inline-table */
  }

  /* Images */
.recipephoto {
	float: left; /* Set float to left */
	border: 1px solid rgba(0,0,0,1); /* Apply 1 pixel solid black border */
	margin: 0 5px 5px 10px; /* Set margin: 0px top, 5px right, 5px bottom, 10px left */
	width: 140px; /* Set width to 140 pixels */
  }

  /* ID selector for image with ID "cornbread_stack" */
#cornbread_stack {
	float: right; /* Set float to right */
	position: relative; /* Apply relative positioning */
	top: -145px; /* Set top offset to -145 pixels */
	margin: 2px 5px 5px 0; /* Set margin: 2px top, 5px right, 5px bottom, 0px left */
	border-radius: 5px; /* Apply border radius of 5 pixels */
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Apply box shadow with x and y offset of 1 pixel, 3 pixel blur, and shadow color of black with 50% opacity */
  }

  /* Ingredients and Directions */
#ingredients {
	margin: 5px; /* Set margin to 5 pixels on all four sides */
	font-weight: bold; /* Set font to bold */
	background-color: rgba(255,153,0,0.4); /* Set background color to rgba(255,153,0,0.4) */
	padding: 10px; /* Set padding to 10 pixels on all four sides */
	border-radius: 10px; /* Create rounded corners with a 10-pixel border radius */
	position: relative; /* Add relative positioning */
	height: auto; /* Set height to auto */
  }

  /* ID selector for directions section */
#directions {
	margin: 10px; /* Set margin to 10 pixels on all four sides */
	border: 1px solid rgba(255,51,0,1); /* Add a 1 pixel solid border with the color of rgba(255,51,0,1) */
	margin-top: 10px; /* Set top margin to 10 pixels */
	padding: 5px; /* Add 5 pixels of padding to all four sides */
  }

  /* HTML selector for horizontal rule element */
hr {
	border: 1px solid rgba(0,0,0,0.5); /* Add a 1 pixel solid black border with 50% opacity using rgba color value for black */
	margin-bottom: 15px; /* Add a 15 pixel margin to the bottom of the horizontal rule */
  }
	
#wrap {
	background-color: rgba(255,255,255,1); /* white */
	margin: 0 auto; /* centers page */
	width: 770px;
	padding: 10px;
	border-radius: 10px; /* rounds the corners */
	box-shadow: rgba(0,0,0,.75) 2px 0 4px; /* applies box shadow */
}


  
 #sidebar ul {
	/* List Item */
	margin: 0;
	font-size: 12px;
	list-style-image: url(images/pieicon.gif);
  }
  
  #sidebar p {
	/* Paragraph */
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 0;
  }
  
  #side_image {
	/* ID Selector - side_image */
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
  
  #facts {
	/* ID Selector - facts */
	display: block;
	width: 190px;
	height: 250px;
	overflow: auto;
	background-color: rgba(251, 220, 71, 0.25);
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 5px;
	font-size: 90%;
	padding-top: 0;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 0;
  }
  
  .logo {
	/* Class - logo */
	border: none;
  }
  
  #footer {
	/* ID Selector - footer */
	background-color: rgba(255, 153, 0, 1);
	clear: both;
  }
  
  #footer p {
	/* Paragraph */
	font-size: 9px;
	font-style: italic;
	padding: 5px;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	text-align: center;
  }

  /* Default anchor tag style */
a {
	color: rgba(255, 153, 0, 1);
	text-decoration: underline;
  }
  
  /* Link state */
  a:link {
	color: rgba(255, 153, 0, 1);
	text-decoration: underline;
  }
  
  /* Visited state */
  a:visited {
	color: rgba(255, 204, 0, 1);
	text-decoration: underline;
  }
  
  /* Hover state */
  a:hover {
	color: rgba(255, 102, 0, 1);
	text-decoration: none;
	font-weight: bold;
  }
  
  /* Active state */
  a:active {
	color: rgba(255, 102, 0, 1);
	text-decoration: underline;
	font-weight: bold;
  }

  #facts h3 {
	/* Heading 3 */
	margin-left: 20px;
	color: rgba(204, 102, 0, 1);
	text-transform: uppercase;
	font-size: inherit;
  }



/* recipe content area */	
	
#main {
	background: rgba(255,255,255,1); /* white */
	float: left;
	width: 550px;
	margin-bottom: 25px;
}
#main h2, #main h3, #main p {
	padding: 0px 10px;
}
/* right side bar */

#sidebar {
	background: rgba(255,255,255,1); /* white */
	float: right;
	width: 195px;
	padding: 10px;
	min-height: 350px;
}