@charset "utf-8";
/* CSS Document */

#body {
	margin: 0 auto;
	padding: 0;
	background-color: #D0977B;        /* Beige Color for the Body Background Color */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: black;
}

#mainContainer {                                   /* Coding for mainContainer  Area  */
	height: auto;
	width: 960px;
	border: 3px #ffffff solid;
	padding: 10px;
	background-color: black;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 0;
}

#banner {                                   /* Coding for Banner Area, which holds 2 image files (at top of website), which will be the same on each web page */
	height: 200px;
	width: 940px;
	padding-left: 10px;
	padding-right:10px;
	background-color: #999999;   /* Gray Color for Background of Banner */
	margin: 0;
}

#nav {                                         /* Coding for Navigation Area, which will hold the links (at the top of the page); the boxes for the links will be the same on each web page   */
	height: 200px; 
	width: 200px; 
	float: left; #
	background-color: #663300;    /* Brown Color for Background of Navigation Area */
}

#contentContainer {                       /* Coding for contentContainer Area */
	height: auto;
	width: 940px;
	background-color: #99FF66; /* Light Green Color for Background of contentContainer Area */
	margin: 0;
	padding: 10px;
}

#footer {                                      /* Coding for Footer Area */
	height: 30px;
	width: 940px;
	background-color: #FFBF48;    /* Gold/Yellow Color for Background of Footer Area */
	margin: 0;
	padding-left: 10px;
	padding-right:10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

img.floatRight {                                   /* Coding for floating images to the right   */
	float: right;
	margin-right: 15px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom:40px;
}

img.floatLeft {                                    /* Coding for floating images to the left   */
	float: left;
	margin: 0;
	padding-right: 10px;
	padding-top: 10px;
}
	
/*START hNav2    (which is the code for the links in boxes for the Navigation Area, which will be the same at the top of each web page   */
#hNav2 {
	width: auto;
	height: 50px;
	background-color: #663300;   /* Brown Color for Background of Navigation Area */
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	}

#hNav2 ul {
	list-style-type: none;         /*LIST-STYLE-TYPE TAKES OUT BULLETED SYMBOLS  */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
	text-align: center;
}

#hNav2 li {
	display: inline-block;          /*Creates blocks that nav link text goes into & blocks go inline, one block right after another */
	padding-right: 10px;
}

#hNav2 a {                                   /*  ANCHOR is text in link, & create borders/color outline for box and box background color */
	border-style: solid;
	border-width: 2px;
	border-color: #98bf21;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 15px;
	padding-right: 20px;
	text-decoration: none;   /* GETS RID OF UNDERLINE IN LINKS */
	background-color: black;
	color: white;
}

/*START different states for hNav2*/

#hNav2 a:hover {                         /*  Coding for Hover State over the links in the boxes in the navigation area at the top of each web page  */
	color: black;
	background-color: red;
}
/*END different states for hNav2*/
/*END hNav2*/


#pictureBar {                            /*  Picture Bar Vertical on Home Page and Hooch Maids Page */
	width: 140px;
	height: auto;
	margin-left: 20px;
	padding: 0;
	color: #fff;
	float: right;
}

.picBorder {                                  /* Coding to put a thin border around the pictures that are in the picture bar area (on the right side) of two of the web pages   */
	border: solid 3px;
	border-color: #8c7461;
	margin-bottom: 20px;
	float: right;
}