@charset "utf-8";
*
{
	margin: 0;
	padding: 0;
}

html {
  overflow-y: scroll;
}

body
{
	color: #000000;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 100.1%;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

h1
{
	color:#333333;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:1.2em;
	line-height: 1.1em;
	font-weight:normal;
	font-style: italic;
	margin:20px 0 20px;
	text-align: left;
}

h1.indented
{
  margin: 20px 0 20px 275px;
}

h2
{
	color:#333333;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:1.8em;
	font-weight:normal;
	padding: 20px 0 5px 0;
	margin: 0;
}

h3
{
	font-size:1.1em;
	font-weight:bold;
	margin:10px 0;
}

h4
{
	border:solid 0;
	color:#333333;
	font-size:1.2em;
	padding: 0 0 5px 0;
	font-weight: normal;	
}

h4.two
{
  font-size: 1.6em;
  padding: 10px 0 5px 0;
  background: transparent url(../img/two.jpg) no-repeat scroll right top;
}
h4.three
{
  font-size: 1.6em;
  padding: 10px 0 5px 0;
  background: transparent url(../img/three.jpg) no-repeat scroll right top;
}
h4.five
{
  font-size: 1.6em;
  padding: 10px 0 5px 0;
  background: transparent url(../img/five.jpg) no-repeat scroll right top;
}


p
{
	line-height:1.4em;
	margin:10px 0 20px 0;
}
p span
{
  font-weight: bold;
}

p.catchline
{
  background: url('../img/small_logo_line.jpg') bottom left no-repeat;
  padding: 10px 0 0 124px;
  margin: 0;
  font-size: 22px;
  line-height: 70px;
  letter-spacing: 1.2px;
}
p.prod
{
  padding: 20px 0 0 0;
}
p.nopad
{
  padding: 0;
  margin: 0;
}

a:link, a:visited
{
	color:#333333;
	text-decoration: none;

}

a:hover, a:active, a:focus
{
	color:#666666;
}

a.pdf
{
  background: url(./img/pdf.gif) no-repeat;
  padding: 0 0 0 20px;
}

ul
{
	list-style-position:outside;
	list-style-type: disc;
	padding:0 0 0 10px;
	margin:0 0 0 20px;
}

ol
{
  list-style-position:outside;
  list-style-type:lower-alpha;
  padding:0 0 0 30px;
}

li
{
	padding:0;
	line-height:1.4em;
	margin:10px 0;
}
li span
{
  font-weight: bold;
}
img
{
	border:0;
}

img.right {
  float: right;
}

img.red {
  float: right;
  padding: 35px 0 0 0;
}

.error-message {
  color: red;
  padding: 0 0 10px 0;
}

#container
{
	position: relative;
	background: #fff;
	border: none;
	color: #333333;
	font-size: 0.8em;
	margin: 0 auto;
  width: 100%;
	text-align: left;
}

.left_container
{
	max-width: 2400px;
  background: url('../img/line.jpg') bottom left no-repeat;
}
.left_container_min
{
  max-width: 2400px;
  margin: -1px 0 0 0;
  padding: 30px 0 0 0;
  background: #ffffff url('../img/line.jpg') bottom left no-repeat;
}

.right_container
{
	max-width: 2400px;
  background: url('../img/line.jpg') bottom right no-repeat;
}

.inner {
  width: 800px;
  margin: 0 auto;
  border-bottom: 1px solid #CCCCCC;
  min-height: 290px;
  position: relative;
}

.inner_margin {
  width: 800px;
  margin: 30px auto 0;
  border-bottom: 1px solid #CCCCCC;
  min-height: 290px;
}

.inner_min {
  width: 800px;
  margin: -1px auto 0;
  border-bottom: 1px solid #CCCCCC;
  background: #ffffff;
}

.inner_slide {
  width: 800px;
  margin: -1px auto 0;
  background: #ffffff;
}

.inner_product {
  width: 800px;
  margin: 0 auto;
  border-bottom: 1px solid #CCCCCC;
  min-height: 50px;
}

.clear
{
  clear: both;
}

#flashMessage, #authMessage
{
  bottom:20px;
  position:absolute;
  right:0;
  text-align:right;
  width:400px;
  color: red;
  font-weight: bold;
}

/* ############## HEADER STYLES ################# */

#header
{
  width: 800px;
  height: 199px;
  margin: 0 auto;
  padding: 0 0 20px 0px;
  border-bottom: 1px solid #CCCCCC;
  background: #ffffff;
  position: relative;
}

#logo
{
	width: 400px;
	position:absolute;
	top: 80px;
	left: 0;
	text-align:left;
}

#print_logo
{
  position: absolute;
  height: 0;
}

#print_logo img
{
  height: 0;
  width: 0;
}

/* ############## MAIN NAVIGATION ################# */

#nav {
/*	position: relative;
	 float: right;
*/
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	padding: 20px 0 0 0;
}
#nav ul {
	list-style: none;
	text-align: right;
}
#nav ul li {
	display: inline;
}
#nav ul li a:link, #nav ul li a:visited {
	color: #333333;
	text-decoration: none;
	padding: 10px 8px 0 21px;
	background: url('../img/nav_logo.gif') bottom left no-repeat;
}
/*Blue menu item */

