/* File: forms.css Author: adam maxfield Created: 8-2009 Description: This file contains all common styles for Pottery Barn Kids forms. */ div#content p.required-fields { padding-bottom: 0; } /* Site-wide input styling */ div#content form { padding-bottom: 1em; } div#content fieldset { margin-top: 1em; } div#content fieldset.fieldset-group { margin: 0 0 1em; } div#content fieldset label, div#content form .label-analogue { font-size: 1.1em; width: 13em; display: inline-block; padding-right: .6em; *padding-right: 1em; text-align: right; font-weight: bold; text-transform: uppercase; } div#content fieldset input, div#content fieldset textarea { margin: 0; padding: 0.1em; color: #645F5F;} div#content fieldset select { color: #645F5F; padding: 0; margin: 0;} div#content fieldset.checkbox-set { padding-left: 15.4em; } div#content fieldset.checkbox-set input.checkbox { width: auto; vertical-align: bottom; *vertical-align: middle; } div#content fieldset.checkbox-set label { position: static; text-align:left; text-transform: none; font-weight: normal; width: auto; } ul.errors { margin-bottom: 1em; } div#content fieldset.hidden-label label, div#content fieldset label.hide { display: none;} div#content fieldset .disabled { background: #d4d0c8; } div#content form div.input-note { margin: 0.4em 0 1em 14em; *margin-left: 14.3em; font-size: 1.1em; } div#content form div.input-note * { font-size: 1em; } div#content form .button-container { padding-left: 15.4em; *padding-left: 15.8em; } div#content .button-container { padding-top: 1em; } div#content .button-container input.button { width: auto; height: auto; } div#content .button-container input.button, div#content .button-container div.button-background { padding: 0; display: inline-block; margin-right: .7em; *float: left; vertical-align: middle; } div#content .button-container span.or { display:inline-block; vertical-align: middle; font-size:1.1em; padding: 0 .5em 0 0; *float: left; *padding: .4em .6em 0 0; } span.required { display: inline;/* Over-ride using 'display:none' in the section-specific stylesheet to remove '*' from fields that are not required */ } /* --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 {} /* --Apply Billing Address to Shipping -- */ div#create-edit-fields div.checkbox-set input#applyBillingAddtoShipping { float: left; width: auto; margin-left: 14em; *margin-left: 14.7em; _margin-left: 14.9em; } /* --Email Block-- */ div#content fieldset.emailblock input { width: 18em; } /* --Email Us/Order Inquiries Message Field-- */ fieldset#two-fields div fieldset label.subject2 { visibility: hidden; } fieldset#message-box label { vertical-align: top; padding-top: .5em; } fieldset#message-box textarea#message { height:9.1em; width:36.3em; *width:35.5em; } /* --Address Block-- */ div#content fieldset.addressblock input { width: 29em; } div#content fieldset.addressblock div.state-zip fieldset { display: inline; } div#content fieldset.addressblock div.state-zip select, div#content fieldset.addressblock div.state-zip label, div#content fieldset.addressblock div.state-zip input { display: inline-block; vertical-align: middle; } div#content fieldset.addressblock fieldset.state select { width: 16em; padding: .1em; } div#content fieldset.addressblock fieldset.zip label { width: 7.25em; *width: 7.6em; margin-left: 0; padding-right: .5em; } div#content fieldset.addressblock fieldset.zip input { width: 4.5em; } div#content fieldset.address-line-2 label { visibility: hidden; } /* Hide address line 2 label from non-screen readers*/ /* --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 #ccc; } 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; } form.shipping-billing div.checkbox-set { overflow : hidden; margin-bottom : 0.7em; *margin-bottom : 0.4em; } form.shipping-billing div.checkbox-set, form.shipping-billing fieldset.preferred-shipping-method fieldset { margin-left : 13.2em; } div#shopping-bag form.shipping-billing div.checkbox-set, div#shopping-bag form.shipping-billing fieldset.preferred-shipping-method fieldset{ margin-left:12em; *margin-left:11.6em; _margin-left:11.8em; _width:60em; } 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 div.container { overflow : hidden; width : 26.8em; *width:27em; _width : 28em; } form.shipping-billing fieldset#action-buttons div.container div { float : left; margin-right : 1em; } form.shipping-billing fieldset#action-buttons div.container div.continue { float : right; } 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.gift-card-fields fieldset label { float : none !important; margin : 0 0 0.2em !important; text-align : left !important; width : auto !important; } div.gift-card-fields fieldset.apply { margin-top : 2em !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.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; margin : 2em 0 1em 14.9em; } div.payment-information-block div.deferred-payment-block fieldset { margin : 1em 4em 0 0; float: left; } div.payment-information-block div.deferred-payment-block fieldset input { 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 { overflow : hidden; width : 58em; *width : 58.3em; } form.payment-information div.action-container fieldset#action-buttons { width : 33em; *width : 33em; padding-top : 2em; margin : 0 0 1em 0; } form.payment-information div.action-container fieldset#action-buttons div { float : left; padding-right : 0.8em; } form.payment-information div.action-container fieldset#action-buttons div.change { padding-right : 0; } 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 { float : right; padding-top : 2.3em; } form.payment-information div.checkout-cybertrust { clear : both; text-align : right; margin : 0 0 1em; } /***** 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 *****/ /* -- Order Tracking: Index -- */ div#content fieldset#order-info input { width: 11.8em; } div#content fieldset#order-info fieldset.button-container { margin-top: 0; *padding-left: 15.8em; } div#order-tracking div#content fieldset.email-password { padding-left: 15.4em; *padding-left: 15.8em; } div#order-tracking div#content form#check-history fieldset.button-container { margin-top: 0; padding-top: 0; *padding-left: 15.8em; } div#order-tracking div#content fieldset#order-info { margin-top: 0; } /* -- Birth Announcement -- */ div#content fieldset.event-date fieldset {float: left; padding-right: 1em;} div#content fieldset.hour label.time-hour-min { visibility: hidden; _text-indent: -999em;/*ie6 wants to leave space unless you move the text*/ width: 0; padding-right: .3em; } div#content fieldset.hour label.am-pm { width: 1.5em; padding-right: 1em; font-weight: normal; text-transform: lowercase; } div#content fieldset.weight label.birth-lbs-oz { width: auto; padding-right: 1em; font-weight: normal; text-transform: lowercase; } div#content fieldset.emailblock label { vertical-align: middle; } div#content fieldset input.checkbox { width: auto; } div#content fieldset.emailblock input.checkbox { margin-left: .5em; } div#content fieldset.emailblock label.send-copy { text-align: left; font-weight: normal; text-transform: none; vertical-align: top; padding-top: .4em; } div#content fieldset.recipient-email { position: relative; } div#content fieldset.recipient-email label { vertical-align: top; padding-top: .5em; } div#content fieldset.recipient-email textarea.recipient-email-address { height:9.1em; width:34.3em; *width:33.5em; } div#content fieldset.recipient-email fieldset.include-reg-list-link { position: absolute; top: 3.5em; left: 54.5em; width: 25em; } div#content fieldset.recipient-email input.checkbox { vertical-align: top; } div#content fieldset.recipient-email label.include-link { text-align: left; font-weight: normal; text-transform: none; padding: 0; *padding-top: .3em; width: 20em; } /*"Having trouble fitting your addresss or city?" pop-up*/ div#content span.nickname-info { position: relative; height:1.8em; line-height:1.8em; } div#content span.nickname-info a { font-size:1em; position:absolute; top:-1.8em; *top:-0.3em; left:.5em; outline:0; margin-right:-13em; *margin-right:0; *width:13em; } @media all and (-webkit-min-device-pixel-ratio:0) { body:first-of-type div#content span.nickname-info a { top: -0.8em; } /* Safari hack */ } /****** Buttons ******/ div#content fieldset.button-container input { font-size: 1em; width: auto;/* For Button Inputs: Over-rides widths set for Field Inputs above. */ } div#content div.button-background, body#pip-popup div.button-background { font-size: 1em; background-repeat: no-repeat; background-position: center left; border: none;} div#content a.button, body#pip-popup a.button { font-size: 1em; height: 2.7em; padding: 0; } div#content a.button, body#pip-popup a.button { text-indent: -999em; display: block; cursor: pointer; overflow: hidden; /* -- overflow:hidden limits the focus outline to the onscreen button. -- */ } /* All background replacement buttons are targeted through .classes! If a button needs an #id for JavaScript, give it an identical class for CSS selector targeting. It's easy and fun! All the cool kids are doing it! */ div#content div.btn-add-additional-items { background-image: url('../images/common/btn_add-additional-items.gif'); } div#content div.btn-add-additional-items a.button { width: 14.5em; height: 2.3em; } 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: 14.1em; height: 2.3em; } 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.9em; height: 2.3em; } div#content div.btn-add-selected { background-image: url('../images/common/btn_continue-with-checked-items.gif'); } div#content div.btn-add-selected a.button { width: 21.6em; height: 2.7em; } div#content div.btn-announce-registry { background-image: url('../images/common/btn_announce-registry.gif'); } div#content div.btn-announce-registry a.button { width: 11.5em; height: 1.5em; } div#content div.btn-back { background-image: url('../images/common/btn_back.gif'); } div#content div.btn-back a.button { width: 5.7em; height: 2.3em; } div#content div.btn-cancel { background-image: url('../images/common/btn_cancel.gif'); } div#content div.btn-cancel a.button { width: 5.8em; height: 2.3em; } div#content div.btn-continue { background-image: url('../images/common/btn_continue.gif'); } div#content div.btn-continue a.button { width: 8.2em; height: 2.3em; } div#content div.btn-continue-shopping { background-image: url('../images/common/btn_continue-shopping.gif'); } div#content div.btn-continue-shopping a.button { width: 13.3em; height: 2.3em; } div#content div.btn-create-an-account { background-image: url('../images/common/btn_create-an-account.gif'); } div#content div.btn-create-an-account a.button { width: 13.8em; height: 2.3em; } div#content div.btn-details { background-image: url('../images/common/btn_details.gif'); } div#content div.btn-details a.button { width: 5.6em; height: 2.2em; } 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.9em; height: 2.3em; } div#content div.btn-edit-sm { background-image: url('../images/common/btn_edit_sm.gif'); } div#content div.btn-edit-sm a.button { width: 4.3em; height: 1.8em; } div#content div.btn-edit-personalization-small { background-image: url('../images/common/btn_edit-personalization-small.gif'); } div#content div.btn-edit-personalization-small a.button { width: 12.6em; height: 1.8em; } 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: 14.8em; height: 2.3em; } div#content div.btn-printable-version { background-image: url('../images/common/btn_printable-version.gif'); } div#content div.btn-printable-version a.button { width: 10.8em; height: 1.5em; } div#content div.btn-remove { background-image: url('../images/common/btn_remove.gif'); } div#content div.btn-remove a.button { width: 6.3em; height: 2.3em; } div#content div.btn-sign-in { background-image: url('../images/common/btn_sign-in.gif'); } div#content div.btn-sign-in a.button { width: 6.8em; height: 2.3em; } div#content div.btn-shop-now { background-image: url('../images/common/btn_shop-now.gif'); } div#content div.btn-shop-now a.button { width: 4.7em; } div#content div.btn-sign-out { background-image: url('../images/common/btn_sign-out.gif'); } div#content div.btn-sign-out a.button { width: 7.1em; height: 2.3em; } div#content div.btn-view-registry-list { background-image: url('../images/common/btn_view-registry-list.gif'); } div#content div.btn-view-registry-list a.button { width: 13.3em; height: 2.3em; } div#content input#btn-send { width: 5.6em; height: 2.3em; } div#content fieldset#order-info input#btn-view-status { width: 13.6em; height:2.3em; } div#content input#btn-sign-in { width: 6.8em; height: 2.3em; } div#content input#btn-submit { width: 6.8em; height: 2.3em; } div#content input#btn-continue, div#content input#btn-continue-2 { width: 8.2em; *width: 8.3em;/*ie hack: unsure why btn was 1px small*/ height: 2.3em; } div#content fieldset.button-container input.btn-remove { width: 7.2em; height: 2.3em; } div#membership-info div#content input.btn-start-shopping { width: 11.5em; } /****** /Buttons ******/ /********** // END forms.css **********/