body, div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
body {
    background: #e8ddcb url(../_images/bg.jpg) 0 0 repeat-x;
    text-align: center;
}
p, div, li,  h1, h2, h3, h4, td, input, select, textarea {
	font-family: Arial;
	font-size: 13px;
	color: #000;
	line-height: 18px;
}
h1, h2, #top, #menu li {
	font-family: Verdana;
}
p, h1, h2, h3, h4, #content ul, #content ol, #content table {
	margin-bottom: 15px;
}
a img, :link img, :visited img {
    border: none
}
a:link, a:visited {
    color: #475440;
    text-decoration: underline;
}
a:hover, a:active {
    color: #74944e;
    text-decoration: underline;
}
div.clear {
    clear: both;
    overflow: hidden;
    height: 1px;
}
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }


/* ----------------------------------- */
/* WRAPPER
/* ----------------------------------- */
#wrapper {
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

/* ----------------------------------- */
/* TOP
/* ----------------------------------- */
#top {
	margin: 0 30px;
}

	#mobile-menu { display: none; }

	#logo { float: left; margin-top: 45px; }
	
	#top-menu, #menu {
		float: right;
	}
	#top-menu {
		margin-top: 34px;
		font-size: 11px;
		color: #FFF;
		height: 15px;
	}
		#top-menu span {
			margin-left: 15px;
		}
		#top-menu a { 
			color: #FFF;
			text-decoration: none;
		}
		#top-menu a:hover, #top-menu a:active { text-decoration: underline; }
		
		#top-menu form {
			display: inline;
			margin-left: 15px;
		}
			#top-menu form input {
				vertical-align: middle;
			}

	#menu {
		margin-top: 24px;
		clear: right;
	}
		#menu li {
		  	float: left;
		  	margin: 0 0 0 1px;
		  	padding: 0;
			font-weight: bold;
			font-size: 12px;
			list-style: none;
		}
		#menu li a, #menu li a:link, #menu li a:active, #menu li a:visited {
		  	color: #FFF;
		  	padding: 8px 10px;
		  	text-decoration: none;
			background: #494949;
			line-height: 30px;
			height: 30px;
		}
		#menu li a:hover {
		  	background: #767575;
		  	color: #FFF;	
		}

/* ----------------------------------- */
/* MAIN
/* ----------------------------------- */
#main {
	background: #FFF;
	border-radius: 10px;
	padding: 8px;
}
#content {
	margin: 30px;
}
	#main h2 {
		color: #74944e;
		font-size: 16px;
	}
	
	#content li {
		margin-left: 25px;
	}
	
/* ----------------------------------- */
/* HOME
/* ----------------------------------- */
#banner {
	height: 158px;
	background: transparent url(../_images/banner.jpg) right center no-repeat;
	padding: 0 30px;
	border-radius: 5px;
}
	#banner h1, #banner p {
		color: #FFF;
		margin-bottom: 20px;
		font-family: verdana;
	}
	#banner h1 {
		font-size: 20px;
		padding-top: 45px;
	}
	#banner p {
		font-size: 16px;
	}

.intro-left { float: left; }
.intro-right { float: right; }
.intro {
	width: 45%;
	margin-bottom: 20px;
}
	.intro h2, .intro p {
	margin-left: 105px;
	}
	.intro h2 {
		margin-bottom: 4px;
	}
	.intro img {
		float: left;
	}

#discounts {
	margin: 0 30px 25px 30px;
	text-align: center;
	font-family: verdana;
	font-size: 13px;
	font-weight: bold;
	color: #c3c3c3;
	background: #2d2d2d;
	border-radius: 5px;
	padding: 10px 20px;
	clear: both;
}
	#home #discounts { margin: 0 0 25px 0; }
	#discounts strong {
		color: #FFF;
	}
	#discounts a:link, #discounts a:visited {
		text-transform: uppercase;
		text-decoration: none;
		color: #7e9d58;
		margin-left: 10px;
	}
	#discounts a:hover, #discounts a:active {
		color: #abc28f;
	}

#custom-covers {
	width: 45%;
	float: left;
	margin-top: 30px;
	display: inline;
}

#rule-changes {
	width: 45%;
	float: right;
	margin-top: 30px;
	display: inline;
}
	#rule-changes h2 {
		font-size: 13px;
		color: #000;
		font-family: arial;
		margin-bottom: 4px;
	}
	#rule-changes dl {
		margin-bottom: 20px;
	}
	#rule-changes dt {
	float: left;
	margin-right: 2px;
	}
	#rule-changes dd {
		color: #818181;
	}

