Implement new overlay style for options pages.

I've attached screenshots in the bug. The changes covered in this CL are:
- background radial gradient.
- dialog panel animation when clicking on modally blocked area.
- text color
- title font size.
- x close button visuals and placement.
- size and placement of action buttons.
- dialog internal padding.
- border radius
- drop shadow

BUG=116312
TEST=Test the new dialogs on the options page.

Review URL: https://chromiumcodereview.appspot.com/9625006

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@126414 0039d316-1c4b-4281-b951-d872f2087c98

45 files changed, 105 insertions, 36 deletions

diff --git a/chrome/browser/resources/options2/alert_overlay.html b/chrome/browser/resources/options2/alert_overlay.html
index 3de00e7..94be15c 100644
--- a/chrome/browser/resources/options2/alert_overlay.html
+++ b/chrome/browser/resources/options2/alert_overlay.html
@@ -1,4 +1,5 @@
 <div id="alertOverlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 id="alertOverlayTitle"></h1>
   <div class="content-area">
     <div id="alertOverlayMessage"></div>
diff --git a/chrome/browser/resources/options2/autofill_edit_address_overlay.html b/chrome/browser/resources/options2/autofill_edit_address_overlay.html
index 43a13c7..361445e 100644
--- a/chrome/browser/resources/options2/autofill_edit_address_overlay.html
+++ b/chrome/browser/resources/options2/autofill_edit_address_overlay.html
@@ -1,4 +1,5 @@
 <div id="autofill-edit-address-overlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 id="autofill-address-title"></h1>
   <div class="content-area">
     <div id="autofill-name-labels">
diff --git a/chrome/browser/resources/options2/autofill_edit_creditcard_overlay.html b/chrome/browser/resources/options2/autofill_edit_creditcard_overlay.html
index fa3825a..bf3278b 100644
--- a/chrome/browser/resources/options2/autofill_edit_creditcard_overlay.html
+++ b/chrome/browser/resources/options2/autofill_edit_creditcard_overlay.html
@@ -1,4 +1,5 @@
 <div id="autofill-edit-credit-card-overlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 id="autofill-credit-card-title"></h1>
   <div class="content-area">
     <div class="input">
diff --git a/chrome/browser/resources/options2/autofill_options.html b/chrome/browser/resources/options2/autofill_options.html
index a6cd661..a1c4481 100644
--- a/chrome/browser/resources/options2/autofill_options.html
+++ b/chrome/browser/resources/options2/autofill_options.html
@@ -1,4 +1,5 @@
 <div id="autofill-options" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="autofillOptionsPage"></h1>
   <div class="content-area">
 <if expr="is_macosx">
diff --git a/chrome/browser/resources/options2/certificate_backup_overlay.html b/chrome/browser/resources/options2/certificate_backup_overlay.html
index b0bcea3..146b38f 100644
--- a/chrome/browser/resources/options2/certificate_backup_overlay.html
+++ b/chrome/browser/resources/options2/certificate_backup_overlay.html
@@ -1,4 +1,5 @@
 <div id="certificateBackupOverlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="certificateExportPasswordDescription"></h1>
   <div class="content-area">
     <table>
diff --git a/chrome/browser/resources/options2/certificate_edit_ca_trust_overlay.html b/chrome/browser/resources/options2/certificate_edit_ca_trust_overlay.html
index b45bfc9..c705bd3 100644
--- a/chrome/browser/resources/options2/certificate_edit_ca_trust_overlay.html
+++ b/chrome/browser/resources/options2/certificate_edit_ca_trust_overlay.html
@@ -1,4 +1,5 @@
 <div id="certificateEditCaTrustOverlay" class="page" hidden>
+  <div class="close-button"></div>
   <div class="content-area">
     <p>
       <span id="certificateEditCaTrustDescription"></span>
diff --git a/chrome/browser/resources/options2/certificate_import_error_overlay.html b/chrome/browser/resources/options2/certificate_import_error_overlay.html
index 02a7e2d..d3946b4 100644
--- a/chrome/browser/resources/options2/certificate_import_error_overlay.html
+++ b/chrome/browser/resources/options2/certificate_import_error_overlay.html
@@ -1,4 +1,5 @@
 <div id="certificateImportErrorOverlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 id="certificateImportErrorOverlayTitle"></h1>
   <div class="content-area">
     <div id="certificateImportErrorOverlayMessage"></div>
