WIP - don't look now, will update once it's complete!

In this example below you will see how to do a WIP - don't look now, will update once it's complete! with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by curthusting, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright curthusting ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>WIP - don't look now, will update once it's complete!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      * {
  font-family: 'Open Sans Condensed', sans-serif;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body, html {
  width:100%;
  height:100%;
}
.container {
  width:100%;
  height:100%;
  background-color:#fefefe;
}
.nav {
  position:fixed;
  top:0; bottom:0; left:0;
  width: 160px;
  box-shadow:1px 0 0 #222;
  transition: all 0.5s linear;
}
.nav.primary {
  margin-left:-80px;
  z-index:100;
}
.nav.primary:hover {
  margin-left:0;
  overflow-y:auto;
}
.nav.secondary {
  z-index:-100;
  margin-left:-340px;
  background-color:#F0F0F0;
  box-shadow:5px 0 100px #333;
  min-width:300px;
  padding: 10px;
  font-size:24px;
}
.nav .item:hover + .nav,
.nav .item + .nav:hover {
  left:160px;
  margin-left:0;
  overflow-y:auto;
}
.nav .item {
  width:100%;
  padding:10px;
  font-size:24px;
  line-height:60px;
  color:#fefefe;
  position:relative;
  z-index:100;
  float:left;
  border-bottom:1px solid #111;
  border-top:1px solid #555;
}
.nav .item.spacer {
  top:0;
  bottom:0;
  position:absolute;
  left:0;
  right:0;
  z-index:-1;
  background-color:#333;
}
.nav .item.spacer:hover {
  background-color:#333;
}
.nav .item.mode {
  border-top:0 none transparent;
}
.nav .item.mode .button.active {
  background-color:green;
  float:right;
}
.nav .item.mode .button:hover {
  background-color:#666;
}
.nav .item.user {
  position:absolute;
  bottom:0;
}
.button {
  font-size:40px;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  color:#fefefe;
  float:right;
}
.nav .item:hover,
.button:hover {
  background-color:#444;
}

.edit.button, .preview.button {
  width:60px;
  float:left;
}
.create {
  position:fixed;
  width:60px;
  height:60px;
  border-radius:50%;
  background-color:#333;
  opacity:0.4;
}
.create.deck {
  right:20px;
  top:50%;
  margin-top:-30px;
}
.create:hover {
  cursor:pointer;
}
.main {
  margin:15px 15px 15px 95px;
  padding:15px;
  box-shadow:0 0 15px #ccc;
  min-height:100%;
}

























/* FORM STYLING */


/*
	Content fragments
*/
.highlight, .status {
	background: #e2e5eb;
	background: rgba(129,145,171,.2);
	color: #848f9f;

	font-size: 10px;
	line-height: 14px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;

	padding: 3px 6px;
	border-radius: 3px;

	position: absolute;
	right: 30px;
	top: 30px;
}

.disabled, [disabled] {
	cursor: not-allowed;
	opacity: .5;
}


/*
	Buttons
*/
.btn {
	display: inline-block;
	padding: 0 22px;

	color: #fff;
	background: #6aad28;

	font-size: 13px;
	line-height: 38px;
	font-weight: bold;

	border: none;
	border-radius: 5px;

	/* span.btn */
	cursor: pointer;
}
	.btn:hover {
		background: #4f8c12;
	}

	.btn.secondary {
		background: #a4adbb;
	}

		.btn.secondary:hover {
			background: #848f9f;
		}

	.btn.blue {
		background: #7599d2;
	}

		.btn.blue:hover {
			background: #5479b2;
		}

	.btn.red {
		background: #c4533d;
	}

		.btn.red:hover {
			background: #a03621;
		}

	textarea {
		width: 100%;
	}

	textarea[name=content], .main textarea[name=html] {
		background: transparent;
		padding: 0;
		resize: none;
	}

.meta {
	padding: 30px 0;
	background: #ccd2d9;
}

		input[type=checkbox]:checked {
			background-image: url('../img/tick.gif');
		}
		input[type=file] + em { opacity: 1; }

	.media-upload textarea {
		min-height: 150px;
		max-height: 700px;
		resize: vertical;

		width: 317px;
	}


	.split textarea {
		min-width: 500px;
		min-height: 120px;
		max-height: 600px;

		border-radius: 0 5px 5px 5px !important;
	}

.split p {
	position: relative;
	overflow: hidden;
	clear: both;
	margin-bottom: 15px;
}

.split em {
	font-style: normal;
	padding-left: 20px;
	line-height: 28px;
	display: inline-block;
	max-width: 500px;

	opacity: 0;
	-webkit-transition: opacity .25s;
	-moz-transition: opacity .25s;
	-ms-transition: opacity .25s;
	-o-transition: opacity .25s;
	transition: opacity .25s;
}

	.split input:focus + em, .split textarea:focus + em, .split select:focus + em {
		opacity: 1;
	}

.split .twitter {
	position: relative;
}

.split .twitter input {
	padding-left: 32px;
	border-radius: 0 5px 5px 0;
}
	.split .twitter .at {
		pointer-events: none;
		position: absolute;
		left: 170px;
		top: 8px;
		z-index: 10;

		color: #aab1bc;
	}

.split + .buttons {
	clear: both;
}

.split + .buttons button:first-child {
	margin: 20px 15px 20px 150px;
}

input[type='range'], ::-webkit-slider-thumb {
	-webkit-appearance: none;
}
	input[type='range'] {
		background: #cdd3db;
		padding: 0 5px 0 0 !important;
		cursor: col-resize;
		overflow: hidden;
	}
	::-webkit-slider-thumb {
		display: block;
		width: 15px;
		height: 29px;

		position: relative;

		border-radius: 3px;

		background: #95a1b2;
	}
		::-webkit-slider-thumb:before {
			content: '';
			display: block;
			position: absolute;
			left: -300px;
			right: 10px;
			top: 0;
			bottom: 0;

			background: #95a1b2;
		}


/*
	Focus mode
*/
.top, .meta, .buttons {
	-webkit-transition: opacity .4s;
	-moz-transition: opacity .4s;
	-ms-transition: opacity .4s;
	-o-transition: opacity .4s;
	transition: opacity .4s;

	opacity: 1;
}

.focus .top, .focus .meta, .focus .buttons {
	opacity: 0;
	pointer-events: none;
}

.focus .meta {
	height: 0;
	overflow: hidden;
}

.header {
	-webkit-transition: background .4s;
	-moz-transition: background .4s;
	-ms-transition: background .4s;
	-o-transition: background .4s;
	transition: background .4s;
}

.focus .header, .focus .main textarea {
	background: #eceef1;
}

/*
	Drag-n-drop upload
*/
#media {
	display: none;
}

#upload-file {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;

	opacity: 0;
	background: rgba(178,190,208,.75);

	-webkit-transition: opacity .25s, background .25s;
	-moz-transition: opacity .25s, background .25s;
	-ms-transition: opacity .25s, background .25s;
	-o-transition: opacity .25s, background .25s;
	transition: opacity .25s, background .25s;
}

	#upload-file.success {
		background: rgba(119,181,47,.75);
	}

	.draggy #upload-file {
		opacity: 1;
		z-index: 10000;
	}

	#upload-file span {
		position: absolute;
		left: 50%;
		top: 50%;

		width: 250px;
		height: 30px;
		padding-top: 50px;
		margin: -40px 0 0 -125px;

		font-weight: bold;
		font-size: 17px;
		line-height: 30px;
		text-align: center;

		color: #768498;
		background: url('../img/cloud.png') no-repeat 50% 0;

		-webkit-transition: color .25s;
		-moz-transition: color .25s;
		-ms-transition: color .25s;
		-o-transition: color .25s;
		transition: color .25s;
	}

		#upload-file.success span {
			color: #fff;
			background-image: url('../img/tick.png');
		}
input, textarea, button {
	padding: 11px 16px;

	background: #fff;
	color: #4a525f;

	font-size: 15px;
	line-height: 15px;
	font-family: inherit;

	border: none;
	border-radius: 5px;
}

input[type='range'], ::-webkit-slider-thumb {
	-webkit-appearance: none;
}

	input[type='range'] {
		background: #cdd3db;
		padding: 0 5px 0 0 !important;
		cursor: col-resize;
		overflow: hidden;
	}

	::-webkit-slider-thumb {
		display: block;
		width: 15px;
		height: 29px;

		position: relative;

		border-radius: 3px;

		background: #95a1b2;
	}

		::-webkit-slider-thumb:before {
			content: '';
			display: block;
			position: absolute;
			left: -300px;
			right: 10px;
			top: 0;
			bottom: 0;

			background: #95a1b2;
		}


	input:focus, textarea:focus, button:focus, select:focus {
		outline: none;
	}

	textarea {
		font-size: 17px;
		line-height: 25px;
	}

	button {
		cursor: pointer;
	}

legend {
	font-size: 19px;
	font-weight: 500;

	display: block;
	float: left;
	margin: 40px 0 30px;
}

	legend + em {
		float: right;
	}

select {
	-webkit-appearance: none;
	display: block;
	float: left;
	height: 59px;
	padding: 9px 0 8px 20px;

	font: 15px/22px "Helvetica Neue", sans-serif;

	border: none;
	border-radius: 0;

	background: #fff;
	color: #7f8b9e;

	cursor: pointer;

	min-width: 216px;
}

	select + .arrow {
		display: inline-block;
		position: absolute;
		top: 19px;
		margin-left: -24px;

		pointer-events: none;

		border-top: 4px solid #aab3c0;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
	}


.half {
	float: left;
	width: 48.5%;
	margin-right: 3%;
}

	.half + .half {
		margin-right: 0;
	}

	.half label + input, .half label + textarea, .half label + select {
		width: auto;
	}

	.half em, .half legend {
		display: none;
	}

.split label { 
	background: #e6e9ed;

	display: inline-block;
	float: left;
	height: 39px;
	padding: 0 18px;

	text-align: center;
	line-height: 39px;

	-webkit-user-select: none;

	border-radius: 0;
	min-width: 160px;
}

input {
  padding:15px 0;
  float: left;
  line-height: 3rem;
  border-radius: 0;
  width:100%;
  font-size:1.5rem;
}
.split {
  width:50%;
  display: inline;
}
.split ~ .split {
  float:right;
}
.title input {
  font-size: 3.75rem;
  line-height: 4.5rem;
  font-weight: 700;
  }

.deck textarea {
  font-size: 2rem;
  line-height: 2.5rem;
}

.body textarea {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

	textarea[name=css], textarea[name=js] {
		font-family: Monaco, "Courier New", courier, monospace;
	}

	.split input[type=checkbox] {
		-webkit-appearance: none;
		width: 66px;
		min-width: 66px;

		cursor: pointer;

		background: #fff url('../img/cross.gif') no-repeat 50% 50%;
	}

		.split input[type=checkbox]:checked {
			background-image: url('../img/tick.gif');
		}

	.split textarea {
		width: 500px;
		min-height: 120px;
		max-height: 600px;

		border-radius: 0 5px 5px 5px !important;
	}

	.split p {
		position: relative;
		overflow: hidden;
		margin-bottom: 15px;
	}

  .full em,
	.split em {
		font-style: normal;
		padding: 6px 10px;

		opacity: 0;
		-webkit-transition: opacity .25s;
		-moz-transition: opacity .25s;
		-ms-transition: opacity .25s;
		-o-transition: opacity .25s;
		transition: opacity .25s;
	}

	input:focus + em, textarea:focus + em, select:focus + em {
		opacity: 1;
	}

	.split input[type=file] {
		padding: 0;
		overflow: hidden;
	}

.image-uploader input.main {
position: absolute;
right: 0;
margin: 0;
opacity: 0;
-webkit-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
-o-transform-origin: right;
transform-origin: right;
-webkit-transform: scale(14);
-moz-transform: scale(14);
-ms-transform: scale(14);
-o-transform: scale(14);
transform: scale(14);
font-size: 23px;
direction: ltr;
cursor: pointer;
}

.image-uploader {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 1.6em 0;
position: relative;
overflow: hidden;
padding: 55px 60px;
border: #edece4 3px dashed;
width: 100%;
height: auto;
text-align: center;
color: #aaa9a2;
background: #F9F8F5;
}

.fixed {
position:fixed;
}
.bottom {
  bottom:0
}

footer.fixed.bottom {
  left:0;
  right:0;
  height:60px;
  padding:10px 0;
  background-color:#444f5f;
}






/* Medium Editor */

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: " ";
  font-size: 0; }

@-webkit-keyframes pop-upwards {
  0% {
    -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
    transform: matrix(0.97, 0, 0, 1, 0, 12);
    opacity: 0; }

  20% {
    -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
    transform: matrix(0.99, 0, 0, 1, 0, 2);
    opacity: 0.7; }

  40% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
    transform: matrix(1, 0, 0, 1, 0, -1);
    opacity: 1; }

  70% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1; }

  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1; } }

@keyframes pop-upwards {
  0% {
    -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
    transform: matrix(0.97, 0, 0, 1, 0, 12);
    opacity: 0; }

  20% {
    -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
    transform: matrix(0.99, 0, 0, 1, 0, 2);
    opacity: 0.7; }

  40% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
    transform: matrix(1, 0, 0, 1, 0, -1);
    opacity: 1; }

  70% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1; }

  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1; } }

.medium-toolbar-arrow-under:after, .medium-toolbar-arrow-over:before {
  position: absolute;
  left: 50%;
  display: block;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  content: ""; }

.medium-toolbar-arrow-under:after {
  border-width: 8px 8px 0 8px; }

.medium-toolbar-arrow-over:before {
  top: -8px;
  border-width: 0 8px 8px 8px; }

