diff --git a/airtime_mvc/application/views/scripts/playlist/playlist.phtml b/airtime_mvc/application/views/scripts/playlist/playlist.phtml
index fde02893a..46228f766 100644
--- a/airtime_mvc/application/views/scripts/playlist/playlist.phtml
+++ b/airtime_mvc/application/views/scripts/playlist/playlist.phtml
@@ -57,11 +57,11 @@ if (isset($this->obj)) {
     <div id="crossfade_main" class="crossfade-main clearfix" style="display:none;">
         <span class="ui-icon ui-icon-closethick sp-closethick-center"></span>
         <dl id="spl_editor-main" class="inline-list">
-            <dt><?php echo _("Fade in: "); ?><span class='spl_cue_hint'>(ss.msec)</span></dt>
-            <dd><span contenteditable="true" class="spl_text_input spl_main_fade_in">00</span></dd>
+            <dt><?php echo _("Fade in:  "); ?><span class='spl_cue_hint'>(ss.m)</span></dt>
+            <dd><input class="playlist_main_fade_input spl_main_fade_in" value="00" /></dd>
             <dd class="edit-error"></dd>
-            <dt><?php echo _("Fade out: "); ?><span class='spl_cue_hint'>(ss.msec)</span></dt>
-            <dd><span contenteditable="true" class="spl_text_input spl_main_fade_out">00</span></dd>
+            <dt><?php echo _("Fade out: "); ?><span class='spl_cue_hint'>(ss.m)</span></dt>
+            <dd><input class="playlist_main_fade_input spl_main_fade_out" value="00" /></dd>
             <dd class="edit-error"></dd>
         </dl>
     </div>
diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css
index 49a0777a2..8a31e3579 100644
--- a/airtime_mvc/public/css/playlist_builder.css
+++ b/airtime_mvc/public/css/playlist_builder.css
@@ -345,7 +345,7 @@
 }
 
 .edit-error {
-    color: #b80000;
+    color: #bd362f;
     margin: 0;
     padding-bottom: 0;
     font-size: 12px;
@@ -359,14 +359,23 @@
     color: #fff;
 }
 
+.playlist_main_fade_input {
+    width: 100px;
+}
+
 .crossfade-main {
-    background: #debc9e;
+    /*background: #debc9e;*/
     border: 1px solid #5b5b5b;
     padding: 10px 10px 0 10px;
     margin: 0 1px 16px 0;
     position: relative;
 }
 
+.crossfade-main dt {
+    color: #ffffff !important;
+    width: 100px;
+}
+
 .crossfade-main .edit-error {
     padding-bottom: 4px;
     margin: 0;
diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js
index 27c0aa743..64c632444 100644
--- a/airtime_mvc/public/js/airtime/library/spl.js
+++ b/airtime_mvc/public/js/airtime/library/spl.js
@@ -763,15 +763,18 @@ var AIRTIME = (function(AIRTIME){
                             playlistError(json);
                         }
                         else {
-                            var fadeIn = $pl.find("span.spl_main_fade_in");
+                            var fadeIn = $pl.find("input.spl_main_fade_in");
                             var fadeOut = $pl.find("span.spl_main_fade_out");
                             if (json.fadeIn == null) {
                                 fadeIn.parent().prev().hide();
                                 fadeIn.hide();
                             } else {
+                                console.log(json.fadeIn);
+                                //console.log(fadeIn.val());
                                 fadeIn.parent().prev().show();
                                 fadeIn.show();
-                                fadeIn.empty().append(json.fadeIn);
+                                fadeIn.val(json.fadeIn);
+                                fadeIn.text(json.fadeIn);
                             }
                             if (json.fadeOut == null) {
                                 fadeOut.parent().prev().hide();
@@ -789,41 +792,41 @@ var AIRTIME = (function(AIRTIME){
             }
         });
 
-        $pl.on("blur", "span.spl_main_fade_in", function(event){
+        $pl.on("blur", "input.spl_main_fade_in", function(event){
             event.stopPropagation();
 
             var url = baseUrl+"playlist/set-playlist-fades",
-                span = $(this),
-                fadeIn = $.trim(span.text()),
+                input = $(this),
+                fadeIn = $.trim(input.val()),
                 lastMod = mod.getModified(),
                 type = $pl.find('.obj_type').val();
 
             if (!isFadeValid(fadeIn)){
-                showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
+                showError(input, $.i18n._("please put in a time in seconds '00 (.0)'"));
                 return;
             }
 
             $.post(url,
                 {format: "json", fadeIn: fadeIn, modified: lastMod, type: type},
                 function(json){
-                    hideError(span);
+                    hideError(input);
                     if (json.modified !== undefined) {
                         mod.setModified(json.modified);
                     }
                 });
         });
 
-        $pl.on("blur", "span.spl_main_fade_out", function(event){
+        $pl.on("blur", "input.spl_main_fade_out", function(event){
             event.stopPropagation();
 
             var url = baseUrl+"playlist/set-playlist-fades",
-                span = $(this),
-                fadeOut = $.trim(span.text()),
+                input = $(this),
+                fadeOut = $.trim(input.text()),
                 lastMod = mod.getModified(),
                 type = $pl.find('.obj_type').val();
 
             if (!isFadeValid(fadeOut)){
-                showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
+                showError(input, $.i18n._("please put in a time in seconds '00 (.0)'"));
                 return;
             }