/*------------------------------------------------------------------
[Master Stylesheet]

Project:            bubbys.com | new site layout
Version:            2.0
Last change:        April 1, 2009
Author:             James D Lovinsky
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Browser reset (Eric Meyer)
2. General Styles
    a. Body
    b. links.
    c. headings
    d. other elements, tags
3. Page Structure - skeleton
4. Individual page styles and overrides

[colors]

set as variables in EE:
{color_name} = #hexhex

dumbo_blue = #8DD5E4
dumbo_blue_light (20% of blue) = #E8F7FA
tribeca_purple = #AB91B1
tribeca_purple_light (20% of purple) = #EEE9EF
nav_brown = #74723c
bubby_green = #C4C400
bubby_green_light (20% of green) = #F3F3CC
orange = #FFB600
maroon = #B60000
news_brown = #B37467
news_brown_light (20% of brown) = #EDD8C5
type = #3F3F3F
link = #FF4000

[fonts]

<h1> will use image replacement
<h2> Verdana 200% white (homepage promo box labels) 
<h3> Verdana 166% bold #3f3f3f (section headers, hours/directions, catering header and slugs, news page post titles)
<h3 class=pie store> Verdana 166% bold #b60000 (promo text)
<h4>
<h5> Verdana 116% (blog titles-homepage #3f3f3f, bold specials title #3f3f3f, italic promo box text homepage #3f3f3f & Title DUMBO announcement white, menu links bold #3f3f3f)
<h6>
<p> Verdana 1em #3f3f3f (body text)
<li> Verdana 1em #3f3f3f (special descriptions, et al)
<blockquote class=blog> margin 10px 40px Georgia 1em #3f3f3f 
quote attribution should indent 70px with &mdash; in front of name
*Note anywhere in DDD you see titled text ignore and use regular web text <h2>s

[links]

body text a, a:link - #ff4000 no decoration
body text a:hover- #ff400 underlined
body text a:visited- no styling for visited

News Promo a:hover- background color #b37467 and add arrow art
 
Blog Sidebar list items a, a:link - #3f3f3f
Blog Sidebar list items a:hover- #ff400 underlined

[basic site layout]

page is 960px wide
spacing between content boxes - 40px
#nav - 30px high across top of page
#identity - 110px high, just below #nav
40px horizontal space
#main_content - 680px wide, 
40px vertical column
#sidebar - 240px wide
40px horizontal space
#footer 60px high


-------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
[1. Eric Meyer browser reset]
*/

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, img, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/*------------------------------------------------------------------------------
[2. General Styles]
*/

html {
 width: 100%;
 height: 100%;
}

body {
 width: 60em;
 background-color: #FFF;
 margin: 0 auto;
 color: #3F3F3F;
 font-family: Verdana, Arial, sans-serif;
 font-size: 16px;
 max-width: 64em;
 position: relative;
 z-index: 1;
 display: block;
 height: auto;
}

a, a:link, a:visited {
 color: #FF4000;
 text-decoration: none;
}

a:hover, a:active {
 text-decoration: underline;
}

h1 {
 text-indent: -9009px;
 float: left;
 background: url(http://bubbys.com/images/identity2.gif) center center no-repeat;
 display: block;
 height: 85px;
 width: 590px;
 margin-top: -2%;
 font-size: 0px;
}

h2 {
 font-size: 1.6em;
 color: #FFF;
 display: inline-block; 
 width: 4.5em;
 padding: 0.2em;
}

h2 a {
 color: #fff !important;
 text-decoration: none !important;
}

h3 {
 /* color: #B60000;*/
 padding: 5px 10px;
 color: #FFF !important;
 font-weight: normal;
 font-size: 1.4em;
 margin-bottom: 20px;
 
}

h4, h5, .Title {
 font-size: 1.16em;
 padding: 0 0 0.8em;
 display: block;
}

h4, h5, h4 a, h5 a, .Title {
 color: #3F3F3F !important;
}

h6 {
 font-weight: bold;
 padding: 0.5em 0;
}

h6 ul {
 font-weight: normal;
}

.headline {
 font-size: 1.5em;
 padding: 1em 0 2em;
 background-image: none;
}

p {
 font-size: 0.9em;
}

li {
 font-size: 1em;
 line-height: 1.3;
}

input {
 border: none;
}

.clear, #menu br {
 clear: both;
 height: 0px;
}

.spacer {
 /*margin: 2.5em 0;*/
}

.hidden {
 visibility: hidden;
 height: 0px;
}

blockquote {
 padding: 0 0 0.8em 2em;
}

