From ffdc8bb8d0ced5c690b84139e40cc26fad819d02 Mon Sep 17 00:00:00 2001
From: Philipp Dobrigkeit <p.dobrigkeit@goalio.de>
Date: Tue, 14 Aug 2012 16:18:17 +0200
Subject: [PATCH 1/4] Separated the stylesheet colors into sass files for
 theming

---
 .gitignore                                    |   3 +-
 resources/sass/calendar-colors.scss           |   3 +
 resources/sass/calendar.scss                  |   3 +
 resources/sass/config.rb                      |  22 +
 resources/sass/recurrence.scss                |   3 +
 resources/themes/compass_init.rb              |   6 +
 resources/themes/lib/utils.rb                 |  93 ++
 .../themes/stylesheets/ext4/default/_all.scss |   5 +
 .../stylesheets/ext4/default/_variables.scss  |   5 +
 .../stylesheets/ext4/default/_widgets.scss    |   3 +
 .../default/variables/_calendar-colors.scss   |  37 +
 .../ext4/default/variables/_calendar.scss     | 102 ++
 .../ext4/default/variables/_core.scss         | 120 +++
 .../ext4/default/variables/_recurrence.scss   |   2 +
 .../default/widgets/_calendar-colors.scss     | 732 +++++++++++++
 .../ext4/default/widgets/_calendar.scss       | 986 ++++++++++++++++++
 .../ext4/default/widgets/_recurrence.scss     |  50 +
 17 files changed, 2174 insertions(+), 1 deletion(-)
 create mode 100644 resources/sass/calendar-colors.scss
 create mode 100644 resources/sass/calendar.scss
 create mode 100644 resources/sass/config.rb
 create mode 100644 resources/sass/recurrence.scss
 create mode 100644 resources/themes/compass_init.rb
 create mode 100644 resources/themes/lib/utils.rb
 create mode 100644 resources/themes/stylesheets/ext4/default/_all.scss
 create mode 100644 resources/themes/stylesheets/ext4/default/_variables.scss
 create mode 100644 resources/themes/stylesheets/ext4/default/_widgets.scss
 create mode 100644 resources/themes/stylesheets/ext4/default/variables/_calendar-colors.scss
 create mode 100644 resources/themes/stylesheets/ext4/default/variables/_calendar.scss
 create mode 100644 resources/themes/stylesheets/ext4/default/variables/_core.scss
 create mode 100644 resources/themes/stylesheets/ext4/default/variables/_recurrence.scss
 create mode 100644 resources/themes/stylesheets/ext4/default/widgets/_calendar-colors.scss
 create mode 100644 resources/themes/stylesheets/ext4/default/widgets/_calendar.scss
 create mode 100644 resources/themes/stylesheets/ext4/default/widgets/_recurrence.scss

diff --git a/.gitignore b/.gitignore
index 5181bf38..4f61eb99 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,5 @@
 deploy
 extensible-all*
 /examples-1.0/
