/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}




/*

With love and care by Nicholas Macias.
http://rockinghelvetica.com/
	
*/




/*------------------------------------
	STRUCTURE
------------------------------------*/

html, body {
	background: rgb(247, 247, 247);
	text-align: center;
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", georgia, serif;
	}

.grid {
	position: relative;
	margin: auto;
	text-align: left;
	width: 881px;
	padding-left: 97px;	
	}

h1#jax {
	background: url("images/jaxsprites.png") no-repeat 0 0;
	height: 128px;
	overflow: hidden;
	text-indent: -700px;
	margin: 64px 0 0 -33px;
	position: relative;
	width: 128px;
	z-index: 2;
	cursor: pointer;
	}
	
#sections {
	margin-top: 16px;
	position: relative;
	z-index: 2;
	}
	
#wines {
	position: absolute;
	height: 1400px;
	overflow: hidden;
	min-width: 978px;
	width: 100%;
	top: 0;
	left: 0;
	}	
		
.product {
	position: absolute;
	height: 1040px;
	width: 100%;	
	top: 0;
	left: -100%;
	padding-top: 280px;	
	}
	
#sections li {
	position: relative;
	}

#footer {
	background: rgb(24, 24, 24);
	margin-top: 400px;
	color: white;
	}
	
.tastingnotes {
	position: absolute;
	top: 750px;
	width: 464px;
	}
	
.specs {
	position: absolute;
	top: 750px;
	left: 577px;
	width: 384px;
	z-index: 3;
	}

.product .details {
	position: relative;
	width: 304px;
	padding-right: 160px;
	height: 540px;
	z-index: 4;
	}

#announcement {
	position: relative;
	padding-top: 64px;
	z-index: 2;
	}
	



/*------------------------------------
	UI/NAV
------------------------------------*/

a {
	color: rgb(138, 21, 32);
	text-decoration: none;
	}

.button {
	background: rgb(55, 53, 52);
	background: rgba(0, 0, 0, 0.8);
	display: inline-block;
	margin-top: -3px;
	vertical-align: 4px;
	font-family: "ff-din-web-1","ff-din-web-2", arial, sans-serif;
	font-weight: bold;	
	color: white;
	padding: 3px 7px 4px 7px;
	text-decoration: none;
	font-size: 13px;
	text-transform: uppercase;
	-webkit-border-radius: 3px; -moz-border-radius: 3px;  -khtml-border-radius: 3px; border-radius: 3px;
	}

#shuttle {
	position: absolute;
	top: 204px;
	left: 0;
	width: 64px;
	}

#shuttle a {
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	text-indent: -200px;
	background-image: url("images/jaxsprites.png");
	background-repeat: no-repeat;
	margin-bottom: 8px;
	}

#next {
	background-position: -150px 0;
	}

#prev {
	background-position: -150px -64px;
	}
	
#next:hover {
	background-position: -251px 0;
	}

#prev:hover {
	background-position: -251px -64px;
	}

















/*------------------------------------
	BLOG/NEWS
------------------------------------*/	

#announcement h2 {
	color: rgb(138, 21, 32);
	font-family: "ff-din-web-1","ff-din-web-2", arial, sans-serif;	
	font-weight: bold;
	font-size: 13px;
	padding-bottom: 8px;
	text-transform: uppercase;
	}

#announcement p {
	color: rgb(84, 84, 84);
	font-size: 16px;
	line-height: 24px;
	width: 304px;	
	}









	
	
/*------------------------------------
	NAVIGATION
------------------------------------*/	

#sections h2 {
	margin: auto;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #dfddde;
	border-bottom-color: rgba(0, 0, 0, 0.1);
	font-family: "ff-din-web-1","ff-din-web-2", arial, sans-serif;
	font-size: 24px;
	padding: 24px 0 24px 97px;
	text-transform: uppercase;
	width: 881px;
	text-align: left;
	cursor: pointer;
	}
	
#sections h2:hover {
	color: rgb(138, 21, 32);
	}

#sections .expanded h2 {
	background: url("images/jaxsprites.png") no-repeat -872px -42px;
	cursor: pointer;
	}

