@charset "utf-8";

/* 	Main stylesheet */

/* 	Colour:
	Green: #5ad634



*/

body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 75%;
	margin: 0; 
	padding: 0;
	text-align: center;
	color: #aaa;
	background-image: url(images/BG2.gif);
	background-repeat: repeat-x;
	background-color: #231f20;
	background-position: 0 0;
}
a:link, a:visited {
	text-decoration: underline;
	color: #aaa;
}
a:hover {
	text-decoration: none;
}
td, th, table, div, input, select {
	font: Helvetica, Arial, sans-serif;
	color: #aaa;
}
img {
	border: 0;
	margin: 0;
	padding: 0;
}

/* Text styles, etc */

h1 {
	font-size: 2.1em;
	font-weight: bold; 
	margin: 0 0 1em 0;
	color: #888;
} h1 strong { color: #5ad634;}
h2 {
	font-size: 1.1em;
	margin: 0.4em 0 1em 0;
	font-weight: bold; color: #eee;
}
h3 {
	font-size: 1em;
	margin: 0 0 1em 0;
	font-weight: bold;
	line-height: 1.4em;
}
h4 {
	font-size: 1em;
	margin: 0 0 1em 0;
	font-weight: bold;
	font-style: italic;
}
h5 {
	font-size: 1em;
	margin: 1em 0 0 0;
	font-weight: normal;
}
p {
	line-height : 1.6em;
	margin: 0 0 1em 0;
}
hr {
	color: #E6E6E6;
	height: 0;
	margin: 2em 0 2em 0;
	border: 0;
	border-top: 1px solid #E6E6E6;
	clear: both;
}
ol {
	line-height : 1.6em;
	list-style-type : decimal;
	margin: 0 0 1em 3em;	
	text-indent: 0;
	padding: 0;
}
ul {
	line-height : 1.6em;
	margin: 0 0 1em 16px;	
	text-indent: 0;
	padding: 0;
} 

li { 
	margin: 0 0 0.7em 16px; 
}
blockquote {
	line-height : 1.6em;
	margin: 1em 0 1em 0;
	font-style: italic;
}
.small { font-size: 80%; }
.box {
	border: 1px solid #333; 
	padding: 8px; 
	text-align: left; 
}
.items ul { margin: 0 0 1em 0; }
.item ul li { margin: 0 0 0.2em 13px; }

h1, h2, h3, #nav a, p, li { 
	text-shadow: 0px 1px 0px #000; 
}







/* 	Main Layout */

#container {
	width: 100%;
	margin: 0 auto; 
	text-align: left; 
}
#nav {
	width: 100%;	
	height: 128px;
	overflow: hidden; /* IE6 */
	position: fixed;
	left: 0; bottom: 5%;
	background: url(images/BG-Nav.png) left 64px repeat-x;	
	z-index: 10;
}
#logo {
	height: 64px;
	text-align: left;
	position: absolute;
	left: 0.5%; margin-top: 62px;
}
#menu { position: absolute; right: 0; text-align: left; background: url(images/BG-Nav.png) left 128px repeat-x; }
#bike { position: relative; margin: 0; left: 2000px; }
#left-arrow, #right-arrow {
	width: 64px;	
	height: 64px;
	overflow: hidden;
	position: fixed;
	left: -100px; top: 350px;
	z-index: 10;
	}
#right-arrow {left: auto; right: -100px;}
.spacer {
	clear: both;
	font-size: 1px;
	height: 1px;
}

/* Main bike */
#large-bike {  position: absolute; left: 0; top: 60%; z-index: 11; width: 100%; height: 141px; overflow: hidden;}
#large-bike a { position: absolute; left: -400px; top: 0; width: 148px; height: 141px; }

/* Column content layout */

