body { 
  background-color: #000;
  font-family:      "Segoe UI Light", 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: #000;
  margin: 			5px 10px 0px 10px;
  height:           208px;
  display:			table-row;
  vertical-align:	top;
}

header.top #topTable	{
	display:	table-row;
}


header.top img#headerJustJoe {
	display:		table-cell;
	width:			22%;
	float:			top;
	
}


header.top img#headerJustAward {
	display:	table-cell;
	float: 		top;
	width:		30%;
}

header.top img#headerGGwords {
	display:	table-cell;
	width:		40%;
	vertical-align: 		top;
}

*/
table	{
	color:	white;
	text-align:	center;
	font-family:	"Bauhaus 93" sans-sarif;
	font-size:		medium;
}

img.displayed	{
	display:		block;
	margin-left:	auto;
	margin-right:	auto;
}

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

div#tableRow {
	display: table-row;
}

section#awardHead	{
	display:	table-cell;
	vertical-align:	top;
	width:			33%;
	padding:		5px;
}

section#wordsHead	{
	display:		table-cell;
	vertical-align:	top;
	width:			34%;
	padding:		5px;
}
	
section#joeHead	{
	display:		table-cell;
	vertical-align:	top;
	width:			33%;
	padding:		5px;
}

section#JoeQuotes	{
	border:		2px solid #000;
	margin:		auto;
	width:		80%;
	text-align:	right;
	background-color:	#eee;
}
	

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%;
  width:			30%;
  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;
}

h1a	{
	font-size:		120%;
	color:			#954b4b;
	text-decoration:	underline;
}

h2 { font-size: 110%; }

h3	{ 
	font-size: 100%; 
	border-top-style: dotted;
	text-align:	center;
}

li	{
	list-style-image: url(images/JustAwardButton.gif);
	
}


.vidLoc	{
	max-width:		560px;
	max-height:		315px;
	margin-right:	auto;
	margin-left:	auto;
}


.marq	{ color: #ffb43c; text-align:	center; font-size: xx-large; font-family:	"Bauhaus 93"; text-shadow: 2px 2px 2px #000; }
.marqSm	{ color: #954b4b; text-align:	center;  font-weight: bold;  text-shadow: 0px 1px 0px #000; }
.slogan { color: /*#954b4b*/#b76666; text-align: center; font-family: "Segoe UI"; text-shadow:  1px 1px 1px #888; padding: 0px 15px 0px 15px;}

.quote { color: /*#954b4b*/#888; text-align: center; font-family: "Segoe UI"; text-shadow:  1px 0px 0px #000; padding: 0px 25px 0px 25px;}

.summation { text-align: right; font-style: italic; padding: 0px 5px 0px 0px}

.nomText	{
	padding-left:		3%;
	text-decoration:	underline;
	text-shadow:		1px 0px 0px #000;
}


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

.conjunction	{
	text-align:		center;
}

.firstIn	{
	padding-left:	5%;
}

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


nav {
    background-color: #efe5d0;
	margin: 10px 10px 0px 10px;
	text-shadow:  1px 1px 2px #888;
}
nav ul {
	margin: 0px;
	list-style-type: none;
	padding: 5px 0px 5px 0px;
}
nav ul li {
	display: inline;
	padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
	color: #954b4b;
	border-bottom: none;
	font-weight: bold;

/*
	text-shadow: 1px 1px 3px #e2c2c2; 
	text-transform: uppercase;
*/
}
nav ul li.selected {
	background-color: #c8b99c;
}


	
.blink_text {

    animation:2s blinker linear var(--times);
    -webkit-animation:2s blinker linear var(--times);
    -moz-animation:2s blinker linear var(--times);
	}
	/*	
	
.blink_text {

    animation:2s blinker linear 3;
    -webkit-animation:2s blinker linear 3;
    -moz-animation:2s blinker linear 3;

    }
*/

    @-moz-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @-webkit-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
	}
 
 .fade_text	{
	 animation: fadein var(--durat);
	 -webkit-animation: fadein var(--durat); /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein var(--durat); /* Firefox < 16 */
        -ms-animation: fadein var(--durat); /* Internet Explorer */
         -o-animation: fadein var(--durat); /* Opera < 12.1 */
	}
	
		@keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* Firefox < 16 */
	@-moz-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* Safari, Chrome and Opera > 12.1 */
	@-webkit-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* Internet Explorer */
	@-ms-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* Opera < 12.1 */
	@-o-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}