--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/remie/static/remie/css/markers.css	Tue Sep 08 10:42:01 2015 +0200
@@ -0,0 +1,212 @@
+@font-face {
+    font-family: Open-Sans-Light; /*a name to be used later*/
+    src: url(../fonts/Open_Sans/OpenSans-Light.ttf); /*URL to font*/
+}
+
+html, body{
+    margin:0;
+    padding:6px;
+}
+
+#media_panel{
+	margin: auto;
+	width: 55%;
+}
+
+#player_container{
+    height: 380px;
+ 	width: 625px;
+}
+
+.Ldt-Widget{ 
+    font-family: Open-Sans-Light;
+}
+
+/* ----------------------------------------------- */
+/* ----------------- Media Panel ----------------- */
+/* ----------------------------------------------- */
+
+#player_container_widget_Markers_7{
+    width: 560px !important;
+    height: 50px !important;
+    margin: 0 40px !important;
+    top: -35px;
+}
+
+#player_container_widget_Markers_7 .Ldt-Markers-Position{
+    margin-left: -2px;
+    width: 4px;
+    background-color: #5a5a5a;
+}
+
+/* -------- Override video player style -------- */
+
+#player_container_widget_Slider_3{
+    height: 15px;
+    margin: 5px 0 0 40px;
+    width: 560px !important;
+}
+
+#player_container_widget_Slider_3 .Ldt-Slider{
+    height: 15px !important;
+}
+
+#player_container_widget_Controller_5 .Ldt-Ctrl{
+    background: none;
+    border: none;
+}
+
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-spacer,
+.Ldt-Ctrl .Ldt-Ctrl-Right .Ldt-Ctrl-spacer{
+    background: none;
+}
+
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play{
+    border: 3px solid grey;
+    border-radius: 100%;
+    margin: 8px 0 0 1px;
+    padding: 1px;
+    width: 25px;
+}
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play-PlayState {
+    background-position: 0 1px;
+}
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play-PlayState:hover {
+    background-position: 0 -24px;
+}
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play-PauseState {
+    background-position: -31px 1px;
+}
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play-PauseState:hover {
+    background-position: -31px 26px;
+}
+
+.Ldt-Ctrl .Ldt-Ctrl-Right .Ldt-Ctrl-Sound {
+    margin: 12px 4px 0 2px;
+}
+
+/* .Ldt-Ctrl-Right .Ldt-Ctrl-Time{ */
+/*     display: none; */
+/* } */
+
+.Ldt-Markers-Display, .Ldt-Markers-List {
+    display: block;
+    height: 100% !important;
+}
+
+.Ldt-Markers-Marker{
+    border:none !important;
+    height: 0 !important;
+}
+
+.Ldt-Markers-MarkerBall {
+    background-color: #1abacc !important;
+    border: 3px solid white !important;
+    border-radius: 50% !important;
+    height: 25px !important;
+    left: -14px !important;
+    top: 10px !important;
+    width: 25px !important;
+    z-index: 99999;
+}
+.Ldt-Markers-MarkerBall:hover,
+.Ldt-Markers-MarkerBall.selected {
+    border-color: #5a5a5a !important;
+}
+
+.Ldt-Markers-Create {
+    background-color: #1abacc !important;
+    border-color: #1abacc !important;
+    font-size: 39px !important;
+    font-weight: bold;
+    line-height: 20px !important;
+}
+.Ldt-Markers-Create:hover {
+    border-color: #5a5a5a !important;
+}
+
+.Ldt-Markers-MarkerEdit .Ldt-Markers-Buttons{
+    width: auto;
+} 
+
+.Ldt-Markers-Buttons .Ldt-Markers-MarkerSend{
+    background-color: #a2cf18;
+}
+.Ldt-Markers-Buttons .Ldt-Markers-MarkerCancel{
+    background-color: #CD000B;
+}
+
+.Ldt-Markers-Buttons div{
+    background: inherit;
+    border: none;
+    background-color: #848484;
+    font-family: Open-Sans-Light;
+    font-size: 14px;
+    border-radius: 0 0 3px 0;
+    margin: 5px 5px 0 0;
+}
+
+.Ldt-Markers-Buttons div:hover{
+    background-color: #b7b7b7;
+}
+
+.Ldt-Markers-MarkerEdit textarea.Ldt-Markers-MarkerTextArea,
+.Ldt-Markers-Info .Ldt-Markers-MarkerDescription {
+    border-color: #848484 !important;
+    border-radius: 0;
+    border-width: 2px;
+    font-family: Open-Sans-Light;
+    min-height: 100px;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    max-width: none;
+}
+
+.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Create {
+    display: block;
+    float: left;
+    left: -38px;
+    margin: 0;
+    position: relative;
+    top: 15px;
+    width: 22px;
+    height: 22px;
+}
+
+#player_container_widget_Markers_7 .Ldt-Markers-Inputs{
+    background-color: rgba(225, 225, 225, 0);
+}
+
+.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Info {
+    position: absolute;
+    left: 0;
+    width: 100%;
+}
+
+.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Info .Ldt-Markers-MarkerEdit,
+.Ldt-Markers-Info .Ldt-Markers-MarkerDescription{
+    margin: 10px 0 0;
+}
+
+/* -------- Override Segments-List style -------- */
+
+/* .Ldt-Segments-List .Ldt-Segments-Segment{ */
+/*     background-color: #848484 !important; */
+/*     border: none; */
+/*     height: 50px !important; */
+/*     outline: 5px solid #ffffff; */
+/*     cursor: pointer; */
+/* } */
+
+/* .Ldt-Segments-List .Ldt-Segments-Segment:hover{ */
+/*     background-color: #a2a2a2 !important; */
+/* } */
+
+/* .Ldt-Segments-Segment.selected:hover{ */
+/*     background-color: #a2cf18 !important; */
+/* } */
+
+/* .Ldt-Segments-Segment.selected{ */
+/*     background-color: #a2cf18 !important; */
+/* } */
\ No newline at end of file