-/examples/calendar/test.html
\ No newline at end of file
+/examples/calendar/test.html
+/resources\sass/.sass-cache
diff --git a/resources/sass/calendar-colors.scss b/resources/sass/calendar-colors.scss
new file mode 100644
index 00000000..c3dbeba4
--- /dev/null
+++ b/resources/sass/calendar-colors.scss
@@ -0,0 +1,3 @@
+@import 'compass';
+@import 'ext4/default/variables/calendar-colors';
+@import 'ext4/default/widgets/calendar-colors';
\ No newline at end of file
diff --git a/resources/sass/calendar.scss b/resources/sass/calendar.scss
new file mode 100644
index 00000000..7a64c95f
--- /dev/null
+++ b/resources/sass/calendar.scss
@@ -0,0 +1,3 @@
+@import 'compass';
+@import 'ext4/default/variables/calendar';
+@import 'ext4/default/widgets/calendar';
\ No newline at end of file
diff --git a/resources/sass/config.rb b/resources/sass/config.rb
new file mode 100644
index 00000000..64cc6ce6
--- /dev/null
+++ b/resources/sass/config.rb
@@ -0,0 +1,22 @@
+# $ext_path: This should be the path of where the ExtJS SDK is installed
+# Generally this will be in a lib/extjs folder in your applications root
+# <root>/lib/extjs
+$ext_path = "../../"
+
+# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
+# Generally this will be in a resources/sass folder
+# <root>/resources/sass
+sass_path = File.dirname(__FILE__)
+
+# css_path: the directory you want your CSS files to be.
+# Generally this is a folder in the parent directory of your Sass files
+# <root>/resources/css
+css_path = File.join(sass_path, "..", "css")
+
+# output_style: The output style for your compiled CSS
+# nested, expanded, compact, compressed
+# More information can be found here http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style
+output_style = :nested
+
+# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
+load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes')
diff --git a/resources/sass/recurrence.scss b/resources/sass/recurrence.scss
new file mode 100644
index 00000000..550c504d
--- /dev/null
+++ b/resources/sass/recurrence.scss
@@ -0,0 +1,3 @@
+@import 'compass';
+@import 'ext4/default/variables/recurrence';
+@import 'ext4/default/widgets/recurrence';
diff --git a/resources/themes/compass_init.rb b/resources/themes/compass_init.rb
new file mode 100644
index 00000000..167d8226
--- /dev/null
+++ b/resources/themes/compass_init.rb
@@ -0,0 +1,6 @@
+# include the utils rb file which has extra functionality for the ext theme
+dir = File.dirname(__FILE__)
+require File.join(dir, 'lib', 'utils.rb')
+
+# register ext4 as a compass framework
+Compass::Frameworks.register 'ext4', dir
\ No newline at end of file
diff --git a/resources/themes/lib/utils.rb b/resources/themes/lib/utils.rb
new file mode 100644
index 00000000..619796ec
--- /dev/null
+++ b/resources/themes/lib/utils.rb
@@ -0,0 +1,93 @@
+module ExtJS4
+  module SassExtensions
+    module Functions
+      module Utils
+        def parsebox(list, n)
+          assert_type n, :Number
+          if !n.int?
+            raise ArgumentError.new("List index #{n} must be an integer")
+          elsif n.to_i < 1
+            raise ArgumentError.new("List index #{n} must be greater than or equal to 1")
+          elsif n.to_i > 4
+            raise ArgumentError.new("A box string can't contain more then 4")
+          end
+
+          new_list = list.clone.to_a
+          size = new_list.size
+                      
+          if n.to_i >= size
+            if size == 1
+              new_list[1] = new_list[0]
+              new_list[2] = new_list[0]
+              new_list[3] = new_list[0]
+            elsif size == 2
+              new_list[2] = new_list[0]
+              new_list[3] = new_list[1]
+            elsif size == 3
+              new_list[3] = new_list[1]
+            end
+          end
+          
+          new_list.to_a[n.to_i - 1]
+        end
+        
+        def parseint(value)
+          Sass::Script::Number.new(value.to_i)
+        end
+        
+        # Returns a background-image property for a specified images for the theme
+        def theme_image(theme, path, without_url = false, relative = false)
+          path = path.value
+          theme = theme.value
+          without_url = (without_url.class == FalseClass) ? without_url : without_url.value
+          
+          relative_path = "../../images/"
+          
+          if relative
+            if relative.class == Sass::Script::String
+              relative_path = relative.value
+              relative = true
+            elsif relative.class == FalseClass || relative.class == TrueClass
+              relative = relative
+            else
+              relative = relative.value
+            end
+          else
+            relative = false
+          end
+          
+          if relative
+            image_path = File.join(relative_path, theme, path)
+          else
+            images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
+            image_path = File.join(images_path, path)
+          end
+          
+          if !without_url
+            url = "url('#{image_path}')"
+          else
+            url = "#{image_path}"
+          end
+          
+          Sass::Script::String.new(url)
+        end
+
+        def theme_image_exists(path)
+          result = false
+
+          where_to_look = path.value.gsub('../../resources', 'resources')
+
+          if where_to_look && FileTest.exists?("#{where_to_look}")
+            result = true
+          end
+
+          return Sass::Script::Bool.new(result)
+        end
+      end
+    end
+  end
+end
+
+module Sass::Script::Functions
+  include ExtJS4::SassExtensions::Functions::Utils
+end
\ No newline at end of file
diff --git a/resources/themes/stylesheets/ext4/default/_all.scss b/resources/themes/stylesheets/ext4/default/_all.scss
new file mode 100644
index 00000000..e68ba76c
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/_all.scss
@@ -0,0 +1,5 @@
+@import "compass/css3";
+@import "blueprint/typography";
+
+@import "variables";
+@import "widgets";
\ No newline at end of file
diff --git a/resources/themes/stylesheets/ext4/default/_variables.scss b/resources/themes/stylesheets/ext4/default/_variables.scss
new file mode 100644
index 00000000..6209cd94
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/_variables.scss
@@ -0,0 +1,5 @@
+@import "variables/core";
+
+@import "variables/calendar-colors";
+@import "variables/calendar";
+@import "variables/recurrence";
\ No newline at end of file
diff --git a/resources/themes/stylesheets/ext4/default/_widgets.scss b/resources/themes/stylesheets/ext4/default/_widgets.scss
new file mode 100644
index 00000000..9c238ef6
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/_widgets.scss
@@ -0,0 +1,3 @@
+@import 'widgets/calendar-colors';
+@import 'widgets/calendar';
+@import 'widgets/recurrence';
diff --git a/resources/themes/stylesheets/ext4/default/variables/_calendar-colors.scss b/resources/themes/stylesheets/ext4/default/variables/_calendar-colors.scss
new file mode 100644
index 00000000..9221770c
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/variables/_calendar-colors.scss
@@ -0,0 +1,37 @@
+$extensible-event-allday-color: 	#fff !default;
+
+
+//calendar colors:
+$extensible-calendar-color-no-info:	#668CB3 !default;
+$extensible-calendar-color-1: 		#FA7166 !default;
+$extensible-calendar-color-2:		#cf2424 !default;
+$extensible-calendar-color-3:		#a01a1a !default;
+$extensible-calendar-color-4:		#7e3838 !default;
+$extensible-calendar-color-5:		#ca7609 !default;
+$extensible-calendar-color-6:		#f88015 !default;
+$extensible-calendar-color-7:		#eda12a !default;
+$extensible-calendar-color-8:		#d5b816 !default;
+$extensible-calendar-color-9:		#e281ca !default;
+$extensible-calendar-color-10:		#bf53a4 !default;
+$extensible-calendar-color-11:		#9d3283 !default;
+$extensible-calendar-color-12:		#7a0f60 !default;
+$extensible-calendar-color-13:		#542382 !default;
+$extensible-calendar-color-14:		#7742a9 !default;
+$extensible-calendar-color-15:		#8763ca !default;
+$extensible-calendar-color-16:		#b586e2 !default;
+$extensible-calendar-color-17:		#7399f9 !default;
+$extensible-calendar-color-18:		#4e79e6 !default;
+$extensible-calendar-color-19:		#2951b9 !default;
+$extensible-calendar-color-20:		#133897 !default;
+$extensible-calendar-color-21:		#1a5173 !default;
+$extensible-calendar-color-22:		#1a699c !default;
+$extensible-calendar-color-23:		#3694b7 !default;
+$extensible-calendar-color-24:		#64b9d9 !default;
+$extensible-calendar-color-25:		#a8c67b !default;
+$extensible-calendar-color-26:		#83ad47 !default;
+$extensible-calendar-color-27:		#2e8f0c !default;
+$extensible-calendar-color-28:		#176413 !default;
+$extensible-calendar-color-29:		#0f4c30 !default;
+$extensible-calendar-color-30:		#386651 !default;
+$extensible-calendar-color-31:		#3ea987 !default;
+$extensible-calendar-color-32:		#7bc3b5 !default;
\ No newline at end of file
diff --git a/resources/themes/stylesheets/ext4/default/variables/_calendar.scss b/resources/themes/stylesheets/ext4/default/variables/_calendar.scss
new file mode 100644
index 00000000..25faddea
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/variables/_calendar.scss
@@ -0,0 +1,102 @@
+// Shared Colors
+$extensible-toolbar-button-color: 			#555 !default;
+$extensible-panel-border-color: 			#99bbe8 !default;
+$extensible-panel-inner-background-color:	#eee !default;
+
+
+//
+$extensible-cal-hd-color: 					#555 !default;
+$extensible-cal-hd-background-color: 		#d3e1f1 !default;
+$extensible-cal-hd-border-color: 			#c3d9ff !default;
+$extensible-cal-hd-border-separator-color:	#bcf !default;
+
+//Day/week-specific styles
+$extensible-cal-hd-days-background-color: 	#cddcef !default;
+$extensible-cal-hd-ad-background-color:		#fff !default;
+$extensible-cal-hd-ad-border-color:			#e3e9ff !default;
+$extensible-cal-days-row-border-color:		#ddd !default;
+$extensible-cal-days-times-color: 			#666 !default;
+$extensible-cal-days-times-border-color:	$extensible-cal-days-row-border-color !default;
+$extensible-cal-days-times-background-color: #f6f9fc !default;
+
+//Month-specific styles
+$extensible-cal-month-hd-background-color:	#95B8EF !default;
+$extensible-cal-month-background-color:		#fff !default;
+
+//Month view week link boxes
+$extensible-cal-month-week-link-color:						#999 !default;
+$extensible-cal-month-week-link-background-color: 			#EFEFEF !default;
+$extensible-cal-month-week-link-over-background-color: 		#E0E7EF !default;
+$extensible-cal-month-week-link-border-color:				#C3D9FF !default;
+$extensible-cal-month-week-link-border-top-color:			$extensible-panel-border-color !default;
+$extensible-cal-month-week-link-first-border-left-color: 	$extensible-cal-hd-border-color !default;
+
+//Month table cells
+$extensible-cal-month-day-border-color: 			$extensible-cal-hd-border-color !default;
+$extensible-cal-month-day-over-background-color: 	#D1EAEF !default;
+
+//Event title cell
+$extensible-cal-month-title-color: 					#A7C6DF !default;
+$extensible-cal-month-title-border-color: 			$extensible-cal-hd-border-color !default;
+$extensible-cal-month-title-first-border-color:		$extensible-cal-hd-border-separator-color !default;
+
+//Today's title cell
+$extensible-cal-month-today-color: 					#BFA52F !default;
+$extensible-cal-month-today-background-color: 		#FFF4BF !default;
+
+//Weekend cell
+$extensible-cal-month-weekend-background-color: 	#EFF9FC !default;
+
+//Prev Next cell
+$extensible-cal-month-prevnext-color: 				#bbb !default;
+$extensible-cal-month-prevnext-background-color: 	#EFEFEF !default;
+
+//Event cells
+$extensible-cal-ev-more-color:						#369 !default;
+
+//Day view event styles
+$extensible-cal-day-evt-color:						#fff !default;
+$extensible-cal-day-evt-link-color:					$extensible-cal-day-evt-color !default;
+
+//Calendar DD styles
+$extensible-dd-sel-background-color:				#C3D9FF !default;
+$extensible-dd-shim-background-color:				$extensible-dd-sel-background-color !default;
+$extensible-dd-ghost-color:							#000 !default;
+$extensible-dd-ghost-background-color:				#fff !default;
+$extensible-dd-ghost-border-color:					#ddd #bbb #bbb #ddd !default;
+
+//Event resize handle
+$extensible-resize-handle-border-color: 			#ccc !default;
+$extensible-resize-handle-border-opacity-color:		#fff !default;
+
+
+//Calendar navigation picker styles
+$extensible-navigation-picker-border-color:						#99BBE8 !default;
+$extensible-navigation-picker-header-background-color:			#D3E1F1 !default;
+
+$extensible-navigation-picker-button-color:						$extensible-toolbar-button-color !default;
+$extensible-navigation-picker-inner-border-color:				$extensible-cal-hd-border-separator-color !default;
+
+$extensible-navigation-picker-today-background-color:			#FFF4BF !default;
+$extensible-navigation-picker-today-border-color:				#BFA52F !default;
+
+$extensible-navigation-picker-month-border-color:				$extensible-navigation-picker-border-color !default;
+$extensible-navigation-picker-footer-background-color:			$extensible-navigation-picker-header-background-color !default;
+
+//Calendar editor window styles
+$extensible-editor-link-color:									#15428B !default;
+
+//Calendar form styles
+$extensible-form-toolbar-border-color:							#99BBE8 !default;
+$extensible-form-toolbar-background-color:						#DFE8F6 !default;
+$extensible-form-panel-border-top-color:						$extensible-form-toolbar-border-color !default;
+$extensible-form-panel-border-bottom-color:						#BBCCFF !default;
+
+//CalendarList styles
+$extensible-cal-list-background-color:							#fff !default;
+$extensible-cal-list-border-color:								#99BBE8 !default;
+$extensible-cal-list-header-color:								#555 !default;
+
+//CalendarList menu styles
+$extensible-cal-list-menu-link-color:							#f0f0f0 !default;
+$extensible-cal-list-menu-selected-color:						#8BB8F3 !default;
diff --git a/resources/themes/stylesheets/ext4/default/variables/_core.scss b/resources/themes/stylesheets/ext4/default/variables/_core.scss
new file mode 100644
index 00000000..9dbba958
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/variables/_core.scss
@@ -0,0 +1,120 @@
+/**
+ * @class Global_CSS
+ *
+ * Global CSS variables and mixins of Sencha Touch.
+ */
+
+/**
+ * @var {string} $prefix
+ * The prefix to be applied to all CSS selectors. If this is changed, it must also be changed in your
+ * JavaScript application.
+ */
+$prefix: 'x-' !default;
+
+/**
+ * @var {string} $theme-name
+ * The name of the theme. This must match the the output directory of the images.
+ * (defaults to 'default')
+ */
+$theme-name: 'default' !default;
+
+/**
+ * @var {boolean/string} $relative-image-path-for-uis
+ * True to use a relative image path for all new UIs. If true, the path will be "../images/".
+ * It can also be a string of the path value.
+ * It defaults to false, which means it will look for the images in the ExtJS SDK folder.
+ */
+$relative-image-path-for-uis: false !default;
+
+$color: #000 !default;
+
+/**
+ * @var {string} $font-family
+ * The default font-family to be used throughout the theme.
+ */
+$font-family: tahoma,arial,verdana,sans-serif !default;
+
+$font-size  : 12px !default;
+
+/**
+ * @var {string} $base-gradient
+ * The base gradient to be used throughout the theme.
+ */
+$base-gradient: 'matte' !default;
+
+/**
+ * @var {color} $base-color
+ * The base color to be used throughout the theme.
+ */
+$base-color   : #C0D4ED !default;
+$neutral-color: #eeeeee !default;
+
+/**
+ * @var {boolean} $include-not-found-images
+ * True to include files which are not found when compiling your SASS
+ */
+$include-missing-images: true !default;
+
+/**
+ * @var {boolean} $include-ie
+ * True to include Internet Explorer specific rules
+ */
+$include-ie: true !default;
+
+/**
+ * @var {boolean} $include-ff
+ * True to include Firefox specific rules
+ */
+$include-ff: true !default;
+
+/**
+ * @var {boolean} $include-chrome
+ * True to include Chrome specific rules
+ */
+$include-chrome: true !default;
+
+/**
+ * @var {boolean} $include-safari
+ * True to include Safari specific rules
+ */
+$include-safari: true !default;
+
+/**
+ * @var {boolean} $include-opera
+ * True to include Opera specific rules
+ */
+$include-opera: true !default;
+
+/**
+ * @var {boolean} $include-webkit
+ * True to include Webkit specific rules
+ */
+$include-webkit: true !default;
+
+$supports-border-radius: true !default;
+$supports-gradients: true !default;
+
+/**
+ * @var {boolean} $compile-all
+ * True to copile all CSS, even if above include rules are false
+ */
+$compile-all: true !default;
+
+/**
+ * @var {boolean} $scope-reset-css
+ * True to scope the reset CSS within the $prefix variable.
+ */
+$scope-reset-css: false !default;
+
+/**
+ * @var {color} $css-shadow-background-color
+ * The base color for CSS shadows
+ */
+$css-shadow-background-color: #ccc !default;
+
+
+/**
+ * @var {color} $include-shadow-images
+ * True to include all shadow images.
+ */
+$include-shadow-images: true !default;
diff --git a/resources/themes/stylesheets/ext4/default/variables/_recurrence.scss b/resources/themes/stylesheets/ext4/default/variables/_recurrence.scss
new file mode 100644
index 00000000..1f4a0b0a
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/variables/_recurrence.scss
@@ -0,0 +1,2 @@
+$extensible-recur-form-border-color:			#ddd !default;
+$extensible-recur-form-framed-border-color:		#A7C5DF !default;
\ No newline at end of file
diff --git a/resources/themes/stylesheets/ext4/default/widgets/_calendar-colors.scss b/resources/themes/stylesheets/ext4/default/widgets/_calendar-colors.scss
new file mode 100644
index 00000000..1c980813
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_calendar-colors.scss
@@ -0,0 +1,732 @@
+/*******************************************
+ * 
+ * Calendar event colors
+ * 
+ ******************************************/
+/*
+ * This is the text color for all-day and span events.
+ * Changing this will affect all events across all calendars.
+ */
+.ext-cal-evr,
+.ext-cal-evi,
+.ext-cal-evt dl {
+    color: $extensible-event-allday-color;
+}
+
+/*========================================================
+ * The following block defines the default event styles 
+ * used when no calendar info is available. It includes all
+ * of the rules necessary to style a specific calendar.
+ */
+/* The text color for non-all-day events that have no background color */
+.x-cal-default,
+.x-cal-default-x .ext-cal-evb,
+.ext-ie .x-cal-default-ad,
+.ext-opera .x-cal-default-ad {
+    color: $extensible-calendar-color-no-info;
+}
+/* 
+ * The background color for all-day and span events.  Sorry for all the rules,
+ * they are mostly to accommodate browsers that do not handle border-radius.
+ */
+.ext-cal-day-col .x-cal-default,
+.ext-dd-drag-proxy .x-cal-default,
+.x-cal-default-ad,
+.x-cal-default-ad .ext-cal-evm,
+.x-cal-default .ext-cal-picker-icon,
+.x-cal-default-x dl,
+.x-calendar-palette em .x-cal-default {
+    background-color: $extensible-calendar-color-no-info;
+}
+/*
+ * Yet more rules for IE/Opera
+ */
+.x-cal-default-ad,
+.x-cal-default-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-no-info;
+}
+/*  END of default event styles
+ * ========================================================
+ */
+
+/*
+ * The block above defines the 3 rules required to style one calendar.
+ * The following blocks are the exact same rules, but with different 
+ * color definitions for each unique calendar.  Each specific calendar
+ * has the default class name prefix "x-cal-" plus the calendar's unique class
+ * id. To customize these colors you can simply alter the colors of existing
+ * calendars, or you can create new style definitions as below, just making
+ * sure that the class name you choose matches the StyleClass defined in your 
+ * calendar store.
+ */
+/* ===== x-cal-1 ===== */
+.x-cal-1,
+.x-cal-1-x .ext-cal-evb,
+.ext-ie .x-cal-1-ad,
+.ext-opera .x-cal-1-ad {
+    color: $extensible-calendar-color-1;
+}
+.ext-cal-day-col .x-cal-1,
+.ext-dd-drag-proxy .x-cal-1,
+.x-cal-1-ad,
+.x-cal-1-ad .ext-cal-evm,
+.x-cal-1 .ext-cal-picker-icon,
+.x-cal-1-x dl,
+.x-calendar-palette .x-cal-1 span {
+    background-color: $extensible-calendar-color-1;
+}
+.x-cal-1-ad,
+.x-cal-1-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-1;
+}
+
+/* ===== x-cal-2 ===== */
+.x-cal-2,
+.x-cal-2-x .ext-cal-evb,
+.ext-ie .x-cal-2-ad,
+.ext-opera .x-cal-2-ad {
+    color: $extensible-calendar-color-2;
+}
+.ext-cal-day-col .x-cal-2,
+.ext-dd-drag-proxy .x-cal-2,
+.x-cal-2-ad,
+.x-cal-2-ad .ext-cal-evm,
+.x-cal-2 .ext-cal-picker-icon,
+.x-cal-2-x dl,
+.x-calendar-palette .x-cal-2 span {
+    background-color: $extensible-calendar-color-2;
+}
+.x-cal-2-ad,
+.x-cal-2-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-2;
+}
+
+/* ===== x-cal-3 ===== */
+.x-cal-3,
+.x-cal-3-x .ext-cal-evb,
+.ext-ie .x-cal-3-ad,
+.ext-opera .x-cal-3-ad {
+    color: $extensible-calendar-color-3;
+}
+.ext-cal-day-col .x-cal-3,
+.ext-dd-drag-proxy .x-cal-3,
+.x-cal-3-ad,
+.x-cal-3-ad .ext-cal-evm,
+.x-cal-3 .ext-cal-picker-icon,
+.x-cal-3-x dl,
+.x-calendar-palette .x-cal-3 span {
+    background-color: $extensible-calendar-color-3;
+}
+.x-cal-3-ad,
+.x-cal-3-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-3;
+}
+
+/* ===== x-cal-4 ===== */
+.x-cal-4,
+.x-cal-4-x .ext-cal-evb,
+.ext-ie .x-cal-4-ad,
+.ext-opera .x-cal-4-ad {
+    color: $extensible-calendar-color-4;
+}
+.ext-cal-day-col .x-cal-4,
+.ext-dd-drag-proxy .x-cal-4,
+.x-cal-4-ad,
+.x-cal-4-ad .ext-cal-evm,
+.x-cal-4 .ext-cal-picker-icon,
+.x-cal-4-x dl,
+.x-calendar-palette .x-cal-4 span {
+    background-color: $extensible-calendar-color-4;
+}
+.x-cal-4-ad,
+.x-cal-4-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-4;
+}
+
+/* ===== x-cal-5 ===== */
+.x-cal-5,
+.x-cal-5-x .ext-cal-evb,
+.ext-ie .x-cal-5-ad,
+.ext-opera .x-cal-5-ad {
+    color: $extensible-calendar-color-5;
+}
+.ext-cal-day-col .x-cal-5,
+.ext-dd-drag-proxy .x-cal-5,
+.x-cal-5-ad,
+.x-cal-5-ad .ext-cal-evm,
+.x-cal-5 .ext-cal-picker-icon,
+.x-cal-5-x dl,
+.x-calendar-palette .x-cal-5 span {
+    background-color: $extensible-calendar-color-5;
+}
+.x-cal-5-ad,
+.x-cal-5-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-5;
+}
+
+/* ===== x-cal-6 ===== */
+.x-cal-6,
+.x-cal-6-x .ext-cal-evb,
+.ext-ie .x-cal-6-ad,
+.ext-opera .x-cal-6-ad {
+    color: $extensible-calendar-color-6;
+}
+.ext-cal-day-col .x-cal-6,
+.ext-dd-drag-proxy .x-cal-6,
+.x-cal-6-ad,
+.x-cal-6-ad .ext-cal-evm,
+.x-cal-6 .ext-cal-picker-icon,
+.x-cal-6-x dl,
+.x-calendar-palette .x-cal-6 span {
+    background-color: $extensible-calendar-color-6;
+}
+.x-cal-6-ad,
+.x-cal-6-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-6;
+}
+
+/* ===== x-cal-7 ===== */
+.x-cal-7,
+.x-cal-7-x .ext-cal-evb,
+.ext-ie .x-cal-7-ad,
+.ext-opera .x-cal-7-ad {
+    color: $extensible-calendar-color-7;
+}
+.ext-cal-day-col .x-cal-7,
+.ext-dd-drag-proxy .x-cal-7,
+.x-cal-7-ad,
+.x-cal-7-ad .ext-cal-evm,
+.x-cal-7 .ext-cal-picker-icon,
+.x-cal-7-x dl,
+.x-calendar-palette .x-cal-7 span {
+    background-color: $extensible-calendar-color-7;
+}
+.x-cal-7-ad,
+.x-cal-7-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-7;
+}
+
+/* ===== x-cal-8 ===== */
+.x-cal-8,
+.x-cal-8-x .ext-cal-evb,
+.ext-ie .x-cal-8-ad,
+.ext-opera .x-cal-8-ad {
+    color: $extensible-calendar-color-8;
+}
+.ext-cal-day-col .x-cal-8,
+.ext-dd-drag-proxy .x-cal-8,
+.x-cal-8-ad,
+.x-cal-8-ad .ext-cal-evm,
+.x-cal-8 .ext-cal-picker-icon,
+.x-cal-8-x dl,
+.x-calendar-palette .x-cal-8 span {
+    background-color: $extensible-calendar-color-8;
+}
+.x-cal-8-ad,
+.x-cal-8-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-8;
+}
+
+/* ===== x-cal-9 ===== */
+.x-cal-9,
+.x-cal-9-x .ext-cal-evb,
+.ext-ie .x-cal-9-ad,
+.ext-opera .x-cal-9-ad {
+    color: $extensible-calendar-color-9;
+}
+.ext-cal-day-col .x-cal-9,
+.ext-dd-drag-proxy .x-cal-9,
+.x-cal-9-ad,
+.x-cal-9-ad .ext-cal-evm,
+.x-cal-9 .ext-cal-picker-icon,
+.x-cal-9-x dl,
+.x-calendar-palette .x-cal-9 span {
+    background-color: $extensible-calendar-color-9;
+}
+.x-cal-9-ad,
+.x-cal-9-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-9;
+}
+
+/* ===== x-cal-10 ===== */
+.x-cal-10,
+.x-cal-10-x .ext-cal-evb,
+.ext-ie .x-cal-10-ad,
+.ext-opera .x-cal-10-ad {
+    color: $extensible-calendar-color-10;
+}
+.ext-cal-day-col .x-cal-10,
+.ext-dd-drag-proxy .x-cal-10,
+.x-cal-10-ad,
+.x-cal-10-ad .ext-cal-evm,
+.x-cal-10 .ext-cal-picker-icon,
+.x-cal-10-x dl,
+.x-calendar-palette .x-cal-10 span {
+    background-color: $extensible-calendar-color-10;
+}
+.x-cal-10-ad,
+.x-cal-10-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-10;
+}
+
+/* ===== x-cal-11 ===== */
+.x-cal-11,
+.x-cal-11-x .ext-cal-evb,
+.ext-ie .x-cal-11-ad,
+.ext-opera .x-cal-11-ad {
+    color: $extensible-calendar-color-11;
+}
+.ext-cal-day-col .x-cal-11,
+.ext-dd-drag-proxy .x-cal-11,
+.x-cal-11-ad,
+.x-cal-11-ad .ext-cal-evm,
+.x-cal-11 .ext-cal-picker-icon,
+.x-cal-11-x dl,
+.x-calendar-palette .x-cal-11 span {
+    background-color: $extensible-calendar-color-11;
+}
+.x-cal-11-ad,
+.x-cal-11-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-11;
+}
+
+/* ===== x-cal-12 ===== */
+.x-cal-12,
+.x-cal-12-x .ext-cal-evb,
+.ext-ie .x-cal-12-ad,
+.ext-opera .x-cal-12-ad {
+    color: $extensible-calendar-color-12;
+}
+.ext-cal-day-col .x-cal-12,
+.ext-dd-drag-proxy .x-cal-12,
+.x-cal-12-ad,
+.x-cal-12-ad .ext-cal-evm,
+.x-cal-12 .ext-cal-picker-icon,
+.x-cal-12-x dl,
+.x-calendar-palette .x-cal-12 span {
+    background-color: $extensible-calendar-color-12;
+}
+.x-cal-12-ad,
+.x-cal-12-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-12;
+}
+
+/* ===== x-cal-13 ===== */
+.x-cal-13,
+.x-cal-13-x .ext-cal-evb,
+.ext-ie .x-cal-13-ad,
+.ext-opera .x-cal-13-ad {
+    color: $extensible-calendar-color-13;
+}
+.ext-cal-day-col .x-cal-13,
+.ext-dd-drag-proxy .x-cal-13,
+.x-cal-13-ad,
+.x-cal-13-ad .ext-cal-evm,
+.x-cal-13 .ext-cal-picker-icon,
+.x-cal-13-x dl,
+.x-calendar-palette .x-cal-13 span {
+    background-color: $extensible-calendar-color-13;
+}
+.x-cal-13-ad,
+.x-cal-13-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-13;
+}
+
+/* ===== x-cal-14 ===== */
+.x-cal-14,
+.x-cal-14-x .ext-cal-evb,
+.ext-ie .x-cal-14-ad,
+.ext-opera .x-cal-14-ad {
+    color: $extensible-calendar-color-14;
+}
+.ext-cal-day-col .x-cal-14,
+.ext-dd-drag-proxy .x-cal-14,
+.x-cal-14-ad,
+.x-cal-14-ad .ext-cal-evm,
+.x-cal-14 .ext-cal-picker-icon,
+.x-cal-14-x dl,
+.x-calendar-palette .x-cal-14 span {
+    background-color: $extensible-calendar-color-14;
+}
+.x-cal-14-ad,
+.x-cal-14-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-14;
+}
+
+/* ===== x-cal-15 ===== */
+.x-cal-15,
+.x-cal-15-x .ext-cal-evb,
+.ext-ie .x-cal-15-ad,
+.ext-opera .x-cal-15-ad {
+    color: $extensible-calendar-color-15;
+}
+.ext-cal-day-col .x-cal-15,
+.ext-dd-drag-proxy .x-cal-15,
+.x-cal-15-ad,
+.x-cal-15-ad .ext-cal-evm,
+.x-cal-15 .ext-cal-picker-icon,
+.x-cal-15-x dl,
+.x-calendar-palette .x-cal-15 span {
+    background-color: $extensible-calendar-color-15;
+}
+.x-cal-15-ad,
+.x-cal-15-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-15;
+}
+
+/* ===== x-cal-16 ===== */
+.x-cal-16,
+.x-cal-16-x .ext-cal-evb,
+.ext-ie .x-cal-16-ad,
+.ext-opera .x-cal-16-ad {
+    color: $extensible-calendar-color-16;
+}
+.ext-cal-day-col .x-cal-16,
+.ext-dd-drag-proxy .x-cal-16,
+.x-cal-16-ad,
+.x-cal-16-ad .ext-cal-evm,
+.x-cal-16 .ext-cal-picker-icon,
+.x-cal-16-x dl,
+.x-calendar-palette .x-cal-16 span {
+    background-color: $extensible-calendar-color-16;
+}
+.x-cal-16-ad,
+.x-cal-16-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-16;
+}
+
+/* ===== x-cal-17 ===== */
+.x-cal-17,
+.x-cal-17-x .ext-cal-evb,
+.ext-ie .x-cal-17-ad,
+.ext-opera .x-cal-17-ad {
+    color: $extensible-calendar-color-17;
+}
+.ext-cal-day-col .x-cal-17,
+.ext-dd-drag-proxy .x-cal-17,
+.x-cal-17-ad,
+.x-cal-17-ad .ext-cal-evm,
+.x-cal-17 .ext-cal-picker-icon,
+.x-cal-17-x dl,
+.x-calendar-palette .x-cal-17 span {
+    background-color: $extensible-calendar-color-17;
+}
+.x-cal-17-ad,
+.x-cal-17-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-17;
+}
+
+/* ===== x-cal-18 ===== */
+.x-cal-18,
+.x-cal-18-x .ext-cal-evb,
+.ext-ie .x-cal-18-ad,
+.ext-opera .x-cal-18-ad {
+    color: $extensible-calendar-color-18;
+}
+.ext-cal-day-col .x-cal-18,
+.ext-dd-drag-proxy .x-cal-18,
+.x-cal-18-ad,
+.x-cal-18-ad .ext-cal-evm,
+.x-cal-18 .ext-cal-picker-icon,
+.x-cal-18-x dl,
+.x-calendar-palette .x-cal-18 span {
+    background-color: $extensible-calendar-color-18;
+}
+.x-cal-18-ad,
+.x-cal-18-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-18;
+}
+
+/* ===== x-cal-19 ===== */
+.x-cal-19,
+.x-cal-19-x .ext-cal-evb,
+.ext-ie .x-cal-19-ad,
+.ext-opera .x-cal-19-ad {
+    color: $extensible-calendar-color-19;
+}
+.ext-cal-day-col .x-cal-19,
+.ext-dd-drag-proxy .x-cal-19,
+.x-cal-19-ad,
+.x-cal-19-ad .ext-cal-evm,
+.x-cal-19 .ext-cal-picker-icon,
+.x-cal-19-x dl,
+.x-calendar-palette .x-cal-19 span {
+    background-color: $extensible-calendar-color-19;
+}
+.x-cal-19-ad,
+.x-cal-19-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-19;
+}
+
+/* ===== x-cal-20 ===== */
+.x-cal-20,
+.x-cal-20-x .ext-cal-evb,
+.ext-ie .x-cal-20-ad,
+.ext-opera .x-cal-20-ad {
+    color: $extensible-calendar-color-20;
+}
+.ext-cal-day-col .x-cal-20,
+.ext-dd-drag-proxy .x-cal-20,
+.x-cal-20-ad,
+.x-cal-20-ad .ext-cal-evm,
+.x-cal-20 .ext-cal-picker-icon,
+.x-cal-20-x dl,
+.x-calendar-palette .x-cal-20 span {
+    background-color: $extensible-calendar-color-20;
+}
+.x-cal-20-ad,
+.x-cal-20-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-20;
+}
+
+/* ===== x-cal-21 ===== */
+.x-cal-21,
+.x-cal-21-x .ext-cal-evb,
+.ext-ie .x-cal-21-ad,
+.ext-opera .x-cal-21-ad {
+    color: $extensible-calendar-color-21;
+}
+.ext-cal-day-col .x-cal-21,
+.ext-dd-drag-proxy .x-cal-21,
+.x-cal-21-ad,
+.x-cal-21-ad .ext-cal-evm,
+.x-cal-21 .ext-cal-picker-icon,
+.x-cal-21-x dl,
+.x-calendar-palette .x-cal-21 span {
+    background-color: $extensible-calendar-color-21;
+}
+.x-cal-21-ad,
+.x-cal-21-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-21;
+}
+
+/* ===== x-cal-22 ===== */
+.x-cal-22,
+.x-cal-22-x .ext-cal-evb,
+.ext-ie .x-cal-22-ad,
+.ext-opera .x-cal-22-ad {
+    color: $extensible-calendar-color-22;
+}
+.ext-cal-day-col .x-cal-22,
+.ext-dd-drag-proxy .x-cal-22,
+.x-cal-22-ad,
+.x-cal-22-ad .ext-cal-evm,
+.x-cal-22 .ext-cal-picker-icon,
+.x-cal-22-x dl,
+.x-calendar-palette .x-cal-22 span {
+    background-color: $extensible-calendar-color-22;
+}
+.x-cal-22-ad,
+.x-cal-22-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-22;
+}
+
+/* ===== x-cal-23 ===== */
+.x-cal-23,
+.x-cal-23-x .ext-cal-evb,
+.ext-ie .x-cal-23-ad,
+.ext-opera .x-cal-23-ad {
+    color: $extensible-calendar-color-23;
+}
+.ext-cal-day-col .x-cal-23,
+.ext-dd-drag-proxy .x-cal-23,
+.x-cal-23-ad,
+.x-cal-23-ad .ext-cal-evm,
+.x-cal-23 .ext-cal-picker-icon,
+.x-cal-23-x dl,
+.x-calendar-palette .x-cal-23 span {
+    background-color: $extensible-calendar-color-23;
+}
+.x-cal-23-ad,
+.x-cal-23-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-23;
+}
+
+/* ===== x-cal-24 ===== */
+.x-cal-24,
+.x-cal-24-x .ext-cal-evb,
+.ext-ie .x-cal-24-ad,
+.ext-opera .x-cal-24-ad {
+    color: $extensible-calendar-color-24;
+}
+.ext-cal-day-col .x-cal-24,
+.ext-dd-drag-proxy .x-cal-24,
+.x-cal-24-ad,
+.x-cal-24-ad .ext-cal-evm,
+.x-cal-24 .ext-cal-picker-icon,
+.x-cal-24-x dl,
+.x-calendar-palette .x-cal-24 span {
+    background-color: $extensible-calendar-color-24;
+}
+.x-cal-24-ad,
+.x-cal-24-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-24;
+}
+
+/* ===== x-cal-25 ===== */
+.x-cal-25,
+.x-cal-25-x .ext-cal-evb,
+.ext-ie .x-cal-25-ad,
+.ext-opera .x-cal-25-ad {
+    color: $extensible-calendar-color-25;
+}
+.ext-cal-day-col .x-cal-25,
+.ext-dd-drag-proxy .x-cal-25,
+.x-cal-25-ad,
+.x-cal-25-ad .ext-cal-evm,
+.x-cal-25 .ext-cal-picker-icon,
+.x-cal-25-x dl,
+.x-calendar-palette .x-cal-25 span {
+    background-color: $extensible-calendar-color-25;
+}
+.x-cal-25-ad,
+.x-cal-25-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-25;
+}
+
+/* ===== x-cal-26 ===== */
+.x-cal-26,
+.x-cal-26-x .ext-cal-evb,
+.ext-ie .x-cal-26-ad,
+.ext-opera .x-cal-26-ad {
+    color: $extensible-calendar-color-26;
+}
+.ext-cal-day-col .x-cal-26,
+.ext-dd-drag-proxy .x-cal-26,
+.x-cal-26-ad,
+.x-cal-26-ad .ext-cal-evm,
+.x-cal-26 .ext-cal-picker-icon,
+.x-cal-26-x dl,
+.x-calendar-palette .x-cal-26 span {
+    background-color: $extensible-calendar-color-26;
+}
+.x-cal-26-ad,
+.x-cal-26-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-26;
+}
+
+/* ===== x-cal-27 ===== */
+.x-cal-27,
+.x-cal-27-x .ext-cal-evb,
+.ext-ie .x-cal-27-ad,
+.ext-opera .x-cal-27-ad {
+    color: $extensible-calendar-color-27;
+}
+.ext-cal-day-col .x-cal-27,
+.ext-dd-drag-proxy .x-cal-27,
+.x-cal-27-ad,
+.x-cal-27-ad .ext-cal-evm,
+.x-cal-27 .ext-cal-picker-icon,
+.x-cal-27-x dl,
+.x-calendar-palette .x-cal-27 span {
+    background-color: $extensible-calendar-color-27;
+}
+.x-cal-27-ad,
+.x-cal-27-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-27;
+}
+
+/* ===== x-cal-28 ===== */
+.x-cal-28,
+.x-cal-28-x .ext-cal-evb,
+.ext-ie .x-cal-28-ad,
+.ext-opera .x-cal-28-ad {
+    color: $extensible-calendar-color-28;
+}
+.ext-cal-day-col .x-cal-28,
+.ext-dd-drag-proxy .x-cal-28,
+.x-cal-28-ad,
+.x-cal-28-ad .ext-cal-evm,
+.x-cal-28 .ext-cal-picker-icon,
+.x-cal-28-x dl,
+.x-calendar-palette .x-cal-28 span {
+    background-color: $extensible-calendar-color-28;
+}
+.x-cal-28-ad,
+.x-cal-28-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-28;
+}
+
+/* ===== x-cal-29 ===== */
+.x-cal-29,
+.x-cal-29-x .ext-cal-evb,
+.ext-ie .x-cal-29-ad,
+.ext-opera .x-cal-29-ad {
+    color: $extensible-calendar-color-29;
+}
+.ext-cal-day-col .x-cal-29,
+.ext-dd-drag-proxy .x-cal-29,
+.x-cal-29-ad,
+.x-cal-29-ad .ext-cal-evm,
+.x-cal-29 .ext-cal-picker-icon,
+.x-cal-29-x dl,
+.x-calendar-palette .x-cal-29 span {
+    background-color: $extensible-calendar-color-29;
+}
+.x-cal-29-ad,
+.x-cal-29-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-29;
+}
+
+/* ===== x-cal-30 ===== */
+.x-cal-30,
+.x-cal-30-x .ext-cal-evb,
+.ext-ie .x-cal-30-ad,
+.ext-opera .x-cal-30-ad {
+    color: $extensible-calendar-color-30;
+}
+.ext-cal-day-col .x-cal-30,
+.ext-dd-drag-proxy .x-cal-30,
+.x-cal-30-ad,
+.x-cal-30-ad .ext-cal-evm,
+.x-cal-30 .ext-cal-picker-icon,
+.x-cal-30-x dl,
+.x-calendar-palette .x-cal-30 span {
+    background-color: $extensible-calendar-color-30;
+}
+.x-cal-30-ad,
+.x-cal-30-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-30;
+}
+
+/* ===== x-cal-31 ===== */
+.x-cal-31,
+.x-cal-31-x .ext-cal-evb,
+.ext-ie .x-cal-31-ad,
+.ext-opera .x-cal-31-ad {
+    color: $extensible-calendar-color-31;
+}
+.ext-cal-day-col .x-cal-31,
+.ext-dd-drag-proxy .x-cal-31,
+.x-cal-31-ad,
+.x-cal-31-ad .ext-cal-evm,
+.x-cal-31 .ext-cal-picker-icon,
+.x-cal-31-x dl,
+.x-calendar-palette .x-cal-31 span {
+    background-color: $extensible-calendar-color-31;
+}
+.x-cal-31-ad,
+.x-cal-31-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-31;
+}
+
+/* ===== x-cal-32 ===== */
+.x-cal-32,
+.x-cal-32-x .ext-cal-evb,
+.ext-ie .x-cal-32-ad,
+.ext-opera .x-cal-32-ad {
+    color: $extensible-calendar-color-32;
+}
+.ext-cal-day-col .x-cal-32,
+.ext-dd-drag-proxy .x-cal-32,
+.x-cal-32-ad,
+.x-cal-32-ad .ext-cal-evm,
+.x-cal-32 .ext-cal-picker-icon,
+.x-cal-32-x dl,
+.x-calendar-palette .x-cal-32 span {
+    background-color: $extensible-calendar-color-32;
+}
+.x-cal-32-ad,
+.x-cal-32-ad .ext-cal-evm {
+    border-color: $extensible-calendar-color-32;
+}
\ No newline at end of file
diff --git a/resources/themes/stylesheets/ext4/default/widgets/_calendar.scss b/resources/themes/stylesheets/ext4/default/widgets/_calendar.scss
new file mode 100644
index 00000000..9a2a8f4f
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_calendar.scss
@@ -0,0 +1,986 @@
+
+/*******************************************
+ * 
+ * Ext Calendar styles
+ *
+ ******************************************/
+
+/* -----------------------------------------
+ * Ext overrides 
+ */
+.x-strict .x-webkit .x-small-editor .x-form-field-wrap .x-form-trigger {
+    height: 21px;
+}
+
+/* -----------------------------------------
+ * Shared calendar view containers 
+ */
+.x-panel-tbar .ext-cal-toolbar {
+    padding: 3px;
+    border-bottom-width: 0 !important;
+}
+.x-panel-tbar .ext-cal-toolbar .x-btn button {
+    /*font-weight: bold;*/
+    color: $extensible-toolbar-button-color;
+}
+.x-panel-tbar .ext-cal-toolbar .x-toolbar-cell {
+    padding: 0 3px;
+}
+
+.ext-cal-overflow-y {
+    overflow-y: scroll !important;
+}
+.ext-cal-ct {
+    position: relative;
+    font-family: helvetica, arial, sans-serif;
+}
+.x-cal-panel .x-panel-body {
+    background: white !important;
+}
+.x-panel-default-framed .x-panel-body .ext-cal-ct,
+.x-panel-default-framed .x-panel-body .ext-evt-edit-form {
+    border-left: 1px solid $extensible-panel-border-color;
+    border-right: 1px solid $extensible-panel-border-color;
+}
+.x-panel-default-framed .x-panel-body .ext-cal-day-header {
+    border: 0;
+}
+.ext-cal-ct img {
+    border:0 none;
+}
+.ext-cal-inner-ct {
+    height: 100%;
+    line-height: 14px;
+    position: relative;
+    background: $extensible-panel-inner-background-color;
+    white-space: nowrap;
+}
+.ext-cal-ct td,
+.ext-cal-mdv td {
+    font-size: 11px;
+}
+.x-cal-body {
+    /* override the default -noheader style ext uses when there is no panel header */
+    border-top: 0 !important;
+}
+
+/* Window specific rules */
+.x-window .x-window-body .x-cal-body {
+    border: 0 !important;
+}
+.x-window .ext-cal-toolbar {
+    border: 0 !important;
+}
+
+/* Background layout table for week rows */
+.ext-cal-bg-tbl {
+    height:100%;
+    left:0;
+    position:absolute;
+    table-layout:fixed;
+    top:0;
+    width:100%;
+}
+.x-ie9 .ext-cal-dayview .ext-cal-body-ct .ext-cal-bg-tbl {
+    /* fix scroll position reset bug on IE9 on click */
+    position: relative;
+}
+
+/* Shared subheader */
+.ext-cal-hd-days-tbl {
+    background: $extensible-cal-hd-background-color;
+    color: $extensible-cal-hd-color;
+    table-layout: fixed;
+    top: 18px;
+    width: 100%;
+    font-size: 12px;
+    line-height: 12px;
+}
+.ext-cal-month-hd .ext-cal-hd-days-tbl {
+    border-top: 1px solid $extensible-panel-border-color;
+    background: $extensible-panel-inner-background-color;
+}
+.x-calendar-nonav .ext-cal-month-hd .ext-cal-hd-days-tbl {
+    border-top: 0;
+}
+.ext-cal-month-hd .ext-cal-hd-day {
+    border-left: 1px solid $extensible-cal-hd-border-color;
+}
+.ext-cal-hd-ct {
+    border-bottom: 1px solid $extensible-cal-hd-border-separator-color;
+}
+.ext-cal-hd-day {
+    text-align: center;
+    padding: 4px 0;
+    white-space: nowrap;
+}
+
+/* -----------------------------------------
+ * Day/week-specific styles
+ */
+.ext-cal-dayview .ext-cal-hd-days-tbl {
+    table-layout: fixed;
+    width: 100%;
+    background-color: $extensible-cal-hd-days-background-color;
+    overflow: hidden;
+    font-size: 11px;
+    line-height: 14px;
+    height: 100%;
+}
+.ext-cal-hd-days-td {
+    padding-bottom: 2px;
+}
+.ext-cal-dayview .ext-cal-hd-ct {
+    height: 100%;
+}
+.ext-cal-dayview .ext-cal-gutter {
+    width: 50px;
+}
+.ext-cal-dayview .ext-cal-gutter-rt {
+    width: 15px;
+}
+.x-win .ext-cal-dayview .ext-cal-gutter-rt {
+    width: 16px;
+}
+/* OSX Lion scrollbars do not take up space in the body so they need special rules */
+.x-no-scrollbar .ext-cal-hd-days-td {
+    width: 100%;
+}
+.x-no-scrollbar .ext-cal-dayview .ext-cal-gutter-rt,
+.x-no-scrollbar .x-win .ext-cal-dayview .ext-cal-gutter-rt {
+    width: 0;
+}
+
+.ext-cal-hd-ad {
+    background-color: $extensible-cal-hd-ad-background-color;
+    font-size: 11px;
+    line-height: 14px;
+    border-color: $extensible-cal-hd-ad-border-color;
+    border-style: solid;
+    border-width: 0 1px 1px 0;
+}
+.ext-cal-hd-ad-inner {
+    position: relative;
+    height: 100%;
+}
+.x-calendar-nonav .ext-cal-hd-ad-inner {
+    margin-top: 3px;
+}
+.ext-cal-dayview .ext-cal-dtitle {
+    padding: 8px 1px 2px;
+} 
+.ext-cal-hd-ad-bg-tbl {
+    position: absolute;
+    left: 0;
+    table-layout: fixed;
+    width: 100%;
+}
+.ext-cal-hd-ad .st-c {
+    padding: 1px 1px 0 1px
+}
+.ext-cal-dayview .ext-cal-body-ct {
+    position: relative;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding: 0;
+    line-height: normal;
+    background: $extensible-panel-inner-background-color;
+    margin-top: 1px;
+}
+.ext-cal-dayview .ext-cal-body-ct .ext-cal-bg-tbl {
+    height: 1008px;
+}
+.ext-cal-dayview .ext-cal-bg-tbl {
+    background-color: $extensible-cal-hd-ad-background-color;
+    margin-top: -1px;
+    border-bottom: 1px solid $extensible-cal-hd-border-separator-color;
+}
+.ext-cal-dayview .ext-cal-bg-rows {
+    position: relative;
+    margin-left: 1px;
+}
+.ext-cal-dayview .ext-cal-bg-rows-inner {
+    position: absolute;
+    width: 100%;
+}
+.x-gecko .ext-cal-dayview .ext-cal-bg-rows-inner {
+    top: -1px; /* row line alignment fix */
+}
+.ext-cal-dayview .ext-cal-bg-row {
+    height: 42px;
+}
+.ext-cal-dayview .ext-cal-bg-row-div {
+    border-bottom: 1px dotted $extensible-cal-days-row-border-color;
+    border-top: 1px solid $extensible-cal-days-row-border-color;
+    font-size: 1px;
+    height: 21px;
+    margin-bottom: 20px;
+}
+.ext-cal-dayview .ext-cal-bg-row .no-sep {
+    border-bottom: 0;
+}
+.ext-cal-dayview .ext-row-1 {
+    border-top: 0;
+}
+.ext-cal-day-times {
+    background-color: $extensible-cal-days-times-background-color;
+    color: $extensible-cal-days-times-color;
+    padding: 1px 0 0 0;
+    text-align: right;
+    vertical-align: top;
+}
+.ext-cal-day-time-inner {
+    height: 42px;
+    border-bottom: 1px solid $extensible-cal-days-times-border-color;
+    padding-right: 2px
+}
+.ext-cal-day-col {
+    border-left: 1px solid $extensible-cal-days-row-border-color;
+    vertical-align: top
+}
+.ext-cal-day-col-inner {
+    position: relative;
+    cursor: default;
+}
+.ext-cal-day-col-gutter {
+    position: relative;
+    margin-right: 15px;
+    height: 1008px;
+}
+.x-ie .ext-cal-day-col-gutter,
+.x-opera .ext-cal-day-col-gutter {
+    margin-right: 10px;
+}
+.x-ie6 .ext-cal-day-col-gutter {
+    zoom: 1
+}
+
+/* -----------------------------------------
+ * Month-specific styles
+ */
+.ext-cal-monthview .ext-cal-hd-ct {
+    left: 0;
+    top: 0;
+    position: absolute;
+    width: 100%;
+    /*background: $extensible-cal-month-hd-background-color;*/
+}
+.ext-cal-monthview .ext-cal-body-ct {
+    background: $extensible-cal-month-background-color;
+    bottom: 0;
+    left: 0;
+    border:0;
+    overflow: hidden;
+    position: absolute;
+    top: 20px;
+    width: 100%;
+}
+.ext-cal-monthview .ext-cal-noheader .ext-cal-hd-ct {
+    display: none;
+}
+.ext-cal-monthview .ext-cal-noheader .ext-cal-body-ct {
+    top: 0;
+}
+
+/* Month view week link boxes */
+.ext-cal-monthview .ext-cal-week-link,
+.ext-cal-monthview .ext-cal-week-link-hd {
+    width: 20px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: $extensible-cal-month-week-link-background-color;
+    border-top: 1px solid $extensible-cal-month-week-link-border-color;
+    /*border-right: 1px solid $extensible-cal-month-week-link-border-color;*/
+    font-size: 10px;
+    color: $extensible-cal-month-week-link-color;
+    padding: 3px 0 0;
+    text-align: center;
+    cursor: pointer;
+}
+.ext-cal-monthview .ext-cal-week-link-hd {
+    border-top: 1px solid $extensible-cal-month-week-link-border-top-color;
+}
+.x-calendar-nonav .ext-cal-monthview .ext-cal-week-link-hd {
+    border-top: 0;
+}
+.ext-cal-week-links .ext-cal-bg-tbl {
+    left: 20px;
+}
+.ext-cal-week-links .ext-cal-evt-tbl,
+.ext-cal-week-links .ext-cal-hd-days-tbl {
+    margin-left: 20px;
+}
+.ext-cal-monthview .ext-week-link-over {
+    background: $extensible-cal-month-week-link-over-background-color;
+}
+.ext-cal-week-links .ext-cal-day-first {
+    border-left: 1px solid $extensible-cal-month-week-link-first-border-left-color;
+}
+
+/* Hide the nav bar if specified */
+.ext-cal-hide-navbar .ext-cal-hd-ct {
+    height: 25px;
+}
+.ext-cal-hide-navbar .ext-cal-body-ct {
+    top: 24px;
+}
+
+/* Outer wrapping div for week rows */
+.ext-cal-wk-ct {
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+    height: 100px;
+}
+.ext-cal-monthview .ext-cal-wk-ct {
+    height: 100%;
+}
+/* Background table cell */
+.ext-cal-day {
+    border-left: 1px solid $extensible-cal-month-day-border-color;
+    cursor: pointer;
+}
+.ext-cal-day-first {
+   border-left: 0;
+}
+
+.ext-cal-ev,
+.ext-cal-dtitle {
+    cursor: pointer;
+}
+.ext-cal-readonly .ext-cal-day,
+.ext-cal-readonly .ext-cal-dtitle {
+    cursor: default;
+} 
+.ext-day-over {
+    background: $extensible-cal-month-day-over-background-color !important;
+}
+/* Event container table */
+.ext-cal-evt-tbl {
+    position:relative;
+    table-layout:fixed;
+    width:100%;
+}
+
+/* Event title cell (includes today, prev & next month) */
+td.ext-cal-dtitle {
+    font-family: helvetica, arial, sans-serif;
+    border-top:1px solid $extensible-cal-month-title-border-color;
+    color: $extensible-cal-month-title-color;
+    line-height:14px;
+    overflow:hidden;
+    text-align:right;
+    font-size: 16px;
+    padding-top: 1px;
+    padding-right: 1px;
+    padding-left: 1px;
+}
+td.ext-cal-dtitle-first {
+    border-top: 1px solid $extensible-cal-month-title-first-border-color;
+}
+td.ext-cal-dtitle div {
+    padding: 2px 4px 1px;
+}
+/* Today's title cell */
+td.ext-cal-dtitle-today div {
+    color: $extensible-cal-month-today-color;
+    white-space: nowrap;
+}
+/* Today time span */
+.ext-cal-dtitle-time {
+    font-size: 11px;
+}
+/* Weekend background cell */
+.ext-cal-day-we {
+    background: $extensible-cal-month-weekend-background-color;
+}
+/* Today's background cell */
+.ext-cal-day-today {
+    background: $extensible-cal-month-today-background-color;
+}
+/* Prev/next month title cells */
+.ext-cal-dtitle-prev div,
+.ext-cal-dtitle-next div {
+    color: $extensible-cal-month-prevnext-background-color;
+}
+/* Prev/next month background cells */
+.ext-cal-day-prev,
+.ext-cal-day-next {
+    background: $extensible-cal-month-prevnext-background-color;
+}
+/* Event cells */
+.ext-cal-ev {
+    font-family:Verdana,sans-serif;
+    padding:1px 1px 0 2px;
+    vertical-align:top;
+}
+/* Event overflow more link */
+.ext-cal-ev-more {
+	text-align: center;
+}
+.ext-cal-ev-more a,
+.ext-cal-ev-more a:visited {
+	color: $extensible-cal-ev-more-color;
+	cursor: pointer;
+}
+/* More view */
+.ext-cal-mvd-tbl {
+	width: 100%;
+	table-layout: fixed;
+}
+
+.ext-cal-evt {
+    cursor:pointer;
+}
+
+/* Default rounded event div (Gecko/Webkit/W3C) */
+.ext-cal-evr { /* rounded */
+    -moz-border-radius:5px;
+    -webkit-border-radius:5px;
+    border-radius:5px;
+    overflow:hidden;
+    padding:1px 1px 1px 5px;
+    white-space:nowrap;
+	text-overflow: ellipsis;
+    border: 0;
+}
+/* Nested event divs (IE/Opera) */
+.ext-cal-evo { /* outer */
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    border-right: 0;
+    border-left: 0;
+    margin: 0 1px;
+    cursor: pointer;
+    position: relative;
+}
+.ext-cal-day-col .ext-cal-evo  {
+    height: 100%;
+}
+.ext-cal-evm { /* middle */
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-top: 0;
+    border-bottom: 0;
+    margin: 0 -1px;
+    zoom: 1;
+    padding-left: 3px;
+}
+.ext-cal-evi { /* inner */
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+/* Day view event styles */
+.ext-cal-day-col .ext-cal-evt {
+    position: absolute;
+    overflow: hidden;
+    cursor: default;
+    color: $extensible-cal-day-evt-color;
+    -moz-user-select: none;
+}
+.ext-cal-evt dl {
+    margin: 0;
+    border: 0 1px;
+    overflow: hidden;
+    border-width: 0 1px;
+    border-style: solid;
+}
+.x-ie6 .ext-cal-evt dl {
+    zoom: 1
+}
+.ext-cal-evt dd {
+    margin: 0;
+    overflow: hidden;
+    font-size: 11px;
+    text-align: left;
+    word-wrap: break-word;
+}
+.ext-cal-evdm {
+    border: 1px solid;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+.ext-cal-evdm dt {
+    margin-top: 0
+}
+.ext-cal-day-col .ext-cal-evt a:link,
+.ext-cal-day-col .ext-cal-evt a:visited,
+.ext-cal-day-col .ext-cal-evt a:active {
+    text-decoration: none;
+    color: $extensible-cal-day-evt-link-color
+}
+
+.ext-cal-evb {
+    height: 1px;
+    overflow: hidden;
+    margin: 0 2px;
+    border-top-width: 1px;
+    border-top-style: solid;
+}
+.x-opera .ext-cal-evb,
+.x-strict .x-ie .ext-cal-evb {
+    height: 0;
+}
+
+/* Event spanning -- overrides rounded corners */
+.ext-cal-ev-spanboth,
+.ext-cal-ev-spanleft,
+.ext-cal-ev-spanright {
+    -moz-border-radius:0;
+    -webkit-border-radius:0;
+    border-radius:0;
+	position: relative;
+}
+.ext-cal-ev-spanleft {
+    -moz-border-radius-topright:5px;
+    -moz-border-radius-bottomright:5px;
+    -webkit-border-top-right-radius:5px;
+    -webkit-border-bottom-right-radius:5px;
+    border-top-right-radius:5px;
+    border-bottom-right-radius:5px;
+    xpadding-left:5px;
+}
+.ext-cal-ev-spanright {
+    -moz-border-radius-topleft:5px;
+    -moz-border-radius-bottomleft:5px;
+    -webkit-border-top-left-radius:5px;
+    -webkit-border-bottom-left-radius:5px;
+    border-top-left-radius:5px;
+    border-bottom-left-radius:5px;
+    xpadding-right:5px;
+}
+/* IE/ Opera: */
+.ext-cal-ev-spanboth .ext-cal-evm {
+	margin: 0;
+}
+.ext-cal-ev-spanright .ext-cal-evm {
+	margin: 0 0 0 -1px;
+}
+.ext-cal-ev-spanleft .ext-cal-evm {
+	margin: 0 -1px 0 0;
+}
+
+.ext-cal-spl,
+.ext-cal-spr {
+/*    background-image:url(../images/default/calendar-sprites.gif);
+    background-repeat:no-repeat;
+    display: inline-block;
+    height: 15px;
+    line-height: 15px;
+    width: 2px;
+	position: absolute;
+	top: 0;*/
+}
+/*.ext-cal-spl {
+    background-position:-1px -11px;
+    left: 0;
+}
+.ext-cal-spr {
+    background-position:0 -11px;
+    right: -2px;
+}
+.x-ie .ext-cal-spr {
+    right: -5px;
+}*/
+
+/* Generic calendar icons */
+.ext-cal-ic {
+    background-image: url(../images/default/calendar-sprites.gif);
+    background-repeat: no-repeat;
+    display: none;
+    height: 11px;
+    line-height: 11px;
+    margin-left: 4px;
+    width: 12px;
+}
+.ext-evt-over .ext-cal-ic {
+    display: inline-block;
+}
+/* Text-only recurring (dark icon) */
+.ext-cal-ic-rcr {
+    background-position: 0 0;
+}
+/* Block recurring (light icon) */
+.ext-evt-block .ext-cal-ic-rcr {
+    background-position: -12px 0;
+}
+/* Text-only reminder (dark icon) */
+.ext-cal-ic-rem {
+    background-position: -24px 0;
+}
+/* Block reminder (dark icon) */
+.ext-evt-block .ext-cal-ic-rem {
+    background-position: -36px 0;
+}
+
+/* Calendar DD styles */
+.ext-cal-dd-sel-ct {
+    display: block;
+    z-index: 10;
+    position: absolute;
+    height: 0;
+    left: 0;
+    top: 0;
+    width: 0;
+}
+.ext-cal-dd-sel {
+    background-color: #C3D9FF;
+    font-size: 0;
+    line-height: 0;
+    opacity: 0.5;
+    position: absolute;
+}
+.ext-evt-over {
+    opacity: .8;
+}
+
+/* Calendar Picker */
+.ext-calendar-picker {
+    position: relative;
+}
+.x-gecko .ext-calendar-picker {
+    /* http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements */
+    display: block;
+}
+.ext-calendar-picker .x-form-text {
+    padding-left: 27px;
+}
+.ext-calendar-picker .x-combo-list-item {
+    padding-left: 24px;
+}
+.ext-cal-picker-icon {
+    width: 20px;
+    height: 16px;
+    margin-right: 5px;
+    -moz-border-radius:5px;
+    -webkit-border-radius:5px;
+    border-radius:5px;
+    float: left;
+}
+/* This is the selected icon that always shows: */
+.ext-cal-picker-mainicon {
+    float: none;
+    position: absolute;
+    top: 3px;
+    left: 4px;
+}
+
+/*
+ * Event resize handle
+ */
+.ext-evt-rsz {
+    position: absolute;
+    bottom: 0;
+    height: 5px;
+    line-height: 5px;
+    width: 100%;
+    text-align: center; /* needed for IE quirks mode */
+    cursor: s-resize;
+}
+.x-gecko .ext-evt-rsz,
+.x-webkit .ext-evt-rsz {
+    cursor: ns-resize;
+}
+.ext-evt-rsz-h {
+    display: none;
+    border-top:3px double;
+    border-color: white;
+    font-size:0;
+    height:0;
+    line-height:0;
+    margin-left:auto;
+    margin-right:auto;
+    width:20px;
+    opacity:.5;
+    -moz-opacity:.5;
+    -khtml-opacity:.5;
+    /* no opacity for ie by default */
+}
+.ext-evt-over .ext-evt-rsz-h {
+    display: block;
+}
+.x-ie .ext-evt-rsz-h {
+    border-color: $extensible-resize-handle-border-color;
+}
+.x-strict .x-ie8 .ext-evt-rsz-h {
+    border-color: $extensible-resize-handle-border-opacity-color;
+    filter:alpha(opacity=50);
+}
+
+.ext-cal-day-col .ext-cal-evt {
+    position: absolute;
+}
+.ext-cal-day-col .ext-cal-evr,
+.ext-cal-day-col .ext-cal-evi {
+    white-space: normal;
+}
+
+/* Shim for drag/drop operations on calendar views */
+.ext-dd-shim {
+    z-index:1000;
+    overflow:hidden;
+    position:absolute;
+    left:0;top:0;
+    opacity:.40;
+    -moz-opacity:.40;
+	-khtml-opacity:.40;
+    filter:alpha(opacity=40);
+	background: $extensible-dd-shim-background-color;
+}
+
+/* StatusProxy override styles */
+.ext-dd-ghost-ct {
+	color:$extensible-dd-ghost-color;
+	font: normal 11px arial, helvetica, sans-serif;
+	border: 1px solid;
+    border-color: $extensible-dd-ghost-border-color;
+	background-color:$extensible-dd-ghost-background-color;
+	padding:3px;
+	padding-left:20px;
+	white-space: nowrap;
+}
+.ext-dd-ghost-ct .x-dd-drag-ghost{
+	border: 0;
+	background: none;
+	padding: 0;
+	width: 150px;
+}
+.ext-dd-ghost-ct .ext-evt-rsz {
+    display: none;
+}
+
+/*******************************************
+ * 
+ * Calendar navigation picker styles
+ * 
+ ******************************************/
+.ext-cal-nav-picker {
+    border-style: none none solid;
+    border-color: $extensible-navigation-picker-border-color;
+}
+.ext-cal-nav-picker .x-datepicker-header {
+    background: $extensible-navigation-picker-header-background-color url(../images/default/ext/toolbar-bg.gif) repeat-x;
+}
+.ext-cal-nav-picker .x-datepicker-month,
+.ext-cal-nav-picker .x-datepicker-prev,
+.ext-cal-nav-picker .x-datepicker-next {
+    background: transparent;
+}
+.ext-cal-nav-picker .x-datepicker-prev a {
+    background-image: url(../images/default/ext/page-prev.gif);
+}
+.ext-cal-nav-picker .x-datepicker-next a {
+    background-image: url(../images/default/ext/page-next.gif);
+}
+.ext-cal-nav-picker .x-datepicker-month {
+    padding: 3px 0;
+}
+.ext-cal-nav-picker .x-datepicker-month .x-btn-inner {
+    color: $extensible-navigation-picker-button-color !important;
+    font-weight: bold;
+    font-family: arial,tahoma,verdana,helvetica;
+}
+.ext-cal-nav-picker .x-datepicker-month .x-btn-split-right {
+    background-image: url(../images/default/ext/button-arrow.gif) !important;
+    background-position: right 4px;
+}
+.ext-cal-nav-picker .x-datepicker-inner {
+    border-top: 1px solid $extensible-navigation-picker-inner-border-color;
+}
+.ext-cal-nav-picker .x-datepicker-inner th {
+    background: none;
+    border-bottom: 1px solid $extensible-navigation-picker-button-color;
+}
+.ext-cal-nav-picker .x-datepicker-inner .x-datepicker-today a {
+    border-color: $extensible-navigation-picker-today-border-color;
+    background: $extensible-navigation-picker-today-background-color;
+}
+.ext-cal-nav-picker .x-monthpicker {
+    border: 0;
+    border-bottom: 1px solid $extensible-navigation-picker-month-border-color;
+    top: 0 !important;
+    left: 0 !important;
+}
+.ext-cal-nav-picker .x-datepicker-footer {
+    background: $extensible-navigation-picker-footer-background-color url(../images/default/ext/toolbar-bg.gif) repeat-x;
+}
+
+/*******************************************
+ * 
+ * Calendar editor window styles
+ *
+ ******************************************/
+.ext-cal-evt-win {
+    z-index: 12100;
+}
+.x-gecko .ext-cal-event-win .x-window-body .x-form-item {
+    overflow: hidden;
+}
+.ext-cal-event-win .x-window-body .x-panel-body {
+    background: transparent;
+}
+.ext-cal-event-win a:link,
+.ext-cal-event-win a:visited {
+    color: $extensible-editor-link-color;
+}
+
+/*******************************************
+ * 
+ * Calendar form styles
+ *
+ ******************************************/
+.ext-evt-edit-form {
+    height: 100%;
+}
+.ext-evt-edit-form .x-form-item {
+    margin-bottom: 8px;
+}
+.ext-evt-edit-form .x-panel-bbar .x-toolbar {
+    border-bottom: 1px solid $extensible-form-toolbar-border-color;
+}
+.ext-evt-edit-form .x-panel-header {
+    background: transparent url(../images/default/ext-cal-edit-hd.png) repeat-x;
+    padding: 6px 0 5px 5px !important;
+    font-size: 13px !important;
+    font-family: helvetica, arial, sans-serif;
+    border-top: 0;
+    border-bottom: 1px solid $extensible-form-panel-border-bottom-color;
+}
+.x-panel-mc .ext-evt-edit-form .x-panel-header {
+   border-top: 1px solid $extensible-form-panel-border-top-color;
+}
+.ext-evt-edit-form .x-toolbar-footer {
+    padding: 10px;
+    background: $extensible-form-toolbar-background-color;
+}
+.ext-cal-event-win .x-panel-body {
+    padding: 8px 10px 5px;
+}
+
+/*******************************************
+ * 
+ * DateRangeField styles
+ *
+ ******************************************/
+.x-4-0 .ext-dt-range {
+    /* Don't double the bottom margin, use the contained fields' margin.
+     * This was only an issue in Ext 4.0.x */
+    margin-bottom: 0 !important;
+}
+.ext-dt-range .x-form-cb-wrap {
+    white-space: nowrap;
+}
+
+/*******************************************
+ * 
+ * ContextMenu styles
+ *
+ ******************************************/
+.extensible-cal-icon-evt-edit {
+    background-image:url(../images/default/silk/calendar_edit.png) !important;
+}
+.extensible-cal-icon-evt-del {
+    background-image:url(../images/default/silk/cross.png) !important;
+}
+.extensible-cal-icon-evt-move {
+    background-image:url(../images/default/silk/date_go.png) !important;
+}
+.extensible-cal-icon-evt-copy {
+    background-image:url(../images/default/silk/date_copy.png) !important;
+}
+
+/*******************************************
+ * 
+ * CalendarList styles
+ *
+ ******************************************/
+.x-calendar-list {
+    border-bottom: 1px solid $extensible-cal-list-border-color;
+}
+.x-calendar-list .x-panel-body {
+    padding: 4px 2px 2px;
+    background: $extensible-cal-list-background-color !important;
+    font-family: helvetica, arial, sans-serif;
+    font-size: 12px;
+}
+.x-calendar-list .x-panel-header-text {
+    color: $extensible-cal-list-header-color;
+}
+.x-calendar-list li {
+    position: relative;
+    margin-bottom: 2px;
+    cursor: pointer;
+}
+.x-calendar-list li em {
+    background-image: url(../images/default/calendar-sprites.gif);
+    background-repeat: no-repeat;
+    display: inline-block;
+    position: absolute;
+    height: 11px;
+    line-height: 11px;
+    width: 14px;
+    top: 2px;
+    background-position: -60px 0;
+    right: 0;
+}
+.x-calendar-list .hover em {
+    background-position: -48px 0;
+    xright: 2px;
+    opacity:.7;
+    -moz-opacity:.7;
+}
+.x-calendar-list .ext-cal-evr {
+    -moz-border-radius:3px;
+    -webkit-border-radius:3px;
+    border-radius:3px;
+}
+.ext-cal-hidden,
+/* IE/Opera: */
+.ext-cal-hidden .ext-cal-evi {
+    background-image: url(../images/default/ext-cal-list-hidden.png);
+    background-repeat: no-repeat;
+    background-position: top right;
+    opacity:.5;
+    -moz-opacity:.5;
+}
+.x-ie .ext-cal-hidden {
+    filter: alpha(opacity=50);
+    zoom: 1;
+}
+.x-ie .ext-cal-hidden .ext-cal-evi  {
+    /* the following works around an IE bug that won't apply the opacity filter correctly without dimensions */
+    width: 100%;
+    height: 100%;
+}
+.x-ie6 .ext-cal-hidden .ext-cal-evi {
+    background-image: url(../images/default/ext-cal-list-hidden-ie6.png);
+}
+.extensible-cal-icon-cal-show {
+    background-image:url(../images/default/silk/calendar_view_month.png) !important;
+}
+.extensible-cal-icon-cal-colors {
+    background-image:url(../images/default/silk/color_wheel.png) !important;
+}
+
+/*******************************************
+ * 
+ * CalendarList menu styles
+ *
+ ******************************************/
+.x-calendar-list-menu .x-color-picker {
+    padding-left: 32px;
+    width: 180px;            
+}
+.x-calendar-list-menu .x-color-picker a {
+    border-color: $extensible-cal-list-menu-link-color;
+}
+.x-color-picker a:hover, 
+.x-color-picker a.x-color-picker-selected {
+    border-color: $extensible-cal-list-menu-selected-color;
+}
\ No newline at end of file
diff --git a/resources/themes/stylesheets/ext4/default/widgets/_recurrence.scss b/resources/themes/stylesheets/ext4/default/widgets/_recurrence.scss
new file mode 100644
index 00000000..17c775b6
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_recurrence.scss
@@ -0,0 +1,50 @@
+/*******************************************
+ * Extensible recurrence control styles
+ *
+ ******************************************/
+.extensible-recur-inner-ct {
+    padding: 8px 0 0 15px;
+    border-left: 1px solid $extensible-recur-form-border-color;
+}
+.x-panel-default-framed .extensible-recur-inner-ct {
+    /* inside a framed panel with a blue bg */
+    border-left: 1px solid $extensible-recur-form-framed-border-color;
+}
+.extensible-recur-inner-ct label {
+    margin-top: 2px !important;
+}
+.extensible-recur-weekly label {
+    /* checkbox alignment is slightly different */
+    margin-top: 1px !important;
+    margin-right: 5px !important;
+}
+.extensible-recur-weekly .x-form-item {
+    margin-bottom: 5px;
+}
+.extensible-recur-frequency,
+.extensible-recur-duration,
+.extensible-recur-interval,
+.extensible-recur-monthly,
+.extensible-recur-weekly,
+.extensible-recur-yearly {
+    margin-bottom: 0 !important;
+}
+.extensible-recur-edit-options .x-btn {
+    margin: 0 5px;
+}
+/* Recurrence edit options icon classes */
+.extensible-recur-edit-options .recur-edit-single {
+    width: 50px !important;
+    margin: 0 auto;
+    background: url(../images/default/recur-edit-options.png) -100px -3px !important;
+}
+.extensible-recur-edit-options .recur-edit-future {
+    width: 50px !important;
+    margin: 0 auto;
+    background: url(../images/default/recur-edit-options.png) -50px -3px !important;
+}
+.extensible-recur-edit-options .recur-edit-all {
+    width: 50px !important;
+    margin: 0 auto;
+    background: url(../images/default/recur-edit-options.png) 0 -3px !important;
+}

From 30e8d28c0dc16913f04504fe0466631841e3df0b Mon Sep 17 00:00:00 2001
From: Philipp Dobrigkeit <p.dobrigkeit@goalio.de>
Date: Tue, 14 Aug 2012 16:22:46 +0200
Subject: [PATCH 2/4] Added Section about theming to the README.md

---
 .gitignore | 2 +-
 README.md  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 4f61eb99..c06dfb18 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,4 @@ deploy
 extensible-all*
 /examples-1.0/
 /examples/calendar/test.html
-/resources\sass/.sass-cache
+/resources/sass/.sass-cache
diff --git a/README.md b/README.md
index 5e444781..5a73bb6b 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,10 @@ For use in your own application, you'll simply include the built framework files
     <!-- Include your app and any other app-specific files -->
     <script type="text/javascript" src="MyApp.js"></script>
 
+### Theming
+
+To modify the color schema of Extensible use the supplied SASS files in /resources/sass. A good starting point is in the [Learn Ext JS Guide](http://www.sencha.com/learn/theming/).
+
 ## Upgrading from Extensible 1.x to 1.5+
 
 Nothing about the Extensible API changed between 1.x and 1.5 except the naming/namespacing and organization of classes. No new functionality was introduced that was not directly relevant to supporting Ext 4.0. Because of this upgrading should not be difficult, but since almost every single class was renamed and/or reorganized (to be more consistent with Ext 4 and also to provide support for dynamic loading), you may find it initially tedious to get existing application code back up and running under Extensible 1.5+.

From 9bd9e9670528b910d8a1277102e925a0b6e71b95 Mon Sep 17 00:00:00 2001
From: Philipp Dobrigkeit <p.dobrigkeit@goalio.de>
Date: Tue, 14 Aug 2012 16:22:46 +0200
Subject: [PATCH 3/4] Added Section about theming to the README.md

---
 .gitignore | 2 +-
 README.md  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 4f61eb99..c06dfb18 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,4 @@ deploy
 extensible-all*
 /examples-1.0/
 /examples/calendar/test.html
-/resources\sass/.sass-cache
+/resources/sass/.sass-cache
diff --git a/README.md b/README.md
index 5e444781..ac44d2d1 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,10 @@ For use in your own application, you'll simply include the built framework files
     <!-- Include your app and any other app-specific files -->
     <script type="text/javascript" src="MyApp.js"></script>
 
+## Theming
+
+To modify the color schema of Extensible use the supplied SASS files in /resources/sass. A good starting point is in the [Learn Ext JS Guide](http://www.sencha.com/learn/theming/).
+
 ## Upgrading from Extensible 1.x to 1.5+
 
 Nothing about the Extensible API changed between 1.x and 1.5 except the naming/namespacing and organization of classes. No new functionality was introduced that was not directly relevant to supporting Ext 4.0. Because of this upgrading should not be difficult, but since almost every single class was renamed and/or reorganized (to be more consistent with Ext 4 and also to provide support for dynamic loading), you may find it initially tedious to get existing application code back up and running under Extensible 1.5+.

From 1386fff553f992807f29ebecc5075ba00cee13f7 Mon Sep 17 00:00:00 2001
From: Philipp Dobrigkeit <p.dobrigkeit@goalio.de>
Date: Wed, 15 Aug 2012 10:10:23 +0200
Subject: [PATCH 4/4] Fixed background image usage with .x-nlg

---
 .../stylesheets/ext4/default/widgets/_calendar.scss    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/themes/stylesheets/ext4/default/widgets/_calendar.scss b/resources/themes/stylesheets/ext4/default/widgets/_calendar.scss
index 9a2a8f4f..4c672834 100644
--- a/resources/themes/stylesheets/ext4/default/widgets/_calendar.scss
+++ b/resources/themes/stylesheets/ext4/default/widgets/_calendar.scss
@@ -764,7 +764,7 @@ td.ext-cal-dtitle-today div {
     border-style: none none solid;
     border-color: $extensible-navigation-picker-border-color;
 }
-.ext-cal-nav-picker .x-datepicker-header {
+.x-nlg .ext-cal-nav-picker .x-datepicker-header {
     background: $extensible-navigation-picker-header-background-color url(../images/default/ext/toolbar-bg.gif) repeat-x;
 }
 .ext-cal-nav-picker .x-datepicker-month,
@@ -807,7 +807,7 @@ td.ext-cal-dtitle-today div {
     top: 0 !important;
     left: 0 !important;
 }
-.ext-cal-nav-picker .x-datepicker-footer {
+.x-nlg .ext-cal-nav-picker .x-datepicker-footer {
     background: $extensible-navigation-picker-footer-background-color url(../images/default/ext/toolbar-bg.gif) repeat-x;
 }
 
@@ -845,13 +845,17 @@ td.ext-cal-dtitle-today div {
     border-bottom: 1px solid $extensible-form-toolbar-border-color;
 }
 .ext-evt-edit-form .x-panel-header {
-    background: transparent url(../images/default/ext-cal-edit-hd.png) repeat-x;
     padding: 6px 0 5px 5px !important;
     font-size: 13px !important;
     font-family: helvetica, arial, sans-serif;
     border-top: 0;
     border-bottom: 1px solid $extensible-form-panel-border-bottom-color;
 }
+
+.x-nlg .ext-evt-edit-form .x-panel-header {
+    background: transparent url(../images/default/ext-cal-edit-hd.png) repeat-x;
+}    
+
 .x-panel-mc .ext-evt-edit-form .x-panel-header {
    border-top: 1px solid $extensible-form-panel-border-top-color;
 }