diff --git a/theme/afterburner/config.php b/theme/afterburner/config.php
index 473cb4c3000..fe0673f9165 100644
--- a/theme/afterburner/config.php
+++ b/theme/afterburner/config.php
@@ -13,6 +13,7 @@ $THEME->sheets = array(
     'afterburner_calendar',
     'afterburner_dock',
     'afterburner_rtl',
+    'afterburner_responsive',
     'afterburner_settings',
 
 );
diff --git a/theme/afterburner/style/afterburner_blocks.css b/theme/afterburner/style/afterburner_blocks.css
index 003a145e9f3..ffc29659686 100644
--- a/theme/afterburner/style/afterburner_blocks.css
+++ b/theme/afterburner/style/afterburner_blocks.css
@@ -53,7 +53,8 @@ Block
 }
 .block-region .invisible {
     opacity: 0.5;
-    filter: alpha(opacity=50);
+    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /** must come first! **/
+    filter: alpha(opacity=50);  /** must come second! **/
 }
 .block .block-hider-show,
 .block .block-hider-hide {
@@ -77,9 +78,7 @@ Block
     list-style-type: none;
 }
 .block-region li {
-    padding: 0 0 20px 0;
-}
-.block-region li ul {
+    padding: 0;
 }
 .block-region li li {
     margin: 0 20px 0 10px;
@@ -91,7 +90,7 @@ Block
     width: 100%;
 }
 .block .header div.commands {
-    margin-left: 10px;
+    margin-left: 0;
 }
 #region-pre .block .header {
     background:url([[pix:theme|images/light3]]) 0 -136px repeat-x;
@@ -152,4 +151,46 @@ Block
     left:0px;
     bottom: 0px;
     position:absolute;
+}
+/* COMMAND ICONS
+-----------------------*/
+img.iconsmall,
+.block.block_with_controls div.header div.commands a img,
+.block-control-actions span.moodle-core-dragdrop-draghandle img,
+.course-content ul.topics li.section .right img,
+.course-content ul.topics li.section .left img {
+    height:15px;
+    margin:2px;
+    width:15px;
+    background-color: #eee;
+    border: 1px solid #aaa;
+    padding:1px;
+    -webkit-border-radius:5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+.course-content ul.topics li.section .right img.spacer,
+.course-content ul.topics li.section .left img.spacer {
+    height: 1px;
+    margin: 0;
+    width: 1px;
+    background: none;
+    border: 0 none;
+    padding: 0;
+    border-radius: 0;
+}
+.block .header .commands {
+    text-align: center;
+}
+.block-control-actions span.moodle-core-dragdrop-draghandle {
+    position: relative;
+    top: 5px;
+}
+.moodle-actionmenu.show[data-enhanced] .menu a {
+    color: #333333;
+    display: block;
+    padding: 2px 0.5em;
+}
+.moodle-actionmenu.show[data-enhanced] .menu {
+    left: 0;
 }
\ No newline at end of file
diff --git a/theme/afterburner/style/afterburner_dock.css b/theme/afterburner/style/afterburner_dock.css
index 3d75263725f..2d25526f0ad 100644
--- a/theme/afterburner/style/afterburner_dock.css
+++ b/theme/afterburner/style/afterburner_dock.css
@@ -14,7 +14,7 @@ Docking Module
     display:none;
 }
 #dock .dockeditem.firstdockitem {
-    margin-top: 2.3em;
+    margin-top: 0;
     -webkit-border-top-right-radius: 6px;
     -moz-border-radius-topright: 6px;
     border-top-right-radius: 6px;
