/* BakesaleBetty Main Style Sheet
	Overall link styles, page layout, heading and color
	definitions which can appear on any page in the site.
*/

body {
	background-color: #c5e2ff;
	background-image: url(/images/two_tone_background2.gif);
	background-repeat: No-Repeat;
	background-position: 6px 45px;
}


/*	=============================================
		Fixed page elements
	=============================================
*/

#logo {
	position: absolute;
	top: 10px;
	left: 15px;
	z-index: 100; /* Make sure this is always on the top */
	
	border: 0px;
}
#betty {
	position: absolute;
	top: 80px;
	left: 532px;
	z-index: 50;
	
	border: 0px;
	z-index: 60;
}

/* The two-tone backround squares will contain betty and the page title */
#contentBackground {
	position: absolute;
	top: 45px;
	left: 150px;
	width: 573px;
	height: 379px;
	background-color: transparent;
}

#pageTitle
{
	position: absolute;
	top: 10px;
	left: 65px;
	z-index: 60;
	font-size: 32pt;
	
	letter-spacing: 3pt;
}


/* The content area needs to float above the background, but should be behind both
	betty and the logo (which overlap it).
*/

#contentArea {
	position: absolute;
	top: 100px;
	left: 142px;
	width: 420px;
	
	background-image: url(/images/content_top.gif);
	background-position: left top;
	background-repeat: No-Repeat;
	
	padding: 0px;
	
	z-index: 10;
}

/* IE only style...has different bottom margin
	IE 5.2 Mac needs bottom margin hack, but not width hack and uses this version
	IE6 Win doesn't use this though, but instead the regular one and works fine as long as no ? xml def in page.
	Opera will, but shouldn't need the hack, so we need another hack to get it back
*/
#content
{
	position: relative;
	left: 0px;
	width: 400px;
	padding: 0px;
	border: 0px;
	padding-left: 25px;
	margin-top: 32px;
	padding-right: 25px;
	margin-bottom: 0px;
	
	z-index: 11;
	background-color: #ffffff;
	
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12pt;
	line-height: 150%;
}

/* IE hack
	using an escape character, we will comment out the real style definition
	for internet explorer so that the first style seen will only work for it
	and the second style for everyone else
\*/
#content
{
	position: relative;
	width: 370px;
	padding: 0px;
	border: 0px;
	padding-left: 25px;
	margin-top: 32px;
	padding-right: 25px;
	margin-bottom: 35px;
	
	z-index: 11;
	background-color: #ffffff;
	
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12pt;
	line-height: 150%;
}
/* End of the IE hack */

/* Be nice to opera & MacIE hack */
html>body #contentArea #content { width: 370px; }

#contentAreaBot {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 420px;
	height: 45px;
	
	margin: 0px;
	background-image: url(/images/content_bottom.gif);
	background-position: left bottom;
	background-repeat: No-Repeat;
	
	z-index: 9;
}


/* 12px of the menu are hidden underneath contentArea */
#menu {
	position: absolute;
	top: 146px;
	left: 6px;
	width: 152px;
	height: 256px;
	
	background-color: transparent;

	z-index: 10;
}

#menu .menuItem {
	margin-bottom: 0px;
	border: 0px;
}

#MenuLabelWelcome {
	
}

#MenuLabelwelcome:hover {
	background-image: url(/images/sections/welcome_x.gif);
}

#MenuLabellocations:hover {
	background-image: url(/images/sections/locations_x.gif);
}

#MenuLabelproducts:hover {
	background-image: url(/images/sections/products_x.gif);
}

#MenuLabelrecipes:hover {
	background-image: url(/images/sections/recipes_x.gif);
}

#MenuLabelabout:hover {
	background-image: url(/images/sections/about_us_x.gif);
}

#MenuLabeljingle:hover {
	background-image: url(/images/sections/jingle_x.gif);
}

