/* Shared styles */ * { margin:0; padding:0; } body { font-size:10px; line-height:1.7em; text-align:center; } body, input, textarea, button { font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif; color:#333333; } #hero h1, #services h1 { font-size:21px; line-height:1.3em; } /* == GALLERY == */ #gallery { width: 626px; height: auto; margin: 0; text-align: center; position: relative; } #gallery .media { width: 626px; height: 463px; top: 0; left: 0; overflow: hidden; position:relative;} #gallery .indicator { margin: 0 auto; padding: 0 0 20px; background: none; width: 80px; height: 19px; } #gallery .indicator span { display: block; float: left; height: 11px; width: 11px; text-indent: -9999px; background:url('../img/gallery-thumbnail-selector.png') -3px -2px no-repeat; margin: 4px 3px; cursor: pointer; } #iphone #gallery .media { width: 626px; height: 514px; top: 0; left: 0; overflow: hidden; position:relative;} #iphone #gallery .indicator { display:none; } #gallery .indicator span:hover { background-position: -3px -17px;} #gallery .indicator span:active, #gallery .indicator span.selected { background-position: -2px -32px;} #gallery .slide { position: absolute; top: 0; left: 0; width: 626px; height: 463px; background-color: #FFF\9; } #gallery .slide.faded_in { opacity: 1; filter: alpha(opacity=100); z-index: 1; } #gallery .slide.fading_in, #gallery .slide.faded_out { opacity: 0; filter: alpha(opacity=0); z-index: 0; } #gallery a:hover { text-decoration: underline;} #gallery a.button:hover { text-decoration: none;} /* == BUTTONS == */ body.holiday a.button.matte { height:34px; margin:0 auto; box-shadow:none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; background:none; display:inline; zoom:1; clear:both; } body.holiday a.button.matte span { background: url('../img/button-holiday.png') no-repeat; border:none !important; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; text-shadow:none; padding:2px 0 8px 10px; *padding:3px 0 8px 10px; display:inline; } body.holiday a.button.matte span.label { background: url('../img/button-holiday.png') no-repeat right -102px; display:inline; margin:0; padding:2px 10px 6px 1px; } body.holiday a.button.matte span.label em { font-style:normal; font-size:11px; padding:0 5px 0 2px; } body.holiday a.button.matte:hover span.label { background-position:right -136px; } body.holiday a.button.matte:hover span { opacity:1; background-color:none; border:none; background-position:left -34px; } body.holiday a.button.matte:active span.label { background-position:right -170px; } body.holiday a.button.matte:active span { background-position:left -68px; } /* == HERO == */ .hero { text-align:center; } .hero .intro { float:left; width:100%; text-align:center; zoom:1; } .hero h1 { margin-top:46px; } .hero#iphone h1 { margin:28px 0 0 0; } .hero p { font-size:20px; line-height:1.4em; } .hero#iphone .intro p { font-size:14px; color:#000000; line-height:1.8em; } .hero .note { color:#999; font-size:10px; margin:10px 0 0; *margin-top:-6px; bottom:0; width:100%; text-align:center; } .hero .slide.ipad .intro { margin-bottom:5px; } .hero .slide.ipad div.buy-now { display:inline; *top:10px; } .hero .slide p { margin-bottom:14px; } .hero#iphone .slide p { margin-bottom:11px; } .hero#iphone .slide .services p { margin:2px 0 -2px; } .hero .slide.ipad .services p { display:inline; font-size:12px; line-height:1.4em; *zoom:1; color:#666; margin-bottom:0;} .hero#iphone .slide.ipad .services p { font-weight:bold; } .hero#iphone .slide.ipad .services p a { font-weight:normal; } .hero .slide.ipad .intro p.price { display:inline; font-size:14px; *zoom:1; *line-height:1em; padding-right:5px; } .hero .slide.ipad .services p img { display:inline; margin:10px; z-index:10; } .hero#iphone .slide.ipad .services p img { margin:23px; } .hero .slide.ipad .services { margin:22px auto 0; min-height:75px; width:100%; float:left; position:relative; z-index:100; zoom:1; } .hero#iphone .slide.ipad .services { margin:25px auto 0; min-height:63px; } .hero .slide.ipad .services div { float:left; width:200px; text-align:left; margin-right:18px; } html.en .hero .slide.ipad .services div { width:155px; } .hero .slide.ipad .services div img { margin-right:10px; float:left; } .hero .slide.ipad .services div p { display:block; } .hero .slide.ipad .services div.engraving { margin-left:122px; } html.en .hero .slide.ipad .services div.engraving { margin-left:146px; } .hero#iphone .slide.ipad .services div.engraving { margin-left:134px; } .hero .slide.ipad .services div.noengraving { margin:0 auto; float:none; } html.en .hero .slide.ipad .services div.noengraving { width:159px; } .hero .slide.ipad .services div.engraving:hover a, .hero .slide.ipad .services div.giftwrapping:hover a { text-decoration:underline; } .hero .slide.ipad .hero-slide1 { margin-bottom:-28px; } .hero#iphone .slide.ipad .hero-slide1 { margin-left:13px; } .hero .slide2 div.buy-now, .hero .slide3 div.buy-now, .hero .slide4 div.buy-now { margin-bottom:10px; zoom:1; } .hero .slide.engrave img { margin:0 auto -2px; } .hero .slide.giftwrap img { margin:30px auto -34px; } .hero .slide.smartcovers img { margin:35px auto -15px; } .hero#macbook-air h1 { margin-top:28px; } .hero#macbook-air .intro p { padding-bottom:9px; } .hero#macbook-air .hero-image { margin:0 -8px 35px 0; } .hero#macbook-air .services p { display:inline; font-size:12px; line-height:1.4em; *zoom:1; color:#666; margin-bottom:0;} .hero#macbook-air .services p img { display:inline; margin:10px; z-index:10; } .hero#macbook-air .services { margin:22px auto 25px; width:100%; float:left; position:relative; z-index:100; zoom:1; } .hero#macbook-air .services div { float:left; width:200px; text-align:left; margin-right:18px; } .hero#macbook-air .services div img { margin-right:10px; float:left; } .hero#macbook-air .services div p { display:block; } .hero#macbook-air .services div.noengraving { margin:0 auto; float:none; } .hero#macbook-air .services div.customize { margin-left:122px; } .hero#macbook-air .services div.customize:hover a, .hero#macbook-air .services div.giftwrapping:hover a { text-decoration:underline; } /* == GIFT GUIDE == */ #gift-guide { float:left; position:relative; } #gift-guide .box-content { float:left; width:626px; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #fdfdfd 70%, #f9f9f9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(70%,#fdfdfd), color-stop(100%,#f9f9f9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#fdfdfd 70%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#fdfdfd 70%,#f9f9f9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#fdfdfd 70%,#f9f9f9 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#fdfdfd 70%,#f9f9f9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */ } #gift-guide .heading { width:325px; float:left; position:relative; padding:29px 0 25px 28px; } #gift-guide .heading h2 { color:#cc0000; font-size:18px; line-height:1.2em; padding-bottom:3px;} #gift-guide .heading p { font-size:14px; line-height:1.4em; margin-bottom:10px; } #gift-guide .image { float:right; padding:24px 28px 0 0 ; } /* == SERVICES == */ #services, #services .service-row-intro, #services .service-row-image { float:left; position:relative; width:626px; } #services .service-row-intro { z-index:2; } #services .service-row-image { z-index:1; } #services .services-wrapper { margin-top:1px; float:left; position:relative; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #fdfdfd 75%, #f9f9f9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(75%,#fdfdfd), color-stop(100%,#f9f9f9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#fdfdfd 75%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#fdfdfd 75%,#f9f9f9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#fdfdfd 75%,#f9f9f9 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#fdfdfd 75%,#f9f9f9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */ } #services .service-intro { position:relative; } #services h1 { text-align:center; padding:22px 0; } #services h2 { color:#cc0000; font-size:18px; line-height:1.1em; padding:3px 0 2px; } #services p { font-size:13px; line-height:1.4em; } #services .engraving:hover a, #services .giftwrap:hover a, #services .bopis:hover a, #services .shipping-returns:hover a, #services .customize:hover a, #services .specialist:hover a { text-decoration:underline; } #services .service-intro, #services .service-image { float:left; position:relative; } #services .service-intro { width:253px; padding:30px 30px 0 30px; } #services .service-row-intro.top { background:url('../img/home-service-header-keyline.jpg') no-repeat top center; } #services .service-intro.engraving { width:263px; padding-right:20px; } #services .service-intro.customize, #services .service-intro.specialist { width:283px; padding-right:0; } #services .service-image { height:166px; width:313px; } #services .service-row-image.top .service-image { margin-top:25px; } #services .service-image img { position:absolute; bottom:0; } #services .service-image.engraving img { left:17px; } #services .service-image.giftwrap img { left:30px; } #services .service-image.bopis img { left:108px; bottom:31px; } #services .service-image.shipping-returns img { left:95px; bottom:26px; } #services .service-image.shipping-returns.cyber-monday img { left:109px; bottom:28px; } #services .service-image.customize img { left:52px; bottom:12px; } #services .service-image.specialist img { left:101px; bottom:36px; } #services .service-row-image.bottom .service-image.specialist img { left:113px; } #services .service-row-image.top .service-image.specialist img { left:109px; bottom:-3px; } #services span { white-space:nowrap; } #services.lastminute .service-row-image.top .service-image { margin-top:0; } /* == Secondary == */ body.home.holiday #secondary .special-offers .slot { padding:19px 5px; margin:0 8px; border-bottom:1px solid #ddd; } body.home.holiday #secondary .special-offers .slot:hover a { text-decoration:underline; } body.home.holiday #secondary .special-offers .slot h3 { font-size:14px; margin-bottom:6px; } body.home.holiday #secondary .special-offers .slot p { color:#666; line-height:1.3em; padding-bottom:3px; } body.home.holiday #secondary .special-offers .slot p.note { font-size:9px; color:#999; margin-top:5px; } body.home.holiday #secondary .special-offers .slot a.more { background:transparent url("data:image/gif;base64,R0lGODlhBAAHAIAAAACIzP///yH5BAEHAAEALAAAAAAEAAcAAAIIRA4WaeyrVCgAOw==") no-repeat 100% 60%; color:#0085CF; padding-right:7px; } body.home.holiday #secondary .special-offers .slot img { margin:5px auto; display:block; } body.home.holiday #secondary .special-offers .slot#financing img { margin:10px auto 0; } body.home.holiday #secondary .special-offers .slot#education img { margin-top:10px; } body.home.holiday #secondary .special-offers .slot#asa h3 { margin-right:-3px; } body.home.holiday #secondary .special-offers .slot#asa img { margin:6px auto -2px; } body.home.holiday #secondary .special-offers .slot#iphoto img { margin:10px -13px -10px; } body.home.holiday #secondary .special-offers .slot#gift-cards img { margin:10px auto -15px; } body.home.holiday #secondary .special-offers .slot#apple-store-app { padding-bottom:5px; } body.home.holiday #secondary .special-offers .slot#apple-store-app img { padding-top:15px; } body.home.holiday #secondary .special-offers .slot#questions strong { white-space:nowrap; } /* == BLACK FRIDAY TEASER banner == */ #bf-teaser-banner { background:#7bb641 url('../img/home-bf-teaser-banner-background.jpg') repeat-y; color:#fff; position:relative; float:left; -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 3px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 3px; box-shadow:rgba(0,0,0,0.3) 0 1px 3px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -khtml-border-radius:4px; *border:1px solid; *border-color:#e5e5e5 #dbdbdb #d2d2d2; background-position:3px 0 !important; } #bf-teaser-banner .heading { padding:30px 0 13px 31px; width:380px; float:left; } #bf-teaser-banner.no-retail .heading { width:400px; } #bf-teaser-banner .heading h1 img { margin-bottom:-3px; } #bf-teaser-banner .heading p { font-size:13px; line-height:1.35em; padding-bottom:8px; } #bf-teaser-banner .image { float:right; height:141px; } #bf-teaser-banner .image img { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; } /* == BLACK FRIDAY DAY OF == */ #bf-dayof { background:#7bb641; color:#fff; position:relative; float:left; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -khtml-border-radius:4px; *border:1px solid; *border-color:#e5e5e5 #dbdbdb #d2d2d2; padding-bottom:14px; } #bf-dayof .top { border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -khtml-border-radius:4px; float:left; position:relative; width:100%; z-index:2; background:url('../img/home-bf-dayof-hero-background.jpg') repeat-y right bottom; } #bf-dayof .top .heading { padding:70px 0 30px 19px; position:relative; float:left; width:380px; z-index:10; } #bf-dayof .top .heading h1 { margin-bottom:-4px; } #bf-dayof .top .heading p { font-size:14px; line-height:1.4em; padding-bottom:6px; width:290px; } #bf-dayof .top .heading p.intro { font-size:17px; line-height:1.2em; padding-bottom:15px; width:100%; } #bf-dayof .top .image { position:absolute; right:0; top:0; height:306px; z-index:2; } #bf-dayof .top .image img { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; } #bf-dayof .bottom { float:left; position:relative; width:598px; margin:0 14px; background:#fff; z-index:3; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -khtml-border-radius:4px; color:#000; } #bf-dayof .bottom ul, #bf-dayof .bottom ul li { float:left; position:relative; width:100%; } #bf-dayof .bottom ul li { width:50%; text-align:center; } #bf-dayof .bottom ul.top-row { margin-top:58px; margin-bottom:15px; } #bf-dayof .bottom ul.bottom-row { margin-top:15px; } #bf-dayof .bottom ul li h3 { font-size:15px; padding-bottom:2px; } #bf-dayof .bottom ul li .price { font-size:11px; line-height:1.3em; padding-bottom:5px; } #bf-dayof .bottom ul li .price span { padding:0; } #bf-dayof .bottom ul li .from, #bf-dayof .bottom ul li .current_price { display:inline; } #bf-dayof .bottom ul li .previous_price { text-decoration:line-through; color:#808080; } #bf-dayof .bottom ul li .savings { color:#ed1c24; } #bf-dayof .bottom ul li .image { height:202px; width:270px; position:relative; float:left; margin-bottom:-5px; z-index:1; } #bf-dayof .bottom ul li .image img { position:absolute; bottom:0; left:0; } #bf-dayof .bottom ul li .copy { float:left; position:relative; width:100%; z-index:2; padding-left:11px; } #bf-dayof .bottom ul li.ipad2 .image img { left:46px; } #bf-dayof .bottom ul li.macbook-air .image img { bottom:17px; left:27px; } #bf-dayof .bottom ul.middle-row li .image { margin-bottom:12px; } #bf-dayof .bottom ul.bottom-row li .image { margin-bottom:15px; } #bf-dayof .bottom ul li.ipod-touch .image img { left:62px; } #bf-dayof .bottom ul li.ipod-nano .image img { margin-bottom:-9px; left:51px; } #bf-dayof .bottom ul li.macbook-pro .image img { left:46px; } #bf-dayof .bottom ul li.imac .image img { bottom:3px; left:61px; } #bf-dayof .bottom ul.bottom-row.one-product li { margin-left:142px; } #bf-dayof .bottom ul.bottom-row.one-product li .copy { padding-left:6px; } #bf-dayof .bottom .see-more { text-align:center; padding:44px 10px 30px; float:left; position:relative; width:574px; } #bf-dayof .bottom .see-more p { font-size:16px; padding-bottom:2px; } #bf-dayof .bottom .see-more p.see-all { margin-top:5px; } #bf-dayof .see-all em { padding:0 10px; } /* == BLACK FRIDAY DAY OF BOPIS == */ #bopis { position:relative; width:626px; border:1px solid #ccc; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -khtml-border-radius:4px; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #fdfdfd 70%, #f9f9f9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(70%,#fdfdfd), color-stop(100%,#f9f9f9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#fdfdfd 70%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#fdfdfd 70%,#f9f9f9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#fdfdfd 70%,#f9f9f9 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#fdfdfd 70%,#f9f9f9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */ } #bopis, #bopis .image, #bopis .heading { float:left; position:relative; } #bopis .image { padding:23px 22px 10px 45px; } #bopis .heading { padding:29px 0 20px; width:440px; } #bopis h2 { font-size:18px; line-height:1.4em; color:#cc0000; } #bopis p { font-size:14px; line-height:1.4em; color:#333; } #bopis:hover a { text-decoration:underline; } #legal { margin-top:10px; float:left; position:relative; } #legal p { font-size:11px; color:#999; padding-left:5px; } /* == CYBER MONDAY == */ .hero.cyber-monday h1 { margin-top:86px; } .cyber-monday-ribbon { position:absolute; top:28px; left:1px; width:611px; height:29px; background:url('../img/home-cyber-monday-ribbon.jpg') no-repeat; } .cyber-monday-ribbon p { color:#fff; font-size:12px; margin-top:5px; } /* == LAST CHANCE == */ .hero.last-chance h1, #macbook-air.hero.last-chance h1 { margin-top:86px; } .last-chance-ribbon { position:absolute; top:28px; left:1px; width:611px; height:29px; background:url('../img/home-cyber-monday-ribbon.jpg') no-repeat; } .last-chance-ribbon p { color:#fff; font-size:12px; margin-top:5px; } .hero.last-chance.noengrave { padding-bottom:20px; } .hero.last-chance.noengrave #gallery .media { height:391px; } .hero.last-chance.noengrave #gallery .media .slide.ipad.no-services p { margin-bottom:7px; } .last-chance .no-services img { margin-top:29px; } /* == OBDB == */ body.home.holiday #secondary .special-offers .slot#obdb img {margin: 0 auto 10px auto;}