diff --git a/theme/afterburner/style/afterburner_menu.css b/theme/afterburner/style/afterburner_menu.css
index 264b3e7fb72..f4782191aab 100644
--- a/theme/afterburner/style/afterburner_menu.css
+++ b/theme/afterburner/style/afterburner_menu.css
@@ -1,196 +1,199 @@
-/* Custom Menu
--------------------------- */
-#custommenu {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    clear:both;
-    height: 30px;
-    background: #888;
-    margin:0;
-}
-#custommenu ul li {
-    border-right: 1px solid #777;
-    border-left: 1px solid #999
-}
-/*
-Dropdown Menu - CSS from DeCaf Theme by Lei Zhang
--------------------------------------------------*/
-ul.dropdown span.customitem {
-    padding:0;
-    border:0;
-    width: 100%;
-}
-ul.dropdown span.customitem {
-    padding:0;
-    width: 100%;
-}
-ul.dropdown li a,
-ul.dropdown span.customitem a {
-    padding:6px 20px;
-}
-ul.dropdown span.customitem a:hover {
-    border: 0;
-}
-#custommenu ul.dropdown ul {
-    padding:0;
-    width:auto;
-}
-#custommenu ul.dropdown ul a {
-    padding:4px 18px;
-}
-#custommenu ul.dropdown > li span a {
-    height:16px;
-}
-ul.dropdown,
-ul.dropdown li,
-ul.dropdown ul {
-    list-style:none;
-    margin:0;
-    padding:0;
-}
-ul.dropdown {
-    position:relative;
-    top:0px;
-    z-index:597;
-    float:left;
-    font:13px "Trebuchet MS",Arial,Helvetica,sans-serif;
-}
-ul.dropdown li {
-    float:left;
-    line-height:1.3em;
-    vertical-align:middle;
-    background-color:transparent;
-    color:#fff;
-    zoom:1 !important;
-}
-ul.dropdown li.hover,
-ul.dropdown li:hover {
-    position:relative;
-    z-index:599;
-    cursor:default;
-}
-ul.dropdown ul {
-    visibility:hidden;
-    position:absolute;
-    top:100%;z-index:598;
-    left:0;
-    right:auto;
-    margin-top: -1px;
-    font:100% "Trebuchet MS",Arial,Helvetica,sans-serif;
-}
-ul.dropdown ul li {
-    float:none;
-    background-color: #34637f;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #477C9B #34637f #295770;
-    padding:0;
-}
-ul.dropdown ul ul {
-    top:0;
-    right:auto;
-    left:100%;
-    margin-top:0;
-    border-top:none;
-    border-left:none;
-    font-weight:400;
-}
-ul.dropdown li:hover > ul {
-    visibility:visible;
-}
-ul.dropdown span,
-ul.dropdown span a,
-ul.dropdown li.clickable-with-children > a {
-    background-color: #34637f;
-    width:auto;
-    padding:2px 6px 4px 20px;
-    color: #fff;
-}
-ul.dropdown ul span,
-ul.dropdown ul span a,
-ul.dropdown ul li.clickable-with-children > a {
-    background-color:#34637f;
-    background-image: url([[pix:theme|menu/nav-arrow-right]]);
-    background-position:100% 50%;
-    background-repeat:no-repeat;
-    color: #fff;
-}
-ul.dropdown ul ul span,
-ul.dropdown ul ul span a,
-ul.dropdown ul ul li.clickable-with-children > a {
-    background-color:#34637f;
-    background-image: url([[pix:theme|menu/nav-arrow-right]]);
-    background-position:100% 50%;
-    background-repeat:no-repeat;
-    color: #fff;
-}
-ul.dropdown a:link, ul.dropdown a:visited {
-    color: white;
-    text-decoration: none;
-}
-ul.dropdown a:hover {
-    border:0;
-    background-color: #fff;
-    color: #036;
-}
-ul.dropdown ul ul li {
-    background-color: #34637f;
-}
-ul.dropdown ul ul ul li {
-    background-color: #34637f;
-}
-ul.dropdown li a,
-ul.dropdown span,
-ul.dropdown span a {
-    border: none;
-    background-color: transparent;
-}
-ul.dropdown ul li a,
-ul.dropdown ul span,
-ul.dropdown ul span a {
-    border: 0;
-}
-ul.dropdown ul ul li a,
-ul.dropdown ul ul span,
-ul.dropdown ul ul span a {
-    border:0
-}
-ul.dropdown ul ul ul li a,
-ul.dropdown ul ul ul span,
-ul.dropdown ul ul ul span a {
-    border:0;
-}
-ul.dropdown a,ul.dropdown span{
-    display:block;
-}
-ul.dropdown ul a {
-    width:166px;
-    padding:2px 0 4px 5px;
-}
-ul.dropdown ul a.open:hover {
-    background-color: #fff;
-    color:#036;
-}
-ul.dropdown ul li:hover > span,
-ul.dropdown ul li:hover > span a {
-    background-color:#fff;
-    background-image:url([[pix:theme|menu/nav-arrowover-right]]);
-    color: #036;
-}
-ul.dropdown li.clickable-with-children:hover > a {
-    background-image:url([[pix:theme|menu/nav-arrowover-right]]);
-}
-ul.dropdown *.open,
-ul.dropdown li:hover > span,
-ul.dropdown li:hover > span a {
-    background-color:#fff;
-    color: #036;
-}
-ul.dropdown ul ul *.open,
-ul.dropdown ul ul li:hover > span,
-ul.dropdown ul ul li:hover > span a {
-    background-color:#fff;
-    background-image:url([[pix:theme|menu/nav-arrowover-right]]);
-    color:#036;
+@media screen and (min-width: 768px) {
+
+    /* Custom Menu
+    -------------------------- */
+    #custommenu {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        clear:both;
+        height: 30px;
+        background: #888;
+        margin:0;
+    }
+    #custommenu ul li {
+        border-right: 1px solid #777;
+        border-left: 1px solid #999
+    }
+    /*
+    Dropdown Menu - CSS from DeCaf Theme by Lei Zhang
+    -------------------------------------------------*/
+    ul.dropdown span.customitem {
+        padding:0;
+        border:0;
+        width: 100%;
+    }
+    ul.dropdown span.customitem {
+        padding:0;
+        width: 100%;
+    }
+    ul.dropdown li a,
+    ul.dropdown span.customitem a {
+        padding:6px 20px;
+    }
+    ul.dropdown span.customitem a:hover {
+        border: 0;
+    }
+    #custommenu ul.dropdown ul {
+        padding:0;
+        width:auto;
+    }
+    #custommenu ul.dropdown ul a {
+        padding:4px 18px;
+    }
+    #custommenu ul.dropdown > li span a {
+        height:16px;
+    }
+    ul.dropdown,
+    ul.dropdown li,
+    ul.dropdown ul {
+        list-style:none;
+        margin:0;
+        padding:0;
+    }
+    ul.dropdown {
+        position:relative;
+        top:0px;
+        z-index:597;
+        float:left;
+        font:13px "Trebuchet MS",Arial,Helvetica,sans-serif;
+    }
+    ul.dropdown li {
+        float:left;
+        line-height:1.3em;
+        vertical-align:middle;
+        background-color:transparent;
+        color:#fff;
+        zoom:1 !important;
+    }
+    ul.dropdown li.hover,
+    ul.dropdown li:hover {
+        position:relative;
+        z-index:599;
+        cursor:default;
+    }
+    ul.dropdown ul {
+        visibility:hidden;
+        position:absolute;
+        top:100%;z-index:598;
+        left:0;
+        right:auto;
+        margin-top: -1px;
+        font:100% "Trebuchet MS",Arial,Helvetica,sans-serif;
+    }
+    ul.dropdown ul li {
+        float:none;
+        background-color: #34637f;
+        border-width: 1px;
+        border-style: solid;
+        border-color: #477C9B #34637f #295770;
+        padding:0;
+    }
+    ul.dropdown ul ul {
+        top:0;
+        right:auto;
+        left:100%;
+        margin-top:0;
+        border-top:none;
+        border-left:none;
+        font-weight:400;
+    }
+    ul.dropdown li:hover > ul {
+        visibility:visible;
+    }
+    ul.dropdown span,
+    ul.dropdown span a,
+    ul.dropdown li.clickable-with-children > a {
+        background-color: #34637f;
+        width:auto;
+        padding:2px 6px 4px 20px;
+        color: #fff;
+    }
+    ul.dropdown ul span,
+    ul.dropdown ul span a,
+    ul.dropdown ul li.clickable-with-children > a {
+        background-color:#34637f;
+        background-image: url([[pix:theme|menu/nav-arrow-right]]);
+        background-position:100% 50%;
+        background-repeat:no-repeat;
+        color: #fff;
+    }
+    ul.dropdown ul ul span,
+    ul.dropdown ul ul span a,
+    ul.dropdown ul ul li.clickable-with-children > a {
+        background-color:#34637f;
+        background-image: url([[pix:theme|menu/nav-arrow-right]]);
+        background-position:100% 50%;
+        background-repeat:no-repeat;
+        color: #fff;
+    }
+    ul.dropdown a:link, ul.dropdown a:visited {
+        color: white;
+        text-decoration: none;
+    }
+    ul.dropdown a:hover {
+        border:0;
+        background-color: #fff;
+        color: #036;
+    }
+    ul.dropdown ul ul li {
+        background-color: #34637f;
+    }
+    ul.dropdown ul ul ul li {
+        background-color: #34637f;
+    }
+    ul.dropdown li a,
+    ul.dropdown span,
+    ul.dropdown span a {
+        border: none;
+        background-color: transparent;
+    }
+    ul.dropdown ul li a,
+    ul.dropdown ul span,
+    ul.dropdown ul span a {
+        border: 0;
+    }
+    ul.dropdown ul ul li a,
+    ul.dropdown ul ul span,
+    ul.dropdown ul ul span a {
+        border:0
+    }
+    ul.dropdown ul ul ul li a,
+    ul.dropdown ul ul ul span,
+    ul.dropdown ul ul ul span a {
+        border:0;
+    }
+    ul.dropdown a,ul.dropdown span{
+        display:block;
+    }
+    ul.dropdown ul a {
+        width:166px;
+        padding:2px 0 4px 5px;
+    }
+    ul.dropdown ul a.open:hover {
+        background-color: #fff;
+        color:#036;
+    }
+    ul.dropdown ul li:hover > span,
+    ul.dropdown ul li:hover > span a {
+        background-color:#fff;
+        background-image:url([[pix:theme|menu/nav-arrowover-right]]);
+        color: #036;
+    }
+    ul.dropdown li.clickable-with-children:hover > a {
+        background-image:url([[pix:theme|menu/nav-arrowover-right]]);
+    }
+    ul.dropdown *.open,
+    ul.dropdown li:hover > span,
+    ul.dropdown li:hover > span a {
+        background-color:#fff;
+        color: #036;
+    }
+    ul.dropdown ul ul *.open,
+    ul.dropdown ul ul li:hover > span,
+    ul.dropdown ul ul li:hover > span a {
+        background-color:#fff;
+        background-image:url([[pix:theme|menu/nav-arrowover-right]]);
+        color:#036;
+    }
 }
