* { font-family: Verdana; }
body { background-color: #eee; margin: 0px; }
h1, h2, h3, h4, h5, h6 { color: #c39; font-weight: normal; text-align: center; }
h1 { font-size: 24px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

header nav { display: block; width: 0px; float: left; padding-left: 5px; }
header h1 { display: block; margin-left: -50px; }
#menuon, #menuoff { display: block; width: 40px; height: 36px; text-align: center; font-size: 24px; border: solid #999 1px; cursor: pointer; }
#menulist { background-color: #eee; border-right: solid #999 1px; border-bottom: solid #999 1px; padding: 16px 5px 5px 5px; position: absolute !important; top: 0; left: 0; z-index: 10000; width: 200px; height: 95%; transition: 0.3s; transform: translateX(-100%); }
#menulist.visible { transition: 0.6s; transform: translateX(0%); }
#menulist>ul { margin: 0px; padding: 10px 0px; list-style-type: none; height: 30px; }
#menulist>ul>li { border-bottom: solid #999 1px; }
#menulist>ul>li:hover { background-color: #fff; }
#menulist>ul>li>a { display: block; width: 100%; line-height: 30px; text-decoration: none; color: #222; padding: 0px 5px; }
#menulist .greeting { margin-top: 10px; padding: 5px; font-size: 13px; color: #393; }

footer { padding: 10px; text-align: center; }

.infoforanonymous { background-color: #fff; border-top: dotted #999 2px; padding: 10px; text-align: center; }
.infoforanonymous img { width: 100%; max-width: 600px; border: solid #666 1px; margin-top: 5px; }

.sets { background-color: #fff; padding-top: 10px; padding-bottom: 10px; text-align: center; }
.set { display: inline-block; width: 300px; margin: 10px; border: solid #ccc 1px; padding-bottom: 10px; font-size: 20px; }
.set:last-child>div { display:inline-block; border-bottom: none; padding-bottom: 11px; }
.set a { display: block; width: 100%; color: #083; text-decoration: none; }
.set a:hover, .set a:active { color: #0b3; text-decoration: underline; }
.set span { color: #999; }
.set span.count { color: #666; font-size: 16px; }
.createset { text-align: center; padding: 10px; background-color: #fff; }
.createset a { color: #393; }

.cards { background-color: #fff; padding-bottom: 10px; text-align: center; }
.card { margin-bottom: 20px; }
.card img { width: 100%; max-width: 500px; }
.card span { display: block; border-top: dashed #ccc 2px; padding-top: 10px; font-size: 26px; color: #f00; }

a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
    background-image: url(/cards/btns-next-prev.png);
    background-repeat: no-repeat;
    display: block;
    width: 12px;
    height: 18px;
    overflow: hidden;
    text-indent: -9999px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}
a.slidesjs-next { margin-right: 10px; background-position: -12px 0; }
a:hover.slidesjs-next { background-position: -12px -18px; }
a.slidesjs-previous { background-position: 0 0; }
a:hover.slidesjs-previous { background-position: 0 -18px; }
a.slidesjs-play { width: 16px; background-position: -25px 0; margin-left: 20px; }
a:hover.slidesjs-play { background-position: -25px -18px; }
a.slidesjs-stop { width: 16px; background-position: -42px 0; margin-left: 20px; }
a:hover.slidesjs-stop { background-position: -42px -18px; }

@media all and (max-width: 500px) {
}
