<style>
.buttonAddNote {
    float:right;
    margin-right: 30px;
	width: 85px;
	height: 32px;
	text-align: center;
	line-height: 32px;
        margin-top: 18px;
	background-color: #1b7800;
	color: #ffffff;
	border-radius: 5px;
	-moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
  	box-shadow:0px 5px 0px #124200;
  	-moz-box-shadow:0px 5px 0px #124200;
  	-webkit-box-shadow:0px 5px 0px #124200;
}

.buttonAddNote a, .buttonAddNote a{
	font-size: 18px;
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
	color: #ffffff;
}
</style>

<h3 class="popupTitle">Add a new note</h3>

<!-- The preview: -->
<div id="previewNote" class="note yellow" style="left:0;top:65px;z-index:1">
	<div class="body"></div>
	<div class="author"></div>
	<span class="data"></span>
</div>

<div id="noteData"> <!-- Holds the form -->
<form action="" method="post" class="note-form">

<label for="note-body">Text of the note</label>
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea>

<label for="note-name">Title</label>
<input type="text" name="note-name" id="note-name" class="pr-author" value="" />

<label>Color</label> <!-- Clicking one of the divs changes the color of the preview -->
<div class="color yellow"></div>
<div class="color blue"></div>
<div class="color green"></div>
<div class="color red"></div>
<div class="color purple"></div>
<div class="color orange"></div>
<div class="color grey"></div>

<!-- The green submit button: -->
<a id="note-submit" href="" class="buttonAddNote">Submit</a>

</form>
</div>