/* CSS3 Document */

/* 

WHAT IS THIS
This document is what controls how you webpages pages display; their layout and appearance.
It is called a Cascading Style Sheet (CSS) document. 
It's where we control all the colours, fonts, sections, and div boxes into which you put your page content.
By putting all the styling here, your pages are nice and tidy, and if you change anything (e.g. link colours)
you only need to change it in one place! (this document).

SIZES
Note the use of em's, rem's and percentages instead of pixels: this makes the website more 
future proof, and slightly more adjustable to different devices. Use:
em's for padding and margins, (this helps people zoom the page if they want to)
rem's for font size, and (this helps people zoom the page if they want to)
percentages for heights and widths. (this helps the page adjust to the screen size within defined parameters)

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display: block;
}
body {
	font-family: 'Lucida Grande', 'Lucida Unicode', sans-serif;
	color: #000;
	font-size: 15px; font-size: 1rem;
	background-color: #FFF;
	z-index: 0;
	position: relative;
	line-height:1.2em;
}

section, div {box-sizing: border-box;}
img { max-width: 100%;}
.row { display:inline-block; width:100%;}
#container { /* Everything that starts with a # is an ID 
	in your HTML this ID will be applied to an element with the code ID="CONTAINER" */
	width: 100%;
	max-width: 1270px;
/*	min-width: 1270px;*/
	z-index: 0;
	position: relative;
	margin: 0 auto;
	background-color: #FFF;
}
p {
	font-size: 14px; font-size: .85rem;
	padding: .7em 0 .7em 0;
}
.block { /* Everything that starts with a . is an class 
	in your HTML this ID will be applied to an element with the code CLASS="BLOCK" */
	display: block;
}
.clearfix {
	clear: both;
}

/* HEADER STYLES */

header {
	z-index: 20;
	position: relative;
	width: 100%;
}

