/* CMS CSS Document */

body {
        font-size: 100% ;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0px;
        padding: 30px 20px 50px 20px;
        text-align: center; /* this centers the container in IE 5* browsers.  */
        color: #000;
        background-image: url(/images/cms/bg_body.jpg);
        background-repeat: repeat-x;
        background-color: #D1D1D1;
}

div.hold {
        width: 100%;  /* this will create a container 99% of the browser width */
        background-color: #FFF;
        margin: 0 auto; /* float in the middle */
        border: 1px solid #FFF;
        text-align: left; /* this overrides the text-align: center on the body element. */
        min-width: 800px;
}

div.header {
        width: 100%;
        position: relative;
        float: left;
        margin: 0px;
        /* background-image     - set in color CSS */
        background-repeat: repeat-x;
        background-color: #333;
        padding: 20px 0px 0px 0px;
}

div.preferences {
        position: relative;
        display: block;
        width: 320px;
        float: right;
        margin: 15px 20px 0px 0px;
}

div.logo {
        position: relative;
        display: inline;
        margin: 0px 0px 35px 30px;
        width: 420px;
        height: 40px;
        float: left;
}

div.logo img {
        display: block;
}

div.preferences p {
        font-size: 70%;
        line-height: 15px;
        font-weight: normal;
        margin: 0;
        padding: 0;
        text-align: right;
}

div.preferences p a:link, div.preferences p a:visited {
        color: #FFF;
        font-weight: bold;
        padding: 0px 10px 0px 10px;
}

div.preferences p a:hover {
        color: #DDD;
}

div.preferences label {
        color: #FFF;
        line-height: 15px;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-align: right;
}

div.preferences form {
        margin: 15px 0 0 0;
        padding: 0;
}

/* TOP LEVEL NAVIGATION */

/* UL STYLE FOR TOP NAV */
ul.toplevel {
        list-style-type: none;
        margin: 0px 0px 0px 30px;
        padding: 0px 0px 0px 0px;
}

/* LI STYLE FOR TOP NAV LINK OFF */

ul.toplevel li {
        display: inline;
        float: left;
        margin: 7px 5px 0px 0px;
        font-size: 70%;
        font-weight: bold;
        line-height: 11px;
}

ul.toplevel li a:link, ul.toplevel li a:visited {
        display: block;
        padding: 5px 30px 5px 30px;
        margin: 0px 0px 0px 0px;
        text-decoration: none;
}

ul.toplevel li a:hover {
        display: block;
        padding: 5px 30px 5px 30px;
        text-decoration: none;
}

/* LI STYLE FOR TOP NAV LINK ON */
ul.toplevel li.on {
        display: inline;
        float: left;
        border-bottom: 0px;
        margin: 4px 5px 0px 0px;
        font-size: 70%;
        font-weight: bold;
        line-height: 11px;
}

ul.toplevel li.on a:link, ul.toplevel li.on a:visited {
        display: block;
        padding: 7px 30px 7px 30px;
        text-decoration: none;
}

ul.toplevel li.on a:hover {
        display: block;
        padding: 7px 30px 7px 30px;
        text-decoration: none;
}

/* SECOND LEVEL NAVIGATION */
ul.secondlevel {
        list-style-type: none;
        margin: 0 0 0 40px;
        padding: 0 0 30px 0;
}

/* SECOND LEVEL NAVIGATION OFF */
ul.secondlevel li {
        display: inline;
        float: left;
        margin: 9px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 70%;
        font-weight: normal;
        line-height: 11px;
}

ul.secondlevel li a:link, ul.secondlevel li a:visited {
        display: block;
        padding: 0px 20px 0px 20px;
        text-decoration: none;
}

ul.secondlevel li a:hover {
        display: block;
        padding: 0px 20px 0px 20px;
        text-decoration: none;
}

/* SECOND LEVEL NAVIGATION ON */
ul.secondlevel li.on a {
        font-weight: bold;
}

ul.secondlevel li.last {
        border-right: 0px;
}

/* PAGE HELP */
div#help_wrapper {
        position: relative;
        display: none; /* Hide help by default */
        float: left;
        background-color: #EEE;
        padding: 15px 60px 12px 60px;
}

div.help p {
        color: #333;
        font-size: 70%;
        line-height: 15px;
        font-weight: normal;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
}

