#rofl #stats {
    display:table;
    table-layout: fixed;
    margin-left:4px;
}

#rofl #stats img {
    image-rendering: auto;
}

#rofl #stats span.champion, #rofl #stats span.name, #rofl #stats span.player, #rofl #stats span.kda, #rofl #stats span.cs, #rofl #stats span.gold, #rofl #stats .items {
    display:table-cell;
    padding-left:6px;
    padding-right:6px;
    height:1%;
    width:1%;
    white-space:nowrap;
    padding-bottom:6px;
    -border:1px dotted red;
}

#rofl #stats .keystone {
    display:table-cell;
    width:1%;
    padding-left:0px;
    padding-right:0px;
    -border:1px dotted red;
}

#rofl #stats span.champion {
    font-weight:bold;
}
#rofl #stats span.player a {
    text-decoration:none;
}
#rofl #stats span.player a:hover {
    text-decoration:underline;
}

#rofl #stats span.level {
    position:relative;
    top:-6px;
    left:-39px;
    opacity:.8;
}

#rofl #stats span.gold:before {
    content: url('gold.png');
    vertical-align: -2px;
    margin-right:1px;
    opacity:.75;
}

#rofl #stats span.kda:before {
    content: url('kda.png');
    vertical-align: -2px;
}

#rofl #stats span.cs:before {
    content: url('cs.png');
    vertical-align: -1px;
    margin-right:2px;
    opacity:.65;
}

#rofl #stats .numberCircle {
    border-radius: 50%;
    display:inline-block;
    width: 14px;
    height: 14px;
    padding: 2px;
    line-height:14px;
    background: #757886;
    color: #F6F6F8;
    text-align: center;
    font-family: Arial;
    font-size:11px;
}

#rofl #stats .champion_image {
    float:left;
    width:32px;
    height:32px;
    border-radius: 50%;
}

#rofl .game_time {
    font-size:1.2em;
}

#rofl #stats .item {
    padding-left:0px;
    padding-right:0px;
    padding-bottom:0px;
    margin-right:2px;
    border-radius:6px;
    background-color:#9CA0B2;
    background-size:24px 24px;
    background-repeat: no-repeat;
    width:24px;
    height:24px;
    vertical-align: -10px;
}

#rofl #stats .item6 {
    width:18px;
    height:18px;
    border-radius:4px;
    vertical-align:-8px;
}

#rofl #stats .keystone_image {
    padding-left:0px;
    padding-right:0px;
    padding-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    border-radius:4px;
    background-color: #27282D;
    background-color: #34353C;
    background-size:24px 24px;
    background-repeat: no-repeat;
    width:18px;
    height:18px;
    vertical-align: -6px;
    -position:relative;
    -left:-8;
}

#rofl #stats .tooltip a, #rofl #stats .tooltip u {
    text-decoration:none;
}

#rofl #stats .tooltip {
    /* It's nearly impossible to click the links in the description
    but this will make sure */
    pointer-events:none;
    padding: 1em;
    position: absolute;
    color:#E6E7EC;
    background-color: #27282D;
    border: 2px solid #757886;
    outline:1px solid #101012;
    border-radius: 2px;
    z-index:1;
    max-width:30%;
    width:30%;
    display:none;
    white-space:normal;
}

#rofl #stats .champion_image + .numberCircle + .tooltip {
    width:auto;
}


#rofl #stats .item:hover + .tooltip {
    display:block;
}
#rofl #stats .keystone_image:hover + .tooltip {
    display:block;
}
#rofl #stats .champion_image:hover + .numberCircle + .tooltip {
    display:block;
}

#rofl #stats .kda .tooltip, #rofl #stats .cs .tooltip, #rofl #stats .gold .tooltip {
    width:auto;
    padding:.5em;
}
#rofl #stats .kda:hover .tooltip, #rofl #stats .cs:hover .tooltip, #rofl #stats .gold:hover .tooltip {
    display:block;
}

#rofl #stats unique, active, passive {
    color:#bf9b30;
}
#rofl #stats stats {
    color:steelblue;
}
#rofl #stats .tooltip .item_name {
    font-size:1.2em;
    clear:right;
}
#rofl #stats .tooltip .item_image {
    float:left;
    margin-right:1em;
    margin-bottom:1em;
    width:48px;
    height:48px;

    border-radius:8px;
    border:1px solid #4E5059;
    background-color:#9CA0B2;
}

/* This will select images in tooltips with src like "http://spiderdave.com/lol/keystones/8005.png"
   The 8***.png and 9***.png keystones are the new style, best without a background and possibly rounded container.
   The old ones are meant to be displayed in a rounded box.
   */
#rofl #stats .tooltip .item_image[src*="/8"], #rofl #stats .tooltip .item_image[src*="/9"] {
    border-radius:50%;
    border:none;
    background-color:transparent;
}

/* same as above; for new keystones */
#rofl #stats .keystone_image[src*="/8"], #rofl #stats .keystone_image[src*="/9"] {
    border-radius:50%;
}

#rofl #stats .tooltip .description {
    clear:left;
}

#rofl #stats .tooltip font {
    /* fixes weirdness on botrk and possibly others */
    font-size:inherit;
    color:inherit;
}

#rofl #stats .tooltip .description {
    float:left;
    clear:both;
}
#rofl #stats .tooltip li {
    margin-left:1em;
}

#rofl #stats .win {
    background: linear-gradient(135deg, rgba(0,0,255,0) 0%,rgba(0,0,255,.1) 50%, rgba(0,0,255,.2) 100%);
    border:2px solid rgba(0,0,255,.1);
    padding-left:1em;
    padding-top:1em;
}
#rofl #stats .lose {
    background: linear-gradient(135deg, rgba(255,0,0,0) 0%,rgba(255,0,0,.1) 50%, rgba(255,0,0,.2) 100%);
    border:2px solid rgba(255,0,0,.1);
    padding:.5em;
    padding-left:1em;
    padding-top:1em;
}

#rofl #stats .win_status {
    font-size:1.2em;
    margin-bottom:8px;
    margin-bottom:1em;
    display:inline-block;
    font-family:verdana;
    letter-spacing: 1px;
}

#rofl .output_raw {
    white-space: pre;
}

#rofl .killtext {
    position:relative;
    top:-4px;
    left:4px;
    font-size:.85em;
    opacity:.6;
    border:1px solid #ccc;
    border-radius:8px;
    padding:1px;
    padding-left:6px;
    padding-right:6px;
    
    background-color:#eee;
}

/* fixes for test page */
#rofl #stats.test_items span.items, #rofl #stats.test_items span.champion {
    width:auto;
    padding:0;
}
#rofl #stats.test_items span.champion {
    width:32px;
    padding:2px;
}

#rofl .filedrop {
    width:65%;
    display:block;
    float:left;
    margin-bottom:1em;
}
#rofl #replay_list {
    float:right;
    width:25%;
}

#rofl #replay_list + * {
    clear:left;
}

#rofl a.remove {
    padding-top:0px;
}