/*  
Website: http://grantbbqfest.com
Name: Grant BBQ Fest
Description: CSS based website, designed and hosted by Artemis Inc.
Author: Jefte Puente
Author URI: http://www.artemisit.com
Comments: This stylesheet is best viewed without word wrapping
*/


/* Body Styles */

body { background: url("images/bg.gif") repeat-x; background-color: #153B7D; background-attachment: fixed; font-size: 62.5%; font-family: Arial, Verdana, Sans-serif; } /**** This percentage sets 1.0 em to 10px. Lucida is a nicer mac font than Arial, it ships with all new macs and XP ****/
#page { margin: auto; padding: 0; width: 700px; background: white;}
#header { width: 100%; height: 111px; background: url('images/hd.jpg'); }

/* Heading Styles */
h1 { display:none } 
h2 { margin: 0; font-size: 2.0em; margin: 0px; letter-spacing: -1px; font-weight: bolder; color: #b7161d;} 
h3 { margin: 0; font-size: 1.4em; margin: 0px; letter-spacing: -1px; font-weight: bolder; color: #4d6a9c;} 
h4 { margin: 0; font-size: 1.2em; margin: 0px; font-weight: bolder; } 
h5 { margin: 0; font-size: 1.0em; margin: 0px; font-weight: bolder; color: #777;}
hr { display:none } /* Horizontal Rules are hidden from standard browsers and screen readers, yet are visible in text-only browsers to help seperate content from nav.  */

/* Form Styles */
label,input { display: block; width: 200px; float: left; margin-bottom: 10px; } 
label { font-size: 1.2em; font-weight: bolder; text-align: right; width: 175px; padding-right: 20px; } /* WE CAN FINALLY STOP USING TABLES FOR FORMS! Check contact.html for proper xhtml markup syntax. */
#Telephone, #FAX, { width: 100px; }
#State { width: 20px; float: left; }
#Zip { width: 35px; }
#Comments { height: 55px; width: 250px; margin-bottom: 10px; }
form, br { clear: left; }
.submit { width: 50px; margin: auto; background-color: white; border: 1px solid brown; margin-right: 10px; }
#submit { margin-left: 100px;}
#form { margin-bottom: 20px; }

/* Table Styles - Tables are for tabular data */
table { clear: both; width: 100%; margin: 0; background-color: #f5f5f5; border-collapse: collapse;}
td { font-size: 1.1em; padding: 6px;}
.altrow { background-color: #e5e5e5; }
#timetable {width: 300px; float: left;}

/* Content Styles */
p {color: #153a7e; font: 1.3em Arial, Verdana, Sans-serif; line-height: 145%; margin: 0;}
.altbox { background-color: #E5DDCF; padding: 10px; margin-bottom: 15px;}
#content { padding: 20px; margin: 0px; margin-bottom: 0px; width: 660px; color: #000;}
#content ul { font-size: 1.2em; font-family: Arial, Verdana, Sans-serif; margin-bottom: 20px; margin-top: 15px;}
#tableDiv { margin-top: 20px; }
#sponsorDiv { width: 575px; float: left; height: 660px; position: relative; padding: 0 0 10px 0; }
#sponsorDiv h3 {padding: 0 0 10px 0; }
#sponsorDiv img { margin-right: 0;}
#contestCat { float: left; width: 100px; font-size: 12px; }
#contestTime { float: left; width: 100px; display: block; font-size: 12px; }
#prizebox {float: left; width: 250px; margin-left: 20px;}

.footer {  margin: auto; width: 685px; padding: 4px 2px; color: #fff; text-align: center; }
.footer p {float: left; width: 145px; font-size: 10px; color: #fff;}
#footershim {background: #5d80bc; height: 20px; width: 700px; margin: auto auto; clear: left;}
/* Footer Navigation */
#nav { color: white; } 
ul#footerNavlist { width: auto; height: 20px; float: right; white-space: nowrap; padding-top: 0px; padding-left: 10px; margin-top: 0px; margin-bottom: 0px; }
#footerNavlist li { display: inline; list-style-type: none; }
#footerNavlist a:link, #footerNavlist a:visited { padding: 3px; color: #fff; text-decoration: none; }
#footerNavlist a:hover { color: #fff; background-color: #5D80BC; text-decoration: none; }


a:link { color: #b7161d; }
a:visited { color: #60785a; }
a:hover { color: #002463; }

.smallbold { font-size: 11px; font-weight: bolder; }

.hr { border-top: 1px solid #294622;; width: 270px; height: 1px; margin: 0 0 0 7px; padding: 0; } /* Inconsistant HR styling across browsers forces the use of a div with this class in lieu of the hr xhtml markup */

/* Misc Styles */
.contactinfo { width: 300px; background: #dbd5c2; padding: 10px; height: 155px; font-size: 1.1em;}

/* Navigation - Uses an unordered list and styles them as buttons */

#navcontainer
{
	width: 700px;

	background-color: #153b7d;
	height: 28px;
}

#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }

#navcontainer ul
{
margin: 0;
padding: 0 0 0 0;
color: #FFFFFF;
font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
font-size: 1.0em;
letter-spacing: 0px;
font-weight: bold;
}

#navcontainer ul li a
{
padding: 2px 20px;
background-color: #153b7d;
color: #FFFFFF;
text-decoration: none;
float: left;
border-right: 1px solid #002463;
font: normal 1.2em/24px Verdana, lucida, arial, helvetica, sans-serif;
}

#navcontainer ul li a:hover
{
background-color: #002463;
color: #fff;
}

#mainNavlist li a:hover, #navlist li a:active
{
color: #60785a;
text-decoration: none;
background: #CC3333;
text-align: left;
font: normal 1.2em/24px Verdana, lucida, arial, helvetica, sans-serif;
}

#mainNavlist li a:hover { }


/* Images & Alignments

	Using 'class="alignright"' on an image will align the image to the right. 
	And using 'class="centered', will of course center the image. This is much
	better than using align="center", being much more futureproof (and valid)              */
	
img.centered { display: block; margin-left: auto; margin-right: auto; border: none;}
img.alignright { padding-left: 8px; margin: 0 0 0px 0px; display: inline; border: none; }
img.alignleft { padding-right: 5px; margin: 0 0px 0px 0; display: inline; border: none; }
.alignright { float: right; }
.alignleft { float: left; }


/* Hacks - May become outdated when/if IE ships with proper CSS support */

div.spacer {
	clear: both;
} /* The infamous "clear div" or "spacer div" hack. An empty div placed below floated divs that clears the floats, so that content can continue to flow below the clear. http://www.complexspiral.com/publications/containing-floats/ */