Fixed #24444 -- Updated contrib.admin to use django-flat-theme

14 files changed, 907 insertions, 318 deletions

diff --git a/django/contrib/admin/static/admin/css/base.css b/django/contrib/admin/static/admin/css/base.css
index 66237f4f7c..c5e9f39c29 100644
--- a/django/contrib/admin/static/admin/css/base.css
+++ b/django/contrib/admin/static/admin/css/base.css
@@ -2,11 +2,13 @@
     DJANGO Admin styles
 */
 
+@import url(fonts.css);
+
 body {
     margin: 0;
     padding: 0;
-    font-size: 12px;
-    font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
+    font-size: 14px;
+    font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
     color: #333;
     background: #fff;
 }
@@ -14,7 +16,7 @@ body {
 /* LINKS */
 
 a:link, a:visited {
-    color: #5b80b2;
+    color: #447e9b;
     text-decoration: none;
 }
 
@@ -47,10 +49,10 @@ h1,h2,h3,h4,h5 {
 }
 
 h1 {
-    font-size: 18px;
+    margin: 0 0 20px;
+    font-weight: 300;
+    font-size: 20px;
     color: #666;
-    padding: 0 6px 0 0;
-    margin: 0 0 .2em 0;
 }
 
 h2 {
@@ -102,8 +104,8 @@ li ul {
 }
 
 li, dt, dd {
-    font-size: 11px;
-    line-height: 14px;
+    font-size: 13px;
+    line-height: 20px;
 }
 
 dt {
@@ -123,6 +125,8 @@ form {
 fieldset {
     margin: 0;
     padding: 0;
+    border: none;
+    border-top: 1px solid #eee;
 }
 
 blockquote {
@@ -136,7 +140,7 @@ blockquote {
 code, pre {
     font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
     color: #666;
-    font-size: 11px;
+    font-size: 12px;
 }
 
 pre.literal-block {
@@ -176,7 +180,7 @@ p.tiny {
 }
 
 .mini {
-    font-size: 9px;
+    font-size: 10px;
 }
 
 p.mini {
@@ -188,7 +192,7 @@ p.mini {
     color: #999;
 }
 
-.help-tooltip {
+img.help-tooltip {
     cursor: help;
 }
 
@@ -243,33 +247,33 @@ table {
 }
 
 td, th {
-    font-size: 11px;
-    line-height: 13px;
+    font-size: 13px;
+    line-height: 16px;
     border-bottom: 1px solid #eee;
     vertical-align: top;
-    padding: 5px;
-    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+    padding: 8px;
+    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
 }
 
 th {
+    font-weight: 600;
     text-align: left;
-    font-size: 12px;
-    font-weight: bold;
 }
 
 thead th,
 tfoot td {
     color: #666;
-    padding: 2px 5px;
+    padding: 5px 10px;
     font-size: 11px;
-    background: #e1e1e1 url(../img/nav-bg.gif) top left repeat-x;
-    border-left: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+    background: #fff;
+    border: none;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
 }
 
 tfoot td {
     border-bottom: none;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid #eee;
 }
 
 thead th:first-child,
@@ -281,10 +285,6 @@ thead th.optional {
     font-weight: normal !important;
 }
 
-fieldset table {
-    border-right: 1px solid #eee;
-}
-
 tr.row-label td {
     font-size: 9px;
     padding-top: 2px;
@@ -299,18 +299,20 @@ tr.alt {
 }
 
 .row1 {
-    background: #EDF3FE;
+    background: #fff;
 }
 
 .row2 {
-    background: #fff;
+    background: #f9f9f9;
 }
 
 /* SORTABLE TABLES */
 
 thead th {
-    padding: 2px 5px;
+    padding: 5px 10px;
     line-height: normal;
+    text-transform: uppercase;
+    background: #f6f6f6;
 }
 
 thead th a:link, thead th a:visited {
@@ -318,7 +320,7 @@ thead th a:link, thead th a:visited {
 }
 
 thead th.sorted {
-    background: #c5c5c5 url(../img/nav-bg-selected.gif) top left repeat-x;
+    background: #eee;
 }
 
 thead th.sorted .text {
@@ -326,18 +328,18 @@ thead th.sorted .text {
 }
 
 table thead th .text span {
-    padding: 2px 5px;
-    display:block;
+    padding: 8px 10px;
+    display: block;
 }
 
 table thead th .text a {
     display: block;
     cursor: pointer;
-    padding: 2px 5px;
+    padding: 8px 10px;
 }
 
 table thead th.sortable:hover {
-    background: #fff url(../img/nav-bg-reverse.gif) 0 -5px repeat-x;
+    background: #eee;
 }
 
 thead th.sorted a.sortremove {
@@ -350,7 +352,7 @@ table thead th.sorted:hover a.sortremove {
 
 table thead th.sorted .sortoptions {
     display: block;
-    padding: 4px 5px 0 5px;
+    padding: 10px 5px 0 5px;
     float: right;
     text-align: right;
 }
@@ -414,61 +416,78 @@ input, textarea, select, .form-row p, form .button {
     margin: 2px 0;
     padding: 2px 3px;
     vertical-align: middle;
-    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
     font-weight: normal;
-    font-size: 11px;
+    font-size: 13px;
 }
 
 textarea {
     vertical-align: top !important;
 }
 
-input[type=text], input[type=password], input[type=email], input[type=url], input[type=number],
-textarea, select, .vTextField {
+input[type=text], input[type=password], input[type=email], input[type=url],
+input[type=number], textarea, select, .vTextField {
     border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 5px 6px;
+    margin-top: 0;
+    outline: none;
+}
+
+input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
+input[type=url]:focus, input[type=number]:focus, textarea:focus, select:focus,
+.vTextField:focus {
+    border-color: #999;
+}
+
+select {
+    height: 30px;
+}
+
+select[multiple] {
+    min-height: 150px;
 }
 
 /* FORM BUTTONS */
 
 .button, input[type=submit], input[type=button], .submit-row input, a.button {
-    background: #fff url(../img/nav-bg.gif) bottom repeat-x;
-    padding: 3px 5px;
-    color: black;
-    border: 1px solid #bbb;
-    border-color: #ddd #aaa #aaa #ddd;
+    background: #79aec8;
+    padding: 10px 15px;
+    border: none;
+    outline: none;
+    border-radius: 4px;
+    color: #fff;
+    cursor: pointer;
 }
 
 a.button {
     padding: 4px 5px;
 }
 
-.button:active, input[type=submit]:active, input[type=button]:active {
-    background-image: url(../img/nav-bg-reverse.gif);
-    background-position: top;
+.button:active, input[type=submit]:active, input[type=button]:active,
+.button:hover, input[type=submit]:hover, input[type=button]:hover {
+    background: #609ab6;
 }
 
 .button[disabled], input[type=submit][disabled], input[type=button][disabled] {
-    background-image: url(../img/nav-bg.gif);
-    background-position: bottom;
     opacity: 0.4;
 }
 
 .button.default, input[type=submit].default, .submit-row input.default {
-    border: 2px solid #5b80b2;
-    background: #7CA0C7 url(../img/default-bg.gif) bottom repeat-x;
-    font-weight: bold;
-    color: #fff;
     float: right;
+    border: none;
+    font-weight: 400;
+    background: #417690;
 }
 
-.button.default:active, input[type=submit].default:active {
-    background-image: url(../img/default-bg-reverse.gif);
-    background-position: top;
+.button.default:active, input[type=submit].default:active,
+.button.default:hover, input[type=submit].default:hover {
+    background: #205067;
 }
 
-.button[disabled].default, input[type=submit][disabled].default, input[type=button][disabled].default {
-    background-image: url(../img/default-bg.gif);
-    background-position: bottom;
+.button[disabled].default,
+input[type=submit][disabled].default,
+input[type=button][disabled].default {
     opacity: 0.4;
 }
 
@@ -476,8 +495,8 @@ a.button {
 /* MODULES */
 
 .module {
-    border: 1px solid #ccc;
-    margin-bottom: 5px;
+    border: none;
+    margin-bottom: 30px;
     background: #fff;
 }
 
@@ -500,14 +519,21 @@ a.button {
 
 .module h2, .module caption, .inline-group h2 {
     margin: 0;
-    padding: 2px 5px 3px 5px;
-    font-size: 11px;
+    padding: 8px;
+    font-weight: 400;
+    font-size: 13px;
     text-align: left;
-    font-weight: bold;
-    background: #7CA0C7 url(../img/default-bg.gif) top left repeat-x;
+    background: #79aec8;
     color: #fff;
 }
 
+.module caption,
+.inline-group h2 {
+    font-size: 12px;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+
 .module table {
     border-collapse: collapse;
 }
@@ -520,51 +546,47 @@ ul.messagelist {
 }
 
 ul.messagelist li {
-    font-size: 12px;
-    font-weight: bold;
     display: block;
-    padding: 5px 5px 4px 25px;
-    margin: 0 0 3px 0;
-    border-bottom: 1px solid #ddd;
-    color: #666;
-    background: #dfd url(../img/icon_success.gif) 5px .3em no-repeat;
+    font-weight: 400;
+    font-size: 13px;
+    padding: 10px 10px 10px 65px;
+    margin: 0 0 10px 0;
+    background: #dfd url(../img/icon_success.gif) 40px 12px no-repeat;
+    color: #333;
 }
 
 ul.messagelist li.warning {
-    background: #ffc url(../img/icon_alert.gif) 5px .3em no-repeat;
+    background: #ffc url(../img/icon_alert.gif) 40px 10px no-repeat;
 }
 
 ul.messagelist li.error {
-    background: #ffefef url(../img/icon_error.gif) 5px .3em no-repeat;
+    background: #ffefef url(../img/icon_error.gif) 40px 11px no-repeat;
 }
 
 .errornote {
-    font-size: 12px !important;
-    font-weight: bold;
+    font-size: 14px !important;
+    font-weight: 700;
     display: block;
-    padding: 5px 5px 4px 25px;
-    margin: 0 0 3px 0;
-    border: 1px solid #c22;
-    color: #c11;
-    background: #ffefef url(../img/icon_error.gif) 5px .38em no-repeat;
-}
-
-.errornote, ul.errorlist {
-    border-radius: 1px;
+    padding: 10px 12px;
+    margin: 0 0 10px 0;
+    color: #ba2121;
+    border: 1px solid #ba2121;
+    border-radius: 4px;
+    background-color: #fff;
+    background-position: 5px 12px;
 }
 
 ul.errorlist {
     margin: 0 0 4px !important;
     padding: 0 !important;
-    color: #fff;
-    background: #c11;
+    color: #ba2121;
+    background: #fff;
 }
 
 ul.errorlist li {
-    font-size: 12px !important;
+    font-size: 13px !important;
     display: block;
-    padding: 5px 5px 4px 7px;
-    margin: 3px 0 0 0;
+    margin-bottom: 4px;
 }
 
 ul.errorlist li:first-child {
@@ -572,7 +594,7 @@ ul.errorlist li:first-child {
 }
 
 ul.errorlist li a {
-    color: #fff;
+    color: inherit;
     text-decoration: underline;
 }
 
@@ -585,17 +607,19 @@ td ul.errorlist li {
     margin: 0 !important;
 }
 
-.errors, .form-row.errors {
-    background: #ffefef;
+.form-row.errors {
+    margin: 0;
+    border: none;
+    border-bottom: 1px solid #eee;
+    background: none;
 }
 
-.form-row.errors {
-    border: 1px solid #c22;
-    margin: -1px;
+.form-row.errors ul.errorlist li {
+    padding-left: 0;
 }
 
 .errors input, .errors select, .errors textarea {
-    border: 1px solid #c11;
+    border: 1px solid #ba2121;
 }
 
 div.system-message {
@@ -620,29 +644,36 @@ div.system-message p.system-message-title {
 /* BREADCRUMBS */
 
 div.breadcrumbs {
-    background: #fff url(../img/nav-bg-reverse.gif) 0 -10px repeat-x;
-    padding: 2px 8px 3px 8px;
-    font-size: 11px;
-    color: #999;
-    border-top: 1px solid #fff;
-    border-bottom: 1px solid #ddd;
+    background: #79aec8;
+    padding: 10px 40px;
+    border: none;
+    font-size: 14px;
+    color: #c4dce8;
     text-align: left;
 }
 
+div.breadcrumbs a {
+    color: #fff;
+}
+
+div.breadcrumbs a:hover {
+    color: #c4dce8;
+}
+
 /* ACTION ICONS */
 
 .addlink {
-    padding-left: 12px;
+    padding-left: 14px;
     background: url(../img/icon_addlink.gif) 0 .2em no-repeat;
 }
 
 .changelink, .inlinechangelink {
-    padding-left: 12px;
+    padding-left: 14px;
     background: url(../img/icon_changelink.gif) 0 .2em no-repeat;
 }
 
 .deletelink {
-    padding-left: 12px;
+    padding-left: 14px;
     background: url(../img/icon_deletelink.gif) 0 .25em no-repeat;
 }
 
@@ -659,12 +690,10 @@ a.deletelink:hover {
 .object-tools {
     font-size: 10px;
     font-weight: bold;
-    font-family: Arial,Helvetica,sans-serif;
     padding-left: 0;
     float: right;
     position: relative;
-    margin-top: -2.4em;
-    margin-bottom: -2em;
+    margin-top: -48px;
 }
 
 .form-row .object-tools {
@@ -689,13 +718,17 @@ a.deletelink:hover {
 .object-tools a:link, .object-tools a:visited {
     display: block;
     float: left;
-    color: #fff;
-    padding: .2em 10px;
+    padding: 3px 12px;
     background: #999;
+    font-weight: 400;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #fff;
 }
 
 .object-tools a:hover, .object-tools li:hover a {
-    background-color: #5b80b2;
+    background-color: #417690;
 }
 
 .object-tools a.viewsitelink, .object-tools a.golink {
@@ -723,12 +756,17 @@ table#change-history tbody th {
 #container {
     position: relative;
     width: 100%;
-    min-width: 760px;
+    min-width: 980px;
     padding: 0;
 }
 
 #content {
-    margin: 10px 15px;
+    padding: 20px 40px;
+    margin: 0;
+}
+
+.dashboard #content {
+    width: 600px;
 }
 
 #content-main {
@@ -738,9 +776,9 @@ table#change-history tbody th {
 
 #content-related {
     float: right;
-    width: 18em;
+    width: 260px;
     position: relative;
-    margin-right: -19em;
+    margin-right: -300px;
 }
 
 #footer {
@@ -769,7 +807,7 @@ table#change-history tbody th {
 }
 
 .popup .colM {
-    width: 95%;
+    width: auto;
 }
 
 .subcol {
@@ -778,15 +816,15 @@ table#change-history tbody th {
     margin-right: 15px;
 }
 
-.dashboard #content {
-    width: 500px;
-}
 
 /* HEADER */
 
 #header {
-    width: 100%;
+    width: auto;
+    height: 40px;
+    padding: 10px 40px;
     background: #417690;
+    line-height: 40px;
     color: #ffc;
     overflow: hidden;
 }
@@ -802,15 +840,17 @@ table#change-history tbody th {
 #branding {
     float: left;
 }
+
 #branding h1 {
-    padding: 0 10px;
-    font-size: 18px;
-    margin: 8px 0;
-    font-weight: normal;
+    padding: 0;
+    margin: 0 20px 0 0;
+    font-weight: 300;
+    font-size: 24px;
+    color: #f5dd5d;
 }
 
 #branding h1, #branding h1 a:link, #branding h1 a:visited {
-    color: #f4f379;
+    color: #f5dd5d;
 }
 
 #branding h2 {
@@ -827,24 +867,110 @@ table#change-history tbody th {
 
 #user-tools {
     float: right;
-    padding: 1.2em 10px;
+    padding: 0;
+    margin: 0 0 0 20px;
+    font-weight: 300;
     font-size: 11px;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
     text-align: right;
 }
 
+#user-tools a {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+#user-tools a:hover {
+    text-decoration: none;
+    border-bottom-color: #79aec8;
+    color: #79aec8;
+}
+
 /* SIDEBAR */
 
+#content-related {
+    background: #f8f8f8;
+}
+
+#content-related .module {
+    background: none;
+}
+
 #content-related h3 {
-    font-size: 12px;
+    font-size: 14px;
     color: #666;
-    margin-bottom: 3px;
+    padding: 0 16px;
+    margin: 0 0 16px;
 }
 
 #content-related h4 {
-    font-size: 11px;
+    font-size: 13px;
+}
+
+#content-related p {
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
+#content-related .actionlist {
+    padding: 0;
+    margin: 16px;
+}
+
+#content-related .actionlist li {
+    line-height: 1.2;
+    margin-bottom: 10px;
+    padding-left: 18px;
 }
 
 #content-related .module h2 {
-    background: #eee url(../img/nav-bg.gif) bottom left repeat-x;
-    color: #666;
+    background: none;
+    padding: 16px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid #eaeaea;
+    font-size: 18px;
+    color: #333;
+}
+
+.delete-confirmation form input[type="submit"] {
+    background: #ba2121;
+    border-radius: 4px;
+    padding: 10px 15px;
+    color: #fff;
+}
+
+.delete-confirmation form input[type="submit"]:active,
+.delete-confirmation form input[type="submit"]:hover {
+    background: #a41515;
+}
+
+.delete-confirmation form .cancel-link {
+    display: inline-block;
+    vertical-align: middle;
+    height: 15px;
+    line-height: 15px;
+    background: #ddd;
+    border-radius: 4px;
+    padding: 10px 15px;
+    color: #333;
+    margin: 0 0 0 10px;
+}
+
+.delete-confirmation form .cancel-link:active,
+.delete-confirmation form .cancel-link:hover {
+    background: #ccc;
+}
+
+
+/* POPUP */
+.popup #content {
+    padding: 20px;
+}
+
+.popup #container {
+    min-width: 0;
+}
+
+.popup #header {
+    padding: 10px 20px;
 }
diff --git a/django/contrib/admin/static/admin/css/changelists.css b/django/contrib/admin/static/admin/css/changelists.css
index 3ba9b49c2c..06b7f0dcf2 100644
--- a/django/contrib/admin/static/admin/css/changelists.css
+++ b/django/contrib/admin/static/admin/css/changelists.css
@@ -12,7 +12,7 @@
 .change-list .hiddenfields { display:none; }
 
 .change-list .filtered table {
-    border-right: 1px solid #ddd;
+    border-right: none;
 }
 
 .change-list .filtered {
@@ -20,11 +20,12 @@
 }
 
 .change-list .filtered {
-    background: white url(../img/changelist-bg.gif) top right repeat-y !important;
+    background: #fff !important;
 }
 
-.change-list .filtered .results, .change-list .filtered .paginator, .filtered #toolbar, .filtered div.xfull {
-    margin-right: 160px !important;
+.change-list .filtered .results, .change-list .filtered .paginator,
+.filtered #toolbar, .filtered div.xfull {
+    margin-right: 280px !important;
     width: auto !important;
 }
 
@@ -42,16 +43,11 @@
 
 #changelist .paginator {
     color: #666;
-    border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
-    background: white url(../img/nav-bg.gif) 0 180% repeat-x;
+    background: #fff;
     overflow: hidden;
 }
 
-.change-list .filtered .paginator {
-    border-right: 1px solid #ddd;
-}
-
 /* CHANGELIST TABLES */
 
 #changelist table thead th {
@@ -65,21 +61,8 @@
     text-align: center;
 }
 
-#changelist table tbody td, #changelist table tbody th {
-    border-left: 1px solid #ddd;
-}
-
-#changelist table tbody td:first-child, #changelist table tbody th:first-child {
-    border-left: 0;
-    border-right: 1px solid #ddd;
-}
-
-#changelist table tbody th:first-child:last-child {
-    border-right: 0;
-}
-
 #changelist table tbody td.action-checkbox {
-    text-align:center;
+    text-align: center;
 }
 
 #changelist table tfoot {
@@ -89,23 +72,52 @@
 /* TOOLBAR */
 
 #changelist #toolbar {
-    padding: 3px;
-    border-bottom: 1px solid #ddd;
-    background: #e1e1e1 url(../img/nav-bg.gif) top left repeat-x;
+    padding: 8px 10px;
+    margin-bottom: 15px;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    background: #f8f8f8;
     color: #666;
 }
 
 #changelist #toolbar form input {
