diff --git a/platform/features/timeline/style/config.rb b/platform/features/timeline/style/config.rb
deleted file mode 100755
index a5def82481..0000000000
--- a/platform/features/timeline/style/config.rb
+++ /dev/null
@@ -1,26 +0,0 @@
-# Require any additional compass plugins here.
-# require "compass-growl"
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = "css"
-sass_dir = "sass"
-images_dir = "images"
-javascripts_dir = "js"
-
-# You can select your preferred output style here (can be overridden via the command line):
-# :expanded, :compressed, :nested
-output_style = :nested
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-# line_comments = false
-
-
-# If you prefer the indented syntax, you might want to regenerate this
-# project again passing --syntax sass, or you can uncomment this:
-# preferred_syntax = :sass
-# and then run:
-# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass
diff --git a/platform/features/timeline/style/sass/_activities.scss b/platform/features/timeline/style/sass/_activities.scss
deleted file mode 100644
index 75f3a81072..0000000000
--- a/platform/features/timeline/style/sass/_activities.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.l-timeline-gantt {
-	position: absolute;
-	top: $timelineSwimlaneGanttVM; bottom: $timelineSwimlaneGanttVM;
-
-	.bar {
-		@include ellipsize();
-		height: $activityBarH;
-		line-height: $activityBarH + 2;
-		padding: 0 $interiorMargin;
-
-		span {
-			display: inline;
-			&.s-activity-type {
-				&.timeline {
-					&:before {
-						content:"S";
-					}
-				}
-				&.activity {
-					&:before {
-						content:"A";
-					}
-				}
-			}
-			&.s-title {
-				@include text-shadow(rgba(black, 0.1) 0 1px 2px);
-//				right: 5px;
-//				width: 50%;
-			}
-			&.duration {
-				left: auto;
-				opacity: 0.75;
-				right: 0;
-				text-align: right;
-				width: 60px;
-			}
-			&.handle {
-				//background: rgba(red, 0.2);
-				top: 0;
-				bottom: 0;
-				height: auto;
-				width: 15px;
-				&.left {
-					right: auto;
-				}
-				&.middle {
-					right: 15px;
-					left: 15px;
-					width: auto;
-				}
-				&.right {
-					right: 0;
-					left: auto;
-				}
-			}
-		}
-	}
-}
-
-.s-timeline-gantt {
-	$br: $controlCr;
-	.bar {
-		color: $activityTypeFg;
-//		opacity: 0.9;
-//		@include background-image(linear-gradient(lighten($activityTypeBg, 10), $activityTypeBg));
-		@include activityBg($activityTypeBg);
-		@include border-radius($br);
-		@include box-shadow(rgba(black, 0.4) 0 1px 3px);
-		&.expanded {
-			@include border-top-radius($br);
-			@include border-bottom-radius(0);
-		}
-		&.leaf {
-			@include border-top-radius(0);
-			@include border-bottom-radius($br);
-		}
-		.s-toggle {
-			color: $colorKey;
-		}
-	}
-}
-
-.edit-mode .s-timeline-gantt {
-	.bar {
-		&:hover {
-			@include background-image(linear-gradient(lighten($activityTypeBg, 20), lighten($activityTypeBg, 10)));
-		}
-	}
-
-	.handle {
-		cursor: col-resize;
-		&.start {
-//			@include test(red);
-		}
-		&.mid {
-//			@include test(green);
-			cursor: ew-resize;
-		}
-		&.end {
-//			@include test(blue);
-		}
-	}
-}
\ No newline at end of file
diff --git a/platform/features/timeline/style/sass/_timelines.scss b/platform/features/timeline/style/sass/_timelines.scss
deleted file mode 100644
index bdb8211a3e..0000000000
--- a/platform/features/timeline/style/sass/_timelines.scss
+++ /dev/null
@@ -1,401 +0,0 @@
-//*************************************************************** LAYOUT
-.l-timeline-holder {
-//    @include test();
-    @include absPosDefault();
-
-    .l-timeline-pane {
-        @include absPosDefault();
-
-	    .l-width-control {
-		    position: relative;
-	    }
-
-	    .l-swimlanes-holder {
-		    @include absPosDefault();
-		    top: $timelineTopPaneHeaderH + 1;
-	    }
-
-	    // Overall layout
-        &.t-pane-h {
-            &.s-timeline-tabular .t-pane-v {
-                // Vertical panes within tabular area
-                @include absPosDefault();
-                &.l-tabular-l {
-                    // Tree area with item title
-                    right: auto; // Set this to auto and uncomment width below when additional tabular columns are added
-                    width: $timelineTabularTitleW;
-                }
-                &.l-tabular-r {
-                    // Start, end, duration, activity modes columns
-                    @include scrollH();
-                    left: $timelineTabularTitleW;
-	                .l-width {
-		                @include absPosDefault(0, visible);
-		                min-width: $timelineTabularDataW;
-		                width: 100%;
-	                }
-                }
-            }
-            &.l-timeline-gantt {
-//                @include testObj();
-
-                .l-swimlanes-holder {
-                    @include scrollV(scroll);
-                }
-
-            }
-	        &.l-timeline-resource-legend {
-		        @include box-sizing(border-box);
-		        padding: $interiorMargin 0;
-		        white-space: nowrap;
-		        .l-title {
-		        }
-
-		        .l-legend-items {
-			        @include absPosDefault();
-			        @include scrollV();
-			        top: 25px;
-			        color: lighten($timelineColorAlt1, 10%);
-//			        margin-top: $interiorMargin;
-		        }
-		        .legend-item {
-			        // Inherits from /platform/commonUI/general/res/sass/plots/_plots-main.scss
-//			        border-bottom: 1px solid $colorInteriorBorder;
-			        display: block;
-			        margin-bottom: $interiorMarginSm;
-			        overflow: hidden;
-			        text-overflow: ellipsis;
-			        white-space: nowrap;
-			        .color-swatch {
-				        vertical-align: baseline;
-			        }
-			        .title-label {
-				        vertical-align: baseline;
-			        }
-		        }
-	        }
-
-            &.l-timeline-resource-graph {
-	            $m: $interiorMargin;
-
-                .l-graphs-holder {
-//                    @include test(blue);
-                    @include absPosDefault();
-                    bottom: $scrollbarTrackSize;
-
-                    .l-graphs {
-                        @include absPosDefault();
-                        @include scrollV(scroll);
-                    }
-
-                    .l-graph-labels-holder {
-//                        @include test(red);
-                        @include absPosDefault();
-                        overflow: hidden;
-                        right: auto;
-                        width: 400px;
-                    }
-                }
-
-                .l-scroll-control {
-                    @include absPosDefault();
-                    overflow-x: scroll;
-                    overflow-y: hidden;
-                    top: auto; right: $scrollbarTrackSize;
-                    height: $scrollbarTrackSize;
-                    .l-width-control {
-                        height: 10px; // Need to add height to force scrollbar to appear
-                    }
-                }
-
-	            .l-graph,
-	            .l-graph-labels {
-		            height: 80px; //was 120px
-		            margin-bottom: $interiorMarginSm;
-		            position: relative;
-	            }
-
-	            .l-title {
-		            @include ellipsize();
-		            color: rgba(#fff, 0.4);
-		            top: $m; left: $m;
-		            position: absolute;
-	            }
-
-	            .l-graph {
-		            background: rgba(black, 0.3);
-                    width: 100%;
-		            .l-graph-area {
-			            canvas {
-				            width: 100%;
-				            height: 100%;
-			            }
-		            }
-	            }
-
-	            .l-graph-labels {
-		            z-index: 10;
-	            }
-
-	            .l-graph-area {
-		            @include absPosDefault();
-		            top: 20px; bottom: 5px;
-		            .l-labels-holder {
-			            @include absPosDefault();
-			            left: $m;
-			            .tick-label.tick-label-y {
-				            text-align: left;
-			            }
-		            }
-	            }
-            }
-        }
-
-        &.l-pane-l {
-//            @include test(red);
-            right: auto;
-			min-width: 50px;
-			max-width: 90%;
-            width: $timelinePaneLeftW;
-        }
-
-        &.l-pane-r {
-//            @include test(blue);
-            left: 0;
-			&:hover {
-				.l-hover-btns-holder {
-					@include trans-prop-nice-fade(100ms);
-					opacity: 1;
-				}
-			}
-        }
-
-        &.l-pane-top {
-//            @include test(green);
-            bottom: $timelinePaneBtmH;
-        }
-        &.l-pane-btm {
-//            @include test(orange);
-            top: auto;
-			min-height: 20px;
-			max-height: 80%;
-            height: $timelinePaneBtmH;
-        }
-    }
-
-    .l-swimlane {
-	    height: $timelineSwimlaneH;
-	    position: relative;
-    }
-
-	// Header
-    .s-timeline-tabular .l-header,
-    .s-timeline-gantt .l-header {
-//        @include test(white,0.05);
-	    @include absPosDefault(0, visible);
-        bottom: auto; height: $timelineTopPaneHeaderH;
-
-        .l-header-elem {
-		    @include absPosDefault($timelineTopPaneHeaderElemMargin, visible);
-//		    bottom: auto; height: 15px;
-		    display: block;
-		    &.l-labels {
-			    .l-label {
-				    position: absolute;
-				    width: 140px;
-				    margin-left: -70px;
-				    text-align: center;
-			    }
-		    }
-	    }
-    }
-
-	.l-hover-btns-holder {
-		@include absPosDefault();
-		@include box-sizing(border-box);
-		@include trans-prop-nice-fade(500ms);
-		opacity: 0;
-		height: $timelineTopPaneHeaderH;
-		width: 100px; left: auto;
-		padding: $interiorMargin;
-		text-align: right;
-		z-index: 10;
-	}
-
-	// Tabular Columns
-	.l-cols {
-//		@include test(#66ff66, 0.1);
-		@include absPosDefault(0, visible);
-		text-wrap: none;
-		white-space: nowrap;
-		.l-col {
-			@include box-sizing(border-box);
-			@include ellipsize();
-//			@include test(red, 0.05);
-			display: inline-block;
-			height: 100%;
-			padding: 0 $interiorMargin;
-			position: relative;
-			text-wrap: none;
-			white-space: nowrap;
-
-			&.l-col-icon {
-				width: $timelineColIconW;
-                text-align: center;
-                padding: 0;
-				.ui-symbol {
-					color: $colorKey;
-				}
-			}
-
-			&.l-plot-resource {
-				border-left: none !important;
-				cursor: pointer;
-				padding-left: 0;
-//				.ui-symbol {
-//					color: $colorFormValid;
-//				}
-			}
-
-			&.l-title {
-				width: $timelineColTitleW;
-			}
-
-			&.l-start,
-			&.l-end,
-			&.l-duration {
-				width: $timelineColDatetimeW;
-			}
-
-			//&.l-duration {
-			//	width: $timelineColDurationW;
-			//}
-
-			&.l-activity-modes {
-				display: none; // Temp, until modes can be displayed
-				width: $timelineColActivityModesW;
-			}
-
-		}
-	}
-
-	.s-timeline-tabular {
-		.l-header .l-cols {
-			top: $timelineTopPaneHeaderElemMargin; bottom: $timelineTopPaneHeaderElemMargin;
-			.l-col {
-				border-left: 1px solid rgba(#fff, 0.1);
-//				height: 100%;
-			}
-		}
-
-		.l-pane-l {
-			// Left pane of the tabular area
-			.l-cols {
-				left: $timelineTopPaneHeaderElemMargin;
-				.s-label .ui-symbol.icon {
-					//color: $colorKeyFg;
-					color: $activityTypeTabularFgIcon;
-				}
-			}
-		}
-
-		.l-pane-r {
-			// Right pane of the tabular area
-//			@include test(red, 0.05);
-		}
-	}
-
-    .splitter {
-        // Top of splitter within Timelines should be 0
-        top: 0;
-    }
-
-	// Ticks
-	.l-ticks,
-	.l-subticks {
-		@include absPosDefault();
-		top: auto; bottom: $interiorMarginSm;
-	}
-
-	.l-ticks {
-		height: 10px
-	}
-
-	.l-subticks {
-		height: 5px
-	}
-}
-
-//*************************************************************** STYLING
-.s-timeline {
-    font-size: 0.75rem;
-	.s-header {
-		background-color: $timelineHeaderColorBg;
-	}
-	.s-swimlane {
-		//    @include transition-property(background-color);
-		//    @include transition-duration(0.2s);
-		//    @include transition-timing-function(ease-out);
-		//    border-top: 1px solid rgba(black, 0.2);
-		border-bottom: 1px solid rgba(white, 0.1);
-		line-height: $activityBarH + 2 + 1;
-		/*    &:hover {
-				background: rgba(white, 0.1);
-			}*/
-		&.exceeded {
-			@include bgDiagonalStripes(#fff, 0.05, $timelineSwimlaneH + 1);
-		}
-
-		&.selected {
-			$bg: $colorSwimlaneSelectedBg;
-			background-color: $bg;
-			color: #fff;
-//			@include background-image(linear-gradient(darken($bg, 5), $bg));
-
-			.s-timeline-gantt .bar {
-				@include activityBg($colorSwimlaneSelectedGanttBg, 10);
-				color: $colorSwimlaneSelectedGanttFg;
-//				background-color: red;
-//				background-image: none;
-			}
-		}
-
-		&.drop-into {
-			background-color: rgba($colorDropTarg, 0.7);
-			.s-timeline-gantt {
-				opacity: 0.7;
-			}
-		}
-		&.drop-after {
-			background-color: rgba(#000, 0.2);
-			border-bottom-color: rgba($colorDropTarg, 1.0);
-		}
-	}
-
-	.s-ticks {
-		@include bgTicks($timelineColorAlt1);
-	}
-	.s-hover-btns-holder {
-		$bg: $timelineHeaderColorBg;
-		$bga: 1;
-		$l: 5%;
-		@include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%));
-		.s-btn {
-			@include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
-		}
-	}
-}
-
-.edit-mode .s-swimlane {
-	cursor: pointer;
-	.s-label {
-		@include border-radius($controlCr);
-		padding: 2px 5px;
-		&:hover {
-			background: rgba(#fff, 0.1);
-			color: #fff;
-		}
-	}
-}
-
-