/*
Janice's Kitchen
Screen Style Sheet
*/


/* ##### common styles ##### */
body {
	margin:0;
	padding:0;
	background-color:#365974;
	font-family:verdana, sans;
	font-size:.8em;
	line-height:140%;
	color:#395f80;	
	}

a {
	text-decoration: underline;
	color:#395f80;
	/* this gets rid of the annoying anchor outlines that Firefox insists upon */
	outline: none;
	}
	
img {
	border: 0;
	}

table {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	}

/* ##### layout styles ##### */
/* centers the page design in the browser */
div#centerWrapper {
	position:relative;
	width:730px;
	margin-top:15px;
	margin-left:auto;
	margin-right:auto;
	}

div#header {
	position:relative;
	width:730px;
	height:73px;
	background:#365974;
	}

img#logo {
		position:absolute;
		display:block;
		top:0;
		left:254px;
		z-index:3;
		border:0;
		}

/* hides printLogo for screen */		
img#printLogo {
	display: none;
	}		
	
/* contains the sidebar and content elements, and draws the left & right borders */
div#page {
	position:relative;
	width:730px;
	padding:40px 0 0 0;
	margin:0;
	background:#fff url(../images/bg_02.gif) repeat-y 0 0;
	overflow:hidden;
	}

div#content {
	position:relative;
	float:left;
	width:352px;
	padding:0 0 20px 0;
	margin:70px 30px 30px 60px;
	font-family:'trebuchet ms', verdana, sans;
	}
	
	/* content text styles */
	div#content h1 {
		font-family:times;
		font-size:1.6em;
		color:#5e7512;
		font-weight:normal;
		margin:0;
		padding:0 0 10px 0;
		}

	div#content h2 {
		color:#365974;
		font-size:1.2em;
		margin:0;
		padding:10px 0 10px 0;
		}

	div#content ul {
		margin-top:0;
		margin-bottom:10px;
		}

	div#content ul li {
		line-height:160%;
		}

/* ### for lists with anchors: sampleMenus, etc. ### */		
	div#content ul.linkList {
		margin: 0;
		padding: 0;
		list-style: none;
		}

	div#content p {
		line-height:160%;
		margin:0;
		padding:0 0 10px 0;
		}

div#content p img {
	padding-left: 5px;
	float: right;
	}

	div#content p.disclaimer {
		font-size:.9em;
		line-height:120%;
		color: #395F80;
		}
		
	div#content span.quoteAuthor {
		margin: 0 45px;
		padding: 0 0 20px 0;
		font-size: .90em;
		font-style: italic;
		display: block;
		}

div#footer {
	background:#365974 url(../images/borderBottom.gif) no-repeat 0 0;
	margin:0;
	padding:13px 0 0 0;
	width:730px;
	color:#fff;
	overflow:auto;
	}

	/* footer text styles */
	div#footer div#contact {
		position:relative;
		float:left;
		clear:none;
		font-size:.9em;
		}	

		div#footer div#contact a#contactEmail {
			color:#fff;
			font-weight:bold;
			}
			
			div#footer div#contact a#contactEmail:hover {
				text-decoration:underline;				
				}

		div#footer div#contact div {
			color:#9aacb9;
			}

	div#footer a#requestQuote {
		display:block;
		position:relative;
		float:right;
		text-align:right;
		color:#fff;
		font-weight:bold;
		font-size:.9em;
		}
		
		div#footer a#requestQuote:hover {
			text-decoration:underline;
			}

/* ##### navigation styles ##### */

/* main naviation ("Catering Services", "Past Events", "About Us", "Janice's Recipes") */
/* this technique uses a single image that includes all of the buttons, plus over/on states */
ul#nav {
	position:absolute;
	top:73px;
	left:0;
	z-index:2;
	padding:0;
	margin:0;
	width:721px;
	height:35px;
	background:transparent url(../images/nav.gif) top left no-repeat;
	border:5px solid #fff;
	border-left-width:4px;
	border-bottom-width:0;
	}

	ul#nav li {
		margin:0;
		padding:0;
		list-style:none;
		position:absolute;
		top:0;
		line-height:auto;
		}

	ul#nav li, ul#nav a {
		height:35px;
		display:block;
		}

	ul#nav li a {
		text-indent:-9999px;
		text-decoration:none;
		}

	/* main navigation button styles */
	#cateringServices {left:0px; width:143px;}
	#pastEvents {left:144px; width:122px;}
	#aboutUs {left:466px; width:117px;}
	#janicesRecipes {left:583px; width:138px;}
	
	/* main navigation hover states */
	#cateringServices a:hover {background: transparent url(../images/nav.gif) 0px -35px no-repeat;}
	#pastEvents a:hover {background: transparent url(../images/nav.gif) -144px -35px no-repeat;}
	#aboutUs a:hover {background: transparent url(../images/nav.gif) -466px -35px no-repeat;}
	#janicesRecipes a:hover {background: transparent url(../images/nav.gif) -583px -35px no-repeat;}
	
		/* prevent hover if the tab is "on" */
		body.cateringServices #cateringServices a:hover {background-position:0 -70px;}
		body.pastEvents #pastEvents a:hover	{background-position:-144px -70px;}
		body.aboutUs #aboutUs a:hover {background-position:-466px -70px;}
		body.janicesRecipes #janicesRecipes a:hover	{background-position:-583px -70px;}
	
	/* main navigation "on" states */
	body.cateringServices #cateringServices {background: transparent url(../images/nav.gif) 0px -70px no-repeat;}
	body.pastEvents #pastEvents {background: transparent url(../images/nav.gif) -144px -70px no-repeat;}
	body.aboutUs #aboutUs {background: transparent url(../images/nav.gif) -466px -70px no-repeat;}
	body.janicesRecipes #janicesRecipes {background: transparent url(../images/nav.gif) -583px -70px no-repeat;}

	
