the callouts from the bootstrap documentation

docs style (bootstrap) - notes

.note {
    -ms-border-radius: 3px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    margin: 20px 0;
    padding: 20px;
}

    .note:first-child {
        margin-top: 0;
    }

    .note h4 {
        margin-bottom: 5px;
        margin-top: 0;
    }

    .note p:last-child {
        margin-bottom: 0;
    }

    .note code {
        border-radius: 3px;
    }

    .note + .note {
        margin-top: -5px;
    }

.note-primary {
    border-left-color: #142984;
}

    .note-primary h4 {
        color: #142984;
    }

.note-primary-alt {
    border-left-color: #003092;
}

    .note-primary-alt h4 {
        color: #003092;
    }

.note-secondary {
    border-left-color: #003399;
}

    .note-secondary h4 {
        color: #003399;
    }


.note-success {
    border-left-color: #67983f;
}

    .note-success h4 {
        color: #67983f;
    }

.note-success-alt {
    border-left-color: #789d4a;
}

    .note-success-alt h4 {
        color: #789d4a;
    }

.note-info {
    border-left-color: #01abaa;
}

    .note-info h4 {
        color: #01abaa;
    }

.note-info-alt {
    border-left-color: #009291;
}

    .note-info-alt h4 {
        color: #009291;
    }

.note-info-secondary {
    border-left-color: #00a3a2;
}

    .note-info-secondary h4 {
        color: #00a3a2;
    }

.note-warning {
    border-left-color: #ffc000;
}

    .note-warning h4 {
        color: #ffc000;
    }

.note-warning-alt {
    border-left-color: #ffd200;
}

    .note-warning-alt h4 {
        color: #ffd200;
    }

.note-danger {
    border-left-color: #c00000;
}

    .note-danger h4 {
        color: #c00000;
    }

.note-danger-alt {
    border-left-color: #f9d5c8;
}

    .note-danger-alt h4 {
        color: #f9d5c8;
    }

.note-ongoing {
    border-left-color: #003399;
}

    .note-ongoing h4 {
        color: #003399;
    }

.note-inert {
    border-left-color: #c0c0c0;
}

    .note-inert h4 {
        color: #c0c0c0;
    }