/* Start of CMSMS style sheet 'ITEM Layout' */
/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 75.01%;
   line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link 
a:active {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #18507C; 
}

a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
   text-decoration: none;
   background-color: #C3D4DF;
   color: #385C72;
}

/*****************
basic layout 
*****************/
body {
   background: #fff url(uploads/images/layout/item-top-band.png) repeat-x 0 0; 
   color: #333;
   margin:1em 0 1em 0; /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
   border-left: 0px dotted black;
border-right: 0px dotted black;
   margin: 0 auto;     /* this centers wrapper */
   width: 970px;
   background: transparent; 
   color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
   height: 106px; /* adjust according your image size */
   background: transparent; 
border: 0px solid red;          
}

div#header h1  {
/* you can set your own image here */
   background: transparent url(uploads/images/layout/ItemProducts-logo.gif) no-repeat 0 0; 
   display: block; 
   height: 96px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#search {
   float: right;
   width: 195px;     /* enough width for the search input box */
   text-align: right;
   padding: 5px 5px 0 5px;
height: 24px;
   margin: -110px 1em 0 0;
background: transparent url(uploads/images/layout/searchimage.gif) no-repeat 0px 4px;
border: 0px solid blue;
display: inline; position: relative;
z-order: 1;
}

div#search form{background: none; border: 0; margin: -9px 0 0 0;}

div#search form input{background: none; border: 0; margin: 0 0 0 0;}

div#search label {display:none;}

div#search form #cntnt01searchinput{ float: left; width:136px; padding-top:12px; margin: 0 0 0 0 ;}

div#search #searchbutton {float: right; background: none;  color: transparent ; cursor: hand;  padding: 0; margin: -2px 8px 0 0;}

div#search #searchbutton input {color: transparent ; z-index: 0;}


div.breadcrumbs {
   padding: 1em 0 0.0em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em 0 1.2em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 0px dotted #000;
color: #a6b4b2;
text-transform:lowercase;
}

 div.breadcrumbs span.lastitem { 
   font-weight:normal; 
 }


div.breadcrumbs a {
color: #a6b4b2;
text-decoration: none;
}


div#content {
   margin: 1.5em 0 2em 0; /* some air above and under menu and content */
}

div#homeleft {

   margin-left: 0px; 
   margin-right: 10px; 
border: 0px solid yellow;
width: 235px;


}


div#homecentre {
      float: right; /* set sidebar on the left side. Change to right to float it right instead. */
   width: 348px;    /* sidebar width, if you change this please also change #main margins */
   margin-right: 0px;
   padding-right: 0px;
   margin-left: 0px;
border: 0px solid red;
   display: inline;  /* FIX ie doublemargin bug */

}

div#homeright {
   float: right;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 348px;    /* sidebar width, if you change this please also change #main margins */
margin-right: 0px;
margin-left: 10px;
   padding-left: 0px;
border: 0px solid blue;
   display: inline;  /* FIX ie doublemargin bug */
}

div#productsright {
   float: right;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 480px;    /* sidebar width, if you change this please also change #main margins */
 /* FIX ie doublemargin bug */
   margin-left: 0px;
   margin-right: 0px;
padding: 0;
border: 0px solid blue;
margin-top: 10px;

}

div#productsleft {
   margin-left: 0px; 
   margin-right: 0px;
border: 0px solid yellow;
width: 480px;
margin-top: 10px;
float: left;
   display: inline;
padding: 0;
}


/* stephen. 2/1/9. 
Have taken height off prods title to allow for extra text. Then had to give it a border to keep everthing clearing nicely. */


div#productstitle {
	border: 1px solid white;
	width: 957px;
}


div#productoverview {
	border: 1px solid white;
	width: 475px;
}


div#productstitle p {
color: #107264;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}

div#productstitle a {
color: #107264;
text-decoration: none;
}

div#productsleft img {
   border-bottom: 0px solid #107264;
}

div#productsright img {
   border-bottom: 0px solid #107264;
}

div#productstitle img {
vertical-align: middle;
margin-right: 3px;

}


/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
   padding: 0 1%;
   width: 24%;  /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}