#nav ul li.current a.blue:link, #nav ul li.current a.blue:visited {
	color: #666666;  
  background: url('../img/nav_logo_blue.gif') bottom left no-repeat;
}
#nav ul li a.blue:hover, #nav ul li a.blue:active, #nav ul li a.blue:focus {
	color: #666666;
	background: url('../img/nav_logo_blue.gif') bottom left no-repeat;
}

/*Grey menu item */
#nav ul li.current a.grey:link, #nav ul li.current a.grey:visited {
	color: #666666;  
  background: url('../img/nav_logo_grey.gif') bottom left no-repeat;
}
#nav ul li a.grey:hover, #nav ul li a.grey:active, #nav ul li a.grey:focus {
	color: #666666;
	background: url('../img/nav_logo_grey.gif') bottom left no-repeat;
}

/*Green menu item */
#nav ul li.current a.green:link, #nav ul li.current a.green:visited {
	color: #666666;  
  background: url('../img/nav_logo_green.gif') bottom left no-repeat;
}
#nav ul li a.green:hover, #nav ul li a.green:active, #nav ul li a.green:focus {
	color: #666666;
	background: url('../img/nav_logo_green.gif') bottom left no-repeat;
}

/*Yellow menu item */
#nav ul li.current a.yellow:link, #nav ul li.current a.yellow:visited {
	color: #666666;  
  background: url('../img/nav_logo_yellow.gif') bottom left no-repeat;
}
#nav ul li a.yellow:hover, #nav ul li a.yellow:active, #nav ul li a.yellow:focus {
	color: #666666;
	background: url('../img/nav_logo_yellow.gif') bottom left no-repeat;
}

/*Red menu item */
#nav ul li.current a.red:link, #nav ul li.current a.red:visited {
	color: #666666;  
  background: url('../img/nav_logo_red.gif') bottom left no-repeat;
}
#nav ul li a.red:hover, #nav ul li a.red:active, #nav ul li a.red:focus {
	color: #666666;
	background: url('../img/nav_logo_red.gif') bottom left no-repeat;
}



/* ############## FUNCTION NAVIGATION ################# */

#function_nav {
	position: absolute;
	top: 45px;
	right: 0;
	width: auto;
	padding: 0px 0 0 0;
}
#function_nav ul {
	list-style: none;
	text-align: right;
}
#function_nav ul li {
	display: inline;
}
#function_nav ul li a:link, #function_nav ul li a:visited {
	color: #666666;
	text-decoration: none;
	padding: 10px 8px 0 8px;
}

#function_nav ul li a:hover, #function_nav ul li a:active, #navfunction_ ul li a:focus {
	color: #333333;
}

