lines-engine 0.1.3

data/app/assets/javascripts/lines/admin.js

@@ -0,0 +1,201 @@
+//= require jquery
+//= require jquery_ujs
+//= require jquery.ui.all
+//= require autocomplete-rails
+//= require jquery-fileupload/basic
+//= require jquery-fileupload/vendor/tmpl
+//= require lines/pictures
+//= require lines/autosize.min
+
+// Function to insert uploaded pictures into the content at cursor position
+jQuery.fn.extend({
+  insertAtCaret: function(myValue){
+    return this.each(function(i) {
+      if (document.selection) {
+        //For browsers like Internet Explorer
+        this.focus();
+        sel = document.selection.createRange();
+        sel.text = myValue;
+        this.focus();
+      }
+      else if (this.selectionStart || this.selectionStart == '0') {
+        //For browsers like Firefox and Webkit based
+        var startPos = this.selectionStart;
+        var endPos = this.selectionEnd;
+        var scrollTop = this.scrollTop;
+        this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
+        this.focus();
+        this.selectionStart = startPos + myValue.length;
+        this.selectionEnd = startPos + myValue.length;
+        this.scrollTop = scrollTop;
+      } else {
+        this.value += myValue;
+        this.focus();
+      }
+    });
+  }
+});
+
+$(document).ready(function() {
+  // Deactivate OnBeforeUnload on submit button
+  // You can add even more buttons, just add the class or id of the button/link
+  // All buttons/links which are listed below will not produce a "Warning"-Alert on leaving the page when something has changed but not saved
+  $('.btn-save-publish').click(function() {
+    window.onbeforeunload = null;
+  });
+
+  // Autogrow and -shrink the content text box while typing
+  // This allows the user to see the whole text copy all the time
+  $('#article_content').autosize();
+
+  // Close error notification
+  $('#error_explanation, .close').on('click', function(e){
+    $('#error_explanation').slideUp();
+  });
+  
+  // Insert image into content of the post
+  $(document.body).on('click', ".insert-image",  function(e){
+    var url = $(this).attr( 'data-url' );
+    var value = '\n![Alt text](' + url + ')\n';
+    $('#article_content').insertAtCaret(value);
+    e.preventDefault();
+  });
+
+  // Show datepicker
+  $(document).on("focus", "[data-behaviour~='datepicker']", function(e){
+    var altFormat = $(this).datepicker( "option", "altFormat" );
+    $(this).datepicker({dateFormat: "yy-mm-dd"});
+  });
+
+  // Select a default hero image
+  // Switch classes and preview the selected default image in the hero image canvas
+  $(".select_image").on('click', function(e){
+    e.preventDefault();
+    
+    bg_url = $(this).attr('src');
+    
+    $('.hero-image').css('background-image', 'url(' + bg_url + ')');
+    
+    if ($(this).hasClass('selected_image')) { // deselect selected short_hero image
+      $(".selected_image").removeClass('selected_image');
+      $("#article_short_hero_image, #article_hero_image_file").val('');
+    } else if ($(this).hasClass('uploaded_image')) { // select former uploaded hero_image
+      $(".selected_image").removeClass('selected_image');
+      //TODO: How to get the selected value?
+      $('#article_hero_image, #article_hero_image_cache, #article_short_hero_image').val('');
+      $('#article_hero_image_file').val(bg_url);
+    } else { // select short_hero_image image
+      var value = $(this).attr('src');
+      $('#article_hero_image_file, #article_hero_image, #article_hero_image_cache').val('');
+      $(".selected_image").removeClass('selected_image');
+      $(this).addClass("selected_image");
+      $("#article_short_hero_image").val(value);
+    }
+    $('#hero_image_name').text('');
+    $('.choose-file').html("Change Image");
+  });
+
+  // Unselect hero image on upload
+  // If a custom image is selected of the hard drive, the current selected default image will be unselected
+  $('#article_hero_image').on('change', function(e){
+    $(".selected_image").removeClass('selected_image');
+    $("#article_short_hero_image").val('');
+  });
+
+  // Scroll to the top of the page
+  $('.top_link').click(function(){
+    $("html, body").animate({ scrollTop: 0 }, 600);
+    return false;
+  });
+
+
+
+  // File Reader for hero image and document upload
+  // If you need more input fields like this, you need to add an event listener for every input field
+  // You also need to insert a case for every input inside of the "handleFiles" function below ($type_id)
+  if (window.File && window.FileList && window.FileReader) {
+    var hero_input      = document.getElementById('article_hero_image');  // Hero image input
+    var document_input  = document.getElementById('article_document');    // Document input
+    if (typeof(hero_input) !== 'undefined' && hero_input !== null && typeof(document_input) !== 'undefined' && document_input !== null) {
+      hero_input.addEventListener('change', handleFiles, false);          // Add listener to the hero image input
+      document_input.addEventListener('change', handleFiles, false);      // Add listener to the document input
+    }
+  } else {
+    alert("You need a browser with file reader support, to use this form properly.");
+  }
+
+  // This function handels the hero image & documents
+  // It generates a live preview (image/name) of the selected file
+  function handleFiles(event) {
+    var files   = event.target.files;       // Get current file
+    var type_id = event.currentTarget.id;   // Get the # of the current input field
+
+    if (files.length > 0) {
+      var file = files[0];
+      var reader = new FileReader();
+
+      // Check format
+      if (type_id == 'article_hero_image') {
+        if (!file.type.match('image')) {
+          return false;
+        }
+      } else if (type_id == 'article_document') {
+        // Nothing to do here yet ...
+      }
+
+      // Load file
+      reader.addEventListener("load",function(event) {
+        var loadedFile = event.target;
+
+        // Change labels, background and so on
+        // Different action depending on the type_id
+        if (type_id == 'article_hero_image') {
+          $('.hero-image').css("background-image","url("+loadedFile.result+")");
+          $('.hero-image').css("background-size","cover");
+
+          $('.choose-file').html("Change Image");
+          $('.short-hero-images').append("<div class=\"short-hero-image-box\"><img src=\""+loadedFile.result+"\" width=\"115\" class=\"select_image uploaded_image\" /></div>");
+        } else if (type_id == 'article_document') {
+          $('.choose-files').html(file.name);
+        }
+      });
+
+      // Read the file
+      reader.readAsDataURL(file);
+    } else {
+      // Change labels, background and so on
+      // Different action depending on the type_id
+      if (type_id == 'article_hero_image') {
+        $('.choose-file').html("Choose Image");
+        $('.hero-image').css("background-image","none");
+      } else if (type_id == 'article_document') {
+        $('.choose-files').html("Choose File");
+      }
+    }
+  }
+
+  // Close notification boxes below the navbar
+  $('.alert').click(function(e){
+    e.preventDefault();
+    $(this).slideUp();
+  });
+
+  // Formatting Help functions
+  $('.btn-close-formatting').click(function() {
+    $('#formatting_guide').fadeOut();
+  });
+  $('.btn-close-formatting-small').click(function() {
+    $('#formatting_guide').fadeOut();
+  });
+  $('.btn-formatting-help').click(function() {
+    $('#formatting_guide').fadeIn();
+  });
+  
+  // Show security alert on unload only when something has changed
+  $('.edit_article input, .edit_article textarea, .new_article input, .new_article textarea').bind("keyup change", function() {
+    window.onbeforeunload = function() {
+      return 'You have NOT saved your article. Stop and save if you want to keep your changes.';
+    };
+  });
+
+});

