::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-thumb {
border: 4px solid transparent;
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
box-shadow: 0 0 0 1px white inset;
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
border-radius: 8px;
width: 16px;
height: 16px;
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner, ::-webkit-resizer {
background: black;
}
::-webkit-scrollbar-thumb:vertical {
border-top-width: 6px;
border-bottom-width: 6px;
box-shadow: -1px 0 0 0 white inset, 1px 0 0 0 white inset, 0 0 0 2px black inset, 0 0 0 6px white inset;
}
::-webkit-scrollbar-thumb:horizontal {
border-left-width: 6px;
border-right-width: 6px;
box-shadow: 0 -1px 0 0 white inset, 0 1px 0 0 white inset, 0 0 0 2px black inset, 0 0 0 6px white inset;
}* {
box-sizing: border-box;
text-align: center;
font-family: sans-serif;
}
html, body {
padding: 0;
margin: 0;
}
body {
display:flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
align-content: space-around;
}
h1 {
font-size: 20px;
margin: 0;
}
h1 a {
color: inherit;
}
.month {
background: white;
max-width: 498px;
border: 2px inset black;
border-radius: 4px;
min-width: 100%;
width: 100%;
margin: 0;
}
html, body {
background: black;
}
.month {
margin: 2px;
min-width: 334px;
padding: 0 1px;
}
@media (min-width: 668px) and (max-width: 1002px) {
.month {
width: calc(100% / 2);
}
}
@media (min-width: 1002px) {
.month {
width: calc(100% / 3);
}
}
.month-data {
flex-flow: row wrap;
display: flex;
justify-content: center;
align-items: flex-start;
align-content: space-around;
width: 100%;
}
.flag-group {
flex-flow: column no-wrap;
background: darkgrey;
border-radius: 8px;
border: 2px outset dimgrey;
width: calc((100% / 4) - 2px);
margin: 1px;
max-width: 80px;
justify-content: center;
align-items: center;
align-content: space-around;
font-size: 80%;
}
@media (min-width: 334px) and (max-width: 498px) {
.flag-group {
width: calc((100% / 6) - 3px);
}
}
.flag-group:nth-child(1) {
background: #c9b037;
border-color: #af9500;
}
.flag-group:nth-child(2) {
background: #d7d7d7;
border-color: #b4b4b4;
}
.flag-group:nth-child(3) {
background: #ad8a56;
border-color: #6a3805;
}
.flag-group > * {
display: inline-block;
max-width: 100%;
}
.bg {
display:block;
}
img.flag {
height: 24px;
border-radius: 8px;
border: 2px outset silver;
margin: 0 auto -1px;
}
.head-flag {
font-size: 14px;
margin: -2px;
}
img.head-flag {
display: inline-block;
max-height: 1em;
border-radius: 8px;
border: 1px inset silver;
}
.nline {
display: none;
}
.flag-group {
background-image: none!important;
}
@media (max-device-width: 900px) {
.big {
display: none;
}
}
#kd {
text-align: center;
background: black;
color: white;
border: 1px solid white;
border-radius: 1em;
width: 80%;
margin: 0 auto;
}
#kd:after {
background: black url("http://klingondragon.dynu.com/img/icon.png") no-repeat right top fixed;
content: ' ';
display: block!important;
border-radius: 100%;
position: fixed;
top: 0;
right: 0;
height: 50px;
width: 50px;
}