/***************/
/* main layout */
/***************/
body { margin: 0; padding: 0; padding-top: 37px; }

#bodyWrapper { width: 900px; margin: auto; }

/* specific link colours for this site */
a         { color: #5f4923; text-decoration: none; }
a:link    { color: #5f4923; text-decoration: none; }
a:visited { color: #5f4923; text-decoration: none; }
a:hover   { color: #5f4923; text-decoration: underline; }
a:active  { color: #5f4923; text-decoration: underline; }


/*******************/
/* header elements */
/*******************/

#header { padding-bottom: 7px; border-bottom: 1px solid #666; }

#logo { display: block; float: left; margin: 36px 0 0 5px; width: 238px; height: 66px; }

#logoutButton { float: right; width: 74px; margin-top: 54px; }

#tradeLogInForm              { float: right; width: 166px; height: 94px; margin-right: 5px; font-size: 0.833em; position: relative; }
#tradeLogInForm h1           { font-size: 1.4em; line-height: 1.071em; }
#tradeLogInForm input.text   { background: #eae9e9; width: 154px; padding: 3px 5px 5px; border: 0; margin-bottom: 6px; }
#tradeLogInForm input.submit { position: absolute; right: 0px; bottom: 0px; width: 50px; }


#nav {
	margin-top: 1px;
	border-top: 1px solid #999;
	padding: 11px 0 20px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.333em;
	line-height: 1em;
	color: #000;
}
#nav li a,
#nav li a:link,
#nav li a:visited { text-decoration: none; color: #000; }
#nav li a:hover,
#nav li a:active  { text-decoration: none; color: #555; }

#contact_nav {
	padding-bottom: 20px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.333em;
	line-height: 1em;
	color: #666;
}
#contact_nav li a,
#contact_nav li a:link,
#contact_nav li a:visited { text-decoration: none; color: #666; }
#contact_nav li a:hover,
#contact_nav li a:active  { text-decoration: none; color: #111; }

ul.nav    { list-style: none; margin: 0; padding: 0; }
ul.nav li { display: inline; margin-right: 0px; }

/*******************/
/* dynamic headers */
/*******************/
#dynamic-header {
	list-style: none;
	height: 413px;
	margin: 0;
	padding: 0;
	position: relative;
	width: 900px;
}
#dynamic-header .dynamic-header-image {
	left: 0px;
	position: absolute;
	top: 0px;
}
#dynamic-header .dynamic-header-filler {
	background-color:#fff;
	left: 0px;
	position: absolute;
	top: 0px;
}
#dynamic-header #dynamic-header-pagination {
	bottom: 10px;
	cursor: pointer; /* doesn't make sense but the 'links' have a weird transition otherwise */
	position: absolute;
	right: 10px;
	z-index: 1001;
}
#dynamic-header #dynamic-header-pagination span {
	background: #ccc;
	background: rgba(255, 255, 255, 0.8);
	color: #555;
	cursor: pointer;
	padding: 2px 5px;
}
#dynamic-header #dynamic-header-pagination span:hover,
#dynamic-header #dynamic-header-pagination span.dynamic-header-selected {
	background: #aaa;
	background: rgba(255, 255, 255, 0.45);
}

#dynamic-company-wrapper {
	height:138px;
	margin-bottom:10px;
}
#company-banner {
	float:left;
}
#dynamic-company {
	list-style: none;
	height: 133px;
	margin: 0 0 0 23px;
	padding: 0;
	position: relative;
	width: 138px;
	float:left;
}
#dynamic-company .dynamic-company-image {
	left: 0px;
	position: absolute;
	top: 0px;
}
#dynamic-company #dynamic-company-image0 { left: 0px; z-index:1000; }
#dynamic-company #dynamic-company-image1 { left: 156px; z-index:1000; }
#dynamic-company #dynamic-company-image2 { left: 312px; z-index:1000; }
#dynamic-company #dynamic-company-image3 { left: 0px; z-index:999; }
#dynamic-company #dynamic-company-image4 { left: 156px; z-index:999; }
#dynamic-company #dynamic-company-image5 { left: 312px; z-index:999; }


/********************/
/* content elements */
/********************/
#main { padding-bottom: 31px; border-bottom: 1px solid #666; }

#sidebar { float: left; width: 141px; padding-left: 7px; }
#mainbar { float: right; width: 720px; }


/* sidebar */
#sidebar {  }

#sidebar > * { margin-bottom: 15px; }

#sidebar label,
#sidebar input.text,
#sidebar select { display: block; margin-bottom: 3px; text-align: left; }

#sidebar input.text,
#sidebar select { font-size: 0.917em; }

