/* CSS Resets */
@import url("reset.css");


/* MAIN LAYOUT STYLES */
* {margin: 0;}

html, body {height: 100%; color:#666; line-height:1.75em;}
body {font-family: 'Droid Sans', sans-serif; font-size:0.85em; margin:0; padding:0;}
#body {min-height: 100%; position: relative; min-width:940px; margin: 0 auto;}

.container {margin:0 auto; max-width:1430px;}

#main {margin:10px 25px;}

#mainClear {
	height:16em;
}

/* FOOTER STYLES */
#footer {
	background-color:#555;
	border-top:5px solid #006EA3; 
	position:absolute;
   	bottom:0;
   	width:100%;
   	color:#FFF;
}

#footerBottom {
	background-color:#333;
	position:absolute;
   	bottom:0;
   	width:100%;
   	height:2.2em;
   	color:#AAA;
}

#footer #footerMain {margin:1em 25px 40px 25px; font-size:0.85em;}
#footerBottom #footerBottomMain {margin:3px 25px;}
#footerBottom .links {float:right;}
#footerBottom .links a {color:#DFA611;}
#footer a {color:#FFFFFF;}
#footer p {margin-bottom:0.2em}
#footer h3 {color:#FFF;  margin-bottom:0.75em; text-transform:uppercase;}
/* END OF FOOTER STYLES */

/* HEADER & NAV STYLES */
#header {font-size:0.95em; text-transform:uppercase; background-color:#333;}
#header ul {margin:0;}
#header li {list-style-type:none; display:inline;}
#header #logo {float:left; margin:20px 5px 20px 20px;}

#topNav {height:72px; width:100%; color:#FFF;}
#topNav ul {float:right; margin:10px 20px 5px 5px;}
#topNav li {padding:0; margin:0;}
#topNav a {text-decoration:none; color:#FFF; text-shadow: 1px 1px 1px #000;}
#topNav a:hover {color:#DFA611;}

#nav {width:100%; background-color:#EFEFEF; box-shadow: -3px 0 3px 0 #aaa; margin-bottom:20px; float:left; position:relative;}
#nav ul {right:50%; float:right; position:relative; text-align:center;}
#nav ul li {margin:0 10px; float:left; left:50%; position:relative;	display:block; padding:10px 0;}

#nav a {text-decoration:none; color:#444; text-shadow: 1px 1px 1px #FFFFFF; padding:1em}
#nav a.button-wIcon {padding:1px 8px 1px 4px}
#nav a:hover {color:#006EA3;}

.homeSection .homeLink a, 
.aboutSection .aboutLink a,
.productsSection .productsLink a,
.vendorsSection .vendorsLink a,
.servicesSection .servicesLink a,
.supportSection .supportLink a,
.contactSection .contactLink a {
	color:#dfa611 !important;
}

/* DROPDOWN STYLES */
#nav li ul {
	display:none;
	position:absolute;
}

#nav li:hover ul {
	display: block;
	margin-top:0.7em;
	position: absolute;
	right:auto; /*resets the right:50% on the parent ul */
   	width:auto; /* width of the drop-down menus */
   	background-color:#2790B0;
   	padding-top:5px;
   	border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;
   	padding-bottom:5px;
   	z-index:100; /* Ensures this is in front of relative positioned objects */
}

#nav li li {
	display: block;
	text-align:left;
	text-transform:none;
}

#nav ul ul li {
   left:0;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;
   width:100%;
   padding:0;
}

#nav li.hasDropDown:hover {
	background-image: url(../images/icons/tab-arrow-up.png);
	background-repeat: no-repeat;
	background-position:center 3.0em;
}

#nav .sub-menu li:hover {
	background-color:#555;
}

#nav .sub-menu a {
	padding:0 10px;
	color:#FFF !important;
	text-shadow:none !important;
	display:block;
}

#nav form {margin:0; padding:0}

#nav .sub-menu li:last-child {border-bottom:none;}




/* FORMATTING STYLES */

