@import url("//fonts.googleapis.com/css?family=Montserrat:900,800,700,600,500,400,300,200,100");  
@import url("//fonts.googleapis.com/css?family=Poppins:900,800,700,600,500,400,300,200,100");  

* {
font-family: Poppins, Helvetica, sans-serif;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 14px;
color:#333333;
text-decoration: none;
text-align:left;
margin:0; 
padding:0;
border:0px;
list-style:none; 
font-weight:normal ;
letter-spacing:0.2px;
-webkit-text-size-adjust: 100%; 
appearance: none;
border-radius:0px;
z-index:1;
-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
-moz-border-radius: 0;
outline:none; outline:0px;  
}

.pagetitles , a.pagetitles:link, a.pagetitles:visited  {
 /* match logo for height & border */
	margin:  0px 0 8px 0;
 padding: 0 0 4px 0;
 font-weight: normal;
 font-size:20px;
 text-transform: capitalize;
 color: #200451;
 letter-spacing: -0.6px; 
	text-align:center;
 }

.pagetitles{ 
 height:44px;
 line-height:44px;
	border-bottom:4px solid ; border-color:#200451; text-align:left; 
	}
	.pagetitles , .pagetitles span{ color:#200451; font-weight:500;   }


.subtitles , a.subtitles:link, a.subtitles:visited  {
	margin:  0;
	padding:0;
	font-weight: normal;
	font-size: 1.0em; 
	text-transform: none;
	color: #422B1D;
 	}
		

html, body {
	height: 100%;
	width: 100%;
	background-color: #FDFDFD;
}




::-webkit-scrollbar {
width: 10px;
height: 10px;
}  

-moz-scrollbar-track , 
::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 4px; 
}
::-webkit-scrollbar-thumb {
border-radius: 8px;width: 4px;
background-color: #999;
}



::-webkit-input-placeholder { color:#999;font-style: italic }
::-moz-placeholder { color:#999;font-style: italic } /* firefox 19+ */
:-ms-input-placeholder { color:#999;font-style: italic } /* ie */
input:-moz-placeholder { color:#999; font-style: italic }

div, p , a, span, input , strong, em, table, tr, td  { color:inherit; font-size:inherit; }

strong{ font-weight:bold;}

.fadeContent{ 
 opacity: 0.3;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

a, a:link, a:visited, a:active { text-decoration:inherit;  outline:none} 
a:hover{ text-decoration:inherit; color:#000; outline: none} 

.red, a.red ,p.red, span.red{ color:#FF0000}
.blue, a.blue ,p.blue, span.blue{ color: #006699}
.green, a.green ,p.green, span.green{ color: #99CC00}
.gray, a.gray ,p.gray, span.gray{ color: #999999}
 
.floatRight{float:right; }

.floatLeft{float:left; }

.clearFloat{
	clear:both;
	height:0px;
	margin:0px; padding:0px;
}

.block { display:block}

.TAR{ text-align:right}
.TAL{ text-align:left}
.TAC{ text-align:center}

.centred , .centered{margin:0 auto}


#logo{ /*match page title heights for lining up */
 display:block;
 float:right;
 height:80px;
 width: 100%;
 margin:40px 0 5px 0;
 padding: 0;
background-image: url(../images/logo.png);
 background-repeat: no-repeat;
 background-position:50%  0% ;background-size:contain;
/* border-bottom:2px solid #B7978B*/
 }

#logo span{
display:block; height:100%;
text-indent:-9999px;}
 
 

#ajaxContainer{
position: fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-image:url(../images/bgTrans.png);
z-index:1000; display:none
} 

#wrapper {
	margin:  0px auto 0px auto;
	padding:0 0  0px 0 ; 
	width:1220px; 
 min-height: calc(100% - 170px);  
}


.transWht{ background-image:url(../images/bgTrans.png);} 

.noBorder{
border: none;
}

#header{
height:8px;
background-color:#200451; background-image: linear-gradient( to bottom  ,#200451 , #2A056B  );
}


#contentWrapper{
	clear: both;
	text-align:left;
	z-index: 1;
	margin:  0px auto 0px auto;
	padding: 0  ;
	width: 100%; height:auto;   
}
 

#contentClear{	clear:both; height:4px;  }

 	
#contentLeft  {
 /*border:1px solid #333;*/
	width: 225px;
 float: left;
 padding: 0 0px 0 0px;
 text-align: right;
	}
  

#contentRight{
	width:960px; 
	padding:  0px 0;   
	text-align: left;
	float: right;
	margin:34px 0 auto 0;
 position:relative; 
}
#productOutput{	width:960px;  float:right;	margin:34px 0 auto 0; position:relative; }/*products page*/
#productOutput span#brandBg{ display:block; margin:10px 0; clear:both; width:100%; height:60px;   left:0; top:0; z-index:0; background-size:contain; background-position: 0% 0%; background-repeat:no-repeat; }

#noResults{ margin:30px auto;   text-align:left; display:block; clear:both}

#filterOpener{
display:block;
clear:both;
width:100%;
padding:0px; 
 }
	#filterOpener p{
cursor:pointer; height:30px; line-height:30px;
color:#fff;
font-weight:bold;
border-radius:3px;
padding:0px 25px; 
display:inline-block; 
background-color: #200451;
font-size: 11.8px;
}
.mobile #filterOpener p{height:36px; line-height:36px;}

