@charset "UTF-8";
/* CSS Document - The Bench Wines*/

/*=STRUCTURE
=== === === === === === === === === === */
html {
background-color: #e2d6a4 url(../images/bg.gif) repeat-x left top;
	
}

body {
	margin: 0;
	padding: 0;
	font-family: arial, helvetica, serif;
	font-size: 80%;
	line-height: 16px;
	color: #4b2807;
	background-color: #e2d6a4;
}

a:link {color: #4b2807; text-decoration: underline bold;}
a:visited {color: #4b2807; text-decoration: underline;}
a:hover {color: #4b2807; text-decoration: none;}
a:active {color: #4b2807; text-decoration: underline;}


body.about dt#who,
body.about dt#who a,
body.about background: #e2d6a4,

body.about dt#menu,
body.about dt#menu a,
body.about background: #e2d6a4,

body.about dt#news,
body.about dt#news a,
body.about background: #e2d6a4,

body.collection dt#collection,
body.collection dt#collection a,
body.collection background: #e2d6a4,

body.happenings dt#happenings,
body.happenings dt#happenings a, 
body.happenings background: #e2d6a4,

body.contact dt#contact,
body.contact dt#contact a, 
body.contact background: #e2d6a4,

body.gift dt#gifts,
body.gift dt#gifts a 

{
	background-position: 0 -22px;
}

.hidden {
	display: none;
}
/*=CHROME BACKGROUND COLOR FIX
=== === === === === === === === === === */
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }


/*=FLASH ELEMENTS
=== === === === === === === === === === */
#upgrade_flash h1 {
	margin: 20px;
	font: 13px/20px Arial, Helvetica, sans-serif;
	color: #4b2807;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.5px;
}
#upgrade_flash p {
	margin: 20px;
	font: 11px/15px Arial, Helvetica, sans-serif;
	color: #4b2807;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.5px;
}
#upgrade_flash img.center {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
}
/*=== === === === === === === === === === */

#upgrade_flash2 p {
	width: 270px;
	margin: 0px;
	font: 11px/15px Arial, Helvetica, sans-serif;
	color: #4b2807;
	font-weight: bold;
	margin-bottom: 4px;
	text-align: center;
}
#upgrade_flash2h p {
	width: 200px;
	margin: 0px;
	font: 11px/15px Arial, Helvetica, sans-serif;
	color: #4b2807;
	font-weight: bold;
	margin-bottom: 4px;
	text-align: center;
}


/*=WRAPPER/CONTAINER
=== === === === === === === === === === */
.clear {
	clear: both;
}

#page-container {
	background: #ffffff;
	width: 890px;
    border-top: 1px solid #626350;
	border-left: 1px solid #626350;
	border-right: 1px solid #626350;;
	border-bottom: 1px solid #626350;;
	margin: auto;
}


/*=COMMON AND NAVIGATION ELEMENTS
=== === === === === === === === === === */
.hidden { display: none; }
.unhidden { display: block; }

.logo {
	background: url(../images/logo.gif) no-repeat left top;
	width: 30;
	height: 70px;
	margin-top: 10px;
	margin-left: 20px; 
	position: fixed top: 15px;
}
#link a {
	position: relative;
	top: 0px; left: 0px;
	height: 70px; width: 156px; display: block; 
}
#top-nav {
	clear: both;
	float: right;
	margin-top: 20px; margin-right: 5px; 
	height: 20px; 
	width: 220px;
}
#maillist {
	clear: both;
	float: right;
	margin-bottom: 10px; margin-left: 0px; width: 220px;
	position: relative;
	/* bottom: 0px;
	top: 38px;
	top: 413px;
	left: -20px;
	right: 0px;	
	width: 220px;*/
}
.maillist-button a {
	display: block;
	overflow: hidden;
	width: 161px;
	padding-top: 19px;
	height: 0px !important; 
	background: url(../images/n_maillist.gif) left top;
}
.maillist-button a:Hover{
	background-position: 0 -19px;
}	
.maillist-button-on a {
	display: block;
	overflow: hidden;
	width: 161px;
	padding-top: 19px;
	height: 0px !important; 
	background: url(../images/n_maillist.gif) left top;
}
.maillist-button-on a{
	background-position: 0 -19px;
}	