/* red banner */
#menubar {
	background-image: url("ABheader1v2.jpg");
	background-repeat: no-repeat;
	z-index: 3;
	position: relative;
	padding: 2em;
}
/* main menu (the top level UL in the menu) */
#menu {
	margin: 0 1.4% .4% 1.4%;
	padding: 0 1em 2em 13.5em;
	list-style: none;
	z-index: 3;
	position: relative;
}
/* items in the main menu */
#menu li {
	font-size: .8rem;
	padding: .3% 1.4% .4% 1.4%;
	float: left;
	position: relative;
	border: 1px solid transparent; /* invisible border so items don't jump on hover */
}
#menu li:hover {
	color: #d32427;
	border: 1px solid #16145F;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #16145F;
    background: -moz-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #AFD0E1),color-stop(1, #5b8AA8),colour-stop(3,#16145F));
    background: -webkit-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -o-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: -ms-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
}
#menu a {
	height: 38%;
	font-family: Arial, sans-serif;	
	color: #FFF;
	text-decoration: none;
	font-weight: 100;
	text-shadow: 0 1px 0 #000;
}
/* main menu buttons change colour on hover */
#menu li:hover > a {
	color: #C0151c;
}
/* show sub menu on hover */
#menu li:hover > ul {
	display: block;
}
/* submenu (ULs inside the #menu UL) */
#menu ul {
	width: 16em;
	list-style: none;
	display: none; /* hide when not hovered */
	position: absolute;
	top: 2em;
	left: 0;
	z-index: 99;
	background: #16145F;
    background: -moz-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #AFD0E1),color-stop(1, #5b8AA8),colour-stop(2,#16145F));
    background: -webkit-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -o-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: -ms-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    padding-bottom: 1em;
}
/* submenu items */
#menu ul li {
	width: 100%;
	position: relative;
	left: -1.5em;
	border-bottom: 1px solid #FFF;
	padding: .5em 0 .5em 0;
}
#menu ul li:hover {
	color: #16145F;
	border: none;
	background: transparent;
	border-bottom: 1px solid #FFF;
	-moz-border-radius: 0;
	border-radius: 0;
	padding: .6em 0 .5em .1em;
}
.topWrap { width: 950px; margin:auto; position:relative }
.badgesLogosWrap .pageWrap { width: 820px; margin:auto; }
#logo {
	float: left;
	margin:20px 25px 44px 80px;
}
/* contact box menu items */
a.esub:link {
	font-size: .77rem;
	color: #ffffff;
	text-decoration: none;
}
a.esub:active {
	font-size: .77rem;
	color: #ffffff;
	text-decoration: none;
}
a.esub:hover {
	font-size: .77rem;
	color: #ffffff;
	text-decoration: underline;
}
a.esub:visited {
	font-size: .8rem;
	color: #ffffff;
	text-decoration: none;
}
/* download buttons */
a.bb:link {
	padding: .2em 1em .3em 1em;
	font-size: .8rem;
	color: #fff;
	text-decoration: none;
		border: 1px solid #16145F;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background: #16145F;
    background: -moz-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #AFD0E1),color-stop(1, #5b8AA8),colour-stop(3,#16145F));
    background: -webkit-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -o-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: -ms-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
}
a.bb:active {
	padding: .2em 1em .3em 1em;
	font-size: .8rem;
	color: #C0151C;
	text-decoration: none;
		border: 1px solid #16145F;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background: #16145F;
    background: -moz-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #AFD0E1),color-stop(1, #5b8AA8),colour-stop(3,#16145F));
    background: -webkit-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -o-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: -ms-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
}
a.bb:hover {
	padding: .2em 1em .3em 1em;
	font-size: .8rem;
	color: #FFF;
	text-decoration: none;
	border: 1px solid #16145F;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background: #16145F;
    background: -moz-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #AFD0E1),color-stop(1, #5b8AA8),colour-stop(3,#16145F));
    background: -webkit-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -o-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: -ms-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: linear-gradient(#AFD0E1, #5b8AA8, #16145F);		
}
a.bb:visited {
	padding: .2em 1em .3em 1em;
	font-size: .8rem;
	color: #16145F;
	text-decoration: none;
		border: 1px solid #16145F;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background: #16145F;
    background: -moz-linear-gradient(#16145F, #5b8AA8, #AFD0E1);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #16145F),color-stop(1, #5b8AA8),colour-stop(3,#AFD0E1));
    background: -webkit-linear-gradient(#16145F, #5b8AA8, #AFD0E1);
    background: -o-linear-gradient(#16145F, #5b8AA8, #AFD0E1));	
    background: -ms-linear-gradient(#16145F, #5b8AA8, #AFD0E1);	
    background: linear-gradient(#16145F, #5b8AA8, #AFD0E1);	
}
/* Contact Box */
#contact-box {
	background-image: url("images/ABkieron.jpg"); /* if you want to change your photo on the homepage, change this filename */
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
.contact-box {
	text-align: center;
	color: #16415F;
	font-size: .85rem;
	position: relative;
	left: -.5em;
	margin-top: 1em;
}
.contact-email {
	font-size: .78em;
	text-align: center;
	color: #16415F;
	position: relative;
	left: -.5em;
}
.contactimg {
	margin: 0 auto;
	width: 95px;
}
/* contact-box image variations */

#box-Lynn {
	background-image: url(images/lynn21.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-Kieron {
	background-image: url(images/ABKieron.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-drone {
	background-image: url("images/drone-box.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-warehouse1 {
	background-image: url(images/warehouseceiling.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-logos {
	background-image: url(images/logos.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-projects {
	background-image: url(images/projects.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-wireless {
	background-image: url(images/monaco-7100-wireless-flt-mount.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	float: left;
	position: relative;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-geneva {
	background-image: url(images/geneva-6100-wireless-hht.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	float: left;
	position: relative;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-picker {
	background-image: url(images/pickerusingtalkman.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	float: left;
	position: relative;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-talkman {
	background-image: url(images/manusingtalkman.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	float: left;
	position: relative;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-office {
	background-image: url(images/office1.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	float: left;
	position: relative;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-pallet {
	background-image: url(images/pallet.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	float: left;
	position: relative;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#supplychain {
	background-image: url(images/supplychainmanagement.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-boxes {
	background-image: url(images/boxes.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	float: left;
	position: relative;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-man {
	background-image: url(images/maninwarehouse.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#box-warehouse2 {
	background-image: url(images/warehouse.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#continuityplanning {
	background-image: url(images/continuityplanning.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}

#voicepicking {
	background-image: url(images/voicepicking.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	float: left;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}
#trucks {
	background-image: url(images/trucks.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	right:0;
	z-index: 2;
	margin-top: 4%;
	width: 8.8em;
	padding-left: 10em;
	padding-top: .5em;
	padding-bottom: 6em;
}

/* MAIN SECTION STYLES */

#body-container{
	border-top: 2px groove #FFF;
	background-color: #eaeaea;
	width: 100%;
	position: relative;
	z-index: 1;
	/*top: -4.7em;*/
}
#mainbody {
	margin: 0 auto;
	width: 60%;
	z-index: 1;
	text-align: justify;
	position: relative;
	float: left;
	padding-top: 1.8em;
	padding-bottom: 4em;
}
/* Body Links (red) */
a:link {
	color: #c0151C;
	text-decoration: none;
}
a:visited {
	color: #C0151C;
	text-decoration: none;
}
a:hover {
	color: #C0151C;
	text-decoration: underline;
}
a:active {
	color: #C0151C;
	text-decoration: none;
}
/* body text styles */
h1 {
	font-size: 1.5rem;
	color: #C0151c;
	margin-top: .2em;
	font-weight: 600;
}
h2 {
	font-size: 1rem;
	font-weight: 100;
	color: #000;
	font-weight: 600;
	padding: 1em 0 0 0;
}
h3 {
	font-size: 1.2rem;
	color: #000;
	padding: .7em 0 .5em 0;
	font-weight: 600;
}
h4 {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-size: .8rem;
	font-weight: 100;
	color: #000;
	padding: 5px 0 5px 0;
}
hgroup {
	padding-bottom: 5px;
	border-bottom: 2px ridge #FFF;
	margin-bottom: 10px;
}
ul {
	padding-left: 2em;
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
li {
	padding: .5em 0 .5em 1em;
	font-size: .85rem;
}
b {
	font-weight: 600;
}
i {
	font-style: italic;
}
#disk {
	width: 9em;
	float: left;
	padding: .9em .9em 0em .5em;
}
.disk2 {
	float: left;
	padding: .5em 1em 0 0;
}
#signature {
	margin-top: 1em;
}
#bottomimg {
		padding-left: 2em;
		width: 90%;
}
#badges {
		z-index: 0;
		position: relative;
		width: 100%;
		top: -.2em;
}
.ileft {
	float: left;
	padding-right: 1em;
}
.bbcover {
	float: left;
	margin-right: 1em;
	width: 9.5em;
	margin-top: .9em;
	margin-bottom: 1em;
	border: 1px solid #999;
}
.underline {
	border-bottom: 2px groove #FFF;
	padding-bottom: 2em;
	margin-bottom: 2em;
}
.csthumb {
	float: left;
	margin-right: 1em;
	width: 15em;
	margin-top: .9em;
	margin-bottom: 1em;
	border: 1px solid #999;
}
.underline {
	border-bottom: 2px groove #FFF;
	padding-bottom: 2em;
	margin-bottom: 2em;
}

/* LEFT COLUMN STYLES (the ASIDE) */


#leftcol { /* Styles for left-column when the background is GREY */
	margin-top: 2.4em;
	float: left;
	margin-left: 1.5em;
	margin-right: 2.5em;
	z-index: 0;
	position: relative;
	width: 11.9em;
}

aside h1 {
	font-family: 'Arial', sans-serif;
	font-size: 1.1em;
	color: #FFF;
	font-weight: 100;
	text-shadow: 0 .5px 0 #000;
}
aside p {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-size: .9em;
	color: #eaeaea;
}
aside h2 {
	font-family: 'Arial', sans-serif;
	font-size: .9rem;
	color: #C0151c;
	padding: .3em .3em .8em .3em;
	text-align: center;
	font-weight: 100;
}

/* INFOBOX STYLES */

#infobox { /* this is the red display box in the leftcol */
	background-image: url("ABinfobox.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 11.9em;
	height: 15em;
}
#infobox h3 {
	padding: .6em 0 0 0;
	font-size: .76rem;
	text-align: center;
	color: #FFF;
	font-weight: 600;
}
#infobox p {
	padding: 1em 1em 0 1em;
	font-size: .7rem;
	text-align: center;
	color: #FFF;
}
#briefingcover1 {
	width: 7em;
	padding: 1em 0 0 0;
}
#DownloadP {
	margin-top: 1.5em; 
}
/* infobox menu items */
a.sub:link {
	font-size: .8rem;
	color: #C0151c;
	text-decoration: none;
}
a.sub:active {
	font-size: .8rem;
	color: #16145F;
	text-decoration: none;
}
a.sub:hover {
	font-size: .8rem;
	color: #16145F;
	text-decoration: underline;
}
a.sub:visited {
	font-size: .8rem;
	color: #16145F;
	text-decoration: none;
}

/* TESTIMONIAL STYLES */

.testimonial { /* To create a testimonial box label your div with this reference: <div class="testimonial"> */
	width: 10.9em;
	border: 1px solid #666;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: .3em .5em .4em .5em;
	margin-bottom: 5em;
	margin-top: 1em;
	background: #ffffff;
    background: -moz-linear-gradient(#ffffff, #bcbcbc, #ffffff);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ffffff),colour-stop(2,#bcbcbc),color-stop(0, #ffffff));
    background: -webkit-linear-gradient(#ffffff, #bcbcbc, #ffffff);
    background: -o-linear-gradient(#ffffff, #bcbcbc, #ffffff);	
    background: -ms-linear-gradient(#ffffff, #bcbcbc, #ffffff);	
    background: linear-gradient(#ffffff, #bcbcbc, #ffffff);	
}
.testimonial p { /* PARAGRAPH STYLE in Testimonial box */
	color: #000;
	font-style: italic;
	text-align: center;
	font-size: .8rem;
}
.testimonial h1 {
	font-size: 1.1rem;
	color: #C0151c;
	margin-top: .2em;
	font-weight: 600;
	text-shadow: 0 0px 0 #FFF;
	text-align: center;
}
.charity { /* To display charity logos in sidebar */
	width: 11.3em;
	border: 1px solid #666;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 1em .3em 1em .3em;
	margin-bottom: 5em;
	margin-top: 1em;
	background: #ffffff;
}

/* ALTERNATIVE COLUMN LAYOUT */

#leftcol2 { /* Styles for left-column when the background is WHITE */
	float: left;
	padding-left: 1.5em;
	margin-right: 1.25em;
	padding-top: 6em;
	padding-right: 1.25em;
	z-index: 0;
	position: relative;
	width: 11.9em;
	background-color: #FFF;
	bottom: 100%;
	top: -.2em;
}
#leftcol2 img {
	margin-bottom: 3em;
}
#logosleft {
	float: left;
	padding-left: 1.5em;
	margin-right: 1.25em;
	padding-top: 2.2em;
	padding-right: 1.25em;
	z-index: 0;
	position: relative;
	width: 11.9em;
	background-color: #FFF;
	bottom: 100%;
	top: -.2em;
}
#logosleft img {
	margin-bottom: 3em;
}

/* FOOTER STYLES */

footer {
	background-image: url("ABfooter3.jpg");
	background-repeat: no-repeat;
	background-color: #AFD0E1;
	color: #FFF;
	z-index: 3;
	position: relative;
	font-size: 1em;
	padding-top: 1em;
	padding-left: 17%;
	line-height:1em;
}
footer h1 {
	font-size: 1rem;
	font-weight: 100;
	color: #16145F;
	padding: .3em 0 .2em 0;
}
footer p {
	font-size: .7rem;
	padding: .5em 0 .5em 0;
	color: #5b8AA8;
}
.foot-col {
	float: left;
	width: 25%;
	padding: 0 1em 1em 1em;
}
footer nav #menu2 {
	font-size: .7rem;
	margin-left: 6%;
	padding-top: 15px;
}
footer a:link {
	color: #16145F;	
	text-decoration: none;
}
footer a:visited {
	color: #5b8AA8;
	text-decoration: none;
}
footer a:hover {
	color: #C0151c;
	text-decoration: none;
}
footer a:active {
	color: #5b8AA8;
	text-decoration: none;
}
#menu2 {
	padding: 0;
	list-style: none;
	z-index: 2;
	position: relative;
	left: -3%;
	float:left;
	width:580px;
}
#menu2 li {
	font-size: .8rem;
	padding: .3% 1.4% .5% 1.4%;
	float: left;
	position: relative;
	border: 1px solid transparent; /* invisible border so items don't jump on hover */
	line-height:2em;
}
#menu2 li:hover {
	color: #16145F;
	border: 1px solid #16145F;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #16145F;
    background: -moz-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #AFD0E1),color-stop(1, #5b8AA8),colour-stop(3,#16145F));
    background: -webkit-linear-gradient(#AFD0E1, #5b8AA8, #16145F);
    background: -o-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: -ms-linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
    background: linear-gradient(#AFD0E1, #5b8AA8, #16145F);	
}
#menu2 a {
	height: 38%;
	font-family: Arial, sans-serif;	
	color: #FFF;
	text-decoration: none;
	font-weight: 100;
	text-shadow: 0 1px 0 #000;
}
/* main menu buttons change colour on hover */
#menu2 li:hover > a {
	color: #C0151c;
}
/* show sub menu on hover */
#menu2 li:hover > ul {
	display: block;
}
/* submenu (ULs inside the #menu UL) */
#menu2 ul {
	width: 16em;
	list-style: none;
	display: none; /* hide when not hovered */
	position: absolute;
	left: 0;
	z-index: 99;
	background: #16145F;
    background: -moz-linear-gradient(#16145F, #5b8AA8, #AFD0E1);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #16145F),color-stop(1, #5b8AA8),colour-stop(2,#AFD0E1));
    background: -webkit-linear-gradient(#16145F, #5b8AA8, #AFD0E1);
    background: -o-linear-gradient(#16145F, #5b8AA8, #AFD0E1);	
    background: -ms-linear-gradient(#16145F, #5b8AA8, #AFD0E1);
    background: linear-gradient(#16145F, #5b8AA8, #AFD0E1);
    top: -15.6em;
    padding-top: .8em;
}
/* submenu items */
#menu2 ul li {
	width: 100%;
	position: relative;
	left: -1.5em;
	border-top: 1px solid #FFF;
	padding: .5em 0 .5em 0;
	line-height:1.35em;
}
#menu2 ul li:hover {
	color: #AFD0E1;
	border: none;
	background: transparent;
	border-top: 1px solid #FFF;
	-moz-border-radius: 0;
	border-radius: 0;
	padding: .6em 0 .5em .1em;
}
.badgesLogosWrap { background:#fff; display:inline-block; width:100%; margin-bottom:-5px;}
.badgesLogosWrap a { display:inline-block; float:left; margin:5px 35px 5px 0;}
.badgesLogosWrap a:last-child { margin-right:0;}

.footLogo { float:left; margin:10px 0 5px 0;}

#mobile-nav {display:block; font-size:0.75em; background:url(images/menuIco.png) no-repeat 20px 8px #880c0c;
				color:#fff; padding:29px 0 3px 15px; display:none; position: fixed; width:100%; z-index:50000; border-bottom:4px solid #C0151c;}

@media only screen and ( max-width: 1000px ) {

.topWrap { width:100%;}	
#logo { margin:20px 25px 44px 20px;}
#menu { padding:0 15px 2em 15px;}
.badgesLogosWrap .pageWrap { width: 90%;}
	}


@media only screen and ( max-width: 850px ) {
#logo { margin:50px 0 0 0; float:none;}
#contact-box, #box-warehouse2, #box-Lynn, #box-Kieron, #box-drone, #box-man, #supplychain, #box-projects, #voicepicking, #continuityplanning, #trucks, #box-logos, #box-warehouse1 { 
	margin:0; padding:0; background-image: none; width:auto; position:static; display:inline-block;} 
.contact-box { left:0; margin:-15px 0 0 15px; text-align:left;}
.contact-box .tel { margin-right:15px}
.contact-box, a.esub:link{ color:#5b8AA8;}
.contact-box a.esub:link{ font-size:1em;}
.contact-box br {display: none;}
.contactimg { position: fixed; width:85px; top:10px; z-index:99999; right:0;}
#leftcol, #leftcol2, #logosleft { display:none;}
#mainbody { width: 100%; padding-left:15px; padding-right:15px;}
footer { background-image:none; padding-left:15px;}
footer nav #menu2 { display:none;}


#mobile-nav { display:block;}
#menubar { display:none; position:absolute; background-image: none; padding: 60px 0 0 0; background:#880c0c; opacity:0.9; width:100%;}
#menu { padding:10px 5px;}
#menu li { float:none; border:none; border:none;}
#menu li:hover { background: none; border: none;}
#menu ul { display:block; position:static; background: none; margin-left:15px;}
#menu ul li { border: none; padding:0;}
#menu ul li:hover { border: none; padding:0;}

	}

@media only screen and ( max-width: 550px ) {
.contact-box .tel { margin-right:0;}
.contact-box { margin:-20px 0 0 15px; }
.contact-box b:before { content: '\a'; white-space: pre;}
footer .foot-col { float:none;  width: 100%; padding-left:5px;}
#mainbody { text-align:left;}
	}

@media only screen and ( max-width: 350px ) {	
.bbcover { float:none;}
	}
@media only screen and ( max-width: 350px ) {	
.csthumb { float:none;}
	}