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

	AUTHOR: 		Sumac UK
	DESCRIPTION:	Screen styles for CMS Wireframe
	DATE:			03/07/07
	LAST EDITED:	19/07/07

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

/* ==========================================================
	GLOBALS
========================================================== */

/* ==========================================================
	CHANGELOG 21/11/07 
	AUTHOR: TES

	changes:-- added #prod-details #prod-id 
	changes:-- a:link, a:visted {color:#21409a }
	added:-- #bread-crumb a:hover {color:#ed1c24}

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

body 
{
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Sans-Serif;
	text-align: center;
	color: #444;
	background-color: #FFF;
	
}
/* [ text sizing ]---------------------------------------- */
/* http://www.clagnut.com/blog/348/ ---------------------- */

htm
{
	font-size: 100%; /* for IE */
}
body 
{
	font-size: 62.5%; /* for IE/Win */
}
input, select, table
{
	font-size: 100%; /* for IE */
}
.input-quantity
{
	width: 27px;
	height: 17px;
	
}
fieldset
{
	border: none;	
}
label
{
	cursor: pointer;
}
textarea
{
	font-family: Arial, Sans-Serif;	
}

/* [ links ] ------------------------------------------ */

a:link, a:visited
{
	/*color: #101E48;*/	/*TES Edit 21/11/2007*/
	color: #21409a;		/*TES Edit 21/11/2007*/
	text-decoration: none;
}
a:hover
{
	color: #ED1C24;
	text-decoration: underline;
}

/* [ headings ] ------------------------------------------ */

h1
{
	font-size: 1.5em;
	margin: 0 0 0.5em 0;
	/*page-break-before:avoid;*/
}
h2
{
	margin: 0 0 0.5em 0;	
	font-size: 1.3em;
	/*page-break-before:avoid;*/
}
h3, h4
{
	margin: 0 0 0.5em 0;
	font-size: 1.1em;
}
h5
{
	margin: 0 0 0.5em 0;
	font-size: 1.1em;
	font-style: italic;
}
h6
{
	margin: 0 0 0.5em 0;
	font-size: 1.1em;
	font-style: italic;
	font-weight: normal;
}

/* [ other ] --------------------------------------------- */
.hide
{
	
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute; 	
}
.clear
{
	clear: both;	
}
.clear-left
{
	clear: left;
	}
.clear-right
{
	clear: right;
	}
label
{
	cursor: auto;	
}
fieldset
{
	margin: 0;
	padding: 0;
	border: none;	
}
legend
{
	display: none;	
}
/* ==========================================================
	PAGE
========================================================== */
form
{
	position: relative;
	width: 760px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}
#form-liner
{
	background-image:url(../images/extra_leftnav_gradient.gif);
	background-repeat:repeat-y;
	background-position: top left;
	float: left;
}
#wrapper
{
	background-repeat:no-repeat;
	background-position: 0 78px;
	background-image: url(../images/nav_gradient.gif);
	float: left;
}
#inner-wrapper
{
	 
}
#content-wrapper
{
	 position: relative;
	 float: right;
	 width: 673px;
}
/* ==========================================================
	top default images
========================================================== */
#images-wrapper
{
	position: relative;
	margin: 10px 0 0 0;
	background-color: #9d9ea2;
	border:1px dashed #414143;		
	height: 57px;
	padding: 0 0 0 17px;
}
#images-wrapper img
{
	margin: 0;
	padding: 0;
}
/* ==========================================================
	HEADER
========================================================== */

#header
{
	position: relative;
	float:left;
	width: 760px;
	height: 78px;
	/*height: 88px;*/
	background-image: url(../images/headerGradient.gif);
}

#header h1
{
	position: absolute;
	top: 24px; 
	/*left: 89px;TES test edit to move header*/
	left: 89px;
	font-size: 2.8em;
	/*padding: 0 0 0 5px;/*TES padding to space img a bit */
	color: #ffffff;	 
}
#header h1 a
{
	display: block;	
}
#header h1 a:link, #header h1 a:visited, #header h1 a:hover
{
	background-color: transparent;	
}
#header img
{
	position:absolute;
	left: 0;
	top: 0;
	width: 88px;
	height: 78px;
} 
/* ==========================================================
	MAIN-NAVIGATION
========================================================== */
#left-nav
{
	position: relative;
	float: left;
	left: 0;
	top: 5px;
	width: 87px;
	color: #ffffff;	
	text-align: center;
}
#left-nav ul
{
	list-style: none;	
	margin: 0;
	padding: 0;
}
#left-nav li
{
	float: left;
	display: block;
	width: 87px;
	padding-bottom: 6px;
	font-size: 1.2em;
}
#left-nav a:link, #left-nav a:visited
{
	background-image: url(../images/listButtonUp.gif);
	background-repeat: no-repeat;
	padding-bottom: 6px;
	color: #ffffff;	
}
#left-nav a {
	display: block;
	text-decoration: none;
	padding: 0.3em 0 0 0;
}
#left-nav a:hover, #left-nav a.selected 
{ 
	background-image: url(../images/listButtonDown.gif) !important;
	background-repeat: no-repeat;
	color: #ffffff;	
}