#sections .expanded h2:hover {
	background: url("images/jaxsprites.png") no-repeat -872px 10px;
	}

#sections .expanded:first-child h2:hover {
	color: black;
	}
	
#sections .button {
	margin-left: 24px;
	}

.menu {
	position: absolute;
	padding: 24px;
	display: none;
	z-index: 99;
	}

#releases .button {
	position: relative;
	background: rgb(190,190,190);
	}

#releases h2:hover .menu {
	display: block;
	}
	
	
#releases .menu {
	left: -24px;
	top: -48px;
	}	

#browse {
	width: 200px;
	border: 2px solid rgb(29, 28, 28);
	-webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0px 5px 9px; -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 9px;
	padding: 16px;
	background-color: rgb(29, 28, 28);
	font-family: "ff-din-web-1","ff-din-web-2", arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;	
	background: rgb(29, 28, 28) -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0))) repeat-x;
	}	

#browse li {
	color: rgb(204, 204, 204);
	border-top: 1px solid rgb(55, 53, 52);
	padding: 9px 0;
	}

#browse li:hover {
	color: white;
	}

#browse li:first-child {
	color: rgb(55, 53, 52);
	border: none;
	padding: 0 0 9px 0;
	}
	
#browse a {
	color: white;
	font-size: 18px;
	}

.dart {
	position:absolute;
	border-color: transparent rgb(29, 28, 28) transparent transparent;
	border-style: dotted solid dotted dotted;
	border-width: 12px;
	height:0;
	width:0;
	top: 48px;
	left: 0px;
	}







/*------------------------------------
	STORE FINDER
------------------------------------*/

#finder {
	position: relative;
	margin-bottom: 32px;
	}

#map_canvas {
	border: 16px solid rgb(29, 28, 28);
	width: 849px;
	height: 480px;
	}	
	
#stockists label {
	display: block;
	position: relative;
	font-size: 32px;
	margin: 24px 0;
	}

#stockists label input {
	font-style: italic;
	border: 0;
	background: rgb(29, 28, 28);
	color: #efefef;
	padding: 12px 8px;
	width: 300px;
	}

#stockists .button {
	margin-top: 0;
	font-size: 24px;
	}
	
#resultspanel {
	position: absolute;
	top: 32px;
	width: 200px;
	right: 32px;
	color: white;
	z-index: 100;
	background: rgb(0,0,0);
	background: rgba(0,0,0, 0.85);
	-webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 5px;
	overflow: hidden;
	}
#resultsui {
	border: 2px solid rgb(29, 28, 28);
	-webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0px 3px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.6) 0px 3px 3px;
	padding: 16px;
	background-color: rgb(29, 28, 28);
	font-family: "ff-din-web-1","ff-din-web-2", arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;	
	background: rgb(29, 28, 28) -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0))) repeat-x;
	}	
#results {
	position: relative;
	overflow: auto;
	margin: 16px;
	max-height: 363px;
	display: none;
	}
	
#near, #far {
	background-image: url("images/jaxsprites.png");
	background-repeat: none;
	cursor: pointer;
	display: none;
	}
#near {
	background-position: -550px -20px;	
	}
#far {
	background-position: -550px -72px;	
	}
	
.currentLocation {
	border-left: 8px solid yellow;
	}
.address {
	display: none;
	}
.currentLocation .address {
	display: block;
	}
	

#story .grid {
	width: 481px;
	padding-left: 97px;	
	padding-right: 400px;
	}

#vineyards {
	background: rgb(226, 226, 212);
	margin-top: 24px;
	padding: 12px 24px;
	margin-bottom: 32px;
	}

 #story h4 {
 	border: 0;
 	}




#club h3 {
	font-size: 48px;
	line-height: 48px;
	margin: 0 0 36px 0;
	padding-top: 24px;
	}

#clubs {

	}

#club ul {
	margin-left: 32px;
	padding: 32px;	float: right;
	width: 300px;
	background: rgb(226, 226, 212);
	}

#club dd {
	margin-bottom: 24px;
	}
	
#club dt {
	width: 464px;
	}

#club .button {
	float: right;
	margin-top: 4px;
	}

