CSS Notebook paper

HTML

<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 ortor 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>

CSS

html, body { height: 100%; }
body { 
    margin: 0; 
    padding: 0; 
    height: 100%;
    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-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 {    

    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),...