/*******************************************************************************
	Core Beocentral Style Sheet

	Copyright (C) Nick Jarman 1999-2009. All rights reserved.
*******************************************************************************/
html {
	margin:						0;
	border:						0;
	font-size:					80%;
	line-height:				175%;
	font-family:				"Open Sans", "verdana", sans-serif;
	background-color:			#fff;
	background-image:			linear-gradient(0deg, #600, #600 200px, #000 200px, #000);
	color:						#222;
	}
body {
	background-color:			#fff;
	}


/* Headings */
h1 {
	margin:						0 -1px 0.25em -1px;
	border-bottom:				1px solid #000;
	padding:					0.35em 1px 0.06em 1px;
	font-size:					245%;
	line-height:				140%;
	}
h2 {
	margin:						0 0 0 0;
	font-size:					172%;
	}
h3 {
	clear:						both;
	float: 						left;
	width:						156px;
	margin-left:				-180px;
	padding:					0 0 2em 0;
	font-weight:				bold;
	text-transform: 			uppercase;
	text-decoration:			none;
	text-align:					right;
	}
h2, h4, h5, h6 {
	padding:					1em 0 0.3em 0;
	}
h1 a, h2 a, h4 a, h5 a, h6 a {
	font-weight:				normal;
	}
@media all and (max-width: 1104px) {
h3 {
	margin-left:				-152px;
	width:						128px;
	}
}
@media all and (max-width: 1000px) {
h3 {
	float:						none;
	width:						100%;
	margin-left:				0;
	text-align:					left;
	padding-bottom:				0.5em;
	}
}
@media all and (max-width: 744px) {
h1 {
	font-size:					200%;
	}
h2 {
	font-size:					160%;
	}
}



/* Paragraphs, emphasis, etc */
p {
	padding:					0 0 1.2em 0;
	}
strong {
	font-weight:				bold;
	}
em {
	font-style:					italic;
	}
.copyright {
	display:					none;
	}
span.invisiblebreak {
	display:					inline-block;
	width:						0;
	}



/* Links */
a {
	color:						#000;
	font-weight:				bold;
	text-decoration:			none;
	}
a:hover {
	color:						#b00;
	text-decoration:			underline;
	}



/* Structure - banner and header */
#banner {
	padding:					10px 0;
	text-align:					center;
	background-color:			#600;
	color:						#fff;
	}
#banner h2.tagline {
	padding:					1em 0 0.5em 0;
	margin:						0;
	width:						100%;
	font-family:				"gill sans", sans-serif;
	font-size:					100%;
	line-height: 				normal;
	text-decoration:			none;
	text-transform:				uppercase;
	}
@media all and (max-width: 744px) {
body:not(.homepage) #banner {
	padding-bottom:				13px;
	}
body:not(.homepage) #banner h2.tagline {
	display:					none;
	}
}




/* Structure - navigation */
#navigation {
	background-color:			#600;
	font-weight:				bold;
	padding:					0;
	margin-top:					-2px; /* Stops the single pixel line from appearing on Mobile Safari */
	}
#navigation ul {
	margin:						0 auto;
	padding:					0;
	}
#navigation li {
	display:					inline-block;
	margin:						0;
	border-right:				1px solid #600;
	padding:					0;
	width:						173px;
	line-height:				normal;
	text-align:					center;
	color:						#444;
	}
#navigation li a {
	display:					block;
	line-height:				38px;
	padding:					0;
	text-decoration:			none;
	color:						#111;
	background:					linear-gradient(#fff, #ddd 70%, #bbb 85%, #888 95%, #222);
	}
#navigation li a.current {
	background:					#e3e3e3;
	}
#navigation a:hover {
	color:						#b00;
	background:					linear-gradient(#fe9, #dc7 70%, #ba6 85%, #875 95%, #222);
	}
@media all and (max-width: 744px) {
#navigation {
	display:					none;
	}
}



/* Navigation menu */
.navigationmenu, .navigationmenu .navigationmenucontents {
	display:					none;
	}
