/* Drop down menu for header file. Playing around with this may be dangerous to one's sanity. */

.topmenuul{
	list-style-type:none;

}

.topmenuli{

	list-style-type:none;
	float:left;
	text-decoration: none;
	color: #FFFFFF;
	border: 1px solid #000000;
	margin-left: 20px;

}

.topmenuli a{
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
}

.topmenuli a:hover{
	background-color: #999999;
}

.topmenutitle{
	display:block;
	width:100px;

}

.submenuul{
	list-style-type:none;
	position:absolute;
	z-index:1;

	margin: 0;
	padding:0;
	display:none;

	margin-top:-1px;
	margin-left: -1px;
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
	border-right:1px solid #000000;
	border-left:1px solid #000000;
	background-color:#FFFFFF;
	background-position: top left;
	background-repeat: repeat-x;
}

.submenuli a{
	display:block;
	width:98px;
	padding-top: 5px;
	padding-left: 2px;
	border-bottom:1px solid #000000;
	text-decoration: none;
	color: #000000;
}

.submenuli a:hover{

	color: #FFFFFF;
	background-color: #AAAAAA;
}


li:hover ul , li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}

#dmenu {

font-family: Arial, Times New Roman;
font-size: 12px;
}

#content {
	clear: left;

}


/* Non-drop down related menu stuff. You will have to change both styles
if you want to keep them similar */

.menuplain{

	list-style-type:none;

}

.menuplain a{

	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;

}



.menuplain a:hover, li:hover{

	background-color: #999999;

}



.menuplain li{

	float:left;
	border: 1px solid #000000;
	margin-left: 20px;
	font-family: Arial, Times New Roman;
	font-size: 12px;
	width: 100px;

}

.menuwidth{

	display: block;
	width: 100px;

}


/* For the plain menu displayed, in case the menu breaks down or the user is on an incompatible browser (Both
   doubtful.) */

.links{
	font-size: 17;
}

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


/* Style override for Firefox */

.links li:hover{
	background-color: #EED8AE;
}


.links ul{
	float: left;
	margin-left: 5em;	
}


/* Site related Stylings */

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

body{

	background-color: #EED8AE;
	padding-top: 0;
	margin-top: -1em;

}

/* Corner image */

.topcorner{

	width: 12.5em;
	height: 100%;
	background-color:#AA0000;
	float: left;
	margin-bottom: -1em;

}


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


.header{

	background-color: #000000;
	height: 3.15em;
	width: 100%;

}



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

.sidebar{

	float: left;
	padding: 10px;
	background-color: #000000;
	background-repeat: repeat-y;
	width: 8em;


}

.sidebar h2{

	color: #FFFFFF;
	/*text-align: center;*/
	font-weight: bold;
	border-bottom: 2px solid white; 
	width: 75%;

}

.sidebar a{
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;

}


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

.sidebarmove{
	font-size: 17;
}


/* Main Content */

.main{
	margin-left: 9.75em;
	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;

}

/* 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;

}


/* "Welcome to Family Brands!" 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 #0000FF;
	width: 12em;

}

/* 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;

}


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

}


/* 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: 75%;
	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;
}