/***********************************/
/*                                 */
/*    Food Perfected Stylesheet    */
/*                                 */
/***********************************/


html, body {
	margin: 0px;
}



/* text styles */

body, a, input, select, textarea { 
	color: #7e7e7e;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

a { color: #dc6c31; }
a:hover { color: #333; }



/* other styles by tag */

a img { border: none; }

td { vertical-align: top; }

ul { 
	margin: 0px; 
	padding: 0px; 
}

form { margin: 0px; }

input, select, textarea {
	border: 1px solid #bbb!important;
	background: #fff!important;
}




/* classes & ids */


/* reused-all-over-the-place classes */

.fporange { /* various elements: the fp orange text */
	color: #dc6c31;
}

.dark1 { /* various elements: darker grey text */
	color: #444;
}

.spacer { /* divs: spacer divs */
	width: 0px;
	height: 0px;
	font-size: 0px;
	line-height: 0px;
}

.error { /* various elements: error messages */
	color: #990000;	
}

.borderred { /* form fields: add a red border when we have an error */
	border: 1px solid #c24e4e!important;
}

.star { /* spans: stars next to erroneous form fields */
	color: #990000;
	font-size: 14pt;
	vertical-align: middle;
} 
.staroff { /* spans: stars next to required form fields (before error) */
	font-size: 12pt;
	vertical-align: middle;
}

.heading1 { /* various elements: contain dark large spaced headings */
	font-size: 10.5pt;
	letter-spacing: 2px;
	color: #4f4f4f;
	font-weight: normal;
}

.heading2, .heading3 { /* various elements: contain dark smaller spaced headings */
	font-size: 9.5pt;
	letter-spacing: 1px;
	color: #4f4f4f;
	font-weight: normal;
}
.heading2 { /* (headings 2 and 3 are the same except 2 is centered) */
	text-align: center;
}

.hr { /* divs: fake hrs */
	height: 1px;
	font-size: 0pt;
	margin: 0px;
	border-top: 1px solid #ccc;
}




/* individual classes & ids */


/* stuff on the index template */

#main { /* table: contains all page content & copyright */
	width: 100%;
}
#maintd1 { /* td: lefthand td of #main- contains all page content */
	width: 100%;
}
	
#pageall { /* div: set width div inside #maintd1- contains all page content */
	width: 945px;
	margin: 25px auto 50px auto;
}


#copyright { /* img: the copyright on the right of the page */
	margin: 300px 0px 0px 8px;
}


#noscriptmsg { /* div: contains the noscript message under the navs */
	width: 75%;
	margin: 0px auto 15px auto;
	padding: 10px;
	border: 2px solid #dc6c31;
	background: #f5d7c8;
	color: #333;
	text-align: center;
}


#loadingbg { /* table: contains changable content and loading graphic */
	width: 100%;
	background: url('grafix/loading.gif') center 180px no-repeat;
}
#loadingbgtd {
	height: 405px;
}

#contentswap { /* div: contains ajax swappable content pt1 (the template) */
	background: #fff;
	width: 100%; /* (width or height must be set for IE7- to fade) */	
	/* note: must not have css opacity (to avoid triggering IE-fails-to-render-opacity-on-large-elements bug) */
}


#caldiv1 { /* div used to create JS calendars */
	position: absolute; 
	visibility: hidden; 
	background-color: white;
}


/* top bit (banner & contacts) */

#topright { /* a: contains contact info in top right of the banner */
	display: block;
	float: right;
	text-align: right;
	color: #7e7e7e;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	line-height: 25pt;
}

#trlocation { /* span: contains the "catering los angeles" bit in the top right */
	font-size: 12pt;
	letter-spacing: 1px;
}

#trphone { /* img: the small phone in the top right */
	vertical-align: middle;
}

#trphoneno1 { /* span: the first phone number in the top right */
	font-size: 12pt;
	font-style: italic;
}

#trofficetext { /* span: "office" text in the top right */
	font-size: 11pt;
	letter-spacing: 1px;
}

#trphoneno2 { /* span: the second phone number in the top right */
	font-size: 11pt;
	font-style: italic;
}


