body{ background-color: #fff; font-family: Arial, sans-serif; } form.login_form{ background-color: #fff; border: 3px double #e4007f; padding: 60px; width: 500px; margin: 0 auto; box-sizing: border-box; } form.login_form dl { margin: 0 auto; padding: 0; width: 300px; } form.login_form dl dt { float: left; clear: both; width: 100px; line-height: 2em; color: #e4007f; } form.login_form dl dd { margin: 0 0 10px 0; line-height: 2em; } form.login_form dl dd:before { content: ":"; font-weight : bold; margin-right: 10px; color: #e4007f; } form.login_form dl dd input { width: 180px; line-height: 2em; color: #333; border: 1px #e4007f dotted; } form.login_form input[type=submit] { width: 150px; height: 40px; margin: 0 auto; display: block; color: #e4007f; background-color: #fff; border: 1px #e4007f solid; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } form.login_form input[type=submit]{ float: left; } form.login_form input[type=submit]:hover { background-color: #e4007f; color: #fff; } form.login_form input[type=reset] { width: 150px; height: 40px; margin: 0 auto; display: block; color: #e4007f; background-color: #fff; border: 1px #e4007f solid; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } form.login_form input[type=reset]:hover { background-color: #e4007f; color: #fff; } @media screen and (max-width: 480px) { form.login-form { width: 100%; } form.login-form div { width: 80%; } form.login-form div dl { width: 100%; float: none; margin: 0; } form.login-form div dt:before { content: none; } form.login-form div dt input { width: 100%; } form.login-form input[type=submit] { width : 50%; } }