/* ---- FORM.CSS ----
   Contains the CSS used to specifically style the home page.
*/


/* -- Form styles -- */
.form-area { margin-top:30px; }
.form-area > .side {
    background-color:#e4dfd8;
    background:rgba(0,0,0,0.05);
    box-shadow:0 1px 1px 0 rgba(0,0,0,0.2);
    margin-top:20px;
    padding:20px;
}
.form-area form, .form-area form > *, .form-area > *, .form-area form .alert { margin-top:30px; }
.form-area form:first-child, .form-area form:first-child > *:first-child, .form-area *:first-child { margin-top:0; } /* Map fix */ .form-area .leaflet-control-zoom { margin-top:10px; }
.form-area form legend {
    border-bottom:1px solid rgba(0,0,0,0.25);
    color:#000;
    display:block;
    font-size:20px;
    line-height:30px;
    margin:0 0 20px !important;
    padding:0 0 10px;
    width:100%;
}
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
.form-area form .control-group {
    margin:0;
    padding:0 0 10px;
}
.form-area form .control-group:last-child { padding:0; }
.form-area form > fieldset > p { margin-bottom:20px; }

/* Labels */
.form-area form .control-group label {
    color:#000;
    display:block;
    font:400 15px/22px 'Lato', 'Arial', 'Helvetica', sans-serif;
    height:auto;
    margin:0;
    padding:0 0 5px;
}
.form-area form .control-group label.muted {
    color:#666;
    font-style:italic;
}
.form-area form .control-group > .controls label { padding:10px 0; }