strong {
 font-weight: bold;
}

em {
 font-style: italic;
}

.column ol, .column ul {
 list-style-position: inside;
}

.column ol {
 list-style-type: decimal; 
}

.column ul {
 list-style-style: disc;
}

.column sup, .column sub {
 font-size: 8px;
}

.column sup {
 vertical-align: top;
}

.column sub {
 vertical-align: bottom;
}



/*------------------------------------------------------------------------------
[3. Page Structure]
*/

#header {
 background-color: #C4C400;}

#nav {
 text-align: center;
 margin: 0 auto;
 display: table; 
}

#nav ul {
  white-space: no-wrap;
  display: inline-block
}

#nav ul {
 display: inline;
}

#nav li {
 float: left;
 line-height: 1.8;
}

#nav a, #nav a:link, #nav a:visited {
 display: block;
 color: #3F3F3F;
 width: auto !important;
 padding: 0 1.5em;
 float: left;
}

#nav a:hover, #nav a:active {
 color: #3F3F3F;}

#nav .activetab {
 background-color: #74723C;
 color: #FFF !important;
 text-decoration: none;
}

#identity {
 background-color: #454848;
 text-align: right;
 height: 5.08em;
 padding: 1.8em 1.25em 0; 
}

.rss {
 padding: 0 0 0.4em;
 font-size: 0.6em;
 color: #FFF;
}

#identity form {
 background: #FFF;
 width: 23%;
 height: 20px;
 margin: .2em 0 .2em auto;
 text-align: left;
}

#identity .activetab {color:}

#identity input {
 padding: 0.2em;
 font-size: 0.7em;
 background-color: transparent;
 float: left;
 width: 78%;
}

#identity .submit {
 color: #FFF;
 background-color: #C4C400;
 margin: 0;
 height: 20px;
 float: right;
 width: 18%;
}

.bmail, .bmail a {
 color: #C4C400 !important;
}

.bmail a {
 padding: 0.4em 0 0;
 font-size: 0.8em;
}

.notice {
 font-size: 0.8em;
 background-color: #B60000;
 position: absolute;
 line-height: 1.6em;
 padding: 0 1em;
 width: 31em;
 z-index: 100;
}

.notice p, .notice h6 {
 display: none;
 margin: 1em 0;
}

.notice, .notice a {
 color: #fff !important;
 font-style: italic;
}

.notice a {
 font-size: 0.7em;
}

#content {
 min-height: 37.5em;
 height: auto !important;
 height: 37.5em;
}

#content p {
 padding: 0 0 0.63em;
 line-height: 1.6em;
}

.column {
 width: 42.5em;
 height: 100%;
 padding: 40px 0;
 float: left;
 position: relative;
}

.single {
 width: 95.9%;
 padding: 40px 0 40px 40px;
}

.column li, .single li {
 font-size: 0.9em;
}

.single h3 {
 margin-left: -40px;
}

.box {
 float: left;
 display: inline;
 position: relative;
}

.box div {
 position: absolute;
 bottom: 0;
 min-height: 2.5em;
 height: auto !important;
 height: 2.5em;
 padding: 0 0.5em;
 background-color: #FFF;
 /* for IE */
 filter: alpha(opacity=80);
 /* CSS3 standard */
 opacity: 0.8;
 width: 95%;
}

.catering h2, .dumbo h2, .tribeca h2 {
 height: 100%;
 width: 100%;
 padding: 0;
 position: relative;
 z-index: 50;
 font-weight: normal;
}

.catering h2 span, .dumbo h2 span, .tribeca h2 span {
 width: auto;
 padding: 0.2em;
 position: absolute;
}

.catering h2 a, .dumbo h2 a, .tribeca h2 a {
 display: block;
 height: 100%;
 width: 100%;
}

.box p {
 font-style: italic;
 font-size: 0.75em;
}

.catering div {
 width: 87%;
}

.catering, .dumbo {
 height: 15em;
 margin-bottom: 40px;
}

.news, .tribeca {
 height: 21.25em;
}

.catering, .news {
 width: 23.75em;
 padding-right: 40px;
}

.dumbo, .tribeca {
 width: 16.25em;
}

