/* Sets element margins, padding, and border to 0 to even out browser differences when adding desired values later. */
html, body, p, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, li, dl, dt, dd, td, form, fieldset, a {
     margin: 0; 
     padding: 0;
     border: 0;
}

body {
	background: #fff url(images/orange_bg.jpg) repeat-x 0 100px; /* Sets the background color of the page. */
	font: 100.01% TrebuchetMS, Verdana, Arial, sans-serif; /* Sets the default font-family. Also sets the font-size. Using percent rather than ems eliminates a Win IE tendency to make fonts huge or tiny if they are later set in ems for other elements. The strange value is because some versions of Opera render a font-size based on 100% too small. Safari, on the other hand, has trouble with 101%. Current best practice suggests the use of 100.01%. */	
	text-align: center; /* Because Internet Explorer doesn't recognize the auto margins that center a layout in the browser, we use something it gets wrong: centering text also centers all block level elements, and thus the layout is centered. Though our layout is fluid and could use percentage margins to center it in the viewport, we need this to make Jello Mold work in Internet Explorer. */ 
}



/* These styles set up a "current page marker" or a "you are here" visual cue. 
By setting an ID on the body of each unique page, as well as an ID on each list 
item that contains a link, we can create an automatic look for current page links. */
body#mainpage li#main a, 
body#restaurantpage li#restaurant a, 
body#speccakepage li#speccake a, 
body#cateringpage li#catering a, 
body#weddingspage li#weddings a, 
body#mediapage li#media a, 
body#contactpage li#contact a {
	color: #E3E3E3; /* Sets the font color for the current page marker. */
	font-weight: bold; /* Makes the current page link bold. */
	background: #ff0000; /* Sets a background color for the current page marker. */
	
}


/* SET STYLES FOR THE DIV THAT IS container THE MAIN CONTAINER. -----------------------------------*/
#container {
	color: #330000; /* Sets the type color for text in the div container the main container. */
	width: 754px;
	text-align: left; /* Sets the text-alignment for the text to right. */
	margin: 0 auto; 
	padding: 15px 0;
}

#container ul {
	margin: 5px 20px 5px 0; /* Sets the spacing around the unordered list that will function as an accessible navigation list. */
	padding: 0 0 10px 0:
	display:inline; /* Sets the unordered list to display on the same line with the search form. */
	text-align: center;
	}

#container li {
	display: inline; /* Sets the list items to display horizontally. */
	}
	
/* The following fix corrects an IE Mac bug that creates ghost links upon hovering. */
	
/*\*//*/
#container li {
	display: inline-block;
	white-space:nowrap;
	width:1px;
	}
/**/

#container a:link, 
#container a:visited {
	color: #330000; /* Sets type color for links in the initial and visited states in the container div. */
	font-size: 0.7em; /* Sets the font-size to smaller than the default on the body. */
	background: #fffff; /* Sets the background color on the links. */
	text-decoration: none; /* Removes the underline from the links. */
	padding: 4px; /* Pads the links so that the background color extends a little beyond the text. */
}

/* The following fix corrects display problems of these links in IE 5. */

/*  \*/
* html #container a:link, * html #container a:visited {
 height: 1%;
 vertical-align: bottom;
 ve\rtical-align: middle;
}
/* */

#container a:hover, 
#container a:focus {
	color: #ff9900; /* Sets the type color for links in the hover or focus state within the container div. */
	background: #fff; /* Sets the background color on links in the hover and focus state within the container div. */
}


/* END container DIV STYLES.-----------------------------------------------------------------------*/



#content { width:100%;
background: #fff url(images/column.jpg) repeat-y 550px 0;*/
overflow: auto;
}

/* SET UP content_main DIV STYLES.--------------------------------------------------------------------*/

/*  \*/
* html #content_main {height: 1%;}
/* */

#content_main {
	float: left; /* Carves out a space for the left, floated column. */
	margin: 0; /* Carves out a space for the left, floated column. */
	padding: 0; /* Creates space between elements and the edge of the content_main div. */
	width: 550px;*/
}

#content_main h1,  {
	color: #5F662F; /* Sets the type color for h1 within the content_main div. */
	margin-bottom: 3px; /* Sets the space between the bottom of the h1 and the next element. */
	font-size: 1.4em; /* Sets the font-size in relationship to the default in the body. Makes the size larger than body text, but smaller than the default for h1. */
	font-variant: small-caps; /* Gives the heading a small-caps variation. */
}
 
#content_main h2,  {
	margin: 0.5em 0 0.25em; /* This descendent selector sets up heading 2 only in the content_main area. A margin is placed around the heading. */
	color: #5C642E; /* Sets the text color to black. */
	font-size: 1.2em; /* Sets the font-size of h2 within the content_main div to be larger than the default in the body. */
	font-variant: small-caps; /* Gives this heading a small-caps variation. */
}

