/* File: forms.css Author: Erin Lathers Created: 5-1-2009 Description: This file contains all common styles for Pottery Barn forms. */ /* Fieldsets */ span.required { display: inline;/* Over-ride using 'display:none' in the section-specific stylesheet to remove '*' from fields that are not required */ } div.the-bar {width:70em;} div#content select, div#content input { font-family : Verdana,Arial,Helvetica,Sans-serif; } div#content legend, div#content fieldset legend { font-size : 1.1em; *margin-left : -7px; line-height : 1.3em; } div#content fieldset { padding-top: 1em; } div#content fieldset.hidden-label label { display : none; } div#content fieldset label { display: block; float: left; text-align : right; margin-right: .5em; width: 11em; } 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 12.2em; } div#content div.user-info-comment.email-options { padding-left : 11.6em !important; } 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; } /* --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:; } /* --SVC Check Balance-- */ div#svc-balance div#check-your-balance fieldset { float : left; margin-right : 3em; } div#svc-balance div#check-your-balance fieldset label { float : none; text-align : left; width : auto; margin-bottom : 0.5em; } div#svc-balance div#check-your-balance fieldset input#svcCardNumber { width : 12em; } div#svc-balance div#check-your-balance fieldset input#pinNumber { width : 6em; } div#svc-balance div#check-your-balance fieldset.check { padding-top : 3em; } /* --Addressblock-- */ fieldset.addressblock input { width: 28.5em; } fieldset.addressblock div.state-zip { width: 44.7em; *width: 44.6em; _width: 45.5em; overflow: hidden;} fieldset.addressblock fieldset.state { float: left; } fieldset.addressblock fieldset.state select { 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; *margin-right: .25em; width: 6.5em; margin-left: .5em; *margin-left: 0em; } fieldset.addressblock fieldset.zip input { width: 4.5em; } fieldset.addressblock div.phone-note, p.note { margin: .2em 0 .2em 11.75em; font-size: 1.1em; } fieldset.address-line-2 span { visibility: hidden; /* this is global because it should (almost?) never display as required. */ } /* --Shipping and Billing pages-- */ form.shipping-billing h1 { font : normal 1.5em Arial, Helvetica, sans-serif !important; text-transform : none !important; padding : 0.3em 1.1em !important; margin-top : -1px; *margin-top : 0; border-top : 1px solid #999; border-bottom : 1px solid #999; background-color : #f2f2f2; } form.shipping-billing div#messaging { margin-left : 1.5em; } form.shipping-billing div.user-info-comment { margin-left : 2em; padding-left : 10.8em !important; } form.shipping-billing div.user-info-comment.billing { margin : 1em 0 1em 2.8em; } form.shipping-billing fieldset, form.shipping-billing fieldset div.checkbox-set, form.shipping-billing fieldset div.user-info-comment { padding-left : 1em; } form.shipping-billing fieldset#shipping-billing-info { } form.shipping-billing fieldset#shipping-billing-info legend { font-size : 1.2em !important; font-weight : bold; padding-left : 0.5em; } form.shipping-billing fieldset#shipping-billing-info.addressblock { } form.shipping-billing fieldset#shipping-billing-info.addressblock fieldset { width : 46.5em; } form.shipping-billing fieldset#shipping-billing-info.addressblock label { width : 10em; } form.shipping-billing fieldset#shipping-billing-info.addressblock input { width : 28.3em; _width : 27.8em; } form.shipping-billing fieldset#shipping-billing-info.addressblock div.state-zip { width : 45.5em; } form.shipping-billing fieldset#shipping-billing-info.addressblock div.state-zip fieldset { width : auto; } form.shipping-billing fieldset#shipping-billing-info.addressblock fieldset.state input { width : 17em; } form.shipping-billing fieldset#shipping-billing-info.addressblock fieldset.state select { width : 17em; _width : 14em; } form.shipping-billing fieldset#shipping-billing-info.addressblock fieldset.zip { float : left; width : 9.2em; } form.shipping-billing fieldset#shipping-billing-info.addressblock fieldset.zip label { width : auto; _padding-left : 0; } form.shipping-billing fieldset#shipping-billing-info.addressblock fieldset.zip input { width : 4.5em; } form.shipping-billing fieldset.ship-to { padding-bottom : 2em; border-bottom : 0.1em solid #ccc; } form.shipping-billing fieldset.addressblock { } form.shipping-billing fieldset.addressblock fieldset span.nickname-info { padding-left : 0.7em; } form.shipping-billing fieldset.addressblock legend { } form.shipping-billing div.communications-preferences { margin : 2em 0 2em 13.2em; } form.shipping-billing div.communications-preferences p a { font-weight : bold; } form.shipping-billing div.checkbox-set { overflow : hidden; margin : 0.7em 0; *margin : 0.4em 0; } form.shipping-billing div.checkbox-set { margin-left : 13.5em; } form.shipping-billing div.checkbox-set.billing-page { margin-left : 11.5em; } form.shipping-billing div.checkbox-set input, form.shipping-billing div.checkbox-set label { float : left; width : auto !important; } form.shipping-billing fieldset.preferred-shipping-method fieldset input { float : left; width : auto !important; } form.shipping-billing fieldset.preferred-shipping-method fieldset label { float : left; width : 36em !important; text-align : left !important; } form.shipping-billing div.checkbox-set label { text-align : left !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 { clear : left; margin : 2em 0 2em 1em !important; } form.shipping-billing fieldset.preferred-shipping-method legend { padding-left : 0.7em; } form.shipping-billing fieldset.preferred-shipping-method fieldset { padding-top : 0.5em; margin : 0 0 0 10.5em !important; } form.shipping-billing fieldset.preferred-shipping-method p { margin-top : 1.5em; } form.shipping-billing fieldset.optional-personal-message { text-align : left; } form.shipping-billing fieldset.optional-personal-message fieldset { margin-left : 0; padding-left : 0; } form.shipping-billing fieldset.optional-personal-message legend { padding-top : 2em; font-size : 1.2em !important; font-weight : bold; } form.shipping-billing fieldset.optional-personal-message label { visibility:hidden !important; } form.shipping-billing fieldset.optional-personal-message p, form.shipping-billing fieldset.optional-personal-message input { width : 28.3em; _width : 27.8em; } form.shipping-billing fieldset.optional-personal-message p { margin : 1em 0 0 11.6em; } form.shipping-billing fieldset.action-buttons { overflow : hidden; width : 18.7em; *width : 18.9em; margin : 0 !important; padding : 1em 0 0 0; } form.shipping-billing fieldset.action-buttons div { float : left; margin-right : 1em; } form.shipping-billing fieldset.action-buttons div.continue { float : right; margin-right : 0; } form.shipping-billing fieldset.action-buttons div.continue input { padding : 0 !important; } form.shipping-billing div.more-order-info { border-top : 0; } form.shipping-billing div.cybertrust { padding-top : 1em; } /* --Payment Page-- */ div.gift-cards-and-help div.gift-card-fields { overflow : hidden; margin-top : 2em; } div.gift-cards-and-help fieldset { float : left; padding : 0 2em 0.3em 0; } div.gift-cards-and-help label { float : none !important; width : auto !important; text-align : left; padding-bottom : 0.3em; } div.gift-cards-and-help input { float : none !important; } div.gift-cards-and-help fieldset input.gift-card-input { height : 1.6em; } div.gift-cards-and-help fieldset.enter-code input { width : 16em; } div.gift-cards-and-help fieldset.enter-pin input { width : 6em; } div.gift-cards-and-help fieldset.apply { margin-top : 2.6em !important; padding-top : 0 !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; float : none !important; font-weight : bold; text-align : left !important; width : auto !important; 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 { } div.payment-information-block div.credit-card-block fieldset.card-number { } 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 { } div.payment-information-block div.credit-card-block fieldset.exp-year { padding-top : 2em; } div.payment-information-block div.credit-card-block fieldset.exp-month select, div.payment-information-block div.credit-card-block fieldset.exp-year select { width : auto !important; } div.payment-information-block div.credit-card-block fieldset.ccvn { } div.payment-information-block div.credit-card-block fieldset.ccvn a { padding-left : 1em; text-decoration : none !important; } div.payment-information-block div.deferred-payment-block { display : none; overflow : hidden; margin : 2em 0 1em; } div.payment-information-block div.deferred-payment-block fieldset { float : left; margin : 1em 2em 0 0; } div.payment-information-block div.deferred-payment-block fieldset input { float : left; } div.payment-information-block div.deferred-payment-block fieldset label { float : left; width : auto !important; padding-left : 0.5em; } form.payment-information fieldset.action-buttons { overflow : hidden; width : 28.9em; *width : 29.1em; margin : 0 !important; padding-top : 1em; } form.payment-information fieldset.action-buttons div { float : left; margin-right : 1em; } form.payment-information fieldset.action-buttons div.continue { float : right; margin-right : 0; } form.payment-information fieldset.action-buttons div.continue input { padding : 0 !important; } form.payment-information div.more-order-info { border-top : 0; } form.payment-information div.cybertrust { padding-top : 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 a.button, body#pip-popup a.button { font-size: 1em; height: 2.5em; 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: 9.4em; } div#content div.btn-add-to-cart { background-image: url('../images/common/btn_add_to_bag_off.gif'); } div#content div.btn-add-to-cart a.button { width: 9.5em; } div#content div.btn-back { background-image: url('../images/common/btn_back.gif'); } div#content div.btn-back a.button { width: 5.3em; } div#content div.btn-cancel { background-image: url('../images/common/btn_cancel.gif'); } div#content div.btn-cancel a.button { width: 5.6em; } div#content div.btn-check-balance { background-image: url('../images/common/btn_check-balance.gif'); } div#content div.btn-check-balance { width: 10em; } div#content div.btn-close { background-image: url('../images/common/btn_close.gif'); } div#content div.btn-close a.button {width: 9.6em; } div#content div.btn-close-window { background-image: url('../images/common/btn_close-window.gif'); } div#content div.btn-close-window a.button {width: 6.1em; } div#content div.btn-continue { background-image: url('../images/common/btn_continue.gif'); } div#content div.btn-continue a.button { width: 7.5em; } div#content div.btn-continue-previous { background-image: url('../images/common/btn_continue-previous.gif'); } div#content div.btn-continue-previous a.button { width: 7.6em; } div#content div.btn-create-account { background-image: url('../images/common/btn_create-an-account.gif'); } div#content div.btn-create-account a.button { width: 15.3em; height: 2.5em; } div#content div.btn-details { background-image: url('../images/common/btn_details.gif'); } div#content div.btn-details a.button { width: 6.15em; } 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 { background-image: url('../images/common/btn_edit.gif'); } div#content div#btn-edit a.button { width: 3.8em; } div#content div#btn-edit-large { float : left; background-image: url('../images/common/btn_edit-large.gif'); } div#content div#btn-edit-large 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: 8.8em; } div#content div.btn-print { background-image: url('../images/common/btn_print.gif'); } div#content div.btn-print a.button { width: 7em; } div#content div.btn-print-directions { background-image:url('../images/customer-service/store-locator/print_directions_btn.gif'); } div#content div.btn-print-directions a.button { width: 11.2em; } div#content div.btn-proceed-to-checkout { background-image: url('../images/common/btn_proceed-to-checkout_off.gif'); } div#content div.btn-proceed-to-checkout a.button { width: 15.6em; } div#content div.btn-remove { background-image: url('../images/common/btn_remove.gif'); } div#content div.btn-remove a.button { width: 10em; } 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: 13.9em; } 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: 10em; } 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-submit { background-image: url('../images/common/btn_submit.gif'); } div#content div.btn-submit a.button { width: 7em; } div#content div.btn-view-order-status { background-image: url('../images/common/btn_view_order_status.gif'); } div#content div.btn-view-order-status a.button { width: 7em; } div#content div.btn-download { background-image: url('../images/common/btn_download.gif'); } div#content div.btn-download a.button { width: 9em;} div#content div.btn-adobe-reader { background-image: url('../images/common/btn_get_acrobat.gif'); width: 9em;} div#content div#btn-adobe-reader a.button { height: 3.5em; } /****** Input Buttons ******/ div#content input.button { font-size: 1em; padding: 0; } div#content fieldset input.btn-send { width : auto; height: auto; } /****** /Input Buttons ******/ /****** /Buttons ******/