/* ------ NOTES ---------------------------------------------------------------

Global CSS for RSVP Event Hire, lovingly crafted by Damien Buckley, Propeller Graphic Design & Marketing (http://www.propellerglobal.com).
See ancilliary file for IE patches.
V:10/06/09

--------- CONTENTS ------------------------------------------------------------

1: GLOBAL RESET
2: BODY & CONTAINER STYLES
	a) Masthead
	b) Skip Links
	c) H1 - logo
	d) Primary Nav
	e) Search
	f) Breadcrumb Navigation
3: MAIN CONTENT CONTAINER
	a) Main Content Divisions
	b) Secondary Content Divisions
4: PRODUCT LISTINGS
	a) Main Products Page
	b) Product Listing Display
	c) Pagination
	d) Product Display - Main Page
5: EVENTS LISTING
	a) Events List - Events Page
6: FOOTER
7: DESIGN PAGE
8: CONTACT PAGE & NEWSLETTER FORM
	a) vCard
9: TYPOGRAPHY
	a) Inline Images
	b) Hide Show
10: MISC

---------------------------------------------------------------------------- */

/* 1. Global Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: small; font-family: inherit; vertical-align: baseline;
	}

ol, ul {list-style: none;}

table {border-collapse: separate; border-spacing: 0;}

caption, th, td {text-align: left; font-weight: normal;}

blockquote:before, blockquote:after,
q:before, q:after {content: "";}

blockquote, q {quotes: "" "";}

strong {font-weight:bold;}

em {font-style:italic;}

img {border:none; display:block;}

/* 2. Body & Common Container Styles
============================================================================ */

body {
	text-align: center;
	color:#333;
	font-family: "Lucida Grande", Geneva, Helvetica, sans-serif;
	font-size:100%;
	background-color:#262262
	}

#container, #secondaryContent, #masthead div {
	overflow:hidden;
	width:880px;
	text-align:left;
	margin:0 auto;
	}

/* 2a. Masthead
============================================================================ */

#masthead {background-color:#FFF;}

#masthead div {background-color:#FFF;}

/* 2b. Skip links
============================================================================ */

ul#accessibility {
	text-align:center;
	margin-bottom:5px;
	}

#accessibility li {display:inline;}

#accessibility a {padding:2px;}

#accessibility a:link, #accessibility a:visited {
	color:#FFF;
	text-decoration:none;
	}

#accessibility a:hover, #accessibility a:active {
	background-color:#262262;
	text-decoration:none;
	}

/* 2c. h1 - logo
============================================================================ */

h1 {
	height:100px;
	width:200px;
	position:relative;
	}

h1 a {
	position:relative;
	display:block;
	height:128px;
	width:200px;
	color:#333;
	}

h1 a span {
	position:absolute;
	top:0;
	left:0;
	height:128px;
	width:200px;
	background:transparent url(/images/h1.jpg) no-repeat top left;
	}

/* 2d. Primary Nav
============================================================================ */

ul.primaryNav {
	position:relative;
/*	width:680px;*/
	width:880px;
	height:34px;
	margin:0;
	}

.primaryNav li {
	display:inline;
	float:right;
	margin-left:1px;
	height:34px;
	padding-right:3px;
	background:#FC3 url(/images/nav_bg_end.jpg) top right no-repeat;
	}

.primaryNav li a {
	display: block;
	width:8em;
	padding-left:3px;
	line-height:34px;
	background:#FC3 url(/images/nav_bg.jpg) top left no-repeat;
	text-align:center;
	}

.primaryNav a:link, .primaryNav a:visited {
	font-weight:bold;
	color:#262262;
	text-decoration:none;
	}

#masthead .primaryNav a:hover, #masthead .primaryNav a:active {
	background-color:#262262;
	background-position:0 -35px;
	color:#FC3;
	}

#masthead .primaryNav li:hover, #masthead .primaryNav li:active {background-position:100% -35px;}

.primaryNav a.active {color:#8886B5;}

/* 2e. Search
============================================================================ */

div#searchContainer {
	background:#262262 url(/images/search_bg.jpg) top left repeat-x;
	text-align:right;
	overflow:hidden;
	height:55px;
	}

