.form-wrapper{
	width:95%;
	margin-bottom:10px;
}

.form-wrapper.narrow {
	margin:0px auto;
	padding:0px;
	width:440px;
}

.form-buttons.narrow {
	margin: 0px auto;
	padding-top: 10px;
	text-align: right;
	width: 440px;
}

.form-inner{
	padding:14px;
	width:100%;
}

/* ----------- Style ----------- */
#form-style{
	border:solid 1px #c4dae3;
	background:#e7f0f2;
	border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;}

#form-style p{
	font-size:11px;
	color:#666666;
	margin-bottom:20px;
	border-bottom:solid 1px #c4dae3;
	padding-bottom:10px;
}

#form-style input{
	font-size:16px;
	padding:6px 4px;
	border:solid 2px #c4dae3;
	color:#666666;
}
#form-style input.s{
	max-width: 100px;
	width: 100%;
}
#form-style input.m{
	max-width: 250px;
	width: 100%;
}
#form-style input.l{
	max-width: 400px;
	width: 100%;
}

#form-style input[type=email] {
    -webkit-appearance: none;
}

#form-style select {
    max-width: 100%;
}

#form-style select.default{
	font-size:16px;
	padding:4px 2px;
	border:solid 2px #c4dae3;
	color:#666666;
}

#form-style textarea{
	width:95%;
	height:200px;
	padding:6px;
	font-family: helvetica, sans-serif;
	font-size:16px;
	color:#666666;
	line-height:130%;
	border:solid 2px #c4dae3;
}

#form-style input.radio{
	border:none;
}

.form-section{
	font-family:'Primary-Condensed', Helvetica, sans-serif;
	margin:0 0 15px 5px;
	font-size: 24px;
	line-height:150%;
	color:#666;
	font-weight: normal;
}

.formInput {
	font-size:16px;
	padding:6px 4px;
	border:solid 2px #c4dae3;
	color:#666666;
	font-family: helvetica, sans-serif;
}

#form-style td.label,
.div-form label {
	font-size: 1em;
	line-height: 1.2em;
	padding:15px 0;
	font-weight:bold;
	text-align:right;
	vertical-align:top;
	width:180px;
	color:#666;
}

/* ----------- Table-based layout ----------- */
#form-style td.field {
	padding:10px 15px;
	vertical-align:top;
}

#form-style td.field-static{
	padding:10px 15px;
	vertical-align:middle;
	font-size:16px;
	color:#666;
}

/* ----------- div-based layout -------- */
.div-form .form-row {
    max-width: 100%;
}

.div-form .form-divider {
    margin: 20px 0;
    border: 1px solid #c4dae3;
    border-width: 1px 0;
}

.div-form .form-spacer {
    height: 14px;
}

.div-form label {
    display: inline-block;
}

.div-form .form-field-wrapper {
    padding:10px 11px;
    display: inline-block;
    max-width: 100%;
	vertical-align:top;
	width: 390px;
}

.div-form .form-field-wrapper .caption {
    margin-top: 10px;
}

.div-form .form-footer {
	margin-bottom: 5em;
}

.div-form .form-footer .confirm {
    display: inline-block;
	max-width: 410px;
	padding-right: 20px;
	vertical-align: middle;
}

.div-form .form-footer .confirm > * {
    vertical-align: middle;
}

.div-form .form-footer .confirm > div {
    display: inline-block;
    margin: 12px 0;
	min-height: 28px;
    position: relative;
    vertical-align: bottom;
}

.div-form .form-footer .register_terms {
    padding-left: 44px;
}

.div-form .form-footer .register_terms > input[type=checkbox] {
    left:0;
    margin-top: -6px;
    position: absolute;
    top: 50%;
}

.div-form .form-footer .register_terms > div {
    font-size: 12px;
    font-weight: bold;
    line-height: 130%;
}

.div-form .form-footer .form_button {
    display: inline-block;
    float: right;
}

.div-form .form-footer .form_button > div {
    display: inline-block;
}

.div-form .form-footer .form_button.left {
    float: left;
}

/* ----------- LiveValidation ----------- */

.LV_validation_message{
    display: none;
}

.LV_valid {
    color:#2c5f91;
}

.LV_invalid {
    color:#b23535;
}

/* LiveValidation error display */
.LV_valid_field {
    background-image: url('https://www.simpleregistry.com/wedding/img/form/ok.png');
    background-position: right 4px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.LV_invalid_field {
    background-image: url('https://www.simpleregistry.com/wedding/img/form/bad.png');
    background-position: right 4px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

/* Registry login form */
#reg_login input {
	color:#999;
	font-family: Georgia, Times, serif;
	font-size:32px;
	height:38px;
	margin: 20px;
	padding:8px;
	width:360px;
}

/* Labels horizontal or vertical */
@media (max-width: 670px) {
    .form-wrapper:not(.narrow) #form-style {
		border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0;		border-width: 1px 0;
    }

    .form-wrapper,
    .form-inner {
        width: auto;
    }

	.form-footer {
		padding: 0 5px;
	}

    .div-form label {
        display: block;
		margin: 1em 0 0;
        padding: 0;
        text-align: left;
    }

	.div-form label .caption br {
        display: none;
    }

    .div-form .form-field-wrapper {
        padding: 5px 0;
        width: 100%;
    }

    .div-form .form-field-wrapper input[type="text"],
    .div-form .form-field-wrapper input[type="email"],
    .div-form .form-field-wrapper input[type="password"]
    {
        max-width: inherit;
        width: 96% !important;
    }

    .div-form .form-field-wrapper .amount input[type="text"]
    {
        width: 89% !important;
    }

    .div-form select {
        width: 100%;
    }

    .div-form select.s {
        width: auto;
    }
}

/* Buttons horizontal or vertical */
@media (max-width: 600px) {
    .div-form .form-footer {
        height: auto !important;
        line-height: 1 !important;
    }

    .div-form .form-footer .confirm {
        display: block;
        margin: 0 auto;
		padding-right: 0;
        text-align: center;
    }

	.div-form .form-footer .confirm > div {
		min-height: 0;
	}

    .div-form .form-footer .form_button {
        display: block;
        float: none;
        margin: 1em auto 0;
        text-align: center;
    }

    .div-form .form-footer .form_button.left {
        float: none;
    }
}
@media (max-width: 450px) {
	.form-wrapper.narrow {
		width: 100%;
	}

	.form-buttons.narrow {
		width: 100%;
	}

    #form-style {
		border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0;		border-width: 1px 0;
    }

	#reg_login input {
		margin: 20px auto;
		width: 80%;
	}
}
