/*
 * ====================================================================================================================
 * COMPATIBILITY -- css layout
 * ====================================================================================================================
 */

.app-menu {
    background-color: rgba(0,0,0,0.5);
}

.logo-slide {
    margin: 0 50px 0 50px;
}

.logo-slide img {
    max-width: 100%;
    border: 1px solid #e1e1e1;
}

#appdb-search-menu {
    display: none;
    position: absolute;
    width: 800px;
    padding: 20px;
    z-index: 90000;
}

.navbar-appdb .navbar-nav {
    width: 100%;
}

.page-item.active .page-link, .page-item.active .page-link {
    z-index: 0;
}

.navbar-appdb .nav-item-stretch {
    width: 100%;
    padding-right: 2em;
}

.navbar-appdb .nav-item-stretch .input-group {
    margin: 15px 15px 15px 1em;
}

@media only screen and (max-width: 980px){
    #appdb-search-menu {
        position: relative;
        width: auto;
    }
}

.appdb-img-icon img {
    max-width: 200px;
    float: left;
    margin-top: -30px;
    margin-right: 1em;
}

.appdb-img-box img {
    max-width: 200px;
    float: right;
    margin-left: 2em;
}

.page-compatibility-crossover .btn-cw-outline {
    width: 225px;
    padding: 6px 10px;
    margin: 0;
    text-align: left;
}
.page-compatibility-crossover .btn-cw-outline:hover {
    color: #fff;
    border-color: #fff;
    cursor: pointer;
}

.appdb-step-num {
    font-family: "Inconsolata", fixed;
    display: inline-block;
    border-radius: 20px;
    padding: 0px 10px;
    color: #000;
    font-weight: bold;
    float: left;
    margin-right: 10px;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 0;
    border: 1px solid #333;
}
.appdb-step-num.step-1 { background-color: #ffff00; }
.appdb-step-num.step-2 { background-color: #00ffff; }
.appdb-step-num.step-3 { background-color: #ff00ff; }

.appdb-shot {
    float: left;
    height: 220px;
    width: 260px;
    margin: 5px;
    padding: 5px;
    overflow: hidden;
}
.appdb-shot img {
    width: 260px;
}

.appdb-img-shot .appdb-shot {
    margin-right: 2em;
    clear: left;
}

#shotTable     {  }
#shotTable td { padding: 10px; }
#shotTable td.shotThumb { width: 80px; white-space: nowrap; }
#shotTable td.shotDesc { width: 100%; }
#shotTable td.shotDesc textarea { width: 100%; height: 3em; }
#shotTable img { max-width: 50px; max-height: 50px; vertical-align: middle; padding: 2px; }
#shotTable img.delImg { cursor: pointer; }

span.counter  { font-weight:bolder; color:#999; font-size:14px; }
span.counter.warning  { color:yellow; }
span.counter.exceeded { color:red; }