#title { /* img: the food perfected banner in the top left */
	margin: 20px 0px 18px 8px;
}


/* yellow bars (top & bottom) */

.yellowbar { /* divs: the top and bottom fading yellow bars */
	background: #e4ef27;
	height: 7px;
	font-size: 0px;
}

#topyellowbar { /* div: the top yellow bar (under the banner) */
	margin: 0px 50px 14px 0px;
	text-align: right;
	position: relative; /* (relative position as container for #menuarr) */
}

#menuarr { /* img: the arrow in #topyellowbar that indicates current page */
	position: absolute;
	left: 10px; /* (will be changed with script) */
	margin-top: -8px;
}

#botyellowbar { /* div: the bottom yellow bar */
	margin: 25px 0px 0px 50px;
	text-align: left;
}	


/* navs */

#nav { /* table: the navs under the banner */
	margin-bottom: 20px;
}
#nav td {
	padding-bottom: 10px;
}

.navmainlink { /* a: all main (top level) links in #nav */
	font-size: 9pt;
	letter-spacing: 0.5px;
	text-decoration: none;
	display: block; /* (so JS can get the width) */
}

.menudivider { /* imgs: the small grey lines dividing up the menu links */
	margin: 0px 8px;
}

.subnav { /* divs: contain the dropdown submenus */
	position: absolute;
	z-index: 1000; /* (place on top of other relative / abs. positioned elements) */
	margin-top: 22px;
	width: 160px;
	padding: 4px 0px;
	display: none; /* (hide initially- JS shows) */
	border: 1px solid #e0b59e;
	background: #fff;
}
.subnav a {
	display: block;
	padding: 5px 6px;
	text-decoration: none;
}
.subnav a:hover {
	background: #e4ef27;
}




/* stuff that appears on the templates (content/templates) */

/* rounded boxes (white green-grey bordered ones) */

.rbox1top { 
	width: 100%;
	background: url('grafix/rbox1/top.png') top left repeat-x;
}
.rbox1left { 
	height: 100%;
	background: url('grafix/rbox1/left.png') top left repeat-y;
}
.rbox1right { 
	background: url('grafix/rbox1/right.png') top right repeat-y;
}
.rbox1bot { 
	background: url('grafix/rbox1/bot.png') bottom left repeat-x;
}

/* rbox1 hover version for the clickable ones (pale orange) */

.rbox1top_on { 
	width: 100%;
	background: url('grafix/rbox1_on/top.png') top left repeat-x;
}
.rbox1left_on { 
	height: 100%;
	background: url('grafix/rbox1_on/left.png') top left repeat-y;
}
.rbox1right_on { 
	background: url('grafix/rbox1_on/right.png') top right repeat-y;
}
.rbox1bot_on { 
	background: url('grafix/rbox1_on/bot.png') bottom left repeat-x;
}


.mainbkt { /* table: full page rounded boxes (.rbox1s)- 2 configurations so far- 1 & 1-4 */
	width: 850px; /* (nb, if changing this, don't forget to change fullHBktWidth on scripts file) */
	margin-left: 20px;
}
.subnavtop { /* td: lefthand .rbox1top td in 1-4 .mainbkts (nb, must be below .rbox1top to override) */
	width: 150px;
}
.bktctrtd { /* td: center td(s) of .mainbkts */
	height: 380px; /* (nb, if changing this, don't forget to change fullHBktHeight on scripts file) */
	background: #fff;
}
.mainbktgap { /* td: the td between the subnav and main section in 1-4 .mainbkts */
	padding: 0px 10px;
}

#subnavspacer { /* div: the .spacer div at the top of the td containing the subnav */
	width: 150px;
}


#contentloadbg { /* table: outer table around #centercontent- creates loading graphic */
	width: 100%;
	background: url('grafix/loading.gif') center 180px no-repeat;
}
#contentloadingbgtd {
	height: 200px; 
}

#centercontent { /* div: contains ajax swappable content pt2 (the actual page content) */
	background: #fff;
	width: 100%; /* (width or height must be set for IE7- to fade) */	
}




