/* Main Screen CSS Document */

/* ----------------- COLOURS ----------------- 
  Dark Blue             : #0b2972
  Medium Blue         : #a9b4ce (e.g Main Nav BG)
  Light Blue             : #dadfea (e.g Side Content BG)
  Very Light Blue     : #edeff5 (e.g Sub Nav buttons)
  Orange                : #ff5c00
  Light Orange        : #fed4b1 (e.g from logo)
*/

/* ----------------- CLEAR STYLES ----------------- */
.clear { clear: both; }


/* ----------------- DEFAULT FONT STYLES ----------------- */
body, td, div, h1, h2, h3, h4, h5, p, li, input, textarea { font-family: Verdana, Arial, Helvetica, sans-serif;}

h1 { font-size: 100%; margin: 0; color: #000; font-weight:bold; }
h2 { font-size: 90%; margin: .5em 0 .5em 0; color: #ff5c00; font-weight: bold; }
h2.blue { color: #0b2972; }
h2.disabled { color: #a0a0a0 !important; }
h3 { font-size: 80%; margin: .5em 0 .5em 0; color: #0b2972; font-weight: bold; }
p { font-size: 76%; margin: .5em 0 .8em 0; line-height: 1.5em; color: #022C58; }
li { font-size: 80%; margin: .5em 0 1em 0; line-height: 1.3em; color: #022C58; }

a:link { color: #ff5c00; }
a:visited { color: #ff5c00;}
a:active, a:hover { color: #0b2972; }
a { outline: none; }

.tiny { font-size: 70%; }
.reg { font-size: 90%; }

/* Mouse Pointers */
.wait-pointer { cursor: wait; }
.default-pointer { cursor: default; }
.help-pointer { cursor: help; }
.pointy-pointer { cursor: pointer; }

/* ----------------- RULE STYLES ----------------- */
hr { border:0; border-top: 1px solid #dadfea; height: 1px; }

/* ----------------- PAGE STYLES ----------------- */
body { background-color: #0b2972; margin: 20px 10px 10px 10px; }
/* body { background-color: #0b2972; margin: 20px 10px 10px 10px; } */

/* ----------------- IMAGE STYLES ----------------- */
.blue-border { border: 1px solid #0b2972; }

/* ----------------- FORM STYLES ----------------- */
form { display: inline; }

/* ----------------- TITLE STYLES ----------------- */
.page-title{ width: 640px; height: 30px; border-bottom: 1px solid #dadfea; margin-bottom: 10px; }
.page-title-environment { width: 640px; height: 30px; border-bottom: 1px solid #ededcb; margin-bottom: 10px; }
.page-title div, .page-title-environment div { width: 640px; height: 30px; background-position: top left; background-repeat: no-repeat; background-color: #fff; }
.page-title h1, .page-title-environment h1 { display: none; visibility: hidden; }

/* -- CONTAINER -- */
#frame { width: 820px; margin: 0 auto 0 auto; }

/* -- HEADER -- */
#header { width: 820px; padding: 0; background-color: #fff; }
#header-logo { width: 410px; height: 90px; float: left; padding: 10px 0 10px 10px; }
#header-right { width: 330px; height: 110px; float: left; padding: 0 0 0 70px; }
#header-contactbox { width: 330px; height: 45px; }
#header-contactbox-left { width: 10px; height: 45px; float: left; background: url(../../images/header_contactbox_left.gif) top left no-repeat; }
#header-contactbox-content { width: 310px; height: 40px; float: left; padding-top: 5px; background: url(../../images/header_contactbox_tile.gif) top left repeat-x; }
#header-contactbox-right { width: 10px; height:45px; float: left; background: url(../../images/header_contactbox_right.gif) top left no-repeat; }

#header-accountmessage { width: 315px; height: 30px; margin-top: 10px; padding: 30px 15px 0 0; color: #0b2972 ; text-align: right; font-size: 70%; }

#header-searchbox { width: 330px; height: 45px; }
#header-searchbox-left { width: 10px; height: 45px; float: left; background: url(../../images/header_searchbox_left.gif) top left no-repeat; }
#header-searchbox-field { width: 310px; height: 35px; float: left; padding-top: 10px; background: url(../../images/header_searchbox_tile.gif) top left repeat-x; }
#header-searchbox-right { width: 10px; height:45px; float: left; background: url(../../images/header_searchbox_right.gif) top left no-repeat; }
#header-searchbox-field .label { width: 45px; height: 35px; float: left; background: url(../../images/header_searchbox_label.gif) 5px 9px no-repeat; }
#header-searchbox-field .label label { visibility: hidden; display: none; }
#header-searchbox-field .field { width: 212px; height: 31px; float: left; padding: 4px 5px 0 10px; margin-top: 0; }
#header-searchbox-field .field input { padding: 3px; width: 206px; border:0; float:left; } /* float fixes 1px top margin bug on inputs */
#header-searchbox-field .button { width: 33px; height: 31px; float: left; padding: 4px 5px 0 0 ; }
#header-searchbox-field .button input { margin: 0; }
#header-contact { width: 330px; height: 45px; margin-top: 10px; text-align: right; }

/* -- MAIN NAVIGATION -- */
#nav-main { width: 780px; height: 24px; padding: 6px 20px 6px 20px; background: url(../../images/nav_tile.gif) top left repeat-x; }
#nav-main div { height: 24px; float: left; background-position: top left; background-repeat: no-repeat;  }
#nav-main a { height: 24px; display: block; outline: none; }
#nav-main a:hover { background-position: bottom left; background-repeat: no-repeat; }
#nav-main span { display: none; visibility: hidden; }
/*-- Buttons --*/
#nav-main .home, #nav-main .home a:hover { width: 54px; background-image: url(../../images/nav_home.gif); }
#nav-main .home-selected { width: 54px; background-image: url(../../images/nav_home_selected.gif); }
#nav-main .aboutus, #nav-main .aboutus a:hover { width: 77px; background-image: url(../../images/nav_aboutus.gif); }
#nav-main .aboutus-selected { width: 77px; background-image: url(../../images/nav_aboutus_selected.gif); }
#nav-main .howtoplaceanorder, #nav-main .howtoplaceanorder a:hover { width: 163px; background-image: url(../../images/nav_howtoplaceanorder.gif); }
#nav-main .howtoplaceanorder-selected { width: 163px; background-image: url(../../images/nav_howtoplaceanorder_selected.gif); }
#nav-main .contact, #nav-main .contact a:hover { width: 66px; background-image: url(../../images/nav_contact.gif); }
#nav-main .contact-selected { width: 66px; background-image: url(../../images/nav_contact_selected.gif); }
#nav-main .samples, #nav-main .samples a:hover { width: 70px; background-image: url(../../images/nav_samples.gif); }
#nav-main .samples-selected { width: 70px; background-image: url(../../images/nav_samples_selected.gif); }
#nav-main .paymentmethods, #nav-main .paymentmethods a:hover { width: 131px; background-image: url(../../images/nav_paymentmethods.gif); }
#nav-main .paymentmethods-selected { width: 131px; background-image: url(../../images/nav_paymentmethods_selected.gif); }
#nav-main .viewbasket, #nav-main .viewbasket a:hover { width: 92px; background-image: url(../../images/nav_viewbasket.gif); }
#nav-main .viewbasket-selected { width: 92px; background-image: url(../../images/nav_viewbasket_selected.gif); }
#nav-main .myaccount, #nav-main .myaccount a:hover { width: 92px; background-image: url(../../images/nav_myaccount.gif); }
#nav-main .myaccount-selected { width: 92px; background-image: url(../../images/nav_myaccount_selected.gif); }
#nav-main .login, #nav-main .login a:hover { width: 55px; background-image: url(../../images/nav_login.gif); }
#nav-main .login-selected { width: 55px; background-image: url(../../images/nav_login_selected.gif); }
#nav-main .logout, #nav-main .logout a:hover { width: 68px; background-image: url(../../images/nav_logout.gif); }
#nav-main .logout-selected { width: 68px; background-image: url(../../images/nav_logout_selected.gif); }

/* -- BODY -- */
#body { width: 820px; background: url(../../images/body_background_side_content.gif) top left repeat-y #fff; }

.environment-styles {}
.environment-styles h2 { color: #6c8f43; }
.environment-styles h3 { color: #6c8f43; }
.environment-styles p { color: #6c8f43; }
.environment-styles li { color: #6c8f43; }

a:link { color: #ff5c00; }
a:visited { color: #ff5c00;}
a:active, a:hover { color: #0b2972; }
a { outline: none; }

/* -- SIDE CONTENT -- */
#side-content { width: 160px; float: left; }

/* -- Sub Navigation Titles -- */
.nav-sub-title { margin-bottom: 0px;}
.nav-sub-title div { width:auto; height: 20px; margin: 15px 10px 5px 10px; background-position: top left; background-repeat: no-repeat; }
.nav-sub-title p { display:none; visibility: hidden; }
.nav-sub-title .products { background-image: url(../../images/nav_sub_title_products.gif); }
.nav-sub-title .information { background-image: url(../../images/nav_sub_title_information.gif); }

/*-- Sub Navigation --*/
#nav-sub-products, #nav-sub-information { }
#nav-sub-products ul, #nav-sub-information ul  {
    margin: 0; padding: 0;
}
/*----------------------------------------------------------*/

/* DEFAULT Sub Nav List Items */
#nav-sub-products li, #nav-sub-information li {
    font-size: 70%;
    margin: 2px 0 0 0; padding: 0;
    list-style: none;
    border-left: 4px solid #a9b4ce;
    background: #edeff5;
}

#nav-sub-products .hide-submenu { display: none; }

/* SPECIAL Sub Nav List Items */
#nav-sub-products .bespoke-button {
    border-left: 4px solid #ff985e;
    background: #fee8d5;
    font-weight: bold;
}

#nav-sub-products .expandable-button { }
#nav-sub-products .sub-button {
    border-left: 4px solid #ff9255;
}

#nav-sub-products .christmas-button {
    background: url(../../images/nav_snow_background.gif) #edeff5 bottom left no-repeat;
    font-weight: bold;
}

/*----------------------------------------------------------*/

/* DEFAULT Sub Nav Anchor */
#nav-sub-products li a, #nav-sub-information li a {
    width: 141px; padding: 0 5px 0 10px;
    display: block;
    line-height: 1.9em;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#nav-sub-products li a span { display: none; }

/* SPECIAL Sub Nav Anchors */
#nav-sub-products .expandable-button a {
    width: 133px; padding: 0 5px 0 18px;
    background: url(../../images/nav_icon_arrow.gif) 7px center no-repeat;
}
#nav-sub-products .sub-button a {
    width: 133px; padding: 0 5px 0 18px;
    background: url(../../images/nav_icon_dash.gif) 6px center no-repeat;
}
#nav-sub-products .christmas-button a {
    width: 123px; padding: 0 5px 0 28px;
    background: url(../../images/nav_icon_christmas.gif) center left no-repeat;
}
#nav-sub-products .star-yellow-button a {
    width: 123px; padding: 0 5px 0 28px;
    background: url(../../images/nav_icon_star.gif) center left no-repeat;
}
#nav-sub-products .star-red-button a {
    width: 123px; padding: 0 5px 0 28px;
    background: url(../../images/nav_icon_redstar.gif) center left no-repeat;
}

/*----------------------------------------------------------*/

#nav-sub-products li a:link, #nav-sub-products li a:visited,
#nav-sub-information li a:link, #nav-sub-information li a:visited {
    color: #0f298f;
    text-decoration: none;
}
#nav-sub-products li a:active, #nav-sub-products li a:hover,
#nav-sub-information li a:active, #nav-sub-information li a:hover {
    color: #ff5c00;
    text-decoration: none;
}

/*----------------------------------------------------------*/

/* DEFAULT Sub Nav Selected */
#nav-sub-products li.selected, #nav-sub-information li.selected {
    border-left: 4px solid #ff5c00;
}
#nav-sub-products li.selected a:link, #nav-sub-products li.selected a:visited,
#nav-sub-information li.selected a:link, #nav-sub-information li.selected a:visited {
    color: #ff5c00;
}

/* SPECIAL Sub Nav Selected */

#nav-sub-products .expandable-button-selected {
    border-left: 4px solid #ff5c00;
}
#nav-sub-products .expandable-button-selected a {
    background: url(../../images/nav_icon_arrow_selected.gif) 5px center no-repeat;
    color: #ff5c00;
}
#nav-sub-products .expandable-button-selected a:link, #nav-sub-products .expandable-button-selected a:visited {
    color: #ff5c00;
}

/*#nav-sub-products .bespoke-button.selected {
    border-left: 4px solid #ff5c00;
    background: #fee8d5;
}*/

/*----------------------------------------------------------*/




/* -- MAIN CONTENT -- */
#main-content { width: 640px; float: left; padding: 10px; }

/* -- columns -- */

/* half of content area - allows for 10px margin */
.column-315 { float: left; width: 315px; }

/* Closest thing to 3 equal columns of content area (use 207,206,207) - allows for 10px margin */
.column-207 { float: left; width: 207px; }
.column-206 { float: left; width: 206px; }

/* splits content area in 2 columns - allows for 10px margin */
.column-430 { float: left; width: 430px; }
.column-200 { float: left; width: 200px; }

/* splits content area in 2 columns - allows for 10px margin */
.column-400 { float: left; width: 400px; }
.column-230 { float: left; width: 230px; }

/* special centred column for use on login/reg forms */
.column-500 { width: 500px; margin-left: auto; margin-right: auto;  }

/* splits content area in 2 columns - allows for 10px margin - product intro + crosslink*/
.column-475 { float: left; width: 475px; }
.column-155 { float: left; width: 155px; }

/* -- page images -- */
.image-description { margin: .4em; line-height: 1em; font-size: 70%; text-align: center; font-style: italic; }
.click-to-enlarge { font-size: 70%; text-align: center; line-height: 1em; margin: 0.6em 0; }
.click-to-enlarge img { vertical-align: middle; }

.minigallery-thumb { width: 60px; float: left; }

/* -- Data table --*/
.data-table70, .data-table80 { border: 1px solid #0b2972; }

.data-table70 th, .data-table80 th { color: #022C58; background-color: #dadfea; text-align: left; }

.data-table70 td, .data-table80 td { color: #022C58; background-color: #edeff5; }

.data-table80 th { font-size: 80%; }
.data-table80 td { font-size: 80%; }

.data-table70 th { font-size: 70%; }
.data-table70 td { font-size: 70%; }

/* Twitter */
#twitter { width: 640px; background: url(../../images/twitter_background.gif) 0 0 no-repeat; }
#twitter .twitter-button { width: 100px; float: left; padding: 8px; }
#twitter .twitter-text { width: 516px; float: left; padding: 8px 8px 8px 0; }
#twitter .twitter-text p { font-family: arial; font-size: 70%; margin: 0; }

/* ----------------- FOOTER ----------------- */
#footer { width: 820px; }
#footer-copyright { width: 300px; float: left; margin: 0; padding:7px 0 0 0; font-size: 70%; color: #fff; }
#footer-companydetail { width: 520px; float: left; margin: 0; padding:7px 0 0 0; font-size: 70%; text-align: right; color: #fff; }

/* -- MARGIN STYLES -- */
/* -- 1 side -- */
.margin4-t { margin-top: 4px; }
.margin5-b { margin-bottom: 5px; }
.margin9-t { margin-top: 9px; }
.margin10-t { margin-top: 10px; }
.margin10-r { margin-right: 10px; }
.margin10-b { margin-bottom: 10px; }
.margin10-l { margin-left: 10px; }
.margin9-r { margin-right: 9px; }
.margin20-t { margin-top: 20px; }
.margin20-r { margin-right: 20px; }
.margin20-b { margin-bottom: 20px; }
/* -- 2 sides -- */
.margin4-t-l { margin: 4px 0 0 4px; }
.margin4-t-b { margin: 4px 0 4px 0; }
.margin10-t-r { margin: 10px 10px 0 0; }
.margin10-t-b { margin: 10px 0; }
.margin10-t-l { margin: 10px 0 0 10px; }
.margin10-r-l { margin: 0 10px; }
.margin10-r-b { margin: 0 10px 10px 0; }
.margin10-b-l { margin: 0 0 10px 10px; }
.margin20-r-b { margin: 0 20px 20px 0; }
/* -- 3 sides -- */
.margin10-t-r-b { margin: 10px 10px 10px 0; }
.margin10-t-r-l { margin: 10px 10px 0 10px; }
.margin10-t-b-l { margin: 10px 0 10px 10px; }
.margin10-r-b-l { margin: 0 10px 10px 10px; }
/* -- 4 sides -- */
.margin10 { margin: 10px; }

.align-center { text-align: center !important;  }
.align-right { text-align: right !important; }
.align-left { text-align: left !important; }

/* ERROR STYLES */
.error-box { border: 1px solid #c00; padding: 1px; }
.error-box .error-title {
    padding: 3px 5px; background-color: #c00; color: #fff; font-size: 80%; font-weight: bold;
}
.error-box .error-text { padding: 3px 5px; }
.error-box .error-text p { color: #c00; margin: 0; }

.error { color: #cc0000 !important; }
.information-msg { color: #cc0000; }