\ No newline at end of file
diff --git a/theme/afterburner/style/afterburner_pagelayout.css b/theme/afterburner/style/afterburner_pagelayout.css
index 9fca7d9304c..f3e20c1c3a0 100644
--- a/theme/afterburner/style/afterburner_pagelayout.css
+++ b/theme/afterburner/style/afterburner_pagelayout.css
@@ -9,7 +9,6 @@ html {
 body {
     margin: 0;
     padding: 0;
-    min-width: 775px;
     background: #fff url([[pix:theme|core/bground]]) repeat-x fixed;
 }
 #page-wrapper {
@@ -34,27 +33,27 @@ body {
     overflow: hidden;
     position: relative;
     width: 100%;
-    background-color: #eee;      /* Right column background colour */
+    background-color: #eee; /* Right column background colour */
 }
 #region-main-box {
     float: left;
-    right: 25%;
+    right: 21%;
     position: relative;
     width: 100%;
-    background-color: #fff;      /* Center column background colour */
+    background-color: #fff; /* Center column background colour */
 }
 #region-pre-box {
     float: left;
-    right: 50%;
+    right: 58%;
     position: relative;
     width: 100%;
-    background-color: #d1e0e7;   /* Left column background colour */
+    background-color: #d1e0e7; /* Left column background colour */
 }
 #region-main {
     float: left;
     overflow: hidden;
     position: relative;
