Awesome about page design for WordPress 3.7.

The page includes a giant password meter that serves as both an animated example and a working demo. How cool is that?

props jorbin, melchoyce.
see #25603.

Built from https://develop.svn.wordpress.org/trunk@25839


git-svn-id: http://core.svn.wordpress.org/trunk@25751 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors-classic.css

@@ -2000,13 +2000,6 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 	color: #464646;
 }
 
-.about-wrap .feature-section img {
-	background: #fff;
-	border: 1px #ccc solid;
-	-webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
-	box-shadow:         0 1px 3px rgba( 0, 0, 0, 0.3 );
-}
-
 .about-wrap h4.wp-people-group {
 	text-shadow: 1px 1px 1px #fff;
 }

wp-admin/css/colors-fresh.css

@@ -1889,13 +1889,6 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 	color: #464646;
 }
 
-.about-wrap .feature-section img {
-	background: #fff;
-	border: 1px #ccc solid;
-	-webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
-	box-shadow:         0 1px 3px rgba( 0, 0, 0, 0.3 );
-}
-
 .about-wrap h4.wp-people-group {
 	text-shadow: 1px 1px 1px #fff;
 }

wp-admin/css/wp-admin.css

@@ -5766,6 +5766,51 @@ h2 .nav-tab {
 	display: none !important;
 }
 
+.about-wrap p.about-notice {
+	background-color: #ffffe0;
+	border: 1px solid #e6db55;
+	margin: 5px 0 15px;
+	padding: 0.4em 0.8em;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+}
+
+.about-wrap .about-passwords {
+	margin: 20px 0;
+	padding: 1px 20px 10px;
+	background-color: #f9f9f9;
+}
+
+.about-wrap .about-password-meter input {
+	font-size: 250%;
+	width: 100%;
+    display: block;
+    width: 100%;
+    padding: 5px;
+}
+
+.about-wrap .about-password-meter #pass-strength-result {
+	font-weight: normal !important;
+    display:block !important;
+	font-size: 150%;
+    width: 100%;
+    padding: 17px 0;
+    margin-bottom: 15px;
+}
+
+.about-wrap .feature-section img {
+	border: 0;
+	background: transparent;
+	box-shadow: none;
+	-webkit-box-shadow: none;
+	max-width: 20%;
+}
+
+.about-wrap .feature-section div p img {
+	float: right;
+	margin-left: 10px;
+}
+
 /* Typography */
 
 .about-wrap p {
@@ -5808,6 +5853,8 @@ h2 .nav-tab {
 	padding-bottom: 20px;
 }
 
+.about-wrap .feature-section 
+
 .about-wrap .feature-section h4 {
 	margin-bottom: 0.6em;
 }
@@ -5960,6 +6007,21 @@ h2 .nav-tab {
 	float: left;
 }
 
+.about-wrap .three-col.about-updates div:nth-of-type(1),
+.about-wrap .three-col.about-updates div:nth-of-type(3) {
+	width: 37%;
+	margin: 0;
+}
+
+.about-wrap .three-col.about-updates div:nth-of-type(2) {
+	width: 16%;
+	margin: 0 5%;
+}
+
+.about-wrap .three-col.about-updates img {
+	margin: 0;
+}
+
 .about-wrap .three-col-images {
 	text-align: center;
 }