
.icon {font-weight:normal}
a.iconlink
a.iconlink:visited,
a.iconlink:active,
a.iconlink:link,
a.iconlink:hover
 {text-decoration:none}


a, a:visited, a:active, a:link {color:inherit}
a:hover {color:#FFA366}

.page {display:inline-block;background-size:contain;vertical-align:bottom;position:relative}
.page#p1 {border-right:1px solid black}
.page#p2 {background-image:url('/img/pages/cover.jpg')}
body {background-color:#C0FFEE}
body {margin:10px;margin-bottom:30px;margin-top:30px}

.sticker {display:inline-block;background-image:url("/img/sticker-sheet-small.jpg");
          background-size:3315px 2475px;width:195px;height:165px}
.padtop {margin-top:3px}
img.sticker.new {box-shadow: 0 0 20px gold;}
div.sticker.duplicate {margin-left:-180px;}
.tc {display:inline-block}
.tc, div.sticker.shadow {box-shadow: -2px 0px 3px black;}
div.tc.duplicate {margin-left:-120px;}

img.zoomg {width:95%;max-width:650px;height:550px;object-fit:none;object-position:-10400px -7700px}
div.zoomg {width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(120,120,120,0.8);text-align:center;padding-top:100px;display:none}

.personname, .medtitle, .smalltitle {text-align:center;font-family: 'Noto Sans',sans-serif;}
.personname {font-size:120%;font-weight:bold;margin-bottom:5px}
.medtitle {font-size:120%;font-weight:bold;margin-bottom:5px}
.smalltitle {font-size:110%;font-weight:bold;margin-bottom:3px}

.nav {position:absolute;bottom:10px;font-family:'Noto Sans',sans-serif}
.nav.left {left:10px}
.nav.right {right:10px}

.legend {border-radius:15px;padding:10px;display:inline-block;margin:10px;width:200px}

.notifybg {width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(120,120,120,0.8);text-align:center;padding-top:20px}
.notify {background-color:white; width:95%; max-width:900px;margin-left:auto;margin-right:auto;padding:10px;font-family: 'Noto Sans',sans-serif;border-radius:15px;max-height:100%;overflow:scroll}
.notify p {text-align:justify}
.footnotify {position:absolute;bottom:30px;right:20px;background-color:white;padding:5px;font-family: 'Noto Sans',sans-serif;font-size:8px}

.swapgroup, .stickernew {text-align:center;font-size:12px;display:inline-block;font-weight:bold}

.stat {font-family: 'Noto Sans',sans-serif;text-align:left}

.swapgroup {padding:5px;padding-top:15px}

.stickercollection {background-color:white; left:0;right:0;padding:10px;font-family: 'Noto Sans',sans-serif;border-radius:15px;margin:auto;margin-bottom:30px;max-width:900px;width:95%}
.stickercollection.full-width {max-width:95%}
.stickercollection p {text-align:justify;text-indent:10px}

.url {font-family:'Indie Flower',cursive}

.notificationbox {border: 12px double red;margin:10px;padding:10px;}

.swapme {display:inline-block;vertical-align:top;text-align:center}
.swapme .ul {border-bottom:2px solid black;font-size:120%}

.need {font-weight:bold;color:#FFA366}
.got {font-size:80%}

.stat.topspace {margin-top:20px}
.stat.bottomline {padding-bottom:40px;border-bottom:3px dashed grey}

a.removelink:hover{text-decoration-line: line-through;
text-decoration-color: #FF0000;
text-decoration-style: wavy;}

.infosym {display:inline-block;border:2px solid black;width:20px;height:20px;border-radius:20px;line-height:20px;margin-right:3px;margin-left:3px;text-align:center}
a:hover .infosym {border:2px solid #FFA366}

table.shop td {padding:4px;font-size:14pt;padding-left:10px;padding-right:10px}
table.shop.centr td {text-align:center}

.toplinks {
    text-align:center;margin-top:50px;margin-bottom:50px;
}
.toplinks a {
    width:150px;font-family: 'Noto Sans',sans-serif;font-weight:bold;
    border:4px solid black;border-radius:15px;padding:10px;margin:10px;
    text-decoration:none;font-size:120%;
    -o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;
    -webkit-transition:.5s;transition:.5s
}
.toplinks a:not(.current) {
    background:transparent;
}
.toplinks a.current {
    background-color:white;
}
.toplinks a:hover {
    color:black;
}
.toplinks a:not(.current):hover {
    background-color:white;
    color:black;
    border:4px solid red;
}

canvas#stickerbookpages {
    max-width:90vw;
    max-height:90vh;
}

.emptycard {
    display:inline-block;border:2px dashed black;width:150px;height:200px;margin:10px;vertical-align:middle;
}
a.tradingcard {
    display:inline-block; margin:10px; vertical-align:middle;
}
.tc {
    width:150px;height:200px;
    background-image:url("/img/trading-cards-small.jpg");
    background-size:1050px 400px;
}
.tc.equipped {
    filter: brightness(35%);
}
.unknown-card {
    width:150px;height:200px;background-color:#EEEEEE;display:inline-block;line-height:200px;color:#BBBBBB;font-size:200%;vertical-align:middle;margin:10px
}
.shop-container {
    width:95%;max-width:600px;display:inline-block;margin-left:10px;margin-right:10px;margin-bottom:40px;vertical-align:top
}

.swaps {display:inline-block;vertical-align:top;border:2px solid grey;text-align:left;direction:ltr}
.swapscontainer {text-align:center;direction:rtl}

@media (min-width:750px){
    .toplinks a {
        display:inline-block;
    }
    a#show-menu {
        display:none;
    }
    .swaps {width:43vw;padding:0.5vw;margin:0.5vw}
} /* @media (min-width:750px) */


@media (max-width:750px){
    .toplinks a {
        display:none;
    }
    a#show-menu {
        display:inline-block;
    }
    .swaps {padding:10px;margin:10px}
} /* @media (max-width:750px) */

a#hide-menu {
    display:none;
}
