* { transition-duration: 0.5s; text-align: center; font-family: "Lucida Console", "Courier New", monospace; table-align: center; margin: auto; } *:focus { outline: none; webkit-outline: none; } body { background-color: black; color: white; text-shadow: 0px 0px 7px white; overflow: hidden; } html, body { min-height: 100%; height: 100%; } h1, h2 { display: inline; } .treeNode { height: 100px; width: 100px; border-radius: 50%; border-color: black; font-size: 40px; } .locked { background-color: #9c6e6e !important; cursor: not-allowed; } .can { cursor: pointer; } .can:hover { transform: scale(1.1, 1.1); text-shadow: 0px 0px 7px white; } .bought { background-color: #68a66b !important; cursor: default; } .back { position: absolute; top: 0px; left: 0px; background-color: black; border-color: black; color: white; font-size: 40px; cursor: pointer; } .back:hover { transform: scale(1.1, 1.1); text-shadow: 0px 0px 7px white; } .reset { height: 100px; width: 150px; border-radius: 50%; border-color: black; } .upg { height: 120px; width: 120px; border-radius: 25%; border-color: black; font-size: 10px; } .upgBig { height: 200px; width: 200px; border-radius: 25%; border-color: black; } .longUpg { height: 50px; width: 120px; border-radius: 50%; border-color: black; font-size: 10px; } .smallUpg { height: 40px; width: 40px; border-radius: 25%; border-color: black; } .p { background-color: #439ea3; color: black; } .p_txt { color: #439ea3; text-shadow: 0px 0px 10px #439ea3; } .b { background-color: #415a9e; color: black; } .b_txt { color: #415a9e; text-shadow: 0px 0px 10px #415a9e; } .g { background-color: #409c6e; color: black; } .g_txt { color: #409c6e; text-shadow: 0px 0px 10px #409c6e; } .e { background-color: #9643a3; color: black; } .e_txt { color: #9643a3; text-shadow: 0px 0px 10px #9643a3; } .t { background-color: #3f993d; color: black; } .t_txt { color: #3f993d; text-shadow: 0px 0px 10px #3f993d; } .s { background-color: white; color: black; } .s_txt { color: white; text-shadow: 0px 0px 10px white; } #optionWheel { position: absolute; top: 0px; left: 0px; height: 40px; width: 40px; cursor: pointer; } #optionWheel:hover { transform: rotate(360deg); } #info { font-size: 20px; color: white; position: absolute; top: 0px; right: 0px; cursor: pointer; width: 40px; height: 40px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #02f2f2; } #info:hover { transform: scale(1.2, 1.2); text-shadow: 5px 0px 10px #02f2f2, -3px 0px 12px #02f2f2; } #cl { font-size: 20px; color: white; cursor: pointer; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #02f2f2; } #cl:hover { transform: scale(1.2, 1.2); text-shadow: 5px 0px 10px #02f2f2, -3px 0px 12px #02f2f2; } .opt { height: 100px; width: 100px; border-radius: 25%; border-color: black; background-color: #a1a1a1; color: black; cursor: pointer; } .opt:hover { background-color: #439ea3; } .hidden { visibility: hidden; height: 50px !important; } .canvas { top: 0; left: 0; position: absolute; z-index: -999; } .milestone { width: 100%; height: 75px; background-color: #9e6d64; } .milestoneDone { width: 100%; height: 75px; background-color: #68a66b; color: black; } .left { position: absolute; left: 0; } .remove { height: 24px; width: 24px; cursor: pointer; } .remove:hover { transform: scale(1.1, 1.1); } .col { min-width: 49.5%; max-width: 49.5%; width: 49.5%; height: 100%; min-height: 100%; column-span: 1; position: absolute; overflow-y: auto; overflow-x: hidden; } .col.right { top: 0; right: 0; } #app { column-count: 2; column-width: 50%; min-height: 100%; } .vl { border-left: 6px solid #969696; height: 100%; position: absolute; left: 50%; margin-left: -3px; top: 0; } ul { list-style-type: none; } [tooltip] { position: relative; z-index: 2; white-space: pre-wrap; } [tooltip]:before, [tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; white-space: pre-wrap; } [tooltip]:before { position: absolute; bottom: 100%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 5%, 0.9); color: #fff; content: attr(tooltip); text-align: center; font-size: 14px; line-height: 1.2; transition-duration: 0.5s; white-space: pre-wrap; } [tooltip]:after { position: absolute; bottom: 100%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 5%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; transition-duration: 0.5s; white-space: pre-wrap; } [tooltip]:hover:before, [tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; white-space: pre-wrap; }