diff --git a/chrome/browser/resources/options2/certificate_manager.html b/chrome/browser/resources/options2/certificate_manager.html
index 96955c7..3cda0cc 100644
--- a/chrome/browser/resources/options2/certificate_manager.html
+++ b/chrome/browser/resources/options2/certificate_manager.html
@@ -1,4 +1,5 @@
 <div id="certificateManagerPage" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="certificateManagerPage"></h1>
   <div class="content-area">
     <!-- Navigation tabs -->
diff --git a/chrome/browser/resources/options2/certificate_restore_overlay.html b/chrome/browser/resources/options2/certificate_restore_overlay.html
index 30b380d..82cc202 100644
--- a/chrome/browser/resources/options2/certificate_restore_overlay.html
+++ b/chrome/browser/resources/options2/certificate_restore_overlay.html
@@ -1,4 +1,5 @@
 <div id="certificateRestoreOverlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="certificateRestorePasswordDescription"></h1>
   <div class="content-area">
     <label id="certificateRestorePasswordLabel">
diff --git a/chrome/browser/resources/options2/chromeos/accounts_options.html b/chrome/browser/resources/options2/chromeos/accounts_options.html
index 713a83b..25f570b 100644
--- a/chrome/browser/resources/options2/chromeos/accounts_options.html
+++ b/chrome/browser/resources/options2/chromeos/accounts_options.html
@@ -1,4 +1,5 @@
 <div id="accountsPage" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="accountsPage"></h1>
   <div class="content-area">
     <div class="option">
diff --git a/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.html b/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.html
index 295c4e8..a09222f 100644
--- a/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.html
+++ b/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.html
@@ -1,4 +1,5 @@
 <div id="bluetooth-options" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="bluetoothAddDeviceTitle"></h1>
   <div class="settings-list bluetooth-device-list content-area">
     <list id="bluetooth-unpaired-devices-list"></list>
diff --git a/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.html b/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.html
index 770e6ad..5ce4f50 100644
--- a/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.html
+++ b/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.html
@@ -1,4 +1,5 @@
 <div id="bluetooth-pairing" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="bluetoothAddDeviceTitle"></h1>
   <div id="bluetooth-pairing-message-area" class="content-area">
     <div id="bluetooth-pairing-message-contents">
diff --git a/chrome/browser/resources/options2/chromeos/change_picture_options.html b/chrome/browser/resources/options2/chromeos/change_picture_options.html
index a2900fc..7b1657a 100644
--- a/chrome/browser/resources/options2/chromeos/change_picture_options.html
+++ b/chrome/browser/resources/options2/chromeos/change_picture_options.html
@@ -1,4 +1,5 @@
 <div id="change-picture-page" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="changePicturePage"></h1>
   <div class="content-area">
     <span i18n-content="changePicturePageDescription"></span>
diff --git a/chrome/browser/resources/options2/chromeos/internet_detail.html b/chrome/browser/resources/options2/chromeos/internet_detail.html
index fd4c4f1..3027668 100644
--- a/chrome/browser/resources/options2/chromeos/internet_detail.html
+++ b/chrome/browser/resources/options2/chromeos/internet_detail.html
@@ -1,4 +1,5 @@
 <div id="detailsInternetPage" class="page" hidden>
+  <div class="close-button"></div>
   <div id="internet-details-content-area" class="content-area">
     <!-- Network header -->
     <div>
diff --git a/chrome/browser/resources/options2/chromeos/internet_options.html b/chrome/browser/resources/options2/chromeos/internet_options.html
index bef9b8f..f02349a 100644
--- a/chrome/browser/resources/options2/chromeos/internet_options.html
+++ b/chrome/browser/resources/options2/chromeos/internet_options.html
@@ -1,4 +1,5 @@
 <div id="internetPage" class="page hide-indicators" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="internetPage"></h1>
   <div class="content-area">
     <div id="locked-network-banner" hidden>
diff --git a/chrome/browser/resources/options2/chromeos/keyboard_overlay.html b/chrome/browser/resources/options2/chromeos/keyboard_overlay.html
index 76e26bf..4213954 100644
--- a/chrome/browser/resources/options2/chromeos/keyboard_overlay.html
+++ b/chrome/browser/resources/options2/chromeos/keyboard_overlay.html
@@ -1,4 +1,5 @@
 <div id="keyboard-overlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="keyboardOverlayTitle"></h1>
   <div class="content-area">
     <table class="option-control-table">
