/* WHAT'S NEW (/products/filemaker-pro/whats-new.html) */
/*------------------------------------------------------*/

/* Feature area */

#whats-new #feature-area              { padding: 20px 0 10px 0; margin-bottom: 20px; height: 725px; border: 1px solid #ddd; text-align: center; background: url(/global_images/fm12/whats_new/bg_feature_whats_new.jpg) repeat-x 0 0; }
#whats-new #feature-area              { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#whats-new #feature-area              { box-shadow: 0px 1px 1px #999; -moz-box-shadow: 0px 1px 1px #999; -webkit-box-shadow: 0px 1px 1px #999; }
#whats-new #feature-area h2           { padding-top: 20px; color: #333; font-size:60px; }
#whats-new #feature-area h3           { margin: 5px 0 30px 0; color: #777; font-size: 200%; }

#slider                               { margin-left: 75px; width: 913px; margin-bottom: 10px; }

/* Gray gradient video and learn more buttons */

.button-gray-gradient                 { background-color: #eee; display: block; width: 200px; border: 1px solid #ccc; font-size: 120%; }
.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           { 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.video b         { padding-left: 34px; background: url(/global_images/fm12/whats_new/icon_video_play.png) no-repeat 0 50%; } 

.button-gray-gradient.learn-more b    { padding-left: 34px; background: url(/global_images/fm12/whats_new/icon_learn_more.png) no-repeat 0 50%; } 

/* Features */
/* need to set heights for features for the dropdown video functions to animate correctly */

.feature                              { position: relative; }

.feature h3                           { font-size: 130% !important; }

#feature-hues                         { padding: 0 120px; height: 410px; border: 1px solid #fff; }
#feature-hues h3                      { margin-top: 30px; font-size: 200% !important; font-weight: normal; padding: 7px 0 2px 88px; background: url(/global_images/fm12/whats_new/icon_hues.png) no-repeat 0 0; }

#feature-solutions                    { padding: 0 120px; height: 500px; border: 1px solid #fff; }
#feature-solutions h3                 { margin-top: 25px; padding: 28px 0 12px 65px; background: url(/global_images/fm12/whats_new/icon_starter_solutions.png) no-repeat 0 0; }
#feature-solutions .button-gray-gradient { float: left; margin-right: 20px; }
#solutions-details                    { margin-top: 30px; margin-left: -100px; width: 920px; }
#solutions-details li                 { float: left; }
#solutions-details li a               { display: block; float: left; margin-left: 10px;  text-align: center;  text-decoration: none; color: #333; }

#feature-container                    { height: 400px; border: 1px solid #fff;  /* margin-top: 80px; */ }
#feature-container img                { margin-right: 10px !important; }
#feature-container h3, 
#feature-container p                  { margin-left: 20px; width: 450px; }
#feature-container h3                 { width: 300px; padding: 40px 80px 5px 75px; background: url(/global_images/fm12/whats_new/icon_container_fields.png) no-repeat 0 24px; }
#feature-container .button-gray-gradient { float: left; margin-right: 20px; }

#feature-charting                     { height: 600px; border: 1px solid #fff; border-left: 0; margin-top: 20px; margin-left: -19px; background: url(/global_images/fm12/whats_new/graphic_charting_laptop.jpg) no-repeat 0 5px; } 
#feature-charting h3                  { padding: 20px 0 4px 55px; background: url(/global_images/fm12/whats_new/icon_charting.png) no-repeat 0 0; }
#feature-charting h3, 
#feature-charting p                   { margin-left: 498px; padding-right: 20px; }
#feature-charting .button-gray-gradient { float: left; margin-right: 20px; width: 160px; }

#feature-ios                          { }
#feature-ios h3                       { width: 300px; padding: 95px 80px 5px 145px; background: url(/global_images/fm12/whats_new/icon_ios.png) no-repeat 0 60px; }
#feature-ios h3, #feature-ios p       { width: 390px; margin-left: 20px; }


/* Dropdown video */

.dropdown-video                       { display: none; background: #fff; height: 500px; text-align: center; }
.video-wrapper                        { display: none; height: 500px; padding: 0 0 0 175px; }
.close-video                          { display: block; color: #333; margin-left: 170px; padding: 8px 0 8px 32px; background: url(/site/images/fancyzoom/closebox.png) no-repeat 0 3px; text-align: left; }

#zoom-video-hues                      { position: absolute; top: -5px; left: -10px; width: 980px; }
#zoom-video-solutions                 { position: absolute; top: -5px; left: -10px; width: 980px; }
#zoom-video-container                 { position: absolute; top: -5px; left: -10px; width: 980px; }
#zoom-video-charting                  { position: absolute; top: -5px; left: 0; width: 980px; }