/* Add some margin to the page and set a default font */ body { margin: 30px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; } /* Style the form with a coloured background (and a gradient for Gecko/WebKit browsers), along with curved corners and a drop shadow */ form { width: 92%; margin: 0 auto; padding: 20px; overflow: auto; color: #3e4a49; background-color: #f5eedb; background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#f5eedb), color-stop(1, #faf8f1) ); background: -moz-linear-gradient( center bottom, #f5eedb 0%, #faf8f1 100% ); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); } /* Give form elements consistent margin, padding and line height */ form ul { list-style: none; margin: 0; padding: 0; } form ul li { margin: .9em 0 0 0; padding: 0; } form * { line-height: 1em; } /* Form heading */ form h2 { margin: 0 0 1.5em 0; padding: 0; text-align: center; } /* Give each fieldset a darker background, dark curved border and plenty of space */ /**/ fieldset { text-align:center; height:auto; border:#06F 1px groove; margin:0 auto; margin-top:10px; border-radius:15px; box-shadow:#CCC 6px 6px; padding:10px; font-size:12px; background-color:White; } /* Give each fieldset legend a nice curvy green box with white text */ legend { color: #fff; background: #8fb98b; font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; font-weight: bold; text-align: center; padding: 5px; margin: 0; width: AUTO; border: 2px solid #593131; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* The field labels */ label { display: block; float: left; clear: left; text-align: right; width: 30%; padding: .4em 0 0 0; margin: .15em .5em 0 0; } /* Style the fields */ input, select, textarea, #DropDownList1,#UserType{ display: block; margin: 0; padding: .4em; width: 56%; } input, textarea, .date , #DropDownList1,#UserType{ border: 2px solid #eae1c0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: rgba(0,0,0,.5) 1px 1px 1px 1px inset; -moz-box-shadow: rgba(0,0,0,.5) 1px 1px 1px 1px inset; -webkit-box-shadow: rgba(0,0,0,.5) 1px 1px 1px 1px inset; background: #fff; } input , #DropDownList1,#UserType{ font-size: .9em; } select,.date, #DropDownList1,#UserType{ padding: 0; margin-bottom: 2.5em; position: relative; top: .7em; } textarea { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: .9em; height: 5em; } /* Place a border around focused fields, and hide the inner shadow */ form *:focus { border: 2px solid #593131; outline: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } /* Display correctly filled-in fields with a green background */ input:valid, textarea:valid { background: #efe; } /* Submit button */ input[type="submit"] { margin: 50px auto 0 auto; width: 12em; padding: 10px; border: 2px solid #593131; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); color: #fff; background: #593131; font-size: 1.2em; font-weight: bold; -webkit-appearance: none; } input[type="submit"]:hover, input[type="submit"]:active { cursor: pointer; background: #fff; color: #593131; } input[type="submit"]:active { background: #eee; box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset; -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset; -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset; } /* Header/footer boxes */ .wideBox { clear: both; text-align: center; margin: 70px; padding: 10px; background: #ebedf2; border: 1px solid #333; line-height: 80%; } .wideBox h1 { font-weight: bold; margin: 20px; color: #666; font-size: 1.5em; } /* Validator error boxes */ .error { background-color: #fffe36; border: 1px solid #e1e16d; font-size: .8em; color: #000; padding: .3em; margin-left: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); }