/* Fonts */

html, body {
	height: 100%;
}

@font-face {
	font-family: 'icon';
	src:url('fonts/end.eot');
	src:url('fonts/end.eot') format('embedded-opentype'),
		url('fonts/end.woff') format('woff'),
		url('fonts/end.ttf') format('truetype'),
		url('fonts/end.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	/* line-height: 1; */

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-checkmark:before {
	content: "\e600";
}
.icon-cross:before {
	content: "\e601";
}
.icon-minus:before {
	content: "\e602";
}
.icon-plus:before {
	content: "\e603";
}
.icon-cross2:before {
	content: "\e604";
}
.icon-cross3:before {
	content: "\e605";
}
.icon-info:before {
	content: "\e606";
}
.icon-help:before {
	content: "\e607";
}
.icon-cw:before {
	content: "\e608";
}
.icon-arrow-left:before {
	content: "<";
}
.icon-arrow-right:before {
	content: ">";
}

/* Content Blocks */
div#contentholder a {
	text-decoration: none;	
}
	
#wrapper { 
	background-color: #FFFFFF;
	font-family: Arial;
	display: block;	
}

#headerContent {
	display: block;
	padding: 40px;
	text-align: center;
	color: #444444;
}
div#contentholder 
#headerContent h2 {
	font-weight: normal;
	font-size: 2.4em;
	color: #000000;
	margin: 10px 0px;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.2);
}
#headerContent #subtitle {
	font-size: 1.4em;
}
#headerContent #related {
	font-size: 1.1em;
}
#headerContent #related a {
	color: #71B3d4;
}
#headerContent #related a:hover {
	text-decoration: underline;
}
#headerContent span.error {
	color: #E63C39;
	font-weight: bold;
	font-style: italic;
}

#secondaryContent {
	width: 240px;
	display: block;
	float: left;
	background-color: #F6F6F6;
}

#mainContent {
	width: 743px;
	display: block;
	float: right;
	clear: right;
	display: block;
	position: relative;
	padding-bottom: 20px;
}
#mainContent.full {
	width: 100%;
}
#mainContent.full #searchTerms #subtitle {
	padding-left: 15px;
}
/* Component Blocks */
.component {
	margin: 20px;
	padding: 20px; 
}

#topBar {
	border-top: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
	margin-right: 13PX;
}

#filterBar {
	border-bottom: 1px solid #EEEEEE;
	margin-right: 13PX;
	padding: 10px;
}
#filterBar label {
	position: relative;
	top: -3px;
}

#resultsList {
	margin: 0;
	padding: 0;
	display: block;
}

#contentholder {
	 display: blockl
}

/* Results */
#results {
	display: block;
	margin: 20px 0px;
}
.result {
	display: block;
	float: left;
	width: 242px;
	height: 370px;
	margin-right: 2px;
	margin-bottom: 4px;
	position: relative;
}
div#contentholder
.result a:hover .descr {
	text-decoration: underline;
}
.result .wrapper {
	display: block;
	position: relative;
	border: 1px solid #EEEEEE;
	height: 100%;
}
.result.hover .wrapper {
	border-color: #DDDDDD;
} 
.result .outer {
    display: block;
    height: 200px;
    width: 100%;
}
.result .outer .inner {
	display: block;
	text-align: center;
}
.result .outer .inner img {
	display: block;
	visibility: hidden;
	margin: 0 auto;
	transition: opacity linear .2s;
	opacity: 0;
}
.result .outer .inner img.loaded {
	visibility: visible;
	opacity: 1;	
}
.result .descr {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	height: 170px;
	width: 100%;
}
.result .descr span { margin: 0 20px; }
.result .descr span.title {
	margin-top: 12px;
	display: block;
	font-size: 14px;
}
.result .descr span.code {
	margin-top: 3px;
	display: block;
}
.result .descr span.price {
	margin-top: 5px;
	font-size: 18px;
	display: block;
}
.banner-Middle {
	display: block;
}
.banner-Middle a {
	display: block;
	margin-bottom: 2px;
}
.add-basket {
	position: absolute;
	display: block;
	width: 100%;
	bottom: 0;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.add-basket .inner {
	position: relative;
	background-color: #29bd00;
	margin: 20px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	padding: 10px;
	text-align: center;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	border-bottom: 2px solid #99CC77;
}
a.add-basket:hover .inner {
	background-color: #75d459;
	border-bottom: 2px solid #88BB66;
	transition: background-color 0.3s;
}
a.add-basket:active .inner {
	border-color: transparent;
	top: 2px;
    box-shadow: inset 0 5px 10px 0px rgba(0,0,0,0.1);
}

a.add-basket.loading .inner {
	background-color: #BBBBBB;
	border-bottom-color: #AAAAAA;
}

/* Sort Options */
.rppoptions,
.sortoptions {
	display: block;
	float: left;
}
.rppoptions .inner,
.sortoptions .inner {
	padding: 10px;
}
.rppoptions select,
.sortoptions select {
	padding: 2px;
	font-size: 1.2em;
}
.rppoptions label,
.sortoptions label {
	padding: 2px;
	font-size: 1.2em;
	color: #999;
}

/* Pagination */
.pagination {
	display: block;
	float: right;
}
.pagination ul {
	list-style: none;
	display: block;
	margin: 0;
	padding: 10px;
}
.pagination ul li {
	display: block;
	float: left;	
}
div#contentholder .pagination ul li a span {
	font-size: 14px;
	display: block;
	width: 5px;
	overflow: visible;
	position: relative;
	left: -4px;
}
div#contentholder .pagination ul li a {
	position: relative;
	display: block;
	color: #000;
	padding: 6px 10px;
	margin: 0px 2px;
	text-decoration: none;
	background-color: #EEEEEE;
	font-weight: normal;
	border-radius: 5px;
}
div#contentholder .pagination ul li a.active {
	background-color: #71B3d4;
	color: #FFFFFF;
}

