/* custom styles for the Finger Food Catering page, by Teresa Watts (teresa@teresawatts.com)

0. Browser Reset
1. Global Styles & small classes
2. Header
3. Main Content
4. Footer
5. Forms
6. Tables
7. 


/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;

}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	padding: 0;
}


/* =Global
----------------------------------------------- */

body, input, textarea {
	color: #434343;
	font: 14px Georgia, garamond, times, serif;
	line-height: 1.4;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
zoom: 1;
background: #fff;

}


/* Headings */
h1,h2,h3,h4,h5,h6 {
	clear: both;
margin-bottom: .3em;
}


h1 {
font-size: 27px;
color: #f67b18;
}

h2 {
font-size: 22px;
color: #f67b18;
}

h3 {
font-size: 18px;
color: #f67b18;
}

h4 {
font-size: 1em;
font-weight: bold;

}

h5 {
font-size: 1em;
font-weight: bold;
color: #f67b18;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.625em;
}

/* Text elements */
p {
	margin-bottom: 1.625em;
}
ul, ol {
	margin: 0 0 1.625em 2.5em;
}
ul {
	list-style: square;
  
}
ol {
	list-style-type: decimal;
}
ol ol {
	list-style: upper-alpha;
}
ol ol ol {
	list-style: lower-roman;
}
ol ol ol ol {
	list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
	margin-bottom: 0;
}
li {margin-bottom: .4em;}

dl {
	margin: 0 1.625em;
}
dt {
	font-weight: bold;
}
dd {
	margin-bottom: 1.625em;
}
strong {
	font-weight: bold;
}
cite, em, i {
	font-style: italic;
}
blockquote {
	font-weight: normal;
	font-size: 1.2em;
padding-left: 25px;
background: url(/static/images/quote-l.gif) 0px 0px no-repeat;
}
blockquote em, blockquote i, blockquote cite {
	
}
blockquote cite {
	color: #666;
	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
blockquote h3 {text-align: center;
font-weight: bold; 
}
blockquote ul {
margin-left: 20px;
list-style-type: disc;
}

pre {
	background: #f4f4f4;
	font: 13px "Courier 10 Pitch", Courier, monospace;
	line-height: 1.5;
	margin-bottom: 1.625em;
	overflow: auto;
	padding: 0.75em 1.625em;
}
code, kbd {
	font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym, dfn {
	border-bottom: 1px dotted #666;
	cursor: help;
}
address {
	display: block;
	margin: 0 0 1.625em;
}
ins {
	background: #fff9c0;
	text-decoration: none;
}
sup,
sub {
	font-size: 10px;
	height: 0;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}



/* Links */
a {
	color: #762123;
	text-decoration: underline;
}
a:focus,
a:active,
a:hover {
	color: #f67b18;
}



/* Alignment */
.left {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.right {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.center {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.hide {text-indent: -9999px;}

.clear {clear: both;}

.message {
font-style: italic;
  font-size: 1.3em;
   width: 690px;
  margin: 0px auto;
  
  text-align: center;
  
}

.message p:first-child:first-letter { 
  font-size: 2.1em; 
  letter-spacing: -.1em;
}

.greybox {
background: #f8f8f8;
padding: 30px 25px;
border-radius: 15px;
margin: 10px 0px;
font-size: 1.3em;

}

.greybox h3 {font-size: 1.3em;}

#container {
 /*  width:  1060px; */
width: 960px;
margin: 0px auto;
}

.vertical #container {
   width:  960px; 
}

/* =Thumbnail Scroller
----------------------------------------------- */

#thumbnail-scroller {
height: 175px;
overflow: hidden;
margin-top: 40px;
margin-bottom: 20px;
width: 100%;
  
  -webkit-appearance: none !important;
}

#thumbnail-scroller table {
border-collapse: collapse;
}

#thumbnail-scroller td {
border-right: 10px solid #ffffff;
}

/* =Header
----------------------------------------------- */


/* normal pages */
#header {
padding-top: 15px;
height: 160px;
}

#logo {float: left;}

/* navigation */

div.menu-container {
	width: 570px;
	float: right;
	margin-right: 7px;
	padding-top: 20px;
}

