*                                     { text-rendering: optimizeLegibility; }
sup                                   { vertical-align: super; font-size: smaller; }

.new																	{ color: #990000; }

#lower-area h3                        { color: #333; font-size: 140%; }
#feature-area h2           						{ font-size:39px; color:#000000; margin-bottom:8px; line-height:40px;}
#feature-area h3           						{ font-size:26px !important; color:#777777; letter-spacing:-0.02em; line-height: 130%;}
#feature-area h4											{ font-size:16px; color:#006ece; width:280px; text-align: center; margin-top:15px;}

/* default buy now subnav hiding */

#subnav-free-trial                    { display: none; }
#subnav-buynow                        { }
#subnav-buynow-iphone                 { display: none; }
#subnav-buynow-ipad                   { display: none; }

#sub-header h2                        { margin-top: 30px !important; }

/* Fancyzoom */
#zoom_table                           { position: relative; z-index: 200; }
#zoom_close                           { z-index: 300; }
#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     { font-weight: normal; 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 .sidenav-links ul li.selected a { font-weight: bold; color: #000 !important;}
			
/* Quotes */			

#right-col .callout                   { color: #652b30; font-style: italic; }
 #right-col .callout p                { margin-left: 10px; font-weight: normal; }
 #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-align:center; padding-top:35px; /*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; font-weight: normal; 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; }  

/* Gray gradient video and learn more buttons */
.button-gray-gradient                 { background-color: #eee; display: block; width: 200px; border: 1px solid #ccc; font-size: 120%; float:left; color:#810000;}
.button-gray-gradient b               { display: block; padding: 8px 20px; margin-left: 12px; font-weight: normal; }
.button-gray-gradient                 { background-image: -moz-linear-gradient(100% 100% 90deg, #dcdddd, #f6f6f6); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f6f6f6), to(#dcdddd)); }
.button-gray-gradient                 { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
.button-gray-gradient                 { box-shadow: 0px 1px 1px #ddd; -moz-box-shadow: 0px 1px 1px #ddd; -webkit-box-shadow: 0px 1px 1px #ddd; }
.button-gray-gradient:hover           { color:#4f0000; text-decoration: none; background-image: -moz-linear-gradient(100% 100% 90deg, #ddd, #eee); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ddd)); }

.button-gray-gradient.plus b        	{ padding-left: 34px; background: url(/global_images/bento4/icon_plus.png) no-repeat 0 50%; }