html, body { width: 100%; background-color: #000; color: #fff; margin:0; padding: 0}
html {height: 100%; }
body {
/*scrollbar-face-color: #222; bar main colour*/
scrollbar-face-color: #000;
/*scrollbar-highlight-color: #999; bar border highlight left*/
scrollbar-highlight-color: #666;
/*scrollbar-shadow-color: #666; bar border shadow right*/
scrollbar-shadow-color: #444;

scrollbar-3dlight-color: #000;  /*bar outside highlight left*/
scrollbar-darkshadow-color: #000; /*bar outside shadow right*/

scrollbar-arrow-color: #eee; 
scrollbar-track-color: #000;  /*background colour*/
}


a {color:#999; cursor:pointer; outline-style:none; text-decoration:none; font:13px  georgia, serif; font-weight:lighter;}
a:hover { color:#666;}
a:active {background:#111;}

a img {border:0}

li.a {}

.logo {float:left; margin:0;}

p.light {color:#AAAAAA;	font-family:sans-serif;	font-size:16px;	font-weight:lighter; letter-spacing:1px;line-height:160%; position:relative; }

p {color:#ddd; font-family:  georgia,serif; font-size:12px; letter-spacing:1px; line-height:170%; margin:0 0 15px 0;} /* Removed "Bodoni", "Perpetua" for now */

h2 {font:18px Georgia; font-weight:bold; margin:0 0 15px 0; text-transform:uppercase; letter-spacing:0.5px;}
h3 {font-family:Georgia; font-size:14px; font-weight:bold; margin:0 0 2px; letter-spacing:0.4px;}
h4 {font:14px Georgia; font-weight:lighter; margin:0 0 10px 0; letter-spacing:1.1px;}
h5 {font:12px Georgia; font-weight:bold; margin:0 0 7px 0; letter-spacing:1.1px;}


/*--- Generics ---*/

.left {float:left;}
.right {float:right;}
.justify {text-align:justify;}
.center {text-align:center;}
.uppercase {text-transform:uppercase;}
#centered {margin:15px auto; text-align:center; width:780px;}

img.left {margin: 10px 15px 15px 0;}
img.right {margin: 10px 0 10px 10px;}

.padding-top {padding-top: 15px;}
.padding-top-big {padding-top: 30px;}

#container{
	width:880px;
	text-align:center;
	margin:21px auto;
	padding:1px 0;
	position:relative;
}

.header {width:880px; padding:0; margin:0; height:60px; padding:10px 0; border-top:1px solid white; border-bottom:1px solid white;}

.subnav-container { border-top:1px solid white; float:left; margin:-7px 0 0 37px; padding:6px 0 0; width:607px; } 
ul.subnav {clear:left; color:#eee; float:left; font-family:georgia,serif; letter-spacing:1px; margin:0; padding:0; }
.subnav li { display:inline; margin: 0 21px 0 2px;}

.subnav li a { color: #eee; text-decoration: none; }
.subnav li a:hover { color: #bbb; text-decoration: none; }
.subnav li a.active { color: #888; }


.nav { background:transparent url(img/nav6.gif) no-repeat scroll 0 0; height:21px; 
margin:3px 0 17px 35px;
/* html > margin:7px 0 12px */;
position:relative; height:21px; float: left; 
width:570px;
/* html>width:617px; */ }

.nav li {
display:inline;
}
.nav li a:link, .nav li a:visited {
height:21px;
overflow:hidden;
position:absolute;
text-indent:-9000px;
top:0;
z-index:10;
}
.nav .collections a:link, .nav .collections a:visited {
left:0;
width:135px;
}
.nav .collections a:hover, .nav .collections a:focus {
background:transparent url(img/nav6.gif) no-repeat scroll 0 -21px;
}
.nav .collections a:active {
background:transparent url(img/nav6.gif) no-repeat scroll 0 -21px;
}
.current-collections .collections a:link, .current-collections .collections a:visited {
background:transparent url(img/nav6.gif) no-repeat scroll 0 -21px;
cursor:default;
}
.nav-collections, .nav-collections-click {
background:transparent url(img/nav6.gif) no-repeat scroll 0 -21px;
height:21px;
left:0;
position:absolute;
top:0;
width:135px;
}
.nav-collections-click {
background:transparent url(img/nav6.gif) no-repeat scroll 0 -21px;
}
.nav .craftsmanship a:link, .nav .craftsmanship a:visited {
left:160px;
width:159px;
}
.nav .craftsmanship a:hover, .nav .craftsmanship a:focus {
background:transparent url(img/nav6.gif) no-repeat scroll -160px -21px;
}
.nav .craftsmanship a:active {
background:transparent url(img/nav6.gif) no-repeat scroll -160px -21px;
}
.current-craftsmanship .craftsmanship a:link, .current-craftsmanship .craftsmanship a:visited {
background:transparent url(img/nav6.gif) no-repeat scroll -160px -21px;
cursor:default;
}
.nav-craftsmanship, .nav-craftsmanship-click { background:transparent url(img/nav6.gif) no-repeat scroll -160px -21px; height:21px;
left:160px; position:absolute; top:0; width:159px;}
.nav-craftsmanship-click { background:transparent url(img/nav6.gif) no-repeat scroll -160px -21px; }

.nav .philosophy a:link, .nav .philosophy a:visited { left:346px; width:130px; }
.nav .philosophy a:hover, .nav .philosophy a:focus { background:transparent url(img/nav6.gif) no-repeat scroll -346px -21px; }
.nav .philosophy a:active { background:transparent url(img/nav6.gif) no-repeat scroll -346px -21px; }
.current-philosophy .philosophy a:link, .current-philosophy .philosophy a:visited {
background:transparent url(img/nav6.gif) no-repeat scroll -346px -21px;
cursor:default;
}
.nav-philosophy, .nav-philosophy-click { background:transparent url(img/nav6.gif) no-repeat scroll -346px -21px; height:21px;
left:346px; position:absolute; top:0; width:130px; }

.nav-philosophy-click {background:transparent url(img/nav6.gif) no-repeat scroll -346px -21px;}


.nav .stores a:link, .nav .stores a:visited {
left:480px;
width:105px;
}
.nav .stores a:hover, .nav .stores a:focus {
background:transparent url(img/nav6.gif) no-repeat scroll -480px -21px;
}
.nav .stores a:active {
background:transparent url(img/nav6.gif) no-repeat scroll -480px -21px;
}
.current-stores .stores a:link, .current-stores .stores a:visited {
background:transparent url(img/nav6.gif) no-repeat scroll -480px -21px;
cursor:default;
}
.nav-stores, .nav-stores-click {
background:transparent url(img/nav6.gif) no-repeat scroll -480px -21px;
height:33px;
left:480px;
position:absolute;
top:0;
width:105px;
}
.nav-stores-click {
background:transparent url(img/nav6.gif) no-repeat scroll -480px -21px;
}




.home-image-container {
	height:505px; 	width:880px; 	overflow:hidden; 	margin: 15px 0;
  text-align:center; 	/*border: 1px solid green;*/
}

.home-image-container a img  {border:0;}

.home-image-container ul {height:550px; width:880px; list-style-type:none; text-align:left; /*border:1px solid red;*/ margin:0; padding:0}

.home-image-container ul li { /*border:1px solid blue;*/ }

.footer { 	width:880px; 	border-top:1px solid white; 	height:40px; float:left}

ul.bottom-nav {
	float:right;
	margin:15px 0 15px 0;
	list-style-type:none;
}
ul.bottom-nav li {	display:inline;	font:16px "book antiqua", georgia, times, "times new roman", serif;	letter-spacing:1px;
	font-weight:lighter!important; margin:0 0 0 5px; }

ul.bottom-nav li a { color:#eee; text-decoration:none; margin-left:20px; }
ul.bottom-nav li a:hover {color:#666;}
ul.bottom-nav li a:active {color:#666;}



.collections-container {
  background-color: #000;
  margin: 15px 0;
  padding: 30px 0px 30px 0px;
}

.collections-left {
  width: 525px;
  text-align: left;
  /* border: 1px solid white; */
  float: left;
  padding: 0 0 0 35px;
}

.collections-left img {
  margin: 1px 35px 12px 0px;
  border: 1px solid #252525;
}


.collections-left img.active {
  border: 1px solid #ccc;
}


.collections-right {
  text-align: right;
  padding: 0px 35px 0px 0px;
  /* border: 1px solid white; */
}


.page-container { background-color: #000; margin: 15px 0;  height: 505px; text-align: left; }
.page-container-coverage { background-color: #000; margin: 15px 0; text-align: left; }

.page-left { text-align: left; width: 420px; float: left; margin: 0 10px 0 0; }
.page-right {float:right;}

/* .page-box for scrolling of entire main pane */
.page-box { height:505px; margin:0 9px 0 0; overflow:auto; padding:0 10px 0 0; text-align:left; width:868px; }
.coverage-pane { height: 475px; }

/* .page-left-box is for original left hand pane layouts */
.page-left-box{ float:left; height:505px; margin:0 9px 0 0; overflow:auto; padding:0 10px 0 0; text-align:left; width:480px; }

/* #page-left-box is for scrollify use */
#page-left-box { float:left; height:505px; margin:0 9px 0 0; overflow:auto; padding:0 10px 0 0; text-align:left; width:450px !important; }

/*---- Collections ----*/

div.thumbs-container { height:505px; margin:0px 0 0 25px; width:485px; }
#thumbs-accessories {margin: 0;}
ul.thumbs { list-style-type:none; }
ul.thumbs li {float: left;}
div.slideshow { float:right; margin-left:0; margin-right:25px; margin-top:-517px; } /* This is quite a hacked kind of way to work this. Let's improve it at
some stage! */
.slideshow-accessories {margin-right: 0!important;}
div.content { display:block; margin-top: 20px; }
div.pagination { clear:both; float:left; }




div.controls { margin-top: 5px; height: 23px; }
div.ss-controls { float: left; }
div.ss-controls span { color: #666666; cursor: pointer; }
div.nav-controls { float: right; }
div.nav-controls a { padding: 5px;}
div.slideshow {	clear: both; }
div.slideshow span.image-wrapper {	float: left; padding-bottom: 12px; }
div.slideshow a.advance-link { padding: 2px; display: block; border: none; position:relative;overflow:hidden; }
div.slideshow img {	border: none; display: block; }
div.download { float: right; }
div.embox {	clear: both; border: 1px solid #ccc; background-color: #eee; padding: 12px; }
div.image-title { font-weight: bold; font-size: 1.4em; }

div.image-desc { line-height: 1.3em; padding-top: 12px; }
div.navigation {
	/* The navigation style is set by a javascript generated style on the page.
	   This is so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {	clear: both; margin: 0; padding: 0; }
ul.thumbs li { float: left;	padding: 0;	margin: 8px 25px 15px 0;list-style: none; }
ul.thumbs li a { padding: 2px; display: block; border: none; }
ul.thumbs li.selected a { background: #efefef; }
ul.thumbs a:focus {	outline: none; }
ul.thumbs img {	border: none; display: block; }
div.pagination { clear: both;}
div.navigation div.top { margin-bottom: 12px;height: 11px;}
div.navigation div.bottom {	margin-top: 12px; }
div.pagination a, div.pagination strong { display: block; float: left; margin-right: 15px; padding: 3px 7px 4px; /*	border: 1px solid #ccc; */
	color:#ddd; font:georgia; text-decoration:none;}
div.pagination a:hover { color: #555; text-decoration: none; }
div.pagination strong {	font:14px georgia; color:#666; border:1px solid #444; font-weight:normal;}













/*---- jQuery specific overlay styles ----*/
 
#jquery-overlay {	position: absolute;	top: 0;	left: 0; z-index: 90; width: 100%; height: 500px; }
#jquery-lightbox {	position: absolute;	top: 0; left: 0; width: 100%; z-index: 100; text-align: center;	line-height: 0; }
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {	position: relative;	background-color: #fff;	width: 250px; height: 250px; margin: 0 auto;}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {	position: absolute;	top: 40%; left: 0%; height: 25%; width: 100%; text-align: center;	line-height: 0; }
#lightbox-nav {	position: absolute;	top: 0; left: 0; height: 100%; width: 100%; z-index: 10;}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%;	height: 100%; zoom: 1; display: block;}
#lightbox-nav-btnPrev { left: 0; float: left;}
#lightbox-nav-btnNext { right: 0; float: right; }
#lightbox-container-image-data-box {font: 10px Verdana, Helvetica, sans-serif; background-color: #fff;	margin: 0 auto;	line-height: 1.4em;	overflow: auto;	
	width: 100%; padding: 0 10px 0; }
#lightbox-container-image-data { padding: 0 10px; color: #666; }
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {	display: block;	clear: left; 	padding-bottom: 1.0em;}			
#lightbox-secNav-btnClose {	width: 44px; float: right; padding-bottom: 0;}





/*---- Tooltip experimental ----*/

.mytip {
  color: #000;
  top: 480px !Important;
  height: 80px !Important;
  margin-left: 507px;
  width: 335px;
  opacity: 0.8 !Important;
}

#tooltip h3 {
 font-weight: normal;
 font-size: 0.8em;
}




/* Captify - caption styling */

.caption-top, .caption-bottom {
	color: #ffffff;	
	padding: 1.2em;	
	font-weight: bold;
	font-size: 13px;	
	font-family: arial;	
	cursor: default;
	border: 0px solid #334143;
	background: #000000;
}
.caption-top {
   border-width: 0px 0px 8px 0px;
}
.caption-bottom {
   border-width: 8px 0px 0px 0px;
}
.caption a, .caption a {
	border: 0 none;
	text-decoration: none;
	background: #000000;
	padding: 0.3em;
}
.caption a:hover, .caption a:hover {
	background: #202020;
}
.caption-wrapper {
	float: left;
}
br.c { clear: both; }


/* jScrollpane styles -- THESE ARE THE OLD ONES --- */
/*
.jScrollPaneContainer {float:left; overflow:hidden; position:relative;
text-align:left; width:100%; z-index:1; }

  /* not sure about all  these 
.jScrollPaneTrack {background:#000000 none repeat scroll 0 0;
cursor:pointer; height:100%; position:absolute; right:7px; top:0; }
.jScrollPaneDrag {background:#222222 none repeat scroll 0 0; cursor:pointer; margin:0 0 0 -1px; overflow:hidden; position:absolute; width:2px !important; }

.jScrollPaneDragTop{ left:0; overflow:hidden; position:absolute; top:0; }
.jScrollPaneDrag { cursor:pointer; }
.jScrollPaneDragBottom { bottom:0; left:0; overflow:hidden; position:absolute;}

a.jScrollArrowUp, a.jScrollArrowUp:visited, a.jScrollArrowUp:link  {background:transparent url(img/basic_arrow_up.gif) repeat-x scroll 0 0; }
a.jScrollArrowUp, a.jScrollArrowUp:visited, a.jScrollArrowUp:link {display:block;height:20px; overflow:visible; position:absolute; right:0; text-indent:-2000px; top:0; width:21px !important; z-index:1 }
a.jScrollArrowUp:hover { background-position: 0 -38px;}


a.jScrollArrowDown, a.jScrollArrowDown:visited, a.jScrollArrowDown:link {background:transparent url(img/basic_arrow_down.gif) repeat-x scroll 0 0; }
a.jScrollArrowDown, a.jScrollArrowDown:visited, a.jScrollArrowDown:link { bottom:0; display:block; height:20px; overflow:hidden; position:absolute; right:0; text-indent:-2000px; width:21px !important; z-index:1; }
a.jScrollArrowDown:hover {background-position: 0 -38px;}
*/


/*----- Splash Page -----*/
#splash-container{background:transparent;width:100%;height:688px;position:absolute;z-index:1;text-align:left}
#splash-container-inner{background:black;width:101%;height:110%;position:absolute;z-index:100;text-align:center}
#splash-container-inner img {display:none;margin:200px auto}


/*----- jScroll styles -----*/


.jScrollPaneContainer {	position: relative;	overflow: hidden;	z-index: 1; width:100%; float:left; text-align:left}
.jScrollPaneTrack {	position: absolute;	cursor: pointer;	right: 7px; top: 0; height: 100%;	background: #000;}
.jScrollPaneDrag { position: absolute;	background: #000;	cursor: pointer;	overflow: hidden;	margin:0 0 0 -1px;	 }
.jScrollPaneDragTop {	position: absolute;	top: 0; 	left: 0;	overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }
a.jScrollArrowUp { display: block;	position: absolute; z-index: 1;	bottom: 25px;	right: 0;width:21px !important;	text-indent: -2000px; overflow: visible;height: 14px; }
a.jScrollArrowUp:hover{background-position:0 -14px}
a.jScrollArrowDown:hover {background-position:0 -17px}
a.jScrollArrowUp:active, a.jScrollArrowUp.jScrollActiveArrowButton, a.jScrollArrowUp.jScrollActiveArrowButton:hover {background-position:0 -29px}
a.jScrollArrowDown:active,a.jScrollActiveArrowButton:hover{background-position:0 -2px}
a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom:1px;	right: 0; text-indent: -2000px;	overflow: hidden;	height: 14px; width:21px !important}
a.jScrollArrowUp.disabled, a.jScrollArrowUp.disabled.jScrollActiveArrowButton{background-position:0 0}
a.jScrollArrowDown.disabled{background-position:0 -31px}
/*---- Scroller images etc ----*/

a.jScrollArrowUp {	background: url(../img/scroller/basic_arrow_up.gif) no-repeat 0 0;}
a.jScrollArrowDown {background: url(../img/scroller/basic_arrow_down.gif) no-repeat 0 -31px;}
.scroll-pane { width: 880px; height: 400px;	overflow: auto;	float: left; }

.wide {
	width: 400px;
}

.super-wide {
	width: 700px;
}

.tall {
	height: 400px;
}
.coverage-links{margin-right:18px !important}

.captionHolder{background:black;left:2px;position:absolute;text-align:center;width:100%;opacity: .75; 
 /* For IE 5-7 */  
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);  
 /* For IE 8 */
 -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";  
}
.captionHolder p{padding:10px 10px 0px 10px;}