@import url(base.css?v=8);

/*
http://csslayoutgenerator.com/

http://slayeroffice.com/tools/color_palette/?hex=9CA0B2
9CA0B2  B5B8C6  CED0D9  E6E7EC  F6F6F8
858897  757886  4E5059  27282D  101012
Colors used:
1 2 3 4 5
. 7 8 9 10
*/

@font-face {
    font-family: SlightlyFancyPix;
    src: url(/css/spiderdave/SlightlyFancyPix.ttf);
}


a {
    color:inherit;
}


body {
    background: #101012 url('texture5.png') repeat;
    color:#ced0d9;
    font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
}

h1, .h1 {
    font-size: 2em;
    margin-bottom:12px;
}

h2, .h2 {
    font-size: 1.5em;
    margin-bottom:9px;
}

h3, .h3 {
    font-size: 1.4em;
    margin-bottom:7px;
}

ul.ul {
    list-style-type:initial;
    padding-left:2em;
}

.wrapper {
    /* I realize this is arbitrarily shrinking the site, but I feel the background
    helps tie things together, and it looks good making the footer more like part of
    the background */
    padding-top:16px;
    width:97%;
    margin:auto;
}

.header {
    padding:20px;
    background: #4e5059 url('texture5.png') repeat;
    color:#f6f6f8;
    opacity:1;
}
.header img {
    width:64px;
    height:64px;
    vertical-align:middle;
    vertical-align:-12px;
}

.header strong {
    margin-left:4px;
    font-size:25pt;
    font-weight:bold;
    color: #101012;
    text-shadow: 0px 0px 12px #8c8de6;
    text-shadow: 0px 0px 4px #f6f6f8;
}

.userbox {
    float:right;
}

.middle .container {
    background: #757886 url('texture5.png') repeat;
    color: #27282d;
    min-height:200px;
    padding-bottom:16px;
}

.left-sidebar {
    padding:16px;
    background: #858897 url('texture5.png') repeat;
    color: #27282d;
    font-weight:bold;
}

.footer {
    font-size:12px;
    padding:24px;
    background-origin: border-box;
    background:transparent;
    color:#e6e7ec;
}

.footer div.links {
    clear:both;
}

.footer div.links section {
    float:left;
    margin:16px;
    margin-top:8px;
    padding-bottom:24px;
    width:150px;
    height:100px;
    border-right:1px solid #858897;
}
.footer div.links section:last-of-type {
    border-right:none;
}

.footer .links section h3{
    color: #CED0D9;
    font-size:1.4em;
}

.footer .links section ul{
    padding-left:.1em;
    color: #B5B8C6;
}

.footer div.links section img.social {
    height:1.5em;
    width:1.5em;
    vertical-align:-30%;
    margin-right:4px;
}

.table .title, .table caption, .table .caption {
    background-color: #4e5059;
    color:#f6f6f8;
}

.table th, .table .th {
    background-color:#757886;
    color: #f6f6f8;
}

.pager a, .pager span.gray {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    background-color:#4e5059;
    border:1px solid #27282D;
    color:#f6f6f8;
    display:inline-block;
    cursor:pointer;
    color:#f6f6f8;
    padding:2px 4px;
    margin:4px 2px;
    text-decoration:none;
}

.pager span.gray {
    background-color:#757886;
    border:1px solid #4e5059;
    color:#CED0D9;
    opacity:.8;
    cursor:default;
}

.stats_box {
    opacity:.9;
    font-size:.8em;
    font-weight:normal;
    margin:0;
    margin-top:2em;
    border:1px solid #4e5059;
    padding:.5em;
}
.stats_box h4 {
    font-weight:bold;
}

div.notice {
    position:absolute;
    left:120px;
    top:30px;
    padding:2px;
}

.download:before {
    content: url('download.png');
    vertical-align: -3px;
    margin-right:2px;
}