div#searchContainer div {
	margin:0 auto;
	width:880px;
	}

form#search p {
	display:inline;
	color:#FFF;
	line-height:40px;
	}

#search input {
	display:inline;
	margin:0 5px;
	}

#searchBox {
	margin:0 5px;
	}

div.searchResults {
	margin-bottom:2em;
	}

/* 2f. Breadcrumb Navigation
============================================================================ */

p.breadcrumb {
	float:left;
	color:#FFF;
	line-height:40px;
	}

.breadcrumb a:link, .breadcrumb a:visited {
	color:#FFF;
	text-decoration:none;
	}

.breadcrumb a:hover, .breadcrumb a:active {
	color:#FC3;
	text-decoration:none;
	}

/* 3. Main Content Container
============================================================================ */

#main {
	background-color:#FFF;
	border-bottom:1px solid #FC3;
	}

#container {
	padding:10px 0;
	background-color:#FFF;
	}

/* 3a. Main Content Divisions
============================================================================ */

#content, #slideshow {
	display:inline;
	overflow:hidden;
	}

#content {
	width:200px;
	float:left;
	}

#slideshow, #contactForm, #searchResults, #mainContent {
	float:right;
	width:660px;
	}

/* 3b. Secondary Content Divisions
============================================================================ */

#secondaryContent {
	background-color:#262262;
	color:#FC3;
	padding-top:10px;
	padding-bottom:40px;
	}

#productListing, #eventsListing, #newsletter {
	display:inline;
	overflow:hidden;
	float:left;
	}

#productListing {
	width:200px;
	margin-right:20px;
	}

#eventsListing {
	width:380px;
	margin-right:20px;
	}

#newsletter {
	width:260px;
	}

/* 4. Product Category Listing
============================================================================ */

#productListing ul li {
	line-height:2.5em;
	border-top:1px dotted #FC3;
	list-style:none;
	margin:0;
	padding:0;
	width:200px;
	}

#productListing ul li:first-child {border-top:none;}

#productListing li a:link, #productListing li a:visited {
	display:block;
	color:#FC3;
	text-decoration:none;
	border-right:5px solid #262262;
	margin:0;
	padding:0;
	width:195px;
	}

#productListing li a:hover, #productListing li a:active {
	color:#FFF;
	text-decoration:none;
	border-right-color:#FC3;
	}

/* 4a. Product Category Listing - Main Products Page
============================================================================ */

.products #productListing ul {
	margin:0;
	padding:0;
	}

.products #productListing ul li {
	line-height:2.5em;
	border-top:1px dotted #262262;
	}

.products #productListing ul li:first-child {border-top:none;}

.products #productListing a:link, .products #productListing a:visited {
	display:block;
	color:#262262;
	text-decoration:none;
	border-right:5px solid #FFF;
	}

.products #productListing a:hover, .products #productListing a:active {
	color:#262262;
	border-right-color:#262262;
	text-decoration:none;
	}

/* 4b. Product List Display - Main Products Page
============================================================================ */

#productDisplay {
	width:675px;
	float:right;
	}

#productDisplay h2 {margin-left:15px;}

#main #productDisplay ul {
	padding:0;
	position:relative;
	}

#productDisplay ul li {
	list-style:none;
	padding:10px 0 0;
	margin:0;
	overflow:hidden;
	display:inline;
	float:left;
	width:210px;
	height:170px;
	margin-left:15px;
	}

#productDisplay ul li img {
	width:100px;
	float:right;
	margin-top:10px;
	padding:2px;
	background-color:#FFF;
	border:1px solid #262262;
	}

#productDisplay .price {
	font-size:110%;
	font-weight:bold;
	}


/* 4c. Main Products Page - Pagination
============================================================================ */

.products #main, .events #main {padding-bottom:30px;}

div.pagination {
	width:900px;
	position:relative;
	top:-27px;
	margin:0 auto;
	}

div.pagination img {
	display:inline;
	margin:0 10px;
	}

/* 4d. Product Display - Main Product Page
============================================================================ */

.product {
	margin-left:15px;
	overflow:hidden;
	}

#productDisplay .product h2 {
	margin-left:0;
	font-size:150%;
	}