#filterWrapper{ background:#fff; position:relative; z-index:100001; width:100%; height:0px;}

.mobile #filterWrapper{width:100%; max-width:550px;}
#filterForm{
display:block;
clear:both;
width:100%;background:#fff;
padding:10px   10px;
border:3px solid #200451;
z-index:10001;
border-radius:3px;
background-image: url(../images/semiOverlay.png);
background-repeat:repeat;
}
.screen #filterForm{ position:absolute; top:-32px; width:1140px; right:0px; left:auto  }
.mobile #filterForm{ position:absolute; top:-36px; }
#filterCloser{
position:absolute;
width:16px;
height:16px;
right:18px;
top:15px;
cursor:pointer;
background-image:url(../images/icons/closer.png);
background-size: contain;
background-repeat: no-repeat;
}


#filterForm ul{
display:block;
border:0px solid red;
padding:4px;
} 
.screen #filterForm ul{float:left;margin:0 0%; padding-right:25px; min-height:250px;max-height:550px; overflow:hidden; overflow-y:auto;  }   
.screen #filterForm ul#brandFilter{width:25%;}
.screen #filterForm ul#catFilter{width:25%;}
.screen #filterForm ul#regionFilter{width:25%;} 
.screen #filterForm ul#locationFilter{width:25%;}

#sortingSelect{
width:300px;
clear:both;
height:38px;
margin-bottom:6px;
border:2px solid #ccc;
border-radius:3px;
background-image:url(../images/icons/arrowD.png);
background-size: 11px auto;
background-position:98% 50%;
background-repeat: no-repeat;
text-indent:0;
padding: 0 0 0 4px;
}

.mobile #sortingSelect{ width: 200px;}

#filterForm ul li{ display:block; margin:8px auto; padding:0; position:relative; clear:both;    }
.mobile #filterForm ul li{ margin:4px auto}
#filterForm ul li strong{color: #200451; border-bottom:2px solid #333; display:block; font-size:12px; margin-bottom:10px; }
.mobile #filterForm ul li strong{width:calc(100% - 50px); border:none;margin-bottom:5px;}
#filterForm ul li label{ display:block; cursor:pointer; color:#069; font-weight:bold; font-size:11.4px; }
.mobile #filterForm ul li label{ font-size:14px;  padding:3px; }
#filterForm ul input[type=checkbox] , #filterForm ul input[type=radio]  { position:absolute; left:-10000px;}
#filterForm ul label span{
display:block;
float:left;
height:16px;
width:16px;
border:1px solid #e1e1e1;
margin-right:4px;
background-position:50% 50%;
background-repeat:no-repeat;
background-color: #FFF;
} 
#filterForm ul input[type=radio]+ label span{ border-radius:20px}
#filterForm ul input[type=checkbox]:checked  + label, #filterForm ul input[type=radio]:checked  + label { color:#8FBD00 }
#filterForm ul input[type=checkbox]:checked  + label span, #filterForm ul input[type=radio]:checked  + label span{ background-image:url(../images/checked.png) }
#filterForm ul input[type=checkbox]:disabled + label{ opacity:0.7; color:#999;  }

#filterForm #buttonWrap{ display:block; clear:both; text-align:right; padding:10px 10px; height:40px;}
#filterForm #filterSubmit{
cursor:pointer; height:30px; line-height:30px; float:right;
color:#fff;
font-weight:bold;
border-radius:3px;
padding:0px 25px; 
display:inline-block; float:left;
background-color: #200451;
font-size: 11.8px;
}
#filterForm #resetFilters{
float:right;
cursor:pointer;
color:#F60;
font-weight:bold;
text-align:right;
height:30px;
line-height:34px;
font-size:12px;
}


#loadingContent{position:relative; z-index:100;} 
#loadingContent span{
	position:absolute;
	top:205px;
	left:267px;
	font-size:11px;
	color:#999999;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center
}
#loadingContent span img{ display:block; padding:6px 0; margin:0 auto; height:26px;}
 

#searchWrap{ }
#searchForm{ position:relative; width:100%;}
#searchForm  #search{ width:100%; height:38px;border-radius:2px; border:1px solid #ccc; padding:0; text-indent:6px; font-size:11.8px; transition:all 0.15s ease-in-out;}
#searchForm  #search.searchError{ border-color:#F00}

#searchForm #searchBtn{
position:absolute;
right:2px;
top:2px;
background:#fff;
border:none;
height:34px; width:20px;
background-image:url(../images/icons/headerIconsSearch.png);
background-repeat: no-repeat;background-size:auto 16px ;
background-position: 10% 50%; font-size:1px; color:transparent; cursor:pointer
}
.mobile #searchWrap{ display:none;  margin: 0 auto; padding:5px 10px 10px 10px }
.mobile #searchForm{width:100%; max-width:400px; margin:0  0px;}
.mobile #searchForm  #search{ height:48px; font-size:12.2px;}
.mobile #searchForm #searchBtn{height:44px; background:none}