@media all and (max-width: 744px) {
.navigationmenu {
	display:					inline-block;
	position:					absolute;
	width:						38px;
	height:						38px;
	left:						12px;
	top:						6px;
	cursor:						pointer;
	}
.navigationmenubackground {
	display:					none;
	position:					absolute;
	left:						0;
	top:						0;
	width:						100%;
	z-index:					99;
	background-color:			rgba(255, 255, 255, 0.6);
	opacity: 0;
	}
.navigationmenubackground.open {
	display:					block;
	}
.navigationmenu.open .navigationmenucontents {
	display:					block;
	position:					absolute;
	width:						240px;
	margin:						0;
	left:						-12px;
	top:						38px;
	padding:					0 0 6px 0;
	background:					#333;
	z-index:					100;
	cursor:						default;
	box-shadow:					0 0 12px rgba(0, 0, 0, 0.4);
	}
.navigationmenu.open h2 {
	text-align:					left;
	font-size:					18px;
	line-height:				44px;
	padding:					0 0 0 18px;
	border-top:					1px solid #444;
	background-color:			#222;
	color:						#ddd;
	}
.navigationmenu.open h2:first-child {
	border-top:					none;
	}
.navigationmenu.open ul {
	display:					block;
	margin:						0;
	padding:					0;
	text-align:					left;
	}
.navigationmenu.open ul li {
	display:					block;
	text-align:					left;
	margin:						0;
	padding:					0;
	border-top: 1px solid #444;
	}
.navigationmenu.open ul li a {
	box-sizing:					border-box;
	display:					block;
	font-weight:				normal;
	font-size:					16px;
	line-height:				44px;
	color:						#bbb;
	margin:						0;
	padding:					0 18px;
	}
}



/* Structure - breadcrumbs and search*/
#breadcrumbs {
	margin:						0;
	padding:					0;
	line-height: 				38px;
	background-color:			#e3e3e3;
	color:						#666;
	list-style:					none;
	}
#breadcrumbs ul {
	display:					inline-block;
	vertical-align:				top;
	width:						100%;
	margin:						0;
	text-align:					center;
	}
#breadcrumbs li {
	margin:						0 0.5em 0 0;
	padding:					0;
	display:					inline;
	}
#breadcrumbs a {
	text-decoration:			none;
	color:						#666;
	font-weight:				normal;
	}
#breadcrumbs a:hover {
	text-decoration:			underline;
	}
#breadcrumbs span.arrow {
	color:						#999;
	margin-right:				0.5em;
	}
#minisearch {
	display:					inline-block;
	vertical-align:				top;
	height:						38px;
	line-height:				38px;
	margin:						0 -180px 0 0;
	padding:					0;
	}
#minisearch input {
	box-sizing:					border-box;
	width:						156px;
	background-color:			#eee;
	border:						1px solid #aaa;
	padding:					4px;
	margin:						5px 0 0 24px;
	border-radius:				0;
	-webkit-appearance:			none;
	}
#minisearch input.active {
	color:						#000;
	}
#minisearch input.inactive {
	color:						#999;
	}
@media all and (max-width: 1104px) {
#minisearch input {
	width:						130px;
	}
}
@media all and (max-width: 1000px) {
#breadcrumbs ul {
	width:						392px;
	margin-left:				150px;
	}
}
@media all and (max-width: 744px) {
#breadcrumbs {
	background-color:			#600;
	margin-top:					-2px;
	padding-bottom:				2px;
	}
#breadcrumbs ul {
	display:					none;
	}
#minisearch {
	display:					block;
	position:					relative;
	padding:					0;
	height:						33px;
	margin:						0;
	}
#minisearch input {
	display:					block;
	width:						100%;
	margin:						0 auto;
	border:						none;
	}
}


/* Structure - content and containers */
#content {
	background:					#fff url("../images/graphics/shadow.png") repeat-x top;
	}
.container {
/*border-top: 1px solid #0f0;*/
	margin:						0 auto;
	padding:					0;
	width:						696px;
	}
.sectioncontent {
	padding:					0 0 2em 0;
	}
@media all and (max-width: 744px) {
.container {
	width:						auto;
	margin:						0 18px;
	}
}



/* Structure - footer */
#footer {
	padding:					0.5em 0;
	clear:						both;
	color:						#888;
	background-color:			#000;
	}