/* Form field styles (input, select, textarea) */
.form-area form .control-group input,
.form-area form .control-group select,
.form-area form .control-group textarea,
.form-area form .control-group .uneditable-input {
    background:#fff;
    border:1px solid #c1c1c1;
    border-radius:6px;
    color:#000;
    display:block;
    font:400 15px/22px 'Lato', 'Arial', 'Helvetica', sans-serif;
    height:42px;
    margin:0;
    padding:9px 10px;
    position:relative;
    width:100%;
    z-index:5;
    -webkit-transition:0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
    -moz-transition:0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
    -o-transition:0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
    transition:0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
}
.form-area form .control-group select {
    height:42px;
    line-height:42px;
    padding:10px;
}
.form-area form .control-group input[type="checkbox"] {
    left:0;
    position:absolute;
    top:1px;
    visibility:hidden;
    width:auto;
}
.no-js .form-area form .control-group label > input[type="checkbox"] { visibility:visible; }
.form-area form .control-group label.checkbox {
    color:#666;
    cursor:pointer;
    padding-left:32px;
    position:relative;
}
.form-area form .control-group label.checkbox.on { color:#000; }
.form-area form .control-group label.checkbox > .icon {
    background:#fff url('/media/img/form-icons.png') 0 -22px no-repeat;
    border:1px solid #c1c1c1;
    border-radius:6px;
    display:block;
    height:24px;
    left:0;
    position:absolute;
    top:9px;
    width:24px;
    -webkit-transition:0.25s ease-in-out border;
    -moz-transition:0.25s ease-in-out border;
    -o-transition:0.25s ease-in-out border;
    transition:0.25s ease-in-out border;
}
.form-area form .control-group label.checkbox-hint > .icon { left:32px; }
.form-area form .control-group label.checkbox.on > .icon { background-position:0 0; }
.form-area form .control-group label.checkbox:hover > .icon,
.form-area form .control-group label.checkbox.on > .icon {
    border:1px solid #a1a1a1;
}
.form-area form .control-group label.checkbox-hint > input[type="checkbox"] { left:32px; }
.form-area form .control-group label.checkbox.align-right { padding-left:0; padding-right:32px; }
.form-area form .control-group label.checkbox.align-right > .icon,
.form-area form .control-group label.checkbox.align-right > input[type="checkbox"] {
    left:auto;
    right:0;
}
.form-area form .control-group label.checkbox-hint.align-right > .icon,
.form-area form .control-group label.checkbox-hint.align-right > input[type="checkbox"] {
    left:auto;
    right:32px;
}
.form-area form .control-group label.checkbox-hint.align-right { padding-right:64px; }
.form-area form .control-group label.checkbox .help-inline {
    border-radius:6px;
    box-shadow:none;
    margin:10px 0 0 -32px;
    padding:5px 10px;
}
.form-area form .control-group label.checkbox.align-right .help-inline { margin:10px -32px 0 0 }
.form-area form .control-group textarea {
    height:auto;
    min-height:180px;
}
.form-area form .control-group .uneditable-input {
    background-color:#c6beb2;
    border-color:#c6beb2;
    font-style:italic;
    overflow:hidden;
    white-space:nowrap;
}
.form-area form .control-group input[type="file"],
.form-area form .control-group input[type="file"]:hover,
.form-area form .control-group input[type="file"]:focus  {
    background-color:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
    height:auto;
    margin-top:9px !important;
    padding:0;
}

/* Focus styles */
.form-area form .control-group input:focus,
.form-area form .control-group input:hover,
.form-area form .control-group select:focus,
.form-area form .control-group select:hover,
.form-area form .control-group textarea:focus,
.form-area form .control-group textarea:hover {
    border:1px solid #a1a1a1;
}
.form-area form .control-group input:focus,
.form-area form .control-group textarea:focus {
    box-shadow:inset 0 1px 3px 2px rgba(0,0,0,0.1);
}

/* Form field buttons */
.form-area form .control-group button.btn,
.form-area form .control-group button.btn:first-child {
    margin:10px 0 0;
}
.form-area .form-horizontal .control-group button.btn,
.form-area .form-horizontal .control-group button.btn:first-child {
    max-width:300px;
}

/* Form field sizes */
.form-area form .control-group > .controls > * {
    float:left;
    margin-top:10px;
    position:relative;
    width:100%;
}
.form-area form .double-field > .controls > *, .form-area form .quad-field > .controls > * {
    margin-top:0;
    margin-left:3%;
}
.form-area form .control-group > .controls > :first-child,
.form-area form .double-field > .controls > :first-child,
.form-area form .quad-field > .controls > :first-child {
    margin-left:0;
    margin-top:0;
}
.form-area form .double-field > .controls .slim, .form-area form .quad-field > .controls .slim { width:22.75%; }
.form-area form .double-field > .controls .half, .form-area form .quad-field > .controls .half { width:48.5%; }
.form-area form .double-field > .controls .wide, .form-area form .quad-field > .controls .wide { width:74.25%; }
.form-area form .control-group > .controls .short { min-height:110px; }
.form-area form .control-group > .controls .tall { min-height:250px; }

/* Help text / Error text */
.form-area form .control-group .help-inline {
    background-color:#e4dfd8;
    background:rgba(0,0,0,0.05);
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    box-shadow:inset 0 15px 15px -15px rgba(0,0,0,0.25);
    color:#666;
    font-size:13px;
    font-style:italic;
    line-height:20px;
    margin:-5px 0 0;
    padding:8px 10px 3px;
    position:relative;
    z-index:1;
}
.form-area form .error .help-inline, .form-area form .error label { color:#c10; }
.form-area form .control-group .help-inline:first-child {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    box-shadow:inset 0 -15px 15px -15px rgba(0,0,0,0.25);
    margin:0 0 -5px;
    padding:3px 10px 8px;
}

/* Hint popover */
.form-area form .control-group > .controls .q-icon {
    background-color:#3699b2;
    background:-webkit-linear-gradient(top, #4facc4, #3699b2);
    background:-moz-linear-gradient(top, #4facc4, #3699b2);
    background:-ms-linear-gradient(top, #4facc4, #3699b2);
    background:-o-linear-gradient(top, #4facc4, #3699b2);
    border-radius:11px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1), inset 0 -21px 0 -12px rgba(1,1,1,0.075);
    color:#fff;
    display:inline-block;
    font-weight:bold;
    height:22px;
    line-height;22px;
    position:absolute;
    right:9px;
    top:10px;
    text-decoration:none;
    text-align:center;
    width:22px;
    z-index:10;
}
.form-area form .control-group > .controls .q-icon:hover {
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1), inset 0 -21px 0 -12px rgba(1,1,1,0.075), 0 0 0 5px rgba(255,255,255,0.4);
}
.form-area form .control-group > .controls .q-icon.push-out { right:0; }

/* Recaptcha field */
.form-area form .control-group .recaptcha_image {
    background-color:#ebe7e0;
    border:1px solid #c1c1c1;
    min-height:59px;
    height:auto !important;
    margin:0 0 10px;
    width:100% !important;
}
.form-area form .control-group .recaptcha_image > img {
    display:block;
    margin:0 auto;
    max-width:100%;
    width:auto !important;
}
.form-area form .control-group .recaptcha_image br,
.form-area form .control-group .recaptcha_image embed {
    display:none !important;
}
.form-area form .control-group .recaptcha_image span:first-of-type:after { content:', '; }
.form-area form .control-group .recaptcha_controls > input { margin:0 0 10px; }
.form-area form .control-group .recaptcha_controls > .recaptcha_help { float:left; }
.form-area form .control-group .recaptcha_controls > .recaptcha_button { float:right; }
.form-area form .control-group .recaptcha_controls > .recaptcha_button > a {
    background:#56476b url('/media/img/recaptcha-icons.png') 0 0 no-repeat;
    border-radius:6px;
    display:block;
    height:40px;
    line-height:40px;
    margin-left:10px;
    opacity:0.8;
    overflow:hidden;
    text-indent:40px;
    width:40px;
}
.form-area form .control-group .recaptcha_controls > .recaptcha_get > a { background-position:0 -40px; }
.form-area form .control-group .recaptcha_controls > .recaptcha_button > a:hover,
.form-area form .control-group .recaptcha_controls > .recaptcha_only_if_audio > a { opacity:1; }


/* -- Individual form pages -- */

/* Join us page */
#join-us-area { margin-top:30px; }
#join-us-side > .inner {
    background-color:#d3cfc8;
    background:rgba(0,0,0,0.1);
    box-shadow:0 1px 1px 0 rgba(0,0,0,0.2);
    padding:20px;
}
#join-us-side > .inner > .inner2 {
    background-color:#e9eff1;
    padding:20px;
    text-align:center;
}
#join-us-side > .inner > .inner2 > ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
#join-us-side > .inner > .inner2 > ul > li {
    background-color:#dde3e5;
    margin-top:20px;
}
#join-us-side > .inner > .inner2 > ul > li > h3 {
    background-color:#788d41;
    color:#fff;
    margin:0;
    padding:5px 10px;
}
#join-us-side > .inner > .inner2 > ul > li:first-child > h3 { background-color:#6d87a4; }
#join-us-side > .inner > .inner2 > ul > li > p { padding:15px 10px; }
.form-area form .control-group label.giftaid {
    background:url('/media/img/giftaid-logo.png') bottom center no-repeat;
    padding-bottom:100px;
}
#promo-area > .promo-inner{
    padding: 18px;
    background-color: #E7E2DA;
    border: 14px solid #E0DBD1;
}
#promo-area input.enter-promo {
    background: #fff;
    margin-top:10px;
    border: 1px solid #c1c1c1;
    border-radius: 6px;
    color: #000;
    display: inline-block;
    font: 400 15px/22px 'Lato', 'Arial', 'Helvetica', sans-serif;
    height: 42px;
    margin-right: 2%;
    padding: 9px 10px;
    position: relative;
    width: 60%;
    z-index: 5;
    -webkit-transition: 0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
    -moz-transition: 0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
    -o-transition: 0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
    transition: 0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
}
#promo-area .promo-code {
    width: 37%;
    display: inline-block;
    margin-top:0 !important;
}

