/* 
=========================================================================================
22/01/2009 - Redesigned by Stuart

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


/* 
=========================================================================================
GLOBAL
=========================================================================================
*/

/* sets the whitespace to zero for all elements, eliminating any default settings */
* {
		margin: 0;
		padding: 0;
		white-space: normal;
		}

/* highest level container on site */
#contents	{
		background-color: transparent;
		background-image: url(../custom/images/global_bkg.gif);
		background-position: center top;
		background-repeat: repeat-y;
		margin: auto;
		text-align: left;
		width: 960px;
		}


/* 
=========================================================================================
TOPNAVI - main menu bar
=========================================================================================
*/
#topnavi { 
		background: #969696;
		border-top: 1px solid #FFFFFF;
/*		border-bottom: 1px solid #FFFFFF; removed to facilitate movement of display boxes */
		font: bold 12px Arial;
		overflow: hidden;
		text-align: center;
		} 
#topnavi a {
		border-right: 1px solid #FFFFFF;
		color: #FFFFFF;
		float: left;
		padding: 4px 10px;
		text-decoration: none;
		}
#topnavi a.leftborder	{
		}
#topnavi a:hover {
		background: #2A3B90;
		color: #FFFFFF;
/*		padding-top: 5px;*/
/*		padding-bottom: 3px;*/
		text-decoration: none;
		}
#topnavi li	{
		display: inline;
		}
#topnavi ul	{
		width: 100%;
		}


/* 
=========================================================================================
SIDENAVI - left menu
=========================================================================================
*/
#sidenavi {
		float: left;
/*		margin-top: 20px;*/
		width: 181px;
}
#sidenavi a {
		background: #C8C8C8;
		color: #515151;
		display: block;
		font: bold 12px Arial;
		padding: 4px 0;
		padding-left: 10px;
		text-decoration: none;
}
#sidenavi a:hover {
		background: #2A3B90;
		color: #FFFFFF;
/*		padding-top: 5px;*/
/*		padding-bottom: 3px;*/
}
#sidenavi li {
		border-bottom: 1px solid #FFFFFF;
		list-style-type: none;
		}
#sidenavi ul {
/*		border-top: 1px solid #FFFFFF;*/
		}
#sidenavi a.navimage {
		background-color: #E8E8E8;
		padding: 4px 0;
}
#sidenavi a.navimage:hover {
		padding: 4px 0;
}


/* 
=========================================================================================
MIDDLE - main content
=========================================================================================
*/
#middle {
		float: left;
		min-height: 500px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
		width: 558px;
		}

#middle a {
		color: #733184;
		font-weight: bold;
}
#middle h1 {
		padding-top: 20px;
}

/* 
=========================================================================================
RIGHTNAVI - right menu
=========================================================================================
*/
#rightnavi { 
		float: right;
		width: 180px;
		}

/*
#rightnavi table{ background: #BDBDBD; border: none; border-collapse: collapse; margin: 2px 0; overflow: hidden; width: 130px; }
#rightnavi td { border: 1px solid #FFFFFF; color: #FFFFFF; font-size: 90%; font-weight: normal; overflow: hidden; padding: 2px 5px; }
#rightnavi td.basketprice { font-weight: bold; }
*/


/* 
=========================================================================================
FOOTER - footer
=========================================================================================
*/
#footer {
		background: #FFFFFF;
		border-top: 20px solid #733184;
		clear:both;
		height: 60px;
		margin: 0 auto; 
		padding-top: 5px;
		width: 960px;
		}

/* 
=========================================================================================
ORDER
=========================================================================================
*/
#order label {
		float-left;
		width: 300px;
		margin-right: 10px;
}

#order input.boxinputlarge {
		width: 200px;
}

#order select.textform {
		width: 200px;
}






/* 
=========================================================================================
ANCHOR
=========================================================================================
*/
a {
		color:##733184 !important;
		}
.box {
		background: #733184;
		}
.signup { 
		background-image:  url("../custom/images/sign_up.gif") !important;
		}
.latestoffers {
		background-image:  url("../custom/images/latest_offer.gif");
		}
.featuredproduct {
		background-image:  url("../custom/images/featured_product.gif");
		display: block;
		height: 25px;
		}
.shoppingbasket {
		background-image:  url("../custom/images/shopping_basket.gif");
		display: block;
		height: 6px;
}


/* 
=========================================================================================
BASKET
=========================================================================================
*/
#basket {
		color: #000000;
		font-family: Arial;
		margin-top: 10px;
		margin-bottom: 10px;
		padding-left: 3px;
		padding-right: 3px;
}
#basket table {
		background-color: #FFFFFF;
		width: 100%;
}


