CSS3 Notebook Paper Style - Snippet

Preview
HTML
CSS
JS

<p class="paper" contenteditable>CSS3 Notebook Paper<br>
    This element is contenteditable.<br>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sem vel mauris porttitor sit amet adipiscing odio interdum. Nunc non magna sit amet augue rutrum laoreet in in nulla. Nunc et malesuada orci. Sed metus enim, venenatis tincidunt tincidunt a, malesuada nec dolor. Nam volutpat, augue fringilla mattis venenatis, odio ipsum porta sapien, et tincidunt tortor erat quis nulla. Mauris dictum laoreet purus, et gravida magna aliquet quis. Phasellus sollicitudin tortor ut leo fringilla sed scelerisque diam suscipit. Donec non tortor id ante adipiscing tempus vitae et massa. Donec risus nisl, tincidunt quis facilisis blandit, lacinia vestibulum nulla.<br>
</p>

html, body { height: 100%; }
body {
    margin: 0;
    padding: 0;
    height: 100%;
	/* gradients - second red border, first red border, top white space, blue lines */
    background-image:  -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-size: 1px, 1px, auto, auto 20px;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat;
    background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
}

.paper {
	margin: 0;
    display: block;
    font: 10pt Arial, sans-serif;    
    line-height: 20px;
    padding-top: 50px;
    padding-left: 10.5%;
    padding-right: 10.5%;
    text-align: justify;
}
.paper:first-line {
    font: 20pt Arial, sans-serif;
    line-height: 33px;
    vertical-align: baseline;
}
.paper:after {    
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    background: rgba(255,255,255,1);
    top: 40px;
    left: 2%;
    z-index: 10;
    -webkit-box-shadow: 
        inset 2px 2px 5px rgba(125,125,125,1),  
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
    -moz-box-shadow: 
        inset 2px 2px 5px rgba(125,125,125,1),  
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
    box-shadow: 
        inset 2px 2px 5px rgba(125,125,125,1),  
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
}

.paper:focus {
    outline: none;
}