/* Submenu (sidebar) navigation styles */
div#submenu {
	position:relative;
	float:left;
	margin:0;
	padding:0 0 20px 8px;
	width:208px;
	height:1%; /* for IE6 - prevents a height bug with the submenu hover states */
	}

	div#submenu ul {
		margin:0;
		padding:1px 0 0 0;
		width:208px;
		list-style:none;
		background: url(../images/bg_submenu_ul.gif) repeat-y 0 0;
		}

		div#submenu ul li a {
			display:block;
			width:154px;
			margin:1px;
			padding:15px 25px;
			background:#fdf4ab url(../images/borderSubmenu.gif) no-repeat bottom left;
			color:#37430d;
			text-decoration:none;
			font-size:.9em;
			}

				/* submenu hover states */
				div#submenu ul li a:hover {
					color:#37430D;
					background-color:#C5BBDF;
					}

/* encapsulates the submenu photos and contains background color and image to match design */
div.photoField {
	width: 206px;
	margin: 0;
	padding: 0 0 3px 0;
	background: #fff url(../images/borderSubmenu.gif) no-repeat bottom left;
	}

	div#submenu img#submenuImg {
		width: 200px;
		margin: 2px 0 2px 3px;
		}

/* Submenu "on" states */
body.weddingsShowers div#submenu ul li#weddingsShowers a,
body.privateParties div#submenu ul li#privateParties a,
body.corporateEvents div#submenu ul li#corporateEvents a,
body.gourmetGo div#submenu ul li#gourmetGo a,
body.sampleMenus div#submenu ul li#sampleMenus a,
body.thisMonth div#submenu ul li#thisMonth a,
/* aboutUs section */
body.historyPhilosophy div#submenu ul li#historyPhilosophy a,
body.testimonials div#submenu ul li#testimonials a,
body.contactUs div#submenu ul li#contactUs a,
body.recipeArchive div#submenu ul li#recipeArchive a {
	color:#fdf4ab;
	background-color:#99b0c6;
	}

/* ##### page elements ##### */

/* "Sign up for our newsletter" form in the header */
form#newsletter {
	position:relative;
	display:block;
	float:right;
	width:185px;
	margin:15px 0 0 0;
	padding:0;
	}

	form#newsletter label {
		display:block;
		margin:0 0 6px 0;
		}

	form#newsletter input#newsletterEmail {
		width:150px;
		height:17px;
		margin:0;
		padding:0;
		border:0;
		}
		
	form#newsletter input#newsletterSubmit {
		width:27px;
		height:16px;
		vertical-align:middle;
		}
		
/* Contact Us form */
form {
	font-family: Verdana, Arial, Geneva, sans-serif;
	}

div#content	form label,
div#content	form p {
		font-size: .8em;
		}

div#content	form label {
		margin: 0 0 5px 0;
		}
	
	div#content form p {
		padding-bottom: 0;
		}

form#contactUs table {
	margin-bottom: 10px;
	}
	
	form#contactUs table.inputText {
		width: 395px;
		}
		
		form#contactUs input.textInput {
			width: 110px;
			display: block;
			}
			
	form#contactUs table.inputRadio {
		width: auto;
		}
		
		form#contactUs table.inputRadio label {
			color: #666;
			}

div.textArea {
	margin: 10px 0;
	padding: 0;
	}
			
form textarea {
	width: 240px;
	}

/* previous/all/next in-page navigation for Sample Menus and Janice's Recipes */
ul#pageNav {
	margin:10px 0 0 0;
	padding:5px 0 10px 0;
	width:408px;
	list-style:none;
	border-top:1px solid #99b0c6;
	}

	ul#pageNav li {
		float:left;
		}
		
		ul#pageNav li a {
			border-right:1px solid #395f80;
			margin:0 10px 0 0;
			padding:0 10px 0 0;
			font-family:verdana, sans;
			font-size:.8em;
			text-decoration:underline;
			}

			ul#pageNav li a span {
				text-decoration:none;
				padding:0 1em;
				background:#fff;
				}

			ul#pageNav li.first a span {
				padding-left:0;
				}

			ul#pageNav li.last a {
				border:0;
				}

