:root{ --darker-bg: #e0e0e8; --main-bg: #f8f8f8; --main-color: #333; --a-color: #44c; --titlebar-bg: #779; --titlebar-border-bottom: 4px solid rgba(0,0,0,0.2); --titlebar-color: #fff; --msg-active-bg: #fff; --msg-hover-bg: #fcfcfc; --box-bg: var(--darker-bg); --box-strong-color: var(--titlebar-bg); --button-bg: #f8f8f8; --button-bg-active: #e8e8f0; --button-border-active: #669; --button-border-hover: rgba(0,0,80,0.3); --button-color: #667; --button-close-bg: #fff; --button-close-color: #633; --footer-bg: #fff; --pre-bg: #e8ecec; --simglemail-bg: #f8f8f8; --simglemail-head-bg: #fff; --table-head-bg: var(--darker-bg); --table-link-color: #447; } body{ background-color: var(--main-bg); color: var (--main-color); font-family: Arial, Helvetica, sans-serif; font-size: 1.0m; margin: 0; } a{ color: var(--a-color); } a.button{ background: var(--button-bg); border: 2px solid rgba(0,0,0,0.05); border-radius: 0.3em; color: var(--button-color); text-decoration: none; padding: 0.4em; transition: all 0.1s linear; } a.button:hover{ border-color: var(--button-border-hover); box-shadow: none; } a.button.active{ background: var(--button-bg-active); border-top: 4px solid var(--button-border-active); } a.button.close{ background: var(--button-close-bg); color: var(--button-close-color); } footer{ background-color: var(--footer-bg); position: fixed; bottom: 0; text-align: center; width: 100%; padding: 1em; opacity: 0.6; } h1{ background: var(--titlebar-bg); margin: 0; padding-left: 0.5em; border-bottom: var(--titlebar-border-bottom); } h1 small{ opacity: 0.5; } h1 a{ color: var(--titlebar-color); text-decoration: none; } iframe{ border: 0; width: 100%; height: 70em; overflow: scroll; } pre{ background-color: var(--pre-bg); overflow: scroll; padding: 1em; border-radius: 1em; margin: 0 0 1em; } th{ background-color: var(--table-head-bg); padding: 0.5em; } th.date{ width: 10em; } td { padding: 0.0; } td a{ color: var(--table-link-color); text-decoration: none; } td a, td span{ display: block; padding: 0.5em; } #messages{ margin: 1em; margin-bottom: 8em; } #messages a{ display: block; } #messages table{ border: 0; border-collapse: collapse; min-width: 47%; } #messages tr.active{ background-color: var(--msg-active-bg); border-radius: 1em; } #messages tr:hover{ background-color: var(--msg-hover-bg); } #singlemessage{ background: var(--simglemail-bg); border-top-left-radius: 1em; border: 3px solid rgba(0,0,0,0.2); box-shadow: -0.3em 0 3em rgba(0,0,0,0.3); display: block; padding: 0; overflow: scroll; position: absolute; right: 1em; top: 3em; bottom: 4em; width: 50%; } #singlemessage .header{ background: var(--simglemail-head-bg); width: 100%; padding: 0.5em; border-bottom: 4px solid rgba(0,0,0,0.05); } #singlemessage table{ width: 80%; } #singlemessage table td.small{ width: 7em; } #singlemessage .content{ padding: 0.5em; } #search{ border: 2px solid #ddd; border-radius: 0.5em; margin-top: 1em; margin-left: 3em; padding: 0.5em; font-size: 110%; } .box{ display: block; float: left; margin: 0 1em 1em 0; padding: 1em; background-color: var(--box-bg); border-radius: 0.5em; text-align: center; } .box strong{ font-size: 160%; color: var(--box-strong-color) } .right{ float: right; } .toolbar{ padding: 1.5em 1em 1em 0em; width: 97%; }