diff --git a/chrome/browser/resources/options2/chromeos/language_chewing_options.html b/chrome/browser/resources/options2/chromeos/language_chewing_options.html
index 3ef2946..f5cd74c 100644
--- a/chrome/browser/resources/options2/chromeos/language_chewing_options.html
+++ b/chrome/browser/resources/options2/chromeos/language_chewing_options.html
@@ -1,4 +1,5 @@
 <div id="languageChewingPage" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="languageChewingPage"></h1>
   <div class="content-area">
     <table class="option-control-table">
diff --git a/chrome/browser/resources/options2/chromeos/language_hangul_options.html b/chrome/browser/resources/options2/chromeos/language_hangul_options.html
index 23504654..1a8d094 100644
--- a/chrome/browser/resources/options2/chromeos/language_hangul_options.html
+++ b/chrome/browser/resources/options2/chromeos/language_hangul_options.html
@@ -1,4 +1,5 @@
 <div id="languageHangulPage" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="languageHangulPage"></h1>
   <div class="content-area">
     <div class="option">
diff --git a/chrome/browser/resources/options2/chromeos/language_mozc_options.html b/chrome/browser/resources/options2/chromeos/language_mozc_options.html
index 19dac0a..6f3aec2 100644
--- a/chrome/browser/resources/options2/chromeos/language_mozc_options.html
+++ b/chrome/browser/resources/options2/chromeos/language_mozc_options.html
@@ -1,4 +1,5 @@
 <div id="languageMozcPage" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="languageMozcPage"></h1>
   <div class="content-area">
     <table class="option-control-table">
diff --git a/chrome/browser/resources/options2/chromeos/language_pinyin_options.html b/chrome/browser/resources/options2/chromeos/language_pinyin_options.html
index 1b32075..34ba784 100644
--- a/chrome/browser/resources/options2/chromeos/language_pinyin_options.html
+++ b/chrome/browser/resources/options2/chromeos/language_pinyin_options.html
@@ -1,4 +1,5 @@
 <div id="languagePinyinPage" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="languagePinyinPage"></h1>
   <div class="content-area">
     <table class="option-control-table">
diff --git a/chrome/browser/resources/options2/chromeos/pointer_overlay.html b/chrome/browser/resources/options2/chromeos/pointer_overlay.html
index 13cf03a..e8618c3 100644
--- a/chrome/browser/resources/options2/chromeos/pointer_overlay.html
+++ b/chrome/browser/resources/options2/chromeos/pointer_overlay.html
@@ -1,4 +1,5 @@
 <div id="pointer-overlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="pointerOverlayTitle"></h1>
   <div class="content-area">
     <div id="pointer-section-touchpad" hidden>
diff --git a/chrome/browser/resources/options2/chromeos/preferred_networks.html b/chrome/browser/resources/options2/chromeos/preferred_networks.html
index 8fba17d..d7f112e 100644
--- a/chrome/browser/resources/options2/chromeos/preferred_networks.html
+++ b/chrome/browser/resources/options2/chromeos/preferred_networks.html
@@ -1,4 +1,5 @@
 <div id="preferredNetworksPage" class="page" hidden>
+  <div class="close-button"></div>
   <h1 id="preferred-networks-page-title" 
       i18n-content="preferredNetworksPage"></h1>
   <div class="content-area">
diff --git a/chrome/browser/resources/options2/chromeos/proxy.html b/chrome/browser/resources/options2/chromeos/proxy.html
index a6fa513..cd390d4 100644
--- a/chrome/browser/resources/options2/chromeos/proxy.html
+++ b/chrome/browser/resources/options2/chromeos/proxy.html
@@ -1,4 +1,5 @@
 <div id="proxyPage" class="page" hidden>
+  <div class="close-button"></div>
   <div id="info-banner" class="managed-prefs-banner" hidden>
     <span id="banner-icon" class="managed-prefs-icon"></span>
     <span id="banner-text" class="managed-prefs-text"></span>
