0
@@ -1,4 +1,4 @@
0
-#calendars {
0
+div.timeframe_calendar {
0
   display: inline-block;
0
   margin: 0;
0
   padding: 0;
0
@@ -7,17 +7,17 @@
0
 }
0
 
0
 /* Menu */
0
-#calendars ul#timeframe_menu {
0
+div.timeframe_calendar ul.timeframe_menu {
0
   list-style-type: none;
0
   font-weight: bold;
0
   margin: auto;
0
   padding: 0 0 6px;
0
   width: 60px;
0
 }
0
-  #calendars ul#timeframe_menu li {
0
+  div.timeframe_calendar ul.timeframe_menu li {
0
     display: inline;
0
   }
0
-    #calendars ul#timeframe_menu li a {
0
+    div.timeframe_calendar ul.timeframe_menu li a {
0
       display: inline-block;
0
       height: 20px;
0
       padding: 2px 0 0;
0
@@ -25,38 +25,38 @@
0
       width: 20px;
0
       -webkit-box-shadow: 0 1px 2px #999;
0
     }
0
-      #calendars ul#timeframe_menu li a.previous, #calendars ul#timeframe_menu li a.next {
0
+      div.timeframe_calendar ul.timeframe_menu li a.previous, div.timeframe_calendar ul.timeframe_menu li a.next {
0
         background: #fff;
0
         color: #468966;
0
       }
0
-        #calendars ul#timeframe_menu li a.previous:hover, #calendars ul#timeframe_menu li a.next:hover {
0
+        div.timeframe_calendar ul.timeframe_menu li a.previous:hover, div.timeframe_calendar ul.timeframe_menu li a.next:hover {
0
           background: #ccc;
0
         }
0
-        #calendars ul#timeframe_menu li a.previous:active, #calendars ul#timeframe_menu li a.next:active {
0
+        div.timeframe_calendar ul.timeframe_menu li a.previous:active, div.timeframe_calendar ul.timeframe_menu li a.next:active {
0
           background: #aaa;
0
         }
0
-      #calendars ul#timeframe_menu li a.disabled, #calendars ul#timeframe_menu li a.disabled:hover, #calendars ul#timeframe_menu li a.disabled:active {
0
+      div.timeframe_calendar ul.timeframe_menu li a.disabled, div.timeframe_calendar ul.timeframe_menu li a.disabled:hover, div.timeframe_calendar ul.timeframe_menu li a.disabled:active {
0
         background: #fff;
0
         color: #ccc;
0
         cursor: default;
0
       }
0
-      #calendars ul#timeframe_menu li a.today {
0
+      div.timeframe_calendar ul.timeframe_menu li a.today {
0
         background: #468966;
0
         color: #eee;
0
       }
0
-        #calendars ul#timeframe_menu li a.today:hover {
0
+        div.timeframe_calendar ul.timeframe_menu li a.today:hover {
0
           background: #246744;
0
         }
0
-        #calendars ul#timeframe_menu li a.today:active {
0
+        div.timeframe_calendar ul.timeframe_menu li a.today:active {
0
           background: #024522;
0
         }
0
-      #calendars ul#timeframe_menu li a.previous {
0
+      div.timeframe_calendar ul.timeframe_menu li a.previous {
0
         -webkit-border-top-left-radius:     10px;
0
         -webkit-border-bottom-left-radius:  10px;
0
         -moz-border-radius-topleft:         11px;
0
         -moz-border-radius-bottomleft:      11px;
0
       }
0
-      #calendars ul#timeframe_menu li a.next {
0
+      div.timeframe_calendar ul.timeframe_menu li a.next {
0
         -webkit-border-top-right-radius:     10px;
0
         -webkit-border-bottom-right-radius:  10px;
0
         -moz-border-radius-topright:         11px;
0
@@ -64,7 +64,7 @@
0
       }
0
 
0
 /* Calendar*/
0
-#calendars table {
0
+div.timeframe_calendar table {
0
   border-collapse: collapse;
0
   display: inline;
0
   display: inline-block;
0
@@ -72,93 +72,93 @@
0
   margin: 0 6px 12px;
0
 }
0
   /* Month names */
0
-  #calendars table caption {
0
+  div.timeframe_calendar table caption {
0
     text-shadow: 0 0 0 #fff;
0
   }
0
   /* Cell sizes */
0
-  #calendars thead th, #calendars tbody td {
0
+  div.timeframe_calendar thead th, div.timeframe_calendar tbody td {
0
     height: 18px;
0
     margin: 0;
0
     padding: 2px 1px;
0
     width: 20px;
0
   }
0
   /* Weekday letters */
0
-  #calendars thead {
0
+  div.timeframe_calendar thead {
0
     background: #222;
0
     color: #eee;
0
   }
0
   /* Days */
0
-  #calendars tbody {
0
+  div.timeframe_calendar tbody {
0
     background: #fff;
0
     -webkit-box-shadow: 0px 2px 6px #999;
0
   }
0
-    #calendars tbody td {
0
+    div.timeframe_calendar tbody td {
0
       cursor: pointer;
0
     }
