/* GENERAL */
/*--------------*/

#midCol                                     { width: 100% !important; }
#rightCol                                   { display: none; }
a:focus, a:active                           { outline: none; }
.clear                                      { clear: both; }

/* Expandable Blue Button 
-------------------------*/

.button, .button span                             { background: url(/global_images/buttons/bg_button_blue_left.png) no-repeat 0 0; padding: 8px 0 8px 0; font-size: 11px; }
.button span                                      { margin-left: 13px; height: 30px; background: url(/global_images/buttons/bg_button_blue_right.png) no-repeat 100% 0; padding: 8px 20px 8px 7px; color: #fff; }
.button a                                         { text-decoration: none; }
.button.red                                       { background-image: url(/global_images/buttons/bg_button_red_left.png); }
.button.red span                                  { background-image: url(/global_images/buttons/bg_button_red_right.png); }
.button.gray                                      { background-image: url(/global_images/buttons/bg_button_gray_left.png); }
.button.gray span                                 { background-image: url(/global_images/buttons/bg_button_gray_right.png); }
#related-nav .button a { padding: 0; }
#related-nav .button { margin-left: 15px; }

/* Buy Now buttons for iPhone and iPad  */
/*---------------------------------------*/
#nav-buynow-iphone, #nav-buynow-ipad { display: none; } /* hide by default */

body#iphone #nav-buynow { display: none; }
body#iphone #nav-buynow-iphone { display: block; }

body#ipad #nav-buynow { display: none; }
body#ipad #nav-buynow-ipad { display: block; }

/* FEATURE AREA */
/*--------------*/

#feature-area                                { background: url(/global_images/bento3/bg_feature_area.jpg) no-repeat 0 10px; padding-top: 20px; height: 520px; }
/* #feature-area h2                             { width: 100px; height: 32px; float: left; background: url(/global_images/bento3/logo_bento3.png) no-repeat 0 0; text-indent: -5000px; margin-left: 15px; } */
#feature-area h2                             { padding: 0 !important; width: 80px; float: left; margin-left: 15px; }
#feature-area h2 { color: #333; font-size: 200%; letter-spacing: 0; }
#feature-graphic                            { background: url(/global_images/bento3/feature_what_is_bento.png) no-repeat 50% 90px; clear: both; height: 395px; }
#feature-area h3                             { padding: 0; text-align: center; font: normal 3.5em "Helvetica Neue", Helvetica, Arial, sans-serif; }
#feature-area h4                             { padding: 0; text-align: center; color: #616161; font: normal 150% "Helvetica Neue", Helvetica, Arial, sans-serif; }
#feature-area .feature-intro                 { margin-top: 340px; padding: 0 30px 0 40px; }
#feature-area .feature-intro p               { font-weight: bold; font-size: 110%; line-height: 130%; width: 60%; float: left; }
.feature-intro .button                        { float: right; margin-top: 15px; }
/* #feature-area .feature-intro span            { display: block; float: right; margin-top: 15px; } */


/* BENTO SUB NAV */
/*---------------*/

#related-nav                                { width: 800px; float: right; margin-top: 8px; }
#related-nav li                             { list-style: none; float: left; }
#related-nav li a                           { font-size: 110%; color: #616161; padding: 5px 10px; }
#related-nav li .selected                   { color: #000; }
#related-nav li img                         { margin-top: -7px; }
#featureArea h3                             { clear: both; }

/* BENTO CONTENT NAV */
/*-------------------*/

#bento-nav                                  { background: url(/global_images/bento3/bg_bento_nav.png) no-repeat 0 0; width: 966px; padding-top: 10px; margin-left: 0 !important; margin-bottom: 0; }
#bento-nav li a                             { font-size: 100%; font-weight: bold; height: 165px !important; display: block !important; width: 150px; margin-right: 10px; height: 50px; text-decoration: none; border-right: 1px solid #ddd; }
#bento-nav li.last a                        { margin-right: 0; border-right: 0; }
#bento-nav li a:link                        { color: #333; }
#bento-nav li a:visited                     { color: #333; }
#bento-nav li a:hover                       { }
#bento-nav li a:active                      { color: #333; }
#bento-nav li                               { float: left; list-style: none; text-align: center; }
#bento-nav li img                           { width: 125px; height: 115px; }
#bento-nav li span                          { display: block; }

  /* What's New Page Content Nav */
  #whats-new #bento-nav                     { background-image: url(/global_images/bento3/bg_bento_nav_whats_new.png); height: 203px; padding-top: 5px; }
  #whats-new #bento-nav li img              { width: 189px; height: 128px; }
  #whats-new #bento-nav li a                { width: 230px; }
  #whats-new #bento-nav li span             { margin-left: 25px; text-align: left; color: #616161; font-weight: normal; }
  #whats-new #bento-nav li strong           { display: block; color: #333; font-weight: bold; }


/* CONTENT */
/*---------*/
#lowerArea                                          { background: url(/global_images/bento3/bg_lower_area_top.png) no-repeat 0 0; }
.lowerAreaContainer                                 { padding: 20px 0 20px 20px !important; background: url(/global_images/bento3/bg_lower_area_bottom.png) no-repeat 0 100%; }
.bento #midCol                                             { width: 724px; padding-right: 20px !important; /* border-right: 1px solid #ccc; */  }
#rightCol                                           { width: 200px !important; }
#midCol p, #midCol li, #rightCol p, #rightCol li    { font-size: 1.1em !important; color: #616161; line-height: 130%;}
#midCol h2                                          { font: bold 120% "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #333 !important; letter-spacing: normal !important; }
#midCol h3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  
/* CONTENT */
/*--------------*/

#upgrade-now                                { position: relative; background: url(/global_images/bento3/bg_upgrade_now.png) no-repeat 0 0; padding: 35px 50px; }
#upgrade-now span                           { }
#upgrade-now strong                         { font-size: 120%; padding-right: 10px; color: #616161; position: absolute; top: 35px; left: 250px; }


#bento-content                              { clear: both; background: url(/global_images/bento3/bg_content_mid.png) repeat-y 0 0; margin-top: -10px !important; }
#bento-content-wrapper                      { padding: 20px 20px 40px 20px;  background: url(/global_images/bento3/bg_content_bottom.jpg) no-repeat 0 100%; }

.feature                                    { clear: both; margin: 10px 0; padding: 10px 0; width: 935px; }

.feature.img-left img                       { float: left; }
.feature.img-left .feature-content          { margin-left: 580px; width: 345px; }

.feature.img-right img                      { float: right; }
.feature.img-right .feature-content         { width: 345px; }

.feature h3                                 { font: normal 170% "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 0; }
.feature h4                                 { font-size: 120%; font-weight: normal; color: #6f010e; margin-bottom: 10px; padding-top: 3px; line-height: 140%; }
.feature a                                  { color: #6f010e; }
.feature a.more                             { background-image: url(/global_images/bento3/bullet_arrow_right.png); }
.feature p                                  { color: #444; line-height: 140%; }

.bento-callout                                    { margin-top: 15px; width: 343px; background: url(/global_images/bento3/bg_callout_top.png) no-repeat 0 0; padding-top: 9px; }
.bento-callout-wrapper                            { background: url(/global_images/bento3/bg_callout_bottom.png) no-repeat 100% 100%; padding: 10px 10px 20px 10px; }
.bento-callout img                                { float: left !important; padding: 0 0 0 10px; }
.bento-callout h4                                 { margin-left: 160px; color: #000; font-size: 130%; font-weight: normal; }
.bento-callout p                                  { margin-left: 160px; }

.top                                        { clear: both; float: right; }
.top a                                      { color: #6f010e; margin-right: 20px; padding-right: 10px; background: url(/global_images/bento3/bullet_arrow_up.png) no-repeat 100% 2px; }

/* Bottom Callout from Bento 2 stylesheet */

div#callout-bottom                                  { position: relative; clear: both; height: 240px; padding: 0 15px; background: url(/global_images/bento/bg_callout_bottom.jpg) no-repeat 0 20px; }
div#callout-bottom .ofthree { width: 32%; }
div#callout-bottom .lastcolumn { width: 25%; margin-left: 20px; }
div#callout-bottom h3                               {	margin: 25px 0 10px 0; color: #333; font-weight: normal; }
div#callout-bottom h3 a { color: #333; text-decoration: none; }
div#callout-bottom img                              { position: absolute; bottom: 13px; }
div#callout-bottom h3                               { margin-bottom: 0; font-size: 125%; }
div#callout-bottom p                                { font-size: 110% !important; }

a#button-buy-now                                    { display: block; width: 85px; height: 22px; text-indent: -3000px; background: url(/global_images/bento/button_buy_now_gray.png) no-repeat 0 0; }

a#button-try-now, 
a#button-buy-now                                    { display: block; margin-left: 120px; width: 85px; height: 22px; text-indent: -3000px; }
a#button-try-now                                    { margin-top: 60px; margin-bottom: 5px; background: url(/global_images/bento/button_try_now_gray.png) no-repeat 0 0; }
a#button-buy-now                                    { background: url(/global_images/bento/button_buy_now_gray.png) no-repeat 0 0; }
#callout-bottom .bento-buttons                      { width: 70px; position: absolute; right: 130px; top: 85px; }

a.link-button button                                { background: url(/global_images/bento/bg_button_gray.png) repeat-x 0 100%; border: 1px solid #ccc; border-top-color: #ddd; border-left-color: #ddd; margin-bottom: 3px; color: #616161; font-size: 100%; padding: 3px; cursor: pointer; }

/* square button */
a.button-gray                                { font: normal 125% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #999 url(/global_images/bento/bg_button_gray_right.jpg) no-repeat 0 -1px; border: 1px solid #777; border-top-color: #888; border-left-color: #888; padding: 8px 10px; }
a.button-gray:hover                          { text-decoration: none; }

#iphone #midCol { border-right: 0; }

/* BENTO FOR IPAD */
/* ipad.html */

/* Just in case JavaScript is off */
body#ipad li#subnav-free-trial,
body#ipad li#subnav-buynow,
body#ipad li#subnav-buynow-iphone 						{ display: none; }
body#ipad li#subnav-buynow-ipad							{ display: block !important; }

body#ipad #feature-area									{ background: url(/global_images/bento3/ipad/feature_bento_ipad.jpg) no-repeat 0 50px; height: 350px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
body#ipad #related-nav                            		{ margin-bottom: 22px; }
body#ipad #feature-area h3                			  	{ clear: both; display: block; font-size: 25px; width: 360px; padding-right: 20px; text-align: left; margin-left: 600px; font-family: 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif; top: 25px; position: relative; font-weight: normal !important; height: 150px; padding: 0 !important; margin-top: 5px;}
body#ipad #feature-area p#buynow-button					{ float: right; margin: 10px 178px 0 0; }
	body#ipad #feature-area p#buynow-button a			{ margin-right: 10px !important; }
body#ipad #feature-area p#subheadline					{ margin: 0 5px 0 605px; font-size: 16px; width: 350px; line-height: 25px; color: #888888; clear: both;}

body#ipad #midCol h2  { font-size: 150% !important; }
body#ipad #midCol h3								{ margin: 20px 0; }
body#ipad #midCol p									{ line-height: 20px; }
body#ipad #midCol p.templates-title 				{ font-weight: bold; margin-top: 20px; }
body#ipad #midCol div.firstcolumn.offive 			{ margin: 10px; }
body#ipad #midCol div.lastcolumn.offive 			{ width: 150px; }
body#ipad #midCol div.offive 						{ float: left; padding-right: 25px; }
	body#ipad #midCol div.offive ul 				{ margin-top: 10px; }
		body#ipad #midCol div.offive ul li 			{ padding-bottom: 5px; color: #616161 !important; }

body#ipad #midCol span.red 							{ color: #820e1a; font-weight: bold; }
body#ipad #midCol div.note 							{ background-color: #fff; border: 1px solid #ccc; padding: 15px; margin: 10px 0 15px 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
	body#ipad #lower-area div.note p 					{ line-height: 15px; }
	
body#ipad .promo img							{ margin-left: -10px;}