/* * * * * * * * * * * * * * * * * * * * * *\
 * 333networks Json API server banners     *
 * Written by Darkelarious, 2023-nov       *
 * Styling elements for json-server-banner *
 * tags, as "sleek" or "thumb" banner.     *
\* * * * * * * * * * * * * * * * * * * * * */

/* only affect divs with class "json-server-banner"  */
div.json-server-banner {
    display:block; 
    min-width: 350px;
    max-width: 400px;
    height: 95px;
    margin: 20px 5px;
    overflow:hidden;
    padding: 0;
    border:1px solid #333;
    font-size:0.76em;
    line-height:1.17em;
    -webkit-box-shadow: 0px 0px 15px -4px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 15px -4px rgba(0,0,0,0.5);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

div.json-server-banner.sleek {
    height: 28px;
    line-height:1.2em;
}
    
div.json-server-banner div.infobox {
    display:block;
    margin: 6px 5px 5px 105px;
    white-space: nowrap;
    overflow:hidden;
}

div.json-server-banner.sleek div.infobox {
    margin:1px 1px 1px 36px;
}

div.json-server-banner div.infobox a.browser {
    text-decoration: underline;
    font-weight:bold;
    font-size:larger;
}

div.json-server-banner.thumb div.infobox a.browser {
    padding-bottom:5px;
}

div.json-server-banner img {
    float:left;
    height:95px;
    width:95px;
    object-fit: cover;
    border-right:1px solid #111;
}

div.json-server-banner.sleek img {
    height:28px;
    width:28px;
    object-fit: cover;
}

div.json-server-banner.sleek div.infobox span {
    margin: 0 3px 0 1px;
}

div.json-server-banner.sleek div.infobox a.join {
    text-decoration: none;
    float:right;
    margin-right: 3px;
}

div.json-server-banner .bold {
    font-weight:bold;
}

/* error messages */
div.json-server-banner div.api.error {
    margin:5px;
}
    
div.json-server-banner div.api.error h4 {
    color: #911;
    margin-bottom:  10px;
}

div.json-server-banner.sleek div.api.error h4 {
    display:none; 
}
   
div.json-server-banner div.api.error p {
    color: #911; 
    font-weight:normal;
}

div.json-server-banner.sleek div.api.error p {
    font-size:0.95em;
    line-height: 0.97em;
}