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

*{font-size:18px;}

#wrapper { 
width:100%; 
} 

 
 
/*outer */
#header{
z-index:5;
width:1000%;
background-color:#333; 
background-image: linear-gradient(to bottom, #f5f5f5, #e4e4e4);
border-bottom:2px solid;
border-bottom-color:#fff;
position:fixed;
top:0;
left:0;
width:100%;
height:66px; 
}
#headerClear{ height:66px;} 

 
#top{ 
display:block;
overflow:hidden; 
} 



#strapLine{
display:none;    
} 




#telephoneNumber{
display:none
} 




#logo{  
z-index:10; display:block; position:absolute;
top:12px; margin:0 50px;
width:calc(100% - 100px);   height:40px;  
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 {right:calc(50% - 80px);  width:160px;}*/
}


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

#mobileMenuOpener{ float:left} 
#mobileSearchOpener{ float:right;}

/* all static icons*/
#mobileTopSection li span {  
display:block;
height:100%;
width:100%;
background-repeat:no-repeat;
border:0px solid;
}


#mobileMenuOpener {
/*background-image:url(../images/nav/navBorderRight.png); background-repeat:no-repeat; background-position:right 2px    */
}



/* main nav opener bars fixed width as span widens l/s */
#mobileMenuOpener em{ 
display:block;  
height:1px; 
border:2px solid;
border-color:#555; 
width:30px; 
border-radius:1px;
-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:6px;
}

#mobileMenuOpener em#bar1 { top:21px} 
#mobileMenuOpener em#bar2 {top: calc(50% - 2px); opacity:1}
#mobileMenuOpener em#bar3 { bottom:21px}

#mobileMenuOpener.menuOpen em#bar1 {  
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top:31px; 
left:6px; 
}
#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);
bottom:31px;
left:6px
}
/* eo nav opener */


#mobileSearchOpener span{
background-image: url(../images/nav/mobile/searchIconWhite.png);
background-size:24px auto;
background-position:50% 50%;
} 

 
#mobileBasket em{ float:right} 

@media only screen and (orientation:portrait)   {
#mobileTopSection li strong { display:none}
 }			

@media only screen and (orientation:landscape)   {  
#mobileTopSection li { width:60px}
#mobileTopSection li strong { display:none}
}


/* top section social networking NOT USED */
@media only screen and (orientation:portrait)   {  	
#socialTop{ display:none}
}
@media only screen and (orientation:landscape)   {  	
#socialTop{
display:none;
}
}



#navMain  {
height:calc(100% - 66px);
overflow:auto;
position: fixed;
padding:15px 10px 100px 10px;
border-right:10px solid #fff;
border-top:5px solid #fff;
border-bottom:10px solid #fff;
background-color:#333;
background-image:  linear-gradient(to bottom, #999, #888);
top:66px;
width: 280px;
z-index:10;
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:-380px; }/* rapid closer for links - take off screen to max width*/


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

@media only screen and (orientation:landscape)   {  
#navMain { width: 380px;left:-380px; 	 }
.navMainClose { right:-380px;}
#navMain li a{ font-size:1.5em; } 
} 
 




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

#navMain li {
	display:block;
	clear:both;
	margin:8px  0;
	padding:0;
	position:relative;
}
#navMain ul li a{
display:block; 
text-decoration:none;
text-transform: capitalize;
letter-spacing:0px; 
padding: 4px 60px 4px  24px;/*   non mains*/
color:#fff;
display:inline-block; 
font-weight: normal;   
background:none;
background-image:url(../images/icons/arrowRwhiteThin.png);
background-position:4px 10px ; background-repeat:no-repeat;
}
 

#navMain ul li ul { margin:10px 0px 20px 20px; padding:0px 0 ; display:none }

/*
// WITH ICON INSTEAD AND NO SPAN
#navMain ul li a.mainCategory{background-image:url(../images/icons/plusWhite.png); }
#navMain ul li a.mainCategoryOpen{background-image:url(../images/icons/minusWhite.png); }
#navMain ul li a.mainCategory span{ display:none}*/

/* sub openers replace main a link styling span width match padding above */
#navMain ul li a.mainCategory{ position:relative; padding-left : 24px; background:none; }
#navMain ul li a.mainCategory span{ 
background:none;
background-image:url(../images/icons/plusWhite.png);
background-repeat:no-repeat;
background-position:0 11px;
width:20px; height: 100%;   
position:absolute; 
left:0px; top:0px 	; 
}

#navMain ul li a.mainCategoryOpen span {background-image:url(../images/icons/minusWhite.png); color:#fff}	

#navMain ul li ul li a {
	margin: 0px 5px 0px 0px;
	padding: 3px 10px 3px  18px;
	background-image:url(../images/icons/arrowRwhiteThin.png);
	background-repeat:no-repeat;
	background-position: left 8px;
 background-size:6px auto;
	font-size: 1.1em; /* % of above */
} 


p#navMainViewFull{ 
display:block; 
margin:35px auto 0 auto; padding:0;
text-align:left;
}	