/* Main Navigation */

#main-nav {
	clear: both;
	margin: auto;
	width: 800px;
	border-top: 1px solid #9cabb0;
}
#main-nav dl { margin: 0; padding: 0; }

/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 11px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

#main-nav dt { float: left; }

#main-nav dt a {
	display: block;
	height: 0px !important;
	height /**/:22px; /* IE 5/Win hack */ 
	padding: 22px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}
#main-nav dt a:hover {
	background-position: 0 -22px;
}

#main-nav dt#home,
#main-nav dt#home a { width: 59px; background-image: url(../images/n_home.gif); }
#main-nav dt#home-on a { width: 59px; background-image: url(../images/n_home.gif); background-position: 0 -22px; }

#main-nav dt#who,
#main-nav dt#who a { width: 87px; background-image: url(../images/n_who.gif); }
#main-nav dt#who-on a { width: 87px; background-image: url(../images/n_who.gif); background-position: 0 -22px; }

#main-nav dt#menu,
#main-nav dt#menu a { width: 100px; background-image: url(../images/n_menu.gif); }
#main-nav dt#menu-on a { width: 100px; background-image: url(../images/n_menu.gif); background-position: 0 -22px; }

#main-nav dt#news,
#main-nav dt#news a { width: 74px; background-image: url(../images/n_news.gif); }
#main-nav dt#news-on a { width: 74px; background-image: url(../images/n_news.gif); background-position: 0 -22px; }

#main-nav dt#collection,
#main-nav dt#collection a { width: 141px; background-image: url(../images/n_collection.gif); }
#main-nav dt#collection-on a { width: 141px; background-image: url(../images/n_collection.gif); background-position: 0 -22px; }

#main-nav dt#happenings,
#main-nav dt#happenings a { width: 85px; background-image: url(../images/n_happenings.gif); }
#main-nav dt#happenings-on a { width: 85px; background-image: url(../images/n_happenings.gif); background-position: 0 -22px; }

#main-nav dt#where,
#main-nav dt#where a { width: 110px; background-image: url(../images/n_where.gif); }
#main-nav dt#where-on a { width: 110px; background-image: url(../images/n_where.gif); background-position: 0 -22px; }

#main-nav dt#contact,
#main-nav dt#contact a { width: 85px; background-image: url(../images/n_contact.gif); }
#main-nav dt#contact-on a { width: 85px; background-image: url(../images/n_contact.gif); background-position: 0 -22px; }

#main-nav dt#space { width: 52px; background-image: url(../images/shim.gif)}

#main-nav dt#space-left { width: 22px; }

/* Sub Collection Navigation */

#sub-nav {
	clear: both;
	margin: auto;
	width: 800px;
	
}
#sub-nav dl { margin: 0; padding: 0; }

/* IE5 Mac Hack \*/ 
#sub-nav { padding-left: 11px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

#sub-nav dt { float: left; }

#sub-nav dt a {
	display: block;
	height: 0px !important;
	height /**/:28px; /* IE 5/Win hack */ 
	padding: 28px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}

#sub-nav dt#byron,
#sub-nav dt#byron a { width: 59px; background-image: url(../images/n_byron.gif);}

#sub-nav dt#cambria,
#sub-nav dt#cambria a { width: 72px; background-image: url(../images/n_cambria.gif);}

#sub-nav dt#io,
#sub-nav dt#io a { width: 32px; background-image: url(../images/n_io.gif);}

#sub-nav dt#kinton,
#sub-nav dt#kinton a { width: 56px; background-image: url(../images/n_kinton.gif);}