data/app/assets/javascripts/lines/application.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs

data/app/assets/javascripts/lines/articles.js.coffee

@@ -0,0 +1,5 @@
+# Show Datepicker for Article#published_at form field
+jQuery ->
+  $('#article_published_at').datepicker
+    dateFormat: 'yy-mm-dd'
+

data/app/assets/javascripts/lines/autosize.min.js

@@ -0,0 +1,7 @@
+/*!
+	Autosize v1.17.1 - 2013-06-23
+	Automatically adjust textarea height based on user input.
+	(c) 2013 Jack Moore - http://www.jacklmoore.com/autosize
+	license: http://www.opensource.org/licenses/mit-license.php
+*/
+(function(e){var t,o={className:"autosizejs",append:"",callback:!1,resizeDelay:10},i='<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',n=["fontFamily","fontSize","fontWeight","fontStyle","letterSpacing","textTransform","wordSpacing","textIndent"],s=e(i).data("autosize",!0)[0];s.style.lineHeight="99px","99px"===e(s).css("lineHeight")&&n.push("lineHeight"),s.style.lineHeight="",e.fn.autosize=function(i){return i=e.extend({},o,i||{}),s.parentNode!==document.body&&e(document.body).append(s),this.each(function(){function o(){var o,a={};if(t=u,s.className=i.className,l=parseInt(h.css("maxHeight"),10),e.each(n,function(e,t){a[t]=h.css(t)}),e(s).css(a),"oninput"in u){var r=u.style.width;u.style.width="0px",o=u.offsetWidth,u.style.width=r}}function a(){var n,a,r,c;t!==u&&o(),s.value=u.value+i.append,s.style.overflowY=u.style.overflowY,a=parseInt(u.style.height,10),"getComputedStyle"in window?(c=window.getComputedStyle(u),r=u.getBoundingClientRect().width,e.each(["paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"],function(e,t){r-=parseInt(c[t],10)}),s.style.width=r+"px"):s.style.width=Math.max(h.width(),0)+"px",s.scrollTop=0,s.scrollTop=9e4,n=s.scrollTop,l&&n>l?(u.style.overflowY="scroll",n=l):(u.style.overflowY="hidden",d>n&&(n=d)),n+=p,a!==n&&(u.style.height=n+"px",w&&i.callback.call(u,u))}function r(){clearTimeout(c),c=setTimeout(function(){h.width()!==z&&a()},parseInt(i.resizeDelay,10))}var l,d,c,u=this,h=e(u),p=0,w=e.isFunction(i.callback),f={height:u.style.height,overflow:u.style.overflow,overflowY:u.style.overflowY,wordWrap:u.style.wordWrap,resize:u.style.resize},z=h.width();h.data("autosize")||(h.data("autosize",!0),("border-box"===h.css("box-sizing")||"border-box"===h.css("-moz-box-sizing")||"border-box"===h.css("-webkit-box-sizing"))&&(p=h.outerHeight()-h.height()),d=Math.max(parseInt(h.css("minHeight"),10)-p||0,h.height()),h.css({overflow:"hidden",overflowY:"hidden",wordWrap:"break-word",resize:"none"===h.css("resize")||"vertical"===h.css("resize")?"none":"horizontal"}),"onpropertychange"in u?"oninput"in u?h.on("input.autosize keyup.autosize",a):h.on("propertychange.autosize",function(){"value"===event.propertyName&&a()}):h.on("input.autosize",a),i.resizeDelay!==!1&&e(window).on("resize.autosize",r),h.on("autosize.resize",a),h.on("autosize.resizeIncludeStyle",function(){t=null,a()}),h.on("autosize.destroy",function(){t=null,clearTimeout(c),e(window).off("resize",r),h.off("autosize").off(".autosize").css(f).removeData("autosize")}),a())})}})(window.jQuery||window.Zepto);

