Everything is horrible.

Change-Id: Id35180435716a269edb45cab286ec178e9dd7791

TimelessTemplate.php

@@ -211,8 +211,10 @@ class TimelessTemplate extends BaseTemplate {
 			<h3>
 				<label for="searchInput"><?php echo $this->getMsg( 'search' )->escaped() ?></label>
 			</h3>
-			<?php echo $this->makeSearchInput( array( "id" => "searchInput" ) ) ?>
 			<?php echo $this->makeSearchButton( 'go', array( 'id' => 'searchGoButton', 'class' => 'searchButton' ) ) ?>
+			<div id="searchInput-container">
+				<?php echo $this->makeSearchInput( array( "id" => "searchInput" ) ) ?>
+			</div>
 			<input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
 		</form>
 		<?php

resources/forms.less

@@ -158,22 +158,20 @@ input[type="submit"],
 input[type="button"],
 button {
 	padding: .25em 1em .1em 1em;
-	border: solid 1px @blue-dark;
+	border: solid 1px @grey;
 	border-bottom-width: @border;
-	text-shadow: 0 -1px 0 @blue-dark;
+	text-shadow: 0 -1px 0 @grey;
 	box-sizing: border-box;
 	border-radius: @radius;
-	background: @blue;
-	color: @text-inverse;
-	font-weight: bold;
+	background: @background;
+	color: @text;
 	min-height: 30px;
 
 	&:active {
-		background: @blue-bright;
-		border-color: @blue;
+		background: @grey-bright;
 	}
 	&:hover {
-		background: @blue-bright;
+		background: @grey-bright;
 	}
 }
 textarea {
@@ -183,13 +181,14 @@ textarea {
 	line-height: 1.3em;
 }
 textarea#wpTextbox1 {
-	border-color: @grey-bright;
+	border-color: @grey;
 }
 div.editOptions {
 	padding: 1.25em 1.75em;
 	padding: 1em;
-	border: solid @grey-bright;
+	border: solid @grey;
 	border-width: 0 1px @border;
+	background: @background2;
 
 	.mw-summary label {
 		padding-left: 0;

resources/screen-common.less

@@ -8,10 +8,15 @@ body {
 	margin: 0;
 	padding: 0;
 	color: @text;
-	background: @background;
+	background: @background2;
 	font-size: 1em;
 	line-height: 1.3;
 }
+#content {
+	background: @background;
+}
+
+/* Misc */
 
 a {
 	text-decoration: none;
@@ -48,4 +53,3 @@ a {
 #p-personal h3 {
 	.hidden;
 }
-

resources/screen-desktop.less

@@ -11,11 +11,82 @@
 }
 #p-search,
 #content {
-	margin-left: 14em;
-	margin-right: 14em;
+	margin-left: 12em;
+	margin-right: 12em;
 }
 #mw-related-navigation,
 #p-personal {
 	width: 12em;
 	float: right;
 }
+
+#mw-header-container {
+	position: fixed;
+	width: 100%;
+	background: @foreground;
+	color: @text-inverse;
+	height: 3em;
+	border-bottom: solid @border @foreground2;
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+}
+
+
+/* BANNER */
+
+#p-logo-text {
+	width: 10em;
+	text-align: center;
+	text-shadow: 0 -1px 0 @foreground2;
+
+	a {
+		color: @text-inverse;
+		font-family: @fonts-secondary;
+		font-variant: small-caps;
+		font-size: 1.75em;
+		display: block;
+	}
+}
+
+
+/* SEARCH */
+
+#p-search {
+	box-shadow: inset 0 2px 2px 1px rgba(0, 0, 0, 0.1);
+	background: @background;
+}
+#searchInput-container {
+	margin: .5em 8em 0 0;
+}
+#searchInput {
+	border: none;
+	margin: 0;
+	width: 100%;
+	height: 2.25em;
+	padding-left: 1em;
+	box-shadow: none;
+	background: transparent;
+}
+#searchGoButton {
+	float: right;
+	width: 7.5em;
+	height: 2.25em;
+	border: none;
+	background: transparent;
+}
+
+
+/* CONTENT */
+
+#content-container {
+	margin-top: 3em;
+}
+#content {
+	background: @background;
+	padding-top: 1em;
+	border: 1px @grey-bright;
+	border-style: none solid;
+	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.02);
+	overflow: hidden;
+	padding-right: 2em;
+	padding-left: 2em;
+}

resources/variables.less

@@ -2,6 +2,10 @@
 
 @text: #013;
 @background: #fff;
+@background2: #f3f3f3;
+
+@foreground: #777;
+@foreground2: #555;
 @text-inverse: #fff;
 
 @link: @blue;
@@ -29,6 +33,7 @@
 
 /* Flair */
 
+@fonts-secondary: 'Linux Libertine', 'Georgia', serif;
 @fonts: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
 @border: .2em;
 @radius: .2em;