@charset "utf-8";
/* CSS Document */
/* Start Page Formatting */

top, main, img, footer, p, h1, h2, h3, ul, li {
 padding: 0;
 margin: 0;
}

#item_details {
position: absolute;
margin-left: 280px;
}

#login {
 float: right;
}

#topCentreCell {
 height: 195px; /* Sets the height of the top centre cell */ 
 background: url(/images/header_bubbles.gif) #FFFFFF 615px 23px no-repeat;
}

.whitebodytext {
font: normal 8pt arial;
color: #FFFFFF;
}

.greybodytext {
 font: normal 8pt arial;
 color: #666666;
}

.greyboldtext {
 font: bold 8pt arial;
 color: #666666;
}

h1 {
 font: normal 145% arial;
 color: #666666;
}

.spacer {
 margin: 0 3px;
}

#topNav {
 float:left;
 font: bold 11px arial;
 border-bottom: 14px solid #D0EDB6;
 margin: 0 0 0 0;
}
    
#topNav ul {
 margin:0;
 padding:0;
 list-style:none;
}
    
#topNav li {
 display:inline;
 margin:0;
 padding:0;
}
    
#topNav a {
 float:left;
 background:url("/images/tableftC_new_2.gif") no-repeat left top;
 margin-right: 1px;
 padding:0 0 0 10px;
 text-decoration:none;
}

#topNav a span {
 float:left;
 display:block;
 background:url("/images/tabrightC_new_2.gif") no-repeat right top;
 padding: 5px 10px 6px 0px;
 color:#FFFFFF;
}

#topNav a.clear {
 margin-right: 0px;
} 

#topNav a span {float:none;}

#topNav a:hover {
 background-position:0% -42px;
}

#topNav a:hover span {
 background-position:100% -42px;
 color:#046678;
}

/* CLASSES for menu item ON state START */
#topNav .isOna {
 background-position:0% -42px;
 margin-right: 1px;
 }

#topNav .isOnSpan {
 background-position:100% -42px;
 color:#046678;
}
/* CLASSES for menu item ON state END */

/* PRODUCT LISTING WITHIN THE CATEGORY START */
.product_holder a {
 width: 165px;
 height: 250px;
 text-decoration: none;
 display: block;
 font: normal 75% arial;
 color: #64656B;
 background-color: #E8ECF2;
 overflow: hidden;
}
  
.product_holder {
 float: left;
 width: 165px;
 height: 250px;
 margin: 0 22px 22px 0;
 overflow: hidden;
}
  
h1.product_title {
 font: bold 100% arial;
 margin: 2px 0 0 8px;
}

.product_holder p {
 margin: 2px 0 0 8px;
 height: 5px;
}
  
.product_holder span {
 position: relative;
 left: 8px;
 top: 40px;
 font-weight: bold;
}

* HTML .product_holder span {
 position: relative;
 left: 8px;
 top: 0px;
}

.product_holder a:hover {
 background-color: #eef2ff;
}

.product_holder a, img {
 border: none;
}

/* Home page content holder */

#container_home {
 width: 696px;
 height: 255px;
}
  
#offers_container {
 float: left;
 width: 180px;
 height: auto;
 margin: 0 10px 0 0;
}
  
#content_container {
 float: right;
 width: 500px;
 height: auto;
}
  
#image_container {
 float: left;
 width: 250px;
 height: 218px; /* 118px */
}
  
#text_container {
 float: right;
 width: 230px;
 height: 198px;
 background-color: #15837A;
 padding: 10px;
}
  
#product_container {
 width: auto;
 height: 135px;
 background-color: #FFFFFF;
}
  
#product_container img{
 margin-right: 1px;
}

#clear {
   clear: both;
}
	 
/* PRODUCT LISTING WITHIN THE CATEGORY START */

/* ITEM PAGE START */

#main {
 background: url(/cms_images/background.gif) #FFFFFF bottom right no-repeat;
}
	
#item_container {
 width: 600px;
 margin-bottom: 20px;
}
	
#photo_gallery {
  float: left;
  margin: 0 20px 0px 0;
  width: 264px;
  height: 317px;
}
	
#photo_gallery img {
 float: left;
 margin: 1px 1px 0 0;
 padding: 0;
}

#photo_gallery img.last {
 margin: 1px 0 8px 0;
 padding: 0;
}
		
h2.item_titles {
 font: bold 112% arial;
 color: #A0D185;
 margin: 0 0 5px 0;
}
	
p {
 font: normal 11px Arial;
 color: #666666;
}
	
/* ITEM PAGE END */

/* PAGINATION LINKS START */

p#pagination {
 margin-bottom: 10px;
 font-weight: bold;
 color: #757c79;
}

p#pagination a {
 text-decoration: none;
 color: #98a49e;
}

p#pagination a:hover {
 text-decoration: none;
 color: #046678;
}

/* PAGINATION LINKS END */

/* SEARCH FORM START */
.search_form {
 padding: 0;
 margin: 0;
 width: auto;
}
/* SEARCH FORM END */

/* ITEM PAGE FORM FORMATTING START */

form {
 width: 335px;
 margin: 30px 0 0 0;
}

.col1 {
 text-align: right;
 width: 85px;
 height: 25px;
 margin: 3px 0 0 0;
 float: left;
 margin-right: 2px;
 font: normal 70% arial;
 color: #64656B;  
}

