|
|
body, html, div { padding: 0; margin: 0; color: #777; }
body, html { background-color: #555; background-size: cover; font-family: sans-serif;
height: 100%; width: 100%;
overflow: hidden; }
a { display: inline-block;
padding: 0.125em 0.25em;
background-color: rgba(64, 64, 64, 0.5); color: #ccc; text-decoration: none;
cursor: pointer; }
hr { border: 1px solid rgba(96, 96, 96, 0.5); }
div.ngn4-panel { background-color: rgba(0, 0, 0, 0.75); }
div.ngn4-menu { position: absolute; left: 0; right: 0;
overflow-y: visible; }
div.ngn4-menu h1 { margin: 0; padding: 0.25em 0.5em; display: inline-block; font-size: 1em; }
div.ngn4-geninfo { padding: 0.5em; position: absolute; left: 15%; right: 15%; top: 4em; min-height: calc(100% - 7em);
text-align: center;
overflow-x: hidden; overflow-y: auto; }
div.ngn4-geninfo#loading-screen { overflow-y: hidden; }
div.ngn4-geninfo a { margin: 0.25em;
border: 1px solid #000; }
div.ngn4-geninfo a.selected { background-color: rgba(192, 128, 32, 0.125); color: #fff;
border: 1px solid #c82; }
div.ngn4-footer { position: absolute; bottom: 0; left: 0; right: 0;
background-color: rgba(192, 128, 32, 0.8); color: #fff;
font-size: 1.5em; padding: 0.5em; }
div.ngn4-footer a { border: 1px solid #000; }
.vertical-center center { vertical-align: middle;
position: absolute; top: calc(50% - 0.5em); height: 100%; width: 100%;
font-size: 3em; }
#gi-name { padding-top: 2em; color: #aaa; font-size: 2em; }
#gi-race { color: #555; font-size: 0.9em; }
#gi-button { background-color: rgba(32, 32, 32, 0.9); color: #ccc; border: 1px solid #000;
font-size: 1.5em; margin: 0.5em; }
#gi-button:focus { border: 1px solid #c82; outline: 0; }
/* DROPDOWN FUNCTIONALITY */ #menu-items div.item { position: relative; display: inline-block;
margin: 0; padding: 0.25em 0.5em; background: none;
color: #ccc; text-decoration: none;
cursor: pointer; }
#menu-items div.item div { display: none; position: absolute; top: 1.65em; margin-left: -0.5em; min-width: 12ch; z-index: 10; background: none; margin-top: -1px;
}
#menu-items div.item:hover { background-color: rgba(192, 128, 32, 0.5); color: #fff; }
#menu-items div.item:hover div { display: block; }
#menu-items div.item div a { padding: 0.25em; margin: 0; background-color: rgba(0, 0, 0, 0.75); display: block; }
#menu-items div.item div a:hover { background-color: rgba(192, 128, 32, 0.75); color: #fff; }
@media screen and (max-width: 980px) { body { font-size: 1em; }
div.ngn4-geninfo { position: absolute; left: 0.5em; right: 0.5em; top: 3em; height: calc(100% - 4.5em);
overflow-y: auto; }
div.ngn4-menu { overflow-y: visible; white-space: nowrap; }
div.ngn4-menu .item, div.ngn4-menu h1 { font-size: 1.5em; }
div.ngn4-footer { font-size: 0.75em; left: 0; right: 0; top: 0; bottom: 0;
overflow-y: auto; }
div.ngn4-footer a { padding: 1em; }
#gi-name { padding-top: 0.25em; }
#gi-button { padding: 0.5em; } }
.noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ user-select: none; /* non-prefixed version, currently not supported by any browser */ }
|