div#contentholder .pagination ul li a:hover {
	background-color: #E0E8EE;
	color: #000000;
}

div#contentholder .pagination ul li a.noclick {
	background-color: #FFFFFF;
	padding-left: 0px;
	padding-right: 0px;
}

/* Guided Navigation */
#guidedNavigation {
	margin: 0;
	padding: 0;
}
.dimension {
	padding: 20px;
	border-bottom: 2px solid #ffffff;
	position: relative;
}
div#contentholder
.dimension a.showmore,
div#contentholder
.dimension a.showless {
	display: block;
	font-size: 1.0em;
	background-color: #CCCCCC;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	color: #FFFFFF;
	float: right;
	border-top-left-radius: 5px;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
div#contentholder
.dimension a.showmore:hover,
div#contentholder
.dimension a.showless:hover {
	transition: 0.2s;
	background-color: #71B3d4;
	color: #FFFFFF;

}
.dimension a.showmore .inner,
.dimension a.showless .inner { padding: 5px 10px; display: block; }
.dimension ul {
	list-style: none; 
	margin: 0;
	padding: 0;	
}
.dimension ul li a {
	display: block;
	padding: 5px 0px 5px 30px;
	text-decoration: none;
	font-size: 12px;
	border-radius: 5px;
}
.dimension ul li a:hover {
	background-color: #E0E8EE;
	
}
.dimension .title {
	font-size: 14px;
	display: block;
	margin-bottom: 10px;
	color: #444444;
	font-weight: bold;
	text-transform: uppercase;
}
.dimension .count {
	color: #999;
	margin-left: 5px;	
}
.dimension .checkbox {
	background-color: #FFFFFF;
	border: 1px solid #cccccc;
	width: 12px;
	height: 12px;
	left: 28px;
	position: absolute;
	display: inline-block;
	margin-right: 5px;
	border-radius: 3px;
}


#dim-availability span#localStore {
	display: block;
	margin: 10px 0;
}
#dim-availability label {
	margin: 10px 0;
	width: 60px;
	position: relative;
	top: 5px;
	font-weight: bold;
}
#dim-availability input {
	width: 100px;
	float: right;
}

#dim-colour ul li a .checkbox .inner {
	padding: 0;
	border-radius: 1px;
	width: 10px;
	height: 10px;
	margin: 1px;
	display: block;	
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.2)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#33ffffff',GradientType=0 );
}


#dim-colour .colour-Black	{ background-color: #222222 !important; }
#dim-colour .colour-Blue	{ background-color: #336699 !important; }
#dim-colour .colour-Brown	{ background-color: #7F5417 !important; }
#dim-colour .colour-Green	{ background-color: #009A31 !important; }
#dim-colour .colour-Clear	{ background-color: transparent !important; }
#dim-colour .colour-Cream { background-color: #FFF8DC !important; }
#dim-colour .colour-Grey	{ background-color: #999999 !important; }
#dim-colour .colour-Orange { background-color: #FF9900 !important; }
#dim-colour .colour-Pink	{ background-color: #FF0080 !important; }
#dim-colour .colour-Purple { background-color: #8C489F !important; }
#dim-colour .colour-Red	{ background-color: #E63C39 !important; }
#dim-colour .colour-Silver { background-color: #CCCCCC !important; }
#dim-colour .colour-White  { background-color: #FFFFFF !important; }
#dim-colour .colour-Yellow { background-color: #FFDE00 !important; }
#dim-colour .colour-MetallicChrome { background-color: #ddddee !important; }
#dim-colour .colour-Violet { background-color: #8D38C9 !important; }
#dim-colour .colour-MetallicBrass { background-color: #B5A642 !important; }