#contactLink {
	text-align: center;
	font-size: 8pt;
	
	margin-top: 8px;
	margin-bottom: 8px;
}

a img {
	border: 0px;
}

/* ===========================
	List Styles
   ===========================
*/
.listTitle {
	margin-top: 10pt;
	font-weight: bold;
}

li.listTitle {
	list-style-type: none;
}

.note {
	font-size: 8pt;
}

/* ===========================
	Location Styles
   ===========================
*/
.location {
	font-family: arial, helvetica, sans-serif;
	font-size: 10pt;
	margin-bottom: 20pt;
	line-height: 120%;
}

.location .lName {
	font-size: 12pt;
	font-weight: bold;
}

.location a:link {
	color: #2030b0;
}

.location a:visited {
	color: #e0b21b;
}

.location a:hover, .lName a:active {
	color: #c5e2ff;
}

.location .hours {
	font-size: 10pt;
}

.location .description {
	font-size: 9pt;
	margin-left: 2em;
	margin-right: 2em;
	margin-bottom: 10px;
}

.location .map {
	font-size: 9pt;
	margin-left: 2em;
	margin-right: 2em;
}

/* ===========================
	Recipe Styles
   ===========================
*/
.recipe {
	font-size: 10pt;
	line-height: 120%;
	
	margin-bottom: 20pt;
}

.recipe .rName {
	font-size: 12pt;
	font-weight: bold;
}

.recipe a:link {
	color: #2030b0;
}

.recipe a:visited {
	color: #e0b21b;
}

.recipe .description {
	font-size: 9pt;
	line-height: 120%;
	margin-left: 2em;
	margin-right: 2em;
}

.recipe .descriptionSmall {
	font-size: 7pt;
	line-height: 115%;
	margin-left: 2em;
	margin-right: 2em;
}

.Related {
	margin-top: 5pt;
}

.Related .recipe {
	margin-left: 2em;
	margin-bottom: 15pt;
}

.Related .recipe .rName {
	font-size: 10pt;
	font-weight: bold;
	margin-bottom: 2pt;
}

.Related .recipe .description {
	font-seize: 7pt;
	line-height: 115%;
	margin-left: 2em;
	margin-right: 2em;
}

.ingredients {
	font-size: 9pt;
	line-height: 125%;
	font-family: 'courier new', courier, fixed, monospace;
}

.ingredients tr td sub {
	font-size: 7pt;
}

.ingredients tr td sup {
	font-size: 7pt;
}

.directions {
	font-size: 9pt;
	line-height: 125%;
	font-family: arial, helvetica, sans-serif;
	margin-bottom: 10pt;
}

.Title {
	margin-top: 10pt;
	font-size: 10pt;
	font-weight: bold;
}

/* ===========================
	Product Styles
   ===========================
*/
.product {
	font-size: 10pt;
	line-height: 120%;
	
	margin-bottom: 20pt;
}

.product .pName {
	font-size: 12pt;
	font-weight: bold;
}

.product a:link {
	color: #2030b0;
}

.product a:visited {
	color: #e0b21b;
}

.product .description {
	font-size: 9pt;
	line-height: 120%;
	margin-left: 2em;
	margin-right: 2em;
}

.product .ingredients {
	font-family: arial, helvetica, sans-serif;
	font-size: 9pt;
	line-height: 120%;
	font-style: italic;
	
	margin-left: 2em;
	margin-right: 2em;
}

.product .ingredients .listTitle {
	font-style: normal;
}

/* =========================
	Contact Us Styles
   =========================
*/
.contactForm {
	font-size: 10pt;
	line-height: 120%;
}

.contactForm tr {
	vertical-align: top;
}

.contactForm .label {
	text-align: right;
}

/* ========================
	General Styles
   ========================
*/
.pageHeader {
	font-size: 12pt;
	font-weight: bold;
	
	margin-bottom: 10px;
}

.sectionHeader {
	font-size: 10pt;
	font-weight: bold;
	margin-top: 10px;
}