.audio_box {
    background: #27282D;
    color: #9CA0B2;
    width:500px;
    clear:right;
    padding:5px;
    border-radius: 11px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.audio_box audio {
    margin-top:10px;
    width:100%;
    border-radius:10px;
    opacity:.7;
}

.audio_box .music_title {
    font-size:1.5em;
    margin:5px;
    padding:5px;
}

.audio_box .music_title a {
    text-decoration:none;
}

.audio_box .music_description {
    margin:0px 0px 0px 8px;
    clear:right;
}

.audio_box .download {
    font-size:.8em;
    margin-top:2px;
    float:right;
    padding-right:1em;
}

.twitter{
    border-radius: 11px;
    padding:10px;
    margin:4px;
    margin-right:10px;
    padding-top:20px;
    width:30%;
    background: #27282D url('texture5.png') repeat;
    color:#f6f6f8;
}

.twitter span.tweets {
    font-size:1.5em;
    padding-left:12px;
}

.twitter a.right {
    margin-top:.5em;
    margin-bottom:.5em;
    margin-right:1em;
}

.post {
    background: #c3c3c3 url('texture5.png') repeat;
    color:#27282D;
    width:63%;
    padding:10px;
    padding-bottom:16px;
    margin-top:4px;
    margin-bottom:24px;
    box-shadow: 8px 8px 7px 0px #4E5059;
    border-radius: 11px;
}

.post img {
    max-width:100%;
}

.post .added {
    font-size:.8em;
    float:right;
}

.post.sticky:before {
    content: url('pin.gif');
    float:left;
    margin-right:4px;
}

.sticky:before {
    content: url('pin.gif');
    float:left;
    margin-right:4px;
}

/* "intro" posts are at the top with minimal styling */
.post.intro h3, .post.intro span.h1, .intro .post_details, .intro .anchor, .intro hr {
    display:none;
}

.post.reply {
    margin-left:5%;
    margin-bottom:6px;
    padding-bottom:6px;
    width:58%;
    font-size:90%;
    box-shadow: 6px 6px 5px 0px #4E5059;
    border-radius: 7px;
}

.post.reply .by {
    font-size:.9em;
}

.post hr {
    opacity:.5;
}

.post span.anchor {
    float:right;
    font-size:.8em;
    padding:2px;
}

.post span.anchor a {
    text-decoration:none;
}


/* used by bbcode [img=left] */
.img_left {
    float:left;
    margin-right:6px;
}
.img_right {
    float:right;
    margin-left:6px;
}

.left {
    float:left;
}
.right {
    float:right;
}

strong {
    font-weight:bold;
}

.box {
    background: #c3c3c3 url('texture5.png') repeat;
    color:#27282D;
    padding:10px;
    padding-bottom:16px;
    margin-top:4px;
    margin-bottom:24px;
    margin-right:24px;
    box-shadow: 8px 8px 7px 0px #4E5059;
    border-radius: 11px;
    border:none;
}

input:required {
    margin:1px;
    border:1px solid #858897;
}

input:required:valid {
    background: #F6F6F8 url("data:image/svg+xml;utf,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='16px'><text x='2' y='13' fill='green' fill-opacity='.7' font-size='12'>&%2310003;</text></svg>") no-repeat;
    background-position: right top;
}
input:required:invalid {
    box-shadow:none; /* get rid of default red box in firefox */
    background: #F6F6F8 url("data:image/svg+xml;utf,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='16px'><text x='2' y='13' fill='red' fill-opacity='.7' font-size='12'>&%2310005;</text></svg>") no-repeat;
    background-position: right top;
}

.button, #new_comment .button {
    display:inline-block;
    cursor:pointer;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:none;
    box-shadow: 2.5px 2.5px .5px .1px #4e5059;
    padding:2px 8px;
    margin:2px 2px;
    margin-right:4px;
    color:#f6f6f8;
    background-color:#858897;
    text-decoration:none;
}

.close {
    display:inline-block;
    cursor:pointer;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    padding:2px;
    padding-left:3px;
    padding-right:4px;
    padding-top:0px;
    margin:0;
    margin-left:.5em;
    margin-right:.5em;
    color:#f6f6f8;
    text-decoration:none;
    background-color:#4E5059;
    border:1px solid #858897;
    opacity:.3;
    position:relative;
    top:-2px;
}
.close:hover {
    opacity:.8;
}

