/*
  General look and feel.
  
  The styles used here emulate The Grind's myspace "pimp-my-profile" styles.
  
  selectors: a body div h1 h2 h3 h4 h5 h6 img object p table td tr ul
    classes: .section
*/
body, h1, h2, h3, h4, h5, h6
{
	font-family: verdana, arial, helvetica, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
/*	line-height: 1em;*/
}
/*
  msie likes to screw up the font sizes in various contexts, so we have to give
  it a bit of help. So we force it to use a sensible base size here, then use
  relative sizes as needed to inherit it correctly. This should have no adverse
  effect on other browers, as it's theoretically redundant information.
*/
body { font-size: 100%; }
body
{
	background: #e8aa69 url(coffee-artsy-bg.jpg);
	background-attachment: fixed; /* keep directive separate: see CSS 2.1, Sec 14.2.1 */
	margin: 0;
	border: 10px solid #842; /* msie5sp4/win: border displays outside of scrollbars */
	padding: 15px;
}
a:link, a:visited { color: #039; text-decoration: none; }
a:hover, a:active { color: #c00; text-decoration: underline; }

/*
  The table formatting model is pretty much fubar by design, making it near
  impossible to get any kind of consistant margin and border if the tables
  are mixed with any other content, such as generic divs and such. My fix
  is simply to enclose all major sections in a "div.section" and set all
  the desired margins, borders, and padding on that, using none at all on
  any of the contained elements (especially not on the tables).
*/
div, h1, h2, h3, h4, h5, h6, img, object, p, table, td, th, tr, ul, li
{
	margin: 0;
	border: 0;
	padding: 0;
}
div.section
{
	/*
	  left/right auto margin causes the block to be horizontally
	  centered when the window is larger than the max-width
	*/
	min-width: 20em;
	max-width: 35em;
	margin: 0.5em auto;
	border: 0;
	padding: 0.5em;
	background-color: #a82;
}

/*
  Force tables in msie to consistantly inherit the font sizes that have been
  defined for the body. See http://archivist.incutio.com/viewlist/css-discuss/37287
  for a brief discussion and explanation.
*/
table
{
	font-size: 1em;
	border-collapse: collapse;
	empty-cells: hide;
}
/* Holly hack? not really... \*/
* html table { width: auto; }
/* */

h1
{
	text-align: center;
	font-weight: bolder;
	font-size: 1.2em;
	color: #fff;
	text-transform: capitalize;
}
h2
{
	text-align: center;
	font-weight: bolder;
	font-size: 1em;
	color: white;
	padding-bottom: 0.3em;
}


/*
  Miscellaneous spanning styles
  
  selectors:    abbr
    classes:
      .grind    The phrases "the grind" or "the grind coffeehouse" in any context
      .joiner   "and" "or" "of" etc in titles of stuff. We can use this as an
                override to prevent various formatting effects on junk words.
      .natural  "all natural" fruit smoothies
*/
.grind { text-transform: capitalize; }
.joiner { text-transform: none; }
.by-line .natural /* don't restyle if it's in a header */
{
	text-transform: uppercase;
	font-weight: bolder;
	white-space: nowrap;
	color: #039;
}
abbr {	border-bottom: none; /* squash common default style */ }

.banner
{
	display: block;
/*
	color: #039;
	border: medium double #369;
*/
}
.logo
/* home page logo */
{
float: left;
/*		top: 20;
	left: 20;
	position: absolute;
	z-index: 1;*/
}
.lead-in
/* leading text on the home page */
{
	font-size: x-large;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	max-width: 20em; /* same as div.section... which of course doesn't work because the font-size is bigger */
	margin: 0 auto;
}
.feature
/* item featured on a menu */
{
	font-weight: bold;
/*	font-size: 1em; /* maybe this will make them behave? */
	color: #369;
}




/*
  Formatting of feature items on menus. Most items are capitalized, but the
  numbered items on the breakfast menu are first-letter capped only. msie5/win
  doesn't support :first-letter, so it gets a Tan hack to simply capitalize
  everything. Since I have no information as to how later versions handle it,
  I'll assume they too require the hack until I find out to the contrary.
*/
.feature { text-transform: capitalize; } /* everything but breakfast */
#breakfast .feature { text-transform: none; }
#breakfast #skillets .feature,
#breakfast #number .feature p:first-letter,
#breakfast #create .feature:first-letter, /* opera doesn't accept this one */
#breakfast #famous,
* html #breakfast .feature
{
	text-transform: capitalize;
}


/*
  Smoothies and pie menus are formatted differently from all the other menus
  since the menu items are mostly self-descriptive.
*/
div.quicklist { text-align: center; }
div.quicklist .price { margin-bottom: 0.75em; }
#smoothies .price span.s16, #dessert .price span.slice { margin-right: 0.75em; }
#smoothies .price span.s20, #dessert .price span.whole { margin-left:  0.75em; }
div.quicklist ul.feature { word-spacing: 1.5em; /* msie5sp4/win unsupported */ }
div.quicklist ul.feature li
{
	display: inline;
	word-spacing: 0;     /* msie5sp4/win unsupported */
	white-space: nowrap; /* msie5sp4/win unsupported */
}


.by-line
/* description of a feature */
{
	display: block;
	margin: 0 1.2em;
	font-size: smaller;
	font-weight: normal;
	color: #000;
	text-transform: none;
}
/*
  opera9/win required
  firefox1/win doubly applied
  msie5sp4/win not required, but not doubly applied either
*/
.by-line ul { margin: inherit; }
.feature li .by-line
{
	white-space: normal;
}


#food p
{
	display: block;
	text-align: justify;
}


/*
  Lists in by-lines (e.g. omelette ingredients, soda flavors, syrup flavors, etc)
*/
.by-line li
{
	display: inline;
	text-transform: capitalize;
	white-space: nowrap; /* msie5sp4/win unsupported */
}
/* :after msie5sp4/win unsupported */
.by-line li:after { content: ","; }
.by-line li.last:after { content: ""; }
/*
  msie5/win can't do css generated content, so I'd like to slap some margins
  or padding on instead so that it will degrade reasonably well. Unfortunately
  this seems to be ignored. This hasn't been tested with later versions yet.
*/


/*
  Meat and egg food safety notice
  
  selectors: (body table tr td) div h6 a
    classes: .safety .safety-link
*/
.safety
{
	display: block;
	margin: 20px;
	padding: 10px;
	font-weight: normal;
	font-size: small;
	text-align: justify;
	color: #000;
	border: dotted thin #000;
}
.safety h6, .safety p
{
	margin: 0;
	border: 0;
	padding: 0;
	font: inherit;
}
/*.safety h6 */ .safety a
{
	/* firefox1/win, msie5sp4/win not supported */
/*	display: run-in;*/
	text-transform: capitalize;
}


.price
/* price of a menu item */
{
	vertical-align: top;
	color: #039;
	font-weight: bold;
/*	text-align: center;*/
}
#drinks colgroup.price col.c12,
#drinks colgroup.price col.c16,
#drinks colgroup.price col.c20
/*
  Opera9 doesn't recognize the width when set on the colgroup. After
  rereading the specs, I think this is actually correct according to
  CSS2.1, since they don't mention styles on colgroups. Again, the
  HTML table model is slightly braindead. In any case, Firefox and
  MSIE don't seem to care whether the width is set on the colgroup
  or the col, so I do it this way.
*/
{
	width: 3.8em;
}
#drinks colgroup.price col.cshot1,
#drinks colgroup.price col.cshot2
{
	width: 8.5em;
}
#drinks .size
/* serving size, e.g. cup volumes */
/* This is pretty rudimentary. I only use it at the top of the columns
on the coffee chart. */
{
	vertical-align: top;
	color: #369;
	font-weight: bold;
/*	text-align: center;*/
}


/*
  Navigation links
  
  selectors: ul li
    classes: .nav .self
*/
ul.nav
{
	display: block;
	color: #039;
	margin: 1em 0;
	word-spacing: 1em; /* msie5sp4/win unsupported */
	text-align: center;
}
.nav li
{
	display: inline;
	font-size: smaller;
	font-weight: bolder;
	text-transform: capitalize;
	word-spacing: 0; /* msie5sp4/win unsupported */
	white-space: nowrap; /* msie5sp4/win unsupported */
}
/* Mark the link from a page back to itself. */
.nav a.self
{
	color: #369;
	text-decoration: none;
	cursor: default;
}
/*#home .nav
{
	font-size: large;
}*/
/*
  msie5/win can't do word-spacing, so I'd like to slap some margins
  or padding on instead so that it will degrade reasonably well. Unfortunately
  this seems to be ignored. This hasn't been tested with later versions yet.
*/


/*
  Contact info
  
  selectors: p div span address iframe
    classes: .email .phone .hours .special-hours .google-map .google-map-link
*/
address
{
	display: block;
	margin: 0 auto; /* horizontally center block */
	text-align: center;
	white-space: nowrap;
}
#home address
{
	clear: left; /* clears logo image */
}
.google-map
{
	display: block;
	margin: 0em auto;
	text-align: center;
	padding-bottom: 0.75em;
}
.google-map-link
{
	font-size: small;
}
.phone
{
	font-size: larger;
}
.hours
{
	padding-top: 0.75em;
	text-align: center;
}
.special-hours
{
	padding-top: 0.75em;
	text-align: center;
	font-size: larger;
	color: #039;
}
.hours em
{
	font-style: normal; /* em usually rendered italic */
	font-weight: bolder;
}

h1+.by-line
/* + msie5sp4/win unsupported */
{
	text-align: center;
	margin-bottom: 0.75em;
}


/*
  Event related styles
  
  selectors:    (body div) ul li span h3 h4 a p object
        ids:    #venue
    classes:
      .future   Upcoming events
      .current  Currently running events (for art)
      .past     Past events
      .art      Art
      .music    Music
      .genre    Describes musical genre and art styles
      .flyer    Scanned event flyers
*/
.flyer
{
	/* minimal positioning, for event flyers */
	display: block;
	margin: 0.5em auto;
}
#venue h3, #venue h4
{
	margin: 0;
	padding: 0;
	font: inherit;
}
#venue ul.music, #venue ul.art
{
	margin: 0;
	padding: 0.75em 1.5em;
}
#venue .music li, #venue .art li
{
	display: block;
	margin: 1em 0 1.5em 0;
	border-top: thin solid black;
}
#venue .past { font-size: smaller; }
#venue h4.when { font-weight: bolder; }
#venue .date { color: #fff; float: left; }
#venue .time { color: #369; float: right; }
#venue h3.who
{
	display: block;
	clear: both;
	text-align: center;
	color: #039;
	font-weight: bolder;
	font-size: larger;
}
#venue h4.genre
{
	display: block;
	clear: both;
	text-align: center;
	color: #369;
	font-weight: bolder;
}
#venue h5.cover
{
	display: block;
	color: #369;
	font-size: larger;
}
#venue .future h5.cover { font-weight: bolder; }
#venue td.cover { vertical-align: bottom; }
#venue p, #student p
{
	display: block;
	clear: both;
	text-align: justify;
}