.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, sans-serif !important } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd } form { max-width: 70%; } form .message { float:right; padding-top: 6px; color:#b80000; } .holder-required { background-color:#ffb8b8; } form .good { background-color: #ecf9d0; border-color: #8fbe00; } form .bad { background-color: #f9d0d0; border-color: #be0000; } .checkbox, .radio { margin-top: 3px; } .checkbox label.right, .radio label.right { float:left; text-align: left; } #MemberLoginForm_LoginForm_action_dologin, .Actions .action { padding: 6px 20px } #MemberLoginForm_LoginForm, #MemberLoginForm_LostPasswordForm { max-width: 500px } #ForgotPassword a { margin-top: 15px } #ForgotPassword { margin-top: 6px } div.field { width: 100%; float: left; margin-bottom: 10px; padding:10px; } .ui-widget { font-family: Arial, Helvetica, sans-serif } form label.left { width: 20%; padding-right: 5%; padding-bottom:10px; margin-top: 3px; display: block; font-size: 13px; } form label.right { float: right; width: 20%; padding-left: 5%; display: block; font-size: 13px; } .main form .middleColumn { float: left; width: 50% !important; } .main form .middleColumn .middleColumn { width: 100% !important } .header form .middleColumn { float: none; width: 100% !important; } .listbox option { padding: 3px 0 } form input.text, form textarea, form .textajaxuniquetext, form select { width: 98%; padding: 3px 1%; font-size: 15px; background-color:#fff; } form input.text:focus, form textarea:focus, form .textajaxuniquetext:focus, form select:focus { outline:none; } form input.sitetreeurlsegment { width: 200px } form span.readonly { font-size: 16px } form input[disabled] { background-color: #f7f7f7; border: 1px solid #dad9d9; } form .creditCardField input, form input.currency { padding: 5px 1%; width: 50px; } form input.numeric { padding: 5px 1%; width: 50px; } form #DMYDate-month, form #DMYDate-day { width: 25px } form .checkboxset ul, form .optionset ul { margin: 0; } form .checkboxset li, form .optionset li { margin-bottom: 5px; list-style-type:none; } form .checkboxset li .checkbox, form .optionset li .radio{ margin-top: 5px; } input[type="submit"] { border-radius:20px; background-color:#b80000; border:none; color:#fff; font-weight: bold; font-size: 13px; } .resetformaction { float:right; border-radius:20px; background-color:#9F9F9F; border:none; color:#fff; font-weight: bold; font-size: 13px; } @media only screen and (max-width: 700px) { .main form .middleColumn { float: right; width: 100% !important; : ; } .header form .middleColumn { float: none; width: 100% !important; : ; } form label.left, #MemberLoginForm_LoginForm label { margin-bottom: 8px } div.field { position:relative; padding-bottom: 20px; } .main div.field { border-bottom:1px solid #E5E5E5; } .checkbox label.right, .radio label.right { float:left; text-align: left; } form label.left { width:50%; padding:0; } form label.right { position: absolute; right: 10px; margin-top: 3px; width:50%; padding:0; } .checkbox label.right, .radio label.right { position:relative; right:auto; margin-top:0; } } @media only screen and (max-width: 900px) { form { max-width: 100%; } } @media only screen and (min-width: 700px) { #MemberLoginForm_LoginForm #Remember, #MemberLoginForm_LoginForm .Actions, #MemberLoginForm_LostPasswordForm .Actions { padding-left: 30% } }