/*
*************************************************

TOM E TOES
Screen Styles

Created by the Kelly Franklin
http://www.wiltonwebdesign.com

*************************************************
*/


/*-------------------------------------------    
    General Selectors
-------------------------------------------*/
* { margin: 0; padding: 0; line-height: 1.4;  outline: none; }
body { font: normal 62.5% Georgia, 'Times New Roman', serif; color: #222; background: #fffdee url(/img/bg_body.jpg);}


h1 {text-indent: -9999px; height: 189px }
	h1 a img {position:absolute; top: 21px; left: 132px}
h2 {font: 30px normal Georgia, 'Times New Roman', serif; color: #7a6430; margin: 0 0 .5em 0; letter-spacing: .02em; font-variant: small-caps;  }
    h2 span {font-size: 28px;  }
    body.home h2 {font-size: 27px; letter-spacing: 0; font-variant: normal; font-style:italic}
    .menu h2 small {display: inline}
      .menu h2 small span {font-size: 20px}
    h2.tighter {margin-bottom: 0}
 
h3 {font-size: 16px; background: url(/img/decorator_half.png) no-repeat bottom left;  margin: 1.5em 0 0 0; padding: 0 0 .75em 0; }
  .menu h3 {float: left; width: 100%; }
  .menu h3.first {margin-top: 1em}
  .menu h3.paragraph, h3.paragraph {margin: 0 0 .5em 0}
  h3.intro {background: none; margin: 0 0 0 0}
  h3.plain {background: none}
  #sidebar h3 { background: url(/img/decorator_sidebar.png) no-repeat bottom left; margin: 1.5em 0 .3em 0 }

a, a:visited {color: #740003; text-decoration: none; border-bottom: 1px dotted #cecece }
	.pdf_link, p a  {text-transform: uppercase; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; letter-spacing: .03cm;font-size: .85em}
a:hover, a:focus { color: #aa4042; }

p { margin-bottom: 1.35em; line-height: 1.45em}
p, ul, ol, dd { font-size: 13px; color: #333; }
ul, ol {margin: 0; padding: 0}

ul li {list-style-type: none; background:transparent url(/img/square_bullet.gif) no-repeat 0 .5em;
padding-left:12px; line-height: 1em}
	  ul.text li {font-size: 13px; color: #333; line-height: 1.45em}

ol {margin: 0 0 0 1.65em}

li {margin-bottom: .7em}

img { display: block; }
a img {border: none}

abbr, acronym {border-bottom: none}
	acronym {display: inline-block; margin-right: 1em}

form {width:300px; position: relative; padding: 0 0 2.3em 0;}
fieldset{margin:0;padding:0;border:none;}		
legend {display:none;}	
label {font-weight: bold; margin:.5em 0; font-size: 12px; position: relative; width: 100%; display: inline-block}
	label label.error {width: 250px; text-align: right; position: absolute; top: -.55em; right: 0;  font-style:italic; font-weight: bold; font-size: 11px; color: #9F3631}
	label em {font-style: normal; display: inline-block; margin: 0 0 0 2px;  color: #9F3631}
	label span.spam {font: normal 11px 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; color: #6F613E; text-transform: uppercase}
input, textarea {width:296px; padding: 4px; font-family: Georgia, 'Times New Roman', serif; border:1px solid #78af62; }		
textarea{height:100px;overflow:auto; font-size: 13px}
	input[type="text"]:focus, textarea:focus {background: #f4ffef;  border: 1px solid #577F47}
	input.button {display: block;  background: #669f4f;  border: 1px solid #84b76f; color: #fff; font: normal 12px/12px 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; text-transform: uppercase; border-width: 0; padding: 1px 0 3px 0; height:23px; width: 74px; margin: 2em -.5em 0 0; position: absolute; bottom: 0; right: 0; }
		input.button:hover {background: #78af62; border-width: 0; outline: none;}
     
p.error {color: #9F3631; font-weight: bold}

.center {margin-left: 195px}
.left {float: left; margin: 0 30px 0 0; display: inline}
.top, .last  {margin: 0}
	p.top {float: left}

.less {margin-bottom: -.5em}
.pdf {display: inline-block; background: transparent url(/img/icon-pdf-small.gif) no-repeat left center; padding-left: 13px; }

/*-------------------------------------------    
    Structure
-------------------------------------------*/

#wrapper {text-align: left; margin: 0 auto; padding: 0; border:0; width: 780px;  }

#header { width: 780px; height: 200px; background: #2f0101 url(/img/bg_header.jpg) no-repeat; margin: 0 auto 16px auto; padding: 21px 0 16px 0; position: relative; }

#navbar {width: 780px; background: #2f0101 url(/img/bg_nav.jpg) no-repeat; margin:0; position: relative; bottom: 0; left: 0; padding: 14px 0 0 0; height: 26px;  }

#container {float: left; display:inline; width: 675px; background: #fffcdf url(/img/bg_container.jpg) repeat-y; padding: 0 60px 10px 50px; margin: .7em 0 1em 0; font-size: 115%; clear: both; }

#sidebar {float: right; display: inline;  width: 244px;}

#main {margin: 0; float: left; display: inline;  width: 400px; height: 1%; }

#full {width: 100%; margin: 0 0 1em 0; float: left; position:relative; }
      body.discounts #full, body.catering  #full, body.parties  #full, body.contact #full, body.page_not_found #full  {background: url(/img/divider.jpg) no-repeat bottom left; }
      body.menu #full {margin-bottom: .3em}

.half, .last_half {width:305px; position:relative; margin: 0 0 .5em 0}
	.half {float: left;}
	.last_half {float: right;}

#footer {width: 740px; clear: left;  background: #2f0101 url(/img/bg_footer.jpg) no-repeat; position: relative;  clear: both;}

/*-------------------------------------------    
    Header Hero and Logo 
-------------------------------------------*/

#locale {position: absolute; top: 0; left: 0; width: 780px; height: 21px; font: normal 11px 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;}
	p.tel {display: block; position: relative; top: 0; left: 8px; color: #ffffcc; }
	p.street-address {display: block; position: absolute; top: 0; right: 8px; }
	#locale a, #locale a:visited {color: #fff; text-decoration: none;  border-bottom: 1px dotted #888; display: inline-block; vertical-align: bottom;}
		#locale a:hover, #locale a:active {color: #ccc}
#head_left {width: 132px; height: 189px; position: absolute; top: 21px; left: 0;}
	body.home #head_left {background: url(/img/side_home.jpg) no-repeat}
	body.lunch #head_left {background: url(/img/side_lunch.jpg) no-repeat}
	
a#rotator {width: 468px; height: 189px; position: absolute; top: 21px; right: 0; background: url(/img/rotator_soup.jpg) no-repeat; }


/*----- rotator  -------*/

#rotator {position: absolute;top: 21px; right: 0; height:189px; width: 468px; }
#rotator ul {margin: 0; padding: 0}
#rotator ul li {float:left;position:absolute;list-style: none;background: none;	margin: 0;padding: 0;}
div#rotator ul li.show {z-index:500;}

/*-------------------------------------------    
    Navigation 
-------------------------------------------*/


#nav {display: block; position: relative; top: 0; left: 46px; padding: 0; margin: 0; list-style:none;text-align:center; }
	#nav li {background: none; letter-spacing: 1px;text-transform: uppercase; text-align:center; font: normal 13px 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; border-left: 1px solid #5F562F; width: 4.5em; height: 1em; padding: 0 0 0 .35em; margin: 0 4px 0 0;  float:left; position:relative; line-height: 13px}
		#nav li#home {border-left: none}
		#nav li.small {width: 5.6em;}
		#nav li.medium_small {width: 7em;}
		#nav li.medium {width: 7.6em;}
		#nav li.longer {width: 8em;}
		#nav li.longest {width: 9.3em;}


	#nav li a {z-index:20;display:block;position:relative;color: #fff;text-decoration: none; border-bottom: none; line-height: 13px}

 	#nav li .hover {position:absolute; width: 4.5em; height: 1.8em; left:0;top: -.35em; color: #fff; background: #7F0005; border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius: 5px;z-index:0;display:none;margin-left: 5px}
		#nav li.small .hover {width: 5.6em;}
 		#nav li.medium_small .hover {width: 7em;}
		#nav li.medium .hover {width: 7.6em;}
		#nav li.longer .hover {width: 8em;}
		#nav li.longest .hover {width: 9.3em;}

/* current states */

body.home #home a, body.home #home a:hover, body.home #home a:visited,
body.menus #menus a, body.menus #menus a:hover, body.menus #menus a:visited,
body.menu #menus a, body.menu #menus a:hover, body.menu #menus a:visited,
body.location #location a, body.location #location a:hover, body.location #location a:visited, 
body.discounts #discounts a, body.discounts #discounts a:hover, body.discounts #discounts a:visited,
body.parties #parties a, body.parties #parties a:hover, body.parties #parties a:visited,   
body.contact #contact a, body.contact #contact a:hover, body.contact #contact a:visited,
body.about #about a, body.about #about a:hover, body.about #about a:visited,
body.employment #employment a, body.employment #employment a:hover, body.employment #employment a:visited
{color: #c6af71; text-decoration: none; background: none;  }

body.home #home .hover, 
body.menus #menus .hover,
body.menu #menus .hover,
body.location #location .hover, 
body.discounts #discounts .hover,
body.parties #parties .hover,
body.contact #contact .hover 
{background: none;}

/*-------------------------------------------    
   Home
-------------------------------------------*/

#secondary {float: left; display: inline; position: relative; width: 354px; border: 4px double #78AF62; margin-top: 1.5em}
#secondary dl {float: left; display: inline; width: 344px; margin: 20px 20px 0 10px; padding: 0; }
#secondary dt {float: right; display: inline; font-size: 130%; letter-spacing: 1px;  font-weight: bold; width: 260px; text-align: left; margin-right: 20px; text-transform: uppercase; margin: 0 20px 4px 0}
#secondary dd {float: left; display: inline; margin: 0; padding: 0; line-height: 150%; height: 52px; }
#secondary dd.first {width: 200px}
#secondary dd.thumb img {padding: 1px; margin-right: 9px; border: 1px solid #c6af71;}
#secondary dd.thumb a {border-bottom: none}
  #secondary dd.thumb a:hover img {opacity: .7}
#secondary dd span {color: #8F846B }

blockquote.burst { background: transparent url(/img/burst.gif) no-repeat;  margin: 0; width: 140px; height: 140px;  padding-top: 2.1em; position: absolute; top: -44px; right: -50px}
blockquote.burst p {display: block; text-align: center; font-size:32px; font-weight: bold; line-height: 1em; margin-left: 12px; color: #373737 }
blockquote.burst small {position: absolute; top: 24px; left: 52px; font-size: 24px; display: block; }
blockquote.burst cite { display: block; text-align: center; font-style: italic; font-weight: normal; font-size: 15px; line-height: .7em; margin: 1px 0 0 -8px; color: #222; }

p.phone {font-size: 2em; margin: 0 0 1em 0}
p.phone span {color: #333; font-size: .75em; color: #6b582b; line-height: 2.4em }


/*-------------------------------------------    
   Menus
-------------------------------------------*/

/*------ Menu Landing Page -------*/

.menus .half {margin-left: 4px}
.menus .last_half {margin-right: 16px}

dl.landing {float: left; display: inline; width: 290px; margin: 5px 0 20px 0; padding: 10px 5px 14px 10px; border: 4px double #78AF62;}
  dl.indent {margin: 0 0 0 170px}
.landing dt {float: right; display: inline; font-size: 130%; letter-spacing: 1px;  font-weight: bold; width: 224px; text-align: left;text-transform: uppercase; margin: 0 0 4px 0; }
.landing dd {float: left; display: inline; margin: 0; padding: 0; line-height: 150%; width: 75%; }
.landing dd.thumb {height: 52px; width: 56px; margin: 6px .7em 0 0}
.landing dd.thumb img {padding: 1px; border: 1px solid #c6af71; }
.landing dd.thumb a {border-bottom: none}
  .landing dd.thumb a:hover img {opacity: .7}
.landing dd span {color: #8F846B }


.menu h3 {width: 100%; display: block; margin: 16px 0 0 0; position:relative;}
	.menu h3.top {margin: 0}

.menu dl {float: left; margin: 1em 0 .4em 0; position: relative; display: block; width: 100%; height: auto;}
.menu dt {margin: 0 0 .3em 0; font-weight: bold}
	.menu dt.tighter {margin: 0}
.menu dd {padding: 0; margin: 0}
	.menu dd.two_thirds {width: 60%}
	.menu dd.three_quarters {width: 75%} 
.menu dd.price {position:absolute; top: 0; right: 0; text-align: right; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 11px;  line-height: 1.3; color: #6F613E; }
	.menu dd.price small {display: block; margin-bottom: 8px; font-size: 9px}
	.menu dd.drop {position: absolute; top: 19px; right: 0; display: block; }
	.menu dd span.price {font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 11px;  font-style: normal; color:#6F613E;}
.menu dd.ingredients {font-size: 11px; font-style: italic}
	.menu dd.moveup {margin-top: -12px}

/*------ Menu Mini-Navigation -----*/

#mini_nav { display: block; position: absolute; bottom: 1.65em;  right: 0; }
	body.catering #full {height: 60px}
	body.catering #mini_nav {bottom: 1.8em; bottom: 2.3em }
#mini_nav li {background: none; display: inline-block; float: left; padding: 0 0 0 .3em; margin: 0 0.2em 0 0; font: normal 12px Georgia, 'Times New Roman', serif;  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; }
	#mini_nav li a, #mini_nav li a:visited { color: #740003; text-transform: uppercase; letter-spacing: 1px; display: inline-block; vertical-align: bottom; border-bottom: 1px dotted #cecece;   }
		#mini_nav li a:hover { color: #aa4042;  }
  
#mini_nav span {display: inline-block; color: #8F846B;  margin: 0 0 0 .4em}
    #mini_nav span.qualifier {text-transform: uppercase; display: inline-block; margin: 0 0 0 0; color: #333; letter-spacing: 1px;}
    	    #mini_nav span.qualifier span {display: inline-block; margin: 0 .7em 0 0;}
    
 /*------ Visa and Mastercard -------*/ 
 
 p.no_print {line-height: 1.6em; margin: 3.3em 0 1.5em 0 }

 
#pricing {float: left; display: inline; width: 100%;  }
	body.lunch #pricing {margin-top: 12em;}
	body.delivery #pricing {margin-top: 4em; text-align: right;}
	body.catering #pricing {margin-top: 3em}
	body.dinner #pricing {margin-top: 16.2em; text-align: right;}
	
#pricing ul {margin: 0}
#pricing li {background: none; color: #7a6430; font: normal 10px/16px 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; padding: 0; margin: 0}

/*------ Catering callout -------*/ 

.callout_space {width:5.3em; height:10em; padding:.25em; float:right; }
.callout {width:13.5em; height:9em; padding:.25em; float:left; margin-left:-11em; margin-top: -2.5em;}
.callout p {width:9em; padding:.25em .25em .25em 0; position:absolute; text-align:center; font-size:1.3em; line-height:1.35em; font-weight:bold; font-style: italic; margin-bottom: 0}


/*-------------------------------------------    
    Location
-------------------------------------------*/

#map {padding: 10px 5px 5px 10px; border: 4px double #78AF62; margin: 0 0 1em 0; background: url(/img/map.png) no-repeat 0 0; width: 430px; height:360px}
.location #main {width: 452px}
.location #sidebar {width: 200px}
 p.directions {font-size: 2em; margin: .3em 0 .5em 0; line-height: 1.2em; padding-bottom: 1.7em; background: url(/img/decorator_sidebar_sm.png) no-repeat bottom left; }
.location #sidebar ul {margin-top: 1.5em}

form#lookup {width: 452px; clear: left; padding: 0; display: block; margin: 0 0 2px 0}
#lookup label {float: left;}
	label.medium {width: 210px;}
	label.smaller {width: 116px;}
     input.medium {width: 150px; margin: 0 0 0 3px}	
     input.smaller {width: 76px; margin: 0 0 0 3px}
     input#getdirections {width: 124px; position: absolute; top: 7px; right: 0; height: 25px; line-height: 20px; margin: 0}
     
div.googledir a {color: #222;}


/*-------------------------------------------    
    Discounts
-------------------------------------------*/

.discounts #full {margin-bottom: 2.2em}
.discounts #main {width: 500px; }
	body.discounts #main img {float: left; display: inline-block; margin-bottom: 2.5em}
.discounts #sidebar {width: 150px;}
#sidebar p.dropdown {margin-top: 16.2em}


/*-------------------------------------------    
    Employment
-------------------------------------------*/

body.employment #container {height: 320px}


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

#footer {padding: 1em 20px;  color: #fff; margin: 0 0 1em; }
	#footer a { color: #fff;border-bottom: 1px dotted #bbb; text-decoration: none; font: normal 10px 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px }
	#footer a:hover, #footer a:focus { color: #ccc; border-bottom: 1px dotted #fff  }	
#footer ul {display: inline-block; margin: 0 0 0 1.4em}
#footer ul li {display: inline}
	li.first_item {background: none; padding-right: .6em}
	li {padding-right: .6em}
address {float: right; display: inline; margin: .31em 0 0 0; font-style: normal; font-size: 108%; }


/*-------------------------------------------    
   IE Overrides - spoonfeed bad browsers
-------------------------------------------*/

* html #header {padding: 21px 0 0 0; margin: 0 auto 6px auto;}
* html #navbar {height: 24px }
	* + html #navbar {height: 24px}
* html p.street-address {top: 2px}
	* + html p.street-address {top: 2px}
* html blockquote.burst cite  {line-height: 1em; margin-top: .2em}
	* + html blockquote.burst cite {line-height: 1em; margin-top: .2em}
* html dl.landing {display:inline-block; margin: 5px 10px 20px 0;}
	* + html dl.landing {margin: 5px 0 20px 0}	
* html dl.indent {display: inline; margin: 0 0 0 176px}
	* + html dl.indent {margin: 20px 0 0 170px}
* html .menu dd.price {top:1px}
	* + html .menu dd.price {top:1px}	
* html input, textarea {padding:2px 5px 5px 5px}
	* + html input,	* + html textarea {padding:2px 5px 5px 5px}
* html label label.error {top: -.65em;}
	* + html label label.error {top: -.65em;}
* html input.button {padding: 3px 0} 
	* + html input.button {padding: 3px 0}
* html form#lookup {margin: 0 0 8px 0}
	* + html form#lookup {margin: 0 0 8px 0}	
* html input.smaller {width: 74px}
	* + html input.smaller {width: 74px}
* html address {margin: -1.2em 0 0 0}
	* + html address {margin: -1.2em 0 0 0}