div.phone-no {
	float: right;
	font-size: 24px;
	margin-right: 7px;
}

#menu {
float: right;
padding: 0px;
list-style-type: none;
padding-top: 10px;
background: url(/static/images/dots.gif) bottom repeat-x;
  display: block;
}

#menu li {
float: left;
  position: relative;
}

#menu li a {
display: block;
font-size: 17px;
color: #666; 
padding: 10px 7px;
margin: 0px 4px;
text-decoration: none;
  
}

#menu li:last-child a {
margin-right: 0px;
}

#menu li.current a, #menu li a:hover  {color: #f67b18;}

#menu ul {
  -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 40px;
	left: 5px;
	width: 130px;
	z-index: 99999;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background: #ebebeb;
}



#menu li ul ul {
	left: 100%;
	top: 0;
}

#menu li ul li {
  margin: 0px;
  padding: 0px;
}

#menu li ul a {
	background: #ebebeb;
	font-size: 13px;
	font-weight: normal;
  font-style: italic;
	height: auto;
	padding: 4px 6px;
  width: 116px;
margin: 0px;
  text-transform: none;
  border-bottom: 1px solid #fff;
}
#menul li:hover > a,
#menu  ul :hover > a,
#menu a:focus {
	background: #efefef;
}
#menu li li:hover > a,
#menu a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	color: #373737;
}
#menu li:hover > ul {
	display: block;
}



/* menu pages */
.vertical  #header {
height: auto;
width: 180px;
float: left;
padding-right: 20px;
 /* margin-left: -50px; */
  margin-right: 0px;
}

.vertical #menu {
width: auto;
float: none;
clear: left;
padding-top: 20px;
background: none;
  
 
}

.vertical #menu li {
float: none;
}

.vertical ul#menu  li a{
float: none;
padding: 0px 3px;
font-size: 14px;
  display: block;
  text-transform: uppercase;
}

.vertical #menu ul{
display: block;
  float: none;
  position: relative;
  top: 0px;
  left: 10px;
  background: transparent;
  -moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
 
}

.vertical #menu li ul a {
background: none;
  padding: 2px 8px;
  font-size: 12px;
  background: url(/static/images/dots.gif) 0px 5px no-repeat;
  text-transform: none;
}

/* =Main Content
----------------------------------------------- */

#content {}

#main {
position: relative;
  
}

.content {
width: 710px;
  float: right;
}

#sidebar {
position: absolute;
  left: 0px;
  top: 0px;
  width: 220px;
  text-align: center;
  padding-top: 10px;
}

#sidebar  table td, #sidebar img {
   width: 220px !important;
 text-align: center;
  margin: 0px auto;
}

/* homepage grid */
.grid div {
background: #f0ecdf;
height: 153px;
width: 229px;
float: left;
margin: 5px;
}


.grid div.first {margin-left: 0px;}
.grid div.last {margin-right: 0px;}

.grid div#grid1 {
background: #f68429;
color: #fff;

}

.grid div#grid1 h1 {
color: #fff; 
line-height: 1; 
font-style: italic;
font-size: 24px;
padding-top: 60px;
padding-left: 16px;
padding-bottom: 10px;
}

#grid1 a {
	color: #fff;
	padding-left: 16px;
}

 
.grid div img {  
height: 153px;
width: 229px;
    top:  0; 
    left: 0 
} 

.grid div.static {
text-align: center;
padding: 0px 15px;
width: 199px;
}

.grid div.static h3 {
text-transform: uppercase;
text-decoration: none;
padding-top: 50px;
font-size: 24px;
border-bottom: 1px solid #c2bfb6;
line-height: 1;


}

.grid div.static h3 a {
text-decoration: none;
background: #f0ecdf;
padding: 0px 8px;
position: relative;
top: 12px;
}


/* menu pages */
.vertical #main {
padding-top: 20px;
float: left;
width: 755px;
padding-bottom: 30px;
  
 
}

.vertical .content {width: 100%;}


.content li {
  margin: .5em 0em .7em 2em !important;
}


/* =Menu Selection
----------------------------------------------- */
table.menu-grid {
margin-bottom: 30px;
width: 100%;
}

.menu-grid tr {
background: url(/static/images/dots.gif) top right repeat-x;
}

