CSS (style.css)

html, body { height: 100%; min-height: 100%; }

body { font-family: Verdana, Helvetica, Arial, sans-serif; padding: 10px; border: 10px solid #f5ead9; }

.bg-blue { background: url(http://noterio.us/assets/img//bg-blue.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.navbar-clear a:hover.blue { color: #4f92a8; }

.navbar-clear a:hover.green { color: #87a961; }

.navbar-clear a:hover.orange { color: #f6512d; }

.navbar-clear a:hover.red { color: #a93d41; }

.navbar-clear a:hover.yellow { color: #f4cb48; }

input:focus, textarea { outline: none !important; }

, :before, *:after {box-sizing: border-box !important;}

.navbar-clear { background: rgb(255, 255, 255); / Fall-back for browsers that don't support rgba / background: rgba(255, 255, 255, 0); }

.navbar-clear a { color: #f5ead9; font-size: 11px; font-weight: bold; text-decoration: none; }

.navbar-clear .icon-bar { background-color: #f5ead9; }

.navbar-clear .nav>li>a:hover, .navbar-clear .nav>li>a:focus { text-decoration: none; background: rgba(245, 234, 217, .6); }

content-container {

margin-left: 10px;

}

a.view { color: #333; }

a.view:hover, a.view:focus { color: #333; }

.x-small { color: #333333; font-size: 11px; }

.medium { font-size: 18px; font-weight: bold; }

.large { color: #f5ead9; font-size: 24px; font-weight: bold; }

.edit .bottom { position: absolute; bottom: 40px; }

.create .bottom { position: absolute; bottom: 56px; }

.edit .top-right-corner { cursor: pointer; position: absolute; right: 8px; top: 2px; background:none; border:none; box-shadow:none; }

.edit .bottom-right-corner { cursor: pointer; position: absolute; right: 14px; bottom: 22px; background:none; border:none; box-shadow:none; }

.create .bottom-right-corner { cursor: pointer; position: absolute; right: 8px; bottom: 38px; background:none; border:none; box-shadow:none; }

content-container .board {

display: inline-block;
min-height: 200px;
max-width: 100%;
line-height: 1.428571429;
background-image: url(http://noterio.us/assets/img/note-view.png);
width: 360px;
height: 220px;
padding:  20px;
margin: 0px 15px 0px 0px;
background-repeat: no-repeat;
background-position: top left;
position: relative;
padding-top: 34px;

}

content-container .note {

display: inline-block;
min-height: 200px;
max-width: 100%;
line-height: 1.428571429;
background-image: url(http://noterio.us/assets/img/note.png);
width: 360px;
height: 220px;
padding:  20px;
margin: 0px 15px 0px 0px;
background-repeat: no-repeat;
background-position: top left;
position: relative;
padding-top: 34px;

}

content-container .board.create, #content-container .note.create {

background-image: url(http://noterio.us/assets/img/note-create.png);
height: 240px;

}

.edit input[type=text], .edit textarea { color: #333333; border: 1px solid #f5ead9; width: 100%; resize: none; background-color: #f5ead9; }

.create input[type=text], .create textarea { color: #a69f95; border: 1px solid #d7cebf; width: 100%; resize: none; background-color: #f5ead9; }

.edit input[type=text]:hover, .edit textarea:hover, .edit input[type=text]:focus, .edit textarea:focus { border: 1px solid #d7cebf; }

.create fieldset > * { margin: 2px 0; }

.create form { margin: 0px; }