--- a/server/src/remie/static/remie/css/style.css	Mon Sep 07 17:39:52 2015 +0200
+++ b/server/src/remie/static/remie/css/style.css	Tue Sep 08 10:42:01 2015 +0200
@@ -48,17 +48,29 @@
 
 /* -------- Override CurrentSegment style -------- */
 
+
 #CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox,
 #LatestAnnotation_container .Ldt-LatestAnnotation{
     background: inherit;
-    background-color: #F3F7F8;
     border:none;
     margin:0;
     color: #848484;
-    padding: 1px;
     display: table-cell;
 }
 
+#LatestAnnotation_container .Ldt-LatestAnnotation{
+    background-color: #F3F7F8;
+}
+
+#CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox{
+    position: relative;
+    background-color: #F3F7F8;
+}
+
+#CurrentSegmentInfobox_container.editing .Ldt-CurrentSegmentInfobox{
+    background-color: #FFFFFF;
+    padding-bottom: 40px;
+}
 
 .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-NoSegment{
     color: #C0C0C0;
@@ -76,21 +88,58 @@
 
 .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-NoSegment,
 .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Title{
-    background-color: #F3F7F8;
+    background-color: #F3F7F8 !important;
+    position: relative;
     border: none;
     height: 40px;
     line-height: 40px;
     font-family: Open-Sans-Light;
     position: absolute;
-    left: 12px;
-    top: 12px;
+    left: -655px;
+    top: 0;
     width: 640px;
     margin:0;
     font-weight: normal;
-    
     text-indent:10px;
 }
 
+#CurrentSegmentInfobox_container.editing .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Title{
+    background: #ffffff !important;
+    border: 2px solid #848484;
+}
+
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton {
+    float: left;
+    position: absolute;
+    bottom: 0;
+    height: 27px;
+    line-height: 27px;
+    margin: 10px 0 0;
+    width: 86px;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton:before {
+    visibility: visible;
+    content: "X";
+    padding: 4px;
+    cursor: pointer;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton {
+    display: inline-block;
+    visibility: hidden;
+}
+
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton {
+    background-color: #a2cf18 !important;
+}
+
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton {
+    background-color: #cd000b !important;
+    left: 95px;
+}
+
 .Ldt-CurrentSegmentInfobox-Tags-Ul{
     padding:0;
 }
@@ -133,7 +182,9 @@
 .Ldt-LatestAnnotation-box .Ldt-LatestAnnotation-CopyEditButton,
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowAnnotationsListButton,
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowCreateAnnotationButton,
-.Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main input {
+.Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main input,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton {
     background: inherit;
     border: none;
     background-color: #848484;
@@ -160,7 +211,7 @@
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowAnnotationsListButton,
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowCreateAnnotationButton {
     height: 27px;
-    margin: 0 7px 0 0;
+    margin: 0 5px 0 0;
     padding-top: 0px;
     width: 80px;
     float: left;
@@ -210,14 +261,15 @@
     margin-top: 30px;
 }
 
+#CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox textarea,
 .Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main textarea{
-    border-color: #848484 !important;
-    border-width: 2px;
+    border: 2px solid #848484;
     border-radius: 0;
     padding: 10px;
     min-height: 100px;
     font-family: Open-Sans-Light;
     width: 100%;
+    margin: 0;
 }
 
 .Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main .Ldt-CreateAnnotation-Avatar{
@@ -282,8 +334,15 @@
 }
 
 .Ldt-AnnotationsListWidget .Ldt-AnnotationsList-Filters{
-    margin-top: 20px;
+    margin-top: 10px;
     display: block;
+    padding-bottom: 30px;
+}
+
+.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-text{
+    position: relative;
+    float: right;
+    top: 30px;
 }
 
 /* ----------------------------------------------- */
@@ -329,7 +388,7 @@
 
 #player_container_widget_Slider_3{
     height: 15px;
-    margin: 10px 0 0 40px;
+    margin: 5px 0 0 40px;
     width: 560px !important;
 }
 
@@ -353,4 +412,4 @@
 
 .Ldt-Ctrl .Ldt-Ctrl-Right .Ldt-Ctrl-Sound {
     margin: 10px 4px 0 2px;
-}
\ No newline at end of file
+}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/remie/static/remie/css/teacher.css	Tue Sep 08 10:42:01 2015 +0200
@@ -0,0 +1,24 @@
+.Ldt-CurrentSegmentInfobox-Tags-Li .Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton{
+    width: 20px;
+    color: #747474;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li .Ldt-CurrentSegmentInfobox-Tags-Li-Input{
+    border: none;
+    background: none;
+    font-size: 17px;
+    font-weight: lighter;
+}
+
+#CurrentSegmentInfobox_container.editing .Ldt-CurrentSegmentInfobox-Tags-Li{
+    background-color: #f0f5f6 !important;
+    margin-left: 0 !important;
+}
+
+.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Tags .Ldt-CurrentSegmentInfobox-Tags-Ul{
+    margin-left: 0;
+}
+
+.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Tags {
+    margin-left: 0;
+}
\ No newline at end of file

--- a/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css	Mon Sep 07 17:39:52 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css	Tue Sep 08 10:42:01 2015 +0200
@@ -125,4 +125,10 @@
 
 .Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton:hover{
 	color: #e16e93
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagInput{
+    border: 2px solid #848484;
+    margin: 5px 0;
+    padding: 4px;
 }
\ No newline at end of file

--- a/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js	Mon Sep 07 17:39:52 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js	Tue Sep 08 10:42:01 2015 +0200
@@ -13,7 +13,8 @@
     project_id: false,
     api_serializer: "ldt_annotate",
     api_method: "PUT",
-    api_endpoint_template: ""
+    api_endpoint_template: "",
+    new_tag_button: true,
 };
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = 
@@ -41,8 +42,13 @@
     +     '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>'
     +     '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>'
     +     '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>'
-    +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'       
+    +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
+    +     '{{#new_tag_button}}'
     +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>'
+    +     '{{/new_tag_button}}'
+    +     '{{^new_tag_button}}'
+    +         '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>'
+    +     '{{/new_tag_button}}'
     +         '{{#tags.length}}'
     +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
     +         '{{#tags}}'
@@ -111,6 +117,7 @@
 }
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() {
+    var _this = this;
     if(this.currentSegment){
         _data = {
             title: this.currentSegment.title,
@@ -119,11 +126,17 @@
             submit : this.l10n.submit,
             cancel : this.l10n.cancel,
             new_tag : this.l10n.new_tag,
-            delete_tag : this.l10n.delete_tag
+            delete_tag : this.l10n.delete_tag,
+            new_tag_button : this.new_tag_button,
         }
+        this.$.toggleClass("editing", true);
         this.$.html(Mustache.to_html(this.editTemplate, _data));
         this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode"));
-        this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput"));
+        if (this.new_tag_button){
+            this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput"));            
+        } else {
+            this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress"));            
+        }
         this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
         this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit"))
     }
@@ -136,6 +149,7 @@
             description : this.currentSegment.description,
             tags : this.currentSegment.getTagTexts()
         }