#navMain   {
 width:100%;
 padding:0px 0  0px 0;
 margin:15px auto 10px auto;
 clear: both;  
}
 
#navMain  li { padding:0; display: block; clear:both;  width:100%;  margin: 5px auto;}


#navMain  li a  {
display:block;font-size:17px;
clear:both;
text-align:left;
color: #200451; 
letter-spacing:-0px;
text-transform: capitalize;
/*background-image:url(../images/nav/mainNavArrow.png);
background-position:0px 50%;
background-repeat:no-repeat;*/
font-weight:bold;
padding: 0px 0 0 2px;
}
#navMain  li a:hover{ color:#333; text-decoration:underline ; }
#navMain  li  a.mainActive{ color:#333 ;font-weight:bold; }
#navMain li a.mainCat{ margin-top: 5px}



/* sub stuff */
#navMain  li  a.mainOpen{ color:#333;font-weight:bold; } 
#navMain  li ul{ display:none;padding: 0px 0  0px 20px; margin:0 auto; width:100%;   }
#navMain  li  ul.openSub{ display:block}
#navMain  li ul li { display:block; clear:both;  }

#navMain  li.subsOpener,  
#navMain  li ul li a  {
color:#200451;font-size:14px;
background:none;
display:block;  font-weight: bold; cursor:pointer; 
clear:both;
padding:2px 0 ;
margin:2px 0;
text-align:left; 
text-transform: capitalize; 
 }

 #navMain  li.viewBySub { border: 0px solid red;margin-bottom: 30px;}
 #navMain  li.viewBySub a {
	font-size: 12.6px;
	font-weight: 700;
	padding: 0px 0 3px 16px;
	color: #444;
/*background-image:url(../images/nav/mainNavArrow.png);
	background-position: 4px 50%;
	background-repeat: no-repeat;
	background-size:   auto;*/
}
  #navMain li.viewBySub  a:last-child { }
#navMain  li#welcomeBack{
background:none;
padding:10px 0 0 0px;
margin:20px 0 0 0;
border-top:2px solid #B7978B;
color:#333;
font-family: "Montserrat", "Times New Roman", Times, serif;
font-size:15px;
font-weight:normal;
font-style: normal
} 
#navMain  li#signOutLink{ background:none; padding:0 0 0 0px; margin:30px 0 0 0;  }
#navMain  li#signOutLink a {
background:none;
margin:0;
color: #069;
font-weight:bold;
padding-left:0; 
font-size:13.5px;
}  
#navMain  li#signOutLink a span{padding: 0 0 4px 0;  }
#navMain  li#signOutLink a:hover  {text-decoration:none; color:#FF0000}
/* sub stuff */


/* map &  locations  no map mobile, list instead    */
#mapContainer{ position:relative}
#mapWrapperMobile{ display:none; z-index:1} 
#mapWrapper{ display:block ; position:relative; height:404px; width:100%; margin: 0px auto 0px auto; z-index:1 } 

#contentListWrapper{}
.screen #contentListWrapper{border:4px solid #200451; border-top-width:0px;
background:#fff;
position:absolute;
width:100%;
top:44px;/*clear title*/
left:0; height:440px; }

.continentRegionsList  {display:block ;  z-index:200}
.screen  .continentRegionsList {
width:100%;
margin: 15px auto 0px auto; 
padding:0px 25px; max-height:390px; overflow:hidden; overflow-y:auto 
} 

