diff --git a/course/format/topicscss/ajax.php b/course/format/topicscss/ajax.php
new file mode 100644
index 00000000000..2280eddd815
--- /dev/null
+++ b/course/format/topicscss/ajax.php
@@ -0,0 +1,10 @@
+<?php
+/**
+ * This file is required if the course format is to support AJAX.
+ */
+
+
+$CFG->ajaxcapable = true;
+$CFG->ajaxtestedbrowsers = array('MSIE' => 6.0, 'Gecko' => 20061111);
+
+?>
diff --git a/course/format/topicscss/config.php b/course/format/topicscss/config.php
new file mode 100644
index 00000000000..2d3eaca7073
--- /dev/null
+++ b/course/format/topicscss/config.php
@@ -0,0 +1,13 @@
+<?php
+//
+// Optional course format configuration file
+//
+// This file contains any specific configuration settings for the 
+// format.
+//
+// The default blocks layout for this course format:
+    $format['defaultblocks'] = 'participants,activity_modules,search_forums,'.
+                               'admin,course_list:news_items,calendar_upcoming,'.
+                               'recent_activity';
+//
+?>
\ No newline at end of file
diff --git a/course/format/topicscss/format.php b/course/format/topicscss/format.php
new file mode 100644
index 00000000000..8894d6fdd7e
--- /dev/null
+++ b/course/format/topicscss/format.php
@@ -0,0 +1,301 @@
+<?php // $Id$
+      // Display the whole course as "topics" made of of modules
+      // Included from "view.php"
+/**
+ * Evaluation topics format for course display - NO layout tables, for accessibility, etc.
+ * 
+ * A duplicate course format to enable the Moodle development team to evaluate 
+ * CSS for the multi-column layout in place of layout tables. 
+ * Less risk for the Moodle 1.6 beta release.
+ *   1. Straight copy of topics/format.php
+ *   2. Replace <table> and <td> with DIVs; inline styles.
+ *   3. Reorder columns so that in linear view content is first then blocks;
+ * styles to maintain original graphical (side by side) view.
+ *
+ * Target: 3-column graphical view using relative widths for pixel screen sizes 
+ * 800x600, 1024x768... on IE6, Firefox. Below 800 columns will shift downwards.
+ * 
+ * http://www.maxdesign.com.au/presentation/em/ Ideal length for content.
+ * http://www.svendtofte.com/code/max_width_in_ie/ Max width in IE.
+ *
+ * @copyright &copy; 2006 The Open University
+ * @author N.D.Freear@open.ac.uk, and others.
+ * @license http://www.gnu.org/copyleft/gpl.html GNU Public License
+ * @package  
+ */
+//TODO (nfreear): Accessibility: evaluation, lang/en_utf8/moodle.php: $string['formattopicscss']
+
+    require_once($CFG->libdir.'/ajax/ajaxlib.php');
+
+    if (!empty($THEME->customcorners)) {
+        require_once($CFG->dirroot.'/lib/custom_corners_lib.php');
+    }
+
+    $topic = optional_param('topic', -1, PARAM_INT);
+
+    if ($topic != -1) {
+        $displaysection = course_set_display($course->id, $topic);
+    } else {
+        if (isset($USER->display[$course->id])) {
+            $displaysection = $USER->display[$course->id];
+        } else {
+            $displaysection = course_set_display($course->id, 0);
+        }
+    }
+
+    $context = get_context_instance(CONTEXT_COURSE, $course->id);
+
+    if (($marker >=0) && has_capability('moodle/course:setcurrentsection', $context) && confirm_sesskey()) {
+	$course->marker = $marker;
+	if (! set_field("course", "marker", $marker, "id", $course->id)) {
+	    error("Could not mark that topic for this course");
+	}
+    }
+
+    $streditsummary  = get_string('editsummary');
+    $stradd          = get_string('add');
+    $stractivities   = get_string('activities');
+    $strshowalltopics = get_string('showalltopics');
+    $strtopic         = get_string('topic');
+    $strgroups       = get_string('groups');
+    $strgroupmy      = get_string('groupmy');
+    $editing         = $PAGE->user_is_editing();
+
+    if ($editing) {
+        $strstudents = moodle_strtolower($course->students);
+        $strtopichide = get_string('topichide', '', $strstudents);
+        $strtopicshow = get_string('topicshow', '', $strstudents);
+	$strmarkthistopic = get_string('markthistopic');
+	$strmarkedthistopic = get_string('markedthistopic');
+        $strmoveup   = get_string('moveup');
+        $strmovedown = get_string('movedown');
+    }
+
+/* Internet Explorer min-width fix. (See theme/standard/styles_layout.css: min-width for Firefox.)
+   Window width: 800px, Firefox 763px, IE 752px. (Window width: 640px, Firefox 602px, IE 588px.)    
+*/
+?>
+
+<!--[if IE]>
+  <style type="text/css">
+  .topicscss-format { width: expression(document.body.clientWidth < 800 ? "752px" : "auto"); }
+  </style>
+<![endif]-->
+<?php
+/// Layout the whole page as three big columns (was, id="layout-table")
+    echo '<div class="topicscss-format">';
+
+/// The left column ...
+
+    if (blocks_have_content($pageblocks, BLOCK_POS_LEFT) || $editing) {
+        echo '<div id="left-column">';
+        blocks_print_group($PAGE, $pageblocks, BLOCK_POS_LEFT);
+        echo '</div>';
+    }
+    
+/// The right column, BEFORE the middle-column.
+    if (blocks_have_content($pageblocks, BLOCK_POS_RIGHT) || $editing) {
+        echo '<div id="right-column">';
+        blocks_print_group($PAGE, $pageblocks, BLOCK_POS_RIGHT);
+        echo '</div>';
+    }
+
+/// Start main column
+    echo '<div id="middle-column">';
+
+    if (!empty($THEME->customcorners)) print_custom_corners_start();
+
+    echo '<a name="startofcontent"></a>';
+
+    print_heading_block(get_string('topicoutline'), 'outline');
+
+    // Note, an ordered list would confuse - "1" could be the clipboard or summary.
+    echo "<ul class='topicscss'>\n";
+
+/// If currently moving a file then show the current clipboard
+    if (ismoving($course->id)) {
+        $stractivityclipboard = strip_tags(get_string('activityclipboard', '', addslashes($USER->activitycopyname)));
+        $strcancel= get_string('cancel');
+        echo '<li class="clipboard">';
+        echo $stractivityclipboard.'&nbsp;&nbsp;(<a href="mod.php?cancelcopy=true&amp;sesskey='.$USER->sesskey.'">'.$strcancel.'</a>)';
+        echo "</li>\n";
+    }
+
+/// Print Section 0 with general activities
+
+    $section = 0;
+    $thissection = $sections[$section];
+
+    if ($thissection->summary or $thissection->sequence or isediting($course->id)) {
+
+        // Note, no need for a 'left side' cell or DIV.
+        // Note, 'right side' is BEFORE content.
+        echo '<li id="section-0" class="section main" >';
+	echo '<div class="left side">&nbsp;</div>';
+        echo '<div class="right side" >&nbsp;</div>';        
+        echo '<div class="content">';
+        echo '<div class="summary">';
+        $summaryformatoptions->noclean = true;
+        echo format_text($thissection->summary, FORMAT_HTML, $summaryformatoptions);
+
+        if (isediting($course->id) && has_capability('moodle/course:update', get_context_instance(CONTEXT_COURSE, $course->id))) {
+            echo '<a title="'.$streditsummary.'" '.
+                 ' href="editsection.php?id='.$thissection->id.'"><img src="'.$CFG->pixpath.'/t/edit.gif" '.
+                 ' class="icon edit" alt="'.$streditsummary.'" /></a>';
+        }
+        echo '</div>';
+        
+        print_section($course, $thissection, $mods, $modnamesused);
+
+        if (isediting($course->id)) {
+            print_section_add_menus($course, $section, $modnames);
+        }
+
+        echo '</div>';
+        echo "</li>\n";
+    }
+
+
+/// Now all the normal modules by topic
+/// Everything below uses "section" terminology - each "section" is a topic.
+
+    $timenow = time();
+    $section = 1;
+    $sectionmenu = array();
+
+    while ($section <= $course->numsections) {
+
+        if (!empty($sections[$section])) {
+            $thissection = $sections[$section];
+
+        } else {
+            unset($thissection);
+            $thissection->course = $course->id;   // Create a new section structure
+            $thissection->section = $section;
+            $thissection->summary = '';
+            $thissection->visible = 1;
+            if (!$thissection->id = insert_record('course_sections', $thissection)) {
+                notify('Error inserting new topic!');
+            }
+        }
+
+        $showsection = (has_capability('moodle/course:viewhiddensections', $context) or $thissection->visible or !$course->hiddensections);
+
+        if (!empty($displaysection) and $displaysection != $section) {  // Check this topic is visible
+            if ($showsection) {
+		$strsummary = strip_tags(format_string($thissection->summary,true));
+		if (strlen($strsummary) < 57) {
+		    $strsummary = ' - '.$strsummary;
+		} else {
+		    $strsummary = ' - '.substr($strsummary, 0, 60).'...';
+		}
+                $sectionmenu['topic='.$section] = s($section.$strsummary);
+            }
+            $section++;
+            continue;
+        }
+
+        if ($showsection) {
+
+            $currenttopic = ($course->marker == $section);
+
+            $currenttext = '';
+            if (!$thissection->visible) {
+                $sectionstyle = ' hidden';
+            } else if ($currenttopic) {
+                $sectionstyle = ' current';
+                $currenttext = get_accesshide(get_string('currenttopic','access'));
+            } else {
+                $sectionstyle = '';
+            }
+
+            echo '<li id="section-'.$section.'" class="section main'.$sectionstyle.'" >'; //'<div class="left side">&nbsp;</div>';
+
+	    echo '<div class="left side">'.$section.'</div>';
+            // Note, 'right side' is BEFORE content.
+            echo '<div class="right side">';
+            
+            if ($displaysection == $section) {	// Show the zoom boxes
+                echo '<a href="view.php?id='.$course->id.'&amp;topic=0#section-'.$section.'" title="'.$strshowalltopics.'">'.
+                     '<img src="'.$CFG->pixpath.'/i/all.gif" class="icon" alt="'.$strshowalltopics.'" /></a><br />';
+            } else {
+                $strshowonlytopic = get_string("showonlytopic", "", $section);
+                echo '<a href="view.php?id='.$course->id.'&amp;topic='.$section.'" title="'.$strshowonlytopic.'">'.
+                     '<img src="'.$CFG->pixpath.'/i/one.gif" class="icon" alt="'.$strshowonlytopic.'" /></a><br />';
+            }
+
+            if (isediting($course->id) && has_capability('moodle/course:update', get_context_instance(CONTEXT_COURSE, $course->id))) {
+
+		if ($course->marker == $section) {  // Show the "light globe" on/off
+               	    echo '<a href="view.php?id='.$course->id.'&amp;marker=0&amp;sesskey='.$USER->sesskey.'#section-'.$section.'" title="'.$strmarkedthistopic.'">'.'<img src="'.$CFG->pixpath.'/i/marked.gif" alt="'.$strmarkedthistopic.'" /></a><br />';
+            	} else {
+                    echo '<a href="view.php?id='.$course->id.'&amp;marker='.$section.'&amp;sesskey='.$USER->sesskey.'#section-'.$section.'" title="'.$strmarkthistopic.'">'.'<img src="'.$CFG->pixpath.'/i/marker.gif" alt="'.$strmarkthistopic.'" /></a><br />';
+            	}
+
+                if ($thissection->visible) {        // Show the hide/show eye
+                    echo '<a href="view.php?id='.$course->id.'&amp;hide='.$section.'&amp;sesskey='.$USER->sesskey.'#section-'.$section.'" title="'.$strtopichide.'">'.
+                         '<img src="'.$CFG->pixpath.'/i/hide.gif" class="icon hide" alt="'.$strtopichide.'" /></a><br />';
+                } else {
+                    echo '<a href="view.php?id='.$course->id.'&amp;show='.$section.'&amp;sesskey='.$USER->sesskey.'#section-'.$section.'" title="'.$strtopicshow.'">'.
+                         '<img src="'.$CFG->pixpath.'/i/show.gif" class="icon hide" alt="'.$strtopicshow.'" /></a><br />';
+                }
+                if ($section > 1) {                       // Add a arrow to move section up
+                    echo '<a href="view.php?id='.$course->id.'&amp;random='.rand(1,10000).'&amp;section='.$section.'&amp;move=-1&amp;sesskey='.$USER->sesskey.'#section-'.($section-1).'" title="'.$strmoveup.'">'.
+                         '<img src="'.$CFG->pixpath.'/t/up.gif" class="icon up" alt="'.$strmoveup.'" /></a><br />';
+                }
+
+                if ($section < $course->numsections) {    // Add a arrow to move section down
+                    echo '<a href="view.php?id='.$course->id.'&amp;random='.rand(1,10000).'&amp;section='.$section.'&amp;move=1&amp;sesskey='.$USER->sesskey.'#section-'.($section+1).'" title="'.$strmovedown.'">'.
+                         '<img src="'.$CFG->pixpath.'/t/down.gif" class="icon down" alt="'.$strmovedown.'" /></a><br />';
+                }
+            }
+            echo '</div>';
+
+            echo '<div class="content">';
+            if (!has_capability('moodle/course:viewhiddensections', $context) and !$thissection->visible) {   // Hidden for students
+		echo get_string('notavailable').'</div>';
+	    } else {
+                echo '<div class="summary">';
+                $summaryformatoptions->noclean = true;
+		if ($thissection->summary) {
+                   echo format_text($thissection->summary, FORMAT_HTML, $summaryformatoptions);
+		} else {
+		   echo '&nbsp;';
+ 	   	}
+
+                if (isediting($course->id) && has_capability('moodle/course:update', get_context_instance(CONTEXT_COURSE, $course->id))) {
+                    echo ' <a title="'.$streditsummary.'" href="editsection.php?id='.$thissection->id.'">'.
+                         '<img src="'.$CFG->pixpath.'/t/edit.gif" class="icon edit" alt="'.$streditsummary.'" /></a><br /><br />';
+                }
+                echo '</div>';
+
+                print_section($course, $thissection, $mods, $modnamesused);
+
+                if (isediting($course->id)) {
+                    print_section_add_menus($course, $section, $modnames);
+                }
+            }
+
+            echo '</div>';
+            echo "</li>\n";
+        }
+
+        $section++;
+    }
+    echo "</ul>\n";
+
+    if (!empty($sectionmenu)) {
+        echo '<div align="center" class="jumpmenu">';
+        echo popup_form($CFG->wwwroot.'/course/view.php?id='.$course->id.'&amp;', $sectionmenu,
+                   'sectionmenu', '', get_string('jumpto'), '', '', true);
+        echo '</div>';
+    }
+
+    if (!empty($THEME->customcorners)) print_custom_corners_end();
+
+    echo '</div>';
+
+    echo '</div>';
+    echo '<div class="clearer"></div>';
+
+?>
diff --git a/course/format/weekscss/ajax.php b/course/format/weekscss/ajax.php
new file mode 100644
index 00000000000..2280eddd815
--- /dev/null
+++ b/course/format/weekscss/ajax.php
@@ -0,0 +1,10 @@
+<?php
+/**
+ * This file is required if the course format is to support AJAX.
+ */
+
+
+$CFG->ajaxcapable = true;
+$CFG->ajaxtestedbrowsers = array('MSIE' => 6.0, 'Gecko' => 20061111);
+
+?>
diff --git a/lang/en_utf8/moodle.php b/lang/en_utf8/moodle.php
index dc66d531d5d..e928e3e754b 100644
--- a/lang/en_utf8/moodle.php
+++ b/lang/en_utf8/moodle.php
@@ -643,6 +643,7 @@ $string['formatsocial'] = 'Social format';
 $string['formattext'] = 'Moodle auto-format';
 $string['formattexttype'] = 'Formatting';
 $string['formattopics'] = 'Topics format';
