/* File: forms.css Author: Erin Lathers Created: 5-1-2009 Description: This file contains all common styles for Pottery Barn forms. */ form div.input-note { margin: 0.4em 0 1em 11em; font-size: 1.1em; } /* Fieldsets */ span.required { display: inline;/* Over-ride using 'display:none' in the section-specific stylesheet to remove '*' from fields that are not required */ } div#content legend, div#content fieldset legend { *margin-left : -7px; } div#content fieldset { margin-top: 1em; } div#content fieldset.hidden-label label { display : none; } div#content fieldset.hidden-input { display: none; } div#content fieldset label { display: inline-block; float: left; margin-right: .5em; text-align: right; /* note - don't use important here - will break styles on other labels that aren't right justified - use inheritance to target. el: 12/2/09 */ width: 11em; } div#content fieldset2 label { display: inline-block; float: left; margin-right: .5em; text-align: right !important;} div#content fieldset label.hide { display: none;} div#content fieldset input { margin: 0; padding: 0.1em; color: #645F5F;} div#content fieldset select { color: #645F5F; padding: 0; margin: 0;} div#content div.user-info-comment { padding : 0.5em 0 0.2em 13.2em; } div#shopping-bag div#content div.user-info-comment { padding : 0.5em 0 0.2em 12.0em; _padding-left:12.2em; } div#content fieldset .disabled { background: #d4d0c8; } /* --Email + Password-- */ fieldset#email fieldset input, fieldset#email-verification fieldset input, fieldset#password-verification fieldset input { width: 14em; } fieldset#email div.email-password { margin: 0 0 0.2em 7.2em; text-decoration: underline; } div#password-request /* --Shopping For-- */ fieldset#shopping-for { width: 60em; padding-bottom: 2em; } fieldset#shopping-for fieldset { width: 33%; float:left; } fieldset#shopping-for fieldset input { float: left; margin:0; padding:0; height: 1.5em; } fieldset#shopping-for fieldset select { width: 16em;} fieldset#shopping-for fieldset label { float: none; text-align:left; height: 1.5em; margin: .3em 0 .3em 1.8em;} fieldset#shopping-for fieldset.relation-to-teen, fieldset#shopping-for fieldset.heard-from { width: 100%; clear: both; margin-top: 1em; } fieldset#shopping-for fieldset.relation-to-teen label, fieldset#shopping-for fieldset.heard-from label, fieldset#shopping-for fieldset.relation-to-teen input, fieldset#shopping-for fieldset.heard-from input { margin-left: 0; width: 15em; line-height:; } /* --Addressblock-- */ fieldset.addressblock input { width: 28.5em; } fieldset.addressblock div.state-zip { width: 45.4em; *width: 45.1em; _width: 46em; overflow: hidden;} div#shopping-bag fieldset.addressblock div.state-zip, div#account-create div.state-zip { width: 40.8em; *width: 40.8em; _width: 40.8em; overflow: hidden;} fieldset.addressblock fieldset.state { float: left; } fieldset.addressblock fieldset.state select { width: 17em; *width: 16em; padding: .1em; padding-right: 0; } fieldset.addressblock fieldset.zip { float: right; text-align: right; width: auto; } div#content fieldset.addressblock fieldset.zip label { margin-right: 0.5em; width: auto; } div#content fieldset.address-line-2 label { visibility: hidden; } /* Hide address line 2 label from non-screen readers*/ fieldset.addressblock fieldset.zip input { width: 4.5em; } /* --Request Swatches-- */ form.swatchRequestForm fieldset.addressblock div.state-zip fieldset.zip { padding-left : 0; } /* --Shipping and Billing pages-- */ form.shipping-billing fieldset legend { font-weight : bold; } form.shipping-billing fieldset.ship-to { padding-bottom : 2em; border-bottom:0.1em solid #CCCCCC;} form.shipping-billing fieldset.addressblock { } form.shipping-billing fieldset.addressblock fieldset span.nickname-info { padding-left : 0.5em; } form.shipping-billing fieldset.addressblock legend { margin-bottom : 2em; } form.shipping-billing div.communications-preferences { margin : 2em 0 2em 13.2em; } div#shopping-bag form.shipping-billing div.communications-preferences { margin : 2em 0 2em 12.0em; _margin-left:12.2em; } form.shipping-billing div.communications-preferences p a { font-weight : bold; } div#shopping-bag form.shipping-billing fieldset.preferred-shipping-method fieldset{ padding-left: 11.5em; _width:60em; } div#shopping-bag form.shipping-billing div.checkbox-set { clear: left; float: left; width: 55em; margin: 0; padding: 1em 0 1em 11.5em; } form.shipping-billing div.checkbox-set input, form.shipping-billing div.checkbox-set label, form.shipping-billing fieldset.preferred-shipping-method fieldset input, form.shipping-billing fieldset.preferred-shipping-method fieldset label { float : left; width : auto !important; } form.shipping-billing div.checkbox-set label, form.shipping-billing fieldset.preferred-shipping-method fieldset label { margin-left : 0.5em; *margin-top : 0.3em; } form.shipping-billing fieldset.preferred-shipping-method { margin : 2em 0; } form.shipping-billing fieldset.preferred-shipping-method legend { margin-bottom : 1em; } form.shipping-billing fieldset.preferred-shipping-method fieldset { margin-top : 0.5em !important; } form.shipping-billing fieldset.preferred-shipping-method p { margin-top : 1.5em; } form.shipping-billing fieldset.optional-personal-message { margin : 2em 0 !important; } form.shipping-billing fieldset.optional-personal-message legend { margin-bottom : 1em; } form.shipping-billing fieldset.optional-personal-message p { width : 40em; margin-bottom : 2em; } form.shipping-billing fieldset.optional-personal-message fieldset { margin-left : 13.2em; } form.shipping-billing fieldset.optional-personal-message fieldset input { width : 28.5em; } form.shipping-billing fieldset#action-buttons { padding : 1em 0 2em; } form.shipping-billing fieldset#action-buttons.shipping { border-bottom : 0.1em solid #ccc; margin-bottom : 1em; } form.shipping-billing fieldset#action-buttons.billing { border-bottom : 0.1em solid #ccc; margin-bottom : 1em; } form.shipping-billing fieldset#action-buttons div.container { overflow : hidden; width : 28.3em; *width:28.9em; _width : 29.7em; } form.shipping-billing fieldset#action-buttons div.container div { float : left; margin-right : 1em; font-weight : bold; } form.shipping-billing fieldset#action-buttons div.container div.continue { float : right; } form.shipping-billing fieldset#action-buttons div.container p.back { float: left; padding-left: 6.3em;} form.shipping-billing fieldset#action-buttons div.container p.back a { font-weight: bold;} form.shipping-billing fieldset#action-buttons div.container div.continue input { padding : 0; } form.shipping-billing div.more-order-info { border-top : 0; } /* --Payment Page-- */ div#content div.gift-card-fields fieldset label { float: none; margin: 0 0 0.2em; text-align: left; width: auto; } div.gift-card-fields fieldset.apply { margin-top : .8em !important; } div.payment-information-block div.credit-card-block { overflow : hidden; } div.payment-information-block div.credit-card-block fieldset { float: left; padding-right : 1.5em; } div.payment-information-block div.credit-card-block fieldset label { display : block; /* note - float none breaks ie6.... el: 12/2/09 */ font-weight : bold; padding-bottom : 0.5em; } div.payment-information-block div.credit-card-block fieldset input.credit-card-info, div.payment-information-block div.credit-card-block fieldset select.credit-card-info { height : 1.6em; } div.payment-information-block div.credit-card-block fieldset.card-type select { width: 20.6em; float: left;} div.payment-information-block div.credit-card-block fieldset.card-number { clear:both; width: 95%; } div.payment-information-block div.credit-card-block fieldset.card-number input { width: 20em; float: left;} div.payment-information-block div.credit-card-block fieldset.exp-month span.error { font-weight : bold; } div.payment-information-block div.credit-card-block fieldset.exp-month { clear:both; width: 21.5em; padding-right: 1em;} div.payment-information-block div.credit-card-block fieldset.exp-month select { width: 9.5em; float: left; } div.payment-information-block div.credit-card-block fieldset.exp-year select { width: 9.6em; float: left;} div.payment-information-block div.credit-card-block fieldset.ccvn { clear:both; width: 100%; } div.payment-information-block div.credit-card-block fieldset.ccvn input { width: 8.9em; float: left;} div#content div.payment-information-block div.credit-card-block fieldset.ccvn a.security-code-info { padding: 0.1em 0 0.1em 1.8em; margin-left: 1em; background-image:url("../images/checkout/img_question-mark.gif"); background-repeat: no-repeat; } div#content div.payment-information-block div.deferred-payment-block { display: none; padding: 0 0 1em 11.5em; float: left; clear: left; width: 27.4em; } div#content div.payment-information-block div.deferred-payment-block p { font-weight: bold; color:#BC2129} div#content div.payment-information-block div.deferred-payment-block p a { font-weight: normal;} div#content div.payment-information-block div.deferred-payment-block fieldset { float: left; width: 9em; } div#content div.payment-information-block div.deferred-payment-block fieldset input { float: left; height: 1.3em; width: 1.3em;} div#content div.payment-information-block div.deferred-payment-block fieldset label { width: 6.5em; text-align: left; padding-left: 0.5em; float: left; } body#review-pay #shopping-bag div#content div.payment-information-block div.deferred-payment-block fieldset label { float : left; text-align: left; width : auto !important; padding-left : 0.5em; text-transform: none; font-weight: normal; } form.payment-information div.action-container { clear: both; float: left; width: 100%; border-bottom: 1px solid #CCC; } form.payment-information div.action-container fieldset#action-buttons { padding-top : 2em; margin : 0 0 1em 0; } form.payment-information div.action-container fieldset#action-buttons div#cancel-order { float: right; padding-right: 2em; } form.payment-information div.action-container fieldset#action-buttons div#cancel-order a { font-weight: bold;} form.payment-information div.action-container fieldset#action-buttons div.continue { float : right; } form.payment-information div.action-container fieldset#action-buttons div.continue input { float: left; padding: 0; } form.payment-information div.action-container div.click-once { padding-top : 2.3em; text-align: right; } form.payment-information div.checkout-cybertrust { clear : both; text-align : right; margin : 0 0 1em; } /* -- Buttons -- */ div#content div.button-background, body#pip-popup div.button-background { background-repeat: no-repeat; background-position: center left; border: none;} div#content input.button { font-size: 1em; height: 1.7em; padding: 0; } div#content a.button, body#pip-popup a.button { font-size: 1em; height: 1.7em; padding: 0; text-indent: -999em; display: block; cursor: pointer; overflow: hidden; /* overflow:hidden limits the focus outline to the onscreen button. */ } /* hard target anchor back to inline. not sure why it was block. -CS */ div#content div#button-container a.button { display: inline; } div#content div#btn-add-address { background-image: url('../images/common/btn_add_address.gif'); } div#content div#btn-add-address a.button { width: 13em; } div#content div.btn-add-more-products { background-image: url('../images/common/btn_add_more_products.gif'); } div#content div.btn-add-more-products a.button { width: 13.6em; } div#content div.btn-add-to-cart { background-image: url('../images/common/add_to_cart.gif'); } div#content div.btn-add-to-cart a.button { width: 10em; } div#content div.btn-apply { background-image: url('../images/common/btn_apply.gif'); } div#content div.btn-apply a.button { width: 5.9em; } div#content div#btn-back { background-image: url('../images/common/btn_back.gif'); } div#content div#btn-back a.button { width: 10em; } div#content div.btn-back-to-manage { background-image: url('../images/registry/btn_back_to_manage.gif'); } div#content div.btn-back-to-manage a.button { width: 10em; } div#content div#btn-cancel, div#content div.btn-cancel { background-image: url('../images/common/btn_cancel.gif'); } div#content div#btn-cancel a.button, div#content div.btn-cancel a.button { width: 5.7em; } div#content div.btn-change-selection { background-image: url('../images/common/btn_change-selection.gif'); } div#content div.btn-change-selection a.button { width: 13.1em; } div#content div#btn-continue { background-image: url('../images/common/btn_continue.gif'); } div#content div#btn-continue a.button { width: 8em; } div#content div#btn-create-account { background-image: url('../images/common/btn_create_account.gif'); } div#content div#btn-create-account a.button { width: 13em; } div#content div#btn-details { background-image: url('../images/common/btn_info.gif'); } div#content div#btn-details a.button { width: 10em; } /* note - need to unify btn-edit, but as it requires messing w/ the js, am putting it off - el 5/12/09 */ div#content div#btn-edit { background-image: url('../images/common/btn_edit.gif'); } div#content div#btn-edit a.button { width: 10em; } div#content div.btn-edit { background-image: url('../images/common/btn_edit.gif'); } div#content div.btn-edit a.button { width: 3.8em; } div#content div.btn-edit-items { background-image: url('../images/common/btn_edit_items.gif'); } div#content div.btn-edit-items a.button { width: 7.5em; } div#content div.btn-find-registry { background-image: url('../images/common/btn_find_registry.gif'); } div#content div.btn-find-registry a.button { width: 10em; } div#content div#btn-info { background-image: url('../images/common/btn_info.gif'); } div#content div#btn-info a.button { width: 5.3em; } div#content div.btn-manage { background-image: url('../images/common/btn_manage.gif'); } div#content div.btn-manage a.button { width: 7.2em; } div#content div#btn-new-search { background-image: url('../images/common/btn_new_search.gif'); } div#content div#btn-new-search a.button { width: 10em; } div#content div#btn-previous { background-image: url('../images/common/btn_previous.gif'); } div#content div#btn-previous a.button { width: 10em; } div#content div#btn-print-version { background-image: url('../images/registry/btn_print.gif'); } div#content div#btn-print-version a.button { width: 7em; } div#content div.btn-proceed-to-checkout { background-image: url('../images/common/btn_proceed_to_checkout.gif'); } div#content div.btn-proceed-to-checkout a.button { width: 15.6em; } div#content div#btn-remove, div#content div.btn-remove { background-image: url('../images/common/btn_remove.gif'); } div#content div#btn-remove a.button, div#content div.btn-remove a.button { width: 5.9em; } div#content div#btn-return-home { background-image: url('../images/common/btn_return_to_homepage.gif'); } div#content div#btn-return-home a.button { width: 14.5em; } div#content div.btn-return-to-registry { background-image: url('../images/common/btn_returntomanageregistry.gif'); } div#content div.btn-return-to-registry a.button { width: 26.25em; } div#content div.btn-return-to-manage-registry { background-image: url('../images/common/btn_return-to-manage-registry.gif'); } div#content div.btn-return-to-manage-registry a.button { width: 21.3em; } div#content div.btn-redeem-registry-discount { background-image: url('../images/common/btn_redeem-registry-discount.gif'); } div#content div.btn-redeem-registry-discount a.button { width: 21.8em; } div#content div.btn-return-to-get-started { background-image: url('../images/common/btn_info.gif'); } div#content div.btn-return-to-get-started a.button { width: 5.3em; } div#content div.btn-return-to-registry-list { background-image: url('../images/common/btn_return_to_registry_list.gif'); } div#content div.btn-return-to-registry-list a.button { width: 15.6em; } div#content div.btn-shop { background-image: url('../images/common/btn_shop.gif'); } div#content div.btn-shop a.button { width: 4.7em; } div#content div#btn-sign-in { background-image: url('../images/common/btn_sign-in.gif'); } div#content div#btn-sign-in a.button { width: 5.3em; } div#content div.btn-sign-out { background-image: url('../images/common/btn_sign_out.gif'); } div#content div.btn-sign-out a.button { width: 7em; } div#content div.btn-view-checklist { background-image: url('../images/common/btn_info.gif'); }div#content div.btn-view-checklist a.button { width: 5.3em; } div#content div.btn-add-selected { background-image: url('../images/common/btn_add_selected.gif'); } div#content div.btn-add-selected a.button { width: 13.3em; } div#content div.btn-view-edit { background-image: url('../images/common/btn_view-edit.gif'); } div#content div.btn-view-edit a.button { width: 7em; } /****** /Buttons ******/ /***** Find Registry *****/ div#registry-search { width: 33em; } div#registry-search p.required-info { padding: .5em 0 0 0} div#registry-search p.reg-search-info { padding: 1.5em 0 .5em 0;} div#manage-registry div#registry-search p.reg-search-info { display: none;} div#registry-search fieldset label { height: 1.5em; width: 7.5em; text-align: left; } div#registry-search fieldset input { width: 15em;} div#registry-search div#registrant-name { } div#registry-search fieldset.button-container input { width: auto; _width:96px;} div#registry-search div#event-info { overflow: hidden; padding-top: .5em;} div#registry-search fieldset#event-month { float: left; padding-right: 1.95em; _padding-right: 1em; /* IE6 hack */ } div#registry-search fieldset#event-year { float: left; } div#registry-search div#event-info fieldset#event-year label { visibility: hidden; position: absolute; left: -99em;} div#registry-search div#event-info fieldset#event-month select { width: 7.5em; } div#registry-search div#event-info fieldset#event-year select { width: 6em; } div#registry-search fieldset#event-state select { width: 15.5em; _width:15.65em; } div#registry-search fieldset.button-container { padding-top: 1em; } div#content p.registry-info-block { background-color: #e6e2de; border: .1em solid #333; padding: 1em; margin: 2em 0;} /***** /Find Registry *****/ /****** Popup Close Buttons ******/ body#pip-popup div#btn-popup-close { background-image: url('../images/common/btn_close-window.gif'); } body#pip-popup div#btn-popup-close a.button {width: 6.1em; } /****** /Popup Close Buttons ******/