/* Custom price */
.dimension #customPrice {
	margin: 10px 0 0 0;
}
.dimension #customPrice input {
	width: 40px;
	display: inline-block;
	margin: 0px 5px
}
.dimension #customPrice form {
	display: block;
	margin-top: 10px;
}



/* Guided Navigation */
#breadbox {
	margin: 0;
	padding: 0;
	background-color: #F0F0F0;
}
.refinement {
	padding: 20px;
	border-bottom: 2px solid #ffffff;
}
.refinement ul {
	list-style: none; 
	margin: 0;
	padding: 0;	
}
.refinement ul li a {
	display: block;
	padding: 5px 0px 5px 30px;
	text-decoration: none;
	font-size: 12px;
	border-radius: 5px;
}
.refinement ul li a:hover {
	background-color: #E0E8EE;
}
.refinement .title {
	font-size: 14px;
	display: block;
	margin-bottom: 10px;
	color: #444444;
	font-weight: bold;
	text-transform: uppercase;
}
.refinement .count {
	color: #999;
	margin-left: 5px;	
}
.refinement .remove {
	left: 28px;
	position: absolute;
	display: inline-block;
	margin-right: 5px;
	border-radius: 3px;
	font-size: 15px;
	color: #BBBBBB;
}

.refinement a:focus .remove,
.refinement a:hover .remove {
	color: #E63C39;

}

#fade.hidden {
	visibility: hidden;
	transition: opacity linear .2s;
	opacity: 0;
}

#fade{
	-webkit-backface-visibility:hidden; -webkit-transform: translateZ(0);
	visibility: visible;
	transition:  opacity linear .2s;
	opacity: 1;
	display: block;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.3;
    opacity:.30;
    filter: alpha(opacity=50);
	/* IE6 */
	*position: absolute;
	*left: expression( ie6 = (document.documentElement.scrollLeft + "px") ) ;
	*top: expression( ie6 = (document.documentElement.scrollTop + "px") ) ;
 }

#basket-popup.hidden{
	visibility: hidden;
	transition: margin-top linear .1s, opacity linear .1s;
	margin-top: -180px;
	opacity: 0;
}
 
.basket-popup {
	-webkit-backface-visibility:hidden; -webkit-transform: translateZ(0);
	visibility: visible;
	transition: margin-top linear .1s, opacity linear .1s;
	opacity: 1;
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 700px;
	height: 400px;
	margin-left: -350px;
	margin-top: -200px;
	background-color: white;
	z-index:900002;
	overflow: auto;
	font-family: Arial;
	box-shadow: 0px 0px 100px 10px rgba(0,0,0,0.4);
	text-align: left;
	 /* IE6 */
	*position: absolute;
	*left: expression( ie6 = (document.documentElement.scrollLeft + (document.documentElement.clientWidth / 2) + "px") ) ;
	*top: expression( ie6 = (document.documentElement.scrollTop + (document.documentElement.clientHeight / 2) + "px") ) ;
}
.basket-popup-continue {
	 -webkit-backface-visibility:hidden; -webkit-transform: translateZ(0);
	 visibility: visible;
	 transition: margin-top linear .1s, opacity linear .1s;
	 opacity: 1;
	 display: block;
     position: fixed;
     top: 60%;
     left: 55%;
     width: 600px;
     height: 175px;
     margin-left: -350px;
     margin-top: -200px;
     background-color: white;
     z-index:1002;
     overflow: auto;
     font-family: Arial;
     box-shadow: 0px 0px 100px 10px rgba(0,0,0,0.4);
     text-align: left;
	 /* IE6 */
	*position: absolute;
	*left: expression( ie6 = (document.documentElement.scrollLeft + (document.documentElement.clientWidth / 2) + "px") ) ;
	*top: expression( ie6 = (document.documentElement.scrollTop + (document.documentElement.clientHeight / 2) + "px") ) ;
 }

/* Popup */
#basket-popup span.header {
	background-color: #F6F6F6;
	font-size: 1.8em;
	display: block;
	text-align: left;
	padding: 12px 20px;
	font-weight: bold;
}
#basket-popup span.title {
	font-size: 1.8em;
	display: block;
	text-align: left;
	margin: 20px 20px;
}

#basket-popup a#close {
	position: absolute;
	top : 10px;
	right: 10px;
	font-size: 2.6em;
	color: #BBB;
	text-decoration: none;
	*background-color: #AAAAAA;
	*width: 20px;
	*height: 20px;
	*display: block;
}
#basket-popup a#close:hover {

}
#basket-popup a#close:hover span.icon-cross:before {
	content: "\e605";
	*content: "X";
}


