/* Menu-related stylings. Much simpler than the ones for Famly Brands, but still effective nonetheless. */


/* Sidebar to the left for presenting all brands */

.sidebar{

	float: left;
	background-color: #A90000;
	font-size: 25;
	font-family: Arial, Times New Roman;
	width: 200px;


}


.sidebar a{
	color: #FFFFFF;
	border-left: 10px solid #999999;
	text-decoration: none;
	padding-left: 5px;
	font-weight: bold;
	
}

.sidebar ul{
	list-style-type: none;
}

.sidebar li{
	margin-left: -1.6em;
	width: 8.01em;


}

.sidebarlinkwidth{
	display: block;
	width: 8.01em;
}	
	
.sidebar a:hover{
	width: 7.4em;
	border-left: 10px solid #005898;
	background-color: #999999;
}

/* A workaround for IE initially, but now also has a small font styling */

.sidebarmove{
	font-size: 17;
}



#content {
	clear: left;

}


/* Site related Stylings */

/* Main body. For the background color and some slight offsetting. */

body{

	background-color: #FFEC8B;
	padding-top: 0;
	margin-top: -0.2em;

}

/* Corner image */

.topcorner{

	width: 200px;
	height: 100%;
	background-color:#880000;
	float: left;
	margin-bottom: -1em;

}


/* The top black bar right above the menu */


.header{
	background-image: url(images/top.jpg);
	background-position: bottom right;
	background-repeat: no-repeat; 
	background-color: #BB0000;
	height: 8em;
	width: 100%;

}



.headerrest{
	background-image: url(images/wamplogo3.gif);
	background-position: bottom right;
	background-repeat: no-repeat; 
	width: 100%;
	height: 8em;
}


/* Main Content */

.main{
	margin-left: 13em;
	margin-top: 2%;
	color: #000000;
	/* 
	background-image: url(images/bgpig.jpg);
	background-position: bottom right;
	background-repeat: no-repeat; 
	*/
	
	min-height: 48em; 
}

/* Whenever a table is needed for aligning the text as it should be. Used for only main.html currently. */

.maintable{
	padding: 0;
	border: 0;
}


/* Text under main. Used in conjuction with maintable. */

.textmain{
	font-size: 17;
	
	/* background-image: url(images/pig.gif);
	background-position: center center;
	background-repeat: no-repeat; 
	height: 25em;
	*/
}

/* index.html data, before it redirects you to the main page. */

#splash{

	/*
	background-image: url(images/bgpig.jpg);
	background-position: bottom right;
	background-repeat: no-repeat; 
	*/
	
	font-weight: bold;
	font-style: italic;
	min-height: 36em;
	margin-top: 2em;

}


.submenu{
	width: 80%;
	border: 2px solid #000000;
	font-size: 20;
	font-weight: bold;
	background-color: #FFFFFF;

}

.submenu ul{	
	margin-left: -3em;
}

.submenu li{
	display: inline;
	list-style-type: none;
	margin-left: 1em;
}

.submenu a{
	font-size: 20;
	font-weight: bold;
}

/* "Welcome to Wampler's Farm Sausage!" text. */

#intro{	

	font-size: larger;
	color: #000000; 
	font-weight: bold;
	font-style: italic;
	font-family: Arial, Times New Roman;

} 


/* Positions the slideshow and wampler link to the right of the page. */

.rightbox{

	float: right;

}

/* Box containing link to Wampler's Sausage on the right-hand side, specially noted by its design */

#wampler {

	border: 4px dotted #87212E;
	width: 16em;

}

/* Similar to the Wampler's Link box, except with a different design. For a link to corporate gifts. */

#gifts{
	float: left;
	text-align: center;
	font-size: 17;
	padding: 3px;
	border: 4px solid #830024;
	margin-top: 5.5em;
	width: 8em;
}

#flavormore{
	float: left;
	text-align: center;
	font-size: 17;
	padding: 3px;
	border: 4px solid #0000AA;
	margin-top: 0.75em;
	margin-left: 3em;
	width: 14em;


}