#content_main p {
	margin: 0 20px 5px 15px; /* Adds a bit of space at the bottom of paragraphs in the content_main div.  */
	font-size: 0.8em; /* Sets the paragraph font-size to smaller than the body default. The default for most browsers is too big. */
	line-height: 1.5em; /* Adds leading, or space, between lines of text. For reading on a monitor, a little extra space is advantageous. */
}

#content_main a:link,  
#content_main a:visited {
	color: #597F37; /* Sets type color for links in the initial and visited states in the container div. */
	font-size: 0.9em; /* Sets the font-size to smaller than the default on the body. */
	font-weight: bold;
	text-decoration: none; /* Removes the underline from the links. */
}

/* The following fix corrects display problems of these links in IE 5. */

/*  \*/
* html #content_main a:link, * html #content_main a:visited {
 height: 1%;
 vertical-align: bottom;
 ve\rtical-align: middle;
}
/* */

#content_main a:hover, 
#ccontent_main a:focus {
	color: #ff9900; /* Sets the type color for links in the hover or focus state within the container div. */
}

/* END content_main DIV STYLES.-----------------------------------------------------------------------*/


/* SET UP HEADER DIV STYLES.---------------------------------------------------------------------*/ 
#header {
	border: 1px solid #fff; /* Sets a black one-pixel border to the bottom of the header div. */
	text-align: center;
	height: 200px; /* Sets the height to 125 pixels, which is the height of the background image. */
	margin: 0;
	background: #fff url(/images/header_bg.jpg) no-repeat center top; /*Sets a background color and a background image to the header. The image is set not to repeat and to appear in the center of the div.  */
	padding: 0 1px 10px 1px;
}


/* END HEADER DIV STYLES.-----------------------------------------------------------------------*/

/* SET UP LEFT COLUMN AND ITS CHILD DIVS.-------------------------------------------------------*/

#content_sub {
	float: right; /*Sets the left column to float left and fit into the 200 pixel left margin of the content_main div. */
	width: 200px; /* Sets its width to 200 pixels. */
	margin: 0; /* Sets space around the left column. */
	padding: 0; /* Sets padding on the left column. */
	background: #fff url() ;
}

#content_sub h3 {
	font-size: 0.95em; /* Sets the type size for h3 in the left column. */
	color: #686B3F; /* Sets the type color for h3 in the left column. */
	font-variant: small-caps; /*Sets the left column h3 to a small cap variant. */
	margin: 5px 0 0 5px; /* Sets the space around left column h3. */
}

#content_sub p { 
	color: #330000;
	font-size: .7em;
	text-align: center;
	line-height: 1.3em;
	margin-top: 20px;
	}
	
#content_sub a:link, 
#content_sub a:visited {
	color: #597F37; /* Sets type color for links in the initial and visited states in the container div. */
	font-size: 0.8em; /* Sets the font-size to smaller than the default on the body. */
	font-weight: bold;
	text-decoration: none; /* Removes the underline from the links. */
}

/* The following fix corrects display problems of these links in IE 5. */

/*  \*/
* html #content_sub a:link, * html #content_sub a:visited {
 height: 1%;
 vertical-align: bottom;
 ve\rtical-align: middle;
}
/* */

#content_sub a:hover, 
#ccontent_aub a:focus {
	color: #ff9900; /* Sets the type color for links in the hover or focus state within the container div. */
}

 
#menu ul {
	font: 0.85em Verdana, Arial, Helvetica, sans-serif; /* Sets the size and font family for unordered lists in the menu div of the left column div. */
	color: #333; /* Sets the type color of the unordered list in the menu div of the left column div. */
	list-style: none; /* Removes the bullet from the list. */
}

#menu li {
	border-top: 1px solid #ECECEC; /* Sets the top border of the button. */
	border-left: 1px solid #F0F0F0; /* Sets the left border of the button. */
	border-bottom: 1px solid #CCC; /* Sets the bottom border of the button. */
	border-right: 1px solid #CCC; /* Sets the right border of the button. */
}

 #menu a:link, #menu a:visited {
	color: #686B3F; /* Sets the type color for the initial state of the link and its visited state. */
	display: block; /* Sets the display to block so that each link's button appears on its own line. */
	text-decoration: none; /* Adds a background image for the links. It is set not to repeat. */
	background: url(../images/navbg.jpg) repeat-x; /* Sets a background image on all links in this div. */
	padding: 6px 3px 6px 10px; /* Sets padding between text and the edge of the button. */
}