/* Sub History Navigation  */

#sub-nav-hist {
	width: 400px;
}
#sub-nav-hist dl { margin: 0; padding: 0; }

/* IE5 Mac Hack \*/ 
#sub-nav-hist { padding-left: 11px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

#sub-nav-hist dt { float: left; }

#sub-nav-hist dt a {
	display: block;
	height: 0px !important;
	height /**/:28px; /* IE 5/Win hack */ 
	padding: 28px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}

#sub-nav-hist dt#sm-valley,
#sub-nav-hist dt#sm-valley a { width: 70px; background-image: url(../images/n_smvally.gif);}

#sub-nav-hist dt#sm-bench,
#sub-nav-hist dt#sm-bench a { width: 79px; background-image: url(../images/n_smbench.gif);}

/* Sub happenings Navigation  */

#sub-nav-happen {
	width: 600px;
}
#sub-nav-happen dl { margin: 0; padding: 0; }

/* IE5 Mac Hack \*/ 
#sub-nav-happen { padding-left: 230px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

#sub-nav-happen dt { float: left; }

#sub-nav-happen dt a {
	display: block;
	height: 0px !important;
	height /**/:28px; /* IE 5/Win hack */ 
	padding: 28px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}

#sub-nav-happen dt#features,
#sub-nav-happen dt#features a { width: 71px; background-image: url(../images/n_features.gif);}

#sub-nav-happen dt#acclaim,
#sub-nav-happen dt#sm-acclaim a { width: 75px; background-image: url(../images/n_acclaim.gif);}

#sub-nav-happen dt#events,
#sub-nav-happen dt#sm-events a { width: 53px; background-image: url(../images/n_events.gif);}


/* Bottle Navigation */

#bottle-nav {
	width: 480px;
}
#bottle-nav dl { margin: 0; padding: 0; }

/* IE5 Mac Hack \*/ 
#bottle-nav { padding-left: 90px;} 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

#bottle-nav dt { float: left; }

#bottle-nav dt a {
	display: block;
	height: 0px !important;
	height /**/:311px; /* IE 5/Win hack */ 
	padding: 311px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}
#bottle-nav dt#bottle-byron,
#bottle-nav dt#bottle-byron a { width: 63px; background-image: url(../images/n_bottle_byron.gif);}

#bottle-nav dt#bottle-cambria,
#bottle-nav dt#bottle-cambria a { width: 69px; background-image: url(../images/n_bottle_cambria.gif);}

#bottle-nav dt#bottle-io,
#bottle-nav dt#bottle-io a { width: 67px; background-image: url(../images/n_bottle_io.gif);}

#bottle-nav dt#bottle-kinton,
#bottle-nav dt#bottle-kinton a { width: 67px; background-image: url(../images/n_bottle_kinton.gif);}

#background-map {
	clear: both;
	margin: auto;
	width: 568px;
	height: 311px; 
	background: url(../images/collection_map.jpg ) no-repeat center top;
}

/* Bottom Page */
.tagline {
	background: url(../images/tagline.gif) no-repeat right bottom;
	clear: both;
	margin-right: 20px; 
	padding-top: 30px;
	width: 451;
	height: 24px;
	}
#base-line {
	clear: both;
	margin: auto;
	width: 800px;
	border-bottom: 1px solid 
	padding: 0px 0px 0px 0px;
}
#footer {
	background: url(../images/stamp_map.jpg) no-repeat right bottom; 
	clear: both;
	width: 890;
	height: 140px;
	
}
.copyright {
	font-size: 12px;
	text-align: center;
	margin-top: 10px
}

/*	PAGE ELEMENTS  background: #db6d16;
=== === === === === === === === === === */