.fade_out {
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
    transition: opacity 3s ease-in-out;
    opacity: 1;
}

#new_comment .button, #new_comment .button.gray, .bitcoin .button, .button.alt {
    background-color:#4e5059;
    border:1px solid #757886;
    box-shadow: 0px 0px 1px 1.5px #27282d;
    color:#f6f6f8;
    padding:3px 8px;
}

#staff_site_settings .button {
    background-color:#4E5059;
    border:1px solid #858897;
    box-shadow: 0px 0px 1px 1.5px #27282d;
    margin-bottom:8px;
    opacity:.8;
}

#staff_site_settings .table .button {
    padding-top:0;
    padding-bottom:0;
    margin-bottom:3px;
}

#staff_site_settings .button:hover {
    opacity:1;
}

#staff_site_settings div.table .ajax_button .button, #staff_site_settings div.table input {
    margin-top:0px;
    margin-bottom:1px;
    padding-top:0px;
    padding-bottom:0px;
}

#staff_site_settings div.table .td input:not([type]) {
margin:0;
padding:1px;
font:inherit;
}

#profile .button {
    background-color:#4E5059;
    border:1px solid #858897;
    font-size:1.1em;
    padding:.5em;
    margin-top:.5em;
    opacity:.8;
}

.button.gray, #new_comment .button.gray {
    background-color:#757886;
    border:1px solid #4e5059;
    color:#CED0D9;
    opacity:.8;
    cursor:default;
}

#new_comment .button:before {
    /* pencil character */
    content: '\270e';
    margin-right:2px;
    font-size:1.4em;
    vertical-align: -10%;
}

.bitcoin .button:before {
    content: url('/css/spiderdave/bitcoin.png');
    margin-right:4px;
    vertical-align: -19%;
}


.footer .bitcoin {
    float:right;
}
.footer .bitcoin a {
    font-size:1.2em;
    padding-bottom:1px;
}

#emulua .post {
    width:97%;
    max-width:1200px;
}

#emulua .box_info {
    float:left;
    width:40%;
    max-width:400px;
    height:100%;
    border:1px solid #4e5059;
    padding:8px;
    margin-bottom:8px;
    background-color:#858897;
    color:#27282D;
    margin-right:1em;
}

#emulua .box_content {
    width:56%;
    float:left;
}

#emulua .box_content img {
    max-width:570px;
}

#emulua .box_info, #emulua .box_content {
    margin-top:4px;
}

#emulua .box_info {
    clear:left;
}

#emulua .post span.h1 {
    font-size:1.5em;
    padding-bottom:10px;
    margin-right:8px;
}

/* The emulua page needs this before the buttons.
It's a little hack-ish. */
#emulua .post br.before_buttons {
    clear:both;
}

.post br.before_buttons {
    clear:left;
}

#emulua hr {
    clear:both;
    margin-top:0;
}

#emulua .post span.anchor {
    float:right;
    font-size:1em;
}

#emulua .post span.h1 {
    float:left;
}

/* hide post details (user, post date, etc) on about page */
#about .post_details {
    display:none;
}

.post:after {
    clear: both;
    display:inline-block;
    content: '';
}

#contact .box {
    width:90%;
    padding:12px;
}

#contact .box textarea {
    height:16em;
    width:99.5%;
}

.info, .spiderinfo {
    display: inline-block;
    margin-bottom:1em;
}
.info:before, .spiderinfo:before {
    content:url(info-16.png);
    position: relative;
    margin:6px;
    margin-left:0;
    top: 3px;
}

.spiderinfo:before {
    content:url(favicon.ico);
}

#test div.fonttest {
    font-family: "SlightlyFancyPix";
    -font-size:48px;
    font-size:16px;
    line-height:11px;
}
#test div.fonttest {
    width:70%;
}

#test div.fonttest p {
    padding-bottom:1em;
}

