/* General Layout */
* { box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing:border-box;}

html, body, div, p, a, em, strong, img, form,label, span, h1, h2, h3, h4, h5 { margin:0; padding:0;}
h1, h2, h3, h4, h5 { margin:10px 0px 0px 0px; padding:0;}

html { margin:0px; padding:0px;}
body { width:100%; height:100%; overflow:auto;  text-align:center; margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif; font-size:.8em; line-height:1.4em; color:#000000;}
p { padding:0px; margin:0px; } 
#container { position:relative; width:941px; margin:auto; text-align:left; padding:123px 25px 0px 27px; }

#header { position:absolute; top:0px; left:0px; width:941px; height:210px; z-index:900000; }

#content { position:relative; width:100%; width:626px; float:right; clear:none; z-index:900100; }

#sideBar { position:relative; float:left; clear:none; width:251px; z-index:900100;	}

#footer { position:absolute; bottom:0px; left:0px; width:941px; height:89px; z-index:900000; overflow:hidden; }


div.cleared { clear:both; float:none; width:100%; height:150px; overflow:hidden; }

/* body detail */
body { background:url(/images/tail-top.gif); background-repeat:repeat-x; background-color:#5fc1df; }

/* container detail */
#container { background:url(/images/new-layout/metartec-main-bg.png); background-repeat:repeat-y; }

/* header detail */
#header { background-image:url(/images/new-layout/metartec-header-bg.png); background-repeat:no-repeat;}
#header a.logo { float:left; clear:none;  margin:39px 0px 0px 48px; border:none;}
#header a.logo img { border:none;}
#header ul.siteNav { margin:77px 25px 0px 0px; }
#header ul.siteNav li { font-size:1em;}

#headerFix { position:absolute; top:0px; left:0px; width:941px; height:210px; overflow:hidden; background-image:url(/images/tail-top.gif);  }


/* footer detail */
#footer  { background-image:url(/images/new-layout/metartec-footer-bg.png) ; padding:0px 25px 0px 27px }
#footer p.copy { float:left; width:300px; clear:none; }
#footer p.links { float:right; width:500px; clear:none; text-align:right;}
#footer p { color:#000; padding:19px 0 0 4px;}
#footer p a { color:#08a0b5; text-decoration:none;}
#footer p a:hover { text-decoration:underline;}

#footerFix { position:absolute; bottom:0px; left:0px; width:941px; height:89px; overflow:hidden;background-color:#5fc1df;  }


div.meet-the-team .member { position:relative; }
div.meet-the-team .member p { width:300px; margin:5px 0px 10px 10px; float:left; clear:none; text-align:justify; }
div.meet-the-team .member h2 { width:100%; margin:15px 0px 10px 10px; float:left; clear:both;}
div.meet-the-team .member img { float:right; }


/* SideBar Detail */
#sideBar h3 {  background-image:url(/images/new-layout/metartec-menu-top.png); width:251px; height:43px; margin:0px; padding:13px 0px 0px 13px; font-size:1.3em; letter-spacing:-.05em; }
#sideBar ul {  background-image:url(/images/new-layout/metartec-menu-bg.png);  width:251px; margin:0px 0px 0px 0px; padding:15px 0px 0px 15px; font-size:.9em;}
#sideBar ul li { margin:8px 0px 0px 0px;  width:185px; padding:0px 0px 0px 18px; height:23px; }
#sideBar div.endMenu { background-image:url(/images/new-layout/metartec-menu-bottom.png); width:251px; height:7px; margin:0px 0px 10px 0px; background-repeat:no-repeat; overflow:hidden;}

#sideBar div.menuFooter { position:relative; background-image:url(/images/new-layout/metartec-submenu-bg.png); width:251px; padding:3px 10px 3px 10px; }
#sideBar div.menuFooter div.topMenuFooter { position:absolute; top:0px; left:0px; background-image:url(/images/new-layout/metartec-submenu-top.png); height:98px;width:251px; z-index:80100;}
#sideBar div.menuFooter div.endMenuFooter { position:absolute; bottom:0px; left:0px; background-image:url(/images/new-layout/metartec-submenu-bottom.png); height:9px;width:251px;}
#sideBar div.menuFooter p { z-index:80500; position:relative;}


/* Content Style */
#btnEdit { clear:both; display:block;  }

div.siteMap ul.list { margin:20px 0px 10px 50px; }
/* Text Changes */
h1, h2, h3, h4, h5 { font-family:Myriad Pro, Arial; }

h1 { font-size:1.5em; }

h2 { font-size:1.5em; }

h3 { font-size:1.5em; margin:20px 0px 0px 0px}

h4 { font-size:1.5em; }

a {color:#009ccc;}
a:hover{text-decoration:none;}


div.topBranding { border:solid 1px #cfe5e9; padding:1px;}
/*
div.wideContent { width:626px; background-image:url(/images/new-layout/metartec-widebox-bg.png); position:relative; min-height:130px;}	
div.wideContent * { z-index:800500; }
div.wideContent div.top { background-image:url(/images/new-layout/metartec-widebox-top.png); height:112px; position:absolute; top:0px; left:0px; width:100%; z-index:800100; }
div.wideContent div.bottom { background-image:url(/images/new-layout/metartec-widebox-bottom.png); height:10px; position:absolute; bottom:0px; left:0px;width:100%; z-index:800200;}
*/

div.wideContent { width:626px; background-image:url(/images/new-layout/grad-box-bg.png); background-repeat:repeat-x; position:relative; min-height:80px; padding:10px; margin:10px 0px 0px 0px; float:left;}	
div.mainContent p { margin:20px 0px 10px 0px; text-align:justify;}
div.mainContent table * p { margin:0px 0px 0px 0px !important; text-align:auto;}
div.onlyContent { margin-top:0px; }

div.rightContent, div.rightContent p { text-align:right; }
div.centreContent { text-align:center; padding-top:20px; }
img.news-image-left { float:left; margin:20px; border:solid 1px #5fc1df;  }

/* borders */
div.wideContent div.top				{ background:url(/images/new-layout/grad-box-top.png);}	
div.wideContent div.right			{ background:url(/images/new-layout/grad-box-right.png);}
div.wideContent div.bottom			{ background:url(/images/new-layout/grad-box-bottom.png);}
div.wideContent div.left			{ background:url(/images/new-layout/grad-box-left.png);}

/* corners */
div.wideContent div.cornerTRight	{ width:4px;  height:4px; background:url(/images/new-layout/grad-box-corner-top-right.png);}
div.wideContent div.cornerBRight	{ width:4px;  height:4px; background:url(/images/new-layout/grad-box-corner-bottom-right.png);}
div.wideContent div.cornerBLeft		{ width:4px;  height:4px; background:url(/images/new-layout/grad-box-corner-bottom-left.png);}	
div.wideContent div.cornerTLeft		{ width:4px;  height:4px; background:url(/images/new-layout/grad-box-corner-top-left.png);}	


div.thinContent { width:308px; background-image:url(/images/new-layout/grad-box-bg.png); background-repeat:repeat-x; position:relative; min-height:120px; padding:10px; margin:10px 10px 0px 0px; float:left; clear:none;}	

div.subContentContacts{ min-height:300px;}
/* borders */
div.thinContent div.top				{ background:url(/images/new-layout/grad-box-top.png);}	
div.thinContent div.right			{ background:url(/images/new-layout/grad-box-right.png);}
div.thinContent div.bottom			{ background:url(/images/new-layout/grad-box-bottom.png);}
div.thinContent div.left			{ background:url(/images/new-layout/grad-box-left.png);}

/* corners */
div.thinContent div.cornerTRight	{ width:4px;  height:4px; background:url(/images/new-layout/grad-box-corner-top-right.png);}
div.thinContent div.cornerBRight	{ width:4px;  height:4px; background:url(/images/new-layout/grad-box-corner-bottom-right.png);}
div.thinContent div.cornerBLeft		{ width:4px;  height:4px; background:url(/images/new-layout/grad-box-corner-bottom-left.png);}	
div.thinContent div.cornerTLeft		{ width:4px;  height:4px; background:url(/images/new-layout/grad-box-corner-top-left.png);}	

div.col2 { margin-right:0px; }
div.contactFooters { height }


/* Common Rounding Style */
 div.top				{ position:absolute; top:0px;      left:0px;  width:0px;   height:0px; background-repeat:repeat-y; overflow:hidden; }	
 div.right				{ position:absolute; top:0px;     right:0px;  width:0px;   /*height:0px;*/	background-repeat:repeat-x;overflow:hidden;}	
 div.bottom				{ position:absolute; bottom:0px;   left:0px;  width:0px;   height:0px; background-repeat:repeat-y; overflow:hidden;}	
 div.left				{ position:absolute; top:0px;      left:0px;  width:0px;   height:0px;	background-repeat:repeat-x;overflow:hidden;}

 div.cornerTRight		{ position:absolute; top:0px;     right:0px;  width:0px;  height:0px; background-repeat:no-repeat;overflow:hidden;}	
 div.cornerBRight		{ position:absolute; bottom:0px;  right:0px;  width:0px;  height:0px; background-repeat:no-repeat;overflow:hidden;}	
 div.cornerBLeft		{ position:absolute; bottom:0px;   left:0px;  width:0px;  height:0px; background-repeat:no-repeat;overflow:hidden;}	
 div.cornerTLeft		{ position:absolute; top:0px;      left:0px;  width:0px;  height:0px; background-repeat:no-repeat;overflow:hidden;}

/* Old CSS */

 ul.siteNav, ul.list1,  ul.list2,  ul.list3,  ul.list { list-style:none; margin:0px; padding:0px;}

.siteNav li { float:right; font-size:1.08em; margin-left:16px; clear:none;}
.siteNav li a { display:block; line-height:1em; text-decoration:none; color:#333333;}
.siteNav li a em { display:block;}
.siteNav li a b { display:block; padding:5px 12px 6px 12px; font-style:normal; font-weight:normal;}
.siteNav li a:hover {  background:url(/images/nav-tail.gif) repeat-x top;}
.siteNav li a:hover em { background:url(/images/nav-left.gif) no-repeat left top;}
.siteNav li a:hover b { background:url(/images/nav-right.gif) no-repeat right top;}
.siteNav li a.act {  background:url(/images/nav-tail.gif) repeat-x top;}
.siteNav li a.act em { background:url(/images/nav-left.gif) no-repeat left top;}
.siteNav li a.act b { background:url(/images/nav-right.gif) no-repeat right top;}




.list, .list * { margin:0px; padding:0px; }
.list li { color:#000; background:url(/images/marker-1.gif) no-repeat left 1px; padding:0 0 8px 18px;}
.list li.last { padding-bottom:0;}
.list li.last span { border:0; padding-bottom:0; display:inline;}
.list li span { border-bottom:1px solid #ececec; padding:0px 0 6px 5px; display:block;}
.list li a { text-decoration:none; color:#000;}
.list li a:hover { color:#059fb4;}

.list1, .list1 * { margin:0px; padding:0px; }
.list1 { position:absolute; top:-26px; left:0;}
.list1 li { float:left; position:absolute; font-size:.92em;}
.list1 li.m1 { width:104px; z-index:4}
.list1 li.m2 { left:99px; width:110px; z-index:3}
.list1 li.m3 { left:204px; width:133px; z-index:2}
.list1 li.m4 { left:332px; width:80px; z-index:1}
.list1 li a { display:block; text-decoration:none; color:#599aa4; background:url(/images/link-right.gif) no-repeat right top;}
.list1 li a em { display:block; background:url(/images/link-left.gif) no-repeat left top; padding:0 11px 0 5px;}
.list1 li a b { display:block; text-align:center; padding:5px 0 6px 0; font-style:normal; font-weight:normal; background:url(/images/link-bgd.gif) repeat-x top;}
.list1 li a:hover { background:url(/images/link-right-act.gif) no-repeat right top; color:#000;} 
.list1 li a:hover b { background:url(/images/link-bgd-act.gif) repeat-x top;}
.list1 li a:hover em { background:url(/images/link-left-act.gif) no-repeat left top;}
.list1 li a.act { background:url(/images/link-right-act.gif) no-repeat right top; color:#000;} 
.list1 li a.act b { background:url(/images/link-bgd-act.gif) repeat-x top;}
.list1 li a.act em { background:url(/images/link-left-act.gif) no-repeat left top;}

.list2, .list2 * { margin:0px; padding:0px; }
.list2 { margin:-6px 0 0 15px;}
.list2 li { padding:6px 0 0 18px; background:url(/images/marker-2.gif) no-repeat left 12px; color:#059fb4;}
.list2 li a { color:#059fb4; text-decoration:none;}
.list2 li a:hover { text-decoration:underline;}

.list3, .list3 * { margin:0px; padding:0px; }
.list3 { margin:-6px 0 0 0;}
.list3 li { padding:6px 0 0 18px; background:url(/images/marker-2.gif) no-repeat left 12px; color:#059fb4;}
.list3 li p { color:#000; line-height:1.5em;}
.list3 li a { color:#059fb4; text-decoration:none;}
.list3 li a:hover { text-decoration:underline;}

	


/*==================txt, links, lines, titles====================*/
a {color:#009ccc;}
a:hover{text-decoration:none;}

.txt1 { font-size:1.08em;}

.link1 { display:block; float:right; background:url(/images/link1-bgd.gif) left top repeat-x; color:#589aa3; line-height:1em; font-family:Tahoma, Geneva, sans-serif; font-size:.92em; text-decoration:none;}
.link1 em { display:block; background:url(/images/link1-left.gif) no-repeat left top;}
.link1 b , .link1 strong { display:block; background:url(/images/link1-right.gif) no-repeat right top; padding:3px 5px 5px 5px; font-weight:normal; font-style:normal;}
.link1:hover { text-decoration:underline;}

.link2 { display:block; float:right; background:url(/images/link2-bgd.gif) left top repeat-x; color:#599aa4; line-height:1em; text-decoration:none;}
.link2 em { display:block; background:url(/images/link2-left.gif) no-repeat left top;}
.link2 b, .link2 strong { display:block; background:url(/images/link2-right.gif) no-repeat right top; padding:6px 20px 8px 12px; font-weight:normal; font-style:normal;}
.link2:hover { text-decoration:underline;}

.link3 { color:#08a0b5; text-decoration:none;}
.link3:hover { text-decoration:underline;}

.title { margin-bottom:20px;}


.form2 { height:32px; background:url(/images/input-bg1.gif) no-repeat left top; padding:0 5px 0 5px;}
label.lab-1 { color:#059fb4; display:block; float:left; width:65px; text-align:right; margin-right:10px; line-height:24px; }
.form2 input {width:185px; padding:4px 0 6px 3px; background:white; border:solid 1px #99cccc; float:left;}
textarea { width:338px; height:118px; overflow:auto; background:url(/images/textarea-bg.gif) no-repeat left top; border:0; padding:2px 0 0 3px; }


/* Niffy Corners They keep these in different files so I've added the @media to restrict their application */ 
@media screen{
.rtop,.rbottom{display:block}
.rtop *,.rbottom *{display:block;height: 1px;overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px;height: 2px}

.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
}

@media print {
	.rtop,.rbottom{display: none}
	
	/* Makign the print more presentable */
	#top-nav { display:none; }

}





/* ViewBasket */
table.ViewBasket { width:580px; font-size:1em; margin:30px 0px 30px 0px; border-collapse:collapse;}
table.ViewBasket thead {}
table.ViewBasket thead tr {}
table.ViewBasket thead tr th { padding-bottom:20px;}
table.ViewBasket thead tr th.desc { width:170px; text-align:left; }
table.ViewBasket thead tr th.unit { width:120px; text-align:center;}
table.ViewBasket thead tr th.qty  { width:130px; text-align:center;}
table.ViewBasket thead tr th.tot  { width:80px; text-align:center;}
table.ViewBasket thead tr th.del  { width:80px; text-align:center;}

table.ViewBasket tbody {}
table.ViewBasket tbody tr td {}
table.ViewBasket tbody tr td.desc { width:170px; text-align:left; }
table.ViewBasket tbody tr td.desc a { font-weight:bold}
table.ViewBasket tbody tr td.unit { width:120px; text-align:right; padding-right:20px;}
table.ViewBasket tbody tr td.qty  { width:130px; text-align:right;}
table.ViewBasket tbody tr td.tot  { width:80px; text-align:right; padding-right:10px;}
table.ViewBasket tbody tr td.del  { width:80px; text-align:center;}

table.ViewBasket tfoot { padding-top:20px}
table.ViewBasket tfoot tr td { height:35px;}
table.ViewBasket tfoot tr td.desc { text-align:left; }
table.ViewBasket tfoot tr td.tot  { width:80px; text-align:right; padding-right:10px; }
table.ViewBasket tfoot tr td.del  { width:80px; text-align:center;}


table.ViewBasket tfoot tr.dlv td { padding-top:30px; padding-bottom:20px;}

table.ViewBasket tfoot tr.stot td.desc { }
table.ViewBasket tfoot tr.stot td.tot  {border-top:solid 1px black;}
table.ViewBasket tfoot tr.stot td.del  { }

table.ViewBasket tfoot tr.vat td.desc { }
table.ViewBasket tfoot tr.vat td.tot  { }
table.ViewBasket tfoot tr.vat td.del  { }

table.ViewBasket tfoot tr.gtot td { padding-top:15px; padding-bottom:15px;}
table.ViewBasket tfoot tr.gtot td.desc { }
table.ViewBasket tfoot tr.gtot td.tot  { border-top:solid 1px black;border-bottom:solid 1px black;}
table.ViewBasket tfoot tr.gtot td.del  { }



/* Checkout Addresses */
h1.CheckoutHeading { font-size:1.1em; text-transform:uppercase; margin:30px 0px 0px 0px;}
div.AdressForm { width:580px; margin:20px 0px 0px 0px;}
div.AdressForm div.AddressLegends { width:200px; float:left; clear:none; margin:0px 0px 0px 0px}
div.AdressForm { height:373px;}
div.AdressForm div.AddressForms { width:350px; float:left; clear:none; }


div.AdressForm div.AddressLegends p { height:28px; width:100%; line-height:20px; padding:1px 5px 2px 0px; margin:2px 0px 5px 0px; border:solid 0px black; text-align:right; }
div.AdressForm div.AddressForms p	{ height:28px; width:100%; line-height:20px; padding:1px 20px 2px 5px; margin:2px 0px 5px 0px; border:solid 0px black;}
div.AdressForm div.AddressForms p input {width:250px;}
div.AdressForm div p.AddressLine { margin:0px; height:26px; padding-top:0px; padding-bottom:0px;}
div.AdressForm div p.PostCode input { width:130px; float:left;}
div.AdressForm div p.PostCode span { float:left; clear:none; } 
div.AdressForm div p.PostCode a#lnkGetAddress {  float:left; clear:none; text-decoration:none; } 
div.AdressForm div p.PostCode a#lnkGetAddress:hover { text-decoration:underline; } 
div.AdressForm div p.CBBilling input { width:30px; float:left;}
div.AdressForm div p.PostCode a { width:100px; float:left; margin:0px 0px 0px 20px;}
div.AdressForm div p.TopRow{height:10px !important; overflow:hidden;}

div#CheckoutNotes { width:580px; height:146px; margin:20px 0px 30px 0px; padding:0px;}
div#CheckoutNotes p textarea { width:520px; margin:0px; left:0px; margin:0px 0px 0px 50px;  height:150px; float:left; border:inset 2px buttonface;}
p.mandatory { margin:20px 0px 20px 0px; text-align:center;}

p.checkoutButtons{ width:100%; margin:0px 0px 50px 0px; padding:0px; position:relative;  height:20px; font-size:1em;}
p.checkoutButtons a.checkoutButtonBack		{ float:left;   text-decoration:none; font-weight:bold; font-size:1em;}
p.checkoutButtons a.checkoutButtonForward	{ float:right;  text-decoration:none; font-weight:bold; font-size:1em;}
p.checkoutButtons a:hover	{ text-decoration:underline; }

/* order summary */

h2.OrderSummarySectionTitle { width:150px; float:left; clear:none; text-align:left; margin:20px 10px 0px 0px; font-size:1.2em;} 
div#OrderSummaryAddress { width:340px; float:left; margin-top:35px; font-size:1.1em;} 
div#OrderSummaryItems { width:340px;   float:left; margin-top:35px;font-size:1.1em;} 
div#OrderSummaryTotals { width:340px; float:left; margin-left:160px; margin-top:10px; font-size:1.1em;} 
div#OrderSummaryNotes { width:340px;  float:left; margin-top:35px; font-size:1.1em;} 

div#OrderSummaryAddress address{ margin:20px 20px 20px 50px;  font-style:normal;}
div#OrderSummaryNotes p{ margin:5px 20px 5px 20px; }
div#OrderSummaryAddress h2 { font-size:1.2em; font-weight:normal;}
div#OrderSummaryItems h2 { font-size:1.2em; font-weight:normal;}
div#OrderSummaryNotes h2 { font-size:1.2em; font-weight:normal;}
div#OrderSummaryTotals p.SubTotal { margin-top:10px; height:30px}
div#OrderSummaryTotals p.SubTotal span.ItemDesc { padding-top:10px; height:30px;  }
div#OrderSummaryTotals p.SubTotal span.UnitCost { padding-top:10px; height:30px; border-top:solid 1px #002a54; }
div#OrderSummaryTotals p.GrandTotal { margin-top:10px; height:47px;}
div#OrderSummaryTotals p.GrandTotal span.ItemDesc { height:40px; padding-top:10px;  padding-bottom:10px; }
div#OrderSummaryTotals p.GrandTotal span.UnitCost { height:40px; padding-top:10px;  padding-bottom:10px; border-top:solid 1px #002a54; border-bottom:solid 1px #002a54; }
div#PaymentResult { width:500px; margin:10px 0p 0px 200px ;	 }
div#PaymentResult p { margin:5px; }

.BasketItem { position:relative; height:26px; padding:0px; margin:0px; }

p.BasketItem span.ItemDesc2 { position:absolute; top:0px; left:0px; display:block; width:330px; height:44px; overflow:hidden; white-space:normal; font-size:.9em; padding-right:10px;}
p.BasketItem span.UnitCost { position:absolute; top:0px; left:300px; display:block; width:120px; height:22px; overflow:hidden; white-space:nowrap; text-align:right; padding-right:10px;}


.BasketItemTotal { position:relative; height:27px; padding:0px; margin:0px;}

p.BasketItemTotal span.ItemDesc  { position:absolute; top:0px; left:80px; display:block; width:170px; height:22px; overflow:hidden; white-space:nowrap;text-align:right; padding-right:10px;}
p.BasketItemTotal span.UnitCost { position:absolute; top:0px; left:300px; display:block; width:120px; height:22px; overflow:hidden; white-space:nowrap;text-align:right; padding-right:10px;}

/* Special CCL Menu */
#CCLMenu { position:absolute; top:0px; right:5px; width:150px; min-height:183px; margin:0px; border:solid 1px black; background-color:#492d00; text-align:right;  padding:5px 10px 5px 5px; opacity:0.5; filter:alpha(opacity=50); }
#CCLMenu:hover { opacity:1; filter:alpha(opacity=100); }
#CCLMenu h2 { font-size:14px; color:White; margin:0px; padding:0px; } 
#CCLMenu a { margin:0px; padding:0px; color:#4075b7; font-size:12px;  text-decoration:none; display:-moz-inline-box; display:inline-block; border-bottom:dotted 1px #4075b7; }
#CCLMenu a:hover { color:white; border-bottom:solid 1px white;  }

/* Login */
div#loginPane { width:100%; margin:0px; font-size:12px; padding-top:0px;} 
div#loginPane p { margin:0px; padding:5px; } 
div#loginPane p label { width:70px; text-align:right; padding-right:5px; } 
div#loginPane p input { width:122px; }
div#loginPane p input.button { width:132px; margin-left:120px;}