body {
text-align: left;
background-color: #444;
position:relative;
}

*{font-size:19px; font-family: "Montserrat",Helvetica, sans-serif; font-weight:400;    }

#wrapper { 
width:100%; 
} 

 
 
/*outer */
#header{
z-index:5;  
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
background-color:#fff
} 

#header.transparentHeader:not(.headerFixed){ background:none; } 
 


#headerClear{ height:88px;}/*for non banner pages*/ 
#top{ 
display:block;
overflow:hidden; 
} 



#strapLine{
 position: absolute;
font-size:12.8px; font-weight:bold;
font-family:  "Montserrat" , Helvetica, sans-serif;
position:absolute; left:60px; width:calc(100% - 120px); text-align:center;
bottom:3px; color: #e1e1e1 
} 


 
#telephoneNumber{
display:none
} 




#logo{  
z-index:10; display:block; position:absolute; 
left: 50%; margin-left:-105px;
top:10px; 
width: 210px; height:60px; 
background-image: url(../images/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position:  50% 50%;
}

#logo span{
display:none
} 

@media only screen and (orientation:landscape)   {  
/*#logo{ left: calc(50% - 100px) ;}*/
}
 

#mobileTopSection{
position:absolute;
right:0;
top:0;
text-align:right;
width:100%;
line-height:80px;
height:80px;
z-index:1;
}
#mobileTopSection li {  
margin: 0 14px 0 0 ; 
display:inline-block;
text-decoration:none;
text-align:right; 
height:80px;
cursor: pointer;
overflow:hidden;
} 


#mobileMenuOpener{ float:left;} 

/* main nav opener bars fixed width as span widens l/s */
#mobileTopSection li#mobileMenuOpener{width:32px; margin-left:8px; position:relative}
#mobileMenuOpener em{ 
display:block;  
height:2px; 
border:2px solid;
border-color:#555;
width:100%;
border-radius:0px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
position:absolute;
left:0px;
}

#mobileMenuOpener em#bar1 { top:28px} 
#mobileMenuOpener em#bar2 {top:  38px}
#mobileMenuOpener em#bar3 { top:48px}

#mobileMenuOpener.menuOpen em#bar1 {  
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top:40px; 
left:0px; 
width:100%;
}
#mobileMenuOpener.menuOpen em#bar2{ opacity:0 ;}
#mobileMenuOpener.menuOpen em#bar3 {  
-webkit-transform:  rotate(-45deg); 
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top:40px;
left:0px;
width:100%;
}
/* eo nav opener */ 




/* search account & cart icons inside span*/

#mobileTopSection li  a{ display:inline-block;  height:100%; width:100%;}
#mobileSearchOpener{
background-image: url(../images/nav/mobile/searchIconWhite.png);
background-size:20px auto;
background-position:50% 50%;  
position:relative; 
width:25px;
} 
 

#mobileAccount {
background-image: url(../images/nav/mobile/accountIcon.png);
background-size:18px auto;
background-position:50%  50%;
position:relative; 
width:25px;
}

#mobileBasket {
background-image: url(../images/nav/mobile/cartWhite.png);
background-size:22px auto;
background-position:50%  50%;
position:relative; 
width:25px;
}

/* icon labels & num in cart <strong> tag */  

@media only screen and (orientation:portrait)   {

 }			

@media only screen and (orientation:landscape)   {  
/*#mobileSearchOpener, #mobileBasket { background-position:right 50%;}
#mobileTopSection li { width:auto; margin:0 10px 0 10px;  }
#mobileTopSection li strong { text-shadow:1px 1px #222; text-transform:uppercase; display:block; color:#fff; text-align:left;  font-size:0.60em; padding-right:24px;     }*/
}
#mobileTopSection li strong { display:none}

 
#navMain  *{  }

#navMain  {
height:calc(100% - 80px);
overflow:auto;
position: fixed;
padding:10px 10px 100px 10px;
border-right:0px solid #fff;
border-top:0px solid #fff;
border-bottom:0px solid #fff;
background-color:#222;
background-image:  linear-gradient(to bottom, #222, #222);
top:80px;
width:330px;
z-index:10000;
display: block;
right:-2000px;
}

#navMain.navMainOpen { 
left:0px;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}

#navMain.navMainClose { 
-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;
}

#navMain.navMainHide{left:-100%; }/* rapid closer for links - take off screen to max width*/

@media only screen and (orientation:portrait)   {  
#navMain { width: 350px;  left:-350px;}
.navMainClose { left:-320px;}
#navMain li a{  letter-spacing:-1px;  font-size:1.25em;} 
} 

@media only screen and (orientation:landscape)   {  
#navMain { width: 420px;  left:-420px;}
.navMainClose { left:-420px;}
#navMain li a{  letter-spacing:-1px;  font-size:1.4em;} 
} 
 