/* Slideshow for the main page. Should the image size change, make sure this changes to the
correct size. */

#slideshow{

	border: 3px solid #000000;
	width: 350px;
	height: 300px;

}


/* For the info in foodservices that was exported into Flash. */

#flash{
	position: relative;
	z-index: 0;
	border: 7px solid #000000;
	width: 32.25em;
	background-color: #FFFFFF;


}


/* Table for the "Other Brands" page. */

.brandinfo{
	margin-left: .5em;


}

/* Various stylings for the "Other Brands" page. */

#otherbrands h2{
	color: #000000;
	font-weight: bold;
	border-bottom: 2px solid #000000; 
	width: 50%;
}


#otherbrands hr{
	background-color: #000000;
	border: 1px solid #000000;
	
}

#otherbrands td{
	font-size: 17;
}


/* Stylings for the major brands. */

.brand{
	font-size: 17;
}

.brand hr{
	background-color: #000000;
	border: 1px solid #000000;
	width: 50%;	
}


/* Stylings for the Contact page. */

#contacts{
	font-size: 17;
	text-align: center;

}

#contacts h2{

	color: #000000;
	font-weight: bold;
	border-bottom: 2px solid #000000; 
	width: 50%;
}

.contacttable td{
	font-size: 17;
	text-align: center;
	border: 2px solid black;
	padding: 10px;

}


/* Stylings for the Mission Statement page. */

.mission{
	text-align: center;
	font-size: 17;

}


.mission h2{
	/*text-align: center;*/
	font-weight: bold;
	border-bottom: 2px solid black; 
	width: 60%;

}

.mission h3{
	color: #830024;
}


/* Stylings for the History page. */

.history{
	font-size: 17;
}

.history hr{
	background-color: #000000;
	border: 1px solid #000000;
	width: 50%;	
}


/* Stylings for the "Help with Cooking" page */

.cooking{
	font-size: 17;
}

/* Style override for Firefox, to avoid the list index changing color. 
Not perfect by any means, but it's entirely unnoticeable with the way
this page is set up. */

/* .cooking li:hover{
	background-color: #EED8AE;
} */


.cooking h2{

	font-weight: bold;
	border-bottom: 2px solid black; 
	width: 70%;

}

.submitrec{
	font-size: 17;
}

.submitrec hr{
	border: 1px solid #000000;
	width: 50%;	
}

/* Stylings for the recipe viewing */

.recipe{
	font-size: 17;
}




.reclist{
	width: 75%;
	padding: 15px;
	text-align: center;
	border: 2px solid #000000;
	background-color: #FFFFFF;

}

.reclist table{

	border: 2px solid #000000;
	font-size: smaller;
}

.reclist td{

	border: 2px solid #000000;
	padding: 10px;
	width: 7em;
	text-align: center;
}


.recmenu{
	width: 80%;
	border: 2px solid #000000;
	padding: 5px;
	background-color: #FFFFFF;
	
}

.recmenu td{
	font-size: 20;
	font-weight: bold;
	
}

.recview{
	width: 50%;
	text-align: left;
	border: 2px solid #000000;
	padding: 5px;
	background-color: #FFFFFF;
	
}

.recview hr{

	border: 1px solid #000000;
}


.recview font{
	font-size: 30;
}

.foodservice{
	font-size: 17;
}

#foodlist{
	width: 60%;
	border: 2px solid #000000;
	padding: 5px;
	background-color: #FFFFFF;
	background-image: url(images/pigsmall.gif);
	background-position: bottom right;
	background-repeat: no-repeat; 
	

}

#foodlist ul{
	text-align: left;
}

#foodlist li{
	margin-top: .25em;
}

#foodlist td{
	border: 2px solid #000000;
	padding: 10px;
	width: 10em;
	font-size: 20;
	font-weight: bold;
	text-align: center;
}

.retail{
	font-size: 17;
}