.catering {
 background: url(http://bubbys.com/images/catering_background.jpg) left top no-repeat;
}

.dumbo {
 background: url(http://bubbys.com/images/dumbo_background.jpg) left top no-repeat;
}

.tribeca {
 background: url(http://bubbys.com/images/tribeca_background.jpg) left top no-repeat;
 padding: 0;
}

.news {
 background: url(http://bubbys.com/images/news_background.png) left top no-repeat;
}

.news ul {
 float: right;
}

.news ul li {
 padding-bottom: 0.2em;
}

.news li a {
 line-height: 1.4em;
 display: block;
 color: #3F3F3F;
 width: 183px;
 height: 46px;
 padding-left: 24px;
 background: url(http://bubbys.com/images/news_hover.gif) right bottom no-repeat;
}

.news li a:hover {
 text-decoration: none;
 background-position: top;
}

.catering h2 span {
 background-color: #C4C400;}

.dumbo h2 span {
 background-color: #8DD5E4;}

.news h2 {
 visibility: hidden;
 background-color: #B37467;
 width: 100%;
}

.tribeca h2 span {
 background-color: #AB91B1;}

.info {
 padding: 1em 18em 1em 1em;
 position: relative;
 width: 56%;
}

.info .directions a {
 color: #3F3F3F !important;
}

.info p {
 font-size: 0.8em;
 line-height: 1.3em;
}

.info ul {
 list-style-position: inside;
 list-style-type: none;
 text-indent: 1em;
 line-height: 1.6em;
 margin-bottom: 1em;
}

.info .directions {
 position: absolute;
 top: 1em;
 right: 1em;
 width: 40%;
 padding: 0;
}

.maplink {
 cursor: pointer;
}

#Tribeca .info, #DUMBO .info {
 min-height: 17em;
 height: auto !important;
 height: 17em;
}

#Tribeca .info {
 background-color: #EEE9EF;}

#DUMBO .info {
 background-color: #E8F7FA;}

#Catering .info {
 background: url(http://bubbys.com/images/catering_info.jpg) left top no-repeat;
 min-height: 28em;
 height: auto !important;
 height: 28.81em;
}

#map {
 width: 16.88em; 
 height: 12.5em;
 border: 3px solid white;
}

#map_window {
 display: none;
 height: 480px;
 width: 640px;
}

#sidebar {
 width: 15em;
 height: 100%;
 float: right;
 padding-top: 40px;
 position: relative;
}

#sidebar h4 {
 text-indent: -9009px;
 width: 100%;
 height: 29px;
 padding: 0;
 margin-bottom: 0.5em;
}

#sidebar ul {
 margin-bottom: 2em;
 font-size: 0.9em;
}

#sidebar .specials_header {
 background: #FFB600 url(http://bubbys.com/images/specials_header.gif) left top no-repeat;
}

#sidebar .menus_header {
 background: #FFB600 url(http://bubbys.com/images/menus_header.gif) left top no-repeat;
}

#sidebar .information_header {
 background: #FFB600 url(http://bubbys.com/images/info_header.gif) left top no-repeat;
}

#sidebar .catering_menus {
 background: #FFB600 url(http://bubbys.com/images/catering_menus_header.gif) left top no-repeat;
}

#sidebar .raves_header {
 background: #7d8aa0 url(http://bubbys.com/images/raves_header.gif) left top no-repeat;
}

#sidebar .merchandise_header {
 background-color: #7d8aa0;
 color: #FFF !important;
 text-indent: 0;
 height: 22px;
 padding: 5px;
 border-top: #fff solid 15px;
 border-bottom: #fff solid 15px;
}

#News #sidebar {
 padding-top: 25px;
}

.specials {
 min-height: 30em;
 height: auto !important;
 height: 29em; 
 padding-bottom: 1em;
 position: relative;
}

.specials h5 {
 display: block;
 font-size: 1em;
 background-color: #c9caca;
 color: #929292;
 width: 5em;
 text-align: center;
 border-right: 5px solid #fff;
 border-top: 2px solid #fff;
 line-height: 1.4em; 
 cursor: pointer;
 padding: 0;
 position: absolute;
 top: 2em;
 left: 5.2em;
 z-index: 10;
}

.specials h6 {
 margin: 0.5em 0;
}

.specials .firstTab {
 left: 0;
}

.specials .activetab, .specials .activetab a {
 background-color: #7f8181;
 color: #fff !important;
}

.specials .background, .specials .activelist {
 padding-top: 1.5em;
}

.specials .background {
 position: absolute;
 z-index: -1;
 visibility: hidden;
 top: 0;
}

.specials .activelist {
 visibility: visible;
}

.specials ul {
 font-size: 0.8em !important;
 margin-bottom: 1em !important;
}

.specials li {
position: relative;
/*background-image: url(http://bubbys.com/images/dot.gif); */
background-repeat: repeat-x;
background-position: 0 .7em;
margin: 0 0 0.3em 0 !important;
padding: 2px 0 0 0;
list-style: none;
}

