Route demo code 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;
}