/* stuff that appears on the lefthand subnav files (content/subnavs) */

.leftsubnavtitle { /* div: contains the lefthand subnav title */
	margin: 22px 0px 0px 8px;
	font-size: 10.5pt;
	letter-spacing: 1px;
}

.leftsubnavcontent { /* div: contains the lefthand subnav menu links */
	padding: 12px 0px;
}

.snl, .snl_on { /* a: lefthand subnav links */
	display: block;
	padding: 5px 0px 5px 32px;
	text-transform: uppercase;
	font-size: 9pt;
	letter-spacing: 0.5px;
}
.snl_on { /* a: on (grey with pointer) class for snls (swapped with JS) */
	color: #555;
	text-decoration: none;
	background: url('grafix/leftsubnavarr.png') 10px 6px no-repeat; 
	cursor: default;
}

.snl2cont { /* divs: contain left subnav level 2 links (e.g. on testimonials - events) */
	height: 0px;
	overflow: hidden;
	padding-left: 15px;
}




/* stuff that appears on the content pages (content/pages) */

.bkttitle { /* h1s: contains the titles in .mainbkts */
	margin: 22px 0px 0px 10px;
	font-size: 10.5pt;
	letter-spacing: 2px;
	color: #4f4f4f;
	font-weight: normal;
}

.bktcontent { /* divs: contain the page content in .mainbkts (below the title) */
	padding: 20px 20px 12px 20px;
	line-height: 15pt;
}

.toplink { /* divs: contain top of page links on longer pages */
	padding: 12px 10px 0px 0px;
	text-align: right;
}

.botpagelinks { /* divs: contain the pagination links at the bottom of some pages */
	padding-top: 15px;
	text-align: center;
}


/* (pages that have pdf menus- cafe and catering sections) */

.pdfmenustitle { /* h2s: the seated / buffets etc headings above the sections of pdfs (also have class .heading1) */
	margin: 10px 0px 0px 0px;
	text-align: center;
}

.pdfformatbit { /* div: the "in pdf format" bit under some .pdfmenustitles */
	margin: 5px 0px 5px 0px;
	text-align: center;
}

.pdfmenustable { /* tables: contain the pdf menus */
	margin: 0px auto;
}
.pdfmenustable td {
	text-align: center;
	width: 70px;
}




/* stuff that appears on individual pages */

/* homepage */

#homemaintable { /* table: the main homepage table- contains all 4 rounded boxes & righthand pics */
	width: 100%;
}
#hometd1, #hometd4 { /* tds: 2 lefthand tds in #homemaintable- contain the 2 lefthand buckets */
	padding: 0px 30px 0px 20px;
}
#hometd3 { /* td: righthand td in #homemaintable- contains the 2 righthand images */
	width: 100%;
	padding-right: 2px;
	text-align: right;
}

.homebkt { /* tables: the 4 buckets on the homepage */
	width: 310px; /* (nb, if changing, also change on js file) */
	background: #fff;
}
.tophomebkt { /* tables: extra class for the 2 top .homebkt tables */
	margin-bottom: 30px;
}
.homebktctrtd { /* tds: the center tds of all .homebkts */
	height: 170px; /* (nb, if changing, also change on js file) */
}
 
.homebkttitle { /* divs: contain the titles for the homepage buckets (nb, also have class .fporange) */
	margin: 22px 0px 0px 10px;
	font-size: 10.5pt;
	letter-spacing: 1px;
}

.homebktcontent { /* divs: contain the content in buckets (bellow the .homebkttitles) */
	padding: 12px 20px;
	line-height: 16pt;
}
.homebktlist { /* uls: the lists in various homepage buckets */
	margin-left: 15px;
}
.homebktmorearr { /* imgs: the more arrows in the bottom right of .homebkts */
	position: absolute;
	margin-top: -28px;
	margin-left: -30px;
}

#homepic1 { /* img: the top image on the right of the homepage */
	margin-bottom: 25px;
}



/* contact page */

