diff --git a/codepot/src/codepot/views/code_blame.php b/codepot/src/codepot/views/code_blame.php
index 15751a1c..348d782e 100644
--- a/codepot/src/codepot/views/code_blame.php
+++ b/codepot/src/codepot/views/code_blame.php
@@ -215,48 +215,84 @@ if ($login['settings'] != NULL &&
     $login['settings']->code_hide_line_num == 'Y') $prettyprint_linenums = '';
 ?>
 
-<pre class="prettyprint <?php print $prettyprint_linenums?> <?php print $prettyprint_lang?>" id="code_blame_mainarea_result_pre">
+<pre id="code_blame_mainarea_result_code_container" class="line-numbered">
 <?php
-
-	$content = $file['content'];
+// when producing 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
+// to display: block.
+//
+// If you have new lines between <span></span> and <code></code>, there will
+// be some positioning problems as thouse new lines are rendered at the top
+// of the actual code.
+//
+	$content = &$file['content'];
 	$len = count($content);
-	$rev = '';
-	$author = '';
 
+	print '<span class="line-number-block" id="code_blame_mainarea_result_code_revision">';
+	$rev = '';
 	for ($i = 0; $i < $len; $i++)
 	{
-		$line = $content[$i];
-	
-		if ($line['author'] != $author || $line['rev'] != $rev) 
-		{
-			$author = $line['author'];
-			$author_padded = str_pad ($author, 9, ' ', STR_PAD_RIGHT);
-			$author_padded = substr($author_padded, 0, 9);
-		}
-		else
-		{
-			$author_padded = str_pad (' ', 9, ' ', STR_PAD_RIGHT);
-		}
+		$line = &$content[$i];
 
 		if ($line['rev'] != $rev) 
 		{
 			$rev = $line['rev'];
-			$rev_padded = str_pad ($rev, 6, ' ', STR_PAD_LEFT);
-	
+			//$rev_to_show = str_pad ($rev, 6, ' ', STR_PAD_LEFT);
+			$rev_to_show = $rev;
+
 			$xpar = $this->converter->AsciiTohex ($headpath);
-			$rev_padded = anchor ("code/blame/{$project->id}/{$xpar}/{$rev}", $rev_padded);
+			$rev_to_show = anchor ("code/blame/{$project->id}/{$xpar}/{$rev}", $rev_to_show);
 		}
 		else
 		{
-			$rev_padded = str_pad (' ', 6, ' ', STR_PAD_LEFT);
+			//$rev_to_show = str_pad (' ', 6, ' ', STR_PAD_LEFT);
+			$rev_to_show = ' ';
 		}
-	
-		print "<span class='nocode'>{$rev_padded}</span> ";
-		print "<span class='nocode' title='{$author}'>{$author_padded}</span> ";
+
+		print "<span>{$rev_to_show}</span>";
+	}
+	print '</span>';
+
+	print '<span class="line-number-block" id="code_blame_mainarea_result_code_author">';
+	$rev = '';
+	$author = '';
+	for ($i = 0; $i < $len; $i++)
+	{
+		$line = &$content[$i];
+
+		if ($line['author'] != $author || $line['rev'] != $rev) 
+		{
+			$author = $line['author'];
+			//$author_to_show = str_pad ($author, 9, ' ', STR_PAD_RIGHT);
+			//$author_to_show = substr($author_to_show, 0, 9);
+			$author_to_show = $author;
+		}
+		else
+		{
+			//$author_to_show = str_pad (' ', 9, ' ', STR_PAD_RIGHT);
+			$author_to_show = ' ';
+		}
+
+		$rev = $line['rev'];
+		print "<span>{$author_to_show}</span>";
+	}
+	print '</span>';
+
+	printf ('<code class="line-numbered-code prettyprint %s %s" id="code_blame_mainarea_result_code">', $prettyprint_linenums, $prettyprint_lang);
+
+	for ($i = 0; $i < $len; $i++)
+	{
+		$line = &$content[$i];
 
 		print htmlspecialchars ($line['line']);
 		print "\n";
 	}
