/** This removes all padding and margins as well as setting a default font size and family for the page **/ * { margin: 0; padding: 0; font-size: 16px; font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Times New Roman'; background-color: #252527; background-color: black; } p { color: #66ff33; } h1 { font-size: 22px; color: #66ff33; } h2 { color: #66ff33; } ul { padding: 6px; list-style-type: none; } li { list-style-type: none; } span { margin: 4px; padding: 4px; } /* Disable border highlight on elements */ input:focus, textarea:focus, button:focus, td:focus, tr:focus { outline:none; } /* Main menu */ .mainmenu { list-style-type: none; margin: 0; padding: 0; width: 10%; position: fixed; height: 100%; overflow: auto; border: 0; border-bottom: 1px solid #000000; border-radius: 0; background-color: #333; } .mainmenu>li a { display: block; color: #e6e6e6; background-color: #333; padding: 16px; text-decoration: none; } .mainmenu>li a:hover:not(.active) { background-color: #555; color: white; } .mainmenu>li a:focus { background-color: #555; } .mainmenu>li a.active { background-color: #555; color: white; } /* Make html links ("a" elements) nice looking buttons with this class */ .a-link-button { text-decoration: none; background-color: #555; color: #FFFFFF; padding: 6px; margin: 6px; border: 1px solid #333333; width: 50%; } .a-link-button:hover { background-color: #666; } /* Make anchor tags ("a" elements) inactive (not clickable) */ .a-link-button-inactive { text-decoration: none; background-color: #333; color: #FFFFFF; padding: 6px; margin: 6px; border-top: 1px solid #333333; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #333333; pointer-events: none; cursor: default; width: 50%; } /* Notification icon (for create program right now only) */ .create-program-tab { position:relative; } #create-program-notification { font-size: 10px; position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; } .notification-on { background-color: #fa3e3e; color: white; border-radius: 2px; padding: 1px 3px; } .notification-off { background-color: #333; color: #333; border-radius: 0px; padding: 0px; } /* Tool tips (when hovering over an element */ .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 300px; background-color: black; border: 2px solid white; color: white; text-align: center; padding: 4px; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } /* Flashing button */ @-webkit-keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; } } @-moz-keyframes glowing { 0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; } 50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; } 100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; } } @-o-keyframes glowing { 0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } 50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; } 100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } } @keyframes glowing { 0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } 50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; } 100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } } .flashing-button { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; }