+        this.$.toggleClass("editing", false);
         this.$.html(Mustache.to_html(this.template, _data));
         this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); 
     }
@@ -153,6 +167,23 @@
     this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
 }
 
+IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInputKeypress = function(event) {
+    var keycode = (event.keyCode ? event.keyCode : event.which);
+    if(keycode == '13'){
+        if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){
+            this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>')
+        }
+        this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
+            '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+            +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="'+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val() +'"></input>'
+            +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>'
+            +'</li>');
+        this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
+        this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val("");
+        return false;
+    }
+}
+
 IriSP.Widgets.CurrentSegmentInfobox.prototype.deleteTagInput = function(clickEvent) {
     $(clickEvent.currentTarget).parent().remove();
 }

--- a/server/src/remie/static/remie/metadataplayer/Markers.js	Mon Sep 07 17:39:52 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/Markers.js	Tue Sep 08 10:42:01 2015 +0200
@@ -308,8 +308,11 @@
                if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
                   // if there either is no marker selected or we click a different marker
                   list_$.find(".Ldt-Markers-MarkerBall").css("background-color", _this.marker_color)
+                  list_$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false);
+                  _el.children().toggleClass("selected", true);
                   _el.children().css("background-color", _this.selected_color)
                   _this.selectedMarker = _marker;
