body { background-color: white; border: 0; float: left; font: 13px sans-serif; margin: 0; overflow: hidden; padding: 0; white-space: nowrap; } h2 { background-color: #eee; border: 0; color: #666; font-size: 14px; font-weight: normal; margin: 1em 0 0.5em 0; padding: 2px 0; text-align: center; } h2:nth-of-type(1) { margin-top: 0; } a { color: inherit; text-decoration: none; } :focus { outline: 0; } #gotoPrefs { display: block; margin: 0; border: 0; padding: 4px; color: white; font-weight: bold; background-color: #444; text-align: center; cursor: pointer; } #version { font-size: 11px; font-weight: normal; margin-left: 1em; } body[dir="ltr"] #panes { direction: rtl; } body[dir="rtl"] #panes { direction: ltr; } body, #panes { text-align: right; /* this helps the popup render better at "intermediate" widths */ } #panes > div { display: inline-block; position: relative; vertical-align: top; } body[dir="ltr"] #panes > div { direction: ltr; } body[dir="rtl"] #panes > div { direction: rtl; } #panes > div:nth-of-type(2) { overflow-y: auto; overflow-x: hidden; width: 320px; } body[dir="ltr"] #panes > div:nth-of-type(2) { direction: rtl; /* scroll bar to the left */ margin-right: 1px; } body[dir="rtl"] #panes > div:nth-of-type(2) { direction: ltr; /* scroll bar to the right */ margin-left: 1px; } #panes:not(.dfEnabled) > div:nth-of-type(2) { display: none; } #panes > div:nth-of-type(1) { min-width: 150px; padding: 0; } p { text-align: center; white-space: nowrap; } #switch { margin: 8px 0; } #switch .fa { color: #0046ff; cursor: pointer; font-size: 96px; margin: 0; } #switch .fa:hover { opacity: 0.9; } body.off #switch .fa { color: #ccc; } #switch-hint { color: #888; font-size: 11px; } #page-blocked { font-size: 20px; } .statName { color: #666; margin: 1em 0.2em 0.2em 0.2em; text-align: center; } .statValue { font-size: 14px; margin: 0; text-align: center; } .tool { color: #aaa; cursor: pointer; display: none; font-size: 14px; unicode-bidi: embed; } .tool.enabled { display: inline; } .tool:hover { color: #444; } #extraTools { background-color: #eee; border: 0; color: #aaa; font-weight: normal; margin: 1em 0 0 0; padding: 4px 0 2px 0; text-align: center; } #extraTools > span { cursor: pointer; font-size: 18px; margin: 0 0.5em; position: relative; } #extraTools > span.on > span { color: #e00; font-size: 20px; left: 0; position: absolute; text-align: center; top: 0; width: 100%; } #extraTools > span.on > span:after { content: '\2715'; } body.advancedUser h2 { cursor: pointer; } body.advancedUser h2:before { color: #aaa; content: '+ '; } body.advancedUser #panes.dfEnabled h2:before { content: '\2212 '; } #refresh { background-color: #ffe; border: 1px solid #eec; border-radius: 4px; bottom: 4px; color: #888; cursor: pointer; display: none; font-size: 40px; left: 4px; line-height: 40px; padding: 4px 8px; position: absolute; right: 4px; text-align: center; } body.dirty #refresh { display: block; } body.dirty #refresh:hover { color: black; } #firewallContainer { border: 0; font-size: 12px; margin: 0; padding: 0; text-align: right; } #firewallContainer > div { background-color: #e6e6e6; border: 0; border-bottom: 1px solid white; direction: ltr; margin: 0; padding: 0; } #firewallContainer > div:hover { background-color: #f0f0f0; } #firewallContainer.minimized > div.isSubDomain { display: none; } #firewallContainer > div > span { background-color: transparent; border: none; box-sizing: border-box; -moz-box-sizing: border-box; color: #000; display: inline-block; height: 22px; line-height: 22px; overflow: hidden; position: relative; vertical-align: middle; } #firewallContainer > div:nth-of-type(1) > span { height: 18px; line-height: 20px; } #firewallContainer > div:nth-of-type(1) > span:nth-of-type(1) { cursor: pointer; } #firewallContainer > div > span:nth-of-type(1) { border-right: 1px solid white; padding-right: 2px; position: relative; text-overflow: ellipsis; width: 70%; } #firewallContainer > div > span:nth-of-type(2), #firewallContainer > div > span:nth-of-type(3), #firewallContainer > div > span:nth-of-type(4) { cursor: pointer; width: 15%; } #firewallContainer > div > span:nth-of-type(3), #firewallContainer > div > span:nth-of-type(4) { border-left: 1px solid white; color: #444; text-align: center; } #firewallContainer > div > span:nth-of-type(4) { display: none; } #firewallContainer > div.isDomain > span:nth-of-type(1) { font-weight: bold; } #firewallContainer > div:nth-of-type(1) > span:nth-of-type(1):before { color: #aaa; content: '\2012'; padding-right: 0.25em; } #firewallContainer.minimized > div:nth-of-type(1) > span:nth-of-type(1):before { content: '+'; } #firewallContainer.minimized > div.isDomain > span:nth-of-type(3) { display: none; } #firewallContainer.minimized > div.isDomain > span:nth-of-type(4) { display: inline-block; } #firewallContainer > div.allowed > span:nth-of-type(1):before, #firewallContainer > div.blocked > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before { box-sizing: border-box; content: ''; display: inline-block; height: 100%; left: 0; opacity: 0.4; position: absolute; width: 7px; } #firewallContainer > div.allowed > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before { background-color: rgb(0, 160, 0); } #firewallContainer > div.blocked > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before { background-color: rgb(192, 0, 0); } #firewallContainer > div.allowed.blocked > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalAllowed.totalBlocked > span:nth-of-type(1):before { background-color: rgb(192, 160, 0); } #firewallContainer > div > span.aRule { background-color: rgba(0, 160, 0, 0.3); } #firewallContainer > div > span.bRule { background-color: rgba(192, 0, 0, 0.3); } #firewallContainer > div > span.nRule { background-color: rgba(96, 96, 96, 0.3); } #firewallContainer > div > span.ownRule { color: white; } #firewallContainer > div > span.aRule.ownRule { background-color: rgba(0, 160, 0, 1); } #firewallContainer > div > span.bRule.ownRule { background-color: rgba(192, 0, 0, 1); } #firewallContainer > div > span.nRule.ownRule { background-color: rgba(108, 108, 108, 1); } #actionSelector { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } #actionSelector > span { display: inline-block; height: 22px; opacity: 0.2; width: 33.33%; } #actionSelector > span:hover { opacity: 0.75; } #actionSelector > span:nth-of-type(1) { background-color: rgb(0, 160, 0); } #actionSelector > span:nth-of-type(2) { background-color: rgb(108, 108, 108); } #actionSelector > span:nth-of-type(3) { background-color: rgb(192, 0, 0); } #firewallContainer span.aRule #actionSelector > span:nth-of-type(1), #firewallContainer span.nRule #actionSelector > span:nth-of-type(2), #firewallContainer span.bRule #actionSelector > span:nth-of-type(3) { visibility: hidden; } #saveRules { background-color: #ffe; border: 1px solid #eec; border-radius: 4px; color: #888; cursor: pointer; display: none; font-size: 30px; line-height: 40px; padding: 0.1em 0.4em; position: fixed; text-align: center; } #firewallContainer.dirty ~ #saveRules { display: block; } #firewallContainer.dirty ~ #saveRules:hover { color: black; }