﻿/* CSS Document */
/* http://codepen.io/chriscoyier/pen/DmnlJ */

#responsive_form * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#responsive_form header {
	margin: 0 0 20px 0;
}
#responsive_form header div {
	/*font-size: 90%;*/
	color: #999;
}
#responsive_form header h2 {
	margin: 0 0 5px 0;
}
#responsive_form > div {
	clear: both;
	overflow: hidden;
	padding: 1px;
	margin: 0 0 10px 0;
}
#responsive_form > div > fieldset > div > div {
	margin: 0 0 5px 0;
}
#responsive_form > div > label, legend {
	width: 30%;
	float: left;
	padding-right: 10px;
}
#responsive_form > div > div, #responsive_form > div > fieldset > div {
	width: 70%;
	float: right;
}
#responsive_form > div > fieldset label {
	/*font-size: 90%;*/
}
#responsive_form fieldset {
	border: 0;
	padding: 0;
}
#responsive_form input[type=text], #responsive_form input[type=email], #responsive_form input[type=url], #responsive_form input[type=password], #responsive_form input[type=date], #responsive_form input[type=month], #responsive_form textarea {
	/*width: 100%;*/
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
#responsive_form input[type=text], #responsive_form input[type=email], #responsive_form input[type=url], #responsive_form input[type=password], #responsive_form input[type=date], #responsive_form input[type=month] {
	/*width: 50%;*/
}
#responsive_form input[type=text]:focus, #responsive_form input[type=email]:focus, #responsive_form input[type=url]:focus, #responsive_form input[type=password]:focus, #responsive_form input[type=date]:focus, #responsive_form input[type=month]:focus, #responsive_form textarea:focus {
	outline: 0;
	border-color: #4697e4;
}
.form_resp_left {
	float: left;
}
.form_resp_right {
	float: left;
}
@media (max-width: 600px) {
#responsive_form > div {
	margin: 0 0 15px 0;
}
#responsive_form > div > label, legend {
	width: 100%;
	float: none;
	margin: 0 0 5px 0;
}
#responsive_form > div > div, #responsive_form > div > div > div, #responsive_form > div > fieldset > div {
	width: 100%;
	float: none;
}
#responsive_form input[type=text], #responsive_form input[type=email], #responsive_form input[type=url], #responsive_form input[type=password], #responsive_form input[type=date], #responsive_form input[type=month], #responsive_form textarea, #responsive_form select {
	width: 100%;
}
.form_resp_left {
	width: 30%;
}
.form_resp_right {
	width: 70%;
}
}

@media (min-width: 1200px) {
#responsive_form > div > label, legend {
	text-align: right;
}
}
