.form_wrapper { width: 50%; } form > div { clear: both; overflow: hidden; padding: 1px; margin: 0 0 10px 0; } form > div > fieldset > div > div { margin: 0 0 5px 0; } form > div > label, legend { width: 25%; float: left; padding-right: 10px; } form > div > div, form > div > fieldset > div { width: 75%; float: right; } form > div > fieldset label { font-size: 90%; } fieldset { border: 0; padding: 0; } input[type=text], input[type=email], input[type=url], input[type=password], textarea { width: 100%; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #eee; border-bottom: 1px solid #eee; } input[type=text], input[type=email], input[type=url], input[type=password] { width: 50%; } input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, textarea:focus, input[type=text]:hover, input[type=email]:hover { outline: 0; color: #333; border-color: rgba(41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6); outline: 0 none; } @media (max-width: 600px) { form > div { margin: 0 0 15px 0; } form > div > label, legend { width: 100%; float: none; margin: 0 0 5px 0; } form > div > div, form > div > fieldset > div { width: 100%; float: none; } input[type=text], input[type=email], input[type=url], input[type=password], textarea, select { width: 100%; } } @media (min-width: 1200px) { form > div > label, legend { text-align: right; } }