body { background-color: #000; } #font { font: normal 16px/1 "Lucida Console", Monaco; color: rgba(255,255,255,1); display: inline; float: left; } #tableEditor { position: absolute; width: 800px; left: 20px; top: 20px; padding: 5px; border: 1px solid #000; background: #fff; } table { width: 900px; } th, td { padding: .5em 1em; text-align: right; } thead th { white-space: nowrap; border-bottom: 1px solid #ccc; color: #888; } th:first-child, td:first-child { text-align: left; } tr:nth-child(even) { background: #ccc; color: blck; } tr:nth-child(odd) { background: #eee; color: black; } tbody th, td { border-bottom: 1px solid #e6e6e6; } .enhanced th, .enhanced td { display: none; } .enhanced th.essential, .enhanced td.essential { display: table-cell; } @media screen and (min-width: 500px) { .enhanced th.optional, .enhanced td.optional { display: table-cell; } } @media screen and (min-width: 800px) { .enhanced th, .enhanced td { display: table-cell; } } .table-menu-wrapper { position: absolute; top: -3em; right: 0; } .table-menu { position: absolute; right: 0; left: auto; background-color: #fff; padding: 10px; border: 1px solid #ccc; font-size: 1.2em; width: 12em; } .table-menu-hidden { left: -999em; right: auto; } .table-wrapper { position: relative; margin: 5em 5%; } table.stat th, table.stat td { width: 900px; font-size : 77%; font-family : "Myriad Web",Verdana,Helvetica,Arial,sans-serif; } .hidden { display: none } form { width:100%; display: inline-block; text-align: center; margin:0px auto; background-color: grey; border:0px solid #dbdbdb; } .search { padding:8px 15px; background:rgba(50, 50, 50, 0.2); border:0px solid #dbdbdb; } .button { position:relative; padding:6px 15px; left:-8px; border:2px solid #207cca; background-color:#207cca; color:#fafafa; } .button:hover { background-color:#fafafa; color:#207cca; }