/* note */
.note {
    background:#cdd6dd;
    margin-bottom:20px;
    font-size:.8em;
    position:relative;
    overflow:hidden;
}

.note:before {
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    border-width:0 0 40px 40px; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#8c9eaa #8c9eaa #fff #8c9eaa; /* A bit more verbose to work with .rounded too */
    background:#8c9eaa; /* For when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

.note.right {
    float:right;
    margin-left:40px;
    width:300px;
}

.note.left {
    float:left;
    margin-right:50px;
    width:300px;
}

.note.full-width {

}

.note > div {
    padding:15px 20px 15px 20px;
}

@media only screen and (max-width: 756px){
    div.note.right,
    div.note.left {
        float:none;
        width:auto;
        margin-left:0;
        margin-right:0;
    }
}