/* ==========================================================
	BODY
========================================================== */
#body 
{
	float: left;
	width: 760px;
	margin: 0 0 0 0;
}

/* ==========================================================
	CONTENT
========================================================== */
#content
{
	position: relative;
	float: left;
	background: transparent;	
	margin-top: 10px;
	width: 650px;
	text-align: left;
	margin-left: 17px;
	margin-right: 5px;
	padding-bottom: 25px;	
	font-size: 1.2em;
	line-height: 1.4em;
	display: inline;
}
#content p
{
	padding-right:20px;
}
/* ==========================================================
	top search and bread-crumb wrapper
========================================================== */
#crumb-search-wrapper
{
	float: left;
	clear: both;
	margin: 15px 0 0 0;
}
/* ==========================================================
breadcrumb control
==========================================================*/
#bread-crumb
{
	 position: relative;
	 float: left;
	 width: 460px;
}
#bread-crumb p
{
	margin: 0 0 0 17px;
}
#bread-crumb a, #bread-crumb span
{
	color: #21409a; /*changed from #444*/	
	background: transparent url(../images/list_following.gif) no-repeat left center;
	padding: 0 0 0 14px;
	margin: 0 0.5em 0 0;
	display: inline-block;
}
#bread-crumb a:hover
{
	color: #ed1c24;
}
#BreadCrumb
{
	 position: relative;
	 float: left;
	 width: 460px;
}
#BreadCrumb p
{
	margin: 0 0 0 17px;
}
#BreadCrumb a, #BreadCrumb span
{
	color: #21409a; /*changed from #444*/	
	background: transparent url(../images/list_following.gif) no-repeat left center;
	padding: 0 0 0 14px;
	margin: 0 0.5em 0 0;
	display: inline-block;
}
#BreadCrumb a:hover
{
	color: #ed1c24;
}
#BreadCrumb2
{
	 position: relative;
	 float: left;
	 width: 460px;
}
#BreadCrumb2 p
{
	margin: 0 0 0 17px;
}
#BreadCrumb2 a, #BreadCrumb2 span
{
	color: #21409a; /*changed from #444*/	
	background: transparent url(../images/list_following.gif) no-repeat left center;
	padding: 0 0 0 14px;
	margin: 0 0.5em 0 0;
	display: inline-block;
}
#BreadCrumb2 a:hover
{
	color: #ed1c24;
}
/* ==========================================================
search controls
========================================================== */
#search-box
{
	 position:relative;
	 float: right;
	 font-size: 1em;
	 color: #21409a;/*changed from #101e48*/
	 margin: 5px 10px 0 0;
}
#search-box input
{
	margin: 0;
	padding: 0;	
}
#search-box input.input-button
{
	border: none;
	background: none;
	margin: 0 0 0 10px;	
}
/* ==========================================================
footer
========================================================== */
#footer 
{
	float:left;
	width:100%;
    background-image:url(../images/swish.gif);
	background-repeat:no-repeat;
	background-position: bottom right;
	padding: 225px 10px 0 0;
}
#footer #copyright 
{
    text-align: right;
	font-size: 0.95em;
	color: #ffffff;
	margin: 0;
	padding: 10px 0 0 0;
	width:100%;
}
#footer #terms 
{
	float: left;
	width: 87px;
	text-align: center;
	font: 0.9em Verdana, Arial, Sans-Serif;
	color: #FFF;
	padding: 0 0 10px 0;
}




/* ==========================================================
	image and text container
========================================================== */
div.services-container
{
	margin-bottom: 15px;	
}
div.services-container h2
{
	float: right;
	width: 510px;
}
div.services-container h2 a:link, div.services-container h2 a:visited  
{
	font-size: 1em;
}



