html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .menu-container { display: flex; justify-content: space-between; align-items: center; list-style: none; padding: 0; margin: 0; margin-bottom: 10px; background-color: #777; } .menu-left, .menu-right { display: flex; list-style: none; padding: 0; margin: 0; } .menu-left li, .menu-right li { margin: 0 10px; } .menu-left a, .menu-right a { text-decoration: none; color: white; } .menu-left li a, .menu-left li span, .menu-right li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .menu-left li a:hover, .menu-right li a:hover { background-color: #111; } .error { color: red; margin: 15px 0px 15px 0px; padding: 5px; background-color: #eee; border: 1px solid #333; font-weight: bold; font-size: 0.85em; } .notice { color: green; margin: 15px 0px 15px 0px; padding: 5px; background-color: #eee; border: 1px solid #333; font-weight: bold; font-size: 0.85em; } #main { width: 100%; } #footer { position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background-color: #777; color: white; text-align: center; font-size: 0.85em; line-height: 30px; } #footer a { color: white; } .results-header { display: flex; justify-content: space-between; } .results-message { width: 25%; } .results-message, .results-filter { padding: 10px 10px 10px 10px; } .widget { border: 1px solid gray; } /* collapsing sidebar */ .toggle-sidebar-button { position: absolute; top: -10px; right: -10px; z-index: 100; margin: 10px; height: 22px; width: 22px; padding-left: 2px; padding-top: 0px; } .sidebar-wrapper { position: relative; width: 275px; transition: width 0.5s ease; overflow-x: hidden; } .sidebar-wrapper.collapsed { width: 3em; } .sidebar-collapsed .sidebar-wrapper { width: 3em; } .sidebar-content { width: 250px; border: none; } .list-group-item i { margin-right: 10px; margin-left: -8px; } .main-content { flex-grow: 1; transition: width 0.5s ease; margin-bottom: 50px; /* width: 80%;*/ } .main-content.expanded { width: calc(70% + 250px); } .sidebar-collapsed .main-content { width: calc(70% + 3em); } .logo { height: 36px; margin-top: 10px; } .logo-link { border: 1px solid white; margin-top: 2px; margin-left: 2px; background-color: lightseagreen; } .sidebar-content a { text-decoration: none; } .pagination { font-size: 0.66em; text-align: center; display: block; } .pagination span { margin-left: 5px; margin-right: 5px; } .th-time { width: 200px; } .results { text-align: left; font-family: monospace; white-space: pre-wrap; background-color: #f4f4f4; padding: 10px; border: 1px solid #ccc; border-radius: 5px; overflow-x: auto; } .table-results, .filter-results { font-size: 0.85em; } .button.active { background-color: lightgray; border: 1px solid gray; border-radius: 4px; }