* { font-family: Arial, Helvetica, sans-serif; color: #2C6667; border-color: #2C6667; }
body { margin-top: 10px; margin-left: auto; margin-right: auto; max-width: 600px; }
h1 { font-size: 24px; }
img#logo { width: 267px; display:block; margin-left: auto; margin-right: auto; }
a { color: #3B8762; }

form                                                                                                                                { width: 100%; max-width: 600px; margin: 0 auto; }
  form label                                                                                                                        { display: block; margin-bottom: 10px; }
  form input[type="text"], form input[type="submit"], form input[type="button"], form input[type="password"], form textarea         { padding: 10px 20px; margin-bottom: 20px; width: 100%; border-radius: 10px; font-size: 16px; }
  form input[type="submit"], form input[type="button"]                                                                              { cursor: pointer; background-color: #2C6667; color: #fff; margin-left: auto; margin-right: auto; border-radius: 10px; }
  form input[type="submit"]:disabled, form input[type="button"]:disabled                                                            { background-color: #555; color: #AAA; cursor:not-allowed; }
  form label span#showHide                                                                                                          { float: right; font-size: 0.8em; cursor: pointer; } 
ul.networks li.secure::before { content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAAQeed/gAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDYuMC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGV7hBwAAAV1JREFUOBG1lDFKBEEQRWdV0MDAQEEwUAyM3MADeD1vYGpm4jUEU1NPIGtkpIjLrv7XU3/o7mldVrCgpqqr/v9TXbPspFttm4JsBGypuFhNaSMQmTRa1PyCUbtFAMRUnuRS+QVF2aP8PmUlJkrtgBh2LH+Qf1VO7USOGdufGk9fZV+9F7nFmBb3mR4YzJz+VD234nyjaPK18rNwctfBYOb0p+zpfe6q9iyHeJv1nVKjBwYsZm4xrotcZS/Buu4u4rYijrkG5iBVMsHWuCza4oFPEzl3ZHej/eWCFnkzQ/Ej8s9GjWu/R93cYaEU+IrEaUSF7lR+JOd69F7l1DCmO5fP5ObykmSe9EonivOI5D+5MXCwpFHv4LDvNXcWrVEwJzVqQd5a23CNuhHnglMLDsvNyK1a1i5/EbVgDvxT/u+C/IGuawXHE3pPO2uo+WMVHAu6+RSCfsFv+uaak7DfkjhE2vk7JYQAAAAASUVORK5CYII=') }
ul.networks { list-style-type: none; }
ul.networks li.ssid { width: 80%; }
ul.networks li.ssid:hover { background: #CCC; }
ul.networks li.ssid .remove { float: right; }

@media (max-width: 600px) {
    form input[type="text"], form input[type="submit"], form input[type="password"], form textarea, form label                      { font-size: 16px; }
}

div.configured:not(:has(ul li)) { display: none; }

p.confirm { font-size: 1.2em; }
p.confirm span.ssid { font-weight: bold; margin: 0px 5px; background: #CCC; border-radius: 10px; padding: 10px;  }

div.instructionsModalContent { padding: 10px 30px; }
div.instructionsModalContent div.instructionsModalContentFooter { text-align: center; }
div.instructionsModalContent button { margin-left: auto; margin-right: auto; min-width: 50%; font-size: +1em; padding: 10px; }