#footer p {
	padding:					0;
	font-size:					85%;
	line-height:				200%;
	text-align:					center;
	}



/* Further info */
#furtherinfo {
	clear: 						both;
	padding:					1em 0 2em 0;
	background-color:			#e3e3e3;
	color:						#333;
	}
#furtherinfo .sectioncontent, #furtherinfo .sectionheading {
	color:						#555;
	}
#furtherinfo h2 {
	width:						100%;
	margin:						0 0 1em 0;
	border-bottom:				1px solid #999;
	padding-bottom:				0.3em;
	font-size:					130%;
	}
.furtherinfopanelcentre {
	display:					inline-block;
	vertical-align:				top;
	padding:					0 0 1em 24px;
	width:						336px;
	}
.furtherinfopanelleft, .furtherinfopanelright {
	display:					inline-block;
	vertical-align:				top;
	width:						156px;
	padding-bottom:				1em;
	}
.furtherinfopanelleft {
	margin-left:				-180px;
	}
.furtherinfopanelright {
	margin-right:				-180px;
	padding-left:				24px;
	}
#furtherinfoend {
	clear: 						both;
	}
#furtherinfo a, #furtherinfo a:visited {
	color:						inherit;
	font-weight:				normal;
	}
.updatelist li {
	padding:					0 0 1em 0;
	line-height:				140%;
	}
.updatelist .date {
	display:					block;
	color:						#777;
	}
#sitestats {
	margin:						1em 0 0 0;
	border-top:					1px solid #999;
	padding:					1.5em 0 0 0;
	line-height:				normal;
	color:						#777;
	text-align:					center;
	}
@media all and (max-width: 1104px) {
.furtherinfopanelleft {
	margin-left:				-152px;
	}
.furtherinfopanelleft, .furtherinfopanelright {
	width:						128px;
	}
}
@media all and (max-width: 1000px) {
.furtherinfopanelleft {
	margin-left:				-152px;
	}
.furtherinfopanelleft, .furtherinfopanelright, .furtherinfopanelcentre {
	margin-left:				0;
	margin-right:				0;
	width:						100%;
	padding-left:				0;
	}
}
@media all and (max-width: 744px) {
.furtherinfopanelleft, .furtherinfopanelright {
	display:					none;
	}
}


/* Productgroup styles */
.productgroup h2 {
	clear:						both;
	margin:						1em 0 0.5em 0;
	line-height:				130%;
	}
.productgroup h2 a {
	display:					block;
	border-bottom:				1px solid #ddd;
	padding:					0 0 0.2em 0;
	text-decoration:			none;
	}
.productgroup .productsummary {
	padding-left:				0;
	}


img.lightbox-image {
	cursor:						pointer;
	}


/*******************************************************************************
	Image lightbox styles
*******************************************************************************/
.lightbox .container .box.image {
	width: auto;
	margin:						0 auto;
	padding:					0;
	background-color:			#fff;
	border-radius:				5px;
	box-shadow:					1px 1px 25px rgba(0, 0, 0, 0.4);
	}
.lightbox .container .box.image .close {
	float:						right;
	position:					relative;
	margin:						-17px -17px -17px 0;
	cursor:						pointer;
	z-index: 					11000;
	}
.lightbox .container .box.image .image-container {
	border-top-left-radius:		5px;
	border-top-right-radius:	5px;
	overflow:					hidden;
	}
.lightbox .container .box.image .caption {
	text-align:					center;
	font-weight:				bold;
	padding:					4px 0;
	}
.lightbox .container .box.image .caption .image-link {
	font-weight:				normal;
	display:					block;
	width:						6em;
	}
.lightbox .container .box.image .caption .image-link span:hover {
	cursor:						pointer;
	}
.lightbox .container .box.image .caption .image-link span:hover span {
	text-decoration:			underline;
	}
.lightbox .container .box.image .caption .image-link.previous {
	float:						left;
	text-align:					left;
	padding-left:				8px;
	}
.lightbox .container .box.image .caption .image-link.next {
	float:						right;
	text-align:					right;
	padding-right:				8px;
	}