.medium-editor-toolbar, .medium-editor-anchor-preview {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  visibility: hidden;
  font-size: 16px;
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }
  .medium-editor-toolbar ul, .medium-editor-anchor-preview ul {
    margin: 0;
    padding: 0; }
  .medium-editor-toolbar li, .medium-editor-anchor-preview li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none; }
    .medium-editor-toolbar li button, .medium-editor-anchor-preview li button {
      display: block;
      margin: 0;
      padding: 15px;
      cursor: pointer;
      font-size: 14px;
      line-height: 1.33;
      text-decoration: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
    .medium-editor-toolbar li .medium-editor-action-underline, .medium-editor-anchor-preview li .medium-editor-action-underline {
      text-decoration: underline; }
    .medium-editor-toolbar li .medium-editor-action-pre, .medium-editor-anchor-preview li .medium-editor-action-pre {
      padding: 15px 0;
      font-weight: 100;
      font-size: 12px;
      font-family: 'Menlo', monospace; }

.medium-editor-anchor-preview i {
  display: inline-block;
  margin: 5px 5px 5px 10px;
  text-decoration: underline;
  font-style: normal;
  cursor: pointer; }

.medium-editor-toolbar-active, .medium-editor-anchor-preview-active {
  visibility: visible;
  -webkit-animation: pop-upwards 160ms forwards linear;
  -ms-animation: pop-upwards 160ms forwards linear;
  animation: pop-upwards 160ms forwards linear;
  -webkit-transition: top 0.075s ease-out, left 0.075s ease-out;
  transition: top 0.075s ease-out, left 0.075s ease-out; }

.medium-editor-action-bold {
  font-weight: bolder; }

.medium-editor-action-italic {
  font-style: italic; }

.medium-editor-toolbar-form-anchor {
  display: none; }
  .medium-editor-toolbar-form-anchor input, .medium-editor-toolbar-form-anchor a {
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }
  .medium-editor-toolbar-form-anchor input {
    margin: 0;
    padding: 6px;
    width: 316px;
    border: none;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .medium-editor-toolbar-form-anchor input:focus {
      outline: 0;
      border: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-appearance: none;
      -moz-appearance: none; }
  .medium-editor-toolbar-form-anchor a {
    display: inline-block;
    margin: 0 10px;
    text-decoration: none;
    font-weight: bolder;
    font-size: 24px; }

.medium-editor-placeholder {
  position: relative; }
  .medium-editor-placeholder:after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-placeholder);
    font-style: italic; }

/* Insert */

