/* ==== MAIN.CSS ==== */
	/* ==== Code by Justin Callaghan and VinazDesignz for Vero Beach City Tavern http://citytavernvero.com ==== */

	body {
		font-family: Cochin, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
		font-size: 76%;					/* 76% base font size for better cross-browser consistency */
		margin: 0;
		padding: 0;							/* undo any default margin and padding */
		text-align: center;			/* center page for IE hack */
		background: url(images/gradient.bg.gif) center repeat-y;	/* set main gradient bg image */
		color: black;
	}
	#page {								/* define main block for page layout */
		margin: 0 auto;			/* standard method to center page content */
		text-align: left;		/* undo text centering caused by IE hack */
		position: relative;	/* child elements will be positioned relative to the page div rather than body */
		width: 974px;				/* fixed width, fits 1024 x 768 screens */
		font-size: 1.5em;		/* bump the font size back up */
		background: #fff;		/* standard white background */
		}

	/* ==== HEADER RULES ==== */	
	
	#header {							/* define block for header */
		width: 974px;				/* fills entire width of page */
		height: 120px;			/* too short for entire header.bg image, lower divs will show the rest */
		text-align: center;
		background: url(images/header.bg.jpg) center 10px no-repeat;	/* set header.bg image */
	}
	#header h1 {
		margin: 0;							/* remove default margins on header */
		text-indent: -9999px;		/* hide text for image replacement */
	}
	#header #address {				/* define block for address */
		width: 400px;
		position: absolute;			/* setting position to absolute lets div overlap other elements */
		top: 70px;							/* move down past "Welcome" portion of header.bg */
		left: 285px; 						/* visually center address div within header */
		font-family: "Century Gothic" sans-serif;
		font-size: .9em;
		text-align: center;
	}
	#address a:link, #address a:visited { 	/* styles for address link to Google Maps */
		color: inherit;         							/* leave the color of the address link alone */
		text-decoration: none;  							/* remove default link underline */
	}
	#address a:hover {
		background-color: #FFFF99;	/* highlight address link with yellow on mouseover */
	}

	/* ==== SITE NAVIGATION ==== */	

	#sitenav {									/* define block for main site navigation */
		width: 200px;
		position: absolute;				/* setting position to absolute lets div overlap other elements */
		padding-top: 220px;				/* make room for lower left portion of header.bg */
		font-family: "Century Gothic", sans-serif;
		font-size: .9em;
		font-weight: bold;
		background: url(images/header.bg.jpg) -13px -110px no-repeat;  /* display lower left portion of header.bg above the links */
	}
	ul, li { 
		list-style: none;        /* remove bullets from list items */
		padding: 0;  margin: 0;  /* zero out any default padding and margins */
		text-align: center;      /* center links within their blocks */
	}
	#sitenav li a {
		text-decoration: none;   /* remove default link underlines */
		line-height: 1.25em;     /* adjust leading for more room between lines */
		display: block;          /* make entire block hoverable and clickable */
		padding: .6em .5em .5em; /* add space around link text to enlarge block */
	}
	#sitenav li a:hover {
		color: white;
		background-color: #0b5786;
		text-shadow: #000000 3px 3px 0;	/* shadow only works in Safari */
	}
		/* highlight current page in site navigation (if the page's body id = the nav's li id) */
		body#about #sitenav li#nav-about a,
		body#specials #sitenav li#nav-specials a,
		body#brunch #sitenav li#nav-brunch a,
		body#starters #sitenav li#nav-starters a,
		body#pizza #sitenav li#nav-pizza a,
		body#entrees #sitenav li#nav-entrees a,
		body#wine #sitenav li#nav-wine a,
		body#cocktails #sitenav li#nav-cocktails a,
		body#livemusic #sitenav li#nav-livemusic a,
		body#events #sitenav li#nav-events a,
		body#links #sitenav li#nav-links a
	 {
		color: #1B5100;
		background-color: white;
		text-shadow: #009900 2px 2px 0;
		border-top: solid 2px #0b5786;
		border-bottom: solid 2px #0b5786;
	}
	a:link, a:visited {
		color: #000033;	/* set styles for micellaneous links */
	}
	a:hover {
		background-color: #ffffbb;
	}
	a img {
		border: none;
	}
	
	/* ==== PAGE NAVIGATION ==== styles for in-page links to menu sections */
		
	#pagenav {
		width: 100%;
		font-weight: bold;
		margin: 1.5em 0;
		line-height: 1.75em;
	}
	#pagenav li {
		display: inline;	/* make list items run side by side instead of only one per line */
		font-family: "Century Gothic", sans-serif;
		padding: 0 .25em;
	}
	#pagenav li a {
		color: white;
		white-space: nowrap;	/* keep multi-word links on same line */
	}
	#pagenav li a:hover {
		color: #ffff99;
		background-color: transparent;	/* undo link bg highlight */
	}
	
	/* ==== MAIN CONTENT DIV ==== */	
	
	#content {
		position: relative;		/* like absolute but retains original footprint */
		left: 200px;					/* push content block past site navigation */
		width: 775px;
		padding: 1.25em 0;
		font-size: .8em;
		background: url(images/header.bg.jpg) -213px -110px no-repeat;	/* display lower right portion of header.bg */
	}

	/*	==== #INBETWEEN is the div where page headers go, in the
			==== middle of the main header with the City Tavern sign
			==== to the left and the Sangria bottle to the right ====  */
	#inbetween {
		width: 370px;						/* maximum width for page header images */
		min-height: 198px;			/* minimum height needed to push following sections clear of header.bg */
		margin: 0 0 0 112px;		/* push block over past City Tavern portion of bg */
		text-align: center;
		font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
		background: #0b5786;
	}
	#inbetween h1 {				/* main header for page title, to be replaced with image */
		margin: 0;
		padding-bottom: 25px;
		width: 370px;
		text-indent: -9999px;
	}
	#inbetween h4 {				/* secondary headers for top area */
		font-size: 1.15em;
		margin: 0;
		color: black;
	}
	#inbetween p {
		margin: 0 0 .5em 0;
		padding: 0 .25em;
		font-size: 1.33em;
		color: black;
	}
	#inbetween em {
		font-weight: bold;
	}
	
	/* ==== PAGE HEADERS image replacement for headers on each page ====  */

	#about #inbetween h1 {
		position: absolute;
		height: 47px;
		margin: 0 0 5px 0; padding-bottom: 0;
		overflow: visible;
		border-top: 40px solid #0b5786;
		background: url(images/about.bg.gif) 0 10px no-repeat;
	}
	#specials #inbetween h1 {		/* set background header image for Specials page */
		height: 198px;
		background: #0b5786 url(images/specials.bg.gif) -20px 0 no-repeat;
	}
	#starters #inbetween h1 {		/* set background header for Starters page */
		height: 198px;
		background: #0b5786 url(images/starters-menu.bg.jpg) no-repeat;
	}
	#pizza #inbetween h1 {
		height: 242px;
		background: #0b5786 url(images/pizzas.bg.jpg) no-repeat;
	}
	#wine #inbetween h1 {				/* set background header for Wine List page */
		height: 262px;
		background: #0b5786 url(images/wine.bg.jpg) no-repeat;		
	}
	#cocktails #inbetween h1 {	/* set bg header for cocktails page, et cetera */
		width: 370px; height: 123px;
		background: #0b5786 url(images/cocktails-header.bg.jpg) no-repeat;	
	}
	#livemusic #inbetween h1 {
		padding-top: 80px;
		width: 370px; height: 61px;
		background: #0b5786 url(images/livemusicdeco.jpg) no-repeat 10px;
	}
	#entrees #inbetween h1 {
		padding-top: 80px;
		width: 370px; height: 61px;
		background: #0b5786 url(images/entreesdessertsdeco.jpg) no-repeat 10px;
	}
  #brunch #inbetween h1 {
		width: 370px; height: 249px;
		background: #0b5786 url(images/brunch.bg.jpg) no-repeat -9px 10px;
  }
	#events #inbetween h1 {
	  padding-top:  80px
		width: 370px; height: 141px;
		background: #0b5786 url(images/eventzdeco.jpg) no-repeat 10px;
  }
	#links #inbetween h1 {
	  padding-top: 80px;
		width: 370px; height: 100px;
		background: #0b5786 url(images/Linksdeco.jpg) no-repeat 10px 50px; 
	}
	/* ==== ABOUT US ==== page-specific rules ====  */
	
	#about #inbetween {
		height: 17em;								/* make it tall enough to reach the bottom of the main header bg image */
		background: white;
	}
	#about #inbetween p.roudly {
		padding-top: 88px;  				/* About page has text up top, push first paragraph down past header image */
	}
	#about .menusection {
		border-top: 20px solid #0b5786;		/* use wide blue border on About page to visually separate heading from content */
	}
	#about #wireless {   								/* rules to get the WIRELESS HOTSPOT image over blue between sections */
		text-align: center;
		background-color: #0b5786;
		background-image: none;
		padding: 1.5em 0;
	}
	#about #wireless h4 {  							/* image replacement */
		margin: 0 auto;
		width: 278px; height: 44px;
		text-indent: -9999px;
		background: url(images/wifi.jpg) no-repeat;
	}
	
	/* ==== COCKTAILS ==== page-specific rules ====  */
	
	#cocktails h3#ladiesnite {
		font-size: 175%;
		text-align: center;
	}
	#cocktails h5#happyhour {
		float: right;
		margin: -.75em 1em 0 0;
	}
	#cocktails #draftprices {
		float: right;					/* float the special prices to the right of the draft image */
		margin-top: 2em;			/* push it down into place */
	}
	#cocktails #draftprices h4 {
		font-size: 200%;
	}
	#cocktails #draftprices dl {
		font-family: "Century Gothic", sans-serif;
		font-weight: bold;
		width: 400px;
	}
	#cocktails #draftprices dt {
		font-weight: bold;
	}
	
	/* ==== LIVE MUSIC ==== page-specific rules ====  */	
	
	#livemusic #inbetween {
		background: #0b5786;
	}
	#livemusic #prestage h2 {			/* h2 contains Ben's header photo and text link */
		margin: 0 1em;
		border: 2px solid white;		/* invisible border necessary for border on hover */
		font-style: normal;
		background-color: #cdc6ab;	/* color sampled from header photo */
	}
	#livemusic #prestage h2 img {
		display: inline;
		padding-left: .5em;
		vertical-align: middle;
	}
	#livemusic #prestage h2 a {
		text-align: left;
		text-decoration: none;
		padding: .25em;
	}
	#livemusic #prestage h2 a:hover {
		background-color: transparent;					/* IE makes bg hover area too big, so take it off */
	}
	:root #livemusic #prestage h2 a:hover {		/* now put it back but hide from IE */
		background-color: #ffffbb;
	}
	#livemusic #prestage p#benbio {
		font-size: 115%;
	}
	#livemusic #prestage img#ben-guitar {
		float: right;														/* float second photo of Ben to the right of his bio */
	}
	#livemusic img#ben-faces {
		float: right;
		padding: 0 .75em;
	}
	#livemusic .init {												/* drop cap effect for Music page part 2 */
		font-size: 150%; line-height: 100%;			/* bigger text, same leading */
		font-weight: bold;
		text-transform: uppercase;
	}
	
	/* ==== MENU SECTIONS ==== general rules for all menu pages ====  */	
		
	.menusection {					/* define block for menu listings */
		width: 568px;
		padding: 0 0 1.5em 0;
		margin-left: 10px;
		color: white;
		background: #0b5786;
		border-bottom: 20px solid #0B5786
	}
	.menusection h2 {				/* styles for main menu headings */
		font-size: 2em;
		font-style: italic;
		text-align: center;
		margin: 0 0 .25em 0;
		padding: 0;
	}
	.menusection h4 {				/* styles for secondary menu headings */
		font-size: 1.5em;
		font-weight: normal;
		font-style: italic;
		margin: 1.15em 0 -.5em 0;
		padding: 0 0 0 20px;
	}
	.menusection h5 {
		font-size: 1.33em;
		text-align: center;
	}
	h5 {
		font-family: "Century Gothic", sans-serif;
	}
	.menusection p {
		text-align: center;
	}
	dl {										/* define styles for menu items */
		padding: 0 20px;			/* dl = definition list; container block for dt and dd */
		color: white;
	}
	dt {										/* dt = definition term; title of menu item */
		font-family: "Century Gothic", sans-serif;
		font-weight: normal;
		padding-right: 80px;	/* keep from bumping into prices */
		border-bottom: 1px solid #ccc;	/* thin white line underneath */
	}
	dd.desc {								/* dd = definition description; description of menu item */
		font-size: 1.2em;
		font-style: italic;
		line-height: 100%;
		margin: .25em 0 0 1.5em;
		padding-right: 80px;	/* keeps description from flowing all the way over underneath price */
	}
	dd.price {							/* dl's can contain multiple dd's; use a second one for item price */
		font-family: "Century Gothic", sans-serif;
		float: right;					/* float it all the way right */
		margin-top: -1.5em;		/* negative top margin moves it up in line with dt title */
		margin-left: 0;
		width: auto;					/* this width rule is probably unnecessary, I forget why it's here */
	}
	.clickable {						/* class for making menu items appear as clickable links */
		cursor: pointer;			/* (class is dynamically added to appropriate dt elements using javascript) */
	}
	
	/* ==== FAQ BLOCKS ==== for informational pages, black text on white blocks over blue ====  */	
	
	.faq {
		font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
		color: black;
		background-color: white;
		text-align: center;
		padding: 2em 0 0;
		border-left: 60px solid #0b5786;	/* wide blue border on either side */
		border-right: 60px solid #0b5786;	/* blends seamlessly with header bg image */
	}
	:root .faq {			/* use a bg image to create rounded top corners but hide from IE which misplaces it */
		background: white url(/images/top-round.bg.gif) 0 0 no-repeat;
	}
	.faq h3, .faq h4 {				/* styles for headers and other common elements  */
		font-size: 1.5em;
		font-weight: bold;
		font-style: normal;
		margin: 0 0 10px;
		padding: .25em 0;
	}
	.faq h3 {
		font-size: 2.15em;
		margin: 0 0 .1em 0;
		padding-left: 0;
	}
	.faq h3 a, .faq h4 a {
		text-decoration: none;
	}	
	.faq a img {
		display: block;			/* keeps hover from showing thru image links */
	}
	.faq p, .faq ul {
		margin: 0;
		padding: 0 .75em 1.5em; 
	}
	.faq ul {
		font-family: "Century Gothic", sans-serif;
		margin-top: -.825em;
	}
	em.time {       			/* these are useful for marking up hours and times */
		font-weight: bold;
		font-style: normal;
		white-space: nowrap;
	}
	em.time em {    			/* wrap 'am' or 'pm' in a second <em> for small-caps */
		font-variant: small-caps;
		font-style: normal;
	}