/* overview */ #overview #hero { padding-bottom:0; } #overview #hero .gallery { margin-bottom:0; } #overview #hero .gallery-view { width:880px; height:543px; } #overview #hero .gallery-view img { display:block; } #overview #hero .bleed { margin-left: -50px; margin-right: -50px; *position: relative; } #overview #hero .gallery1 { width:930px; background-color:#fff; } #overview #hero .gallery1 img { *position: relative; } #overview #hero .gallery1 img.right { margin:-9px -38px 0 0; *position: absolute; *right: 0; } #overview #hero .gallery1 h1 { padding:157px 0 0; margin:0 0 0 -12px; } #overview #hero .gallery1 p { margin-left:-12px; } #overview #hero .gallery-nav .images { margin-left: 233px; /* 73 + width of h4 */ } #overview #hero .gallery-nav h4.ad { width: 160px; top: -16px; font-size: 11px; line-height: 15px; padding-right: 6px; } #overview #hero .gallery-nav h4.ad span { display: block; } #overview #featurettes { position:relative; padding:0; } #overview #featurettes .column { margin:0; width:489px; border-right:1px solid #e6e6e6; } #overview #featurettes .column a { min-height:189px; width:454px; padding:2em 10px 4px 25px; display:block; position:relative; background: url('/euro/ipodnano/images/overview_featurette_bg20100902.png') no-repeat 100% 100%; } #overview #featurettes .column a:hover { background: url('/euro/ipodnano/images/feature_hover20100901.jpg') repeat-x; } #overview #featurettes .first img.right { margin: -32px -10px -2px 6px; } #overview #featurettes img.right { margin-bottom:0; margin-top:-33px; *position: relative; *margin-bottom: -20px; } #buystrip #comparison a { font-size: 10px; } /* design */ #design .content h1 { margin-bottom: 5px; } #design .content h1, #design .content h3, #design .content p { *position:relative; } #design .hero { margin-bottom:-100%; margin-left:-50px; } #design .intro { width:715px; margin-bottom:100px; } #design .overview { width:360px; } #design .colors { margin-top:128px; } #design .colors p { *z-index:1; } #design .colors h3 { padding-top: 70px; } #design .colors img { position:relative; z-index:0; *z-index:1; margin-top: 0; } #design .screen { margin-top:135px; } #design .screen img { margin-bottom:-60px; margin-top: -160px; margin-left: -55px; } #design .grid3col { position:relative; z-index:0; background:#fff; } #design .grid3col .column { width:250px; margin-left:70px; } #design .grid3col .column img { margin-bottom:0; } #design .grid3col .clip img { margin-top: -18px; } #design .grid3col .connect img { margin-top:2px; margin-left:25px; } #design hr { margin-top:0; margin-bottom:1em; } #design #basics .grid3col { padding-top: 45px; margin: 0 20px; width: 840px; } #design #basics .grid3col .column { width: 220px; margin-left: 90px; } #design #basics h4, #design #basics p { font-size: smaller; } #design #basics .item { display:inline; float:left; width:200px; margin:0 90px 0 0; } #design #basics img.multi-touch { margin-left: 0px; *position: relative; } #design #basics img { margin-bottom: 18px; } #design #basics img.right { margin-right:-10px; margin-left:10px; *position:relative; } #design #basics p img { margin: 0; vertical-align: middle; } #design #basics .column div { text-align: center; } #design #basics a.play { display: block; width: 56px; margin: 0 auto 18px; line-height: 21px; } #design #basics a.play img { -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); } #design #basics a.play:hover img { -webkit-box-shadow: none; } #design #basics a.play img { margin: 0; display: block; -webkit-border-radius: 10px; } /* Design - HTML5 Nanos */ #design #main #basics .animation { position: relative; } #design #main #basics .animation .animation-stage { width: 116px; height: 116px; left: 52px; top: 21px; overflow: hidden; position: absolute; } #design #main #basics .animation .animation-stage .bg { background: url(/euro/ipodnano/images/design_animation_bg2010901.jpg) no-repeat; width: 100%; height: 100%; position: relative; } #design #main #basics .animation .animation-stage .glare { background: url(/euro/ipodnano/images/design_animation_glare2010901.jpg) no-repeat; width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; } #design #main #basics .animation .animation-stage .finger { width: 40px; height: 40px; background-color: rgba(255,255,255,.7); -webkit-border-radius: 20px; position: absolute; z-index: 5; opacity: 0; -webkit-animation-duration: 1.5s; } #design #main #basics .animation .no-animate { -webkit-transition: none !important; } #design #main #basics .animation .animation-stage .pages { height: 116px; position: absolute; top: 0; left: 0; -webkit-transform: translateZ(0); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; } #design #main #basics .animation .animation-stage .page { width: 116px; height: 116px; position: absolute; top: 0; } #design #main #basics .animation .animation-stage .page:nth-child(1) { left: 0; } #design #main #basics .animation .animation-stage .page:nth-child(2) { left: 116px; } #design #main #basics .animation .animation-stage .page:nth-child(3) { left: 232px; } #design #main #basics .animation .animation-stage .page:nth-child(4) { left: 348px; } #design #main #basics .animation .animation-stage .page:nth-child(5) { left: 464px; } #design #main #basics .animation .animation-stage .page:nth-child(6) { left: 580px; } #design #main #basics .animation .animation-stage .dots { height: 3px; width: 24px; background: url(/dk/ipodnano/images/design_animation_dots2010901.jpg) no-repeat, url(/dk/ipodnano/images/design_animation_dots2010901.jpg) repeat-x 0 -3px; position: absolute; left: 47px; bottom: 2px; z-index: 3; } #design #main #basics .animation .animation-stage .dots.two { background-position: 6px 0, 0 -3px; } #design #main #basics .animation .animation-stage .dots.three { background-position: 12px 0, 0 -3px; } #design #main #basics .animation .animation-stage .dots.four { background-position: 18px 0, 0 -3px; } #design #main #basics .animation .animation-stage .bg .icon { position: absolute; display: block; margin: 0; -webkit-animation-duration: 0.25s; -webkit-animation-iteration-count: infinite; z-index: 2; } #design #main #basics .animation .animation-stage .bg .icon:nth-child(1), #design #main #basics .animation .animation-stage .bg .icon:nth-child(3) { left: 10px; } #design #main #basics .animation .animation-stage .bg .icon:nth-child(2), #design #main #basics .animation .animation-stage .bg .icon:nth-child(4) { right: 10px; } #design #main #basics .animation .animation-stage .bg .icon:nth-child(1), #design #main #basics .animation .animation-stage .bg .icon:nth-child(2) { top: 13px; } #design #main #basics .animation .animation-stage .bg .icon:nth-child(3), #design #main #basics .animation .animation-stage .bg .icon:nth-child(4) { bottom: 5px; } #design #main #basics .animation .animation-stage .bg .icon-shadow { width: 90px; height: 90px; display: block; background: url(/dk/ipodnano/images/design_animation_shadow20100901.png) no-repeat; position: absolute; margin: -10px -27px; z-index: 1; } #design #main #basics .animation .animation-stage .bg .icon-shadow:nth-child(5), #design #main #basics .animation .animation-stage .bg .icon-shadow:nth-child(7) { left: 10px; } #design #main #basics .animation .animation-stage .bg .icon-shadow:nth-child(6), #design #main #basics .animation .animation-stage .bg .icon-shadow:nth-child(8) { right: 10px; } #design #main #basics .animation .animation-stage .bg .icon-shadow:nth-child(5), #design #main #basics .animation .animation-stage .bg .icon-shadow:nth-child(6) { top: 13px; } #design #main #basics .animation .animation-stage .bg .icon-shadow:nth-child(7), #design #main #basics .animation .animation-stage .bg .icon-shadow:nth-child(8) { top: 62px; } /* Home Screen Animation */ #design #main #basics #home-screen .animation-stage .finger { left: 75px; top: 33px; } /* Mult-touch Animation */ #design #main #basics #multi-touch .animation-stage { background: #000; } #design #main #basics #multi-touch .animation-stage .bg { -webkit-transition: -webkit-transform 0.5s ease-in; } #design #main #basics #multi-touch .animation-stage .finger.one { right: 20px; top: 7px; } #design #main #basics #multi-touch .animation-stage .finger.two { left: 20px; bottom: 7px; } #design #main #basics #multi-touch .animation-stage .fingers { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; } #design #main #basics #multi-touch .animation-stage .fingers.animate .finger { -webkit-transition: opacity 0.25s ease-out; opacity: 0; } #design #main #basics #multi-touch .animation-stage .fingers.minus-1 { -webkit-transform: rotate(-90deg); } #design #main #basics #multi-touch .animation-stage .fingers.minus-2 { -webkit-transform: rotate(-180deg); } #design #main #basics #multi-touch .animation-stage .fingers.minus-3 { -webkit-transform: rotate(-270deg); } #design #main #basics #multi-touch .animation-stage.fingered .finger { opacity: 1; } /* Custom Home Screen Animation */ #design #main #basics #custom-home .animation-stage .finger { left: 12px; top: 12px; } #design #main #basics #custom-home .animation-stage.fingered .finger { opacity: 1; } #design #main #basics #custom-home .animation-stage.fingered.jazz-hands .finger { opacity: 0; -webkit-transition: .5s opacity ease-out; } #design #main #basics #custom-home .animation-stage.fingered.jazz-hands.finger-first .finger { opacity: 1; } #design #main #basics #custom-home .animation-stage .bg .icon:nth-child(1) { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: .5s, .5s; -webkit-transition-timing-function: ease-out, ease-out; -webkit-transform: scale3d(1,1,1); opacity: 1; } #design #main #basics #custom-home .animation-stage.finger-first .bg .icon:nth-child(1) { -webkit-transform: scale3d(1.2,1.2,1); opacity: .6; z-index: 4; } #design #main #basics #custom-home .animation-stage.finger-first .bg .finger.one, #design #main #basics #custom-home .animation-stage.finger-first .bg .icon:nth-child(1) img { -webkit-animation-duration: 3s; -webkit-animation-delay: 1s; } #design #main #basics #custom-home .animation-stage.finger-first .bg .finger.one { -webkit-animation-name: drag_finger; } #design #main #basics #custom-home .animation-stage.finger-first .bg .icon:nth-child(1) img { -webkit-animation-name: drag_icon; } #design #main #basics #custom-home .animation-stage.fingered:not(.jazz-hands) .bg::after { content: ' '; display: block; background: rgba(0,0,0,.5); width: 37px; height: 38px; -webkit-border-radius: 5px; position: absolute; top: 13px; left: 14px; z-index: 4; } #design #main #basics #custom-home .animation-stage .bg .icon { display: block; height: 49px; width: 46px; } #design #main #basics #custom-home .animation-stage .bg .icon img { -webkit-transition: -webkit-transform .25s ease-in; } #design #main #basics #custom-home .animation-stage.jazz-hands:not(.finger-first) .bg .icon:nth-child(1) { -webkit-animation-delay: .5s; -webkit-animation-name: wiggle_a; } #design #main #basics #custom-home .animation-stage.jazz-hands .bg .icon:nth-child(2) { -webkit-animation-name: wiggle_f; } #design #main #basics #custom-home .animation-stage.jazz-hands .bg .icon:nth-child(3) { -webkit-animation-name: wiggle_c; } #design #main #basics #custom-home .animation-stage.jazz-hands .bg .icon:nth-child(4) { -webkit-animation-name: wiggle_g; } #design #main #basics #custom-home .animation-stage.jazz-hands .bg .icon .move-to-first { -webkit-transform: translate3d(-50px, 0, 0); } #design #main #basics #custom-home .extra-credit { width: 35px; height: 2px; overflow: hidden; position: absolute; background: url(/dk/ipodnano/images/design_animation_extra_credit2010901.png) no-repeat 0 -2px; z-index: 20px; right: 30px; top: 0; -webkit-transition: .15s background-position linear; } #design #main #basics #custom-home .extra-credit.push { background-position: 0 0; } #design #main #basics #custom-home .monty-python-hand { width: 9px; height: 12px; position: absolute; z-index: 21px; left: 169px; top: -10px; } #design #main #basics #custom-home .monty-python-hand img { -webkit-transition: -webkit-transition .15s linear; -webkit-animation-duration: 1.5s; opacity: 0; } #design #main #basics .needs-webkit { display: none; } #design.webkit #main #basics .needs-webkit { display: block; } /* features */ #features .main { padding-bottom: 0; } #features hr { clear: both; } #features #hero { text-align: center; width: 980px; margin: 0 -50px 28px; } #features #hero h1 { margin: 0 0 4px; } #features #hero img, #features #hero p.intro { margin: 0 auto; } #features #hero p.intro { width: 610px; position: relative; margin-bottom: -36px; } #features .scrollernav li { width:150px; } #features .scrollernav li a { width:120px; height:16.5em; padding:0 12px 0 18px; } #features h2 { margin-bottom: 36px; } #features .row { clear: both; } #features .music { margin: -4.5em -50px -3em; padding: 2em 230px 3em 50px; *margin-top: -5em; *margin-bottom: -3.75em; background: url('/euro/ipodnano/images/features_pants20100901.jpg') no-repeat 100% 0; } #features .music h2 { margin-bottom: 18px; } #features .music img { margin-right: 0; margin-bottom: 0; } #features .music .clip { margin-right: 36px; margin-left: 238px; } #features .music h3.hand { padding-top: 77px; margin-right: -50px; } #features .music p.hand { margin-left: 388px; margin-bottom: 85px; } #features .music .grid2col { width: 605px; padding-top: 24px; } #features .music .column { width: 270px; } #features .music .column h3 { margin-top: -10px; } #features .genius .genius { margin-left: 486px; padding-top: 48px; } #features .genius h3, #features .genius p { *position: relative; *z-index: 1; } #features .genius img.flushleft { margin-top: -314px; } #features .fmradio { margin-bottom: -3em; *margin-bottom: -3.5em; padding-bottom: 5em; background: url('/euro/ipodnano/images/features_radio_hero20100901.jpg') no-repeat 100% 100%; } #features .fmradio .contents { width: 350px; } #features .fmradio img.pause { margin-bottom: 0; } #features .fmradio .tag { margin-right: 290px; } #features .fitness img { margin-bottom: 0; } #features .fitness .fit-callout { background: url('/euro/ipodnano/images/features_fitness_callout20100901.jpg') no-repeat; padding: 22px 20px 20px 20px; margin-bottom: 54px; min-height: 508px; _height: 508px; } #features .fitness .fit-content { width: 350px; margin: 0; padding: 30px 20px 30px 30px; background: rgba(0, 0, 0, 0.7); *background: none; /* turn off BG for IEs */ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#B6000000,endColorstr=#B6000000)"; /* IE8 */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B6000000,endColorstr=#B6000000); /* older IEs */ } #features .fitness .fit-content h3, #features .fitness .fit-content p { color: #fff; text-shadow: #000 0 0 15px, #000 0 0 10px, #000 0 0 5px; } #features .fitness .fit-content p.clip { padding-top: 27px; margin-left: 135px; width: 170px; } #features .fitness .fit-content img.left { margin: -24px 15px 24px -30px; } #features .fitness .fit-content img.right { margin-right: 40px; } #features .fitness .fit-content img.icon { margin: -4px 5px 0 18px; } #features .fitness .column { width: 415px; margin: 0; } #features .fitness h3 img { margin-left: 28px; } #features .fitness p.small, #features .fitness a.small { font-size: 11px; } #features .itunes img { margin-top: -430px; margin-bottom: 18px; } #features .itunes p.row1 { margin-right: 370px; } #features .itunes p.row2 { margin-right: 445px; } #features .accessibility { clear: both; background-color: #fafafa; border-top: 1px solid #d9d9d9; width: 880px; padding: 3em 50px 36px; } #features .accessibility p { margin-right: 255px; } #features .accessibility .column { margin-top: 18px; width: 260px; margin-left: 50px; } #features .accessibility .column.last img { margin-left: -15px; margin-right: -24px; *position: relative; } #features .accessibility .column h3 { margin-top: -36px; *position: relative; } #features .accessibility .column p { font-size: smaller; margin-right:0; *position: relative; } /* specs */ #specs img.dimensions { margin-bottom: 36px; } #specs img.display { margin-bottom: 36px; } #specs .content #voiceover { zoom:1; } #specs .content #voiceover.grid3col .column { width:85px; margin-left:0; } #specs .content #voiceover .last { width:87px; } #specs .content #voiceover ul li { margin-bottom:0; } #specs #inout img { position:static; margin-top:18px; margin-bottom:0; } #specs img.buttons { margin-top:18px; margin-bottom:35px; } #specs #box img.right { margin-bottom: 0; } #specs #accessories { position:relative; } #specs #accessories #extra { padding-left:130px; padding-bottom:48px; } #specs #accessories #extra img { margin-top:-20px; position:absolute; left:480px; bottom:0; _bottom:-1px; } .gallery .gallery-nav {padding-right: 229px;} #buystrip .column.first h4 {width: 110px; }