div#footer {
   clear:both;       /* keep footer below content and menu */
   color: #107264;
   background-color: #fff; /* same bg color as in header */
}

div#footer p {
   font-size: 1em;
   padding: 1.5em;      /* some air for footer */
   text-align: left; 
   margin:0;
}

div#footer p a {
   color: #107264; /* needed becouse footer link would be same color as background otherwise */
}

code {font-family: Verdana, Arial, sans-serif;}

.hiddenspan {display: none;}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   margin: 5px 0 5px 0;
   border-bottom: 1px solid #107264;;
}

/* Horizontal rule hr HR */

div.hr hr {
display: none;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
  display: none;
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  display: none;
}




/********************
CONTENT STYLING
*********************/
div#content {
margin-left: 0px;
width: 970px;
border-left: 0px dotted red;
border-right: 0px dotted red;


}

/* HEADINGS */
div#content h1 {
   font-size: 2em;  /* font size for h1 */
   line-height: 1em;
   margin: 0;
}
div#content h2 {
   color: #294B5F; 
   font-size: 1.5em; 
   text-align: left; 
/* some air around the text */

   padding-bottom: 1px;
/* set borders around header */

   line-height: 1.5em;
/* and some air under the border */
   margin: 0 0 0.5em 0;
}

div#strapline {width: 465px; margin: -78px 0 0 170px;  }
h2#h2strapline {font-weight: normal; color: #004c3b; font-size: 14px; line-height: 14px; margin: 0; padding: 0px 0 0 0;}

div#content h3 {
   color: #294B5F; 
   font-size: 1.3em;
   line-height: 1.3em;
   margin: 0 0 0.5em 0;
}
div#content h4 {
   color: #294B5F; 
   font-size: 1.2em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
div#content h5 {
   font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}

.redheadline {
font-size: 13px;
color: red;
font-weight: bold;
}

/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 1.5em 0;  /* some air around p elements */
   line-height:1.4em;
   padding: 0;
}
blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}


strong, b {
/* explicit setting for these */
   font-weight: bold;
}

em, i {
/* explicit setting for these */
   font-style:italic;
}

/* Coloured text */

/* Dark Green text */
.colourmedarkgreen {color: #004c3c;}

/* Medium Green text */
.colourmemedgreen {color: #107264;}

/* Red text */
.colourmered {color: #d73355;}




/* END TEXT */

/* LISTS */
div#main ul,
div#main ol,
div#main dl {
  font-size: 1.0em;
   line-height:1.4em;
   margin: 0 0 1.5em 0;

}


div#main ul li,
div#main ol li {
   margin: 0 0 0.25em 3em;
}

/* LISTS with BULLET FIX as GRAPHIC BULLET IMAGE*/



div#homeleft ul,
div#homeleft ol {
   margin: 0 0 1.5em 0em;

}

div#content ul li,
div#content ol li {
   font-size: 1.0em;
   line-height:1.4em;
   margin: 0 0 0.25em 0em;
vertical-align: top; 
list-style-type: none;
background: transparent url(uploads/images/layout/item_bullet.png) no-repeat 0 3px;
border: 0px solid red;
padding-left: 15px;
}

div#content ul li p,
div#content ol li p {

background: transparent;
}



div#content table ul li,
div#content table ol li {
   font-size: 1.0em;
   line-height:1.4em;
   margin: 0 0 0.25em 0em;
vertical-align: top; 
list-style-type: none;
background: transparent url(uploads/images/layout/item_bullet-black.png) no-repeat 0 3px;
border: 0px solid red;
padding-left: 15px;
}

div#content table ul li p,
div#content table ol li p {
   line-height:1.0em;
background: transparent;
}


div#singlecol
{
border: 0px solid blue;
}

div#singlecol ul li
{
   font-size: 1.0em;
   line-height:1.8em;
   margin: 0 0 0.25em 0em;
vertical-align: top; 
list-style-type: none;
background: transparent url(uploads/images/layout/item_bullet.png) no-repeat 0 8px;
border: 0px solid red;
padding-left: 15px;
}


div#singlecol ul 
{
margin-bottom: 20px;
}


