/* Stylesheet for The Barbecue */

html {
	margin: 1em;
	padding: 0;
}

body {
	background: ivory;
	font: 100% Arial, Helvetica, Verdana;
	margin: 0;
	padding: 0;
}

/* Needed for some browers to handle HTML5 */

article, footer, header, nav { 
	/* border: 1px solid red; */
	display: block;
}

footer {
	clear: both;
}

/* Our interesting CSS */

article {
	float: right;
	margin: 0.5em 0 0.5em 0;
	padding: 0;
	width: 79%;
}

/* Nudge the body up a little, to line up with the nav area. There's no header
   here, so the normal CSS makes it look unaligned. */
article.home {
	margin: 0 0 0.5em 0;
}

div.nextRun {
	background-color: white;
	border: 1px solid maroon;
	margin-left: 0.25em;
	margin-right: 0.25em;
	padding: 0;
	text-align: center;
}

footer, h4 {
	border-top: 1px solid black;
	border-left: 1px solid black;
	font-size: 100%;
	margin: 0.5em 0 0 0;
	padding: 0.25em;
}
	
header {
	margin: 0;
	text-align: center;
}

header h1 {
	font-size: 350%;
	margin: 0;
	padding: 0;
}

header p {
	font-style: italic;
}

nav {
	background-color: ivory;
	border: 3px double maroon;
	float: left;
	margin: 1em 0.5em 0.5em 0;
	/* margin: 1.5em 0 0.5em 0; */
	width: 18%;
}

nav a {
	text-decoration: none;
}

nav a:hover {
	color: maroon;
	font-weight: bold;
}

nav p {
	margin: 1em 0 1em 1em;
}

p.triggerWarnings {
	font-style: italic;
	margin: 0;
}

table.blurb {
	margin: 0 0 1em 0;
	padding: 0;
}

table.blurb td {
	border: 0;
	padding: 0 0.25em;
	vertical-align: top;
}


td.blurbText {
	width: 40%;
}

td.blurbImage img {
	margin: 1em 0;
	/* This is a larger image, which we want to constrain to a reasonable size,
	   based on the size of the window. Let the image fill the table cell, but
	   don't base the table cell size on the image size. Doing this shrinks the 
	   image the way I want it. */
	max-width: 100%;
}

table.gameHistoryTable {
	border-bottom: 1px solid black;
	border-right: 1px solid black;
	margin: 0.5em 0;
	padding: 0;
	width: 100%;
}
	
tr.headerRow {
	background-color: maroon;
	color: ivory;
	font-weight: bold;
}

tr.evenRow, tr.oddRow {
	background-color: white;
}

td.run {
	white-space: nowrap;
}

td {
	border-top: 1px solid black;
	border-left: 1px solid black;
	padding: 5px;
}