#gallery-nav {
	padding-top: 25px;
	float: left;
}
#gallery-nav a img {
	border: 0px;
}
#gallery-nav-sub {
	padding-top: 25px;
	float: left;
}
#gallery-navs-sub a img {
	border: 0px;
}
#content-collection {
	clear: both;
	margin: auto;
	width: 740px;
	padding-top: 20px;
}
#content {
	clear: both;
	margin: auto;
	width: 800px;
}
#content p {
	margin-bottom: 120px;
}	
#content-sub {
	margin: auto;
	width: 560px;
	float: right;
}
#content-happenings {
	margin-top: 50px;
	margin: auto;
	width: 549px;
	float: right;
}
#content-happenings p{
	line-height: 18px;
	margin-top: 50px;
	margin-bottom: 12px;
	margin-right: 95px; 
	margin-left: 20px;
}	
#content-sub p {
	margin-top: 50px;
	margin-bottom: 12px;
	margin-right: 75px; 
	margin-left: 20px;
}	
#content-mail {
	clear: both;
	margin: auto;
	line-height: 20px;
	width: 760px;
	padding-top: 20px;
	padding-left: 20px;
}
#content-mail p {
	padding-left: 50px;
}
.acclaim-list {
	padding-left: 20px;
	padding-bottom: 2px;
}
.feature {
	padding-top: 10px;
	padding-bottom: 2px;
	width: 460px;
	padding-left: 20px;
}
.image-feature {
 	float: right; 
}
#form-placement {
	padding-left: 50px;
}
.image-placement {
 	float: left; 
	padding-left: 20px;
	margin-left: 25px;
	margin-top: 50px;
}
.image-happenings {
 	float: left; 
	padding-left: 70px;
	margin-left: 25px;
	margin-top: 50px;
}
.space-home p {
	margin-left: 30px; margin-right: 30px;
}	
#gallery {
	clear: both;
	float: left;
	margin-top: 30px; padding-left: 26px; width: 145px;
	position: relative;
	/* bottom: 0px;
	top: 38px;
	top: 413px;
	left: -20px;
	right: 0px;	
	width: 220px;*/
}
.gallery-button a {
	display: block;
	overflow: hidden;
	width: 145px;
	padding-top: 42px;
	height: 0px !important; 
	background: url(../images/n_gallery.gif) left top;
}
.gallery-button a:Hover{
	background-position: 0 -42px;
}	
#content-gallery {
	clear: both;
	float: left;
	width: 740px;
	padding-left: 75px;
	padding-top: 30px;
}
#content-policy {
	margin: auto;
	width: 820px;
}
#content-policy p {
	margin-top: 50px;
	margin-bottom: 12px;
	margin-left: 75px; 
	margin-right: 110px; 
}	

/*FADER CSS*/

.fadecontentwrapper{ /* Total width: 350px+5px+5px=360px Read relative width relations for the other two containers below! */
	clear: both;
	margin: auto;
	width: 760px;
	padding-top: 20px;
	position: relative;
	height: 450px; /* Set height to be able to contain height of largest content shown*/
	border: 0px solid maroon;
	overflow: hidden;
	font-family: arial, helvetica, serif;
	font-size: 100%;
	line-height: 16px;
	color: #4b2807;
}

.fadecontent{ /*style for each fade content DIV within wrapper. Total width: 330px+10px+10px=350px (".fadecontentwrapper" width minus its padding and borders, if any) */
position: absolute;
background: white;
padding: 10px;
visibility: hidden;
width: 650px;
}

.fadecontenttoggler{ /*style for DIV used to contain toggler links. Total width: 350px+5px+5px=360px */
width: 650px;
border: 0px solid maroon;
border-top-width: 0;
overflow: hidden;
}

.fadecontenttoggler a{ /*style for every navigational link within toggler */
text-decoration: none;
border-right: 2px solid white;
padding: 0 5px;
float: left;
display: block;
font-weight: bold;
color: black;
}

.fadecontenttoggler a:hover{
background: #C03021;
color: white;
}

.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
color: black;
}

.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{
color: white;
background: black;
}

.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #C03021;
color: white;
}

/*END FADER CSS*/