.menu-grid td {
width: 360px;
margin: 0px;
padding-top: 18px;

}


.menu-grid td.left {
padding-right: 14px;

}
.menu-grid td.right {
padding-left: 17px;
background: url(/static/images/dots.gif) top left repeat-y;
}

.menu-grid .top {background: none;}
.menu-grid .top td{padding-top: 0px; }

.menu-grid td img {
margin-bottom: 15px;
}

.menu-grid td .details {font-style: italic; margin-bottom: 0px;}


/* =Footer
----------------------------------------------- */

#subfooter {
clear: both;
padding-top: 30px;
}

#subfooter #view-menu, 
#subfooter #event-tips,
#subfooter #about,
#subfooter #contact {
float: left;
width: 230px;
height: 100px;
text-align: left;
background: url(/static/images/dots.gif) top right repeat-y;
padding-top: 10px;
 line-height: 1.2;
  position: relative;
}

#subfooter #view-menu {
	background: #f68429;
    color: #fff;
    margin-right: 16px;
}

#subfooter #view-menu h1 {
	color: #fff; 
	line-height: 1; 
	font-style: italic;
	font-size: 24px;
	padding-top: 20px;
	padding-left: 16px;
}

#subfooter #event-tips .facebook-logo {
	margin-top: 8px;
	margin-left: 15px;
}

/* mobile only */
#subfooter #about,
#subfooter #contact {display: none;}

#subfooter #view-menu span.icon,
#subfooter #event-tips a {

color: #4c4c4c;
font-style: italic;
text-decoration: none;

}

#subfooter #view-menu a:hover,
#subfooter #event-tips a:hover {text-decoration: underline}

#subfooter  p {text-align: center; margin-top: .7em;}

#subfooter #view-menu .icon span,
#subfooter #event-tips .icon span,
#subfooter #about .icon span,
#subfooter #contact .icon span {
color: #f68428;
display: block;
font-size: 20px;
text-transform: uppercase;
}

#subfooter #event-tips .icon span {
font-size: 16px;
}

#subfooter #view-menu span.icon {
background: url(/static/images/menu.gif) 0px 0px no-repeat;
width: 140px;
margin: 0px auto;
color: #762123;
font-size: 23px;
padding-left: 40px;
font-style: normal;
display: block;
}

#subfooter #view-menu span.icon:hover {text-decoration: none;}

#subfooter #view-menu .subscribe-button {
	padding-left: 68px;
	padding-top: 5px;
}
@media only screen and (max-device-width: 1024px) {
	#subfooter #view-menu .subscribe-button {
		padding-left: 60px;
	}
}
#subfooter #event-tips .icon {
background: url(/static/images/events.gif) 0px 0px no-repeat;
width: 140px;
padding-left: 65px;
margin: 0px auto;
color: #762123;
font-size: 25px;
font-style: normal;
}

#subfooter #about .icon {
background: url(/static/images/about.gif) 0px 0px no-repeat;
width: 120px;
padding-left: 65px;
margin: 0px auto;
color: #762123;
font-size: 25px;
font-style: normal;
}

#subfooter #contact .icon {
background: url(/static/images/contact.gif) 0px 0px no-repeat;
width: 130px;
  height: 50px;
padding-left: 65px;
margin: 0px auto;
color: #762123;
font-size: 25px;
font-style: normal;
}

#subfooter #event-tips a#tips-link, #subfooter #view-menu a#menu-link , #subfooter #about a, #subfooter #contact a {
  display: block;
    width: 230px;
  height: 100px;
  position: absolute;
  top: 0px;
  
  display: none;
}

#subfooter #event-tips a#tips-link {
display: block;
  height: 60px;
}


#subfooter #testimonials {
float: left;
width: 438px;
height: 100px;
text-align: right;
padding: 10px 20px;
background: url(/static/images/quote-l.gif) 20px 0px no-repeat;

}

#subfooter #testimonials span {
background: url(/static/images/quote-r.gif) bottom right no-repeat;
display: block;
padding: 0px 15px 0px 25px;
text-align: left;
font-size: 17px;
margin-bottom: 10px;
}


#subfooter #testimonials a {
color: #f68428;
font-style: italic;
text-decoration: none;
}

