/* ==============================================
Apple Store New Store CSS

This style sheet contains all CSS for:
   - the Store layout (columns etc.)

This style sheet is to be used in conjunction
with newstore-nav.css (or whatever its final
name will be)!

version:  0.3.4
site:     Apple Store Online -- store.apple.com
date:     February 21, 2007
================================================= */

/* =MISC
========================================== */
fieldset {
	border: none;
	padding: 0;
}
/* =LAYOUT-STRUCTURES
These classes are applied to the containing element that identifies each area.
Classes represent:

.nms = Nav, Main and Secondary columns
.nm  = Nav, Main column
.ms  = Main and Secondary columns
.m   = Main column (no left nav)           */

/* =NMS
========================================== */
.nms .as-column {
	display: inline;
	float: left;
}
.nms #as-main {
	margin: 0 10px;
}
.nms #as-secondary {
	float: right;
	margin-bottom: 20px;
	overflow: hidden;
	width: 135px;
}
.nms #as-main p,
.nms #as-main ul,
.nms #as-main .banner-grid li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =NM
========================================== */
.nm .as-column {
	float: left;
}
.nm #as-main {
	margin: 0 0 0 10px;
}

/* =HOMEPAGE
========================================== */
#as-homepage #as-main p,
#as-homepage #as-main h3,
#as-homepage #as-main .banner-grid {
	width: 433px;
}

/* =PAGE-CONTENT
========================================== */
#as-page-content {
	float: left;
	position: relative;
}

/* =TOPBAR
========================================== */
.topbar * {
	float: left;
	margin: 0;
}
.topbar p {
	margin: 0 0 0 4px;
}
.topbar {
	height: 115px;
}
.topbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =LANDING
========================================== */
#as-landing .banner-grid li,
#as-landing .banner-grid,
#as-landing #as-main a {
	display: inline;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#as-landing .banner-grid {
	border-bottom: 1px solid rgb(183,184,188);
	padding: 8px 0;
}
#as-landing .banner-grid li {
	border-left: 1px solid rgb(183,184,188);
}
#as-landing .banner-grid li.first {
	border: none;
}
#as-landing #as-main a {
	margin: 8px 9px;
}
#as-landing #as-main .topbar a {
	margin: 0;
	padding: 0;
}

#as-landing .topbar .banner-grid {
	border-bottom: none;
}
#as-landing .topbar .banner-grid li {
	border-left: none;
}
#as-landing .last-row .banner-grid {
	border-bottom: none;
}



/* =SUBHEADER
========================================== */
#subheader {
	background: #ececec url(i/bg-cat-subheader.gif) 0 0 no-repeat;
	clear: both;
	height: 38px;
	line-height: 38px;
	margin: 0;
	position: relative;
	width: 748px;
}
#subheader fieldset {
	padding: 0 16px;
}
#subheader select {
	margin: 0 3px;
}
#subheader .sort {
	float: right;
}
#subheader .browse {
	width: 340px;
}
#subheader .browse select {
	width: 200px;
}
#subheader label {
	float: left;
	margin: 8px 0 6px;
	height: 24px;
	line-height: 24px;
	position: relative;
}
#product-loading-filter {
	display: none;
	position: absolute;
	top: 4px;
	right: -24px;
}
#product-loading-sort {
	display: none;
	position: absolute;
	top: 4px;
	left: -24px;
}

/* =FOOTER
========================================== */
#as-footer,
#as-country-switch {
	clear: left;
	line-height: 130%;
	margin: 40px auto 10px;
	text-align: center;
}
#as-footer p,
#as-footer ul {
	clear: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
.as-footerlinks li {
	border-right: 1px solid #868F98;
	display: inline;
	margin: 0;
	padding: 0;
}
.as-footerlinks li.contactus {
	border-right: none;
}
.as-footerlinks :link,
.as-footerlinks :visited {
	padding: 1px 4px;
	text-decoration: none;
}
.as-footerlinks :link:hover,
.as-footerlinks :visited:hover {
	text-decoration: underline;
}

/* =COUNTRY-SWITCH
========================================== */
#as-country-switch fieldset {
	margin: 0 auto;
	text-align: center;
	width: 380px;
}
#as-country-switch select {
	display: block;
	margin: 4px auto;
}

/* =MORE-STORES
========================================== */
#as-more-stores li {
	margin: 0;
	padding: 0 5px 0 6px;
}
#as-more-stores a {
	border-bottom: 1px solid #fff;
	padding: 4px 0;
}
#as-more-stores a.as-international {
	border: none;
}

