craftui/www/static/default.css

@media screen, print {

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  html,
  button {
    box-sizing: border-box;
    font: 14px/1.64 'open sans', arial, sans-serif;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    word-wrap: break-word;
  }

  th {
    font-weight: normal;
    text-align: left;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  img {
    border: 0;
  }

}

@media screen {

  html,
  body,
  header,
  footer {
    padding: 0 13px;
  }

  html {
    background: #fff;
    color: #222;
    min-width: 320px;
  }

  html.dialog,
  html.error {
    overflow: hidden;
  }

  body,
  header,
  footer {
    margin: 0 -13px;
  }

  body {
    background: #f6f6f6;
  }

  h1,
  h2,
  h3 {
    color: #444;
    line-height: 1.25;
  }

  h1,
  h2 {
    font-weight: 300;
  }

  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 36px;
  }

  h3,
  header {
    color: #6a758a;
  }

  h3 {
    font-size: 18px;
    font-weight: 600;
  }

  small {
    color: #777;
    font-size: 11px;
  }

  b,
  em,
  strong {
    font-weight: 600;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:focus,
  a:hover,
  a:active {
    text-decoration: underline;
  }

  header,
  footer {
    min-height: 60px;
  }

  header {
    background: #f1f1f1;
    border-bottom: 1px solid #ebebeb;
    top: 0;
  }

  header section,
  footer ul {
    max-width: 978px;
  }

  header section:after {
   clear: both;
   content: '';
   display: block;
  }


  header h1,
  header nav,
  header nav li,
  header #help,
  footer li {
    display: inline-block;
    vertical-align: middle;
  }

  header h1,
  header #help {
    line-height: 60px;
  }

  header h1 {
    margin: 0 20px 0 0;
  }

  .disconnected header h1 {
    pointer-events: none;
  }

  header h1 img {
    display: block;
    height: 26px;
    margin: 20px 0 14px;
    width: 117px;
  }

  header nav ul {
    margin: 0 -10px;
  }

  header nav li {
    border-bottom: 4px solid transparent;
    font-weight: 600;
    line-height: 48px;
    margin: 1px 5px -1px;
    padding: 8px 10px 0;
    text-transform: uppercase;
  }

  header nav li.active {
    border-color: #3369e8;
  }

  footer {
    background: #6a758a;
    bottom: 0;
    color: #ccc;
    font-size: 12px;
    text-align: right;
  }

  footer ul {
    padding: 10px 0;
  }

  footer li {
    line-height: 40px;
  }

  footer li:nth-last-child(n+1) {
    margin-left: 40px;
  }

  .button {
    background: #f2f2f2;
    background-image: linear-gradient(#f2f2f2, #fff);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: .6px 1px .5px 0 rgba(0, 0, 0, .1);
    color: #3369e8;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    max-width: 100%;
    padding: 5px 15px;
    text-decoration: none !important;
    -webkit-user-select: none;
    word-wrap: break-word;
  }

  .button:focus {
    border: 1px solid #3369e8;
  }

  .button:hover {
    background: #eee;
    background-image: linear-gradient(#fff, #f2f2f2);
    border: 1px solid #adc3f6;
    box-shadow: .6px 1px 1px 0 rgba(0, 0, 0, .2);
  }

  .button:active {
    background: #ddd;
    background-image: linear-gradient(#ddd, #eee);
    border: 1px solid #7ba5ed;
    box-shadow: .6px 1px 1px 0 rgba(0, 0, 0, .3);
    color: #2e57df;
  }

  #dialog .button.restart,
  .disconnected #restart .button.restart {
    background: #4180ed;
    border: 1px solid #3369e8;
    box-shadow: .6px 1px .5px 0 rgba(0, 0, 0, .1), inset .6px 1px 2px 1px rgba(255, 255, 255, .15);
    color: #fff !important;
    text-shadow: .6px 1px 1px rgba(0, 0, 0, .2);
    text-transform: uppercase;
  }

  #dialog .button.restart:focus,
  .disconnected #restart .button.restart:focus {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  }

  #dialog .button.restart:hover,
  .disconnected #restart .button.restart:hover {
    background: #3da2fd;
    box-shadow: .6px 1px 2px 0 rgba(0, 0, 0, .3), inset .6px 1px 2px 0 rgba(255, 255, 255, .3);
  }

  #dialog .button.restart:active,
  .disconnected #restart .button.restart:active {
    background: #56616d;
    border: 1px solid #46505c;
    box-shadow: .6px 1px .5px 0 rgba(0, 0, 0, .4), inset .6px 1px 2px 0 rgba(142, 142, 142, .3);
  }

  #dialog .button.cancel {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-left: 40px;
  }

  #help {
    float: right;
    text-decoration: none;
  }

  #help:before,
  #advanced button.toggle {
    display: inline-block;
    height: 24px;
    vertical-align: middle;
    width: 24px;
  }

  #help:before {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRoLTI0eiIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTE5IDJoLTE0Yy0xLjExIDAtMiAuOS0yIDJ2MTRjMCAxLjEuODkgMiAyIDJoNGwzIDMgMy0zaDRjMS4xIDAgMi0uOSAyLTJ2LTE0YzAtMS4xLS45LTItMi0yem0tNiAxNmgtMnYtMmgydjJ6bTIuMDctNy43NWwtLjkuOTJjLS43Mi43My0xLjE3IDEuMzMtMS4xNyAyLjgzaC0ydi0uNWMwLTEuMS40NS0yLjEgMS4xNy0yLjgzbDEuMjQtMS4yNmMuMzctLjM2LjU5LS44Ni41OS0xLjQxIDAtMS4xLS45LTItMi0ycy0yIC45LTIgMmgtMmMwLTIuMjEgMS43OS00IDQtNHM0IDEuNzkgNCA0YzAgLjg4LS4zNiAxLjY4LS45MyAyLjI1eiIgZmlsbD0iIzZhNzU4YSIvPgo8L3N2Zz4K);
    content: '';
    margin-right: 10px;
  }

  #main {
    margin: 30px auto;
    max-width: 768px;
    text-align: center;
  }

  #main section {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    margin: 20px auto;
    padding: 5px 30px;
    position: relative;
  }

  #main a {
    color: #3369e8;
  }

  #main a:active {
    color: #2954ba;
  }

  #ssid {
    margin: 0 20px;
    max-width: 768px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .init #manage,
  .init #advanced,
  .unsupported #status,
  .disconnected #manage,
  #advanced.collapsed #save,
  #advanced.collapsed table,
  .overlay {
    display: none;
  }

  #status:before,
  #loading:after {
    background: url(data:image/gif;base64,R0lGODlhGAAYAPf/AHJYi2Ob9YHDxVKnVOiaRYu1%2Bt9TP7a7SUh02LvB5e6oNf7STj6C9BVrOiaLlj2C%2BH2s%2BfC4MuS8NcBLTuuVNuVuO8Wjuh6ceJe1RuNmQOFMQG%2B%2Bs8W5O6lbeNRwc7/R5kmJ%2BOvSfSyrX3RnqqK3TyeDq%2BbSiW%2BxUPa5S9jRqkVyNdxZU9DRvWWd%2Bf3SUd9OQx2oYvzRVEi0i8qSo1V6NnaLO1WoZNJ6gVK3lSGpYaLM5l2X%2BfbRZCeUUslSV7FTZSqWo7nR89bRrjuA90h75apTad9RSMmWqdtnJFVtxSVuyyWPeM/RwCpftjl%2B8XG/tsrRy7/Q5TaE4fzLTJ02NZlcg6y3QSWLib08MoKyStaBD12nx9lzGtzRohqQVINhmc/Rv3yr%2BeBLP7fR%2BhiESS6Huc1GPjKFzNd9ETiB7S2tcO7Rcx2OY8RMNed3OczRxbxPV5C5%2BjqA9ECE94Cu%2BRd4QYxejfTSaCR1vrR6leZxQllZmDl35uKWab7Mu99bOTKJzp5ni8HL3dDHtdfJpyOieUuls0OqlCmihXB1vt1NPo5BUtxJPjl%2B9P/RTTR46tFEOSVq0RtgwKMxKaTM6SSrZ6jI%2Bx%2BNbjd98afH%2BqfH%2Bzl/9KPM6PfSX0GF%2BHuq%2BFuV9iGqY0WH9cOowabH%2BtRvctJ5f95QR0eJ9%2BBPRCWraHPAuIfFzKXG%2Br3R69pgXI%2B4%2Bb/R5LzA47vB5OBLQDWvePzSVcBDMz2aUGZruPfASk%2BfUJE%2BTPvQTTCRtvXDXNPFToqa2EB13%2BDRljd35%2BXMhkuC6dh4Fk1vy1N009fMhKa4T9d3PcBUYOCNQcy4UOOWUz1769%2Bta5K9p/GeSdNuO5%2B3Vj%2BSzb9AM%2BF0UoFJaYZVeqBSapVTcSCRi4yWPvPOTejRg8yUmtqcgGOBOMjR0aajQYlfkTCNwvDRcB6MUkSVuru9ZkiJ92G4jR%2BpXzmC8OBaQyySsKCLt6fL3s1mQRmQUfG9MjqA9%2BFLPzh%2B9DuB%2BOBKPv/STR2pYLbR%2ByH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1RkI0NUM4ODFFMjE2ODExODA4M0JBNDNFM0Q1NEYzOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDOUU0MzBGRTM2OEQxMUUyOTAxMkREREU2RUFERDE0RiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDOUU0MzBGRDM2OEQxMUUyOTAxMkREREU2RUFERDE0RiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3ODAxMTc0MDcyMDY4MTE4OEM2RjVBOThGQUNEQkQ5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVGQjQ1Qzg4MUUyMTY4MTE4MDgzQkE0M0UzRDU0RjM4Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BAf/%2B/fz7%2Bvn49/b19PPy8fDv7u3s6%2Brp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ%2BenZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8%2BPTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQAA/wAsAAAAABgAGAAACJgA/wkc%2BE9TmB3tHngCsSMMKYIQB2pqsQ%2BfxYsW97XQFHEgrDkYQ16cU6AjnYoiU%2BKjA7GAypf4SgrUBBJmyjkc/7Ww%2BbJFQZQ8Re4zGPTlwaIqd6BCmhLVA6YiHzyFivHBUqoXUe3AerEhV4sOgULd93AnVp8FazLFOdAlVJkDTyKF0PEjT5IdZ1JUqTFn3pkHnVpt2KpjQAAh%2BQQFAAD/ACwAAAAAGAAYAAAIxgD/CRz4L8EMDytSGXnlYYYsghAHJrihgZaPDlU6/PBBS8ONBBEHjjLSbISwRyhTChvRzIiFkEd85EpJs2YuH0cgWuhwsqZPlMI6vBSYoAOxn0gfEesA8l8ePkmT8snzb1aSqFGTJJiHFeu8RF2jJkIQNikCqGV/8pGjr63bt3Dj6pMjSq5duaJA3d3rFtQnvnw//dsE2O4mgQEKyw0gMBMDxW8ZZCII2W1IwopDCnzMl4HmxgEwx90UYPLnxp9AiZJD16/mgAAh%2BQQFAAD/ACwAAAEAGAALAAAIaAD/CRwoMJ/BgwYJKlSIsOHBhQQ1OJyYTwNEiRQnWiRoJGNGIwNvIKQFh9s2ACgBbOMGhxZCUwIlvuC2p4mkmzhzNtnDTVHFWTNodbOZs6jRJt1ozfCwx6hTp3s8AHhKtSgAolWrNgkIACH5BAUAAP8ALAAABgAYAAoAAAhWAP8JHJivoMGDBQcqFIiwoUOFDiM%2B/CexosF/KyxaXJFKY8UXiyaJHEmypMlJi4wBoHKy5UgqAIwJxJQEgDZeLE9S4aUNQJJGCxdGQ4AAGTKi0YIKDAgAIfkEBQAA/wAsAAAMABgACgAACFgAzUAaSLCgwYOQzMBByBAhnEANIxIMFEyixGD/7FhkaOefxx8bDf7w%2BM8SkSIhBxYhQtJjoxECJZr54qQlSSdEzk1gOOEcS5tAGyUb8aWKnS8jkjUC%2Bi8gACH5BAUAAP8ALAAAAAAYABgAAAi3AP8JHDiw1L8XiuJlGyeIoEOCpv7xm8iPkUVGBvpEeeiQIsWLF/UM4vhPjMePIC1mIPTQ5MmJKUOCIXjqJcqYjKh9GGjzZkwDxQS67Inzok6JPWEWZaQnBdKkSzGGeEo06q8XSZUuRYE1a1RGKFZkrWi11NioBkLMOLu0qayhNqMeNeW1KFCBCWpWxXlUoAW4HovqmUnwCGCtIFdyHGXkZUyRJP8lMAUXZMaNkfHOKLUCoUKGHAMCACH5BAUAAP8ALAwAAAAMABgAAAiLANvUk5Yi1r%2BDCP9hWehsgYkPCRUuxEKgny0wCSdiuaWrXz8hCDViYeaxH5ODIrFN8WgLpciKHk1I1Fit5IKZE9uU7Idz4kqPPRd29NhJ5EIUJV0YxYLUo1KjQ/sVNfqTp1GdJYPW9HjTKMx%2BMlP%2BbNmTJFCXCzl6BImWokUWGRk6hJjw1sCCEQ8GBAAh%2BQQFAAD/ACwLAAAACQAYAAAIUAD/2LoT4p9Bg0j6Kex38F/ChQwNcoGoUCLFiMcuMkSj8R/Hi/%2B0dBSpkeRFkxRRQlS5kKVClx47fqT4LyPIiTT/4YSIMKdDngf/LOhUsGFAACH5BAUAAP8ALAMAAAAKABgAAAhfAP8JFCgOmoIIAwVWiHCv4cBTFRpKHJiBocR7//IpUnDR4T83HT1yDPnvT0iHIE/%2Bo3ASI0uVI0nG7LiyZU2VKUmaVPlv5sSPPMX4xPiPX0WaAyNeTPhv4c%2BEBQ%2B6CAgAIfkEBQAA/wAsAAAAAAwAGAAACGAA/wkc%2BO9DihCdXBAsaGJBv4f9CL6xBRHiQCEOKz4UyERjxYIUPW40IRLih4wlU5SEGGLlw04u%2B7mIOdMlTJctXap0edLlP5IrQQb9B2boP4wiJYb8SPBDQ6YLDSJ0ERAAIfkECQAA/wAsAAAAABgAGAAACJIA/wkcSLCgwYMIEypcyLChw4cQI0qcSLGixYsMT9zbyLGjx48bbYAcOVKGBJIoOW7QmJIkO045rLQEyYHePxw5DszsyMGdQEqV3mU5ORODCEoDBfjzJwID0ZFWBvgTUHDVu6WhBmSxwqGrFQwDcix9cpCVqqVo06JVRRUhJRxq1eJAupDSBhlqQoVSI2ODjoMBAQAh%2BQQFAAD/ACwAAAAAGAAYAAAIwQD/CRw4MBYUFizKfSDIsKGrLjwcSZzIo4urhgTHpIgxsePEGCnGYAwSzqPJiSGCMAyy5qRLR2tUDjTx8qWJgW9q1nzzb8wdnS/vjIECtCaUYUVfDkuX1GW6Z%2Ba%2B1ahBjoZVFVizWqVBbuo3c89C%2BRtLtqzZs/5yqEHLFq0aGW3jkpWxQa7cDZzsxuX0D4detDgEUqr0t2wlSgMFFCYrgOGqxU8wslJlt1JjjP8o%2BW2LAzHmgZQ2yFATKtTbDTowBgQAIfkEBQAA/wAsAAACABgACgAACF0A/wkcKLAXsAPLlh0A1ougQ4LgSOzqYa%2BixR67SIB7OJAERYsgQfYg8VDZrpAoQ%2B5SNtAPrpQwLeLyI3CXl5g4d/2bhrOnvWk2fOK08VFoyh7WSChdyrSpUxLWAgIAIfkEBQAA/wAsAAAAABgADQAACF4A/wkc%2BI/SBhlqQlWqJWODDoIQB1LCkcOfxYsXcVCKOJCVKowgL1YSwHFVyJMXn0AUgLKlP5ICKVVyibLSxn84aLbE8Y%2BTTpecNvxseXAoSoRGTyZMGjIUx6dPQwUEACH5BAUAAP8ALAAAAAAMABgAAAiTAP8JHPjP0qd1DhwQLNjiDBt79i4RjOOpjBeIEQfSeXDGy0WIEv8V2AfvIcaMljztK3ES5L8W%2Bx6YPHlJ04N9Z1qChLBvnwOdEXf0XAL0UrueM2ne3Pex5aWlTWke3ZcU4yWh%2By4V5bnvSlGb%2B8oUfbkvTVSXKbvqDDlSylqND37SnOjJq9WFlgLYzbiw4BailwICACH5BAUAAP8ALAMAAAAKABgAAAhVAP8JFBhmB4gH6gb%2Be7Cv4T4yAx06rCNQ4sR/Fh02wJhxX4OODT%2BCFNmRZEaTFlFKVKkRpEeXLEPChMkxI0WQFGtKhFjRIs9/LRg6tKfwX8F2D3IEBAAh%2BQQFAAD/ACwLAAAACAAYAAAIUwCdKClx6J/Bf5giRVJyAYbBhAojXXgYMRIehxAjekNY0SLHjhcyRnQgUmGJkhZRKkEZSaXLjilhnoRJEmbIjng%2BatRpEWNEhhQXTjQokODBfwEBACH5BAUAAP8ALAsAAAAMABgAAAhoAB%2BkkXJty7%2BDCP8NacSwkRRDCRU2bOgr4cKJDNEhvIixkbyDHDE6QSSxI0NAJU02KhSyI5CWGAHBnChlZkMnNhniVMmwJs9GMn%2B%2B/MmSJ0qbI1Ni/Ki0oUaQHStupAkxoUCCBiP%2BCwgAOw%3D%3D) no-repeat center center;
  }

  #status:before {
    border-radius: 6px;
    content: '';
    display: inline-block;
    margin-right: 10px;
    height: 12px;
    width: 12px;
  }

  .disconnected #status:before {
    background: #969ead;
  }

  .connected #status:before {
    background: #56b300;
  }

  #manage {
    font-size: 24px;
    line-height: 1.25;
  }

  #manage a,
  #restart a {
    white-space: nowrap;
  }

  .connected #restart {
    text-align: left;
  }

  .connected #restart .button {
    position: absolute;
    right: 30px;
    top: 20px;
  }

  #advanced {
    text-align: left;
  }

  #advanced button.toggle {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRoLTI0eiIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTcuNDEgMTguNTlsMS40MiAxLjQxIDMuMTctMy4xNyAzLjE3IDMuMTcgMS40MS0xLjQxLTQuNTgtNC41OS00LjU5IDQuNTl6bTkuMTgtMTMuMThsLTEuNDItMS40MS0zLjE3IDMuMTctMy4xNy0zLjE3LTEuNDIgMS40MSA0LjU5IDQuNTkgNC41OS00LjU5eiIgZmlsbD0iIzZhNzU4YSIvPgo8L3N2Zz4K);
    border: none;
    cursor: pointer;
    float: right;
    margin: 18px 0 0;
  }

  #advanced #save {
    float: right;
    max-width: 198px;
  }

  #advanced table {
    width: 63.739376770538%; /* 450px/706px */
  }

  #advanced th,
  #advanced td {
    padding: 6px 0;
    vertical-align: top;
  }

  #advanced th {
    padding-right: 16px;
    width: 44%;
  }

  #advanced td {
    width: 56%;
  }

  #advanced td span {
    color: #777;
  }

  #advanced tr.onu th {
    padding-left: 20px;
  }

  #advanced.collapsed button.toggle {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRoLTI0eiIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTEyIDUuODNsMy4xNyAzLjE3IDEuNDEtMS40MS00LjU4LTQuNTktNC41OSA0LjU5IDEuNDIgMS40MSAzLjE3LTMuMTd6bTAgMTIuMzRsLTMuMTctMy4xNy0xLjQxIDEuNDEgNC41OCA0LjU5IDQuNTktNC41OS0xLjQyLTEuNDEtMy4xNyAzLjE3eiIgZmlsbD0iIzZhNzU4YSIvPgo8L3N2Zz4K);
  }

  .overlay {
    background: rgba(0, 0, 0, .5);
    height: 100%;
    left: 0;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  .overlay > div {
    background: #fff;
    border-radius: 4px;
    margin: 180px auto 0;
    max-width: 345px;
    padding: 20px;
    position: relative;
    text-align: left;
  }

  .overlay h2 {
    font-size: 28px;
    margin: 0;
  }

  #loading:after {
    border-radius: 10px;
    content: '';
    height: 20px;
    position: absolute;
    top: 280px;
    width: 20px;
  }

  html.dialog #dialog,
  html.error #error,
  html.loading #loading {
    display: block;
  }

}

@media screen and (max-width: 300px) {

  html,
  body,
  header,
  footer {
    padding: 0 8px;
  }

  body,
  header,
  footer {
    margin: 0 -8px;
  }

  header nav {
    display: none;
  }

  footer ul {
    padding: 10px 5px;
  }

  #main {
    margin: 20px auto;
  }

  #main section {
    padding: 5px 20px;
  }

  .connected #restart {
    text-align: center;
  }

  .connected #restart .button {
    position: static;
    right: auto;
    top: auto;
  }

  #advanced #save {
    float: none;
    max-width: 100%;
  }

  #advanced table {
    width: 100%;
  }

  #advanced th {
    width: 46.052631578947%;
  }

  #advanced td {
    width: 53.947368421053%;
  }

}

@media print {

  header,
  footer,
  #status,
  #manage,
  #restart,
  .overlay,
  #advanced button.toggle,
  #advanced #save {
    display: none;
  }

}