/* ############## SPLASH AREA ############### */


.splash_left {
  width: 221px;
  height: 289px;
  padding: 1px 30px 0 0;
  position: relative;
  float: left;
  background: url('../img/vertical_line.jpg') bottom right no-repeat;
}

.splash_left p {
  font-size: 4em;
  line-height: 1em;
}

.splash_left p span {
  color: #666666;
  font-weight: normal
}

.splash_right {
  position: relative;
  width: 530px;
  height: 269px;
  padding: 5px 0 0 0;
  float: right;
}

/* ############## MAIN CONTENT AREA ############### */

.main_right
{
  width: 530px;
  padding: 2px 0 20px 20px;
  background: url('../img/long_vertical_line.jpg') top left no-repeat;
  margin: 0;
  float: right;
}
.main_right h2
{
  padding: 20px 0 5px 0;
  font-size: 1.8em;
}

.main_right h2.home
{
  margin: 20px 0 5px 0;
  padding: 0;
}

.main_right h3
{
  font-size:1.4em;
	font-weight:normal;
	margin:20px 0 0 0;
}

.main_right a:link,.main_right a:visited,
.main_fullwidth a:link,.main_fullwidth a:visited 
{
  color: #666666;
  padding: 10px 0 0 0;
}

.main_right a:hover, .main_right a:active, .main_right a:focus,
.main_fullwidth a:hover, .main_fullwidth a:active, .main_fullwidth a:focus
{
  color: #333333;
}

.main_right a.dark:link,.main_right a.dark:visited,
.main_fullwidth a.dark:link,.main_fullwidth a.dark:visited 
{
  color: #333333;
  padding: 10px 0 0 0;
}

.main_right a.dark:hover, .main_right a.dark:active, .main_right a.dark:focus,
.main_fullwidth a.dark:hover, .main_fullwidth a.dark:active, .main_fullwidth a.dark:focus
{
  color: #666666;
}

.main_right a.pdf
{
  background: url(../img/pdf.gif) no-repeat;
  padding: 0 0 0 25px;
}

.main_left
{
  width: 230px;
  padding: 10px 20px 0 0;
  float: left;
}

.main_left p {
  font-size: 3.5em;
  line-height: 1em;
  text-align: right;
}

.main_left p span {
  color: #666666;
  font-weight: normal
}

.main_fullwidth {
  position: relative;
  float: left;
  width: 100%;
}

/* ##################### PRODUCT PAGES ################### */

/*slideshow overlay */

.overlay_a{ 
  background: url(../img/horizontal-thumbnails-a.png) no-repeat left;
  border-left:1px solid #CCCCCC;
  bottom:0;
  height:60px;
  position:absolute;
  left:250px;
  width:10px;
  z-index:1000;
}

.overlay_b {
  background: url(../img/horizontal-thumbnails-b.png) no-repeat right;
  bottom:0;
  height:60px;
  position:absolute;
  right:-10px;
  width:10px;
  z-index:1000;
}


.product {
  position: relative;
  width: 530px;
  padding: 20px 0 0px 19px;
  border-left: 1px solid #CCCCCC;
  margin: 0;
  float: right;
}

.product p {
  margin: 5px 0 15px 0;
}

.product p.price {
  font-size: 1.6em;
  margin: 10px 0 0 0;
}

.product p.sub {
  margin: 0;
}

.product p.out_stock
{
  font-size: 1.1em;
  padding: 10px 10px 10px 10px;
  text-align: right;
  font-weight: bold;
}

.product_image {
  position: relative; 
  float: left;
  width: 50%;
}
.product_image img{
  margin: 10px 0 10px 0;
  text-align: center;
}

.product_details {
  position: relative;
  float: right;
  min-height: 140px;
  width: 45%;
  padding: 0 0 80px 0;
}

.product_details img.hover {
  height: 0;
  width: 0;
  border-width: 0;
}

.product_details p:hover img.hover {
  position: absolute;
  height: auto;
  width: auto;
  top: 50px;
  left: -291px;
}