.mobile  .continentRegionsList { background:#fff; z-index:10001;border:2px solid #e1e1e1; padding:16px 20px;}
.continentRegionsList li{ display:block}
li.continentRegionsListCloser {   height:0px; position:relative;}
.continentRegionsListCloser span{
width:30px;
height:30px;
border-radius:3px;
background:#aaa;
position:absolute;
right:0px;
top:0px;
cursor:pointer;
background-image:url(../images/icons/deleteWhite.png);
background-repeat: no-repeat;
background-position:50% 50%;
background-size:8px;
-webkit-transition:all 0.15s ease-in-out;
-moz-transition:all 0.15s ease-in-out;
-o-transition:all 0.15s ease-in-out;
transition:all 0.15s ease-in-out;
}
.continentRegionsListCloser span:hover{background-size:10px;background-color: #999 }

.continentRegionsList li h5{
font-size:22px;
font-weight:bold;
color: #280566;
}
.screen .continentRegionsList li h5{padding:6px 4px;}
.mobile .continentRegionsList li h5{padding:0 0 10px  px;}
.continentRegionsList li a{
display:block;
color:#069}

.screen .continentRegionsList li a{
border-bottom:0px dashed #e1e1e1;
padding:8px 4px;
font-size:13.2px;
color:#069
}
.mobile .continentRegionsList li a{
border-bottom:0px dashed #e1e1e1;
padding:8px 0px;
font-size:15px;
}
.continentRegionsList li a:hover{ background:#f8f8f8}

#mapWrapper li {  height:222px; width:451px;  position:absolute; left:0; top:0;    }
#mapWrapper li.mapSection{ display:none} 
#mapWrapper li#mainMap{ position:relative; display:block;height:404px; width:800px;  }

#mapWrapper li img{ margin:0  ; height:404px; width:800px;   } 

area {
  display: block; cursor:pointer
}

area.noProducts{ cursor:auto}


/*  mobile map &  locations no map just a list    */ 
#mapWrapperMobile{ display: block }
#mapWrapperMobile{ position:relative; width:100%; margin:15px auto 5px auto; padding:0 15px 15px 10px ;  } 
#mapWrapperMobile li {  display:block; padding:12px 20px 12px 0; float:none; 
/*background-image:url(../images/icons/arrowRGrayThin.png); background-position: calc(100% - 6px) 10px; background-repeat:no-repeat;*/
border-bottom:1px solid #e1e1e1; 
 font-weight:bold;   }      
	#mapWrapperMobile li strong{ font-size:18px ; cursor:pointer; color: #280566;} /*opener */
#mapWrapperMobile  strong.noProducts{ cursor:default; color: #CCCCCC	}
#mapWrapperMobile li ul{ margin:15px auto 50px auto; display:none }
/*#mapWrapperMobile li.hasProducts:hover ul{ display:block}*/
#mapWrapperMobile li ul li{ background:none ; border:none; font-size:16px; margin:0; padding:10px 5px;}
#mapWrapperMobile li ul li a{color: #069; font-weight:bold}
/*  mobile map &  locations no map just a list    */ 


  
/* matches locationSelectTop bg */
#breadcrumb{ 
display:block; clear:both; margin:8px  auto;  width:100%; 
padding-top:8px; 
font-size:0.8em;
}

#breadcrumb li{
 display:inline-block; background-image:url(../images/pointerIcon.png);
background-position:right 50%; background-repeat:no-repeat; padding-right:12px;
margin-right:10px;} 

#breadcrumb li , 
#breadcrumb  a {
color:#333333;  font-weight:bold; font-size:inherit}
#breadcrumb  a { text-decoration:underline}

#breadcrumb li#BCtitle{ background-image:none}


/* new breadcrumb for prods summary and details*/
#breadcrumbProducts{ height:30px; line-height:30px;display:block; clear:both; margin:8px  auto;  width:100%; }
#breadcrumbProducts li{ background:none; padding:0 0px; margin:0; display:block; float:left;}
#breadcrumbProducts li ,  #breadcrumbProducts  a ,  #breadcrumbProducts  p {color:#333333;  font-weight: normal; font-size:12px;}
#breadcrumbProducts  a{ color:#069}
#breadcrumbProducts li span { padding:0 8px; color:#ccc;  } 



/* brands  */
#brandGrid{ width:100%; text-align:left; margin:0 0px  ; }
#brandGrid li{ display: block;  margin:10px 20px 10px 0 ; float:left;}
#brandGrid li a ,
#brandGrid li p{ 
width:265px; height:265px;
display:block; 
text-align:center ; 
position:relative;
overflow:hidden;
border-radius:4px;
border:1px solid #ccc;
background-repeat:no-repeat;
background-position:50% 50%;
background-size: 90%;transition: all 250ms; 
} 
#brandGrid li p{ border-color:#999;} 
#brandGrid li a:hover { background-size:96%; }
#brandGrid li a span ,
#brandGrid li p span{ display:none} 

#brandGrid li a:hover img {  left:-5px; top:-5px; width:130px; height:130px;}



/* results  match height of map and 3d tool for consistency */
#resultsWrap{ width:760px; overflow:hidden; height: 340px;   position:relative; z-index:1;  }  
#results { width:25000px; text-align:left; margin:0}
#results   li {
 margin:0 8px 0 0;
 padding:0;
 width:248px;
 height:325px;
 display:block;
 float:left;
 overflow:hidden;
 text-align:left;
 position: relative;
}

#results   li a.imageWrap{
width:245px; 
 height:200px; 
 border:0px solid #CCCCCC; 
 display:block;
 text-align:center;
 overflow:hidden;
 position:relative;
 margin:0  0 10px 0;
 text-align:center; background-position:50% 50%; background-repeat:no-repeat;
	background-size:contain;
	border-radius:2px;
}

#results   li a.imageWrap:hover{ border-color:#999}

#results   li a.imageWrap img.portrait,#results   li a.imageWrap img.square  {  
width:100%; height: auto; 
margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

#results   li a.imageWrap img.landscape  {  
width:auto; height:100%;
 margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

#results   li a.imageWrap:hover img{ opacity:0.9}

#results   li p{ margin:0; padding:0; font-size:0.9em}
#results   li strong{ display:block; }

#results   li a.detailsLink{
text-align:right; 
background-image:url(../images/pointerIcon.png);
background-color:#200451; /*3F07A0  ,#200451*/
background-position:calc(100% - 10px)  50%;
background-repeat:no-repeat;
 text-align:left; 
padding:7px 0 7px 10px;
margin-top:6px;
border-radius:3px;
color:#FFFFFF; font-size:12px; text-transform:uppercase;
clear:both; width:245px; display:block;
}

#results   li a.detailsLink:hover{ background-color:#111; }