0
       /* Hover states not available in IE */
0
-      #calendars tbody td.selectable:hover {
0
+      div.timeframe_calendar tbody td.selectable:hover {
0
         background-color: #bbb;
0
       }
0
-      #calendars tbody td.selected:hover, #calendars tbody td.stuck:hover {
0
+      div.timeframe_calendar tbody td.selected:hover, div.timeframe_calendar tbody td.stuck:hover {
0
         background-color: #e99a27;
0
       }
0
       /* Selected states */
0
-      #calendars tbody td.selected {
0
+      div.timeframe_calendar tbody td.selected {
0
         background-color: #ffb03b;
0
       }
0
-      #calendars tbody td.stuck {
0
+      div.timeframe_calendar tbody td.stuck {
0
         background-color: #e99a27;
0
       }
0
       /* Range markers */
0
-      #calendars tbody td.startrange, #calendars tbody td.endrange, #calendars tbody td.startendrange {
0
+      div.timeframe_calendar tbody td.startrange, div.timeframe_calendar tbody td.endrange, div.timeframe_calendar tbody td.startendrange {
0
         cursor: col-resize;
0
       }
0
-      #calendars tbody td.startrange {
0
+      div.timeframe_calendar tbody td.startrange {
0
         background-image: url(../images/start.png);
0
       }
0
-      #calendars tbody td.endrange {
0
+      div.timeframe_calendar tbody td.endrange {
0
         background-image: url(../images/end.png);
0
       }
0
-      #calendars tbody td.startendrange {
0
+      div.timeframe_calendar tbody td.startendrange {
0
         background-image: url(../images/startend.png);
0
       }
0
       /* Today */
0
-      #calendars tbody td.today {
0
+      div.timeframe_calendar tbody td.today {
0
         background-color: #468966;
0
         color: #eee;
0
       }
0
-        #calendars tbody td.today_selected {
0
+        div.timeframe_calendar tbody td.today_selected {
0
           background-color: #b64926;
0
         }
0
-        #calendars tbody td.today_stuck {
0
+        div.timeframe_calendar tbody td.today_stuck {
0
           background-color: #8e2800;
0
         }
0
       /* Post/pre-month */
0
-      #calendars tbody td.beyond {
0
+      div.timeframe_calendar tbody td.beyond {
0
         background-color: #aaa;
0
         background-image: none;
0
         color: #ccc;
0
       }
0
-        #calendars tbody td.beyond_selected {
0
+        div.timeframe_calendar tbody td.beyond_selected {
0
           background-color: #999;
0
         }
0
-        #calendars tbody td.beyond_stuck {
0
+        div.timeframe_calendar tbody td.beyond_stuck {
0
           background-color: #888;
0
         }
0
       
0
-      #calendars tbody td.unselectable {
0
+      div.timeframe_calendar tbody td.unselectable {
0
         color: #ccc;
0
         cursor: default;
0
       }
0
       /* Clear button */
0
-      #calendars tbody td span.clear {
0
+      div.timeframe_calendar tbody td span.clear {
0
         color: transparent;
0
         display: block;
0
         height: 0;
0
         position: absolute;
0
         width: 0;
0
       }
0
-        #calendars tbody td span.clear span {
0
+        div.timeframe_calendar tbody td span.clear span {
0
           background-image: url(../images/closebox.png);
0
           cursor: pointer;
0
           display: block;
0
@@ -169,6 +169,6 @@
0
           top: -18px;
0
           width: 30px;
0
         }
0
-          #calendars tbody td span.clear span.active {
0
+          div.timeframe_calendar tbody td span.clear span.active {
0
             background-image: url(../images/closebox_selected.png);
0
           }
0
\ No newline at end of file

0
@@ -24,6 +24,7 @@ var Timeframe = Class.create({
0
     Timeframes.push(this);
0
 
0
     this.element = $(element);
0
+    this.element.addClassName('timeframe_calendar')
0
     this.options = $H({ months: 2 }).merge(options || {});;
0
     this.months = this.options.get('months');
0
 
0
@@ -129,7 +130,7 @@ var Timeframe = Class.create({
0
   },
0
 
0
   _buildButtons: function() {
0
-    var buttonList = new Element('ul', { id: this.element.id + '_menu' });
0
+    var buttonList = new Element('ul', { id: this.element.id + '_menu', className: 'timeframe_menu' });
0
     this.buttons.each(function(pair) {
0
       if (pair.value.get('element'))
0
         pair.value.get('element').addClassName('timeframe_button').addClassName(pair.key);
0
@@ -148,7 +149,7 @@ var Timeframe = Class.create({
0
   },
0
 
0
   _buildFields: function() {
0
-    var fieldset = new Element('div', { id: this.element.id + '_fields' });
0
+    var fieldset = new Element('div', { id: this.element.id + '_fields', className: 'timeframe_fields' });
0
     this.fields.each(function(pair) {
0
       if (pair.value)
0
         pair.value.addClassName('timeframe_field').addClassName(pair.key);