/* -------------------------------------------------------------------------- global */ body { margin: 0; padding: 0; line-height: 150%; background: #eaebe3; /*background: #e9eae0;*/ color: #222; } body { background: none; } #pageBg { width: 100%; position: absolute; top: 0px; height: 148px;} /* -------------------------------------------------------------------------- typography */ body { font-family: "Lucida Grande", Verdana, sans-serif; font-size: small; } #container { color: #333; font-size: 100%; } .quote { font-style: italic; } .quoteAttribution { font-weight: bold } /* -------------------------------------------------------------------------- links */ a:link, a:visited, a:active { color: inherit; text-decoration: none; } a:focus { outline: none;} a:hover { text-decoration: underline; } .obviousLink { text-decoration: underline; } .shipButton { float: left; padding: 3px; border: 1px solid #aaa; background-color: #f4f4f4; cursor: pointer; margin-right: 3px; } /* -------------------------------------------------------------------------- headers */ h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; } h1 { font-size: 150%; line-height: 200%; margin: 0 0 10px 0; } h2 { font-size: 150%; margin: 5px 0 10px 0; } h2.alt { font-size: 110%; color: #808080; margin: -15px 0 20px 30px; } /* -------------------------------------------------------------------------- sections */ .t1Section { float: left; color: #666; margin: 0; width: 470px; margin-top: 40px; } .t1SectionImage { float: left; clear: left; width: 80px; text-align: center; margin: 15px 10px 5px 0; } .t1SectionContent { float: left; width: 350px; margin: 10px auto 0 0px; } .t1SectionContent a { color: #666; font-weight: bold; } .t1SectionTitle { font-size: 15px; color: #444; } .t1SectionText { font-size: 12px; margin-top: 5px; } .t1SectionHeader.t1Section { width: 940px; } .t1SectionHeader .t1SectionImage { width: 300px; margin-right: 30px; } .t1SectionHeader .t1SectionContent { margin: 50px auto 0 0px; width: 500px; } .t1SectionHeader .t1SectionTitle { font-size: 20px; } .t1SectionHeader .t1SectionText { font-size: 14px; margin-top: 15px; } .t1SectionWide.t1Section { width: 940px; border-top: 1px solid #ccc; padding-top: 30px; } .t1SectionWide .t1SectionContent { width: 800px; } /* -------------------------------------------------------------------------- masthead */ #masthead { background: url(../images/masthead_bg_green.jpg) 0 0 repeat-x; } #mastheadLogo { position: absolute; right: 0px; top: 0px; } #mastheadLogoBlog { display: none; } #mastheadTitle { position: absolute; top: 66px; left: 3px; color: #333; font-size: 120%; /*font-family:helvetica; */} #mastheadNotice { display: block; position: absolute; top: 100px; left: 3px; color: #fff; font-size: 110%; border: 0px solid #fff; width: 910px;/* line-height: 140%;*/} .mastheadLink { color: white; text-decoration: underline; } #mastheadCriticalNotice { background-color: #ffa; display: none; text-align: left; font-size: 120%; color: #444; padding: 10px 10px 10px 30px; border: 0px solid #fff; width: 910px; } #nav { margin: 0 0 0 2px; padding: 0; position: absolute; top: 10px; left: 0; list-style-type: none; } #nav li { float: left; margin: 0 40px 0 0; } #nav a, #nav a:visited { color: #555; font-size: 120%; text-decoration: none; } #nav a:hover { color: #12a; } #home .home a { color: #12a; } #press .press a { color: #12a; } #oem .oem a { color: #12a; } #bizdev .bizdev a { color: #12a; } #stylus .stylus a { color: #12a; } #cases .cases a { color: #12a; } #about .about a { color: #12a; } #products .products a { color: #12a; } #blog .blog a { color: #12a; } /* -------------------------------------------------------------------------- containers */ #container { position: relative; margin: 0 auto 0 auto; width: 950px; padding: 0; } #masthead { position: relative; height: 148px; } #content { position: relative; width: 790px; float: left; padding: 0; margin: 0; /* background-color: #fff;*/ } #rail { position: relative; width: 130px; float: left; margin: 0; padding: 10px 0 0 0; } #main { position: relative; float: left; } #stylus #main { position: relative; width: 524px; float: left; margin: 0 50px 50px 0; } #checkout #main { width: 100%; margin: 0; float: none; } #sidebar { position: relative; width: 153px; float: left; margin: 0; } #footer { position: relative; float: left; width: 100%; margin: 0; } /* -------------------------------------------------------------------------- homepage */ .productHome { width: 100%; height: 100%; border-right:1px dashed #ccc; float: left; position: relative; } .productHomeSubtitle { font-size: 16px; color: #666; } .productHomeSeeMore { position: absolute; top: 155px; left: 22px; } .productHomeBuyItNow { position: absolute; top: 185px; left: 22px; } .homeNew { position: absolute; top: 5px; left: 3px; } .homeFeatureImage {top: 40px; right: -20px; } #productSlideNavigation { position: absolute; bottom: 0px; right: 25px; z-index: 100; } #productSlideFadeLeft { position: absolute; top: 0px; left: 0px; background: url(/images/home_slideshow_fade_left.png) 0 0 repeat-y; width: 10px; height: 100%; z-index: 100; } #productSlideFadeRight { position: absolute; top: 0px; right: 0px; background: url(/images/home_slideshow_fade_right.png) 0 0 repeat-y; width: 10px; height: 100%; z-index: 100; } /*#footerBox { background: url(/images/home_footer_gloss.png) 50px 0 repeat-y #000; width: 950px; height: 123px; color: #fff; font-size: 80%; padding: 20px 40px; }*/ #footerBox { width: 950px; height: 50px; color: #ed7e2b; font-size: 80%; position: relative; } #footerBox a { color: #444; } /* position in the middle of page */ .footerLinks { float: right; position: relative; right: 50%; } .footerLinks li { float: right; position: relative; left: 50%; } /* extra formatting */ .footerLinks { margin-top: 20px; } .footerLinks li { margin: 5px 10px; } .buttonHolder { position: relative; width: 30px; height: 30px; margin: 10px; cursor: pointer; float: left; } .hiddenButton { position: absolute; display: none; top: 0; left: 0; } .shownButton { position: absolute; top: 0; left: 0; } #productSlides {width: 100%; min-height: 325px; margin: 0; background-color: none; padding-bottom: 30px; } #productSlidesContainer { position: relative; width: 630px; float: left; } .productFeature { width: 630px; height: 100%; border-right:1px dashed #ccc; float: left; position: relative; } .homeFeatureLogo { position: absolute; } .homeFeatureImage { position: absolute; } .homeFeatureSeeMore { position: absolute; } .homeFeatureSubtitle { position: absolute; } .newsLineDiv { background-color: transparent; } /*for ie... does it even work? */ #productStylusFeature .homeFeatureLogo { top: 10px; left: 20px; } #productStylusFeature .homeFeatureImage { top: 15px; right: 40px; } #productStylusFeature .homeFeatureImage2 { top: 163px; right: 242px; } #productStylusFeature .homeFeatureSubtitle { top: 214px; left: 128px; } #productStylusFeature .homeFeatureSeeMore { top: 185px; left: 518px; } #productParticleFeature .homeFeatureImage { top: 10px; left: 20px; } #productParticleFeature .homeFeatureSeeMore { top: 146px; left: 514px; } #productSketchFeature .homeFeatureLogo { top: 50px; left: 50px; } #productSketchFeature .homeFeatureSubtitle { top: 140px; left: 72px; } #productSketchFeature .homeFeatureImage { top: 40px; right: 2px; } #productSketchFeature .homeFeatureSeeMore { top: 167px; left: 224px; } #productInkletFeature .homeFeatureLogo { top: 30px; left: 10px; } #productInkletFeature .homeFeatureImage { bottom: 50px; right: 5px; } #productInkletFeature .homeFeatureSeeMore { top: 170px; left: 82px; } #productFlingFeature .homeFeatureLogo { top: 30px; left: 10px; } #productFlingFeature .homeFeatureSubtitle { top: 130px; left: 10px; } #productFlingFeature .homeFeatureImage { bottom: 0px; right: -5px; } #productFlingFeature .homeFeatureSeeMore { top: 160px; left: 10px; } #productFlingMiniFeature .homeFeatureLogo { top: 20px; left: 10px; } #productFlingMiniFeature .homeFeatureSubtitle { top: 110px; left: 10px; } #productFlingMiniFeature .homeFeatureImage { bottom: -23px; right: -20px; } #productFlingMiniFeature .homeFeatureSeeMore { top: 140px; left: 10px; } #productMagnusFeature .homeFeatureSeeMore { top: 190px; left: 545px; } .hotLinksDiv { width: 240px; display: block; float: right; opacity: 1; margin-top: 45px; background-color: #fff; /* background:-webkit-gradient( linear, left bottom, left top, color-stop(0.00, #f3f3f3), color-stop(0.85, #fff));*/ -webkit-box-shadow: 0px 3px 6px #ccc; } .hotLinks { display: none; width: 100%; text-align: center; padding: 0; margin: 0; color: #666; font-size: 100%; /*border: 1px solid #ccc;*/ } .hotLinks li { position: relative; margin: 0; padding:0; } .hotLinks li.hotLinksHeader { font-size: 110%; background: url(http://tenonedesign.com/images/home_twitter_background.jpg) scroll 0px 0px; color: #2e5a6c; padding: 10px; border: 1px solid #eee; } .hotLinks li a {display: block; padding: 20px; margin: 0; border: 1px solid 944; border-bottom: 1px solid #eee; color: #666;} .hotLinks li a:hover { text-decoration: none; background: url(images/checkoutSidebarBackground.jpg) 0 0 repeat-x; color: #2e5a6c; } /* -------------------------------------------------------------------------- twitterScroll */ #twitterScroll { background: url(/images/home_twitter_background.jpg) repeat-x scroll 0 -20px transparent; float: left; clear: left; width:100%; height: 40px; border-left: 1px solid #ddd; overflow: hidden; } #twitterTab { float: left; color: #666; text-align: center; border: 1px solid #ddd; border-bottom: none; padding: 2px 10px 2px 10px; background: url(/images/home_twitter_background.jpg) repeat-x scroll 0 0px transparent; } #twitterOtherTab { float: left; border-bottom: 1px solid #f2f2f2; width: 750px; } #twitterScroll .newsLineDiv { width: 850px; border-bottom: none; float: left; clear: none; padding: 10px; color #666; } /* -------------------------------------------------------------------------- products */ .productListing { float: left; clear: left; width: 782px; height: 80px; border: 1px solid #bbb; margin: 10px auto auto 5px; position: relative; } .productSubtitle { font-size: 16px; color: #666; } .productSeeMore { position: absolute; top: 50px; left: 205px; } .productBuyItNow { position: absolute; top: 50px; left: 295px; } #products .homeNew { left: auto; right: 3px; } .productFeatured { float: left; clear: left; width: 782px; border: 1px solid #bbb; margin: 10px auto auto 5px; } .productFeaturedLeft { width: 282px; float: left; clear: left; } .productFeaturedRight { width: 500px; float: left; } #productPogoLogo { position: absolute; top: 15px; left: 15px; } #productPogoSubtitle { position: absolute; top: 12px; left: 206px; } #productPogo2Up { position: absolute; top: 0px; right: 40px; } #productPogo2Up img { height: 80px; } #productSoundclipLogo { position: absolute; top: 15px; left: 18px; } #productSoundclipSubtitle { position: absolute; top: 12px; left: 206px; } #productSoundclipEnd { position: absolute; top: 15px; right: 40px; } #productSketchLogo { position: absolute; top: 15px; left: 18px; } #productSketchSubtitle { position: absolute; top: 12px; left: 206px; } #productSketchHorizontal { position: absolute; top: 25px; right: 20px; } #productAutographLogo { position: absolute; top: 15px; left: 15px; } #productAutographSubtitle { position: absolute; top: 12px; left: 206px; } #productAutographEnd { position: absolute; top: 8px; right: 40px; } #productInkletLogo { position: absolute; top: 15px; left: 5px; } #productInkletSubtitle { position: absolute; top: 12px; left: 206px; } #productInkletEnd { position: absolute; top: 8px; right: 40px; } #productTangoLogo { position: absolute; top: 15px; left: 10px; } #productTangoSubtitle { position: absolute; top: 12px; left: 206px; } #productTangoEnd { position: absolute; top: 12px; right: 20px; } #productParticleLogo { position: absolute; top: 25px; left: 18px; } #productParticleSubtitle { position: absolute; top: 12px; left: 206px; } #productParticleImage { position: absolute; top: 30px; right: 20px; width: 350px; } #productFlingLogo { position: absolute; top: 16px; left: 12px; } #productFlingSubtitle { position: absolute; top: 12px; left: 206px; } #productFlingImage { position: absolute; top: 4px; right: 60px; } #productFlingMiniLogo { position: absolute; top: 10px; left: 13px; } #productFlingMiniSubtitle { position: absolute; top: 12px; left: 206px; } #productFlingMiniImage { position: absolute; top: 0px; right: 60px; } #productSketchProLogo { position: absolute; top: 10px; left: 13px; } #productSketchProSubtitle { position: absolute; top: 12px; left: 206px; } #productSketchProImage { position: absolute; top: 0px; right: 0px; } /* -------------------------------------------------------------------------- generic product detail page styles */ .productDetailContainer { float: left; clear: left; width: 550px; border: none; margin: 40px 20px 0 20px; } .productDetailContent { float: left; width: 100%; min-height: 380px; border: none; } .productDetailMenu { font-size: 120%; margin: 6px 0 0 0; padding: 0; list-style-type: none; } .productDetailDottedDivider {float: right; width: 100%; margin: 0; padding: 0; border-bottom: 1px dashed #aaa; } .productDetailMenu li { float: right; margin: 0; padding: 4px 5px; border-right: 1px solid #666; } .productDetailMenu li:hover { background: url(../images/product_detail_menu_bg.jpg) 0 0 repeat-x; cursor: pointer; } .productDetailMenu a:hover { text-decoration: none; } /*.pdBuyItTab { background: url(../images/product_detail_menu_bg_buy.jpg) 0 0 repeat-x; }*/ li.pdBuyItTab { color: #ed3235; border-right: none; } .pdBuyItArrowDiv { margin: 0 0 -1px 4px; } .productDetailPage { display: none; } .productDetailRightPane { float: right; } .productFeatureImage { float: right; clear: right; } .productDetailAds { float: right; clear: right; margin: 3px; } .productDetailHTMLAd { color:#444; width: 170px; height: 50px; text-align: center; border: 1px solid #aaa; background-color: #fff; padding:5px; } .productDetailTallAdd { height: auto; text-align: left; color: #222; background: url("../images/checkoutCartBackground.jpg") repeat-y scroll 0 0 transparent; } .productDetailSubtitle { font-size: 16px; color: #666; width: 250px; } .productDetailLeftPane { float: left; width: 550px; border: none; margin: 20px 0 10px 20px; } .productDetailBuyItNow { float: right; clear: right; margin:0px 0 4px 0; } .productDesignedForLogo { float: right; margin: 0 8px; } .productDesignedForHolder { margin: 20px 0 10px 0; } .productDetailTabSelected { background: url(../images/product_detail_menu_bg.jpg) 0 0 repeat-x; } #productDetailLoader { display: block; text-align: center; padding: 30px; } .fadingSlideshow img { display: none } .fadingSlideshow img.first { display: block } .pdFeaturedAppImage { float: left; clear: left; margin-left: 15px; } .pdFeaturedApp { float: left; clear: left; margin: 20px 0 5px 0; } .pdFeaturedAppTitle { float: left; font-size: 180%; padding: 25px 0 0 25px; color: #444; } .pdFeaturedAppDescription { float: left; clear: left; margin: 20px 0 0 15px; color: #666; } .pdFeaturedAppQuote { float: left; clear: left; margin: 20px 0 10px 15px; font-style: italic; font-family: Georgia,"Times New Roman",Times,serif; } .pdFeaturedAppQuoteMark { position: relative; top: -3px; margin-right: 6px; } .pdFeaturedAppAttribution { float: right; clear: both; min-width: 300px; text-align: right; margin: 0px 0 10px 15px; } .pdFeaturedApp a:hover { text-decoration: none; } .pdFeaturedAppLink { float: left; margin: 15px 15px 0 0; font-size: 100%; cursor: pointer; font-size: 14px; text-align: center; text-decoration: none; border: 1px solid #bbb; padding: 6px 9px; color: #444; -webkit-border-radius: 10px; -moz-border-radius: 10px; background-color: #eee; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.45, #ccc), color-stop(0.85, #fff) ); background-image: -moz-linear-gradient( center bottom, #ccc 45%, #fff 85% ); } .pdFeaturedAppNext { margin-right: 0; } .productGalleryThumbnail { float: left; padding: 15px; border: 0px solid #ccc; background-color: #fff; } .galleryHolder { width: 100%; height: 100%; background-color: #fff; overflow: auto; } .faqs h2 { font-size: 110%; margin: 5px 0 3px 8px; color: #111; cursor: pointer; border-top: 1px solid #eee; padding-bottom: 4px; } .faqFooter { margin: 20px auto 10px auto; font-size: 80%; } .showAllAnswers { float: right; font-size: 90%; padding: 2px;border: 1px solid #aaa; background-color: #f4f4f4; border-top: none; cursor: pointer; } .faqs .productAnswer { display: block; font-size: 90%; color: #555; margin-left: 25px; margin-bottom: 30px; } .faqs ul { list-style-type: none; margin-bottom: 6px;} .faqs li { padding: 0; margin: 2px 0 2px 0; border-bottom: 1px dashed #ccc; } .faqs .faqFocus {border: 1px solid #aaa; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-color: #f4f4f4; margin: 2px 0 2px 0; cursor: pointer; } /* -------------------------------------------------------------------------- stylus page */ #pogoLogo { float: left; } #pogoSubtitle { margin: 10px 0 0 0; float: left; clear: left; width: 400px; } #pogo4up { margin: 20px; float: right; clear: right; } ul.stylusWhenToUse { margin: 0 0 0 10px; padding: 0; list-style-type: disc; } /*#stylus h1 { font-size: 25px; margin: 0; padding: 0; line-height: 120%; } #stylus h2.alt { margin: 0; padding: 5px 0px 5px 12px; }*/ /* -------------------------------------------------------------------------- stylus page in database */ .productImg { float: right; margin: -45px 10px 0 8px; } #edgeShot { margin: 0 0 50px 0;} .productImgCenter { margin: auto auto 20px 100px; } #rail img { margin: 3px;} .productDiv { display: none;} #detailsImg { margin: 0px 5px 0 20px;} #tipImg { margin: 30px auto 20px 80px;} #clipImg { margin: 30px auto 20px 120px;} #clipImg2 { margin: 10px auto auto 100px;} .funky2G { padding-top: 20px; position: relative;} #productFAQ p, #productFAQ li { font-size: 95%; margin-left: 10px;} ul.clipPack { float: left; } .clipPackBuyItNow { float: left; } #cn #main { background-color: #FFF;} /* -------------------------------------------------------------------------- sketch page */ #sketchLogo { float: left; margin: -10px 0 0 0; } #sketchSubtitle { margin: 10px 0 0 0; float: left; clear: left; } .sketchCompatibility {margin: 48px 0 0 0; font-size: 70%; color: #777; line-height: 10px;} #detailSketchIsometric { margin: 20px 8px; float: right; clear: right; width: 180px; } /*#stylus h1 { font-size: 25px; margin: 0; padding: 0; line-height: 120%; } #stylus h2.alt { margin: 0; padding: 5px 0px 5px 12px; }*/ .sketchRenderHorizontal { margin: 20px 20px 0 10px; } #sketchHand { width: 250px; float: right; } #sketch .features li { margin: 6px 20px; padding: 0; list-style-type: disc; } /*ul.sketchFeatures { margin: 0 0 0 10px; padding: 0; list-style-type: disc; } ul.sketchFeatures li { margin: 3px 20px; padding: 0; }*/ .clipPackBuyItNow { float: left; margin-left: 20px; } /* -------------------------------------------------------------------------- autograph page */ #autographLogo { float: left; margin: -10px 0 0 0; } #autographSubtitle { margin: 10px 0 0 0; float: left; clear: left; width: 400px; } .autographCompatibility {margin: 48px 0 0 0; font-size: 70%; color: #777; line-height: 10px;} #detailAutograph { margin: 20px 8px; float: right; width: 180px; } .autographFeatureImage { width: 150px; float:left; clear: left; margin-top:5px; margin-right: 12px; } #snowLeopardDetected { display: none; padding: 5px; font-size: 90%; color: #333; border: 1px solid #aaa; background-color: #eee; } #snowLeopardNotDetected { display: none; font-size: 90%; padding: 5px; color: #333; border: 1px solid #aaa; background-color: #eee; } .autographFeatureDiv { width: 100%; border-bottom:1px dashed #aaa; padding: 14px; margin: 0; position: relative; overflow: auto;/*fixes float bug*/ } .autographFeatureDiv a { color: #777; text-decoration: underline; } .autographFeatureDiv a:hover { color: #555; } .autographFeatureText { width: 350px; float:left; } .autographFeatureTextHeader { font-size: 150%; color: #222; margin: 3px 0 6px 0; } .autographFeatureTextBody { font-size: 110%; color: #777; } /* -------------------------------------------------------------------------- application help */ .appHelp #main { height: 450px; background-color: white; padding-left: 10px; width: 700px;} .appHelpTitle { padding: 30px 0px 10px 35px; color: #444; font-size: 170%; } .appHelp .pressList { float: left; height: 390; width: 250px; } .appContentDiv { width: 100%; background-color: #fff; margin: 20 0; } .appHelp .inkletFeatureText { width: 600px; } .appHelp .autographFeatureImage { width: 100px; } .appHelp .appContentDiv a { color: #777; text-decoration: underline; } .appHelp .appContentDiv a:hover { color: #555; } .appFAQTitle { color: #444; font-weight: bold; } .appHelp .productAnswer { display: none; } /* -------------------------------------------------------------------------- inklet page */ #inkletLogo { float: left; margin: -5px 15px 0 0; } #inkletSubtitle { margin: 0px 0 0 48px; font-size: 140%; float: left; clear: left; width: 400px; color:#000; } .inkletCompatibility {margin: 48px 0 0 0; font-size: 70%; color: #777; line-height: 10px;} #detailInklet { margin: 20px 45px 20px 0; float: right; } .inkletFeatureDiv { width: 100%; border-bottom:1px dashed #aaa; padding: 25px 14px 14px 14px; margin: 0; position: relative; overflow: auto; overflow-x: hidden; } .inkletFeatureImage { float: right; clear: right; margin: 5px; } .inkletFeatureImage img { width: 180px; } #productDetailPageDownload a { text-decoration: underline; } .inkletFeatureText { width: 350px; float:left; margin-bottom: 5px; } .inkletFeatureTextHeader { font-size: 120%; color: #333; margin: 5px 0 10px 0; } .inkletFeatureTextBody { font-size: 100%; color: #777; } #videoDiv { display: none; } .videoPlacementDiv { margin: 20px 0 10px 0; position: relative; } .videoStillDiv { position: absolute; left: 0; top:0; } .videoControlDiv { position: absolute; left: 0; top:0; } /* -------------------------------------------------------------------------- tango page */ /*#tango #content { background: url(../images/home_tango_bg.jpg) 0 0 repeat-x; background-color:#fff; } */ .tangoFeatureImage { text-align: center; margin: 50px auto -25px; auto; } #tangoLogo { float: left; } #tangoSubtitle { margin: 10px 0 0 8px; float: left; clear: left; width: 300px;} #tango .productFeatureImage { margin: 10px 15px 20px 0; } /* -------------------------------------------------------------------------- particle page */ /*#tango #content { background: url(../images/home_tango_bg.jpg) 0 0 repeat-x; background-color:#fff; } */ #particle .productDetailLogo { float: left; margin: 6px 0 0 2px; } #particle .productDetailSubtitle { margin: 3px 0 10px 0px; float: left; clear: left; width: 300px;} #particle .productFeatureImage { margin: 10px 15px 20px 0; width: 150px; } .particleFeatureImage { text-align: center; margin: 40px auto -15px auto; } .particleFeatureImage img { width: 550px; } #particle .inkletFeatureTextHeader { margin: 40px 0 10px 0; } /* -------------------------------------------------------------------------- soundclip page */ #soundclipLogo { float: left; } #soundclipSubtitle { margin: -20px 0 0 0; float: left; clear: left; } #soundclipDesignedFor3G { float: right; margin: 0 10px; } #soundclipFront { margin: 20px 10px 36px 0; float: right; } #soundclip .productImg { float: right; margin: 15px 10px 0 8px; } #soundclipGraphImage { float: right; margin: 15px 10px 0 8px; } #soundclip h1 { font-size: 25px; margin: 10px 0 15px 0; padding: 0; line-height: 120%; } #stylus h2.alt { margin: 0; padding: 5px 0px 5px 12px; } ul.soundclipFeatures { margin: 0 0 0 10px; padding: 0; list-style-type: disc; } ul.soundclipFeatures li { margin: 3px 20px; padding: 0; } /* -------------------------------------------------------------------------- cases page */ #cases #main { margin: 20px; min-height: 400px; } .casesIntro { padding: 0 0 15px 0;} .casesOutro { font-style: italic; width: 755px; font-size: 85%; margin-top: 10px; float: left; clear: left; } .casesSmaller { font-size: 75%; color: #666; font-style: none; } /* .casesTypeDiv {margin: 10px 0; cursor: pointer; border: 1px solid #ccc; padding: 3px; } #leather .casesThumb { width: 100px;} #skin .casesThumb { width: 100px;} #skin li { margin: 10px auto 0 auto;} #skin ul { list-style-type: none; line-height: auto;} #film .casesThumb { width: 100px;} .casesTitle { margin-left: 20px; color: #444; font-size: 150%; text-decoration: none;} .casesContent { display: none; margin: 10px; } #ie6Warning { display: none;}*/ /* -------------------------------------------------------------------------- checkout */ #checkout {background-color: #fff;} .hidden { display: none; } .checkoutSidebarDiv { position: relative; float: left; width: 150px; min-height: 450px; background-color: #fff; border: 1px solid #ccc; border-top: none; } .checkoutSidebarGroupDiv { height: 80px; border-bottom: 1px dashed #ccc;} .checkoutSidebarGroupDiv:hover { cursor: pointer; background: url(../images/checkoutSidebarBackground.jpg) 0 0 repeat-x; } .checkoutSidebarBackground { background: url(../images/checkoutSidebarBackground.jpg) 0 0 repeat-x; } .checkoutSidebarGroupDiv img { margin: 17px 0 0 5px; } #checkoutSidebarShowAll { color: #444; text-align: center; font-size: 11pt; line-height: 80px; } #checkoutSidebarAd { width: 150px; position: absolute; bottom: 0px; display: none; } .checkoutPagesContainer { position: relative; float: left; width: 580px; } .checkoutPageHeader { margin-bottom: 30px; } .checkoutPagesPage { position: relative; float: left; display: none; } .checkoutPageDisplayed { display: block; } .checkoutGroupLogoImage { float: left; margin: 20px 0 10px 20px; } .checkoutGroupProductImage { float: right; margin: 10px 0 0 0; display: none; } .checkoutSubheading { float: left; clear: left; font-size: 140%; margin: 20px 0 10px 20px; width: 60%; } .checkoutRecommended { float: left; clear: left; color: #666; font-size: 80%; padding: 0 0 0 2px; margin: 48px 30px 8px 30px; width: 100%; border-bottom: 1px dashed #ccc; } .checkoutSubheadingLink { float: left; font-size: 80%; margin: 0; margin: 23px 0 10px 10px; } .checkoutItemDiv { float: left; clear: left; margin: 8px 0 8px 30px; width: 100%; color:#666; padding-bottom:4px; border-bottom: 1px dashed #ccc; } .checkoutItemDiv a { color:#666; } .checkoutItemUl { margin: 0; padding: 0; list-style-type: none; } .checkoutItemUl li { float: left; margin: 0 10px 0 0; } /*.checkoutItemImage { width: 102px; }*/ /*.checkoutItemDescription { width: 130px; }*/ /*.checkoutItemStockStatus { width: 70px; }*/ /*.checkoutItemPrice { width: 50px; text-align: right; }*/ .checkoutItemAddButton:hover { cursor: pointer; } .shipWarning { color: #f66; } /* 8/10/11 Mods */ .checkoutItemDiv { color: #888; font-size: 1.155em; } .checkoutItemLeft { float: left; clear: left; width: 102px; } .checkoutItemRight { float: left; width: 400px; margin-left: 15px; } .checkoutItemRightTop, .checkoutItemRightBottom { float: left; clear: left; width: 400px; } .checkoutItemRightBottom { margin-top: 3px; } .checkoutItemDescription { float: left; width: 290px; } .checkoutItemDescription a { color: #222; } .checkoutItemAddButton { float: right; } .checkoutItemPrice { float: left; /*color: #00a23d;*/ } .checkoutItemStockStatus { float: left; margin-left: 8px; } /*.checkoutItemDescription { font-size: 120%; width: 230px; float: left; } .checkoutItemDescription a { color: #444; } li.checkoutItemAddButton { float: right; margin-right: 20px; } .checkoutItemStockStatus { float: left; clear: left; } .checkoutItemPrice { float: left; }*/ .checkoutCartDiv { position: relative; float: right; clear: right; width: 200px; min-height: 450px; background: url(../images/checkoutCartBackground.jpg) 0 0 repeat-y; border: 1px solid #ccc; border-top: none; } .checkoutCartTopDiv { min-height: 340px; position: relative; z-index: 2; } .checkoutCartBottomDiv { position: relative; bottom: 0px; } .checkoutCartTitle { font-size: 150%; float: left; margin: 5px 0 0 10px; } .checkoutCartIcon { float: right; margin: 5px 10px 0 0;} .checkoutCartDivide { float: left; margin: 10px 5px 0; width: 190px; border-top: none; } .checkoutCartNowButton { float: left; clear: left; margin: 5px 10px; background: url(../images/checkoutCartNowButton.png); width: 150px; line-height:26px; color: #fff; text-align: center; font-size: 14px; cursor: pointer; } .checkoutCartCounter { float: left; clear: left; padding: 10px 0 0 10px; font-size: 150%; width: 95%; } .checkoutCartUl { list-style-type: none; margin: 5px; padding: 0; width: 190px; float: left; clear: left; border-top: 1px solid #999; } .checkoutCartUl li { margin: 0; padding: 0; border-bottom: 1px dashed #ccc; } .checkoutCartItemUl { list-style-type: none; font-size: 95%; margin: 0; padding: 0;} .checkoutCartItemUl li { border: none; margin: 0;} .checkoutCartItemQuantity select { width: 50px; } .checkoutCartItemQuantity a { text-decoration: underline; } .checkoutCartItemSubtotal { text-align: right; font-size: 120%; } .checkoutCartShippingDiv { float: left; clear: left; margin: 3px 0 3px 10px; width: 95%; } /*.checkoutCartShippingDiv select { width: 110px; }*/ #checkoutCartShippingSelect { float: left; clear: left; width: 190px;} #checkoutCartSoftwareShippingSelect { float: left; clear: left; width: 190px; display: none; } #checkoutCartShippingDetails { margin-left: 6px; cursor: pointer;} .checkoutCartStack { float: left; clear: left; padding: 3px 10px; width: 100%; } #checkoutCartMessageBox { float: left; clear: left; font-weight: bold; background-color: #ffa; width: 100%; text-align: center; } #couponCodeBox { float: left; margin-left: 10px; font-size: 90%; } #couponInput { display: none;} #couponCodeInput { width: 140px; } #couponApply { width: 60px; } #couponExplanation { width 196px; font-size: 90%; color: green; font-weight: bold; } #couponExplanationBanner { color:#666; height: 20px; padding: 5px; text-align: center; border: 1px solid #ccc; border-top: none; display: none; } .checkoutHideThis { text-decoration:underline; font-size: 70%; cursor: pointer; color: #888; } #shippingFAQs { display: none; } #TB_window dt { margin-left: -4px; color: #222; } #checkoutCartHelpDiv { font-size: 80%; display: none; background-color: #ffa; padding: 2px; float: left; clear: left; width: 196px; } #checkoutCartHelpDiv span { float: right; } #checkoutCartHelpDiv span:hover { cursor: pointer; } /* -------------------------------------------------------------------------- about */ .aboutLogo { margin-bottom: 15px; } #about #appGalleryText { color: #444; font-size: 110%; float: left; width: 450px; padding: 3px 0px 0px 20px;} #about .appGalleryIntro { clear: left; } #about .inkletFeatureDiv { width: 400px; } #about .inkletFeatureTextBody { width: 400px; color: #eee; font-size: 104%; text-shadow:0px 1px 1px #000; } #about .inkletFeatureTextHeader { font-family: 'Open Sans', sans-serif; font-size: 170%; color: #fff; color: #ff9d43; margin-bottom: 16px; text-shadow:1px 1px 0px #000; } #about #main { padding: 18px 0 0 30px; width: 100%; height: 900px; background: url("../images/about_pogo_stick_790.jpg") 0 0 no-repeat; } #about #shippingPolicies { display: none; } #about #generalPolicies { display: none; } /* -------------------------------------------------------------------------- apps */ #apps #container { height: 570px; } #appGallery{ width: 90%; display: block; padding: 30px 20px 0 20px; } #appGalleryDefault{ display: none;} #appGalleryIntroIcon { float: left; } #appGalleryText { color: #444; font-size: 130%; float: left; width: 400px; padding: 15px;} #appGalleryTitle { color: #222; font-size: 170%; margin: 0 0 10px 0;} #appBannerHolder { margin: 0 20px; } .appBanner { float: left; } .appBannerLeft { float: left; background: url(../images/appBannerLeft.png) 0 0 no-repeat; height: 132px; width: 18px;} .appBannerThumb { float: left; padding-top: 6px; background: url(../images/appBannerMiddle.png) 0 0 repeat-x; height: 132px; width: 75px;} .appBannerExpand { float: left; background: url(../images/appBannerMiddle.png) 0 0 repeat-x; height: 132px; width: 0px;} .appBannerRight { float: left; background: url(../images/appBannerRight.png) 0 0 no-repeat; height: 132px; width: 17px;} .appTitle { color: white; font-size: 110%; font-weight: bold; text-align: center;} .appBannerThumb img { margin: 6px 0 0 4px; } .appDescription { color: #ccc; font-size: 110%; padding: 12px 0 0 20px; display: none; margin: auto 0 0 0;} .appDescriptionBold { font-weight: bold;} .appBannerClose { position: absolute; right: 155px; top: 17px; } #appsistylophone .appTitle { font-size: 90%; } #appsabccursive .appTitle { font-size: 85%; line-height: 110%; } #appsistylophoneAd { display: none; float: right; margin: 30px 10px 0 0; } #appsistylophoneAd img { width: 140px; } .appsFeatureImage { width: 100px; } .appsImageDiv {width: 100px; float: left;} .appsFeatureDiv { width: 700px; float: left; padding: 10px auto auto; margin: 20px 0 20px 20px; } #apps #appsFeatureText { color: #444; font-size: 90%; float: left; width: 400px; padding: 3px 0px 0px 20px; } /*#appGalleryIntro .appListingIcon { margin-left: 10px; }*/ #apps #appGalleryText { color: #666; font-size: 100%; } .appCategoryTitle { float: left; clear: left; margin: 10px 6px 6px 6px; font-size: 130%; color: #333; } .appListing { float: left; clear: left; width: 722px; border-bottom: 1px solid #ccc; margin: 2px auto auto 0px; position: relative; } .appListingIcon { float: left; width: 100px; height: 100%; background-color: #fff; } .appListingIcon img { margin: 8px auto 4px auto; display: block; width: 80%; } .appListingDetails { float: left; width: 532px; } .appListingTitle { margin: 6px; font-size: 130%; color: #333; } .appListingDescription { margin: 6px; font-size: 100%; color: #666; } .appListingLink { color: #333;} .appListingLink:visited { color: #333;} #productDetailContainerApps { float: none; clear: none; width: auto; margin: 0 20px; } /* -------------------------------------------------------------------------- press */ #pressMediaContact { width: 500px; float: left; padding: 10px auto auto; margin: 20px 0 20px 20px; } #press #appGalleryText { color: #444; font-size: 110%; float: left; width: 280px; padding: 3px 0px 0px 20px; } .pressList { float: left; width: 220px; background-color: #fff; margin: 0 5px; padding: 0 2px; overflow: auto; } .pressList ul { list-style-type: none; padding: 0; } .pressList li { font-size: 80%; padding: 0; line-height: 10px; border-bottom: 1px solid #bbb; padding-bottom: 4px; } .authorName { color: #888;} #press .tallness { height: 700px; } /* -------------------------------------------------------------------------- oem */ #oem #main { padding: 20px; } #oem #appGalleryText { color: #444; font-size: 110%; float: left; width: 580px; padding: 3px 0px 0px 20px; } /* -------------------------------------------------------------------------- news */ #newsTitle { padding: 10px 3px 30px 3px; color: #222; font-size: 170%; } #news .pressList { float: left; width: 250px; } .newsContentDiv { float: left; width: 350px; background-color: #fff; margin: 0 5px; padding: 0 2px; } .newsContentDiv ul { list-style-type: none; padding: 0; } .newsContentDiv li { font-size: 80%; padding: 0; line-height: 10px; border-bottom:1px solid #bbb; padding-bottom: 4px; } .newsContentDiv img { width: 35px; float: left; clear: left; margin: 0 4px 4px 0; } .newsMenuHeader { font-weight: bold; margin: 0 0 5px 0; font-size: 110%; color: #333; } .newsLineDiv { float: left; clear: left; width: 100%; padding: 3px 0; font-size: 80%; border-bottom: 1px dashed #ccc; } .newsLineButtonHolder { text-align: center; border-bottom: none; } #news .tallness { height: 400px; } #news .shipButton { margin: 6px auto 6px auto; width: 70px; text-align: center; float: none; } /* -------------------------------------------------------------------------- payment */ #payment { background-color: #fff; font-family: Arial, Helvetica, sans-serif; } #paymentPaypalDiv { margin: 20px 0; color: #666; } .paymentPapalImage { float: left; margin: -2px 0 0 5px; } #payment table tr td { padding: 1px; } .paypalSubmit { cursor: pointer; } .paymentTopSection { width: 100%; float: left; clear: left; } .paymentTitleDiv { width: 450px; float: left; padding: 20px 5px; } .paymentTitle { color: #444; font-size: 41px; margin: 0;} .paymentItems { width: 450px; float: right; clear: right; background: url(../images/payment_items_gradient.png) 0 0 repeat-x; background-color: #edeeee; border: 1px solid #aaa; margin: 5px 0 auto auto; padding: 5px; } .paymentBottomSection { width: 100%; float: left; clear: left; padding-bottom: 10px; } .paymentItemName { width: 370px; font-size: 80%; float: left; clear: left; color: #666; } .paymentItemNumber { width: 100px; font-size: 80%; float: left; color: #666; display: none;} .paymentItemQuantity { width: 70px; font-size: 80%; float: right; color: #666; } .paymentHeader { font-size: 14px; margin-bottom: 5px; color: #444; } .paymentTotal { font-size: 14px; border-top: 1px solid black; color: #444; } .paymentEditCart { float: right; clear: right; margin-top: 2px; cursor: pointer; } #paymentData { width: 635px; margin: 20px 0 0 140px; } #paymentCompleteOrder { float: left; clear: left; width: 100%; border-top: 1px solid #999; margin-top: 10px; } #paymentCompleteOrderButton { float: right; clear: right; margin: 10px 0 0 0; cursor: pointer; } #paymentWorkingIndicator { float: right; margin: 10px 20px 0 0; display: none; } #paymentWorkingIndicator img { margin: 0 8px 0 0; } #paymentData1 { width: 285px; float: left; clear: left; margin: 0; } #paymentData2 { width: 320px; float: left; margin-left: 30px; } #paymentData3 { width: 285px; float: right; margin-left: 30px; display: none; } #payment select { width: 190px; font-size: 11px; } #payment select.paymentDate { width: 93px; } #payment input { width: 182px; border: 1px solid #ccc; padding: 3px; } #paymentVerification input { float: left; width: 140px; } #paymentVerification img { float: right; margin: 0px; } td.paymentData1Label { width: 140px; } td.paymentData2Label { width: 140px; } td.paymentData3Label { width: 100px; } #payment td { font-size: 14px; color: #666; } #payment td.paymentDataHeader { font-size: 18px; color: #444; border-bottom: 1px solid #fff; } #payment td.paymentCountry { color: #333; } .paymentSmaller { font-size: 75%; color: #666; } #shippingToggle { border: 1px solid #ccc; padding: 2px 4px; cursor: pointer; background: url(../images/payment_ship_elsewhere.jpg) 0 0 repeat-x; } /* background-color: #ffe38a; #f4ffdd*/ #shippingToggle img { float: right; clear: right; margin: 5px 3px 0 0; } #shippingToggle div { float: left; clear: left; color: #444; } #paymentError { background-color: #fff; font-family: Arial, Helvetica, sans-serif; } #paymentErrorError { color: red; } #paymentError .paymentTitleDiv { width: 850px; float: left; padding: 20px 5px; } #payment #internationalShipping { display: none; } #payment #paypalMessage { display: none; } #payment #paypalMessagePrompt { display: none; } .paymentWarning { color: #d66; } #paymentPaypalLoader { text-align: center; margin: 100px auto 0 auto; } #payment .shipButton { float: left; padding: 3px; border: 1px solid #aaa; background-color: #f4f4f4; cursor: pointer; margin-right: 3px; } .responseMessage { position: relative; background-color: #ffffde; margin: 1em 0 0 0; border: 1px solid #ffcf0f; display: none; width: 100%; } .responseMessageImage { float: left; clear: left; width: 25px; height: 25px; margin: 12px 4px 4px 22px; } .responseMessageText { float: left; padding: 3px; color: #444; margin: 17px 17px 0 17px; font-weight: bold; width: 850px; } .responseMessageHide { position: absolute; bottom: 0; right: 0; margin-right: 2px; color: #888; text-decoration: underline; cursor: pointer; } .responseWarning { color: #f03137 } /* -------------------------------------------------------------------------- thanks */ #thanks #main { margin: 20px 20px 20px 40px; } #thanks { background-color: #fff; fontshoplocal-family: Arial, Helvetica, sans-serif; color: #666; } .thanksTitle { color: #444; font-size: 35px; margin: 0; line-height: 65px;} .thanksSignature { color: #666; font-size: 16px; line-height: 30px;} /* -------------------------------------------------------------------------- shoplocal */ #shoplocal #content { color: #666; font-size: 16px; line-height: 30px; } #shoplocalHeader { padding: 20px 20px 10px 20px; } #shoplocalTitle { color: #444; font-size: 35px; margin: 0; line-height: 65px;} #shoplocalBody { padding: 20px; } #shoplocalBody a { color: #666; } div.shoplocalSectionDiv { margin-bottom: 8px; overflow: auto; } /*fixes float bug*/ .shoplocalSectionTitle { color: #444; } div.shoplocalListDiv { float: left; width: 300px; margin-bottom: 5px; } /* -------------------------------------------------------------------------- sidebar */ #sidebar { /*background-color: #e9eae0;*/ color: #333; background: url("../images/checkoutCartBackground.jpg") repeat-y scroll 0 0 transparent; } #sidebar { border: 1px solid #ccc; border-top: none; display: block; } /*#sidebar { background: none; border-right: 0px solid #ccc; color: #ccc; } #sidebar a:link, a:visited, a:active { color: #ccc; } #sidebar .submenuHeader { color: #fff; } body { background: url(/images/background_black_gradient_h.jpg) 0 0 repeat-y; background-color: #656668; }*/ .sidebarMenu { list-style-type: none; padding: 0 0 0 5px;} .sidebarMenu li { border-bottom:1px dotted #bbb; font-size:12px; line-height:15px; padding:9px 0 5px 0; margin: 0 5px 0 0; } .sidebarSubmenu { list-style-type: none; padding: 0; } .sidebarSubmenu li { border-bottom: none; line-height: default; padding: 0 0 0 0px; margin: 3px 0; } .sidebarSubmenu a { color: #555; } .submenuHeader { font-weight: bold; margin: 0 0 3px 0; } .sidebarIcon { margin-bottom: -6px; } #sidebarNews { width: 100%; height: 110px; overflow: hidden; } #sidebarNews li { font-size: 75%; padding: 0; line-height: 10px; } .onlyProducts { display: none; } #products .onlyProducts { display: block; } .onlyDetails { display: none; } .sidebarApplications { display: none; } #stylus .onlyDetails { display: block; } #sketch .onlyDetails { display: block; } #soundclip .onlyDetails { display: block; } #autograph .onlyDetails { display: block; } #autographmobile .onlyDetails { display: block; } #particle .onlyDetails { display: block; } #fling .onlyDetails { display: block; } #inklet .onlyDetails { display: block; } #tango .onlyDetails { display: block; } #flingmini .onlyDetails { display: block; } #sketchpro .onlyDetails { display: block; } #select .onlyDetails { display: block; } #select .sidebarApplications { display: none; } .sidebarNew { margin-left: 2px; margin-top: -4px; } /* -------------------------------------------------------------------------- footer */ #footerWhitespace { height: 40px; } #footerStripe { background: url(../images/footer_bg.jpg) 0 0 repeat-x; height: 22px; } #footerStripeBlack { background: url(../images/footer_bg_1.png) 0 0 repeat-x; background-color: #474747; } #footerBackgroundImage { opacity: 1; background: url(../images/footer_logo.png) 0 0 no-repeat; background-position: 45% -150px; width: 100%; min-height: 100px; overflow: auto; } .copyrightText { color: #808080; font-size: 80%; margin-top: 0px; float: right;} .copyrightTextBlack { color: #888; font-size: 80%; margin: 25px 0 0 15px; float: left; } #footerCentered { margin: 50px auto; width: 950px; border: 0px solid #555; color: #b0b0b0; overflow: auto; } /*#footerCentered .sidebarSubmenu li { margin: 0; }*/ #footerCentered .sidebarSubmenu a { color: #ccc; } .footerLeft { width: 305px; float: left; } .footerMiddle { width: 330px; border-left: 1px solid #666; border-right: 1px solid #666; float: left; } .footerRight { width: 305px; float: left; } .footerCell { border-bottom: 1px solid #666; padding: 15px; overflow: auto; } .footerTitle { color: #ddd; /*line-height: 40px;*/ margin-bottom: 20px; font-size: 120%; } .footerBlueLink { color: #5D90BF; } /* -------------------------------------------------------------------------- utility */ a img, a.imglink:link, a.imglink:visited { border: none; } a.imglink:hover { background: transparent; } p { margin: 0 0 15px 0; } a img { border: 0; } ol { margin: 0 0 0 20px; padding: 0 0 0 20px; position: relative; } li { margin: 10px 0; } ul { list-style-type: none; margin: 0; padding: 0 0 0 15px; } .left { float: left; } .right { float: right; } .clear { clear: both; } .icon { vertical-align: middle; margin: -3px 2px 0 2px; } /*.hover*/ /* -------------------------------------------------------------------------------- form elements */ table, tr, th, td { border-collapse: collapse; padding: 0px; } label { font-size: 90%; text-transform: uppercase; display: block; margin: 20px 3px 0 0; } select { width: 300px; font-size: 95%; border: 1px solid #ccc; padding: 3px; } option { border-top: 1px dotted #ccc; } textarea { width: 400px; border: 1px solid #ccc; padding: 3px; } /*input:focus, textarea:focus, select:focus { font-weight: bold; }*/ textarea { width: 400px; height: 200px; font: normal 12px "Lucida Grande", Verdana, sans-serif; } .ddfmerrors { color: #930; font-size: 130%; } .errorlist { color: #930; font-weight: bold; } .submit { width: 100%; background: url(../images/bg_submit.jpg) 0 0 repeat-x; color: #000; font-size: 120%; border: none; padding: 8px 0; } .submit:hover { cursor: pointer; border: none; color: #555; }