-    width: 50%;
+    width: 58%;
     left: 100%;
     background-color: #fff;
 }
@@ -62,15 +61,15 @@ body {
     float: left;
     overflow: hidden;
     position: relative;
-    width: 25%;
-    left: 25%;
+    width: 21%;
+    left: 21%;
 }
 #region-post {
     float: left;
     overflow: hidden;
     position: relative;
-    width: 25%;
-    left: 75%;
+    width: 21%;
+    left: 79%;
 
 }
 #region-main .region-content {
@@ -85,9 +84,9 @@ body {
 /** SIDE-PRE-ONLY **/
 
 .side-pre-only #region-main-box {right: 0%;}
-.side-pre-only #region-pre-box {right: 77%;}
-.side-pre-only #region-main {left: 100%; width: 77%;}
-.side-pre-only #region-pre {left: 0; width: 23%;}
+.side-pre-only #region-pre-box {right: 79%;}
+.side-pre-only #region-main {left: 100%; width: 79%;}
+.side-pre-only #region-pre {left: 0; width: 21%;}
 .side-pre-only #region-post {width: 0;}
 
 
diff --git a/theme/afterburner/style/afterburner_responsive.css b/theme/afterburner/style/afterburner_responsive.css
new file mode 100644
index 00000000000..c01da88d5e8
--- /dev/null
+++ b/theme/afterburner/style/afterburner_responsive.css
@@ -0,0 +1,153 @@
+@media screen and (max-width: 767px) {
+   /* Custom Menu
+    -------------------------- */
+
+    #custommenu ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        overflow: hidden;
+    }
+    #custommenu li {
+        margin: 0; /** Opera hack **/
+    }
+    #custommenu a {
+        display: block;
+        color: #fff;
+        background-color: #888;
+        width: 98%;
+        padding: 5px 10px;
+        text-decoration: none;
+        border-top: 1px solid #777;
+        border-bottom: 1px solid #999;
+        font-weight: bold;
+    }
+    #custommenu li li a {
+        display: block;
+        color: #fff;
+        background-color: #34637f;
+        width: 98%;
+        padding: 5px 20px;
+        text-decoration: none;
+        border-top: 1px solid #477C9B;
+        border-bottom: 1px solid #295770;
+        font-weight: normal;
+    }
+    #custommenu li li li a {
+        display: block;
+        color: #fff;
+        background-color: #34637f;
+        width: 98%;
+        padding: 5px 20px;
+        text-decoration: none;
+        border-top: 1px solid #477C9B;
+        border-bottom: 1px solid #295770;
+        font-weight: normal;
+    }
+    #custommenu a:hover {
+        background-color: #fff;
+        color: #036;
+    }
+}
+
+@media screen and (min-width: 768px) and (max-width: 799px) {
+    /* Page Layout
+    -------------------------*/
+    body.has_dock {
+        margin-left: 3%;
+        width: 97%;
+    }
+    #page-wrapper {
+        width: 94%;
+    }
+    #region-main .region-content {
+        padding: 0 5px;
+    }
+    #region-main-box {
+        right: 0%;
+    }
+    #region-pre-box {
+        right: 77%;
+    }
+    #region-main {
+        left: 100%;
+        width: 77%;
+    }
+    #region-pre {
+        left: 0;
+        width: 23%;
+    }
+    #region-post {
+        left: 0;
+        width: 23%;
+    }
+    #region-post .block .header {
+        background:url([[pix:theme|images/light3]]) 0 -136px repeat-x;
+        border-bottom: 1px solid #c3d9e1;
+        color: #50646d;
+    }
+    .headermenu {
+        top: 10px;
+        right: 10px;
+    }
+}
+@media screen and (max-width: 767px) {
+    /* Page Layout
+    -------------------------*/
+    body.has_dock #dock {
+        display: none;
+    }
+    #page-wrapper {
+        width: 96%;
+    }
+    #region-main-box,
+    .side-pre-only #region-main-box,
+    .side-post-only #region-main-box {
+        right: 0;
+    }
+    #region-pre-box,
+    .side-pre-only #region-pre-box,
+    .side-post-only #region-pre-box {
+        right: 0;
+    }
+    #region-main,
+    .side-pre-only #region-main,
+    .side-post-only #region-main {
+        left: 0;
+        width: 100%;
+    }
+    #region-pre,
+    .side-pre-only #region-pre,
+    .side-post-only #region-pre {
+        left: 0;
+        width: 100%;
+    }
+    #region-post,
+    .side-pre-only #region-post,
+    .side-post-only #region-post {
+        left: 0;
+        width: 100%;
+    }
+    #region-post .block .header {
+        background:url([[pix:theme|images/light3]]) 0 -136px repeat-x;
+        border-bottom: 1px solid #c3d9e1;
+        color:#50646d;
+    }
+    #page-header {
+        height: 100px;
+        background: #fff;
+    }
+    a.logo {
+        background-size: 75% 75%;
+    }
+    .headermenu {
+        display: none;
+    }
+}
+@media screen and (max-width: 320px) {
+
+    a.logo {
+        background-size: 50% 50%;
+    }
+
+}
\ No newline at end of file
diff --git a/theme/afterburner/style/afterburner_styles.css b/theme/afterburner/style/afterburner_styles.css
index 9b883b6de24..b8a42d23626 100644
--- a/theme/afterburner/style/afterburner_styles.css
+++ b/theme/afterburner/style/afterburner_styles.css
@@ -6,8 +6,8 @@ body {
     padding: 0;
     color: #4b4b4b;
 }
-h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea {
-    font-family: Helvetica,Arial,sans-serif;
+h1, h2, h3, h4, h5, h6, p, ul, ol, dl, input, textarea {
+    font-family: Helvetica, Arial, sans-serif;
 }
 a:link,
 a:visited {