.specials_price {
float: right;
z-index: 100;
text-align: right;
padding: 0 0 0 5px;
background-color: #FFF;
}

.specials_item {
font-weight: normal;
float: left;
width: 85%;
padding: 1px 0 1px;
background-color: #FFF;
}

.specials_descrip {
 font-size: 0.8em;
 font-style: italic;
 line-height: 1.2em;
 width: 80%;
 margin-left: 10px;
}

.specials_web {
font-weight: bold; 
font-family: Verdana; 
padding: 10px 0 8px 15px;
}

#sidebar a {
 color: #3F3F3F;
 text-decoration: none;
}

#sidebar a:hover, #sidebar a:active {
 color: #B60000;}

#sidebar li {
 line-height: 1.2em;
 margin-bottom: 1em;
}

#sidebar .menus li {
 font-weight: bold;
}

#footer {
 height: 3em;
 background: #454848 url(http://bubbys.com/images/pie.gif) 51.7% center no-repeat;
 color: #FFF;
 padding: 1em 0.5em;
}

#footer p {
 line-height: 2em;
 font-size: 9px !important;
 width: 49em;
 margin-left: auto;
 margin-top: 1em;
 float: left;
}

#footer .right {
 float: right !important;
 padding: 0 !important;
 text-align: right;
}

.right {
 float: right;
 padding-left: 1em;
}

.red {
 color: #FF4000 !important;
 text-decoration: underline;
}

/*------------------------------------------------------------------------------
[4. Individual Page Styles]
*/

#Tribeca h3.main_headline, 
#DUMBO h3.main_headline, 
#News h3.main_headline, 
#Catering h3.main_headline, 
#Catering .catering_gallery_header {
 text-indent: -9009px;
 margin-bottom: 0.63em;
 padding: 0;
 font-size: 1.67em;
}

#Tribeca h3 {
 background-color: #AB91B1;
}

#Tribeca h3.main_headline {
 background: #AB91B1 url(http://bubbys.com/images/tribeca_header.gif) left top no-repeat;
}

#DUMBO h3 {
 background-color: #8DD5E4;
}

#DUMBO h3.main_headline {
 background: #8DD5E4 url(http://bubbys.com/images/dumbo_header.gif) left top no-repeat;
}

#Catering h3 {
 background-color: #C4C400;
}

#Catering h3.main_headline {
 background: #C4C400 url(http://bubbys.com/images/catering_header.gif) left top no-repeat;
}

#gallery {
 height: 5em;
 overflow: hidden;
 text-align: center;
 line-height: 3em;
}

.catering_gallery_header {
 font-size: 1.6em;
 padding: 0;
 background: #C4C400 url(http://bubbys.com/images/catering_gallery_header.gif) left top no-repeat;
}

#gallery img {
 padding: 0 0.8em;
}

#gallery .items {
 float: left;
 width: 970px;
 height: 100%;
 text-align: left;
}

#gallery .prev, #gallery .next {
 display: block;
 cursor: pointer;
 float: left;
 height: 18px;
 width: 18px;
 margin-top: 1.5em;
 background: transparent url(http://bubbys.com/images/left_arrow.png) 0 0 no-repeat;
}

#gallery .next {
 background: transparent url(http://bubbys.com/images/right_arrow.png) 0 0 no-repeat;
 float: right;
}

#gallery a:hover {
 background-position: 0 bottom;
}

#Catering .information li {
 list-style-type: disc;
 list-style-position: outside;
 margin-left: 1.2em;
 margin-bottom: 1em;
 font-size: 0.8em;
}

#News h3 {
 background-color: #B37467;}

#News h3.main_headline {
 background:  #B37467 url(http://bubbys.com/images/news_header.gif) left top no-repeat;
}

.entry {
 position: relative;
 padding-bottom: 1em;
 border-bottom: #FFF 2.5em solid;
 width: 100%;
}

.entry img, .entry object {
 padding-left: 1.6em;
 float: right;
}

.entry ul {
 margin-left: 10px;
}

#News .entry p a {
 text-decoration: underline;
}

#News .entry span {
 position: absolute;
 bottom: 0;
 left: 0;
 font-size: 0.8em;
 display: block;
 clear: both;
}

#News .entry span em {
 color: #B60000 !important;
 font-weight: bold;
 font-style: normal;
}

#News .entry span a {
 color: #3F3F3F !important;
}