+$string['formattopicscss'] = 'Topics format - CSS/No tables';
 $string['formattopicsajax'] = 'Topics format - AJAX';
 $string['formatweeks'] = 'Weekly format';
 $string['formatweekscss'] = 'Weekly format - CSS/No tables';
diff --git a/lib/ajax/section_classes.js b/lib/ajax/section_classes.js
index 9c0add90776..1adcc789309 100755
--- a/lib/ajax/section_classes.js
+++ b/lib/ajax/section_classes.js
@@ -54,7 +54,7 @@ section_class.prototype.init_section = function(id, group, config, isDraggable)
     this.numberDisplay = null; // Used to display the section number on the top left
                                 // of the section. Not used in all course formats.
     this.summary = null;
-    this.content_td = null;
+    this.content_div = null;
     this.hidden = false;
     this.highlighted = false;
     this.showOnly = false;
@@ -79,7 +79,7 @@ section_class.prototype.init_section = function(id, group, config, isDraggable)
 
 
 section_class.prototype.init_buttons = function() {      
-    var commandContainer = this.getEl().childNodes[2];
+    var commandContainer = YAHOO.util.Dom.getElementsByClassName('right',null,this.getEl())[0];
 
     //clear all but show only button
     var commandContainerCount = commandContainer.childNodes.length;
@@ -115,7 +115,7 @@ section_class.prototype.add_handle = function() {
 
 
 section_class.prototype.process_section = function() {
-    this.content_td = this.getEl().childNodes[1];
+    this.content_div = YAHOO.util.Dom.getElementsByClassName('content',null,this.getEl())[0];
 
     if (YAHOO.util.Dom.hasClass(this.getEl(),'current')) {
         this.highlighted = true;
@@ -137,11 +137,11 @@ section_class.prototype.process_section = function() {
     }
 
     // Find/edit resources
-    this.resources_ul = this.content_td.getElementsByTagName('ul')[0];
+    this.resources_ul = this.content_div.getElementsByTagName('ul')[0];
     if (!this.resources_ul) {
         this.resources_ul = document.createElement('ul');
         this.resources_ul.className='section';
-        this.content_td.insertBefore(this.resources_ul, this.content_td.lastChild);
+        this.content_div.insertBefore(this.resources_ul, this.content_div.lastChild);
     }
     var resource_count = this.resources_ul.getElementsByTagName('li').length;
 
@@ -195,7 +195,7 @@ section_class.prototype.endDrag = function() {
 
 
 section_class.prototype.move_to_section = function(target) {
-    var tempTd = document.createElement('td');
+    var tempDiv = document.createElement('div');
     var tempStore = null;
     var sectionCount = main.sections.length;
     var found = null;
diff --git a/theme/custom_corners/user_styles.css b/theme/custom_corners/user_styles.css
index 604af5bc8bf..b14859aa9b6 100644
--- a/theme/custom_corners/user_styles.css
+++ b/theme/custom_corners/user_styles.css
@@ -609,7 +609,7 @@ td#left-column div.hidden div.header {
 td#right-column div.hidden div.header {
   border-bottom-style: none;
 }
-td#middle-column div.bt div {
+td#middle-column div.bt div, div#middle-column div.bt div {
   background-image: url(pix/box.png);
   background-repeat: no-repeat;
   background-position: 0 0;
@@ -619,7 +619,7 @@ td#middle-column div.bt div {
   position: relative;
   width: 13px;
 }
-td#middle-column div.bt {
+td#middle-column div.bt, div#middle-column div.bt {
   background-image: url(pix/box.png);
   background-repeat: no-repeat;
   background-position: 100% 0;
@@ -627,14 +627,14 @@ td#middle-column div.bt {
   height: 12px;
   background-color: transparent;
 }
-td#middle-column div.i1 {
+td#middle-column div.i1, div#middle-column div.i1 {
   background-image: url(pix/borders.png);
   background-repeat: repeat-y;
   background-position: 0 0;
   background-color: transparent;
   padding: 0 0 0 12px;
 }
-td#middle-column div.i2 {
+td#middle-column div.i2, div#middle-column div.i2 {
   background-image: url(pix/borders.png);
   background-repeat: repeat-y;
   background-attachment: scroll;
@@ -642,14 +642,14 @@ td#middle-column div.i2 {
   background-color: transparent;
   padding: 0 12px 0 0;
 }
-td#middle-column div.i3 {
+td#middle-column div.i3, div#middle-column div.i3 {
   background-color: #FFFFFF;
   padding: 0 10px;
   border-width: 1px 0;
   border-style: solid;
   border-color: #FFFFFF;
 }