data/app/assets/javascripts/lines/pictures.js.coffee

@@ -0,0 +1,21 @@
+# Listens to fileuploads for content pictures.
+# Displays a progressbar when an image is uploaded, and a preview 
+# thumbnail for the picture.
+jQuery ->
+  $('#new_picture').fileupload
+    dataType: "script"
+    add: (e, data) ->
+      types = /(\.|\/)(gif|jpe?g|png)$/i
+      file = data.files[0]
+      if types.test(file.type) || types.test(file.name)
+        data.context = $(tmpl("template-upload", file))
+        $('#new_picture').append(data.context)
+        data.submit()
+      else
+        alert("#{file.name} is not a gif, jpeg, or png image file")
+    progress: (e, data) ->
+      if data.context
+        progress = parseInt(data.loaded / data.total * 100, 10)
+        data.context.find('.bar').css('width', progress + '%')
+        if progress >= 100
+          $('.progress').fadeOut()

data/app/assets/stylesheets/lines/admin.css.scss

@@ -0,0 +1,970 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, libstylesheets, vendorstylesheets,
+ * or vendorstylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require jquery.ui.all
+ *= require lines/navbar
+ */
+
+@import url(//fonts.googleapis.com/css?family=Ubuntu+Mono|Cabin|Roboto|Roboto+Condensed);
+
+$darkgrey: #333;
+$lightgrey: #666;
+$orange: #e8581e;
+
+@mixin border-box() {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+@mixin addTransition($x) {
+  transition: all $x+s ease;
+  -o-transition: all $x+s ease;
+  -ms-transition: all $x+s ease;
+  -moz-transition: all $x+s ease;
+  -webkit-transition: all $x+s ease;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  &:active, &:focus {
+    outline: 0;
+  }
+}
+
+body {
+  background-color: #fbfbfb;
+  color: $darkgrey;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+}
+
+a {
+  text-decoration: none;
+}
+
+a.btn, input[type=submit].btn {
+  @include addTransition(0.3);
+}
+
+h1 {
+  font-family: 'Cabin', sans-serif;
+  font-size: 60px;
+  color: #919191;
+  letter-spacing: 0.03em;
+  margin: 50px 0px;
+  font-weight: normal;
+}
+
+h2 {
+  font-family: 'Cabin', sans-serif;
+  font-size: 20px;
+  color: #919191;
+  letter-spacing: 0.03em;
+  margin: 20px 0px;
+  text-transform: uppercase;
+  font-weight: normal;
+}
+
+hr {
+  border-bottom: 1px solid $lightgrey;
+}
+
+.clear {
+  clear: both;
+}
+
+
+#main {
+  .container {
+    width: 960px;
+    margin: 0 auto;
+    padding: 0px 15px;
+    .btn {
+      font-family: 'Cabin', sans-serif;
+      font-size: 16px;
+      color: #ffffff;
+      padding: 10px 15px;
+      letter-spacing: 0.03em;
+      cursor: pointer;
+      &.btn-new-article, &.btn-new-author {
+        background-color: $orange;
+        &:hover {
+          background-color: lighten($orange, 15%);
+        }
+      }
+      &.btn-authors, &.btn-view-blog {
+        background-color: #434343;
+      }
+      &.btn-publish {
+        background-color: $orange;
+        color: #d6d6d6;
+        &:hover {
+          background-color: lighten($orange, 15%);
+        }
+      }
+    }
+    .headline {
+      h1 {
+        float: left;
+      }
+    }
+    .articles-list {
+      margin-bottom: 60px;
+      .article {
+        border-bottom: 1px solid #cdcdcd;
+        width: 100%;
+        line-height: 53px;
+        &.published {
+          .title a, .title:hover a, .subtitle, .date {
+            color: #9f9f9f;
+          }
+        }
+        .preview {
+          width: 51px;
+          background: #f2f2f2 image-url('article-icons.png') no-repeat scroll 10px 18px;
+          cursor: pointer;
+          &:hover {
+            background: #f2f2f2 image-url('article-icons.png') no-repeat scroll -40px 18px;
+          }
+          a {
+            display: block;
+            height: 53px;
+            width: 51px;
+          }
+        }
+        .edit {
+          width: 51px;
+          background: #f2f2f2 image-url('article-icons.png') no-repeat scroll 15px -34px;
+          cursor: pointer;
+          &:hover {
+            background: #f2f2f2 image-url('article-icons.png') no-repeat scroll -35px -34px;
+          }
+          a {
+            display: block;
+            height: 53px;
+            width: 51px;
+          }
+        }
+        .title {
+          font-family: 'Roboto Condensed', sans-serif;
+          font-size: 19px;
+          letter-spacing: 0.03em;
+          width: 285px;
+          padding: 0px 20px;
+          overflow: hidden;
+          white-space: nowrap;
+          a {
+            color: $orange;
+            display: inline-block;
+            width: 100%;
+          }
+          &:hover {
+            a {
+              color: $darkgrey;
+            }
+          }
+        }
+        .subtitle {
+          font-family: 'Cabin', sans-serif;
+          font-size: 16px;
+          width: 285px;
+          padding: 0px 20px;
+          overflow:hidden;
+          white-space: nowrap;
+          a {
+            color: $darkgrey;
+            display: inline-block;
+            width: 100%;
+          }
+        }
+        .featured {
+          width: 35px;
+          input[type=submit] {
+            background: transparent image-url('article-icons.png') no-repeat scroll -94px -135px;
+            cursor: pointer;
+            display: block;
+            height: 53px;
+            width: 35px;
+            &:hover {
+              background: transparent image-url('article-icons.png') no-repeat scroll -44px -135px;
+            }
+          }
+          &.not input[type=submit] {
+            background: transparent image-url('article-icons.png') no-repeat scroll 6px -135px;
+            &:hover {
+              background: transparent image-url('article-icons.png') no-repeat scroll -44px -135px;
+            }
+          }
+        }
+        .date {
+          font-family: 'Cabin', sans-serif;
+          color: #b4b4b4;
+          font-size: 18px;
+          width: 120px;
+          text-align: center;
+        }
+        .delete {
+          width: 35px;
+          input[type=submit] {
+            background: transparent image-url('article-icons.png') no-repeat scroll 8px -85px;
+            cursor: pointer;
+            display: block;
+            height: 53px;
+            width: 35px;
+            &:hover {
+              background: transparent image-url('article-icons.png') no-repeat scroll -42px -85px;
+            }
+          }
+        }
+      }
+    }
+    .authors-list {
+      margin-bottom: 60px;
+      .author {
+        border-bottom: 1px solid #cdcdcd;
+        width: 100%;
+        line-height: 53px;
+        .show {
+          width: 51px;
+          background: #f2f2f2 image-url('article-icons.png') no-repeat scroll 10px 18px;
+          cursor: pointer;
+          &:hover {
+            background: #f2f2f2 image-url('article-icons.png') no-repeat scroll -40px 18px;
+          }
+          a {
+            display: block;
+            height: 53px;
+            width: 51px;
+          }
+        }
+        .edit {
+          width: 51px;
+          background: #f2f2f2 image-url('article-icons.png') no-repeat scroll 15px -34px;
+          cursor: pointer;
+          &:hover {
+            background: #f2f2f2 image-url('article-icons.png') no-repeat scroll -35px -34px;
+          }
+          a {
+            display: block;
+            height: 53px;
+            width: 51px;
+          }
+        }
+        .name {
+          font-family: 'Roboto Condensed', sans-serif;
+          font-size: 19px;
+          letter-spacing: 0.03em;
+          width: 285px;
+          padding: 0px 20px;
+          a {
+            color: $orange;
+            display: inline-block;
+            width: 100%;
+          }
+          &:hover {
+            a {
+              color: $darkgrey;
+            }
+          }
+        }
+        .email {
+          font-family: 'Cabin', sans-serif;
+          font-size: 16px;
+          width: 285px;
+          padding: 0px 20px;
+          a {
+            color: $darkgrey;
+            display: inline-block;
+            width: 100%;
+          }
+        }
+        .delete {
+          width: 35px;
+          input[type=submit] {
+            background: transparent image-url('article-icons.png') no-repeat scroll 8px -85px;
+            cursor: pointer;
+            display: block;
+            height: 53px;
+            width: 35px;
+            &:hover {
+              background: transparent image-url('article-icons.png') no-repeat scroll -42px -85px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.new-article, .new-author {
+  margin-bottom: 120px;
+  hr {
+    border-bottom: 1px solid #E2E3E4;
+    margin-bottom: 30px;
+  }
+  .row {
+    width: 100%;
+    margin-bottom: 30px;
+    &:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    .label {
+      float: left;
+      width: 140px;
+      font-family: 'Roboto Condensed', sans-serif;
+      font-size: 17px;
+      color:#434343;
+      h3 {
+        padding: 10px 0px;
+        font-weight: normal;
+        letter-spacing: 0.03em;
+        .required {
+          color: #f00;
+        }
+      }
+    }
+    &.show {
+      .input {
+        padding-top: 15px;
+        font-size: 16px;
+      }
+    }
+    .input {
+      float: left;
+      width: 540px;
+      a {
+        color: $orange;
+      }
+      .hero-image {
+        background: #f1f2f2;
+        background-size: cover;
+        background-position: center center;
+        border: 1px solid #e2e3e4;
+        height: 298px;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
+        @include border-box();
+        .choose-file {
+          display: block;
+          margin: 0 auto;
+          position: relative;
+          background-color: rgba(147,147,147,0.5);
+          color: #ffffff;
+          font-size: 19px;
+          width: 210px;
+          height: 80px;
+          line-height: 80px;
+          text-transform: uppercase;
+          text-align: center;
+          cursor: pointer;
+          @include addTransition(0.3);
+          margin-top: 110px;
+          &:hover {
+            background-color: lighten(rgba(147,147,147,0.5), 15%);
+          }
+        }
+        .hidden {
+          display: none;
+        }
+        .hero-image-value {
+          position: absolute;
+          left: 0;
+          right: 0;
+          margin-left: auto;
+          margin-right: auto;
+          width: 210px;
+          height: 80px;
+          line-height: 80px;
+          font-size: 80px;
+          overflow: hidden;
+          cursor: pointer;
+          top: 110px;
+          opacity: 0;
+        }
+        &:hover {
+          label {
+            background: lighten(rgba(147,147,147,0.5), 20%);
+          }
+        }
+      }
+      input[type="text"] {
+        background: transparent;
+        border-bottom: 1px solid #e2e3e4;
+        @include border-box();
+        height: 44px;
+        width: 100%;
+        color: #5e5e5e;
+        padding: 0px 10px;
+        line-height: 43px;
+        font-size: 16px;
+        font-family: 'Ubuntu Mono';
+        &.article-title, &.article-subtitle {
+          font-size: 20px;
+        }
+      }
+      textarea {
+        font-family: 'Ubuntu Mono';
+        background: transparent;
+        border-bottom: 1px solid #e2e3e4;
+        @include border-box();
+        height: 44px;
+        width: 100%;
+        color: #5e5e5e;
+        padding: 10px;
+        font-size: 16px;
+        line-height: 22px;
+        resize: none;
+        min-height: 208px;
+      }
+      > .checkbox {
+        display: inline-block;
+        width: 260px;
+        margin-top: 25px;
+        input[type=checkbox] {
+          display: none;
+        }
+        &.first-row {
+          margin-top: 0px;
+        }
+        .checkbox {
+          color: #939393;
+        }
+        input[type=checkbox] + label span {
+          display:inline-block;
+          width:15px;
+          height:15px;
+          background: transparent image-url('checkbox-icon.png') no-repeat right top;
+          cursor: pointer;
+          margin: -2px 10px 0px 0px;
+        }
+        input[type=checkbox]:checked + label span {
+          background: transparent image-url('checkbox-icon.png') no-repeat left top;
+        }
+      }
+      .documents {
+        position: relative;
+        cursor: pointer;
+        .choose-files {
+          @include addTransition(0.3);
+          border: 1px solid #ebebeb;
+          background-color: #f2f2f2;
+          width: 100%;
+          @include border-box();
+          height: 43px;
+          text-align: center;
+          color: $darkgrey;
+          cursor: pointer;
+          display: block;
+          line-height: 43px;
+          font-size: 15px;
+          text-transform: uppercase;
+        }
+        .hidden {
+          display: none;
+        }
+        .article-document-value {
+          height: 45px;
+          width: 100%;
+          font-size: 45px;
+          line-height: 45px;
+          cursor: pointer;
+          overflow: hidden;
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          opacity: 0;
+        }
+        &:hover {
+          .choose-files {
+            background-color: darken(#f2f2f2, 15%);
+          }
+        }
+      }
+      &.input-text {
+        position: relative;
+        &:before {
+          width: 1px;
+          height: 10px;
+          content: "";
+          position: absolute;
+          bottom: 0px;
+          left: 0px;
+          background-color: #e2e3e4;
+          z-index: 1000;
+        }
+        &:after {
+          width: 1px;
+          height: 10px;
+          content: "";
+          position: absolute;
+          bottom: 0px;
+          right: 0px;
+          background-color: #e2e3e4;
+          z-index: 10;
+        }
+      }
+      &.input-textarea {
+        position: relative;
+        &:before {
+          width: 1px;
+          height: 10px;
+          content: "";
+          position: absolute;
+          bottom: 4px;
+          left: 0px;
+          background-color: #e2e3e4;
+          z-index: 1000;
+        }
+        &:after {
+          width: 1px;
+          height: 10px;
+          content: "";
+          position: absolute;
+          bottom: 4px;
+          right: 0px;
+          background-color: #e2e3e4;
+          z-index: 10;
+        }
+      }
+    }
+    .additional {
+      width: 260px;
+      float: left;
+      margin-left: 20px;
+      label {
+        color: #939393;
+        margin-bottom: 5px;
+        display: inline-block;
+      }
+      .btn-formatting-help {
+        color: $orange;
+        display: inline-block;
+        margin-top: 10px;
+        text-transform: uppercase;
+        @include addTransition(0.3);
+        &:hover {
+          color: darken($orange, 15%);
+        }
+      }
+      .add-new-author {
+        text-transform: uppercase;
+        color: $orange;
+        @include addTransition(0.3);
+        &:hover {
+          color: darken($orange, 15%);
+        }
+      }
+      img {
+        cursor: pointer;
+      }
+      .short-hero-images-box {
+        h2 {
+          margin: 0;
+        }
+        .short-hero-images {
+          height: 275px;
+          overflow-y: scroll;
+          &::-webkit-scrollbar {
+              width: 5px;
+              position: absolute;
+          }
+           
+          &::-webkit-scrollbar-track {
+              -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); 
+              border-radius: 10px;
+          }
+           
+          &::-webkit-scrollbar-thumb {
+              border-radius: 10px;
+              background-color: rgba(0,0,0,0.3);
+          }
+          .short-hero-image-box {
+            width: 230px;
+            height: 130px;
+            overflow: hidden;
+            display: block;
+            margin-bottom: 2px;
+            float: left;
+            img {
+              min-width: 230px;
+              min-height: 130px;
+            }
+          }
+        }
+        br {
+          display: none;
+        }
+      }
+    }
+    .btn-save, .btn-cancel {
+      background: #434343;
+      margin-right: 20px;
+      color: #d6d6d6;
+      margin-top: 30px;
+      text-transform: uppercase;
+      &:hover {
+        background: lighten(#434343, 15%);
+      }
+    }
+    .btn-save-publish {
+      text-transform: uppercase;
+      margin-right: 20px;
+      margin-top: 30px;
+      color: #d6d6d6;
+      background: $orange;
+      &:hover {
+        background: lighten($orange, 15%);
+      }
+    }
+    .hidden {
+      display: none;
+    }
+  }
+}
+
+.span12 > .row {
+  position: relative;
+  .picture-box {
+    position: absolute;
+    top: 560px;
+    right: 0px;
+    width: 260px;
+    h2 {
+      margin-top: 0px;
+    }
+    .picture-preview, #pictures .picture-preview {
+      float: left;
+      margin-right: 28px;
+      width: 92px;
+      overflow: hidden;
+      position: relative;
+      cursor: pointer;
+      .picture {
+        width: 92px;
+        height: 92px;
+        overflow: hidden;
+        img {
+          min-height: 92px;
+          min-width: 92px;
+        }
+      }
+      .insert-image {
+        background: transparent image-url('article-icons.png') no-repeat scroll 0px -194px;
+        width: 15px;
+        height: 30px;
+        display: inline-block;
+        float: left;
+        &:hover {
+          background: transparent image-url('article-icons.png') no-repeat scroll -50px -194px;
+        }
+      }
+      .btn-delete-photo {
+        background: transparent image-url('article-icons.png') no-repeat scroll 0px -244px;
+        width: 12px;
+        height: 30px;
+        display: inline-block;
+        float: right;
+        cursor: pointer;
+        &:hover {
+          background: transparent image-url('article-icons.png') no-repeat scroll -50px -244px;
+        }
+      }
+      .upload {
+        display: block;
+        width: 100%;
+        height: 3px;
+        margin-top: 5px;
+        .progress {
+            height: 3px;
+          .bar {
+            height: 3px;
+            background-color: $orange;
+          }
+        }
+      }
+      #picture_image {
+        position: absolute;
+        height: 92px;
+        width: 92px;
+        font-size: 92px;
+        line-height: 92px;
+        top: 0px;
+        left: 0px;
+        cursor: pointer;
+        opacity: 0;
+      }
+      img {
+        border: 1px solid #e2e3e4;
+        height: 90px;
+        cursor: pointer;
+        @include addTransition(0.3);
+      }
+      &:hover {
+        img {
+          border: 1px solid darken(#e2e3e4, 20%);
+        }
+      }
+    }
+  }
+}
+
+.alert {
+  width: 100%;
+  padding: 10px 0px;
+  text-align: center;
+  top: 60px;
+  left: 0px;
+  position: absolute;
+  overflow: hidden;
+  color: #fff;
+  &.alert-error {
+    border-bottom: 1px solid #ff0000;
+    background: rgba(130, 0, 0, 0.9);
+    .close {
+      background-color: #FFFFFF;
+      border: 1px solid #AA0000;
+    }
+  }
+  &.alert-success {
+    border-bottom: 1px solid #00ff00;
+    background: rgba(0,130,0,0.9);
+    .close {
+      background-color: #FFFFFF;
+      border: 1px solid #00AA00;
+    }
+  }
+  .close {
+    font-size: 24px;
+    height: 25px;
+    line-height: 25px;
+    position: absolute;
+    right: -1px;
+    text-align: center;
+    top: -1px;
+    width: 25px;
+    color: $darkgrey;
+    cursor: pointer;
+  }
+}
+
+#error_explanation {
+  position: fixed;
+  z-index: 9999;
+  top: 60px;
+  left: 0px;
+  width: 100%;
+  border-bottom: 1px solid #f00;
+  background: rgba(130,0,0,0.9);
+  padding-bottom: 10px;
+  color: #fff;
+  overflow: hidden;
+  h2 {
+    color: #fff;
+    text-align: center;
+  }
+  ul {
+    width: 935px;
+    padding-left: 25px;
+    margin: 0 auto;
+  }
+  .close {
+    background-color: #FFFFFF;
+    border-bottom: 1px solid #ff0000;
+    border-left: 1px solid #ff0000;
+    font-size: 24px;
+    height: 25px;
+    line-height: 25px;
+    position: absolute;
+    right: 0px;
+    text-align: center;
+    top: 0px;
+    width: 25px;
+    color: $darkgrey;
+    cursor: pointer;
+  }
+}
+
+#formatting_guide {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  background: rgba(255,255,255,0.5);
+  display: none;
+  p, pre {
+    padding-bottom: 10px;
+  }
+  .formatting_guide_inner {
+    background: #ffffff;
+    box-shadow: 0px 0px 20px $lightgrey;
+    border-radius: 3px;
+    position: fixed;
+    width: 50%;
+    height: 50%;
+    overflow-y: scroll;
+    margin: auto;
+    padding: 20px;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    .btn-close-formatting {
+      background: #434343;
+      color: #d6d6d6;
+      margin-top: 30px;
+      text-transform: uppercase;
+      &:hover {
+        background: lighten(#434343, 15%);
+      }
+    }
+    .btn-close-formatting-small {
+      background: #434343;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+    }
+  }
+}
+
+.pagination {
+  display:block;
+  overflow:visible;
+  margin:0px auto;
+  width:100%;
+  text-transform:uppercase;
+  font-size:1.500em;
+  padding: 30px 0 0 0;
+  text-align:center;
+  position:relative;
+  a {
+    color:$lightgrey;
+  }
+  a:hover {
+    color:$darkgrey;
+  }
+  .newer, .older {
+    position:absolute;
+    display:inline-block;
+  }
+  .newer {left:0px;}
+  .older {right:0px;}
+  .prev a, .first a {
+    float:left;
+    background:image-url('ic_arrow_left.png') top left no-repeat;
+    padding: 8px 0px 10px 50px;
+  }
+  .next a, .last a {
+    float:right;
+    background:image-url('ic_arrow_right.png') top right no-repeat;
+    padding: 8px 50px 10px 0px;
+  }
+
+  .pages {
+    font-size:0.7em;
+    color:lighten($lightgrey,30%);
+    a {
+      color:lighten($lightgrey,30%);
+      &:hover {
+        color:$lightgrey;
+      }
+    }
+    .current {
+      color:$lightgrey;
+      font-size:1.50em;
+    }
+  }
+}
+
+.top_link {
+  background: transparent image-url('footer_icon.png') no-repeat scroll 0 0;
+  margin: 80px auto;
+  width: 57px;
+  height: 57px;
+  cursor: pointer;
+  &:hover {
+    background: transparent image-url('footer_icon.png') no-repeat scroll -100px 0;
+  }
+}
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+.login {
+  width: 615px;
+  margin: 0 auto;
+  h1 {
+    text-align: center;
+  }
+  label, input {
+    display: inline-block;
+  }
+  label {
+    float: left;
+    color: #434343;
+    line-height: 45px;
+    margin-bottom: 30px;
+  }
+  input[type=text], input[type=password] {
+    background: #ffffff;
+    border: 1px solid #e2e3e4;
+    height: 43px;
+    width: 478px;
+    color: #5e5e5e;
+    padding: 0px 10px;
+    line-height: 43px;
+    font-family: 'Ubuntu Mono';
+    font-size: 20px;
+    float: right;
+  }
+  .email, .password, .forgot, .submit {
+    height: 45px;
+  }
+  .email {
+    margin-bottom: 30px;
+  }
+  .password {
+    margin-bottom: 45px;
+  }
+  .submit {
+    width: 500px;
+    float: right;
+    input[type=submit] {
+      background: $orange;
+      padding: 15px 25px;
+      display: inline-block;
+      margin-right: 30px;
+      color: #e3e3e3;
+      font-size: 18px;
+      text-transform: uppercase;
+      cursor: pointer;
+      &:hover {
+        background: lighten($orange, 15%);
+      }
+    }
+    a {
+      color: #aaaaaa;
+      border-bottom: 1px solid #aaaaaa;
+      font-size: 16px;
+    }
+  }
+}