/* General styles that apply globally to all pages */

/* remember to apply this style to the head section of all pages:

[if IE]>
<style type="text/css">
body { zoom: 1; }

</style>
<![endif] 

*/

* { 
	padding: 0; 
}

html {border: 0; margin: 0;}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small; 					/* Technique I'm going for here is the keywords + percentages combo as described by Dan Cederholm. */
	line-height: 125%;
	font-weight: normal;
	color: #ffffff;
	background-color: #FFFFFF;
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}

h1 {font-size: 75%;} 			/* The reason I've used 75% here is because I want to use an image replacement technique that works */
										/* with CSS disabled, but that also allows for an increase in browser text sizing up to maximum.  */
										/* By using 75%, This should ensure that the text font NEVER peeks out from behind the image replacement! */
										/* Remember to delete headings if actual browser text is intended for use. */
p, dt, dd {
	font-size: 85%;
	margin: 0;
}

dl {margin-top: 0px;}

h3, h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 140%;
	color: #184084;
	font-weight: normal;
}

h4 {
	font-family: "Gill Sans MT", "Lucida Sans", Helvetica, sans-serif;
	font-size: 110%;
	font-weight: bold;
	color: #184084;
}

.emphasis {								/* Use this class to provide uniform emphasis to any body text throughout the site.  Remember to populate values! */
	font-size: 150%;
	font-weight: bold;
	color: ;
	color: #cc0000;
	line-height: 150%;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.emphasis a:link {
	font-size: ;
	font-weight: bold;
	color: ;
}

.emphasis a:visited {
	font-size: ;
	font-weight: bold;
	color: ;
}

.emphasis a:hover {
	font-size: ;
	font-weight: bold;
	color: ;
}

a:link img{
	border: none;
}

a:visited img {
	border: none;
}

a:hover img {
	border: none;
}

a:active img {
	border: none;
}


/* wrappers, containers, self clearing code */

#wrapper {
	background-color: none;
	height: auto;
	width: 877px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	margin-top: 15px;
	overflow: auto; 					/* I've included the overflow rule to ensure that the container and therefore the background colour expands */
	padding-top: 50px;
	padding-right: 50px;
	padding-bottom: 0px;
	padding-left: 50px;
}										/* to fill all elements within it.  To make this work, the container needs to have a specified width. */
										/* The danger then exists that should any content within the container exceed the width of the container */
										/* then scrollbars could appear.  Frankly I think other problems would be more serious in that event! */

#slideshow {
	margin: 0;
	padding: 0;
	height: auto;
	overflow: hidden;
	clear: both;
}

/* Navigation */

/* The following styles allow for a horizontal nav menu that uses an unordered list of links as hooks for image replacement.  The beauty is that it is accessible, and degrades well if uses have images turned off. */

#navcontainer {									 /* I think the container is required if the nav menu is to be floated to the right of a div */
	width: 542px;
	height: 27px; 								 /* This value should be the same as the height of the image replacement */
	float: right;  
	clear: right;								 /* This is the only face value benefit I can see from storing these items in a container. */
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


#nav 											 /* This style is to be applied to the <ul> */{
	padding: 0;
	height: 27px;  								 /* Height should be set to the height of the image replacement */
	list-style: none;
	display: inline;
	overflow: hidden;
	margin: 0;
	float: left;
}

#nav li {
	padding: 0;
	list-style: none;
	display: inline;
}

#nav a {
	float: left;
	padding: 27px 0 0 0; 						/* Height should be set to the height of the image replacement */
	overflow: hidden;
	height: 0px !important; 
	height /**/:27px; 							/* for IE5/Win only */
}
#nav a:hover    {
	background-position: 0 -27px;
}
#nav a:active, #nav a.selected { 				/* The selected class was included in the HTML for each page and applied as a class to the <li> */
												/* for that page.  It worked on ikandi creations, so it should remain in the template. */
	background-position: 0px -54px; 			/* The second value should be replaced with a value that is 2x the height of one image replacement. */
}


/* For all of the following link styles, change the id name to represent the actual main nav links used on the site.  Change the width to equal the specific width of each replacement image.  Change the background-image url to one that matches the replacement image. */
	
#home a  {
	width: 94px;
	background-image: url(nav_buttons/home.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#menu a  {
	width: 136px;
	background-image: url(nav_buttons/menu.png);
	background-repeat: no-repeat;
	background-position: left top;
}
	
