/* General */ #midCol p, #midCol li, #rightCol p, #rightCol li { font-size: 1.1em !important; color: #616161; line-height: 130%;} #main { padding-top: 10px !important; } .buttons { clear: both; padding: 0 20px; } div#featureArea h2#bento { margin-left: 20px; width: 100px; height: 40px; float: left; text-indent: -2000px; background: url(/images/bento/logo_bento2.png) no-repeat 3px 15px; } #midCol p.intro { font-size: 125% !important; color: #444; margin: 0 0 25px 0 !important; } img { behavior: url(/javascript/iepngfix.htc); } div.clear { clear: both; } img.before { float: left; padding: 10px 10px 0 0; } img.after { float: right; padding: 10px 0 0 10px; } img.insert { padding: 10px 0 15px 0; } ul#nav-bottom { clear: both; margin: 20px 0 0 0 !important; padding: 10px 0 0 0; } ul#nav-bottom li { list-style: none; width: 49%; } ul#nav-bottom li.first { float: left; } ul#nav-bottom li.last { float: right; } ul#nav-bottom li.first a { background: url(/images/bento/bullet_arrow_back.png) no-repeat 0 2px; padding: 2px 0 2px 18px; } ul#nav-bottom li.last a { float: right; margin-top: -2px; background: url(/images/bento/bullet_arrow_forward.png) no-repeat 100% 2px; padding: 2px 18px 2px 0; } ul.features li { margin-bottom: 10px; } div.colonnade { } div.ofthree { width: 32%; float: left; margin-right: 20px; } div.lastcolumn { width: 29%; margin-right: 0; } div.colonnade p { color: #444; } .callout { padding-top: 10px; background: url(/images/bento/bg_body_callout_top.png) no-repeat 0 0; } .callout div { font-size: 110%; padding: 5px 20px 15px 20px; background: url(/images/bento/bg_body_callout_bottom.png) no-repeat 0 100%; } h2 { font: bold 120% "Lucida Grande", Helvetica, Arial, sans-serif !important; color: #333 !important; letter-spacing: normal !important; } #lowerArea { background: url(/images/bento/bg_lower_area_top.png) no-repeat 0 0; } .lowerAreaContainer { padding: 20px 0 20px 20px !important; background: url(/images/bento/bg_lower_area_bottom.png) no-repeat 0 100%; } #midCol { width: 724px !important; padding-right: 20px !important; border-right: 1px solid #ccc; } #rightCol { width: 200px !important; } /* Related Nav */ #related-nav { float: right; } #related-nav li { float: left; list-style: none; padding: 10px 15px; } #related-nav li a { font-size: 13px; color: #888; text-decoration: none; } #related-nav li.first { padding-left: 0; } #related-nav li.last { padding: 0 8px 0 15px; } li#nav-buynow, li#nav-buynow-onwhite, li#nav-buynow-iphone { padding-top: 4px !important; margin: 0 20px 0 0; display: block; width: 70px; height: 30px; } li#nav-buynow-onwhite { display: none; margin: 4px 20px 0 0; width: 70px; height: 30px; } #related-nav #nav-buynow-iphone { display: none; } /* Sidebar */ #sideNav { margin: 0 !important; width: 199px; } #sideNav li { list-style: none; } #sideNav li span { display: block; padding: 0 10px; } #sideNav li a { display: block; padding: 10px 0 10px 10px; padding-right: 10px !important; text-decoration: none; border-bottom: 1px solid #ccc; background: url(/images/bento/sidebar_bullet_arrow_up.png) no-repeat 95% 12px; } #sideNav li a:link { color: #616161; } #sideNav li a:visited { color: #616161; } #sideNav li a:hover { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_over.png); } #sideNav li a:active { color: #000; } .sub-nav { display: none; } .sub-nav ul { margin-left: 0 !important; background: #efefef; padding-bottom: 10px; } .sub-nav ul span { padding-left: 30px !important; } .sub-nav li a { color: #616161 !important; border-bottom: 0 !important; font-size: 90%; padding: 5px 25px 5px 0 !important; background: url(/images/bento/sidebar_sub_bullet_arrow.png) no-repeat 144px 9px !important; } #rightCol .promo { padding: 10px 20px; } #rightCol .promo h3 { font-size: 110%; } /* Set menu states, feature graphics for every page */ /* Related Nav selected */ body#overview #nav-overview, body#together #nav-overview, body#excel-numbers #nav-overview, body#style #nav-overview { color: #000 !important; } body#features #nav-features, body#mail #nav-features, body#sharing #nav-features, body#views #nav-features { color: #000 !important; } body#tech-specs #nav-tech-specs { color: #000 !important; } body#uses #nav-uses, body#stories-home #nav-uses, body#stories #nav-uses { color: #000 !important; } body#tours-profiles #nav-demos, body#tours-tutorials #nav-demos, body#tours-tours #nav-demos { color: #000 !important; } /* Feature Graphics selected */ body#overview #featureArea { background: url(/images/bento/feature_bento_overview.jpg) no-repeat 0 0; } body#features #featureArea { background: url(/images/bento/feature_bento_whats_new.jpg) no-repeat 0 0; } body#together #featureArea { background: url(/images/bento/feature_bento_together.jpg) no-repeat 0 0; } body#style #featureArea { background: url(/images/bento/feature_bento_substance_b2.jpg) no-repeat 0 0; } body#excel-numbers #featureArea { background: url(/images/bento/feature_bento_excel_numbers.jpg) no-repeat 0 0; } body#mail #featureArea { background: url(/images/bento/feature_bento_mail.jpg) no-repeat 0 0; } body#sharing #featureArea { background: url(/images/bento/feature_bento_sharing.jpg) no-repeat 0 0; } body#views #featureArea { background: url(/images/bento/feature_bento_new_views.jpg) no-repeat 0 0; } body#iphone #featureArea, body#iphone-soon #featureArea { background: url(/images/bento/feature_bento_for_iphone2.jpg) no-repeat 0 0; height: 600px; } /* Sidebar selected */ #sideNav li.selected { background: #efefef; margin-top: -1px; } #sideNav ul li ul li.selected { background: #d4d4d4; margin-top: -1px; } #sideNav li.selected a { font-weight: bold; color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } #sideNav .sub-nav.selected { background: #efefef; } #sideNav .sub-nav li { display: block; } #sideNav .sub-nav li.selected span { background: #d4d4d4; margin-top: -1px; } #sideNav .sub-nav li a { font-weight: normal; } #sideNav .sub-nav li.selected a { font-weight: normal; color: #000 !important; background-image: url(/images/bento/sidebar_sub_bullet_arrow_active.png) !important; } /* Sidebar Nav #sidenav-watch-bring, #sidenav-watch-see, #sidenav-watch-substance { display: none; } body#together #sidenav-together span { background: #d4d4d4; margin-top: -1px; } body#together #sidenav-together a { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } body#excel-numbers #sidenav-excel span { background: #d4d4d4; margin-top: -1px; } body#excel-numbers #sidenav-excel a { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } body#style #sidenav-style span { background: #d4d4d4; margin-top: -1px; } body#style #sidenav-style a { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } body#mail #sidenav-mail span { background: #d4d4d4; margin-top: -1px; } body#mail #sidenav-mail a { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } body#sharing #sidenav-sharing span { background: #d4d4d4; margin-top: -1px; } body#sharing #sidenav-sharing a { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } body#views #sidenav-views span { background: #d4d4d4; margin-top: -1px; } body#views #sidenav-views a { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } body#top-ten #sidenav-organize span { background: #d4d4d4; margin-top: -1px; } body#top-ten #sidenav-organize a { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } body#tech-specs #sidenav-tech-specs span { background: #d4d4d4; margin-top: -1px; } body#tech-specs #sidenav-tech-specs a { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } body#tours-tours #sidenav-tours span { background: #d4d4d4; margin-top: -1px; } body#tours-tours #sidenav-tours a { color: #000; background-image: url(/images/bento/sidebar_bullet_arrow_active.png); } */ /* Bottom Callout */ div#callout-bottom { position: relative; clear: both; height: 214px; padding: 0 15px; background: url(/images/bento/bg_callout_bottom.jpg) no-repeat 0 20px; } div#callout-bottom h3 { margin: 25px 0 10px 0; color: #333; font-weight: normal; } div#callout-bottom img { position: absolute; bottom: 3px; } div#callout-bottom h3 { margin-bottom: 0; } div#callout-bottom p { font-size: 110% !important; } div#callout-bottom .firstcolumn h3, div#callout-bottom .firstcolumn p, div#callout-bottom .firstcolumn img { margin-left: 25px; } #callout-bottom .lastcolumn { background: url(/images/bento/callout_bot_bento2.png) no-repeat 100% 65px; } a#button-buy-now { display: block; width: 85px; height: 22px; text-indent: -3000px; background: url(/images/bento/button_buy_now_gray.png) no-repeat 0 0; } /* SPLASH pages ///////////////////////////*/ /* Overview Page */ body#overview #lowerArea { padding: 0 !important; background: none; } body#overview #midCol { width: 940px !important; border: 0 !important; } body#overview #rightCol { display: none; } body#overview #featureArea { height: 500px; } div#featureArea h3#everything { clear: both; background: url(/images/bento/heading_feature_everything.png) no-repeat 50% 0; text-indent: -3000px; height: 52px; margin-top: -30px; } div#featureArea h4#cool { clear: both; background: url(/images/bento/subheading_feature_cool.png) no-repeat 50% 0; text-indent: -3000px; height: 30px; margin-top: -15px; } body#overview .intro { padding: 10px 22px; } body#overview #midCol h2 { padding-top: 120px; } body#overview #midCol h2 a { padding-top: 120px; color: #616161; text-decoration: none; } body#overview #middle-content-container { width: 964px; margin-top: 20px; background: url(/images/bento/bg_middle_content_bottom.png) no-repeat 0 100%; } body#overview #middle-content { background: url(/images/bento/bg_middle_content_top.jpg) no-repeat 0 0; } body#overview #middle-content.colonnade { padding: 0 0 0 20px; } body#overview #middle-content .ofthree { width: 30%; padding-bottom: 20px; position: relative; height: 270px; } body#overview #middle-content p.learn-link { position: absolute; bottom: 20px; } p.learn-link a { margin-right: 10px; } body#overview #middle-content .lastcolumn { } /* What's New Page */ body#features #lowerArea { padding: 0 !important; background: none; } body#features #midCol { width: 940px !important; border: 0 !important; } body#features #rightCol { display: none; } body#features #featureArea { height: 500px; } div#featureArea h3#together { clear: both; background: url(/images/bento/heading_feature_bento2.png) no-repeat 50% 0; text-indent: -3000px; height: 51px; margin-top: -30px;} div#featureArea h4#moreFeatures { clear: both; background: url(/images/bento/subheading_feature_features.png) no-repeat 50% 0; text-indent: -3000px; height: 51px; margin-top: -18px; } body#features .intro { padding: 10px 22px; } body#features #midCol h2 { padding-top: 130px; } body#features #midCol h2 a { padding-top: 130px; color: #616161; text-decoration: none; } body#features #middle-content-container { width: 964px; margin-top: 20px; background: url(/images/bento/bg_middle_content_bottom.png) no-repeat 0 100%; } body#features #middle-content { background: url(/images/bento/bg_middle_content_top_features.jpg) no-repeat 0 0; } body#features #middle-content.colonnade { padding: 0 0 0 20px; } body#features #middle-content .ofthree { width: 30%; padding-bottom: 20px; position: relative; height: 290px; } body#features #middle-content p.learn-link { position: absolute; bottom: 50px; } body#features #middle-content .lastcolumn { } /* Uses Page */ body#uses #lowerArea { padding: 0 !important; background: none; } body#uses #midCol { width: 940px !important; border: 0 !important; padding: 0; } body#uses #rightCol { display: none; } body#uses #featureArea { height: 500px; background: url(/images/bento/feature_bento_uses3.jpg) no-repeat 0 0; } body#uses #featureArea p { margin-top: 250px !important; } body#uses #midCol h3 { color: #333; font-size: 125%; font-weight: bold; } body#uses .colonnade { width: 965px;} body#uses #midCol .ofthree { margin-right: 5px !important; width: 316px; margin: 0; background: url(/images/bento/bg_bento_uses_column_bottom.png) no-repeat bottom left; } body#uses #midCol .lastcolumn { margin-right: 0 !important; } body#uses #midCol .ofthree div { height: 250px; width: 296px; padding: 0 10px; background: url(/images/bento/bg_bento_uses_column_top.png) no-repeat 0 0; } body#uses #midCol .ofthree img { margin-top: 20px; } body#uses #midCol .firstcolumn img { margin-left: 40px !important; } body#uses #midCol .middlecolumn img { margin-left: 55px; } body#uses #midCol .lastcolumn img { margin-left: 75px; } /* Feature Area Headings */ #featureArea { height: 500px; } #featureArea .buttons { margin-top: 335px; } #featureArea .buttons #try-now { padding-right: 5px; } /* All Together Now */ body#together #related-nav { margin-bottom: 30px; } body#together #featureArea h3 { clear: both; background: url(/images/bento/heading_feature_together.png) no-repeat 50% ; text-indent: -4000px; height: 40px; } /* Bento Works with Excel, Numbers */ body#excel-numbers #related-nav { margin-bottom: 30px; } body#excel-numbers #featureArea h3 { clear: both; background: url(/images/bento/heading_feature_excel_numbers_b2.png) no-repeat 50% 0; text-indent: -4000px; height: 40px; } /* Getting Organized with Style */ body#style #related-nav { margin-bottom: 30px; } body#style #featureArea h3 { clear: both; background: url(/images/bento/heading_feature_style.png) no-repeat 50% 0; text-indent: -4000px; height: 40px; } /* Apple Mail. Delivered. */ body#mail #related-nav { margin-bottom: 15px; } body#mail #featureArea h3 { clear: both; background: url(/images/bento/heading_feature_mail.png) no-repeat 50% 0; text-indent: -4000px; height: 55px; } /* Plays Well with Spreadsheets */ body#sharing #related-nav { margin-bottom: 15px; } body#sharing #featureArea h3 { clear: both; background: url(/images/bento/heading_feature_spreadsheets.png) no-repeat 50% 0; text-indent: -4000px; height: 55px; margin-left: 35px;} /* New Views. New Hues */ body#views #related-nav { margin-bottom: 15px; } body#views #featureArea h3 { clear: both; background: url(/images/bento/heading_feature_new_views.png) no-repeat 50% 0; text-indent: -4000px; height: 55px; } /* More Features. More Fun */ body#top-ten #featureArea h3 { clear: both; background: url(/images/bento/heading_feature_more_fun.png) no-repeat 50% 0; text-indent: -4000px; height: 40px; } /* Do it Better with Bento (bento_uses.html) */ body#uses #related-nav { margin-bottom: 30px; } body#uses #featureArea h3 { clear: both; background: url(/images/bento/heading_bento_uses.png) no-repeat 50% 0; text-indent: -4000px; height: 55px; } /* Stories Pages Feature Area Override */ #stories #featureArea { height: auto; } /* Tech Specs, Top Ten */ body#tech-specs #quick-tour { margin-right: 10px; } body#tech-specs h3.important { color: #c03; text-transform: uppercase; padding-bottom: 0; margin-left: 17px; font-size: 110%; } body#tech-specs div#midCol ul { margin-left: 30px; } body#tech-specs #lowerArea { clear: both; } /* body#top-ten li#nav-buynow { display: none; } body#top-ten li#nav-buynow-onwhite { display: block; } */ body#top-ten #featureArea h2#all-new { clear: both; background: url(/images/bento/heading_feature_topten.png) no-repeat 50% 0; text-indent: -4000px; height: 40px; } body#top-ten #quick-tour { margin-right: 10px; } body#top-ten h3.important { color: #c03; text-transform: uppercase; padding-bottom: 0; margin-left: 17px; font-size: 110%; } body#top-ten div#midCol ul { margin-left: 30px; } body#top-ten #lowerArea { clear: both; } /* Tutorials */ body#tutorials #lowerArea { clear: both; } body#tutorials li#nav-buynow { display: none; } body#tutorials li#nav-buynow-onwhite { display: block; } /* Tours Pages */ #tours-profiles #featureArea { background: url(/images/bento/feature_bento_tours_profiles.png) no-repeat 0 0; height: 320px; } #tours-tours #featureArea { background: url(/images/bento/feature_bento2_demos.jpg) no-repeat 0 0; height: 480px; } #tours-tutorials #featureArea { background: url(/images/bento/feature_bento_tours_tutorials.png) no-repeat 0 0; height: 480px; } #featureArea h2#heading-tours-profiles { background: url(/images/bento/heading_bento_profiles.png) no-repeat 0 70px; text-indent: -3000px; width: 254px; height: 24px; padding-top: 150px; margin: 0 0 0 270px; } .video { width: 47%; float: left; margin-right: 25px; height: 270px; } .right { margin-right: 0; } .tours-intro { font-size: 110%; margin-bottom: 20px; } .tours-intro h2 { margin-bottom: 0; padding-bottom: 0; } /* Feedback */ body#thankyou #featureArea { background: url(/images/bento/background_thankyou.jpg) no-repeat 0 0; } /* Bento for iPhone */ body#iphone #related-nav { margin-bottom: 30px; } body#iphone #featureArea h3 { clear: both; background: url(/images/bento/graphic_title_iphone_way.png) no-repeat 50% ; text-indent: -4000px; height: 48px; padding: 0 !important;} body#iphone-soon #featureArea h3 { clear: both; background: url(/images/bento/graphic_title_iphone_way2.png) no-repeat 50% ; text-indent: -4000px; height: 96px; padding: 0 !important;}