/* ==========================================================
	product-info & product-related pages
========================================================== */
#prod-details
{
	width: 535px;
	float: left;
	margin: 0 0 2em 0;
}
/*
#prod-wrapper
{
	position: relative;
	float: left;
	margin:10px 0 0 17px;
	height: 400px;
	background-color: Maroon;
}
*/
#prod-details h1
{
	float: right;
	width: 330px;
	margin: 0;
	padding: 7px 0 3px 0;/*TES 23/11/07 Added padding to line up with the img*/
	line-height: 125%;
}
#prod-details img
{
	float: left;
	margin: 10px 0 0 0;
	display: inline;
}
#prod-details #prod-id
{
	float: right;
	width: 330px;
	margin: 0;
	padding: 2px 0 0 0;/*TES 23/11/07 Added padding to space out the lines*/
}
#prod-details #prod-var	/*TES Edit 21/11/2007*/
{						/*needed for ProductDetails.aspx*/
	float: right;
	width: 330px;
	font-size: 100%;
	margin-left: 10px; /*edit 03/06/08 */
	padding: 0;
	line-height: 125%;
}
#prod-details #prod-price
{
	float: right;
	width: 330px;
	font-size: 0.9em;
	margin: 1.5em 0;
	padding: 0;
}
#prod-details #prod-price span.price
{
	font-size: 1.7em;
	color: #9a0f08;	
	margin-top: 0.3em;
}
#prod-details #prod-price span
{
	float: left;	
	margin-top: 0.4em;
	margin-right: 0.5em;
}

