/* Basic */

body {
   width: auto;
   max-width: 320px;
   margin: 0 auto;
   padding: 0;
   color: #333;
   background-color: #689;
   font-family: Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 16px;
}

a {
   text-decoration: none;
}

h1 {
   margin: 0;
   margin-bottom: 10px;
   font-size: 1.25em;
}

noscript {
   margin-top: 10px;
   color: #f33;
}

* {
   -webkit-tap-highlight-color: transparent;
}


/* Container */

#main {
   margin-top: 50px;
   padding: 25px;
   background-color: #fff;
   border-radius: 4px;
}


/* Update notification */

#Update {
   display: none;
   padding: 5px;
   background-color: #fcc;
   text-align: center;
}

#Update a {
   color: #311;
   text-decoration: underline;
}


/* Canvas */

#Canvas {
   display: none;
   position: absolute;
   top: 11px;
   right: 10px;
   width: 16px;
   height: 16px;
}


/* Form elements */

form {
   margin: 0;
}

fieldset {
   position: relative;
   margin: 0;
   margin-top: 10px;
   padding: 0;
   border: none;
}

input {
   background-color: #fff;
   border: solid 2px #ccc;
   border-radius: 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-appearance: none;
   -moz-appearance: none;
}

input:focus {
   outline: none;
   border-color: #9bc;
}

label {
   font-size: 14px;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}


/* Placeholders */

.placeholder {
   display: none;
   position: absolute;
   top: 11px;
   left: 12px;
   color: #ccc;
}

::-webkit-input-placeholder {
   color: #ccc;
   font-family: Helvetica, Arial, sans-serif;
}

:-moz-placeholder {
   color: #ccc;
   font-family: Helvetica, Arial, sans-serif;
}

::-moz-placeholder {
   color: #ccc;
   font-family: Helvetica, Arial, sans-serif;
}

:-ms-input-placeholder {
   color: #ccc;
   font-family: Helvetica, Arial, sans-serif;
}

.Missing label { color: #d66; }
.Missing input::-webkit-input-placeholder { color: #d66; }
.Missing input:::-moz-placeholder { color: #d66; }
.Missing input::-moz-placeholder { color: #d66; }
.Missing input:-ms-input-placeholder { color: #d66; }
.Missing input { border-color: #d66; }


/* Text fields */

#Passwd, #Secret, #Domain {
   width: 100%;
   height: 38px;
   margin: 0;
   padding: 8px 10px;
   font-size: 15px;
}

#Passwd {
   padding-right: 30px;
}

#PasswdField, #DomainField {
   clear: both;
}


/* Length field */

#LenField input {
   float: left;
   width: 38px;
   height: 31px;
   margin: 0;
   padding: 5px;
   font-size: 14px;
   border-radius: 4px 0 0 4px;
}

#LenField label {
   float: left;
   width: 24px;
   height: 16px;
   margin: 0;
   padding: 6px 0;
   padding-bottom: 7px;
   color: #999;
   background-color: #ccc;
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   border-bottom: solid 2px #bbb;
   border-radius: 4px 0 0 4px;
   cursor: pointer;
}

#LenField label:hover {
   color: #000;
}

#LenField label:first-of-type {
   padding-left: 2px;
   border-radius: 0;
}

#LenField label:last-of-type {
   padding-right: 2px;
   border-radius: 0 4px 4px 0;
}


/* Method toggle */

#MethodField {
   float: right;
}

input[type="radio"] {
   display: none;
}

input[type="radio"] + label {
   float: right;
   width: 48px;
   height: 16px;
   margin: 0;
   padding: 6px 0;
   color: #999;
   background-color: #ccc;
   text-align: center;
   border-bottom: solid 2px #999;
   cursor: pointer;
}

input[type="radio"] + label:hover {
   color: #000;
}

input[type="radio"]:checked + label {
   color: #fff;
   background-color: #356;
   font-weight: bold;
   border-bottom: solid 2px #023;
}

#MethodField label:first-of-type {
   border-radius: 0 4px 4px 0;
}

#MethodField label:last-of-type {
   border-radius: 4px 0 0 4px;
}


/* Subdomains toggle */

#SubdomainsField {
   position: absolute;
   top: 0;
   right: 9px;
}

input[type="checkbox"] {
   display: none;
}

input[type="checkbox"] + label {
   padding: 2px 4px;
   color: #fff;
   background-color: #356;
   font-size: 12px;
   border: solid 1px #023;
   border-radius: 3px;
   text-decoration: line-through;
   cursor: pointer;
}

input[type="checkbox"] + label:hover {
   color: #fff;
   border-color: #023;
   text-decoration: line-through;
}

input[type="checkbox"]:checked + label {
   color: #999;
   background-color: #fff;
   border-color: #999;
   text-decoration: none;
}