/* =IPODSTORE-RIGHT-RAIL
========================================== */
.songs li a strong {
	display: block;
}
.songs li a span {
	position: absolute;
	visibility: hidden;
}
.songs li a img {
	margin: 3px 0;
}

/* =PRODUCT-CLUSTER
========================================== */
.product-loading-tile {
	display: inline;
	margin: 19px 0 0 16px;
}
.product-cluster {
	border: 1px solid rgb(206,214,219);
	border-width: 1px 0 1px 0;
	display: inline;
	float: left;
}
.product-page {
	display: block;
	float: left;
	position: relative;
}
.product-page .hidden {
	left: 0;
	position: absolute;
	top: 0;
	z-index: 5;
}
.product-row {
	background: #fff url(i/bg-cat-product-row.gif) bottom center no-repeat;
	border: 1px solid rgb(206,214,219);
	border-width: 0 1px 0 1px;
	clear: both;
	display: inline;
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
	width: 746px;
}
.product-cluster .product {
	background: url(i/bg-product-tile.gif) top right no-repeat;
	display: inline;
	float: left;
	height: auto !important;
	height: 14.75em;
	margin: 0;
	min-height: 14.75em;
	padding: 0 0 11px;
	width: 186px !important;
	width: 185px;
}
.product-cluster .last-tile {
	background-image: none;
	margin: 0;
}
.product-cluster .last-row {
	background-image: none;
}
.product-cluster .product .shipping p {
	margin: 0;
}
.product-cluster .product .name,
.product-cluster .product .image,
.product-cluster .product .shipping,
.product-cluster .product .price,
.product-cluster .product .rating {
	margin: 0 16px;
	line-height: 1.4em;
}
.product-cluster .product .image {
	height: 94px;
	margin: 5px 16px 11px;
}
.product-cluster .product .name {
	height: auto !important;
	height: 2.9em;
	margin-top: 19px;
	min-height: 2.9em;
}
.product-cluster .product .price {
	margin: 2px 16px 0;
}
.product-cluster .product .shipping {
	position: relative;
}
.product-cluster .product .shipping span.freeshipping {
	position: absolute;
	top: -1.5em;
}
.product-cluster .product .rating img {
	padding: 0 1px 2px;
	vertical-align: text-bottom;
}
#no-js-pages {
	clear: both;
	margin: 0 10px 10px;
	text-align: right;
}
#no-js-pages a.show-all {
	border-left: 1px solid #666;
	margin: 1em 4px;
	padding: 0 6px;
}
#no-js-pages a:hover {
	color: #000;
}

/* =STEP-ONE
========================================== * 
#step-one #content {
	background: rgb(239,242,243);
	margin: 0 auto;
	text-align: left;
	width: 900px;
}
#header {
	background: rgb(239,242,243) url(i/bg-content-top.gif) 0 0 no-repeat;
	color: rgb(126,138,145);
	padding: 12px 0 10px;
	position: relative;
	width: 900px;
}
#header h1 {
	margin: 0 16px;
}

/* =PRIMARY-BOX *
.primary-box {
	background: #fff url(i/bg-content-mdl.gif) 0 0 repeat-y;
	float: left;
	position: relative;
	width: 900px;
}
.primary-box .options {
	background: url(i/bg-primary-top.gif) 0 0 no-repeat;
	padding: 20px 32px 10px;
}
.primary-box .footer {
	background: url(i/bg-primary-btm.gif) bottom center no-repeat;
	height: auto !important;
	height: 45px;
	min-height: 45px;
	padding: 0 32px 8px;
}
.primary-box .promos {
	border-top: 2px solid #eee;
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}
.primary-box .promos li,
.primary-box .promos li a {
	display: block;
	float: left;
	padding: 5px 10px 2px 0;
	vertical-align: middle;
}
.primary-box .promos li a img {
	padding: 0 6px 4px 0;
	vertical-align: middle;
}
/* =SECONDARY-BOX *
.secondary-box {
	background: url(i/bg-secondary-mdl.gif) 0 0 repeat-y;
	clear: both;
	color: #555;
	display: inline;
	float: left;
	margin: 5px 9px 0;
	position: relative;
	width: 882px;
}
.secondary-box .top {
	background: url(i/bg-secondary-top.gif) 0 0 no-repeat;
	padding-top: 21px;
}
ul#store-nav-tab {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 23px;
	top: 21px;
	z-index: 100;
}
ul#store-nav-tab li {
	float: left;
}
ul#store-nav-tab li a {
	background-color: #b9c3c6;
	border-left: 1px solid #fff;
	color: #fff;
	display: block;
	float: left;
	height: 25px;
	line-height: 25px;
	padding: 0 24px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}
ul#store-nav-tab li.left a { background: #b9c3c6 url(i/bg-nav-tab-cap-left.gif) top left no-repeat }
ul#store-nav-tab li.right a { background: #b9c3c6 url(i/bg-nav-tab-cap-right.gif) top right no-repeat }
ul#store-nav-tab li a:hover,
ul#store-nav-tab li a.active { background-color: #93a0a6 }
ul#store-nav-tab li.left a:hover,
ul#store-nav-tab li.left a.active { background-position: bottom left }
ul#store-nav-tab li.right a:hover,
ul#store-nav-tab li.right a.active { background-position: bottom right }
/* =FOOTNOTES *
#footnotes {
	list-style: none;
	margin: 20px 0 0 23px;
	padding: 0;
	width: 586px;
}
#footnotes li {
	display: inline;
	margin: 0;
	padding: 0;
}
/* =BOXFOOTER *
#boxfooter {
	background: rgb(239,242,243) url(i/bg-content-btm.gif) bottom left no-repeat;
	clear: both;
	height: 23px;
	width: 900px;
}
#boxfooter div {
	background: #fff url(i/bg-secondary-btm.gif) bottom left no-repeat;
	height: 12px;
	margin: 0 9px;
}
/* End of Step One commented-out section */

