push pin decor

by 3axap

HTML

<div class="mboard-block-up">
     <h2>Lorem %TitleName%</h2> 
</div>
<div class="mboard-wrapper">
    <div class="messages-decor left"></div>
    <div class="messages-decor right"></div>
    <div class="mboard-block">
         <h2>%SubTitleName%</h2> 
        <p>Content here.. content here.. content here.. content here.. content here.. content here..</p>
    </div>
</div>

CSS

.mboard-wrapper {
    position: relative;
    padding-top: 20px;
}
.messages-decor {
    position: absolute;
    top: 0px;
    width:64px;
    height:64px;
    text-align: center;
}
.messages-decor.left {
    float:left;
    background-image: url(http://xn--90aidfixjic7i.xn--p1ai/temp/pin_left.svg);
    left: -20px;
    margin-left: 20px;
}
.messages-decor.right {
    float:right;
    background-image: url(http://xn--90aidfixjic7i.xn--p1ai/temp/pin_right.svg);
    right: -20px;
    margin-right: 20px;
}
.messages-decor-clear {
    clear:both;
    display:block;
    height:0px;
    font-size:0;
    overflow:hidden;
}
.mboard-block {
    margin: 10px;
    padding: 14px;
    background-color: #f5f5f5;
    border: 1px solid #eee;
}
.mboard-block-up {
    margin: 10px;
    padding: 20px;
    background-color: #EFEFEF;
    border: 1px solid #000;
    text-align: center;
}
.mboard-block h2 {
    font-family:"Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-weight:normal;
    text-align: center;
}
.mboard-block p {
    font-family:"Helvetica Neue", "Helvetica", "Arial", sans-serif;
    padding: 14px;
    font-size: 13px;
}