a.block, a.block:hover { display: block; color: #000; text-decoration: none; } a.block em.more { color: #08c; font-style: normal; background: url(/images/morearrow_08c.gif) no-repeat 100% .4em; padding-right: 10px; white-space: nowrap; } a.block:hover em.more { text-decoration: underline; } a.block:hover h3 { color: #08c; } .overview .box .boxbottom { background:url(/images/box_bgbottom_nogradient.png) no-repeat 0 100% !important; zoom:1; bottom:0; } .overview #main #content h3 { line-height:20px; padding-bottom:5px; margin-bottom:0; } .overview #main #content .grid3col h4 { line-height:18px; } .overview #main #content { padding:62px 38px 0 !important; } .overview #main #content .grid2col, .overview #main #content .grid3col { width:auto; } .overview #main #content .grid2col { padding-bottom: 20px; } .overview #main #content .grid2col ul.column.first { margin-bottom: 0; } .overview #main #content .hero { height:150px; margin-bottom:34px; margin-left:38px; } .overview #main #content .hero img.hero-image { margin:-61px -36px 0; } .overview #main #content .gradientDivider { margin-left:-36px; margin-right:-36px; padding-left:36px; padding-right:36px; } .overview #main #content .grid2col .column.first { width: 416px; } .overview #main #content .grid2col .column.first li.image100 { padding-left:0; height:84px; } .overview #main #content .grid2col .column.first li.image100 a.block { padding-left: 100px; } .overview #main #content .grid2col .column.first li a.block:hover h3 { color: #08c; } .overview #main #content .grid2col .column.first li { padding-top: 11px; } .overview #main #content .grid2col .column.first li.first { padding-top:4px; overflow: visible; } .overview #main #content .grid2col .column.first li.last { text-align: right; } .overview #main #content .grid2col .column.first .image { overflow: hidden; border-bottom:1px solid #E0E0E0; } .overview #main #content .grid2col .column.first .image img.left { margin: -2px 15px 0 -100px; *margin-bottom: -15px; } .overview #main #content .grid3col { background:url(/images//images/col3_bg.png) repeat-y 287px 0; padding:22px 0 4px; } .overview #main #content .grid3col .grid2col.dev-program-links { margin: 0 -10px; padding-top: 25px; font-size:10px; text-align: center; } .overview #main #content .grid3col .grid2col.dev-program-links a.block { color: #656565; } .overview #main #content .grid3col .grid2col.dev-program-links a.block:hover { color: #08c; } .overview #main #content .grid3col .grid2col.dev-program-links .column { width: 48%; padding: 0; } .overview #main #content .grid3col .grid2col.dev-program-links .column img { display: block; margin: 0 auto 3px; } .overview #main #content .grid3col .grid2col { padding-left:0; padding-right:0; } .overview #main #content .grid3col h4 { font-size:12px; margin-bottom: .5em; } .overview #main #content .grid3col .column .grid2col .column.first h5 a img { margin-left:15px; } .overview #main #content .grid3col .column.last a.more { margin-left:6px; } .overview #main #content .grid3col .column a.block { width:260px; } .overview #main #content .grid3col .column { margin-left:48px; } .overview #main #content .grid3col .column.first a.block img.center { margin-left:0; padding-top:10px; } .overview #main #content .grid3col .column a.block img.center { margin-left:62px; padding-top:12px; } .overview #main #content .grid3col .column.last a.block img.center { margin-left:28px; } .overview #main #content .grid3col .column.last a.block { margin-left:34px; } .overview #main #content .grid2col .column #herocontent { width:465px; height:275px; position:relative; right:30px; top:-3px; background:url(/images/overview-swapview-bg.jpg) no-repeat 0 0; } .overview #main #content .grid2col .column #herocontent .herocontent { width: 465px; height: 240px; position: absolute; top: 0; left: 0; } .overview #main #content .grid2col .column #herocontent .herocontent a.block { padding: 77px 36px 0; height: 154px; } .overview #main #content .grid2col .column #herocontent .image-text { text-indent: -9999px; height: 0; overflow: hidden; } .overview #main #content .grid2col .column #herocontent p { color: #666; width: 255px; font-size: 1.1667em; } .overview #main #content .grid2col .column #herocontentnav { font-size:1px; position:relative; right:-180px; top:-26px; width: 100px; } .overview #main #content .grid2col .column #herocontentnav li { float:left; margin-left:1px; } .overview #main #content .grid2col .column #herocontentnav li a { background:url(/images/overview_hero_navitem.gif) no-repeat 0 0; display:block; height:10px; width:10px; } .overview #main #content .grid2col .column #herocontentnav li a.active { outline: none; background-position:0 100%; cursor:default; } .overview #main #content .grid2col .column #herocontent .herocontent.accessories { background:url(/images/overview-swapview-accessories.jpg); } .overview #main #content .grid2col .column #herocontent .herocontent.wwdc-videos { background:url(/images/overview-swapview-wwdc_session_videos.jpg); } .overview #main #content .grid2col .column #herocontent .herocontent.wwdc-videos p, .overview #main #content .grid2col .column #herocontent .herocontent.developer-profiles p { width:200px; } .overview #main #content .grid2col .column #herocontent .herocontent.developer-profiles { background:url(/images/overview-swapview-developer_profiles.jpg); } .overview #main #content .grid2col .column #herocontent .herocontent.snow-leopard { background:url(/images/overview-swapview-snow_leopard.jpg); } .overview #main #content .grid2col .column #herocontent .herocontent.snow-leopard p { width:255px; } .overview #main #content .grid2col .column #herocontent .herocontent.iphone-os3 { background:url(/images/overview-swapview-iphone_os3.jpg); } .overview #main #content .grid2col .column #herocontent .herocontent.ipad-os { background:url(/images/overview-swapview-ipad-apps.jpg); } .overview #main #content .grid2col .column #herocontent .herocontent.iphone-sdk { background:url(/images/overview-swapview-iphonesdk4.jpg); } .overview #main #content .grid2col .column #herocontent .herocontent.ipad-appstore { background:url( /images/overview-swapview-ipad_appstore.jpg ); } .herocontent.ifund { background:url(/images/overview-swapview-ifund.jpg); } .overview #promofooter4 #promos4 .promo p { padding-left:15px; padding-right:15px; text-align:left; } .overview #promofooter4 #promos4 .promo h6 { font-size:12px; } .overview #promofooter4 #promos4 .promo p a.button { margin-top:20px; } a.more { background-position:100% 50%; } body, html { background:#F2F2F2 !important; } #main { position:relative; width:984px !important; padding:0 !important; margin:0 !important; background:#fff url(/images/main_bodybg.png) 0 0 repeat-y; } #main #content { position:relative; padding:1.6em 20px !important; background: url(/images/main_bodybg_transparent.png) 0 0 repeat-y; } #main .maincap.top { position:absolute; z-index:1; width:100%; padding-top:6px; background:transparent url(/images/maincap_top.png) 0 0 no-repeat; top:0; } #main .maincap.bottom { position:absolute; width:100%; height:7px; background:transparent url(/images/maincap_bottom.png) 0 100% no-repeat; bottom:0; } #main #content.grid2colc { padding:0 !important; background: transparent url(/images/main_bodybg_transparent.png) 246px 0 repeat-y; } #main #content.grid2colc .column.last.maincontent { position:relative; float:left !important; width:655px; padding:4em 40px; } #main #content.grid2colc .column.last p.intro { font-size:14px !important; line-height:1.5em !important; } #main #content.grid2colc .column.first.sidebar .callout { background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f7f7f7)); font-size:11px; margin-left:3px; margin-right:13px; padding:10px 14px 15px; } #main #content.grid2colc .column.first.sidebar .callout .header { margin: -1em -13px 1em; } #main #content.grid2colc .column.first.sidebar .callout h3 { margin-bottom: .75em !important; } /*** nav ***/ #main #content .sidebar { width:233px; height:100% !important; margin:0 !important; padding: 0 0 1.1em 13px !important; } #main #content .sidebar h2 { margin:1.1em 2px .4em; padding:0; } #main #content .sidebar .nav { margin:0 0 1.5em -11px; } #main #content .sidebar .nav li ul { display:none; width:100%; padding:0; background:#f3f3f3; } #main #content .sidebar .nav li a { display:block; padding:9px 0 9px 13px; color:#787c80; border-bottom:1px solid #e5e5e5; text-shadow:#fff 1px 1px; background:transparent url(/images/adc_navarrows.png) no-repeat 217px 0 !important; } #main #content .sidebar .nav li ul li a { border-bottom:none; background:transparent url(/images/adc_navarrows.png) no-repeat 100% 0 !important; } #main #content .sidebar .nav li a:hover { color:#0088cc; background-position:217px -69px !important; } #main #content .sidebar .nav li#top-one-2line a, #main #content .sidebar .nav li#top-two-2line a, #main #content .sidebar .nav li#top-three-2line a, #main #content .sidebar .nav li#top-four-2line a, #main #content .sidebar .nav li#top-five-2line a, #main #content .sidebar .nav li#top-six-2line a {background-position:217px 9px !important; } #main #content .sidebar .nav li#top-one-2line a:hover, #main #content .sidebar .nav li#top-two-2line a:hover, #main #content .sidebar .nav li#top-three-2line a:hover, #main #content .sidebar .nav li#top-four-2line a:hover, #main #content .sidebar .nav li#top-five-2line a:hover, #main #content .sidebar .nav li#top-six-2line a:hover {background-position:217px -60px !important; } /* active no subnav */ .active-one #main #content .sidebar .nav #top-one, .active-two #main #content .sidebar .nav #top-two, .active-three #main #content .sidebar .nav #top-three, .active-four #main #content .sidebar .nav #top-four, .active-five #main #content .sidebar .nav #top-five, .active-six #main #content .sidebar .nav #top-six { background:transparent url(/images/nav_active.jpg) 0 0 repeat-x !important; } .active-one #main #content .sidebar .nav #top-one-2line, .active-two #main #content .sidebar .nav #top-two-2line, .active-three #main #content .sidebar .nav #top-three-2line, .active-four #main #content .sidebar .nav #top-four-2line, .active-five #main #content .sidebar .nav #top-five-2line, .active-six #main #content .sidebar .nav #top-six-2line { background:transparent url(/images/nav_active_twoline.jpg) 0 0 repeat-x !important; } .active-one #main #content .sidebar .nav #top-one a, .active-two #main #content .sidebar .nav #top-two a, .active-three #main #content .sidebar .nav #top-three a, .active-four #main #content .sidebar .nav #top-four a, .active-five #main #content .sidebar .nav #top-five a, .active-six #main #content .sidebar .nav #top-six a { color:#000; background-position:217px -33px !important; } .active-one #main #content .sidebar .nav li#top-one-2line a, .active-two #main #content .sidebar .nav li#top-two-2line a, .active-three #main #content .sidebar .nav li#top-three-2line a, .active-four #main #content .sidebar .nav li#top-four-2line a, .active-five #main #content .sidebar .nav li#top-five-2line a, .active-six #main #content .sidebar .nav li#top-six-2line a {background-position:217px 43% !important; } /* active with subnav */ .sub-one #main #content .sidebar .nav li#top-one a, .sub-two #main #content .sidebar .nav li#top-two a, .sub-three #main #content .sidebar .nav li#top-three a, .sub-four #main #content .sidebar .nav li#top-four a, .sub-five #main #content .sidebar .nav li#top-five a, .sub-six #main #content .sidebar .nav li#top-six a { background-position:-77px -33px !important; } .sub-one #main #content .sidebar .nav li ul, .sub-two #main #content .sidebar .nav li ul, .sub-three #main #content .sidebar .nav li ul, .sub-four #main #content .sidebar .nav li ul, .sub-five #main #content .sidebar .nav li ul, .sub-six #main #content .sidebar .nav li ul { display:block !important; } .sub-one #main #content .sidebar .nav li#top-one ul li a, .sub-two #main #content .sidebar .nav li#top-two ul li a, .sub-three #main #content .sidebar .nav li#top-three ul li a, .sub-four #main #content .sidebar .nav li#top-four ul li a, .sub-five #main #content .sidebar .nav li#top-five ul li a, .sub-six #main #content .sidebar .nav li#top-six ul li a { background-position:-377px 0 !important; padding-right:40px !important; } .sub-one #main #content .sidebar .nav li#top-one ul li a:hover, .sub-two #main #content .sidebar .nav li#top-two ul li a:hover, .sub-three #main #content .sidebar .nav li#top-three ul li a:hover, .sub-four #main #content .sidebar .nav li#top-four ul li a:hover, .sub-five #main #content .sidebar .nav li#top-five ul li a:hover, .sub-six #main #content .sidebar .nav li#top-six ul li a:hover { background-position:-377px -74px !important; } .sub-one #main #content .sidebar .nav #top-two #sub-two, .sub-one #main #content .sidebar .nav #top-three #sub-three, .sub-one #main #content .sidebar .nav #top-four #sub-four, .sub-one #main #content .sidebar .nav #top-five #sub-five, .sub-one #main #content .sidebar .nav #top-six #sub-six { display:none !important; } .sub-two #main #content .sidebar .nav #top-one #sub-one, .sub-two #main #content .sidebar .nav #top-three #sub-three, .sub-two #main #content .sidebar .nav #top-four #sub-four, .sub-two #main #content .sidebar .nav #top-five #sub-five, .sub-two #main #content .sidebar .nav #top-five #sub-six { display:none !important; } .sub-three #main #content .sidebar .nav #top-one #sub-one, .sub-three #main #content .sidebar .nav #top-two #sub-two, .sub-three #main #content .sidebar .nav #top-four #sub-four, .sub-three #main #content .sidebar .nav #top-five #sub-five, .sub-three #main #content .sidebar .nav #top-six #sub-six { display:none !important; } .sub-four #main #content .sidebar .nav #top-one #sub-one, .sub-four #main #content .sidebar .nav #top-two #sub-two, .sub-four #main #content .sidebar .nav #top-three #sub-three, .sub-four #main #content .sidebar .nav #top-five #sub-five, .sub-four #main #content .sidebar .nav #top-six #sub-six { display:none !important; } .sub-five #main #content .sidebar .nav #top-one #sub-one, .sub-five #main #content .sidebar .nav #top-two #sub-two, .sub-five #main #content .sidebar .nav #top-three #sub-three, .sub-five #main #content .sidebar .nav #top-four #sub-four, .sub-five #main #content .sidebar .nav #top-six #sub-six { display:none !important; } .sub-six #main #content .sidebar .nav #top-one #sub-one, .sub-six #main #content .sidebar .nav #top-two #sub-two, .sub-six #main #content .sidebar .nav #top-three #sub-three, .sub-six #main #content .sidebar .nav #top-four #sub-four, .sub-six #main #content .sidebar .nav #top-five #sub-five { display:none !important; } /* subnav active */ .sub-active #main #content .sidebar .nav li#top-one a, .sub-active #main #content .sidebar .nav li#top-two a, .sub-active #main #content .sidebar .nav li#top-three a, .sub-active #main #content .sidebar .nav li#top-four a, .sub-active #main #content .sidebar .nav li#top-five a, .sub-active #main #content .sidebar .nav li#top-six a { color:#686868; background-position: -77px 0 !important; } /* subnav specific */ .sub-one.sub-active #main #content .sidebar .nav #top-one > a:hover { color:#000; background-position:-77px -33px !important } .sub-one.sub-active #main #content .sidebar .nav #top-two a, .sub-one.sub-active #main #content .sidebar .nav #top-three a, .sub-one.sub-active #main #content .sidebar .nav #top-four a, .sub-one.sub-active #main #content .sidebar .nav #top-five a, .sub-one.sub-active #main #content .sidebar .nav #top-six a { background-position:217px 0 !important; } .sub-one.sub-active #main #content .sidebar .nav #top-two a:hover, .sub-one.sub-active #main #content .sidebar .nav #top-three a:hover, .sub-one.sub-active #main #content .sidebar .nav #top-four a:hover, .sub-one.sub-active #main #content .sidebar .nav #top-five a:hover, .sub-one.sub-active #main #content .sidebar .nav #top-six a:hover { color:#0088cc; background-position:217px -69px !important; } .sub-two.sub-active #main #content .sidebar .nav #top-two > a:hover { color:#000; background-position:-77px -33px !important } .sub-two.sub-active #main #content .sidebar .nav #top-one a, .sub-two.sub-active #main #content .sidebar .nav #top-three a, .sub-two.sub-active #main #content .sidebar .nav #top-four a, .sub-two.sub-active #main #content .sidebar .nav #top-five a, .sub-two.sub-active #main #content .sidebar .nav #top-six a { background-position:217px 0 !important; } .sub-two.sub-active #main #content .sidebar .nav #top-one a:hover, .sub-two.sub-active #main #content .sidebar .nav #top-three a:hover, .sub-two.sub-active #main #content .sidebar .nav #top-four a:hover, .sub-two.sub-active #main #content .sidebar .nav #top-five a:hover, .sub-two.sub-active #main #content .sidebar .nav #top-six a:hover { color:#0088cc; background-position:217px -69px !important; } .sub-three.sub-active #main #content .sidebar .nav #top-three > a:hover { color:#000; background-position:-77px -33px !important } .sub-three.sub-active #main #content .sidebar .nav #top-one a, .sub-three.sub-active #main #content .sidebar .nav #top-two a, .sub-three.sub-active #main #content .sidebar .nav #top-four a, .sub-three.sub-active #main #content .sidebar .nav #top-five a, .sub-three.sub-active #main #content .sidebar .nav #top-six a { background-position:217px 0 !important; } .sub-three.sub-active #main #content .sidebar .nav #top-one a:hover, .sub-three.sub-active #main #content .sidebar .nav #top-two a:hover, .sub-three.sub-active #main #content .sidebar .nav #top-four a:hover, .sub-three.sub-active #main #content .sidebar .nav #top-five a:hover, .sub-three.sub-active #main #content .sidebar .nav #top-six a:hover { color:#0088cc; background-position:217px -69px !important; } .sub-four.sub-active #main #content .sidebar .nav #top-four > a:hover { color:#000; background-position:-77px -33px !important } .sub-four.sub-active #main #content .sidebar .nav #top-one a, .sub-four.sub-active #main #content .sidebar .nav #top-two a, .sub-four.sub-active #main #content .sidebar .nav #top-three a, .sub-four.sub-active #main #content .sidebar .nav #top-five a, .sub-four.sub-active #main #content .sidebar .nav #top-six a { background-position:217px 0 !important; } .sub-four.sub-active #main #content .sidebar .nav #top-one a:hover, .sub-four.sub-active #main #content .sidebar .nav #top-two a:hover, .sub-four.sub-active #main #content .sidebar .nav #top-three a:hover, .sub-four.sub-active #main #content .sidebar .nav #top-five a:hover, .sub-four.sub-active #main #content .sidebar .nav #top-six a:hover { color:#0088cc; background-position:217px -69px !important; } .sub-five.sub-active #main #content .sidebar .nav #top-five > a:hover { color:#000; background-position:-77px -33px !important } .sub-five.sub-active #main #content .sidebar .nav #top-one a, .sub-five.sub-active #main #content .sidebar .nav #top-two a, .sub-five.sub-active #main #content .sidebar .nav #top-three a, .sub-five.sub-active #main #content .sidebar .nav #top-four a, .sub-five.sub-active #main #content .sidebar .nav #top-six a { background-position:217px 0 !important; } .sub-five.sub-active #main #content .sidebar .nav #top-one a:hover, .sub-five.sub-active #main #content .sidebar .nav #top-two a:hover, .sub-five.sub-active #main #content .sidebar .nav #top-three a:hover, .sub-five.sub-active #main #content .sidebar .nav #top-four a:hover, .sub-five.sub-active #main #content .sidebar .nav #top-six a:hover { color:#0088cc; background-position:217px -69px !important; } .sub-six.sub-active #main #content .sidebar .nav #top-six > a:hover { color:#000; background-position:-77px -33px !important } .sub-six.sub-active #main #content .sidebar .nav #top-one a, .sub-six.sub-active #main #content .sidebar .nav #top-two a, .sub-six.sub-active #main #content .sidebar .nav #top-three a, .sub-six.sub-active #main #content .sidebar .nav #top-four a, .sub-six.sub-active #main #content .sidebar .nav #top-five a { background-position:217px 0 !important; } .sub-six.sub-active #main #content .sidebar .nav #top-one a:hover, .sub-six.sub-active #main #content .sidebar .nav #top-two a:hover, .sub-six.sub-active #main #content .sidebar .nav #top-three a:hover, .sub-six.sub-active #main #content .sidebar .nav #top-four a:hover, .sub-six.sub-active #main #content .sidebar .nav #top-five a:hover { color:#0088cc; background-position:217px -69px !important; } /* unique body id's set on page specific stylesheet for active states */ .sub-one /* replace .sub-one with body hook */ .sub-active #main #content .sidebar .nav li#top-one li#unique-id a, .sub-two .sub-active #main #content .sidebar .nav li#top-two li#unique-id a, .sub-three .sub-active #main #content .sidebar .nav li#top-three li#unique-id a { color:#000 !important; background-position:-377px -37px !important; } /* For .active automatically added by pagenav.js */ #main #content .sidebar .nav li#top-one ul li.active a, #main #content .sidebar .nav li#top-two ul li.active a, #main #content .sidebar .nav li#top-three ul li.active a, #main #content .sidebar .nav li#top-four ul li.active a, #main #content .sidebar .nav li#top-five ul li.active a, #main #content .sidebar .nav li#top-six ul li.active a, #main #content .sidebar .nav li#top-one ul li.active a:hover, #main #content .sidebar .nav li#top-two ul li.active a:hover, #main #content .sidebar .nav li#top-three ul li.active a:hover, #main #content .sidebar .nav li#top-four ul li.active a:hover, #main #content .sidebar .nav li#top-five ul li.active a:hover, #main #content .sidebar .nav li#top-six ul li.active a:hover { background-position:-377px -37px !important; }