/* CSS Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details,embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse:collapse;border-spacing: 0;}

/* End Reset */

#wrapper{	
	font:normal 12px Arial, Helvetica, sans-serif;	
}

#control{
	width:250px;	
	margin:0 auto;
	border-bottom-width:10px;
}

	#forms{		
	}
	
		#forms .form-box{	
			padding:0 2%;
		}
			#forms .form-fields{
			}
			
			#forms .form-fields li{
				display:block;
				max-width:300px;
				margin:15px 0;
			}
				#forms .form-fields label{
					display:block;
					text-transform:uppercase;
					font:bold 12px Verdana, Geneva, sans-serif
				}
				
				#forms .form-fields p{
					border:1px solid #333;					
				}
				
				input,select, #forms textarea {
					font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
					border:1px solid #000;
					font-size:12px;
					min-height:10px;
					padding:5px 8px;
					outline: none;
					display:block;
					width:220px;
					
					-webkit-border-radius:5px;
					-moz-border-radius:5px;
					-o-border-radius:5px;
					-ms-border-radius:5px;
					border-radius:5px;
				}
					input#width{width:100px;display:inline;margin-right:10px;}
					.form-fields span{
						font:normal 12px Arial, Helvetica, sans-serif; 
						color:#333;
						display:block;
					}
				
				button {					
					padding:5px;
					-webkit-border-radius:5px;
					-moz-border-radius:5px;
					-o-border-radius:5px;
					-ms-border-radius:5px;
					border-radius:5px;
					display:block;
					width:150px;
					margin:0 auto;
					background:#d7991e;
					border-color:#d7991e;
					font-weight:bold;
				}	
				textarea{					
					min-width:220px;
					max-width:220px;
					height:100px;
					margin-right:10px;
					display:block;
				}
					

#preview-area{
	text-align:center;
}
	#preview-area #preview-container{
		padding:20px;
		text-align:center;
	}
	
/* text */

header{
	padding:10px;
	text-align:center;
}

h1{
	font:bold 1.5em Arial, Helvetica, sans-serif;
}

/* forms */

:invalid { 
	border-color: #e88;
	-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
	-moz-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
	-o-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
	-ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
	box-shadow:0 0 5px rgba(255, 0, 0, .8);
}

:required {
	border-color: #88a;
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, .5);
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, .5);
	-o-box-shadow: 0 0 5px rgba(255, 255, 255, .5);
	-ms-box-shadow: 0 0 5px rgba(255, 255, 255, .5);
	box-shadow: 0 0 5px rgba(255, 255, 255, .5);
}