Update css to be more mobile friendly

css/layout.css

@@ -7,22 +7,47 @@ body {
 	padding: 0;
 }
 #header-inner, #content, #footer-inner {
-	width: 80%;
-	min-width: 45em;
 	max-width: 60em;
-	margin: 0 auto; 
+	margin: 0 auto;
 }
 #main, #sidebar {
 	position: relative;
-} 
-#main {
-	float: left;
-	width: 73%;
-} 
-#sidebar {
-	float: right;
-	width: 23%;
 }
 #footer {
 	clear: both;
 }
+
+@media (min-width: 751px) {
+	#header-inner, #content, #footer-inner {
+		width: 80%;
+		min-width: 45em;
+	}
+	#main {
+		float: left;
+		width: 73%;
+	}
+	#sidebar {
+		float: right;
+		width: 23%;
+	}
+}
+
+@media (max-width: 750px) {
+	#header-inner, #content, #footer-inner {
+		width: 95%;
+	}
+	#main {
+		float: left;
+		width: 100%;
+		clear: both;
+	}
+	#sidebar {
+		float: left;
+		position: relative;
+		width: 75%;
+		left: 12.5%;
+	}
+	#sidebar.optional {
+		display: none;
+	}
+}

css/look.css

@@ -28,15 +28,28 @@ body {
 	right: 0em;
 	font-weight: bold;
 	font-size: 1.2em;
-	background: url('../graphics/cornerStripedLeft.png') no-repeat bottom left;
 }
-#header-inner #title a{
+#header-inner #title a {
 	display: block;
 	margin: 0;
 	padding: 15px 20px 10px 20px;
 	text-decoration: none;
 	color: #fff;
-	background: url('../graphics/cornerStripedRight.png') no-repeat top right;
+}
+/* Hide graphics when page is too narrow to avoid clashing with main header image */
+@media (max-width: 500px) {
+	#header-inner #title {
+		background-color: #88BBEE;
+		background-color: rgba(136, 187, 238, 0.8);
+	}
+}
+@media (min-width: 501px) {
+	#header-inner #title {
+		background: url('../graphics/cornerStripedLeft.png') no-repeat bottom left;
+	}
+	#header-inner #title a {
+		background: url('../graphics/cornerStripedRight.png') no-repeat top right;
+	}
 }
 #header-inner a #title-inner{
 	color: #d6d6c0;
@@ -86,21 +99,22 @@ div#tabs ul {
 	padding: 0;
 	list-style: none;
 	text-align: left;
+	background-color: #88BBEE;
+	background-color: rgba(136, 187, 238, 0.8);
 }
 div#tabs ul li {
-	margin: 0;
+	margin: 10px 0 0 0;
 	padding: 0;
-	display:inline;
+	display: inline-block;
 }
 div#tabs ul li a {
 	position: relative;
 	bottom: 3px;
 	font-weight: bold;
-	color: #357;
 	margin: 0 0 0 17px;
 	padding: 3px;
 	text-decoration:none;
-	background-color: #88BBEE;
+	color: #357;
 }
 div#tabs ul li:hover a {
 	color: #000;
@@ -108,7 +122,6 @@ div#tabs ul li:hover a {
 div#tabs ul li a.current {
 	border-top: #036 2px solid;
 }
-
 a {
 	text-decoration: none;
 	color: #2288aa;