/* This style sheet was written by Paul Dell and was distributed  with the Belle Anglaise Template available at http://www.dellwebsites.com 
- This comment should remain intact though you are free to edit the style sheet as you see fit. */

/* WE STONGLY RECOMMEND THAT YOU OPEN THIS STYLE SHEET TOGETHER WITH THE HTML FILE TO GET A BETTER UNDERSTANDING */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6{  /* set everything to zero for a good  
starting point this selector at the top is like belt and braces,
you can see immediately when designing if you haven't set margins and padding
to an element as they become all scrunched up together.*/
margin: 0; /* sets the margins to zero on the body */
padding: 0; /* sets the padding to zero on the body */
border: 0; /* deletes any borders */	
}

body {
	background-color: #FFF; /*sets the body background colour to white */
	background-image: url(images/background.jpg); /*body background image */
	background-position: center; /*centres the background image */
	color: #333; /*default text colour on page*/
	font-family: Arial, Helvetica, sans-serif; /*default font on page*/
	font-size: 90%; /*default font size  set to 90% */
	margin: 0 auto;/*sets the margins to zero */
	min-width: 770px;/*minimum width anything under you get scroll bars this prevents our page becoming smaller than the wrapper */
	padding: 0; /*padding set to zero */
	text-align: center; /*another hack for IE to make sure the layout is centred*/
	}
	
#wrapper {
	background-color: #FFF; /*sets the background colour of our wrapper div to white */
	background-image: url(images/wrapper-background.gif);/*sets the background image for the wrapper div, this creates the illusion of a right column */
	margin: 0 auto;/* sets the wrapper margins to zero */
	padding: 0;/* sets the wrapper padding to zero */
	text-align: left; /* aligns the text to the left, see also the IE hack in the body where we align the text centre */
	width: 742px;/* sets the wrapper width */
}


#logo {
	height: 59px;/*sets the height of the logo div*/
	margin-top: 7px;/*creates a 7px gap from the top of the page*/
	background-image: url(images/top-background.jpg);/*the background image of the logo div*/
}


#topnav {
         width: 742px;/*sets the width for our topnav div*/
}


#topnav li {
	display: block;
	padding: 0;/*padding set to zero */
	float: left;/*positions the top nav to the left */
}


#topnav ul {
	height: 59px;/*sets the height */
	margin: 0;/*margin set to zero */
	padding: 0;/*padding set to zero */
	text-align: center;/*aligns the link text centre */
}


#topnav ul li a {
	color: #EDF1F2;/*font colour for top nav text link */
	display: block;/* makes the links act like a button*/
	font-size: 90%;/*sets the font size */
	font-weight: bold;/*sets the font weight to bold */
	height: 55px;/*sets the height */
	padding: 0;/*zero padding */
	text-decoration: none;/*removes the default underline*/
	width: 121px;/*sets the width of the links */
	padding-top: 4px;/*positions the link text*/
}


#topnav ul li a:hover {
	background-image: url(images/top-backgound-hover.gif);/*displays the background image on hover*/
	color: #FFF;/*sets the font colour*/
	display: block;/*set the display to block so the nav displays vertically*/
	background-repeat: no-repeat;/*makes sure the background image does not repeat*/
}


#topnav a:active {/*this is to make sure that when someone is using the tab key, there is a change of state similar to a:hover*/
	color: #FFF;/*sets the font color for the top nav state*/
	display: block;/*displays block as to act like a button*/
	background: url(images-index/top-backgound-hover.gif) no-repeat;/*the background image*/
}


.headings {
	border-bottom: solid #839450 1px; /*places a solid border under the headings*/
}


#leftlogo {
	background-image: url(images/left-logo.jpg); /*the background image for the leftlogo div*/
	float: left;/*positions the div to the left*/
	height: 249px;/*the height which is the same as our background image*/
	width: 380px;/*the width which is also the same as our background image*/
	margin-top: 10px; /*creates a 10px gap from the logo div*/
	background-repeat: no-repeat;/*no repeat for our background image*/
}



#rightlogo {
	background-image: url(images/right-logo.jpg);/*the background image for the rightlogo div*/
	float: right;/*positions the div to the right*/
	height: 249px;/*the height which is the same as our background image*/
	width: 362px;/*the width which is the same as our background image*/
	margin-top: 10px;/*creates a 10px gap from the logo div*/
		background-repeat: no-repeat;/*no repeat for our background image*/
}



#rightlogomenu {
	background-image: url(images/right-logomenu.jpg);/*the background image for the rightlogo div*/
	float: right;/*positions the div to the right*/
	height: 249px;/*the height which is the same as our background image*/
	width: 362px;/*the width which is the same as our background image*/
	margin-top: 10px;/*creates a 10px gap from the logo div*/
		background-repeat: no-repeat;/*no repeat for our background image*/
}



#rightlogochild {
	background-image: url(images/right-logochild.jpg);/*the background image for the rightlogo div*/
	float: right;/*positions the div to the right*/
	height: 249px;/*the height which is the same as our background image*/
	width: 362px;/*the width which is the same as our background image*/
	margin-top: 10px;/*creates a 10px gap from the logo div*/
		background-repeat: no-repeat;/*no repeat for our background image*/
}



