/* Forms _____________________________________________________ 320 and Up boilerplate extension Author: Andy Clarke Version: 0.9b URL: http://stuffandnonsense.co.uk/projects/320andup/ License: http://creativecommons.org/licenses/MIT/ _____________________________________________________ */ form { margin-bottom : 1.5em; } fieldset { margin-bottom : 1.5em; padding : 0; border-width : 0; } legend { margin-top : -.2em 0 1em 0; font-weight : bold; font-size : 1.2em; } label { font-weight : normal; } button, input, select, textarea { margin : 0; } label, input[type="button"], input[type="submit"], input[type="image"], button { cursor : pointer; } input, select { vertical-align : middle; } input[type=text], input[type=password], input[type=tel], input[type=email], input[type=url], input[type=search], textarea { padding : 2px; width : 100%; background-color : rgb(255,255,255); border : 1px solid rgb(200,200,200); font-family : inherit; font-size : inherit; } input[type=text]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=url]:focus, input[type=search]:focus, textarea:focus { border-color : rgb(100,100,100); } input[type="radio"] { vertical-align : text-bottom; } input[type="checkbox"] { vertical-align : bottom; } /* Colors for form validity */ input:valid, textarea:valid { /* Styles */ } input:invalid, textarea:invalid { -webkit-box-shadow : 0 0 2px rgb(255,0,0); -moz-box-shadow : 0 0 2px rgb(255,0,0); box-shadow : 0 0 2px rgb(255,0,0); } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color : rgb(240,221,221); } select { margin : .5em 0; background-color : rgb(255,255,255); border-width : 1px; border-style : solid; } textarea { overflow : auto; padding : 2px; } button { width : auto; padding : 8px 12px 9px; overflow : visible; background-color : rgb(227,227,227); border : 1px solid rgb(204,204,204); border-bottom-color : rgb(187,187,187); font-family : "Helvetica Neue", Helvetica, Arial; font-size : .875em; font-weight: bold; text-align : center; line-height : 1; color : rgb(51,51,51); text-shadow : 0 1px 0 rgb(255,255,255); } button:hover { cursor : pointer; background-color : rgb(217,217,217); } .ie6 legend, .ie7 legend { margin-left : -7px; } .ie6 input { vertical-align : text-bottom; } .ie7 input[type="checkbox"], .iem7 input[type="checkbox"] { vertical-align : baseline; }