-    font-size: 11px;
-    padding: 1px 2px;
+    border-radius: 4px;
+    font-size: 14px;
+    padding: 5px;
+    color: #333;
 }
 
 #changelist #toolbar form #searchbar {
-    padding: 2px;
+    height: 19px;
+    border: 1px solid #ccc;
+    padding: 2px 5px;
+    margin: 0;
+    vertical-align: top;
+    font-size: 13px;
+}
+
+#changelist #toolbar form #searchbar:focus {
+    outline: none;
+    border-color: #999;
+}
+
+#changelist #toolbar form input[type="submit"] {
+    border: 1px solid #ccc;
+    padding: 2px 10px;
+    margin: 0;
+    vertical-align: -1px;
+    background: #fff url(../img/nav-bg.gif) bottom repeat-x;
+    cursor: pointer;
+    color: #333;
+}
+
+#changelist #toolbar form input[type="submit"]:hover {
+    border-color: #999;
 }
 
 #changelist #changelist-search img {
     vertical-align: middle;
+    margin-right: 4px;
 }
 
 /* FILTER COLUMN */
@@ -115,26 +127,37 @@
     top: 0;
     right: 0;
     z-index: 1000;
-    width: 160px;
-    border-left: 1px solid #ddd;
-    background: #efefef;
+    width: 240px;
+    background: #f8f8f8;
+    border-left: none;
     margin: 0;
 }
 
 #changelist-filter h2 {
