body { margin: 0; background: #0D132C; font-family: sans, sans-serif; font-size: 16px; } a { color: #000000; } input[type=submit], .submit { cursor: pointer; padding: 8px 12px; background: #68C00A; background: linear-gradient(0deg, #305805 0%, #437C07 8%, #68C00A 92%, #8ED047 100%); border: 0; border-radius: 4px; box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.25); font-size: 14px; font-weight: bold; text-decoration: none; color: #FFFFFF; } input[type=text], input[type=password] { border-width: 1px; border-style: inset outset outset inset; } nav { z-index: 10; height: 44px; background: #68C00A; background: linear-gradient(0deg, #305805 0%, #437C07 8%, #68C00A 92%, #8ED047 100%); font-size: 20px; color: rgba(255, 255, 255, 0.5); } nav .links { padding: 10px 0 10px 10px; } nav .links a { color: #EEEEEE; text-decoration: none; } nav .links a:hover { opacity: 0.5; } nav .links .icon { float: right; margin: -4px 2px; width: 32px; height: 32px; background-image: url('../img/iconsNav.svg'); } nav .links .iconSearch { cursor: pointer; background-position: 64px 0; } nav .links .iconMedal { margin-right: 2px; background-position: 0 0; } nav .links .iconProfile { float: right; margin: -4px 2px; width: 32px; height: 32px; cursor: pointer; } nav .links .iconProfile img { width: 32px; height: 32px; border-radius: 16px; } nav .links .medalsBox { float: right; } nav .popup { display: none; z-index: 20; position: absolute; top: 45px; } nav .popup .tip { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid rgba(255, 255, 255, 0.9); } nav .popup .block { padding: 10px; background: rgba(255, 255, 255, 0.9); font-size: 14px; color: #000000; } nav .popupSearch { right: 26px; width: 180px; } nav .popupSearch .tip { margin-left: 136px; } nav .popupSearch .block { width: 160px; } nav .popupSearch .button { float: right; cursor: pointer; width: 28px; height: 28px; background-image: url('../img/iconsNav.svg'); background-size: 84px 28px; background-position: 28px 0; } nav .popupSearch .textbox { margin: 0; padding: 2px 5px; width: 112px; height: 24px; border: 0; background: rgba(255, 255, 255, 0.5); box-shadow: inset 1px 1px 2px #000000; font-size: 14px; } nav .popupSearch .textbox:focus { outline: none; background: #777777; color: #FFFFFF; } nav .popupSearch .textbox:focus::placeholder { color: #DDDDDD; } nav .popupSearch .textbox::placeholder { color: #777777; } nav .popupUser { right: -10px; width: 180px; } nav .popupUser .tip { margin-left: 136px; } nav .popupUser .block { width: 160px; } nav .popupUser .block input[type=text], nav .popupUser .block input[type=password] { margin: 0; padding: 2px 5px; width: 112px; height: 24px; border: 0; background: rgba(255, 255, 255, 0.5); box-shadow: inset 1px 1px 2px #000000; font-size: 14px; } .linksSmall { padding: 5px; font-size: 20px; background: #173503; color: rgba(255, 255, 255, 0.5); } .linksSmall a { color: #EEEEEE; text-decoration: none; } header { position: relative; padding: 10px; background: linear-gradient(0deg, #000000 0%, #0D132C 100%); color: #FFFFFF; } section { padding: 10px 0; background: #BFBFBF; } section .adminFlex { display: flex; } section .adminHead { flex: 0 0 160px; margin-right: 10px; } section .block { margin: 10px 0; padding: 10px; width: calc(100% - 20px); background: #EEEEEE; border-radius: 5px; border-right: 2px solid rgba(0, 0, 0, 0.25); border-bottom: 2px solid rgba(0, 0, 0, 0.25); } section .block ul { margin: 0; padding: 0 0 0 20px; } section .block .list { display: flex; align-items: stretch; } section .block .listActive { background: #FFFF76; } section .block .listHead { padding: 5px; color: #0D132C; font-weight: bold; } section .block .listBody { padding: 5px; border-top: 1px solid #0D132C; } section .block .list .itemTiny { flex: 0 0 30px; margin-right: 10px; text-align: right; } section .block .list .itemLeft { flex: 2 1 0px; text-align: left; } section .block .list .itemRight { flex: 1 1 0px; text-align: right; } section .block table { margin: 0; padding: 0; width: 100%; } section .block table tr th { padding: 5px; width: 25%; text-align: right; font-weight: bold; white-space: nowrap; } section .block table tr td { padding: 5px; width: 75%; text-align: left; } section .block table tr td textarea { width: 400px; height: 90px; text-align: left; font-family: sans, sans-serif; } section .block h1, section .block h2, section .gameDescription h1, section .gameMedals h1, section .gameMedals h2 { margin: -7px -7px 7px -7px; padding: 7px; background: #0D132C; border-top-left-radius: 4px; border-top-right-radius: 4px; color: #EEEEEE; font-size: 16px; font-weight: bold; } section .block h1 a, section .block h2 a { color: #FFFFFF; } section .breadcrumbs { margin: 0 -2px 18px 0; padding: 10px; background: #EEEEEE; border-radius: 5px; border-right: 2px solid rgba(0, 0, 0, 0.25); border-bottom: 2px solid rgba(0, 0, 0, 0.25); } section .breadcrumbs .right { float: right; } section .breadcrumbs .right select { float: right; margin: -2px 0 0 10px; padding: 2px 5px; border: 0; background: rgba(255, 255, 255, 0.5); box-shadow: inset 1px 1px 2px #000000; font-size: 14px; } section .medals { display: flex; flex-wrap: wrap; } section .medals .medal { position: relative; flex-grow: 1; margin: 10px 10px 0 10px; width: 85px; height: 105px; font-size: 12px; } section .medals .medalLocked { opacity: 0.5; } section .medals .medalLocked:hover { opacity: 1; } section .medals .medal:hover .medalTooltip { display: block; } section .medals .medal:hover .medalImg { z-index: 2; margin: -10px -5px -15px -5px; width: 95px; height: 95px; } section .medals .medal .medalIcon { z-index: 1; position: absolute; margin: 0 0 0 65px; width: 20px; height: 25px; } section .medals .medal .medalTitle { margin: 0 -5px; width: 95px; font-weight: bold; text-align: center; } section .medals .medal .medalTooltip { display: none; z-index: 2; position: absolute; margin: 5px -37px 0 -38px; width: 160px; color: #FFFFFF; text-align: left; } section .medals .medal .medalTooltip a { color: #FFFFFF; font-weight: bold; } section .medals .medal .medalTooltip .tip { margin: 0 0 -10px 70px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(25, 25, 25, 0.9); } section .medals .medal .medalTooltip .block { padding: 10px; width: 140px; border-radius: 0; background: rgba(25, 25, 25, 0.9); font-size: 13px; } section .medals .medal .medalImg { position: relative; margin: 5px 10px 0 10px; width: 65px; height: 65px; transition: margin 0.1s, width 0.1s, height 0.1s; } section .messageError { margin: 0 -2px 18px 0; padding: 10px; background: #FFB3BB; border-radius: 5px; border-right: 2px solid rgba(0, 0, 0, 0.25); border-bottom: 2px solid rgba(0, 0, 0, 0.25); } section .messageNotification { margin: 0 -2px 18px 0; padding: 10px; background: #D5FFA8; border-radius: 5px; border-right: 2px solid rgba(0, 0, 0, 0.25); border-bottom: 2px solid rgba(0, 0, 0, 0.25); } section .messageError li, section .messageNotification li { margin-left: 20px; } section .thumbs .thumbsItem .title { margin: 3px 3px 0 3px; padding: 7px; background: #0D132C; border-top-left-radius: 4px; border-top-right-radius: 4px; color: #EEEEEE; font-weight: bold; } section .thumbs .thumbsItem .title a { font-weight: bold; color: #FFFFFF; } section .thumbs .thumbsItem img { margin: 3px; padding: 0; width: calc(100% - 6px); aspect-ratio: 294 / 180; vertical-align: middle; } section .thumbs .thumbsItem .foot { padding: 5px 10px 7px 10px; font-size: 15px; } section .thumbs .thumbsPage { float: left; margin: 3px; padding: 7px; border-radius: 4px; } section .thumbs .thumbsMore { display: block; margin: 3px 10px 3px 0; padding: 7px; border-radius: 4px; background: #EEEEEE; font-weight: bold; text-align: center; } section .thumbs .thumbsPageHead { background: #EEEEEE; } section .thumbs .thumbsPageActive { background: #FFFFFF; font-weight: bold; } section .thumbs .thumbsPageInactive { background: #EEEEEE; font-weight: bold; } footer { background: linear-gradient(0deg, #0D132C 0%, #000000 100%); color: #FFFFFF; font-size: 14px; } footer .footerBar { padding: 10px; text-align: left; } footer .footerFlex { display: flex; } footer .footerFlex .footerLeft { padding: 10px; flex: 1 } footer .footerFlex .footerRight { padding: 10px; flex: 0 0 100px; text-align: right; } footer .footerFlex .footerRight .icon { float: right; margin-left: 20px; width: 24px; height: 24px; opacity: 0.5; } footer .footerFlex .footerRight .icon:hover { opacity: 1; } footer a { color: #FFFFFF; } .adslot_mid { margin: 10px 0 20px 0; width: 100%; max-height: 250px; text-align: center; } .adslot_top { margin: 20px -10px; width: calc(100% + 20px); height: 90px; } @media screen { .container { position: relative; margin: 0 10px; min-width: 300px; } nav .links .linksLarge { display: none; } nav .logo { float: left; position: relative; z-index: 5; margin: -3px 5px 0 -10px; width: 90px; height: 50px; } .linksSmall { display: block; } section .block .list .itemRank1 { font-size: 24px; } section .block .list .itemRank1 img { margin: 0 8px -4px 0; width: 24px; height: 24px; } section .block .list .itemRank2 { font-size: 18px; } section .block .list .itemRank2 img { margin: 0 6px -3px 0; width: 18px; height: 18px; } section .thumbs { margin-right: -10px; display: flex; flex-wrap: wrap; } section .thumbs .thumbsItem { flex-grow: 1; margin: 0 8px 8px 0; width: 300px; background: #EEEEEE; border-radius: 5px; border-right: 2px solid rgba(0, 0, 0, 0.25); border-bottom: 2px solid rgba(0, 0, 0, 0.25); } section .thumbs .thumbsItemListThree2 { display: none; } section .thumbs .thumbsItemListThree3 { display: none; } section .thumbs .thumbsMore { flex-grow: 1; } } @media screen and (min-width: 630px) { .container { margin: 0 auto; width: 610px; } nav .links .linksLarge { display: inline; } nav .logo { margin: 12px 10px 0 0; width: 180px; height: 100px; } .linksSmall { display: none; } section .block .list .itemRank1 { font-size: 36px; } section .block .list .itemRank1 img { margin: 0 12px -6px 0; width: 36px; height: 36px; } section .block .list .itemRank2 { font-size: 24px; } section .block .list .itemRank2 img { margin: 0 8px -4px 0; width: 24px; height: 24px; } section .thumbs { display: block; } section .thumbs .thumbsItem { float: left; flex-grow: 0; height: 250px; } section .thumbs .thumbsMore { flex-grow: 0; } .adslot_mid { height: 90px; } .adslot_top { float: left; margin: 10px 0; width: 415px; height: 60px; } } @media screen and (min-width: 940px) { .container { width: 920px; } section .block .list .itemRank1 { font-size: 48px; } section .block .list .itemRank1 img { margin: 0 16px -8px 0; width: 48px; height: 48px; } section .block .list .itemRank2 { font-size: 36px; } section .block .list .itemRank2 img { margin: 0 12px -6px 0; width: 36px; height: 36px; } nav .logo { margin: 14px 10px 0 0; width: 234px; height: 130px; } section .thumbs .thumbsItemListThree2 { display: block; } .adslot_top { width: 671px; height: 90px; } } @media screen and (min-width: 1250px) { .container { width: 1230px; } section .thumbs .thumbsItemListThree3 { display: block; } .adslot_top { width: 986px; } }