CSS Tucked Corner Effect

Helping out a Forrst user.

HTML

4444
<div class="tucked-corners top-corners">
2222
    <span class="tucked-corners bottom-corners"> <!-- Span used for bottom corners -->
        <p>&amp;2</p> <!-- Just for looks -->
    </span>
</div>

CSS

body {
    background: #d6d6d6;
    margin: 0 auto;
    padding: 0;
    max-width: 580px;
    width: 90%;

}
div.tucked-corners, span.tucked-corners {
    height: 380px;
}
div.tucked-corners {
    background: #f6f6f6;
    margin: 50px auto;
    padding: 10px;
    position: relative;
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.1);
       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.1);
            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    overflow: hidden;
}
span.tucked-corners {
    background: #c4453c;
    display: block;
    position: relative;
    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
}

/* Just for looks */

p {
    background: #444;
    background: hsla(0,0%,0%,.1);
    bottom: 50px;
    color: #c4453c;
    display: block;
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-size: 150px;
    font-style: italic;
    font-weight: normal;
    line-height: 200px;
    position: absolute;
    right: 50px;
    text-align: center;
    width: 200px;
    -webkit-border-radius: 200px;
       -moz-border-radius: 200px;
            border-radius: 200px;
}

/* Top Corner Effect */

.top-corners:after,
.top-corners:before {
    background: #e6e6e6...