* { margin: 0; padding: 0; box-sizing: border-box; position: relative; outline-style: none !important; } html, body { width: 100%; height: 100%; } body { font: 12px/20px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; background-color: #f8f8f8; } .hidden, [hidden] { display: none !important; visibility: hidden !important; } .error { background: #922; color: #fff; font-size: 1.2em; line-height: 1.5em; padding: 5px 10px; border-radius: 5px; background-image: linear-gradient(0deg, #922, #f22); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); box-shadow: 0 1px 2px #000; } .noscript { margin: 5px; } .wrapper { max-width: 1000px; margin: 0 auto; background-color: #fff; box-shadow: 0 1px 4px #000; } .maintenance { background: #c00; color: #fff; font-size: .9em; padding: 5px 10px; } @media(min-width: 1000px) { body { padding-top: 1px; } .wrapper { margin: 3px auto 10px; } } .footer { font-size: 10px; padding: 0 5px; text-align: right; color: #888; } .footer a { color: inherit; text-decoration: none; } .footer a:hover, .footer a:focus, .footer a:active { color: #222; text-decoration: underline; } .header {} .header-title { padding-top: 10%; background: url('ytkns.png') center / cover; display: block; } .header-usermenu { border: 1px solid #000; background: linear-gradient(180deg, #545454 0%, #1a1a1a 50%, #000 50%) #545454; } .header-navigation { border: 1px solid #000; background: linear-gradient(180deg, #5a5a5a 0%, #272727 50%, #111 50%) #5a5a5a; font-size: 1.4em; line-height: 1.5em; } .header-navigation-item, .header-usermenu-item { color: #fff; text-decoration: none; padding: 2px 10px; display: inline-block; transition: background-color .1s; } .header-navigation-item:hover, .header-navigation-item:active, .header-usermenu-item:hover, .header-usermenu-item:active { background-color: rgba(255, 255, 255, .1); } .header-navigation-item:active, .header-usermenu-item:active { background-color: rgba(0, 0, 0, .5); } .content { display: block; padding: 1px; } .information { margin: 5px; display: block; border: 1px solid #000; padding: 2px 5px; border-radius: 5px; } .information-title { border: 1px solid #000; border-radius: 10px; padding: 0 8px; } .page-title { padding: 8px 5px; } .page-subtitle { padding: 2px 5px; } .page-paragraph { margin: 1px 5px; } .zone-creation-form { margin: 10px auto; max-width: 400px; width: 100%; } .zone-creation-input { display: flex; margin: 5px 0; } .zone-creation-label { min-width: 100px; } .zone-creation-wrap { border: 1px solid #000; min-width: 300px; height: 22px; display: flex; padding: 0 2px; background-color: #eee; color: #444; } .zone-creation-value { border-width: 0; flex-grow: 1; font: 12px/20px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; background-color: #eee; color: #000; } .zone-creation-actions { text-align: center; } .zone-creation-action { border: 1px solid #707070; border-radius: 2px; background: linear-gradient(180deg, #fcfcfc 0%, #ebebeb 50%, #dbdbdb 50%) #ebebeb; cursor: pointer; padding: 2px 10px; margin: 1px; font: 20px/25px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; display: inline-block; color: #000; text-decoration: none; transition: border-color .2s; } .zone-creation-action:hover, .zone-creation-action:focus { border-color: #3c7fb1; } .zone-creation-action:active { background: linear-gradient(0deg, #fcfcfc 0%, #ebebeb 50%, #dbdbdb 50%) #ebebeb; } .zone-creation-paragraph { text-align: center; padding: 5px 10px; font-size: 1.2em; line-height: 1.5em; } .loading-editor { max-width: 400px; margin: 10px auto; display: flex; justify-content: center; align-items: center; } .loading-editor-image { width: 32px; height: 32px; background-image: url('spinner.gif'); flex: 0 0 auto; } .loading-editor-text { font-size: 1.5em; line-height: 1.5em; padding: 0 10px; } .auth { display: flex; flex-direction: column; max-width: 300px; width: 100%; margin: 0 auto; } .auth-field { margin: 5px 0; } .auth-field-label { font-size: 1.2em; line-height: 1.5em; padding: 2px 5px; } .auth-field-value { display: flex; } .auth-field-value-input { width: 100%; padding: 2px; border: 1px solid #aaa; } .auth-field-value-input:focus { border-color: #f78f2e; } .auth-option { font-size: .9em; line-height: 1.5em; padding: 5px 0; display: flex; justify-content: center; align-items: center; } .auth-option-input { margin: 0 5px; } .auth-buttons { display: flex; justify-content: center; align-items: center; margin: 5px 0; } .auth-fid .auth-buttons { flex-direction: column; } .auth-buttons-button { padding: 2px 5px; min-width: 75px; cursor: pointer; } .auth-fid .auth-buttons-button { width: 100%; border: 1px solid #707070; border-radius: 2px; background-image: linear-gradient(180deg, #fcfcfc 0%, #ebebeb 50%, #dbdbdb 50%); background-color: #ebebeb; cursor: pointer; padding: 2px 10px; margin: 1px; font: 12px/20px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; display: inline-block; color: #000; text-decoration: none; transition: border-color .2s; } .auth-fid .auth-buttons-button:hover, .auth-fid .auth-buttons-button:focus { border-color: #3c7fb1; } .auth-fid .auth-buttons-button:active { background-image: linear-gradient(0deg, #fcfcfc 0%, #ebebeb 50%, #dbdbdb 50%); } .auth-fid .auth-buttons-button-fid { font-size: 16px; line-height: 30px; background-image: linear-gradient(180deg, #9475b2 0%, #9475b2 50%, #8559a5 50%); color: #fff; } .auth-fid .auth-buttons-button-fid:hover, .auth-fid .auth-buttons-button-fid:focus { border-color: #9475b2; } .auth-fid .auth-buttons-button-fid:active { background-image: linear-gradient(0deg, #9475b2 0%, #9475b2 50%, #8559a5 50%); } .invites {} .invites .error { margin: 5px; } .invites-create { display: flex; justify-content: center; margin: 5px; } .invites-create-button { padding: 2px 10px; min-width: 75px; cursor: pointer; font-size: 1.2em; line-height: 1.5em; } .invites-list { display: flex; flex-direction: column; max-width: 900px; width: 100%; margin: 10px auto; } .invites-list-item { display: flex; margin-top: 1px; padding-bottom: 1px; flex-wrap: wrap; } .invites-list-item:not(:last-child) { border-bottom: 1px solid #000; } .invites-list-item:nth-child(even) { background-color: #f0f0f0; } .invites-list-item-created, .invites-list-item-used, .invites-list-item-user { max-width: 200px; width: 100%; } .invites-list-item-token { max-width: 300px; width: 100%; } .invites-list-item-token code { display: block; color: #000; background: #000; font-size: 1.1em; text-align: center; border-radius: 10px; padding: 0 10px; cursor: pointer; transition: background .5s; } .invites-list-item-token code:hover, .invites-list-item-token code:focus { color: #fff; } .invites-list-item-token code:active { background: #fff; transition: background .1s; } .nozone { text-align: center; } .nozone h1 { margin: 20px; } .nozone p { font-size: 1.2em; margin: 10px; } .nozone a { color: #000; transition: text-shadow .2s, color .2s; } .nozone a:hover, .nozone a:focus { text-decoration: none; color: #22f; text-shadow: 0 0 10px #22f; } .nozone a:active { color: #f22; text-shadow: 0 0 10px #f22; } .my-zones-list { display: flex; flex-direction: column; } .my-zones-list-item { display: flex; align-items: center; padding: 5px; margin: 0 5px; background-color: #fff; } .my-zones-list-item:not(:first-child) { border-top: 1px solid #000; } .my-zones-list-item-info { display: flex; flex-direction: column; flex: 1 1 auto; word-wrap: normal; word-break: break-word; } .my-zones-list-item-info-name { font-size: 1.4em; line-height: 1.5em; } .my-zones-list-item-info-name a { color: #000; text-decoration: none; } .my-zones-list-item-info-name a:hover, .my-zones-list-item-info-name a:focus, .my-zones-list-item-info-name a:active { text-decoration: underline; } .my-zones-list-item-info-title { margin-right: 5px; } .my-zones-list-item-actions { display: flex; flex: 0 0 auto; } .my-zones-list-item-actions-action { margin: 1px; width: 24px; height: 24px; cursor: pointer; border-radius: 100%; background-size: 16px 16px; background-repeat: no-repeat; background-position: center center; background-image: url('page_white.png'); background-color: #fff; transition: background-color .2s; } .my-zones-list-item-actions-action:hover, .my-zones-list-item-actions-action:focus { background-color: #eee; } .my-zones-list-item-actions-action:active { background-color: #ddd; } .my-zones-list-item-actions-action--view { background-image: url('link.png'); } .my-zones-list-item-actions-action--edit { background-image: url('pencil.png'); } .my-zones-list-item-actions-action--delete { background-image: url('bin_closed.png'); background-position: 2px center; } .pagination { display: flex; justify-content: center; flex-wrap: wrap; } .pagination-page { flex: 0 0 auto; min-width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; color: #000; text-decoration: none; } .pagination-page:not(:first-child) { border-left: 1px solid #000; } .pagination-page-current { font-weight: 700; } .zones-sorts { display: flex; align-items: center; margin: 2px 5px; } .zones-sorts-sort { display: inline-flex; align-items: center; padding: 2px 5px; color: #000; text-decoration: none; } .zones-sorts-sort:hover, .zones-sorts-sort:focus { text-decoration: underline; } .zones-sorts-sort img { margin-left: 4px; } .zones-list { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .zones-list-item { display: flex; align-items: center; flex-direction: column; width: 240px; margin: 4px; color: #000; text-decoration: none; box-shadow: 0 1px 3px #888; background-color: #fff; } .zones-list-item a { color: #000; text-decoration: none; } .zones-list-item a:hover, .zones-list-item a:focus { text-decoration: underline; } .zones-list-item-screenshot { border: 1px solid #000; display: block; margin-top: 18px; } .zones-list-item-screenshot-image { width: 200px; height: 150px; display: inline-block; vertical-align: middle; } .zones-list-item-info { margin: 10px 5px; text-align: center; word-wrap: normal; word-break: break-word; } .zones-list-item-info-name { font-size: 1.4em; line-height: 1.2em; margin: 2px 0; } .zones-list-item-info-title { font-size: 1.1em; line-height: 1.2em; margin: 2px 0; } .zones-list-item-info-actions { display: flex; justify-content: center; align-items: center; flex: 0 0 auto; margin: 2px; } .zones-list-item-info-actions-action { margin: 1px; width: 24px; height: 24px; cursor: pointer; border-radius: 100%; background-size: 16px 16px; background-repeat: no-repeat; background-position: center center; background-image: url('page_white.png'); background-color: #fff; transition: background-color .2s; } .zones-list-item-info-actions-action:hover, .zones-list-item-info-actions-action:focus { background-color: #eee; } .zones-list-item-info-actions-action:active { background-color: #ddd; } .zones-list-item-info-actions-action--view { background-image: url('link.png'); } .zones-list-item-info-actions-action--edit { background-image: url('pencil.png'); } .zones-list-item-info-actions-action--delete { background-image: url('bin_closed.png'); background-position: 2px center; }