
body {
    display: none;
}

#source {
    border: 0;
    bottom: 0px;
    height: 100%;
    display: none;
    left: 0px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 100%;
}

.modal-backdrop {
    background: #d8d8d8;
    background: -moz-radial-gradient(center, circle cover, #ffffff 0%, #000000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#000000));
    background: -webkit-radial-gradient(center, circle cover, #ffffff 0%, #000000 100%);
    background: -o-radial-gradient(center, circle cover, #ffffff 0%, #000000 100%);
    background: -ms-radial-gradient(center, circle cover, #ffffff 0%, #000000 100%);
    background: radial-gradient(circle at center, #ffffff 0%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 );
    opacity: .8;
}


#quote {
    background: #000;
    margin: 40px auto;
    position: relative;
    left: auto;
    width: 450px;
}

#promotion.comments, #quote.comments, #pq-comments {
    background: #000;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
    border-radius: 6px;
    margin: 0 auto;
    padding: 1px;
    position: relative;
    outline: none;
    width: 500px;
    z-index: 1050;
}
    #quote.comments {
        box-shadow: 0 0 10px rgba(0, 0, 0, .7);
        width: 550px;
        z-index: 1055;
    }

    #promotion.comments {
        margin: 40px auto -6px;
    }
    #pq-comments {
        display: none;
        margin: -6px auto 40px;
    }

    #promotion.comments > div, #pq-comments > div {
        background: #f5f5f5;
        border-radius: 5px;
    }
        #promotion.comments > div {
            padding: 4px 4px 16px;
        }
        #pq-comments > div {
            padding: 20px 8px 8px;
        }


#close {
    background: url("../img/close.png") no-repeat center center;
    border-radius: 15px;
    display: none;
    height: 30px;
    opacity: .95;
    position: absolute;
    right: -15px;
    text-indent: -9999px;
    top: -15px;
    width: 30px;
    z-index: 20;
}
    #close:hover {
        opacity: .8;
    }

#quote .modal-body {
    color: #fff;
    font-size: 1.4em;
    font-weight: 300;
    line-height: 1.4em;
    max-height: none;
    padding: 20px 55px 5px;
    position: relative;
}
    #quote .modal-body a {
        color: #fff;
    }
        #content #quote .modal-body a:hover {
            color: #97cbde;
        }

    #quote .modal-body p {
        margin: 0;
        padding-bottom: 10px;
        position: relative;
    }
        #quote .modal-body p:before, #quote .modal-body p:after {
            background: url("../img/boxquote-start.png") no-repeat top left;
            content: " ";
            display: block;
            position: absolute;
            height: 30px;
            width: 36px;
        }
        #quote .modal-body p:before {
            left: -45px;
            top: -10px;
        }
        #quote .modal-body p:after {
            background-image: url("../img/boxquote-end.png");
            bottom: 5px;
            right: -45px;
        }

    #quote span {
        font-weight: 200;
        white-space: nowrap;
    }

    #quote .ellipsis {
        color: #888;
    }

    #quote .files {
        font-size: .7em;
        margin-top: .5em;
        opacity: .95;
    }
        #quote .files .file {
            margin-left: .5em;
        }

#promotion {
    font-size: .9em;
    padding: 4px;
    text-align: center;
}
    #promotion > :not(.active):not(.alert) {
        display: none;
    }
        #promotion p {
            margin-bottom: 3px;
        }
        #promotion small a {
            color: #666;
        }

        #promotion .alert {
            margin: 4px 0 0;
        }

    #promotion .btn-primary .icon-plus {
        margin-right: .5em;
    }



.mobile .vote {
    cursor: pointer;
    height: 32px;
    opacity: .7;
    width: 32px;
}
    .mobile .vote:hover {
        opacity: 1;
    }

    .icon-thumbs-up-green {
        background: url("../img/thumb-up.png") no-repeat 0 0;
    }
    .icon-thumbs-down-red {
        background: url("../img/thumb-down.png") no-repeat 0 0;
    }

.mobile .progress {
    min-height: 0;
    height: 1em;
    margin-top: 1em;
}

.mobile .votecount {
    color: #000;
    font-size: 1.2em;
    line-height: 2.5em;
}
    .mobile .span2 + .votecount {
        text-align: right;
    }
    .mobile .span6 + .votecount {
        text-align: left;
    }

.mobile.voted .vote {
    background-position: 0 -32px;
    cursor: default;
    opacity: .5;
}
    .mobile.voted .vote.voted {
        background-position: 0 0;
        opacity: 1;
    }


#promotion .mobile .btn-link {
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: underline;
}


#powered_by {
    background: #000;
    bottom: -1.75em;
    color: #ccc;
    border-bottom-left-radius: .3em;
    border-bottom-right-radius: .3em;
    font-size: 1em;
    left: 1em;
    position: absolute;
    padding: .1em .8em;
}
    #powered_by a {
        color: #ddd;
    }
    #content #powered_by a:hover {
        color: #fff;
    }


@media all and (max-device-width: 640px) {
    #quote {
        margin: 1em auto 2em;
        width: 95%;
    }
        #quote .close {
            border: 1px solid #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, .4);
            height: 24px;
            right: 0px;
            top: -8px;
            width: 24px;
        }

        #quote .modal-body {
            font-size: 1.2em;
            padding: 10px 15px 10px;
        }
            #quote .modal-body p:before, #quote .modal-body p:after {
                display: none;
            }

        #quote i {
            font-size: 1em;
            white-space: normal;
        }

    #promotion.comments, #quote.comments, #pq-comments {
        width: auto;
    }
    #promotion.comments, #pq-comments {
        margin: 0 1%;
    }
    #promotion.comments {
        margin-bottom: -10px;
    }
    #promotion.comments .mobile .btn {
        display: inline-block;
        font-size: 13px;
        line-height: 1.2em;
        margin-top: 0;
    }
    #promotion.comments .mobile br {
        display: none;
    }

    #pq-comments {
        margin-top: -10px;
    }
}

