diff --git a/src/Extensible.js b/src/Extensible.js
index 913e7893..5e8ec5fc 100644
--- a/src/Extensible.js
+++ b/src/Extensible.js
@@ -47,16 +47,16 @@ Ext.define('Extensible', {
                 // static style rules rather than recalculate sizes on each resize.
                 // We check for less than 3 because the Ext scrollbar measurement gets
                 // slightly padded (not sure the reason), so it's never returned as 0.
-                Ext.getBody().addCls('x-no-scrollbar');
+                Ext.getBody().addCls(Ext.baseCSSPrefix+'no-scrollbar');
             }
             if (Ext.isWindows) {
                 // There are a few Extensible-specific CSS fixes required only on Windows
-                Ext.getBody().addCls('x-win');
+                Ext.getBody().addCls(Ext.baseCSSPrefix+'win');
             }
             if (Ext.getVersion('extjs').isLessThan('4.1')) {
                 // Unfortunately some styling changed in 4.1 that requires version-specific
                 // CSS differences to handle properly across versions. Ugh.
-                Ext.getBody().addCls('x-4-0');
+                Ext.getBody().addCls(Ext.baseCSSPrefix+'4-0');
             }
         }, this);
     },
diff --git a/src/calendar/CalendarPanel.js b/src/calendar/CalendarPanel.js
index 002b6130..6c99785c 100644
--- a/src/calendar/CalendarPanel.js
+++ b/src/calendar/CalendarPanel.js
@@ -257,8 +257,8 @@ Ext.define('Extensible.calendar.CalendarPanel', {
             });
         }
         if(this.showNavNextPrev) {
-            this.tbar.items.push({id: this.id+'-tb-prev', handler: this.onPrevClick, scope: this, iconCls: 'x-tbar-page-prev'});
-            this.tbar.items.push({id: this.id+'-tb-next', handler: this.onNextClick, scope: this, iconCls: 'x-tbar-page-next'});
+            this.tbar.items.push({id: this.id+'-tb-prev', handler: this.onPrevClick, scope: this, iconCls: Ext.baseCSSPrefix+'tbar-page-prev'});
+            this.tbar.items.push({id: this.id+'-tb-next', handler: this.onNextClick, scope: this, iconCls: Ext.baseCSSPrefix+'tbar-page-next'});
         }
         if(this.showNavJump) {
             this.tbar.items.push(this.jumpToText);
@@ -307,7 +307,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
         
         if(this.showNavBar === false) {
             delete this.tbar;
-            this.addCls('x-calendar-nonav');
+            this.addCls(Ext.baseCSSPrefix+'calendar-nonav');
         }
         
         this.callParent(arguments);
@@ -544,7 +544,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
              */
         });
         