.title {border-bottom: 1px solid #eaeaea; margin: 1em 0 1.5em 0;}
    
h1, h2, h3, h4 {font-weight:normal;	font-size: 1.1em;}
h2, h3, h4 {margin-bottom:0.5em;}
h1 {border-bottom: 3px solid #006EA3; display: inline-block; margin-bottom: -2px; padding: 0 10px 0 5px; color:#555; font-size: 1.25em;  line-height: 2.5em;}
h3 {color:#2790B0; margin-bottom:0.2em;}
h2 {color: #006EA3;}
h4 {font-size: 1em;}

p {text-align:justify;}
.note {font-size:0.90em; line-height:1.75em}

hr {border: 0; height: 0; border-bottom: 1px solid #eaeaea;}

a {text-decoration:none;}
#main a	{color: #006EA3;}
a:hover {text-decoration:underline;}

table {max-width: 100%; font-size:0.95em;}
td, th {border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; padding:8px; text-align:center; vertical-align:middle;}
th {background-color: #FAFAFA;}
td.colRowHeaders {border-left:none; border-top:none;} /* For tables that have a TH in the colunm as weel as row */

ul {margin-left:10px;}
ol {margin-left:20px;}

li {line-height:2em; list-style-position: outside; margin-left: 0.5em; padding-left: 0.5em;}

table, p, ul, ol, form, hr, .notification {margin-bottom:1.5em;} /* Setting a standard margin-bottom on elements */

.telephoneNumber a { /* Mobile style overide */
	color:#FFF !important;
	text-decoration:none !important;
	font-weight:normal !important;			
}

::selection {background: #DFA611; color:#FFFFFF;}
::-moz-selection {background: #DFA611; color:#FFFFFF;}

.left {float:left}
.right {float:right}
.center, .center p {text-align:center}
.clearFloat {clear:both;}
.clearLeft {clear:left;}
.clearRight {clear:right;}

img.left {margin-right:10px; margin-bottom:10px}
img.right {margin-left:15px; margin-bottom:15px}

.thumb {padding:5px; border:1px solid #eaeaea;}
/* END OF FORMATTING STYLES */


/* TABS FOR PRODUCT PAGES */
#tabLinks {float:right; margin-bottom:0; margin-top:-4em}
#tabLinks li {margin:0 5px; padding-bottom:1.5em; float:left; list-style-type:none; display:inline;}
#tabLinks a {text-decoration:none; font-weight:normal; color:#444; padding:0.85em}
#tabLinks a:hover {color:#006EA3;}

#tabLinks li.active-tab.js-enhance {
	background-image: url(../images/icons/tab-arrow.png);
	background-repeat: no-repeat;
	background-position:center 2.45em;
}

#tabLinks li.active-tab.js-enhance a {
	background-color:#2790b0;
	border-radius: 2px;
	color:#FFF;
}
/* END OF TABS FOR PRODUCT PAGES */


/* HOME PAGE SLIDER */
.banner {position: relative; overflow: hidden; height:300px}
.banner ul li {list-style: none; float: left; margin:0; padding:0}
.banner ul {margin:0; padding:0}
.banner .dots {
	position: absolute;
	right: 15px;
	bottom: 0;
	margin:0; padding:0;
}

.banner ul li div {background-position:center; height:300px}

.banner .dots li {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	padding:0;
	text-indent: -999em;
	border: 2px solid #fff;
	border-radius: 6px;
	cursor: pointer;
	opacity: .4;
	
	-webkit-transition: background .5s, opacity .5s;
	-moz-transition: background .5s, opacity .5s;
	transition: background .5s, opacity .5s;
}

.banner .dots li.active {
	background: #fff;
	opacity: 1;
}

			
/* END OF HOME PAGE SLIDER */

/* ELEMENTS WITH ICONS STYLES */

a.button-wIcon span, p.wIcon span {padding-left:24px /* margin left same as width of icon */} 
.notification span {padding-left:26px /* margin left same as width of icon */} 

a.button-wIcon, button {border: 1px solid rgba(0, 0, 0, 0.1); text-shadow: 0 -1px rgba(0, 0, 0, 0.3); display: inline-block; padding:1px 8px 1px 4px; color:#ffffff !important; border-radius:2px; font-weight:bold; background-color:#2790B0;}
a.button-wIcon:hover, button:hover {text-decoration:none; background-color:#006EA3;}
#nav a.button-wIcon {text-shadow:none !important; border:none !important;}

button:after {content: "  \00bb"}
button {padding:4px 8px}

.notification {display:inline-block; padding: 8px 20px 8px 9px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 3px; border-radius: 2px;}

.notification.info {background-color: #CCE5FF; border: 1px solid rgba(0, 0, 0, 0.1);}
.notification.warning {background-color: #FFFFB2; border: 1px solid rgba(0, 0, 0, 0.1);}
.notification.error {background-color: #FFDFDF; border: 1px solid rgba(0, 0, 0, 0.1);}

/* ELEMENTS WITH ICONS STYLES */

/* ICONS WHITE SPRITES */
.tick-icon, .info-icon, .warning-icon, .basket-icon, .config-icon, .time-icon, .search-icon, .telephone-icon, .edit-icon, .calendar-icon, .location-icon, .chat-icon, .email-icon, .download-icon, .expand-icon, .error-icon, .home-icon, .email-blue-icon, .location-blue-icon, .telephone-blue-icon {
	background-image: url(../images/icons.png);
	height:22px; 
	width:22px;
}

.tick-icon {background-position: -10px center;}
.info-icon {background-position: -50px center;}
.warning-icon {background-position: -90px center;}
.basket-icon {background-position: -130px center;}
.config-icon {background-position: -170px center;}
.time-icon {background-position: -210px center;}
.search-icon {background-position: -250px center;}
.telephone-icon {background-position: -290px center;}
.edit-icon {background-position: -330px center;}
.calendar-icon {background-position: -370px center;}
.location-icon {background-position: -410px center;}
.chat-icon {background-position: -450px center;}
.email-icon {background-position: -490px center;}
.download-icon {background-position: -530px center;}
.expand-icon {background-position: -570px center;}
.error-icon {background-position: -610px center;}
.home-icon {background-position: -650px center; display:inline-block; height:15px}
.email-blue-icon {background-position: -690px center;}
.location-blue-icon {background-position: -730px center;}
.telephone-blue-icon {background-position: -770px center;}


.emailus, .blog, .twitter, .facebook, .rss, .youtube, .linkedin, .googleplus, .emailus-blue, .blog-blue, .twitter-blue, .facebook-blue, .rss-blue, .youtube-blue, .linkedin-blue, .googleplus-blue  {
	background-image: url(../images/icons/socialicons-circles.png);
	width:30px;
	height:30px;
	display:inline-block
}

.emailus {background-position: 0 -105px;}
.blog {background-position: -35px -105px;}
.twitter {background-position: -70px -105px;}
.facebook {background-position: -105px -105px;}
.rss {background-position: -140px -105px;}
.youtube {background-position: -175px -105px;}
.linkedin {background-position: -210px -105px;}
.googleplus {background-position: -245px -105px;}

.emailus:hover {background-position: 0 0;}
.blog:hover {background-position: -35px -35px;}
.twitter:hover {background-position: -70px 0;}
.facebook:hover {background-position: -105px 0;}
.rss:hover {background-position: -140px 0;}
.youtube:hover {background-position: -175px 0;}
.linkedin:hover {background-position: -210px 0;}
.googleplus:hover {background-position: -245px 0;}

.emailus-blue {background-position: 0 -70px;}
.blog-blue {background-position: -35px -70px;}
.twitter-blue {background-position: -70px -70px;}
.facebook-blue {background-position: -105px -70px;}
.rss-blue {background-position: -140px -70px;}
.youtube-blue {background-position: -175px -70px;}
.linkedin-blue {background-position: -210px -70px;}
.googleplus-blue {background-position: -245px -70px;}

.emailus-blue:hover {background-position: 0 -35px;}
.blog-blue:hover {background-position: -35px -35px;}
.twitter-blue:hover {background-position: -70px -35px;}
.facebook-blue:hover {background-position: -105px -35px;}
.rss-blue:hover {background-position: -140px -35px;}
.youtube-blue:hover {background-position: -175px -35px;}
.linkedin-blue:hover {background-position: -210px -35px;}
.googleplus-blue:hover {background-position: -245px -35px;}

.technical, .provision, .invoice, .manage, .fulfil, .consult, .train, .warranty, .sell, .repair, .supply, .api, .team, .supply-about, .team-about {
	background-image: url(../images/icons/service-icons.png);
	width:45px;
	height:45px;
	display:inline-block;
}

.technical {background-position: 0 0;}
.provision {background-position: -50px 0;}
.invoice {background-position: -100px 0;}
.manage {background-position: -150px 0;}
.fulfil {background-position: -200px 0;}
.consult {background-position: -250px 0;}
.train {background-position: -300px 0;}
.warranty {background-position: -350px 0;}
.sell {background-position: -400px 0;}
.repair {background-position: -450px 0;}
.supply {background-position: -500px 0;}
.api {background-position: -550px 0;}
.team {background-position: -600px 0;}

.supply-about {background-position: -500px -100px;}
.team-about {background-position: -600px -100px;}

/* END OF ICONS SPRITES */

/* ICONS */
a.pdf::after {content: url(../images/icons/pdf.gif); padding-left:0.5em;}
a.external::after {content: url(../images/icons/external.png); padding-left:0.5em;}
/* END OF ICONS */

/* VIEW PRODUCT LIST OR BY COMPARISON ICONS */
.product-view-by {float:right; margin-top:1.5em;}

.list, .comparison {
	background-image: url(../images/icons/list-comparision.png);
	width:25px;
	height:25px;
	display:inline-block
	}
	
.list {background-position: 0 0;}
.comparison {background-position: -25px 0;}

a .list:hover {background-position: 0 -25px;}
a .comparison:hover {background-position: -25px -25px;}
/* END OF VIEW PRODUCT LIST OR BY COMPARISON ICON */

/* PRODUCT LINKS */
ul.product-links, ul.product-types, ul.product-vendors {margin:0;}
ul.product-links li, ul.product-types li, ul.product-vendors li {padding:0}

.item, .prosys {position: relative; margin:0 1.5em 1.5em 0; float:left; list-style-type:none; display:inline; border:1px solid #ccc; line-height:1.5em;}
.prosys {border:none;}

.item a:hover {text-decoration:none}
.item.link:hover, .float-center li.link:hover {border:1px solid #DFA611;}

.item .itemInner {padding:1em 1.8em 0.7em; width:12em; min-width:130px;}
.prosys .prosysInner {width:31em; padding:2em 1em;}

ul.product-vendors .item .itemInner {width:8em; padding:1em 1.2em 0.7em;}

.item .img {text-align:center; display:block; height:80px;}
.item .product-name {height:6em; display:table; text-align:center; width:100%}
.item .product-name span {display:table-cell; vertical-align:middle; margin:0 auto;}
.item span {display:block;}

ul.product-links .item .product-banners {position:absolute; right:0; top:0;}
ul.product-links .item .product-info {height:5em;}
ul.product-links .item .product-rrp {color:#2790B0; font-weight: 900; margin-top:0.8em; font-size:1.1em; text-align:center;}
ul.product-links .item .product-pcode, ul.product-links .item .product-mpn, ul.product-links .item .product-availability {color:#888; font-size:0.85em; margin-bottom:0}
/* END OF RELATED PRODUCTS */

/* CENTERING FLOATING LI / IMGS */
.float-center {overflow: hidden; text-align: center; width: 100%;}
.float-center ul {float: left; left: 50%; list-style: none outside none; margin: auto; padding: 0; position: relative; height:70px;} /* Height set to hide overflowing items */
.float-center li {display: inline-block; left: -50%; position: relative; line-height:0em; margin:0; padding:0;}

ul.brand-logos li {border:1px solid #ccc; padding:5px 10px; margin:0 5px 10px 5px;}
/* END OF CENTERING FLOATING LI / IMGS */

/* BREAD CRUMBS */
.breadCrumbs {list-style-type: none; margin:0; font-size:0.85em;}
.breadCrumbs li {display:inline; margin-right:1em; margin-left:0; padding-left:0;}
.breadCrumbs a:hover {text-decoration:none;}
.breadCrumbs a::after {content: "\00bb"; padding-left:0.7em;}
/* END OF BREAD CRUMBS */

/* BLOCKQUOTES */
blockquote {padding: 0.5em 1.5em; quotes: "\201C""\201D""\2018""\2019";}
blockquote p {display:inline;}
blockquote:before {font-family: Georgia, serif;	color: #ccc; content: open-quote; font-size: 4em; margin-right: 0.15em;	vertical-align: -0.4em; line-height:0;}
blockquote:after {font-family: Georgia, serif; color: #ccc;	content: close-quote; font-size: 4em; margin-left: 0.15em; vertical-align: -0.6em;}
/* END OF BLOCKQUOTES */

/* FORM STYLES */
:-moz-ui-invalid {background-color: #FFDFDF; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow:none} /* If form shows fiels as not valid input apears red */
:-moz-submit-invalid, :-moz-submit-invalid:hover {background-color: #999999} /* If form is missing required info or has errors, button appears greyed out */

input, textarea, select, radio, checkbox {border: 1px solid #ccc;}
textarea, input[type=text], input[type=email], select {border-radius:2px;}
textarea, input[type=text], input[type=email] {width:220px; padding:6px}
input[type=radio], input[type=checkbox] {position: relative; top: 2px; margin-right:0.2em;}
select {width:232px; padding:5px; background-color:#fff}
input:active, textarea:active, select:active, input:focus, textarea:focus, select:focus  {border-color:#DFA611;}
form p, form h2 {margin-bottom: 0.75em}
form {background-color: #EFEFEF; border: 1px solid #CCC; padding: 2em; display:inline-block}
section {margin-bottom: 1.5em; padding-bottom:1em; border-bottom: 1px solid #CCCCCC}
label span, legend {display: inline-block; width:10em;}
form label, legend {font-size:0.9em; text-align:left; line-height:1.2em; margin-right:1em;}
label span {margin-right:1em;}
/* END OF FORM STYLES */

/* TWO, THREE, FOUR, FIVE COLUMN LAYOUTS */
.col2 .col {width:50%; float:left;}
.col3 .col {width:33%; float:left;}
.col4 .col {width:25%; float:left;}
.col5 .col {width:20%; float:left;}
.col .inner, .col-equalHeight .inner {padding:0 1.5em} 
.col2:after, .col3:after, .col4:after, .col5:after {content: "."; display: block; clear: both; visibility: hidden; height: 0.5em;}
/* END OF THREE, FOUR, FIVE COLUMN LAYOUTS */


/* COL WITH EQUAL HEIGHT */
.col3-equalHeight {display: table;}
.col-equalHeight {display: table-cell; width:33%}
.col-equalHeight:nth-child(2) {width:34%}
/* END COL WITH EQUAL HEIGHT */

/* TWO COLUMN LAYOUTS */
#leftContainer {float: left; width: 100%; margin-right: -22em; /* The size of the fixed block. */}
#leftContainer-inner {padding-right:3em; margin-right: 22em; /* The size of the fixed block. */}
#rightContainer {float: left; width: 22em; /* The size of the fixed block. */}
/* END OF TWO COLUMN LAYOUTS */

/* TWO COLUMN LAYOUTS FOR PRODUCT FILTER & PRODUCT DISPLAY */
#product-filter {float:left; width:12em; font-size:0.95em}
#product-filter-inner {margin-right:2em;}
#product-filter-display {margin-left:12em}
/* END TWO COLUMN LAYOUTS FOR PRODUCT FILTER & PRODUCT DISPLAY */

						/* TWO COLUMN LAYOUTS FOR PRODUCT OVERVIEW */
						#leftContainer-overview {
							float: left;
							width: 100%;
							margin-right: -340px; /* The size of the fixed block. */
						}
							
						#leftContainer-inner-overview {
							margin-right: 340px; /* The size of the fixed block. */
							padding-right:2em;
						}
							
						#rightContainer-overview {
							float: left;
							width: 340px; /* The size of the fixed block. */
						}
						/* END OF TWO COLUMN LAYOUTS FOR PRODUCT OVERVIEW */


						#next-prev-items {width:100%; font-size: 0.85em;}
						#next-prev-items a.prev span:before {content: "\00ab"; margin-right:0.2em}
						#next-prev-items a.next span:after {content:"\00bb"; margin-left:0.2em;}
						#next-prev-items a.next {float:right}
						
						#next-prev-wicon {width:100%; font-size: 0.85em;}
						#next-prev-wicon div.prev span:before {content: "\00ab"; margin-right:0.2em}
						#next-prev-wicon div.next span:after {content:"\00bb"; margin-left:0.2em;}
						#next-prev-wicon div.next {float:right;}
						
						#next-prev-wicon:after {
						   content: ".";
						   display: block;
						   clear: both;
						   visibility: hidden;
						   height: 0;
						 }
						 
						#show-more-products ul, #show-more-products2 ul {	
							float:left;
							height:74px;
							overflow:hidden;
							margin-bottom:10px;
							font-size: 0.85em;
							margin-right:20px;
						}
						
						
						#show-more-products ul li, #show-more-products2 ul li {	
							margin-right:10px;
							float:left;
							display:block;
							padding:10px;
							height:52px;
							width:130px;
							border:1px #EAEAEA solid;
							line-height:1.2em;
						}
						
						#show-more-products ul > :first-child {border:none; border-right:1px #EAEAEA solid; text-align:right;}
						
						#show-more-products:after, #show-more-products2:after {
						   content: ".";
						   display: block;
						   clear: both;
						   visibility: hidden;
						   height: 0;
						 }

/* MEDIA */
@media only screen and (max-device-width: 1000px) {
    #nav li:hover ul {display:none;}    
    #nav li.hasDropDown:hover {background-image: none;}   
}