diff --git a/templates/base.html b/templates/base.html
index d9a5b1d0c..f8abfc20a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -40,49 +40,9 @@
 
 	<!-- Bootstrap base CSS -->
 	<link rel="stylesheet" href="{{ basehref }}/static/theme/css/bootstrap.min.css" />
-	<style type="text/css">
-	/* custom styles, load before bootstrap responsive styles */
-	body {
-        padding-top:60px;
-        padding-bottom:40px;
-      	}
-	.sidebar-nav {
-	padding: 9px 0;
-	}
-	</style>
 	<!-- Bootstrap responsive CSS -->
 	<link rel="stylesheet" href="{{ basehref }}/static/theme/css/bootstrap-responsive.min.css" />
-	<style type="text/css">
-	/* custom styles, load after all bootstrap styles */
-	.super-hero {
-	margin-top:25px;
-	}
-	.logo-top {
-	float:left;
-	padding-right:5px;
-	}
-	.brand {
-	padding-top:8px;
-	}
-	.white {
-	color:#fff;
-	}
-	.error-large {
-	font-size:1.2em;
-	padding:10px;
-	}
-	.main-graphic {
-	float:right;
-	padding:25px;
-	}
-	.nav-icon {
-	margin-right:8px;
-	}
-	.sidenav-icon {
-	margin-right:8px;
-	padding-right:5px;
-	}
-	</style>
+	<link rel="stylesheet" href="{{ basehref }}/static/theme/css/plinth.css" />
 	<!-- CSS from previous Plinth template, not sure what to keep yet -->
 	{{ css|safe }}
 	<!-- End Plinth CSS -->
diff --git a/themes/default/css/plinth.css b/themes/default/css/plinth.css
new file mode 100644
index 000000000..ce817d11f
--- /dev/null
+++ b/themes/default/css/plinth.css
@@ -0,0 +1,49 @@
+@media (min-width: 979px) {
+    body {
+        padding-top: 60px;
+    }
+}
+
+body {
+    padding-bottom: 40px;
+}
+
+.sidebar-nav {
+    padding: 9px 0;
+}
+
+.super-hero {
+    margin-top: 25px;
+}
+
+.logo-top {
+    float: left;
+    padding-right: 5px;
+}
+
+.brand {
+    padding-top: 8px;
+}
+
+.white {
+    color: #fff;
+}
+
+.error-large {
+    font-size: 1.2em;
+    padding: 10px;
+}
+
+.main-graphic {
+    float: right;
+    padding: 25px;
+}
+
+.nav-icon {
+    margin-right: 8px;
+}
+
+.sidenav-icon {
+    margin-right: 8px;
+    padding-right: 5px;
+}