ul#controlList{ width: 100%; text-align:right; height:0px ; position:relative; z-index:10; }
ul#controlList  li { position:absolute; top:70px; height:80px; width:40px; width:100%;background:#f1f1f1;  background-repeat:repeat}
ul#controlList  li:hover { background-color:#e1e1e1}
ul#controlList  li#controlLeft   { left:0px; display:none  }  
ul#controlList  li#controlRight   {right:0px; }  

ul#controlList  li span {background-repeat:no-repeat;background-position:  50% 50% ; cursor:pointer; display:block; height:100%; width:100%;}
ul#controlList  li#controlLeft span {	background-image: url(../images/icons/arrowL.png);}  
ul#controlList  li#controlRight span { background-image:url(../images/icons/arrowR.png);}  
 
/* eo results  */



/* details  img carousel, reset with JS */
#detailsImageWrap{
width:545px; 
overflow:hidden;height: 550px; 
position:relative;
z-index:1;
float:left;
border:1px solid #e1e1e1;border-radius:4px;
background-color: #FFF;
}  
.mobile #detailsImageWrap{ width:100%; height:400px;}
#detailsImageCarousel { width:10000px; text-align:left; margin:0 auto;   height: inherit;}
#detailsImageCarousel   li {   position:relative; display:block; float:left;  height:inherit;width:545px; text-align:center; }  
.mobile #detailsImageCarousel   li { width:400px }
#detailsImageCarousel   li a.imageWrap, #detailsImageCarousel   li p.imageWrap { margin:0; padding:0; height: 100%; width:100%;  background-color:#fff;  display:block; text-align:center; }

#detailsImageCarousel   li a.imageWrap span,
#detailsImageCarousel   li p.imageWrap span {  display:block; height:100%;  width: 100%;background-position:50% 50%; background-size:contain; background-repeat:no-repeat;} 
#detailsImageCarousel   li a.imageWrap span.rotate{transform: rotate(90deg) ;}

#detailsImageCarousel   li  a.enLarge{
 position:absolute;
 bottom:8px;
 right:8px;
 text-indent:-9999px;
 background-image:url(../images/searchWhite.png);border-radius:2px;
 width:30px;
 height:30px;
 background-color:#999999;
 background-repeat:no-repeat;
 background-position:50% 50%; 
	transition: all 200ms
 }
#detailsImageCarousel   li  a.enLarge:hover{ background-color:#666666}


/* details   */
/*#detailsImageWrap{ width:100%; overflow:hidden; height: auto;   position:relative; z-index:1;float:left; border:0px }  
#detailsImageCarousel { width:100%; text-align:left; margin:0 auto; overflow:hidden;  height:400px; }
#detailsImageCarousel   li {  width:100%;height:auto;    display:none; float:left;   text-align:center;border:0px;  } 
#detailsImageCarousel   li:first-child { display:block}
#detailsImageCarousel   li a.imageWrap{ width:100%; height:400px; }
ul#detailsImgLR{ display:none}*/
 
 

ul#detailsImgLR{ width:100%; text-align:right; height:1px ; position:relative; z-index:10; max-width: 100%;  position: absolute; left: 0px; top: 0px;  }
ul#detailsImgLR  li {
    position: absolute;
    top:240px;
    height: 40px;
    width: 40px;
    border-radius: 3px;
    background: #fff;
    background-repeat: repeat;
				transition: all 400ms;
				 opacity:0.5
}
ul#detailsImgLR li:hover  {opacity:1}
.mobile ul#detailsImgLR  li { top: calc(50% - 20px); opacity:0.8 }
ul#detailsImgLR  li:hover { background-color:#fff}
ul#detailsImgLR  li#controlLeft   { left:10px; display:none  }  
ul#detailsImgLR  li#controlRight   {right:10px; }  

ul#detailsImgLR  li em {background-repeat:no-repeat;background-position:  50% 50% ; cursor:pointer; display:block; height:100%; width:100%;}
ul#detailsImgLR  li#controlLeft em {  background-image: url(../images/icons/arrowL.png); }  
ul#detailsImgLR li#controlRight em { background-image:url(../images/icons/arrowR.png);}  


#productInfo{
 float:right;  
 width:400px;
   position:relative;  
}
#productInfo *{ }

#productInfo h5{
	border-bottom: 2px solid #ccc;
	margin: 5px auto 10px auto;
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 14.1px;
	text-transform: uppercase;
}

#productInfo #matchingProducts{ margin-top: 15px;}
#productInfo h5 span.numMatches{
    float: right; margin-top: -4px; 
}
#productInfo li.matchingProds{ margin: 5px auto}
#productInfo li.matchingProds a, #productInfo li.matchingProds h6{
 color: #006699; display: block; width: 99%; height: 16px; overflow: hidden;white-space: nowrap; text-overflow: ellipsis;
margin: 0; padding: 0;
}
#productInfo li.matchingProds h6{ color: #999}
#productInfo li.matchingProds a:hover{ border-bottom: 1px solid #006699;} 
#productInfo li.matchingProds span.barcode{ display: inline-block; width: 100px}
.mobile #productInfo li.matchingProds{ margin: 10px auto}
#productInfo li.matchingProds a, #productInfo li.matchingProds h6{ font-size: 13.1px;}


#productInfo p{
padding: 2px 0 4px 0;
margin:0 auto 0 auto;
min-height:22px;
font-size:14px; 
display:block; clear:both;border-bottom:0px dotted #aaa; 
}