img.icon_help {
        float: right;
        display: block;
        border: 0px;
        margin: 0px 0px 0px 10px
}

/* PAGE CONTENT */
div.contentholder {
        position: relative;
        display: block;
        float: left;
        background-color: #FFF;
        width: 100%;
        padding: 0px 0px 20px 0px; /* Dont change this!! */
        text-align: left;
}

div.contentholder h1 {
        color: #333;
        font-size: 100%;
        line-height: 15px;
        font-weight: bold;
        margin: 20px 0px 20px 60px;
        padding: 0px 0px 0px 0px;
}

div.contentholder p.header {
        font-size: 75%;
        line-height: 24px;
        font-weight: bold;
        margin: 0px 40px 0px 40px;
        padding: 0px 0px 0px 20px;
}


div.contentholder p.header img {
        float: right;
        display: inline;
        border: 0px;
        margin: 4px 22px 0px 0px
}

div.contentholder p.header a:link.message, div.contentholder p.header a:visited.message {
        color: #FFF;
        text-decoration: none;
        margin: 0px 20px 0px 0px;
}

div.contentholder p.header a:hover.message {
        text-decoration: underline;
}

div.greycontent_wrapper {
        margin: 0px 40px 20px 40px;
        padding: 20px 0px 0px 0px;
        background-color: #EEE;
}

div.greycontent_wrapper p {
        color: #333;
        font-size: 70%;
        line-height: 15px;
        font-weight: normal;
        margin: 0px 0px 15px 0px;
        padding: 0px 0px 0px 00px;
}

div.greycontent_wrapper p.key {
        color: #333;
        font-size: 70%;
        line-height: 15px;
        font-weight: normal;
        margin: 0px 0px 15px 0px;
        padding: 0px 0px 0px 00px;
        vertical-align: middle;
}

div.greycontent_wrapper p.key span {
        background-color: #F6F6F6;
        padding: 7px 7px 7px 7px;
        margin: 0px 0px 0px 10px;
}

div.greycontent_wrapper p.key img {
        vertical-align: middle;
}

/*
div.greycontent_wrapper ul {
        margin: 0px 0px 15px 30px;
        padding: 0px 0px 0px 0px;
}

div.greycontent_wrapper ul li {
        color: #333;
        font-size: 70%;
        line-height: 15px;
        font-weight: normal;
        margin: 0;
        padding: 0;
}

div.greycontent_wrapper ul li ul li {
        font-size: 100%;
}
*/

.cmsicon {

}

div.greycontent_wrapper a {
        color: #333;
        font-weight: bold;
        text-decoration: underline;
}

label {
        font-weight: bold;
}

div.greycontent_wrapper input, textarea {
        font-family: arial;
        font-size: 100%;
        padding: 2px;
        border: 1px solid #CCC;
        width: 310px;/* carefull - this sets ALL the inputs in the wrapper div (overide with style="") */
        margin: 0px 0px 0px 0px;
}

div.greycontent_wrapper input.button {
        font-family: arial;
        font-size: 100%;
        padding: 1px 8px 1px 8px;
        border: 2px double #999;
        margin: 0px 0px 0px 0px;
        width: 80px;
}

div.greycontent_wrapper input.radio     {
        font-family: arial;
        font-size: 100%;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        margin: 0;
}

div.greycontent_wrapper button.button {
        width: 120px;
        border: 2px double #999;
        font-size: 100%;
}

.radio {
        font-size: 100%;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        margin: 0;
}

div.greycontent_wrapper input.threecol, textarea.threecol {
        font-family: arial;
        font-size: 100%;
        padding: 2px;
        border: 1px solid #CCC;
        width: 200px;/* carefull - this sets ALL the inputs in the 3 col wrapper div (overide with style="") */
        margin: 0px 0px 0px 0px;
}

div.content_1_column {
        width: 96%;
        display: inline;
        float: left;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 0% 2%;
        background-color: #EEE;
}

div.content_1_column h2, div.content_2_column h2 {
        color: #333;
        font-size: 90%;
        line-height: 15px;
        font-weight: bold;
        margin: 0px 0px 10px 0px;
        padding: 0px 0px 0px 0px;
}

span.label_spacer {
        margin-right: 120px;
}

div.form_left {
        float: left;
        width: 180px;
        height: 30px;
}

div.form_left label {
        color: #333;
        font-size: 80%;
}