#prod-details #prod-also-see
{
	font-size: 0.9em;
	font-weight:bold;
	float: right;
	width: 330px;
	margin: 1em 0 0 0;
	padding: 0;
	padding-bottom: 3px;
}
#prod-details ul
{
	float: right;
	font-size: 0.9em;
	width: 330px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#prod-info-wrapper
{
	 width: 535px;
}
#prod-info-wrapper-a
{
	background: transparent url(../images/products_rounded_bottom_lon.gif) no-repeat left bottom;
	clear: both;
}
#prod-info-wrapper-b
{
	background: transparent url(../images/products_rounded_top_short.gif) no-repeat left top;
	padding: 10px 15px;
} 
#prod-info-wrapper-b p
{
	margin-top: 10px;	
}
/* product info buttons */
#prod-info-wrapper div.buttons
{
	float: right;
	margin: 0 0 0 0;
	padding: 0 10px 0 0;
	display: block;
	width: 400px;
}
#prod-info-wrapper div.buttons a
{
	width: 103px;	
	font-size: 0.78em;
	float: right;
	text-align: center;
	color: #FFF;
	margin: 0 0 0 1px;
}	
#prod-info-wrapper div.buttons a
{
	background-image:url(../images/products_button_blue.gif);
}
#prod-info-wrapper div.buttons a.selected
{
	background-image: url(../images/products_button_red.gif);
}

/* related products */
ul.related-products
{
	list-style: none;
	margin: 1em 0;
	padding: 0;
}

/* pdf link */

span.product-tech-pdf
{
	 font-size: 0.81em;
	 display: block;
	 text-align: right;
	 line-height: 1em;
	 margin: 0 0 0.2em 0;
}

span.product-tech-pdf a
{
	background: transparent url(../images/pdf_icon_1.gif) no-repeat right center;
	padding: 0.5em 20px 0.5em 0;
}

/* tech pdf links */

a.category-detail-tech-pdf
{
	
	 font-size: 0.81em;
	 display: inline;
	 line-height: 1em;
	 height: 20px;
	 background: transparent url(../images/pdf_icon_1.gif) no-repeat right center;
	 padding: 1em 20px 2em 0; 
}

a.tech-pdf
{
	 font-size: 0.81em;
	 display: inline;
	 text-align: right;
	 line-height: 1em;
	 margin: 0 0 2.2em 0;
	 background: transparent url(../images/pdf_icon_1.gif) no-repeat right center;
	 padding: 1em 20px 1em 0; 
}

/* ==========================================================
	shopping cart, basket page
========================================================== */

th.border-bottom, td.border-bottom
{
	border-bottom: 1px solid #000000;
}
td.padding-top
{
	 padding:3px 0 0 0;
}
td.width-height
{
	height: 16px;
	width: 153px;
}

td.button-shopping
{
	background-color: #676767;
	width: 170px;
	height: 23px;
	color: White;
}
td.button-checkout
{
	background-color: #676767;
	width: 150px;
	height: 23px;
	color: White;

}
td.space
{
	height:7px;
}

#your-basket
{
	position: relative;
	float: left;
	margin: 33px 0 0 17px;	
	
}
table
{	 
	 text-align: left;
}
#table-wrapper
{
	 position: absolute;
	 top: 77px;
	 left: 17px;
	 height: 450px;
}

/* ==========================================================
	News page
========================================================== */
.news-item-inner
{
	 margin: 0 0 25px 0;
	 width: 520px;
}

.news-item-inner h2
{
	color: #f31627;	 
	margin-bottom: 0;
	font-size: 1.2em;
}
.news-item-inner .news-date
{
	margin-top: 0;
	margin-bottom: 0.8em;
}
.news-item-inner a.pdf-link
{
	background: transparent url(../images/pdf_icon_1.gif) no-repeat left center;
	padding: 0.5em 0 0.5em 20px;
	font-size: 0.8em;
}
.news-item-inner p
{
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	font-size: 0.9em;
}
/* ==========================================================
	Categories.aspx 
========================================================== */

.cat-li 
{
	list-style:none;
}
.cat-li a:link, .cat-li a:visited  
{
	text-decoration: none;	
}
.cat-li a:hover
{
	text-decoration: underline;	
}
.cat-li-letter 
{
	 font-size: 1.2em;
	 list-style:none;
		
}
/* ==========================================================
	CategoryDetail.aspx
========================================================== */
#divCategoryDetail h1
{
	
	}
#divCategoryDetail .detail-left
{
	width:127px;
	float:left;
}
#divCategoryDetail .detail-right
{
	width:450px;
	float:left;
}
#divCategoryDetail .tabs
{	
	width:100%;
	margin-left:10px;
}
#divCategoryDetail .tabs a
{
	width: 103px;
	text-align: center;
	color: #fff;
	background-image:url(../images/products_button_blue.gif);
	font-size: 0.78em;	
	display: block;
	float:left;
	margin-left:3px;
}
#divCategoryDetail .tabs a.selected
{
	background-image:url(../images/products_button_red.gif);
}
#divCategoryDetail .images
{
	border: 1px solid #676767;
	float:left;
}
#divCategoryDetail .images img
{
	display:block;
	padding:0;
	margin:0;
}
#divCategoryDetail .detail-wrap
{
	padding:0;
	margin:0;
	background-image:url(../images/cat_detail_rounded_bottom.gif);
	background-position: left bottom;
	background-repeat: no-repeat;
	float:right;
	width:100%;	
}
#divCategoryDetail .detail
{
	padding:0;
	margin:0;
	background-image: url(../images/cat_detail_rounded_top.gif);
	background-position: right top;
	background-repeat: no-repeat;
	padding:10px;
}
#divCategoryDetail p
{
	margin: 10px 0 0 0;
	padding: 0 15px 1em 0;
}
#divCategoryDetail a.product-link
{
	font-size:16px; /*TES 2/6/08*/
	float: left;
	width: 650px;
	text-align: right;	
	display: block;
	margin-bottom: 10px;
}


/* ==========================================================
	thankyou page
========================================================== */

a#thankyou 
{
	float: right;
	background-color: #666;
	width: 108px;
	color: #FFF;
	font-size: 0.8em;
	padding: 0.3em 0.7em;
	margin: 0 25px 0 0;
	text-decoration: none;
	text-align:center;
}
/* ==========================================================
	vacancies page
========================================================== */
#vacancies-ref
{
	font-size: 0.87em;
}
#vacancies-opening
{
	 font-size: 1em;
	 color: #e32223; 
}
#vacancies-description
{
	 font-size: 0.9em;		 
}

/* ==========================================================
checkout page
========================================================== */

#checkout-form
{
	float: left;
	width: 460px;
	margin: 20px 0 0 0;
}
#checkout-form p
{
	 font-size: 0.9em;
}
#checkout-button-wrapper
{
	float: right;
	margin: 20px 47px 0 0;
	display: block;
	font-size: 0.89em;
	color: #fff;
}

#checkout-cancel
{
	margin: 0 0 5px 0;
	width: 50px;
	height: 23px;
	background-color: #676767;
	line-height: 1.9em;
	text-align: center;
}
#checkout-return
{
	margin: 5px 0 0 0;
	width: 90px;
	height: 23px;
	line-height: 1.9em;
	background-color: #676767;
	text-align: center;		
}
#checkout-submit
{
	margin: 5px 0 0 0;
	width: 90px;
	height: 23px;
	background-color: #676767;
	line-height: 1.9em;
	text-align: center;		
}
table#checkout-summary
{
	float: left;
	margin: 15px 0 0 0;		
}
#checkout-summary td.width-height
{
	height: 18px;
	width: 164px;
}

/* ==========================================================
productList page
========================================================== */
.prod-list-details-wrapper
{
	width: 650px;
	float: left;
	margin-top: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #444;

}
.prod-list-details
{
	float: left;
	width: 210px;
	margin: 0;
	padding: 0;
	overflow:hidden;
}
.prod-list-details h1
{
	float: left;
	margin-left: 10px;
	font-size: 0.95em;
	display: block;
	width:200px;
}
.prod-list-details-wrapper img
{
	float: left;
	margin: 0;
	padding:0;
	display: block;

}
.prod-list-id 
{
	margin: 0;
	margin-left: 10px;
	font-size: 0.95em;
	display: block;
}

.prod-list-idVar /*TES edit 03/06/08 for ProductList.aspx*/
{
	margin: 0;
	margin-left: 10px;
	font-size: 0.95em;
	display: block;
	padding-bottom: 5px;
}

.prod-list-price
{
	font-size: 0.95em;
	margin: 1.5em 0 0 10px;
	display: block;
	width:100%;
}
.prod-list-price span.price
{
	font-size: 1.7em;
	color: #9a0f08;	
	margin-right: 0.3em;
	margin-top: 0.1em;
}
.prod-list-price span
{
	float: left;	
	margin-top: 0.3em;
}
.prod-list-note
{
	float: left;	
	margin-left: 10px;
	margin-top: 10px;
	width: 100%;
	line-height:normal;
}
.prod-list-note span
{
	font-size: 0.75em;
}
.description
{
	float: left;
	margin: 0 0 0 10px !important;
	width: 240px;
	display: inline;
	padding: 0 !important;
}
.read-more
{
	margin: 0 5px 0 0;
	clear: both;
	text-align: right;
	display:block;

}
read-more a
{
	
}
.read-more a:link, .read-more a:visited
{
	text-decoration: none;
}
.read-more a:hover
{
	text-decoration: underline;
}
/* ==========================================================
Contact.aspx
========================================================== */
#contact h1
{
	margin-top: 20px;
	font-size: 1.2em;
	color: #e31c23;	
}
#contact h2
{
	font-size: 1em;	
}
#email 
{
	color: #e31c23;		
}
#email a
{
	
}
#email a:link, #email a:visited
{
	 text-decoration: none;
}
#email a:hover
{
	text-decoration: underline;
}
/* ==========================================================
Profile.aspx
========================================================== */

#profile h1, #profile h2, #profile h3 
{
	font-size: 1.2em;
}
#profile h4
{
	 font-weight:lighter;
}
#profile li
{
	  list-style: disc;
}
/* ==========================================================
Buttons
========================================================== */

a.button
{
	background-color: #676767;
	text-align: center;
	padding: 0.3em 1em 0.5em 1em;
	font-size:0.9em;
	display:block;
	margin-bottom:8px;
	float:left;
}	
a.clear
{
	clear:both;
	
}
a.button:link, a.button:visited
{
	color: #fff;
	text-decoration: none;
}
a.button:hover
{
	color: #fff;
	text-decoration: underline;
}
/* ==========================================================
Basket
========================================================== */
#divBasket
{
	clear:both;
}
table.basket
{
	width:95%;
}
table.basket td
{
	padding: 5px 0 0 0;
	font-size: 0.9em;
}
table.basket .headings td
{
	font-weight:bold;
	border-bottom: solid 1px #676767;
	padding :20px 0 5px 0;
}
table.basket td.center
{
	text-align:center;
}
table.basket td.right
{
	text-align:right;
}
table.basket td.total
{
	font-weight:bold;
	text-align:right;
}
table.basket td a:link, table.basket td a:visited
{
	text-decoration: none;
}
table.basket td a:hover
{
	text-decoration: underline;
}
.button-panel
{
	width:221px;
	float:right;
	margin: 15px 0 0 0;

}
/* ==========================================================
forms
========================================================== */
fieldset .form-element
{
	padding:0 0 3px 0;
	font-size: 0.9em;
	position: relative;
	float: left;
	width: 100%;
	
}
fieldset label
{
	float:left;
	width:110px;
	margin: 0 0 0 0.9em;
	display: inline;
}
fieldset label span
{
	position: absolute;
	top: 0.2em;
	left: 0;	
}
.required
{
	color:red;
}
fieldset .form-element input, fieldset .form-element textarea
{
	width:330px;
	border-color: #676767;
	border-width: 1px;
	border-style: solid;
}
/* ==========================================================
checkout
========================================================== */
h3#shopping-summary 
{
	float: left;
	width: 400px;
	margin: 20px 0 15px 0;
	clear: both;
	
}
#delivery
{
	float: left;
	margin-top: 30px;
	width: 600px;
	font-size: 0.9em;
	font-style:italic;
	
}
a#checkout-terms  
{
	float: left;
	margin-top: 30px;
	font-size: 0.9em;
	
}