+
+	print '</code>';
 ?>
 </pre>
 
@@ -268,7 +304,7 @@ if ($login['settings'] != NULL &&
 
 
 <div class="title"><?php print  $this->lang->line('Message') ?></div>
-<pre id="code_blame_mainarea_result_info_logmsg">
+<pre id="code_blame_mainarea_result_info_logmsg" class="pre-wrapped">
 <?php print  $file['logmsg'] ?>
 </pre>
 
@@ -294,6 +330,8 @@ if (array_key_exists('properties', $file) && count($file['properties']) > 0)
 </pre>
 </div> <!-- code_blame_mainarea_result_info -->
 
+
+
 </div> <!-- code_blame_mainarea_result -->
 
 </div> <!-- code_blame_mainarea -->
diff --git a/codepot/src/codepot/views/code_diff.php b/codepot/src/codepot/views/code_diff.php
index 513e8771..3087b1f2 100644
--- a/codepot/src/codepot/views/code_diff.php
+++ b/codepot/src/codepot/views/code_diff.php
@@ -339,7 +339,7 @@ if (FALSE) // don't want to delete code for the original diff view.
 		foreach ($file['content'] as $x)
 		{
 			print '<tr class="diff">';
-	
+
 			if (array_key_exists('rev1line', $x)) 
 			{
 				$diffclass = array_key_exists('rev1diffclass', $x)? $x['rev1diffclass']: 'diff';
@@ -394,7 +394,7 @@ else
 	//
 	// SHOW THE OLD FILE
 	//
-	print ("<div style='float:left; width: 49%;'>");
+	print ("<div style='float:left; width: 50%; margin: 0; padding: 0;'>");
 
 	print "<div class='navigator'>";
 	$currev = $file['created_rev'];
@@ -405,7 +405,7 @@ else
 	print '&nbsp;&nbsp;&nbsp;';
 
 	// show the history details of the previous revision at the root directory
-	$revanc = "code/revision/{$project->id}/!/{$prevrev}";
+	$revanc = "code/revision/{$project->id}/!/{$file['against']['created_rev']}";
 	print anchor ($revanc, ($this->lang->line('Revision') . ' ' . $file['against']['created_rev']));
 
 	$currev = $file['created_rev'];
@@ -413,10 +413,44 @@ else
 	$nextanc = "code/{$diff_view}/{$project->id}/{$xpar}/{$currev}/{$nextrev}";
 	print '&nbsp;&nbsp;&nbsp;';
 	print anchor ($nextanc, '>>');
-	print "</div>";
+	print "</div>"; // navigator
 
-	print "<pre class='prettyprint lang-{$fileext}' style='width: 100%' id='code_diff_mainarea_result_fulldiffold'>";
+	//print "<pre class='prettyprint lang-{$fileext}' style='width: 100%;' id='code_diff_mainarea_result_fulldiffold'>";
+	print '<pre style="width: 100%;" id="code_diff_mainarea_result_fulldiffold" class="line-numbered">';
 
+	print '<span class="line-number-block">';
+	$actual_line_no = 1;
+	foreach ($file['content'] as $x)
+	{
+		if (array_key_exists('rev2line', $x)) 
+		{
+			// on the old file, there can be unchanged, changed, and deleted lines.
+			// however, it should consider added lines on the new file side.
+			if (array_key_exists('rev2diffclass', $x) && $x['rev2diffclass'] == 'diffadded')
+			{
+				// the line number is not display on the old file side
+				// as it doesn't have anthing meaningful to show.
+				// this line is added because the new file side has something
+				// to show as that both the old file view and the new file
+				// view can go side by side.
+				print "<span> </span>";
+			}
+			else
+			{
+				print "<span>$actual_line_no</span>";
+				$actual_line_no++;
+			}
+		}
+		else
+		{
+			if ($actual_line_no > 1) print "<span class='line-number-empty'>&nbsp;</span>";
+			$actual_line_no = $x['rev1lineno'];
+		}
+	}
+	print '</span>';
+
+	print '<code class="line-numbered-code prettyprint lang-{$fileext}" id="old-code">';
+	$actual_line_no = 1;
 	foreach ($file['content'] as $x)
 	{
 		if (array_key_exists('rev2line', $x)) 
@@ -437,21 +471,31 @@ else
 			if ($is_msie && $xline == '') $xline = '&nbsp;';
 			print $xline;
 			print "</span>\n";
+
+			// on the old file, there can be unchanged, changed, and deleted lines.
+			$actual_line_no++;
 		}
 		else
 		{
-			print "<span class='diffrow'> ";
-			print $x['rev1lineno'];
-			print " </span>\n";
+			// this is the line number that tells which line the upcoming 
+			// block of difference begins. set $actual_line_no to this line number.
+			//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
+			$actual_line_no = $x['rev1lineno'];
 		}
 	}
-	printf ("</div>");
+	print '</code>';
+	print '<span class="line-number-clear"></span>';
 	print '</pre>';
 
+	print '</div>';
+
 	//
 	// SHOW THE NEW FILE
 	//
-	print ("<div style='float:left; width: 49%;'>");
+	print ("<div style='float:left; width: 50%; margin: 0; padding: 0;'>");
 
 	print "<div class='navigator'>";
 	$currev = $file['against']['created_rev'];
@@ -461,7 +505,7 @@ else
 	print '&nbsp;&nbsp;&nbsp;';
 
 	// show the history details of the current revision at the root directory
-	$revanc = "code/revision/{$project->id}/!/{$currev}";
+	$revanc = "code/revision/{$project->id}/!/{$file['created_rev']}";
 	print anchor ($revanc, ($this->lang->line('Revision') . ' ' . $file['created_rev']));
 
 	$currev = $file['against']['created_rev'];
@@ -469,9 +513,40 @@ else
 	$nextanc = "code/{$diff_view}/{$project->id}/{$xpar}/{$nextrev}/{$currev}";
 	print '&nbsp;&nbsp;&nbsp;';
 	print anchor ($nextanc, '>>');
-	print "</div>";
+	print "</div>"; // navigator
 
-	print "<pre class='prettyprint lang-{$fileext}' style='width: 100%' id='code_diff_mainarea_result_fulldiffnew'>";
+	//print "<pre class='prettyprint lang-{$fileext}' style='width: 100%;' id='code_diff_mainarea_result_fulldiffnew'>";
+	print '<pre style="width: 100%;" id="code_diff_mainarea_result_fulldiffnew" class="line-numbered">';
+
+	print '<span class="line-number-block">';
+	$actual_line_no = 1;
+	foreach ($file['content'] as $x)
+	{
+		// on the old file, there can be unchanged, changed, and added lines.
+		// however, the new file side must consider deleted lines on the old file side.
+		if (array_key_exists('rev2line', $x)) 
+		{
+			if (array_key_exists('rev1diffclass', $x) && $x['rev1diffclass'] == 'diffdeleted')
+			{
+				/* corresponding line on the old file has been deleted */
+				print "<span> </span>";
+			}
+			else
+			{
+				print "<span>$actual_line_no</span>";
+				$actual_line_no++;
+			}
+		}
+		else
+		{
+			if ($actual_line_no > 1) print "<span class='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">';
+	$actual_line_no = 1;
 	foreach ($file['content'] as $x)
 	{
 		if (array_key_exists('rev2line', $x)) 
@@ -493,17 +568,34 @@ else
 			if ($is_msie && $xline == '') $xline = '&nbsp;';
 			print $xline;
 			print "</span>\n";
+
+			if (array_key_exists('rev1diffclass', $x) && $x['rev1diffclass'] == 'diffdeleted')
+			{
+				/* corresponding line on the old file has been deleted */
+			}
+			else
+			{
+				$actual_line_no++;
+			}
 		}
 		else
 		{
-			print "<span class='diffrow'> ";
-			print $x['rev2lineno'];
-			print " </span>\n";
+			//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
+			$actual_line_no = $x['rev2lineno'];
 		}
 	}
 
+
+	print '</code>';
+	print '<span class="line-number-clear"></span>';
 	print '</pre>';
-	printf ("</div>");
+
+	print '</div>';
+
+
 	print '</div>';
 }
 ?>
diff --git a/codepot/src/codepot/views/code_file.php b/codepot/src/codepot/views/code_file.php
index dccec44c..e1178b70 100644
--- a/codepot/src/codepot/views/code_file.php
+++ b/codepot/src/codepot/views/code_file.php
@@ -49,7 +49,7 @@ $(function () {
 	});
 
 	// for code rendering
-	$("#code_file_mainarea_result_raw").html ($("#code_file_mainarea_result_pre").html())
+	$("#code_file_mainarea_result_raw").html ($("#code_file_mainarea_result_code").html())
 	prettyPrint ();
 });
 
