#skylandle_titlebar {
    background:#032858 -webkit-radial-gradient(#0061a3, #032858);
    color:#65bdea;
    border:2px solid #000;
    border-width:0 0 2px 0;
    padding:5px;
}

#skylandle_titlebar h1 {
    margin:0 0 0 15px;
    padding:0px;
    display:inline;
    color: #65bdea;
    background: -webkit-linear-gradient(#fff 30%,#fbfdff,#edf6fe,#d6eafa,#b3daf5,#85c7ee,#65bdea,#5db9e8,#45ade2,#009cd7,#0090d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke:#FFF 1px;
    text-transform:uppercase;
}

#skylandle_titlebar input {
    float:right;
    margin:9px;
}

#skylandle h3 {
    font-size:1.5em;
    padding:0;
    margin:0.2em;
}

#skylandle span.wrong {
    text-decoration:line-through;
    opacity:0.2;
}

#skylandle #guesses {
    border-collapse:collapse;
    border-spacing:0;
    width:95%;
    margin:15px auto;
}

#skylandle #guesses td.name {
    text-align:left;
    padding:0 5px;
}

#skylandle #guesses td.icon {
    width:30px;
}

#skylandle #guesses td.icon img {
    vertical-align:text-bottom;
}

#skylandle #guesses td.game {width:55px}
#skylandle #guesses td.element {width:32px}
#skylandle #guesses td.type {width:35px}

#skylandle #guesses td.game img,
#skylandle #guesses td.element img,
#skylandle #guesses td.type img,
#skylandle #games img,
#skylandle #elements img,
#skylandle #types img {
    height:40px;
    width:40px;
    background:center no-repeat;
    background-size:40px;
    vertical-align:text-bottom;
}

#skylandle #guesses td.game img,
#skylandle #games img  {
    height:40px;
    width:55px;
    background-size:55px;
}

#skylandle #guesses td.element img,
#skylandle #elements img  {
    height:30px;
       width:30px;
    background-size:30px;
}

#skylandle #guesses td.type img,
#skylandle #types img {
    width:35px;
    background-size:35px;
}
        
#skylandle {
    text-align:center;
    font:1em Verdana;
}

#skylandle h2 {
    margin:0;
    padding:5px;
}

#skylandle form {
    display:flex;
    width:95%;
    margin:10px auto;
    border-radius:3px;
    box-sizing: border-box;
}

#skylandle form input {
    height:2em;
    vertical-align:text-bottom;
    padding:0 15px;
    width:5%;
    min-width:min-content;
    box-sizing: border-box;
}

#skylandle .guess {
    height:2em;
    width:95%;
    background:url('/images/skylandle/icon_guess.svg') 2px no-repeat;
    background-size:20px 20px;
    padding-left:25px;
    border-right:0;
    margin-right:10px;
    border-radius:3px;
    border:1px solid #000;
    box-sizing: border-box;
}

#skylandle #skylandle_alert_container {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    display:none;
    box-sizing:border-box;
    padding:20px;
}

#skylandle #skylandle_alert {
    text-align:center;
    padding:5px;
    border:2px solid #000;
    z-index:1;
    width:90%;
    margin:0 auto;
    max-width:500px;
    -webkit-backface-visibility: hidden;
    max-height:100%;
    overflow:auto;
    box-sizing:border-box;
}

#skylandle #skylandle_alert span.alert_close {
    float:right;
    display:block;
    padding:5px;
    position:relative;
}

#skylandle #skylandle_alert span.alert_close:hover {
    cursor: pointer;
    font-weight:bold;
}

#skylandle #skylandle_guess_stats {
    text-align:left;
    width:100%;
    border-spacing:0;
    border-collapse:collapse;
    box-sizing:border-box;
}		

#skylandle #skylandle_stats {
    width:100%;
}

#skylandle #skylandle_stats td {
    width:25%;
    vertical-align:top;
}

#skylandle #skylandle_guess_stats td.guess_num {
    width:20px;
    text-align:right;
}

#skylandle #skylandle_guess_stats td {
    padding:2px 4px;
    font-size:0.8em;
}

#skylandle #skylandle_guess_stats .skylandle_guess_bar {
    display:inline-block;
    padding:2px 5px;
    text-align:right;
    box-sizing:border-box;
    min-width:min-content;
}

#skylandle #skylandle_guess_stats .skylandle_guess_total {
    display:inline-block;
}

#skylandle img.skylandle_icon {
    height:21px;
    width:21px;
    background:center no-repeat;
    vertical-align:text-bottom;
    margin-right:5px;
}

#skylandle #skylandle_autocomplete {
    text-align:left;
    max-height:200px;
    overflow-y:scroll;
    position:absolute;
    width:95%;
    left:2.5%;
    display:none;
}

#skylandle #skylandle_autocomplete div {
    padding:5px;
}

#skylandle #skylandle_autocomplete div.active,
#skylandle #skylandle_autocomplete div:hover {
    cursor:pointer;
}

/*#guesses td.element, #guesses td.type, #guesses td.game {display:none}*/

/** Colours **/


#skylandle #skylandle_titlebar {
    background:#032858 -webkit-radial-gradient(#0061a3, #032858);
    color:#65bdea;
    border-color:#000;
}

#skylandle #skylandle_titlebar h1 {
    color: #65bdea;
}

#skylandle tr.incorrect,
#skylandle td.incorrect {
    background:#666;
    color:#FFF;
}

#skylandle tr.correct,
#skylandle td.correct {
    background:#ADA;
    color:#000;
}

#skylandle .guess {
    border-color:#000;
}

#skylandle #skylandle_alert_container {
    background:rgba(55,55,55,0.7);
}

#skylandle #skylandle_alert {
    border-color:#000;
    color:#000;
}

#skylandle #skylandle_alert.bad {
    background-color:#DAA;
}

#skylandle #skylandle_alert.good {
    background-color:#ADA;
}

#skylandle #skylandle_guess_stats .skylandle_guess_bar {
    background:#0061a3;
    color:#edf6fe;
}

#skylandle #skylandle_guess_stats .skylandle_guess_bar.active {
    background:#edf6fe;
    color:#0061a3;
}

#skylandle #skylandle_guessing input.guess {
    background-color:#DDD !important;
}

#skylandle #skylandle_autocomplete div {
    background:#DDD;
    color:#000;
}

#skylandle #skylandle_autocomplete div.active,
#skylandle #skylandle_autocomplete div:hover {
    background:#666;
    color:#FFF;
}