note card stack

HTML

<div>
    <h1>To Do</h1>
    <ul>
        <li>Make 1 div look like a stack of 3 papers</li> 
        <li>Mow the lawn</li>
        <li>Buy a new toothbrush</li>
        <li>Put coolant in my car</li>       
    </ul>
    <p>I just thought of a way to do this so I'm trying it out real quick.</p>
</div>

CSS

div {
    background: 
    -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
    border: 1px solid #f6f6f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 30px auto;
    padding: 22px 15px 40px;
    position: relative;
    width: 400px;
    color: #444;
}
h1 {
    font: 24px/26px 'Helvetica Neue', Arial;
    margin: 0 0 6px;
}
li {
    font: 12px/16px Georgia;
    margin: 0 0 7px;
}

div:before {
    content: '';
    z-index: -1;
    width: 433px;
    position: absolute;
    bottom: -12px;
    left: 4px;
    height: 190px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  background:    -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
    -moz-transform: rotate(-1deg);
}

div:after{
    content: '';
    z-index: -3;
    width: 433px;
    position: absolute;
    bottom: -18px;
     left: 6px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    height: 190px;
    
    background:    -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
  -moz-transform: rotate(-1deg);
}