-td#middle-column div.bb div {
+td#middle-column div.bb div, div#middle-column div.bb div {
   background-image: url(pix/box.png);
   background-repeat: no-repeat;
   background-position: 0 100%;
@@ -659,7 +659,7 @@ td#middle-column div.bb div {
   position: relative;
   width: 13px;
 }
-td#middle-column div.bb {
+td#middle-column div.bb, div#middle-column div.bb {
   background-image: url(pix/box.png);
   background-repeat: no-repeat;
   background-position: 100% 100%;
@@ -667,7 +667,7 @@ td#middle-column div.bb {
   height: 12px;
   background-color: transparent;
 }
-td#middle-column div.bt div {
+td#middle-column div.bt div, div#middle-column div.bt div {
   z-index: 10;
 }
 div#footer div.bt div {
@@ -913,7 +913,7 @@ body.nocoursepage div#content div.bb {
   height: 12px;
   background-color: transparent;
 }
-td#middle-column tr.section {
+td#middle-column tr.section, div#middle-column li.section {
   background-image: url(pix/bottom_shadow_to_top.png);
   background-repeat: repeat-x;
   background-position: center bottom;
@@ -1083,4 +1083,4 @@ body.grade-report-grader table#user-grades td.cat {
 }
 body.grade-report-grader table#user-grades td.course {
   font-weight: bold;
