Merge branch 'refs/heads/NinjaInternal' into FileIO

Conflicts:
	js/ninja.reel/ninja.html
	js/stage/stage.reel/stage.html

1 files changed, 251 insertions, 0 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
new file mode 100644
index 00000000..cbae49c8
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -0,0 +1,251 @@
+.tl_container{
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    height: 100%;
+}
+.maintimeline{
+    border-style: double;
+    -webkit-box-flex: 1;
+    display: -webkit-box;
+    -webkit-box-orient: horizontal
+    height : 100%;
+}
+.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: #222;
+    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: #333;
+    border-right-width: thin;
+    border-left-style: solid;
+    border-left-color: #000;
+    border-left-width: thin;
+    background-color: #222;
+    cursor: col-resize;
+    -webkit-box-flex: 0;
+}
+.timelinecontroller{
+    height:20px;
+    background-color: #222;
+    -webkit-box-flex: 0;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+    border-bottom-color: #000;
+}
+.timelinecontrols{
+    width: 100%;
+    padding-left: 6px;
+    padding-top: 2px;
+    height: 18px;
+    background-color: #222;
+    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: #222;
+    border-bottom-style:  solid;
+    border-bottom-width: thin;
+    border-bottom-color: #000;
+    -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: #474747;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+    border-bottom-color: #555;
+    color: white;
+    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: #444;
+    background-color: #222;
+    background-image: url("../../Track.reel/images/gridline.jpg");
+}
+
+.container-tracks,
+.timelinemarkers,
+.mastertrack {
+        width: 2000px;
+}
+.userlayers{
+    width: 100%;
+    background-color: #222;
+    -webkit-box-flex: 1;
+    overflow: hidden;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+    border-bottom-color: #000;
+}
+.timelinegutter{
+    height: 16px;
+    padding-top: 1px;
+    padding-left: 6px;
+    -webkit-box-flex: 0;
+    background-color: #222;
+    border-top-style: solid;
+    border-top-width: thin;
+    border-top-color: #444;
+}
+.newlayerbutton{
+    background-image: url('../images/plus.png');
+    background-repeat: no-repeat;
+    height: 16px;
+    width: 16px;
+    float: left;
+    padding-right: 5px;
+}
+.deletelayerbutton{
+    background-image: url('../images/trash.png');
+    background-repeat: no-repeat;
+    height: 16px;
+    width: 16px;
+    float: left;
+    padding-right: 5px;
+}
+.tracktick{
+    height: 100%;
+    width: 15px;