input[type="checkbox"]:checked + label:hover {
  color: #333;
  border-color: #333;
}


/* Advanced options */

#Options {
   float: right;
   width: 18px;
   height: 18px;
   margin-right: 2px;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAACDElEQVRIx63Wv0okQRAG8N/M3qKJkWCmJneGa2Jg5h8QRPEZDEw02ETxcURfw1R8ChcEwcRME711Z6Yu2N5x13/HcdMNzfbsVx9V9VV1N+9HS4a83l8K4bLe58i0/GVkmNORyeRY9CyEZ4vIZTIdcwn5Lc2+e+EIU9gQSqWwkb4cCff2v6NqYV0ohNIeOBUKhXAK9pQJsZ4sPhk5lvVVCuHRKs6FgYFwjlWPQqHStzyRyTFv8uTsVR3MjWP3QqUS7h27qf+7Suh80qssrdPoCoPafHIOvw2ELqZru7Gg1nSSq4uehEqoDMbIRrtKeEoa0rE2CrCFA+HFta4FM3pC+cGb0SyFnhkLuq69CAejtM+6S0qER70vApqcPY8iWd2ZHfrUUaoUSeZJikHyrZwIMxJJoVApdUaiHypVSpHWEc3wd18/kVVjAVZpLR2OCiHHbp3iN5rw6tyWJUu2nHv9BPFk962eclNYcTsGrIQHW2OlwZaHd4hbK5gaEg2BP1I7DGpQZRttLblcSxvbdQEMkafJkoy2eZtOXKQqHmlxhvZE9bdxVus7rPYLJzbNa3Pp5RPBw86Hpmxh512ehvPFpaRBMSZvJfz260NT5ljSn8jTQJG0/ZLo578SNRZaY8luTP7GCrKxFmmwaRs6Rho72Bo8ahs6/Bu9jhq7IBu8sht9RDT2rGnwofUfT78/AU+1mnSH4ucAAAAASUVORK5CYII=');
   background-repeat: no-repeat;
   background-size: 18px 18px;
   opacity: 0.7;
   cursor: pointer;
}

#Options:hover {
   opacity: 1.0;
}

.Option {
   display: none;
}

.Advanced .Option {
   display: block;
}

.Advanced #Domain {
   padding-right: 45px;
}


/* Save button */

#SaveDefaults {
   float: right;
   width: 18px;
   height: 18px;
   margin-right: 8px;
   background-color: #fff;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURUxpcQAAAAAAAD5+edwAAAACdFJOUwAH6PdYmwAAAD9JREFUGNPF0KsRACAMwNAcklE6GlMwSiXXKSmfojAoop4O2UYNRPEEzJFVakADLWDvgOLY3cDsE+TA9o60oB24XkzxWNPvZAAAAABJRU5ErkJggg==');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 16px 16px;
   -webkit-transition: background 0.5s linear;
   transition: background 0.5s linear;
   opacity: 0.7;
   cursor: pointer;
}

#SaveDefaults:hover {
   opacity: 1.0;
}

#SaveDefaults.Success {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAB+UExURUxpcQoKCuPj48HBwQMDAwcHBxAQEAAAAAAAAA0NDeTk5ImJiR0dHXFxcTk5ORUVFXV1dVdXV5ycnIuLiykpKfDw8G1tbebm5n9/f/X19UlJSYaGhhcXF25ubunp6eDg4DIyMmlpaTU1NZubm9XV1VFRUYSEhI6OjuHh4aurq4zmssgAAAAIdFJOUwD///////8HZqwuHAAAAJZJREFUOMvVk8sSgjAMRYM8vEVURETBNz7A//9BFshMHSa3GzecVZue6aRJKiLQkB57bTNEMRK++yFMBTgFOAVMVeiZ/wo6fxJEQRUO+YYKd1T0hgduJROeXnSlOdT40CQbvOgrLsZrqXDGW63DMtrKPjzphVoBWYGjLszWMKHZkVL7AZDSXiyCJB7PlqubjoGw/q9y3gER0xJYR8gIqQAAAABJRU5ErkJggg==');
   -webkit-transition: background 0s linear;
   transition: background 0s linear;
}


/* Field style for non-input elements */

.Field {
   height: 16px;
   padding: 10px 5px;
   font-size: 16px;
   text-align: center;
   border-radius: 4px;
}


/* Buttons */

.Button:active {
   margin-top: 2px !important;
   border-bottom: 0 !important;
}


/* Result fields */

#Result {
   padding-top: 10px;
}

.Offer #Generate {
   display: none;
}

.Offer #Mask,
.Offer #Output {
   display: block;
}


/* Generate button */

#Generate {
   padding-bottom: 8px;
   color: #fff;
   background-color: #356;
   font-weight: bold;
   border-bottom: solid 2px #023;
   cursor: pointer;
}