/* 
=========================================================================================
BREADCRUMBS
=========================================================================================
*/
#breadcrumbs {
		display: block;
		list-style: none;
		padding-top: 20px;
}
#breadcrumbs a,#breadcrumbs li.nolink{
		color: 990000;
		font-weight: bold;
}
#breadcrumbs h1 {
		background: none;
		color: #5F5F5F;
		display: inline;
		font-size: 110%;
		font-weight: bold;
		padding: 0 12px 0px 0px;
		}
#breadcrumbs li {
		display: inline;
		}


/* 
=========================================================================================
DISPLAYBOX
=========================================================================================
*/
#displaybox {
		background: #733184;
		border-bottom: 1px solid #FFFFFF;
		border-top: 1px solid #FFFFFF;
		color: #FFFFFF;
		display: block;
		font: bold 12px Arial;
/*		margin-top: 20px;*/
/*		margin-bottom: 10px;*/
		padding: 4px 0;
		padding-left: 10px;
		text-align: center;
}


/* 
=========================================================================================
FEATURED
=========================================================================================
*/
#featured {
		color: #000000;
		font-family: Arial;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
}
#featured table {
		margin-left: auto;
		margin-right: auto;
}



#basket table {
		background: #E8E8E8;
		width: 100%;
}


/* 
=========================================================================================
LOGOIMAGE
=========================================================================================
*/
#logoimage	 {
		height: 100px;
		width: 960px;
		}


/* 
=========================================================================================
PRODUCT
=========================================================================================
*/
.product ol {
	margin-left: 20px;
	padding-bottom: 10px;
}
.product ul {
	margin-left: 20px;
	padding-bottom: 10px;
}



/* 
=========================================================================================
SEARCH
=========================================================================================
*/
#search {
		background: #E8E8E8;
/*		margin-top: 10px;*/
		margin-bottom: 10px;
		}


/* 
=========================================================================================
CLASSES
- these are generic and should not be changed for a single site
=========================================================================================
*/
.hand {
		cursor: pointer;
		}
.center {
		text-align: center !important;
		}
.centerImage {
		text-align: center;
		}
.left {
		float: left;
		text-align: left !important;
		}
.right {
		float: right;
		text-align: right !important;
		}

table.newform {
		border-spacing: 5px;
		white-space: normal;
}
table.newform label {
		font-weight: bold;
}
table.newform td {
		vertical-align: top;
}




/* COMMON AND GLOBAL */
body {
		background: url(../custom/images/body_bkg.gif) #FFFFFF repeat-x;
		color: #000000;
		font: 65%/130% Verdana, Arial, Helvetica, sans-serif;
		height: 100%;
		min-height: auto;
}

/*  This font sizing is for standards based browsers (firefox, opera, mozilla) that can re-size text.  
Declaring the font size in pixels makes it more consistent across browsers. */
html>body { font-size: 10px; }
td, textarea, input, select { font: 100% verdana, arial, helvetica, sans-serif; }
html>body td, html>body textarea, html>body input, html>body select { font-size: 10px; }
/* some browsers don't inherit the font into tables or textareas! */

/*remove the indent bug on ie - below if mozilla */

/*html>body #middle { float: none; margin: -1px 153px 0 151px; min-height: 400px; }*/
hr { display: none; }

/* ----- IDS ----- */
#version { float:left; padding-left: 20px; width: 130px; color:#ffffff;}

#contentsidblank { background: url(../images/layup/bg_blank.gif) repeat-y center; margin: 0 auto; text-align: left;  }
#dhtmltooltip{ background-color: #FFFFFF; border: 1px solid #000000; padding: 2px; position: absolute; visibility: hidden; width: 150px; z-index: 100; }
#dialog { background-color: #FFFFFF; }
#popupcontents{ height: auto; margin-bottom: -12px; text-align: left; width: 100%; }
#range_description { background: url(../images/layup/dots.gif) repeat-x right bottom; margin-bottom: 14px; height: 100%; padding-bottom: 5px; }
#range_description td { padding-right: 10px; }
#range_description tr,#range_description td { vertical-align: top; }
#logos {text-align: center; padding-top: 20px;}

/*only recognised by Mozilla*/

/*
*html body #topnavi {margin-top: -2px; }
*/
* html body #version {position: relative; top: 2px; left: 0px; width: 120px; color:#ffffff;}