#rightlogowine {
	background-image: url(images/right-logowine.jpg);/*the background image for the rightlogo div*/
	float: right;/*positions the div to the right*/
	height: 249px;/*the height which is the same as our background image*/
	width: 362px;/*the width which is the same as our background image*/
	margin-top: 10px;/*creates a 10px gap from the logo div*/
		background-repeat: no-repeat;/*no repeat for our background image*/		
}



#rightlogospec {
	background-image: url(images/right-logospecials.jpg);/*the background image for the rightlogo div*/
	float: right;/*positions the div to the right*/
	height: 249px;/*the height which is the same as our background image*/
	width: 362px;/*the width which is the same as our background image*/
	margin-top: 10px;/*creates a 10px gap from the logo div*/
		background-repeat: no-repeat;/*no repeat for our background image*/			
}


#content {
	width: 742px;/* the content div is the same as our wrapper div and inside the content div we have placed the nav div and the contentleft div*/
	clear: both; /*ensures the content is  placed below the logoleft and logoright divs*/
}


#content .contentleft {
	float: left;
	margin-top: 6px;
	padding: 0 10px 10px 10px;
	text-align: left;
	width: 490px;
	line-height: 130%;
}


#nav {
	float: right;/*positions our nav to the right*/
	padding-top: 18px;/*IE hack to ensure our nav lines into position*/
    padd\ing-top: 22px;/*this and the following position the Nav in accordance with the wrapper background and also creates the appearence of a right column*/
	padding-right:10px;/*sets the right to 10 pixels as to position the nav in accordance with the wrapper background*/
	margin-right: 3px;
	ma\rgin-right: 0;/*fixes the nav alignment to the green bg in IE5.5*/
	width: 192px;/*ensures the content is  placed below the logoleft and logoright divs*/
}


html>body #nav{
	padding-top: 27px; /*IE will not see this*/
}


/*styling the right navigation*/
#nav ul {
	border-top: 1px solid #888947;/*places a border on the top of the list*/
	font-size: 90%;/*sets the font size for the right nav*/
	margin: 0;/*zero margins*/
	padding: 0;/*zero padding*/
	list-style-type: none;/*removes the list style*/
}



#nav ul li{
	border: solid #888947; /*sets a border*/
	border-width: 0 1px 1px 1px;/*sets the border width*/
	margin: 0;/*set the margin to zero*/
}


#nav a, 
#nav a:visited {
	color: #000; /*font colour */
	display: block;/*display set to block see http://www.w3.org/TR/REC-CSS2/visuren.html*/
	padding: 6px;/*gives a bit of breathing space to our text from the block */
	text-decoration: none;/*removes the default underline*/
	background-color: #F5F7F6;/*background colour */
	height: 1%;/*hack for IE to create the block hover effect */
}


#nav a:hover {
	color: #000;/*hover font colour */
	background-color: #B8CA88;/*hover background colour */
}


#nav a:active {/*this is to make sure that when someone is using the tab key, there is a change of state similar to a:hover*/
	color: #000;/*font colour for nav active state*/
	background-color: #B8CA88;/*background colour*/
}



#nav a:focus {
	color: #000;/*font colour */
	text-decoration: none;/*removes the default underline*/
	background-color: #FFF;/*sets the background colour to white*/
}


#footer {
	color: #666;/*font colour for the footer div*/
	font-size: 80%;/*font size*/
	text-align: center; /*aligns the text centre*/
	width: 490px; /*width of the footer div*/
	padding: 6px;/*gives a bit of space and makes our text easier to read*/
	border: solid green 1px; /*creates a green border around the footer div*/
	clear: both;/*ensures the footer div is  placed below the contentleft and nav divs*/

}
h1 {
	font-size: 100%;/*sets the font size of heading one*/
}
h2 {
	font-size: 95%;/*sets the font size of heading two*/
}


/*link styles*/
a:link{
	color: #e60000;/*font colour for links*/
	text-decoration: underline;/*removes the underline*/
}
a:visited{
	color: #006600;/*font colour for visited state of links*/
}
a:hover{
	color: #333;/*font colour for hover state of links*/
}
a:active{
	color: #333;/*font colour for active state of links*/

}
.menuhead {
	font-family: "Bradley Hand ITC";
	font-size: 18px;
	color: #006600;
	font-weight: bold;
	text-decoration: underline;
}
.menuitem {
	font-family: "Bradley Hand ITC";
	font-size: 17px;
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
}
.menudescribe {
	font-family: "Bradley Hand ITC";
	font-size: 14px;
	color: #000000;
	font-weight: bold;
	
}
.menutitle {
	font-family: "Bradley Hand ITC";
	font-size: 28px;
	color: #000000;
	font-weight: bold;
}
.title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	font-weight: bold;
}
.menutitlered {
	font-family: "Bradley Hand ITC";
	font-size: 36px;
	color: #E60000;
	font-weight: bold;
}
.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-decoration: none;
}
.menutitlegreen {

	font-family: "Bradley Hand ITC";
	font-size: 28px;
	color: #006600;
	font-weight: bold;
}
.dineout_head {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}
.menutitlegreen_small {


	font-family: "Bradley Hand ITC";
	font-size: 24px;
	color: #006600;
	font-weight: 900;
}