* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-size: 16px; font-family:"Trebuchet MS", Helvetica, sans-serif; background: #eeefef; }
.site_container { position: absolute; top: 0px; left: 0; right: 0; height: 300px; background: #193b84; background: linear-gradient(140deg,#193b84 15%,#037bc1);}
.header { margin: 24px 0 40px; }
h1 { color: #193b84; margin: 12px 0 24px; text-transform: uppercase;}
h3 { font-size: 22px; }
p { margin: 4px 0 20px; line-height: 1.5em; font-size: 0.8em; font-family: Helvetica, sans-serif; }
.site_inner { margin: 0 auto; padding: 20px 40px 60px; background: #fff; border: 1px #ddd solid; box-shadow: 0 12px 20px rgba(40,40,40,0.3); border-radius: 2px; }

button { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
label { font-size: 14px; line-height: 1.4em; margin: 0; }
button.secondary { float: right; border: 1px #bdc7d8 solid; height: 24px; width: 80px; font-size: 0.9em; border-top-left-radius: 4px; border-top-right-radius: 4px; background: #bdc7d8; color: #fff; }
textarea { width: 100%; font-size: 18px; padding: 8px; border: 1px #bdc7d8 solid; border-radius: 3px; border-top-right-radius: 0; resize: vertical; }

.required { color: #900; }
.control_buttons { margin: 24px 0; text-align: right; }
.control_buttons button { font-size: 0.9em; border: 1px #193b84 solid; padding: 4px 16px; border-radius: 4px; color: #193b84; box-shadow: 0 2px 4px #ccd; cursor: pointer; } 
.control_buttons button.primary { color: #edeeff; background-color: #193b84 }
.control_buttons button:hover, button.secondary:hover { background-color: #037bc1; border: 1px #037bc1 solid; color: #edeeff }

.error { border: 1px #900 solid; }
.length_error { color: #900; }

#generator_results .failure { border: 1px #900 solid; color: #900; }
#generator_results .success > div { border: 1px #bdc7d8 solid; padding: 8px; border-radius: 3px; margin-bottom: 12px; }
@media ( max-width:800px ){
    .header, .site_inner { width: 92%; }
}