#Store #content h3 {
 background: #B60000 url(http://bubbys.com/images/store_header.gif) left top no-repeat;
 text-indent: -9009px;
}

#Store .info {
 background: #B37467 url(http://bubbys.com/images/pie-collection.jpg) left top no-repeat;
 height: 9.3em;
 margin-bottom: 1em;
}

#Store .info .directions {
 width: 20%;
 top: 0.5em;
 font-style: italic;
 color: #FFF;
}

#Store .column h4 {
 color: #B37467 !important;
 font-size: 1em;
 font-weight: bold;
}

#Store .pie {
 padding: 2em 0 2em 8em;
 position: relative;
}

#Store .pie img {
 position: absolute;
 top: 2em;
 left: 0em;
 padding-right: 1em;
 clear: both;
}

.pie .buy {
 position: static !important;
}

#Store .column b, 
#Store .column p, 
#Store .column a, 
#Store .column span,
#Store .merchandise * {
 font-size: 0.8em;
 padding: 0;
 margin: 0;
 line-height: 1.2;
}

#Store .column span,
#Store .merchandise span {
 color: #B60000;
}

#Store .column a,
#Store .merchandise a {
 color: #929292 !important;
}

#Store .merchandise h5 {
 display: inline;
 float: left;
 font-weight: bold;
}

#Store .merchandise .price {
 float: right;
}

#menu {
 margin-top: -10px;
 line-height: 1.4;
}

#menu dl, #menu ul {
 padding-bottom: 1em;
}

#menu h5 {
 padding: 1em 0 0.3em;
 font-weight: bold;
 font-size: 1.1em;
}

#menu dt, #menu li {
 margin-bottom: .75em;
}

#menu dt {
 width: 60%;
 float: left;
}

#menu dd {
 float: right;
 width: 39%;
 text-align: right;
}

#menu em {
 font-weight: normal;
 margin-left: 2em;
 display: block;
 font-style: italic;
 font-size: 0.8em;
}

#entree, #service, #beverages {
 text-align: left;
}

#service h2 {
 color: #3F3F3F;
 padding: 0.2em 0 0.5em;
}

#entree h3, #beverages h3 {
 color: #3F3F3F;
 font-size: 1em;
 font-weight: bold;
 padding: 2em 0 1em;
}

#entree .item, #entree .add, #entree .descrip, 
#beverages .item, #beverages .add, #beverages .descrip {
 float: left;
 text-align: left;
 width: 65%;;
}

#entree .add, #entree .descrip,
#beverages .add, #beverages .descrip {
 margin-left: 1.5em;
}

#entree li, #beverages li {
 text-align: right;
 margin: 0.75em 0;
}

#bottom {
 display: none;
}

#bubbyness_img {
 background: transparent url(http://bubbys.com/images/Flickr-Badge_Bubbyness.gif) no-repeat top left;
 height: 45px;
}

#bubbyness {
 text-align: center;
 font: 14pt Verdana;
 margin-bottom: 0.5em;
}

#bubbyness img {
 float: left;
 margin: 0 0px 1px 1px;
 padding: 1px;
 border: none; 
}

.who {
 text-indent: 5em;
}

.cityguide {
 text-align: center;
 line-height: 1.4em;
 font-size: 0.59em;
}

.cityguide img {
 border: none; 
 align: center;
}

.cityguide p { 
 color: #838383; 
}

.cityguide a {
 color: #838383; 
}

form p {
 /* margin-bottom: 20px; */
}

#contact_form {
 width: 100%;
}

#contact_form input, 
#freeform input, 
#tellafriend_form input {
 border: 1px #3F3F3F solid;
 width: 18.75em;
 height: 1.38em;
 padding: 2px 2px 2px 5px;
 font-size:1em;
}

#freeform .radio { /*radio buttons */
 border: none;
 width: 1em;
 height: 1em;
 padding: none;
}

#contact_form textarea, 
#freeform textarea, 
#tellafriend_form textarea {
 border: 1px #3F3F3F solid;
 width: 42em;
 padding: 2px 2px 2px 5px;
 font-size:1em;
}

.submit_it {
height:1.75em !important;
width:5em !important;
 font-size: 1.2em;
}

.news_title {
 background-color: #C4C400;
 padding: 5px 10px;
 color: #FFF !important;
 font-weight: normal;
 font-size: 1.4em;
 margin-bottom: 20px;
}

.cp_link {
 display: block;
 height: 37px;
 width: 37px;
 position: absolute;
 right: 46.5%;
}

.review {
 padding-left: 30px;
 padding-right: 30px;
}