/*  =====================================================================  */
/*  CSS Document style.css for www.mrpickle.ca
    Copyright 2008 sevenworks Creative Design Studio, All Rights Reserved
    www.sevenworks.ca and www.sevenworksonline.com
    You can email comments to css@sevenworksonline.com
                                              Version 1.1 - 30 April 2008  */
/*  =====================================================================  */


/*  to reset anoying browser defaults and begin with a clean canvas:              */
@import url(master-reset.css);
/*  to force IE6 to behave I have IE-ugh.css conditionally included in the XHTML  */
/*  and include this little piece of text visible only to [lt IE 7] users        */
.oldie, .oldie_left, oldie_right, .clearboth {
	display: none;
	}


/* With no further ado, let us get to the REAL work! */
/* START */
body {
	margin: 0 auto;
	background: #017900 url(/images/infinity.jpg) repeat-x top left;
	}
h2, h3, h4, h5, h6 {
	padding: 6px 0 3px;
	color: #fff;
	text-transform: uppercase;
	}
/* POSITION THE LARGE BACKGROUND IMAGE */
#wrapper {
	display: table;
	height: 600px;
	width: 100%;
	margin: 0 auto;
	background: transparent url(/images/background.jpg) no-repeat top center;
	position: relative;
	}
/* NEW IMPLEMENTATION OF THE LOGO (well, new for me!!) */
h1 a#home-link {
	display: block;
	height: 89px;
	width: 262px;
	margin: 84px auto 0;
	background: transparent url(/images/famous-logo.png) no-repeat top left;
	position: relative;
	text-indent: -9999px;
	}
/* POSITION THE BODY OF THE WEBSITE */
#content {
	width: 760px;
	margin: 15px auto 0;
	position: relative;
	}
#content img.mr-pickle-guy {
	position: absolute;
	left: -49px;
	}
ul#navigation {
	position: absolute;
	top: 190px;
	left: 219px;
	}
ul#navigation li a {
	display: block;
	height: 20px;
	width: 140px;
	padding: 5px 0 0;
	background-color: transparent;
	border-bottom: 2px dashed #d4d444;
	font-size: 0.95em;
	color: #fff;
	text-transform: uppercase;
	}
#home-content, #about-content, #pickles-and-products-content, #locations-and-events-content, #contact-content,
#special-orders-content, #fundraisers-content, #just-for-fun-content, #privacy-statement-content {
	overflow: auto;
	display: block;
	height: 325px;
	width: 350px;
	background-color: transparent;
	position: absolute;
	top: 30px;
	left: 390px;
	color: #d4d444;
	}
/* STYLE THE MAIN CONTENT */
/* but HOME is different */
#home-content p.home-welcome-info {
	font: 1.8em/2em Techno, Impact, Haettenschweiler, Chicago, Charcoal, sans-serif;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	}
#home-content p.home-contact-info {
	display: block;
	position: absolute;
	bottom: 0px;
	right: 0px;
	text-align: right;
	}
#about-content, #pickles-and-products-content, #locations-and-events-content, #contact-content,
#special-orders-content, #fundraisers-content, #just-for-fun-content, #privacy-statement-content {
	font: 0.95em/1.75em Verdana, Tahoma, sans-serif;
	}
/* products page needs some special attention, too */
#pickles-and-products-content div {
	display: block;
	min-height: 120px;
	margin: 0 7px 15px 0;
	}
#pickles-and-products-content img {
	margin: 0 15px 0 0;
	border: #000 solid 2px;
	float: left;
	clear: left;
	}
/* FANCY UP THE NAVIGATION - TELL VISITORS WHERE THEY ARE */
#Home ul li.home-nav a, #About ul li.about-nav a,
#Pickles-and-Products ul li.pickles-and-products-nav a,
#Locations-and-Events ul li.locations-and-events-nav a,
#Special-Orders ul li.special-orders-nav a, 
#Fundraisers ul li.fundraisers-nav a {
	border-bottom: 2px solid #c36;
	color: #c36;
	}
#Home ul li.home-nav a:after, #About ul li.about-nav a:after,
#Pickles-and-Products ul li.pickles-and-products-nav a:after,
#Locations-and-Events ul li.locations-and-events-nav a:after,
#Special-Orders ul li.special-orders-nav a:after,
#Fundraisers ul li.fundraisers-nav a:after {
	content: " »";
	}
/* POSITION THE CREDITS */
#credits {
	display: table;
	height: 50px;
	width: 100%;
	margin: 0 auto;
	background: transparent url(/images/grass.jpg) no-repeat top center;
	position: relative;
	top: 371px;
	}
p.copyright {
	display: block;
	width: 500px;
	margin: 0 auto;
	position: relative;
	top: 30px;
	left: 90px;
	font-size: 0.8em;
	}
#sevenworks {
	width: 110px;
	margin: 0 auto;
	position: relative;
	top: 15px;
	left: 307px
	}
/* STYLE THE LINKS */
a:link {
	font-weight: bold;
	color: #fff;
	}
ul#navigation li a:link {
	font-weight: normal;
	}
a:visited {
	color: #fff;
	}
a:hover {
	color: #c36;
	}
ul#navigation li a:hover {
	border-bottom: 2px dashed #fff;
	color: #fff;
	}
/* AND WE'RE DONE! */
/* YEE-HAW! */

/*  =========================================================  */
/*  my LIBRARY OF PROPERTIES AND FONTS TO MAKE CSSing EASIER:  */
/*  =========================================================  */
/*  -- order of properties ----------------------------------  */
/*	overflow: ;
	visibility: ;
	display: ;
	height: ;
	width: ;
	margin: ;
	border: ;
	outline: ;
	padding: ;
	background: ;
	position: ;
	top: ;
	left: ;
	bottom: ;
	right: ;
	float: ;
	vertical-align: ;
	z-index: ;
	list-style: ;
	text-decoration: ;
	font: ;
	color: ;
	text-align: ;
	text-transform: ;
	text-indent: ;
	text-shadow: ;
	white-space: ;
	line-height: ;
	letter-spacing: ;
	word-spacing: ;
	content: ;
	quotes: ;
	curser: ;
	*/
/*  -- fonts selection --------------------------------------  */
/*  generic font-families: serif, sans-serif, cursive, fantasy, monospace
    my favorite sans-serif fonts: "Lucida Grande", "Lucida Sans Unicode", Geneva, Helvetica, Tahoma, "Trebuchet MS", Arial, sans-serif
    (I removed verdana from the list because it's too wide for my designs.)
    my favorite sans-serif fonts for HEADLINES: Techno, Impact, Haettenschweiler, Chicago, Charcoal, sans-serif
    my favorite serif fonts: Georgia, Palatino, "New York", "Times New Roman", serif
    my favorite monospace fonts: Monaco, "Andale Mono", "Lucida Sans Typewriter", "Courier New", Courier, "VT-100", monospace
    my favorite cursive fonts: "Monotype Corsiva", Textile, "Apple Chancery", "Zapf Chancery", cursive
    my favorite fantasy fonts: Copperplate, "Copperplate Gothic Light", fantasy
    */
/*  -- order of pseudo classes ------------------------------  */
/*  LoVe and HAte - a:link a:visited a:hover a:active a:focus  */
/*  =========================================================  */