/* ----------------------------------- */
/* SUB PAGES
/* ----------------------------------- */
#header {
	height: 88px;
	background: transparent url(../_images/header.jpg) right center no-repeat;
	padding: 0 30px;
	border-radius: 5px;
}
	#header h1 {
		font-size: 28px;
		color: #FFF;
		padding-top: 40px;
	}
	
	/* Custom Covers */
	#custom-cover-images {
		width: 100%;
	}
	#custom-cover-images li {
		float: left; 
		list-style: none;
		width: 29%;
		text-align: center;
		padding: 0 2% 20px 2%;
		margin: 0;
	}
	#custom-cover-images img { max-width: 100%; height: auto; }
	#custom-cover-images li:nth-child(3n+1) { clear: left; }
	#custom-cover-images a:link img, #custom-cover-images a:visited img {
		border: 2px solid #CCC;
	}
	#custom-cover-images a:hover img, #custom-cover-images a:active img {
		border: 2px solid #666;
	}
	
	/* Product pages */
	.product-photo {
		float: right;
		margin-left: 35px;
		margin-bottom: 20px;
		display: inline;
	}
	
	p.highlight {
		background: #eeefe4;
		padding: 8px;
	}
	
	#product-form {
		margin-bottom: 20px;
	}
		#product-form input {
			/*float: left*/
			vertical-align: middle;
			margin: 0 0 10px 0;
		}
		#product-form label {
			font-size: 14px;
			font-weight: bold;
		}
		#product-form #qty {
			padding: 6px;
			font-size: 14px;
			font-weight: normal;
			border: 1px solid #999;
			margin-right: 10px;
			text-align: center;
		}
	
	
	/* Contact page */
	#contact-info {
		width: 300px;
		float: right;
		margin-left: 30px;
	}
	
	#contact-form td {
		vertical-align: top;
	}
	input, select, textarea {
		color: #000;
	}

	label.error {
		display: block;
		color: #FF0000;
		font-weight: bold;
	}
	input.error {
		border: 2px solid #FF0000;
	}

/* ----------------------------------- */
/* FOOTER
/* ----------------------------------- */
#footer {
	padding: 0 30px; 
	max-width: 840px;
	margin: 15px auto;
	text-align: right;
}
	#footer p {
		font-size: 11px;
		line-height: 13px;
	}
	#footer p#footer-menu {
		float: left;
		text-align: left;
		line-height: 16px;
	}
	
.red {
	color: #FF0080;
}


/* ----------------------------------- */
/* MOBILE
/* ----------------------------------- */

@media screen and (max-width: 840px) {
	
	body { background-image: none; }
	
	#top { margin: 0; padding-left: 5%; padding-right: 5%; width: 90%; }
	
	#top { background: #2d2d2d; text-align: left; padding-top: 25px; padding-bottom: 25px; }
	#top #logo { float: none; margin: 0 0 15px 0; }
	#top #top-menu { float: none; margin: 0; border-top: 1px solid #555; padding-top: 10px; text-align: center; }
	
	#main { border-radius: 0; }
	
	#mobile-menu { float: right; display: block; font-size: 16px; color: #FFF; text-decoration: none; text-transform: uppercase; margin-top: 15px; }
	#mobile-menu {
	  position: relative;
	  padding-left: 1.25em;
	}
	#mobile-menu:before {
	  content: "";
	  position: absolute;
	  left: 0;
	  top: 4px;
	  width: 1em;
	  height: 0.15em;
	  background: white;
	  box-shadow: 
	    0 0.25em 0 0 white,
	    0 0.5em 0 0 white;
	}
	#menu { display: none; margin-bottom: -25px; }
	.open #menu { display: block; float: none; clear: both; }
	.open #menu li { display: block; float: none; font-size: 16px; text-align: center; margin: 0; padding: 0; text-align: center; border-bottom: 1px solid #333; }
	.open #menu li a { color: #FFF; padding: 15px 20px; height: auto; font-size: 16px; display: block; }
	
	
	#discounts strong { display: block; }
	
	#footer { text-align: center; }
	#footer p#footer-menu { float: none; text-align: center; }

}

@media screen and (max-width: 480px) {
	
	#logo { max-width: 175px; height: auto; }
	#mobile-menu { margin-top: 10px; }
	
	#header, #banner { background: #7f9e58; height: auto; padding-top: 40px; padding-bottom: 40px; }
	#header h1, #banner h1 { padding: 0; }
	#banner p { margin: 0; }
	
	#discounts a { display: block; }
	
	.intro { float: none !important; width: 100%; margin: 0 0 40px 0; }
	.intro h2, .intro p { margin-left: 0; }
	.intro img { float: none; margin: 0 0 10px 0; }
	
	
	#custom-covers, #rule-changes { margin: 0 30px 40px 30px !important; float: none !important; width: auto !important; }
	
	#custom-cover-images li { width: 100%; float: none; padding: 0; margin: 0 0 20px 0; }
	
	
}