.product img {
	float:right;
	padding:2px;
	background-color:#FFF;
	border:1px solid #262262;
	}

/* 5. Events Listing - Excerpt
============================================================================ */

#eventsListing li {
	margin-bottom:0.5em;
	padding-top:0.5em;
	border-top:1px dotted #FC3;
	overflow:hidden;
	}

#eventsListing ul li:first-child {border-top:none;}

#eventsListing h4 {margin-bottom:0.5em;}

#eventsListing h4 a:link, #eventsListing h4 a:visited  {
	font-weight:bold;
	font-size:1.2em;
	color:#FC3;
	text-decoration:none;
	}

#eventsListing h4 a:visited {font-weight:normal;}

#eventsListing h4 a:hover, #eventsListing h4 a:active {color:#FFF;}

#eventsListing img {
	float:right;
	margin-left:5px;
	padding:2px;
	background-color:#FFF;
	}

#eventsListing img:hover {background-color:#FC3;}

/* 5a. Events List - Events Page
============================================================================ */

.events #content ul {
	margin:0;
	padding:0;
	}

.events #content li {
	margin:0;
	padding:0;
	line-height:1.5em;
	list-style:none;
	border-top:1px dotted #262262;
	}

.events #content ul li:first-child {border-top:none;}

.events #content a:link, .events #content a:visited {
	display:block;
	color:#262262;
	text-decoration:none;
	border-right:5px solid #FFF;
	}

.events #content a:hover, .events #content a:active {
	color:#262262;
	border-right-color:#262262;
	text-decoration:none;
	}

.events #mainContent div {
	border-bottom:1px dotted #262262;
	padding-bottom:0.5em;
	margin-bottom:0.5em;
	overflow:hidden;
	}

#mainContent div a:link, #mainContent div a:visited {
	color:#262262;
	text-decoration:none;
	}

#mainContent div a:hover, #mainContent div a:active {
	color:#FC3;
	text-decoration:none;
	background-color:#262262;
	}

.events #mainContent div h3 {
	border-top:none;
	padding-top:0;
	font-size:1.3em;
	}

p.date {
	font-style:italic;
	font-size:0.9em;
	}

/* 6. Footer
============================================================================ */

#footer {
	padding:15px 0;
	color:#FC3;
	}

#footer ul {
	width:880px;
	margin:10px auto;
	text-align:center;
	}

#footer li {
	padding:0 10px;
	border-right:1px solid #FC3;
	display:inline;
	}

#footer a {text-decoration:none;}

#footer a:link, #footer a:visited {color:#FC3;}

#footer a:hover, #footer a:active {color:#FFF;}

#footer li.sponsored {border-right:none;}

/* 7. Design Page
============================================================================ */

.design #content {
	width:350px;
	margin-left:0;
	float:left;
	}

.design #slideshow {
	width:500px;
	float:left;
	margin-left:30px;
	}

/* 8. Contact & Newsletter Subscribe Forms
============================================================================ */

#zemContactForm, #zemContactForm div {margin:0; padding:0;}

#zemContactForm fieldset, #newsletter fieldset {
	float: left;
	clear: left;
	margin: 0 0 1.5em 0;  
	padding: 0;
	}

#zemContactForm fieldset {
	width: 658px;
	color: #262262;  
	border:1px solid #262262;
	background:#FFF url(/images/form_bg.jpg) repeat-x;
	}

#newsletter fieldset {
	width: 258px;
	color: #262262;  
	border:1px solid #FC3;
	background:#FC3 url(/images/newsletter_bg.jpg) bottom left repeat-x;
	}

#newsletter fieldset ol {
	margin-top:1em;
	}

#zemContactForm legend, #newsletter legend {
	margin-left: 1em;
	font-weight: bold;
	background:#FFF;
	}

#newsletter legend span {  
	position: absolute;  
	margin-top: 0.5em;  
	}

#zemContactForm fieldset ol, #newsletter fieldset ol {  
	padding: 1em 1em 0 1em;  
	list-style: none; 
	} 

#zemContactForm fieldset li {  
	padding-bottom: 1em;
	margin-left:0;
	float: left;  
	clear: left;
	width: 100%;
	list-style:none;
	}

#newsletter fieldset li {  
	padding-bottom: 1em;
	margin-left:0;
	list-style:none;
	}

#zemContactForm label, #newsletter fieldset label {  
	float: left;  
	width: 10em;  
	margin-right: 1em;
	text-align:right;
	}

#newsletter fieldset label {
	width:3em;
	}

#zemContactForm fieldset.submit, #newsletter fieldset.submit {   
	float: none;  
	width: auto;  
	border-style: none;   
	background-color: transparent;
	background-image:none;
	margin-bottom:0;
	}

#zemContactForm .zemError /*, ul.comments_error*/ {
	margin-bottom:1.5em;
	padding:1em 1em 0;
	background-color:#FCF6DE;
	border:1px solid #FC3;
	color:#262262;
	}

#zemContactForm .zemError li /*, ul.comments_error li*/ {
	padding-bottom:1em;
	list-style:none;
	}

#zemContactForm fieldset.submit input, #newsletter fieldset.submit input {
	background:#FC3 url(/images/form_btn_bg.jpg) top left no-repeat;
	width:125px;
	height:35px;
	border:none;
	font-weight:bold;
	color:#262262;
	}
#newsletter fieldset.submit input {
	background:#FC3 url(/images/form_btn_bg_b.jpg) top left no-repeat;
	}

#zemContactForm fieldset.submit input:hover, #newsletter fieldset.submit input:hover {
	color:#FC3;
	background-position:bottom left;
	}

/* 8a: vCard
============================================================================ */

div.vcard {
	font-size:1.1em;
	}

div.vcard div.adr {margin-bottom:0.5em;}

div.vcard a {
	text-decoration:none;
	color:#262262;
	}

/* 9. Typography
============================================================================ */

p {
	line-height:1.25em;
	margin-bottom:0.5em;
	}

h2 {
	font-size:1.3em;
	color:#262262;
	font-weight:bold;
	margin-bottom:0.5em;
	}

h3 {
	color:#FC3;
	font-weight:bold;
	margin-bottom:0.5em;
	font-size:1.2em;
	}

#main h3 {
	padding-top:0.5em;
	border-top:1px dotted #262262;
	color:#262262;
	}

#main h3 a:link, #main h3 a:visited {
	color:#262262;
	font-weight:bold;
	font-size:0.9em;
	margin-bottom:0.5em;
	text-decoration:none;
	}

#main h3 a:hover, #main h3 a:active {
	color:#FC3;
	background-color:#262262;
	}

#secondaryContent h3 {
	padding-left:30px;
	background: #262262 url(/images/h3_bg.jpg) top left no-repeat;
	line-height:25px;
	}

#secondaryContent h3 a:link, #secondaryContent h3 a:visited {
	color:#FC3;
	font-weight:bold;
	font-size:1em;
	margin-bottom:0.5em;
	text-decoration:none;
	}

#secondaryContent h3 a:hover, #secondaryContent h3 a:active {
	color:#FFF;
	}

#main ul {
	padding-left:0.5em;
	}

#main li {
	line-height:1.25em;
	margin:0 0 0.5em 1em;
	padding-left:0.5em;
	list-style:disc;
	}

#content a:link, #content a:visited, #mainContent a:link, #mainContent a:visited {
	color:#262262;
	}

#content a:hover, #content a:active, #mainContent a:hover, #mainContent a:active {
	color:#262262;
	}

/* 9a. Inline Images
============================================================================ */

img.left, img.right {
	padding:2px;
	background-color:#FFF;
	border:1px solid #262262;
	}

img.left {
	clear:left;
	float:left;
	margin:0 8px 8px 0;
	}

img.right {
	clear:right;
	float:right;
	margin:0 0 8px 8px;
	}

/* 9b: Hide - Show stuff
============================================================================ */

div#switch {
	position:relative;
	margin:0 auto;
	width:1005px;
	}

a.collapse {
	display:block;
	position:absolute;
	height:50px;
	width:50px;
	top:-25px;
	right:0;
	z-index:1000;
	overflow:hidden;
	}

a.collapse img {
	display:block;
	}

.on a.collapse img {
	position:relative;
	top:-54px;
	}

/* 10: Misc
============================================================================ */

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide */

.clear {clear:left;}