table { background-color: #323232; border: 0px; color: #b8b8b8; font-family: sans-serif; width: 100%; table-layout: fixed; margin-bottom: 30px; } th { font-size: 12px; font-weight: normal; padding: 0px 4px; background-color: #2d2c2d; border: #545454 1px solid; border-right: none; } th.no-border { border-left: none; border-right: none; padding: 0px; } td { padding: -1px; height: 25px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } td img { padding-top: 2px; } tr:nth-child(even) { background: #323232; } tr:nth-child(odd) { background: #2c2c2c; } tr:nth-child(even).q-red { background: linear-gradient(to top, #2c2c2c, #4c3130 1px); } tr:nth-child(odd).q-red { background: linear-gradient(to top, #323232, #513635 1px); } .q-red td:first-of-type { padding-left: 5px; border-left: 5px #ff4242 solid; } tr:nth-child(even).q-orange { background: linear-gradient(to top, #2c2c2c, #4b3e2a 1px); } tr:nth-child(odd).q-orange { background: linear-gradient(to top, #323232, #514330 1px); } .q-orange td:first-of-type { padding-left: 5px; border-left: 5px #ffa500 solid; } tr:nth-child(even).q-green { background: linear-gradient(to top, #2c2c2c, #2d452d 1px); } tr:nth-child(odd).q-green { background: linear-gradient(to top, #323232, #324b33 1px); } .q-green td:first-of-type { padding-left: 5px; border-left: 5px #01d52f solid; } tr:nth-child(even).q-blue { background: linear-gradient(to top, #2c2c2c, #323647 1px); } tr:nth-child(odd).q-blue { background: linear-gradient(to top, #323232, #363b4b 1px); } .q-blue td:first-of-type { padding-left: 5px; border-left: 5px #536de0 solid; } tr:nth-child(even).q-purple { background: linear-gradient(to top, #2c2c2c, #39273d 1px); } tr:nth-child(odd).q-purple { background: linear-gradient(to top, #323232, #433147 1px); } .q-purple td:first-of-type { padding-left: 5px; border-left: 5px #a601c0 solid; } tr.q-armed-false td { background: url('img/disarmed-pattern-light.png'); background-attachment: fixed; } tr.playback-position { background-image: none !important; background: #1557da !important; color: white !important; } tr.playback-position .q-gray-text { color: white !important; } .gLeft { height: 24px; width: 12px; border-left: 2px solid; } .gTop { border-top: 2px solid; } .gBot { border-bottom: 2px solid; } .gRight { border-right: 2px solid; } .gMode-1.gLeft.gTop { border-radius: 6px 0px 0px 0px; } .gMode-1.gLeft.gBot { border-radius: 0px 0px 0px 6px; } .gMode-1.gRight.gBot { border-radius: 0px 0px 6px 0px; } .gMode-1.gLeft.gTop.gBot { border-radius: 6px 0px 0px 6px; } .gMode-1.gLeft.gTop.gRight { border-radius: 6px 6px 0px 0px; } .gMode-1.gTop.gRight.gBot { border-radius: 0px 6px 6px 0px; } .gMode-1.gLeft.gTop.gRight.gBot { border-radius: 6px; } .gMode-1 { border-color: #5a5a87; } .gMode-2 { border-color: #5a5a87; } .gMode-3 { border-color: #429242; } .gMode-4 { border-color: #925fc0; } .gMode-4 { border-color: #925fc0; } .gMode-6 { border-color: #D05B15; } .gMode-, .gMode-0 { border-color: rgba(0, 0, 0, 0); } .group-arrow { width: 13px; background-image: url('img/new_group_arrow.png'); background-position: center; background-repeat: no-repeat; } .q-time { font-size: 14px; text-align: center; } .q-gray-text { color: #424242; } .q-time-elapsed { margin: 0px 2px; outline: #49c042 1px solid; line-height: 18px; } .cart { position: relative; height: 600px; width: 100%; background-color: #2c2b2a; } .cartCueWrapper { display: block; position: absolute; box-sizing: border-box; padding: 3px; } .cartCue { height: 100%; box-sizing: border-box; border: 3px solid; border-radius: 6px; color: white; } .cartCue p { margin: 10px; } .cartCueIcon { position: absolute; right: 13px; top: 13px; } .cartColor-red { border-color: #ff4242; background-color: #9b3726; } .cartColor-orange { border-color: #ffa500; background-color: #ad6026; } .cartColor-green { border-color: #01d52f; background-color: #397f27; } .cartColor-blue { border-color: #536de0; background-color: #304893; } .cartColor-purple { border-color: #a601c0; background-color: #592d74; } .cartColor-none { border-color: #95929f; background-color: #3b3b3b; } .cartBlank { border-color: #1f1f1f; background-color: #1f1f1f; } .cartCueWrapper.playback-position .cartCue { border-color: #88b3db; outline: #88b3db 1px solid; box-shadow: 0px 0px 3px 3px #88b3db, inset 0px 0px 5px #88b3db; } @media screen and (min-width: 0px) and (max-width: 750px) { .hide-medium { display: none; } } @media screen and (min-width: 0px) and (max-width: 550px) { .hide-small { display: none; } }