-    font-size: 11px;
-    padding: 2px 5px;
-    border-bottom: 1px solid #ddd;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 5px 15px;
+    margin-bottom: 12px;
+    border-bottom: none;
 }
 
 #changelist-filter h3 {
-    font-size: 12px;
-    margin-bottom: 0;
+    font-weight: 400;
+    font-size: 14px;
+    padding: 0 15px;
+    margin-bottom: 10px;
 }
 
 #changelist-filter ul {
-    padding-left: 0;
-    margin-left: 10px;
+    margin: 5px 0;
+    padding: 0 15px 15px;
+    border-bottom: 1px solid #eaeaea;
+}
+
+#changelist-filter ul:last-child {
+    border-bottom: none;
+    padding-bottom: none;
 }
 
 #changelist-filter li {
@@ -144,6 +167,7 @@
 }
 
 #changelist-filter a {
+    display: block;
     color: #999;
 }
 
@@ -152,13 +176,13 @@
 }
 
 #changelist-filter li.selected {
-    border-left: 5px solid #ccc;
-    padding-left: 5px;
-    margin-left: -10px;
+    border-left: 5px solid #eaeaea;
+    padding-left: 10px;
+    margin-left: -15px;
 }
 
 #changelist-filter li.selected a {
-    color: #5b80b2 !important;
+    color: #5b80b2;
 }
 
 /* DATE DRILLDOWN */
@@ -191,7 +215,7 @@
 /* PAGINATOR */
 
 .paginator {
-    font-size: 11px;
+    font-size: 13px;
     padding-top: 10px;
     padding-bottom: 10px;
     line-height: 22px;
@@ -201,19 +225,21 @@
 
 .paginator a:link, .paginator a:visited {
     padding: 2px 6px;
-    border: solid 1px #ccc;
-    background: white;
+    background: #79aec8;
     text-decoration: none;
+    color: #fff;
 }
 
 .paginator a.showall {
     padding: 0 !important;
     border: none !important;
+    background: none !important;
+    color: #5b80b2 !important;
 }
 
 .paginator a.showall:hover {
     color: #036 !important;
-    background: transparent !important;
+    background: none !important;
 }
 
 .paginator .end {
@@ -230,19 +256,19 @@
 
 .paginator a:hover {
     color: white;
-    background: #5b80b2;
-    border-color: #036;
+    background: #036;
 }
 
 /* ACTIONS */
 
 .filtered .actions {
-    margin-right: 160px !important;
-    border-right: 1px solid #ddd;
+    margin-right: 280px !important;
+    border-right: none;
 }
 
 #changelist table input {
     margin: 0;
+    vertical-align: baseline;
 }
 
 #changelist table tbody tr.selected {
@@ -250,11 +276,12 @@
 }
 
 #changelist .actions {
+    padding: 10px;
+    background: #fff;
+    border-top: none;
+    border-bottom: none;
+    line-height: 24px;
     color: #999;
-    padding: 3px;
-    border-top: 1px solid #fff;
-    border-bottom: 1px solid #ddd;
-    background: white url(../img/nav-bg-reverse.gif) 0 -10px repeat-x;
 }
 
 #changelist .actions.selected {
@@ -267,7 +294,7 @@
 #changelist .actions span.action-counter,
 #changelist .actions span.clear,
 #changelist .actions span.question {
-    font-size: 11px;
+    font-size: 13px;
     margin: 0 0.5em;
     display: none;
 }
@@ -277,21 +304,36 @@
 }
 
 #changelist .actions select {
-    border: 1px solid #aaa;
-    margin-left: 0.5em;
-    padding: 1px 2px;
+    vertical-align: top;
+    height: 24px;
+    background: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    padding: 0 0 0 4px;
+    margin: 0;
+    margin-left: 10px;
 }
 
 #changelist .actions label {
-    font-size: 11px;
-    margin-left: 0.5em;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 13px;
 }
 
-#changelist #action-toggle {
-    display: none;
+#changelist .actions .button {
+    font-size: 13px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: #fff url(../img/nav-bg.gif) bottom repeat-x;
+    cursor: pointer;
+    height: 24px;
+    line-height: 1;
+    padding: 4px 8px;
+    margin: 0;
+    color: #333;
 }
 
-#changelist .actions .button {
-    font-size: 11px;
-    padding: 1px 2px;
+#changelist .actions .button:hover {
+    border-color: #999;
 }
diff --git a/django/contrib/admin/static/admin/css/fonts.css b/django/contrib/admin/static/admin/css/fonts.css
new file mode 100644
index 0000000000..c837e017c7
--- /dev/null
+++ b/django/contrib/admin/static/admin/css/fonts.css
@@ -0,0 +1,20 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url('../fonts/Roboto-Bold-webfont.woff');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('../fonts/Roboto-Regular-webfont.woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('../fonts/Roboto-Light-webfont.woff');
+    font-weight: 300;
+    font-style: normal;
+}
diff --git a/django/contrib/admin/static/admin/css/forms.css b/django/contrib/admin/static/admin/css/forms.css
index b06bbba194..9f75c30ba7 100644
--- a/django/contrib/admin/static/admin/css/forms.css
+++ b/django/contrib/admin/static/admin/css/forms.css
@@ -4,8 +4,8 @@
 
 .form-row {
     overflow: hidden;
-    padding: 8px 12px;
-    font-size: 11px;
+    padding: 10px;
+    font-size: 13px;
     border-bottom: 1px solid #eee;
 }
 
@@ -13,9 +13,14 @@
     vertical-align: middle;
 }
 
