ul { padding: 0; list-style-type: none; } ul#options { margin-top: 0; } ul#options li { margin-bottom: 0.5em; } ul#lists { margin: 0.5em 0 0 0; padding: 0; } li.listEntry { font-size: 14px; margin: 0 auto 0 auto; padding: 0.2em 0; } body[dir="ltr"] li.listEntry { margin-left: 1em; margin-right: 0em; } body[dir="rtl"] li.listEntry { margin-left: 0em; margin-right: 1em; } li.listEntry > * { unicode-bidi: embed; } li.listEntry > a:nth-of-type(2) { font-size: 13px; opacity: 0.5; } .dim { opacity: 0.5; } /* I designed the button with: http://charliepark.org/bootstrap_buttons/ */ button.custom { padding: 5px; border: 1px solid transparent; border-color: #80b3ff #80b3ff hsl(216, 100%, 75%); border-radius: 3px; background-color: hsl(216, 100%, 75%); background-image: linear-gradient(#a8cbff, #80b3ff); background-repeat: repeat-x; color: #222; cursor: pointer; opacity: 0.8; } button.custom.disabled { border-color: #dddddd #dddddd hsl(36, 0%, 85%); background-color: hsl(36, 0%, 72%); background-image: linear-gradient(#f2f2f2, #dddddd); color: #aaa; pointer-events: none; } button.custom:hover { opacity: 1.0; } button.custom.reloadAll:not(.disabled) { border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%); background-color: hsl(36, 100%, 75%); background-image: linear-gradient(#ffdca8, #ffcc7f); } #buttonApply { display: initial; padding: 1em 1em; position: fixed; top: 1em; } body[dir="ltr"] #buttonApply { right: 1em; } body[dir="rtl"] #buttonApply { left: 1em; } #buttonApply.disabled { display: none; } span.status { border: 1px solid transparent; color: #444; display: inline-block; font-size: smaller; line-height: 1; margin: 0 0 0 0.5em; opacity: 0.8; padding: 1px 2px; } span.unsecure { background-color: hsl(0, 100%, 88%); border-color: hsl(0, 100%, 83%); } span.purge { border-color: #ddd; background-color: #eee; cursor: pointer; } span.purge:hover { opacity: 1; } span.obsolete { border-color: hsl(36, 100%, 73%); background-color: hsl(36, 100%, 75%); } #externalListsDiv { margin: 2em auto 0 auto; } body[dir="ltr"] #externalListsDiv { margin-left: 1em; } body[dir="rtl"] #externalListsDiv { margin-right: 1em; } #externalHostsFiles { box-sizing: border-box; font-size: smaller; width: 100%; height: 12em; white-space: nowrap; } body #busyOverlay { background-color: transparent; bottom: 0; cursor: wait; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 1000; } body.busy #busyOverlay { display: block; } #busyOverlay > div:nth-of-type(1) { background-color: white; bottom: 0; left: 0; opacity: 0.75; position: absolute; right: 0; top: 0; } #busyOverlay > div:nth-of-type(2) { background-color: #eee; border: 1px solid transparent; border-color: #80b3ff #80b3ff hsl(216, 100%, 75%); border-radius: 3px; box-sizing: border-box; height: 3em; left: 10%; position: absolute; bottom: 75%; width: 80%; } #busyOverlay > div:nth-of-type(2) > div:nth-of-type(1) { background-color: hsl(216, 100%, 75%); background-image: linear-gradient(#a8cbff, #80b3ff); background-repeat: repeat-x; border: 0; box-sizing: border-box; color: #222; height: 100%; left: 0; padding: 0; position: absolute; width: 25%; } #busyOverlay > div:nth-of-type(2) > div:nth-of-type(2) { background-color: transparent; border: 0; box-sizing: border-box; height: 100%; left: 0; line-height: 3em; overflow: hidden; position: absolute; text-align: center; top: 0; width: 100%; }