/* The following is the Holly Hack, and it ensures that the full button is clickable in Internet Explorer for Windows. The vertical alignment corrects gaps in IE 5. */

/*\*/
* html #menu a {height: 1%;
vertical-align: bottom;
}
/* */

#menu a:hover, 
#menu a:focus {
	background: #fff url(../images/nav_hov_bg.jpg) no-repeat; /* Sets the background image for the hover and focus states of the buttons. */
}

#news {
	width: 185px; /* Sets the width of the news div. */
	margin: 5px; /* Sets the margin around the news div. */
}

#news p {
	font-size: .75em; /* Sets a font-size that scales smaller than the default set on the body. */
	margin: 5px 15px 5px 30px; 
	text-align: left;
}

#news img {
	margin-top: 10px; /* adds space between the image and the buttons above it. */
}

/* END LEFT COLUMN AREA STYLES.------------------------------------------------------------------*/

/* SET UP FOOTER DIV STYLES.---------------------------------------------------------------------*/
#footer {
	clear: both; /* Added so that the footer does not start before the completion of all content_main in the three columns above. */
	padding: 1em; /* Adds 1 em of padding between the borders of the footer walls and the content_main within. This 1 em matches the padding in other divs. */
	color: #330000; /* Sets the type color in the footer div. */
	border-top: 1px solid #fofofo; /* Adds a solid black one-pixel border to the top of the footer div.  */
	text-align: center; /* Aligns text to the center in the footer. */
	font-size: 0.7em; /* Scales the text to a smaller size than the default in the body. */
	background: #fff url(images/footer_bg.jpg) repeat-x center 5px; /* Sets a background image to repeat on the x axis in the footer div. */
}

/* The Holly Hack corrects footer problems in IE 5. */

/*  \*/
* html #footer {height: 1%;}
/* */

/* Sets up the unordered list that is used for the accessible navigation in the footer div. */
#footer ul {
	margin: 5px 0; /* Adds space around the unordered list that makes up the navigation in the footer div. */
	}

#footer li {
	display: inline; /* By changing lists to inline, the footer list items will display horizontally instead of the default vertical. */
	}

#footer a:link, #footer a:visited {
	margin: 0.2em; /* Sets spacing between links and pipe separators */
	font-size: 0.85em; /* Sets font size smaller for the links so the pipes are larger in comparison, making the separators more apparent. */
	color: #330000; /* Sets the type color of links in the a:link and a:visited state. */
}
	
#footer a:hover, #footer a:focus {
	color: #ff9900; /* Sets the type color of links when they're in the a:hover or a:focus state. */
	background: #ECECEC; /* Sets the background color of the links in this state within the footer. */
	text-decoration: none; /* Removes the underline from the links. */
}


/* SET UP FLOATED IMAGE CLASSES.-----------------------------------------------------------------*/
	.center {
	margin: 0 0 10px 8px;
}

.lftflt {
	float: left; /* Floats an image to the left of text. */
	margin-right: 10px; /* Adds a 10 pixel margin to the right of the image. */
	margin-top: 5px; /* Adds a 5 pixel margin over the image. */
	border: 1px solid #687033; /* Adds a border around the image. */
	
}

.rghtflt {
	float: right; /* Floats an image to the right of text. */
	margin-left: 10px;  /* Adds a 10 pixel margin to the left of the image. */
}
/* END FLOATED IMAGES CLASSES-------------------------------------------------------------------*/

.smallertext {
	font-size: .65em;
	font-style: italic;
	}
	
.bold {
	font-weight: bold;
	}
	
.orangestrong {
	font-weight: bold;
	color: #D27F4C;
	font-size: .8em;
	}
	
.greenstrong {
	font-weight: bold;
	color: #597F37;
	}

/* The pullquote class styles a span within the content_main div so that it emulates the look of a pullquote in a print piece. */
.pullquote {
	color: #703E3B; /* Sets the type color. */
	float: right; /* Floats the span to the right of the content_main paragraphs. */
	width: 150px; /* Sets its width to 160 pixels. */
	font: 1.1em/1.4em Verdana, Arial, Helvetica, sans-serif; /* Sets its font properties. */
	margin: 10px 0 5px 10px; /* Sets margins around the border of the pullquote.  */
	border-bottom: 2px dotted #703E3B; /* Sets a 2 pixel dotted border to the bottom of the pullquote text. 1 pixel dotted borders become dashed in Win IE. */
	border-top: 2px dotted #703E3B; /* Sets a 2 pixel dotted border to the top of the pullquote text. 1 pixel dotted borders become dashed in Win IE. */
	padding-bottom: 3px; /* Adds a little padding between the border and the bottom of the pullquote text.  */