body, input {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
    color: #444;
}

.large-font {
    font-size: 14px;
}

/* Misc paragraph styles */
a {
    color: #0af;
}

/* End misc paragraph styles */

body {
    background: url('/background.png');
    margin:0;
}


.links {
    background:#333;
    color:#f0f0f0;
    box-shadow: 0 0 5px #333;
    font-size: 15px;
    margin-top:0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 26px; /* Same as the title to align items*/
    /* border-left:3px solid #0af; */
}

.links > *:not(h1) {
    padding: 17px 18px 17px 14px;
}

.links > span {
    padding-left: 12px;
}

.spc {
    flex-grow: 1;
}

h1 {
    padding:0; margin: 0;
    font-weight:600;
    font-size:22px;
    margin-bottom:3px;
}

h1 a > * { vertical-align: middle; }
h1 a > img:first-child { padding: 0 18px 0 12px; }

.sitename {
    position: relative;
    display: inline-block;
    height: 70px; /* Pourquoi la hauteur ne se postionne pas correctement par défaut ? - mystère */
}
h1 a .hover { z-index: -1; position: absolute; left:0; }
h1 a:hover .hover { z-index: 1; }

.links .sfw_status:not(:hover) {
    color:inherit
}

.totozes p:first-child, .about {
    font-size: 13px;
}

.sfw_status .hover {
    display: none;
}

.sfw_status .nohover {
}

.sfw_status:hover .hover, .sfw_status:active .hover  {
    display: initial;
}

.sfw_status:hover .nohover, .sfw_status:active .nohover {
    display: none;
}

.sfw_status.nsfw .nohover {
    color: #cc0000;
    font-weight: bold;
}

.links > h1 > a {
    display: block;
    color:inherit;
    text-decoration: inherit;
}

.links > a {
    text-decoration: inherit;
}
.links a:hover { color: #f0f0f0; }

body#totoz #cnt {
    text-align: center;
}

#cnt {
    padding: 0px 12px;
    margin:24px 0;
}

#cnt > .info {text-align: center;}

#search {
    margin:24px 0;
    text-align: center;
}

#query {
    padding:3px;
    min-width:17em;
    width:30%;
    -webkit-appearance: none;
    border:1px solid #ccc;
}

.totoz_list {
    display: flex;
    flex-wrap: wrap;
}

.unique_totoz {
    display: inline-block;
}

.totoz_list .totoz {
    width:94px;
}

.unique_totoz .totoz {
    padding:8px 24px;
}

.totoz {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 2px;
    padding:2px 0 3px;
    overflow: hidden;
}
.totoz,form table {
    box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.1);
    background: #fff;
}

.match {background:#ffff00}
/*.match2 {background:#0f0}
.match3 {background:#0ff}*/

.totoz > * {
    padding: 3px;
    text-align: center;
}

.totoz .img {
    position:relative;
}

.totoz_list .totoz img {
    max-width: 90px;
}

.totoz .nsfw_img {
    width:67px;
    height:50px;
    line-height: 50px;
    border:1px solid red;
    color:red;
    background: #ffcccc;
}


.totoz > * {
    text-decoration: none;
}

.totoz .name {
    font-size: 12px;
}

.totoz .username {
    color: #777;
    font-size:11px;
}

.about {
    color: #777;
    text-align: center;
    margin:50px 0 12px;
}

/* Forms */
form table {
    margin: auto;
    padding: 1em 1em 1.5em;
}
form th,form td {
    text-align: left;
    padding:5px 8px;
}
form td.submit {
    text-align: center;
}

form table h2 { margin: 0;}

form .error, .info {
    padding:  7px 15px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
}

form .error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}


form.delete_tag {
    display: inline;
}
form.delete_tag input[type='submit'] {
    border:none;
    background:transparent;
    padding:0;
    cursor: pointer;
}

/* Per https://codepen.io/mallendeo/pen/eLIiG */

.tgl {
	display: none;
}

  
.tgl + .tgl-btn {
    outline: 0;
    display: inline-block;
    width: 2em;
    height: 1em;
    position: relative;
    cursor: pointer;
    user-select: none;
    vertical-align: text-bottom;
}

.tgl + .tgl-btn:after,
.tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}
    
.tgl + .tgl-btn:after {
    left: 50%;
}

.tgl + .tgl-btn:before {
    display: none;
}

.tgl:checked + .tgl-btn:after {
    left: 0;
}


/* theme */
.tgl + .tgl-btn {
    background: #9FD6AE;
    border-radius: 2em;
    padding: 2px;
    transition: all .2s ease;
}

.tgl + .tgl-btn:after {
    border-radius: 50%;
    background: #fff;
    transition: all .1s ease;
}

.tgl:checked + .tgl-btn {
    background: #ececec;
}

.hfrtoggle {display:inline-block; vertical-align:middle;}
.hfrtoggle span {color: #555;}

/* Mobile adaptations */

@media screen and (max-width: 640px) {
    body {-webkit-text-size-adjust: none;}

    form table, form tr, form td {
        display: block;
    }

    form table {
        width: fit-content;
    }

    input {
        font-size: 16px;
    }
  }