.clearfix:before, [data-medium-element="true"]:before, .clearfix:after, [data-medium-element="true"]:after {
    content:" ";
    display:table
}
.clearfix:after, [data-medium-element="true"]:after {
    clear:both
}
img {
    max-width:100%
}
q, blockquote {
    display:block;
    margin-top:1em;
    margin-bottom:1em;
    border-left:5px solid #efefef;
    padding-left:20px;
    margin-left:-25px
}
[draggable] {
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    -khtml-user-drag:element;
    -webkit-user-drag:element
}
[contenteditable] {
    outline:0px solid transparent
}
[contenteditable]:focus {
    outline:0px solid transparent
}
.medium-editor-placeholder {
    padding-bottom:0 !important;
    min-height:58px
}
.medium-editor-placeholder:after {
    content:attr(data-placeholder) !important;
    top:1em
}
.hide {
    display:none !important
}
.mediumInsert-buttonsShow {
    opacity:0;
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    -webkit-transform:scale(0);
    transform:scale(0);
    -moz-transition:all 0.08s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    -o-transition:all 0.08s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    -webkit-transition:all 0.08s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    transition:all 0.08s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    display:block;
    width:18px;
    height:18px;
    margin-top:-5px;
    border-radius:10px;
    border:2px solid;
    font-size:18px;
    line-height:18px;
    text-align:center;
    text-decoration:none !important
}
.mediumInsert-buttonsShow:after {
    left:auto;
    right:100%;
    top:50%;
    margin-top:-4px
}
.mediumInsert {
    position:relative;
    margin:-1em 0 -1em -40px;
    min-height:18px
}
.mediumInsert .mediumInsert-buttons {
    position:absolute;
    width:40px;
    top:0;
    left:0;
    color:#ddd;
    font-size:0.9em
}
.mediumInsert .mediumInsert-buttons a {
    text-decoration:underline;
    cursor:pointer
}
.mediumInsert .mediumInsert-buttons a.active {
    font-weight:bold
}
.mediumInsert .mediumInsert-buttons ul.mediumInsert-buttonsOptions {
    margin:0;
    padding:0;
    list-style:none;
    display:none;
    position:absolute;
    z-index:2;
    left:40px;
    top:-10px;
    border-radius:5px
}
.mediumInsert .mediumInsert-buttons ul.mediumInsert-buttonsOptions button {
    min-height:auto;
    height:auto;
    padding:5px;
    border-left:none;
    float:none
}
.mediumInsert .mediumInsert-buttons ul.mediumInsert-buttonsOptions button .fa {
    font-size:20px
}
.mediumInsert .mediumInsert-placeholder {
    position:relative;
    margin-left:40px;
    text-align:center
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images img {
    margin-top:1em;
    margin-bottom:10px;
    vertical-align:top
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images a {
    position:absolute;
    top:1em;
    width:30px;
    height:30px;
    background-color:#3b3b3b;
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images a.mediumInsert-imageRemove {
    right:0;
    background-image:url(../images/remove.png)
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images a.mediumInsert-imageResizeSmaller, .mediumInsert .mediumInsert-placeholder .mediumInsert-images a.mediumInsert-imageResizeBigger {
    right:31px;
    background-image:url(../images/resize-smaller.png)
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images a.mediumInsert-imageResizeBigger {
    background-image:url(../images/resize-bigger.png)
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images:first-child:after {
    content:"\a";white-space:pre}.mediumInsert .mediumInsert-placeholder .mediumInsert-images:not(:first-child){margin-right:10px}.mediumInsert .mediumInsert-placeholder .mediumInsert-images:not(:first-child) img{width:20%}.mediumInsert .mediumInsert-placeholder .mediumInsert-maps{padding:10px;background:#ccc}.mediumInsert .mediumInsert-placeholder .mediumInsert-error{background-color:#f2dede;border:1px solid #ebccd1;color:#a94442;padding:15px}.mediumInsert.hover .mediumInsert-placeholder{background:#f0f0f0}.mediumInsert:hover .mediumInsert-buttonsShow{-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);opacity:1}.mediumInsert.small .mediumInsert-placeholder{width:33.33%;float:left;margin-right:30px}.hover .mediumInsert-placeholder{min-height:14px;border:1px dashed #ddd;margin-top:-1px;margin-bottom:-1px}

/* Custom styling */
.medium-toolbar-arrow-under:after {
  top: 60px;
  border-color: #57ad68 transparent transparent transparent; }

.medium-toolbar-arrow-over:before {
  top: -8px;
  border-color: transparent transparent #57ad68 transparent; }

.medium-editor-toolbar {
  background-color: #57ad68; }
  .medium-editor-toolbar li {
    padding: 0; }
    .medium-editor-toolbar li button {
      min-width: 60px;
      height: 60px;
      border: none;
      border-right: 1px solid #9ccea5;
      background-color: transparent;
      color: #fff;
      -webkit-transition: background-color 0.2s ease-in, color 0.2s ease-in;
      transition: background-color 0.2s ease-in, color 0.2s ease-in; }
      .medium-editor-toolbar li button:hover {
        background-color: #346a3e;
        color: #fff; }
    .medium-editor-toolbar li .medium-editor-button-active {
      background-color: #23482a;
      color: #fff; }
    .medium-editor-toolbar li .medium-editor-button-last {
      border-right: none; }

.medium-editor-toolbar-form-anchor input {
  height: 60px;
  background: #57ad68;
  color: #fff; }
  .medium-editor-toolbar-form-anchor input::-webkit-input-placeholder {
    color: #fff;
    color: rgba(255, 255, 255, 0.8); }
  .medium-editor-toolbar-form-anchor input:-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
    color: rgba(255, 255, 255, 0.8); }
  .medium-editor-toolbar-form-anchor input::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
    color: rgba(255, 255, 255, 0.8); }
  .medium-editor-toolbar-form-anchor input:-ms-input-placeholder {
    color: #fff;
    color: rgba(255, 255, 255, 0.8); }
.medium-editor-toolbar-form-anchor a {
  color: #fff; }

.medium-editor-toolbar-anchor-preview {
  background: #57ad68;
  color: #fff; }

.medium-editor-placeholder:after {
  color: #fff; }

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="container">

    <div class="nav primary">

        <div class="item spacer"></div>

        <div class="item mode">
            <span class="preview button"><i class="fa fa-eye"></i>
            </span>
            <span class="edit button active"><i class="fa fa-edit"></i>
            </span>
        </div>

        <div class="item">
            Settings
            <span class="settings button"><i class="fa fa-cog"></i>
            </span>
        </div>
        <div class="nav secondary">Settings
            <form action="#" class="forms">
                <div class="field">
                    <label for="name">Text Input:</label>
                    <input type="text" name="name" id="name" placeholder="John Smith" />
                </div>

                <fieldset class="field">
                    <legend>Radio Button Choice</legend>

                    <label for="radio-choice-1">Choice 1</label>
                    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />

                    <label for="radio-choice-2">Choice 2</label>
                    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
                </fieldset>

                <div class="field">
                    <label for="select-choice">Select Dropdown Choice:</label>
                    <select name="select-choice" id="select-choice">
                        <option value="Choice 1">Choice 1</option>
                        <option value="Choice 2">Choice 2</option>
                        <option value="Choice 3">Choice 3</option>
                    </select>
                </div>

                <div class="field">
                    <label for="checkbox">Checkbox:</label>
                    <input type="checkbox" name="checkbox" id="checkbox" />
                </div>

                <div class="field">
                    <input type="submit" value="Submit" />
                </div>
            </form>
        </div>

        <div class="item">
            Details
            <span class="details button"><i class="fa fa-wrench"></i>
            </span>
        </div>
        <div class="nav secondary">Details

            <div class="wrap">
                <span>
                    <input id="extend_tags" name="extend[tags]" type="text" value="" placeholder="Tags">
                </span>
                <span>
                    <select name="category">
                        <option value="">Select Category</option>
                        <option value="1">Category 1</option>
                        <option value="2">Category 2</option>
                        <option value="3">Category 3</option>
                        <option value="4">Category 4</option>
                        <option value="5">Category 5</option>
                    </select>
                    <em></em>
                </span>
                <span>
                    <select name="status">
                        <option value="">Status</option>
                        <option value="published">Published</option>
                        <option value="draft">Draft</option>
                        <option value="archived">Archived</option>
                        <option value="archived">Deleted</option>
                    </select>
                    <em></em>
                </span>
            </div>

        </div>

        <div class="item">
            Style
            <span class="style button"><i class="fa fa-sliders"></i>
            </span>
        </div>
        <div class="nav secondary">Style</div>

        <div class="item">
            Share
            <span class="share button"><i class="fa fa-share-alt"></i>
            </span>
        </div>
        <div class="nav secondary">Share</div>

        <div class="item user">
            Profile
            <span class="share button"><i class="fa fa-user"></i>
            </span>
        </div>
        <div class="nav secondary">Profile</div>

    </div>

    <div class="main">
        <div class="page">

            <form method="post" action="#" enctype="multipart/form-data" novalidate>

                <fieldset>
                    <div class="wrap image-uploader">
                        <span class="media">
                            <span class="hidden">Cover Image</span>
                        </span>
                        <input data-url="upload" class="js-fileupload main fileupload" type="file" name="uploadimage">
                    </div>
                </fieldset>

                <fieldset class="header">
                    <div class="wrap full title">
                        <input placeholder="Title" autocomplete="off" autofocus="true" type="text" name="title">
                            <em></em>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="wrap full author">
                        <input placeholder="Author" autocomplete="off" autofocus="true" type="text" name="author">
                            <em>Start typing name to search existing contacts</em>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="wrap full category">
                        <input placeholder="Category" autocomplete="off" autofocus="true" type="text" name="category">
                            <em>Start typing name to autopopulate category</em>
                    </div>
               </fieldset>

                <fieldset>
                    <div class="wrap full deck">
                        <textarea placeholder="Deck" name="html" rows="3" cols="10"></textarea>
                        <em>Make it good, this may be your one chance to draw readers in!</em>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="wrap full body editable">
                        <!--<textarea placeholder="Body" name="html" rows="10" cols="50"></textarea>-->
                    </div>
                </fieldset>

            </form>

        </div>
    </div>

    <span class="create deck button"><i class="fa fa-plus"></i>
    </span>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/curthusting/wip-donandapost-look-now-will-update-once-itandaposs-complete-GzrEL */
* {
  font-family: 'Open Sans Condensed', sans-serif;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body, html {
  width:100%;
  height:100%;
}
.container {
  width:100%;
  height:100%;
  background-color:#fefefe;
}
.nav {
  position:fixed;
  top:0; bottom:0; left:0;
  width: 160px;
  box-shadow:1px 0 0 #222;
  transition: all 0.5s linear;
}
.nav.primary {
  margin-left:-80px;
  z-index:100;
}
.nav.primary:hover {
  margin-left:0;
  overflow-y:auto;
}
.nav.secondary {
  z-index:-100;
  margin-left:-340px;
  background-color:#F0F0F0;
  box-shadow:5px 0 100px #333;
  min-width:300px;
  padding: 10px;
  font-size:24px;
}
.nav .item:hover + .nav,
.nav .item + .nav:hover {
  left:160px;
  margin-left:0;
  overflow-y:auto;
}
.nav .item {
  width:100%;
  padding:10px;
  font-size:24px;
  line-height:60px;
  color:#fefefe;
  position:relative;
  z-index:100;
  float:left;
  border-bottom:1px solid #111;
  border-top:1px solid #555;
}
.nav .item.spacer {
  top:0;
  bottom:0;
  position:absolute;
  left:0;
  right:0;
  z-index:-1;
  background-color:#333;
}
.nav .item.spacer:hover {
  background-color:#333;
}
.nav .item.mode {
  border-top:0 none transparent;
}
.nav .item.mode .button.active {
  background-color:green;
  float:right;
}
.nav .item.mode .button:hover {
  background-color:#666;
}
.nav .item.user {
  position:absolute;
  bottom:0;
}
.button {
  font-size:40px;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  color:#fefefe;
  float:right;
}
.nav .item:hover,
.button:hover {
  background-color:#444;
}

.edit.button, .preview.button {
  width:60px;
  float:left;
}
.create {
  position:fixed;
  width:60px;
  height:60px;
  border-radius:50%;
  background-color:#333;
  opacity:0.4;
}
.create.deck {
  right:20px;
  top:50%;
  margin-top:-30px;
}
.create:hover {
  cursor:pointer;
}
.main {
  margin:15px 15px 15px 95px;
  padding:15px;
  box-shadow:0 0 15px #ccc;
  min-height:100%;
}

























/* FORM STYLING */


/*
	Content fragments
*/
.highlight, .status {
	background: #e2e5eb;
	background: rgba(129,145,171,.2);
	color: #848f9f;

	font-size: 10px;
	line-height: 14px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;

	padding: 3px 6px;
	border-radius: 3px;

	position: absolute;
	right: 30px;
	top: 30px;
}

.disabled, [disabled] {
	cursor: not-allowed;
	opacity: .5;
}


/*
	Buttons
*/
.btn {
	display: inline-block;
	padding: 0 22px;

	color: #fff;
	background: #6aad28;

	font-size: 13px;
	line-height: 38px;
	font-weight: bold;

	border: none;
	border-radius: 5px;

	/* span.btn */
	cursor: pointer;
}
	.btn:hover {
		background: #4f8c12;
	}

	.btn.secondary {
		background: #a4adbb;
	}

		.btn.secondary:hover {
			background: #848f9f;
		}

	.btn.blue {
		background: #7599d2;
	}

		.btn.blue:hover {
			background: #5479b2;
		}

	.btn.red {
		background: #c4533d;
	}

		.btn.red:hover {
			background: #a03621;
		}

	textarea {
		width: 100%;
	}

	textarea[name=content], .main textarea[name=html] {
		background: transparent;
		padding: 0;
		resize: none;
	}

.meta {
	padding: 30px 0;
	background: #ccd2d9;
}

		input[type=checkbox]:checked {
			background-image: url('../img/tick.gif');
		}
		input[type=file] + em { opacity: 1; }

	.media-upload textarea {
		min-height: 150px;
		max-height: 700px;
		resize: vertical;

		width: 317px;
	}


	.split textarea {
		min-width: 500px;
		min-height: 120px;
		max-height: 600px;

		border-radius: 0 5px 5px 5px !important;
	}

.split p {
	position: relative;
	overflow: hidden;
	clear: both;
	margin-bottom: 15px;
}

.split em {
	font-style: normal;
	padding-left: 20px;
	line-height: 28px;
	display: inline-block;
	max-width: 500px;

	opacity: 0;
	-webkit-transition: opacity .25s;
	-moz-transition: opacity .25s;
	-ms-transition: opacity .25s;
	-o-transition: opacity .25s;
	transition: opacity .25s;
}

	.split input:focus + em, .split textarea:focus + em, .split select:focus + em {
		opacity: 1;
	}

.split .twitter {
	position: relative;
}

.split .twitter input {
	padding-left: 32px;
	border-radius: 0 5px 5px 0;
}
	.split .twitter .at {
		pointer-events: none;
		position: absolute;
		left: 170px;
		top: 8px;
		z-index: 10;

		color: #aab1bc;
	}

.split + .buttons {
	clear: both;
}

.split + .buttons button:first-child {
	margin: 20px 15px 20px 150px;
}

input[type='range'], ::-webkit-slider-thumb {
	-webkit-appearance: none;
}
	input[type='range'] {
		background: #cdd3db;
		padding: 0 5px 0 0 !important;
		cursor: col-resize;
		overflow: hidden;
	}
	::-webkit-slider-thumb {
		display: block;
		width: 15px;
		height: 29px;

		position: relative;

		border-radius: 3px;

		background: #95a1b2;
	}
		::-webkit-slider-thumb:before {
			content: '';
			display: block;
			position: absolute;
			left: -300px;
			right: 10px;
			top: 0;
			bottom: 0;

			background: #95a1b2;
		}


/*
	Focus mode
*/
.top, .meta, .buttons {
	-webkit-transition: opacity .4s;
	-moz-transition: opacity .4s;
	-ms-transition: opacity .4s;
	-o-transition: opacity .4s;
	transition: opacity .4s;

	opacity: 1;
}

.focus .top, .focus .meta, .focus .buttons {
	opacity: 0;
	pointer-events: none;
}

.focus .meta {
	height: 0;
	overflow: hidden;
}

.header {
	-webkit-transition: background .4s;
	-moz-transition: background .4s;
	-ms-transition: background .4s;
	-o-transition: background .4s;
	transition: background .4s;
}

.focus .header, .focus .main textarea {
	background: #eceef1;
}

/*
	Drag-n-drop upload
*/
#media {
	display: none;
}

#upload-file {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;

	opacity: 0;
	background: rgba(178,190,208,.75);

	-webkit-transition: opacity .25s, background .25s;
	-moz-transition: opacity .25s, background .25s;
	-ms-transition: opacity .25s, background .25s;
	-o-transition: opacity .25s, background .25s;
	transition: opacity .25s, background .25s;
}

	#upload-file.success {
		background: rgba(119,181,47,.75);
	}

	.draggy #upload-file {
		opacity: 1;
		z-index: 10000;
	}

	#upload-file span {
		position: absolute;
		left: 50%;
		top: 50%;

		width: 250px;
		height: 30px;
		padding-top: 50px;
		margin: -40px 0 0 -125px;

		font-weight: bold;
		font-size: 17px;
		line-height: 30px;
		text-align: center;

		color: #768498;
		background: url('../img/cloud.png') no-repeat 50% 0;

		-webkit-transition: color .25s;
		-moz-transition: color .25s;
		-ms-transition: color .25s;
		-o-transition: color .25s;
		transition: color .25s;
	}

		#upload-file.success span {
			color: #fff;
			background-image: url('../img/tick.png');
		}
input, textarea, button {
	padding: 11px 16px;

	background: #fff;
	color: #4a525f;

	font-size: 15px;
	line-height: 15px;
	font-family: inherit;

	border: none;
	border-radius: 5px;
}

input[type='range'], ::-webkit-slider-thumb {
	-webkit-appearance: none;
}

	input[type='range'] {
		background: #cdd3db;
		padding: 0 5px 0 0 !important;
		cursor: col-resize;
		overflow: hidden;
	}

	::-webkit-slider-thumb {
		display: block;
		width: 15px;
		height: 29px;

		position: relative;

		border-radius: 3px;

		background: #95a1b2;
	}

		::-webkit-slider-thumb:before {
			content: '';
			display: block;
			position: absolute;
			left: -300px;
			right: 10px;
			top: 0;
			bottom: 0;

			background: #95a1b2;
		}


	input:focus, textarea:focus, button:focus, select:focus {
		outline: none;
	}

	textarea {
		font-size: 17px;
		line-height: 25px;
	}

	button {
		cursor: pointer;
	}

legend {
	font-size: 19px;
	font-weight: 500;

	display: block;
	float: left;
	margin: 40px 0 30px;
}

	legend + em {
		float: right;
	}

select {
	-webkit-appearance: none;
	display: block;
	float: left;
	height: 59px;
	padding: 9px 0 8px 20px;

	font: 15px/22px "Helvetica Neue", sans-serif;

	border: none;
	border-radius: 0;

	background: #fff;
	color: #7f8b9e;

	cursor: pointer;

	min-width: 216px;
}

	select + .arrow {
		display: inline-block;
		position: absolute;
		top: 19px;
		margin-left: -24px;

		pointer-events: none;

		border-top: 4px solid #aab3c0;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
	}


.half {
	float: left;
	width: 48.5%;
	margin-right: 3%;
}

	.half + .half {
		margin-right: 0;
	}

	.half label + input, .half label + textarea, .half label + select {
		width: auto;
	}

	.half em, .half legend {
		display: none;
	}

.split label { 
	background: #e6e9ed;

	display: inline-block;
	float: left;
	height: 39px;
	padding: 0 18px;

	text-align: center;
	line-height: 39px;

	-webkit-user-select: none;

	border-radius: 0;
	min-width: 160px;
}

input {
  padding:15px 0;
  float: left;
  line-height: 3rem;
  border-radius: 0;
  width:100%;
  font-size:1.5rem;
}
.split {
  width:50%;
  display: inline;
}
.split ~ .split {
  float:right;
}
.title input {
  font-size: 3.75rem;
  line-height: 4.5rem;
  font-weight: 700;
  }

.deck textarea {
  font-size: 2rem;
  line-height: 2.5rem;
}

.body textarea {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

	textarea[name=css], textarea[name=js] {
		font-family: Monaco, "Courier New", courier, monospace;
	}

	.split input[type=checkbox] {
		-webkit-appearance: none;
		width: 66px;
		min-width: 66px;

		cursor: pointer;

		background: #fff url('../img/cross.gif') no-repeat 50% 50%;
	}

		.split input[type=checkbox]:checked {
			background-image: url('../img/tick.gif');
		}

	.split textarea {
		width: 500px;
		min-height: 120px;
		max-height: 600px;

		border-radius: 0 5px 5px 5px !important;
	}

	.split p {
		position: relative;
		overflow: hidden;
		margin-bottom: 15px;
	}

  .full em,
	.split em {
		font-style: normal;
		padding: 6px 10px;

		opacity: 0;
		-webkit-transition: opacity .25s;
		-moz-transition: opacity .25s;
		-ms-transition: opacity .25s;
		-o-transition: opacity .25s;
		transition: opacity .25s;
	}

	input:focus + em, textarea:focus + em, select:focus + em {
		opacity: 1;
	}

	.split input[type=file] {
		padding: 0;
		overflow: hidden;
	}

.image-uploader input.main {
position: absolute;
right: 0;
margin: 0;
opacity: 0;
-webkit-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
-o-transform-origin: right;
transform-origin: right;
-webkit-transform: scale(14);
-moz-transform: scale(14);
-ms-transform: scale(14);
-o-transform: scale(14);
transform: scale(14);
font-size: 23px;
direction: ltr;
cursor: pointer;
}

.image-uploader {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 1.6em 0;
position: relative;
overflow: hidden;
padding: 55px 60px;
border: #edece4 3px dashed;
width: 100%;
height: auto;
text-align: center;
color: #aaa9a2;
background: #F9F8F5;
}

.fixed {
position:fixed;
}
.bottom {
  bottom:0
}

footer.fixed.bottom {
  left:0;
  right:0;
  height:60px;
  padding:10px 0;
  background-color:#444f5f;
}






/* Medium Editor */

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: " ";
  font-size: 0; }

@-webkit-keyframes pop-upwards {
  0% {
    -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
    transform: matrix(0.97, 0, 0, 1, 0, 12);
    opacity: 0; }

  20% {
    -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
    transform: matrix(0.99, 0, 0, 1, 0, 2);
    opacity: 0.7; }

  40% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
    transform: matrix(1, 0, 0, 1, 0, -1);
    opacity: 1; }

  70% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1; }

  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1; } }

@keyframes pop-upwards {
  0% {
    -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
    transform: matrix(0.97, 0, 0, 1, 0, 12);
    opacity: 0; }

  20% {
    -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
    transform: matrix(0.99, 0, 0, 1, 0, 2);
    opacity: 0.7; }

  40% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
    transform: matrix(1, 0, 0, 1, 0, -1);
    opacity: 1; }

  70% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1; }

  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1; } }

.medium-toolbar-arrow-under:after, .medium-toolbar-arrow-over:before {
  position: absolute;
  left: 50%;
  display: block;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  content: ""; }

.medium-toolbar-arrow-under:after {
  border-width: 8px 8px 0 8px; }

.medium-toolbar-arrow-over:before {
  top: -8px;
  border-width: 0 8px 8px 8px; }

.medium-editor-toolbar, .medium-editor-anchor-preview {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  visibility: hidden;
  font-size: 16px;
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }
  .medium-editor-toolbar ul, .medium-editor-anchor-preview ul {
    margin: 0;
    padding: 0; }
  .medium-editor-toolbar li, .medium-editor-anchor-preview li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none; }
    .medium-editor-toolbar li button, .medium-editor-anchor-preview li button {
      display: block;
      margin: 0;
      padding: 15px;
      cursor: pointer;
      font-size: 14px;
      line-height: 1.33;
      text-decoration: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
    .medium-editor-toolbar li .medium-editor-action-underline, .medium-editor-anchor-preview li .medium-editor-action-underline {
      text-decoration: underline; }
    .medium-editor-toolbar li .medium-editor-action-pre, .medium-editor-anchor-preview li .medium-editor-action-pre {
      padding: 15px 0;
      font-weight: 100;
      font-size: 12px;
      font-family: 'Menlo', monospace; }

.medium-editor-anchor-preview i {
  display: inline-block;
  margin: 5px 5px 5px 10px;
  text-decoration: underline;
  font-style: normal;
  cursor: pointer; }

.medium-editor-toolbar-active, .medium-editor-anchor-preview-active {
  visibility: visible;
  -webkit-animation: pop-upwards 160ms forwards linear;
  -ms-animation: pop-upwards 160ms forwards linear;
  animation: pop-upwards 160ms forwards linear;
  -webkit-transition: top 0.075s ease-out, left 0.075s ease-out;
  transition: top 0.075s ease-out, left 0.075s ease-out; }

.medium-editor-action-bold {
  font-weight: bolder; }

.medium-editor-action-italic {
  font-style: italic; }

.medium-editor-toolbar-form-anchor {
  display: none; }
  .medium-editor-toolbar-form-anchor input, .medium-editor-toolbar-form-anchor a {
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }
  .medium-editor-toolbar-form-anchor input {
    margin: 0;
    padding: 6px;
    width: 316px;
    border: none;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .medium-editor-toolbar-form-anchor input:focus {
      outline: 0;
      border: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-appearance: none;
      -moz-appearance: none; }
  .medium-editor-toolbar-form-anchor a {
    display: inline-block;
    margin: 0 10px;
    text-decoration: none;
    font-weight: bolder;
    font-size: 24px; }

.medium-editor-placeholder {
  position: relative; }
  .medium-editor-placeholder:after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-placeholder);
    font-style: italic; }

/* Insert */

.clearfix:before, [data-medium-element="true"]:before, .clearfix:after, [data-medium-element="true"]:after {
    content:" ";
    display:table
}
.clearfix:after, [data-medium-element="true"]:after {
    clear:both
}
img {
    max-width:100%
}
q, blockquote {
    display:block;
    margin-top:1em;
    margin-bottom:1em;
    border-left:5px solid #efefef;
    padding-left:20px;
    margin-left:-25px
}
[draggable] {
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    -khtml-user-drag:element;
    -webkit-user-drag:element
}
[contenteditable] {
    outline:0px solid transparent
}
[contenteditable]:focus {
    outline:0px solid transparent
}
.medium-editor-placeholder {
    padding-bottom:0 !important;
    min-height:58px
}
.medium-editor-placeholder:after {
    content:attr(data-placeholder) !important;
    top:1em
}
.hide {
    display:none !important
}
.mediumInsert-buttonsShow {
    opacity:0;
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    -webkit-transform:scale(0);
    transform:scale(0);
    -moz-transition:all 0.08s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    -o-transition:all 0.08s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    -webkit-transition:all 0.08s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    transition:all 0.08s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    display:block;
    width:18px;
    height:18px;
    margin-top:-5px;
    border-radius:10px;
    border:2px solid;
    font-size:18px;
    line-height:18px;
    text-align:center;
    text-decoration:none !important
}
.mediumInsert-buttonsShow:after {
    left:auto;
    right:100%;
    top:50%;
    margin-top:-4px
}
.mediumInsert {
    position:relative;
    margin:-1em 0 -1em -40px;
    min-height:18px
}
.mediumInsert .mediumInsert-buttons {
    position:absolute;
    width:40px;
    top:0;
    left:0;
    color:#ddd;
    font-size:0.9em
}
.mediumInsert .mediumInsert-buttons a {
    text-decoration:underline;
    cursor:pointer
}
.mediumInsert .mediumInsert-buttons a.active {
    font-weight:bold
}
.mediumInsert .mediumInsert-buttons ul.mediumInsert-buttonsOptions {
    margin:0;
    padding:0;
    list-style:none;
    display:none;
    position:absolute;
    z-index:2;
    left:40px;
    top:-10px;
    border-radius:5px
}
.mediumInsert .mediumInsert-buttons ul.mediumInsert-buttonsOptions button {
    min-height:auto;
    height:auto;
    padding:5px;
    border-left:none;
    float:none
}
.mediumInsert .mediumInsert-buttons ul.mediumInsert-buttonsOptions button .fa {
    font-size:20px
}
.mediumInsert .mediumInsert-placeholder {
    position:relative;
    margin-left:40px;
    text-align:center
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images img {
    margin-top:1em;
    margin-bottom:10px;
    vertical-align:top
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images a {
    position:absolute;
    top:1em;
    width:30px;
    height:30px;
    background-color:#3b3b3b;
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images a.mediumInsert-imageRemove {
    right:0;
    background-image:url(../images/remove.png)
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images a.mediumInsert-imageResizeSmaller, .mediumInsert .mediumInsert-placeholder .mediumInsert-images a.mediumInsert-imageResizeBigger {
    right:31px;
    background-image:url(../images/resize-smaller.png)
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images a.mediumInsert-imageResizeBigger {
    background-image:url(../images/resize-bigger.png)
}
.mediumInsert .mediumInsert-placeholder .mediumInsert-images:first-child:after {
    content:"\a";white-space:pre}.mediumInsert .mediumInsert-placeholder .mediumInsert-images:not(:first-child){margin-right:10px}.mediumInsert .mediumInsert-placeholder .mediumInsert-images:not(:first-child) img{width:20%}.mediumInsert .mediumInsert-placeholder .mediumInsert-maps{padding:10px;background:#ccc}.mediumInsert .mediumInsert-placeholder .mediumInsert-error{background-color:#f2dede;border:1px solid #ebccd1;color:#a94442;padding:15px}.mediumInsert.hover .mediumInsert-placeholder{background:#f0f0f0}.mediumInsert:hover .mediumInsert-buttonsShow{-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);opacity:1}.mediumInsert.small .mediumInsert-placeholder{width:33.33%;float:left;margin-right:30px}.hover .mediumInsert-placeholder{min-height:14px;border:1px dashed #ddd;margin-top:-1px;margin-bottom:-1px}

/* Custom styling */
.medium-toolbar-arrow-under:after {
  top: 60px;
  border-color: #57ad68 transparent transparent transparent; }

.medium-toolbar-arrow-over:before {
  top: -8px;
  border-color: transparent transparent #57ad68 transparent; }

.medium-editor-toolbar {
  background-color: #57ad68; }
  .medium-editor-toolbar li {
    padding: 0; }
    .medium-editor-toolbar li button {
      min-width: 60px;
      height: 60px;
      border: none;
      border-right: 1px solid #9ccea5;
      background-color: transparent;
      color: #fff;
      -webkit-transition: background-color 0.2s ease-in, color 0.2s ease-in;
      transition: background-color 0.2s ease-in, color 0.2s ease-in; }
      .medium-editor-toolbar li button:hover {
        background-color: #346a3e;
        color: #fff; }
    .medium-editor-toolbar li .medium-editor-button-active {
      background-color: #23482a;
      color: #fff; }
    .medium-editor-toolbar li .medium-editor-button-last {
      border-right: none; }

.medium-editor-toolbar-form-anchor input {
  height: 60px;
  background: #57ad68;
  color: #fff; }
  .medium-editor-toolbar-form-anchor input::-webkit-input-placeholder {
    color: #fff;
    color: rgba(255, 255, 255, 0.8); }
  .medium-editor-toolbar-form-anchor input:-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
    color: rgba(255, 255, 255, 0.8); }
  .medium-editor-toolbar-form-anchor input::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
    color: rgba(255, 255, 255, 0.8); }
  .medium-editor-toolbar-form-anchor input:-ms-input-placeholder {
    color: #fff;
    color: rgba(255, 255, 255, 0.8); }
.medium-editor-toolbar-form-anchor a {
  color: #fff; }

.medium-editor-toolbar-anchor-preview {
  background: #57ad68;
  color: #fff; }

.medium-editor-placeholder:after {
  color: #fff; }


/*Downloaded from https://www.codeseek.co/curthusting/wip-donandapost-look-now-will-update-once-itandaposs-complete-GzrEL */

        var editor = new MediumEditor('.editable', {
            buttonLabels: 'fontawesome'
        });

        $(function () {
          $('.editable').mediumInsert({
            editor: editor,
            addons: {
              images: {},
              maps: {}
            }
          });
        });
$(document).on('click', '.create.deck', function() {
  
  console.log('add new story');
  
  if ($('.cover.page.active').is('.cover.page:last-of-type')) {
    
    $('.cover.page.active .page').after('<div class="cover page"></div><div class="page"></div>')
    
  } else {
    
    $('.cover.page.active').nextUntil('.cover.page').before('<div class="cover page"></div><div class="page"></div>')
    
  }
  
})



// Medium Style Editor
function MediumEditor(elements, options) {
    'use strict';
    return this.init(elements, options);
}

if (typeof module === 'object') {
    module.exports = MediumEditor;
}

(function (window, document) {
    'use strict';

    function extend(b, a) {
        var prop;
        if (b === undefined) {
            return a;
        }
        for (prop in a) {
            if (a.hasOwnProperty(prop) && b.hasOwnProperty(prop) === false) {
                b[prop] = a[prop];
            }
        }
        return b;
    }

    // http://stackoverflow.com/questions/5605401/insert-link-in-contenteditable-element
    // by Tim Down
    function saveSelection() {
        var i,
            len,
            ranges,
            sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            ranges = [];
            for (i = 0, len = sel.rangeCount; i < len; i += 1) {
                ranges.push(sel.getRangeAt(i));
            }
            return ranges;
        }
        return null;
    }

    function restoreSelection(savedSel) {
        var i,
            len,
            sel = window.getSelection();
        if (savedSel) {
            sel.removeAllRanges();
            for (i = 0, len = savedSel.length; i < len; i += 1) {
                sel.addRange(savedSel[i]);
            }
        }
    }

    // http://stackoverflow.com/questions/1197401/how-can-i-get-the-element-the-caret-is-in-with-javascript-when-using-contentedi
    // by You
    function getSelectionStart() {
        var node = document.getSelection().anchorNode,
            startNode = (node && node.nodeType === 3 ? node.parentNode : node);
        return startNode;
    }

    // http://stackoverflow.com/questions/4176923/html-of-selected-text
    // by Tim Down
    function getSelectionHtml() {
        var i,
            html = '',
            sel,
            len,
            container;
        if (window.getSelection !== undefined) {
            sel = window.getSelection();
            if (sel.rangeCount) {
                container = document.createElement('div');
                for (i = 0, len = sel.rangeCount; i < len; i += 1) {
                    container.appendChild(sel.getRangeAt(i).cloneContents());
                }
                html = container.innerHTML;
            }
        } else if (document.selection !== undefined) {
            if (document.selection.type === 'Text') {
                html = document.selection.createRange().htmlText;
            }
        }
        return html;
    }

    // https://github.com/jashkenas/underscore
    function isElement(obj) {
        return !!(obj && obj.nodeType === 1);
    }

    MediumEditor.prototype = {
        defaults: {
            allowMultiParagraphSelection: true,
            anchorInputPlaceholder: 'Paste or type a link',
            anchorPreviewHideDelay: 500,
            buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote'],
            buttonLabels: false,
            checkLinkFormat: false,
            cleanPastedHTML: false,
            delay: 0,
            diffLeft: 0,
            diffTop: -10,
            disableReturn: false,
            disableDoubleReturn: false,
            disableToolbar: false,
            disableEditing: false,
            elementsContainer: false,
            firstHeader: 'h3',
            forcePlainText: true,
            placeholder: 'Type your text',
            secondHeader: 'h4',
            targetBlank: false,
            extensions: {}
        },

        // http://stackoverflow.com/questions/17907445/how-to-detect-ie11#comment30165888_17907562
        // by rg89
        isIE: ((navigator.appName === 'Microsoft Internet Explorer') || ((navigator.appName === 'Netscape') && (new RegExp('Trident/.*rv:([0-9]{1,}[.0-9]{0,})').exec(navigator.userAgent) !== null))),

        init: function (elements, options) {
            this.setElementSelection(elements);
            if (this.elements.length === 0) {
                return;
            }
            this.parentElements = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre'];
            this.id = document.querySelectorAll('.medium-editor-toolbar').length + 1;
            this.options = extend(options, this.defaults);
            return this.setup();
        },

        setup: function () {
            this.isActive = true;
            this.initElements()
                .bindSelect()
                .bindPaste()
                .setPlaceholders()
                .bindWindowActions();
        },

        initElements: function () {
            this.updateElementList();
            var i,
                addToolbar = false;
            for (i = 0; i < this.elements.length; i += 1) {
                if (!this.options.disableEditing && !this.elements[i].getAttribute('data-disable-editing')) {
                    this.elements[i].setAttribute('contentEditable', true);
                }
                if (!this.elements[i].getAttribute('data-placeholder')) {
                    this.elements[i].setAttribute('data-placeholder', this.options.placeholder);
                }
                this.elements[i].setAttribute('data-medium-element', true);
                this.bindParagraphCreation(i).bindReturn(i).bindTab(i);
                if (!this.options.disableToolbar && !this.elements[i].getAttribute('data-disable-toolbar')) {
                    addToolbar = true;
                }
            }
            // Init toolbar
            if (addToolbar) {
                if (!this.options.elementsContainer) {
                    this.options.elementsContainer = document.body;
                }
                this.initToolbar()
                    .bindButtons()
                    .bindAnchorForm()
                    .bindAnchorPreview();
            }
            return this;
        },

        setElementSelection: function (selector) {
            this.elementSelection = selector;
            this.updateElementList();
        },

        updateElementList: function () {
            this.elements = typeof this.elementSelection === 'string' ? document.querySelectorAll(this.elementSelection) : this.elementSelection;
            if (this.elements.nodeType === 1) {
                this.elements = [this.elements];
            }
        },

        serialize: function () {
            var i,
                elementid,
                content = {};
            for (i = 0; i < this.elements.length; i += 1) {
                elementid = (this.elements[i].id !== '') ? this.elements[i].id : 'element-' + i;
                content[elementid] = {
                    value: this.elements[i].innerHTML.trim()
                };
            }
            return content;
        },

        /**
         * Helper function to call a method with a number of parameters on all registered extensions.
         * The function assures that the function exists before calling.
         *
         * @param {string} funcName name of the function to call
         * @param [args] arguments passed into funcName
         */
        callExtensions: function (funcName) {
            if (arguments.length < 1) {
                return;
            }

            var args = Array.prototype.slice.call(arguments, 1),
                ext,
                name;

            for (name in this.options.extensions) {
                if (this.options.extensions.hasOwnProperty(name)) {
                    ext = this.options.extensions[name];
                    if (ext[funcName] !== undefined) {
                        ext[funcName].apply(ext, args);
                    }
                }
            }
        },

        bindParagraphCreation: function (index) {
            var self = this;
            this.elements[index].addEventListener('keypress', function (e) {
                var node = getSelectionStart(),
                    tagName;
                if (e.which === 32) {
                    tagName = node.tagName.toLowerCase();
                    if (tagName === 'a') {
                        document.execCommand('unlink', false, null);
                    }
                }
            });

            this.elements[index].addEventListener('keyup', function (e) {
                var node = getSelectionStart(),
                    tagName;
                if (node && node.getAttribute('data-medium-element') && node.children.length === 0 && !(self.options.disableReturn || node.getAttribute('data-disable-return'))) {
                    document.execCommand('formatBlock', false, 'p');
                }
                if (e.which === 13) {
                    node = getSelectionStart();
                    tagName = node.tagName.toLowerCase();
                    if (!(self.options.disableReturn || this.getAttribute('data-disable-return')) &&
                        tagName !== 'li' && !self.isListItemChild(node)) {
                        if (!e.shiftKey) {
                            document.execCommand('formatBlock', false, 'p');
                        }
                        if (tagName === 'a') {
                            document.execCommand('unlink', false, null);
                        }
                    }
                }
            });
            return this;
        },

        isListItemChild: function (node) {
            var parentNode = node.parentNode,
                tagName = parentNode.tagName.toLowerCase();
            while (this.parentElements.indexOf(tagName) === -1 && tagName !== 'div') {
                if (tagName === 'li') {
                    return true;
                }
                parentNode = parentNode.parentNode;
                if (parentNode && parentNode.tagName) {
                    tagName = parentNode.tagName.toLowerCase();
                } else {
                    return false;
                }
            }
            return false;
        },

        bindReturn: function (index) {
            var self = this;
            this.elements[index].addEventListener('keypress', function (e) {
                if (e.which === 13) {
                    if (self.options.disableReturn || this.getAttribute('data-disable-return')) {
                        e.preventDefault();
                    } else if (self.options.disableDoubleReturn || this.getAttribute('data-disable-double-return')) {
                        var node = getSelectionStart();
                        if (node && node.innerText === '\n') {
                            e.preventDefault();
                        }
                    }
                }
            });
            return this;
        },

        bindTab: function (index) {
            this.elements[index].addEventListener('keydown', function (e) {
                if (e.which === 9) {
                    // Override tab only for pre nodes
                    var tag = getSelectionStart().tagName.toLowerCase();
                    if (tag === 'pre') {
                        e.preventDefault();
                        document.execCommand('insertHtml', null, '    ');
                    }
                }
            });
            return this;
        },

        buttonTemplate: function (btnType) {
            var buttonLabels = this.getButtonLabels(this.options.buttonLabels),
                buttonTemplates = {
                    'bold': '<button class="medium-editor-action medium-editor-action-bold" data-action="bold" data-element="b">' + buttonLabels.bold + '</button>',
                    'italic': '<button class="medium-editor-action medium-editor-action-italic" data-action="italic" data-element="i">' + buttonLabels.italic + '</button>',
                    'underline': '<button class="medium-editor-action medium-editor-action-underline" data-action="underline" data-element="u">' + buttonLabels.underline + '</button>',
                    'strikethrough': '<button class="medium-editor-action medium-editor-action-strikethrough" data-action="strikethrough" data-element="strike"><strike>A</strike></button>',
                    'superscript': '<button class="medium-editor-action medium-editor-action-superscript" data-action="superscript" data-element="sup">' + buttonLabels.superscript + '</button>',
                    'subscript': '<button class="medium-editor-action medium-editor-action-subscript" data-action="subscript" data-element="sub">' + buttonLabels.subscript + '</button>',
                    'anchor': '<button class="medium-editor-action medium-editor-action-anchor" data-action="anchor" data-element="a">' + buttonLabels.anchor + '</button>',
                    'image': '<button class="medium-editor-action medium-editor-action-image" data-action="image" data-element="img">' + buttonLabels.image + '</button>',
                    'header1': '<button class="medium-editor-action medium-editor-action-header1" data-action="append-' + this.options.firstHeader + '" data-element="' + this.options.firstHeader + '">' + buttonLabels.header1 + '</button>',
                    'header2': '<button class="medium-editor-action medium-editor-action-header2" data-action="append-' + this.options.secondHeader + '" data-element="' + this.options.secondHeader + '">' + buttonLabels.header2 + '</button>',
                    'quote': '<button class="medium-editor-action medium-editor-action-quote" data-action="append-blockquote" data-element="blockquote">' + buttonLabels.quote + '</button>',
                    'orderedlist': '<button class="medium-editor-action medium-editor-action-orderedlist" data-action="insertorderedlist" data-element="ol">' + buttonLabels.orderedlist + '</button>',
                    'unorderedlist': '<button class="medium-editor-action medium-editor-action-unorderedlist" data-action="insertunorderedlist" data-element="ul">' + buttonLabels.unorderedlist + '</button>',
                    'pre': '<button class="medium-editor-action medium-editor-action-pre" data-action="append-pre" data-element="pre">' + buttonLabels.pre + '</button>',
                    'indent': '<button class="medium-editor-action medium-editor-action-indent" data-action="indent" data-element="ul">' + buttonLabels.indent + '</button>',
                    'outdent': '<button class="medium-editor-action medium-editor-action-outdent" data-action="outdent" data-element="ul">' + buttonLabels.outdent + '</button>'
                };
            return buttonTemplates[btnType] || false;
        },

        // TODO: break method
        getButtonLabels: function (buttonLabelType) {
            var customButtonLabels,
                attrname,
                buttonLabels = {
                    'bold': '<b>B</b>',
                    'italic': '<b><i>I</i></b>',
                    'underline': '<b><u>U</u></b>',
                    'superscript': '<b>x<sup>1</sup></b>',
                    'subscript': '<b>x<sub>1</sub></b>',
                    'anchor': '<b>#</b>',
                    'image': '<b>image</b>',
                    'header1': '<b>H1</b>',
                    'header2': '<b>H2</b>',
                    'quote': '<b>&ldquo;</b>',
                    'orderedlist': '<b>1.</b>',
                    'unorderedlist': '<b>&bull;</b>',
                    'pre': '<b>0101</b>',
                    'indent': '<b>&rarr;</b>',
                    'outdent': '<b>&larr;</b>'
                };
            if (buttonLabelType === 'fontawesome') {
                customButtonLabels = {
                    'bold': '<i class="fa fa-bold"></i>',
                    'italic': '<i class="fa fa-italic"></i>',
                    'underline': '<i class="fa fa-underline"></i>',
                    'superscript': '<i class="fa fa-superscript"></i>',
                    'subscript': '<i class="fa fa-subscript"></i>',
                    'anchor': '<i class="fa fa-link"></i>',
                    'image': '<i class="fa fa-picture-o"></i>',
                    'quote': '<i class="fa fa-quote-right"></i>',
                    'orderedlist': '<i class="fa fa-list-ol"></i>',
                    'unorderedlist': '<i class="fa fa-list-ul"></i>',
                    'pre': '<i class="fa fa-code fa-lg"></i>',
                    'indent': '<i class="fa fa-indent"></i>',
                    'outdent': '<i class="fa fa-outdent"></i>'
                };
            } else if (typeof buttonLabelType === 'object') {
                customButtonLabels = buttonLabelType;
            }
            if (typeof customButtonLabels === 'object') {
                for (attrname in customButtonLabels) {
                    if (customButtonLabels.hasOwnProperty(attrname)) {
                        buttonLabels[attrname] = customButtonLabels[attrname];
                    }
                }
            }
            return buttonLabels;
        },

        initToolbar: function () {
            if (this.toolbar) {
                return this;
            }
            this.toolbar = this.createToolbar();
            this.keepToolbarAlive = false;
            this.anchorForm = this.toolbar.querySelector('.medium-editor-toolbar-form-anchor');
            this.anchorInput = this.anchorForm.querySelector('input');
            this.toolbarActions = this.toolbar.querySelector('.medium-editor-toolbar-actions');
            this.anchorPreview = this.createAnchorPreview();

            return this;
        },

        createToolbar: function () {
            var toolbar = document.createElement('div');
            toolbar.id = 'medium-editor-toolbar-' + this.id;
            toolbar.className = 'medium-editor-toolbar';
            toolbar.appendChild(this.toolbarButtons());
            toolbar.appendChild(this.toolbarFormAnchor());
            this.options.elementsContainer.appendChild(toolbar);
            return toolbar;
        },

        //TODO: actionTemplate
        toolbarButtons: function () {
            var btns = this.options.buttons,
                ul = document.createElement('ul'),
                li,
                i,
                btn,
                ext;

            ul.id = 'medium-editor-toolbar-actions';
            ul.className = 'medium-editor-toolbar-actions clearfix';

            for (i = 0; i < btns.length; i += 1) {
                if (this.options.extensions.hasOwnProperty(btns[i])) {
                    ext = this.options.extensions[btns[i]];
                    btn = ext.getButton !== undefined ? ext.getButton() : null;
                } else {
                    btn = this.buttonTemplate(btns[i]);
                }

                if (btn) {
                    li = document.createElement('li');
                    if (isElement(btn)) {
                        li.appendChild(btn);
                    } else {
                        li.innerHTML = btn;
                    }
                    ul.appendChild(li);
                }
            }

            return ul;
        },

        toolbarFormAnchor: function () {
            var anchor = document.createElement('div'),
                input = document.createElement('input'),
                a = document.createElement('a');

            a.setAttribute('href', '#');
            a.innerHTML = '&times;';

            input.setAttribute('type', 'text');
            input.setAttribute('placeholder', this.options.anchorInputPlaceholder);

            anchor.className = 'medium-editor-toolbar-form-anchor';
            anchor.id = 'medium-editor-toolbar-form-anchor';
            anchor.appendChild(input);
            anchor.appendChild(a);

            return anchor;
        },

        bindSelect: function () {
            var self = this,
                timer = '',
                i;

            this.checkSelectionWrapper = function (e) {

                // Do not close the toolbar when bluring the editable area and clicking into the anchor form
                if (e && self.clickingIntoArchorForm(e)) {
                    return false;
                }

                clearTimeout(timer);
                timer = setTimeout(function () {
                    self.checkSelection();
                }, self.options.delay);
            };

            document.documentElement.addEventListener('mouseup', this.checkSelectionWrapper);

            for (i = 0; i < this.elements.length; i += 1) {
                this.elements[i].addEventListener('keyup', this.checkSelectionWrapper);
                this.elements[i].addEventListener('blur', this.checkSelectionWrapper);
            }
            return this;
        },

        checkSelection: function () {
            var newSelection,
                selectionElement;

            if (this.keepToolbarAlive !== true && !this.options.disableToolbar) {
                newSelection = window.getSelection();
                if (newSelection.toString().trim() === '' ||
                    (this.options.allowMultiParagraphSelection === false && this.hasMultiParagraphs())) {
                    this.hideToolbarActions();
                } else {
                    selectionElement = this.getSelectionElement();
                    if (!selectionElement || selectionElement.getAttribute('data-disable-toolbar')) {
                        this.hideToolbarActions();
                    } else {
                        this.checkSelectionElement(newSelection, selectionElement);
                    }
                }
            }
            return this;
        },

        clickingIntoArchorForm: function (e) {
            var self = this;
            if (e.type && e.type.toLowerCase() === 'blur' && e.relatedTarget && e.relatedTarget === self.anchorInput) {
                return true;
            }
            return false;
        },

        hasMultiParagraphs: function () {
            var selectionHtml = getSelectionHtml().replace(/<[\S]+><\/[\S]+>/gim, ''),
                hasMultiParagraphs = selectionHtml.match(/<(p|h[0-6]|blockquote)>([\s\S]*?)<\/(p|h[0-6]|blockquote)>/g);

            return (hasMultiParagraphs ? hasMultiParagraphs.length : 0);
        },

        checkSelectionElement: function (newSelection, selectionElement) {
            var i;
            this.selection = newSelection;
            this.selectionRange = this.selection.getRangeAt(0);
            for (i = 0; i < this.elements.length; i += 1) {
                if (this.elements[i] === selectionElement) {
                    this.setToolbarButtonStates()
                        .setToolbarPosition()
                        .showToolbarActions();
                    return;
                }
            }
            this.hideToolbarActions();
        },

        getSelectionElement: function () {
            var selection = window.getSelection(),
                range, current, parent,
                result,
                getMediumElement = function (e) {
                    var localParent = e;
                    try {
                        while (!localParent.getAttribute('data-medium-element')) {
                            localParent = localParent.parentNode;
                        }
                    } catch (errb) {
                        return false;
                    }
                    return localParent;
                };
            // First try on current node
            try {
                range = selection.getRangeAt(0);
                current = range.commonAncestorContainer;
                parent = current.parentNode;

                if (current.getAttribute('data-medium-element')) {
                    result = current;
                } else {
                    result = getMediumElement(parent);
                }
                // If not search in the parent nodes.
            } catch (err) {
                result = getMediumElement(parent);
            }
            return result;
        },

        setToolbarPosition: function () {
            var buttonHeight = 50,
                selection = window.getSelection(),
                range = selection.getRangeAt(0),
                boundary = range.getBoundingClientRect(),
                defaultLeft = (this.options.diffLeft) - (this.toolbar.offsetWidth / 2),
                middleBoundary = (boundary.left + boundary.right) / 2,
                halfOffsetWidth = this.toolbar.offsetWidth / 2;
            if (boundary.top < buttonHeight) {
                this.toolbar.classList.add('medium-toolbar-arrow-over');
                this.toolbar.classList.remove('medium-toolbar-arrow-under');
                this.toolbar.style.top = buttonHeight + boundary.bottom - this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px';
            } else {
                this.toolbar.classList.add('medium-toolbar-arrow-under');
                this.toolbar.classList.remove('medium-toolbar-arrow-over');
                this.toolbar.style.top = boundary.top + this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px';
            }
            if (middleBoundary < halfOffsetWidth) {
                this.toolbar.style.left = defaultLeft + halfOffsetWidth + 'px';
            } else if ((window.innerWidth - middleBoundary) < halfOffsetWidth) {
                this.toolbar.style.left = window.innerWidth + defaultLeft - halfOffsetWidth + 'px';
            } else {
                this.toolbar.style.left = defaultLeft + middleBoundary + 'px';
            }

            this.hideAnchorPreview();

            return this;
        },

        setToolbarButtonStates: function () {
            var buttons = this.toolbarActions.querySelectorAll('button'),
                i;
            for (i = 0; i < buttons.length; i += 1) {
                buttons[i].classList.remove('medium-editor-button-active');
            }
            this.checkActiveButtons();
            return this;
        },

        checkActiveButtons: function () {
            var elements = Array.prototype.slice.call(this.elements),
                parentNode = this.getSelectedParentElement();
            while (parentNode.tagName !== undefined && this.parentElements.indexOf(parentNode.tagName.toLowerCase) === -1) {
                this.activateButton(parentNode.tagName.toLowerCase());
                this.callExtensions('checkState', parentNode);

                // we can abort the search upwards if we leave the contentEditable element
                if (elements.indexOf(parentNode) !== -1) {
                    break;
                }
                parentNode = parentNode.parentNode;
            }
        },

        activateButton: function (tag) {
            var el = this.toolbar.querySelector('[data-element="' + tag + '"]');
            if (el !== null && el.className.indexOf('medium-editor-button-active') === -1) {
                el.className += ' medium-editor-button-active';
            }
        },

        bindButtons: function () {
            var buttons = this.toolbar.querySelectorAll('button'),
                i,
                self = this,
                triggerAction = function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    if (self.selection === undefined) {
                        self.checkSelection();
                    }
                    if (this.className.indexOf('medium-editor-button-active') > -1) {
                        this.classList.remove('medium-editor-button-active');
                    } else {
                        this.className += ' medium-editor-button-active';
                    }
                    if (this.hasAttribute('data-action')) {
                        self.execAction(this.getAttribute('data-action'), e);
                    }
                };
            for (i = 0; i < buttons.length; i += 1) {
                buttons[i].addEventListener('click', triggerAction);
            }
            this.setFirstAndLastItems(buttons);
            return this;
        },

        setFirstAndLastItems: function (buttons) {
            if (buttons.length > 0) {
                buttons[0].className += ' medium-editor-button-first';
                buttons[buttons.length - 1].className += ' medium-editor-button-last';
            }
            return this;
        },

        execAction: function (action, e) {
            if (action.indexOf('append-') > -1) {
                this.execFormatBlock(action.replace('append-', ''));
                this.setToolbarPosition();
                this.setToolbarButtonStates();
            } else if (action === 'anchor') {
                this.triggerAnchorAction(e);
            } else if (action === 'image') {
                document.execCommand('insertImage', false, window.getSelection());
            } else {
                document.execCommand(action, false, null);
                this.setToolbarPosition();
            }
        },

        // http://stackoverflow.com/questions/15867542/range-object-get-selection-parent-node-chrome-vs-firefox
        rangeSelectsSingleNode: function (range) {
            var startNode = range.startContainer;
            return startNode === range.endContainer &&
                startNode.hasChildNodes() &&
                range.endOffset === range.startOffset + 1;
        },

        getSelectedParentElement: function () {
            var selectedParentElement = null,
                range = this.selectionRange;
            if (this.rangeSelectsSingleNode(range)) {
                selectedParentElement = range.startContainer.childNodes[range.startOffset];
            } else if (range.startContainer.nodeType === 3) {
                selectedParentElement = range.startContainer.parentNode;
            } else {
                selectedParentElement = range.startContainer;
            }
            return selectedParentElement;
        },

        triggerAnchorAction: function () {
            var selectedParentElement = this.getSelectedParentElement();
            if (selectedParentElement.tagName &&
                    selectedParentElement.tagName.toLowerCase() === 'a') {
                document.execCommand('unlink', false, null);
            } else {
                if (this.anchorForm.style.display === 'block') {
                    this.showToolbarActions();
                } else {
                    this.showAnchorForm();
                }
            }
            return this;
        },

        execFormatBlock: function (el) {
            var selectionData = this.getSelectionData(this.selection.anchorNode);
            // FF handles blockquote differently on formatBlock
            // allowing nesting, we need to use outdent
            // https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla
            if (el === 'blockquote' && selectionData.el &&
                selectionData.el.parentNode.tagName.toLowerCase() === 'blockquote') {
                return document.execCommand('outdent', false, null);
            }
            if (selectionData.tagName === el) {
                el = 'p';
            }
            // When IE we need to add <> to heading elements and
            //  blockquote needs to be called as indent
            // http://stackoverflow.com/questions/10741831/execcommand-formatblock-headings-in-ie
            // http://stackoverflow.com/questions/1816223/rich-text-editor-with-blockquote-function/1821777#1821777
            if (this.isIE) {
                if (el === 'blockquote') {
                    return document.execCommand('indent', false, el);
                }
                el = '<' + el + '>';
            }
            return document.execCommand('formatBlock', false, el);
        },

        getSelectionData: function (el) {
            var tagName;

            if (el && el.tagName) {
                tagName = el.tagName.toLowerCase();
            }

            while (el && this.parentElements.indexOf(tagName) === -1) {
                el = el.parentNode;
                if (el && el.tagName) {
                    tagName = el.tagName.toLowerCase();
                }
            }

            return {
                el: el,
                tagName: tagName
            };
        },

        getFirstChild: function (el) {
            var firstChild = el.firstChild;
            while (firstChild !== null && firstChild.nodeType !== 1) {
                firstChild = firstChild.nextSibling;
            }
            return firstChild;
        },

        hideToolbarActions: function () {
            this.keepToolbarAlive = false;
            if (this.toolbar !== undefined) {
                this.toolbar.classList.remove('medium-editor-toolbar-active');
            }
        },

        showToolbarActions: function () {
            var self = this,
                timer;
            this.anchorForm.style.display = 'none';
            this.toolbarActions.style.display = 'block';
            this.keepToolbarAlive = false;
            clearTimeout(timer);
            timer = setTimeout(function () {
                if (self.toolbar && !self.toolbar.classList.contains('medium-editor-toolbar-active')) {
                    self.toolbar.classList.add('medium-editor-toolbar-active');
                }
            }, 100);
        },

        showAnchorForm: function (link_value) {
            this.toolbarActions.style.display = 'none';
            this.savedSelection = saveSelection();
            this.anchorForm.style.display = 'block';
            this.keepToolbarAlive = true;
            this.anchorInput.focus();
            this.anchorInput.value = link_value || '';
        },

        bindAnchorForm: function () {
            var linkCancel = this.anchorForm.querySelector('a'),
                self = this;
            this.anchorForm.addEventListener('click', function (e) {
                e.stopPropagation();
            });
            this.anchorInput.addEventListener('keyup', function (e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                    self.createLink(this);
                }
            });
            this.anchorInput.addEventListener('click', function (e) {
                // make sure not to hide form when cliking into the input
                e.stopPropagation();
                self.keepToolbarAlive = true;
            });
            this.anchorInput.addEventListener('blur', function () {
                self.keepToolbarAlive = false;
                self.checkSelection();
            });
            linkCancel.addEventListener('click', function (e) {
                e.preventDefault();
                self.showToolbarActions();
                restoreSelection(self.savedSelection);
            });
            return this;
        },


        hideAnchorPreview: function () {
            this.anchorPreview.classList.remove('medium-editor-anchor-preview-active');
        },

        // TODO: break method
        showAnchorPreview: function (anchorEl) {
            if (this.anchorPreview.classList.contains('medium-editor-anchor-preview-active')) {
                return true;
            }

            var self = this,
                buttonHeight = 40,
                boundary = anchorEl.getBoundingClientRect(),
                middleBoundary = (boundary.left + boundary.right) / 2,
                halfOffsetWidth,
                defaultLeft,
                timer;

            self.anchorPreview.querySelector('i').textContent = anchorEl.href;
            halfOffsetWidth = self.anchorPreview.offsetWidth / 2;
            defaultLeft = self.options.diffLeft - halfOffsetWidth;

            clearTimeout(timer);
            timer = setTimeout(function () {
                if (self.anchorPreview && !self.anchorPreview.classList.contains('medium-editor-anchor-preview-active')) {
                    self.anchorPreview.classList.add('medium-editor-anchor-preview-active');
                }
            }, 100);

            self.observeAnchorPreview(anchorEl);

            self.anchorPreview.classList.add('medium-toolbar-arrow-over');
            self.anchorPreview.classList.remove('medium-toolbar-arrow-under');
            self.anchorPreview.style.top = Math.round(buttonHeight + boundary.bottom - self.options.diffTop + window.pageYOffset - self.anchorPreview.offsetHeight) + 'px';
            if (middleBoundary < halfOffsetWidth) {
                self.anchorPreview.style.left = defaultLeft + halfOffsetWidth + 'px';
            } else if ((window.innerWidth - middleBoundary) < halfOffsetWidth) {
                self.anchorPreview.style.left = window.innerWidth + defaultLeft - halfOffsetWidth + 'px';
            } else {
                self.anchorPreview.style.left = defaultLeft + middleBoundary + 'px';
            }

            return this;
        },

        // TODO: break method
        observeAnchorPreview: function (anchorEl) {
            var self = this,
                lastOver = (new Date()).getTime(),
                over = true,
                stamp = function () {
                    lastOver = (new Date()).getTime();
                    over = true;
                },
                unstamp = function (e) {
                    if (!e.relatedTarget || !/anchor-preview/.test(e.relatedTarget.className)) {
                        over = false;
                    }
                },
                interval_timer = setInterval(function () {
                    if (over) {
                        return true;
                    }
                    var durr = (new Date()).getTime() - lastOver;
                    if (durr > self.options.anchorPreviewHideDelay) {
                        // hide the preview 1/2 second after mouse leaves the link
                        self.hideAnchorPreview();

                        // cleanup
                        clearInterval(interval_timer);
                        self.anchorPreview.removeEventListener('mouseover', stamp);
                        self.anchorPreview.removeEventListener('mouseout', unstamp);
                        anchorEl.removeEventListener('mouseover', stamp);
                        anchorEl.removeEventListener('mouseout', unstamp);

                    }
                }, 200);

            self.anchorPreview.addEventListener('mouseover', stamp);
            self.anchorPreview.addEventListener('mouseout', unstamp);
            anchorEl.addEventListener('mouseover', stamp);
            anchorEl.addEventListener('mouseout', unstamp);
        },

        createAnchorPreview: function () {
            var self = this,
                anchorPreview = document.createElement('div');

            anchorPreview.id = 'medium-editor-anchor-preview-' + this.id;
            anchorPreview.className = 'medium-editor-anchor-preview';
            anchorPreview.innerHTML = this.anchorPreviewTemplate();
            this.options.elementsContainer.appendChild(anchorPreview);

            anchorPreview.addEventListener('click', function () {
                self.anchorPreviewClickHandler();
            });

            return anchorPreview;
        },

        anchorPreviewTemplate: function () {
            return '<div class="medium-editor-toolbar-anchor-preview" id="medium-editor-toolbar-anchor-preview">' +
                '    <i class="medium-editor-toolbar-anchor-preview-inner"></i>' +
                '</div>';
        },

        anchorPreviewClickHandler: function (e) {
            if (this.activeAnchor) {

                var self = this,
                    range = document.createRange(),
                    sel = window.getSelection();

                range.selectNodeContents(self.activeAnchor);
                sel.removeAllRanges();
                sel.addRange(range);
                setTimeout(function () {
                    if (self.activeAnchor) {
                        self.showAnchorForm(self.activeAnchor.href);
                    }
                    self.keepToolbarAlive = false;
                }, 100 + self.options.delay);

            }

            this.hideAnchorPreview();
        },

        editorAnchorObserver: function (e) {
            var self = this,
                overAnchor = true,
                leaveAnchor = function () {
                    // mark the anchor as no longer hovered, and stop listening
                    overAnchor = false;
                    self.activeAnchor.removeEventListener('mouseout', leaveAnchor);
                };

            if (e.target && e.target.tagName.toLowerCase() === 'a') {

                // Detect empty href attributes
                // The browser will make href="" or href="#top"
                // into absolute urls when accessed as e.targed.href, so check the html
                if (!/href=["']\S+["']/.test(e.target.outerHTML) || /href=["']#\S+["']/.test(e.target.outerHTML)) {
                    return true;
                }

                // only show when hovering on anchors
                if (this.toolbar.classList.contains('medium-editor-toolbar-active')) {
                    // only show when toolbar is not present
                    return true;
                }
                this.activeAnchor = e.target;
                this.activeAnchor.addEventListener('mouseout', leaveAnchor);
                // show the anchor preview according to the configured delay
                // if the mouse has not left the anchor tag in that time
                setTimeout(function () {
                    if (overAnchor) {
                        self.showAnchorPreview(e.target);
                    }
                }, self.options.delay);


            }
        },

        bindAnchorPreview: function (index) {
            var i, self = this;
            this.editorAnchorObserverWrapper = function (e) {
                self.editorAnchorObserver(e);
            };
            for (i = 0; i < this.elements.length; i += 1) {
                this.elements[i].addEventListener('mouseover', this.editorAnchorObserverWrapper);
            }
            return this;
        },

        checkLinkFormat: function (value) {
            var re = /^https?:\/\//;
            if (value.match(re)) {
                return value;
            }
            return "http://" + value;
        },

        setTargetBlank: function () {
            var el = getSelectionStart(),
                i;
            if (el.tagName.toLowerCase() === 'a') {
                el.target = '_blank';
            } else {
                el = el.getElementsByTagName('a');
                for (i = 0; i < el.length; i += 1) {
                    el[i].target = '_blank';
                }
            }
        },

        createLink: function (input) {
            restoreSelection(this.savedSelection);
            if (this.options.checkLinkFormat) {
                input.value = this.checkLinkFormat(input.value);
            }
            document.execCommand('createLink', false, input.value);
            if (this.options.targetBlank) {
                this.setTargetBlank();
            }
            this.checkSelection();
            this.showToolbarActions();
            input.value = '';
        },

        bindWindowActions: function () {
            var timerResize,
                self = this;
            this.windowResizeHandler = function () {
                clearTimeout(timerResize);
                timerResize = setTimeout(function () {
                    if (self.toolbar && self.toolbar.classList.contains('medium-editor-toolbar-active')) {
                        self.setToolbarPosition();
                    }
                }, 100);
            };
            window.addEventListener('resize', this.windowResizeHandler);
            return this;
        },

        activate: function () {
            if (this.isActive) {
                return;
            }

            this.setup();
        },

        // TODO: break method
        deactivate: function () {
            var i;
            if (!this.isActive) {
                return;
            }
            this.isActive = false;

            if (this.toolbar !== undefined) {
                this.options.elementsContainer.removeChild(this.anchorPreview);
                this.options.elementsContainer.removeChild(this.toolbar);
                delete this.toolbar;
                delete this.anchorPreview;
            }

            document.documentElement.removeEventListener('mouseup', this.checkSelectionWrapper);
            window.removeEventListener('resize', this.windowResizeHandler);

            for (i = 0; i < this.elements.length; i += 1) {
                this.elements[i].removeEventListener('mouseover', this.editorAnchorObserverWrapper);
                this.elements[i].removeEventListener('keyup', this.checkSelectionWrapper);
                this.elements[i].removeEventListener('blur', this.checkSelectionWrapper);
                this.elements[i].removeEventListener('paste', this.pasteWrapper);
                this.elements[i].removeAttribute('contentEditable');
                this.elements[i].removeAttribute('data-medium-element');
            }

        },

        htmlEntities: function (str) {
            // converts special characters (like <) into their escaped/encoded values (like &lt;).
            // This allows you to show to display the string without the browser reading it as HTML.
            return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        },

        bindPaste: function () {
            var i, self = this;
            this.pasteWrapper = function (e) {
                var paragraphs,
                    html = '',
                    p;

                this.classList.remove('medium-editor-placeholder');
                if (!self.options.forcePlainText && !self.options.cleanPastedHTML) {
                    return this;
                }

                if (e.clipboardData && e.clipboardData.getData && !e.defaultPrevented) {
                    e.preventDefault();

                    if (self.options.cleanPastedHTML && e.clipboardData.getData('text/html')) {
                        return self.cleanPaste(e.clipboardData.getData('text/html'));
                    }
                    if (!(self.options.disableReturn || this.getAttribute('data-disable-return'))) {
                        paragraphs = e.clipboardData.getData('text/plain').split(/[\r\n]/g);
                        for (p = 0; p < paragraphs.length; p += 1) {
                            if (paragraphs[p] !== '') {
                                if (navigator.userAgent.match(/firefox/i) && p === 0) {
                                    html += self.htmlEntities(paragraphs[p]);
                                } else {
                                    html += '<p>' + self.htmlEntities(paragraphs[p]) + '</p>';
                                }
                            }
                        }
                        document.execCommand('insertHTML', false, html);
                    } else {
                        document.execCommand('insertHTML', false, e.clipboardData.getData('text/plain'));
                    }
                }
            };
            for (i = 0; i < this.elements.length; i += 1) {
                this.elements[i].addEventListener('paste', this.pasteWrapper);
            }
            return this;
        },

        setPlaceholders: function () {
            var i,
                activatePlaceholder = function (el) {
                    if (!(el.querySelector('img')) &&
                            !(el.querySelector('blockquote')) &&
                            el.textContent.replace(/^\s+|\s+$/g, '') === '') {
                        el.classList.add('medium-editor-placeholder');
                    }
                },
                placeholderWrapper = function (e) {
                    this.classList.remove('medium-editor-placeholder');
                    if (e.type !== 'keypress') {
                        activatePlaceholder(this);
                    }
                };
            for (i = 0; i < this.elements.length; i += 1) {
                activatePlaceholder(this.elements[i]);
                this.elements[i].addEventListener('blur', placeholderWrapper);
                this.elements[i].addEventListener('keypress', placeholderWrapper);
            }
            return this;
        },

        cleanPaste: function (text) {

            /*jslint regexp: true*/
            /*
                jslint does not allow character negation, because the negation
                will not match any unicode characters. In the regexes in this
                block, negation is used specifically to match the end of an html
                tag, and in fact unicode characters *should* be allowed.
            */
            var i, elList, workEl,
                el = this.getSelectionElement(),
                multiline = /<p|<br|<div/.test(text),
                replacements = [

                    // replace two bogus tags that begin pastes from google docs
                    [new RegExp(/<[^>]*docs-internal-guid[^>]*>/gi), ""],
                    [new RegExp(/<\/b>(<br[^>]*>)?$/gi), ""],

                     // un-html spaces and newlines inserted by OS X
                    [new RegExp(/<span class="Apple-converted-space">\s+<\/span>/g), ' '],
                    [new RegExp(/<br class="Apple-interchange-newline">/g), '<br>'],

                    // replace google docs italics+bold with a span to be replaced once the html is inserted
                    [new RegExp(/<span[^>]*(font-style:italic;font-weight:bold|font-weight:bold;font-style:italic)[^>]*>/gi), '<span class="replace-with italic bold">'],

                    // replace google docs italics with a span to be replaced once the html is inserted
                    [new RegExp(/<span[^>]*font-style:italic[^>]*>/gi), '<span class="replace-with italic">'],

                    //[replace google docs bolds with a span to be replaced once the html is inserted
                    [new RegExp(/<span[^>]*font-weight:bold[^>]*>/gi), '<span class="replace-with bold">'],

                     // replace manually entered b/i/a tags with real ones
                    [new RegExp(/&lt;(\/?)(i|b|a)&gt;/gi), '<$1$2>'],

                     // replace manually a tags with real ones, converting smart-quotes from google docs
                    [new RegExp(/&lt;a\s+href=(&quot;|&rdquo;|&ldquo;|“|”)([^&]+)(&quot;|&rdquo;|&ldquo;|“|”)&gt;/gi), '<a href="$2">']

                ];
            /*jslint regexp: false*/

            for (i = 0; i < replacements.length; i += 1) {
                text = text.replace(replacements[i][0], replacements[i][1]);
            }

            if (multiline) {

                // double br's aren't converted to p tags, but we want paragraphs.
                elList = text.split('<br><br>');

                this.pasteHTML('<p>' + elList.join('</p><p>') + '</p>');
                document.execCommand('insertText', false, "\n");

                // block element cleanup
                elList = el.querySelectorAll('p,div,br');
                for (i = 0; i < elList.length; i += 1) {

                    workEl = elList[i];

                    switch (workEl.tagName.toLowerCase()) {
                    case 'p':
                    case 'div':
                        this.filterCommonBlocks(workEl);
                        break;
                    case 'br':
                        this.filterLineBreak(workEl);
                        break;
                    }

                }


            } else {

                this.pasteHTML(text);

            }

        },

        pasteHTML: function (html) {
            var elList, workEl, i, fragmentBody, pasteBlock = document.createDocumentFragment();

            pasteBlock.appendChild(document.createElement('body'));

            fragmentBody = pasteBlock.querySelector('body');
            fragmentBody.innerHTML = html;

            this.cleanupSpans(fragmentBody);

            elList = fragmentBody.querySelectorAll('*');
            for (i = 0; i < elList.length; i += 1) {

                workEl = elList[i];

                // delete ugly attributes
                workEl.removeAttribute('class');
                workEl.removeAttribute('style');
                workEl.removeAttribute('dir');

                if (workEl.tagName.toLowerCase() === 'meta') {
                    workEl.parentNode.removeChild(workEl);
                }

            }
            document.execCommand('insertHTML', false, fragmentBody.innerHTML.replace(/&nbsp;/g, ' '));
        },
        isCommonBlock: function (el) {
            return (el && (el.tagName.toLowerCase() === 'p' || el.tagName.toLowerCase() === 'div'));
        },
        filterCommonBlocks: function (el) {
            if (/^\s*$/.test(el.innerText)) {
                el.parentNode.removeChild(el);
            }
        },
        filterLineBreak: function (el) {
            if (this.isCommonBlock(el.previousElementSibling)) {

                // remove stray br's following common block elements
                el.parentNode.removeChild(el);

            } else if (this.isCommonBlock(el.parentNode) && (el.parentNode.firstChild === el || el.parentNode.lastChild === el)) {

                // remove br's just inside open or close tags of a div/p
                el.parentNode.removeChild(el);

            } else if (el.parentNode.childElementCount === 1) {

                // and br's that are the only child of a div/p
                this.removeWithParent(el);

            }

        },

        // remove an element, including its parent, if it is the only element within its parent
        removeWithParent: function (el) {
            if (el && el.parentNode) {
                if (el.parentNode.parentNode && el.parentNode.childElementCount === 1) {
                    el.parentNode.parentNode.removeChild(el.parentNode);
                } else {
                    el.parentNode.removeChild(el.parentNode);
                }
            }
        },

        cleanupSpans: function (container_el) {

            var i,
                el,
                new_el,
                spans = container_el.querySelectorAll('.replace-with');

            for (i = 0; i < spans.length; i += 1) {

                el = spans[i];
                new_el = document.createElement(el.classList.contains('bold') ? 'b' : 'i');

                if (el.classList.contains('bold') && el.classList.contains('italic')) {

                    // add an i tag as well if this has both italics and bold
                    new_el.innerHTML = '<i>' + el.innerHTML + '</i>';

                } else {

                    new_el.innerHTML = el.innerHTML;

                }
                el.parentNode.replaceChild(new_el, el);

            }

            spans = container_el.querySelectorAll('span');
            for (i = 0; i < spans.length; i += 1) {

                el = spans[i];

                // remove empty spans, replace others with their contents
                if (/^\s*$/.test()) {
                    el.parentNode.removeChild(el);
                } else {
                    el.parentNode.replaceChild(document.createTextNode(el.innerText), el);
                }

            }

        }

    };

}(window, document));

// Medium Insert extension

/*! 
 * medium-editor-insert-plugin v0.2.2 - jQuery insert plugin for MediumEditor
 *
 * https://github.com/orthes/medium-editor-images-plugin
 *
 * Copyright (c) 2014 Pavel Linkesch (http://linkesch.sk)
 * Released under the MIT license
 */

! function ( a ){
	var b = {};
	MediumEditor && "function" == typeof MediumEditor && ( MediumEditor.prototype.serialize = function ()
	{
		var b, c, d, e, f, g, h, i, j = {};
		for ( b = 0; b < this.elements.length; b += 1 )
		{
			for ( d = "" !== this.elements[ b ].id ? this.elements[ b ].id : "element-" + b, e = a( this.elements[ b ] ).clone(), f = a( ".mediumInsert", e ), c = 0; c < f.length; c++ ) g = a( f[ c ] ), h = a( ".mediumInsert-placeholder", g ).children(), 0 === h.length ? g.remove() : ( g.removeAttr( "contenteditable" ), a( "img[draggable]", g ).removeAttr( "draggable" ), g.hasClass( "small" ) && h.addClass( "small" ), a( ".mediumInsert-buttons", g ).remove(), h.unwrap() );
			i = e.html().trim(), j[ d ] = {
				value: i
			}
		}
		return j
	}, MediumEditor.prototype.deactivate = function ()
	{
		var b;
		if ( !this.isActive ) return !1;
		for ( this.isActive = !1, void 0 !== this.toolbar && ( this.toolbar.style.display = "none" ), document.documentElement.removeEventListener( "mouseup", this.checkSelectionWrapper ), b = 0; b < this.elements.length; b += 1 ) this.elements[ b ].removeEventListener( "keyup", this.checkSelectionWrapper ), this.elements[ b ].removeEventListener( "blur", this.checkSelectionWrapper ), this.elements[ b ].removeAttribute( "contentEditable" );
		a.fn.mediumInsert.insert.$el.mediumInsert( "disable" )
	}, MediumEditor.prototype.activate = function ()
	{
		var b;
		if ( this.isActive ) return !1;
		for ( void 0 !== this.toolbar && ( this.toolbar.style.display = "block" ), this.isActive = !0, b = 0; b < this.elements.length; b += 1 ) this.elements[ b ].setAttribute( "contentEditable", !0 );
		this.bindSelect(), a.fn.mediumInsert.insert.$el.mediumInsert( "enable" )
	} ), a.fn.mediumInsert = function ( c )
	{
		return "string" == typeof c && a.fn.mediumInsert.insert[ c ] ? void a.fn.mediumInsert.insert[ c ]() : ( a.fn.mediumInsert.settings = a.extend( a.fn.mediumInsert.settings, c ), this.each( function ()
		{
			a( "p", this ).bind( "dragover drop", function ( a )
			{
				return a.preventDefault(), !1
			} ), a.fn.mediumInsert.insert.init( a( this ) ), a.each( a.fn.mediumInsert.settings.addons, function ( c )
			{
				var d = a.fn.mediumInsert.settings.addons[ c ];
				d.$el = a.fn.mediumInsert.insert.$el, b[ c ].init( d )
			} )
		} ) )
	}, a.fn.mediumInsert.settings = {
		enabled: !0,
		addons:
		{
			images:
			{}
		}
	}, a.fn.mediumInsert.registerAddon = function ( a, c )
	{
		b[ a ] = c
	}, a.fn.mediumInsert.getAddon = function ( a )
	{
		return b[ a ]
	}, a.fn.mediumInsert.insert = {
		init: function ( a )
		{
			this.$el = a, this.isFirefox = navigator.userAgent.match( /firefox/i ), this.setPlaceholders(), this.setEvents()
		},
		deselect: function ()
		{
			document.getSelection().removeAllRanges()
		},
		disable: function ()
		{
			a.fn.mediumInsert.settings.enabled = !1, a.fn.mediumInsert.insert.$el.find( ".mediumInsert-buttons" ).addClass( "hide" )
		},
		enable: function ()
		{
			a.fn.mediumInsert.settings.enabled = !0, a.fn.mediumInsert.insert.$el.find( ".mediumInsert-buttons" ).removeClass( "hide" )
		},
		getMaxId: function ()
		{
			var b = -1;
			return a( 'div[id^="mediumInsert-"]' ).each( function ()
			{
				var c = parseInt( a( this ).attr( "id" ).split( "-" )[ 1 ], 10 );
				c > b && ( b = c )
			} ), b
		},
		setPlaceholders: function ()
		{
			var c = this,
				d = a.fn.mediumInsert.insert.$el,
				e = a.fn.mediumInsert.settings.editor,
				f = e && e.options ? e.options.buttonLabels : "",
				g = '<ul class="mediumInsert-buttonsOptions medium-editor-toolbar medium-editor-toolbar-active">';
			return 0 === Object.keys( a.fn.mediumInsert.settings.addons ).length ? !1 : ( a.each( a.fn.mediumInsert.settings.addons, function ( a )
			{
				g += "<li>" + b[ a ].insertButton( f ) + "</li>"
			} ), g += "</ul>", g = '<div class="mediumInsert" contenteditable="false"><div class="mediumInsert-buttons"><a class="mediumInsert-buttonsShow">+</a>' + g + '</div><div class="mediumInsert-placeholder"></div></div>', d.is( ":empty" ) && d.html( "<p><br></p>" ), void d.keyup( function ()
			{
				var b, e = d.children( ":last" );
				( "" === d.html() || "<br>" === d.html() ) && d.html( "<p><br></p>" ), e.hasClass( "mediumInsert" ) && e.find( ".mediumInsert-placeholder" ).children().length > 0 && d.append( "<p><br></p>" ), this.isFirefox && a( ".mediumInsert .mediumInsert-placeholder:empty", d ).each( function ()
				{
					a( this ).parent().remove()
				} ), b = c.getMaxId() + 1, d.children( "p" ).each( function ()
				{
					a( this ).next().hasClass( "mediumInsert" ) === !1 && ( a( this ).after( g ), a( this ).next( ".mediumInsert" ).attr( "id", "mediumInsert-" + b ) ), b++
				} )
			} ).keyup() )
		},
		setEvents: function ()
		{
			var c = this,
				d = a.fn.mediumInsert.insert.$el;
			d.on( "selectstart", ".mediumInsert", function ( a )
			{
				return a.preventDefault(), !1
			} ), d.on( "blur", function ()
			{
				var b, c = a( this ).clone();
				c.find( ".mediumInsert" ).remove(), b = c.html().replace( /^\s+|\s+$/g, "" ), ( "" === b || "<p><br></p>" === b ) && a( this ).addClass( "medium-editor-placeholder" )
			} ), d.on( "keypress", function ( a )
			{
				if ( c.isFirefox && 13 === a.keyCode )
				{
					d.contents().each( function ()
					{
						return function ( a, b )
						{
							return "#text" === b.nodeName ? ( document.execCommand( "insertHTML", !1, "<p>" + b.data + "</p>" ), b.remove() ) : void 0
						}
					}( this ) );
					var b = d.find( "p" ).last();
					b.text().length > 0 && b.find( "br" ).remove()
				}
			} ), d.on( "keydown", function ( a )
			{
				return navigator.userAgent.match( /chrome/i ) && ( d.children().last().removeClass( "hide" ), ( a.ctrlKey || a.metaKey ) && 65 === a.which ) ? ( a.preventDefault(), 0 === d.find( "p" ).text().trim().length ? !1 : ( d.children().last().addClass( "hide" ), document.execCommand( "selectAll", !1, null ) ) ) : void 0
			} ), d.on( "click", ".mediumInsert-buttons a.mediumInsert-buttonsShow", function ()
			{
				var b = a( this ).siblings( ".mediumInsert-buttonsOptions" ),
					d = a( this ).parent().siblings( ".mediumInsert-placeholder" );
				a( this ).hasClass( "active" ) ? ( a( this ).removeClass( "active" ), b.hide(), a( "a", b ).show() ) : ( a( this ).addClass( "active" ), b.show(), a( "a", b ).each( function ()
				{
					var c = a( this ).attr( "class" ).split( "action-" )[ 1 ],
						e = c.split( "-" )[ 0 ];
					a( ".mediumInsert-" + e, d ).length > 0 && a( "a:not(.action-" + c + ")", b ).hide()
				} ) ), c.deselect()
			} ), d.on( "mouseleave", ".mediumInsert", function ()
			{
				a( "a.mediumInsert-buttonsShow", this ).removeClass( "active" ), a( ".mediumInsert-buttonsOptions", this ).hide()
			} ), d.on( "click", ".mediumInsert-buttons .mediumInsert-action", function ()
			{
				var c = a( this ).data( "addon" ),
					d = a( this ).data( "action" ),
					e = a( this ).parents( ".mediumInsert-buttons" ).siblings( ".mediumInsert-placeholder" );
				b[ c ] && b[ c ][ d ] && b[ c ][ d ]( e ), a( this ).parents( ".mediumInsert" ).mouseleave()
			} )
		}
	}
}( jQuery ),
function ( a )
{
	a.fn.mediumInsert.registerAddon( "images",
	{
		"default":
		{
			imagesUploadScript: "upload.php",
			imagesDeleteScript: "delete.php",
			formatData: function ( a )
			{
				var b = new FormData;
				return b.append( "file", a ), b
			},
			uploadFile: function ( b, c, d )
			{
				a.ajax(
				{
					type: "post",
					url: d.options.imagesUploadScript,
					xhr: function ()
					{
						var a = new XMLHttpRequest;
						return a.upload.onprogress = d.updateProgressBar, a
					},
					cache: !1,
					contentType: !1,
					complete: function ( a )
					{
						d.uploadCompleted( a, b )
					},
					processData: !1,
					data: d.options.formatData( c )
				} )
			},
			deleteFile: function ( b, c )
			{
				a.ajax(
				{
					type: "post",
					url: c.options.imagesDeleteScript,
					data:
					{
						file: b
					}
				} )
			}
		},
		init: function ( b )
		{
			b && b.$el && ( this.$el = b.$el ), this.options = a.extend( this.default, b ), this.setImageEvents(), this.setDragAndDropEvents(), this.preparePreviousImages()
		},
		insertButton: function ( a )
		{
			var b = "Img";
			return "fontawesome" === a && ( b = '<i class="fa fa-picture-o"></i>' ), '<button data-addon="images" data-action="add" class="medium-editor-action medium-editor-action-image mediumInsert-action">' + b + "</button>"
		},
		preparePreviousImages: function ()
		{
			this.$el.find( ".mediumInsert-images" ).each( function ()
			{
				var b = a( this ).parent();
				b.html( '<div class="mediumInsert-placeholder" draggable="true">' + b.html() + "</div>" )
			} )
		},
		add: function ( b )
		{
			var c, d, e = this;
			return c = a( '<input type="file">' ).click(), c.change( function ()
			{
				d = this.files, e.uploadFiles( b, d, e )
			} ), a.fn.mediumInsert.insert.deselect(), c
		},
		updateProgressBar: function ( b )
		{
			var c, d = a( ".progress:first", this.$el );
			b.lengthComputable && ( c = b.loaded / b.total * 100, c = c ? c : 0, d.attr( "value", c ), d.html( c ) )
		},
		uploadCompleted: function ( b, c )
		{
			var d, e = a( ".progress:first", c );
			e.attr( "value", 100 ), e.html( 100 ), b.responseText ? ( e.before( '<figure class="mediumInsert-images"><img src="' + b.responseText + '" draggable="true" alt=""></figure>' ), d = e.siblings( "img" ), d.load( function ()
			{
				d.parent().mouseleave().mouseenter()
			} ) ) : ( e.before( '<div class="mediumInsert-error">There was a problem uploading the file.</div>' ), setTimeout( function ()
			{
				a( ".mediumInsert-error:first", c ).fadeOut( function ()
				{
					a( this ).remove()
				} )
			}, 3e3 ) ), e.remove(), a.fn.mediumInsert.insert.$el.keyup()
		},
		uploadFile: function ( a, b, c )
		{
			return c.options.uploadFile( a, b, c )
		},
		uploadFiles: function ( a, b, c )
		{
			for ( var d = {
				"image/png": !0,
				"image/jpeg": !0,
				"image/gif": !0
			}, e = 0; e < b.length; e++ )
			{
				var f = b[ e ];
				d[ f.type ] === !0 && ( a.append( '<progress class="progress" min="0" max="100" value="0">0</progress>' ), c.uploadFile( a, f, c ) )
			}
		},
		deleteFile: function ( a, b )
		{
			return b.options.deleteFile( a, b )
		},
		setImageEvents: function ()
		{
			var b = this;
			this.$el.on( "mouseenter", ".mediumInsert-images", function ()
			{
				var b, c, d = a( "img", this );
				a.fn.mediumInsert.settings.enabled !== !1 && d.length > 0 && ( a( this ).append( '<a class="mediumInsert-imageRemove"></a>' ), a( this ).append( a( this ).parent().parent().hasClass( "small" ) ? '<a class="mediumInsert-imageResizeBigger"></a>' : '<a class="mediumInsert-imageResizeSmaller"></a>' ), b = d.position().top + parseInt( d.css( "margin-top" ), 10 ), c = d.position().left + d.width() - 30, a( ".mediumInsert-imageRemove", this ).css(
				{
					right: "auto",
					top: b,
					left: c
				} ), a( ".mediumInsert-imageResizeBigger, .mediumInsert-imageResizeSmaller", this ).css(
				{
					right: "auto",
					top: b,
					left: c - 31
				} ) )
			} ), this.$el.on( "mouseleave", ".mediumInsert-images", function ()
			{
				a( ".mediumInsert-imageRemove, .mediumInsert-imageResizeSmaller, .mediumInsert-imageResizeBigger", this ).remove()
			} ), this.$el.on( "click", ".mediumInsert-imageResizeSmaller", function ()
			{
				a( this ).parent().parent().parent().addClass( "small" ), a( this ).parent().mouseleave().mouseleave(), a.fn.mediumInsert.insert.deselect()
			} ), this.$el.on( "click", ".mediumInsert-imageResizeBigger", function ()
			{
				a( this ).parent().parent().parent().removeClass( "small" ), a( this ).parent().mouseleave().mouseleave(), a.fn.mediumInsert.insert.deselect()
			} ), this.$el.on( "click", ".mediumInsert-imageRemove", function ()
			{
				var c = a( this ).siblings( "img" ).attr( "src" );
				0 === a( this ).parent().siblings().length && a( this ).parent().parent().parent().removeClass( "small" ), a( this ).parent().remove(), b.deleteFile( c, b ), a.fn.mediumInsert.insert.deselect()
			} )
		},
		setDragAndDropEvents: function ()
		{
			var b, c, d = this,
				e = !1,
				f = !1;
			a( document ).on( "dragover", "body", function ()
			{
				a.fn.mediumInsert.settings.enabled !== !1 && a( this ).addClass( "hover" )
			} ), a( document ).on( "dragend", "body", function ()
			{
				a.fn.mediumInsert.settings.enabled !== !1 && a( this ).removeClass( "hover" )
			} ), this.$el.on( "dragover", ".mediumInsert", function ()
			{
				a.fn.mediumInsert.settings.enabled !== !1 && ( a( this ).addClass( "hover" ), a( this ).attr( "contenteditable", !0 ) )
			} ), this.$el.on( "dragleave", ".mediumInsert", function ()
			{
				a.fn.mediumInsert.settings.enabled !== !1 && ( a( this ).removeClass( "hover" ), a( this ).attr( "contenteditable", !1 ) )
			} ), this.$el.on( "dragstart", ".mediumInsert .mediumInsert-images img", function ()
			{
				a.fn.mediumInsert.settings.enabled !== !1 && ( b = a( this ).parent().index(), c = a( this ).parent().parent().parent().attr( "id" ) )
			} ), this.$el.on( "dragend", ".mediumInsert .mediumInsert-images img", function ( b )
			{
				a.fn.mediumInsert.settings.enabled !== !1 && e === !0 && ( 0 === a( b.originalEvent.target.parentNode ).siblings().length && a( b.originalEvent.target.parentNode ).parent().parent().removeClass( "small" ), a( b.originalEvent.target.parentNode ).mouseleave(), a( b.originalEvent.target.parentNode ).remove(), e = !1, f = !1 )
			} ), this.$el.on( "dragover", ".mediumInsert .mediumInsert-images img", function ( b )
			{
				a.fn.mediumInsert.settings.enabled !== !1 && b.preventDefault()
			} ), this.$el.on( "drop", ".mediumInsert .mediumInsert-images img", function ()
			{
				var d, e, g;
				if ( a.fn.mediumInsert.settings.enabled !== !1 )
				{
					if ( c !== a( this ).parent().parent().parent().attr( "id" ) ) return f = !1, void( b = c = null );
					d = parseInt( b, 10 ), e = a( this ).parent().parent().find( ".mediumInsert-images:nth-child(" + ( d + 1 ) + ")" ), g = a( this ).parent().index(), g > d ? e.insertAfter( a( this ).parent() ) : d > g && e.insertBefore( a( this ).parent() ), e.mouseleave(), f = !0, b = null
				}
			} ), this.$el.on( "drop", ".mediumInsert", function ( b )
			{
				var c;
				b.preventDefault(), a.fn.mediumInsert.settings.enabled !== !1 && ( a( this ).removeClass( "hover" ), a( "body" ).removeClass( "hover" ), a( this ).attr( "contenteditable", !1 ), c = b.originalEvent.dataTransfer.files, c.length > 0 ? d.uploadFiles( a( ".mediumInsert-placeholder", this ), c, d ) : f === !0 ? f = !1 : ( a( ".mediumInsert-placeholder", this ).append( '<div class="mediumInsert-images">' + b.originalEvent.dataTransfer.getData( "text/html" ) + "</div>" ), a( "meta", this ).remove(), e = !0 ) )
			} )
		}
	} )
}( jQuery ),
function ( a )
{
	a.fn.mediumInsert.registerAddon( "maps",
	{
		init: function ()
		{
			this.$el = a.fn.mediumInsert.insert.$el
		},
		insertButton: function ( a )
		{
			var b = "Map";
			return "fontawesome" === a && ( b = '<i class="fa fa-map-marker"></i>' ), '<button data-addon="maps" data-action="add" class="medium-editor-action medium-editor-action-image mediumInsert-action">' + b + "</button>"
		},
		add: function ( b )
		{
			a.fn.mediumInsert.insert.deselect(), b.append( '<div class="mediumInsert-maps">Map - Coming soon...</div>' )
		}
	} )
}( jQuery );

Comments