div.form_right {
        float: left;
        height: 30px;
        color: #333;
        font-size: 80%;
}

div.content_2_column {
        width: 47%;
        display: inline;
        float: left;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 0% 2%;
        background-color: #EEE;
}

div.content_3_column {
        width: 31%;
        display: inline;
        float: left;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 0% 2%;
        background-color: #EEE;
}

/* PAGE LISTS */
/************************************
*  Spacing between the LI elements  *
*  is controlled by padding on the  *
*  images.                          *
*  Due to an IE6 issue.             *
************************************/
ul.sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 70%;
}

ul.sortable ul {
        font-size: 100%
}

ul.sortable img {
        border: 0px;
        vertical-align: middle;
        margin: 0px 6px 0px 0px;
        padding: 5px 0;
        display: inline;
}

ul.sortable li {
        color: #333;
        font-size: 100%;
        font-weight: normal;
        margin: 0;
        padding: 0 0 0 20px;
        background-color: #DDD;
        border-top: 4px solid #EEE;
        cursor: move;
}

ul.sortable li a:link, ul.sortable li a:visited {
        text-decoration: none;
}

ul.sortable li a:hover {
        text-decoration: underline;
}

/* UNDRAGABLE UL */
ul#sortable-categories-nodrag {
        list-style-type: none;
        margin: 10px 0px 10px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 70%
}

ul#sortable-categories-nodrag li {
        color: #333;
        font-size: 100%;
        line-height: 16px;
        font-weight: normal;
        margin: 0px 0px 0px 0px;
        padding: 8px 0px 8px 10px;
        background-color: #DDD;
}

ul#sortable-categories-nodrag li img {
        border: 0px;
        vertical-align: middle;
        margin: -2px 6px 0px 0px;
}

/* PRODUCTS TABLE */
table.products {
        width: 100%;
        font-size: 70%;
        margin: 0px 0px 20px 0px;
}

table.products th
{
background-color: #666;
color: #FFF;
text-align: left;
padding: 5px 5px 5px 10px;
}

table.products td
{
background-color: #DDD;
color: #333;
text-align: left;
padding: 5px 5px 5px 10px;
vertical-align: middle;
}

table.products td a
{
text-decoration: none;
}

table.products td img
{
vertical-align: middle;
}

table.products td img
{
border: 0px;
margin: 0px 5px 0px 0px;
}

table.products th.name
{width: 20%;}
table.products th.code
{width: 20%;}
table.products th.category
{width: 20%;}
table.products th.material
{width: 15%;}
table.products th.colour
{width: 10%;}
table.products th.icons
{width: 15%;}

/* CONTACTS TABLE */

table.contact, table.widgets, table.retailer, table.messages
{
/*border: 1px solid #FF0000;*/
width: 100%;
font-size: 70%;
margin: 0px 0px 20px 0px;
}

table.contact th, table.widgets th, table.ranges th, table.retailer th, table.messages th
{
background-color: #666666;
color: #FFFFFF;
text-align: left;
padding: 5px 5px 5px 5px;
}

table.contact td, table.widgets td, table.ranges td, table.retailer td, table.messages td
{
background-color: #DDDDDD;
color: #333333;
text-align: left;
padding: 5px 5px 5px 5px;
vertical-align: middle;
}

table.contact td a, table.widgets td a, table.retailer td a, table.messages.a
{
text-decoration: none;
}

table.contact td img, table.widgets td img, table.retailer td img, table.messages td img
{
vertical-align: middle;
border: 0px;
margin: 0px 5px 0px 0px;
}

table.contact th.name {width: 20%;}
table.contact th.company {width: 10%;}
table.contact th.email {width: 15%;}
table.contact th.telephone {width: 10%;}
table.contact th.address {width: 10%;}
table.contact th.enquiry {width: 15%;}
table.contact th.contact {width: 10%;}
table.contact th.marketing {
        width: 12%;
        text-align: center;
}
table.contact th.options, table.widgets th.options {
        width: 5%;
        text-align: center;
}

table.retailer th.username {width: 15%;}
table.retailer th.name {width: 15%;}
table.retailer th.email {width: 40%;}
table.retailer th.telephone {width: 15%;}
table.retailer th.options {width: 15%;}

table.messages th.from { width: 20%; }
table.messages th.subject { width: 55%; }
table.messages th.date { width: 15%; }
table.messages th.options { width: 10%; }

