body { position: relative; margin: 0px; font-size: 15px; color: #333; line-height: 1.3; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .status { float: right; background: #009ee0; color: white; width: 50px; height: 50px; } .status.connecting,.status.running { background: #ffb400; } .status.offline, .status.failed { background: #dc0067; color: white; } span.online { color: #009ee0; } span.offline { color: #dc0067; } h1 { border-bottom: 4px solid #dc0067; } header { width: 100%; height: 50px; } header > div { display: inline-block; } nav { background-color: #373636; position: fixed; display: inline-block; font-weight: 700; width: 100%; height: 50px; } nav ul { padding: 0; margin: 0; list-style-type: none; } nav li { float:left; display: inline-block; } nav li:hover, nav.active { background: rgba(255, 255, 255, 0.2); } nav li a, nav li span { display: inline-block; cursor: pointer; text-decoration: none !important; text-align: center; text-transform: uppercase; color: inherit; box-sizing: border-box; padding: 1.1em .5em; height: 50px; } nav > ul > .item-1 { background: #ffb400; color: #000; } nav > ul > .item-2 { background: #dc0067; color: #fff; } nav > ul > .item-3 { background: #ccc; color: #000; } .notifications { position: absolute; right: 1em; } .notify { position: relative; min-height: 1em; margin: 1em 0; padding: 1em 1.5em; color: rgba(0,0,0,.87); -webkit-transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease; transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease; box-shadow: 0 0 0 1px rgba(34,36,38,.22) inset, 0 0 0 0 transparent; background: #ccc; color: #000; } .notify.success { background: #009ee0; color: #fff; } .notify.warn { background: #ffb400; color: #000; } .notify.error { background: #dc0067; color: #fff; } thead { font-size: 1.3em; font-weight: bold; cursor: default; } thead tr th{ border-bottom: 4px solid #dc0067; } table th > input { border: none; color: #000; font-weight: bold; background: #fff; } table th.sortable.sort-down:after { content: " \25BC" } table th.sortable.sort-up:after { content: " \25B2" } table th.sortable:not(.sort-down):not(.sort-up):after { content: " \25B4\25BE"; } table.nodes, table.stats { width: 100%; } table.nodes td > span{ display: block; } table.nodes tbody tr:nth-child(even) { background: #eee; } table.nodes tbody tr:nth-child(odd) { background: #fff; } table.nodes tbody tr:hover { background: #ccc; } table.nodes tbody tr.offline, table.nodes tbody tr.offline:hover{ background: #dc0067; } table.nodes tbody tr.unseen{ background: #009ee0; } table tr.line td,table tr.line th { border-bottom: 1px solid #ffb400; } table.stats td { text-align: center; } .btn { display: inline-block; padding: .3em .5em; border-radius: 1em; color: #fff; background-color: #dc0067; text-align: center; cursor: pointer; } .btn:hover { background: lighten(#dc0067, 5%); } a.btn:hover { text-decoration: none; } a { color: #dc0067; text-decoration: none; } input[readonly] { border: none; background: none; padding: 0px; font-size: 15px; color: #333; line-height: 1.3; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }