/* grid */ #main .column.first { width:205px; float: right; margin:20px; margin-top: 15px; display:inline; font-size:11px; line-height:1.4em; position: relative; z-index: 500 } #main .column.main { padding:0; margin:0; width: 735px; height: 335px; } .content { position: relative; clear:both; margin: 0; padding: 0px; padding-top: 10px; padding-bottom: 10px; background: #000000 url(../../template-images/template/bg-gallery-moon-sm.jpg) no-repeat -50px -50px; border-right-color: #4e4e4e; border-left-color: #4e4e4e; } #main .column.first .sidenavcontent { height: 255px; } #main .column.first .title { margin:0; font-size: 15px; color: #555; height: 25px; } /* buttons */ #main .sidenavcontent ul#sidenav { margin:0px; padding:0; font-size:12px; font-weight:normal; line-height:15px; word-spacing:-.1em; } #main .sidenavcontent ul#sidenav li { height:auto !important; padding:0; margin: 0px; margin-bottom: 8px; zoom:1; } #main .sidenavcontent ul#sidenav li a { display:block; height:54px; padding:10px; color:#fff; text-decoration:none; cursor:pointer; background:url(../../template-images/template/bg-port-button.gif) repeat-x top; border: 1px solid #4e4e4e; background-color: #333333; text-align: left; } #main .sidenavcontent ul#sidenav li a img { display:block; width:90px; height:74px; float:right; margin: -10px; margin-left:10px; } #main .sidenavcontent ul#sidenav li a:hover { background-position: -50px left; } #main .sidenavcontent ul#sidenav li.active { text-decoration:none; outline:none; cursor:default; background-position: left -100px; } #main .sidenavcontent ul#sidenav li.active a { text-decoration:none; outline:none; cursor:default; background-position: left -100px; } #main .sidenavcontent ul#sidenav li span { display:none; margin:.2em 0 0 -1px; padding-left:18px; color:#acacac; background: url(/template-images/gallery/nowplaying.gif) no-repeat 0 50%; font-style: normal; margin-top: .5em; color: #999; font-size: 10px; } #main .sidenavcontent ul#sidenav li.active span {display:block;} #main .sidenavcontent ul#sidenav li i {display:block; font-style: normal; margin-top: .5em; color: #999; font-size: 10px; } #main .sidenavcontent ul#sidenav li.active i {display:none;} #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 .swapcontent h2 { margin:0; font-size: 18pt; color: #444; } #main .swapcontent.landing h2 { margin-bottom:15px; } #main .swapcontent.landing { padding-top:20px; padding-right: 0px; padding-left: 10px; padding-bottom: 0px; } #main .intro { padding-top: 50px; height: 270px; line-height: 1.5em; margin-left: 15px; position: relative; z-index: 200; } #main .intro h1 { line-height: .8em; font-weight: normal; margin-bottom: 6pt; } #main .intro h2 {font-size: 12pt; font-weight: bold; color: #fff; } #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; margin-right: 15px; 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; } #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; } #main .left-box .content ul#sidenav li ul li.active a:hover { background-image: none; cursor:default; }*/ /* swap content */ #main .swapcontent { padding: 10px; line-height:1.6em; } #main .swapcontent h2 { height: 40px; font-size: 15pt; line-height: .75em; } #main .swapcontent span { font-size: 10pt; } #main .swapcontent .gallerytext { border-top: 1px solid #222222; padding-top: 10px; margin: 10px; margin-bottom: 0px; margin-top: 10px; padding-bottom: 10px; display:none; } #main .swapcontent .image { position: absolute; bottom: 0px; } #main .swapcontent img.hero { float: right; margin-right: 15px; position: relative; z-index: 100 } #main #store-AnchorFix.swapcontent img.hero { margin-left:-32px; } #main #syncing-AnchorFix.swapcontent img.hero { margin-left:-20px; } #main .swapcontent .movie { width:430px; height:240px; position: relative; margin-top: 0px; margin-left: 25px; margin-bottom: 0px; } #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: 430px; height: 270px; background: none; position: relative; text-align: center; } /* 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:430px; height:270px; top: 46px; left: 35px; } #main #quicktimewrap.active .qtbox { width:430px; height:245px; margin-bottom:9px; padding-top: 5px; background: #000; border: 1px solid #222; } #main #quicktimewrap.active .qtbox #quicktime { width:430px; height:240px; margin:0 auto; overflow:hidden; } #main #quicktimewrap.active .qtbox #quicktime object { width:430px; height:240px; } /* 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:400px; height:20px; z-index:1; background:url(/template-images/gallery/qt-control-bg-sm.gif) no-repeat top left; margin-left: 18px; } #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:368px; } #main #quicktimewrap #qtcontroller div.sliderPanel div.track { position:absolute; left:21px; width:368px; height:12px; text-align:left; background:url(/template-images/gallery/qt-slider-bg-load-sm.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-sm.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; left: 300px; 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; } .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; }