.product_details a img.hover {
  height: 0;
  width: 0;
  border-width: 0;
}

.product_details p:hover img.hover {
  position: absolute;
  height: auto;
  width: auto;
  top: 50px;
  left: -291px;
}

.product_details a:hover img.hover {
  position: absolute;
  height: auto;
  width: auto;
  top: 50px;
  left: -291px;
}

.product_details .submit
{
  position: absolute;
  bottom: 10px;
  right: 0px;
  text-align: right;
}

.product_sell
{
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 55px;
}

.product_price
{
  position: absolute;
  bottom: 10px;
  left: 0px;
  text-align: right;
}

.add_button
{
  position: relative;
  float: right;
  text-align: right;
  padding: 9px 0 0 0;
}


/* ####################  SHOPPING BASKET ################## */
div.basket
{
  position: relative;
	float: right;
	width: 100%;
	margin: 0 0px 0 0px;
	padding: 15px 0 15px 0;
}

div#continueShoppingBtn
{
  padding: 10px 0 20px 0;
  width: 175px;
  height: 50px;
  position: relative;
  float: left;
}

div#updateBasketBtn
{
  padding: 10px 0 20px 0;
  width: 175px;
  height: 50px;
  position: relative;
  float: right;
}

div#checkoutBtn
{
  padding: 30px 0 0 0;
  width: 175px;
  height: 50px;
  position: relative;
  float: right;
}

div#submitOrderBtn
{
  padding: 10px 0 20px 0;
  width: 175px;
  height: 50px;
  position: relative;
  float: right;
  clear: both;
}

form.basket
{
  width: 100%;
  margin: 30px 0 0 0;
}

table#basket
{
  width: 100%;
}

table#basket th
{
  padding: 5px;
  background: #F8F7F5;
  border: none;
  border-bottom: 1px solid #cccccc;
}

th#remove, th#image, th#price, th#subtotal
{
  width: 10%;
}
table#basket th#fifteen
{
  width: 15%;
  text-align: right;
  padding-right: 20px;
}

th#quantity
{
  width: 5%;
}
th#image
{
  width: 10%;
}
th#name
{
  text-align: left;
  padding-left: 10px;
}

table#basket tr td
{
  background: #FFFFFF;
}

table#basket tr.altrow td
{
  background: #ffffff
}

table#basket td
{
  padding: 10px 5px 5px 5px;
  border-color: #cccccc;
}
table#basket td#quantity
{
  padding: 5px;
}
table#basket td#price, table#basket td#subtotal
{
  text-align: right;
  padding: 10px 20px 5px 5px;
}
table#basket td#image, table#basket td#remove 
{
  text-align: center;
  padding: 10px 10px 5px 0;
}
table#basket td#name
{
  text-align: left;
  padding: 10px 5px 5px 10px;
}

.basket_totals
{
  clear: right;
  width: 300px;
  float: right;
  text-align: right;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 10px;

}

.basket_totals p
{
  font-size: 0.8em;
  padding-top: 10px;
  padding-right: 7px;
}

table#basket_totals
{
  width: 100%;
  background: transparent;
  border: none;
}

table#basket_totals tr td
{
  background: transparent;
  border: none;
  text-align: right;
  padding: 5px 7px 5px 7px;
}

table#basket_totals tr td span
{
  font-size: 1.3em;
  font-weight: bold;
}
/* #######################  CHECKOUT ###################### */
div.input_float_20
{
  width: 20%;
  float: left;
}

div.input_float_25
{
  width: 25%;
  float: left;
}

div.input_float_30
{
  width: 30%;
  float: left;
}

div.input_float_35
{
  width: 35%;
  float:left;
}

div.input_float_50
{
  width: 50%;
  float: left;
}
div.input_float_100
{
  padding: 40px 0 0 0;
  width: 100%;
  float: left;
}

div.input_float_select
{
  width: 50%;
  float: left;
  margin: 10px 0 20px 0;
}

