@charset "UTF-8";
h1 {font-size:24px;
	color: #333;
    margin-top: 8px;
}
h2 {font-size:14px; clear:both;
}
h4 { margin:0px 0px 13px 0px; float:left; font-size:12px;
}



#container {
	width: 99%;
	max-width: 960px;
	background-color: #FFF;
	margin: 0 auto; 
	/*-moz-box-shadow: 0 0 30px 5px #999;
	-webkit-box-shadow: 0 0 30px 5px #999;*/
}
#header {
	clear: both;
	float: left;
	margin: 0px 0px 0px 0px;
	width: 100%;
	display: block;
	background:url("../images/header/tc-logo-land.svg") top left no-repeat #F00;
	background-size: auto 32px;
	background-position: 8px 10px;
	padding:0px 0px 0px 0px;
	min-height:100px;

}
.question
{
 float:right;
}
.question2
{
 float:right;
 margin-top:-15px;
}

#header .hotspot {
	position:relative;
    width: 120px; height: 20px;
    position: absolute;
    top: 1px; /* Top coord of hotspot (relative to parent, bottom: 20px is also valid) */
    left: 2.5%; /* Left coord of hotspot (right: 20px is also valid); */
	display:none;
  }

.left_menu {
	float: left;
	width: 20%;
	background-color: #FFF;
	padding: 0px 0px 0px 0px;
	border: 1px solid #EFEFEF;
	display:none;
	/*border-radius: 5px;*/
	
}

.menu_bar {
	display:none;
	
}
.menu_bar2 {
	display:block;
	background-image:url(../images/header/bg1.png);
	/*background-color:#596167;*/
	padding: 4px 2px 4px 2px;
	font-family: "Lucida Grande", "Helvetica", "Arial", "Verdana", sans-serif; font-size: 12px; font-weight: 500; color:#FFF; text-decoration:none;
	border-top: 1px solid #000;
	margin-top:45px;
		/*border-bottom: 1px solid #333;*/
}

.green_bar {
	width: 100%;
	background-image:url(../images/header/bg3.png);
	height:20px;
	padding: 0px 0px 0px 0px;
	display: none;
}

.mobile_search {
	width:100%; background-color:#666;
	position:relative;	
	
}


.mobile-contents-list {
	display: block;
	margin: 10px;
}

.bss-slides {
	margin-top:10px;
}

.slideshow {display:none;
}
.exceed {display:none;
}

.exceed_mobile {display:block; background-color:#FFF; border-bottom:medium #999; margin-top:-10px;
}


.wallchart_request_mobile {display:block;
}
.wallchart_request_desktop {display:none; width:100%;
}
.wallchart_text {max-width:200px;
}

.quote{
	background-image:url(../images/header/quote2.svg);
	background-repeat:no-repeat;
	background-position: 2px 4px;
	background-size: 78%;
	
	height:30px;
	
	
}


a.content-link-general:link {color:#333; line-height:25px; font-size:14px; margin-bottom: 15px; text-decoration: underline; }

	
.mobile_quote {
	background-image:url(../images/header/quote2.png);
	background-size: 90%;
	background-repeat:no-repeat;
	background-position: center center;
	height:20px;
	}
	
	

.mobile_address {display:block;
}
.desktop_address {display:none;
}
	

/* see below media query 
#content {
	padding: 5px 5px 20px 10px;
	width: 95%;
	float:left;
	margin-top:25px;
}
*/

/* Media query for mobile devices */
@media screen and (max-width: 481px) {
    #content {
        display: flex;
        flex-wrap: wrap;
        padding: 5px 5px 20px 10px;
        width: 95%;
        margin-top: 10px;
        float: none;
    }
}


#footer {
	padding: 10px 0px 10px 15px;
	background-color: #FFF;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

#newfooter {
	padding: 10px 0px 10px 15px;
	background-color: #EFEFEF;
	position: relative;
	clear: both; 
	color:#666;
	
	
}

#newfooter h3 { color:#669900;
}

#newfooter b { color:#669900;
}

	
.secondlevelcontainer {

	/*width: 23.5%;*/
	width:260px;
	/*min-width:150px;*/
	float:left;
	/*min-height:120px;*/
	min-height:250px;
	border: 1px solid #E6E0DE;
	border-radius: 5px;
	margin: 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:center;
	background:#FFF;
}