diff --git a/chrome/browser/resources/options2/chromeos/virtual_keyboard.html b/chrome/browser/resources/options2/chromeos/virtual_keyboard.html
index 33e52ee..e56b969 100644
--- a/chrome/browser/resources/options2/chromeos/virtual_keyboard.html
+++ b/chrome/browser/resources/options2/chromeos/virtual_keyboard.html
@@ -1,4 +1,5 @@
 <div id="virtual-keyboard-manager" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="virtualKeyboardPage"></h1>
   <div class="content-area">
     <div class="virtual-keyboard-column-headers">
diff --git a/chrome/browser/resources/options2/clear_browser_data_overlay.html b/chrome/browser/resources/options2/clear_browser_data_overlay.html
index 26ee6e1..baff47d 100644
--- a/chrome/browser/resources/options2/clear_browser_data_overlay.html
+++ b/chrome/browser/resources/options2/clear_browser_data_overlay.html
@@ -1,4 +1,5 @@
 <div id="clearBrowserDataOverlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="clearBrowserDataOverlay"></h1>
   <div id="cbdContentArea" class="content-area">
     <span i18n-content="clearBrowserDataLabel"></span>
diff --git a/chrome/browser/resources/options2/content_settings.html b/chrome/browser/resources/options2/content_settings.html
index 7374420..73e1d9b 100644
--- a/chrome/browser/resources/options2/content_settings.html
+++ b/chrome/browser/resources/options2/content_settings.html
@@ -1,4 +1,5 @@
 <div id="content-settings-page" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="contentSettingsPage"></h1>
   <div class="content-area">
     <!-- Cookie filter tab contents -->
diff --git a/chrome/browser/resources/options2/content_settings_exceptions_area.html b/chrome/browser/resources/options2/content_settings_exceptions_area.html
index c8de1ac..1aec06c 100644
--- a/chrome/browser/resources/options2/content_settings_exceptions_area.html
+++ b/chrome/browser/resources/options2/content_settings_exceptions_area.html
@@ -1,4 +1,5 @@
 <div id="content-settings-exceptions-area" class="page" hidden>
+  <div class="close-button"></div>
   <h1></h1>
   <div class="content-area">
     <div id="exception-column-headers">
diff --git a/chrome/browser/resources/options2/cookies_view.html b/chrome/browser/resources/options2/cookies_view.html
index 1b8853d..fd490199 100644
--- a/chrome/browser/resources/options2/cookies_view.html
+++ b/chrome/browser/resources/options2/cookies_view.html
@@ -1,4 +1,5 @@
 <div id="cookiesViewPage" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="cookiesViewPage"></h1>
   <div class="content-area">
     <div id="cookies-column-headers">
diff --git a/chrome/browser/resources/options2/font_settings.html b/chrome/browser/resources/options2/font_settings.html
index 1278505..23b03ef 100644
--- a/chrome/browser/resources/options2/font_settings.html
+++ b/chrome/browser/resources/options2/font_settings.html
@@ -1,4 +1,5 @@
 <div id="font-settings" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="fontSettingsPage"></h1>
   <div class="content-area">
     <section>
diff --git a/chrome/browser/resources/options2/handler_options.html b/chrome/browser/resources/options2/handler_options.html
index b814a92..ffa95b7 100644
--- a/chrome/browser/resources/options2/handler_options.html
+++ b/chrome/browser/resources/options2/handler_options.html
@@ -1,4 +1,5 @@
 <div id="handler-options" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="handlersPage"></h1>
   <div class="content-area">
     <h3 i18n-content="handlers_active_heading"></h3>
diff --git a/chrome/browser/resources/options2/home_page_overlay.html b/chrome/browser/resources/options2/home_page_overlay.html
index 590a83e..3a8074f 100644
--- a/chrome/browser/resources/options2/home_page_overlay.html
+++ b/chrome/browser/resources/options2/home_page_overlay.html
@@ -1,4 +1,5 @@
 <div id="home-page-overlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="homePageOverlay"></h1>
   <div class="content-area">
     <div class="hbox stretch box-align-center">
diff --git a/chrome/browser/resources/options2/import_data_overlay.html b/chrome/browser/resources/options2/import_data_overlay.html
index 02f76a7..c5ebf09 100644
--- a/chrome/browser/resources/options2/import_data_overlay.html
+++ b/chrome/browser/resources/options2/import_data_overlay.html
@@ -1,4 +1,5 @@
 <div id="import-data-overlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="importDataOverlay"></h1>
   <div id="import-data-configure">
     <div class="content-area">