#subfooter #testimonials a:hover {
text-decoration: underline
}

#footer {
/* background: #f8f8f8 url(/static/images/footer-bg.gif); */
background: transparent; 
height: 19px;
clear: both;
margin-bottom: 100px;
padding: 7px 20px;
color: #939398;
font-size: 11px;
}

#footer a {color: #939398;}
#footer a:hover {color: #666;}

/* =Forms
----------------------------------------------- */


/* general form styles */

label {
display: block;
float: left;
clear: left;
width: 175px;
font-style: italic;
text-align: right;
padding-right: 15px;
}

input.field, select.field {
width: 170px;
background: #fff;
margin-bottom: 5px;
border: 1px solid #d0d0d0;
padding: 3px;
font-size: 13px;
float: left;
}

select.field {
	width: 178px;
}

input.field.date {
width: 145px;

}

input.field.checkbox {
	width: auto;
	margin-top: 8px;
    margin-left: 2px;
}

a.icon-date {
background:  url(images/icon-date.gif);
display: block;
width: 20px;
height: 22px;
float: left;
margin-left: 5px;
}


.button { /* works for both input buttons and links with this class*/
border-radius: 15px;
background: #f68428;
border: 0px;
text-align: center;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
padding: 7px 15px;
width: auto;
-webkit-appearance: none;

}

.button:hover {
background: #772325;
color: #fff;
-webkit-appearance: none;

}

/* slightly smaller button */
.button.button-small {
    border-radius: 10px;
    font-size: 12px;
    padding: 5px 10px;
}


/* your menu form */

.your-menu {
	margin: 0px;
}

.your-menu p {
	margin-bottom: .6em;
}

.your-menu .button {

}

select.field.delivery-select {
	float: none;
	width: auto;
}

.your-details {

}

.your-details label {
  width: 40%;
  text-align: left;
}

.your-details label.wide {
	width: 80%;
	line-height: 1;
}

.your-details .field {font-size: 1em;}

.your-details .button.back {

  margin: 0px auto;
  float: none;
  clear: both;
}


/* # guests form */
.grid form {
font-size: 25px;
  padding-top: 15px;
}

.grid form input.field, .grid form select.field {
width: 100px;
  margin-left: 40px;
  font-size: 18px;
  padding: 8px;
  text-align: center;
}



/* change menu items */


a.menu-group-name,
.mobile-menu a{

background: #f0ecdf;
border: 0px;
text-align: left;

text-decoration: none;
text-transform: uppercase;
font-size: 14px;
padding: 7px 20px;
width: auto;
  margin: 5px;
  display: block;
}

a.dish-link {
	display: block;
	font-size: 12px;
	}

/* search */
#search-label {
  width: auto;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  padding: 0px;
}

input.search-field {
margin-left: 5px;
  padding: 5px;
  margin-right: 5px;
width: 240px;
  margin: 5px;
}

.search-button {
font-size: 1em;
  padding: 4px 8px;
    margin: 5px 0px;
}

.dish-sel-cancel {
    font-size: 12px;
}

/* mobile menu */
.mobile-menu {list-style-type: none;
margin: 0px;
  padding: 0px;
}

.mobile-menu li {
list-style-type: none;
margin: 0px !important;
  padding: 0px;
 
}

.mobile-menu a {
font-size: 1.8em;
}

small {font-size: .75em;}

.your-menu a, .your-details a {
  display: none;
}

#all-dish-images {border: 1px solid red;}

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	div {-webkit-appearance: none;}
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {

#menu, #testimonials, #sidebar, .home #header { 
		display: none
	}
	
	
	
	#header {width: 100% !important; text-align: center; }
	#logo {margin: 0px auto; float: none; }
	
	#main,.content, .menu-grid {

  width: 100% !important;}
  
  #sidebar.contact-side {display: block; }
.contact-main {float: right; width: auto;padding-left: 226px;margin-left: 226px; text-align: right;}

	
	 #mcs_container .customScrollBox { overflow: auto; } 
	 #mcs_container .dragger_container{ display:none; } 
	 
	 .vertical {
		 font-size: 1.8em;
		
		 }
		 
		 
		 
		 .vertical #logo {margin-top: 0; width: 30%; height: auto;}
		 
