Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>

              
            
!

CSS

              
                * {
  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; }

              
            
!

JS

              
                
        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 );
              
            
!
999px

Console