.left-sidebar ul:not(:last-of-type) {
    border-bottom:1px solid #757886;
    padding-bottom:1em;
    margin-bottom:.5em;
}

/* This is for divs that just wrap things to give it a class, etc */
.wrap {
    display:inline;
    border:0;
    padding:0;
}

.md h4 {
    font-family:monospace;
    font-size:1.2em;
    font-weight:600;
    background-color:#E6E7EC;
}
.md h1, .md code {
    font-weight:normal;
}


#sbdocs .toc li a {
    display:block;
    cursor:pointer;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:none;
    padding:2px 8px;
    margin:2px 2px;
    margin-right:4px;
    text-decoration:none;
    padding-top:0;
    padding-bottom:0;
}
#sbdocs .toc li a.current {
    background-color:#9CA0B2;
}
#sbdocs .toc li a:hover {
    background-color:#E6E7EC;
}
#sbdocs .toc li a.current:hover {
    background-color:#B5B8C6;
}

#soundboard div.soundboard button{
    width: 150px;
    background-color:#4e5059;
    border:1px solid #757886;
    box-shadow: 0px 0px 1px 1.5px #27282d;
    color:#f6f6f8;
    padding:3px 8px;
    margin-bottom:.8em;
}

#soundboard div.soundboard div.sets {
    margin-right:1em;
    margin-bottom:1em;
}

#soundboard div.soundboard div.sets a {
    padding-right:1em;
}

#soundboard button.stop:before {
    content: url('stop.png');
    vertical-align: -3px;
    margin-right:4px;
}

    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("TxzC70f.png") no-repeat;
        cursor: pointer;
    }

#login td, #signup td {
    font-size:1.1em;
    padding-right:.7em;
    padding-bottom:2px;
    
}
#login td input, #signup td input{
    font-size:inherit;
}

#about .anchor {
    display:none;
}

#staff div.left, #staff div.right {
    width:49%;
}
#staff .table {
    width:100%;
    margin-top:.5em;
    margin-bottom:1em;
}

.pre {
    white-space: nowrap;
}

.errors {
    color:#F55;
}

.query {
    white-space:pre;
    max-width:95%;
    background: #757886;
    color:#F6F6F8;
    border:1px solid #4E5059;
    padding:1em;
    padding-bottom:1em;
    margin-bottom:1em;
    clear:both;
}

.alert {
    font-size:1.1em;
    max-width:95%;
    background: #858897;
    color:#F6F6F8;
    border:1px solid #4E5059;
    padding:1em;
    padding-top:4px;
    padding-bottom:4px;
    margin-top:0px;
    clear:both;
}

#profile input[type='text'], input[type='email'], input[type='url'], input[type='password'] {
    width:20em;
    margin-bottom:2px;
}

/* This will add a line break so the group is displayed blow the name in the userbox */
.userbox .usertag .group:before {
    content:"\A";
    white-space:pre;
}

.usertag .group {
    font-size:.85em;
    opacity:.8;
}
.usertag a {
    text-decoration:none;
}
.usertag img.avatar {
    float:left;
    height: auto;
    width: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.userbox .logout, .userbox .login {
    float:right;
    margin-left:2em;
}

.logout a:before, .login a:before {
    content:"[\2192";
    margin-right:4px;
    letter-spacing:-2px;
    font-family:lucida console, consolas;
    background-color:#444;
    border-radius:50%;
    padding:4px;
    padding-right:6px;
    opacity:.7;
}
.login a:before {
    content:"\2192]";
}

#emulua div.post_details {
    float:right;
    position:relative;
    top:-47px;
    left:-1.5em;
    
    /* This is a little cheat to take it out of the flow and still
    have it relative positioned */
    height: 0; overflow: visible;
}

}
#emulua .post_details br {
    display:none;
}
#emulua .post_details .added {
    margin-left:2em;
}

/* remove avatar to deemphasize the post author somewhat (It's the script author that matters) */
#emulua .content .usertag img.avatar {
    visibility:hidden;
}

.smaller {
    font-size:.82em;
}

