/* Styles for pages in the /order/ directory. */

/* Use local (in the /order/ directory) copies of all images to retain secure nature of directory */
.ordersAndCheckout div#header a#logo {
	background: url('/order/images/graphics/HUP-logo-oneline-372x50.png') 0 0 no-repeat;
}
.ordersAndCheckout form.catalogSearch input[type=text] {
	background: #FFF url('/order/images/graphics/icon_magnifying-glass_14x14.gif') 4px center no-repeat;
}
.ordersAndCheckout ul#topNav li.cart a {
	background: url('/order/images/graphics/cart.gif') 1em center no-repeat;
}
.ordersAndCheckout div#mainContent ul {
	list-style-image: url('/order/images/graphics/gray-dot.gif');
}
/* Hide various page parts that would normally contain images and content that we don't want to bother keeping 2 copies of and updating (right column and footer) */
.ordersAndCheckout div#mainColumn { width: 100%; border-right: none; }
.ordersAndCheckout div#rightColumn { display: none; }

.ordersAndCheckout div#footer div#leftCol,
.ordersAndCheckout div#footer div#rightCol { display: none; }
.ordersAndCheckout div#footer div#centerCol {
	border: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.ordersAndCheckout div.socialMediaBtns a.fbkIcon { background: url('/order/images/graphics/icon-facebook.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.fbkIcon:hover { background: url('/order/images/graphics/icon-facebook_hover.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.twtIcon { background: url('/order/images/graphics/icon-twitter.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.twtIcon:hover { background: url('/order/images/graphics/icon-twitter_hover.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.emlIcon { background: url('/order/images/graphics/icon-email.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.emlIcon:hover { background: url('/order/images/graphics/icon-email_hover.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.instyIcon { background: url('/order/images/graphics/icon-instagram.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.instyIcon:hover { background: url('/order/images/graphics/icon-instagram_hover.png') 0 0 no-repeat; }
/* Pinterest account is on hiatus as of 10/18/16 */
.ordersAndCheckout div.socialMediaBtns a.pntIcon { background: url('/order/images/graphics/icon-pinterest.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.pntIcon:hover { background: url('/order/images/graphics/icon-pinterest_hover.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.ytbIcon { background: url('/order/images/graphics/icon-youtube.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.ytbIcon:hover { background: url('/order/images/graphics/icon-youtube_hover.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.rssIcon { background: url('/order/images/graphics/icon-rss.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.rssIcon:hover { background: url('/order/images/graphics/icon-rss_hover.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.blgIcon { background: url('/order/images/graphics/icon-blog.png') 0 0 no-repeat; }
.ordersAndCheckout div.socialMediaBtns a.blgIcon:hover { background: url('/order/images/graphics/icon-blog_hover.png') 0 0 no-repeat; }
.ordersAndCheckout div#footer div.socialMediaBtns {
	margin: 1em auto;
	width: 40%;
	float: none;
}
/* Breadcrumbs in Checkout Process */
.ordersAndCheckout div#mainContent h2 { color: #8F9193; }
.ordersAndCheckout div#mainContent span { white-space: nowrap; }
.ordersAndCheckout div#mainContent span.required {
	color: #C4262E;
}
.ordersAndCheckout div#mainContent span.nb {
	font-size: 0.8em;
	font-style: italic;
	font-weight: normal;
	float: right;
}
.ordersAndCheckout div#mainContent span.youAreHere { color: #3F3F3F; }
.ordersAndCheckout div#mainContent span.warning {
	color: #C4262E;
	white-space: normal;
}
.ordersAndCheckout div#mainContent div.cartbuttons { margin: 2em 0; }

/* Used for "Return to Shopping" and "Back to Checkout" in cart.html and error.html, respectively. Other places?? */
.ordersAndCheckout div.attn a.button {
	display: block;
	margin: 1em 0;
	width: 11em;
	text-align: center;
}
/* Content within "notes" (blocks w/ dotted border) */
.ordersAndCheckout div#mainContent div.note h3,
.ordersAndCheckout div#mainContent div.note h5 { margin-top: 0; }
.ordersAndCheckout div#mainContent div.note.multiPara { padding-bottom: 0; }
.ordersAndCheckout div#mainContent div.note.multiPara p { margin-bottom: 1em; }
.ordersAndCheckout div#mainContent div.note .size1of2 { margin-top: 1em; }

/* Form Validation Error Messages */
.ordersAndCheckout div#mainContent div#error {
  margin: 1em auto;
  border: 1px solid #C4262E;
  padding: 0 1em;
  background-color: #FFEFF0;
}

/* Contents of Shopping Cart (used in cart.html and then later on in the checkout process) */
.ordersAndCheckout div#mainContent table#cartContents { border-bottom: 1px solid #8F9193; }
.ordersAndCheckout div#mainContent table#cartContents tbody td {
	border-bottom: 1px solid #8F9193;
	vertical-align: middle;
}
.ordersAndCheckout div#mainContent table#cartContents td.subtotal {
	border-left: 1px solid #8F9193;
	border-right: 1px solid #8F9193;
}
.ordersAndCheckout div#mainContent table#cartContents tfoot td { background-color: #E7E7E7; vertical-align: middle; }
.ordersAndCheckout div#mainContent table#cartContents h5 { margin: 0; color: #3F3F3F; }

.ordersAndCheckout div#mainContent table#cartContents select { margin: 0; }

.ordersAndCheckout div#mainContent table#cartContents td#subtotal,
.ordersAndCheckout div#mainContent table#cartContents td#totaltotal { text-align: right; }

/* Forms 'n' Inputs */
.ordersAndCheckout div#mainContent form,
.ordersAndCheckout div#mainContent label,
.ordersAndCheckout div#mainContent input,
.ordersAndCheckout div#mainContent select,
.ordersAndCheckout div#mainContent textarea { display: block; }

.ordersAndCheckout div#mainContent label {
	margin: 0;
	font-size: 1.2em;
	font-weight: bold;
}
.ordersAndCheckout div#mainContent label.radioLabel { font-weight: normal; }
.ordersAndCheckout div#mainContent p { clear: both; }
.ordersAndCheckout div#mainContent p.fauxLabel {
	margin: 0 0 0.25em 0;
	font-family: Graphik, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: bold;
}
/* Required Fields */
.ordersAndCheckout div#mainContent span.asterisk { color: #C4262E; white-space: nowrap; }
.ordersAndCheckout div#mainContent .size1of1 span.asterisk { white-space: normal; }

.ordersAndCheckout div#mainContent input,
.ordersAndCheckout div#mainContent select,
.ordersAndCheckout div#mainContent textarea {
	margin: 0.5em 0 0 0;
	padding: 0.25em;
	font-size: 0.9em;
}
.ordersAndCheckout div#mainContent input,
.ordersAndCheckout div#mainContent textarea {
	font-family: Graphik, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.ordersAndCheckout div#mainContent input[type='text'],
.ordersAndCheckout div#mainContent input[type='email'] {
	height: 1em;
	line-height: 1em;
}
.ordersAndCheckout div#mainContent .size1of1 {
	margin: 0 0 1em 0;
	width: 95%;
	clear: both;
	float: none;
}
.ordersAndCheckout div#mainContent .size1of1 input,
.ordersAndCheckout div#mainContent .size1of1 select,
.ordersAndCheckout div#mainContent .size1of1 textarea {
	width: 100%;
}
.ordersAndCheckout div#mainContent .size1of2 {
	margin: 0 4% 1em 0;
	width: 46%;
	float: left;
}
.ordersAndCheckout div#mainContent .size1of2 input,
.ordersAndCheckout div#mainContent .size1of2 select,
.ordersAndCheckout div#mainContent .size1of2 textarea { width: 100%; }