@@ -61,13 +61,13 @@ function showRawCode()
 	{
 		
 		$("#code_file_style_anchor").text("<?php print $this->lang->line('Destyle')?>");
-		$("#code_file_mainarea_result_pre").removeClass("prettyprinted");
+		$("#code_file_mainarea_result_code").removeClass("prettyprinted");
 		prettyPrint();
 	}
 	else
 	{
 		$("#code_file_style_anchor").text("<?php print $this->lang->line('Enstyle')?>");
-		$("#code_file_mainarea_result_pre").html($("#code_file_mainarea_result_raw").html());
+		$("#code_file_mainarea_result_code").html($("#code_file_mainarea_result_raw").html());
 	}
 
 	showing_raw_code = !showing_raw_code;
@@ -258,7 +258,7 @@ if ($login['settings'] != NULL &&
     $login['settings']->code_hide_line_num == 'Y') $prettyprint_linenums = '';
 ?>
 
-<pre class="prettyprint <?php print $prettyprint_linenums?> <?php print $prettyprint_lang?>" id="code_file_mainarea_result_pre">
+<pre class="prettyprint <?php print $prettyprint_linenums?> <?php print $prettyprint_lang?>" id="code_file_mainarea_result_code">
 <?php 
 	$is_octet_stream = FALSE;
 	if (array_key_exists('properties', $file) && count($file['properties']) > 0)
