/* =========================================================================

	Title:	Speedy Products CSS Design

	Description:
		Main structure, section layout and element styles

	Author:	Andrew Mason
	Contact: monitor@oakbase.co.uk
	Company: Oakbase Ltd.

	Created: 05/06/2006

	Change log:
		06/06/2006:
			*  Converted side boxs into hover links
			*  Styled navigation
			*  Tightend margins (all)
			*  Resized page container from 961px to 917px
			   in keeping with the original concept
			*  Added icons
			*  Added gradients
			-
			*  Stripped out homepage unique elements into
			   a new file
		12/06/2006:
			*  Fixed navigation image active not displaying
			   URL issue
			*  Implimented 'active' system for templates
		13/06/2006
			*  Reduced spacing between header and main content
		26/06/2006
			* Added yellow class to highlite missing copy
		14/07/2006
			* Added table styles



========================================================================= */

/*  Basic HTML Elements
-------------------------------------------------------------------------- */
body {
	margin: 12px 0 0 0;
	padding: 0;
	text-align: center;
}

h1, h2, h3, h4 {
	font-family: "Trebuchet MS", arial, verdana, helvetica, sans-serif;
	letter-spacing: -0.05em;
	
}


.blocker h3 {margin:0!important; padding:0}

p, form, ul, table {
	font-family: verdana, helvetica, arial, sans-serif;
}

td, th {
	font-size: 0.7em;
	background-color: whitesmoke;
	padding: 0.3em 1em ;
}

.image_text td {
	background-color:transparent!important;
	font-size:1em!important;
	padding: 0 1em 0 0;}
	
.image_text td p { text-align:left!important}

th {
	background-color: #0066CC;
	color: white;
}

.no_colour td {background-color:#fff!important}

.no_colour td ul {font-size:1.4em; font-weight:bold}

img {
	border: none;
}

/*  Page Container
-------------------------------------------------------------------------- */
#page {
	width: 917px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

/*  Header
-------------------------------------------------------------------------- */
#header {
/*	height: 9.8em; */
}

#header img {
	display: block;
}

#header h1 {
	display: block;
	margin: 0px;
	height:29px;
	background: black url(/images/speedy-strip2.gif) left top repeat-x;
}

#header h1 a:link, #header h1 a:visited {
	font:normal 1em/1em Arial, Helvetica, sans-serif;
	display: block;
	margin: 0;
	padding: 0;
	text-indent: -9000px;
}

#banner {
	display: block;
	background: #1568B3 url(/images/banner/blue_glass.jpg) right bottom no-repeat;
	color: white;
	float: right;
	font-family: arial, verdana, helvetica, sans-serif;
/* 	text-align: right; */
	margin: 0 20px 0 0;
	_margin: 0;
	width: 752px;
	height: 88px;
}

#banner big {
	font-size: 1.7em;
}

#header #photodiv #photoimg {
	background: url(/images/manchester.png);
	display:block;
	height:90px;
	width:100%
}

/*  Navigation
-------------------------------------------------------------------------- */
#navigation, #navigation p {
	display: block;
	width: 917px;
	background-color: #000000;
	height: 30px;
	font-family: arial, verdana, helvetica, sans-serif;
	color: white;
	
}


#navigation p {
	/*padding: 0.4em 0.9em;*/
}

.header_number {font-size: 0.9em; line-height:26px; padding-left:10px}

#header ul {
	background-color: #000000;
	list-style-type: none;
/*	float: right; */
	clear: right;
/*	width: 772px; */
	/*width: 917px;*/
	margin: 0;
	padding: 0;
	text-align: center;
}

#header li {
	display: block;
	float: left;
	font-size: 0.8em;
}


#header li a:link, #header li a:visited {
	color: white;
	background: black;
	display: block;
	float: left;
	text-decoration: none;
	/* width:.1em; */ /* IE expand hack */
	padding: 0.4em 1em 0.7em;
	white-space:nowrap;
}

#header li a:hover, #header li a:active {
	/* background: #194f9b url(/images/nav/nav_hover.gif) left top repeat-x; */
	background: #194f9b url(/images/global/nav_hover.png) left bottom repeat-x;
}


body#home li#home-tab,
body#about li#about-tab,
body#products li#products-tab,
body#order li#order-tab,
body#stockists li#stockists-tab,
body#help li#help-tab,
body#promo li#promo-tab,
body#contact li#contact-tab {
	background: #CCC url(/images/global/nav_active.png) left top repeat-x;
	color:red !important;
}




#header li ul {
	position: absolute;
	background-color: white;
	top: 149px;
	z-index:1;
}