#productInfo p strong{ 
 color:#333;
 width:50%;
 display: block; float:left; font-weight:bold; 
}
#productInfo p span#barcodeNo{ font-weight:bold; color:#069; cursor:pointer; font-size:14px;}

#productInfo p span{  border:0px solid #200451;
  color:#777;  
  width: 50%; float:right;
 display: block;
}
#productInfo p.materials strong{ width:100%; float:none; font-weight:bold; margin-top:4px;}
#productInfo p.materials span{ width:100%; float:none}

.mobile #productInfo p strong , .mobile #productInfo p span { display:block; width:100% ; margin:0 auto}
 .mobile #productInfo p span{ margin-bottom:6px;}


#productInfo p span.barcodeIcon, * .barcodeIcon{
	 width:40px; display:inline-block; 
 height:20px;  
  text-indent:-9999px;
  font-size: 0em;
  background-repeat:no-repeat ;
 background-position:50% 50% ;
 background-image:url(../images/barcodeIcon.png);background-size:contain;
 font-size: 0em; cursor:pointer;
	}
	
	#allocationProds, ul#allocationProds  { width:100%; display:block; clear:both; margin: 15px 0; border-top:1px solid #ccc;  border-bottom:1px solid #ccc;  padding:12px 0px 4px 0; }
		#allocationProds li , ul#allocationProds li{width:100%; display:block; clear:both; margin:0px 0 ; height:auto;}
#allocationProds h6{ font-size:12.8px; font-weight:bold; color:#999; margin:0 0 10px 0}
	#allocationProds span.prodImg{
display:block;
float:left;
border:0px solid #ccc; background:#fff;border-radius:3px;
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
height:50px;
width:50px; 
}
#allocationProds li  span.rotate{transform: rotate(90deg) ;}
#allocationProds p ,  #productInfo #allocationProds p{float:left; width:calc(100% - 50px) ; padding:3px 0 0 10px; clear:none	;font-size:12.2px;}
#allocationProds a  {   color:#069; font-weight:bold;}
#allocationProds em{  display:block; color: #F60; font-style:normal;}
#allocationProds hr{ height:1px ; clear:both;}
	
	
#productInfo hr{ background:none; border:none; height:12px; background-color: transparent; margin:0; padding:0; display:block; clear:both}


#bookedDates{margin: 5px auto 2px auto;
	border: 1px solid #e1e1e1;
	width: 100%;
	clear: both;
	padding: 6px;
	background-image: url("../images/calColour.png");
	background-repeat: no-repeat;
	background-position: 98% 4px;
	background-size: 18px auto;  
}
#bookedDates h6{ color: #FF6600; font-weight: 700; font-size: 12px}
#bookedDates p{margin: 0; padding: 0; height: 15px; line-height: 15px; font-size: 12.9px;clear: both}
#bookedDates em{  padding-right:  6px; font-style: normal; display: block; float: left;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border:0px solid red}
#bookedDates em.dateRange{width: 150px;}
#bookedDates em.bookingJobNo{width: 120px;}
#bookedDates em.bookingStatus{width: 90px;}


#resourcesInfo{ margin-top:18px;  }
#resourcesInfo li { display:block; clear:both; margin:2px auto;  }
#resourcesInfo li , #resourcesInfo li p , #resourcesInfo li a {font-size: 13.2px;}
 

#resourcesInfo li a , #resourcesInfo li#viewTimingPlan{ 
font-weight:bold;
text-transform:uppercase;
color: #DA002F;
height:25px;
line-height:25px;
display:block;
}

#resourcesInfo li a  {
background-image:url(../images/fileTypes/pdf.png);
background-repeat:no-repeat;
padding-left:22px;
background-size:15px auto;
background-position:left 50%
}   

#resourcesInfo li#viewTimingPlan  { cursor: pointer; }
#resourcesInfo li#viewTimingPlan:hover{text-decoration: underline} 
#resourcesInfo li a.csvXL{ background-image:url(../images/fileTypes/xl.png) }
#resourcesInfo li a.email{ background-image:url(../images/fileTypes/url.png) }


#resourcesInfo li h5{ /* match details h5 */}

#resourcesInfo li a:hover{ color:#333}
 
#resourcesInfo li a.techDrawings{ background-position:left 5px;}
#resourcesInfo li a.techDrawings:hover{  }

#resourcesInfo li a.extraImages{ background-position:left 46%;background-image:url(../images/fileTypes/folderIcon.png);}
#resourcesInfo li a.extraImages:hover{ }

#resourcesInfo li a.share{ background-position:left -196px;}
#resourcesInfo li a.share:hover{ background-position:left -236px;}

#resourcesInfo li a span{ color:#666666; font-weight:normal }/*fileSize*/


.detailsSpacer{ height:30px;  clear:both; background:none; } /* BC spacer  */

/* eo  details   */