.col, .col-line, .col-line2, .col-line3 {
	width: 180px; height: 302px;
	background: url(images/BG-Col-Sm.png) 0 -259px no-repeat;	
	display: block;
	float: left;
	padding: 16px;
	margin-left: 16px;	
	margin-top: 250px; /* 100 */ 
	text-align: left;
	position: relative;
}
.col-line, .col-line2, .col-line3 {
	height: 302px;
	background: url(images/BG-Col-V-Line.png) 0 -259px no-repeat;	
	float: left;
	padding-top: 0;
	margin-top: 250px;
}
.col-line2 { width: 376px; }
.col-line3 { width: 588px; }

.home-col { height: 330px; padding: 0; margin-top: 180px; margin-left: 50px; overflow: hidden; }
.logo-home {  padding: 0; width: 186px; background: url(images/BG-Col-Website-Sm.png) 0 0 no-repeat; }
.logo-home img { position: absolute; top: 119px;}
.website-home { padding: 0; width: 276px; background: url(images/BG-Col-Website-Sm.png) 0 0 no-repeat; }
.website-home img { position: absolute; top: 122px; left: 2px;}
.wine-label-home { padding: 0; width: 118px; background: none;}
.wine-label-home img { position: absolute; top: 34px; left: 12px;}
.logo-home h1, .website-home h1, .wine-label-home h1 { font-size: 0.85em; position: absolute; top: 328px; width: inherit; text-align: center; display: block; text-transform: uppercase; }
.home-text { position: absolute; top: 120px; left: 760px; width: 0px; display: block; overflow: hidden; height: 360px;
background: url(images/BG-Home-About.png) 0px 0px no-repeat;
}
.home-text h2 { font-weight: normal; font-size: 1em; line-height: 1.5em; font-family: Helvetica, Arial, sans-serif; padding: 20px; color: #fff; top: 85px; position: relative; width: 140px }
.home-text h1 a, .home-text h1 a:link, .home-text h1 a:visited,  
.home-text h2 a, .home-text h2 a:link, .home-text h2 a:visited,
.home-col a, .home-col a:link, .home-col a:visited { text-decoration: none;color: #fff; }
.home-col a, .home-col a:link, .home-col a:visited { text-decoration: none;color: #aaa; }
.home-latest { background: url(images/BG-Home-Latest.png) 10px 120px no-repeat; }
 
.text { padding-left: 31px;}

.website .col, .winelabel .col, .printdesign .col { width: 150px; margin-top: 180px; margin-left: 32px; margin-right: 32px; }
.website .col { margin-left: 22px; margin-right: 0; }
.website .col h1, .winelabel .col h1, .printdesign .col h1 { font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #eee; font-weight: bold;}
.col-hidden { display:none; }
.info, .next-page {display: block; float:left; margin-top: 100px; width: 25px; height:25px;background:url(images/Arrow-Col-Nav.png) -130px 0 no-repeat; }
.next-page { position: absolute; top: 150px; right: 0; width: 0;}
.a4 {
	width: 228px; height: 380px;
	background: url(images/BG-Col.png) 0 -201px no-repeat;	
	display: block;
	float: left;
	margin-top: 150px;
	margin-left: 30px;
	position: relative;
}
.a4-first { margin-top: 200px; }
.a4 img { position: absolute; top: 0px; left: 0; width: 228px; height: 322px;}
.banner {
	width: 230px; height: 517px;
	background: url(images/BG-Banner.png) 0 0 no-repeat;	
	display: block;
	float: left;
	margin-top: 100px;
	margin-left: 100px;
	position: relative;
}
.banner img { position: absolute; top: 5px; left: 1px; width: 228px; height: 450px;}
.logo {
	width: 298px; height: 304px;
	background: url(images/BG-Col.png) 0 -259px no-repeat;	
	display: block;
	float: left;
	margin-top: 180px;
	margin-left: 100px;
	overflow: hidden;
}
.business-card {
	position: absolute;
	top: 490px; left: 450px;
	width: 235px; height: 115px;
	background: url(images/BG-B-Cards.png) 0 70px no-repeat;
	overflow: hidden;
	display: block;
}
.business-card-v {
	position: absolute;
	top: 445px; left: 550px;
	width: 149px; height: 158px;
	background: url(images/BG-B-Cards.png) -43px 114px no-repeat;
	overflow: hidden;
	display: block; z-index: 9;
}
.brochure-dl-v {
	position: absolute;
	top: 285px; left: 565px;
	width: 107px; height: 273px;
	background: url(images/BG-Col.png) 0px -295px no-repeat;
	overflow: hidden;
	display: block; z-index: 9;
}
.website .img {
	width: 674px; height: 502px;
	background: url(images/BG-Col-Website.png) 0 -59px no-repeat;	
	display: block;
	float: left;
	margin-top: 100px;
	overflow: hidden;
	position: relative;
	margin-left: 44px;
}
.website .img img, .website .img object, .website .img embed  { position: absolute; top: 4px; left: 4px;}
.bottle {
	width: 374px; height: 600px; /*674px*/ margin-left: 150px;
	display: block;
	float: left;
	text-align: right;
}
.bottle img {position: relative; top: 0px; right: 0; }
.bottle img.second-bottle { }
.second-item { margin-left: 30px; }
.centered .logo { margin-left: 170px; }
.centered .img { margin-left: 135px; }
.centered .bottle { margin-left: 230px; }
.centered .two-bottles { margin-left: 140px; }
.centered .brochure-dl-v { left: 655px; }


.col-black { background: url(images/BG-Col-Black.png) 0 -259px no-repeat;	}
.item p.col-bottom, .item p.col-bottom-2 { position: absolute; top: 228px; left: 14px; width: 155px; height: 25px; }
.item p.col-bottom-2 { top: 201px; }
a.arrow-col, a.arrow-col-up, a.arrow-col-down, a.arrow-col-left { 
	background-image: url(images/Arrow-Col-Nav.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block; width: 122px; height: 19px; 
	padding: 3px 30px 3px 6px;
	text-decoration: none; 
	text-transform: uppercase;
	font-size: 0.8em;
	color: #999;
	cursor: pointer;
}
a.arrow-col-up { background-position: 0 -50px;}
a.arrow-col-down { background-position: 0 -100px;}
a.arrow-col-left { background-position: 0 -150px;}
a.arrow-col:hover { background-position: 0 -25px; color: #fff;}
a.arrow-col-up:hover { background-position: 0 -75px; color: #fff;}
a.arrow-col-down:hover { background-position: 0 -125px; color: #fff;}
a.arrow-col-left:hover { background-position: 0 -175px; color: #fff;}
/*.mike { background: url(images/_BG-Mike.png) 0 0 no-repeat; }*/
.rachel {  background: url(images/BG-Rachel.png) 0 0 no-repeat; }
.about {  /*background: url(images/BG-Bike-Glow.png) 500px 280px no-repeat;*/ }
/*.bg-door { background: url(images/BG-Door.png) 100px 355px no-repeat;}*/

.pixel-test { 
	position: absolute; top:179px; left:644px; width: 273px; height: 372px; 
	display: block; 
	background: url(images/_BG-Mike-Pixel-Test.png) 0 0 no-repeat; 
}
.pixel-test-reset { 
	position: absolute; top:179px; left:554px; width: 89px; height: 89px; 
	display: block; 
	background: url(images/BG-Mike-Pixel-Test.png) 0 -91px no-repeat;
}
.pixel-test span { 
	position: relative; width: 91px; height: 91px; line-height: 91px; 
	display: block; 
	float: left; text-align: center; 
}
a.pixel-area, a.pixel-area-reset { /* button area*/
	position: absolute; top: 0; left:0; width: 91px; height: 91px; 
	display: block; z-index: 5; 	
} 
a.pixel-area-reset:hover { cursor: pointer; } 
a.pixel-block, a.pixel-shadow { /* spin image area */ 
	margin: 0 auto; line-height: 89px; display: block; width: 89px; height: 89px; 
	background-image: url(images/BG-Mike-Pixel-Test.png); background-repeat: no-repeat; background-position: 0 0; 
} 
a.pix1 { background-position: 0 0; } 
a.pix2 { background-position: -91px 0; } /* across, down */
a.pix3 { background-position: -182px 0; }
a.pix4 { background-position: 0 -91px; }
a.pix5 { background-position: -91px -91px; }
a.pix6 { background-position: -182px -91px; }
a.pix7 { background-position: 0 -182px; }
a.pix8 { background-position: -91px -182px; }
a.pix9 { background-position: -182px -182px; }
a.pix10 { background-position: 0 -273px; }
a.pix11 { background-position: -91px -273px; }
a.pix12 { background-position: -182px -273px; }
a.pixel-shadow { background-image: url(images/BG-Mike-Pixel-Test-Shadow.png) }

.pixel-data { position: absolute; top:160px; left:826px; width: 89px; display: block; text-align: right;}
#clickNo, #pixNo { width: auto; display: inline; font: 1.0em Arial, Helvetica, sans-serif bold; color: #2a2a2a; margin-left: 5px; }

.logo-home img { position: absolute; top: 119px;}



/* Navigation */

#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;	
	line-height: 19px;
}
#nav ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
	height: 64px;
	overflow: hidden;
	width: auto;
}
#nav ul li a {
	display: inline-block;
	width: auto;
	padding: 38px 10px 15px 10px;
	background-image: url(images/Nav-Btn.png);
	background-repeat: no-repeat;
	background-position: top left;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	/*height: 64px;*/
	color: #777;
}
#nav ul li a:hover {
	background-position: 0 -64px;
	color: #5ad634;
}
#nav ul li a:active {
	background: url(images/BG-Col.png);
	color: #5ad634;
}
#nav1, #nav4, #nav8 { margin-right: 20px;}








/* jQuery Tools - Scrollable */
#browsable { /*background: url(images/Play.png) 50% 99% no-repeat;*/ }
#browsable:hover { /*background: url(images/Pause.png) 50% 99% no-repeat;*/ }
/*	root element for the scrollable. when scrolling occurs this element stays still. */
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 100%;
	height:612px; /* 502 */
	margin-bottom: -10px;
}
/*	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element. */
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	z-index: 1;
	/*margin-left: 2000px;  is reduced by jQuery - wide so it doesn't flick */
}
.items div.item {
	float:left;
	display: block;
	text-align: center;
	width:950px; /* min screen width */
	margin-right: 2000px; /* Pushes next item off screen */
	position: relative;
}
.item-block { display: block; width: 100%; height: 700px; } /* For scrolling up-down within item */


/* single scrollable item 
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}*/
/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(images/Arrows-H-Nav.png) no-repeat;
	display:block;
	width:64px;
	height:64px;
	float:left;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -64px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-64px -64px; }
a.right:active 	{ background-position:-128px -64px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-64px 0; }
a.left:active  	{ background-position:-128px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-64px 0; }
a.up:active  		{ background-position:-128px 0; }

/* down */
a.down 				{ background-position: 0 -64px; }
a.down:hover  		{ background-position:-64px -64px; }
a.down:active  	{ background-position:-128px -64px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

/* position and dimensions of the navigator */
.navi-wrapper {text-align: center; width: 950px; height: 17px; margin: 0 auto; position: relative; top: -24px; z-index: 12; }
.navi {
	width:910px;
	height:20px;
	z-index: 12;
	margin: 0 0 0 40px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}

#actionButtons {text-align: center; width: 950px; margin: 0 auto; position: relative; top: -16px;z-index: 12;}
.play, .pause { 	
	width:16px; height:16px;
	background:url(images/PlayPause.png); background-repeat: no-repeat;
	background-position: 0 0;
	display:inline-block;
	font-size:1px;
	overflow: hidden;
	cursor: pointer;}
.pause { background-position: 0 -16px; }
.play:hover { background-position: -16px 0; }
.pause:hover { background-position: -16px -16px; }
.play-on {background-position: -32px 0; }
.pause-on { background-position: -32px -16px; }