table.widgets {
        width: 100%;
        font-size: 70%;
        margin: 0px 0px 20px 0px;
}

table.widgets th.name { width: 80% }
table.widgets th.product_code { width: 4% }
table.widgets th.page_title { width: 90% }
table.widgets th.active, table.widgets td.active, table.ranges th.active, table.ranges td.active {
        width: 10%;
        text-align: center;
}

table.ranges {
        width: 750px;
        font-size: 70%;
   margin: 0px 0px 20px 0px;
}

/* USERS TABLE */

table.users
{
/*border: 1px solid #FF0000;*/
width: 100%;
font-size: 70%;
margin: 0px 0px 20px 0px;
}

table.users th
{
background-color: #666666;
color: #FFFFFF;
text-align: left;
padding: 5px 5px 5px 5px;
}

table.users td
{
background-color: #DDDDDD;
color: #333333;
text-align: left;
padding: 5px 5px 5px 5px;
vertical-align: middle;
}

table.users td a
{
text-decoration: none;
}

table.users td img
{
vertical-align: middle;
}

table.users td img
{
border: 0px;
margin: 0px 5px 0px 0px;
}

table.users th.username
{width: 20%;}

table.users th.name
{width: 20%;}

table.users th.telephone
{width: 20%;}

table.users th.email
{width: 20%;}

table.users th.options
{width: 20%;}

/* Begin Contacts table styles */
table.contact tbody tr td.marketing, table.contact tbody tr td.options {
        text-align: center;
}
/* End Contacts table styles */


/* FLASH MESSAGES */
div.notice {
        background-color: #DDD;
        margin: 0px 0px 20px 0px;
        padding: 10px 10px 10px 40px;
        font-size: 75%;
        color: green;
}

div.error {
        background-color: #DDD;
        margin: 0px 0px 20px 0px;
        padding: 10px 10px 10px 40px;
        font-size: 75%;
        color: red;
}

.clear/*this div make the parent DIV strench to the height of the child - fix for firefox. but the div is 1px high in IE*/
{
clear: both;
font-size: 0em;
width: 0px;
height: 0px;
line-height: 0px;
overflow: hidden;
}

/* applying the wysiwyg style means tinymce will make the textarea a wysiwyg affair automatically:-) */
textarea.wysiwyg {
        width: 660px;
        height: 620px;
}

textarea.wysiwyg_small {
        width: 400px;
        height: 300px;
}


/* ERROR FORM FIELDS */

div.fieldWithErrors
{
margin: -15px 0px 15px 0px; /* Bit of a hack but it works! */
padding: 0px 0px 0px 0px;
}

div.fieldWithErrors input, div.fieldWithErrors textarea
{
font-family: arial;
font-size: 70%;
padding: 2px;
border: 1px solid #FF0000;
width: 310px;/* carefull - this sets ALL the inputs in the wrapper div (overide with style="") */
margin: 0px 0px 0px 0px;
}


/* FILES PAGE */

div.files
{
position: relative;
float: left;
background-color: #DDDDDD;
width: 150px;
margin: 0px 10px 10px 0px;
}

div.files p
{
padding: 5px;
margin: 0px 0px 10px 0px;
}

div.files img
{
dsiplay: block;
vertical-align: middle;
}

div.files img.delete
{
dsiplay: block;
vertical-align: middle;
margin-right: 5px;
border: 0px;
}

/* PRODUCT ADMIN PAGE */

#prod_other_images, #prod_other_files
{
background-color: #F6F6F6;
overflow: auto;
margin-top: 30px;
height: 290px;
}

#prod_other_images p, #prod_other_files p
{
margin: 10px 10px 20px 10px;
}

#prod_other_images p img, #prod_other_files p img
{
margin-right: 10px;
float: left;
}

/* END PRODUCT ADMIN PAGE */

/* CROSS SELL */
div.auto_complete {
        width: 350px;
        background: #fff;
}

div.auto_complete ul {
        border: 1px solid #888;
        margin: 0;
        padding: 0;
        width: 100%;
        list-style-type: none;
}

div.auto_complete ul li {
        margin: 0;
        padding: 3px;
}

div.auto_complete ul li.selected {
        background-color: #ffb;
}

div.auto_complete ul strong.highlight {
        color: #800;
        margin:0;
        padding:0;
}