#club li {
	border-bottom: 1px solid grey;
	padding: 8px 0;
	}



/*------------------------------------
	PRODUCT PAGES
------------------------------------*/	

.product h3, #story h3 {
	font-size: 48px;
	line-height: 48px;
	width: 464px;
	margin: 0 0 36px 0;
	padding-top: 24px;
	}

h4, #club dt {
	font-family: "ff-din-web-1","ff-din-web-2", arial, sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	border-top: 3px solid rgb(224, 224, 224);
	padding: 16px 0;
	}
	
ul.actions {
	width: 144px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	border-top: 3px solid rgb(224, 224, 224);
	padding: 8px 0;
	}
	
ul.actions li {
	font-family: "ff-din-web-1","ff-din-web-2", arial, sans-serif;
	font-weight: bold;	
	text-transform: uppercase;
	padding: 8px 0;
	border-bottom: 1px solid rgb(224, 224, 224);
	}

ul.actions li a {
	text-decoration: none;
	font-size: 14px;
	}

.actions li .purchase {
	color: black;
	font-size: 24px;
	}

.price {
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", georgia, serif;
	font-size: 16px;
	font-weight: normal;
	}

.more {
	font-style: italic;
	}

.specs ul {
	margin-right: -16px;
	}

.specs li {
	padding: 8px 0;
	margin-right: 16px;
	width: 184px;
	font-style: italic;
	font-size: 14px;
	color: rgb(64, 64, 64);
	border-bottom: 1px solid rgb(224, 224, 224);
	float: left;
	}

.specs .wide {
	width: 384px;
	}

.specs strong {
	font-family: "ff-din-web-1","ff-din-web-2", arial, sans-serif;
	font-weight: bold;
	font-style: normal;
	display: block;
	font-size: 11px;
	color: rgb(180,180,180);
	text-transform: uppercase;
	}



#footer .grid {
	padding-top: 84px;
	position: relative;
	overflow: hidden;
	line-height: 24px;
	font-size: 13px;
	color: rgb(112,112,112);	
	}
	
#footer h3 {
	font-family: "ff-din-web-1","ff-din-web-2", arial, sans-serif;
	font-weight: bold;	
	color: rgb(180,180,180);
	text-transform: uppercase;
	}

#tastings, #contact {
	border-top: 3px solid #333;
	padding-top: 32px;
	float: left;
	width: 304px;
	}

#contact {
	margin-left: 32px;
	width: 544px;
	}

#contact ul {
	display: block;
	clear: both;
	}
	
#contact li {
	float: left;
	margin-right: 24px;
	}

#contact .location {
	float: left;
	width: 160px;
	margin-right: 32px;
	padding-bottom: 32px;
	}
	
#copyright {
	clear: both;
	padding: 64px 0;
	}






/*------------------------------------
	HIDE EARLY AND OFTEN
------------------------------------*/

.init .product .grid, .init .collapsable { 
	display: none;
	}

.expanded {
	background: rgb(247, 247, 247);
	background: rgba(247,247,247,0.85);
	background: rgba(247,247,247,0.85) -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.4)), to(rgba(247,247,247,0))) repeat-x;
		-webkit-background-origin: padding-box;
		-webkit-background-clip: content-box;
		-webkit-background-size: 72px;
	}

.collapsable {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #dfddde;
	border-bottom-color: rgba(0, 0, 0, 0.1);
	}

.collapsable p {
	padding: 0 0 24px 0;
	}

.collapsable p:first-child {
	padding-top: 24px;
	}

.expanded:first-child {
	background: none;
	}

#releases .collapsable {
	height: 1000px;
	background: none;
	}


/*------------------------------------
	WINE IMAGES
------------------------------------*/


#syrah {
	background: url("images/syrah-styled.jpg") no-repeat center 0;
	}

#chardonnay {
	background: url("images/chardonnay-styled.jpg") no-repeat center 0;
	}

#sauvignonblanc {
	background: url("images/sb-styled.jpg") no-repeat center 0;
	}

#cabernetsauvignon {
	background: url("images/cab-styled.jpg") no-repeat center 0;
	}