//LESS

@import "base";

#content{
	padding: 0 40px;
	width: 880px;
	.info{
		display: block;
		width: 650px;
		margin: 0 auto 40px auto;
		line-height: 24px;
	}
	
	form{
		width: 650px;
		margin: 0 auto;
		
		.star{
			text-align: right;
			display: block;
			font-size: 12px;
			color: gray;
			
			span{
				color: @red;
			}
		}
		
		label{
			width: 150px;
			color: @red;
			display: inline-block;
			vertical-align: top;
			
			&.error{
				font-size: 13px;
				display: inline-block;
				margin-left: 7px;
				width: 150px;
				vertical-align: -5px;
			}
			
			.note {
				display: block;
				font-size: 12px;
				color: gray;
			}
		}
		
		input,textarea{
			.border-radius(3px);
			padding: 5px;
			font-family: Verdana;
			display: inline-block;
			margin-left: 15px;
			vertical-align: top;
		}
		
		input[type=text],textarea{
			border: 1px lighten(gray,30%) solid;
			.box-shadow(1px 1px 3px lighten(gray,20%) inset);
		}
		
		input[type=text]{
			width: 150px;
			&.large{
				width: 250px;
			}
			
			&.small{
				width: 80px;
			}
		}
		
		textarea{
			width: 50%;
			height: 80px;
		}
		
		input[type=file]{
			width: 150px;
		}
		
		button{
			background: @red;
			color: white;
			border: 0;
			width: 100px;
			height: 25px;
			.border-radius(2px);
			font-family: Verdana;
			cursor: pointer;
			transition: 0.3s;
			-webkit-transition: 0.3s;
			display: block;
			margin: 50px auto 0 auto;
			
			&:hover{
				background: lighten(@red,10%);
			}
		}
		
		hr{
			margin: 10px 0;
			opacity: 0.3;
		}
		
		.ps{
			color: gray;
			font-size: 12px;
			margin-left: 178px;
			display: block;
		}
		
		img.code{
			display: inline-block;
			vertical-align: -15px;
			margin-left: 10px;
		}
	}
}