#basket-popup img {
	display: block;
	margin-left: 20px;
}

#skutab {
	display: block;
	position: absolute;
	top: 120px;
	left: 220px;
	width: 460px;
	height: 200px;
	overflow-y: auto;	
}

#basket-popup.hidden {
	
}

#skutab table { width: 100%; background-color: #FFFFFF; border-collapse: collapse; font-size: 1.2em;}
#skutab table th { padding: 8px 10px;}
#skutab table td { padding: 8px 10px;}
#skutab tr td:nth-child(4) {
	text-align: right;

}
#skutab tr:nth-child(odd) {
   background-color: #F4F4F4;
}
#skutab tr td:nth-child(2) {
	font-weight: bold;
}
#basket-popup .add-basket .inner { margin: 0;  }
#basket-popup .add-basket {
	width: 200px;
	position: absolute;
	right: 20px;
	bottom: 20px;
	margin: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#basket-popup .goto-cart .inner { 
	margin: 0; 
	background-color: #c6c6c6;  
	border-bottom: 2px solid #d9d9d9;
}
#basket-popup .goto-cart {
	width: 200px;
	position: absolute;
	right: 20px;
	bottom: 20px;
	margin: 0;
}
#basket-popup .goto-cart:hover .inner {
	background-color: #e2e2e2;
	border-bottom: 2px solid #f5f5f5;
	transition: background-color 0.3s;
}
#basket-popup .continue .inner { margin: 0;  }
#basket-popup .continue {
	width: 200px;
	position: absolute;
	right: 240px;
	bottom: 20px;
	margin: 0;
}

/* Admin box */
#admin-box {
	display: block;
	padding: 20px;
	background-color: rgb(240,240,240);
	height: 1%;
	overflow: hidden;
}

.admin-col {
	width: 220px;
	display: block;
	float: left;	
}
.admin-col + .admin-col {
	width: 180px;
}

#admin-box label {
	display: block;
	color: #999999;
	font-size: 1.0em;
	margin-bottom: 5px;
	display: block;
}

#admin-box span {
	display: block;
	color: #999999;
	font-size: 1.0em;
}
#admin-box span b{
	color: #444444;
}

#admin-box input[type=text] {
	display: block;
	float: left;
	margin: 0;
	padding: 5px;	
	font-size: 1.1em;
	color: #444444;
	border: 1px solid #cccccc;
	border-right: none;
}

#admin-box a#admin-submit {
	display: block;
	font-weight: bold;
	float: left;
	width: 20px;
	padding: 5px;	
	font-size: 1.1em;
	background-color: red;
	clear: right;
	color: #FFFFFF;
	background-color: #29bd00;
	border: 1px solid #99CC77;
	cursor: pointer;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	text-align: center;
}

#admin-box ul {
	display: block;
	clear: both;
	background-color: #cccccc;
	padding: 0;
	margin: 10px 0 0 0 ;
}

#admin-box ul li {
	display: block;
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
}

#admin-box ul li a {
	text-transform: uppercase;
	padding: 10px;
	display: block;
	text-align: center;
	font-size: 1.0em;
	font-weight: bold;
	color: #FFFFFF;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#admin-box ul li a.active {
	box-shadow: none;
	cursor: pointer;
	background-color: #EEEEEE;
	border-left: 1px solid #F2F2F2;
	border-top: 1px solid #F2F2F2;
	border-bottom: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
	color: #333333;
}

#admin-box ul li a.active:hover {
	
	transition: background-color 0.3s;
}

#searchTerms {
	display: block;
	padding: 20px 5px;
	font-size: 16px;
	font-weight: bold;
}
#searchTerms span.error {
	color: #E63C39;
	font-weight: bold;
	font-style: italic;
}


/* Fixes + hacks */
.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

.banner-text-container {
	position: absolute;	
	display: inline-block;
	height: 120px;
	left: 0;
	margin-left: 20px;
	margin-right: 20px;
}

.result-Inline {
	height: 246px;
}

.banner-text-container #banner-header {
	display: inline-block;
    width: 95%;
    margin-bottom: 0px;
	color: #ca3432;
	font-size: 22px;
	font-family: Arial;
	font-weight: bold;
}

.banner-text-container p {
	font-size: 12px;
	font-family: Arial;
	line-height: 1.5em;
    display: inline-block;
}

.black-white #banner-header {
	color: #3a3b43;
}

.red-white #banner-header {
	color: #e93846;
}

.banner-text-container.black-white p {
	color: #a2a2a3;
}

.banner-text-container.red-white p {
	color: white;
}

.banner-Inline .banner-text-container {
    top: 0.1em;
    width: 84%;
}

.banner-text-container.two-thirds {
    width: 60%;
}

.banner-text-container.full {
    width: 93%;
}