p#navMainViewFull a{ text-transform:uppercase; color:#FFFFFF; font-size:1em; padding-left:25px;  }



#contentWrapper{ 
padding:10px 15px 10px 15px; 
z-index:1; 
}

.home #contentWrapper{ padding:0px 0px 10px 0px; z-index:1; }/* banners are inside */

.contentLeft  {height:100%; width:100%;}
.contentRight , .siteContent { width:100%;}
.contentFull {	width:100%;	}
 
 
 
.pagetitles , a.pagetitles:link, a.pagetitles:visited  {
font-size: 1.6em;  
}
.subtitles , a.subtitles:link, a.subtitles:visited  {
font-size: 1.2em;
}


.image-left, 
.image-right , 
.image-left-no-border  , 
.image-right-no-border {
padding:10px;
margin:25px auto;
float:none;
clear:both;
max-width:98%; height:auto;
display:block;
border:0px solid #f6f6f6
}

 	
#breadcrumb{  display:block;  width:100%; overflow:hidden; background:#fff;   padding: 0  0px;margin:  0px 0 10px 0px;
}	

/* .site-content #breadcrumb{ margin-top:50px;} clear for listing options */

.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:80px; width:100%;   margin:0px auto 0 auto; z-index:10;
background-color:#fff; 
 border-top: 1px solid #555;
border-bottom: 0 solid #fff;
position:fixed; top:66px; left:0px;
padding:15px 10px;
}

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

 
#searchForm input[type=text]{
margin:  0px;
padding:  0px  0px 0  0px;
float:right;
text-indent:36px;
width:100%;
max-width:500px;
height:45px;
line-height:45px;
border:2px solid #999;
border-radius:24px;
display:block;
font-size:1em;
color:#333;
background-image: url(../images/nav/mobile/searchIcon.png);
background-repeat: no-repeat;
background-size:14px auto;
background-position: 12px  50%;
} 

#searchForm input[type=submit]{
	display:none
}  

#searchForm span#clearSearch{
position:absolute;
right:12px;
top: 12px;
width:22px;
text-align:center;
font-size:0.55em;
height:22px; font-weight:bold;
line-height:22px;
background-color:#CCCCCC;
cursor:pointer;
color:#fff;
border-radius:15px;
/*	background-image:url(../images/icons/deleteGray.png);
	background-position:50% 50%;
	background-size:11px; 
	background-repeat: no-repeat;*/
 }

 
  


.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} 

#contactForm   { 
display:block;
border:1px solid #ccc; 
border-top:none;  
font-family:Arial, Helvetica, sans-serif;
padding:15px  ;
 background:#e8e8e8;  
} 

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

#contactFormWrapper h3{ margin-top:10px;
background-position:98%  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);
} 

#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:3px solid transparent;
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 .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 hr{ background-color:#f1f1f1}

 /*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;
}
 







#footerWrap {
margin:20px auto 0 auto;
padding:0 0 100px 0;
z-index:2;
} 


#footer {
padding: 0px 15px ;
margin: 0  ;
min-height:300px;	
position: relative;
} 

#footer hr{ margin:10px auto}


/* nb in reverse order for float right on screen css*/
#navSub1, 
#navSub2 {
display:block; 
width:100%; clear:both;
margin: 2px 0  0 0 ;
}

#navSub1{  }

#navSub1 li a , #navSub2 li  a{ 
 font-weight:  normal;
font-size: 0.8em;
text-transform: uppercase;
padding: 6px 24px;
display: block; 
text-align:left;
background-image:url(../images/icons/arrowRWhiteThin.png);
background-repeat:no-repeat;
background-position:5px 50%; 
}
 
#socialWrap {
text-align: center;
padding:20px 0 10px   0px;
display:block; 
clear:both; 
}

#socialWrap li a {
display:block; 
text-align:center; 
} 

/*icon*/
#socialWrap li a span {
 	margin:0 auto;
	 }
 


@media only screen and (orientation:portrait)   {  
#socialWrap li{ display:inline-block;   margin: 0 10px; }
#socialWrap li a strong{ display:none}
}

@media only screen and (orientation:landscape)   {  
#socialWrap li{ display:inline-block;   margin: 0 15px; }
/*text*/
#socialWrap li a strong{
font-family:Arial, Helvetica, sans-serif;
display:block;
width: auto; 
height:20px;
white-space:nowrap; 
overflow:hidden;
clear:both; 
margin:10px auto 0 auto;  
text-transform:capitalize;
 
font-size: 12px; text-align:center;
font-weight: normal;   	
}
}
#socialWrap li#accredIcon{ margin:0;width:125px; float:left }
#socialWrap li#accredIcon a{ border:0px solid #fff ; width:125px}
#socialWrap li#accredIcon a span {height:50px; line-height:50px;  background-color: transparent; border:none; border-radius:0px;background-size: auto 50px; width:190px; background-position:left 50%;}
#socialWrap li#accredIcon a strong{ text-align:left; font-weight:bold}

 
#footer #viewFull{ display:block; margin:20px 0 0 0; }
#footer #viewFull a{font-weight:bold}