/*#header li ul li {
	border-bottom: 1px solid #CCC;
}*/

#header li ul a:link, #header li ul a:visited {
	padding: 0.3em 0.8em;
	color: #fff;
	
}

#header li ul a:hover, #header li ul a:active {
	background: none;
	text-decoration: underline;
	color:#000000
}


#header li ul .active a:link, #header li ul .active a:visited, #header li ul .active a:hover, #header li ul .active a:active {
	background: #fff /*url(/images/global/sub_nav_right.gif) right top no-repeat*/;
}

/*  Main Body
-------------------------------------------------------------------------- */
#maincontent {

	width: 635px;
	float: left;
	position: relative;
	padding:20px 10px 10px;
	z-index:0;
}

#maincontent h2 {
	color: #ec008c;
	border-bottom: 1px solid #ec008c;
	margin: 0 0 0.3em 0;
	padding: 0;
	font-weight:normal;
}

#maincontent li {
	font-size: 0.8em;
}

.bold {font-weight:bold;}

.pink {color:#ec008c;}



/*  Side panel
-------------------------------------------------------------------------- */
#sidepanel {
	float: right;
	width: 240px;
}

a.pagelink:link, a.pagelink:visited {
text-decoration: none;
	color: #343435;
}

a.pagelink:hover,  a.pagelink:active {
text-decoration: none;
	color: #bc008c!important;
}


a.pagelinkpink:link, a.pagelinkpink:visited {
text-decoration: none;
	color: #bc008c;
}

a.pagelinkpink:hover,  a.pagelinkpink:active {
text-decoration: none;
	color: #343435!important;
}


#sidepanel p {margin:0px; padding:0px; font-family: verdana, helvetica, arial, sans-serif; font-size:0.8em;}

.sidebox {
	margin: 0 0 10px 0;
}


/*  Footer
-------------------------------------------------------------------------- */
#footer {
	/* background: #000000 url(/images/statement.gif) top right no-repeat; */
	 background: #000000;
	clear: both;
	margin-top: 1em;
	padding-top: 1em;
}

#footer p, #footer ul {
	color: #EEE;
	font-size: 0.55em;
	padding: 0 10px;
}

.pad_right { margin-right:10px;}

#footer p {
	float: left;
	margin: 0;
	width:25%
}


#footer a:link, #footer a:visited {
	color: white;
	border-bottom: 1px solid #999;
}

#footer a:hover, #footer a:active {
	background-color: #666;
	text-decoration: underline;
}

#footer ul {
	float: right;
	list-style-type: none;
	margin:0;
	padding: 0;
	padding: 0 10px;
}

.border-left {
	border-left: 1px solid #C9C9C9;
}

#statement {padding:10px; clear:both}
#logos {display:block; float:right; padding-right:20px; padding-top:65px;
}


/*  Sitemap
-------------------------------------------------------------------------- */
#sitemap {
	margin-left: 100px;
	font-size: 0.9em;
}

#sitemap li {
	line-height: 1.4em;
}

/*  Misc. Elements
-------------------------------------------------------------------------- */
.image-right {
	float: right;
	margin: 0.5em;
}

.image-left {
	float: left;
	margin: 0.5em;
}

hr, #skip, .hide {
	display: none;
}

.lite {
	font-weight: lighter;
}

.yellow {
	background-color: #FFFF99;
}

.center {
	text-align: center;
}

.clearBoth { clear: both; }
.clearLeft { clear: left; }

.left { float: left; }


.blocker {display:block; width:57%; float:right}

/* Stockest Form Styles
--------------------------------------------------------------------- */
form label {
	display: block;
}

#tradelogin {
	padding: 2em ;
}

#tradelogin a:link, #tradelogin a:visited {
	background: #fff1af url(/images/sidebox/admin_icon.png) 10px center no-repeat;
	border: 2px solid #d2af1e;
	color: #5b5120;
	/* display: block; */
	/* font-size: 1.4em; */
	padding: 2em 30px 2em 80px;
	font-weight: bold;
	text-decoration: none;
}

#tradelogin a:hover, #tradelogin a:active {
	background-color: #fffcaf;
	color: #ce1b09;
	text-decoration: underline;
}

/* Postcode Style
--------------------------------------------------------------------- */
#postcodeBox {
}




/* x. Form Styles. styles [xxx]
-------------------------------------- */
.error_field {
	background-color: #FF9;
	padding: 0.6em 1em;
}

#error_box {
	padding: 1em;
	background-color: #FF9;
	font-size: 90%;
}
#error_box h2 {
	color: #FFF;
	margin: .5em 0 0 0;
	background-color: #000;
	padding: .3em .5em;
}