/* grid */ #main .grid2col .column { display:inline; min-height:53.3em; _height:53.3em; } #main .grid2colc .column.first { } #main .grid2colc .column.last { padding:0; margin:0; width: 735px; } #main #downloadnow.grid2colc .column { min-height:15.0em; display:inline; padding-right:20px; } #main #downloadnow.grid2colc .column.first { width:46%; } #main #downloadnow.grid2colc .column.last { width:46%; } #main #content #tutorialbrowser .grid2col .column { _height:0.0em; } #main #content #tutorialbrowser .grid2col.features #downloadnow.hero { margin-left:20px; } #install { display:none; } #main.hasjs #install { display:block; } .content { position: relative; clear:both; margin: 0; padding: 0px; padding-top: 10px; padding-bottom: 10px; background: #000000 url(../../template-images/template/bg-gallery-moon.jpg) no-repeat -75px -75px; border-right-color: #4e4e4e; border-left-color: #4e4e4e; } #main .pageheader h2 { height:30px; line-height:30px; text-align:center; color:#4e4e4e; font-size:14px; font-weight:normal; background:#fff url(../template-images/template/bg-light-header.gif) repeat-x center center; } /* general styles */ #main #content { padding:0; } #tutorials #main #localnav { *border-bottom:none; } #main .features { position:relative; } #main .features h2 { margin:0; font-size: 18pt; color: #444; text-shadow: #000 1px 1px 3px; text-align:center; } #main .features h2 span { font-size: 12pt; } #main .features .landing h2 { margin-bottom:15px; } #main .features .landing { padding-top:40px; padding-right: 10px; padding-left: 10px; padding-bottom: 0px; min-height: 400px; _height: 400px; } #main .intro { padding-top: 70px; width: 235px; line-height: 1.5em; margin-left: 15px; z-index: 200; } #main .intro h1 { line-height: 1em; font-weight: normal; margin-bottom: 6pt; font-size: 27pt; } #main .intro h2 {font-size: 12pt; font-weight: bold; color: #fff; line-height: 1em; text-align:left; } #main .intro p {font-size: 12pt; } #main .relative { position:relative; } #main #install { padding:2.6em 7px .1em; line-height:1.6em; margin-right:4px; _margin: 0 -10px 0 15px; _padding:2.6em 0 .1em; } /* sidenav */ #main ul#sidenav { margin:0; padding:0; } /*#main ul#sidenav li { margin:0; padding:0 0 1px; } #main ul#sidenav li a { display:block; width:203px; height:36px; padding:0 10px 0 0; text-decoration:none; outline:none; } #main ul#sidenav li a#sn-jukebox { background:url(http://images.apple.com/itunes/tutorials/images/nav_jukebox_title20071211.gif) no-repeat 0 0; } #main ul#sidenav li a#sn-store { background:url(http://images.apple.com/itunes/tutorials/images/nav_store_title20071211.gif) no-repeat 0 0; } #main ul#sidenav li a#sn-syncing { background:url(http://images.apple.com/itunes/tutorials/images/nav_sync_title20071211.gif) no-repeat 0 0; }*/ #main ul#sidenav li.active a { text-decoration:none; cursor:default; } /*#main ul#sidenav li.active a#sn-jukebox, #main ul#sidenav li.active a#sn-store, #main ul#sidenav li.active a#sn-syncing { background-position:0 100%; } #main ul#sidenav li ul { margin:5px 0 1.6em; padding:0 0 1px; font-size:11px; line-height:16px; } #main ul#sidenav li ul li { padding:2px 0 2px 50px; position:relative; z-index:100; width:163px; } #main ul#sidenav li ul li a { display:inline; color:#5c5c5c; text-indent:0; background:url(http://images.apple.com/itunes/tutorials/images/nav_arrow20070905.gif) no-repeat 100% 4px; } #main ul#sidenav li ul li a:hover { text-decoration:underline; color:#2970a6; cursor:pointer; }*/ #leftcolumn { border-right: none; } #main .left-box .content ul#sidenav li.active a:hover { background: none; } #main .left-box .content ul#sidenav li { border-bottom: none; padding-bottom: 10px; font-size: 12px; } #main .left-box .content ul#sidenav li a { color: #999; text-decoration: none; background-image: none; width: 173px; max-width: 173px; padding-left: 15px; padding-right: 15px; padding-bottom: 5px; padding-top: 10px; margin-left: -15px; margin-right: -15px; } #main .left-box .content ul#sidenav li a:hover { background-image:url(/template-images/template/sb-linkbg.gif); background-repeat:repeat-y; background-position:left; } #main .left-box .content ul#sidenav li ul li { border-bottom: none; display: block; margin-left: 0px; margin-right: -15px; padding-bottom: 0px; font-size: 10px; margin-bottom: 1px; } #main .left-box .content ul#sidenav li ul li a { color: #888; text-decoration: none; background-image: none; width: 173px; max-width: 173px; height: 13px; display: block; padding-left: 18px; padding-right: 12px; padding-bottom: 2px; padding-top: 3px; margin: 0px; } #main .left-box .content ul#sidenav li ul li a:hover, #main .left-box .content ul#sidenav li.active ul li a:hover { background-image:url(/template-images/template/sb-footbullet.gif); background-repeat:no-repeat; background-position:left; cursor: pointer; } #main .left-box .content ul#sidenav li ul li.active { background:url(../../template-images/gallery/sb-list-bg.gif) no-repeat 0 0; } #main .left-box .content ul#sidenav li.active a { color:#fff; } #main .left-box .content ul#sidenav li ul li.active a { color:#333; text-shadow: none; } #main .left-box .content ul#sidenav li ul li.active a:hover { background-image: none; cursor:default; } /* swap content */ #main .swapcontent { padding: 10px; padding-left: 10px; padding-right:10px; line-height:1.6em; } #main .swapcontent h2 { height: 50px; } #main .swapcontent .gallerytext { border-top: 1px solid #222222; padding-top: 10px; margin: 10px; margin-bottom: 0px; margin-top: 10px; padding-bottom: 10px; z-index: 200; } #main .swapcontent img.hero { position: absolute; right: 0; top: 0; z-index: 0; } #main #store-AnchorFix.swapcontent img.hero { margin-left:-32px; } #main #syncing-AnchorFix.swapcontent img.hero { margin-left:-20px; } #main .swapcontent .movie, #main .swapcontent .image { width:675px; height:424px; position: relative; margin-top: 0px; margin-left: 20px; margin-bottom: 20px; } #main .swapcontent .movie a.movielink { display:block; position:absolute; top:187px; left:220px; width:202px; height:43px; text-indent:-9999px; outline:none; } #main .swapcontent .movie.loading { background: #000 url(/template-images/gallery/bg-loading.gif) no-repeat center center; border: 1px solid #222; } #main .swapcontent .movie.loading a.movielink { display:none; } #main .swapcontent .movie .endstate { display: none; width: 675px; height: 424px; position: relative; margin-left:0px; } /* quicktime containers */ #main #quicktimewrap { position: absolute; width:1px; height:1px; z-index:100; } #main #quicktimewrap .qtbox { width:1px; height:1px; } #main #quicktimewrap .qtbox #quicktime { width:1px; height:1px; } #main #quicktimewrap .qtbox #quicktime object { width:1px; height:1px; } #main #quicktimewrap.active { width:675px; height:424px; top: 60px; left: 30px; } #main #quicktimewrap.active .qtbox { width:675px; height:390px; margin-bottom:12px; padding-top: 10px; background: #000000; border: 1px solid #222; } #main #quicktimewrap.active .qtbox #quicktime { width:675px; height:380px; margin:0 auto; overflow:hidden; } #main #quicktimewrap.active .qtbox #quicktime object { width:675px; height:380px; } /* movie controller #main #quicktimewrap #qtcontroller { display:none; position:relative; width:521px; height:20px; z-index:1; margin-left: 77px; } #main #quicktimewrap.active #qtcontroller { display:block; } #main #quicktimewrap #qtcontroller .ACQuicktimeController { height:20px; } #main #quicktimewrap #qtcontroller div.control { position:absolute; width:10px; height:10px; top:5px; left: 5px; text-indent:-999px; cursor:pointer; overflow:hidden; background:url(/template-images/gallery/playpause.gif) left top no-repeat; } #main #quicktimewrap #qtcontroller div.control.pause { background-position:left -10px; } #main #quicktimewrap #qtcontroller div.sliderPanel { position:absolute; top:0px; left:0px; height:20px; width:521px; padding-left: 21px; } #main #quicktimewrap #qtcontroller div.sliderPanel div.track { position:absolute; left:0; width:521px; height:20px; text-align:left; background:url(/template-images/gallery/qt-slider-bg-load.gif) no-repeat; } #main #quicktimewrap #qtcontroller div.sliderPanel div.track div.loadedProgress { position:absolute; top:0; height:20px; background:url(/template-images/gallery/qt-slider-bg.gif) no-repeat; } #main #quicktimewrap #qtcontroller div.sliderPanel div.track div.trackProgress { position:absolute; height:20px; } #main #quicktimewrap #qtcontroller div.sliderPanel div.track div.playHead { position:absolute; top:0; margin:0 4px; width:13px; height:12px; background:url(http://images.apple.com/itunes/tutorials/images/qtcontroller_pointer20070807.png) no-repeat; cursor:pointer; behavior:url(/global/scripts/lib/iepngfix.htc); }*/ /* movie controller */ #main #quicktimewrap #qtcontroller { display:none; position:relative; width:521px; height:20px; z-index:1; background:url(/template-images/gallery/qt-control-bg.gif) no-repeat top left; margin-left: 77px; } #main #quicktimewrap.active #qtcontroller { display:block; } #main #quicktimewrap #qtcontroller .ACQuicktimeController { height:20px; } #main #quicktimewrap #qtcontroller div.control { position:absolute; width:10px; height:10px; top:3px; left: 8px; text-indent:-999px; cursor:pointer; overflow:hidden; background:url(/template-images/gallery/playpause.gif) left top no-repeat; z-index: 100; } #main #quicktimewrap #qtcontroller div.control.pause { background-position:left -10px; } #main #quicktimewrap #qtcontroller div.sliderPanel { position:absolute; top:2px; left:0px; height:12px; width:489px; } #main #quicktimewrap #qtcontroller div.sliderPanel div.track { position:absolute; left:21px; width:489px; height:12px; text-align:left; background:url(/template-images/gallery/qt-slider-bg-load.gif) no-repeat; } #main #quicktimewrap #qtcontroller div.sliderPanel div.track div.loadedProgress { position:absolute; top:0; height:12px; background:url(/template-images/gallery/qt-slider-bg.gif) no-repeat; } #main #quicktimewrap #qtcontroller div.sliderPanel div.track div.trackProgress { position:absolute; height:12px; } #main #quicktimewrap #qtcontroller div.sliderPanel div.track div.playHead { position:absolute; top:1px; margin:0px; width:13px; height:10px; background:url(/template-images/gallery/qt-control.gif) no-repeat top 1px; cursor:pointer; } /* pill buttons .pillbutton { display:block; height:50px; margin:0; padding-right:16px; text-align:center; font-size:15px; } .pillbutton a { display:inline-block; position:relative; color:#fff; text-decoration:none; } .pillbutton a span, .pillbutton a b { display:inline-block; width:auto; padding: 0; padding-top:17px; padding-bottom: 17px; text-align:left; outline:none; } .pillbutton a span { padding-left:67px; background: url(/template-images/gallery/button-leftcap.png) no-repeat 0 50%; _background-image:url(/template-images/gallery/button-leftcap.gif); } .pillbutton a b { position:absolute; width:33px; top:0; right:-33px; text-indent:-9999px; background:url(/template-images/gallery/button-rightcap.png) no-repeat 0 50%; _background-image:url(/template-images/gallery/button-rightcap.gif); } .pillbutton a b, x:-moz-any-link { top:inherit; margin-top:-17px; } /* this is for firefox because it's dumb when it comes to inline-block * .pillbutton a b, x:-moz-any-link, x:default { top:0; margin-top:0; } /* this is to reset IE7 because it was reading the above * .pillbutton a:hover { color:#778593; cursor:pointer; }*/ .pillbutton { position: absolute; bottom: 20px; right: 20px; width: 204px; height: 50px; } .pillbutton a { position: absolute; margin-right: 20px; margin-bottom: 20px; text-align: left; font-size: 16px; color: #fff !important; text-decoration: none !important; cursor: hand; height: 50px; line-height: 50px; display: block; padding-left: 67px; background: url(/template-images/gallery/button-leftcap.png) no-repeat; _background-image: url(/template-images/gallery/button-leftcap.gif) no-repeat; } .pillbutton a span { display: block; position: absolute; top: 0; right: -33px; width: 33px; height: 50px; background: url(/template-images/gallery/button-rightcap.png) no-repeat; text-indent: -9999px; outline: none; _background-image: url(/template-images/gallery/button-rightcap.gif) no-repeat center; } #quicktime p.pillbutton { position: absolute; top: 166px; left: 50%; margin-left: -102px; } .endstate .pillbutton, .endstate.tall .pillbutton { margin: 10px auto; overflow: hidden; } .endstate .pillbutton a span, .endstate.tall .pillbutton a span { } .endstate .pillbutton.top { position: relative; top: 155px; _margin-top: 200px; _zoom:1;} .endstate.tall .pillbutton.top { position: relative; top: 180px; } .swapcontent .gallery-nav { position: absolute; top: 20px; left: 20px; width: 180px; } .swapcontent .gallery-nav li { float: left; margin-right: 5px; margin-bottom: 5px; display: block; } .swapcontent .gallery-nav li img { border: 1px solid #777; } .smgal-actions { position: absolute; bottom: 0px; right: 0px; height: 38px; list-style: none; display:inline; } .smgal-actions li { float: left; } ul.smgal-actions.endstate { position: relative; margin-top: 150px; margin-left: 100px; }