/*
 * This file contains different versions of bonecard
 * 1- bonecard: small sized preview card for deck lists
 * 2- bonecard-micro: tiny sized preview card for page lists
 * 3- bonecard-zoomed: full-sized card for tutorial page
 * 4- bonecard-code: full-sized card with code area
 */

.bonecard-list {
    width: 100%;
    overflow: hidden;
}

.bonecard,
.bonecard-micro,
.bonecard-zoomed,
.bonecard-code,
.bonecard-bbui {
    background-color: white;
    margin: 10px;
    width: 300px;
    height: 210px;
    border: 1px solid gray;
    border-left: 1px solid gray;
    padding: 10px;
    -webkit-border-radius: 20px;
    -webkit-border-top-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -moz-border-radius: 20px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomright: 50px;
    border-radius: 20px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    position: relative;
    float: left;
    -webkit-transition: color 0.5s ease;
    box-sizing: content-box;
    box-shadow: 5px 5px 10px #888888;
}

.bonecard-code {
    background-color: #272822;
}

.bonecard-bbui {
    background-color: #e1e1e1;
}

div.bonecard:hover {
    box-shadow: 5px 5px 10px #de7224;
}

.bonecard:after,
div.bonecard:before,
.bonecard-micro:after,
div.bonecard-micro:before,
.bonecard-zoomed:after,
div.bonecard-zoomed:before,
.bonecard-code:after,
div.bonecard-code:before,
.bonecard-bbui:after,
div.bonecard-bbui:before {
    background-color: white;
    position: absolute;
    display: block;
    content: "";
    border: 1px solid gray;
    border-right: 1px solid white;
    width: 7px;
    left: -8px;
    box-sizing: content-box;
}

.bonecard-code:after,
div.bonecard-code:before {
    background-color: #272822;
    border-color: #272822;
}

.bonecard-bbui:after,
div.bonecard-bbui:before {
    background-color: #e1e1e1;
    border-right-color: #e1e1e1;
}

.bonecard:before {
    top: 60px;
    height: 60px;
}

.bonecard:after {
    top: 180px;
    height: 30px;
}

.bonecard-micro {
    width: 170px;
    height: 105px;
    -webkit-border-radius: 10px;
    -webkit-border-top-right-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-radius: 10px;
    -moz-border-radius-topright: 25px;
    -moz-border-radius-bottomright: 25px;
    border-radius: 10px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.bonecard-micro:before {
    top: 30px;
    height: 30px;
}

.bonecard-micro:after {
    top: 90px;
    height: 15px;
}

.bonecard-micro:after,
div.bonecard-micro:before {
    width: 4px;
    left: -6px;
}

.bonecard-zoomed,
.bonecard-code,
.bonecard-bbui {
    width: 850px;
    height: 525px;
}

.bonecard-zoomed:before,
.bonecard-code:before,
.bonecard-bbui:before {
    top: 150px;
    height: 150px;
}

.bonecard-zoomed:after,
.bonecard-code:after,
.bonecard-bbui:after {
    top: 460px;
    height: 45px;
}

.bonecard-code .code {
    width: 834px;
    height: 527px;
    border-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    position: absolute;
    margin-right: 1px;
    background-color: #272822;
}

.ace_gutter {
    background: #272822 !important;
}

div.bonecard-micro-content {
    text-align: -webkit-center;
    text-align: -moz-center;
    width: 147px;
    height: 106px;
    position: absolute;
    margin-top: -40px;
    margin-right: 12px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 95%;
    height: 30%;
    margin: auto;
}

.wordwrap {
    /* CSS3 */
    white-space: pre-wrap;
    /* Firefox */
    white-space: -moz-pre-wrap;
    /* Opera <7 */
    white-space: -pre-wrap;
    /* Opera 7 */
    white-space: -o-pre-wrap;
    /* IE */
    word-wrap: break-word;
}