/* Design ------------------------*/ /* shared design styles */ .design .hero { padding-top:50px; } .design .row { padding-top:90px; padding-bottom:72px; border-color:#e5e5e5; } /* Page Specific ------------------------*/ /* design-retina */ #design-retina section, #design-retina .hero { position:relative; } #design-retina section { border-bottom:1px solid #e5e5e5; } #design-retina section h1 { margin-bottom:15px; } #design-retina .toggle-nav { padding-top:30px; } #design-retina .hero h1 { margin-bottom:20px; } #design-retina .hero .intro { width:700px; margin:0 auto 90px; text-align:center; } #design-retina .hero .hero-image { margin-bottom:24px; margin-left:-6px; position:relative; z-index:1; } #design-retina .hero .gallery-trigger { text-align:center; padding-bottom:50px; } #design-retina .hero .gallery-trigger img { padding-right:10px; margin-bottom:-7px; position:relative; z-index:1; } #design-retina .hero .gallery-trigger a { color:#888; } #design-retina .hero .gallery-trigger a:hover { color: #08C; text-decoration: none; } #design-retina .thin { padding:90px 0 32px 270px; position:relative; overflow:hidden; } #design-retina .thin img.right { margin:-860px 115px 17px -115px; position:relative; z-index:0; } #design-retina .thin .relative { position:relative; z-index:2; } #design-retina .thin p.relative { width:470px; padding-bottom:130px; } #design-retina .thin .slide-gallery { width:590px; height:120px; overflow:hidden; } #design-retina .thin .slide-gallery .simplenav { position:absolute; bottom:8px; z-index:1010; } #design-retina .thin .slide-gallery #gallery-thin-compare { width:1190px; height:122px; } #design-retina .thin .slide-gallery #gallery-thin-compare .gallery-content, #design-retina .thin .slide-gallery #gallery-thin-compare .gallery-content figure { width:590px; height:122px; } #design-retina .thin .slide-gallery #gallery-thin-compare .thin-compare-macbookpro { margin-right: 48px; } #design-retina .thin .slide-gallery #gallery-thin-compare .gallery-content figcaption { position:relative; margin:0 auto; padding:22px 0 2px; font-size:12px; } #design-retina .thin .slide-gallery #gallery-thin-compare .thin-compare-macbookpro figcaption { width:70%; } #design-retina .thin .slide-gallery #gallery-thin-compare .thin-compare-macbookpro img { margin-left:-148px; } #design-retina .thin .slide-gallery #gallery-thin-compare .thin-compare-macbookpro-retina { margin-left:-185px; } #design-retina .thin .slide-gallery #gallery-thin-compare .thin-compare-macbookpro-retina .column.first { width:40%; margin-left:-85px!important; -webkit-transition: all .4s cubic-bezier(0, 0, 0.25, 1); -moz-transition: all .4s cubic-bezier(0, 0, 0.25, 1); transition: all .4s cubic-bezier(0, 0, 0.25, 1); -webkit-transform:translateX(0); -moz-transform:translateX(0); transform:translateX(0); } #design-retina .thin .slide-gallery #gallery-thin-compare .active .column.first { *margin-left:30px!important; -webkit-transform:translateX(120px); -moz-transform:translateX(120px); transform:translateX(120px); } #design-retina .thin .slide-gallery #gallery-thin-compare .thin-compare-macbookpro-retina .column.last { width:28%; } #design-retina .thin .slide-gallery #gallery-thin-compare .thin-compare-macbookpro-retina img { margin-left:-145px; } #design-retina .thin p.small { width:42%; margin-left:15%; margin-top:15px; text-align:center; color:#888; } #design-retina .display img.left { margin-bottom:0; margin-top:-540px; position:relative; z-index:1; } #design-retina .display .column { width:371px; padding:170px 15px 0 600px; } #design-retina .display .column p { width:360px; } #design-retina .performance { padding:90px 0 79px 0; } #design-retina .performance h1 img { margin-left:190px; } #design-retina .performance p { width:730px; margin:0 0 50px 195px; } /* tooltips */ #design-retina .performance .tooltip { position:absolute; z-index:2; } #design-retina .performance .tooltip span { display:block; z-index:4; background:#fff; padding:0 20px 1px; border-radius:12px; color:#222; font-size:11px; line-height:16px; } #design-retina .performance .tooltip div.pointer { z-index:3; width:50%; border-right:1px solid #fff; height:26px; } #design-retina .performance .tooltip div.pointer:after { content:''; display:block; position:absolute; bottom:-3px; left:50%; margin-left:-2px; width:5px; height:5px; background:#fff; border-radius:3px; } #design-retina .performance .components { position:relative; width:886px; height:615px; } #design-retina .performance .components img { position:relative; z-index:1; } #design-retina .performance .components .processor { left:381px; top:62px; } #design-retina .performance .components .gpu { left:509px; top:45px; } #design-retina .performance .components .ram { left:470px; top:152px; } #design-retina .performance .components .flash { left:150px; top:230px; } #design-retina .performance .components .batteries { left:470px; top:410px; } /* Back removal animation */ #design-retina .performance .components img.ambient-bottom { display:none; } #design-retina .performance .components img.ambient-bottom-prepped { position:absolute; z-index:10; display:inline; top:0; left:0; -webkit-transition: all 750ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -moz-transition: all 750ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -o-transition: all 750ms cubic-bezier(0.445, 0.050, 0.550, 0.950); transition: all 750ms cubic-bezier(0.445, 0.050, 0.550, 0.950); } #design-retina .performance .components img.ambient-bottom-complete { -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0; } #design-retina .technology { padding:90px 0 71px 0; } #design-retina .technology h1 { margin-left:190px; } #design-retina .technology p { width:670px; margin-left:195px; margin-bottom:70px; } #design-retina .engineered { padding:90px 0 80px; *overflow:hidden; border-bottom:none; } #design-retina .engineered h1 { margin-left:130px; } #design-retina .engineered p.detail { width:678px; margin-bottom:60px; margin-left:130px; } /* slide gallery */ #design-retina .engineered .slide-gallery { width:1120px; overflow:hidden; -webkit-user-select:none; -webkit-transform:translateZ(0); position:relative; z-index:1001; } #design-retina .engineered .slide-gallery .gallery-view { width:3760px; -webkit-transform:translateZ(0); position:relative; z-index:1001; } #design-retina .engineered .slide-gallery .gallery-content, #design-retina .engineered .slide-gallery figure { width:862px; height:460px; float:left; display:inline; margin:0; -webkit-transform:translateZ(0); position:relative; z-index:1001; } #design-retina .engineered .slide-gallery figure img { margin-left:130px; } #design-retina .engineered .slide-gallery figure figcaption { width:200px; margin:0; padding:0; color:#888; position:absolute; font-size:1em; line-height:1.5em; text-align:left; } #design-retina .engineered .slide-gallery figure figcaption h2 { margin-bottom:10px; } #design-retina .engineered .slide-gallery figure figcaption img { margin-left:0; } #design-retina .engineered .slide-gallery .gallery-1 figcaption { top:154px; right:-55px; } #design-retina .engineered .slide-gallery .gallery-2 figcaption { top:160px; left:231px; } #design-retina .engineered .slide-gallery .gallery-3 figcaption { top:154px; left:243px; } /* design-non-retina */ #design-non-retina #main .content { width:690px; padding-left:215px; padding-right:215px; margin-left:-70px; margin-right:-70px; } #design-non-retina .content .flushpad, #design-non-retina .content .padright { padding-right:215px; } #design-non-retina .content .flushpad, #design-non-retina .content .padleft { padding-left:215px; } #design-non-retina .content .flushpad, #design-non-retina .content .flushright { margin-right:-215px; } #design-non-retina .content .flushpad, #design-non-retina .content .flushleft { margin-left:-215px; } #design-non-retina .hero { width:1120px; margin-left:-145px; margin-right:-145px; padding-bottom:20px; } #design-non-retina .hero h1 { margin-bottom:20px; } #design-non-retina .hero .intro { width:770px; margin-bottom:90px; } #design-non-retina .row { border-bottom-width:1px; border-bottom-style:solid; } #design-non-retina .row .pullout { width:170px; margin-right:-10px; padding:20px 20px 0; font-size:12px; line-height:1.45em; } #design-non-retina .row .pullout img.block { margin-left:-20px; margin-right:-20px; } #design-non-retina .strength img.center { margin:37px -122px 0; _position:relative; _z-index:1; } #design-non-retina .display { padding-bottom:54px; } #design-non-retina .display img.center { margin:27px -123px 0; _position:relative; _z-index:1; } #design-non-retina .multitouch { padding-bottom:0; } #design-non-retina .multitouch h1 { margin-right:-20px; } #design-non-retina .multitouch img.center { margin:37px -125px 0; _position:relative; _z-index:1; } #design-non-retina .row.multitouch .pullout { margin-right:-15px; } #design-non-retina .ports { border-bottom:none; } #design-non-retina .ports figure img.flushleft { margin-bottom:10px; } #design-non-retina .ports figure figcaption { font-size:14px; line-height:1.5em; } #design-non-retina .ports figure figcaption .first { width:258px; } #design-non-retina .ports figure figcaption .last { width:412px; margin-right:-23px; } #design-non-retina .designed img.right { margin:40px 0 60px 20px; } #design-non-retina .designed img.center { margin:37px -125px 0; _position:relative; _z-index:1; }