<script>
	export default {}
</script>
<template>
	<article class="paper">
		<textarea id='editing-area' placeholder="type your note here" v-if='$store.data.current.content!==undefined' v-model='$store.data.current.content'></textarea>
		<div class="not-found" v-if='$store.data.current.content===undefined'>404: Not Found!</div>
	</article>
</template>
<style scoped>

	article {
		height:100%;
		position:absolute;
	}

	.paper {
	    position: relative;
	    background: -webkit-linear-gradient(top,#f0f0f0 0%,white 5%) 0 0;
	    background: -moz-linear-gradient(top,#f0f0f0 0%,white 5%) 0 0;
	    background: linear-gradient(top,#f0f0f0 0%,white 5%) 0 0;
	    -webkit-background-size: 100% 30px;
	    -moz-background-size: 100% 30px;
	    -ms-background-size: 100% 30px;
	    background-size: 100% 30px;
	}

	.paper:before {
	    content: '';
	    position: absolute;
	    width: 0px;
	    top: 0;
	    left: 39px;
	    bottom: 0;
	    border-left: 1px solid #F9D3D3;
	}

	.paper textarea {
	    border: none;
	    background-color: transparent;
	    height: 100%;
	    padding: 30px 0 0 10%;
	    line-height: 30px;
	    min-height: 210px;
	    width:90%;
	}

</style>