.smallest {
    font-size:.55em;
}

div#edit, div#add {
    white-space:nowrap;
}
div#edit label, div#edit input, div#add label, div#add input {
    display:inline-block;
    white-space:nowrap;
}
div#edit label, div#add label {
    width:34%;
    text-align:right;
    margin-right:.5em;
}

#forum .pager {
    margin-top:10px;
}

/*
.wip:before {
    content:url(info-16.png);
    position: absolute;
    z-index: 1;
    opacity:.5;
}
.wip:hover:before {
    content:none;
    position: absolute;
    z-index: 1;
}
*/

input:user-error {
    border:2px solid red;
}

.filedrop {
    display:block;
    clear:both;
    width:70%;
    padding:1.5em;
    margin:.5em;
    margin-bottom:0;
    border:4px dashed #757886;
    font-size:1.5em;
    color:#4E5059;
}

.small {
    font-size:.8em;
}

#staff_tasks a.ajax_loading {
    pointer-events: none;
    opacity:.6;
}
#staff_tasks a.ajax_loading:after {
    margin-left:.5em;
    content: url('ajax-loader.gif');
    vertical-align: -10%;
}

.hidden {
    display:none;
}

#lightbox {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index:2;
}
.behind_lightbox {
    height: 100%;
    width: 98.75%;
    overflow: hidden;
}

#gamecanvas {
    /* causing issues having this defined here for some reason */
    /* 
    width:1024px;
    height:768px;
    */
    image-rendering:-moz-crisp-edges;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    
    
}

#quick_message {
    position:absolute;
    -float:left;
    top:20px;
    left:50%;
}

#tv .favorite {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width: 30px;
    height: 30px;
    float:left;
    text-decoration:none;
    text-align:center;
    font-size:18px;
    line-height:28px;
    opacity:.8;
}

#tv .favorite a {
    text-decoration:none;
    display:block;
}
#tv .poster_card:hover .favorite {
    display:block;
}
#tv .favorite.add {
    background:goldenrod;
}
#tv .favorite.remove {
    background:indianred;
}
#tv .favorite:hover {
    opacity:1;
}
#tv main nav {
    margin-bottom:2em;
}


main nav .button {
    background-color:#4E5059;
    border:1px solid #858897;
    box-shadow: 0px 0px 1px 1.5px #27282d;
    margin-bottom:8px;
    opacity:.8;
}
main nav .button:hover {
    opacity:1;
}

#tv .poster_card {
    position:relative;
    height:280px;
    width:150px;
    float:left;
    margin-right:1em;
}

#tv .show_title {
    font-family: 'Roboto Condensed';
    font-size:18px;
    padding-top:2px;
    height:40px;
}

#tv .poster::after {
    content:"";
    display:flex;
    clear:both;
}

#tv .watch_link {
    margin-right:1em;
}
#tv .watch_link::before {
    content: "\25b6";
    font-size:.8em;
    vertical-align: 1px;
    -margin-right:1px;
    -text-decoration: none;
}

#tv .poster_links {
    width:138px;
    height:0px;
    overflow:hidden;
    float:left;
    background-color:#aab;
    position:relative;
    top:-40px;
    left:0;
    font-size:.8em;
    opacity:0;
    padding-left:1em;
    display:inline-block;
    visibility:hidden;
    transition: opacity 1.25s ease-in-out;
    -moz-transition: opacity 1.25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: height .28s ease-in-out, top .28s ease-in-out;
    -moz-transition: height .28s ease-in-out, top .28s ease-in-out;
    -webkit-transition: height .28s ease-in-out, top .28s ease-in-out;
}

#tv .poster_card:hover .poster_links {
    /* 50(height of this) + 40(title height) + 2(title padding-top) = 92 */
    top:-92px;
    opacity:.88;
    visibility:visible;
    height:50px;
}

#davepatcher_ref h1 {
    font-family:Inconsolata, monospace;
    font-size:2.5em;
    padding:8px;
    padding-bottom:0px;
}

#davepatcher_ref article short-description {
    padding-left:8px;
    margin-bottom:2em;
    display:block;
}

