body { 
  background-color: #b5a789;
  font-family:      Georgia, "Times New Roman", Times, serif;
  font-size:        small;
  margin:           0px;
}

/* 
	height messes up the headers in the blog in the articles
	it's only appropriate for the top header.
	add a class (new with blog)
	Affects the 3 #header rules for the main header below
	In HTML: add class="top" to main header in index.html and blog.html
*/

header.top {
  background-color: #675c47;
  margin: 10px 10px 0px 10px;
  height:           108px;
}

header.top img#headerSlogan {
	float: right;
}


/* nav new in blog */
nav {
    background-color: #efe5d0;
	margin: 10px 10px 0px 10px;
}
nav ul {
	margin: 0px;
	list-style-type: none;
	padding: 5px 0px 5px 0px;
}
nav ul li {
	display: inline;
	padding: 5px 10px 5px 10px;
}


div#tableContainer {
	display: table;
	border-spacing: 10px;
}

div#tableRow {
	display: table-row;
}

section#drinks {
    display: table-cell;
    background-color: #efe5d0;
    width: 20%;
    padding: 15px;
    vertical-align: top;
}

/* added section#blog for blog */
section#main, section#blog {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;
}

aside {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;
}

footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin: 0px 10px 10px 10px;
  font-size:        90%;
}

h1 {
  font-size:        120%;
  color:            #954b4b;
}

h2 { font-size: 110%; }

.slogan { color: #954b4b; }

.beanheading {
  text-align:       center;
  line-height:      1.8em;
}

a:link {
  color:            #b76666;
  text-decoration:  none;
  border-bottom:    thin dotted #b76666;
}
a:visited {
  color:            #675c47;
  text-decoration:  none;
  border-bottom:    thin dotted #675c47;
}

/* ALL BELOW IS NEW FOR BLOG */


/* BELOW a above to override for nav */
nav ul li a:link, nav ul li a:visited {
	color: #954b4b;
	border-bottom: none;
	font-weight: bold;

	/* optional! very hard to see although does help */
	text-shadow: 1px 1px 3px #e2c2c2; 

	/* try this and see if you like it */
	text-transform: uppercase;
}

li.selected {
	background-color: #c8b99c;
}

article span {
	font-style: italic;
}