+.form-row label input[type="checkbox"] {
+    margin-top: 0;
+    vertical-align: 0;
+}
+
 form .form-row p {
     padding-left: 0;
-    font-size: 11px;
+    font-size: 11px !important;
 }
 
 .hidden {
@@ -33,7 +38,7 @@ form h4 {
 label {
     font-weight: normal !important;
     color: #666;
-    font-size: 12px;
+    font-size: 13px;
 }
 
 .required label, label.required {
@@ -52,6 +57,12 @@ form ul.radiolist label {
     display: inline;
 }
 
+form ul.radiolist input[type="radio"] {
+    margin: -2px 4px 0 0;
+    padding: 0;
+    outline: none;
+}
+
 form ul.inline {
     margin-left: 0;
     padding: 0;
@@ -66,10 +77,26 @@ form ul.inline li {
 
 .aligned label {
     display: block;
-    padding: 3px 10px 0 0;
+    padding: 4px 10px 0 0;
     float: left;
-    width: 8em;
+    width: 160px;
     word-wrap: break-word;
+    line-height: 1;
+}
+
+.aligned label:not(.vCheckboxLabel):after {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    height: 26px;
+}
+
+.aligned label + p:not(.help) {
+    font-size: 13px !important;
+    padding: 6px 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 170px;
 }
 
 .aligned ul label {
@@ -78,29 +105,67 @@ form ul.inline li {
     width: auto;
 }
 
+.aligned .form-row input {
+    margin-bottom: 0;
+}
+
 .colMS .aligned .vLargeTextField, .colMS .aligned .vXMLLargeTextField {
     width: 350px;
 }
 
-form .aligned p, form .aligned ul {
-    margin-left: 7em;
-    padding-left: 30px;
+form .aligned ul {
+    margin-left: 160px;
+    padding-left: 10px;
 }
 
-form .aligned table p {
-    margin-left: 0;
-    padding-left: 0;
+form .aligned ul.radiolist {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
 }
 
 form .aligned p.help {
     clear: left;
-    padding-left: 38px;
+    margin-top: 0;
+    margin-left: 160px;
+    padding-left: 10px;
+}
+
+form .aligned label + p.help {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+form .aligned p.help:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+form .aligned input + p.help,
+form .aligned textarea + p.help,
+form .aligned select + p.help {
+    margin-left: 160px;
+    padding-left: 10px;
+}
+
+form .aligned ul li {
+    list-style: none;
+}
+
+form .aligned table p {
+    margin-left: 0;
+    padding-left: 0;
 }
 
 .aligned .vCheckboxLabel {
     float: none !important;
-    display: inline;
-    padding-left: 4px;
+    display: inline-block;
+    vertical-align: -3px;
+    padding: 0 0 5px 5px;
+}
+
+.aligned .vCheckboxLabel + p.help {
+    margin-top: -4px;
 }
 
 .colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField {
@@ -120,11 +185,11 @@ fieldset .field-box {
 /* WIDE FIELDSETS */
 
 .wide label {
-    width: 15em !important;
+    width: 200px !important;
 }
 
 form .wide p {
-    margin-left: 15em;
+    margin-left: 200px !important;
 }
 
 form .wide p.help {
@@ -145,31 +210,42 @@ fieldset.collapsed h2, fieldset.collapsed {
     display: block !important;
 }
 
+fieldset.collapsed {
+    border: 1px solid #eee;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
 fieldset.collapsed h2 {
-    background-image: url(../img/nav-bg.gif);
-    background-position: bottom left;
-    color: #999;
+    background: #f8f8f8;
+    color: #666;
+}
+
+fieldset .collapse-toggle {
+    color: #fff;
 }
 
 fieldset.collapsed .collapse-toggle {
     background: transparent;
     display: inline !important;
+    color: #447e9b;
 }
 
 /* MONOSPACE TEXTAREAS */
 
 fieldset.monospace textarea {
-    font-family: "Bitstream Vera Sans Mono",Monaco,"Courier New",Courier,monospace;
+    font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
 }
 
 /* SUBMIT ROW */
 
 .submit-row {
-    padding: 5px 7px;
+    padding: 12px 14px;
+    margin: 0 0 20px;
+    background: #f8f8f8;
+    border: 1px solid #eee;
+    border-radius: 4px;
     text-align: right;
-    background: white url(../img/nav-bg.gif) 0 100% repeat-x;
-    border: 1px solid #ccc;
-    margin: 5px 0;
     overflow: hidden;
 }
 
@@ -178,20 +254,38 @@ body.popup .submit-row {
 }
 
 .submit-row input {
+    height: 35px;
+    line-height: 15px;
     margin: 0 0 0 5px;
 }
 
+.submit-row input.default {
+    margin: 0 0 0 8px;
+    text-transform: uppercase;
+}
+
 .submit-row p {
     margin: 0.3em;
 }
 
 .submit-row p.deletelink-box {
     float: left;
+    margin: 0;
 }
 
-.submit-row .deletelink {
-    background: url(../img/icon_deletelink.gif) 0 50% no-repeat;
-    padding-left: 14px;
+.submit-row a.deletelink {
+    display: block;
+    background: #ba2121;
+    border-radius: 4px;
+    padding: 10px 15px;
+    height: 15px;
+    line-height: 15px;
+    color: #fff;
+}
+
+.submit-row a.deletelink:hover,
+.submit-row a.deletelink:active {
+    background: #a41515;
 }
 
 /* CUSTOM FORM FIELDS */
@@ -252,12 +346,15 @@ body.popup .submit-row {
 
 .inline-group {
     padding: 0;
-    border: 1px solid #ccc;
-    margin: 10px 0;
+    margin: 0 0 30px;
+}
+
+.inline-group thead th {
+    padding: 8px 10px;
 }
 
 .inline-group .aligned label {
-    width: 8em;
+    width: 160px;
 }
 
 .inline-related {
@@ -267,10 +364,11 @@ body.popup .submit-row {
 .inline-related h3 {
     margin: 0;
     color: #666;
-    padding: 3px 5px;
-    font-size: 11px;
-    background: #e1e1e1 url(../img/nav-bg.gif) top left repeat-x;
-    border-bottom: 1px solid #ddd;
+    padding: 5px;
+    font-size: 13px;
+    background: #f8f8f8;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
 }
 
 .inline-related h3 span.delete {
@@ -301,7 +399,6 @@ body.popup .submit-row {
 
 .inline-group .tabular fieldset.module {
     border: none;
-    border-bottom: 1px solid #ddd;
 }
 
 .inline-related.tabular fieldset.module table {
@@ -331,7 +428,7 @@ body.popup .submit-row {
     position: absolute;
     left: 0;
     height: 1.1em;
-    padding: 2px 7px;
+    padding: 2px 9px;
     overflow: hidden;
     font-size: 9px;
     font-weight: bold;
@@ -353,14 +450,14 @@ body.popup .submit-row {
 .inline-group div.add-row,
 .inline-group .tabular tr.add-row td {
     color: #666;
-    padding: 3px 5px;
-    border-bottom: 1px solid #ddd;
-    background: #e1e1e1 url(../img/nav-bg.gif) top left repeat-x;
+    background: #f8f8f8;
+    padding: 8px 10px;
+    border-bottom: 1px solid #eee;
 }
 
 .inline-group .tabular tr.add-row td {
-    padding: 4px 5px 3px;
-    border-bottom: none;
+    padding: 8px 10px;
+    border-bottom: 1px solid #eee;
 }
 
 .inline-group ul.tools a.add,
@@ -368,7 +465,7 @@ body.popup .submit-row {
 .inline-group .tabular tr.add-row td a {
     background: url(../img/icon_addlink.gif) 0 50% no-repeat;
     padding-left: 14px;
-    font-size: 11px;
+    font-size: 12px;
     outline: 0; /* Remove dotted border around link */
 }
 
@@ -393,4 +490,18 @@ body.popup .submit-row {
     width: 16px;
     height: 16px;
     background-image: url(../img/selector-search.gif);
+    background-repeat: no-repeat;
+    background-position: 0 3px;
+    vertical-align: middle;
+    margin-top: -4px;
+}
+
+form .related-widget-wrapper ul {
+    display: inline-block;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.clearable-file-input input {
+    margin-top: 0;
 }
diff --git a/django/contrib/admin/static/admin/css/login.css b/django/contrib/admin/static/admin/css/login.css
index a91de117b4..cab3bbf585 100644
--- a/django/contrib/admin/static/admin/css/login.css
+++ b/django/contrib/admin/static/admin/css/login.css
@@ -1,31 +1,45 @@
 /* LOGIN FORM */
 
 body.login {
-    background: #eee;
+    background: #f8f8f8;
+}
+
+.login #header {
+    height: auto;
+    padding: 5px 16px;
+}
+
+.login #header h1 {
+    font-size: 18px;
+}
+
+.login #header h1 a {
+    color: #fff;
+}
+
+.login #content {
+    padding: 20px 20px 0;
 }
 
 .login #container {
-    background: white;
-    border: 1px solid #ccc;
+    background: #fff;
+    border: 1px solid #eaeaea;
+    border-radius: 4px;
+    overflow: hidden;
     width: 28em;
     min-width: 300px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 100px;
+    margin: 100px auto;
 }
 
 .login #content-main {
     width: 100%;
 }
 
-.login form {
-    margin-top: 1em;
-}
-
 .login .form-row {
     padding: 4px 0;
     float: left;
     width: 100%;
+    border-bottom: none;
 }
 
 .login .form-row label {
@@ -38,7 +52,7 @@ body.login {
 
 .login .form-row #id_username, .login .form-row #id_password {
     clear: both;
-    padding: 6px;
+    padding: 8px;
     width: 100%;
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
@@ -53,6 +67,10 @@ body.login {
 .login .submit-row {
     clear: both;
     padding: 1em 0 0 9.4em;
+    margin: 0;
+    border: none;
+    background: none;
+    text-align: left;
 }
 
 .login .password-reset-link {
diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css
index 15db401550..a2c9b1d0f1 100644
--- a/django/contrib/admin/static/admin/css/rtl.css
+++ b/django/contrib/admin/static/admin/css/rtl.css
@@ -48,7 +48,7 @@ th {
 
 thead th:first-child,
 tfoot td:first-child {
-    border-left: 1px solid #ddd !important;
+    border-left: none;
 }
 
 /* LAYOUT */
@@ -99,33 +99,33 @@ thead th.sorted .text {
 /* changelists styles */
 
 .change-list .filtered {
-    background: white url(../img/changelist-bg_rtl.gif) top left repeat-y !important;
+    background: #fff !important;
 }
 
 .change-list .filtered table {
-    border-left: 1px solid #ddd;
+    border-left: none;
     border-right: 0px none;
 }
 
 #changelist-filter {
     right: auto;
     left: 0;
-    border-left: 0px none;
-    border-right: 1px solid #ddd;
+    border-left: none;
+    border-right: none;
 }
 
 .change-list .filtered .results, .change-list .filtered .paginator, .filtered #toolbar, .filtered div.xfull {
     margin-right: 0px !important;
-    margin-left: 160px !important;
+    margin-left: 280px !important;
 }
 
 #changelist-filter li.selected {
-    border-left: 0px none;
-    padding-left: 0px;
+    border-left: none;
+    padding-left: 10px;
     margin-left: 0;
-    border-right: 5px solid #ccc;
-    padding-right: 5px;
-    margin-right: -10px;
+    border-right: 5px solid #eaeaea;
+    padding-right: 10px;
+    margin-right: -15px;
 }
 
 .filtered .actions {
@@ -136,8 +136,8 @@ thead th.sorted .text {
 }
 
 #changelist table tbody td:first-child, #changelist table tbody th:first-child {
-    border-right: 0;
-    border-left: 1px solid #ddd;
+    border-right: none;
+    border-left: none;
 }
 
 /* FORMS */
@@ -160,10 +160,18 @@ thead th.sorted .text {
     padding-right: 14px;
 }
 
+.submit-row input.default {
+    margin-left: 0;
+}
+
 .vDateField, .vTimeField {
     margin-left: 2px;
 }
 
+.aligned .form-row input {
+    margin-left: 5px;
+}
+
 form ul.inline li {
     float: right;
     padding-right: 0;
@@ -181,13 +189,13 @@ fieldset .field-box {
 }
 
 .errorlist li {
-    background-position: 100% .3em;
-    padding: 4px 25px 4px 5px;
+    background-position: 100% 12px;
+    padding: 0;
 }
 
 .errornote {
-    background-position: 100% .3em;
-    padding: 4px 25px 4px 5px;
+    background-position: 100% 12px;
+    padding: 10px 12px;
 }
 
 /* WIDGETS */
@@ -195,13 +203,13 @@ fieldset .field-box {
 .calendarnav-previous {
     top: 0;
     left: auto;
-    right: 0;
+    right: 10px;
 }
 
 .calendarnav-next {
     top: 0;
     right: auto;
-    left: 0;
+    left: 10px;
 }
 
 .calendar caption, .calendarbox h2 {
@@ -220,6 +228,10 @@ fieldset .field-box {
     float: left;
 }
 
+form .form-row p.datetime {
+    overflow: hidden;
+}
+
 /* MISC */
 
 .inline-related h2, .inline-group h2 {
diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css
index c828f24123..245fe57607 100644
--- a/django/contrib/admin/static/admin/css/widgets.css
+++ b/django/contrib/admin/static/admin/css/widgets.css
@@ -1,18 +1,18 @@
 /* SELECTOR (FILTER INTERFACE) */
 
 .selector {
-    width: 840px;
+    width: 800px;
     float: left;
 }
 
 .selector select {
-    width: 400px;
+    width: 380px;
     height: 17.2em;
 }
 
 .selector-available, .selector-chosen {
     float: left;
-    width: 400px;
+    width: 380px;
     text-align: center;
     margin-bottom: 5px;
 }
@@ -23,10 +23,16 @@
 
 .selector-available h2, .selector-chosen h2 {
     border: 1px solid #ccc;
+    border-radius: 4px 4px 0 0;
+}
+
+.selector-chosen h2 {
+    background: #79aec8;
+    color: #fff;
 }
 
 .selector .selector-available h2 {
-    background: white url(../img/nav-bg.gif) bottom left repeat-x;
+    background: #f8f8f8;
     color: #666;
 }
 
@@ -34,7 +40,7 @@
     background: white;
     border: 1px solid #ccc;
     border-width: 0 1px;
-    padding: 3px;
+    padding: 8px;
     color: #999;
     font-size: 10px;
     margin: 0;
@@ -43,12 +49,16 @@
 
 .selector .selector-filter label,
 .inline-group .aligned .selector .selector-filter label {
+    float: left;
+    margin: 0;
     width: 16px;
-    padding: 2px;
+    padding: 0 2px;
+    line-height: 1;
 }
 
 .selector .selector-available input {
-    width: 360px;
+    width: 320px;
+    margin-left: 8px;
 }
 
 .selector ul.selector-chooser {
@@ -67,8 +77,9 @@
 }
 
 .selector select {
-    margin-bottom: 10px;
-    margin-top: 0;
+    padding: 0 10px;
+    margin: 0 0 10px;
+    border-radius: 0 0 4px 4px;
 }
 
 .selector-add, .selector-remove {
@@ -110,11 +121,11 @@ a.selector-chooseall, a.selector-clearall {
 }
 
 a.selector-chooseall {
-    padding: 3px 18px 3px 0;
+    padding: 1px 18px 3px 0;
 }
 
 a.selector-clearall {
-    padding: 3px 0 3px 18px;
+    padding: 1px 0 3px 18px;
 }
 
 a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
@@ -224,15 +235,27 @@ p.datetime {
     margin: 0;
     padding: 0;
     color: #666;
-    font-size: 11px;
+    font-size: 13px !important;
     font-weight: bold;
 }
 
+form .form-row p.datetime {
+    font-size: 13px !important;
+    margin-left: 160px;
+    padding-left: 10px !important;
+}
+
 .datetime span {
+    white-space: nowrap;
+    font-weight: normal;
     font-size: 11px;
     color: #ccc;
-    font-weight: normal;
-    white-space: nowrap;
+}
+
+.datetime input {
+    min-width: 0;
+    margin-left: 5px;
+    margin-bottom: 4px !important;
 }
 
 table p.datetime {
@@ -283,6 +306,10 @@ p.file-upload {
     font-weight: bold;
 }
 
+.aligned p.file-upload {
+    margin-left: 170px;
+}
+
 .file-upload a {
     font-weight: normal;
 }
@@ -302,10 +329,14 @@ span.clearable-file-input label {
 
 .calendarbox, .clockbox {
     margin: 5px auto;
-    font-size: 11px;
-    width: 16em;
+    font-size: 12px;
+    width: 19em;
     text-align: center;
     background: white;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
     position: relative;
 }
 
@@ -328,22 +359,27 @@ span.clearable-file-input label {
 
 .calendar caption, .calendarbox h2 {
     margin: 0;
-    font-size: 11px;
     text-align: center;
     border-top: none;
+    background: #f5dd5d;
+    font-weight: 700;
+    font-size: 12px;
+    color: #333;
 }
 
 .calendar th {
-    font-size: 10px;
-    color: #666;
-    padding: 2px 3px;
-    text-align: center;
-    background: #e1e1e1 url(../img/nav-bg.gif) 0 50% repeat-x;
+    padding: 8px 5px;
+    background: #f8f8f8;
     border-bottom: 1px solid #ddd;
+    font-weight: 400;
+    font-size: 12px;
+    text-align: center;
+    color: #666;
 }
 
 .calendar td {
-    font-size: 11px;
+    font-weight: 400;
+    font-size: 12px;
     text-align: center;
     padding: 0;
     border-top: 1px solid #eee;
@@ -351,32 +387,33 @@ span.clearable-file-input label {
 }
 
 .calendar td.selected a {
-    background: #C9DBED;
+    background: #79aec8;
+    color: #fff;
 }
 
 .calendar td.nonday {
-    background: #efefef;
+    background: #f8f8f8;
 }
 
 .calendar td.today a {
-    background: #ffc;
+    font-weight: 700;
 }
 
 .calendar td a, .timelist a {
     display: block;
-    font-weight: bold;
-    padding: 4px;
+    font-weight: 400;
+    padding: 8px;
     text-decoration: none;
     color: #444;
 }
 
 .calendar td a:hover, .timelist a:hover {
-    background: #5b80b2;
+    background: #79aec8;
     color: white;
 }
 
 .calendar td a:active, .timelist a:active {
-    background: #036;
+    background: #417690;
     color: white;
 }
 
@@ -394,47 +431,52 @@ span.clearable-file-input label {
 
 .calendar-shortcuts {
     background: white;
-    font-size: 10px;
+    font-size: 11px;
     line-height: 11px;
     border-top: 1px solid #eee;
-    padding: 3px 0 4px;
+    padding: 8px 0;
     color: #ccc;
 }
 
 .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
     display: block;
     position: absolute;
-    font-weight: bold;
+    top: 7px;
+    border: 1px solid #333;
+    border-radius: 50%;
+    background: #fff;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    line-height: 16px;
     font-size: 12px;
-    background: #C9DBED url(../img/default-bg.gif) bottom left repeat-x;
-    padding: 1px 4px 2px 4px;
-    color: white;
+    color: #333;
 }
 
 .calendarnav-previous:hover, .calendarnav-next:hover {
-    background: #036;
+    background: #333;
+    color: #fff;
 }
 
 .calendarnav-previous {
-    top: 0;
-    left: 0;
+    left: 10px;
 }
 
 .calendarnav-next {
-    top: 0;
-    right: 0;
+    right: 10px;
 }
 
 .calendar-cancel {
     margin: 0 !important;
-    padding: 0 !important;
-    font-size: 10px;
-    background: #e1e1e1 url(../img/nav-bg.gif) 0 50% repeat-x;
+    padding: 4px 0 !important;
+    font-size: 12px;
+    background: #eee;
     border-top: 1px solid #ddd;
+    color: #333;
 }
 
 .calendar-cancel:hover {
-    background: #e1e1e1 url(../img/nav-bg-reverse.gif) 0 50% repeat-x;
+    background: #ddd;
 }
 
 .calendar-cancel a {
@@ -621,3 +663,8 @@ ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover {
 .related-widget-wrapper-link:link {
     opacity: 1;
 }
+
+select + .related-widget-wrapper-link,
+.related-widget-wrapper-link + .related-widget-wrapper-link {
+    margin-left: 7px;
+}
diff --git a/django/contrib/admin/static/admin/fonts/LICENSE.txt b/django/contrib/admin/static/admin/fonts/LICENSE.txt
new file mode 100755
index 0000000000..75b52484ea
--- /dev/null
+++ b/django/contrib/admin/static/admin/fonts/LICENSE.txt
@@ -0,0 +1,202 @@
+

+                                 Apache License

+                           Version 2.0, January 2004

+                        http://www.apache.org/licenses/

+

+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

+

+   1. Definitions.

+

+      "License" shall mean the terms and conditions for use, reproduction,

+      and distribution as defined by Sections 1 through 9 of this document.

+

+      "Licensor" shall mean the copyright owner or entity authorized by

+      the copyright owner that is granting the License.

+

+      "Legal Entity" shall mean the union of the acting entity and all

+      other entities that control, are controlled by, or are under common

+      control with that entity. For the purposes of this definition,

+      "control" means (i) the power, direct or indirect, to cause the

+      direction or management of such entity, whether by contract or

+      otherwise, or (ii) ownership of fifty percent (50%) or more of the

+      outstanding shares, or (iii) beneficial ownership of such entity.

+

+      "You" (or "Your") shall mean an individual or Legal Entity

+      exercising permissions granted by this License.

+

+      "Source" form shall mean the preferred form for making modifications,

+      including but not limited to software source code, documentation

+      source, and configuration files.

+

+      "Object" form shall mean any form resulting from mechanical

+      transformation or translation of a Source form, including but

+      not limited to compiled object code, generated documentation,

+      and conversions to other media types.

+

+      "Work" shall mean the work of authorship, whether in Source or

+      Object form, made available under the License, as indicated by a

+      copyright notice that is included in or attached to the work

+      (an example is provided in the Appendix below).

+

+      "Derivative Works" shall mean any work, whether in Source or Object

+      form, that is based on (or derived from) the Work and for which the

+      editorial revisions, annotations, elaborations, or other modifications

+      represent, as a whole, an original work of authorship. For the purposes

+      of this License, Derivative Works shall not include works that remain

+      separable from, or merely link (or bind by name) to the interfaces of,

+      the Work and Derivative Works thereof.

+

+      "Contribution" shall mean any work of authorship, including

+      the original version of the Work and any modifications or additions

+      to that Work or Derivative Works thereof, that is intentionally

+      submitted to Licensor for inclusion in the Work by the copyright owner

+      or by an individual or Legal Entity authorized to submit on behalf of

+      the copyright owner. For the purposes of this definition, "submitted"

+      means any form of electronic, verbal, or written communication sent

+      to the Licensor or its representatives, including but not limited to

+      communication on electronic mailing lists, source code control systems,

+      and issue tracking systems that are managed by, or on behalf of, the

+      Licensor for the purpose of discussing and improving the Work, but

+      excluding communication that is conspicuously marked or otherwise

+      designated in writing by the copyright owner as "Not a Contribution."

+

+      "Contributor" shall mean Licensor and any individual or Legal Entity

+      on behalf of whom a Contribution has been received by Licensor and

+      subsequently incorporated within the Work.

+

+   2. Grant of Copyright License. Subject to the terms and conditions of

+      this License, each Contributor hereby grants to You a perpetual,

+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable

+      copyright license to reproduce, prepare Derivative Works of,

+      publicly display, publicly perform, sublicense, and distribute the

+      Work and such Derivative Works in Source or Object form.

+

+   3. Grant of Patent License. Subject to the terms and conditions of

+      this License, each Contributor hereby grants to You a perpetual,

+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable

+      (except as stated in this section) patent license to make, have made,

+      use, offer to sell, sell, import, and otherwise transfer the Work,

+      where such license applies only to those patent claims licensable

+      by such Contributor that are necessarily infringed by their

+      Contribution(s) alone or by combination of their Contribution(s)

+      with the Work to which such Contribution(s) was submitted. If You

+      institute patent litigation against any entity (including a

+      cross-claim or counterclaim in a lawsuit) alleging that the Work

+      or a Contribution incorporated within the Work constitutes direct

+      or contributory patent infringement, then any patent licenses

+      granted to You under this License for that Work shall terminate

+      as of the date such litigation is filed.

+

+   4. Redistribution. You may reproduce and distribute copies of the

+      Work or Derivative Works thereof in any medium, with or without

+      modifications, and in Source or Object form, provided that You

+      meet the following conditions:

+

+      (a) You must give any other recipients of the Work or

+          Derivative Works a copy of this License; and

+

+      (b) You must cause any modified files to carry prominent notices

+          stating that You changed the files; and

+

+      (c) You must retain, in the Source form of any Derivative Works

+          that You distribute, all copyright, patent, trademark, and

+          attribution notices from the Source form of the Work,

+          excluding those notices that do not pertain to any part of

+          the Derivative Works; and

+

+      (d) If the Work includes a "NOTICE" text file as part of its

+          distribution, then any Derivative Works that You distribute must

+          include a readable copy of the attribution notices contained

+          within such NOTICE file, excluding those notices that do not

+          pertain to any part of the Derivative Works, in at least one

+          of the following places: within a NOTICE text file distributed

+          as part of the Derivative Works; within the Source form or

+          documentation, if provided along with the Derivative Works; or,

+          within a display generated by the Derivative Works, if and

+          wherever such third-party notices normally appear. The contents

+          of the NOTICE file are for informational purposes only and

+          do not modify the License. You may add Your own attribution

+          notices within Derivative Works that You distribute, alongside

+          or as an addendum to the NOTICE text from the Work, provided

+          that such additional attribution notices cannot be construed

+          as modifying the License.

+

+      You may add Your own copyright statement to Your modifications and

+      may provide additional or different license terms and conditions

+      for use, reproduction, or distribution of Your modifications, or

+      for any such Derivative Works as a whole, provided Your use,

+      reproduction, and distribution of the Work otherwise complies with

+      the conditions stated in this License.

+

+   5. Submission of Contributions. Unless You explicitly state otherwise,

+      any Contribution intentionally submitted for inclusion in the Work

+      by You to the Licensor shall be under the terms and conditions of

+      this License, without any additional terms or conditions.

+      Notwithstanding the above, nothing herein shall supersede or modify

+      the terms of any separate license agreement you may have executed

+      with Licensor regarding such Contributions.

+

+   6. Trademarks. This License does not grant permission to use the trade

+      names, trademarks, service marks, or product names of the Licensor,

+      except as required for reasonable and customary use in describing the

+      origin of the Work and reproducing the content of the NOTICE file.

+

+   7. Disclaimer of Warranty. Unless required by applicable law or

+      agreed to in writing, Licensor provides the Work (and each

+      Contributor provides its Contributions) on an "AS IS" BASIS,

+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or

+      implied, including, without limitation, any warranties or conditions

+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A

+      PARTICULAR PURPOSE. You are solely responsible for determining the

+      appropriateness of using or redistributing the Work and assume any

+      risks associated with Your exercise of permissions under this License.

+

+   8. Limitation of Liability. In no event and under no legal theory,

+      whether in tort (including negligence), contract, or otherwise,

+      unless required by applicable law (such as deliberate and grossly

+      negligent acts) or agreed to in writing, shall any Contributor be

+      liable to You for damages, including any direct, indirect, special,

+      incidental, or consequential damages of any character arising as a

+      result of this License or out of the use or inability to use the

+      Work (including but not limited to damages for loss of goodwill,

+      work stoppage, computer failure or malfunction, or any and all

+      other commercial damages or losses), even if such Contributor

+      has been advised of the possibility of such damages.

+

+   9. Accepting Warranty or Additional Liability. While redistributing

+      the Work or Derivative Works thereof, You may choose to offer,

+      and charge a fee for, acceptance of support, warranty, indemnity,

+      or other liability obligations and/or rights consistent with this

+      License. However, in accepting such obligations, You may act only

+      on Your own behalf and on Your sole responsibility, not on behalf

+      of any other Contributor, and only if You agree to indemnify,

+      defend, and hold each Contributor harmless for any liability

+      incurred by, or claims asserted against, such Contributor by reason

+      of your accepting any such warranty or additional liability.

+

+   END OF TERMS AND CONDITIONS

+

+   APPENDIX: How to apply the Apache License to your work.

+

+      To apply the Apache License to your work, attach the following

+      boilerplate notice, with the fields enclosed by brackets "[]"

+      replaced with your own identifying information. (Don't include

+      the brackets!)  The text should be enclosed in the appropriate

+      comment syntax for the file format. We also recommend that a

+      file or class name and description of purpose be included on the

+      same "printed page" as the copyright notice for easier

+      identification within third-party archives.

+

+   Copyright [yyyy] [name of copyright owner]

+

+   Licensed under the Apache License, Version 2.0 (the "License");

+   you may not use this file except in compliance with the License.

+   You may obtain a copy of the License at

+

+       http://www.apache.org/licenses/LICENSE-2.0

+

+   Unless required by applicable law or agreed to in writing, software

+   distributed under the License is distributed on an "AS IS" BASIS,

+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+   See the License for the specific language governing permissions and

+   limitations under the License.

diff --git a/django/contrib/admin/static/admin/fonts/README.txt b/django/contrib/admin/static/admin/fonts/README.txt
new file mode 100644
index 0000000000..93b476cfcb
--- /dev/null
+++ b/django/contrib/admin/static/admin/fonts/README.txt
@@ -0,0 +1,2 @@
+Roboto webfont source: https://code.google.com/p/roboto-webfont/
+Weights used in this project: Light (300), Regular (400), Bold (700)
diff --git a/django/contrib/admin/static/admin/fonts/Roboto-Bold-webfont.woff b/django/contrib/admin/static/admin/fonts/Roboto-Bold-webfont.woff
new file mode 100644
index 0000000000..03357ce4f5
--- /dev/null
+++ b/django/contrib/admin/static/admin/fonts/Roboto-Bold-webfont.woff
diff --git a/django/contrib/admin/static/admin/fonts/Roboto-Light-webfont.woff b/django/contrib/admin/static/admin/fonts/Roboto-Light-webfont.woff
new file mode 100644
index 0000000000..f6abd87135
--- /dev/null
+++ b/django/contrib/admin/static/admin/fonts/Roboto-Light-webfont.woff
diff --git a/django/contrib/admin/static/admin/fonts/Roboto-Regular-webfont.woff b/django/contrib/admin/static/admin/fonts/Roboto-Regular-webfont.woff
new file mode 100644
index 0000000000..6ff6afd8c8
--- /dev/null
+++ b/django/contrib/admin/static/admin/fonts/Roboto-Regular-webfont.woff
diff --git a/docs/releases/1.9.txt b/docs/releases/1.9.txt
index 2e8b44adf0..96a757dfe2 100644
--- a/docs/releases/1.9.txt
+++ b/docs/releases/1.9.txt
@@ -115,6 +115,15 @@ though:
 
 .. _django-braces: http://django-braces.readthedocs.org/en/latest/index.html
 
+New styling for ``contrib.admin``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The admin sports a modern, flat design. It still provides a fully-functional
+experience to `YUI's A-grade`_ browsers. Older browser may experience varying
+levels of graceful degradation.
+
+.. _YUI's A-grade: http://yuilibrary.com/yui/docs/tutorials/gbs/
+
 Minor features
 ~~~~~~~~~~~~~~
 
diff --git a/tests/admin_widgets/tests.py b/tests/admin_widgets/tests.py
index c42553a339..50e0ccb715 100644
--- a/tests/admin_widgets/tests.py
+++ b/tests/admin_widgets/tests.py
@@ -755,7 +755,7 @@ class DateTimePickerSeleniumFirefoxTests(SeleniumDataMixin, AdminSeleniumWebDriv
 
             # Get the expected caption
             may_translation = month_names.split(' ')[4]
-            expected_caption = '{0:s} {1:d}'.format(may_translation, 1984)
+            expected_caption = '{0:s} {1:d}'.format(may_translation.upper(), 1984)
 
             # Test with every locale
             with override_settings(LANGUAGE_CODE=language_code, USE_L10N=True):