/* =STORE-TAB-OVERVIEW
========================================== */
#store-tab-overview .section1 .hero {
	left: 9px;
	position: absolute;
	top: 2px;
}


/* =PRODUCT-OPTIONS
========================================== */
thead, tbody, tr {
	margin: 0;
	padding: 0;
}
.product-options {
	border-collapse: collapse;
	border-spacing: 0;
}
.product-options th {
	padding: 0 22px 0 0;
}
.product-options th a {
	border-bottom: 1px solid #c8d2de;
	display: block;
	padding: 0 0 5px;
}
.product-options td {
	padding: 5px 11px 5px 0;
}
.product-options ul.specs {
	list-style: none;
	margin: 0;
	padding: 0;
}
.product-options .shipping {
	color: #333;
	margin-top: 18px;
}
.product-options .shipping strong {
	display: block;
}
.product-options .price {
	margin: 8px 0 0;
}
.product-options .monthly {
	margin: 0;
	text-transform: lowercase;
}
/* image button */
.select-button,
.select-button a {
	background: url(i/product-bg-btn-select-white.gif) 0 0 no-repeat;
	display: block;
	float: left;
	height: 25px;
	text-decoration: none;
	width: 76px;
}
.select-button a:hover {
	background-position: bottom left;
	text-decoration: none;
}
.select-button a span { visibility: hidden; }
/* colored buttons */
.select-button.black a { background-image: url(i/product-bg-btn-select-black.gif) }
.select-button.green a { background-image: url(i/product-bg-btn-select-green.gif) }
.select-button.blue a { background-image: url(i/product-bg-btn-select-blue.gif) }
.select-button.pink a { background-image: url(i/product-bg-btn-select-pink.gif) }
.select-button.orange a { background-image: url(i/product-bg-btn-select-orange.gif) }
.select-button.red a { background-image: url(i/product-bg-btn-select-red.gif) }

/* =COMPATIBILITY-SECTION
================================================= */
div.clearer {
	clear: both;
	display: block;
	margin: 0;
	padding: 0;
	height: 0;
	line-height: 1px;
	font-size: 1px;
}
#store-prod-top #area-promo div.promo {
	padding: 10px 25px 0 0;
}
#content-clean .store-l0 h1 {
	margin: 3px 0 10px 7px;
}
.saved-carts-link a {
	line-height: 1.9em;
	padding: 2px 8px;
}
/* XServe */
#as-page-wrap .xs-cont td.questions {
	width: 100%;
}

#content-clean ul#store-nav-tab li a {
	height: 25px;
	line-height: 25px;
	padding: 0 14px;
}

/* OVERRIDE: Engraving page */
#as-page-wrap #as-page-content #area-promo table {
	width: 836px;
}
#as-page-wrap #as-page-content #store-prod-top.store-l1 div.top,
#as-page-wrap #as-page-content .store-l0 div.btm {
	line-height: 10px;
}

.banner-grid {
	line-height: 0;
}