#sidebar input.text { width: 135px; }
#sidebar select { width: 141px; }

#sidebar_colour_search a { display: block; margin-bottom: 5px; }
#sidebar_keyword_form { text-align: right; }

#basket h1 { font-size: 1.167em; color: #000; }
#basket h2 {
	font-size: 1.083em;
	background: #fff;
	color: #000;
	display: inline;
	padding: 0 2px;
	position: relative;
	top: 9px;
	left: 4px;
}

#basket ul    {
	list-style: none;
	margin: 0;
	padding: 10px 3px 5px;
	border: 1px solid #333;
}
#basket ul li {
	margin: 0 0 0 10px;
	padding: 0;
}


/* mainbar */
.mainbarLeft  { float: left; width: 350px; }
.mainbarRight { float: right; width: 350px; }

#flash_home { margin-bottom: 16px; }


/* collections */
ul#subcategories    { list-style: none; margin: 0; padding: 0; }
ul#subcategories li { font-size: 1.25em; line-height: 1.333em; }

#categoryDetail      { float: left;  width: 290px; }
#categoryCollections { float: right; width: 381px; }

a.collection {
	float: left;
	display: block;
	width: 120px;
	height: 147px;
	margin-right: 36px;
	margin-bottom: 29px;
	color: #fff;
}
a.collection:hover { text-decoration: none; }
a.collection img  { display: block; }
a.collection .title {
	display: block;
	height: 27px;
	overflow: hidden;
	background: #333;
	font-size: 1em;
	line-height: 2.25em;
	padding: 0 3px;
}

#collectionDetail   { float: left; width: 290px; }
#collectionProducts { float: right; width: 381px; }

#categoryDetail h2,
#collectionDetail h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.167em;
	line-height: 2.571em;
	padding: 0 12px;
	margin: 0 0 10px;
}

a.product {
	float: left;
	display: block;
	width: 90px;
	height: 100px;
	margin-right: 7px;
	margin-bottom: 31px;
	color: #333;
}
a.product img  { display: block; }
a.product .title {
	display: block;
	height: 26px;
	overflow: hidden;
	font-size: 0.917em;
	line-height: 2.364em;
	padding: 0 3px;
}

#productDetail  { float: left; width: 444px; }
#productOptions { float: right; width: 250px; }

#productDetail h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.167em;
	line-height: 2.571em;
	padding: 0 12px;
	margin: 0 0 10px;
}

#productOptions h2 {
	font-size: 1.167em;
	line-height: 1em;
	margin-bottom: 3px;
	color: #000;
}
#productOptions input {
	border: 0;
	background: #333;
	color: #fff;
	width: 210px;
	padding: 2px 3px 3px;
	margin-top: 12px;
	text-align: left;
	font-size: 0.917em;
	cursor: pointer;
}
#productOptions input:hover,
#productOptions input:active,
#productOptions input:focus { background: #555; }


/* stockists */
#stockistsForm { float: left; width: 150px; }
#flash_map     { float: right; width: 550px; height: 400px; }

#stockistsForm label  { font-size: 0.917em; display: block; }
#stockistsForm select { font-size: 0.909em; width: 150px; padding: 2px 3px; border: 1px solid #999; }
#stockistsForm .quasiSelect { font-size: 0.909em; width: 142px; padding: 2px 3px; border: 1px solid #999; }
#stockistsForm .quasiSelect a { float: right; }

#stockistInfo { color: #000; }
#stockistInfo h2 { font-size: 1.167em; line-height: 1.333em; margin: 1px 0 8px; color: #000; }
#stockistInfo h3 { font-size: 1em; line-height: 1.333em; margin: 0; color: #000; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }

#distributorInfo { float: left; width: 350px; }
#stockistsInfo   { float: right; width: 350px; }


/* special offers */
ul#offer-categories    { list-style: none; margin: 0; padding: 0; }
ul#offer-categories li { background: #333; color: #fff; display: block; float: left; margin-right: 5px; padding: 4px 6px; }
ul#offer-categories li a,
ul#offer-categories li a:link,
ul#offer-categories li a:visited,
ul#offer-categories li a:hover,
ul#offer-categories li a:active { color: #fff; }

.offer { margin-bottom: 30px; }
.offer .image  { float: left; width: 120px; }
.offer .detail { float: right; width: 585px; }
.offer h2 {
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.333em;
	margin: 0;
	margin-bottom: 10px;
}