#contactinfo { /* div: contains contact emails & address */
	padding-left: 20px;
}
#contactlist { /* ul: the list of emails on the contact page */
	margin: 0px 0px 40px 10px;	
}
#contactlist li {
	margin-bottom: 8px;
}



/* testimonials pages (all pages in the testis section) */

.testi { /* divs: contain testimonials */
	padding: 25px 10px;
	border-bottom: 1px solid #ccc;
}
.toptesti { /* div: top .testi div */
	padding-top: 15px;
}

.testibr { /* br: breaks in the testimonials divs (except the author bit) */
	margin: 16px;
}

.testiauth { /* divs: contain testimonial authors (also have class .dark1) */
	padding-top: 10px;
}



/* links page */

#linkscontent { /* div: contains all directly-copied links page content */
	padding-left: 25px;
}



/* quote page */

.calendar { /* small calendar (clickable to pop up main JS calendar) */
	vertical-align: middle;
}

.qformlefttd { /* tds: all lefthand tds in the quote form */
	text-align: right;
}



/* catering pages (multiple) */

#samplemenusmainheading { /* h3: "sample menus" text (also has class .heading1) */
	margin: 20px 0px 30px 0px;
	text-align: center;	
}

.samplemenuheading { /* a: "appetizers" etc headings above each menu */
	display: block;
	margin: 10px 0px 5px 0px;
	text-align: center;
	text-decoration: none;
}

.samplemenu { /* divs: contain each menu (e.g. appetizers) */
	text-align: center;
	font-size: 9.5pt;
	height: 0px; /* (don't do this with JS as should never be full (IE won't fade large elements bug) */
	overflow: hidden;
}



/* catering- in home page */

#inhomeservicestitle { /* h2: services offered heading (also has class .heading1) */
	margin: 0px;
}

#inhomeservices li { /* ul: the list of services offered */
	margin: 10px 0px 25px 20px;
}

.inhomeservicesheading { /* h2: the shop and chop etc headings in the services list (also has class .heading3) */
	margin: 0px 0px 10px 0px;
}


.alaminutemenu { /* divs: contain the a la minute menus */
	font-size: 9pt;
}

.solomenu { /* tables: contain the so lo cal menus */
	width: 75%;
	margin: 0px auto;
}
.solomenu td {
	padding-top: 12px;
	text-align: left;
	font-size: 9pt;
}	
.solomenurighttd { /* tds: all righthand tds of .solomenu tables */
	padding-left: 40px;
}
.solomenu .solomenutotal { /* tds: bottom total td of .solomenu tables */
	padding-top: 18px;
	text-align: center;
}



/* catering- corporate page */

.corpmenu { /* divs: contain the menus on the corporate page */
	width: 75%;
	margin: 0px auto;
	padding-top: 8px;
	font-size: 9pt;
}

.corpsaladdressings { /* span: corporate salad dressings section in the salads & soups menu */
	font-style: italic;
}



/* about page */

.aboutheading { /* h2s: the name headings on the about page (also have class .heading1) */
	margin: 0px;
}

.aboutpiccont { /* divs: contain the people photos on the about page */
	margin: 5px 15px 15px 15px;
	padding: 8px 0px;
	border: 1px solid #ccc;
	text-align: center;
}	
#mikpic { /* .aboutpiccont div: contains mik photo */
	width: 166px;
	float: right;
}
#juliettepic { /* .aboutpiccont div: contains juliette photo */
	width: 126px;
	float: left;
}



/* events pages (multiple) */

.eventslist li { /* ul: lists on events pages */
	margin: 0px 0px 6px 35px;
}



/* cafe menus page */

#cafepoundcakelist { /* ul: the list of pound cake flavours under bakery > cookies */
	margin-left: 270px;
	text-align: left;
}

#cafebakerynote { /* div: contains the bakery will contain more stuff soon note */
	text-align: center;
}



/* cafe general page */

#cafegenerallist li { /* ul: list on cafe general page */
	margin: 6px 0px 0px 35px;
}



/* cafe location page */

#locationpage { /* div: contains all location page content */
	text-align: center;
}

#map_canvas { /* div containing the google map */
	border: 1px solid #666;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}