#davepatcher_ref article syntax-box {
    font-size:1.2em;
    background:white;
    padding:1em;
    height:1em;
    display:block;
    border:2px dotted grey;
    font-family:Inconsolata, monospace;
    margin-bottom:1em;
}

#davepatcher_ref article syntax-label, #davepatcher_ref article description-label, #davepatcher_ref article example-label, #davepatcher_ref article output-label, #davepatcher_ref article return-value-label {
    font-size:1.1em;
    padding-bottom:4px;
    display:inline-block;
}

#davepatcher_ref article full-description, #davepatcher_ref article full-text {
    white-space:pre-wrap;
    display:block;
    margin-bottom:1em;
    padding:.5em;
}
#davepatcher_ref article full-text {
    white-space:initial;
}


#davepatcher_ref article example-box, #davepatcher_ref article output-box, #davepatcher_ref article return-value {
    display:block;
    white-space:pre;
    font-family:Inconsolata, monospace;
    font-size:1.1em;
    padding:.5em;
    border:2px inset white;
    margin-bottom:1em;
}

#davepatcher_ref article example-box {
    border-color:white;
    background-color:white;
}

#davepatcher_ref article output-box {
    border-color:#123;
    background:#123;
    color:white;
    opacity:.9;
}

#davepatcher_ref article return-value {
    border:none;
    padding-top:0;
}

#davepatcher_ref .article_links a {
    display:inline-block;
    width:80%;
    padding:4px;
    padding-top:2px;
    padding-bottom:2px;
    text-decoration:none;
    border-radius:6px;
    border:1px solid #B5B8C6;
    background-color:#CED0D9;

}

#davepatcher_ref .article_links a:hover {
    background-color:#B5B8C6;
}


#davepatcher_ref #searchbox_container {
    float:right;
    margin-right:1em;
}

#davepatcher_ref #searchlist {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index:1;
}

#davepatcher_ref #searchlist li a {
    border: 1px solid #ddd; /* Add a border to all links */
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6; /* Grey background color */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove default text underline */
    font-size: 18px; /* Increase the font-size */
    color: black; /* Add a black text color */
    display: block; /* Make it into a block element to fill the whole list */
    position:relative;
    top:-22px;
}

#davepatcher_ref #searchlist li a:hover:not(.header) {
    background-color: #eee; /* Add a hover effect to all links, except for headers */
}



#davepatcher_ref .hideifnothover:not(:hover) {
    display:none;
}
#davepatcher_ref .hideifnothover:hover {
    display:block;
}

#programs .post {
    width:70%;
}

#davepatcher_ref .seealso h3 {
    font-style:italic;
    font-size:1em;
}
#davepatcher_ref .seealso ul {
    list-style-type: initial;
    margin-left:2em;
    font-size:1em;
}

/* "depreciated" notice style */
/*
#davepatcher_ref article em {
    font-style: italic;
    -background:white;
    padding:.3em;
    padding:1em;
    padding-left:1em;
    padding-right:1em;
    color: #101012;
    background-color:#B5B8C6;
    box-shadow: 2px 2px #757886;
}
#davepatcher_ref article em:before {
    content: "\1F4DD";
    padding-right:.5em;
    font-size:1.5em;
    text-shadow: .5px .5px #757886;
    
}
*/

.gallery_container {
    width:80%;
    border:10px solid black;
    text-align:left;
    white-space: nowrap;
    overflow-y:hidden;
    background:#101012;
}

.gallery {
    margin:2px;
    display:flex;
    overflow:hidden;
    margin-left:8px;
    
}

.gallery img {
    object-fit: scale-down;
    height:70px;
    margin:8px;
    border:1px solid #4E5059;
    box-shadow: 5px 5px 4px 0px black;
}

.gallery img:hover {
    height:300px;
    
    transition: width 2s height 2s position 2s linear 1s;
    transition-delay:.4s;
    
}

.emoji {
    font-size:1.3em;
}


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

#ilb #file_list + * {
    clear:left;
}

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