#location a  {
	width: 171px;
	background-image: url(nav_buttons/location.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#events a  {
	width: 136px;
	background-image: url(nav_buttons/events.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.selected { 										/* This class has been added as extra protection for the  :active styling */
	background-position: 0px -54px; 				/* The second value should be replaced with a value that is 2x the height of one image replacement. */
}

#wheretonext {										/* These styles are designed to be used with text based pagination at the bottom of a text column. */
	margin: 0;										/* The idea is to direct the user towards the page you would ideally like them to view next. */
	padding-top: 10px;
	list-style-type: none;
}

#wheretonext li {
	color: #ee0777;
	font-size: 110%;
	padding-bottom: 10px;
}

#wheretoleft {
	float: left;
}

#wheretoright {
	float: right;
}
/* h1 image replacements */


.header { 											/* This class is used to set the height for the 'viewable window'.  If the size of the heading images */
	height: 150px;									/* are different throughout the h1-6 range, then additional classes will be necessary. */
	float: left;									/* This float rule is required to allow a nav bar to sit on the right hand side at the same level. */
	overflow: hidden;								/* to the design for Additive Solutions. */
}


#logo {												/* replace this id name with the name of the heading */
	background-image: url(nav_buttons/logo_new_black.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 150px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0px;
}



/* banner image replacements (h2) */

.bannerheader { 									/* This class is used to set the height for the 'viewable window'.  If the size of the heading images */
	height: 262px;									/* are different throughout the h1-6 range, then additional classes will be necessary. */
	float: left;									/* This float rule is required to allow a nav bar to sit on the right hand side at the same level. */
	overflow: hidden;								/* to the design for Additive Solutions. */
}


#indexbannerheader {												/* replace this id name with the name of the heading */
	background-image: url(images/index_banner_image.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 262px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0px;
}


/* h3 image replacements left side*/

.subhead {
	height: 37px;
	overflow: hidden;				
}


#welcome {												/* replace this id name with the name of the heading */
	background-image: url(headings/welcome.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0px;
}

#products {												/* replace this id name with the name of the heading */
	background-image: url(headings/products.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0px;
}

#customers {												/* replace this id name with the name of the heading */
	background-image: url(headings/customers.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0px;
}
#upcoming {												/* replace this id name with the name of the heading */
	background-image: url(headings/upcoming.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0px;
}

#address {												/* replace this id name with the name of the heading */
	background-image: url(headings/address.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0px;
}

#contactus {												/* replace this id name with the name of the heading */
	background-image: url(headings/contactus.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0px;
}

#eventss {												/* replace this id name with the name of the heading */
	background-image: url(headings/events.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0;
}

#breakfast {												/* replace this id name with the name of the heading */
	background-image: url(headings/breakfast.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0;
}

#toasties {												/* replace this id name with the name of the heading */
	background-image: url(headings/toasties.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0;
}

#desserts {												/* replace this id name with the name of the heading */
	background-image: url(headings/desserts.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0;
}

#drinks {												/* replace this id name with the name of the heading */
	background-image: url(headings/drinks.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0;
}

#licensed {												/* replace this id name with the name of the heading */
	background-image: url(headings/licensed.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0;
}
#gallery {												/* replace this id name with the name of the heading */
	background-image: url(headings/gallery.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 37px; 								/* change the amount of padding to equal the height of the heading image */
	overflow: hidden;
	margin: 0;
}



/* p styles for the phone number in the header.  */

#callindex { 											
	height: 19px;																
	overflow: hidden;
	clear: both;	
	margin: 0;
	padding: 0;	
	width: 220px;							
}

#phonenumber {										/* This style is designed to be used with the maincontent right container. */
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 19px;
	overflow: hidden;
	margin: 0;	
}

#number {
	float: right;
	padding-right: 10px;
}

/* Calls to Action */
/* I've used these styles successfully on Earthwood to use a button with roll over effects as a user interface.  The associated markup is: 

 <ul id="calltoaction">
   			   <li id="gobutton"><a href="contact.html">Contact me</a></li>
   		  </ul>   
		  
Once again, there's probably a better way of doing it with less CSS, but this way works! */

.calltoaction {
	height: 52px;
	list-style: none;
	overflow: hidden;
	display: inline;
}

.calltoaction li {
	list-style: none;
	display: block;
	padding: 0px;
	margin: 0px;
}

.calltoaction a {
	overflow: hidden;
	height: 0px !important;
	height /**/:52px;
	display: block;
	padding-top: 52px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

.gobutton a  {
	width: 215px;
	background-image: url(nav_buttons/blue_button.png);
	background-repeat: no-repeat;
	background-position: center top;
}

/* The following styles were first used by me on the Additive Solutions website to create a container */
/* with a definition list being used as a way to list a series of images, titles, captions and links. */
/* I found the whole 'float to fix a float' thing a bit confusing at times.  Equally, it is easy to get */
/* in a tangle over widths, margins, and paddings when trying to get the spacing right.  However, the */
/* following examples will produce  a list that is all in line and survies text size increasing well. */

#productlist {												/* Styles for the free guides within the maincontentright container. */
	float: left;
	width: 272px;
}