@@ -297,7 +297,7 @@ if ($login['settings'] != NULL &&
 </ul>
 
 <div class="title"><?php print  $this->lang->line('Message') ?></div>
-<pre id="code_file_mainarea_result_info_logmsg">
+<pre id="code_file_mainarea_result_info_logmsg" class="pre-wrapped">
 <?php print  htmlspecialchars ($file['logmsg']) ?>
 </pre>
 
diff --git a/codepot/src/codepot/views/code_folder.php b/codepot/src/codepot/views/code_folder.php
index c7453f88..36e17716 100644
--- a/codepot/src/codepot/views/code_folder.php
+++ b/codepot/src/codepot/views/code_folder.php
@@ -144,7 +144,7 @@ function show_loc_graph (response)
 function render_readme()
 {
 	<?php
-	// if the readme file name ends with '.wiki', perform pretty printing
+	// if the readme file name ends with '.wiki', perform wiki formatting and pretty printing
 	if (strlen($readme_text) > 0 && substr_compare($readme_file, '.wiki', -5) === 0):
 	?>
 	creole_render_wiki (
@@ -561,7 +561,10 @@ $this->load->view (
 		if (strlen($readme_text) > 0)
 		{
 			print '<div id="code_folder_mainarea_result_readme">';
-			print '<pre id="code_folder_mainarea_result_readme_text">';
+			// 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_mainarea_result_readme_text" class="pre-wrapped">';
 			print "\n";
 			print htmlspecialchars($readme_text);
 			print "\n";
@@ -583,7 +586,7 @@ $this->load->view (
 		print '<div class="title">';
 		print $this->lang->line('Message');
 		print '</div>';
-		print '<pre id="code_folder_mainarea_result_info_logmsg">';
+		print '<pre id="code_folder_mainarea_result_info_logmsg" class="pre-wrapped">';
 		print htmlspecialchars ($file['logmsg']);
 		print '</pre>';
 
diff --git a/codepot/src/codepot/views/code_history.php b/codepot/src/codepot/views/code_history.php
index 59f957ae..3053eafb 100644
--- a/codepot/src/codepot/views/code_history.php
+++ b/codepot/src/codepot/views/code_history.php
@@ -111,7 +111,7 @@ $this->load->view (
 <?php 
 	$rowclasses = array ('even', 'odd');
 	$history = $file['history'];
-	$history_count = count($history);	
+	$history_count = count($history);
 	$curfullpath = $fullpath;
 	for ($i = $history_count; $i > 0; )
 	{
@@ -147,7 +147,7 @@ $this->load->view (
 		print '</code></td>';
 
 		print '<td>';
-		print '<pre>';
+		print '<pre class="pre-wrapped">';
 		print htmlspecialchars($h['msg']);
 		print '</pre>';
 		print '</td>';
diff --git a/codepot/src/codepot/views/code_revision.php b/codepot/src/codepot/views/code_revision.php
index 50abcd1f..79db7d4d 100644
--- a/codepot/src/codepot/views/code_revision.php
+++ b/codepot/src/codepot/views/code_revision.php
@@ -366,7 +366,7 @@ $history = $file['history'];
 </div>
 
 <div id="code_revision_mainarea_result_msg">
-<pre id="code_revision_mainarea_result_msg_text">
+<pre id="code_revision_mainarea_result_msg_text" class="pre-wrapped">
 <?php print htmlspecialchars($history['msg']); ?>
 </pre>
 </div>
diff --git a/codepot/src/codepot/views/issue_show.php b/codepot/src/codepot/views/issue_show.php
index 47757753..2facc45b 100644
--- a/codepot/src/codepot/views/issue_show.php
+++ b/codepot/src/codepot/views/issue_show.php
@@ -283,10 +283,10 @@ $this->load->view (
 		print '<td class="details">';
 		if ($new->comment != "")
 		{
-			print "<div id='issue_show_mainarea_changes_comment_{$commentno}' class='issue_show_mainarea_changes_comment'>";
+			print "<div id='issue_show_mainarea_changes_comment_{$commentno}' class='issue_changes_comment'>";
 			print "<pre id='issue_show_mainarea_changes_comment_pre_{$commentno}'>";
 			print htmlspecialchars($new->comment);
-			print '</pre>';	
+			print '</pre>';
 			print '</div>';
 			$commentno++;
 		}
diff --git a/codepot/src/codepot/views/log.php b/codepot/src/codepot/views/log.php
index 40d15400..c44c7e56 100644
--- a/codepot/src/codepot/views/log.php
+++ b/codepot/src/codepot/views/log.php
@@ -226,7 +226,7 @@ $this->load->view (
 
 			if ($log['action'] != 'revpropchange')
 			{
-				print '<pre class="message">';
+				print '<pre class="pre-wrapped message">';
 				print htmlspecialchars ($code['message']);
 				print '</pre>';
 			}
diff --git a/codepot/src/codepot/views/project_home.php b/codepot/src/codepot/views/project_home.php
index 50381f1d..354ee5bf 100644
--- a/codepot/src/codepot/views/project_home.php
+++ b/codepot/src/codepot/views/project_home.php
@@ -224,7 +224,7 @@ foreach ($urls as $url)
 
 				if ($log['action'] != 'revpropchange')
 				{
-					print '<pre class="message">';
+					print '<pre class="pre-wrapped message">';
 					$sm = strtok (trim ($x['message']), "\r\n");
 					print htmlspecialchars ($sm);
 					print '</pre>';
diff --git a/codepot/src/codepot/views/site_home.php b/codepot/src/codepot/views/site_home.php
index ad79efe3..96a27604 100644
--- a/codepot/src/codepot/views/site_home.php
+++ b/codepot/src/codepot/views/site_home.php
@@ -196,7 +196,7 @@ foreach ($latest_projects as $project)
 
 			if ($log['action'] != 'revpropchange')
 			{
-				print '<pre class="message">';
+				print '<pre class="pre-wrapped message">';
 				$sm = strtok (trim ($x['message']), "\r\n");
 				print htmlspecialchars ($sm);
 				print '</pre>';
diff --git a/codepot/src/css/code.css b/codepot/src/css/code.css
index 27a60df1..83e5f85a 100644
--- a/codepot/src/css/code.css
+++ b/codepot/src/css/code.css
@@ -33,7 +33,7 @@
 	position: relative;
 }
 
-#code_file_mainarea_result_pre {
+#code_file_mainarea_result_code {
 	line-height: 1.4em;
 }
 
@@ -45,14 +45,27 @@
 /*----------------------------------------------- 
  * project source blame view 
  *-----------------------------------------------*/
+
 #code_blame_mainarea_result {
-	position: relative;
+	position: relative; /* required for infobox positioning */
 }
 
-#code_blame_mainarea_result_pre {
+#code_blame_mainarea_result_code_container {
+	border: none;
 	line-height: 1.4em;
 }
 
+#code_blame_mainarea_result_code_author {
+	background: #FEF8F8;
+}
+
+#code_blame_mainarea_result_code ol {
+	/* pre-wrap can't be used for the actual line number in the blame view.
+	 * because the revision span and the author span floating on the left
+	 * doesn't wrap lines when the code part wraps. so reset it to 'pre' */
+	white-space: pre;
+}
+
 /*----------------------------------------------- 
  * project source history view 
  *-----------------------------------------------*/
@@ -78,9 +91,7 @@
 	background-color: inherit;
 	padding: 0;
 	margin: 0;
-	white-space: -moz-pre-wrap;
-	white-space: -o-pre-wrap;
-	white-space: pre-wrap;
+	color: #333333;
 }
 
 #code_history_mainarea_result_table .title {
@@ -109,7 +120,6 @@
 #code_revision_mainarea_result_msg_text {
 	padding: 0.5em 0.5em 0.5em 0.5em;
 
-	white-space: pre-wrap;
 	line-height: 1.2em;
 	background-color: #F8F8FA;
 
diff --git a/codepot/src/css/common.css b/codepot/src/css/common.css
index 9aabc1d9..9f412bd5 100644
--- a/codepot/src/css/common.css
+++ b/codepot/src/css/common.css
@@ -52,17 +52,25 @@ body {
 	color: #4665A2;
 }
 
-.content pre {
+.content pre, 
+.content code {
 	font-family: consolas, "Andale Mono", monospace;
 	overflow: auto;
-	width: inherit;
 	border: none;
+	white-space: pre;
 
 	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 textarea {
 	font-family: consolas, "Andale Mono", monospace;
 
@@ -202,7 +210,7 @@ body {
 .content .projectbar .fixedmenu a:hover {
 	padding: 6px;
 	background-color: #6482A9;
-	color: #FFFFFFF;
+	color: #FFFFFF;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
@@ -231,7 +239,7 @@ body {
 .content .projectbar .ctxmenu a:hover {
 	padding: 6px;
 	background-color: #6482A9;
-	color: #FFFFFFF;
+	color: #FFFFFF;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
@@ -256,10 +264,6 @@ body {
 	padding: 0.3em 0.5em 0.3em 0.5em;
 }
 
-.content .sidebar .collapsible-box {
-	margin-bottom: 1em;
-}
-
 .content .mainarea .title {
 	font-size: 120%;
 	margin-top: 0.2em;
@@ -424,17 +428,13 @@ body {
 
 .content .mainarea pre {
 	border: none;
-	/*
-	background-color: #F8F8FA;
-	*/
-	/*
-	overflow: auto;
-	width: inherit;
-	*/
 }
 
 .content .mainarea pre.wiki {
+	white-space: -moz-pre-wrap;
+	white-space: -o-pre-wrap; 
 	white-space: pre-wrap;
+
 	padding: 0.3em;
 	line-height: 1.2em;
 
@@ -533,13 +533,59 @@ body {
 	margin-top: 0;
 }
 
-/* this is used for line numbering. */
-.content .mainarea pre.prettyprint ol {
+.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 .content .mainarea .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;
+}
+
+.content .mainarea .prettyprint ol {
+	/* this is used for line numbering when numbering is sequential. */
 	white-space: pre-wrap;
-	
 } 
 
-.content .mainarea pre.prettyprint {
+.content .mainarea .prettyprint {
 	/* anything that make prettyprint area different from other pres? */
 	/*background-color: #FFFFFF;*/
 	/*border: 1px solid #ccc;*/
@@ -558,24 +604,24 @@ body {
 
 }
 
-pre.prettyprint .pln { color: #222222; } 
-pre.prettyprint .str { color: #AA1111; }
-pre.prettyprint .kwd { color: #2222ff; }
-pre.prettyprint .com { color: #888a88; font-style: italic; }
-pre.prettyprint .typ { color: #4271ae; }
-pre.prettyprint .lit { color: #f5871f; }
-pre.prettyprint .pun { color: #4d4d4c; }
-pre.prettyprint .opn { color: #4d4d4c; }
-pre.prettyprint .clo { color: #4d4d4c; }
-pre.prettyprint .tag { color: #c82829; }
-pre.prettyprint .atn { color: #f5871f; }
-pre.prettyprint .atv { color: #3e999f; }
-pre.prettyprint .dec { color: #f5871f; }
-pre.prettyprint .var { color: #c82829; }
-pre.prettyprint .fun { color: #4271ae; }
+.content .prettyprint .pln { color: #222222; } 
+.content .prettyprint .str { color: #AA1111; }
+.content .prettyprint .kwd { color: #2222ff; }
+.content .prettyprint .com { color: #888a88; font-style: italic; }
+.content .prettyprint .typ { color: #4271ae; }
+.content .prettyprint .lit { color: #f5871f; }
+.content .prettyprint .pun { color: #4d4d4c; }
+.content .prettyprint .opn { color: #4d4d4c; }
+.content .prettyprint .clo { color: #4d4d4c; }
+.content .prettyprint .tag { color: #c82829; }
+.content .prettyprint .atn { color: #f5871f; }
+.content .prettyprint .atv { color: #3e999f; }
+.content .prettyprint .dec { color: #f5871f; }
+.content .prettyprint .var { color: #c82829; }
+.content .prettyprint .fun { color: #4271ae; }
 
 /* Specify class=linenums on a pre to get line numbering */
-pre.prettyprint ol.linenums { 
+.content .prettyprint ol.linenums { 
 	margin-top: 0;
 	margin-bottom: 0;
 	margin-left: 1em;
@@ -584,40 +630,40 @@ pre.prettyprint ol.linenums {
 } /* IE indents via margin-left */
 
 /*
-pre.prettyprint li.L0,
-pre.prettyprint li.L1,
-pre.prettyprint li.L2,
-pre.prettyprint li.L3,
-pre.prettyprint li.L5,
-pre.prettyprint li.L6,
-pre.prettyprint li.L7,
-pre.prettyprint li.L8 { list-style-type: none }
+.content .prettyprint li.L0,
+.content .prettyprint li.L1,
+.content .prettyprint li.L2,
+.content .prettyprint li.L3,
+.content .prettyprint li.L5,
+.content .prettyprint li.L6,
+.content .prettyprint li.L7,
+.content .prettyprint li.L8 { list-style-type: none }
 */
 /* Alternate shading for lines */
 /*
-pre.prettyprint li.L1,
-pre.prettyprint li.L3,
-pre.prettyprint li.L5,
-pre.prettyprint li.L7,
-pre.prettyprint li.L9 { background: #eee }
+.content .prettyprint li.L1,
+.content .prettyprint li.L3,
+.content .prettyprint li.L5,
+.content .prettyprint li.L7,
+.content .prettyprint li.L9 { background: #eee }
 */
 
 @media print {
-	pre.prettyprint .pln { color: #222222; } 
-	pre.prettyprint .str { color: #AA1111; }
-	pre.prettyprint .kwd { color: #2222ff; font-weight: bold; }
-	pre.prettyprint .com { color: #888a88; font-style: italic; }
-	pre.prettyprint .typ { color: #4271ae; font-weight: bold; }
-	pre.prettyprint .lit { color: #f5871f; }
-	pre.prettyprint .pun { color: #4d4d4c; }
-	pre.prettyprint .opn { color: #4d4d4c; }
-	pre.prettyprint .clo { color: #4d4d4c; }
-	pre.prettyprint .tag { color: #c82829; font-weight: bold; }
-	pre.prettyprint .atn { color: #f5871f; }
-	pre.prettyprint .atv { color: #3e999f; }
-	pre.prettyprint .dec { color: #f5871f; }
-	pre.prettyprint .var { color: #c82829; }
-	pre.prettyprint .fun { color: #4271ae; }
+	.content .prettyprint .pln { color: #222222; } 
+	.content .prettyprint .str { color: #AA1111; }
+	.content .prettyprint .kwd { color: #2222ff; font-weight: bold; }
+	.content .prettyprint .com { color: #888a88; font-style: italic; }
+	.content .prettyprint .typ { color: #4271ae; font-weight: bold; }
+	.content .prettyprint .lit { color: #f5871f; }
+	.content .prettyprint .pun { color: #4d4d4c; }
+	.content .prettyprint .opn { color: #4d4d4c; }
+	.content .prettyprint .clo { color: #4d4d4c; }
+	.content .prettyprint .tag { color: #c82829; font-weight: bold; }
+	.content .prettyprint .atn { color: #f5871f; }
+	.content .prettyprint .atv { color: #3e999f; }
+	.content .prettyprint .dec { color: #f5871f; }
+	.content .prettyprint .var { color: #c82829; }
+	.content .prettyprint .fun { color: #4271ae; }
 }
 
 .content .infostrip {
@@ -648,10 +694,10 @@ pre.prettyprint li.L9 { background: #eee }
 }
 
 .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;
@@ -727,7 +773,6 @@ pre.prettyprint li.L9 { background: #eee }
 }
 
 .content .infobox pre {
-	white-space: pre-wrap;
 	margin: 0;
 	padding: 0.5em 0.2em 0.5em 0.2em;
 }
diff --git a/codepot/src/css/issue.css b/codepot/src/css/issue.css
index f692f113..15b78c47 100644
--- a/codepot/src/css/issue.css
+++ b/codepot/src/css/issue.css
@@ -174,11 +174,20 @@
 	padding-bottom: 0.3em;
 }
 
+#issue_show_mainarea_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 {
diff --git a/codepot/src/css/log.css b/codepot/src/css/log.css
index a29d7cfe..878510da 100644
--- a/codepot/src/css/log.css
+++ b/codepot/src/css/log.css
@@ -59,9 +59,6 @@
 	border: 0;
 	margin: 1px;
 	background-color: inherit;
-	white-space: -moz-pre-wrap;
-	white-space: -o-pre-wrap;
-	white-space: pre-wrap;
 	color: #333333;
 }
 
diff --git a/codepot/src/css/project.css b/codepot/src/css/project.css
index a3aba8c5..5e53db88 100644
--- a/codepot/src/css/project.css
+++ b/codepot/src/css/project.css
@@ -41,9 +41,6 @@
 	border: 0;
 	margin: 1px;
 	background-color: inherit;
-	white-space: -moz-pre-wrap;
-	white-space: -o-pre-wrap;
-	white-space: pre-wrap;
 }
 
 /*----------------------------------------------- 
diff --git a/codepot/src/css/site.css b/codepot/src/css/site.css
index 09ac7f25..3609265b 100644
--- a/codepot/src/css/site.css
+++ b/codepot/src/css/site.css
@@ -45,9 +45,6 @@
 	border: 0;
 	margin: 1px;
 	background-color: inherit; 
-	white-space: -moz-pre-wrap;
-	white-space: -o-pre-wrap; 
-	white-space: pre-wrap;
 }
 
 /*-----------------------------------------------