/* Product Screen CSS Document */

/* ----------------- GENERIC STYLES ----------------- */


/* ----------------- BUTTON STYLES ----------------- */
.add-to-basket { float: right; }
.add-to-basket-message { float: left; width: 274px; padding-left: 26px; text-align: left; background: url(../../images/summary_icon_attention.gif) top left no-repeat; }

/* -- PANELS -- */
.panel {}

/* -- Panel Columns -- */
.panel .column-620 { width: 620px; } /* 3 column */

.panel .column-200 { width: 200px; float: left; } /* 1 column */
.panel .column-410 { width: 410px; float: left; } /* 2 column */

.panel .column-60 { width: 60px; float: left; } /* split for 410 column */
.panel .column-340 { width: 340px; float: left; }

.panel .column-550 { width: 550px; float: left; }

.panel p { font-size: 70%; color: #464646; line-height: 1.2em; margin: 0.2em 0 0.4em 0; }
.panel p.delivery-date { font-size: 80%; line-height: 1em; margin:0; text-align: center; font-weight: bold; }

/* -- Panel Titles-- */
.panel .title {
    width: 560px; height: 15px; float: left; padding: 5px 0 5px 10px;
}

.panel .title div {
    width: auto; height: 15px;
    background-position: top left; background-repeat: no-repeat;
}
.panel .title h2 { display: none; visibility: hidden; }
.panel .title .artwork { background: url(../../images/panel_title_artwork.gif) top left no-repeat; }
.panel .title .backinlay { background: url(../../images/panel_title_backinlay.gif) top left no-repeat; }
.panel .title .bindingoptions { background: url(../../images/panel_title_bindingoptions.gif) top left no-repeat; }
.panel .title .businesscarddetails { background: url(../../images/panel_title_businesscarddetails.gif) top left no-repeat; }
.panel .title .businesscarddesignservice { background: url(../../images/panel_title_businesscarddesignservice.gif) top left no-repeat; }
.panel .title .businesscardpacks { background: url(../../images/panel_title_businesscardpacks.gif) top left no-repeat; }
.panel .title .cdlabels { background: url(../../images/panel_title_cdlabels.gif) top left no-repeat; }
.panel .title .coatingoptions { background: url(../../images/panel_title_coatingoptions.gif) top left no-repeat; }
.panel .title .colouroptions { background: url(../../images/panel_title_colouroptions.gif) top left no-repeat; }
.panel .title .cover { background: url(../../images/panel_title_cover.gif) top left no-repeat; }
.panel .title .coverupgrades { background: url(../../images/panel_title_coverupgrades.gif) top left no-repeat; }
.panel .title .delivery { background: url(../../images/panel_title_delivery.gif) top left no-repeat; }
.panel .title .designrequirements { background: url(../../images/panel_title_designrequirements.gif) top left no-repeat; }
.panel .title .environment { background: url(../../images/panel_title_environment.gif) top left no-repeat; }
.panel .title .foldingoptions { background: url(../../images/panel_title_foldingoptions.gif) top left no-repeat; }
.panel .title .frontinlay { background: url(../../images/panel_title_frontinlay.gif) top left no-repeat; }
.panel .title .generaloptions { background: url(../../images/panel_title_generaloptions.gif) top left no-repeat; }
.panel .title .hpindichrome6colour { background: url(../../images/panel_title_hpindichrome6colour.gif) top left no-repeat; }
.panel .title .inserts { background: url(../../images/panel_title_inserts.gif) top left no-repeat; }
.panel .title .multinamepacks { background: url(../../images/panel_title_multinamepacks.gif) top left no-repeat; }
.panel .title .multinamedesignpacks { background: url(../../images/panel_title_multinamedesignpacks.gif) top left no-repeat; }
.panel .title .proof { background: url(../../images/panel_title_proof.gif) top left no-repeat; }
.panel .title .singlenamepacks { background: url(../../images/panel_title_singlenamepacks.gif) top left no-repeat; }
.panel .title .singlenamedesignpacks { background: url(../../images/panel_title_singlenamedesignpacks.gif) top left no-repeat; }
.panel .title .summary { background: url(../../images/panel_title_summary.gif) top left no-repeat; }
.panel .title .ultraheavyweightpacks { background: url(../../images/panel_title_ultraheavyweightpacks.gif) top left no-repeat; }
.panel .title .upgradeoptions { background: url(../../images/panel_title_upgradeoptions.gif) top left no-repeat; }
.panel .title .upgradeoptionscornersspotuv { background: url(../../images/panel_title_upgradeoptions_cornersspotuv.gif) top left no-repeat; }
.panel .title .vatoptions { background: url(../../images/panel_title_vatoptions.gif) top left no-repeat; }
.panel .title .youravailableproducts { background: url(../../images/panel_title_youravailableproducts.gif) top left no-repeat; }

/* -- Panel Show/Hide Button -- */
.panel .show-hide-button { float: left; width: 60px; padding-right: 10px; height: 25px; background-position: top left; background-repeat: no-repeat; }
.panel .show-hide-button a { height: 25px; display: block; }
.panel .show-hide-button a:hover { background-position: bottom left; }
.panel .show-hide-button span { display: none; visibility: hidden; }

/* -- Panel Status Message -- */
.panel .status-message { width: 620px; padding: 4px 10px; background-color: #464646; }
.panel .status-message .icon { width: 17px; float: left; }
.panel .status-message .message { width: 597px; float: left; padding: 2px 0 0 6px; font-family: Arial, Helvetica, sans-serif; font-size: 70%; color: #fff; }

/* -- Panel Options Table-- */
.panel .options-table {  }
.panel .options-table th {
    text-align: left; line-height: 1em;
}
.panel .options-table th h3 {
    display: inline; font-size: 75%; font-weight: bold;
    color: #464646; margin: 0; line-height: 1em; 
}
.panel .options-table th h3.disabled {
    color: #a0a0a0;
}
.panel .options-table th.label {
    font-size: 70%; color: #464646;
    font-weight: normal;
}
.panel .options-table td.row, .panel .options-table td.row-selected {
    font-size: 70%; color: #464646;
}
.panel .options-table td.row-disabled {
    font-size: 70%; color: #a0a0a0;
}

.panel .options-table input,
.panel .options-table select,
.panel .options-table textarea {
    font-size: 100%; color: #464646;
}

.panel .options-table .input-radio, .panel .options-table .input-checkbox {
    margin: 0; padding: 0; width: 13px; height: 13px;
}
.panel .options-table .input-select {
}
.panel .options-table input.width-full,
.panel .options-table select.width-full,
.panel .options-table textarea.width-full {
    width: 97%;
}

.panel .options-table .indicator-tick { margin: 0 auto 0 auto; width: 13px; height: 13px; background: url(../../images/panel_option_tick.gif) top left no-repeat; }
.panel .options-table .row-disabled .indicator-tick { background-image: url(../../images/panel_option_tick_disabled.gif); }
.panel .options-table .indicator-cross { margin: 0 auto 0 auto; width: 13px; height: 13px; background: url(../../images/panel_option_cross.gif) top left no-repeat; }
.panel .options-table .row-disabled .indicator-cross { background-image: url(../../images/panel_option_cross_disabled.gif); }

.panel .options-table .indicator-tick span, .panel .options-table .indicator-cross span { display: none; visibility: hidden; }

/* Links */
.panel .options-table .block-link a { width: auto; display: block; }
.panel .options-table .block-link a:link { color: #464646; text-decoration: none; }
.panel .options-table .block-link a:visited { color: #464646; text-decoration: none; }
.panel .options-table .block-link a:hover { color: #ff5c00; text-decoration: none; }
.panel .options-table .block-link a:active { color: #ff5c00; text-decoration: none; }

/* Remove button */
.panel .options-table .remove-button { width: 13px; height: 13px; background: url(../../images/panel_option_remove.gif) 0 0 no-repeat; }
.panel .options-table .remove-button a { width: 13px; height: 13px; display: block; background: url(../../images/panel_option_remove.gif) 0 0 no-repeat; }
.panel .options-table .remove-button a:hover { background-position: 0 -13px; }
.panel .options-table .remove-button.disabled,
.panel .options-table .remove-button.disabled a { background-position: 0 -26px; cursor: default; }
.panel .options-table .remove-button span { display: none; visibility: hidden; }

/* Option button */
.panel .option-button {}
.panel .option-button div { height: 20px; background-position: 0 0; background-repeat: no-repeat; }
.panel .option-button a { height: 20px; display: block; background-position: 0 0; background-repeat: no-repeat; }
.panel .option-button span { display: none; visibility: hidden; }
.panel .option-button a:hover { background-position: 0 -20px; }
.panel .option-button .disabled,
.panel .option-button .disabled a { background-position: 0 -40px; cursor: default; }

.panel .option-button .addnewname,
.panel .option-button .addnewname a { width: 120px; background-image: url(../../images/button_option_addnewname.gif); }

.panel .option-button .clearform,
.panel .option-button .clearform a { width: 64px; height: 15px; background-image: url(../../images/button_option_small_clearform.gif); }
.panel .option-button .clearform a:hover { background-position: 0 -15px; }
.panel .option-button .clearform.disabled,
.panel .option-button .clearform.disabled a { background-position: 0 -30px; }

/* -- Panel Summary Table --*/
.panel .summary-table {  }
.panel .summary-table th {
    text-align: left; line-height: 1em;
}
.panel .summary-table th h3 {
    display: inline; font-size: 75%; font-weight: bold;
    color: #464646; margin: 0; line-height: 1em;
}
.panel .summary-table th.label {
    font-size: 70%; color: #464646;
    font-weight: normal;
}
.panel .summary-table td.row, .panel .summary-table td.subtotal-price, .panel .summary-table td.total-price {
    font-size: 70%; color: #464646;
}

/* -- Panel Default Style -- */
.panel .header-default-closed {
    width: 640px; height: 25px;
    background-color: #a9b4ce;
    background: url(../../images/panel_default_header_closed.gif) #dadfea bottom left no-repeat;
}
.panel .header-default-closed .show-hide-button,
.panel .header-default-closed .show-hide-button a:hover {
    background-image: url(../../images/panel_default_showhide_button_show.gif);
}

.panel .header-default-open {
    width: 640px; height: 25px;
    background-color: #a9b4ce;
    background: url(../../images/panel_default_header_open.gif) #dadfea bottom left no-repeat;
}
.panel .header-default-open .show-hide-button,
.panel .header-default-open .show-hide-button a:hover {
    background-image: url(../../images/panel_default_showhide_button_hide.gif);
}

.panel .body-default {
    width: 620px; padding: 10px;
    background: url(../../images/panel_default_body_corners.gif) #dadfea bottom left no-repeat;
}
.panel .body-default .options-table td.row {
    background-color: #edeff5; border-bottom: 1px solid #dadfea;
}
.panel .body-default .options-table td.row-selected {
    background-color: #fff; border-bottom: 1px solid #dadfea;
}
.panel .body-default .options-table td.row-disabled {
    background-color: #e1e5ee; border-bottom: 1px solid #dadfea;
}

.panel .body-default .options-table td.gap {
    border-bottom-width: 4px;
}

.panel .body-default .boxout-200 { width: 200px; padding: 0 0 10px 0; background: url(../../images/panel_boxout_200_footer.gif) #fff bottom left no-repeat;  }
.panel .body-default .boxout-200 .boxout-200-header { width: 200px; height: 5px; margin-bottom: 5px; background: url(../../images/panel_boxout_200_header.gif) top left no-repeat; overflow: hidden; }


/* -- Box -- */
.panel .body-default .box-title { padding: 3px; }
.panel .body-default .box-title h3 {
    display: inline; font-size: 75%; font-weight: bold;
    color: #464646; margin: 0; line-height: 1em;
}
.panel .body-default .box-body { background-color: #edeff5; }

/* -- Pantone Swatch --*/
.panel .body-default .pantoneswatch { width:200px; height:11px; background-color: #edeff5; }
.panel .body-default .pantoneswatch-disabled { width:200px; height:11px; background-color: #e1e5ee; }


/* -- Panel Environment Style -- */
.panel .header-environment-closed {
    width: 640px; height: 25px;
    background: url(../../images/panel_environment_header_closed.gif) #94ba68 bottom left no-repeat;
}
.panel .header-environment-closed .show-hide-button,
.panel .header-environment-closed .show-hide-button a:hover {
    background-image: url(../../images/panel_environment_showhide_button_show.gif);
}

.panel .header-environment-open {
    width: 640px; height: 25px;
    background: url(../../images/panel_environment_header_open.gif) #94ba68 bottom left no-repeat;
}
.panel .header-environment-open .show-hide-button,
.panel .header-environment-open .show-hide-button a:hover {
    background-image: url(../../images/panel_environment_showhide_button_hide.gif);
}

.panel .body-environment {
    width: 620px; padding: 10px;
    background: url(../../images/panel_environment_body_corners.gif) #ededcb bottom left no-repeat;
}
.panel .body-environment .options-table td.row {
    background-color: #f6f6e5; border-bottom: 1px solid #ededcb;
}
.panel .body-environment .options-table td.row-selected {
    background-color: #fff; border-bottom: 1px solid #ededcb;
}
.panel .body-environment .options-table td.row-disabled {
    background-color: #f2f2d8; border-bottom: 1px solid #ededcb;
}


/* -- Panel Summary Style -- */
.panel .header-summary-closed {
    width: 640px; height: 25px;
    background: url(../../images/panel_summary_header_closed.gif) #94ba68 bottom left no-repeat;
}
.panel .header-summary-closed .show-hide-button,
.panel .header-summary-closed .show-hide-button a:hover {
    background-image: url(../../images/panel_summary_showhide_button_show.gif);
}

.panel .header-summary-open {
    width: 640px; height: 25px;
    background: url(../../images/panel_summary_header_open.gif) #feac78 bottom left no-repeat;
}
.panel .header-summary-open .show-hide-button,
.panel .header-summary-open .show-hide-button a:hover {
    background-image: url(../../images/panel_summary_showhide_button_hide.gif);
}

.panel .body-summary {
    width: 620px; padding: 10px;
    background: url(../../images/panel_summary_body_corners.gif) #fee1c8 bottom left no-repeat;
}
.panel .body-summary .summary-table td.row {
    background-color: #fff0e4; border-bottom: 1px solid #fee1c8;
}
.panel .body-summary .summary-table td.subtotal-price {
    background-color: #fff8f2; border-bottom: 1px solid #fee1c8; font-weight: bold;
}
.panel .body-summary .summary-table td.total-price {
    background-color: #fff; border-bottom: 1px solid #fee1c8; font-weight: bold;
}

/* -- STATIONERY SETS PANELS -- */

.panel .stationery-set { width: 640px; height: 70px; }

.panel .stationery-set .set { width: 200px; height: 20px; float: left; padding: 40px 10px 10px 10px; background-repeat: no-repeat; background-position: top left; }
.panel .stationery-set .letterheads { width: 110px; height: 70px; float: left; background-repeat: no-repeat; background-position: top left; }
.panel .stationery-set .compslips { width: 105px; height: 70px; float: left; background-repeat: no-repeat; background-position: top left; }
.panel .stationery-set .businesscards{ width: 205px; height: 70px; float: left; background-repeat: no-repeat; background-position: top left; }

.panel .stationery-set .set h2 { display: none; visibility: hidden; }
.panel .stationery-set .letterheads span,
.panel .stationery-set .compslips span,
.panel .stationery-set .businesscards span {
    display: none; visibility: hidden; }
.panel .stationery-set .businesscards a { width: 205px; height: 70px; display: block; }

/* -- Bronze Styles -- */
.panel .bronze .set { background-image: url(../../images/panel_stationeryset_bronze_title.gif); background-color: #9a5a36; }
.panel .bronze .letterheads { background-image: url(../../images/panel_stationeryset_bronze_letterheads.gif); background-color: #9a5a36; }
.panel .bronze .compslips { background-image: url(../../images/panel_stationeryset_bronze_compslips.gif); background-color: #9a5a36; }
.panel .bronze .businesscards { background-image: url(../../images/panel_stationeryset_bronze_businesscards.gif); background-color: #9a5a36; }

.panel .bronze .options-table td.row { background-color: #a17666; border-bottom: 1px solid #a17666; color: #fff; }
.panel .bronze .options-table td.row-selected { background-color: #fff; border-bottom: 1px solid #fff; color: #9a5a36; }

/* -- Silver Styles -- */
.panel .silver .set { background-image: url(../../images/panel_stationeryset_silver_title.gif); background-color: #acacac; }
.panel .silver .letterheads { background-image: url(../../images/panel_stationeryset_silver_letterheads.gif); background-color: #acacac; }
.panel .silver .compslips { background-image: url(../../images/panel_stationeryset_silver_compslips.gif); background-color: #acacac; }
.panel .silver .businesscards { background-image: url(../../images/panel_stationeryset_silver_businesscards.gif); background-color: #acacac; }

.panel .silver .options-table td.row { background-color: #b2b2b2; border-bottom: 1px solid #b2b2b2; color: #fff; }
.panel .silver .options-table td.row-selected { background-color: #fff; border-bottom: 1px solid #fff; color: #acacac; }

/* -- Gold Styles -- */
.panel .gold .set { background-image: url(../../images/panel_stationeryset_gold_title.gif); background-color: #cc9933; }
.panel .gold .letterheads { background-image: url(../../images/panel_stationeryset_gold_letterheads.gif); background-color: #cc9933; }
.panel .gold .compslips { background-image: url(../../images/panel_stationeryset_gold_compslips.gif); background-color: #cc9933; }
.panel .gold .businesscards { background-image: url(../../images/panel_stationeryset_gold_businesscards.gif); background-color: #cc9933; }

.panel .gold .options-table td.row { background-color: #d09f65; border-bottom: 1px solid #d09f65; color: #fff; }
.panel .gold .options-table td.row-selected { background-color: #fff; border-bottom: 1px solid #fff; color: #cc9933; }

/* -- Platinum Styles -- */
.panel .platinum .set { background-image: url(../../images/panel_stationeryset_platinum_title.gif); background-color: #8a8395; }
.panel .platinum .letterheads { background-image: url(../../images/panel_stationeryset_platinum_letterheads.gif); background-color: #8a8395; }
.panel .platinum .compslips { background-image: url(../../images/panel_stationeryset_platinum_compslips.gif); background-color: #8a8395; }
.panel .platinum .businesscards { background-image: url(../../images/panel_stationeryset_platinum_businesscards.gif); background-color: #8a8395; }

.panel .platinum .options-table td.row { background-color: #918b9c; border-bottom: 1px solid #918b9c; color: #fff; }
.panel .platinum .options-table td.row-selected { background-color: #fff; border-bottom: 1px solid #fff; color: #8a8395; }

/* -- Business Cards -- */
.addpack { width: 178px; height: 54px; padding: 35px 0 0 22px; background: url(../../images/businesscards_addpack_panel.gif) 0 0 no-repeat; }
.addpack p, .addpack .decrease span, .addpack .increase span { display: none; visibility: hidden; }

.addpack .current-packs { width: 86px; height: 44px; float: left; margin-right: 5px; }
.addpack .current-packs .packs-label { font-size: 75%; color: #464646; text-align: center; }
.addpack .current-packs .packs-total { font-size: 140%; color: #464646; font-weight: bold; text-align: center; }

.addpack .decrease { width: 35px; float: left; margin-right: 5px; }
.addpack .decrease div { width: 35px; height: 20px; margin-bottom: 4px; background-position: 0 0; background-repeat: no-repeat; }
.addpack .decrease a { width: 35px; height: 20px; display: block; background-position: 0 0; background-repeat: no-repeat; }
.addpack .decrease a:hover { background-position: 0 -20px; }
.addpack .decrease a.disabled { background-position: 0 -40px; cursor: default; }
.addpack .decrease .single, .addpack .decrease .single a { background-image: url(../../images/businesscards_addpack_decrease.gif); }
.addpack .decrease .ten, .addpack .decrease .ten a { background-image: url(../../images/businesscards_addpack_decrease10.gif); }

.addpack .increase { width: 35px; float: left; }
.addpack .increase div { width: 35px; height: 20px; margin-bottom: 4px; background-position: 0 0; background-repeat: no-repeat; }
.addpack .increase a { width: 35px; height: 20px; display: block; background-position: 0 0; background-repeat: no-repeat; }
.addpack .increase a:hover { background-position: 0 -20px; }
.addpack .increase a.disabled { background-position: 0 -40px; cursor: default; }
.addpack .increase .single, .addpack .increase .single a { background-image: url(../../images/businesscards_addpack_increase.gif); }
.addpack .increase .ten, .addpack .increase .ten a { background-image: url(../../images/businesscards_addpack_increase10.gif); }