/* timing   */
#timingWrap{ width:100%; overflow:hidden; height: 500px;   position:relative; z-index:1; margin:0px auto; padding-top:20px;}  
p#timingCategories{ width:380px;height:290px;  float:left; padding:0; margin:0; }
p#timingMonths {
width:380px;
height:290px;
float:right;
padding:0;
margin:0;
overflow:hidden;
/*overflow-x:scroll;
overflow-y: hidden;*/
position: relative;
}
p#timingCategories img , p#timingMonths img{ height:258px}
#timingPlanImg{ position:absolute; left:0px;}
#timingPlanSlider{ display:block; clear:both; width:360px; float:right; margin-right:12px}
#sliderInstr{ text-align:right; clear:both; display:block;width:360px; float:right; margin-right:12px; text-align:center; height:36px; line-height:36px; font-size:11px; color:#696969}
/* eo timing   */

/*   3d tool */

/* results  match height of map and 3d tool for consistency ? */
#fixtureType{ width:760px; height: 290px;  z-index:1; text-align:left;}  
#fixtureType li{ width: 246px;   float:left; height:280px;  display:block; margin-right:11px;
background-position:0 -10px; background-repeat:no-repeat;

 border-bottom:2px solid #B7978B;
-webkit-transition:border 0.3s ease-in-out;
-moz-transition:border 0.3s ease-in-out;
-o-transition:border 0.3s ease-in-out;
transition:border 0.3s ease-in-out;
position:relative
}
#fixtureType li:last-child{ margin-right:0 }

/* pre selection A tag */
#fixtureType li#wallBay{ background-image:url(../images/3Dtool/wallBay.png?1)}
#fixtureType li#gondola{ background-image:url(../images/3Dtool/gondola.png?1) }
#fixtureType li#pillar{ background-image:url(../images/3Dtool/pillar.png?1) }

/*second stage been selected no A tag */
#fixtureType li#wallBay_selected { background-image:url(../images/3Dtool/wallBay_selected.png?1)}
#fixtureType li#gondola_selected { background-image:url(../images/3Dtool/gondola_selected.png?1) }
#fixtureType li#pillar_selected{ background-image:url(../images/3Dtool/pillar_selected.png?1) }

/* final output stage - wider as only one on left*/
#fixtureType li#resultImage{width: 484px; float:right;  border:0px solid #e1e1e1; text-align:right; overflow:hidden} 
#fixtureType li#resultImage a{ text-align:right; display:block; position:relative}
#fixtureType li#resultImage img{ max-height:100%; max-width:100%;}
#fixtureType li#resultImage span{
 position:absolute;
 right:6px;
 bottom:6px;
 height:28px;
 width:28px;
 font-size:0.1em;
 text-indent:1000px;
 background-image:url(../images/icons/search.png);
 background-repeat:no-repeat;
 background-position:50% 50%;
 
 background-size:12px;
 }
 
 #fixtureType li#resultImage span:hover{  }
 
#fixtureType li a, #fixtureType li p{ height:100%; width:100%;  display:block;}

#fixtureType li a:hover{ border:0px solid #ccc; /*background-color:#f5f5f5*/}

#fixtureType li  strong { position:absolute; bottom:2px; left:0px; width:100% ; font-size:1em; text-align:center}

#fixtureType li  a:hover strong,
#fixtureType .optionSelected ,#fixtureType li.optionSelected , #fixtureType li a.optionSelected {  color: #DA002F;}



/* section below options - form containing selections and output */
#fixtureOptionsForm{  
 border-bottom:2px solid #B7978B;
margin:10px 0 0 0  ;
width:100%; 
display:block; clear:both;
position: relative; 
height:auto; min-height:270px;   padding:0 0 10px 0;
} 

/* sliders and select area */

#fixtureOptionsSelectors{
 width:450px;
 min-height:260px; height:auto ;
 float:left;
 border-right:1px solid #ccc;
}

 

/* tools */

#sliderWrap{
 width:230px;
 float:left;
}   

/* slider track same width as sliderWrap */
#sliderW, #sliderH, #sliderD { 
width:230px; 
  border:1px solid #ccc;background:#f6f6f6; 
display:block; clear:both; height:16px;cursor:pointer;
border-radius:8px;
 }

/* handle */
.ui-widget-content .ui-state-default  { 
    border: 1px solid #CCC;
    background:  #e2e2e2; 
    height:22px; width:20px; cursor:pointer;border-radius:2px;
}
/* handle over state */
.ui-widget-content .ui-state-default:hover{ background:#999; border-color:#999}

#sliderWrap label{
 width:120px;
 display:block;
 height:34px;
 line-height:26px;
 float:left;
 font-size:0.9em;
 margin:0px 0 0 0;
 clear:both;
 font-weight: bold;
 color: #666666;
}
#dimensionsW, #dimensionsH, #dimensionsD, #lightbox , #graphic {
 height:26px; 
 width:100px;
 margin: 0;
 float:right;
 text-indent: 3px; 
 border:2px solid #d1d1d1; border-radius:3px;
}
#sliderWrap  hr{ display:block; clear:both; margin-top:30px;}


#selectWrap{
 width:200px;
 float:right;
 text-align:right;
 margin-right:12px;
} 