div#checkoutAddresses
{
  position: relative;
  float: left;
  width: 100%;
}
div#checkoutAddresses h2
{
  font-size: 1.4em;
  border-bottom: 1px solid #cccccc;
  margin: 0 0 20px 0;
}

div#checkoutDetails
{
  position: relative;
  float: left;
  width: 60%;
}

div#checkoutAddresses p, div#checkoutDetails p
{
  font-size: 13px;
}

div#checkoutAddresses p span, div#checkoutDetails p span
{
  font-size: 13px;
}

div#checkoutBillingAddress
{
  position: relative;
  float:left;
  width: 100%;
  margin: 0px 0px 0 0;
  padding: 0px 0;
}

div#checkoutDeliveryAddress
{
  position: relative;
  float:left;
  width: 100%;
  margin: 0px 0 0 0;
  padding: 0px 0;
}

.checkout_totals
{
  clear: right;
  width: 220px;
  float: right;
  text-align: right;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 10px;

}

.checkout_totals p
{
  font-size: 0.8em;
  padding-top: 10px;
}

#continueBtn {
  position: relative;
  float: right;
  margin: 30px 0;
  width: 175px;
  height: 30px;
}

#checkoutReview
{
  width: 100%;
}

#checkoutReview h2
{
  border-bottom: 1px solid #cccccc;
}


/* #######################  FORM  ###################### */

div#form_body {
	height: 330px;
	margin: 20px 0 0 0;
	padding: 0;
}
div.form_left {
	float: left;
	width: 50%;
}
div.form_right {
	float: left;
	width: 50%;
}
div.form_center {
	float: left;
	width: 100%;
	height: auto;
	padding: 0.6em 0 20px 0;
}
form div {
	margin: 0;
	padding-top: 0.1em;
}
form div label {
	width: 100%;
	font: normal 1em Verdana, Arial, Helvetica, Verdana, sans-serif;
}

form div label.bold
{
  font-weight: bold;
}

form div.radio label {
  width: 80%;
  float: left;
  height: 25px;
  line-height: 1.8em;
}
form div.radio label img{
  position: relative;
  float: left;
}
form div input {
	margin: 0 0 10px 0;
	padding: 0.2em 0 0 0;
	float: left;
	clear: both;
}
form div input[type=text], form div input[type=password] {
  width: 90%;
}
form div input[type=radio] {
  margin: 5px 5px 8px 0;
  padding: 0;
  height: 12px;
  width: 13px;
}
form div input[type=checkbox] {
  margin: 2px 10px 5px 5px;
}

form div input[type=submit] {
  width: 40%;
  margin: 0 0 0 30%;
}
form div input.button {
	width: 30%;
	height: 30px;
	margin: 3% 0% 0% 35%;
	padding: 0;
}
form div textarea {
	width: 100%;
	float: left;
	font-family: verdana;
	font-size: 1em;
}

/* ############# FOOTER / FOOTER NAVIGATION ############ */

#footer
{
	width: 799px;
  margin: 10px auto 0;
  height: 120px;
  border-left: 1px solid #CCCCCC;
}

#footer ul
{
	margin:0 0 0 10px;
	padding:10px 0 0 0px;
	text-align:left;
	font-size: 1em;
}

#footer ul li
{
	position: relative;
	color:#333333;
	display: inline;
	float: left;
	width: 176px;
	text-align: left;
	padding:10px;
	margin: 0;
	font-weight: bold;
}


#footer ul li ul
{
  margin: 0;
  padding: 0;
}

#footer ul li ul li
{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}


#footer ul li ul li a:link,#footer ul li ul li a:visited
{
	color:#333333;
	font-weight:normal;
	text-decoration:none;
}

#footer ul li ul li a:hover,#footer ul li ul li a:active,#footer ul li ul li a:focus
{
	color:#999999;
}


#footer p
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
	font-size: 0.8em;
	color: #666666;
	text-align: center;	
}