/* ### for the "print recipe" link with page icon image ### */
ul#pageNav li a.print {
	border-right: 0px;
	padding-left: 20px;
	text-decoration: none;
	background: url(../images/icon_print_recipe.gif) no-repeat left top;
	display: block;
	}

/* ##### homepage styles ##### */

/* custom homepage styles */
body.home {}

body.home img#logo {
	}

body.home img#logo2 {
	position:absolute;
	top:111px;
	left:263px;
	z-index:2;
	border:0;
	}

body.home div#page {
	background-image: url(../images/bgHome.gif);
	padding-top:44px;
	}

body.home div#page div.homeColumn {
	position:relative;
	float:left;
	margin:0 4px 0 0;
	padding:339px 0 0 0;	
	background-color:#e5e9d8;
	font-family:verdana, sans;
	color:#38430d;
	}

	body.home div#page div.homeColumn p {
		text-align:center;
		margin:15px;
		padding:0;
		}

		body.home div#page div.homeColumn p.headerTag {
			color:#7B8F36;
			margin:0;
			padding:0;
			}
	
/* graphic headers on homepage (Past Events, Learn More, Recipe of the Month) */
/* Styled for rollovers */
img.homeHeader {
	position:absolute;
	z-index:2;
	top:313px;
	left:0;
	}

	div#columnLeft img.homeHeader {
		clip:rect(0px 231px 26px 0px);
		}
		
	div#columnMiddle img.homeHeader {
		clip:rect(0px 244px 26px 0px);
		}	

	div#columnRight img.homeHeader {
		clip:rect(0px 225px 26px 0px);
		}

/* homepage columns */
body.home div#page div#columnLeft {
	width:231px;
	margin-left:12px; /* this value is modified in the screen_ie6 style sheet */
	background:#e5e9d8 url(../images/home1.jpg) no-repeat 0 0;	
	}
		
body.home div#page div#columnMiddle {
	width:244px;
	background:#e5e9d8 url(../images/home2.jpg) no-repeat 0 0;	
	}	

body.home div#page div#columnRight {
	width:225px;
	margin-right:0;
	background:#e5e9d8 url(../images/home3.jpg) no-repeat 0 0;	
	}

/* custom bottom border required because IE doesn't take a bottom margin for the columns */	
body.home div#footer {
	background:#365974 url(../images/borderBottomHome.gif) no-repeat 0 0;
	}
	
/* Past Events Gallery */

div#eventsGallery {
	width: 420px;
	margin: 0;
	padding: 0;
	}
	
div#photos {	
	width: 213px;
	margin: 0;
	padding: 0;
	position: relative;
	float: left;
	}
	
	div#eventsPhoto {
		width: 213px;
		margin: 0;
		padding: 0;
		}
	
	div#eventsPhoto img {
		width: 213px;
		height: 213px;
		margin: 0;
		padding: 0;
		position: relative;
		}
		
div#description {
	width: 190px;
	margin: 0 0 0 10px;
	padding: 0 0 10px 0;
	float: left;
	}
	
	p#descriptionContent {
		font-size: 100%;
		}
		
div#gallery {
	margin: 10px 0;
	padding: 0;
	position: relative;
	}
	
				
div#gallery ul#galleryList li a:hover {
	cursor: pointer;
	}
					

/* Gallery as in ALA article: http://alistapart.com/articles/sprites */

#galleryList { 
	position: relative; 
	margin: 10px auto; 
	padding: 3px; 
	width: 213px; 
	height: 60px; 
	}

#galleryList li { 
	width: 60px; 
	height: 60px; 
	position: absolute; 
	top: 2px; 
	background: url(../images/pastEvents/weddingsShowers/weddingThumbs.jpg) 0 0 no-repeat; 
	display: block; 
	list-style: none;
	}

#galleryList a { 
	width: 60px; 
	height: 60px; 
	display: block; 
	}

#galleryList a:hover { 
	/*border: solid 1px #ccc;*/
	}

#galleryList #thumbnail1 { left: 0px; }
#galleryList #thumbnail2 { left: 77px; background-position: -77px 0; }
#galleryList #thumbnail3 { left: 153px; background-position: -153px 0; }


#galleryList #thumbnail1 a:hover { background: url( ../images/pastEvents/weddingsShowers/weddingThumbs.jpg ) 0px -60px no-repeat; }
#galleryList #thumbnail2 a:hover { background: url( ../images/pastEvents/weddingsShowers/weddingThumbs.jpg ) -77px -60px no-repeat; }
#galleryList #thumbnail3 a:hover { background: url( ../images/pastEvents/weddingsShowers/weddingThumbs.jpg ) -153px -60px no-repeat; }