div#singlecol p { }


/* END LISTS */



/* TABLES */

/* handles */

div.handles { background: #eceaf2 url(uploads/images/layout/greytablebottom.jpg) no-repeat 0 bottom; width: 480px; padding-bottom: 5px; margin-bottom: 10px;}

table.handles {background: transparent; width: 480px; font-family: Arial, Helvetica, sans-serif;}

table.handles th {background-color: transparent; color: red; font-size: 13px; padding: 7px 5px 5px 5px; line-height: 120%;}

table.handles td {padding: 5px; background-color: transparent;}

table.handles td ul li {margin-left: 20px; line-height: 120%;}



/* locking devices */

div.locking { background: #ccf5d0 url(uploads/images/layout/greentablebottom.jpg) no-repeat 0 bottom; width: 480px; padding-bottom: 5px; margin-bottom: 10px;}

table.locking {background: transparent; width: 480px;  font-family: Arial, Helvetica, sans-serif;}

table.locking th {background-color: transparent; color: red; font-size: 13px; padding: 7px 5px 5px 5px; line-height: 120%;}

table.locking td {padding: 5px; background-color: transparent;}

table.locking td ul li {margin-left: 20px; line-height: 120%;}


/* packing accessories */

div.packing { background: #cee9f2 url(uploads/images/layout/bluetablebottom.jpg) no-repeat 0 bottom; width: 480px; padding-bottom: 5px; margin-bottom: 10px;}

table.packing {background: transparent; width: 480px;  font-family: Arial, Helvetica, sans-serif;}

table.packing th {background-color: transparent; color: red; font-size: 13px; padding: 7px 5px 5px 5px; line-height: 120%;}

table.packing td {padding: 5px; background-color: transparent;}

table.packing td ul li {margin-left: 20px; line-height: 120%;}



/* point of sale */

div.pos2div { background: #ffeab0 url(uploads/images/layout/yellowtablebottom.jpg) no-repeat 0 bottom; width: 480px; padding-bottom: 5px; margin-bottom: 10px;}

table.pos2 {background: transparent; width: 480px;  font-family: Arial, Helvetica, sans-serif;}

table.pos2 th {background-color: transparent; color: red; font-size: 13px; padding: 7px 5px 5px 5px; line-height: 120%;}

table.pos2 td {padding: 5px; background-color: transparent;}

table.pos2 td ul li {margin-left: 20px; line-height: 120%;}


/* home page best sellers */

table.bestsellers {}

table.bestsellers td {padding-right: 8px;}


/* home page best sellers */

table#overviewtable tr {vertical-align: top;}

table#overviewtable tr td.tdoverview1 {width: 234px; padding-right: 7px; border: 0px solid red;}
table#overviewtable tr td.tdoverview2 {width: 234px; padding-right: 7px; border: 0px solid red;}
table#overviewtable tr td.tdoverview3 {width: 234px; padding-right: 7px; border: 0px solid red;}
table#overviewtable tr td.tdoverview4 {width: 234px; padding-right: 0px; border: 0px solid red;}

/* END OF TABLES */


/* CONTACT FORM */


div#call {float: right; width: 180px; margin: -80px 0 0 0; padding: 0 22px 0 0; text-align: right; border: 0px solid red; clear: both; display:inline; position: relative;}
div#call a {color: #004b3b; text-decoration: none; font-weight: bold;}
div#call a:hover {text-decoration: none; border-bottom: 1px solid #004b3b; background: none;}


div#contactform {margin: 10px 10px 10px 10px;}

.contactform fieldset {padding: 10px 0 10px 0; background-color: transparent; border: 0;} 
.contactform fieldset legend {font-weight: bold; display: none;} 
.contactform div {width: 100%; padding: 0.25em 0 0.25em 0;} 
.contactform div label {display: block; width: 139px; text-align: right; float: left; margin-right: 8px;} 
.contactform div.required {color: #555;} 
.contactform div.required input, textarea {width: 251px;} 
.contactform div.submit {margin-left: 147px; margin-bottom: 40px;} 

/* END CONTACT FORM */

/* End of 'ITEM Layout' */