#navMain ul  {
padding: 10px  0px 0px  0px;   
margin:0 auto;

}  

#navMain li {
	display:block;
	clear:both;
	margin:4px  10px;
	padding:0;
	position:relative;  
}



#navMain ul li a{
display:block; 
letter-spacing: normal;
padding: 5px 6px 5px  20px;
color:#fff; text-shadow:1px 1px #000;
display:block;
font-weight: normal;
background:none;
font-size:20px;
}
 
#navMain ul li ul li  { border:none}
#navMain ul li ul { margin:2px 0px 30px 10px; padding:0px 0 ; display:none }
 
#navMain ul li a.mainCategory{ position:relative; padding-left:20px;; background:none; 
 }
#navMain ul li a.mainCategory span{
background:none;
background-image:url(../images/nav/mobile/mainCatClosedWhite.png);
background-repeat:no-repeat;
background-position:0 12px;
background-size:12px;
width:18px;
height: 100%;
position:absolute;
left:0px;
top:0px;
}

#navMain ul li a.mainCategoryOpen span {
background-image:url(../images/nav/mobile/mainCatOpenWhite.png);
}	

#navMain ul li ul li a {
margin: 5px 5px 5px 0px;
padding: 2px 10px 2px  0px; 
font-size:15px; color:#fff
} 

/* actual MAINS as its contained under one heading*/
#navMain ul li ul li a.mainAsSub, #navMain ul li ul li a.mainAsSub:hover{   background-image:none; font-weight:bold; color:#888; font-size:1.1em; text-decoration:none;  width:100%; padding:6px 0 0 0; }
 
 
#contentWrapper{ 
padding:40px 20px  0px 20px; 
 border-top:6px solid ; border-color:#B4B10B; 
}
.home #contentWrapper{  } 

.contentLeft , .contentRight , .siteContent , .contentFull {	width:100%;	}
 
 .contentFull p  img,  .contentRight p	 img  { max-width:100%; 	width:auto	}
  

.image-left, 
.image-right , 
.image-left-no-border  , 
.image-right-no-border {
padding:10px;
margin:25px auto;
float:none;
clear:both;
width:auto;
max-width:98%; height:auto;
display:block;
border:0px solid #f6f6f6
}
/*#breadcrumb{  display:block; width:100%; padding: 0; margin:0 auto 10px auto;     }	
#breadcrumb li , #breadcrumb li p , #breadcrumb li a , #breadcrumb li span   {   font-size: 0.9em;   font-weight: normal ; display: inline-block; white-space: nowrap;	 }

#breadcrumb li a { 
text-decoration:none
}	

#breadcrumb li a:hover{ text-decoration:underline}

#breadcrumb li p {
	color:#7F7F7F;
	font-style: normal;
	margin:0;
	padding:0
}
#breadcrumb li span {
color:#ccc; padding:0 1px 0 5px; display:inline-block; margin:0; white-space:nowrap
}	
 
#breadcrumb li strong { font-weight: bold;} 

.site-content-details #breadcrumb li:nth-last-child(2) span  { display:none}
.site-content-details #breadcrumb li:last-child{ display:none; clear:both; padding-top:5px;} */
 
.grid li a:hover em.enlarge{  display:none;}	 /* enlarge icon on gallery  */
 



#searchWrap{ /*match listing options color/border*/
display:none ; 
height:76px; width:100%;   margin:0px auto 0 auto; z-index:10;
background-color:#fff; 

position:fixed; top:80px; left:0px;
padding:15px 15px 0 15px;
border-bottom:1px solid #888
}

#searchForm { display:block; width:auto;text-align:right; position:relative ;   }

 
#searchForm input[type=text]{
margin:0px;
padding: 0px;
float:left;
text-indent:15px;
width:100%;
max-width:500px;
height:45px;
line-height:45px;
border:1px solid #777;
border-radius:30px;
display:block;
font-size:1em;
color:#333;
background-image: url(../images/nav/mobile/searchIcon.png);
background-repeat: no-repeat;
background-size:16px auto;
background-position: 95%  50%;

} 

#searchForm input[type=submit]{
border: none;
background:none; text-indent:-20000px; cursor: pointer;
 position:absolute; right:0px;
height:40px; width:40px;
}  

#searchForm span#clearSearch{
	display:none
}
  

  


