* { text-rendering: optimizeLegibility; } sup { vertical-align: super; font-size: smaller; } #lower-area h3 { color: #333; font-size: 145%; } /* ---------------- Changes for minisites --------------- */ #main h2, #main h3, #main h4, #main h5, #main h6 { font-family: "Lucida Grande", Helvetica, Arial, sans-serif !important; } #overview #main, #overview .main-wrapper { background: none !important; border: 0; padding: 0; } .button-red { display: inline; } #overview #feature-area h2 { margin-left: 530px; margin-bottom: 2px; padding-top: 110px; color: #000; font-size: 300%; } #overview #feature-area h3 { margin-left: 530px; color: #666666; font-size: 190%; } #mac #feature-area h2 { margin-left: 605px; margin-bottom: 15px; padding-top: 120px; color: #000; font-size: 300%; } #mac #feature-area h3 { margin-left: 605px; color: #666666; font-size: 190%; line-height: 130%; } #mac #feature-area ul#feature-nav { margin-top: 196px !important; } #overview #trailing-features .callout { width: 448px !important; } #overview #trailing-features .callout.second { float: right !important; } /* ---------------- /End Changes for minisites --------- */ /* default buy now subnav hiding */ #subnav-free-trial { } #subnav-buynow { } #subnav-buynow-iphone { display: none; } #subnav-buynow-ipad { display: none; } #sub-header h2 { margin-top: 30px !important; } .button-red { border: 1px solid #810000; padding: 4px 18px !important; background: #810000 url(/global_images/bento4/bg_button_red2.png) repeat-x 0 0; } .button-red { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } /* Fancyzoom */ #zoom_table { position: relative; z-index: 200; } #zoom_close { z-index: 300; } #zoom_content h3 { margin-bottom: 10px; font-size: 140% !important; } /* #zoom_content h3 a { float: right; font-size: 75%; margin-top: 5px; } */ /* Side Navigation */ #right-col .sidenav-links { margin-top: 10px; } #right-col .sidenav-links ul { background: url(/global_images/bento4/sidenav_bg.png) repeat-x 0 100%; border: 1px solid #bfbfbf; } #right-col .sidenav-links ul { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #right-col .sidenav-links ul li { padding: 10px 0 7px 20px; border-top: 1px solid #fff; border-bottom: 1px solid #d8d8d8; } #right-col .sidenav-links ul li.first { border-top: 2px solid #fff; border-top-right-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; } #right-col .sidenav-links ul li.last { border-bottom: none; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; } #right-col .sidenav-links ul li a { display: block; background: url(/global_images/bento4/arrow_gray.png) no-repeat 95% 3px; color: #8b8b8b; } #right-col .sidenav-links ul li a:hover { text-decoration: none; color: #000; background-image: url(/global_images/bento4/arrow_black.png); } #right-col li.selected a { font-weight: bold; color: #000 !important;} /* Bottom Callout */ #overview .ofthree { width: 32%; float: left; margin-right: 30px; } #overview .lastcolumn { width: 29%; margin-right: 0; } #overview .colonnade p { color: #444; } #overview #callout-bottom { position: relative; margin: 10px 0; padding-top: 10px; background: url(/global_images/bento4/bg_bottom_callout_top.png) no-repeat 0 0; } #overview .callout-bottom-wrapper { height: 180px; padding: 0 20px 20px 20px; background: url(/global_images/bento4/bg_bottom_callout_bottom.png) no-repeat 0 100%; } #overview #callout-bottom h3 { font-size: 120%; margin: 15px 0; color: #333; line-height: 130%; } #overview #callout-bottom img { position: absolute; bottom: 25px; } #overview #callout-bottom a { color: #333; text-decoration: none; } #overview #callout-bottom .firstcolumn h3, #overview #callout-bottom .firstcolumn p, #overview #callout-bottom .firstcolumn img { margin-left: 25px; } /* MEET BENTO */ /*-------------------------*/ #overview p, #overview ul li { color: #666;} #overview #feature-area { background: url(/global_images/bento4/feature_meet_bento.jpg) no-repeat; width: 1000px; height: 440px; margin-bottom: 10px; padding: 0; } /* #overview #feature-area h2 { margin-left: 530px; margin-bottom: 15px; text-indent: -5000px; width: 395px; height: 260px; background: url(/global_images/bento4/headline_meet_bento.png) no-repeat 0 120px; } */ #overview #feature-area p { margin-left: 530px; font-size: 150%; } #overview #feature-area p a.more { color: #990000; font-weight: bold; background: url(/global_images/bento4/arrow_red_right_lg.png) no-repeat 100% 8px; padding-right: 10px; } #overview .ofthree h3 { font-weight: bold; font-size: 140% !important; margin-bottom: 5px !important; } #overview .ofthree h3 a { color: #000 !important; text-decoration: none !important; } #overview .ofthree p { white-space: pre-line; line-height: 160%; } #overview .ofthree p.more { padding-top: 0 !important; line-height: normal !important; } #overview .ofthree a { color: #0082C3 !important; } #overview .ofthree a:hover { color: #06F; text-decoration: underline; } #bento-mac { height: 200px; background: url(/global_images/bento4/img_bento_macbook.png) no-repeat 7px 12px; } #overview .firstcolumn h3, #overview .firstcolumn p { margin-left: 10px !important; z-index: 100; } #overview .firstcolumn img { top: 25px; margin-left: 10px !important; z-index: 1; position: absolute; } #overview .middlecolumn img { top: 25px !important; margin-left: 200px !important; } #overview .lastcolumn img { top: 18px !important; margin-left: 165px !important; } #overview .callout { float: left; width: 450px; height: 130px; margin-top: 0 !important; } #overview .callout h3 { font-size: 16px; margin-top: 10px; margin-bottom: 15px; margin-left: 120px; font-weight: bold; } #overview .callout h3 a { color: #333; text-decoration: none; } #overview .callout p { font-size: 12px; margin-bottom: 20px; margin-left: 120px; line-height: 20px; } #overview .callout img.flushleft { float: left; margin-left: -20px; } #overview .callout img.left { float: left; margin-top: 3px; margin-left: 20px; } #overview .callout.first { margin-right: 15px; } #trailing-features .first h3 { margin-top: 10px !important; margin-bottom: 6px !important; } #trailing-features p { margin-bottom: 10px !important; } #overview .callout.second h3 { margin-left: 250px; margin-bottom: 5px !important; } #overview .callout.second ul { margin-left: 250px; margin-bottom: 15px; line-height: 20px; } #overview .callout.second p { margin-left: 250px; margin-top: -5px; } #overview .callout.second .price { color: #000 !important; } /* BENTO FOR MAC */ /*-------------------------*/ #mac #feature-area { background: url(/global_images/bento4/feature_bento_mac.png) no-repeat; width: 1000px; height: 545px; margin-bottom: 10px; padding: 0; } /* #mac #feature-area h2 { margin-left: 605px; height: 220px; text-indent: -5000px; background: url(/global_images/bento4/headline_bento_mac.png) no-repeat 0 120px; } */ #mac #feature-area p { margin-left: 605px; margin-top: 10px; font-size: 18px; font-weight: bold; } #mac #feature-area a.more { color: #900; background: url(/global_images/bento4/arrow_red_right_lg.png) no-repeat 100% 7px; padding-right: 10px; } #mac #feature-area ul#feature-nav { margin-top: 186px; border-top: 1px solid #e3e3e3; width: 1000px; } #mac #feature-area ul#feature-nav li { text-align: center; float: left; } #mac #feature-area ul#feature-nav li a { display: block; float: left; border-right: 1px solid #e3e3e3; height: 110px; width: 162px; } #mac #feature-area ul#feature-nav li a:hover { background: url(/global_images/bento4/bg_featurenav.png) repeat-x 0 18px; text-decoration: none !important; } #mac #feature-area ul#feature-nav li.first a { padding-left: 5px; } #mac #feature-area ul#feature-nav li.first a:hover { border-bottom-left-radius: 6px; -moz-border-radius-bottomleft: 6px; } #mac #feature-area ul#feature-nav li.last a { border-right: none; width: 173px; } #mac #feature-area ul#feature-nav li.last a:hover { height: 110px; border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; } #mac #feature-area ul#feature-nav li img { margin-top: 10px; padding-bottom: 10px; } #mac #lower-area { margin: 0; width: 680px; } #mac #lower-area #intro { width: 680px; padding-bottom: 30px; border-bottom: 1px solid #CFCFCF; } #mac #lower-area #intro p { width: 430px; } #mac #lower-area #columns { margin-top: 30px; } #mac #lower-area #columns h3 { margin-bottom: 2px !important; font-size: 125%; } #mac #lower-area #columns p { color: #666666; } #mac #columns p.more { line-height: 10px !important; } #mac #columns img.right { margin: 0 0 5px 20px !important; } #mac #lower-area h3 { margin-bottom: 4px; } #mac #columns .firstcolumn { width: 45%; padding-right: 40px; } #mac .firstcolumn div { padding-bottom: 20px; } #mac #columns .lastcolumn { width: 44% !important; } #mac .lastcolumn div { padding-bottom: 20px; } #mac .lastcolumn #sharing-made-simple { padding-bottom: 50px !important; } /* Quotes */ #right-col .callout { color: #652b30; font-style: italic; } #right-col .callout p { margin-left: 10px; } #right-col .callout p img.left-quote { vertical-align: super; margin-left: -20px; padding-right: 5px; } #right-col .callout p img.right-quote { vertical-align: sub; margin-right: -20px; padding-left: 5px; } #right-col .callout p.customer { font-weight: bold; font-style: normal; text-align: right; } /* USING BENTO */ /*-------------------------*/ #uses #feature-area { position: relative; background: url(/global_images/bento4/feature_using_bento.jpg) no-repeat 50% 45px; padding: 0; } #uses #feature-area h2 { text-indent: -5000px; background: url(/global_images/bento4/headline_using_bento.png) no-repeat 50% 0; height: 33px; margin: 20px 0 0 0;} #uses #feature-area h3 { text-indent: -5000px; background: url(/global_images/bento4/heading2_bento_uses.png) no-repeat 45% 0; height: 43px; margin-top: 305px; } #uses #feature-area p { position: absolute; bottom: 3px; right: 145px; } #uses #lower-area { padding: 0; width: 100%; } #uses #lower-area h3 { color: #8f8f8f; margin: 40px 0 40px 260px; } #uses #lower-area p#btx { float: right; margin: -70px 130px 0 0; font-size: 13px; } #uses #lower-area p.centered { text-align: center; } /* Feature Callout */ #uses #callout-feature { padding-top: 30px; width: 940px; margin: 20px 0 0 0; border: 1px solid #bcbcbc; background: url(/products/bento/uses/images/callout_bg.png) 0 30px repeat-x; } #uses #callout-feature { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding: 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 1px 1px; -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); } #uses #callout-feature .ofthree { width: 310px; padding: 0 !important; margin: 0 !important; float: left; } #uses #callout-feature h4 { margin: 0 20px 3px 20px !important; font: bold 120% "Lucida Grande", Helvetica, Arial, sans-serif; } #uses #callout-feature h4 a { color: #333; text-decoration: none; } #uses #callout-feature p { font-size: 95%; color: #666666; margin: 0 20px 3px 20px; width: 280px; } #uses #callout-feature p.centered { margin-top: 20px; height: 120px; } #uses #callout-feature .firstcolumn { border-right: 1px solid #ddd; min-height: 240px; } #uses #callout-feature .middlecolumn { border-right: 1px solid #ddd; min-height: 240px; } /* BENTO AND APPLEWORKS */ /*-------------------------*/ #appleworks #feature-area { background: url(/global_images/bento4/feature_bg.png) no-repeat; width: 1000px; height: 375px; margin-bottom: 10px; padding: 0 0 0 0; } #appleworks #lower-area { margin-top: 0; width: 700px !important; } #appleworks #lower-area h2 { font-size: 190%; margin-top: 15px; } #appleworks #lower-area p#intro { font-size: 16px; padding-bottom: 20px; border-bottom: 1px solid #cfcfcf; } #appleworks #lower-area h3 { padding-top: 15px; } #appleworks #lower-area ul { padding-bottom: 10px; } #appleworks #lower-area ul li { line-height: 20px; padding-bottom: 5px; } #appleworks #lower-area .popupnav { background: url (/global_images/bento4/popupnav_bgbottom20070807.gif) !important; margin: 0 0 1.6em 20px; padding: 0 0 8px; } #appleworks #lower-area .popupnav h2 { margin: 0 !important; padding: 5px 10px !important; font-size: 14px; } #appleworks #lower-area .popupnav ul { margin: 5px 0 0 0 !important; } /* USING WITH SPREADSHEETS */ /*-------------------------*/ #spreadsheets #feature-area { height: 472px; margin-bottom: 20px; background: url(/global_images/bento4/feature_spreadsheets.jpg) no-repeat 0 0; } #spreadsheets #feature-area h2 { height: 67px; text-indent: -5000px; background: url(/global_images/bento4/heading1_spreadsheets.png) no-repeat 50% 30px; } #spreadsheets #feature-area h3 a { display: block; height: 21px; text-indent: -5000px; margin-top: 5px; background: url(/global_images/bento4/heading2_spreadsheets.png) no-repeat 50% 0; } #spreadsheets .quicklook { float: right; margin-top: -90px; margin-right: 5px; } #spreadsheets .tableview { float:right; margin-top: -20px; margin-right: 5px; } #spreadsheets .watchvideo { margin: 0 !important; display: inline; } #spreadsheets #lower-area { margin-top: -280px; width: 700px !important; } #spreadsheets #lower-area h3 { padding-top: 15px; } #spreadsheets #lower-area ul { padding-bottom: 10px; } #spreadsheets #lower-area ul li { line-height: 20px; padding-bottom: 10px; } /* SIDEBAR */ /*-------------------------*/ #right-col { position: relative; z-index: 100; } .sidebar-links-11 li { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .sidebar-links-11 li { border: 1px solid #b4b4b4; margin-bottom: 5px; background: url(/global_images/bento4/bg_sidebar_nav.png) repeat-x 0 0; } .sidebar-links-11 li:hover { background: url(/global_images/bento4/bg_sidebar_nav.png) repeat-x 0 -10px; } .sidebar-links-11 li a { color: #7f0104; padding: 8px 20px; display: block; background: url(/global_images/bento4/arrow_red.png) no-repeat 95% 13px; } #right-col blockquote { margin: 10px 0; border-bottom: 1px solid #ccc; background: url(/global_images/bento4/icon_quotes_start.png) no-repeat 0 0; } #right-col blockquote.first { margin-top: 30px; } #right-col blockquote.last { border: 0; } #right-col blockquote p { color: #510b13; padding: 6px 25px; background: url(/global_images/bento4/icon_quotes_end.png) no-repeat 97% 100%; } #right-col blockquote p.author { margin-left: 20px; font-weight: bold; background: none; } /* OVERLAYS */ /*-------------------------*/ .callout-overlay { width: 320px; padding: 5px 10px; border: 1px solid #E8E8E8; border-top: 1px solid #E8E8E8; border-bottom: 1px solid #A1A1A1; } .callout-overlay .overlay-img { display: block; } .callout-overlay img { float: left; } .callout-overlay h4, .callout-overlay p { margin-left: 145px; } .callout-overlay h4 { margin-top: 16px; margin-bottom: 5px !important; font-size: 110% !important; } .callout-overlay h4 a:link { color: #333; text-decoration: none; } .callout-overlay h4 a:visited { color: #333; } .callout-overlay h4 a:hover { color: #06f; } .callout-overlay h4 a:active { color: #333; } #overlay-bento-iphone-template { margin-left: 330px; } /* TERTIARY PAGES */ /*-------------------------*/ body.tertiary #lower-area { width: 700px; float: left; margin-top: 0 !important; padding: 0; }