diff --git a/chrome/browser/resources/options2/instant_confirm_overlay.html b/chrome/browser/resources/options2/instant_confirm_overlay.html
index 98f0d36..b81f79c5 100644
--- a/chrome/browser/resources/options2/instant_confirm_overlay.html
+++ b/chrome/browser/resources/options2/instant_confirm_overlay.html
@@ -1,4 +1,5 @@
 <div id="instantConfirmOverlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="instantConfirmTitle"></h1>
   <div class="content-area">
     <span id="instant-confirm-text" i18n-content="instantConfirmMessage"></span>
diff --git a/chrome/browser/resources/options2/language_add_language_overlay.html b/chrome/browser/resources/options2/language_add_language_overlay.html
index 6f7bee6..4bfcf65 100644
--- a/chrome/browser/resources/options2/language_add_language_overlay.html
+++ b/chrome/browser/resources/options2/language_add_language_overlay.html
@@ -1,4 +1,5 @@
 <div id="add-language-overlay-page" class="page" hidden>
+  <div class="close-button"></div>
 <if expr="pp_ifdef('chromeos')">
   <ul id="add-language-overlay-language-list">
   </ul>
diff --git a/chrome/browser/resources/options2/language_options.html b/chrome/browser/resources/options2/language_options.html
index d3030c7..59c1e19 100644
--- a/chrome/browser/resources/options2/language_options.html
+++ b/chrome/browser/resources/options2/language_options.html
@@ -1,4 +1,5 @@
 <div id="languagePage" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="languagePage"></h1>
   <div class="content-area">
     <div id="notification">
diff --git a/chrome/browser/resources/options2/manage_profile_overlay.html b/chrome/browser/resources/options2/manage_profile_overlay.html
index 0bb9239..a2f87da 100644
--- a/chrome/browser/resources/options2/manage_profile_overlay.html
+++ b/chrome/browser/resources/options2/manage_profile_overlay.html
@@ -1,4 +1,5 @@
 <div id="manage-profile-overlay" class="page" hidden>
+  <div class="close-button"></div>
   <!-- Dialog for managing profiles. -->
   <div id="manage-profile-overlay-manage" hidden>
     <h1 i18n-content="manageProfile"></h1>
diff --git a/chrome/browser/resources/options2/options_page.css b/chrome/browser/resources/options2/options_page.css
index c56bf5a..b1fd01c 100644
--- a/chrome/browser/resources/options2/options_page.css
+++ b/chrome/browser/resources/options2/options_page.css
@@ -188,14 +188,6 @@ html[touch-optimized] body {
   margin-top: 45px;
 }
 