.home #main {margin-top: 20px;}

		 #subfooter #about,
#subfooter #contact,
#subfooter #event-tips a#tips-link, #subfooter #view-menu a#menu-link , #subfooter #about a, #subfooter #contact a 
{display: block;}

#subfooter #about {
position: relative;
  left: -485px;
}

#subfooter #event-tips{
position: relative;
}

#subfooter #contact {background: none;}

.mobile-menu a {text-align: center;}

.button, input.field, select.field {
font-size: 1em
}

h3 {font-size: 1.5em}

#thumbnailscroller {overflow: hidden; }
.mCSB_draggerContainer {display: none;}
  
  .your-details {width: 100%;text-align: left; padding-bottom: 0px;}
  .your-details label {
  text-align: left;
  width: 100%; float: none;}
  .your-details .field, .your-details .date {
  width: 100%;
  max-width: 600px; text-align: left; float: left; }
  .your-details .date {  width: 100% !important;
  max-width: 600px !important; }
  
  .your-details .button {float: none; margin: 20px auto 0px;}
  a.icon-date {display: none !important;}
 
  #footer {font-size: 1em;}
  #footer {background: none;}
  
  .your-menu a, .your-details a {
  display: block;
}

.message {
  font-size: 30px !important;
  width: 100%;
  padding: 10px;
}

.menu-grid td {
width: 45%;

}

.menu-grid td img {
	width: 100%;
	}

 } 

.event-footnote {
	color: darkgreen;
}




 @media (max-width: 1000px) {
	 #container{
		 width: 480px
	 }
 
	 #grid3,  #grid5, #grid11{
	 	margin-left: 239px;
	 }
 
	 #grid4,  #grid6, #grid12{
	 	margin-left: -473px;
	 }
 
	 #main, .content{
		 width: 480px;
	 }
 

	 #header{
	 	text-align: center;
	 }
 
	 #logo{
		 float: none;
	 }
 
	 #menutoggle{
		 content: "\2630";
		 color: #f68429;
		 font-size: 32px;
		 position: absolute;
		 top: 20px;
	 }

	 #menu{
		 width: 480px;
		 margin: auto;
		 padding: 20px 0;
		 border-top: 1px dashed #ccc;
		 border-bottom: 1px dashed #ccc;
		 margin: 30px 0;
		 overflow: hidden;
		 /* height: 0px; 
		 	opacity: 0;
		 */
	 }
 
	 #menu li{
		 width: 100%;
		 text-align: center;
	 }

	 #header{
	 	text-align: center;
	 }
 
	 #logo{
		 float: none;
	 }
 
	 #menutoggle{
		 content: "\2630";
		 color: #f68429;
		 font-size: 32px;
		 position: absolute;
		 top: 20px;
	 }

	 #menu{
		 width: 480px;
		 margin: auto;
		 padding: 20px 0;
		 border-top: 1px dashed #ccc;
		 border-bottom: 1px dashed #ccc;
		 margin: 30px 0;
		 overflow: hidden;
		 /* height: 0px; 
		 	opacity: 0;
		 */
	 }
 
	 #menu li{
		 width: 100%;
		 text-align: center;
	 }
	#subfooter #view-menu span.icon{
		padding-left: 20px;
	}

	#subfooter #view-menu span.icon{
		padding-left: 20px;
	}

	#subfooter #event-tips .icon{
		padding-left: 0;
		text-align: center;
	}

	#subfooter #event-tips .icon{
		padding-left: 0;
		text-align: center;
	}

	#footer .right{
		margin-top: 20px;
	}

	#sidebar{
		display: none;
	}

	#testimonials{
		margin-top: 40px;
	}

	#menu ul{
		display: block;
		float: none;
		position: relative;
		width: 80%;
		margin: 10px auto;
		top: 0;
		left: 0;
		box-shadow: none;
	}

	#menu ul li{
		float: none;
	}

	#menu ul li a{
		width: 100%;
		font-size: 16px;
		background-color: #f6f6f6;
		padding: 10px 0;
	}

	#menu ul li a:before{
		content: "- ";
	}
	
	#contact{ display: none;}
	
	#subfooter .icon{
		background: none !important;
	}
}