/* BS Callout Add-on Usage:
 * <div class="bs-callout bs-callout-default"><h4>Default Callout</h4>This is a default callout.</div>
 * <div class="bs-callout bs-callout-primary"><h4>Primary Callout</h4>This is a primary callout.</div>
 * <div class="bs-callout bs-callout-success"><h4>Success Callout</h4>This is a success callout.</div>
 * <div class="bs-callout bs-callout-info-right"><h4>Info Callout</h4>This is an info callout on right.</div>
 * <div class="bs-callout bs-callout-warning"><h4>Warning Callout</h4>This is a warning callout.</div>
 * <div class="bs-callout bs-callout-danger-right"><h4>Danger Callout</h4>This is a danger callout on right.</div>

 * codepen:  http://codepen.io/somewhatjaded/pen/ZQYVdr/
*/
.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default-right {
    border-right-width: 5px;
    border-left-width: 1px;
    border-right-color: #777;
}
.bs-callout-default h4, .bs-callout-default-right h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary-right {
    border-right-width: 5px;
    border-left-width: 1px;
    border-right-color: #428bca;
}
.bs-callout-primary h4, .bs-callout-primary-right h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success-right {
    border-right-width: 5px;
    border-left-width: 1px;
    border-right-color: #5cb85c;
}
.bs-callout-success h4, .bs-callout-success-right h4 {
    color: #5cb85c;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info-right {
    border-right-width: 5px;
    border-left-width: 1px;
    border-right-color: #5bc0de;
}
.bs-callout-info h4, .bs-callout-info-right h4 {
    color: #5bc0de;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning-right {
    border-right-width: 5px;
    border-left-width: 1px;
    border-right-color: #f0ad4e;
}
.bs-callout-warning h4, .bs-callout-warning-right h4 {
    color: #f0ad4e;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger-right {
    border-right-width: 5px;
    border-left-width: 1px;
    border-right-color: #d9534f;
}
.bs-callout-danger h4, .bs-callout-danger-right h4 {
    color: #d9534f;
}
/* utility */
.callout {
    padding: 1em;
    margin: 1em;
}   
.callout-xs {
    width:25%;
}       
.callout-sm {
    width:35%;
}       
.callout-md {
    width:45%;
}
.callout-lg {
    width:55%;
}   