-.overlay .page h1 {
-  background: -webkit-linear-gradient(white, #F8F8F8);
-  border-bottom: 1px solid rgba(188, 193, 208, .5);
-  font-size: 105%;
-  font-weight: bold;
-  padding: 10px 15px 8px 15px;
-}
-
 .page list {
   /* Min height is a multiple of the list item height (32) */
   min-height: 192px;
diff --git a/chrome/browser/resources/options2/password_manager.html b/chrome/browser/resources/options2/password_manager.html
index 76ee4d7..9a76ed3 100644
--- a/chrome/browser/resources/options2/password_manager.html
+++ b/chrome/browser/resources/options2/password_manager.html
@@ -1,4 +1,5 @@
 <div id="password-manager" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="passwordsPage"></h1>
   <div class="content-area">
     <div id="password-list-headers">
diff --git a/chrome/browser/resources/options2/search_engine_manager.html b/chrome/browser/resources/options2/search_engine_manager.html
index 1e64758..0e300b2 100644
--- a/chrome/browser/resources/options2/search_engine_manager.html
+++ b/chrome/browser/resources/options2/search_engine_manager.html
@@ -1,4 +1,5 @@
 <div id="search-engine-manager-page" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="searchEngineManagerPage"></h1>
   <div class="content-area">
     <h3 i18n-content="defaultSearchEngineListTitle"></h3>
diff --git a/chrome/browser/resources/options2/session_restore_overlay.html b/chrome/browser/resources/options2/session_restore_overlay.html
index 0d4dca3..defb6e9 100644
--- a/chrome/browser/resources/options2/session_restore_overlay.html
+++ b/chrome/browser/resources/options2/session_restore_overlay.html
@@ -1,4 +1,5 @@
 <div id="sessionRestoreOverlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="sessionRestoreOverlayTitle"></h1>
   <div class="content-area">
     <span i18n-content="sessionRestoreOverlayMessage"></span>
diff --git a/chrome/browser/resources/options2/startup_overlay.html b/chrome/browser/resources/options2/startup_overlay.html
index ea14d9c..262871e 100644
--- a/chrome/browser/resources/options2/startup_overlay.html
+++ b/chrome/browser/resources/options2/startup_overlay.html
@@ -1,4 +1,5 @@
 <div id="startup-overlay" class="page" hidden>
+  <div class="close-button"></div>
   <h1 i18n-content="startupPagesOverlay"></h1>
   <!-- This <input> element is always hidden. It needs to be here so that
        its 'controlled-by' attribute will get set when the urls preference is
diff --git a/chrome/browser/resources/shared/css/overlay.css b/chrome/browser/resources/shared/css/overlay.css
index 393acb5..8794ffe 100644
--- a/chrome/browser/resources/shared/css/overlay.css
+++ b/chrome/browser/resources/shared/css/overlay.css
@@ -22,9 +22,11 @@
 
 /* The foreground dialog. */
 .overlay .page {
+  -webkit-border-radius: 3px;
   -webkit-box-orient: vertical;
   background: white;
-  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3), 0 3px 57px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
+  color: #333;
   display: -webkit-box;
   height: 90%;
   max-height: 640px;
@@ -33,53 +35,73 @@
   position: relative;
 }
 
-/* keyframes used to shake the overlay */
-@-webkit-keyframes shake {
-  0% {
-    -webkit-transform: translateX(-5px) rotateZ(-0.5deg) translateY(-2px);
-  }
-  50% {
-    -webkit-transform: translateX(0px) rotateZ(0deg) translateY(0px);
+/* keyframes used to pulse the overlay */
+@-webkit-keyframes pulse {
+ 0% {
+   -webkit-transform: scale(1);
+ }
+ 40% {
+   -webkit-transform: scale(1.02);
   }
-  100% {
-    -webkit-transform: translateX(5px) rotateZ(0.5deg) translateY(-2px);
+ 60% {
+   -webkit-transform: scale(1.02);
   }
+ 100% {
+   -webkit-transform: scale(1);
+ }
 }
 
-.overlay .page.shake {
-  -webkit-animation-direction: alternate;
-  -webkit-animation-duration: 60ms;
-  -webkit-animation-iteration-count: 7;
-  -webkit-animation-name: shake;
+.overlay .page.pulse {
+  -webkit-animation-duration: 180ms;
+  -webkit-animation-iteration-count: 1;
+  -webkit-animation-name: pulse;
   -webkit-animation-timing-function: ease-in-out;
 }
 
+.overlay .page .close-button {
+  background-image: url('chrome://resources/images/x.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 44px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 44px;
+}
+
+html[dir='rtl'] .overlay .page .close-button {
+  left: 0;
+  right: auto;
+}
+
+.overlay .page .close-button:hover {
+  background-image: url('chrome://resources/images/x-hover.png');
+}
+
 .overlay .page h1 {
   -webkit-padding-end: 24px;
   -webkit-user-select: none;
-  background: -webkit-linear-gradient(white, #F8F8F8);
-  border-bottom: 1px solid rgba(188, 193, 208, .5);
   color: #333;
-  font-size: 1.1em;
-  font-weight: bold;
+  /* 120% of the body's font-size of 84% is 16px. This will keep the relative
+   * size between the body and these titles consistent. */
+  font-size: 120%;
   margin: 0;
-  padding: 10px 15px 8px;
+  padding: 14px 17px 0;
   text-shadow: white 0 1px 2px;
 }
 
 .overlay .page .content-area {
   -webkit-box-flex: 1;
   overflow: auto;
-  padding: 10px 15px 5px;
+  padding: 14px 17px 6px;
 }
 
 .overlay .page .action-area {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
-  border-top: 1px solid rgba(188, 193, 208, .5);
   display: -webkit-box;
-  padding: 12px;
+  padding: 14px;
 }
 
 html[dir='rtl'] .overlay .page .action-area {
diff --git a/chrome/browser/resources/shared/js/cr/ui/overlay.js b/chrome/browser/resources/shared/js/cr/ui/overlay.js
index c2b2fff..5ebec4a 100644
--- a/chrome/browser/resources/shared/js/cr/ui/overlay.js
+++ b/chrome/browser/resources/shared/js/cr/ui/overlay.js
@@ -51,10 +51,18 @@ cr.define('cr.ui.overlay', function() {
    * @param {HTMLElement} overlay The .overlay.
    */
   function setupOverlay(overlay) {
-    /* Remove the 'shake' animation any time the overlay is hidden or shown.
+    // Close the overlay on clicking any of the pages' close buttons.
+    var closeButtons = overlay.querySelectorAll('.page .close-button');
+    for (var i = 0; i < closeButtons.length; i++) {
+      closeButtons[i].addEventListener('click', function(e) {
+        cr.dispatchSimpleEvent(overlay, 'cancelOverlay');
+      });
+    }
+
+    /* Remove the 'pulse' animation any time the overlay is hidden or shown.
      */
     overlay.__defineSetter__('hidden', function(value) {
-      this.classList.remove('shake');
+      this.classList.remove('pulse');
       if (value)
         this.setAttribute('hidden', true);
       else
@@ -66,17 +74,17 @@ cr.define('cr.ui.overlay', function() {
 
     /* Shake when the user clicks away. */
     overlay.addEventListener('click', function(e) {
-      // Only shake if the overlay was the target of the click.
+      // Only pulse if the overlay was the target of the click.
       if (this != e.target)
         return;
 
       // This may be null while the overlay is closing.
       var overlayPage = this.querySelector('.page:not([hidden])');
       if (overlayPage)
-        overlayPage.classList.add('shake');
+        overlayPage.classList.add('pulse');
     });
     overlay.addEventListener('webkitAnimationEnd', function(e) {
-      e.target.classList.remove('shake');
+      e.target.classList.remove('pulse');
     });
   }
 
diff --git a/chrome/browser/resources/shared_resources.grd b/chrome/browser/resources/shared_resources.grd
index 96d9f3d..629315c 100644
--- a/chrome/browser/resources/shared_resources.grd
+++ b/chrome/browser/resources/shared_resources.grd
@@ -68,6 +68,10 @@ without changes to the corresponding grd file. -->
                file="shared/images/throbber.svg" type="BINDATA" />
       <include name="IDR_SHARED_IMAGES_TRASH"
                file="shared/images/trash.png" type="BINDATA" />
+      <include name="IDR_SHARED_IMAGES_X"
+               file="shared/images/x.png" type="BINDATA" />
+      <include name="IDR_SHARED_IMAGES_X_HOVER"
+               file="shared/images/x-hover.png" type="BINDATA" />
       <include name="IDR_SHARED_JS_CR"
                file="shared/js/cr.js" type="BINDATA" />
       <include name="IDR_SHARED_JS_CR_COMMAND_LINE"
diff --git a/chrome/browser/resources/sync_setup_overlay.html b/chrome/browser/resources/sync_setup_overlay.html
index fbb973b..5d182b2 100644
--- a/chrome/browser/resources/sync_setup_overlay.html
+++ b/chrome/browser/resources/sync_setup_overlay.html
@@ -11,6 +11,7 @@
     </div>
     <div class="sync-main-content">
       <div id="sync-setup-login-content-column">
+        <div class="close-button"></div>
         <h1 id="sync-setup-overlay-title" i18n-content="syncSetupOverlay"></h1>
         <div class="sign-in">
           <div id="top-blurb-error" class="reset-hidden" hidden>
@@ -195,6 +196,7 @@
       </div>
     </div>
     <div id="customize-sync-preferences" hidden>
+      <div class="close-button"></div>
       <h1 i18n-content="syncSetupConfigureTitle"></h1>
       <form id="choose-data-types-form">
         <div id="sync-configure-content" class="content-area">
@@ -384,6 +386,7 @@
     </div>
   </div>
   <div id="sync-setup-stop-syncing" hidden>
+    <div class="close-button"></div>
     <h1 i18n-content="stopSyncingTitle"></h1>
     <div class="content-area">
       <span i18n-values=".innerHTML:stopSyncingExplanation"></span>