/*
Filename: sitewide.css
Author: Charls Sebastian
Description: CSS for Project 3
*/

	
/* body and layout styles */

body {
	margin: 5px 0px 5px 0px ;  /* sizes the margin */
	padding: 0; /* applies padding */
	font-size:  90% !important; /* styles font size */
	color: rgba(0, 0, 0, 1); /* font color */
	min-width: 770px; /* min width for page */
	background-image: url(cornucopia.jpg); /* set background image */
	background-repeat: repeat; /* set background image repeating*/
	font-family: Arial, Helvetica, sans-serif; /* applies the font */
}


#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 */
}
/* 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;
}
/* Unordered list descendent for sidebar ID */
#sidebar ul {
	margin-bottom: 0;
  }
  
  /*Item descendent for sidebar ID */
  #sidebar li {
	font-size: 12px;
	list-style-image: url(pieicon.gif);
  }
  
  /* Paragraph descendent for sidebar ID */
  #sidebar p {
	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, 1);
  }
  
  /* Facts ID selector */
  #facts {
	display: block;
	width: 190px;
	height: 250px;
	overflow: auto;
	background-color: rgba(251, 220, 71, 0.25);
	margin: 10px 0 0 5px;
	font-size: 90%;
	padding: 0 3px 3px 0;
  }
  

/*heading styles*/

h3 {
	color: rgba(153, 153, 0, 1);
}

h5 {
	font-style: italic;
}

/*header and navigation*/

#header {
 background-color: white; opacity: 100%; /*background color choice*/
 background-image: url(topbanner.jpg); /*background image*/
 background-repeat: no-repeat; /*background image repeat*/
 height: 95px; /*settting height*/
 width: 550px;/*setting width*/
}
/*ID for navigation*/
#nav {
	border: 1px solid rgba(255, 255, 255, 1);/*styles border*/
  }

  #nav ul {
	width: 100%; /*sets width*/
	background-color: rgba(255,204,1,1);/*set background color*/
	padding-left: 0;/*setting padding*/
	margin: 0; /*setting the margins*/
	float: left; /*float properties*/
  }

  #nav ul li {
	display: inline; /*inline display*/
  }

  #nav li a:link {
	float: left; /*float properties*/
	color: rgba(0, 0, 0, 1); /*color setting*/
	padding: 6px 12px; /*padding settings*/
	border-right: 1px solid rgba(255, 255, 255, 1); /*border location*/
	width: auto; /*width settings*/
  }
  #nav li a:hover {
	float: left; /*float properties*/
	color: rgba(0, 0, 0, 1); /*ID for navigation*/
	padding: 6px 12px; /*padding settings*/
	border-right: 1px solid rgba(255, 255, 255, 1); /*border color and location*/
	width: auto;/*width settings*/
  }

  /*table styles*/
  table {
	border: none; /*set border*/
	font: 12px Arial, Helvetica, sans-serif; /*set font style*/
	margin: 0 2px 2px 2px; /*set margin*/
	table-layout: auto; /*setting layout*/
	empty-cells: show; /*cell stylings*/
  }
  #recipetable {
	padding: 10px;  /*padding stylings*/
	position: relative; /*position of table*/
	left: 5px; /*left stylings*/
	top: -20px; /*top styling*/
	display: inline-table; /*display styling*/
  }
  /* images */
.recipephoto {
	float: left; /* image float */
	border: 1px solid rgba(0, 0, 0, 1); /* image border */
	margin: 0 5px 5px 10px; /* image margin */
	width: 140px; /* image width */
	}
	#cornbread_stack {
		float: right;
		position: relative;
		top: -145px;
		margin: 2px 5px 5px 0;
		border-radius: 5px;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	  }

/* ingredients and directions section */
#ingredients {
	margin: 5px;
	font-weight: bold;
	background-color: rgba(255, 153, 0, 0.4);
	padding: 10px;
	border-radius: 10px;
	position: relative;
	height: auto;
	}
/*stylings for directions*/
	#directions {
	margin: 10px;
	border: 1px solid rgba(255, 51, 0, 1);
	margin-top: 10px;
	padding: 5px;
	}
/*stylings for horizontal break*/	
	hr {
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 0;
	margin-bottom: 15px;
	}
/*stylings for form selector*/
	form {
		border: 1px solid rgba(255,204,1,1);
		background-color: rgba(255,190,51,1);
		padding: 2px;
		margin: 5px;
		box-shadow: 2px 2px 5px rgba(0,0,0,1);
	  }
	/*stylings for input selector*/
	  input {
		font-size: 10px;
		font-family: Arial, Helvetica, sans-serif;
		background-color: rgba(255, 255, 204, 0.8);
	  }
	/*stylings for logo class*/
	  .logo {
		border: none;
	  }
	/*stylings for id footer*/  
	  #footer {
		background-color: rgba(255, 153, 0, 1);
		clear: both;
	  }
	/*stylings for p descendant of id footer*/   
	  #footer p {
		font-size: 9px;
		font-style: italic;
		padding: 5px;
		margin: 10px 0 0 0;
		text-align: center;
	  }
/*stylings for anchor tag in html*/  
	  a {
		color: rgba(255, 153, 0, 1);
		text-decoration: underline;
	  }
/* Link styling */
a:link {
	color: rgba(255, 153, 0, 1);
	text-decoration: underline;
  }
  
  /* Visited styling */
  a:visited {
	color: rgba(255, 204, 0, 1);
	text-decoration: underline;
  }
  
  /* Hover styling */
  a:hover {
	color: rgba(255, 102, 0, 1);
	text-decoration: none;
	font-weight: bold;
  }
  
  /* Active styling */
  a:active {
	color: rgba(255, 102, 0, 1);
	text-decoration: underline;
	font-weight: bold;
  }