#Generate:hover {
   color: #fff;
   background-color: #467;
   border-bottom: solid 2px #134;
}


/* Password output fields */

#Output {
   display: none;
}

#Mask {
   display: none;
   height: 36px;
   overflow: hidden;
   position: relative;
}

#Output, #MaskText {
   color: #fff;
   background-color: #666;
   border: none;
   border-bottom: solid 2px #666;
   font-family: monospace;
   height: 14px;
   word-wrap: break-word;
   overflow-wrap: break-word;
}

#MaskText {
   border-color: #444;
   cursor: pointer;
}

#Output::selection {
   background-color: #fff;
   color: #333;
}

#Output::-moz-selection {
   background-color: #fff;
   color: #333;
}

.Reveal #MaskText {
   display: none;
}

.Reveal #Output {
   display: block;
}


/* Copy-to-clipboard button */

#CopyButton {
   float: right;
   width: 24px;
   height: 14px;
   margin-top: 0;
   background-color: #356;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAZFJREFUeNrtm0FKAzEUhlvpUrHMqtADCC56AzdCb+CRPEwX3kDoRvAGeoJZdCUOzn78C1nZMElJXlLb74dHFk3SvG/evCRDMp0U1iCN/T6VSo7nanLhAgAA/O/pUraRtUNAvnf8mPqp7YewWufL0ptzPB3eqXiXNTEE/yatGCdTlPB/X7IHNf8MRcBzrPP/TI3zLRgB3ypuCzyR0hGwV6/mNyEAg+WAQvP8se1Tx8ssAIAL1yw1CXnUjSXRxCTZ584JFhGwNXxgr9lnldy7NTW/V/FmsJbwLmRSx589AtwAV7IX2S5DlzvX1yrkfJUI8NSfq0pn9C3hWsVPznWIRQ54NMwB6yJfbBJ3Yx+yxmBcjevbdDeaazu634I+yRYZHF+4vlqL7bhFDiiqU8wBLIUBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJ6ZZagel7/gQAQAAQN0cUPtMEBEAAACYA+jO2N8+BsD2jAEc3DfwnRS1Ou9fW3EXJw3O+9fW6H2DXwyV/bjOkCPhAAAAAElFTkSuQmCC');
   background-repeat: no-repeat;
   background-size: 16px 16px;
   background-position: 50% 50%;
   -webkit-transition: background 0.5s linear;
   transition: background 0.5s linear;
   border-left: solid 1px #999;
   border-bottom: solid 2px #023;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   cursor: pointer;
}

#CopyButton.Active {
   border-top: solid 2px #fff;
   border-bottom: 0;
}

#CopyButton.Success {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAAAXNSR0IArs4c6QAAAglJREFUaN7tmc1LW0EQwCehVIRiQRRDQy2UQjAXLxZy9x9QULzmWCFQqCcPFfwncu2tCNFcBC8eKsYvhF6UlN4bTFuQBpUipfLrwXWpyQvvI8lswDent8Pszu/x5s3MMiIRhSYRbYkBegBAmjVq7Q4mpLTdV2ONtJf7DOehDooKAHBOthWgFOGgqABQbgVoqAJc+gaV30FBg9Lv3BigfwGCBmnQIOscoBwKoNx9gKx3ogqaaDoGECFNibqv8zolr1QbGcAqnoaqK0/CBrE/wGwogNnuA1QZDux+mGr3AaDGHClf5ynm/i/q3QSIJA8U4IJj9t0A/GKF5yIiLLoA2LrLFuS41geoMGj2PONMPwZO7NsPcKQfhFdk7I4PLv6CvLV/6+I3tNWfaf7qA/xg1Ni+bO0ZNABmbAk+dZEJPxq7BBsuUvFPRozdeze1YMFYTTUHnw7AprF57PX1ew9wcVt2RFjVKscNtvluVwVjMckfHYAiQyK8NqsDkiIiPOKzTkOybjUHwDUTZrWs1REVrCYPLJnnibu633uAotUMsExCRIQkh3o94VePFvydblM63rTjFb91Ad7cs0+wo92Wf7pnP+/iXpCz2jG+uQD4wgsREUapuLoZXbLLHjfx3fAhAagNOGKAvgPotcQAfQjQUPXvMbQqqwJ4jO3CzAM6Fa/BZeB5QKfSNE/4B+7t6AYuE5oKAAAAAElFTkSuQmCC');
   -webkit-transition: background 0s linear;
   transition: background 0s linear;
}


/* Bookmarklet view */

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

   body {
      background-color: #fff;
   }

   #main {
     margin: 0;
     padding: 15px;
     border-radius: 0;
   }

   #Output {
     height: auto;
   }

}
