diff --git a/codepot/etc/codepot.ini.in b/codepot/etc/codepot.ini.in
index 0214b26b..225ffbd8 100644
--- a/codepot/etc/codepot.ini.in
+++ b/codepot/etc/codepot.ini.in
@@ -255,7 +255,7 @@ cloc_command_path =  "@CFGDIR@/cloc.pl"
 ; The first file found is shown. You can specify multiple file name 
 ; separated by a comma.
 ;------------------------------------------------------------------------------
-code_folder_readme = "README.wiki,README.txt,README.wc,README.md,README"
+code_folder_readme = "README.md,README.wc,README.txt,README"
 
 ;------------------------------------------------------------------------------
 ; Email address to use when sending notification emails
diff --git a/codepot/src/codepot/views/code_blame.php b/codepot/src/codepot/views/code_blame.php
index 3ab2adfd..c4e39922 100644
--- a/codepot/src/codepot/views/code_blame.php
+++ b/codepot/src/codepot/views/code_blame.php
@@ -141,7 +141,7 @@ $this->load->view (
 
 <div class="mainarea" id="code_blame_mainarea">
 
-<div class="title-band" id="code_blame_title_band">
+<div class="codepot-title-band" id="code_blame_title_band">
 
 	<div class="title">
 	<?php
@@ -256,7 +256,9 @@ $this->load->view (
 	</div>
 
 	<div id='code_blame_metadata_body'>
-		<div><pre class='pre-wrapped'><?php print htmlspecialchars ($file['logmsg']); ?></pre></div>
+		<div class='codepot-plain-text-view'>
+			<pre><?php print htmlspecialchars ($file['logmsg']); ?></pre>
+		</div>
 
 		<?php
 		if (array_key_exists('properties', $file) && count($file['properties']) > 0)
@@ -279,7 +281,7 @@ $this->load->view (
 	</div>
 </div>
 
-<div class="result" id="code_blame_result">
+<div id="code_blame_result" class="codepot-relative-container-view codepot-styled-code-view" >
 
 	<?php 
 	$fileext = substr(strrchr($file['name'], '.'), 1);
@@ -294,14 +296,14 @@ $this->load->view (
 	    $login['settings']->code_hide_line_num == 'Y') $prettyprint_linenums = '';
 	?>
 
-	<pre id="code_blame_result_code_container" class="line-numbered">
 	<?php
-	// when producing line-numbered code, make sure to produce proper
+	print '<pre id="code_blame_result_code_container" class="codepot-line-numbered">';
+	// when producing codepot-line-numbered code, make sure to produce proper
 	// line terminators.
 	//
 	// the <code> </code> block requires \n after every line.
 	// while the <span></span> block to contain revision numbers and authors
-	// doesn't require \n. It is because the css file sets the line-number span
+	// doesn't require \n. It is because the css file sets the codepot-line-number span
 	// to display: block.
 	//
 	// If you have new lines between <span></span> and <code></code>, there will
@@ -311,7 +313,7 @@ $this->load->view (
 	$content = &$file['content'];
 	$len = count($content);
 
-	print '<span class="line-number-block" id="code_blame_result_code_revision">';
+	print '<span class="codepot-line-number-block" id="code_blame_result_code_revision">';
 	$rev = '';
 	for ($i = 0; $i < $len; $i++)
 	{
@@ -336,7 +338,7 @@ $this->load->view (
 	}
 	print '</span>';
 
-	print '<span class="line-number-block" id="code_blame_result_code_author">';
+	print '<span class="codepot-line-number-block" id="code_blame_result_code_author">';
 	$rev = '';
 	$author = '';
 	for ($i = 0; $i < $len; $i++)
@@ -361,7 +363,7 @@ $this->load->view (
 	}
 	print '</span>';
 
-	printf ('<code class="line-numbered-code prettyprint %s %s" id="code_blame_result_code">', $prettyprint_linenums, $prettyprint_lang);
+	printf ('<code class="codepot-line-numbered-code prettyprint %s %s" id="code_blame_result_code">', $prettyprint_linenums, $prettyprint_lang);
 
 	$charset = '';
 	if (array_key_exists('properties', $file) && count($file['properties']) > 0)
@@ -400,10 +402,10 @@ $this->load->view (
 	}
 
 	print '</code>';
+	print '</pre>';
 	?>
-	</pre>
 
-	<div id="code_blame_mainarea_loc_info" class="infobox">
+	<div id="code_blame_mainarea_loc_info" class="codepot-infobox">
 		<div class="title">LOC</div>
 		<?php
 		/* TODO: show this if it's enabled in the user settings  */
@@ -416,7 +418,7 @@ $this->load->view (
 
 </div> <!-- code_blame_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  code_blame_content -->
 
diff --git a/codepot/src/codepot/views/code_diff.php b/codepot/src/codepot/views/code_diff.php
index e26d5b05..225a91e9 100644
--- a/codepot/src/codepot/views/code_diff.php
+++ b/codepot/src/codepot/views/code_diff.php
@@ -183,7 +183,7 @@ $this->load->view (
 
 <div class="mainarea" id="code_diff_mainarea">
 
-<div class="title-band" id="code_diff_title_band">
+<div class="codepot-title-band" id="code_diff_title_band">
 
 	<div class="title">
 	<?php
@@ -250,7 +250,9 @@ $this->load->view (
 		</div>
 
 		<div id='code_diff_metadata_against_body'>
-			<pre class='pre-wrapped'><?php print htmlspecialchars ($file['against']['logmsg']); ?></pre>
+			<div class='codepot-plain-text-view'>
+				<pre><?php print htmlspecialchars ($file['against']['logmsg']); ?></pre>
+			</div>
 		</div>
 	</div>
 
@@ -286,7 +288,9 @@ $this->load->view (
 		</div>
 
 		<div id='code_diff_metadata_body'>
-			<pre class='pre-wrapped'><?php print htmlspecialchars ($file['logmsg']); ?></pre>
+			<div class='codepot-plain-text-view'>
+				<pre><?php print htmlspecialchars ($file['logmsg']); ?></pre>
+			</div>
 		</div>
 	</div>
 
@@ -298,7 +302,7 @@ $this->load->view (
 	if ($fileext == "") $fileext = "html"
 ?>
 
-<div id="code_diff_result" class="result">
+<div id="code_diff_result" class="codepot-relative-container-view codepot-styled-code-view">
 	<?php
 	function format_diff2 ($a, $b, $css_class)
 	{
@@ -360,7 +364,7 @@ $this->load->view (
 			  stristr($http_user_agent, 'Opera') === FALSE);
 	if (!$is_msie) $is_msie = (preg_match ("/^Mozilla.+\(Windows.+\) like Gecko$/", $http_user_agent) !== FALSE);
 
-	print '<div style="width: 100%; overflow: hidden;" id="code_diff_full_code_view">';
+	print '<div id="code_diff_full_code_view">';
 
 	//
 	// SHOW THE OLD FILE
@@ -390,9 +394,9 @@ $this->load->view (
 	print anchor ($nextanc, '<i class="fa fa-arrow-circle-right"></i>');
 	print "</div>"; // navigator
 
-	print '<pre id="code_diff_old_code" class="line-numbered">';
+	print '<pre id="code_diff_old_code" class="codepot-line-numbered">';
 
-	print '<span class="line-number-block">';
+	print '<span class="codepot-line-number-block">';
 	$actual_line_no = 1;
 	foreach ($file['content'] as $x)
 	{
@@ -417,13 +421,13 @@ $this->load->view (
 		}
 		else
 		{
-			if ($actual_line_no > 1) print "<span class='line-number-empty'>&nbsp;</span>";
+			if ($actual_line_no > 1) print "<span class='codepot-line-number-empty'>&nbsp;</span>";
 			$actual_line_no = $x['rev1lineno'];
 		}
 	}
 	print '</span>';
 
-	print '<code class="line-numbered-code prettyprint lang-{$fileext}" id="old-code">';
+	print '<code class="codepot-line-numbered-code prettyprint lang-{$fileext}">';
 	$actual_line_no = 1;
 	foreach ($file['content'] as $x)
 	{
@@ -456,12 +460,12 @@ $this->load->view (
 			//print "<span class='diffrow'> ";
 			//print $x['rev1lineno'];
 			//print " </span>\n";
-			if ($actual_line_no > 1) print "<span class='line-numbered-code-line-empty'>&nbsp;</span>\n"; // \n is required here unlike in the line-number-block
+			if ($actual_line_no > 1) print "<span class='codepot-line-numbered-code-line-empty'>&nbsp;</span>\n"; // \n is required here unlike in the codepot-line-number-block
 			$actual_line_no = $x['rev1lineno'];
 		}
 	}
 	print '</code>';
-	print '<span class="line-number-clear"></span>';
+	print '<span class="codepot-line-number-clear"></span>';
 	print '</pre>';
 
 	print '</div>';
@@ -493,9 +497,9 @@ $this->load->view (
 	print anchor ($nextanc, '<i class="fa fa-arrow-circle-right"></i>');
 	print "</div>"; // navigator
 
-	print '<pre id="code_diff_new_code" class="line-numbered">';
+	print '<pre id="code_diff_new_code" class="codepot-line-numbered">';
 
-	print '<span class="line-number-block">';
+	print '<span class="codepot-line-number-block">';
 	$actual_line_no = 1;
 	foreach ($file['content'] as $x)
 	{
@@ -516,13 +520,13 @@ $this->load->view (
 		}
 		else
 		{
-			if ($actual_line_no > 1) print "<span class='line-number-empty'>&nbsp;</span>";
+			if ($actual_line_no > 1) print "<span class='codepot-line-number-empty'>&nbsp;</span>";
 			$actual_line_no = $x['rev2lineno'];
 		}
 	}
 	print '</span>';
 
-	print '<code class="line-numbered-code prettyprint lang-{$fileext}" id="new-code" class="line-numbered-code">';
+	print '<code class="codepot-line-numbered-code prettyprint lang-{$fileext}" class="codepot-line-numbered-code">';
 	$actual_line_no = 1;
 	foreach ($file['content'] as $x)
 	{
@@ -560,14 +564,14 @@ $this->load->view (
 			//print "<span class='diffrow'> ";
 			//print $x['rev2lineno'];
 			//print " </span>\n";
-			if ($actual_line_no > 1) print "<span class='line-numbered-code-line-empty'>&nbsp;</span>\n"; // \n is required here unlike in the line number block
+			if ($actual_line_no > 1) print "<span class='codepot-line-numbered-code-line-empty'>&nbsp;</span>\n"; // \n is required here unlike in the line number block
 			$actual_line_no = $x['rev2lineno'];
 		}
 	}
 
 
 	print '</code>';
-	print '<span class="line-number-clear"></span>';
+	print '<span class="codepot-line-number-clear"></span>';
 	print '</pre>';
 
 	print '</div>';
@@ -581,7 +585,7 @@ $this->load->view (
 
 </div> <!-- code_diff_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- code_diff_content -->
 
diff --git a/codepot/src/codepot/views/code_edit.php b/codepot/src/codepot/views/code_edit.php
index dd46d598..85e9f3b6 100644
--- a/codepot/src/codepot/views/code_edit.php
+++ b/codepot/src/codepot/views/code_edit.php
@@ -268,7 +268,7 @@ $this->load->view (
 
 <div class="mainarea" id="code_edit_mainarea">
 
-<div class="title-band" id="code_edit_title_band">
+<div class="codepot-title-band" id="code_edit_title_band">
 	<div class="title">
 	<?php
 		print anchor (
@@ -310,7 +310,7 @@ $this->load->view (
 	<div style="clear: both;"></div>
 </div>
 
-<div  id="code_edit_result" class="result">
+<div  id="code_edit_result" class="codepot-relative-container-view">
 
 	<?php 
 	/*
@@ -368,7 +368,7 @@ $this->load->view (
 
 </div> <!-- code_edit_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  code_edit_content -->
 
diff --git a/codepot/src/codepot/views/code_file.php b/codepot/src/codepot/views/code_file.php
index 179b43e7..78a8f035 100644
--- a/codepot/src/codepot/views/code_file.php
+++ b/codepot/src/codepot/views/code_file.php
@@ -172,7 +172,7 @@ $this->load->view (
 
 <div class="mainarea" id="code_file_mainarea">
 
-<div class="title-band" id="code_file_title_band">
+<div class="codepot-title-band" id="code_file_title_band">
 
 	<div class="title">
 		<?php
@@ -281,7 +281,9 @@ $this->load->view (
 	</div>
 
 	<div id='code_file_metadata_body'>
-		<pre class='pre-wrapped'><?php print htmlspecialchars ($file['logmsg']); ?></pre>
+		<div class='codepot-plain-text-view'>
+			<pre><?php print htmlspecialchars ($file['logmsg']); ?></pre>
+		</div>
 
 		<?php
 		if (array_key_exists('properties', $file) && count($file['properties']) > 0)
@@ -309,7 +311,7 @@ $this->load->view (
 </pre>
 </div>
 
-<div class="result" id="code_file_result">
+<div id="code_file_result" class="codepot-relative-container-view codepot-styled-code-view" >
 
 <?php 
 $fileext = substr(strrchr($file['name'], '.'), 1);
@@ -386,7 +388,7 @@ if ($login['settings'] != NULL &&
 ?>
 </pre>
 
-<div id="code_file_mainarea_loc_info" class="infobox">
+<div id="code_file_mainarea_loc_info" class="codepot-infobox">
 	<div class="title">LOC</div>
 	<?php
 		/* TODO: show this if it's enabled in the user settings  */
@@ -399,7 +401,7 @@ if ($login['settings'] != NULL &&
 
 </div> <!-- code_file_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  code_file_content -->
 
diff --git a/codepot/src/codepot/views/code_folder.php b/codepot/src/codepot/views/code_folder.php
index 7a6796bb..e58352c5 100644
--- a/codepot/src/codepot/views/code_folder.php
+++ b/codepot/src/codepot/views/code_folder.php
@@ -202,10 +202,10 @@ function showdown_render_wiki (inputid, outputid)
 {
 	var sd = new showdown.Converter ({
 		omitExtraWLInCodeBlocks: false,
-		noHeaderId: false,
+		noHeaderId: true,
 		prefixHeaderId: false,
 		parseImgDimensions: true,
-		headerLevelStarT: 1,
+		headerLevelStart: 1,
 		simplifiedAutoLink: false,
 		literalMidWordUnderscores: false,
 		strikethrough: true,
@@ -248,6 +248,7 @@ function render_readme()
 	elseif (strlen($readme_text) > 0 && substr_compare($readme_file, '.md', -3) === 0):
 	?>
 	showdown_render_wiki ("code_folder_readme_text", "code_folder_readme");
+	prettyPrint();
 	<?php endif; ?>
 }
 
@@ -488,7 +489,7 @@ $(function () {
 		}
 	);
 
-	$('#code_folder_mainarea_rename_form_div').dialog (
+	$('#code_folder_mainarea_rename_form').dialog (
 		{
 			title: '<?php print $this->lang->line('rename');?>',
 			resizable: true,
@@ -525,7 +526,7 @@ $(function () {
 						}
 						form_data.append ('code_rename_file_count', xi);
 
-						$('#code_folder_mainarea_rename_form_div').dialog('disable');
+						$('#code_folder_mainarea_rename_form').dialog('disable');
 						$.ajax({
 							url: codepot_merge_path('<?php print site_url() ?>', '<?php print "/code/xhr_rename/{$project->id}/{$hex_headpath}"; ?>'),
 							type: 'POST',
@@ -537,8 +538,8 @@ $(function () {
 
 							success: function (data, textStatus, jqXHR) { 
 								rename_in_progress = false;
-								$('#code_folder_mainarea_rename_form_div').dialog('enable');
-								$('#code_folder_mainarea_rename_form_div').dialog('close');
+								$('#code_folder_mainarea_rename_form').dialog('enable');
+								$('#code_folder_mainarea_rename_form').dialog('close');
 								if (data == 'ok') 
 								{
 									// refresh the page to the head revision
@@ -552,8 +553,8 @@ $(function () {
 
 							error: function (jqXHR, textStatus, errorThrown) { 
 								rename_in_progress = false;
-								$('#code_folder_mainarea_rename_form_div').dialog('enable');
-								$('#code_folder_mainarea_rename_form_div').dialog('close');
+								$('#code_folder_mainarea_rename_form').dialog('enable');
+								$('#code_folder_mainarea_rename_form').dialog('close');
 
 								var errmsg = '';
 								if (errmsg == '' && errorThrown != null) errmsg = errorThrown;
@@ -571,7 +572,7 @@ $(function () {
 				},
 				'<?php print $this->lang->line('Cancel')?>': function () {
 					if (rename_in_progress) return;
-					$('#code_folder_mainarea_rename_form_div').dialog('close');
+					$('#code_folder_mainarea_rename_form').dialog('close');
 				}
 
 			},
@@ -637,10 +638,10 @@ $(function () {
 			}
 		}
 
-		$('#code_folder_mainarea_rename_form_div').dialog ('option', 'title', 
+		$('#code_folder_mainarea_rename_form').dialog ('option', 'title', 
 			codepot_sprintf ("<?php print addslashes($this->lang->line('CODE_FMT_RENAME_X_SELECTED_FILES')) ?>", xi)
 		);
-		$('#code_folder_mainarea_rename_form_div').dialog('open');
+		$('#code_folder_mainarea_rename_form').dialog('open');
 
 		return false; // prevent the default behavior
 	});
@@ -794,7 +795,7 @@ $this->load->view (
 
 <div class="mainarea" id="code_folder_mainarea">
 
-<div class="title-band" id="code_folder_title_band">
+<div class="codepot-title-band" id="code_folder_title_band">
 
 	<div class="title">
 	<?php
@@ -907,7 +908,9 @@ $this->load->view (
 	</div>
 
 	<div id='code_folder_metadata_body'>
-		<div><pre class='pre-wrapped'><?php print htmlspecialchars ($file['logmsg']); ?></pre></div>
+		<div class='codepot-plain-text-view'>
+			<pre><?php print htmlspecialchars ($file['logmsg']); ?></pre>
+		</div>
 
 		<?php
 		if (array_key_exists('properties', $file) && count($file['properties']) > 0)
@@ -1023,7 +1026,7 @@ $this->load->view (
 	?>
 </div>
 
-<div id="code_folder_result" class="result" >
+<div id="code_folder_result" class="codepot-relative-container-view" >
 	<?php
 	function comp_files ($a, $b)
 	{
@@ -1043,11 +1046,11 @@ $this->load->view (
 	{
 		usort ($file['content'], 'comp_files');
 
-		print '<table id="code_folder_result_table" class="fit-width-result-table">';
+		print '<table id="code_folder_result_table" class="codepot-fit-width-table codepot-spacious-table">';
 		print '<tr class="heading">';
 		if (isset($login['id']) && $login['id'] != '')
 		{
-			print '<th align="middle"><input type="checkbox" id="code_folder_result_table_select_all", "select_all" /><label for="code_folder_result_table_select_all"><i class="fa fa-check"></i></label></th>';
+			print '<th align="middle"><input type="checkbox" id="code_folder_result_table_select_all" /><label for="code_folder_result_table_select_all"><i class="fa fa-check"></i></label></th>';
 		}
 		print '<th>' . $this->lang->line('Name') . '</th>';
 		print '<th>' . $this->lang->line('Revision') . '</th>';
@@ -1091,9 +1094,9 @@ $this->load->view (
 				print '<td>';
 				print htmlspecialchars($f['last_author']);
 				print '</td>';
-				print '<td><code>';
+				print '<td><tt>';
 				print strftime('%Y-%m-%d', $f['time_t']);
-				print '</code></td>';
+				print '</tt></td>';
 				print '<td></td>';
 				print '<td></td>';
 				print '<td></td>';
@@ -1127,9 +1130,9 @@ $this->load->view (
 				print '<td>';
 				print htmlspecialchars($f['last_author']);
 				print '</td>';
-				print '<td><code>';
+				print '<td><tt>';
 				print strftime('%Y-%m-%d', $f['time_t']);
-				print '</code></td>';
+				print '</tt></td>';
 
 				print '<td>';
 				print anchor ("code/blame/{$project->id}/{$hexpath}{$revreq}", $blame_anchor_text);
@@ -1151,11 +1154,8 @@ $this->load->view (
 <?php
 if (strlen($readme_text) > 0)
 {
-	print '<div id="code_folder_readme">';
-	// the pre division is gone when rendered as a wiki text.
-	// so is the pre-wrapped class. so let me put the class 
-	// regardless of the text type.
-	print '<pre id="code_folder_readme_text" class="pre-wrapped">';
+	print '<div id="code_folder_readme" class="codepot-styled-text-view">';
+	print '<pre id="code_folder_readme_text">';
 	print htmlspecialchars($readme_text);
 	print '</pre>';
 	print '</div>';
@@ -1192,7 +1192,7 @@ if (strlen($readme_text) > 0)
 	<div><textarea type='textarea' id='code_folder_mainarea_delete_message' name='code_folder_delete_message' style='width:100%;' ></textarea></div>
 </div>
 
-<div id="code_folder_mainarea_rename_form_div">
+<div id="code_folder_mainarea_rename_form">
 	<div><?php print $this->lang->line('Message'); ?>:</div>
 	<div><textarea type='textarea' id='code_folder_mainarea_rename_message' name='code_folder_rename_message' style='width:100%;' ></textarea></div>
 	<div id="code_folder_mainarea_rename_file_div">
@@ -1206,7 +1206,7 @@ if (strlen($readme_text) > 0)
 
 </div> <!-- code_folder_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  code_folder_content -->
 
diff --git a/codepot/src/codepot/views/code_history.php b/codepot/src/codepot/views/code_history.php
index 65f253e4..280a7859 100644
--- a/codepot/src/codepot/views/code_history.php
+++ b/codepot/src/codepot/views/code_history.php
@@ -51,7 +51,7 @@ $this->load->view (
 
 <div class="mainarea" id="code_history_mainarea">
 
-<div class="title-band" id="code_history_title_band">
+<div class="codepot-title-band" id="code_history_title_band">
 
 	<div class="title">
 	<?php
@@ -105,9 +105,9 @@ $this->load->view (
 </div> <!-- code_history_graph -->
 
 
-<div id="code_history_result" class="result">
-	<table id="code_history_result_table" class="full-width-result-table">
-	<tr class='full-width-result-table-header'>
+<div id="code_history_result" class="codepot-relative-container-view">
+	<table id="code_history_result_table" class="codepot-full-width-table codepot-spacious-table">
+	<tr class='codepot-full-width-table-header'>
 		<th><?php print $this->lang->line('Revision')?></th>
 		<th><?php print $this->lang->line('Committer')?></th>
 		<th><?php print $this->lang->line('Date')?></th>
@@ -147,13 +147,13 @@ $this->load->view (
 			if (array_key_exists('author', $h)) print htmlspecialchars($h['author']);
 			print '</td>';
 
-			print '<td class="commit-date-td"><code>';
+			print '<td class="commit-date-td"><tt>';
 			print strftime('%Y-%m-%d', strtotime($h['date']));
-			print '</code></td>';
+			print '</tt></td>';
 
 			print '<td class="commit-message-td">';
 			print anchor ("code/revision/{$project->id}/{$xfullpath}/{$h['rev']}", htmlspecialchars($h['msg']), "class='commit-message'");
-			//print '<pre class="pre-wrapped">';
+			//print '<pre>';
 			//print htmlspecialchars($h['msg']);
 			//print '</pre>';
 			print '</td>';
@@ -206,7 +206,7 @@ $this->load->view (
 
 </div> <!-- code_history_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  code_history_content -->
 
diff --git a/codepot/src/codepot/views/code_revision.php b/codepot/src/codepot/views/code_revision.php
index 3e9d5391..41f44c01 100644
--- a/codepot/src/codepot/views/code_revision.php
+++ b/codepot/src/codepot/views/code_revision.php
@@ -571,7 +571,7 @@ $this->load->view (
 $history = $file['history'];
 ?>
 
-<div class="title-band" id="code_revision_title_band">
+<div class="codepot-title-band" id="code_revision_title_band">
 	<div class="title">
 	<?php
 		print anchor (
@@ -671,15 +671,15 @@ $history = $file['history'];
 	</div>
 
 	<div id="code_revision_metadata_body">
-		<pre id="code_revision_metadata_text" class="pre-wrapped"><?php print htmlspecialchars($history['msg']); ?></pre>
+		<pre id="code_revision_metadata_text"><?php print htmlspecialchars($history['msg']); ?></pre>
 	</div>
 </div>
 
-<div id="code_revision_result" class="result">
+<div id="code_revision_result" class="codepot-relative-container-view">
 	<div id="code_revision_result_files" class="collapsible-box">
 		<div class="collapsible-box-header"><?php print $this->lang->line('Files')?></div>
 		<div id="code_revision_result_files_table_container" class="collapsible-box-panel">
-			<table id="code_revision_result_files_table" class="fit-width-result-table">
+			<table id="code_revision_result_files_table" class="codepot-fit-width-table codepot-spacious-table">
 				<?php 
 				/*
 				print '<tr class="heading">';
@@ -723,7 +723,7 @@ $history = $file['history'];
 <div id="code_revision_result_properties" class="collapsible-box">
 	<div class="collapsible-box-header"><?php print $this->lang->line('CODE_PROPERTIES');?></div>
 	<div id="code_revision_result_properties_table_container" class="collapsible-box-panel">
-		<table id="code_revision_result_properties_table" class="fit-width-result-table">
+		<table id="code_revision_result_properties_table" class="codepot-fit-width-table">
 			<?php
 			$rowclasses = array ('odd', 'even');
 			$rowcount = 0;
@@ -870,7 +870,7 @@ $history = $file['history'];
 			<textarea type='textarea' id='code_revision_new_review_comment' name='code_new_review_comment' rows=24 cols=100 style='width:100%;'></textarea>
 		</div>
 
-		<div id='code_revision_new_review_comment_preview' class='form_input_preview'>
+		<div id='code_revision_new_review_comment_preview' class='codepot-styled-text-preview'>
 		</div>
 	</div>
 </div>
@@ -898,7 +898,7 @@ for ($i = 0; $i < $review_count; )
 						<textarea type='textarea' id='code_revision_edit_review_comment_{$i}' name='code_edit_review_comment_{$i}' rows=24 cols=100 style='width:100%;'>{$text}</textarea>
 					</div>
 
-					<div id='code_revision_edit_review_comment_preview_{$i}' class='form_input_preview'>
+					<div id='code_revision_edit_review_comment_preview_{$i}' class='codepot-styled-text-preview'>
 					</div>
 				</div>
 			</div>
@@ -912,7 +912,7 @@ for ($i = 0; $i < $review_count; )
 
 </div> <!-- code_revision_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- code_revision_content -->
 
diff --git a/codepot/src/codepot/views/code_search.php b/codepot/src/codepot/views/code_search.php
index 9a413b2f..3b81f229 100644
--- a/codepot/src/codepot/views/code_search.php
+++ b/codepot/src/codepot/views/code_search.php
@@ -110,7 +110,7 @@ $this->load->view (
 
 <div class="mainarea" id="code_search_mainarea">
 
-<div class="title-band" id="code_search_title_band">
+<div class="codepot-title-band" id="code_search_title_band">
 
 	<div class="title">
 		<?php
@@ -247,7 +247,7 @@ $this->load->view (
 	<div style="clear: both;"></div>
 </div>
 
-<div id="code_search_mainarea_result" class="result">
+<div id="code_search_result" class="codepot-relative-container-view">
 
 <?php
 // this searching part should have been placed in SubversionModel.
@@ -311,7 +311,7 @@ function search_and_show ($controller, $project, $path, $revision, $pattern, $in
 							$revreqroot = '/' . $controller->converter->AsciiToHex ('.') . $revreq;
 						}
 
-						print '<div class="code_search_result">';
+						print '<div class="codepot-styled-text-view">';
 
 						print '<div class="title">';
 						print anchor (
@@ -330,21 +330,21 @@ function search_and_show ($controller, $project, $path, $revision, $pattern, $in
 							$fileext = substr(strrchr($file2['name'], '.'), 1);
 							if ($fileext == "") $fileext = "html";
 
-							print '<pre class="line-numbered">';
-							print '<span class="line-number-block">';
+							print '<pre class="codepot-line-numbered">';
+							print '<span class="codepot-line-number-block">';
 							foreach ($matchlines as $linenum => $line)
 							{
 								print "<span>{$linenum}</span>";
 							}
 							print '</span>';
-							print "<code class='line-numbered-code prettyprint lang-{$fileext}'>";
+							print "<code class='codepot-line-numbered-code prettyprint lang-{$fileext}'>";
 							foreach ($matchlines as $linenum => $line)
 							{
 								print htmlspecialchars($line);
 								print "\n";
 							}
 							print '</code>';
-							print '<span class="line-number-clear"></span>';
+							print '<span class="codepot-line-number-clear"></span>';
 							print '</pre>';
 						}
 
@@ -372,11 +372,11 @@ if (CODEPOT_ALLOW_SET_TIME_LIMIT) set_time_limit (0);
 search_and_show ($this, $project, $file['fullpath'], $revision, $pattern, $invertedly, $case_insensitively, $is_regex, $recursively, $in_name, $wildcard_pattern);
 ?>
 
-</div> <!-- code_search_mainarea_result -->
+</div> <!-- code_search_result -->
 
 </div> <!-- code_search_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  code_search_content -->
 
diff --git a/codepot/src/codepot/views/error.php b/codepot/src/codepot/views/error.php
index 0b3469c4..09693672 100644
--- a/codepot/src/codepot/views/error.php
+++ b/codepot/src/codepot/views/error.php
@@ -57,7 +57,7 @@ $this->load->view (
 <?php print  htmlspecialchars($message) ?>
 </div>
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- project_error_content -->
 
diff --git a/codepot/src/codepot/views/file_home.php b/codepot/src/codepot/views/file_home.php
index d729bfe8..9879f0db 100644
--- a/codepot/src/codepot/views/file_home.php
+++ b/codepot/src/codepot/views/file_home.php
@@ -259,7 +259,7 @@ $this->load->view (
 
 <div class="mainarea" id="file_home_mainarea">
 
-<div class="title-band" id="file_home_title_band">
+<div class="codepot-title-band" id="file_home_title_band">
 	<div class="title"><?php print $this->lang->line('Files')?></div>
 
 	<div class="actions">
@@ -277,7 +277,7 @@ $this->load->view (
 	<div style='clear: both'></div>
 </div>
 
-<div id="file_home_result" class="result">
+<div id="file_home_result" class="codepot-relative-container-view">
 	<?php
 	if (empty($files))
 	{
@@ -325,7 +325,7 @@ $this->load->view (
 
 		usort ($files, 'comp_files');
 
-		print '<table id="file_home_result_table" class="fit-width-result-table">';
+		print '<table id="file_home_result_table" class="codepot-fit-width-table codepot-spacious-table">';
 		print '<tr class="heading">';
 		print '<th>' . $this->lang->line('Tag') . '</th>';
 		print '<th>' . $this->lang->line('Name') . '</th>';
@@ -427,7 +427,7 @@ $this->load->view (
 		<div id='file_home_new_description_input'>
 			<textarea type='textarea' id='file_home_new_description' name='file_home_new_description' rows=10 cols=80 style='width:100%;'></textarea>
 		</div>
-		<div id='file_home_new_description_preview' class='form_input_preview'>
+		<div id='file_home_new_description_preview' class='codepot-styled-text-preview'>
 		</div>
 	</div>
 </div>
@@ -438,7 +438,7 @@ $this->load->view (
 
 </div> <!-- file_home_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- file_home_content -->
 
diff --git a/codepot/src/codepot/views/file_show.php b/codepot/src/codepot/views/file_show.php
index 772558d9..63bd7f0e 100644
--- a/codepot/src/codepot/views/file_show.php
+++ b/codepot/src/codepot/views/file_show.php
@@ -596,7 +596,7 @@ $this->load->view (
 
 <div class="mainarea" id="file_show_mainarea">
 
-<div class="title-band" id="file_show_title_band">
+<div class="codepot-title-band" id="file_show_title_band">
 	<div class="title"><?php print htmlspecialchars($file->name)?></div>
 
 	<div class="actions">
@@ -655,7 +655,7 @@ $this->load->view (
 	</div>
 </div>
 
-<div id="file_show_result" class="result">
+<div id="file_show_result" class="codepot-relative-container-view">
 	<div id="file_show_wiki">
 		<pre id="file_show_wiki_text" style="visibility: hidden"><?php print htmlspecialchars($file->description); ?></pre>
 	</div>
@@ -678,7 +678,7 @@ $this->load->view (
 		<div id='file_show_edit_description_input'>
 			<textarea type='textarea' id='file_show_edit_description' name='file_show_edit_description' rows=24 cols=100 style='width:100%;'><?php print htmlspecialchars($file->description); ?></textarea>
 		</div>
-		<div id='file_show_edit_description_preview' class='form_input_preview'>
+		<div id='file_show_edit_description_preview' class='codepot-styled-text-preview'>
 		</div>
 	</div>
 </div>
@@ -719,7 +719,7 @@ $this->load->view (
 
 </div> <!-- file_show_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  file_show_content -->
 
diff --git a/codepot/src/codepot/views/footer.php b/codepot/src/codepot/views/footer.php
index e402e45d..5ac2920f 100644
--- a/codepot/src/codepot/views/footer.php
+++ b/codepot/src/codepot/views/footer.php
@@ -1,4 +1,4 @@
-<div class="footer" id="codepot_footer">
+<div class="codepot-footer" id="codepot_footer">
 
 <?php if (CODEPOT_FOOTER == ''): ?>
 	Codepot <?php print CODEPOT_VERSION?> by Hyung-Hwan Chung 
diff --git a/codepot/src/codepot/views/graph_main.php b/codepot/src/codepot/views/graph_main.php
index fe094119..d4c1a9da 100644
--- a/codepot/src/codepot/views/graph_main.php
+++ b/codepot/src/codepot/views/graph_main.php
@@ -461,7 +461,7 @@ $this->load->view (
 <!-- /////////////////////////////////////////////////////////////////////// -->
 
 <!--
-<div class="sidebar" id="graph_main_sidebar">
+<div class="codepot-sidebar" id="graph_main_sidebar">
 <div class="collapsible-box">
 <div class="collapsible-box-header">
 </div>
@@ -480,7 +480,7 @@ $this->load->view (
 <div class="mainarea" id="graph_main_mainarea">
 
 
-<div class="title-band" id="graph_main_title_band">
+<div class="codepot-title-band" id="graph_main_title_band">
 	<div class="title"><?php print htmlspecialchars($project->name);?></div>
 
 	<div class="actions">
@@ -507,7 +507,7 @@ $this->load->view (
 
 </div> <!-- graph_main_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  graph_main_content -->
 
diff --git a/codepot/src/codepot/views/issue_home.php b/codepot/src/codepot/views/issue_home.php
index 68a78be7..0aa039b1 100644
--- a/codepot/src/codepot/views/issue_home.php
+++ b/codepot/src/codepot/views/issue_home.php
@@ -309,7 +309,7 @@ $this->load->view (
 
 <div class="mainarea" id="issue_home_mainarea">
 
-<div class="title-band" id="issue_home_title_band">
+<div class="codepot-title-band" id="issue_home_title_band">
 	<div class="title"><?php print $this->lang->line('Issues')?></div>
 
 	<div class="actions">
@@ -322,7 +322,7 @@ $this->load->view (
 	<div style='clear: both;'></div>
 </div>
 
-<div id="issue_home_result" class="result">
+<div id="issue_home_result" class="codepot-relative-container-view">
 <?php
 if (empty($issues))
 {
@@ -330,7 +330,7 @@ if (empty($issues))
 }
 else
 {
-	print '<table id="issue_home_result_table" class="full-width-result-table">';
+	print '<table id="issue_home_result_table" class="codepot-full-width-table codepot-spacious-table">';
 	print '<tr class="heading">';
 	print '<th class="id">' . $this->lang->line('ID') . '</th>';
 	print '<th class="type">' . $this->lang->line('Type') . '</th>';
@@ -418,7 +418,7 @@ else
 			<table id='issue_home_new_file_table'></table>
 			</div>
 		</div>
-		<div id='issue_home_new_description_preview' class='form_input_preview'>
+		<div id='issue_home_new_description_preview' class='codepot-styled-text-preview'>
 		</div>
 	</div>
 </div>
@@ -482,7 +482,7 @@ else
 
 </div> <!-- issue_home_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- issue_home_content -->
 
diff --git a/codepot/src/codepot/views/issue_show.php b/codepot/src/codepot/views/issue_show.php
index 4d2b429c..636afaf7 100644
--- a/codepot/src/codepot/views/issue_show.php
+++ b/codepot/src/codepot/views/issue_show.php
@@ -713,7 +713,7 @@ $this->load->view (
 
 <div class="mainarea" id="issue_show_mainarea">
 
-<div class="title-band" id="issue_show_title_band">
+<div class="codepot-title-band" id="issue_show_title_band">
 	<div class="title">
 		<?php print $this->lang->line('Issue')?> <?php print htmlspecialchars($issue->id)?>: 
 		<?php print htmlspecialchars($issue->summary)?>
@@ -780,9 +780,9 @@ $this->load->view (
 	</div>
 </div>
 
-<div id="issue_show_result" class="result">
+<div id="issue_show_result" class="codepot-relative-container-view">
 
-	<div id="issue_show_description">
+	<div id="issue_show_description" class="codepot-styled-text-view">
 	<pre id="issue_show_description_pre" style="visibility: hidden"><?php print htmlspecialchars($issue->description); ?></pre>
 	</div> <!-- issue_show_description -->
 
@@ -816,16 +816,8 @@ $this->load->view (
 		<?php endif; ?>
 	</div>
 </div>
-
-<div id="issue_show_changes">
+<div id="issue_show_changes_strip" class="codepot-infostrip">
 	<?php
-	$commentno = 0;
-
-	$msgfmt_changed_from_to = $this->lang->line ('ISSUE_MSG_CHANGED_X_FROM_Y_TO_Z');
-	$msgfmt_changed_to = $this->lang->line ('ISSUE_MSG_CHANGED_X_TO_Z');
-	$count = count($issue->changes);
-
-	print '<div class="infostrip">';
 	print '<span class="title">';
 	print $this->lang->line('Change log');
 	print '</span>';
@@ -840,16 +832,25 @@ $this->load->view (
 	print '<a id="issue_show_undo_change" href="#">';
 	print $this->lang->line('Undo');
 	print '</a>';
-	print '</div>';
+	?>
+</div>
 
-	print '<table id="issue_show_changes_table" class="full-width-result-table">';
+<div id="issue_show_changes">
+	<?php
+	$commentno = 0;
+
+	$msgfmt_changed_from_to = $this->lang->line ('ISSUE_MSG_CHANGED_X_FROM_Y_TO_Z');
+	$msgfmt_changed_to = $this->lang->line ('ISSUE_MSG_CHANGED_X_TO_Z');
+	$count = count($issue->changes);
+
+	print '<table id="issue_show_changes_table" class="codepot-full-width-table">';
 	while ($count > 1)
 	{
 		$new = $issue->changes[--$count];
 		$old = $issue->changes[$count-1];
 
 		print '<tr>';
-		
+
 		print '<td class="date">'; 
 		print codepot_dbdatetodispdate($new->updatedon);
 		print '</td>';
@@ -861,7 +862,7 @@ $this->load->view (
 		print '<td class="details">';
 		if ($new->comment != "")
 		{
-			print "<div id='issue_show_changes_comment_{$commentno}' class='issue_changes_comment'>";
+			print "<div id='issue_show_changes_comment_{$commentno}' class='codepot-styled-text-view'>";
 			print "<pre id='issue_show_changes_comment_pre_{$commentno}'>";
 			print htmlspecialchars($new->comment);
 			print '</pre>';
@@ -971,7 +972,7 @@ $this->load->view (
 		<div id='issue_show_edit_description_input'>
 			<textarea type='textarea' id='issue_show_edit_description' name='issue_show_edit_description' rows=24 cols=100 style='width:100%;'><?php print htmlspecialchars($issue->description); ?></textarea>
 		</div>
-		<div id='issue_show_edit_description_preview' class='form_input_preview'>
+		<div id='issue_show_edit_description_preview' class='codepot-styled-text-preview'>
 		</div>
 	</div>
 </div>
@@ -1085,7 +1086,7 @@ $this->load->view (
 			?>
 		</div>
 
-		<div id='issue_change_comment_preview' class='form_input_preview'></div>
+		<div id='issue_change_comment_preview' class='codepot-styled-text-preview'></div>
 	<?php print form_close()?>
 </div> <!-- issue_show_change_form -->
 
@@ -1098,7 +1099,7 @@ $this->load->view (
 
 </div> <!-- issue_show_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  issue_show_content -->
 
diff --git a/codepot/src/codepot/views/log.php b/codepot/src/codepot/views/log.php
index ead922c3..ba899c54 100644
--- a/codepot/src/codepot/views/log.php
+++ b/codepot/src/codepot/views/log.php
@@ -122,7 +122,7 @@ $this->load->view (
 
 <div class="mainarea" id="log_mainarea">
 
-<div class="title-band" id="log_title_band">
+<div class="codepot-title-band" id="log_title_band">
 
 	<div class="title">
 	<?php print  anchor ("site/log", $this->lang->line ('Change log')) ?>
@@ -150,9 +150,9 @@ $this->load->view (
 
 
 
-<div id="log_mainarea_result" class="result">
+<div id="log_mainarea_result" class="codepot-relative-container-view">
 
-<table id="log_mainarea_result_table" class="full-width-result-table">
+<table id="log_mainarea_result_table" class="codepot-full-width-table codepot-spacious-table">
 <?php 
 	$curdate = '';
 	$xdot = $this->converter->AsciiToHex ('.');
@@ -229,9 +229,9 @@ $this->load->view (
 
 			if ($log['action'] != 'revpropchange')
 			{
-				print '<pre class="pre-wrapped message">';
+				print '<div class="codepot-plain-text-view"><pre>';
 				print htmlspecialchars ($code['message']);
-				print '</pre>';
+				print '</pre></div>';
 			}
 		}
 		else
@@ -296,7 +296,7 @@ $this->load->view (
 
 </div> <!-- log_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- log_content -->
 
diff --git a/codepot/src/codepot/views/login.php b/codepot/src/codepot/views/login.php
index eea897a0..6073c9d7 100644
--- a/codepot/src/codepot/views/login.php
+++ b/codepot/src/codepot/views/login.php
@@ -109,7 +109,7 @@ $this->load->view (
 
 </div>
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- content -->
 
diff --git a/codepot/src/codepot/views/project_catalog.php b/codepot/src/codepot/views/project_catalog.php
index 166a1983..4f6b735e 100644
--- a/codepot/src/codepot/views/project_catalog.php
+++ b/codepot/src/codepot/views/project_catalog.php
@@ -271,7 +271,7 @@ else
 
 </div> <!-- project_catalog_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- project_catalog_content -->
 
diff --git a/codepot/src/codepot/views/project_delete.php b/codepot/src/codepot/views/project_delete.php
index 16f36ec6..0cdd9adc 100644
--- a/codepot/src/codepot/views/project_delete.php
+++ b/codepot/src/codepot/views/project_delete.php
@@ -73,7 +73,7 @@ $this->load->view (
 
 </div> <!-- mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div>  <!-- project_delete_content -->
 <!---------------------------------------------------------------------------->
diff --git a/codepot/src/codepot/views/project_edit.php b/codepot/src/codepot/views/project_edit.php
index 600a4698..842843f2 100644
--- a/codepot/src/codepot/views/project_edit.php
+++ b/codepot/src/codepot/views/project_edit.php
@@ -131,7 +131,7 @@ $this->load->view (
 			print form_textarea ($xdata);
 		?>
 	</div>
-	<div id='project_edit_mainarea_description_preview' class='form_input_preview'></div>
+	<div id='project_edit_mainarea_description_preview' class='codepot-styled-text-preview'></div>
 
 	<div class='form_input_field'>
 		<?php print form_label($this->lang->line('Commitable').': ', 'project_commitable')?>
@@ -177,7 +177,7 @@ $this->load->view (
 
 </div> <!-- project_edit_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- project_edit_content --> 
 
diff --git a/codepot/src/codepot/views/project_home.php b/codepot/src/codepot/views/project_home.php
index 3e115188..7b7cbde6 100644
--- a/codepot/src/codepot/views/project_home.php
+++ b/codepot/src/codepot/views/project_home.php
@@ -29,8 +29,8 @@
 function render_wiki() 
 {
 	creole_render_wiki (
-		"project_home_mainarea_wiki_text", 
-		"project_home_mainarea_wiki", 
+		"project_home_result_wiki_text", 
+		"project_home_result_wiki", 
 		"<?php print site_url()?>/wiki/show/<?php print $project->id?>/",
 		"<?php print site_url()?>/wiki/attachment0/<?php print $project->id?>/"
 	);
@@ -101,7 +101,7 @@ $this->load->view (
 ?>
 
 <!-- /////////////////////////////////////////////////////////////////////// -->
-<div class="sidebar" id="project_home_sidebar">
+<div class="codepot-sidebar" id="project_home_sidebar">
 
 
 <div id="project_home_sidebar_info_box" class="collapsible-box">
@@ -232,7 +232,7 @@ foreach ($urls as $url)
 
 				if ($log['action'] != 'revpropchange')
 				{
-					print '<pre class="pre-wrapped message">';
+					print '<pre class="message">';
 					$sm = strtok (trim ($x['message']), "\r\n");
 					print htmlspecialchars ($sm);
 					print '</pre>';
@@ -315,16 +315,16 @@ foreach ($urls as $url)
 <?php print htmlspecialchars($project->name)?>
 </div>
 
-<div id="project_home_result" class="result">
-	<div id="project_home_mainarea_wiki">
-		<pre id="project_home_mainarea_wiki_text" style="visibility: hidden"><?php print htmlspecialchars($project->description); ?></pre>
-	</div> <!-- project_home_mainarea_wiki -->
+<div id="project_home_result" class="codepot-static-container-view">
+	<div id="project_home_result_wiki" class="codepot-styled-text-view">
+		<pre id="project_home_result_wiki_text" style="visibility: hidden"><?php print htmlspecialchars($project->description); ?></pre>
+	</div> <!-- project_home_result_wiki -->
 </div>
 
 </div> <!-- project_home_mainarea -->
 
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  project_home_content -->
 
diff --git a/codepot/src/codepot/views/site_catalog.php b/codepot/src/codepot/views/site_catalog.php
index 2e493508..3cc2e469 100644
--- a/codepot/src/codepot/views/site_catalog.php
+++ b/codepot/src/codepot/views/site_catalog.php
@@ -68,7 +68,7 @@ foreach ($sites as $site)
 
 </div> <!-- site_catalog_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- site_catalog_content -->
 
diff --git a/codepot/src/codepot/views/site_delete.php b/codepot/src/codepot/views/site_delete.php
index f6a9f9a9..3ae3aa54 100644
--- a/codepot/src/codepot/views/site_delete.php
+++ b/codepot/src/codepot/views/site_delete.php
@@ -73,7 +73,7 @@ $this->load->view (
 
 </div> <!-- mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div>  <!-- site_delete_content -->
 
diff --git a/codepot/src/codepot/views/site_edit.php b/codepot/src/codepot/views/site_edit.php
index b0d7b383..b9516cdc 100644
--- a/codepot/src/codepot/views/site_edit.php
+++ b/codepot/src/codepot/views/site_edit.php
@@ -128,7 +128,7 @@ $this->load->view (
 			'class="text" id="site_edit_mainarea_text"')
 		?>
 	</div>
-	<div id='site_edit_mainarea_text_preview' class='form_input_preview'></div>
+	<div id='site_edit_mainarea_text_preview' class='codepot-styled-text-preview'></div>
 
 
 	<?php $caption = ($mode == 'update')? $this->lang->line('Update'): $this->lang->line('Create'); ?>
@@ -138,7 +138,7 @@ $this->load->view (
 
 </div> <!-- site_edit_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- site_edit_content --> 
 
diff --git a/codepot/src/codepot/views/site_home.php b/codepot/src/codepot/views/site_home.php
index 66648825..1357bf55 100644
--- a/codepot/src/codepot/views/site_home.php
+++ b/codepot/src/codepot/views/site_home.php
@@ -107,7 +107,7 @@ $this->load->view (
 
 
 
-<div class="sidebar" id="site_home_sidebar">
+<div class="codepot-sidebar" id="site_home_sidebar">
 
 <div id="site_home_sidebar_latest_projects_box" class="collapsible-box">
 <div id="site_home_sidebar_latest_projects_header" class="collapsible-box-header">
@@ -204,10 +204,10 @@ foreach ($latest_projects as $project)
 
 			if ($log['action'] != 'revpropchange')
 			{
-				print '<pre class="pre-wrapped message">';
+				print '<div class="codepot-plain-text-view"><pre>';
 				$sm = strtok (trim ($x['message']), "\r\n");
 				print htmlspecialchars ($sm);
-				print '</pre>';
+				print '</pre></div>';
 			}
 			print '</td>';
 			print '</tr>';
@@ -282,7 +282,7 @@ foreach ($latest_projects as $project)
 
 <div class="mainarea" id="site_home_mainarea">
 
-<div id="site_home_result" class="result">
+<div id="site_home_result" class="codepot-static-container-view">
 
 	<?php if ($issues && count($issues) > 0): ?>
 	<div id="site_home_result_open_issues" class="collapsible-box">
@@ -327,10 +327,10 @@ foreach ($latest_projects as $project)
 			$pro = $issue->projectid;
 			$xid = $this->converter->AsciiToHex ((string)$issue->id);
 			$owner = $issue->owner;
-		
+
 			$proissueanc = anchor ("issue/home/{$issue->projectid}", $pro);
 			$anc = anchor ("issue/show/{$issue->projectid}/{$xid}", '#' . htmlspecialchars($issue->id));
-		
+
 			$status = htmlspecialchars(
 				array_key_exists($issue->status, $issue_status_array)?
 				$issue_status_array[$issue->status]: $issue->status);
@@ -346,7 +346,7 @@ foreach ($latest_projects as $project)
 	</div>
 	<?php endif; ?>
 
-	<div id="site_home_result_wiki">
+	<div id="site_home_result_wiki" class="codepot-styled-text-view">
 	<pre id="site_home_result_wiki_text" style="visibility: hidden"><?php print htmlspecialchars($site->text); ?></pre>
 	</div> <!-- site_home_text -->
 
@@ -355,7 +355,7 @@ foreach ($latest_projects as $project)
 
 </div> <!-- site_home_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- site_home_content -->
 
diff --git a/codepot/src/codepot/views/site_show.php b/codepot/src/codepot/views/site_show.php
index bb5093d9..fc50bbab 100644
--- a/codepot/src/codepot/views/site_show.php
+++ b/codepot/src/codepot/views/site_show.php
@@ -25,8 +25,8 @@
 function render_wiki()
 {
 	creole_render_wiki (
-		"site_show_mainarea_wiki_text",
-		"site_show_mainarea_wiki",
+		"site_show_result_wiki_text",
+		"site_show_result_wiki",
 		"<?php print site_url()?>/site/wiki/",
 		"<?php print site_url()?>/site/image/"
 	);
@@ -86,17 +86,19 @@ $this->load->view (
 <?php print htmlspecialchars($site->name)?> (<?php print htmlspecialchars($site->id)?>)
 </div>
 
-<div id="site_show_mainarea_wiki">
-<pre id="site_show_mainarea_wiki_text" style="visibility: hidden">
-<?php print htmlspecialchars($site->text); ?>
-</pre>
-</div> <!-- site_show_mainarea_text -->
+<div id="site_show_result" class="codepot-relative-container-view">
+	<div id="site_show_result_wiki" class="codepot-styled-text-view">
+	<pre id="site_show_result_wiki_text" style="visibility: hidden">
+	<?php print htmlspecialchars($site->text); ?>
+	</pre>
+	</div> <!-- site_show_result_wiki -->
+</div>
 
 <!----------------------------------------------------------->
 
 </div> <!-- site_show_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- site_show_content -->
 
diff --git a/codepot/src/codepot/views/user_home.php b/codepot/src/codepot/views/user_home.php
index b0d73bc4..5f5c4eeb 100644
--- a/codepot/src/codepot/views/user_home.php
+++ b/codepot/src/codepot/views/user_home.php
@@ -117,7 +117,7 @@ $num_activities = 0;
 
 </div> <!-- user_home_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- user_home_content -->
 
diff --git a/codepot/src/codepot/views/user_settings.php b/codepot/src/codepot/views/user_settings.php
index 98d248fa..dc7e7a07 100644
--- a/codepot/src/codepot/views/user_settings.php
+++ b/codepot/src/codepot/views/user_settings.php
@@ -91,7 +91,7 @@ $this->load->view (
 
 </div> <!-- user_settings_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- user_settings_content -->
 
diff --git a/codepot/src/codepot/views/wiki_delete.php b/codepot/src/codepot/views/wiki_delete.php
index 67a5f315..fb6e3811 100644
--- a/codepot/src/codepot/views/wiki_delete.php
+++ b/codepot/src/codepot/views/wiki_delete.php
@@ -74,7 +74,7 @@ $this->load->view (
 
 </div> <!-- mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div>  <!-- wiki_delete_content -->
 
diff --git a/codepot/src/codepot/views/wiki_edit.php b/codepot/src/codepot/views/wiki_edit.php
index e20eea50..4b07cbde 100644
--- a/codepot/src/codepot/views/wiki_edit.php
+++ b/codepot/src/codepot/views/wiki_edit.php
@@ -162,7 +162,7 @@ $this->load->view (
 			print form_textarea ($xdata);
 		?>
 	</div>
-	<div id='wiki_edit_text_preview' class='form_input_preview'></div>
+	<div id='wiki_edit_text_preview' class='codepot-styled-text-preview'></div>
 
 	<?php if (!empty($wiki->attachments)): ?>
 	<div class='form_input_label'>
@@ -224,7 +224,7 @@ $this->load->view (
 
 </div> <!-- wiki_edit_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- content -->
 
diff --git a/codepot/src/codepot/views/wiki_editx.php b/codepot/src/codepot/views/wiki_editx.php
index e764203b..24aa39cb 100644
--- a/codepot/src/codepot/views/wiki_editx.php
+++ b/codepot/src/codepot/views/wiki_editx.php
@@ -445,7 +445,7 @@ $this->load->view (
 
 <div class="mainarea" id="wiki_edit_mainarea">
 
-<div class="title-band" id="wiki_edit_title_band">
+<div class="codepot-title-band" id="wiki_edit_title_band">
 	<div class="title"><input type="text" name="wiki_name" value="<?php print addslashes($wiki->name); ?>" maxlength="80" size="40" id="wiki_edit_name" placeholder="<?php print $this->lang->line('Name'); ?>" /></div>
 
 	<div class="actions">
@@ -495,8 +495,8 @@ $this->load->view (
 <div id="wiki_edit_toolbar">
 </div>
 
-<div id="wiki_edit_result" class="result">
-	<div id='wiki_edit_text_editor'></div>
+<div id="wiki_edit_result" class="codepot-relative-container-view">
+	<div id='wiki_edit_text_editor' class="codepot-styled-text-view"></div>
 </div> <!-- wiki_edit_result -->
 
 
@@ -504,7 +504,7 @@ $this->load->view (
 
 </div> <!-- wiki_edit_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- content -->
 
diff --git a/codepot/src/codepot/views/wiki_home.php b/codepot/src/codepot/views/wiki_home.php
index 74e040f8..1a8fb13a 100644
--- a/codepot/src/codepot/views/wiki_home.php
+++ b/codepot/src/codepot/views/wiki_home.php
@@ -90,7 +90,7 @@ $this->load->view (
 <div class="mainarea" id="wiki_home_mainarea">
 
 
-<div class="title-band" id="wiki_home_title_band">
+<div class="codepot-title-band" id="wiki_home_title_band">
 	<div class="title"><?php print $this->lang->line('Wikis');?></div>
 
 	<div class="actions">
@@ -104,7 +104,7 @@ $this->load->view (
 	<div style='clear: both'></div>
 </div>
 
-<div id="wiki_home_result" class="result">
+<div id="wiki_home_result" class="codepot-relative-container-view">
 <?php
 if (empty($wikis))
 {
@@ -127,7 +127,7 @@ else
 
 </div> <!-- wiki_home_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!-- wiki_home_content -->
 
diff --git a/codepot/src/codepot/views/wiki_show.php b/codepot/src/codepot/views/wiki_show.php
index 59ec8296..c46e4569 100644
--- a/codepot/src/codepot/views/wiki_show.php
+++ b/codepot/src/codepot/views/wiki_show.php
@@ -223,7 +223,7 @@ $this->load->view (
 
 <div class="mainarea" id="wiki_show_mainarea">
 
-<div class="title-band" id="wiki_show_title_band">
+<div class="codepot-title-band" id="wiki_show_title_band">
 	<div class="title"><?php print htmlspecialchars($wiki->name)?></div>
 
 	<div class="actions">
@@ -266,20 +266,20 @@ $this->load->view (
 	</div>
 </div>
 
-<div id="wiki_show_result" class="result">
-	<?php 
+<div id="wiki_show_result" class="codepot-relative-container-view">
+	<?php
+	print '<div id="wiki_show_wiki" class="codepot-styled-text-view">'; 
 	if ($is_html)
 	{
 		print $wiki->text;
 	}
 	else
 	{
-		print '<div id="wiki_show_wiki">';
 		print '<pre id="wiki_show_wiki_text" style="visibility: hidden">';
 		print htmlspecialchars($wiki->text);
 		print '</pre>';
-		print '</div>';
 	}
+	print '</div>';
 	?>
 </div> <!-- wiki_show_result -->
 
@@ -295,7 +295,7 @@ $this->load->view (
 
 </div> <!-- wiki_show_mainarea -->
 
-<div class='footer-pusher'></div> <!-- for sticky footer -->
+<div class='codepot-footer-pusher'></div> <!-- for sticky footer -->
 
 </div> <!--  wiki_show_content -->
 
diff --git a/codepot/src/css/code.css b/codepot/src/css/code.css
index 104d29eb..278c1282 100644
--- a/codepot/src/css/code.css
+++ b/codepot/src/css/code.css
@@ -2,18 +2,6 @@
 /*----------------------------------------------- 
  * project source file view  & blame view
  *-----------------------------------------------*/
-#code_folder_result,
-#code_file_result,
-#code_blame_result,
-#code_revision_result,
-#code_history_result,
-#code_diff_result,
-#code_search_result {
-	position: relative;
-	overflow: auto;
-	margin: 0.2em 0 0.2em 0;
-}
-
 #code_file_result_code,
 #code_blame_result_code_container {
 	border: none;
@@ -174,39 +162,22 @@
 	white-space: normal;
 	line-height: 1.2em;
 	background-color: #FAFAFA;
+
 	border: none;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
+
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
 }
 
-#code_folder_readme h1 {
-	border-bottom: 1px solid #DDD;
-	font-weight: bold;
-	line-height: 1.4em;
-}
-
-#code_folder_readme pre {
-	white-space: pre-wrap !important;
-	word-wrap: break-word !important;
-	background-color: #EEEEEE;
-	border: 1px solid #DFDFDF;
-}
-#code_folder_readme pre code {
-	white-space: pre-wrap !important;
-	word-wrap: break-word !important;
-	margin: 0 !important;
-	padding: 0 !important;
-}
-
 /*----------------------------------------------- 
  * project source edit view 
  *-----------------------------------------------*/
 #code_edit_result_code {
-	font-family: consolas, monaco, "Andale Mono", monospace;
+	font-family: "DejaVu Sans Mono", consolas, monaco, "Andale Mono", monospace;
 	overflow: auto;
 	border: none;
 	white-space: pre;
@@ -219,10 +190,6 @@
 	line-height: 1.2em;
 
 	position: absolute !important;
-	/*top: 300;
-	bottom: 200;
-	left: 100;
-	right: 100;*/
 }
 
 /*----------------------------------------------- 
@@ -256,7 +223,7 @@
 	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
 	white-space: -pre-wrap; /* Opera 4-6 */    
 	white-space: -o-pre-wrap; /* Opera 7 */    
-	font-family: consolas, monaco, "Andale Mono", monospace;
+	font-family: "DejaVu Sans Mono", consolas, monaco, "Andale Mono", monospace;
 }
 
 /*----------------------------------------------- 
@@ -266,13 +233,14 @@
 	line-height: 1.2em;
 	padding: 0.2em 0.2em 0.2em 0.2em;
 }
-
+/*
 #code_revision_result_files_table,
 #code_revision_result_properties_table {
 	padding: 0.5em 0 0.5em 0;
 	background: inherit;
 	line-height: 1.5em;
 }
+*/
 
 #code_revision_result_files_table td,
 #code_revision_result_properties_table td {
@@ -362,17 +330,9 @@
 	box-sizing: border-box;
 }
 
-#code_diff_old_code,
-#code_diff_new_code {
-	border: none;
-	float; left;
-	margin: 0;
-	padding: 0;
-	line-height: 1.2em;
+#code_diff_full_code_view {
 	width: 100%;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+	overflow: hidden;
 }
 
 #code_diff_old_code_view,
diff --git a/codepot/src/css/common.css b/codepot/src/css/common.css
index 06914a80..79316fe7 100644
--- a/codepot/src/css/common.css
+++ b/codepot/src/css/common.css
@@ -13,7 +13,7 @@ body {
 }
 
 textarea {
-	font-family: consolas, monaco, "Andale Mono", monospace;
+	font-family: "DejaVu Sans Mono", consolas, monaco, "Andale Mono", monospace;
 
 	tab-size: 5;
 	-moz-tab-size: 5;
@@ -24,36 +24,50 @@ textarea {
 	box-sizing: border-box;
 }
 
+pre, code, tt {
+	font-family: "DejaVu Sans Mono", consolas, monaco, "Andale Mono", monospace;
+}
+
 .content {
 	font-size: 0.9em;
 	font-family: /*Ubuntu,*/ "Trebuchet MS", Tahoma, Verdana, sans-serif;
 
-	min-height: 100%; /* for stick footer */
-	height: auto !important; /* for stick footer */
-	height: 100%; /* for stick footer */
-	margin: 0 auto -40px; /* for stick footer */
+	min-height: 100%; /* for sticky footer */
+	height: auto !important; /* for sticky footer */
+	height: 100%; /* for sticky footer */
+	margin: 0 auto -40px; /* for sticky footer */
 }
 
 .content h1 {
-	font-size: 1.3em;
+	font-size: 1.4em;
 	font-weight: bold;
 }
 
 .content h2 {
-	font-size: 1.2em;
+	font-size: 1.3em;
 	font-weight: bold;
 }
 
 .content h3 {
-	font-size: 1.1em;
+	font-size: 1.2em;
 	font-weight: bold;
 }
 
 .content h4 {
+	font-size: 1.1em;
+	font-weight: bold;
+}
+
+.content h5 {
 	font-size: 1.0em;
 	font-weight: bold;
 }
 
+.content h6 {
+	font-size: 0.9em;
+	font-weight: bold;
+}
+
 .content ul {
 	list-style: square;
 	white-space: normal;
@@ -72,28 +86,6 @@ textarea {
 	color: #4665A2;
 }
 
-.content pre, 
-.content code,
-.content tt {
-	font-family: consolas, monaco, "Andale Mono", monospace;
-	overflow: auto;
-	border: none;
-	white-space: pre;
-	margin: 0;
-	padding: 0.2em 0.2em 0.2em 0.2em;
-
-	tab-size: 5;
-	-moz-tab-size: 5;
-	-o-tab-size: 5;
-}
-
-.content pre.pre-wrapped, 
-.content code.pre-wrapped {
-	white-space: -moz-pre-wrap !important;
-	white-space: -o-pre-wrap !important; 
-	white-space: pre-wrap !important;
-}
-
 .content .collapsible-box {
 	margin: 0;
 	padding: 0;
@@ -128,50 +120,6 @@ textarea {
 	padding: 0.2em 0.2em 0.2em 0.2em !important; /* !important so that jquery-ui.css doesn't override this */
 }
 
-.content .fit-width-result-table,
-.content .full-width-result-table  {
-	border-collapse: collapse;
-	font-size: inherit;
-	background: inherit;
-}
-
-.content .full-width-result-table  {
-	width: 100%;
-}
-
-.content .fit-width-result-table tr,
-.content .full-width-result-table tr {
-	vertical-align: text-top;
-	text-align: left;
-	white-space: nowrap;
-
-	border-bottom: 1px solid #F0F0F0;
-	color: #333333;
-}
-
-.content .fit-width-result-table td,
-.content .full-width-result-table td {
-	padding: 0.4em 0.8em 0.4em 0.8em;
-	white-space: nowrap;
-}
-
-.content .fit-width-result-table tr th,
-.content .full-width-result-table tr th,
-.content .fit-width-result-table tr td.header,
-.content .full-width-result-table tr td.header {
-	padding: 0.5em 0.8em 0.5em 0.8em;
-	font-weight: bold;
-	text-align: left;
-	color: #1C94C4;
-	background-color: #E5ECF9;
-	white-space: nowrap;
-}
-
-.content .fit-width-result-table tr td img,
-.content .full-width-result-table tr td img {
-	vertical-align: middle;
-	display:inline-block;
-}
 
 .content .taskbar {
 	font-size: 1em;
@@ -235,9 +183,9 @@ textarea {
 
 	height: 4.5em;
 
-	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
 	width: 100%;
 
 	background-color: #F5F5F5;
@@ -275,19 +223,6 @@ textarea {
 	padding: 0;
 }
 
-/*
-.content .projectbar .fixedmenu a,
-.content .projectbar .fixedmenu a:visited {
-	padding-left: 0.5em;
-	padding-right: 0.5em;
-	color: #AAAAAA;
-}
-
-
-.content .projectbar .fixedmenu a:hover {
-	color: #333333;
-}*/
-
 
 .content .projectbar .fixedmenu a.selected {
 	/*padding: 6px;*/
@@ -376,10 +311,6 @@ textarea {
 	background-color: #BBCCDD;
 }
 
-.content .mainarea .result {
-	overflow: auto;
-}
-
 .content .mainarea .form_container {
 	padding: 0.5em 0.5em 0.5em 0.5em;
 	padding-bottom: 0.3em;
@@ -406,6 +337,8 @@ textarea {
 	height: 1.8em; 
 	vertical-align: middle;
 	padding: 0.2em 0.2em 0.2em 0.2em;
+
+	max-width: 100%;
 }
 
 .content .mainarea form input:focus {
@@ -486,52 +419,199 @@ textarea {
 	padding-bottom: 0.2em;
 }
 
-.content .mainarea .form_input_preview {
-	background-color: #FFFFF0;
-	font-size: 90%;
-	padding: 0.2em 0.2em 0.2em 0.2em;
-	margin-bottom: 0.5em;
-}
-
-.content .mainarea .form_input_preview pre {
-	background-color: #F8F8FA;
-	padding: 0.2em 0.2em 0.2em 0.2em;
-}
-
 .content .mainarea .icon {
 	border: 0;
 }
 
-.content .mainarea pre {
-	border: none;
+
+.content .mainarea li img  {
+	vertical-align: middle;
+	padding: 2px;
 }
 
-.content .mainarea pre.wiki {
-	white-space: -moz-pre-wrap;
-	white-space: -o-pre-wrap; 
-	white-space: pre-wrap;
+.content .form_message {
+	color: red;
+}
 
-	padding: 0.3em;
-	line-height: 1.2em;
+.content .form_field_error {
+	color: red;
+}
 
-	tab-size: 5;
-	-moz-tab-size: 5;
-	-o-tab-size: 5;
+.content span.quoted {
+	color: #bb2322;
+	font-style: italic;
+}
+
+.content span.left_arrow_indicator { 
+	position: relative;
+	background: #FA5240;
+	color: #FFFFFF;;
+	font-size: 0.9em;
+	margin-left: 0.2em;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+} 
+
+.content span.left_arrow_indicator:after {
+	right: 100%;
+	top: 50%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-color: rgba(245, 230, 17, 0);
+	border-right-color: #FA5240;
+	border-width: 5px;
+	margin-top: -5px; 
+}
+
+/* ------------------------------------------------------ */
+
+.codepot-infobox {
+	position: absolute;
+	top: 5px;
+	right: 2px;
+	width: 22em;
+
+	background: #E5ECF9 none repeat scroll 0 0;
+
+	border: #D4DBE8 1px solid;
+	overflow: auto;
+	padding: 0.2em 0.4em 0.2em 0.4em;
+	font-size: 0.9em;
 
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
 
-	background-color: #F8F8FA;
+	color: #333333;
 }
 
-.content .mainarea table.wiki {
+.codepot-infobox .title {
+	background: #E0E0E0;
+	/*background: #E5ECF9 none repeat scroll 0 0;*/
+	border: none;
+	color: #1C94C4;
+	font-size: 0.9em;
+	padding: 0.5em;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+.codepot-infobox ul {
+	line-height: 1.5em;
+	margin: 1px 0 0 0;
+	padding: 0.5em 1.8em 0.5em 1.8em;
+}
+
+.codepot-infostrip {
+	font-size: 0.9em;
+
+	background: #E5ECF9 none repeat scroll 0 0;
+	border: #D4DBE8 1px solid; 
+
+	margin: 0.3em 0em 0em 0em;
+	padding: 0.3em 0.3em 0.3em 0.3em;
+	text-align: right;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+.codepot-infostrip a {
+	text-decoration: none;
+}
+
+
+.codepot-title-band {
+	font-size: 0.9em;
+
+	background: #F0F0F0 none repeat scroll 0 0;
+	/*border: #D4DBE8 1px solid; */
+
+	margin: 0.2em 0em 0.2em 0em;
+	padding: 1em 0.5em 1em 0.5em;
+	/*text-align: right;*/
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+.codepot-title-band a {
+	text-decoration: none;
+}
+
+.codepot-title-band .title {
+	float: left;
+	text-transform: uppercase;
+	font-weight: bold;
+	font-size: 1.2em !important;
+	line-height: 1.5em;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+.codepot-title-band .actions {
+	float: right;
+	line-height: 1.5em;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+.codepot-sidebar {
+	font-size: 0.9em;
+	float: right;
+	width: 22em;
+	margin-top: 0.3em;
+	margin-left: 0.5em;
+	margin-right: 0.5em;
+}
+
+.codepot-sidebar .collapsible-box {
+	/* extra margin-bottom for collapsible located on the sidebar */
+	margin-bottom: 0.5em;
+}
+
+.codepot-sidebar .user_icon_img {
+	height: 2em;
+	width: 2em;
+	vertical-align: middle;
+	padding-top: 1px;
+	padding-bottom: 1px;
+	padding-right: 1px;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+.codepot-sidebar a {
+	text-decoration: none;
+	padding-left: .2em;
+	padding-right: .2em;
+}
+
+
+.codepot-fit-width-table,
+.codepot-full-width-table  {
 	border-collapse: collapse;
 	font-size: inherit;
 	background: inherit;
+	max-width: 100%;
 }
 
-.content .mainarea table.wiki tr {
+.codepot-full-width-table  {
+	width: 100%;
+}
+
+.codepot-fit-width-table tr,
+.codepot-full-width-table tr {
 	vertical-align: text-top;
 	text-align: left;
 	white-space: nowrap;
@@ -540,8 +620,17 @@ textarea {
 	color: #333333;
 }
 
-.content .mainarea table.wiki th {
-	padding: 0.5em 0.8em 0.5em 0.8em;
+.codepot-fit-width-table td,
+.codepot-full-width-table td {
+	padding: 0.2em 0.2em 0.2em 0.2em;
+	white-space: nowrap;
+}
+
+.codepot-fit-width-table th,
+.codepot-full-width-table th,
+.codepot-fit-width-table td.header,
+.codepot-full-width-table td.header {
+	padding: 0.2em 0.2em 0.2em 0.2em;
 	font-weight: bold;
 	text-align: left;
 	color: #1C94C4;
@@ -549,76 +638,15 @@ textarea {
 	white-space: nowrap;
 }
 
-.content .mainarea table.wiki td {
-	padding: 0.5em 0.8em 0.5em 0.8em;
-	text-align: left;
-	white-space: normal;
-}
-
-.content .mainarea p.wiki {
-	/* use the default for normal cases */
-	overflow: auto;
-}
-
-.content .mainarea p.wiki img {
-	max-width: 100%;
-}
-
-.content .mainarea li img  {
+.codepot-fit-width-table tr td img,
+.codepot-full-width-table tr td img {
 	vertical-align: middle;
-	padding: 2px;
+	display:inline-block;
 }
 
-.content .mainarea table p.wiki {
-	/* no margin-top within tables */
-	margin-top: 0;
-}
-
-.content .mainarea pre.line-numbered span.line-number-block {
-	color:black;
-	display:block;
-
-	float:left;
-	border-right:1px solid;
-	text-align:right;
-
-	/* the following properties must match .content .mainarea pre.line-numbered code.line-numbered-code */
-	overflow: auto;
-	margin: 0;
-	padding: 0.2em;
-	line-height: 1.4em;
-}
-
-.content .mainarea pre.line-numbered span.line-number-block span {
-	display: block;
-	padding: 0 0.2em 0 0.5em;
-}
-
-.content .mainarea pre.line-numbered span.line-number-block span.line-number-empty {
-
-}
-
-.content .mainarea pre.line-numbered code.line-numbered-code {
-	/* this should override some properties of .prettyprint */
-	color:black;
-	display:block;
-
-	/* the following properties must match .content .mainarea pre.line-numbered span.line-number-block */
-	overflow: auto;
-	margin: 0;
-	padding: 0.2em;
-	line-height: 1.4em;
-}
-
-.content .mainarea pre.line-numbered code.line-numbered-code span.line-numbered-code-line-empty {
-	display: inline-block;
-	width: 100%;
-	background: linear-gradient(0deg, transparent 48%, #CCCCCC 52%, transparent 54%);
-}
-
-.content .mainarea pre.line-numbered span.line-number-clear {
-	display:block;
-	clear:both;
+.codepot-spacious-table th,
+.codepot-spacious-table td {
+	padding: 0.5em 0.5em 0.5em 0.5em;
 }
 
 .prettyprint ol {
@@ -630,7 +658,7 @@ textarea {
 	/* anything that make prettyprint area different from other pres? */
 	/*background-color: #FFFFFF;*/
 	/*border: 1px solid #ccc;*/
-	background-color: #F8F8FA;
+	/*background-color: #F8F8FA;*/
 	border: none;
 	line-height: 1.2em;
 	padding: 0.3em;
@@ -708,201 +736,274 @@ textarea {
 }
 
 
-.content .infostrip {
-	font-size: 0.9em;
-
-	background: #E5ECF9 none repeat scroll 0 0;
-	border: #D4DBE8 1px solid; 
-
-	margin: 0.3em 0em 0em 0em;
-	padding: 0.3em 0.3em 0.3em 0.3em;
-	text-align: right;
-
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-}
-
-.content .infostrip a {
-	text-decoration: none;
-}
-
-.content .title-band {
-	font-size: 0.9em;
-
-	background: #F0F0F0 none repeat scroll 0 0;
-	/*border: #D4DBE8 1px solid; */
-
-	margin: 0.2em 0em 0.2em 0em;
-	padding: 1em 0.5em 1em 0.5em;
-	/*text-align: right;*/
-
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-}
-
-.content .title-band a {
-	text-decoration: none;
-}
-
-.content .title-band .title {
-	float: left;
-	text-transform: uppercase;
-	font-weight: bold;
-	font-size: 1.2em !important;
-	line-height: 1.5em;
-	margin: 0 !important;
-	padding: 0 !important;
-}
-
-.content .title-band .actions {
-	float: right;
-	line-height: 1.5em;
-	margin: 0 !important;
-	padding: 0 !important;
-}
-
-.content .sidebar {
-	font-size: 0.9em;
-	float: right;
-	width: 22em;
-	margin-top: 0.3em;
-	margin-left: 0.5em;
-	margin-right: 0.5em;
-}
-
-.content .sidebar .collapsible-box {
-	/* extra margin-bottom for collapsible located on the sidebar */
-	margin-bottom: 0.5em;
-}
-
-.content .sidebar .user_icon_img {
-	height: 2em;
-	width: 2em;
-	vertical-align: middle;
-	padding-top: 1px;
-	padding-bottom: 1px;
-	padding-right: 1px;
-
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-}
-
-/*
-.content .sidebar ul {
-	margin: 0.2em 0 0.2em 0.5em;
-	padding: 0.2em 0 0.2em 1em;
-}
-*/
-
-.content .sidebar a {
-	text-decoration: none;
-	padding-left: .2em;
-	padding-right: .2em;
-}
-
-/*
-.content .sidebar table {
-	font-size: 1em;
-	width: 100%;
+.codepot-static-container-view {
+	position: static;
+	overflow: visible;
 	margin: 0.2em 0 0.2em 0;
-	padding: 0.2em 0 0.2em 1em;
-}
-*/
-
-.content .infobox {
-	position: absolute;
-	top: 5px;
-	right: 2px;
-	width: 22em;
-
-	background: #E5ECF9 none repeat scroll 0 0;
-
-	border: #D4DBE8 1px solid;
-	overflow: auto;
-	padding: 0.2em 0.4em 0.2em 0.4em;
-	font-size: 0.9em;
-
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-
-	color: #333333;
+	width: 100%;
 }
 
-.content .infobox .title {
-	background: #E0E0E0;
-	/*background: #E5ECF9 none repeat scroll 0 0;*/
-	border: none;
-	color: #1C94C4;
-        font-size: 0.9em;
-	padding: 0.5em;
-
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-}
-
-.content .infobox ul {
-	line-height: 1.5em;
-	margin: 1px 0 0 0;
-	padding: 0.5em 1.8em 0.5em 1.8em;
-}
-
-.content .infobox pre {
-	margin: 0;
-	padding: 0.5em 0.2em 0.5em 0.2em;
-}
-
-.content .form_message {
-	color: red;
-}
-
-.content .form_field_error {
-	color: red;
-}
-
-.content span.quoted {
-	color: #bb2322;
-	font-style: italic;
-}
-
-
-.content span.left_arrow_indicator { 
+.codepot-relative-container-view {
 	position: relative;
-	background: #FA5240;
-	color: #FFFFFF;;
-	font-size: 0.9em;
-	margin-left: 0.2em;
-	padding-left: 0.5em;
-	padding-right: 0.5em;
-} 
+	overflow: auto;
+	margin: 0.2em 0 0.2em 0;
+	width: 100%;
+}
 
-.content span.left_arrow_indicator:after {
-	right: 100%;
-	top: 50%;
-	border: solid transparent;
-	content: " ";
-	height: 0;
-	width: 0;
-	position: absolute;
-	pointer-events: none;
-	border-color: rgba(245, 230, 17, 0);
-	border-right-color: #FA5240;
-	border-width: 5px;
-	margin-top: -5px; 
+.codepot-plain-text-view,
+.codepot-styled-text-view,
+.codepot-styled-text-preview {
+	overflow: auto;
+}
+
+.codepot-styled-text-preview {
+	background-color: #FAFAFA;
+	padding: 0.4em 0.4em 0.4em 0.4em;
+}
+
+.codepot-styled-text-view h1,
+.codepot-styled-text-preview h1 {
+	border-bottom: 1px solid #DDD;
+	font-weight: bold;
+	line-height: 1.4em;
+}
+
+.codepot-styled-text-view h2,
+.codepot-styled-text-preview h2 {
+	font-weight: bold;
+	line-height: 1.3em;
+}
+
+.codepot-styled-text-view h3,
+.codepot-styled-text-preview h3 {
+	font-weight: bold;
+	line-height: 1.2em;
+}
+
+.codepot-styled-text-view h4,
+.codepot-styled-text-preview h4 {
+	font-weight: bold;
+	line-height: 1.1em;
+}
+
+.codepot-styled-text-view h5,
+.codepot-styled-text-preview h5 {
+	font-weight: bold;
+	line-height: 1.0em;
+}
+
+.codepot-styled-text-view h6,
+.codepot-styled-text-preview h6 {
+	font-weight: bold;
+	line-height: 0.9em;
+}
+
+.codepot-plain-text-view blockquote,
+.codepot-styled-text-view blockquote,
+.codepot-styled-text-preview blockquote {
+	background: #F5F5F5;
+	border-left: 5px solid #CCCCCC;
+	margin: 1em 1em 1em 1em;
+	padding: 0.5em 0.5em 0.5em 0.5em;
+}
+
+.codepot-plain-text-view pre,
+.codepot-styled-text-view pre,
+.codepot-styled-text-preview pre,
+.codepot-styled-code-view pre {
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow: auto;
+	line-height: 1.2em;
+
+	tab-size: 5;
+	-moz-tab-size: 5;
+	-o-tab-size: 5;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	margin: 0.1em 0 0.1em 0;
+	padding: 0.1em 0.1em 0.1em 0.1em;
+
+	background-color: #F5F5F5;
+	border: 1px solid #DFDFDF;
+}
+
+.codepot-plain-text-view pre code,
+.codepot-styled-text-view pre code,
+.codepot-styled-text-preview pre code,
+.codepot-styled-code-view pre code {
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow: auto;
+	line-height: 1.2em;
+
+	tab-size: 5;
+	-moz-tab-size: 5;
+	-o-tab-size: 5;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	border: none;
+	margin: 0;
+	padding: 0;
+}
+
+.codepot-plain-text-view blockquote pre,
+.codepot-styled-text-view blockquote pre,
+.codepot-styled-text-preview blockquote pre {
+	border: none;
+	margin: 0;
+	background-color: inherit;
+}
+
+.codepot-styled-code-view pre,
+.codepot-styled-code-view pre code {
+	/* overrides white-space and word-wrap over the previous definitions */
+	white-space: pre !important;
+	word-wrap: normal !important;
+}
+
+.codepot-plain-text-view pre,
+.codepot-plain-text-view pre code {
+	border: none;
+	background-color: inherit;
+}
+
+pre.codepot-line-numbered span.codepot-line-number-block {
+	color:black;
+	display:block;
+
+	float:left;
+	border-right:1px solid;
+	text-align:right;
+
+	/* the following properties must match .content .mainarea pre.codepot-line-numbered code.codepot-line-numbered-code */
+	overflow: auto;
+	margin: 0;
+	padding: 0.2em;
+	line-height: 1.2em;
+
+	min-width: 5em;
+}
+
+pre.codepot-line-numbered span.codepot-line-number-block span {
+	display: block;
+	padding: 0 0.2em 0 0.5em;
+}
+
+pre.codepot-line-numbered span.codepot-line-number-block span.codepot-line-number-empty {
+
+}
+
+pre.codepot-line-numbered code.codepot-line-numbered-code {
+	/* this should override some properties of .prettyprint */
+	color:black;
+	display:block;
+
+	/* the following properties must match .content .mainarea pre.codepot-line-numbered span.codepot-line-number-block */
+	overflow: auto;
+	margin: 0;
+	padding: 0.2em;
+	line-height: 1.2em;
+}
+
+pre.codepot-line-numbered code.codepot-line-numbered-code span.codepot-line-numbered-code-line-empty {
+	display: inline-block;
+	width: 100%;
+	background: linear-gradient(0deg, transparent 48%, #CCCCCC 52%, transparent 54%);
+}
+
+pre.codepot-line-numbered span.codepot-line-number-clear {
+	display:block;
+	clear:both;
+}
+
+.codepot-styled-text-view table, 
+.codepot-styled-text-preview table {
+	border-collapse: collapse;
+	/*font-size: inherit;
+	background: inherit;*/
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	margin: 0.1em 0 0.1em 0;
+	padding: 0;
+
+	max-width: 100%;
+	border: 1px solid #DFDFDF;
+}
+
+.codepot-styled-text-view table tr, 
+.codepot-styled-text-preview table tr {
+	vertical-align: text-top;
+	text-align: left;
+	white-space: nowrap;
+}
+
+.codepot-styled-text-view table th, 
+.codepot-styled-text-preview table th {
+	padding: 0.3em 0.3em 0.3em 0.3em;
+	font-weight: bold;
+	text-align: center;
+	white-space: nowrap;
+
+	background-color: #F5F5F5;
+	color: #1C1C1C; 
+	border-bottom: 1px solid #F0F0F0;
+}
+
+.codepot-styled-text-view table td, 
+.codepot-styled-text-preview table td {
+	padding: 0.3em 0.3em 0.3em 0.3em;
+	text-align: left;
+	white-space: normal;
+	word-wrap: break-word;
+	color: #333333;
+	border-bottom: 1px solid #F0F0F0;
+	border-left: 1px dashed #F0F0F0;
+}
+
+.codepot-styled-text-view p, 
+.codepot-styled-text-preview p {
+	/* use the default for normal cases */
+	overflow: auto;
+}
+
+.codepot-styled-text-view img, 
+.codepot-styled-text-preview img {
+	max-width: 100%;
+}
+
+.codepot-styled-text-view table p, 
+.codepot-styled-text-preview table p {
+	/* no margin-top within tables */
+	margin-top: 0;
+}
+
+.codepot-styled-text-view table img, 
+.codepot-styled-text-preview table img {
+	/* no margin-top within tables */
+	width: 100%;
 }
 
 /* === footer === */
-
-.content .footer-pusher {
+.codepot-footer-pusher {
 	clear: both;
 	height: 40px; /* for sticky footer */
 }
 
-.footer {
+.codepot-footer {
 	clear: both;
 	text-align: right;
 	vertical-align: middle;
@@ -921,7 +1022,7 @@ textarea {
 }
 
 
-.footer a {
+.codepot-footer a {
 	color: #FFFFFF;
 }
 
@@ -1006,6 +1107,7 @@ textarea {
 	margin-bottom: 0.5em;
 }
 
+
 /* ================ login page =================== */
 
 #login_user_name {
@@ -1035,6 +1137,3 @@ textarea {
 #login_signin_button {
 	height: 2em;
 }
-
-
-
diff --git a/codepot/src/css/issue.css b/codepot/src/css/issue.css
index 8607d5e2..4c845427 100644
--- a/codepot/src/css/issue.css
+++ b/codepot/src/css/issue.css
@@ -95,12 +95,6 @@ li.issue-owner {
 /*---------------------------------------------
  * issue home
  *---------------------------------------------*/
-#issue_home_result,
-#issue_show_result {
-	position: relative;
-	overflow: auto;
-	margin: 0.2em 0 0.2em 0;
-}
 
 #issue_home_result_table tr {
 	vertical-align: text-top;
@@ -215,21 +209,29 @@ li.issue-owner {
 	padding-top: 0.5em;
 }
 
-#issue_show_changes {
-	margin-top: 1em;
-	padding-top: 0.5em;
-	padding-bottom: 0.5em;
-	overflow: auto;
-}
-
-#issue_show_changes .infostrip {
+#issue_show_changes_strip .infostrip {
 	margin-bottom: 0.5em;
 }
 
-#issue_show_changes .infostrip .title {
+#issue_show_changes_strip .title {
 	float: left;
 }
 
+#issue_show_changes {
+	/*
+	margin-top: 1em;
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+	*/
+	overflow: auto;
+}
+
+#issue_show_changes_table td {
+	padding: 0.3em 0.3em 0.3em 0.3em;
+	white-space: normal;
+	word-wrap: break-word;
+}
+
 #issue_show_changes_table td.date {
 	min-width: 5em;
 	width: 1px;
@@ -247,49 +249,13 @@ li.issue-owner {
 	background-color: #F1F1FF;
 }
 
+#issue_show_changes_table td.details .list ul {
+	padding: 0;
+	margin: 0.2em 0.5em 0.5em 1em;
+}
+
 #issue_show_changes_table td.details .list ul li {
-	padding-bottom: 0.3em;
-}
-
-#issue_show_changes_table .issue_changes_comment .prettyprint {
-	/* special pre-wrap rule to make the pretty-printed text to wrap 
-	 * in the issue comment listing. i didn't manage to get oveflow: auto 
-	 * or overflow: scroll to make make a scroll bar show up. */
-
-	white-space: -moz-pre-wrap;
-	white-space: -o-pre-wrap;
-	white-space: pre-wrap;
-}
-
-#issue_change_form {
-	font-size: 1em;
-}
-
-/* all these elements inside the form requires a lot of refinement.
- * many of these are duplicates of elemenents in common.css */
-#issue_change_form .form_input_preview {
-	background-color: #FFFFF0;
-	font-size: 1em;
-	padding: 0.2em 0.2em 0.2em 0.2em;
-	margin-bottom: 0.5em;
-}
-
-#issue_change_form .form_input_preview table {
-	font-size: 1em;
-}
-
-#issue_change_form .form_input_preview pre {
-	background-color: #F8F8FA;
-	/*padding: 0.2em 0.2em 0.2em 0.2em;*/
-
-	background-color: #F8F8FA;
-	border: none;
-	line-height: 1.2em;
-	padding: 0.3em;
-
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
+	padding: 0.1em;
 }
 
 #issue_change_comment_preview_button.ui-button {
diff --git a/codepot/src/css/wiki.css b/codepot/src/css/wiki.css
index c0107b2c..b0919a89 100644
--- a/codepot/src/css/wiki.css
+++ b/codepot/src/css/wiki.css
@@ -2,26 +2,6 @@
  * wiki
  *---------------------------------------------*/
 
-#wiki_home_result,
-#wiki_show_result {
-	position: relative;
-	overflow: auto;
-	margin: 0.2em 0 0.2em 0;
-	width: 100%;
-}
-
-#wiki_show_result pre {
-	white-space: pre-wrap !important;
-}
-
-#wiki_show_result table {
-	border-collapse: collapse;
-}
-
-#wiki_show_result table td {
-	border: 1px solid #B0B0B0;
-}
-
 #wiki_edit_result {
 	position: relative;
 	overflow: visible !important;
@@ -148,7 +128,6 @@
 	padding: 0.2em 0.2em 0.2em 0.2em !important;
 	width: 100% !important;
 	border: none !important;
-	background-color: #F9F9F9 !important;
 	overflow-y: auto !important;
 	overflow-x: visible !important;
 	outline: none !important;
diff --git a/codepot/src/js/showdown.js b/codepot/src/js/showdown.js
index dd249107..deec9b3d 100644
--- a/codepot/src/js/showdown.js
+++ b/codepot/src/js/showdown.js
@@ -1633,7 +1633,7 @@ showdown.subParser('githubCodeBlocks', function (text, options, globals) {
     codeblock = codeblock.replace(/^\n+/g, ''); // trim leading newlines
     codeblock = codeblock.replace(/\n+$/g, ''); // trim trailing whitespace
 
-    codeblock = '<pre><code' + (language ? ' class="' + language + ' language-' + language + '"' : '') + '>' + codeblock + end + '</code></pre>';
+    codeblock = '<pre><code' + (language ? ' class="' + language + ' language-' + language + ' prettyprint lang-' + language + '"' : '') + '>' + codeblock + end + '</code></pre>';
 
     return showdown.subParser('hashBlock')(codeblock, options, globals);
   });