.shortcode-left,
.shortcode-right {
    display: block;
}

.shortcode-left {
    float: left;
    margin-left: 0 !important;
    margin-right: 2em !important;
}

.shortcode-right {
    float: right;
    margin-right: 0 !important;
    margin-left: 2em !important;
}

.shortcode-error {
    font-weight: bold;
    color: #ff0000;
    text-transform: uppercase;
}

/**
 * Examples
 */
.shortcode-examples {
    font-weight: 400;
}

.shortcode-examples .examples-index {
    float: right;
    width: 15%;
}

.shortcode-examples .examples-content {
    float: left;
    width: 83%;
    margin-right: 2%;
}

.shortcode-examples .examples-index li {
    list-style: none;
    margin-bottom: 0.5em;
}

.shortcode-example {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 3px solid #444;
}

.shortcode-example .description {
    font-style: italic;
}

.shortcode-example .demo-code {
    padding: 1em;
    background: #fff;
    margin-bottom: 3em;
    border: 1px dashed #bbb;
}

.shortcode-example .demo-output {
    margin-bottom: 3em;
}

/**
 * Images
 */
.shortcode-images .images-index {
    float: right;
    width: 15%;
}

.shortcode-images .images-content {
    float: left;
    width: 83%;
    margin-right: 2%;
}

.shortcode-images .images-index li {
    list-style: none;
    margin-bottom: 0.5em;
}

.shortcode-images table td.filename > div {
    background: #eee;
    padding:  0.2em;
    border: 1px solid #ddd;
    float: left;
}

.shortcode-images table th, .shortcode-images table td {
    padding: 0.5em;
}