/* Professionals listing search form */
#professional-search-form { margin:0 !important; }


/* -- Device resolution ONLY OVER 480 pixels wide -- */
@media screen and (min-width:481px) {

    /* -- Form styles -- */
    .form-area .form-horizontal .control-group label { padding:10px 0; }
    .form-area form .control-group > .controls .slim { width:22.75%; }
    .form-area form .control-group > .controls .half { width:48.5%; }
    .form-area form .control-group > .controls .wide { width:74.25%; }
    .form-area form .control-group > .controls > * {
        margin-left:3%;
        margin-top:0;
    }
    .form-area form .control-group > .controls > :first-child { margin-left:0; }
    .form-area .form-horizontal .control-group button.btn,
    .form-area .form-horizontal .control-group button.btn:first-child {
        max-width:213px;
    }

    /* -- Individual form pages -- */

}

/* -- Device resolution ONLY OVER 768 pixels wide -- */
@media screen and (min-width:768px) {

    /* -- Form styles -- */
    .form-area:first-child { margin-top:0; }
    .form-area > .side {
        margin-top:0;
        padding:15px 10px;
    }
    .form-area form legend {
        font-size:22px;
        line-height:30px;
    }

    /* -- Individual form pages -- */
    #join-us-side > .inner {
        max-width:228px;
        padding:10px;
    }
    #join-us-side > .inner > .inner2 {
        background:#e9eff1 url('/media/img/join-us-subscription-bkg.png') bottom center no-repeat;
        padding-bottom:125px;
        padding:10px 10px 115px;
    }
    #join-us-area > .form-area { margin-top:0; }

}