#selectWrap select{
 width:160px;
 height:26px;
 border:2px solid #d1d1d1;
 display:block;
 float:right;
 margin: 0 0 10px 0;
 color: #666666;
 font-size:1em;  border:2px solid #d1d1d1; border-radius:3px;   
}

 @media screen and (-webkit-min-device-pixel-ratio:0) {  /*  safari */
#selectWrap select {
	background-image: url(/images/icons/arrowDgray.png);
	background-position : 140px 50%;
	background-repeat:no-repeat;
  padding-right:   24px; padding-left:4px;
  }  }


#selectWrap select .optGroupLabel, 
#selectWrap .optGroupLabel{ font-style:normal; font-weight:bold; color:#006699; font-size:1.0em; padding: 6px 0 6px 2px;}  

#selectWrap .optGroupLabel option, 
#selectWrap option{ font-size:1em; padding:2px 10px 2px 8px}


#optionsSubmit  { 
 width:104px;
 height:26px;
 border:2px solid #d1d1d1;
 color: #006699;
 text-align:left;
 padding-left:5px;
 background-image:url(../images/pointerIcon.png);
 background-repeat: no-repeat;
 background-position: 85px 50%;
 margin:6px 0 0 0;
 clear:both;
 float:right;
 background-color: #FFFFFF;
 cursor:pointer;
 border-radius:3px;
 text-transform: uppercase;
 font-size:0.8em;
 font-weight:bold
}

#optionsSubmit:hover { background-color:#e1e1e1}
 
/* tools */



#fixtureResultsSection{
 width:300px;
 height:260px;
 float:right; padding:0px;
}
#fixtureResultsSection p { display:block; clear:both; min-height:22px; font-size:0.9em }
#fixtureResultsSection p strong{ display:block; float:left; width:96px; color:#006699;padding:0 0 6px 0 ; }  
#fixtureResultsSection p span{ display:block; width:200px; float:left; color:#666666;padding:0 0 6px 0;  }  

#fixtureResultsSection p a.share{ 
font-size:0.75em; font-weight:bold; text-transform:uppercase; color: #006699; background-image:url(../images/additionalInfo.png); background-repeat:no-repeat; height:26px; line-height:28px; padding-left:28px; display:block;
 background-position:left -196px;}

#emailFixtureResults { border:0px solid #e1e1e1; padding:4px 4px 4px 4px; margin:10px auto}
#emailFixtureResults label { display:block; font-weight:bold; color:#666666; font-size:0.9em}
#emailFixtureResults #emailAddress {
 width:190px;
 border:2px solid #e1e1e1;
 height:26px;
 display:inline-block;
 padding-left: 5px;
 margin-top:5px;
}
 
#emailSend  { /*share email */
 width:80px;
 height:26px;
 border:2px solid #d1d1d1;
 color: #006699;
 text-align:left;
 padding-left:5px;
 background-image:url(../images/pointerIcon.png);
 background-repeat: no-repeat;
 background-position: 62px 50%;
 margin:6px 0 0 0;
 display:inline-block; 
 background-color: #FFFFFF;
 cursor:pointer;
 border-radius:3px;
 text-transform: uppercase;
 font-size:0.8em;
 font-weight:bold;
  margin:5px 0 0 5px;;
}

/*  eo 3d tool */


 
#footerWrap {
clear:both;
height:120px;
margin:40px auto 0 auto;
z-index:2;
padding:50px 0px  0px 0;
background-color:#1D034A;
background-image: linear-gradient( to bottom  ,#1D034A , #160237  );
} 

#footerWrap p{
display:block;
margin:0px  auto;
font-size:11px;
font-weight: 600;
color:#fff;
text-align:center;
padding:4px 0 0 0; 
}

#footerWrap p span{ padding:0 5px  ; display:inline-block}
.screen  p#siteBy{ position:absolute; right:15px ; bottom:15px; text-align:right;opacity:0 }
 .screen p#siteBy a,  .screen p#siteBy a strong{ font-size:11px; font-weight: normal; color:#fff; letter-spacing:1px;  }
.mobile  p#siteBy{ display:block; text-align:center; margin:30px auto; opacity:0.6;}
.mobile  p#siteBy *{ font-size:14px; font-weight:normal}



/*autocomplete*/
.ui-autocomplete{ width:350px; max-height:500px ; overflow-y:auto; overflow-x:hidden;margin:0; padding:0;  } 

.ui-menu-item:hover, .ui-menu-item, .ui-menu .ui-menu-item, .ui-menu .ui-menu-item:hover, .ui-menu .ui-menu-item:focus, .ui-menu .ui-state-focus, .ui-menu .ui-state-active {
 padding: 0px 0px 0px 0px; 
}
.ui-autocomplete li a, .ui-autocomplete li p{ margin:0; padding:3px 5px  ; border-bottom:1px solid #e1e1e1; display:block; }
.ui-autocomplete li a , .ui-autocomplete li  p, .ui-autocomplete li  strong, .ui-autocomplete li   em {color:#069; display:block;font-size:11.2px; font-weight:bold; line-height:14px; font-family: Arial, Helvetica}
.ui-autocomplete li  .orange{ color:#F60}
.ui-autocomplete li  .red{ color:#F00}
.ui-autocomplete li  .green{ color:#89B600 }
.ui-autocomplete li  .gray{ color:#777}
.ui-autocomplete li  .silver{ color:#ccc}