/*
	CSS based on "Perfect" and "Ultimate" layouts by Matthew James Taylor.
	Matthew James Taylor: "This layout is FREE for anyone to use."
	http://matthewjamestaylor.com/
	http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
	http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths
	http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width
	http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

	SITE COLORS:
	FFD36C - header background
	FFEECC - light
	EAD19F - columns
	FFF7E8 - footer
	9F7920 - dark

*/

/* @import url("reset.css"); */

/* General styles */
body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	min-width:950px;    /* Minimum width of layout - remove line if not required */
						/* The min-width property does not work in old versions of Internet Explorer */
						/* The min-width should be equal to the fixed width specified in #fixedwidth */
	color:white;
	background-color:black;
}
h1, h2, h3 {
	margin:.8em 0 .2em 0;
	padding:0;
}
p {
	margin:.4em 0 .8em 0;
	padding:0;
	color:white;
	background-color:black;
}

/* Header styles */
#header {
	clear:both;
	float:left;
	width:100%;
	/* ABD add logo */
	height:88px;
	background-image:url(http://www.djdrewdiggle.com/img/header-logo-png.png);
	background-position:top center;
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-color:black;	/* either a color or transparent if we want background to show through */
	overflow:visible;		/* ABD This chops off any overhanging items */
	/* ABD not used: border-bottom:1px solid #000; */
	color:white;
}
#header p, #header h1, #header h2 {
	padding:.4em 15px 0 15px;
	margin:0;
}
#header ul {
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
}
#header ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}
#header ul li a {
	display:block;
	float:left;
	margin:0 0 0 1px;
	padding:3px 10px;
	text-align:center;
	background:#eee;
	color:#fff;
	text-decoration:none;
	position:relative;
	left:15px;
	line-height:1.3em;
}
#header ul li a:hover {
	background:#369;
	color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
	color:#fff;
	background:#000;
	font-weight:bold;
}
#header ul li a span {
	display:block;
}

/* column container */
.colmask {
	position:relative;		/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;	/* This chops off any overhanging divs */
	color:white;
	background-color:black;
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;				/* width of page */
	position:relative;
	color:white;
	background-color:black;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead
							only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
	color:white;
	background-color:black;
}

/*======================================================================*/
/*
	-> all must be in percents
	
	// these three must add up to 100%
	right column width = 6%
	middle column width = 88%
	left column width = 6%
	
	middle column left padding = 2%
	middle column right padding = 2%
	
	left column left padding = 2%
	left column right padding = 2%
	
	right column left padding = 2%
	right column right padding = 2%

	right column content width = right column width - (right column left padding + right column left padding) = 2%
	middle column content width = middle column width - (middle column left padding + middle column left padding) = 84%
	left column content width = left column width - (left column left padding + left column left padding) = 2%
*/


/* 3 Column settings */
.threecol {
	background:#000000;		/* right column background colour */
	color:white;
	background-color:black;
}
.threecol .colmid {
	right:6%;				/* right column width */
	background:#fff;		/* middle column background colour */
	color:white;
	background-color:black;
}
.threecol .colleft {
	right:88%;				/* middle column width */
	background:#000000;		/* left column background colour */
	color:white;
	background-color:black;
}
.threecol .col1 {
	width:84%;				/* middle column content width (column width minus padding on either side) */
	left:102%;				/* 100% plus middle column left padding */
}
.threecol .col2 {
	width:2%;				/* left column content width (column width minus padding on either side) */
	left:12%;				/* right column width plus (middle column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:2%;				/* right column content width (column width minus padding on either side) */
	left:104%;				/* Please make note of the brackets here:
							(100% - left column width) plus (middle column left and right padding) plus (left column left and right padding) plus (right column left padding) */
							/* (100 - 6) + (2 + 2) + (2 + 2) + (2)
	text-align:center;	/* TEST */
}

/*======================================================================*/


/* Footer styles */
#footer {
	clear:both;
	float:left;
	width:100%;
	/* ABD not used: border-top:1px solid #000; */
	background:#000000;
	overflow:hidden;		/* ABD This chops off any overhanging items */
	padding:1em 0;	/*TEST*/
	padding-bottom:6em;
	/* NOTE: cannot put horizontal padding here or it will screw things up */
	color:#444444;
	background-color:black;
	text-align:center;
}
#footer p {
	padding:0.2em 1em;
	margin:0;
	text-align:center;
	color:#444444;
}

/* Fixed-width styles */
body {
	text-align:center;		/* required to center the fixed width content */
}
#fixedwidth {
	margin:0 auto;			/* required to center the fixed width content */
	width:650px;			/* the fixed width: you can use px, em or % */
	text-align:left;		/* required to have left-aligned text in our content since our body text-align is centered */
}