-}
\ No newline at end of file
+}
diff --git a/theme/standard/styles_layout.css b/theme/standard/styles_layout.css
index 5f1d398fcac..94c203ec5cf 100644
--- a/theme/standard/styles_layout.css
+++ b/theme/standard/styles_layout.css
@@ -1793,6 +1793,9 @@ border-width:0px;
   display:inline;
 }
 
+.weekscss-format, .topicscss-format {
+    margin-top: 8px;
+}
 
 /*#course-view ul.section li.activity ul li,
 #site-index ul.section li.activity ul li {
@@ -1800,53 +1803,71 @@ border-width:0px;
 }*/
 
 /*Accessibility: No-tables course format. */
-#course-view ul.weekscss {
+#course-view ul.weekscss , #course-view ul.topicscss{
   margin: 0;
   padding: 0;
   list-style: none;
 }
 /* Window-width: 800 pixels.
    IE doesn't support, see inline IE conditional comment. */
-.weekscss-format {
+.weekscss-format, .topicscss-format {
   min-width: 763px;
 }
-.weekscss-format .block_adminblock select,
-.weekscss-format .block_calendar_month .minicalendar {
+.topicscss-format .block_adminblock select,
+.weekscss-format .block_calendar_month .minicalendar,
+.topicscss-format .block_calendar_month .minicalendar {
   width: 100%;
   padding: 0;
 }
 .weekscss-format .block_calendar_month .minicalendar th,
-.weekscss-format .block_calendar_month .minicalendar td {
+.topicscss-format .block_calendar_month .minicalendar th, 
+.weekscss-format .block_calendar_month .minicalendar td,
+.topicscss-format .block_calendar_month .minicalendar td, {
   padding: 0.1em 0 0.1em 1px;
 }
-.weekscss-format #middle-column {
+.weekscss-format #middle-column ,
+.topicscss-format #middle-column {
   margin: 0 12.5em 0 12.5em;
 }
 .weekscss-format #left-column,
-.weekscss-format #right-column {
+.weekscss-format #right-column,
+.topicscss-format #left-column,
+.topicscss-format #right-column {
   width: 11.5em;
 }
-.weekscss-format #left-column {
+.weekscss-format #left-column,
+.topicscss-format #left-column {
   float: left;
 }
-.weekscss-format #right-column {
+.weekscss-format #right-column,
+.topicscss-format #right-column {
   float: right;
 }
-.weekscss li.section {
+.weekscss li.section ,
+.topicscss li.section {
   margin-bottom: 0.5em;
   border-style:solid;
   border-width:1px;
 }
 .weekscss .content,
-.weekscss .side {
+.topicscss .content {
   padding: 5px;
-}
-.weekscss .content {
   margin: 0 1.7em 0 1.7em;
 }
-.weekscss .right {
+.weekscss .right,
+.weekscss .left,
+.topicscss .right,
+.topicscss .left {
   width: 1.6em;
-  float: right;
+  padding: 5px 0;
+}
+.weekscss .left,
+.topicscss .left {
+    float: left;
+}
+.weekscss .right,
+.topicscss .right {
+    float: right;
   text-align:center;
 }
 
@@ -4139,4 +4160,4 @@ wikiadminactions {
   background: #eee;
   border: 1px dashed #ddd;
   padding: 3px;
-}
\ No newline at end of file
+}