<<<.shadow { box-shadow: rgba(0,0,0,0.4) 0 1px 3px; -webkit-box-shadow: rgba(0,0,0,0.4) 0 1px 3px; -mox-box-shadow: rgba(0,0,0,0.4) 0 1px 3px; -o-box-shadow: rgba(0,0,0,0.4) 0 1px 3px; -ms-box-shadow: rgba(0,0,0,0.4) 0 1px 3px; } /*---- layout ----*/ html { -webkit-font-smoothing: antialiased; } html, body { background: #f8f8f8; } #main { margin: 0 auto 18px; width: 980px; } #main.stripe { background: url(/tw/mobileme/images/content_stripe_bg20100518.png) repeat-y 0 0; padding: 0 50px 45px 0; width: 930px; } .badge_new { vertical-align: middle; } /*---- product header ----*/ #productheader h1 a { width: 129px; background-image: url(/tw/mobileme/images/productnav_title20080609.gif); } .pricing #productheader ul#productnav li#pn-pricing a, .whatsnew #productheader ul#productnav li#pn-whatsnew a, .features #productheader ul#productnav li#pn-services a, .tutorials #productheader ul#productnav li#pn-tutorials a { color: #999; } #pricing #productheader ul#productnav li#pn-pricing a, #whats-new #productheader ul#productnav li#pn-whatsnew a, #mcc #productheader ul#productnav li#pn-services a, #tutorials #productheader ul#productnav li#pn-tutorials a { color: #999 !important; cursor: default; } .features #productheader ul#productnav li#pn-services a:hover { color: #08c; } /*-- sosumi --*/ .sosumi_features {clear: both; width: 940px; margin: 0 auto; padding: 9px 20px 0; text-align: center; } /*---- sidenavs ----*/ #sidenav { float: left; width: 204px; padding-top: 15px; } #sidenav ul { margin: 0; } #sidenav ul li { clear: left; line-height: 35px; padding: 0; _height: 35px; } #sidenav ul li a:hover { color: #08c; background-position: 90% -58px; } #sidenav ul li a img { display: block; position: absolute; top: 4px; left: 8px; *top: -7px; _left: -58px; behavior: url(/global/scripts/lib/iepngfix.htc); } #sidenav #sn-mail { *height: 53px; } #sidenav #sn-mail a { background-position: 90% 0; line-height: 1.2; min-height: 40px; padding-top: 13px; *height: 40px; } #sidenav #sn-mail a img { *top: 4px; *left: 8px; } #sidenav #sn-mail a:hover { background-position: 90% -54px; } .features#mcc #sidenav #sn-mail, .features#gallery #sidenav #sn-gallery, .features#idisk #sidenav #sn-idisk, .features#findmyiphone #sidenav #sn-findmyiphone, .features#medotcom #sidenav #sn-medotcom, .features#mac #sidenav #sn-mac, .features#pc #sidenav #sn-pc, .features#iphone #sidenav #sn-iphone, .features#ipad .features#mcc #sidenav #sn-mail a { color: #000; background-position: 90% -108px; cursor: default; } .features#gallery #sidenav #sn-gallery a, .features#idisk #sidenav #sn-idisk a, .features#findmyiphone #sidenav #sn-findmyiphone a, .features#medotcom #sidenav #sn-medotcom a, .features#mac #sidenav #sn-mac a, .features#pc #sidenav #sn-pc a, .features#iphone #sidenav #sn-iphone a, .features#ipad #sidenav #sn-ipad a { color: #000; background-position: 90% -112px; cursor: default; } #sidenav #badge_mailbeta a { display: block; float: left; text-decoration: none; } #sidenav #badge_mailbeta p { color: #000; font-size: 14px; line-height: 1.3; margin: 3px 0 0; padding: 0; } #sidenav #badge_mailbeta .more { background: url(/global/elements/arrows/morearrow_08c.gif) no-repeat 100% 60%; color: #08c; font-size: 12px; padding-right: 10px; } #sidenav #badge_mailbeta a:hover .more { text-decoration: underline; } /*---- elements ----*/ #main .center { text-align: center; } /*#main h2 { margin-bottom: 2em; }*/ #main .end { margin-bottom: 0; } #main li.end { margin-right: 0 !important; } #main .intro { font-size: 18px; line-height: 1.3em; color: #777; font-weight: normal; margin-bottom: 80px; } #main .intro span { color: #000; } #main img.right.flushright { position: relative; margin-right: -48px; z-index: 10; } p.underpromos { margin-bottom: 0; } /*---- hr ----*/ #main .hr { position: relative; margin: 0 -2px; height: 38px; background: #f8f8f8; } #main .hr .maincap.bottom { top: 0; } #main .hr .maincap.top { bottom: 0; top: auto; } #main .hr hr { display: none; } #main div.inaction a.thumb { display: block; width: 89px; float: left; margin-left: 0; margin-top: 60px; } #main div a.title { display: block; width: 130px; float: left; margin-left: 15px; margin-top: 80px; line-height: 1.4em; } #main img.badge { margin: 0 0 -7px 10px; } /*---- callouts ----*/ #main .callout { background: #fcfcfc; border-top: 2px solid #dedede; border-left: 1px solid #dedede; border-right: 1px solid #dedede; border-bottom: 1px solid #f2f2f2; float: left; margin: 0 0 1.5em; padding: 20px; position: relative; width: 80%; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } #main .callout .thumb { background: #fff; float: left; padding: 5px; z-index: 1; } #main .callout .thumb img { display: block; } #main .callout h3, #main .callout h4 { font-size: 12px; } #main .callout h3, #main .callout h4, #main .callout p { margin-left: 184px; } #main .video_pop { background: #fff; float: right; font-size: 12px; margin-left: 20px; margin-top: 18px; padding: 8px; position: relative; width: 114px; z-index: 3; } #main .video_pop .OverlayPanel { text-align: center; } #main .video_pop .OverlayPanel img { padding: 5px; display: block; margin-bottom: 5px; margin-left: 3px; *border: 1px solid #dbdbdb; } #main .video_pop .enlarge { background: url(/global/elements/buttons/icon-play.png) no-repeat 0 0; height: 25px; position: absolute; top: 0; left: 0; width: 25px; z-index: 3; _behavior: url(/global/scripts/lib/iepngfix.htc); } #main .video_pop .more { background: url(/global/elements/arrows/morearrow_08c.gif) no-repeat 100% 50%; padding-right: 10px; } /* overlays */ #ACOverlayImageShadow { behavior: url(/global/scripts/lib/iepngfix.htc); } .overlay a.close { behavior: url(/global/scripts/lib/iepngfix.htc); } /*---- pagenav ----*/ #main #pagenav { border-top: 1px solid #e0e1e2; clear: both; padding-top: 18px; margin-top:60px; margin-right: auto; margin-left: auto; width: 633px; } #main #pagenav .column { padding-bottom: 18px; margin-bottom: -20px; } #main #pagenav .first { text-align: left; } #main #pagenav .first a { padding-left: 20px; background: url(/global/elements/arrows/arrow_prev.gif) no-repeat 0 50%; } #main #pagenav .last { text-align: right; } #main #pagenav .last a { padding-right: 20px; background: url(/global/elements/arrows/arrow_next.gif) no-repeat 100% 50%; } p.sosumi {clear:both; margin:0 auto; padding:12px 20px 0; width:940px;} /* promofooter */ #promofooter ul#promos li.signup { padding-top: 19px; min-height: 0; _height: 0; } #promofooter ul#promos li.signup img { display: block; margin: 0 auto 10px auto; } #promofooter ul#promos li.signup h3 { margin: 2px 2px 0 0; } #promofooter ul#promos li.signup h4 { margin: 26px 20px 14px; padding-bottom: 15px; text-align: center; font-size: 15px; line-height: 18px; font-weight: normal; color: #000; background: url(/tw/mobileme/images/contentfooter_rulebg20090502.gif) repeat-x 0 100%; } #promofooter #promo_trial_button { background: url(/global/elements/buttons/freetrials.png) no-repeat 0 0; display: block; height: 25px; margin: 0 auto; overflow: hidden; position: relative; text-indent: -9999px; width: 82px; } #promofooter #promo_trial_button:hover { background-position: 0 -25px; } #promofooter #promo_trial_button:active { background-position: 0 -50px; } /*---- overview ----*/ #main .content { position: static; width: 660px; margin: 0 auto 18px; padding: 77px 96px 49px; zoom: 1; } #main .content:after {} .content { font-size: 1em; line-height: 1.4285em; word-spacing: -1px; } /*---- pricing ----*/ #pricing #main { padding: 45px 48px; width: 884px; } #pricing #main h2 { margin-left: -8px; } #pricing #main h5 { font-size: 1.2em; font-weight: normal; } #pricing #main h5 span { color: #999; } #pricing #main #hero img.right.hero { margin: 40px 0 0; } #pricing #main #hero h2 { margin: 0 -6px 55px; } #pricing #main .membership { width: 370px; } #pricing #main .membership img.right.icon { position: relative; margin: 0 0 0 20px; } #pricing #main .membership p { margin-top: 2.6em; } #pricing #main .membership img.btn { margin-left: -2px; } #pricing #main .others { margin: 55px 0 42px 52px; width: 830px; } #pricing #main .others img.right.icon { position: relative; margin-top: -1em; } #pricing #main .others p { margin-top: 3em; } #pricing #main .others .column.first { width: 373px; } #pricing #main .others .column.last { width: 310px; } #pricing #main .others .column.last h3 { margin-top: 0; margin-bottom: 3.95em; } #pricing #main .buynow .column.first { width: 500px; } #pricing #main .buynow .column.first img.left { margin: 32px 35px 0 -10px; } #pricing #main .buynow .column.first h3 { margin-bottom: 7px; padding-top: 23px; font-size: 1.2em; } #pricing #main .buynow .column.first p strong { color: #000; } #pricing #main .buynow .column.last { width: 205px; } #pricing #main .buynow .column.last ul { margin: 5px 0; } #pricing #main div.sosumi { padding: 0 52px; line-height: 1.4em; color: #999 !important; } #pricing #main div.sosumi h3 { font-size: 14px; font-weight: normal; margin-bottom: 1em; color: #999; } #pricing #main div.sosumi a { color: #333; } #pricing #main div.sosumi p.last {margin-top: -10px; } #pricing #main p.language { margin: 30px 0 0; text-align: center; } #pricing #main p.language a { padding: 0 6px; color: #999; } #pricing #main p.language a.active { color: #333; cursor: default; text-decoration: none; } /*---- sign-up ----*/ #signup #main { padding-bottom: 0; overflow: hidden; } #signup #main h1 {margin: 10px 0 5px 5px; position: relative; } #signup #main #hero { position: absolute; top: 28px; left: 590px; } #signup #main p.intro {width: 450px; font-size: 18px; color: #636363; margin: 0 0 1em 5px; } #signup #main iframe, #signup #main div#iframeplaceholder { width: 600px; height: 10em; } /*---- migrating ----*/ #migrating #content { width: 904px; min-height: 800px; padding: 45px 30px 30px 50px; } #migrating #content h3 { font-size: 16px; color: #252525; margin-bottom: 5px; } #migrating #content h4 { font-size: 14px; color: #252525; } #migrating #content h1 {margin-top: 10px; } #migrating #content p.intro {margin-bottom: 35px} #migrating #content h1, body#migrating #content .subtitle { padding-right: 20px; } #migrating #content .subtitle { margin-bottom: 60px; } #migrating #content #hero { position: relative; width: 980px; margin: -20px -28px 35px -48px; } #migrating #content_features { clear: both; margin-top: -10px; } #migrating #content_features .column { margin-top: 30px; } #migrating #content_features .column.first { width: 565px; } #migrating #content_features div.right, body#migrating #content_features div.left { width: 260px; } #migrating #content_features div.right { float: right; } #migrating #content_features div.left { float: left; clear: both; } #migrating #content_features img.left.margin { margin: -18px 20px 0 -35px; } #migrating #content_features .column p { margin-left: 70px; margin-right: 0; } #migrating #content_features .column img.left { margin-right: 16px; } #migrating #content_features strong { color: #252525; } #migrating #content_features .inaction { float: right; } #migrating #content_features .inaction .watchvideo a span { display: block; margin-top: 5px; margin-bottom: 32px; }*/ #migrating #content .imagegallery span { width: 160px; float: right; padding-top: 20px; } #migrating #content_whatis { margin-top: 40px; margin-bottom: 18px; } #migrating #content_whatis .column { width: 48%; } #migrating #content_whatis .column.first img.right { margin: 2px 30px 16px 10px; } #migrating #content_whatis .column.first p.top { width: 455px; margin-bottom: 45px; } #migrating #content_whatis .column.last img.top { margin: -82px 0 32px 27px; position: relative; } #migrating #content .sosumi a {color: #76797c; } /*---- whats new----*/ #whats-new .overlaypanel #MASKED-remote-wipe { width: 743px; height: 534px; position: relative; left:55px; } /*---- overlays ----*/ .overlaypanel img.overlayPanelShadowImage { top: -7.5% !important; left: -4.6% !important; width: 109.1% !important; height: 115% !important; } .overlaypanel .overlaycontent { width: 898px; position:absolute; top:0; left: 0; height:539px; } .overlaypanel .overlaycontent .moviePanel { width: 640px; height: 400px; margin:75px; /**margin-left: -55px; _margin-left: 75px; margin-left: 75px;*/ } .overlaypanel .overlaycontent .moviePanel.movie-loading { background-image: url(/global/elements/quicktime/qt_loading640x400.gif); /**margin-left: -55px; _margin-left: 75px;*/ margin-left: 75px; } .overlaypanel .overlaycontent .controllerPanel { top: 485px; left: 50px; width: 640px; } .overlaypanel .overlaycontent .overlaydescription { display: block; } .overlaypanel .overlaycontent .overlaydescription h2 { position: absolute; top:24px; left: 74px; font-size: 20px; } .overlaypanel .overlaycontent .overlaydescription p { position: absolute; top:72px; right: 50px; width: 125px; } .overlaypanel.gallery-iphone .overlaycontent .moviePanel, .overlaypanel.gallery-app-overlay .overlaycontent .moviePanel { height: 360px; } .overlaycontent .endState { display: none; } .overlaypanel .overlaycontent .endState { display: block; *margin-left: 130px; *width: 640px; _margin-left: 0; } /* --- video --*/ video { width:639px; height:399px; }