.buttons25{ 	width:25px; 	font-size:0.7em;  } 
.buttons50{ 	width:50px; 	font-size:0.7em;  } 
.buttons75{ 	width: 75px; font-size:0.7em; } 
.buttons100{ 	width: 100px;  font-size: 0.7em;} 
.buttons125{ width: 125px; font-size: 0.9em;} 
.buttons150{ width: 150px; font-size: 0.9em;} 
.buttons175{ width: 175px; font-size: 0.9em; } 
.buttons200{ width: 200px; font-size: 0.9em;  } 
.buttons250{ width: 250px; font-size: 0.9em;} 
.buttonsFULL{ width: 100%; font-size: 0.9em;} 


  

 
/*######## contact form opener in main nav like collapsible but own css & fn    ########### */ 
#contactFormWrapper{ display: none; 
padding-top:20px;} 


#contactFormWrapper h3{
display:block;
text-decoration:none;
clear:both;
cursor:pointer;
width:100%;
padding:14px 0px 14px 0;
margin: 0px auto 2px auto;
border-radius:  0px 0px;
font-size:1em;
font-weight: normal;
text-align:left;
background-color: #333333;
text-indent:18px;
border-radius:1px;
color: #fff;
border:0px solid #ccc;
background-position:96%  50%; height:100%;   display:block; cursor:pointer;
background-repeat:no-repeat;
background-image:url(../images/icons/plusWhite.png); 
}
#contactFormWrapper.contactFormOpen h3  {
background-image:url(../images/icons/minusWhite.png);
} 

#contactForm   { 
display:block; margin:5px auto;
border:2px solid #e7e7e7;  background-color:#fff;  
padding:12px  ;border-radius:3px; background-image:url(../images/semiOverlay.png); background-repeat:repeat; 
} 

/*######## over ride for ONLY contact us  display  ########### */ 
.contact-us  #contactFormWrapper, 
.your-enquiry  #contactFormWrapper  { display:block;}  

 

#contactFormWrapper #contactForm { 
display:none;
}

#contactFormWrapper.contactFormOpen #contactForm {
}



#contactForm  p{
font-size:0.8em;
color:#545454;
display:block;
padding:6px 0 4px 0px;
margin:0;
font-weight:bold; clear:both;	font-family:Arial, Helvetica, sans-serif
}

#contactForm  br { clear:both; display:block}
  
 
#contactForm .inputs{
width:100%;
border:2px solid #ccc;
height:36px;
font-size:11px;
color:#333333;
padding:0px 0px 0px 4px;
outline:none;
display: block;
clear: both;
margin: 2px 0 0 0;
}
#contactForm .inputsDD{ width:208px; padding:3px 3px; border:2px solid #e1e1e1;  	font-size:11px;
color:#333333; }

#contactForm .inputsDD option{ padding:1px 5px 1px 3px} 

#contactForm .inputBox{
height:60px;
padding:4px;
width:100%; 
border:2px solid #e1e1e1;
font-size:14px;
color:#333333;
padding:1px 0px 1p 3px;
}

#contactForm #additionalInfo  p{
color: #FF6600
}

 
#contactForm ul, #contactForm li{ margin:0; padding:0; list-style:none}


#contactForm .inputsErr{ border-color:#ff0000}
#contactForm  .inputsOver { border-color:#999; background:#fff} 

#contactForm  .inputsDDErr  {
border: 2px solid #ff0000;
background-color: #FF0000;
color: #F0F0F0;
} 
#contactForm .inputsDDOver {
border: 2px solid #e3e3e3; 
background-color: #fff;
color: #333;
} 


#contactForm .verificationCode{  
width:20px; background-image:url(../images/verificationCode.png); display:block; float:left; height:24px;margin:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif;
}

#contactForm .inputsVerify {
width: 152px; 
float:left;
background:#fff; 
background-color: #FFFFFF;
color:#000;
font-size:18px; 
font-weight:bold;
text-transform:uppercase;
letter-spacing:0px;
text-align:center;
border:2px solid #999;
margin-left:10px;
height:24px; font-family:Arial, Helvetica, sans-serif
}

#contactForm .inputsVerifyErr { border-color:red}
 
#contactForm .inputsVerifyErr { border-color:red}
 
#contactForm hr{ background: none; border:none}

#contactForm input#sendEnquiry,
#sendEnquiry{
height:42px;
line-height:42px;
width:100%;
background-color:#005883;
border: none;
color:#fff;
cursor:pointer;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
border-radius:4px;
}
#sendEnquiry:hover{ background-color:#333333}

 /*eo form  stuff */







/* cookie alert over ride*/

#cookieAlertWrap{ 
padding:12px 8px;  
}

#cookieAlertWrap p{ 
font-size:0.8em; 
color:#e1e1e1;  
display:block; line-height:normal
}

#cookieAlertWrap p strong{ 
display:block;  
} 

#cookieAlertWrap #pageLink{ display:block; margin:0; padding:5px 0 0 0}

#cookieAlertWrap #pageLink:hover{ color:#99CC00}

#cookieAlertWrap #closer{
position:absolute; right:10px; top:10px;
}