Sandbox: HTML form

_edited.css

#sign-up input[type="submit"] {
	float: right;
	margin-bottom: 10px;
	margin-right: 10px;
	padding: 8px 15px;
	font: bold 12px "DroidSansBold", Verdana, sans-serif;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	border: none;
	background-color: #e2e2d9;
	cursor: pointer;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9c69), to(#dc692e)); 
	background-image: -moz-linear-gradient(top, #FF9C69, #DC692E);
	text-shadow: 1px 1px 2px rgba(100, 48, 22, 1);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

#sign-up input[type="submit"]:hover {
  -moz-box-shadow: -2px 2px 4px rgba(25, 12, 5, 0.5);
  -webkit-box-shadow: -2px 2px 4px rgba(25, 12, 5, 0.5);
  box-shadow: -2px 2px 4px rgba(25, 12, 5, 0.5);

}

index.html

  <div id="wrap">
  <div id="blocks">
    <section id="newsletter" class="box box-right">
      <header><h1 class="script">Get In Touch</h1></header>
      <form id="sign-up">
        <fieldset>
          <label>Name</label>
          <input type="text" placeholder="Name" required/>
        </fieldset>
        <fieldset>
          <label>Email</label>
          <input type="email" placeholder="Email" required/>
        </fieldset>
        <fieldset>
          <label>Phone</label>
          <input type="text" placeholder="Phone"/>
        </fieldset>
        <fieldset>
          <label>Favorite Beer</label>
          <input type="text" placeholder="Favorite Beer" required/>
        </fieldset>
        <fieldset>
          <input type="submit" value="Submit" />
        </fieldset>
      </form>
    </section>
  </div>
</div>

style.css

@font-face {
  font-family: 'DroidSansRegular';
  src: url('fonts/DroidSans-webfont.eot');
  src: local('☺'), url('fonts/DroidSans-webfont.woff') format('woff'), url('fonts/DroidSans-webfont.ttf') format('truetype'), url('fonts/DroidSans-webfont.svg#webfontw7zqO19G') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'DroidSansBold';
  src: url('fonts/DroidSans-Bold-webfont.eot');
  src: local('☺'), url('fonts/DroidSans-Bold-webfont.woff') format('woff'), url('fonts/DroidSans-Bold-webfont.ttf') format('truetype'), url('fonts/DroidSans-Bold-webfont.svg#webfontSOhoM6aS') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'MarketingScriptRegular';
  src: url('fonts/MarketingScript-webfont.eot');
  src: local('☺'), url('fonts/MarketingScript-webfont.woff') format('woff'), url('fonts/MarketingScript-webfont.ttf') format('truetype'), url('fonts/MarketingScript-webfont.svg#webfontZ5AiaAsu') format('svg');
  font-weight: normal;
  font-style: normal;
}
/***** Reset *****/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote { margin: 0; padding: 0; }
fieldset,img { border: 0; }
ol,ul { list-style: none; }
h1,h2,h3,h4 { font-size: 100%; font-weight: normal; }
a { text-decoration: none; }
a img { border: none; }
.texthide { text-indent: -9999em; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display:block;
}
body {
  background: url(bg.png) repeat;
}
#wrap {
  margin: 0 auto;
  width: 960px;
  padding: 0;
}
/***** BLOCKS*****/
#blocks {
  float: left;
  margin-top: 20px;
}
#blocks section {
  float: left;
  width: 290px;
  display: inline;
  background: #fafaf6;
  border: 5px solid #e9e9e4;
  margin-right: 30px;
}
#blocks section:last-child {
  margin-right: 0;
}
.box h1.script {
  font: normal 24px "MarketingScriptRegular", Georgia, serif;
  color: #717165;
  margin-left: 10px;
  padding: 5px 0 0 0;
  border-bottom: 1px solid #ecece9;
  width: 270px;
  text-align: left;
}
/***** NEWSLETTER *****/
#sign-up fieldset { margin: 10px 0 10px 10px; }
#sign-up label { 
  display: block; 
  font: bold 14px "DroidSansBold", Verdana, sans-serif; 
  line-height: 1.5em; 
  color: #dc692e;  
}
#sign-up fieldset:last-child { margin: 0; }
#sign-up fieldset input[type="text"], #sign-up fieldset input[type="email"] { 
  width: 250px; 
  padding: 8px 8px; 
  font-size: 12px;
  color: #89897e; 
  border: 1px solid #e5e5dd; 
  background: #f4f4ed;
  -webkit-border-radius: 7px; 
  -moz-border-radius: 7px; 
  border-radius: 7px;
  -webkit-box-shadow: inset 1px 1px 2px #ccc;
  -moz-box-shadow: inset 1px 1px 2px #ccc;
  box-shadow: inset 1px 1px 2px #ccc; 
}