Add basic responsive styles

css/DocumentationViewer.css

@@ -275,7 +275,7 @@ fieldset { border: none; }
 	#language input.action { float: right; margin-top: 4px;}
 	
 /* Footer */
-#footer { width: 960px; 
+#footer { 
 	margin: 21px auto; 
 }
 	#footer p { 
@@ -561,7 +561,6 @@ span.is-folder {float: right;}
 
 
 .container {
-	min-width: 540px; 
 	max-width: 960px; 
 	margin: auto;
 }
@@ -579,6 +578,15 @@ span.is-folder {float: right;}
 		border: none;
 	}
 
+	#content-column img {
+		max-width: 90%;
+		border: 1px solid #ccc;
+		box-shadow: 0 0 6px #ddd;
+		padding: 6px;
+		margin: 7px 0;
+		border-radius: 3px;
+	}
+
 #sidebar-column {
 	width: 22.5%;
 	float: left;
@@ -768,8 +776,12 @@ span.is-folder {float: right;}
 	#sidebar-column .sidebar-box input.text {
 		padding: 3px 3px 4px 3px;
 	}
+
 /* Footer */
-#footer { width: 960px; margin: 22px auto; }
+#footer { 
+	padding: 21px 1.25%; 
+	max-width: 960px; 
+}
 	#footer p { font-size: 11px; line-height: 18px; color: #798D85;}
 		#footer p a { color: #798D85; text-decoration: underline; }
 		#footer .cc-logo { float: right; }
@@ -969,4 +981,41 @@ ul.pagination {
 .typography a[href$=".EXE"],
 .typography a.application {
 	padding: 2px; padding-left: 20px; background: url(../../docsviewer/images/icons/application.png) no-repeat left center; 
+}
+
+@media screen and (max-width: 540px) {
+	#content-column {
+		width: 100%;
+		padding: 0;
+	}
+
+	#container {
+		padding: 15px;
+	}
+
+	#sidebar-column {
+		width: 100%;
+	}
+
+	#sidebar-column .sidebar-box {
+		padding: 10px;
+	}
+
+	#footer {
+		padding: 20px;
+	}
+
+	.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
+	.pinned table { border-right: none; border-left: none; width: 100%; }
+	.pinned table th, .pinned table td { white-space: nowrap; }
+	.pinned td:last-child { border-bottom: 0; }
+	
+	div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
+	div.table-wrapper div.scrollable table { margin-left: 35%; }
+	div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }	
+	
+	table td, table th { position: relative; white-space: nowrap; overflow: hidden; }
+	table th:first-child, table td:first-child, table td:first-child, .pinned table td { display: none; }
+	.pinned table td:first-child,
+	.pinned table th:first-child { display: block; }
 }

javascript/DocumentationViewer.js

@@ -1,6 +1,77 @@
 ;(function($) {
 	$(document).ready(function() {
+		var switched = false;
 		
+		var updateTables = function() {
+			if (($(window).width() < 540) && !switched ){
+				switched = true;
+				
+				$("table").each(function(i, element) {
+					splitTable($(element));
+				});
+				
+				return true;
+			}
+			else if (switched && ($(window).width() > 540)) {
+				switched = false;
+				
+				$("table").each(function(i, element) {
+					unsplitTable($(element));
+				});
+			}
+		};
+
+		$(window).load(updateTables);
+		$(window).on("redraw",function() {
+			switched = false;
+			updateTables();
+		}); // An event to listen for
+
+		$(window).on("resize", updateTables);
+
+
+		function splitTable(original) {
+			original.wrap("<div class='table-wrapper' />");
+
+			var copy = original.clone();
+			copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
+			copy.removeClass("responsive");
+
+			original.closest(".table-wrapper").append(copy);
+			copy.wrap("<div class='pinned' />");
+			original.wrap("<div class='scrollable' />");
+
+			setCellHeights(original, copy);
+		}
+
+		function unsplitTable(original) {
+			original.closest(".table-wrapper").find(".pinned").remove();
+			original.unwrap();
+			original.unwrap();
+		}
+
+		function setCellHeights(original, copy) {
+			var tr = original.find('tr'),
+			tr_copy = copy.find('tr'),
+			heights = [];
+
+			tr.each(function (index) {
+				var self = $(this),
+				tx = self.find('th, td');
+
+				tx.each(function () {
+					var height = $(this).outerHeight(true);
+					heights[index] = heights[index] || 0;
+					
+					if (height > heights[index]) heights[index] = height;
+				});
+			});
+
+			tr_copy.each(function (index) {
+				$(this).height(heights[index]);
+			});
+		}
+
 		/** -----------------------------------------------
 		 * TABLE OF CONTENTS
 		 *