.ordersAndCheckout div#mainContent .size1of3 {
	margin: 0 3% 1em 0;
	width: 31%;
	float: left;
}
.ordersAndCheckout div#mainContent .size1of3 input { width: 95%; }
.ordersAndCheckout div#mainContent .size1of3 select { width: 100%; }
.ordersAndCheckout div#mainContent .lastinrow { margin-right: 0 !important; }

.ordersAndCheckout div#mainContent label input[type='checkbox'],
.ordersAndCheckout div#mainContent label input[type='radio'] {
	display: inline !important;
	width: auto !important;
	font-weight: normal !important;
}
.ordersAndCheckout div#mainContent input.button { padding: 0.5em 1em; }

.ordersAndCheckout div#mainContent div.addressEntry {
	margin: 1em 0;
	border: 1px solid #8F9193;
	border-radius: 9px;
	padding: 0.5em 1em;
	background-color: #EFEFEF;
}
.ordersAndCheckout div#mainContent div.addressEntry h5 { margin-top: 0; }
.ordersAndCheckout div#mainContent div.addressEntry p { margin: 0; }
.ordersAndCheckout div#mainContent div.addressEntry label.radioLabel { margin: 0; font-weight: bold; }

/* Individual Pages */
#checkout1 div#mainContent div.note p.smallText { margin: 0.5em 0 0; font-size: 1.1em; }
#checkout1 div#mainContent div.note input#signInBtn { clear: both; }
#checkout1 div#mainContent div.note#addressWelcome {} /* "Welcome back, [PERSON]" message */
#checkout1 div#mainContent p#footprint,
#checkout1 div#mainContent p#penguinRandomHouse {
	font-family: Graphik, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 0.85em;
	font-weight: normal;
}
#checkout1 div#mainContent div#isBillingAddy {
	margin-top: 2em;
	padding: 0.5em;
}

#checkout2 div#mainContent span.shippingEst { font-weight: bold; }
#checkout2 div#mainContent div#pwSet {
	background-color: #E7E7E7;
	font-size: 0.85em;
}

#fgtPwd div#mainContent div.note a#submitBtn { margin-top: 3em; }
#resetPwd div#mainContent div.note a#submitBtn { margin-bottom: 0; }

#fgtPwd div#mainContent div.cartbuttons,
#resetPwd div#mainContent div.cartbuttons { text-align: left; }

#fgtPwd div#mainContent div.cartbuttons a.button,
#resetPwd div#mainContent div.cartbuttons a.button { margin-left: 0; }

#searchError div#mainContent .catalogSearch input {
	font-size: 1em;
	margin: 0 0.5em 0.5em 0;
	padding: 0.5em;
}
#searchError div#mainContent .catalogSearch input[type="text"] {
	padding-left: 22px !important;
	width: 400px;
}
#searchError div#mainContent input.gsc-search-button {
	margin-left: 0.25em;
	font-size: 0.8em;
}