/* -- Device resolution ONLY OVER 980 pixels wide -- */
@media screen and (min-width:980px) {

    /* -- Form styles -- */
    .form-area > .side { padding:20px; }

    /* -- Individual form pages -- */
    #join-us-side > .inner {
        max-width:300px;
        padding:20px;
    }
    #join-us-side > .inner > .inner2 { padding:20px 20px 125px; }

}

/* -- Bootstrap - Datepicker (http://www.eyecon.ro/bootstrap-datepicker) -- */
.datepicker.dropdown-menu {
    background-color:#f4f0eb;
    border:1px solid rgba(0,0,0,0.1);
    -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
    display:none;
    float:left;
    left:0;
    padding:5px !important;
    position:absolute;
    margin:2px 0 0;
    width:201px;
    top:0;
    z-index:1000;
}
.datepicker.dropdown-menu:before {
    content:'';
    display:inline-block;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid #c1c1c1;
    position:absolute;
    top:-7px;
    left:6px;
}
.datepicker.dropdown-menu:after {
    content:'';
    display:inline-block;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid #f4f0eb;
    position:absolute;
    top:-6px;
    left:7px;
}
.datepicker.dropdown-menu > * { background-color:rgba(0,0,0,0.02); }
.datepicker > div { display:none }
.datepicker table {
    width:100%;
    margin:0;
}
.datepicker td, .datepicker th {
    cursor:pointer;
    text-align:center;
    width:20px;
    height:20px;
}
.datepicker th {
    border-bottom:1px solid #c1c1c1;
    padding:4px 0;
}
.datepicker td.day { padding:2px 0; }
.datepicker td.day.disabled { color:#eee }
.datepicker td.old, .datepicker td.new { color:#999; }
.datepicker td.active, .datepicker td.active:hover, .datepicker td span.active, .datepicker td span.active:hover {
    background-color:#3699b2 !important;
    color:#fff !important;
}
.datepicker th.prev, .datepicker th.next, .datepicker th.switch {
    cursor:pointer;
    font-size:16px;
    line-height:1;
    padding:5px 0;
}
.datepicker th.prev, .datepicker th.next {
    font-size:24px;
    min-width:24px !important;
    max-width:24px !important;
}
.datepicker th.prev:hover, .datepicker th.next:hover, .datepicker th.switch:hover, .datepicker td.day:hover { background-color:#fff; background-color:rgba(255,255,255,0.75); }
.datepicker td span {
    display:block;
    float:left;
    cursor:pointer;
    padding:10px 0;
    width:25%;
}
.datepicker td span:hover { background:#fff }

.subscribe{padding-bottom:30px;}
.subscribe .subscription { margin-top:13px; }

	@media screen and (min-width:768px) {
		.subscribe .subscription { margin-top:0; }
	}

.subscribe .subscription input{
	background: #fff;
	border: 1px solid #c1c1c1;
	border-radius: 6px;
	color: #000;
	display: block;
	font: 400 15px/22px 'Lato', 'Arial', 'Helvetica', sans-serif;
	height: 42px;
	margin: 0;
	padding: 9px 10px;
	position: relative;
	width: 100%;
	z-index: 5;
	-webkit-transition: 0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
	-moz-transition: 0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
	-o-transition: 0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
	transition: 0.25s ease-in-out background, 0.25s ease-in-out box-shadow, 0.25s ease-in-out border;
}