/*

FORM-CSS FRAME WOERK
V-0.3.4

*/

/*common
--------------------------------------------------*/
/*all*/
.form *{
	line-height:1;
	vertical-align:middle;
	outline:0;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

/*type-A-group*/
.form input[type="text"],
.form input[type="password"],
.form input[type="search"],
.form input[type="email"],
.form input[type="url"],
.form input[type="tel"]{
	width:100%;
	border:1px solid #bbb;
	padding:0 10px;
	border-radius:5px;
	height:42px;
	background:#fff;
	font-size:16px;
	-webkit-appearance:none;
}

/*type-B-group*/
.form input[type="file"],
.form input[type="submit"],
.form input[type="reset"],
.form input[type="button"],
.form .select,
.form textarea{
	width:100%;
	border:1px solid #bbb;
	border-radius:5px;
	background:#fff;
	font-size:16px;
	-webkit-appearance:none;
}

/*type-C-group*/
.form input[type="file"],
.form input[type="submit"],
.form input[type="reset"],
.form input[type="button"],
.form label,
.form select,
.form select option{
	cursor:pointer;
	background:#fff;
	font-size:16px;
	-webkit-appearance:none;
}


/*search
--------------------------------------------------*/
.form input[type="search"]{
	padding:0 0 0 30px;
}

/*ff hack*/
@-moz-document url-prefix(){
	.form input[type="search"]{
		padding:0 10px 0 35px;
	}
}

.form input[type="search"]:focus{
	outline-offset:-2px;
}

.form input[type="search"]:-webkit-search-decoration{
	display:none;
	-webkit-appearance:searchfield-decoration;
	display:inline-block;
}

.form .f-search{
	position:relative;
}

.form .f-search:after{
	content:"";
	position:absolute;
	top:50%;
	left:10px;
	margin-top:-9px;
	display: block;
	width: 18px;
	height:18px;
	border-radius:50%;
	background:#ccc url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22%u30EC%u30A4%u30E4%u30FC_2%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%220%200%2018.2%2018.3%22%20enable-background%3D%22new%200%200%2018.2%2018.3%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2211.3%22%20y1%3D%2210.7%22%20x2%3D%2214.8%22%20y2%3D%2214.2%22/%3E%0A%09%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20cx%3D%228.6%22%20cy%3D%228%22%20r%3D%223.8%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A);
}


/*file
--------------------------------------------------*/
.form input[type="file"]{
	margin:0;
	padding:10px;
	background:-moz-linear-gradient(top,#fff,#f7f7f7 100%);
	background:-webkit-linear-gradient(top,#fff,#f7f7f7 100%);
	background:linear-gradient(top,#fff,#f7f7f7 100%);
}

/*ff hack*/
@-moz-document url-prefix(){
	.form input[type="file"]{
		padding:7px;
	}
}

/*textarea
--------------------------------------------------*/
.form textarea{padding:10px;}

/*select
--------------------------------------------------*/
.form select{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border:0;
	background:none transparent;
	width:100%;
	padding:0 35px 0 10px;
	height:40px;
	position:relative;
	z-index:2;
}

.form select::-ms-expand{
	/*ie10-later*/
	display:none;
}

.form .select{
	padding:0;
	position:relative;
	background: -moz-linear-gradient(top,#fff,#f7f7f7 100%);
	background: -webkit-linear-gradient(top,#fff,#f7f7f7 100%);
	background: -ms-linear-gradient(top,#fff,#f7f7f7 100%);
	background: linear-gradient(top,#fff,#f7f7f7 100%);
}


.form .select:after{
	position:absolute;
	top:50%;
	right:10px;
	margin-top:-9px;
	display: block;
	width: 18px;
	height:18px;
	background:#bbb url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2018%2018%22%20enable-background%3D%22new%200%200%2018%2018%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20points%3D%2214.1%2C6.4%209%2C11.6%203.9%2C6.4%20%22/%3E%0A%3C/svg%3E%0A);
	border-radius:50%;
	content: "";
}

.form .select:hover:after{background-color:#09c;}


/*checkbox & radio
--------------------------------------------------*/
.form .f-checkbox input[type="checkbox"],
.form .f-radio input[type="radio"]{
	display: none;
}

.form .f-checkbox label,
.form .f-radio label{
	position:relative;
	min-height:42px;
	//padding:10px 10px 10px 35px;
}


/*checkbox
--------------------------------------------------*/

.form .f-checkbox label:before{
	position:absolute;
	content:"";
	top:50%;
	left:10px;
	width:18px;
	height:18px;
	margin-top:-9px;
	background:#ccc;
	border-radius:3px;
}

.form .f-checkbox input[type="checkbox"]:checked + label:before{
	background:#09c;
}

.form .f-checkbox input[type="checkbox"]:checked + label:after{
	position: absolute;
	content:"";
	top:50%;
	left:10px;
	width:18px;
	height:18px;
	margin-top:-9px;
	background:url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22%u30EC%u30A4%u30E4%u30FC_2%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%220%200%2018.2%2018%22%20enable-background%3D%22new%200%200%2018.2%2018%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20points%3D%2214.5%2C6%208%2C12.5%203.7%2C8.2%20%22/%3E%0A%3C/svg%3E%0A);
}


/*radio
--------------------------------------------------*/

.form .f-radio label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: 10px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: #ccc;
	border-radius: 50%;
}

.form .f-radio input[type="radio"]:checked + label:before{
	background:#09c;
}

.form .f-radio input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: 14px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 50%;
	background:#fff;
}


/*button
--------------------------------------------------*/
.form input[type="submit"],
.form input[type="button"],
.form input[type="reset"]{
	border-radius:0;
	-webkit-appearance:none;
	border-radius:5px;
	padding:0 10px;
	height:42px;
	background: -moz-linear-gradient(top,#fff,#f6f6f6 100%);
	background: -webkit-linear-gradient(top,#fff,#f6f6f6 100%);
	background: -ms-linear-gradient(top,#fff,#f6f6f6 100%);
	background: linear-gradient(top,#fff,#f6f6f6 100%);
}

.form input[type="submit"]:hover,
.form input[type="button"]:hover,
.form input[type="reset"]:hover{
	background: -moz-linear-gradient(top,#f5f5f5,#fff 100%);
	background: -webkit-linear-gradient(top,#f5f5f5,#fff 100%);
	background: -ms-linear-gradient(top,#f5f5f5,#fff 100%);
	background: linear-gradient(top,#f5f5f5,#fff 100%);
}



/*f-group
--------------------------------------------------*/
.form .f-group{
	padding:0;
	//box-shadow:0 0 5px 0 rgba(0,0,0,0.1);
}

.form .f-group label{
	border:1px solid #bbb;
	padding:11px 10px 11px 35px;
	background:-moz-linear-gradient(top,#fff,#f7f7f7 100%);
	background:-webkit-linear-gradient(top,#fff,#f7f7f7 100%);
	background:-ms-linear-gradient(top,#fff,#f7f7f7 100%);
	background:linear-gradient(top,#fff,#f7f7f7 100%);
}

.form .f-group input:checked + label{
	background:-moz-linear-gradient(top,#f7f7f7,#fff 100%);
	background:-webkit-linear-gradient(top,#f7f7f7,#fff 100%);
	background:-ms-linear-gradient(top,#f7f7f7,#fff 100%);
	background:linear-gradient(top,#f7f7f7,#fff 100%);
}

.form .f-group label:only-of-type{
	display:block;
	border-radius:5px;
}


/*f-group-w*/
.form .f-group-w{
	display:table;
	border-collapse:separate;
	width:100%;
}

.form .f-group-w label{
	display:table-cell;
	border-left:0px;
}

.form .f-group-w label:first-of-type{
	border-radius:5px 0 0 5px;
	border-left:1px solid #ccc;
}

.form .f-group-w label:last-of-type{
	border-radius:0 5px 5px 0;
}

.form .f-group-w label:only-of-type{
	border-radius:5px;
}

/*f-group-h*/
.form .f-group-h{
	width:100%;
}

.form .f-group-h label,
.form .f-group-h input{
	display:block;
	margin-top:-1px;
}

.form .f-group-h input{border-radius:0;}

.form .f-group-h label:first-of-type,
.form .f-group-h input:first-of-type{
	border-radius:5px 5px 0 0;
}

.form .f-group-h label:last-of-type,
.form .f-group-h input:last-of-type{
	border-radius:0 0 5px 5px;
}

.form .f-group-h label:only-of-type,
.form .f-group-h input:only-of-type{border-radius:5px}

/*f-group-2col*/
.form .f-group-2col{
	display:block;
}

.form .f-group-2col label{
	display:block;
	width:50%;
	float:left;
	margin-bottom:-1px;
}

.form .f-group-2col label:nth-of-type(2n){
	border-left:0;
}

.form .f-group-2col label:nth-of-type(1){
	border-radius:5px 0 0 0;
}

.form .f-group-2col label:nth-of-type(2){
	border-radius:0 5px 0 0;
}

.form .f-group-2col label:last-of-type{
	border-radius:0 0 5px 0;
}

.form .f-group-2col label:nth-last-of-type(2){
	border-radius:0 0 0 5px;
}

/*f-size-auto*/
.form .f-size-auto,
.form input.f-size-auto{
	width:auto;
	max-width:100%;
	display:inline-block;
}

/*f-center*/
.f-center{text-align:center}

/*f-size*/
.form .f-size-1,.form input[type].f-size-1{width:50px}
.form .f-size-2,.form input[type].f-size-2{width:100px}
.form .f-size-3,.form input[type].f-size-3{width:150px}
.form .f-size-4,.form input[type].f-size-4{width:200px}
.form .f-size-5,.form input[type].f-size-5{width:250px}
.form .f-size-6,.form input[type].f-size-6{width:300px}
.form .f-size-7,.form input[type].f-size-7{width:350px;max-width:100%}
.form .f-size-8,.form input[type].f-size-8{width:400px;max-width:100%}
.form .f-size-9,.form input[type].f-size-9{width:450px;max-width:100%}
.form .f-size-10,.form input[type].f-size-10{width:500px;max-width:100%}

/*f-hsize*/
.form textarea.f-hsize-1{min-height:50px;}
.form textarea.f-hsize-2{min-height:100px;}
.form textarea.f-hsize-3{min-height:150px;}
.form textarea.f-hsize-4{min-height:200px;}
.form textarea.f-hsize-5{min-height:250px;}

/*f-box
--------------------------------------------------*/
.f-box{
	display:table !important;
}

.f-box-left{
	display:table-cell;width:100%;
}

.f-box-left input[type="search"],
.f-box-left input[type="text"]{
	border-radius:5px 0 0 5px;
	border-right:0;
}

.f-box-right{
	display:table-cell;
}

.f-box-right input[type="submit"],
.f-box-right input[type="button"]{
	border-radius:0 5px 5px 0;
	margin-left:-1px;
	margin-right:-1px;
	position:relative;
	z-index:2;
}



/*other
--------------------------------------------------*/
textarea.f-code{height:auto;background:#222;border:0;color:#fff;}


@media screen and (max-width:767px){

}