-        this.addCls('x-cal-panel');
+        this.addCls(Ext.baseCSSPrefix+'cal-panel');
         
         if(this.eventStore) {
             this.store = this.eventStore;
@@ -668,7 +668,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
     afterRender: function() {
         this.callParent(arguments);
         
-        this.body.addCls('x-cal-body');
+        this.body.addCls(Ext.baseCSSPrefix+'cal-body');
         this.updateNavState();
         this.setActiveView();
     },
diff --git a/src/calendar/form/EventWindow.js b/src/calendar/form/EventWindow.js
index f289ab73..367d6a0d 100644
--- a/src/calendar/form/EventWindow.js
+++ b/src/calendar/form/EventWindow.js
@@ -236,7 +236,7 @@ Ext.define('Extensible.calendar.form.EventWindow', {
         
         // This junk spacer item gets added to the fbar by Ext (fixed in 4.0.2)
         var junkSpacer = this.getDockedItems('toolbar')[0].items.items[0];
-        if (junkSpacer.el.hasCls('x-component-default')) {
+        if (junkSpacer.el.hasCls(Ext.baseCSSPrefix+'component-default')) {
             Ext.destroy(junkSpacer);
         }
     },
diff --git a/src/calendar/form/field/CalendarCombo.js b/src/calendar/form/field/CalendarCombo.js
index 96b2cbdb..89f22cc3 100644
--- a/src/calendar/form/field/CalendarCombo.js
+++ b/src/calendar/form/field/CalendarCombo.js
@@ -22,7 +22,7 @@ Ext.define('Extensible.calendar.form.field.CalendarCombo', {
     forceSelection: true,
     selectOnFocus: true,
     
-    defaultCls: 'x-cal-default',
+    defaultCls: Ext.baseCSSPrefix+'cal-default',
     hiddenCalendarCls: 'ext-cal-hidden',
     
     initComponent: function() {
@@ -46,7 +46,7 @@ Ext.define('Extensible.calendar.form.field.CalendarCombo', {
     afterRender: function() {
         this.callParent(arguments);
         
-        this.wrap = this.el.down('.x-form-item-body');
+        this.wrap = this.el.down('.'+Ext.baseCSSPrefix+'form-item-body');
         this.wrap.addCls('ext-calendar-picker');
         
         this.icon = Ext.core.DomHelper.append(this.wrap, {
@@ -78,7 +78,7 @@ Ext.define('Extensible.calendar.form.field.CalendarCombo', {
                 // this is a calendar id, need to get the record first then use its color
                 value = this.store.findRecord(calendarMappings.CalendarId.name, value);
             }
-            colorCls = 'x-cal-' + (value.data ? value.data[calendarMappings.ColorId.name] : value);
+            colorCls = Ext.baseCSSPrefix+'cal-' + (value.data ? value.data[calendarMappings.ColorId.name] : value);
         }
         
         me.currentStyleClss = colorCls;
diff --git a/src/calendar/gadget/CalendarListMenu.js b/src/calendar/gadget/CalendarListMenu.js
index 9f30114c..1d1b22f8 100644
--- a/src/calendar/gadget/CalendarListMenu.js
+++ b/src/calendar/gadget/CalendarListMenu.js
@@ -82,7 +82,7 @@ Ext.define('Extensible.calendar.gadget.CalendarListMenu', {
             }]
         });
         
-        this.addClass('x-calendar-list-menu');
+        this.addClass(Ext.baseCSSPrefix+'calendar-list-menu');
         this.callParent(arguments);
     },
     
diff --git a/src/calendar/gadget/CalendarListPanel.js b/src/calendar/gadget/CalendarListPanel.js
index 456ec153..fdff7a1c 100644
--- a/src/calendar/gadget/CalendarListPanel.js
+++ b/src/calendar/gadget/CalendarListPanel.js
@@ -27,7 +27,7 @@ Ext.define('Extensible.calendar.gadget.CalendarListPanel', {
      */
     
     initComponent: function() {
-        this.addCls('x-calendar-list');
+        this.addCls(Ext.baseCSSPrefix+'calendar-list');
         this.callParent(arguments);
     },
     
@@ -126,7 +126,7 @@ Ext.define('Extensible.calendar.gadget.CalendarListPanel', {
     },
     
     getColorCls: function(colorId) {
-        return 'x-cal-'+colorId+'-ad';
+        return Ext.baseCSSPrefix+'cal-'+colorId+'-ad';
     },
     
     toggleCalendar: function(id, commit) {
diff --git a/src/calendar/util/ColorPicker.js b/src/calendar/util/ColorPicker.js
index 43478352..244a400d 100644
--- a/src/calendar/util/ColorPicker.js
+++ b/src/calendar/util/ColorPicker.js
@@ -38,7 +38,7 @@ Ext.define('Extensible.calendar.util.ColorPicker', {
     initComponent: function() {
         this.callParent(arguments);
         
-        this.addCls('x-calendar-palette');
+        this.addCls(Ext.baseCSSPrefix+'calendar-palette');
             
         if(this.handler) {
             this.on('select', this.handler, this.scope || this, {
@@ -59,8 +59,8 @@ Ext.define('Extensible.calendar.util.ColorPicker', {
             colorId;
         
         Ext.each(classNames, function(className) {
-            if (className.indexOf('x-cal-') > -1) {
-                colorId = className.split('x-cal-')[1];
+            if (className.indexOf(Ext.baseCSSPrefix+'cal-') > -1) {
+                colorId = className.split(Ext.baseCSSPrefix+'cal-')[1];
                 return false;
             }
         });
@@ -88,9 +88,9 @@ Ext.define('Extensible.calendar.util.ColorPicker', {
             var el = me.el;
 
             if (me.value) {
-                el.down('.x-cal-' + value).removeCls(selectedCls);
+                el.down('.'+Ext.baseCSSPrefix+'cal-' + value).removeCls(selectedCls);
             }
-            el.down('.x-cal-' + colorId).addCls(selectedCls);
+            el.down('.'+Ext.baseCSSPrefix+'cal-' + colorId).addCls(selectedCls);
             me.value = colorId;
             
             if (suppressEvent !== true) {
diff --git a/src/calendar/view/Day.js b/src/calendar/view/Day.js
index 75b0a551..7c40a828 100644
--- a/src/calendar/view/Day.js
+++ b/src/calendar/view/Day.js
@@ -212,7 +212,7 @@ Ext.define('Extensible.calendar.view.Day', {
         // general to make sure that the window resize is good and done first
         // so that we can properly calculate sizes.
         Ext.defer(function() {
-            var ct = me.el.up('.x-panel-body'),
+            var ct = me.el.up('.'+Ext.baseCSSPrefix+'panel-body'),
                 header = me.el.down('.ext-cal-day-header'),
                 bodyHeight = ct ? ct.getHeight() - header.getHeight() : false;
             
diff --git a/src/calendar/view/DayBody.js b/src/calendar/view/DayBody.js
index c1ef35a4..4d012f54 100644
--- a/src/calendar/view/DayBody.js
+++ b/src/calendar/view/DayBody.js
@@ -337,7 +337,7 @@ Ext.define('Extensible.calendar.view.DayBody', {
         var M = Extensible.calendar.data.EventMappings,
             extraClasses = [this.getEventSelectorCls(evtData[M.EventId.name])],
             data = {},
-            colorCls = 'x-cal-default',
+            colorCls = Ext.baseCSSPrefix+'cal-default',
             title = evtData[M.Title.name],
             fmt = Extensible.Date.use24HourTime ? 'G:i ' : 'g:ia ',
             rec;
@@ -349,7 +349,7 @@ Ext.define('Extensible.calendar.view.DayBody', {
                 evtData[M.CalendarId.name]);
 
             if (rec) {
-                colorCls = 'x-cal-' + rec.data[Extensible.calendar.data.CalendarMappings.ColorId.name];
+                colorCls = Ext.baseCSSPrefix+'cal-' + rec.data[Extensible.calendar.data.CalendarMappings.ColorId.name];
             }
         }
         colorCls += (evtData._renderAsAllDay ? '-ad' : '') + (Ext.isIE || Ext.isOpera ? '-x' : '');
diff --git a/src/calendar/view/Month.js b/src/calendar/view/Month.js
index a6f27567..301b06db 100644
--- a/src/calendar/view/Month.js
+++ b/src/calendar/view/Month.js
@@ -284,7 +284,7 @@ Ext.define('Extensible.calendar.view.Month', {
         var M = Extensible.calendar.data.EventMappings,
             extraClasses = [this.getEventSelectorCls(evtData[M.EventId.name])],
             templateData = {},
-            colorCls = 'x-cal-default',
+            colorCls = Ext.baseCSSPrefix+'cal-default',
             title = evtData[M.Title.name],
             fmt = Extensible.Date.use24HourTime ? 'G:i ' : 'g:ia ',
             rec;
@@ -292,7 +292,7 @@ Ext.define('Extensible.calendar.view.Month', {
         if (this.calendarStore && evtData[M.CalendarId.name]) {
             rec = this.calendarStore.findRecord(Extensible.calendar.data.CalendarMappings.CalendarId.name, evtData[M.CalendarId.name]);
             if(rec) {
-                colorCls = 'x-cal-' + rec.get(Extensible.calendar.data.CalendarMappings.ColorId.name);
+                colorCls = Ext.baseCSSPrefix+'cal-' + rec.get(Extensible.calendar.data.CalendarMappings.ColorId.name);
             }
         }
         colorCls += (evtData._renderAsAllDay ? '-ad' : '');
diff --git a/src/form/field/DateRange.js b/src/form/field/DateRange.js
index 38edd364..cc3a2b7c 100644
--- a/src/form/field/DateRange.js
+++ b/src/form/field/DateRange.js
@@ -233,13 +233,13 @@ Ext.define('Extensible.form.field.DateRange', {
             if(me.singleLine === 'auto') {
                 var ownerCtEl = me.ownerCt.getEl(),
                     w = me.ownerCt.getWidth() - ownerCtEl.getPadding('lr'),
-                    el = ownerCtEl.down('.x-panel-body');
+                    el = ownerCtEl.down('.'+Ext.baseCSSPrefix+'panel-body');
                     
                 if(el) {
                     w -= el.getPadding('lr');
                 }
                 
-                el = ownerCtEl.down('.x-form-item-label');
+                el = ownerCtEl.down('.'+Ext.baseCSSPrefix+'form-item-label');
                 
                 if(el) {
                     w -= el.getWidth() - el.getPadding('lr');