/* ========================================================
CORE STYLES: Don't bloat this code with too-specific, non-global garbage. Use specific stylesheets for other styles!

Author:			Adam Clark
Site:				http://www.equanet.co.uk
Colours (Primary):		
Colours (Secondary):		#FF4746 (Red), #E5403F (Red Dark), #E8DA5E (Yellow), #D0C454 (Yellow Dark [Gold]), #92B55F (Green), #83A355 (Green Dark)

Header Green:		#C7D744

#0F519F (Mid Blue)
#012E69 (Dark Blue)
#E7EDF5 (Light Blue)
#E0E2F0 (Light Grey)
#99C (Purple)
#0F519F (Green)
#999 (Mid Grey)

CSS Reset (Based on Eric Meyers)
======================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; }

/* Font size at 12px (equiv). Rhythm/line-height at 18px (equiv). */
body { font: normal 75%/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif; color: #404040; background: #FFF; text-align: left; }
html>body { font-size: 12px; }

/* ========================================================
Links
======================================================== */
a:link, a:visited { color: #06F; }
a:hover { color: #039; text-decoration: none; }
a:active, a:focus { color: #003; }

a span.newwindow { background: url(../ui/icons/newwindow.gif) right center no-repeat; padding-right: 20px; cursor: pointer;}

/* ========================================================
Typography (Main)
======================================================== */
h1, h2, h3, h4, h5, h6, legend, caption { font-weight: bold; color: #000; }
h1 { font-size: 2.5em; /* 30px */ margin: 0 0 0.6em /* 18px */; line-height: 1.2 /* 36px */; letter-spacing: -0.05em; }
h2 { font-size: 2em; /* 24px */ margin: 0 0 0.75em /* 18px */; line-height: 1; /* 24px */ /*letter-spacing: -0.025em;*/ }
h3 { font-size: 1.5em; /* 18px */ margin: 0 0 1em /* 18px */; line-height: 1 /* 18px */; }
h4, blockquote, legend, p.larger, p.preamble { font-size: 1.3333333333333333333333333333333em /* 16px */; margin: 0 0 1.125em /* 18px */; line-height: 1.125; /* 18px */ }
h5, h6 { /*font-weight: bold;*/ }
h5, span.preamble { font-size: 1.1666666666666666666666666666667em /* 14px */; margin: 0 0 1.2857142857142857142857142857143em /* 18px */; line-height: 1.2857142857142857142857142857143; /* 18px */ }
p.larger, span.preamble { font-weight: bold; }
p.preamble { font-weight: normal; color: #000; line-height: 1.3333333; }
h6 { font-weight: bold; }
h6, p { font-size: 1em; margin: 0 0 1.5em 0; line-height: 1.5; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }
h1.basic, h2.basic, h3.basic, h4.basic, h5.basic, h6.basic, p.basic, ol.basic, ul.basic, dl.basic { margin: 0; }

p.small, small { font-size: 0.83333333333333333333333333333333em; /* 10px */ line-height: 1.8 /* 18px */; }
p.small { margin: 0 0 1.75em; }

/* ========================================================
Lists
======================================================== */
ul, ol { margin: 0 0 1.5em 1.5em; padding: 0; }
li { position: relative; /* For IE list white-space bug */ padding-left: 0.25em; }
li ul, 
li ol { margin-bottom: 0; }
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }

dl { margin: 0 0 1.5em; }
	dt {  }
	dd { margin-left: 0; }

/* ========================================================
Tables
======================================================== */
table { border-collapse: collapse; margin-bottom: 1.5em; border: 1px solid #CCC; width: 100%; background: #FFF; background: rgba(255,255,255,0.5); text-align: left; }
caption { font-weight: normal; margin-bottom: 0.75em; text-align: left; color: #999; letter-spacing: 1px; }
thead { color: #000; }
	thead th, thead td { background: #EEE; /* Because IE doesn't recognise a background applied directly to a thead */ }
tfoot { color: #999; }
tr { background: transparent; }
th, td { vertical-align: top; border: 1px solid #CCC; padding: 0.5em; background: transparent; }
td { font-weight: normal; }
th.shared,
td.shared { text-align: center; }
th[rowspan],
td[rowspan] { vertical-align: middle; }

/* ========================================================
Misc Typography and Stylings
======================================================== */
hr { clear: both; float: none; }

q, cite, dt { color: #303030; }
code, th, dt, strong { font-weight: bold; }

img, a img { border: 0; margin: 0; color: #000; /* needs a colour just incase the image is missing. The alt attribute can still be readable */ }
strong, ins { font-weight: bold; }
del { text-decoration: line-through; }
acronym, abbr { letter-spacing: -.05em; cursor: help; }
em, cite { font-style: italic; }
ins { text-decoration: none; }

sup, sub { font-size: 0.71428571428571428571428571428571em /* 10px */; vertical-align: baseline; position: relative; font-weight: normal; }
sup { top: -.65em; }
sup.math { top: -.8em }
sub { top: .2em; }


/* ========================================================
Quotes, Blockquotes and Pullquotes
======================================================== */
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
q { font-style: italic; }

blockquote.large { margin: 2em 0; }
blockquote.large p { font: italic normal normal 1.75em/1.25 Georgia, Times, serif; text-indent: -0.35em; color: #06F; margin: 0 0 1.25em 0; }
blockquote.large p:last-of-type { margin: 0; }
blockquote.large cite { color: #666; display: block; font-style: normal; font-size: 0.65em; text-indent: 0; line-height: 2; }

.pullquote { float: right; width: 300px; _display: inline; /* double-margin fix for <= IE7 /* *display: inline;  /* double-margin fix for <= IE6 */ margin: 0 0 1em 40px; background: url(../ui/pullquote/top.png) no-repeat left top; }
.pullquote h4 { padding: 1em 20px 1.1em; margin: 3px 0 0; color: #C60; background: #E6E6E6 url(../ui/pullquote/mark.png) no-repeat right bottom; border-left: 1px solid #CCC; border-right: 1px solid #CCC; font-size: 1.75em; line-height: 1.2; font-weight: normal; }
.pullquote p { color: #999; background: url(../ui/pullquote/bottom.png) no-repeat left top; margin: 0; padding-top: 1.2em; font-style: italic; }

.pullquote.custom { width: 220px; margin: 0 0 1em 0; padding:0; background: url(../ui/pullquote-bg-top.gif) 0 0 no-repeat;}
.pullquote.custom h4 { /*font-size: 1.4em; font-family: Georgia, Times, Times New Roman, sans-serif; color: #69C;*/ /* or whatever custom colour you want */ }
.pullquote.custom p { color: #444; background: url(../ui/pullquote-bg-bottom.gif) 0 0 no-repeat;  }

/* ========================================================
Global Classes, Display Treatments and Alignments
======================================================== */
.block { display: block; }
.inline { display: inline; }
.hide { position: absolute; top: -999em; left: -999em; }
.noshow,
.no-show { display: none; }

.amp { font-weight: normal; font-family: Baskerville, Palatino, "Book Antiqua", serif; font-style: italic; /* fancy ampersand */ }
.drop-cap { color: #666; display: inline; float: left; font-size: 5.2em; line-height: 0.81em; text-transform: uppercase; font-weight: 400; /*padding-left: 4px;*/ margin-top: 0.05em; margin-right: 0.14em; margin-bottom: 0pt; margin-left: -3px; }
.small-caps { font-variant: small-caps; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.text-centre { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }

.break-word { word-wrap: break-word; }
.no-break { white-space: nowrap; }

img.left, img.right {  }
img.left { margin: 0 1em 1em 0; }
img.right { margin: 0 0 1em 1em; }

.price { color: #000; }
.quiet { color: #999; }
.group, .row { padding: 0; margin-bottom: 20px; }
.row { clear: both; float: none; }
.pad { padding: 10px; }
.mpn { color: #666; font-size: .75em; font-weight: normal; }

ul.features { list-style: none; padding: 0; margin: 0 0 1.5em 0; }
ul.features li { padding: 0 0 0 18px; margin: 0 0 0.5em; background: url("../ui/bullets.png") no-repeat -5px -1196px; }

dl.agenda { display: block; margin: 1em 0 1.5em; padding: 0; }
.agenda dt, .agenda dd { padding: 0.25em 0; margin: 0; }
.agenda dt { clear: left; float: left; width: 5em; font-weight: bold; }
.agenda dd { margin: 0 0 0 6em; }

.account-on-stop { color: #C00; background: url(../ui/account-on-stop.png) no-repeat left center; padding-left: 24px; }

/* ========================================================
1. Structure
======================================================== */
#site { background-color: #FFF; }

/* ========================================================
1.1. Site Head 
======================================================== */
#head { position: relative; z-index: 2; /* Solves IE6/7 layering problems with dropdown menus */ }
	#head ul { margin: 0; padding: 0; }
		#head li a { text-decoration: none; }
		#head li a:hover,
		#head li a:focus { text-decoration: underline; }

	/* ========================================================
	1.1.1 Masthead
	======================================================== */
	#masthead { background: #FFF; position: relative; z-index: 150; }
		#masthead ul { list-style: none; margin: 0; padding: 0; display: inline; float: left; }
			#masthead ul ul { display: none; }
		#masthead li { display: inline; }
		#masthead p { float: left; margin: 0; color: #999; }
			#masthead p strong { color: #666; }
/*
			#masthead p#welcome { float: right; text-align: right; }
*/

		#masthead a { text-decoration: none; }
		#masthead li, #masthead a, #masthead p { line-height: 3; }
		#masthead a:hover, #masthead a:focus { text-decoration: underline; }

			ul#welcome { float: right; }
				ul#welcome li a,
				ul#welcome li strong { display: block; padding: 0 0.5em; }
				ul#welcome li { position: relative; display: block; float: left; }
				ul#welcome ul { position: absolute; float: none; background: #FFF; display: none; border: 1px solid #CCC; }
				ul#welcome ul li { float: none; }
				ul#welcome li:hover ul { width: 14em; display: block; z-index: 200; top: auto; right: 0; }

				ul#welcome li:hover a { color: #039; text-decoration: underline; }
				ul#welcome li:hover li a { text-decoration: none; color: #06F; }
				ul#welcome li:hover li a:hover { text-decoration: underline; color: #039; }

				ul#welcome ul li,
				ul#welcome ul a { line-height: 2.25; }


		/* ========================================================
		1.1.2. Global Navigation
		======================================================== */
		#global-navigation { width: 100%; background: #000; position: relative; z-index: 100; padding: 1em 0; }
			#global-navigation ul { margin: 0; list-style: none; background: #000; padding-top: 7px; }
			#global-navigation a { padding: 0.5em; text-decoration: none; display: block; line-height: 1; }
				#global-navigation #nav-home a { padding: 0.25em 0 0; top: -7px; position: relative; }
		#global-navigation a, 
		#global-navigation a:visited  { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; }
		#global-navigation li { float: left; background: #000; /*text-align: center;*/ position: relative; padding: 0; margin: 0 0.5em; }
		#global-navigation li li { margin: 0; float: none; background: #000; /*text-align: left;*/ font-weight: normal; color: #FFF; position: static; }
		#global-navigation li li li { background: #000; width: 128px; margin-left: 0.7em; color: #FFF; }
		#global-navigation li:hover, 
		#global-navigation a:focus, 
		#global-navigation a:hover, 
		#global-navigation a:active { color: #FFF; background: #000; outline: 0; }
 
		#nav-basket .empty { color: #666; }

		#nav-services, #nav-solutions, #nav-store { font-size: 1.35em; font-weight: normal; }
		body#store #nav-services a,
		body#store #nav-solutions a { color: #999; }

		/* Second Level (Drop Down) */
		#global-navigation ul ul { position: absolute; top: -999em; left: -999em; visibility: hidden; font-size: 0.75em; padding-left: 0.25em; }
		#global-navigation ul ul li { width: auto; }
		#global-navigation ul li:hover ul { top: auto; left: 0; display: block; visibility: visible; }

		/* Third Level (Drop Down) */
		#global-navigation ul ul li ul { font-size: 1em; position: absolute; top: -999em; visibility: hidden; }
		#global-navigation ul ul li:hover ul { top: 0; left: 14em; }

		#global-navigation li ul { position: absolute; top: -999em; left: -999em; visibility: hidden; width: 14em; }
		#global-navigation li:hover li ul { top: -999em; }
		#global-navigation li li:hover ul { left: 14em; /* match ul width */ top: 0; }
		#global-navigation li li:hover li ul { top: -999em; }
		#global-navigation li li li:hover ul { left: 14em; /* match ul width */ top: 0; }

		#global-navigation li:hover a { text-decoration: underline; }
		#global-navigation li:hover li a { text-decoration: none; }
		#global-navigation li:hover li a:hover { text-decoration: underline; }

		/* Site Search */
		#global-navigation li#site-search { width: 300px; height: 30px; }
			#global-navigation form { width: 300px; height: 30px; position: relative; background: url("../ui/bg-site-search.png") no-repeat left top }
				#global-navigation label { display: none; }
				#global-navigation input { vertical-align: middle; outline: none; border: none; line-height: 30px; height: 30px; }
				#global-navigation input#search-keywords { text-indent: 10px; width: 285px; color: #999; }
					#global-navigation input#search-keywords:hover { color: #666; }
					#global-navigation input#search-keywords:focus { color: #000; }
				#global-navigation input#search-submit { background: url(../ui/site-search-submit.png) no-repeat center center; width: 16px; position: absolute; right: 10px; opacity: 0.6; }
				#global-navigation input#search-submit:hover { opacity: 1; }


		/* ========================================================
		1.1.3. Contextual Navigation
		======================================================== */
		#context-nav { background: #E0E0E0 url(../ui/bg-stripe.png) no-repeat 0 50%; overflow: auto; position: relative; z-index: 5; }
			#context-nav ul { width: 100%; }
			#context-nav ul, #context-nav li { margin: 0; padding: 0; list-style: none; }
			#context-nav li { float: left; display: inline; }
			#context-nav a { background: #E0E0E0 url(../ui/bg-stripe.png) no-repeat 0 50%; display: block; color: #000; text-decoration: none; font-size: 13px; padding: 5px 8px; font-weight: bold; /*height: 4em;*/ vertical-align: middle; line-height: 1.6; }
			#context-nav a:hover,
			#context-nav a:focus { background-position: -2000px 50%; }
	

		/* ========================================================
		1.1.4. Breadcrumbs Trail
		======================================================== */
		.breadcrumbs { margin: 0 0 1.5em; background: transparent url(../ui/breadcrumbs.png) no-repeat left bottom; }
			.breadcrumbs.lower { margin: 0; background-position: left top; }
			.breadcrumbs ul { list-style: none; margin: 0; padding: 0 6px !important; overflow: hidden; }
			.breadcrumbs li { margin: 0; padding: 0 0 0 30px; float: left; display: block; background: url(../ui/breadcrumbs.png) no-repeat -940px 50%; color: #666; line-height: 3; font-size: 0.9em; }
				.breadcrumbs li.home { background: none; padding: 0; margin: 0 0 0 8px; }
				.breadcrumbs li.home a{ background: transparent url(../ui/home.png) no-repeat center center; text-indent: -999em; width: 20px; }
			.breadcrumbs a { text-decoration: none; display: block; line-height: 3; }
			.breadcrumbs a:hover,
			.breadcrumbs a:focus { text-decoration: underline; color: #000; }
			.breadcrumbs strong { font-weight: normal; color: #666; }

		.fb-send { text-align: right; float: right; margin: 0.5em 10px 0 0; max-width: 25%; width: 150px; }

		.social { float: right; width: 80px; /* (16px width + 4px margin) x 4 icons */ margin: 0.6em 10px 0 0; }
			.social a { display: block; width: 16px; height: 16px; margin: 0 0 0 4px; float: left; background: url(../ui/social.png) no-repeat 0 0; text-indent: -999em; }

			.social .twitter { background-position: 0 0; }
				.social .twitter:hover,
				.social .twitter:focus { background-position: 0 -16px; }
			.social .linkedin { background-position: -16px 0; }
				.social .linkedin:hover,
				.social .linkedin:focus { background-position: -16px -16px; }
			.social .facebook { background-position: -32px 0; }
				.social .facebook:hover,
				.social .facebook:focus { background-position: -32px -16px; }
			.social .blogger { background-position: -48px 0; }
				.social .blogger:hover,
				.social .blogger:focus { background-position: -48px -16px; }

/* ========================================================
1.2. Site Body (and Sidebar)
======================================================== */
	#body { position: relative; z-index: 1; /* Solved IE6/7 layering problems (as above) */ }
		#content {  }

			.message { clear: both; float: none; padding: 1em; margin: 0 0 1.5em; border: 1px solid #CCC; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* non-vendor specific declaration goes last */ }
			.message h4 { margin: 0 0 0.5em; } 
			.message ul, 
			.message p { margin-bottom: 0; }
			.message h4 { color: #000; }
			.good { background: #92B55F; border-color: #83A355; }
			.good h4, .good p, .good li, .good a { color: #FFF; }
			.bad { background: #E8DA5E; border-color: #D0C454; color: #000; }
			.bad h4 { color: #000; }

			p.global-text-ad { background: #EEE; /*clear: both; float: none;*/ padding: 0.5em 1em; margin: 1em 0; /*1.5em*/ border: 1px solid #CCC; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* non-vendor specific declaration goes last */ }
				p.global-text-ad a { text-decoration: none; font-weight: normal; color: #333; }
				p.global-text-ad a:hover,
				p.global-text-ad a:focus { text-decoration: underline; }

		#sidebar { margin-top: 2em; }



/* ========================================================
1.3. Site Foot
======================================================== */



#foot { color: #666; }
	#foot .foot-body { padding-top: 1.5em; background: url(../ui/footer-bg.jpg) 0 -50px repeat-x; }
	#foot h3 { border-bottom: 1px solid #CCC; padding-bottom: .5em; }
	#foot h4 { color: #999; }
		#foot p.legal { clear: both; float: none; }
			#foot p.legal a { padding: 0 0.35em; }
	#foot ul { list-style: none; padding: 0; margin: 0; }
	#foot dl { margin: 0 0 0.5em; }
       #foot dd { color: #666; margin: 0; }
			#foot dd strong { color: #555; }
			#foot dd.large { font-size: 1.3333em; }
	#foot a { text-decoration: none; }
		#foot a:hover, #foot a:focus { text-decoration: underline; }

/* ========================================================
Sticky Footer
========================================================= */

#wrap-bttns {	position:fixed; bottom:0; width:100%; padding:0; overflow:hidden; background: #fbd349 url(../ui/bg-bttn-bar.gif) repeat-x 0 0; z-index:222; }
#bttn-bar {	width:960px;	margin:0 auto; padding:6px 0 0 0; height: 22px;
			position:relative;
			bottom:0;}


/* ========================================================
vCard (hCard)
======================================================== */
.vcard { padding: 0.3em 0; margin: 0.7em 0; /*border: 1px dotted #CCC;*/ background: #fff url(../ui/dotted-line.gif) bottom center repeat-x; width: auto; }
	.vcard .adr { display: none; }
	.vcard .photo { float: left; background-image: url("../ui/icons/blank-image.gif");}
	.vcard .fn, .vcard .org, .vcard .email { margin-left: 60px; font-size: 1.2em; display: block; line-height: 1.7em; }
	.vcard .email { font-size: 0.95em; padding-left: 0; background-image: none; color: #C02; }
	.vcard .tel { clear: both; display: block; font-size: 1.2em; text-indent: 60px; line-height: 1.7em; }
	.vcard .tel .value { font-weight: bold; }
	.vcard .org { line-height: 1.3em; color: #666; }
	.vcard .fn { font-weight: bold; font-size: 1.2em; line-height: 1.2em; }


/* ========================================================
Testimonial (sidebar)
======================================================== */
.testimonial blockquote { margin: 0 0 -0.5em 0; padding: 0;}
.testimonial blockquote p { font-family: Georgia, "Bitstream Vera Serif", serif; text-transform: lowercase; font-size: 0.65em; font-weight: normal; color: #666; font-style: italic; line-height: 1.5em; }
.testimonial cite { color: #AAA; font-size: 0.75em; margin: 0; padding: 0; float: right;} 


/* ========================================================
Address Scroller
======================================================== */
#scroller { border: 1px solid #666; overflow: auto; height: auto !important; max-height: 12em; height: 12em; margin: 1em 0 3em; }
	#scroller ul { margin: 0; padding: 0; display: block; }
	#scroller li { padding: 0; padding: 0; background-image: none; display: block; line-height: 100%; }
	#scroller a { margin: 0; padding: 0.2em; border-bottom: 1px solid #CCC; display: block; }
	#scroller #options { width: 100%; margin: 0; }
	#scroller #options a { display: block; border-bottom: 1px solid #CCC; text-decoration: none; line-height: 1.7em; text-indent: 0.3em; }
	#scroller #options a:hover { background: #EEE; color: #333; }


/* ========================================================
jQuery Tabs
======================================================== */
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { 
/* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide { display: none; }
}

/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav { display: none; }
}

ul.tabs li { list-style: none; background-image: none; padding: 0; }
.ui-tabs-nav { font-size: 1em; list-style: none; margin: 0; padding: 0; background: #E0E0E0 url(../ui/bg-stripe.png) no-repeat 0 50%; }
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ display: block; clear: both; content: " "; }
.ui-tabs-nav li { list-style: none; float: left; margin: 0 0 0 1px; min-width: 7em; /* be nice to Opera */ }
.ui-tabs-nav a, .ui-tabs-nav a span { display: block; padding: 0 0.9em; background: #E0E0E0 url(../ui/bg-stripe.png) no-repeat 0 50%; color: #000; }
.ui-tabs-nav a { margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */ padding-left: 0; color: #000; font-weight: bold; line-height: /*1.2em*/1.8em; text-align: center; text-decoration: none; white-space: nowrap; /* required in IE 6 */ outline: 0; /* prevent dotted border in Firefox */ }
.ui-tabs-nav a:hover { color: #000; }
.ui-tabs-nav .ui-tabs-selected a { position: relative; top: 1px; z-index: 2; margin-top: 0; color: #000; }
.ui-tabs-nav a span { width: 5.5em; /* IE 6 treats width as min-width */ min-width: 5.5em; height: 1.5em; /* IE 6 treats height as min-height */ min-height: 1.5em/*18px*/; padding-top: 6px; padding-right: 0; }
*>.ui-tabs-nav a span { /* hide from IE 6 */ width: auto; height: auto; }
.ui-tabs-nav .ui-tabs-selected a span { padding-bottom: 1px; }

.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { background-position: -2000px 50%; }
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active { background-position: 0 50%; color: #000; }
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {  background-position: -2000px 50%; color: #000; }
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span { background-position: 0 50%; }
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; }
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer; text-decoration: none; }
.ui-tabs-panel { border-top: 1px solid #999; background: #FFF; padding: 2.5em 0 0; /* declare background color for container to avoid distorted fonts in IE while fading */ }
.ui-tabs-loading em { padding: 0 0 0 20px; background: url("../ui/loading.gif") no-repeat 0 50%; }

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */ display: inline-block; }
*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */ display: inline-block; }

/* ========================================================
Forms
======================================================== */
fieldset { border: 1px solid #CCC; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 1em; padding: 10px; position: relative; /* For better <legend> positioning */ }
fieldset.basic { padding: 0; border: none; }

legend { line-height: 1; margin: 0 .5em; }
input, textarea, select { font: normal 100% Arial, Helvetica, sans-serif; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
input, textarea, select { }
input[type=checkbox], input.check { }
input[type=radio], input.radio { }
input[type=password], option { }
optgroup { font-weight: bold; font-style: normal; }
optgroup option { font-weight: normal; padding-left: .5em; /* more specific, within optgroup */ }
textarea { overflow: auto; /* remove scrollbar for IE - unless needed */ }
form.block label { /* changes form layout so  */ }
input.radio-check, input[type="radio"], input[type="checkbox"] { /* on radio and checkboxes, declare the label after the input (in the HTML) */ }
input[type="submit"], input[type="checkbox"], input[type="radio"], input[type="button"], button, select, label, .pointer { cursor: pointer; }

input[type="text"],input[type="password"] { border: 1px solid #CCC; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

input#search-keywords, input#home-username, input#home-password {color: #666;}
input#search-keywords { background: none; }

p.important { margin-bottom: 2em; font-weight: bold; }
p.important em { color: #C00; }
p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }
p.caveat { margin: 0 0 1em; font-size: 85%; color: #666; }
p.caveat em { font-weight: bold; color: #C00; }
p.note { color: #666; margin-left: 170px; margin-top: .5em; display: block; }

label, span.label { margin-right: 10px; padding-right: 10px; width: 150px; float: left; text-align: right; position: relative; font-weight: bold; }
label.narrow { margin-right: 10px; padding-right: 10px; width: 115px; float: left; text-align: right; position: relative; }
label.error,  span.error { color: #C00; }
label sup { position: absolute; right: 0; font-size: 80%; font-style: normal; }
label em, span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }

input.error { border-color: #C00; background-color: #FEF; }

.controlset { clear: both; margin: 0.25em 0; }
.controlset label, 
.controlset input { display: inline; float: none; text-align: left; }
.controlset div { margin-left: 170px; }
.controlset div * { vertical-align: middle; }

label.radio-check { margin-left: 1.5em; text-align: left; width: auto; margin: 0; float: none; }
input.radio-check { margin-left: 0; }

input.text, textarea, select { /*background: transparent url("../ui/input-bg.gif") no-repeat 0 0;*/ border: 1px solid #bbb; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
input.text:focus, textarea:focus, select:focus { outline: none; border-color: #999; color: #333; border: 1px solid #2daebf; }

input[type="text"], input[type="password"], textarea, select { background: #FFF url("../ui/input-bg.gif") no-repeat 0 0; }
button { overflow: visible; /* removes extra side spacing in IE */ }
button::-moz-focus-inner { border: 0; padding: 0; /* removes extra inner spacing in Firefox */ }
.buttonrow { margin-left: 170px; clear: both; }
fieldset div { padding: 0.5em 0; clear: both;}

.contact-methods { border-top: 1px solid #CCC; margin-top: 1em; padding-top: 0.5em; }
.contact-by-phone { background:url(../ui/contacts-option-1.jpg) right top no-repeat; }
.contact-by-web { background:url(../ui/contacts-option-2.jpg) right top no-repeat; }
.contact-by-post { background:url(../ui/contacts-option-3.jpg) right top no-repeat; }
.contact-by-form { background:url(../ui/account/invoice-icon.gif) right top no-repeat; }


/* ========================================================
Menu (Account List)
======================================================== */
ul.menu { list-style: none; margin-left: 0; padding: 0; }
	ul.menu li { margin: 0 0 0.75em; padding: 0; }
	ul.menu a { font-weight: bold; font-size: 1.15em; background: url(../ui/bullets.png) no-repeat -200px -398px; padding-left: 18px; text-decoration: none; }
	ul.menu span { display: block; text-indent: 18px; color: #666; }
	ul.menu a:hover,
	ul.menu a:focus { text-decoration: underline; }

dl.menu { border: 1px solid #CCC; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
	dl.menu dt { padding: 0.35em; background: #EEE; font-size: 1.125em }
	dl.menu dd { padding: 0; margin: 0; }
	dl.menu a { display: block; border-top: 1px solid #CCC; padding: 0.35em; text-decoration: none; }
	dl.menu .curent a { color: #000; font-weight: bold; }
	dl.menu a:hover,
	dl.menu a:focus { text-decoration: underline; }


/* ========================================================
Order History
======================================================== */
.order { width: 100%; border: 3px solid #9CF; margin: 0 0 3em; }
	.cancelled { border-color: #CCC; }
.order thead { font-weight: bold; color: #FFF; }
	.order thead th, 
	.order thead td { background: #15A; }
	.cancelled thead th,
	.cancelled thead td { background: #666; }
.order thead small { font-weight: normal; }
.order thead th { border: none; }
.order th, .order td { border: 1px solid #9CF; text-align: left; }
	.cancelled th, .cancelled td { border-color: #CCC; }

.order td.description { width: 35%;}
.order thead th.order-status { width: 30%; }

.order tr.sub-header { background: #9CF; color: #000; font-weight: bold; }
	.cancelled tr.sub-header { background: #CCC; }
.order dl { color: #000; margin: 0; text-align: left; }
.order dd { color: #666; margin: 0; line-height: 1.3; }
.order tr.alt { background: #F5F5F5; }

.order tbody { /*font-size: .875em;*/ }
.order tbody.items { border: 1px solid #CCC; }
.order tbody.items a { border-bottom: none; }
.order tbody.items tr.odd { background: #EBF1FA; }
.order tbody.items th { /*font-size: 1.2em;*/ }
.order tbody.items th,
.order tbody.items td { /*border-left: none; border-right: none;*/ }
.order tbody.items td.consignment { border-left-width: 1px; }
.order tbody.items a { text-decoration: none; }
.order tbody.items a:hover,
.order tbody.items a:focus { text-decoration: underline; }
.order tfoot { font-size: 0.85em; }
.order dt em { font-size: 0.75em; color: #888; font-weight: normal; }

#invoice-list { border: 3px solid #9CF; }
	#invoice-list td, #invoice-list th { border-left: none; border-right: none; }

a.delete { color: #C03; }
a.delete:hover,
a.delete:focus { color: #903; }

/* ========================================================
Explorer Tree (Postcode, Address Finder Results)
======================================================== */
div.addresscontainer { border: 1px solid #666; height: 12em; overflow: auto; }
ul.explorertree { list-style: none; margin: 0; padding: 0; }
ul.explorertree li { display: block; border-bottom: 1px solid #CCC; padding: 0; background: #FFF none; }
ul.explorertree a { display: block; }

/* ========================================================
Product Result Listings (Table)
======================================================== */
.result-page,
.result-page th,
.result-page td { border: none; }
	.result-page thead th { background: #FFF; }
	.result-page tbody th { background: #E1E3F1; text-align: left; padding: .5em; }
	.result-page tbody td { /* padding-bottom: 1.5em; why? */ }
	.result-page img.photo { margin: 0 0 2em; }
	.result-page a.review-stars,
	.result-page a.review-stars img { text-align: center; }
	.result-page input,
	.result-page label { position: relative; float: none; margin: 0; padding: 0; }
	.result-page label { padding-left: .25em }

.offer-msg { list-style: none; margin: 0 0 1.5em; }
	.offer-msg a { text-decoration: none; padding-left: 18px; color: #C60; background: url("../ui/bullets.png") no-repeat -5px -1198px; }
	.offer-msg a:hover,
	.offer-msg a:focus { text-decoration: underline; }

/* ========================================================
Bundles (Table)
======================================================== */
#bundles ul { margin: 0; list-style: none; }
	#bundles li { margin: 0; list-style: none; }
	#bundles ul a { text-decoration: none; }
	#bundles ul a:hover,
	#bundles ul a:focus { text-decoration: underline; }
	
iframe#parcel-tracking { width: 600px; height: 400px; }

/* ========================================================
Pagination
======================================================== */
.pagination { color: #666; margin: 0; text-align: center; }
	.pagination a { font-weight: bold; text-decoration: none; }
	.pagination a:hover,
	.pagination a:focus { text-decoration: underline; }
	.pagination a,
	.pagination .current { border-width: 0 1px 0 0; line-height: 2em; padding: 0 0.4em }
	.pagination .current { text-decoration: none; cursor: default; }
	.pagination .prev, .pagination .next { border: none; }

/* ========================================================
Back and Forth (Historical Search Links, "Back to" or "Forward to"
======================================================== */
ul.back-forth { list-style: none; width: 100%; height: 27px; margin: 0 0 1em; }
	ul.back-forth li { display: inline; }
	ul.back-forth a { background: #DDD; display: inline; float: left; padding: 4px 15px; text-decoration: none; -webkit-border-radius: 13px; -moz-border-radius: 13px; -webkit-transition: all 0.1s ease-out; }
	ul.back-forth .next a { float: right !important; }
	ul.back-forth a:hover,
	ul.back-forth a:focus { background: #666; color: #FFF; }

/* ========================================================
Basket Table
======================================================== */
table.basket { border: none; }

/* ========================================================
Product Listings (Search Result, Item, Kit Pages)
======================================================== */
table.product-listing th,
table.product-listing td { vertical-align: top; }
table.product-listing,
table.product-listing td[colspan],
table.product-listing th[colspan] { text-align: left; }
table.product-listing h3 { margin: 0; }
	table.product-listing p,
	table.product-listing dl,
	table.product-listing dt, 
	table.product-listing dd { margin-bottom: 0; }


/* ========================================================
Results Listing
======================================================== */
.results-listing { border: 1px solid #CCC; }
.results-listing thead th,
.results-listing thead td,
.results-listing tfoot th,
.results-listing tfoot td { background: #E0E0E0 url(../ui/bg-stripe.png) no-repeat 0 50%; }
.results-listing th,
.results-listing td { vertical-align: top; border: 1px solid #CCC; border-width: 0 0 1px 0; }
.results-listing .action { background: url(../ui/bg-action-cell.png) repeat left top; border-bottom: 1px solid #CCC; } 
	.results-listing .action p { margin: 0 0 0.5em; }	
.results-listing,
.results-listing td[colspan],
.results-listing th[colspan] { text-align: left; }
	.results-listing h3 { margin: 0 0 0.5em; font-size: 1.25em; line-height: 1.25; }
		.results-listing h3 a { color: #333; }
		.results-listing h3 a:hover,
		.results-listing h3 a:active { color: #000; }
	.results-listing ul { color: #666; }
	.results-listing img.photo { margin: 0 0 1em; }
	.results-listing img.rating { display: block; margin: 0 auto 1em; }
	.results-listing a.url { background: url(../ui/bullets.png) no-repeat -200px -398px; padding-left: 18px; }
	.results-listing .price { font-size: 1.35em; }

/* ========================================================
Borders (CMS Folder Listings)
======================================================== */
#search-cats { overflow: hidden; list-style: none; margin: 0 0 1.5em; padding: 0; }
#search-cats li { display: block; float: left; width: 45%; margin: 0 4% 0 0; padding: 0; }
#search-cats a { text-decoration: none; padding-left: 20px; background: url("../ui/bullets.png") no-repeat -5px -1198px; }
#search-cats a:hover,
#search-cats a:focus { text-decoration: underline; }

/* ========================================================
Borders (CMS Folder Listings)
======================================================== */
.border { background: #FFF; border: 1px solid #777; color: #666; /* non-CSS3 fallback */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*-moz-box-shadow: 0 0 .5em rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 .5em rgba(0,0,0,0.5); box-shadow: 0 0 .5em rgba(0,0,0,0.5);*/ }
	.border h3 { display: block; margin: 0.5em 0; /*max-height: 3em; height: auto !important; height: 3em; font-size: 1em; margin-top: .5em;*/ }
	.border h3 span { margin-top: 10px; display: block; min-height: 3em; height: auto !important; height: 3em; }
	.border .content { display: block; background: #FFF; min-height: 7em; height: auto !important; height: 7em; overflow: hidden; }
	.border p { line-height: 1.3; }


.tick { background: #eee url("../ui/tick.gif") 50% 50% no-repeat; vertical-align:top; }
.tick-special { background: #feb811 url("../ui/tick.gif") 50% 50% no-repeat; }

/* ========================================================
Call Out (Home Page)
======================================================== */
.callout-home { background: #99C; margin: 0 0 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
	.callout-home .content { float: left; width: 250px; display: inline; }
		.callout-home h1,
		.callout-home h2,
		.callout-home p { margin-left: 10px; margin-right: 10px; }
		.callout-home h1 { color: #036; font-size: 2em; margin-top: 10px; }
		.callout-home h2 { color: #FFF; }
		.callout-home p { color: #FFF; font-weight: bold; }
	.callout-home img { float: right; width: 450px; }

.banner { text-align: center; margin: 10px 0; }

.callout { border: 1px solid #CCC; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; float: left; margin: 0 20px 1em 0; padding: 1em; width: 220px; font: normal normal 150%/1.25 Arial, Helvetica, Verdana, sans-serif; background: #06F; color: #FFF; }
.callout.right { float: right; margin: 0 0 1em 20px; }
.callout a { color: #FFF; }

/* ========================================================
Business Card
======================================================== */
.business-card table,
.business-card th,
.business-card td { border: none; }


#partners { position:relative; height: 36px; margin: 1em 0; padding: 0;}
#partners ul { margin:0; padding:0; display:inline;}
#partners li { list-style-type:none; height: 36px; display:inline; float: left; padding: 0; margin: 0;}
#partners a { display: block; height: 36px; background: transparent url(../ui/brand-logos-new.png) no-repeat; margin: 0; padding: 0;} 
#partners a span { position: absolute; top: -999em; }
#partners a.microsoft { width: 84px; background-position: 0 -36px; }
#partners a.apple { width: 92px; background-position: -84px -36px;}
#partners a.hp { width: 51px; background-position: -176px -36px;}
#partners a.lenovo { width: 89px; background-position: -227px -36px;}
#partners a.citrix { width: 77px; background-position: -316px -36px;}
#partners a.samsung { width: 93px; background-position: -393px -36px;}
#partners a.cisco { width: 66px; background-position: -486px -36px;}
#partners a.symantec { width: 92px; background-position: -552px -36px;}
#partners a.mcafee { width: 88px; background-position: -644px -36px;}
#partners a.vmware { width: 94px; background-position: -732px -36px;}
#partners a.netapp { width: 49px; background-position: -826px -36px;}
#partners a.extricom { width: 65px; background-position: -875px -36px;}

#partners a.microsoft:hover {background-position: 0 0; z-index:50;}
#partners a.apple:hover {background-position: -84px 0; z-index:50;}
#partners a.hp:hover {background-position: -176px 0; z-index:50;}
#partners a.lenovo:hover {background-position: -227px 0; z-index:50;}
#partners a.citrix:hover {background-position: -316px 0; z-index:50;}
#partners a.samsung:hover {background-position: -393px 0; z-index:50;}
#partners a.cisco:hover {background-position: -486px 0; z-index:50;}
#partners a.symantec:hover {background-position: -552px 0; z-index:50;}
#partners a.mcafee:hover {background-position: -644px 0; z-index:50;}
#partners a.vmware:hover {background-position: -732px 0; z-index:50;}
#partners a.netapp:hover {background-position: -826px 0; z-index:50;}
#partners a.extricom:hover {background-position: -875px 0; z-index:50;}


/* ========================================================
Brandshop
======================================================== */
#brandshops { overflow: auto; *zoom: 1; list-style: none; margin: 0 0 1.5em; padding: 0; }
	#brandshops li { float: left; display: inline; width: 114px; height: 60px; margin: 0 10px 10px; padding: 0; }
	#brandshops a { display: block; height: 60px; background: url(../ui/brandshop-logos.png) no-repeat 0 0; text-indent: -200%; overflow: hidden; }
		#brandshops .apple a { background-position: -10px 0; }
		#brandshops .microsoft a { background-position: -144px 0; }
		#brandshops .hewlettpackard a { background-position: -278px 0; }
		#brandshops .adobe a { background-position: -412px 0; }
		#brandshops .toshiba a { background-position: -546px 0; }
		#brandshops .brother a { background-position: -680px 0; }
		#brandshops .lenovo a { background-position: -816px 0; }
		#brandshops .acer a { background-position: -10px -80px; }
		#brandshops .samsung a { background-position: -144px -80px; }
		#brandshops .mcafee a { background-position: -278px -80px; }
		#brandshops .belkin a { background-position: -412px -80px; }
		#brandshops .symantec a { background-position: -546px -80px; }
		#brandshops .kensington a { background-position: -680px -80px; }
		#brandshops .canon a { background-position: -816px -80px; }
		#brandshops .autodesk a { background-position: -10px -160px; }
		#brandshops .vmware a { background-position: -144px -160px; }
		#brandshops .targus a { background-position: -278px -160px; }

/* ========================================================
"NEW" Clearfix method.
See: http://perishablepress.com/press/2009/12/06/new-clearfix-hack
======================================================== */
.clearfix:after,
.group:after,
.row:after,
.folders:after,
.folder:after,
.back-forth:after,
.price-breakdown:after,
#head:after,
#masthead:after,
#global-navigation:after,
#specifications dl:after,
#body:after,
#foot:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix,
* html .group,
* html .row,
* html .folders,
* html .folder,
* html .back-forth,
* html .price-breakdown,
* html #head,
* html #masthead,
* html #global-navigation,
* html #specifications dl,
* html #body,
* html #foot { zoom: 1; } /* IE6, should really be in conditional stylesheet */
*:first-child+html .clearfix,
*:first-child+html .group,
*:first-child+html .row,
*:first-child+html .folders,
*:first-child+html .folder,
*:first-child+html .back-forth,
*:first-child+html .price-breakdown,
*:first-child+html #head,
*:first-child+html #masthead,
*:first-child+html #global-navigation,
*:first-child+html #specifications dl,
*:first-child+html #body,
*:first-child+html #foot { zoom: 1; } /* IE7, should really be in conditional stylesheet */

.clear { clear: both; display: block; overflow: hidden; }
div.clear { visibility: hidden; width: 0; height: 0; }


form.quicksearch { border-bottom: 3px solid #CCC; padding: 0 0 1em; margin: 0 0 1em; } /* jQuery plugin "jquery.quicksearch.js" created refine */
	form.quicksearch label.qs_label { color: #06F; width: auto; }
	form.quicksearch input.qs_input { width: 10em; border-color: #999; }