.crosslinks {

	/*width: 23.5%;*/
	width:230px;
	/*min-width:150px;*/
	/*float:left;*/
	/*min-height:120px;*/
	min-height:20px;
	/*border: 0px solid #E6E0DE;/*
	/*border-radius: 5px;*/
	margin: 5px;
	display:inline-grid;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:900;
	color: #FFF;
	padding: 5px;
	
	background:#669900;
}

a.crosslinks:link {color:#FFF; text-decoration: none; }
a.crosslinks:visited {color:#FFF; text-decoration: none; }
a.crosslinks:hover { color:#FFF; text-decoration: underline; background:#669900; }
.crosslinks img{	margin:0px auto 0px auto;}


.relatedproducts {

	display:none;
}

.rpdiv {display:none;}

.connectorlevelcontainer {

	/*width: 23.5%;*/
	width:260px;
	/*min-width:150px;*/
	float:left;
	/*min-height:120px;*/
	min-height:140px;
	border: 1px solid #E6E0DE;
	border-radius: 5px;
	margin: 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:center;
	background:#FFF;
}

.formitemcontainer {

	/*width: 23.5%;*/
	width:220px;
	/*min-width:150px;*/
	float:left;
	min-height:54px;
	border: 1px solid #E6E0DE;
	border-radius: 5px;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:left;
	background:#fdfcfc;
}

/*.g-recaptcha {
	width: 200px;
	overflow: hidden;
	border-radius: 4px;
border-right: 1px solid #d8d8d8;



}*/

.productpagelevelcontainer {

	/*width: 23.5%;*/
	width:42%;
	/*min-width:150px;*/
	float:left;
	min-height:110px;
	border: 1px solid #E6E0DE;
	border-radius: 5px;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:center;
	background:#FFF;
	
	
}



.productpageimagecontainer {

	clear:both;
	float:left;
	/*min-height:50px;*/
	/*border: 1px solid #E6E0DE;
	border-radius: 5px;*/
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
    line-height: 17px;
	color: #666;
	padding: 5px;
	text-align:left;
	background:#FFF;
	overflow-x: auto;
    position: relative;
}





.bulletcontainer {

	/*width: 23.5%;*/
	
	/*min-width:150px;*/
	float:left;
	
	/*border: 1px solid #E6E0DE;
	border-radius: 5px;*/
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:left;
	background:#FFF;
}



.bulletcontainer2 {

	max-width:340px;
	float:left;

	/*border: 1px solid #E6E0DE;
	border-radius: 5px;*/
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:left;
	background:#FFF;
}

.connectorcontainer {

	/*width: 23.5%;*/
	
	/*min-width:150px;*/
	float:left;
	
	/*border: 1px solid #E6E0DE;
	border-radius: 5px;*/
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:left;
	background: none;
	margin-top: 0px;
}






.textcontainer {

	float:left;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:left;

}

.icon_main {
	width:100px;
	float:left;	
	/*border: 1px solid #E6E0DE;*/
	/*border-radius: 5px;*/
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 0px;
	text-align:left;
	background:#FFF;
}

.enquiry {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(enquiry_icon.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.enquiry:hover { background:#E6E0DE;
background-image:url(enquiry_icon.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }
	 
	 


.buy {
	height: 28px;
	float: left;
	margin: 0px;
	padding-left: 26px;
	padding-right: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	text-align: left;
	text-decoration: none;
	vertical-align: middle;
	line-height: 28px;	
	background-image: url(buyonline.png);
	background-repeat: no-repeat;
	background-position: left center;
	position: relative; /* Needed for the tooltip to position properly */
}

.buy:hover::after {
	content: "Standard stock items are available to buy online\A Click to view them at tcdirect.co.uk"; /* Add \A for a line break */
	position: fixed;
	
    line-height: 1.5;
	background-color: #333;
	color: #fff;
	padding: 5px 10px;
	font-size: 12px;
	white-space: pre; /* Enable line breaks in the content */
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	z-index: 1000;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease-in-out;
    margin-top: -50px;
    margin-left: -50px;
}

.buy::after {
	content: '';
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out;
}


a[data-tooltip] {
  position: relative; /* For positioning the tooltip */
}

/* rollover message for buy online */

a[data-tooltip]::after {
  content: attr(data-tooltip); /* Use custom tooltip text in header */
  position: absolute;
  top: 30px; /* Position above the link */
  left: 50%;
  transform: translateX(-28%);
  background-color: #F00;
  color: #fff;
  padding: 5px 10px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  opacity: 0; /* Hidden by default */
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 1000;
}

a[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}






	 

.request {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(request.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.request:hover { background:#E6E0DE;
background-image:url(request.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }	
	 
	 
.datasheet {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(datasheet.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.datasheet:hover { background:#E6E0DE;
background-image:url(datasheet.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }		 
	 



.icon_extra {
	display:none;
}
.bulletplaintext {
	list-style-type:square;
	list-style-position:inside;
	color:#333;	
	line-height:15px;
	font-size:12px;
	text-indent:-12px;
	
}
ul.bullet1 {
	margin-left: 10px;
	list-style-type:square;
	list-style-position:inside;
	color:#999;	
	line-height:15px;
	font-size:13px;
	text-indent:-12px;
	display: inline-block;
	
	
}
ul.bullet1 li { margin-left:5px; margin-bottom:7px; list-style-position:outside;
	 
}
ul.bullet1 li span {color:#333; font-size:14px; margin-left:12px; line-height: 17px;
}


.reference_text {
	color:#333;	
	line-height:17px;
	font-size:14px;
	margin-bottom:15px;
}

.subhead {
	color:#333;	
	line-height:15px;
	font-size:12px;
	font-weight:900;
	margin-bottom:5px;
	
}


.formtable1 {

	padding:3px;
	text-align:center;
	border: solid #333;
	border-width:0 0 thin 0;

}
.formtable2 {

	padding:3px;
	text-align:left;
	border: solid #333;
	border-width:0 0 thin 0;

}
input, select, textarea {
color: #666;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 12px;
padding:2px;

}

.tel {clear: both; display:none; width:181px; height:20px; background:url(../images/header/tel2.png) top right no-repeat #F00; float:right; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; position:relative; background-size: 70%;}

.intl {
	display: none;
}

.tel_mobile {clear: both; display:block; width:181px; height:20px; background:url(../images/header/tel4.svg) top right no-repeat; float:right; padding: 0px 0px 0px 0px; margin: 4px 7px 0px 0px; position:relative; background-size: auto;}


	
a.headermail {
	clear:both;
	display:none;
	float:right;
	/*margin-right:20px;*/
	padding: 0 0 0 20px;
	background: url(../images/mailIcon.png) top left no-repeat transparent;
	color: white;
	text-decoration: none;
	position: relative;
	top: 1px;
	right: 8px;
}
a.headermail:hover {
	text-decoration: underline;	
}
.conbox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #666;
	vertical-align: center;
	text-align: center;
	background-color: #fdfcfc;
	border: solid #E6E0DE;
	border-width:0 0 thin thin;

}

.tctypebox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
	vertical-align: center;
	text-align: center;
	background-color: #F2F2F2;
	border: solid #E6E0DE;
	border-width:0 0 thin thin;

}
.codebox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	vertical-align: center;
	text-align: center;
	background-color: #fdfcfc;
	border: solid #E6E0DE;
	border-width:0 0 thin thin;

}
.form_heading1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #666;
	vertical-align: center;
	text-align: center;
	background-color: #f4f4f4;
	border: solid #E6E0DE;
	border-width:thin 0 thin thin;

}
.form_heading2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #666;
	vertical-align: center;
	text-align: center;
	background-color: #f4f4f4;
	border: solid #E6E0DE;
	border-width:thin 0 thin thin;

}
.form_heading3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #666;
	vertical-align: center;
	text-align: center;
	background-color: #f4f4f4;
	border: solid #E6E0DE;
	border-width:0 0 thin thin;

}

.contactleft {

	/*width: 23.5%;*/
	
	width:100px;
	float:left;
	
	
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 12px;
	color: #333;
	padding: 30px 5px 5px 7px;
	text-align:left;
	background:#FFF;
}

.contactright {

	/*width: 23.5%;*/
	
	width:200px;
	float:left;
	
	font-family:Arial, Helvetica, sans-serif;
	
	font-size: 12px;
	color: #333;
	padding: 30px 5px 5px 7px;
	text-align:left;
	background:#FFF;
}

.formitemcontainer1 {

	/*width: 23.5%;*/
	width:220px;
	/*min-width:150px;*/
	float:left;
	min-height:54px;
	border: 1px solid #E6E0DE;
	border-radius: 5px;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:left;
	background:#fdfcfc;
	display: none;
}

#submitButton{
	background: #666 url('../TCsearch/img/search2.png') no-repeat center;
	background-size:70%;
	width:41px;
	height:25px;
	text-indent:-9999px;
	border:none;
	cursor:pointer;
	margin:-3px 5px 0px 5px;
	padding:0 0 0 0px;
	float:right; margin-top:2px; margin-right:0px;
}

.breadcrumbs {
	float:left;
	width:98%;
	padding:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	text-align:left;
}
.breadcrumbs a:link {color:#669900; text-decoration: none; }
.breadcrumbs a:visited {color:#669900; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

.applicationstext_desktop {display:none;}
.applicationstext_mobile {display:inline; margin-left:10px; clear:both; float:left;}

.productpagelevelcontainernoborder {

	/*width: 23.5%;*/
	width:114px;
	/*min-width:150px;*/
	float:left;
	min-height:110px;
	border: 1px solid #FFF;
	border-radius: 5px;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #666;
	padding: 5px;
	text-align:center;
	background:#FFF url(../images/icons/bgblue.png) 0 0 no-repeat;
	background-size:114px;
	background-position: 5px 5px; 
}

.techdatadiv {display:none;}





.hamburger {
    position: relative;
    display: inline-block;
    width: 1.25em;
    height: 0.8em;
    margin-right: 0.3em;
    border-top: 0.2em solid #fff;
    border-bottom: 0.2em solid #fff;
}

.hamburger:before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #fff;
}


.mobnav {
  overflow: hidden;
  background-color: #333;
  position: relative; 
  margin-top:50px;
  z-index:10;
}

.mobnav #myLinks {
  display: none;
}

.mobnav a {
  color: white;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  
}

.mobnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.mobnav a:hover {
  background-color: #ddd;
  color: black;
 
}

.active {
/*background-color:#669900;*/
  color: white;
  padding-left:5px;
  padding-top:8px;
	padding-bottom: 2px;
  /*height:23px;*/
  font-size:13px;
  background-image: linear-gradient(#669900, #336600);
  border-top: 1px solid black;
  border-bottom: 1px solid black;
 
}

.enquiry_with_info {
	margin: 0px 0px 13px 0px;
	float:left;
	font-size:12px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	text-align:left;
	font-weight:bold;
}

.enquiry_no_info {
	margin: 0px;
	font-size:12px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	text-align:left;
	font-weight:bold;
}
	
.whatsapp {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(whatsapp_icon.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.whatsapp:hover { background:#E6E0DE;
background-image:url(whatsapp_icon.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }

.rightdetail {

	width:100%;
	float:left;
	

	/*border: 1px solid #E6E0DE;
	border-radius: 5px;*/
	margin-top:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	padding-left: 5px;
	text-align:left;
	background-color:#F5F5F5;

	
}

.iecex {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(IECEx_icon.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.iecex:hover { background:#E6E0DE;
background-image:url(IECEx_icon.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }	 
	 
	 
.atex {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(ATEX_icon.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.atex:hover { background:#E6E0DE;
background-image:url(ATEX_icon.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }	
	 
	  
.eacex {
	height:28px;
	float:left;
	margin:0px;
	padding-left:26px;
	padding-right:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:600;
	color: #333;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
	line-height:28px;	
	background-image:url(EACEx_icon.png);
    background-repeat: no-repeat;
    background-position: left center; 

}

a.eacex:hover { background:#E6E0DE;
background-image:url(EACEx_icon.png);
    background-repeat: no-repeat;
    background-position: left center;
	 }	 	 

.textcontainer3 {

	float:left;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:left;
	widows: 3

}

.textcontainer2 {

	float:left;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	padding: 5px;
	text-align:left;

}