.form .avatar { width: 128px; height: 128px; } .form .avatar + input[type="file"] { margin: 16px 0 0 0; vertical-align: middle; } .form form > div:not(:last-child) { margin-bottom: 16px; } .form form label, .trophies-panel p { display: inline-block; margin-bottom: 4px; } .form label + .desc { margin: 0 0 4px 0; } .form input[type='text'], .form input[type='email'], .form input[type='date'], .form input[type='password'], .form input[type='search'], .form textarea, .trophies-panel > div { display: block; width: 100%; padding: 6px 8px; border: 1px solid #c8c8c8; /* Transitions when resizing with the mouse produces apparent lag */ transition: all .15s ease, width 0s, height 0s; } .form input[type='text']:focus, .form input[type='email']:focus, .form input[type='date']:focus, .form input[type='password']:focus, .form input[type='search']:focus, .form textarea:focus { border-color: #7cade0; box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.5); } .form textarea { max-width: 100%; resize: vertical; } .form input[type="checkbox"], .form input[type="radio"] { display: inline; vertical-align: middle; } .form input[type="submit"] { /*width: 20%;*/ } .form form .msgerror { color: red; font-weight: 400; margin-top: 5px; } .form .desc { font-size: 80%; color: gray; } .form hr { color: white; height: 3px; border: 0 solid #b0b0b0; border-width: 1px 0; margin: 24px 0; } .trophies-panel label { margin-right: 5px; } .trophies-panel p:first-child { margin-top: 0; } .trophies-panel p label { margin: 0; }