@import url('reset.css');
@import url('color.css');
@import url('typography.css');

/* CSS LAYOUT
---------------------------------------------- */

body { padding-top: 269px; }

hr { display: none; }

#siteNav, #content { position: relative; float: left; }


/* BRANDING
---------------------------------------------- */

#branding h1 a { width: 445px; height: 300px; z-index: 1000; position: absolute; top: 0; left: 6px; display: block; text-indent: -9999px; }

#branding p.slogan,
#branding a.catering { position: absolute; display: block; text-indent: -9999px; }

#branding p.slogan { top: 0; left: 544px; width: 215px; height: 220px; }
#branding a.catering { width: 235px; height: 79px; top: 69px; left: 601px; }

/* SITE NAVIGATION
---------------------------------------------- */

#siteNav { width: 194px; margin: 0 10px 0 20px; }
#siteNav h2 { position: absolute; left: -9999px; }
#siteNav ul { position: relative; margin: 9px; padding: 25px 0 150px 3px; }
#siteNav ul li { position: relative; height: 70px; }
#siteNav li a { display: block; position: absolute; width: 171px; height: 70px; top: 0; left: 2px; text-indent: -9999px; }
#siteNav p { position: absolute; bottom: 20px; width: 120px; height: 120px; left: 38px; text-indent: -9999px;	 }



/* CONTENT
---------------------------------------------- */

#content { width: 740px; padding: 106px 0 57px; margin-top: -49px; display: block; min-height: 524px; }

#content h2, #content h3, #content ul { margin: 12px 40px 0; }
#content h2 span.roots, #content h2 span.hours, #content h2 span.contact { display: block; width: 100%; height: 30px; text-indent: -9999px; }
#content h2 span.roots { margin-left: -20px; }
#content blockquote { padding-bottom: 40px; }

#content p { margin: 12px 40px; }

#content cite { position: relative; display: block; margin: 24px 0 0 215px; }




/* VCARD
---------------------------------------------- */

#content .vcard { z-index: 1000; position: absolute; display: block; top: 0; left: 0; width: 740px; height: 70px; }
#content .vcard .adr { position: absolute; top: 20px; left: 40px; }
#content .vcard .tel, #content .vcard .email { position: absolute; left: 225px; }
#content .vcard .tel { top: 20px; }
#content .vcard .email { top: 2.67em; }


/* STORE HOURS
---------------------------------------------- */

.storeHours { margin: 0 40px; padding: 42px 0 0; }
#content .storeHours ul, #content .storeHours p { margin-left: 0; }
#content h2 span.hours { margin-left: -60px; }
.storeHours ul { height: 213px; margin: 12px 0; }
.storeHours ul li { position: relative; left: 192px; width: 80%; }

/* MENU
---------------------------------------------- */

table, caption { margin: 0 auto; }


/* CONTACT
---------------------------------------------- */

#content h2 span.contact { margin-left: -20px; }
#content form { clear: left; }
fieldset#contact { margin: 24px 0 0 40px; }
fieldset#contact label { display: block; width: 95px; float: left; }

fieldset#contact ol { overflow: hidden; }
fieldset#contact li { float: left; margin-bottom: 1em; width: 100%; }

fieldset#contact input { width: 200px; }
fieldset#contact textarea { width: 350px; height: 150px; }

fieldset.submit button { position: relative; left: 135px; padding: 6px; }


/* FORM STYLES
---------------------------------------------- */

input, select, textarea { padding: 3px; }

/* QUICK NOTE
---------------------------------------------- */

#content div.qnote { margin: 0 40px 24px; }
#content div.qnote p { margin: 0; padding: 12px; }

/* MENU CONTAINER
---------------------------------------------- */