div.break
{
border-top: 1px dashed #CCCCCC;
margin: 0px 0px 10px 0px;
}

ul.cross_sell_items
{
border: 1px solid #FF0000;
}

ul.cross_sell_items li
{
border: 1px solid #990000;
}

ul.cross_sell_items li a img
{
border: 0px;
}

ul.assigned_accounts {
        list-style-type: none;
        float: left;
}

ul.assigned_accounts li {
        float: left;
        margin: 20px;
        width: 330px;
}


/* CROSS SELL ITEMS */

#cross_sell_items p.cross_sell_items
{
display: block;
background-color: #F6F6F6;
margin: 0px 0px 5px 0px;
padding: 5px;
overflow: hidden;
}

p.cross_sell_items img.image
{
margin-right: 10px;
}

#cross_sell_items p.cross_sell_items span
{
float: left;
margin: 0px 10px 0px 0px;
}

#cross_sell_items p.cross_sell_items img
{
border: 0px;
vertical-align: middle;
display: inline;
}

/**** PAGINATION ****/
div.pagination
{
padding: 0px 0px 5px 0px;
margin: 0px;
font-size: 75%;
}

div.pagination a
{
padding: 2px 5px 2px 5px;
margin: 2px;
/*border: 1px solid #9AC2B9; All pagination borders & backgrounds where this*/
border: 1px solid #939598;
text-decoration: none;
color: #333333;
}

div.pagination a:hover, div.pagination a:active
{
border: 1px solid #939598;
color: #000;
}

div.pagination span.current
{
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #939598;
font-weight: bold;
background-color: #939598;
color: #FFF;
}

div.pagination span.disabled
{
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #bbb;
color: #bbb;
}

div.paginator_container {
        text-align: center;
        width: 99%;
        padding-bottom: 10px;
}

div.component_product {
position: relative;
float: left;
background-color: #DDDDDD;
width: 172px;
margin: 0px 10px 10px 0px;
}

div.component_product p
{
padding: 5px;
margin: 0px 0px 10px 0px;
}

div.component_product img
{
dsiplay: block;
vertical-align: middle;
}

#prod_other_images, #prod_other_files, #prod_other_products
{
background-color: #F6F6F6;
overflow: auto;
margin-top: 30px;
height: 290px;
}

a:link.message_btn, a:visited.message_btn {
        background-color: #C0B6AD;
        color: #FFF;
        padding: 3px 15px;
        margin: 0px 10px 0px 0px;
        border: 2px double #999;
        text-decoration: none;
}

div.cms_thumbnail_image {
        width: 110px;
        margin-right: 10px;
        margin-bottom: 20px;
        font-size: 70%;
        text-align: center;
}

p input.price {
    width: 60px;
    text-align: right;
    margin-top: 5px;
    padding: 3px;
}

p input.price_qty {
    width: 22px;
    text-align: right;
}

/* shipping costs */
table.shipping_costs
{
  border: 1px solid black;
  border-collapse: collapse;
  }
table.shipping_costs th {
                          padding: 10px;
text-align: center;
border: 1px solid gray;
 }
table.shipping_costs td {
                          padding: 5px 10px 5px 10px;
                          border: 1px solid gray;
                          }
table.shipping_costs td.row_header {
                                     text-align: right;
font-weight: bold;
 }
table.shipping_costs td.data {
                               font-size: 80%;
                          }
table.shipping_costs a {
                         font-size: 80%;

 }
table.shipping_costs .editor_field {
                                     size: 50px;
                                     width: 50px;
                                     margin: 2px;
 }
table.shipping_costs .editor_ok_button {
                                         width: 40px;
                                         maargin: 5px;
 }

/* in place editor */
table.users .editor_field, table.users .editor_ok_button {
                size: 50px;
                width: 50px;
                margin: 2px;
 }


/* fuel surcharge */
.fuel_surcharge {
                  font-size: 120%;
                  font-weight: bold;
                  margin-bottom: 20px;
 }
.fuel_surcharge .editor_field, .fuel_surcharge .editor_ok_button {
                                size: 100px;
                                width: 100px;
                                margin: 10px;
 }
/* country helper in shipping */
.country {

           position: absolute;
           right: 100px;
           top: 50px;
           background-color: #ddd;
           font-size: 80%;
           border: 1px dashed black;
           padding: 10px;
 }
.country ul {
                 margin-left: 0;
 }