4 files changed, 380 insertions, 0 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png b/js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png
new file mode 100644
index 00000000..64449a5a
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png b/js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png
new file mode 100644
index 00000000..9b324f65
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png
diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
new file mode 100644
index 00000000..5ff710a1
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -0,0 +1,370 @@
+@charset "UTF-8";
+
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+/* TimelinePanel.scss
+ * Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css.
+ */
+ 
+// Import theme settings
+@import "../../../../../scss/imports/themes/default/colors";
+// @import "../../../../../scss/imports/themes/default/fonts";
+@import "../../../../../scss/imports/themes/default/mixins";
+
+// Import generic mixins and styles
+@import "../../../../../scss/imports/scss/mixins";
+// @import "../../../../../scss/imports/scss/Base";
+
+.tl_container{
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    height: 100%;
+}
+.maintimeline{
+    -webkit-box-flex: 1;
+    display: -webkit-box;
+    -webkit-box-orient: horizontal;
+    height : 100%;
+    position: relative;
+    margin-top:1px;
+}
+.leftinside{
+    height: 100%;
+    width: 100%;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    position:absolute;
+    overflow: hidden;
+}
+.rightinside{
+    height: 100%;
+    width: 100%;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    position:absolute;
+}
+.tl_leftpane{
+    min-width: 200px;
+    max-width: 500px;
+    position: relative;
+    overflow: hidden;
+    -webkit-box-flex: 0;
+}
+.tl_rightpane{
+    width: 100%;
+    position: relative;
+    -webkit-box-flex: 1;
+}
+
+#bottomPanelContainer {
+        overflow: hidden !IMPORTANT;
+}
+
+.layout-tracks {
+        width: 100%;
+        height: 100%;
+        padding-bottom: 6px;
+        box-sizing: border-box;
+        overflow: auto;
+        position: relative;
+}
+.tl_layertracks{
+    background-color: $color-tool-bg;
+    height: 100%;
+    width: 100%;
+    -webkit-box-flex: 1;
+    padding-top: 21px;
+        box-sizing: border-box;
+}
+.layerresizer{
+    height: auto;
+    width:6px;
+    border-right-style: solid;
+    border-right-color: $color-divider-third;
+    border-right-width: thin;
+    border-left-style: solid;
+    border-left-color: $color-divider-second;
+    border-left-width: thin;
+    background-color: $color-divider-first;
+    cursor: col-resize;
+    -webkit-box-flex: 0;
+}
+.timelinecontroller{
+    height:20px;
+    background-color: $color-panel-bg;
+    -webkit-box-flex: 0;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+    border-bottom-color: $color-divider-second;
+}
+.timelinecontrols{
+    width: 100%;
+    padding-left: 6px;
+    padding-top: 2px;
+    height: 18px;
+    background-color: $color-panel-bg;
+    float: left;
+}
+.timetext{
+    float: right;
+    padding-right: 10px;
+    color: white;
+}
+.rewindbutton{
+    background-image: url('../images/play_prev.png');
+    background-repeat: no-repeat;
+    height: 18px;
+    width: 18px;
+    float: left;
+    padding-right: 5px;
+}
+.playbutton{
+    background-image: url('../images/play.png');
+    background-repeat: no-repeat;
+    height: 18px;
+    width: 18px;
+    float: left;
+    padding-right: 5px;
+}
+.pausebutton{
+    background-image: url('../images/pause.png');
+    background-repeat: no-repeat;
+    height: 18px;
+    width: 18px;
+    float: left;
+    padding-right: 5px;
+}
+.forwardbutton{
+    background-image: url('../images/play_next.png');
+    background-repeat: no-repeat;
+    height: 18px;
+    width: 18px;
+    float: left;
+    padding-right: 5px;
+}
+.timelinemarkers{
+    height: 20px;
+    width: 100%;
+    background-color: $color-panel-bg;
+    border-bottom-style:  solid;
+    border-bottom-width: thin;
+    border-bottom-color: $color-divider-second;
+    -webkit-box-flex: 0;
+    position: absolute;
+    background-image: url("../images/timetick.jpg");
+    overflow: visible;
+}
+.layout_markers {
+        position: absolute;
+        overflow: hidden;
+        top: 0px;
+        left: 0px;
+        height: 20px;
+        width: 100%;
+    border-bottom-style: solid;
+}
+
+.masterlayer{
+    font-family: 'Droid Sans';
+    font-size: 12px;
+    text-shadow: 1px 1px 1px black;
+    height: 18px;
+    background-color: $color-panel-bg;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+    border-bottom-color: $color-divider-third;
+    color: $color-panel-text;
+    padding-left: 15px;
+    padding-top: 2px;
+}
+.mastertrack{
+    -webkit-box-flex: 0;
+    color: white;
+    height: 20px;
+    width: 100%;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+    border-bottom-color: $color-divider-third;
+    background-color: $color-divider-first;
+    background-image: url("../../Track.reel/images/gridline.jpg");
+}
+
+.container-tracks,
+.timelinemarkers,
+.mastertrack {
+        width: 2000px;
+}
+.userlayers{
+    width: 100%;
+    background-color: $color-tool-bg;
+    -webkit-box-flex: 1;
+    overflow: hidden;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+    border-bottom-color: $color-divider-second;
+}
+.timelinegutter{
+    height: 16px;