.menuContainer { margin: 0 40px; text-align: center; }
#content .menuContainer h2 { margin: 1em 0; height: 50px; }
#content .menuContainer h2 span { position: relative; top: 10px; }
#content .menuContainer h2.menu { margin: 0 0 10px 0; height: 29px; text-indent: -9999px; }
#content .menuContainer h2.catering { margin: 0 0 10px 0; height: 33px; text-indent: -9999px; }
#content .menuContainer ul { margin: 0; }
#content .menuContainer ul.menuNav { overflow: hidden; width: 60%; margin: 24px auto 0; }
#content .menuContainer ul.menuNav li { float: left; text-align: center; width: 50%; }
#content .menuContainer .specialty { padding-left: 200px; height: 221px; text-align: right; }
#content .menuContainer p.disclaimer { margin: 0; padding: 24px 0 80px; }

#content ul.addingredients { width: 80%; margin: 0 auto 48px; overflow: hidden; }
ul.addingredients li { float: left; width: 50%; }


/* MENU TABLE STYLES
---------------------------------------------- */

table { empty-cells: hide; width: 100%; margin: 0 auto; text-align: left; }
caption { padding: 1em 0 1em 0; text-align: center; }
caption.top { caption-side: top; }
caption.bottom { caption-side: bottom; }

colgroup.twoCol { width: 92%; }
colgroup.threeCol { width: 84%; }
colgroup.fourCol { width: 76%; }

colgroup.halfColLeftItem { width: 45%; }
colgroup.halfColLeftData { width: 10%; }
colgroup.dataCol { width: 8%; }

.spacer { height: 2em; }

/* SIDEBAR
---------------------------------------------- */

.sidebar { position: relative; z-index: 2000; float: right; width: 27%; right: 30px; margin: 0; }
.sidebar .advertise { text-align: center; }
.sidebar .advertise a { margin: 24px auto; width: 180px; height: 400px; background-repeat: no-repeat; background-position: 0 0; cursor: pointer; display: block; text-indent: -9999px; }

.sidebar .search { margin-bottom: 12px; }
.sidebar .search input { width: 100px; float: left; }
.sidebar .search input.search { width: 75px; margin-left: 6px; }

.sidebar .search legend span { position: absolute; top: -9999px; }
#content .sidebar h3 { margin: 0; }
#content .sidebar ul { margin: 12px 24px; list-style: disc inside; }
#content .sidebar li { margin-bottom: .25em; }


/* NEWS
---------------------------------------------- */

div.news { width: 70%; float: left; }
#content div.news h2.archive { margin-bottom: 24px; }

/* NEWS NAVIGATION
---------------------------------------------- */

div.news .nav { position: relative; z-index: 3000; overflow: hidden; margin: 0 40px; }
div.news .nav .new { float: right; }
div.news .nav .old { float: left; }


/* NEWS POST
---------------------------------------------- */
 
.news .post, #content div.nav { margin: 0 40px 20px; overflow: hidden; }
#content .post h2, #content .post h3, #content .post p, #content blockquote, #content .post ul, #content .post ol { margin: 0; }
#content .post h2 { margin-bottom: 12px; }
#content .post p { margin-bottom: 24px; }
.post img.alignright { float: right; margin-bottom: 24px; }

/* SITEMAP
---------------------------------------------- */

.siteMap { width: 38%; padding-bottom: 1in; }
#content .siteMap ul { list-style: circle inside; margin-left: 60px; }


/* COMPANY INFO
---------------------------------------------- */

#companyInfo { position: relative; float: right; padding-bottom: 2in; right: 14px; width: 740px; height: 70px; }
#companyInfo ul { position: absolute; z-index: 2000; top: 25px; left: 40px; } 
#companyInfo ul li:first-child { padding: 0 8px 0 0; }
#companyInfo ul li { float: left; padding: 0 8px; }
#companyInfo p { position: absolute; top: 20px; right: 40px; }

/* EXTRA STYLES
---------------------------------------------- */

#extraStyle1, #extraStyle2 { z-index: 2000; width: 150px; height: 180px; }
#extraStyle1 { position: absolute; top: -24px; right: -22px; }
#extraStyle2 { position: relative; top: -88px; left: -20px; }