+                  
                   _divHtml = Mustache.to_html(_this.infoTemplate, {
                       edit: false,
                       marker_info: _marker.description,
@@ -328,6 +331,7 @@
                    var _divHtml = ""
                    _el.children().css("background-color", _this.hover_color);
                    _this.selectedMarker = false;
+                   list_$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false);
                    _this.$.find(".Ldt-Markers-Info").html(_divHtml);
                    _this.$.find(".Ldt-Markers-Create").show();
                    _this.$.find(".Ldt-Markers-Delete").hide();

--- a/server/src/remie/templates/remie/iframe_markers.html	Mon Sep 07 17:39:52 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_markers.html	Tue Sep 08 10:42:01 2015 +0200
@@ -2,7 +2,7 @@
 <html>
 <head>
 <title>Test</title>
-<!-- <link rel="stylesheet" type="text/css" href="{% static 'remie/css/style.css' %}" /> -->
+<link rel="stylesheet" type="text/css" href="{% static 'remie/css/markers.css' %}" />
 <script type="text/javascript" src="{% static 'remie/js/jquery-1.11.2.min.js' %}"></script>
 </head>
 <body>

--- a/server/src/remie/templates/remie/iframe_teacher.html	Mon Sep 07 17:39:52 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_teacher.html	Tue Sep 08 10:42:01 2015 +0200
@@ -3,6 +3,7 @@
 <head>
 <title>Test</title>
 <link rel="stylesheet" type="text/css" href="{% static 'remie/css/style.css' %}" />
+<link rel="stylesheet" type="text/css" href="{% static 'remie/css/teacher.css' %}" />
 <script type="text/javascript" src="{% static 'remie/js/jquery-1.11.2.min.js' %}"></script>
 </head>
 <body>
@@ -156,6 +157,7 @@
           editable_segments: true,
           project_id : "{{project_id}}",
           api_endpoint_template: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}",
+          new_tag_button: false,
         }
         
       ]