/* ----- CLASSES ----- */
.clear { clear:both; }
.hide{ display:none; }
.show{ display:block; }
/*
.left { float:left; }
.right { float:right; }
*/
.greybkg { background-color:#E8E8E8;}
.marginleftinput  {margin-left: 45px;}
.marginleft {margin-left: 15px;}
.accessories { margin-top: 10px; width: 560px;}
.accessories  td{ border-bottom: #D4D4D4; border-left: #D4D4D4; border-right: #D4D4D4; border-top: 1px solid #D4D4D4; padding: 5px 0px; vertical-align: top; /*	text-align:left;*/ }
.accessories p{ font-weight: normal; margin-top: 8px; }
.accessories table td{ border: none; }
.addtobasket { text-align: right; width: 100px; }
.addtobasket td { text-align: right; }
.banner { color: #000000; font-size: 100%; font-weight: bold;  }
.blue { color: #777777; font-weight: bold; }
.border .bottom { width: 200px; }
.buttonfixwidth { width: 104px; }
.formarea{ border: none; padding-right: 5px; padding-top: 10px; text-align: right; vertical-align: top; }
.formarea .shoptable { width: 100%; }
.formarea p { margin-bottom: 10px; margin-top: 10px; padding-left: 0; padding-right: 0; }
.formarea p label { float: left; }
.formarea table { text-align: left; }
.fullwidth { width: 100%; }
.hr { background: url(../images/layup/dots.gif) repeat-x center center; font-size: 1px; height: 2px; padding-top: 10px; }
.imagelinks { margin: 3px 0 0 0; padding: 0; }
.imagelinks .on{ background: #000000; color: #FFFFFF; font-weight: bold; padding: 1px 3px;  }
.imagelinks a{ padding: 1px 3px;  }
.imagelinks a.caption { background: #FFFFFF; color: #733184 !important; padding: 1px 3px;  }
.imagelinks li{ display: inline; list-style: none; margin: 0; padding: 0px 2px 0px 0px; }
.importanttext { color: #800000; font-weight: normal; margin-bottom: 14px; margin-top: 10px; }


.productRow .itemlist_minipicture { float: left; width: 80px; padding: 0px 10px 0px 0px}
.productRow {color:#000000; clear: left;}
* html .productRow p{ /* IE 3px jog hack*/height: 1%;}
.productRow p{margin-top: 0;margin-left: 110px;}


.leadingtext { margin-bottom: 14px; margin-top: 14px; }
.maxwidth { width: 739px !important; }
.nowidth { padding-left: 0px !important; width: 100% !important; }
.price { text-transform:uppercase;}
.price img,.pricebutton img{ border-bottom: none; border-right: none; border-top: none; float: right; padding-bottom: 0; }
.price span,.pricebutton span{ color: #FFFFFF; display: block; padding: 3px 0 0 5px; }
.pricebutton { background: url(../images/layup/bkg_pricebutton.gif) no-repeat; float: right; height: 20px; text-align: left; width: 109px !important; }
.product { height: 200px; overflow:hidden; height:auto; padding-top: 10px; }
.product .qty { text-transform:uppercase; padding: 1px; vertical-align: middle;  }
.product .submit { background-color: #733184; border: none; color: #FFFFFF; cursor: pointer; font: 100% Verdana, Arial, Helvetica, sans-serif; height: 18px; padding: 0px; width: 60px; }
.product .notd{ border-bottom: 1px solid #CCCCCC; color: #5F5F5F; float: right; width: 200px; }
.product .notd td { border:0px; }
.product table { float:none; border-collapse:collapse; }
.product table td { border:1px solid #666666; }
.product td { padding-bottom: 10px; }
.product th { background-color: #733184; border-right: 1px solid #ffffff; color: #FFFFFF; }
.product th, .product td{ text-align: left; }
.signup { background-image:  url("../custom/images/sign_up.gif") !important; display: block; height: 13px; }
.productselect {  border-collapse: collapse; margin: 0 0 20px 0; padding: 0; text-align: left; }
.productselect .border { background: url(../images/layup/dots.gif) repeat-y right top; margin-right: 7px; padding-left: 0; width: 205px; }
.productselect .border div{ margin: 11px 14px 0 0; }
.productselect .bottom { background: url(../images/layup/dots.gif) repeat-x bottom; height: 2px; }
.productselect .price, .rightbox .price{ background: url(../images/layup/bkg_product_select.gif) no-repeat; height: 20px; margin-bottom: 10px; text-align: left; width: 200px; }
.productselect div{ margin: 11px 0px 0 0; }
.productselect h3 { padding-top: 5px; }
.productselect h3 a{ color: #333333;  }
.productselect img { padding-bottom: 10px; }
.productselect p { padding-right: 10px; }
.productselect td { padding-left: 10px; vertical-align: top; width: 205px; }
.box {  background: #733184; border-bottom: 0px solid #FFFFFF; border-right: 1px solid #FFFFFF; border-top:1px solid #FFFFFF; display: block; padding: 10px; text-transform: lowercase; }
.box h1 { display: none; }
.box h2 { display: none; }
/*
.rightbox{ padding: 14px 5px 10px 14px; }
*/
.latestoffers{ background-image:  url("../custom/images/latest_offer.gif"); display: block; height: 37px; }
.shoptable { border-collapse: collapse; margin-bottom: 15px; text-align: left; }
.shoptable .hi{ background: #E7E7E7; }
.shoptable .line td{ border-top: 1px solid #CCCCCC; }
.shoptable td { margin: 0 10px; padding: 5px 10px; vertical-align: top; }
.shoptable th { border-right: 1px solid #FFFFFF; height: 35px; padding-left: 10px; padding-right: 10px; text-align: left; width: 100%; }
.shoptable th a,.shoptable th a:hover { color: #FFFFFF; }
.smallform { background: #FFFFFF; color: #000000; }
.smallform, .smallformfocus { border: 0px solid #000000; font: 100% Verdana, Arial, Helvetica, sans-serif; height: 16px; padding: 3px 5px 0 5px; width: 80px; }
.smallformfocus { background: #D6D6D6; color: #000000; }
.submit { background: #733184; border: none; color: #FFFFFF; cursor: pointer; font: 100% Verdana, Arial, Helvetica, sans-serif; height: 18px; padding: 0px; }
.submitblue { background: #733184; border: none; color: #FFFFFF; cursor: pointer; font: 100% Verdana, Arial, Helvetica, sans-serif; height: 18px; padding: 0px; }

.textform, .textformfocus, .textformsubmit, .textformsubmitfocus { border: 1px solid #999999; font: 100% Verdana, Helvetica, sans-serif; padding-left: 2px; }
.textform, .textformsubmit { color: #000000; }
.textformfocus, .textformsubmitfocus { background: #D7D7D7; color: #000000; }
.textformsubmit{ cursor: pointer; }
.textsubmit,a.textsubmit ,a.textsubmit:hover,a.textsubmit:visited,.a.textsubmit:link { border: none; cursor: pointer; font: 100% Verdana, Arial, Helvetica, sans-serif; font-weight: normal !important; height: 20px; padding: 3px;  }
.topreturn { padding: 6px; text-align: left; }
.viewbutton { }
.viewbutton { background: #733184; border: none; color: #FFFFFF; cursor: pointer; font: bold 100% Verdana, Arial, Helvetica, sans-serif; height: 20px; padding: 0px; }
/*
.righttitlelinks { margin: 0; padding: 0px; }
.imgborder {border: 1px solid #cccccc !important;}
.righttitlelinks li { display: block; list-style: none outside; padding: 0 0 18px 10px; }
.righttitlelinks li a { color:#733184; font-weight: bold;  }
.righttitle h1 {display: none;}
*/
.grey {color: #777777 !important;}


/* ----- HEADINGS ----- */
h1 { font-size: 125%; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; color:#000000;  padding: 0; margin-bottom:5px; }
h2 {font-size: 1.2em; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; padding: 0 20px 0px 0px; }
h4 { font: bold 100%/140% Verdana, Arial, Helvetica, sans-serif; padding: 0 20px 0px 0px;  }
h3 { color: #000000; float:left; font-size: 1.2em; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0px 0px 4px 0px; padding: 0px; }
h4 { color: #733184; font-size: 130%; padding-left: 0px; }

/* ----- LISTS ----- */
#sitemap li { list-style-image:url(../images/layup/arrow.gif); padding-bottom: 5px;}
li{}
li p{}
ol{}
ul{}
ol li{}
ul li{}

/* ----- BREADCRUMBS ----- */

/* ----- IMAGES ----- */
img{  border:0; }
img a{}
img a:hover{}

/* ----- LINKS ----- */
a { color: #000000; text-decoration: none;  }
a:hover { text-decoration: underline;  }
a:visited, a:active, a:focus{}
a:visited{}
a:active{}
a:focus{}

/* ----- FORMS ----- */
form { margin: 0; padding: 0; }
fieldset {color: #000000; font: bold 100%/130% Verdana, Arial, Helvetica, sans-serif; border: none; margin: 0; padding: 0; white-space: nowrap; }
legend{ margin-bottom: 20px; color: #000000;}
label{ float:left; padding-right: 10px;}
input{}
textarea{}
input, textarea{color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif;}
select{color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif;}
optgroup{}
option{}

/* ----- TABLES ----- */
table{ }
caption{}
thead{}
tbody{}
tfoot{}
tr{}
tr .alt{}
th{}
td{}

/* ----- TEXT FORMATTING ----- */

p { line-height: 16px; margin-bottom: 10px;}