html>body .col2{
margin-top: 2px;
}

.col2 {
 width: 195px;
 height: 25px;
 display: block;
 float: left;
 margin: 0;
}

.col1_button {
 text-align: right;
 width: 100px;
 height: 25px;
 margin: 3px 0 0 0;
 float: left;
 margin-right: 2px;
}

.col2_button {
 width: 100px;
 height: 25px;
 margin: 3px 0 0 10px;
 float: left;
 margin-right: 2px;
}

div.row {
 clear: both;
 width: 335px;
}

.submit {
 height: 29px;
 width: 330px;
 padding-top: 5px;
 clear: both;
} 

.input {
 margin: 4px 0 5px 4px;
 padding: 1px;
 border: 1px solid #8595B2;
}

.input_hidden {
 margin: 0px 0 0 0;
 padding: 1px;
 border: none;
}
span.input_hidden {
 padding: 1px;
 line-height: 1.6em;
 font: normal 75% arial;
 color: #64656B; 
}

/* ITEM PAGE FORM FORMATTING END */

#section_div {
 width: auto; /* Creates a width automatically to the content inside */
 padding: 5px; /* Add 5px to the container so everything can "breath" */
 height: auto;
 /* overflow: hidden; /* In case they type to much, hide the content so it doesn't break the container size  */ 
}

#section_div img {
 position: relative; /* Set the image relative to the DIV (container) */
}

/* Start Navigation Formatting */

/* Bottom Menu */

#bottom_ a {
 float: left;
 display: block; /* Displays the element as a block */
 padding: 5px 0 2px 0; /* Add padding to the menu: Order = Top & Bottom, Right & Left; */
 font: bold 70% arial;
 color: #666666;
 text-decoration: none;
}

#bottom_ a:hover {
 color: #000000; /* Sets the font colour to black when the mouse is over the link */
}

.Flinks, .Flinks a {
 color: #666666;
 font-weight: bold;
 text-decoration: none;
}

.Flinks a:hover {
 color: #000000;
}

/* End Navigation Formatting */

/* End Page Formatting */

/* Start Site Layout */

#container {
 width: 775px; /* Width of layout */
 margin: 0 auto; /* Aligns centre for the browsers windows */
 padding: 0; /* Removes all padding */
 text-align: left; /* Sets the text to the left of each cell */
}

#top, #main {
 width: 775px; /* Sets the size of the table */
}

#mainContentCell, #mainContentTD {
 width: 99.5%; /* Sets the main "content" area's to full width; */
 min-height: 516px;
 height: 516px;
}

html>body #mainContentCell, #mainContentTD {
height: auto;
}

#topMenuCell, #bottomMenuCell, #footerCell {
 width: 99.8%; /* Sets the top and bottom menu's to full width minus the .2% of the whole site; */
}

#topCenterCell img {
 display: block; /* display the image in a block not paragraph or add spacing */
}

div#topCenterCell {
 position: relative; /* Sets the DIV relative to the table cell */
 overflow: hidden; /* Hides content bigger than content cell size so it doesn't change the layout */
}

#mainContent {
 margin: 0; /* Remove all margins */
 padding: 0 8px 8px 0; /* Adds 8px padding to every side around the content area */
 height: auto; /* Creates its own height to the content in the cell area */
}

#footerTD {
 padding: 5px 0px 0 0px; /* Adds padding around the footer container: Order = Top Right Bottom Left; */
 width: 100%; /* Sets the width to full width of the "main" table */
}

#search {
 padding: 8px; /* Adds 8px padding to every side around the content area */
}

/* Start Articles Display */

/* List categories on the Section page one per row */
.list_category_one_in_row {
 width: auto; /* Creates a width automatically to the content inside */
 padding: 5px; /* Add 5px to the container so everything can "breath" */
 overflow: hidden; /* In case they type to much, hide the content so it doesn't break the container size  */ 
 border: 1px solid #F5DEB3; /* Add a border of 1px solid line & colour of grey (HEX value) */
}

.list_category_one_in_row img {
 position: relative; /* Sets the image relative to the content area */
 border: 1px solid #333333; /* Add a border of 1px solid line & colour of grey (HEX value) */
}

/* List categories on the Section page two per row */
.list_category_two_in_row {
 width: 48%; /* Sets the width to 48% (100 = total width / 2 = 50...) */
 padding: 5px; /* Add 5px to the container so everything can "breath" */
 overflow: hidden; /* In case they type to much, hide the content so it doesn't break the container size  */
}

.list_category_two_in_row img {
 position: relative; /* Sets the image relative to the content area */
 border: 1px solid #333333; /* Add a border of 1px solid line & colour of grey (HEX value) */
}

/* End Article Displays */

/*Start Error Message Display */

div#error_message {
 width: 450px;
 padding: 4px 4px 0px 4px;
 margin-bottom: 8px;
 line-height: 1.5em;
 font: bold 70% arial;
 color: #FF0000;
}

/* End Error Message Display */

/* End Site Layout */

/* Start Skip Navigation for screen readers */

#skip_navigation {
 position: absolute; left: -1000em; width: 20em; /* Sets the screen reader skip navigation of site so it can't be viewed */
}

/* End Skip Navigation for screen readers */