.normal-price { text-decoration: line-through; }
.special-price { color: #f00; }

/* key people */
.person { margin-bottom: 10px; }
.person .image  { float: left; width: 130px; }
.person .detail { float: right; width: 575px; }
.person h2,
.person h3 { color: #333; font-size: 1em; line-height: 1.333em; font-family: Arial, Helvetica, sans-serif; }
.person h2 { margin: 0; }
.person h3 { margin: 0; margin-bottom: 10px; }

.team-member { float: left; height: 235px; margin-right: 18px; overflow: hidden; }
.person.large .detail { width: 755px; }


h1.darkHeading {
	background: #333;
	color: #fff;
	font-size: 1.5em;
	line-height: 1.722em;
	padding: 0 9px;
}
h2.darkHeading {
	background: #333;
	color: #fff;
	font-size: 1.5em;
	line-height: 1.722em;
	padding: 0 9px;
}

/* misc boxes */
#boxes { margin-top: 16px; }
.box {
	width: 274px;
	height: 158px;
	padding: 5px 10px;
	overflow: hidden;
	float: left;
	background: transparent url(../images/box_bg.png) scroll repeat-x 0 0;
	margin-right: 9px;
	font-size: 0.917em;
}
.box h1 { font-size: 2.182em; margin: 0 }
.box h2 { font-size: 1.182em; margin: 0; }

#newsBox h2 { color: #000; font-family: Arial, Helvetica, sans-serif; }

#collectionNews { float: left; width: 350px; font-size: 0.917em; }
#tradeNews      { float: right; width: 350px; font-size: 0.917em; }
.standalone     { font-size: 0.917em; }

#collectionNews .item,
#tradeNews      .item {
	height: 125px;
	overflow: hidden;
}

#collectionNews .title,
#tradeNews      .title {
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.182em;
	line-height: 1.231em;
	margin: 0;
}
#collectionNews .title a,
#tradeNews      .title a { color: #333; }

#collectionNews .date,
#tradeNews      .date { color: #666; font-style: normal; }

.standalone .title {
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.286em;
	margin: 0;
	font-size: 1.273em;
}
.standalone .date  { margin-bottom: 10px; color: #666; font-style: normal; }

hr {
  margin: 18px 0;
  border-bottom: solid #666 1px;
  height: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
}

/*********/
/* items */
/*********/
.item      { margin-bottom: 10px; }
.title     { font-size: 1.091em; }
.date      { font-style: italic; }
.content   {  }
.image     { float: left; margin-right: 5px; margin-bottom: 5px; }
a.moreLink { text-decoration: underline; }
a#itemBack { color: #333; text-decoration: underline; display: block; margin: 10px 0; }

/*****************/
/* photo gallery */
/*****************/
div.galleryItem { /* one gallery item */
  width: 100px;
  height: 100px;
  float: left;
  margin: 5px;
}

/*******************/
/* footer elements */
/*******************/
#footer {
	margin-top: 1px;
	border-top: 1px solid #999;
	padding-top: 8px;
	color: #777;
	font-size: 0.917em;
}
#footer span { font-size: 1.182em; font-family: 'Times New Roman', Times, serif; }
#footer a { text-decoration: none; color: #777; }


/***********************/
/* general form styles */
/***********************/
#contactform	{ float: left; }  /* the contact form itself */
#contact		{ float: right; } /* contact info or whatever on right */

.required { color: #f00; }

/* all form elements are contained within a formrow div, with a label and
 *  then the element, this is the best way (but still not good) to emulate
 *  a table */
div.formrow {
  clear: both;
  text-align: left;
  margin-bottom: 10px;
}

div.formrow label {
  float: left;
  text-align: right;
  margin-right: 10px;
  width: 80px; /* default width for a default form, add new form ids and override */
}
div.formrow.indent { margin-left: 90px; } /* label width + label margin-right, override as above */

#applyForm .formrow label  { text-align: left; width: 100px; }
#applyForm .formrow.indent { margin-left: 110px; }

#enquiryForm .formrow label  { text-align: left; width: 70px; }
#enquiryForm .formrow.indent { margin-left: 80px; }
#enquiryForm input,
#enquiryForm textarea { width: 260px; padding: 3px; border: 0; background: #eeeded; }

/* message and error boxes, not just useful in contact form */
#messages,
#errors,
#warnings,
#info { margin-bottom: 10px; }
.message { border: 1px solid #080; color: #080; padding: 3px 5px; margin-bottom: 15px; float: left; } /* you may need to clearfix this */
.message.nomargin { margin-bottom: 0; } /* if before something with a margin-top */
.message.info { border-color: #880; color: #880; } /* info box in yellow */
.message.warn { border-color: #f40; color: #f40; } /* warning box in orange */
.message.error { border-color: #f00; color: #f00; } /* error box in red */