#productlist dl {
	float: left;
	width: 262px;
	padding: 0;
	display: inline;
	margin-top: 2px;
	margin-bottom: 0px;
	margin-left: 10px;
}

#productlist dt {
	float: right;
	width: 202px;
	margin: 0;
	padding: 0;
	color: #ffffff;
}

#productlist dd {
	padding: 0;
	color: #6f6f6f;
	margin-right: 10px;
}

#productlist dl dd.productlistimg {
	margin: 0;
	float: left;
}

#productlist dd.productlistimg img {
	float: left;
	margin: 0 0 0 0;
}

#productlist dd a {
	text-decoration: none;
	color: #6f6f6f;
}

/* Styles for each individual page including all content containers needed within the global containers specified above. */

/* Index Page */

#maincontentleft {
	clear: left;
	float: left;
	width: 272px;
	margin-bottom: 10px;
	padding: 10px;
	background-color: #000000;
}

#maincontentcenter {
	float: left;
	width: 272px;
	margin: 0;
	padding: 10px;
	background-color: #000000;
}

#maincontentright {
	float: left;
	width: 272px;
	margin: 0;
	padding: 10px;
	background-color: #000000;
}

.features {
	padding-bottom: 10px;
	margin-left: 40px;
}


#indexcontentcenter {
	float: left;
	width: 272px;
	margin: 0;
	background-color: #000000;
	padding-top: 10px;
	padding-left: 10px;
}

#maincontentleft p {
	margin-top: 5px;
}

#maincontentright p {
	margin-bottom: 5px;
	margin-left: 10px;
}
#maincontentright a {
	color: #fff;
}
#menu_download a, #facebook a {
	color: #fff;
	text-decoration: underline;
}

/* Menu page  */

.menulist {
	text-decoration: none;
	list-style: none;
	margin: 0;
	font-size: 85%;
}

.menulist li {
	padding-bottom: 10px;
}
#menu_button {
	float: right;
	padding-right: 20px;
	margin-top: 40px;
}
#menu_button a {
	text-decoration: none;
	border: none;
}
#menu_button a img {
	border: none;
}

/* location Page */

#locationaddress {
	clear: both;
	float: left;
	width: 410px;
	margin-bottom: 10px;
	padding: 10px;
	background-color: #000000;
}

#locationaddress p {
	margin-top: 10px;
}


#locationmap {
	float: right;
	width: 410px;
	background-color: #000000;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 25px;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

#locationemail {
	clear: both;
	float: left;
	width: 410px;
	margin: 0;
	padding: 10px;
	background-color: #000000;
}

#locationevents {
	float: right;
	width: 380px;
	padding: 10px;
	background-color: #000000;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 30px;
}

#locationevents a {
	color: #ffffff;
}

label {
	text-align: right;
	clear: left;
	float: left;
	width: 10em;
	margin-right: 5px;
	position: relative;
	color: #ffffff;
}

fieldset ol {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	list-style-type: none;
}
fieldset li {
	padding-bottom: 1em;
	position: relative;
}

#map {
	float: right;
}

#map_canvas {
	width: 400px;
	height: 300px;
	margin-top: 20px;
	text-align: center;
	color: #ce2424;
}

#forms {
	clear: both;
	width: 800px;
	margin: 120px auto 0 auto;
	padding-top: 50px;
}
	



/* footer and footer pages */

#copyl {
	float: left;
	text-decoration: none;
}

#copyr {
	float: right;
	text-decoration: none;
}

#copyright a {
	text-decoration: none;
	color: #ffffff;
}


/* Events */

.events_thumbs {
	padding-right: 10px;
	margin-top: 10px;
}
.event_date {
	color: #cc0000;
	font-size: 120%;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}
p.event_description {
	padding-top: -20px;
	margin-top: -20px;
}

.ticket_links {
	color: #fff;
}



/* Bookmark */

#index2 {
	width: 880px;
	padding: 0;
	color: #ffffff;
	margin-top: 200px;
	margin-right: 0;
	margin-bottom: 20px;;
	margin-left: 0;
}

/** AB test styles **/

#ab_test {
	width: 876px;
	height: 289px;
	background-image: url(images/ab1_bg.png);
	background-repeat: no-repeat;
	background-position: left top;	
	margin-top: -20px;
	padding: 0;
}
#ab_test p {
	font-size: 120%;
	line-height: 150%;
	padding-top: 100px;
	margin-left: 20px;
	width: 350px;
}
#ab_test img {
	margin: 20px 0 0 20px;
}
#ab_test img a {
	border: none;
	text-decoration: none;
}