/* ---------------- */
/* Setup */

html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; font-family: Arial, Helvetica, sans-serif; background: #f6f6f6; }
html, body { width: 100%; }

/* font-family: 'Open Sans', sans-serif; */

div, a, span { -webkit-tap-highlight-color: rgba(0,0,0,0); }

a { color: #979ea4; text-decoration: none; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; overflow: hidden; line-height: 1px; font-size: 1px; }

/* ---------------- */
/* Preview */

#main { max-width: 960px; margin: 0 auto; padding: 20px; }
/*#main h1 { background: #95a4a7; color: #bec3c7; font-family: 'Open Sans', sans-serif; text-align: center; font-weight: bold; font-size: 2em; text-shadow: 1px 1px #7e8c8d; padding: 20px; border-radius: 5px; }*/

/* ---------------- */
/* Form Setup */

.sf-form-container { background: #fff; border-radius: 5px; box-shadow: -5px 5px 0px rgba(0, 0, 0, 0.04); }
.sf-form-container > h2 {
	padding: 20px;
	background: #6F3F22;
	border-radius: 5px 5px 0 0;
	text-shadow: 1px 1px #7e8c8d;
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	font-weight: bold;
	font-size: 2em;
}
.sf-form-container > ul { padding: 20px; overflow: hidden; }
.sf-form-container > ul > li { position: relative; overflow: hidden; }
.sf-form-container > ul > li.left { clear: both; }
.sf-form-container > ul > li > div { position: relative; overflow: hidden; padding-bottom: 8px; }

/* ---------------- */
/* Form Labels */

.sf-text-label { display: inline-block; font-family: 'Open Sans', sans-serif; line-height: 2em; color:#7B4615; font-size: 0.95em; }

.sf-form-checkbox + .sf-text-label { width: auto; line-height: 1.5em; }
.sf-form-radio + .sf-text-label { width: auto; line-height: 1.5em; }

.sf-form-header { clear: both; font-family: 'Open Sans', sans-serif; font-size: 1.3em; font-weight: bold; color: #34495e; padding: 20px 0 10px; border-bottom: 1px dotted #ccc; margin-bottom: 20px; }

/* ---------------- */
/* Form Fields */

.sf-form-input,
.sf-form-textarea ,
.sf-form-select { outline: none; border: 1px solid #ccd0d3; border-radius: 5px; padding: 5px 6px; font-family: 'Open Sans', sans-serif; color: #34495e; font-size: 0.95em; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; transition: all 0.25s ease-out; box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; background: #fff; }

.sf-form-input:focus,
.sf-form-textarea:focus,
.sf-form-select:focus { border-color: #7e8c8d; }

.sf-form-input {  }
.sf-form-textarea { resize: none; height: 99px; }
.sf-form-select { margin: 0; }
.sf-form-checkbox,
.sf-form-radio { float: left; margin: 4px 8px 0 0; }

::-webkit-input-placeholder { color: #ccc; font-family: 'Open Sans', sans-serif; font-style: italic; font-size: 0.95em; padding-top: 2px; }
:-moz-placeholder { /* Firefox 18- */ color: #ccc; font-family: 'Open Sans', sans-serif; font-style: italic; font-size: 0.95em; padding-top: 2px; }
::-moz-placeholder { /* Firefox 19+ */ color: #ccc; font-family: 'Open Sans', sans-serif; font-style: italic; font-size: 0.95em; padding-top: 2px; }
:-ms-input-placeholder { color: #ccc; font-family: 'Open Sans', sans-serif; font-style: italic; font-size: 0.95em; padding-top: 2px; }

/* ---------------- */
/* Form Buttons */

.sf-button { display: inline-block; text-align: center; text-decoration: none; color: #fff; font-size: 0.95em; padding: 0 14px; line-height: 2em; border-radius: 5px; border: none; cursor: pointer; font-family: 'Open Sans', sans-serif; font-weight: bold; margin-top: 8px; }
.sf-button:hover { opacity: 0.75; }

.sf-button-large { font-size: 1.3em; }

.sf-primary-button { background: #6F3F22; border-bottom: 3px solid #482C11; }
.sf-secondary-button { background: #34495e; border-bottom: 3px solid #243445; }
.sf-neutral-button { background: #a3aaab; border-bottom: 3px solid #7e8c8d; }
.sf-negative-button { background: #ec4c40; border-bottom: 3px solid #c2382b; }
.sf-disabled-button { background: #d5d8da; border-bottom: 3px solid #bec3c7; color: #b8bbbc; cursor: default; }
.sf-disabled-button:hover { opacity: 1; }

.sf-button { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; transition: all 0.25s ease-out; }

/* ---------------- */
/* Form Validation */

/* icons */

.sf-icon { position: absolute; right: 0px; top: 7px; display: block; width: 20px; height: 20px; background: url(../images/icons.png) no-repeat; }

.sf-icon-warning { background-position: 0 0; }
.sf-icon-success { background-position: -40px 0; }
.sf-icon-info { background-position: -80px 0; }

/* form elements */

.sf-form-item-warning label { color: #f2af00; }
.sf-form-item-warning input,
.sf-form-item-warning textarea,
.sf-form-item-warning select { border-color: #f2af00; }

.sf-form-item-warning input:focus,
.sf-form-item-warning textarea:focus,
.sf-form-item-warning select:focus { border-color: #f2af00; }

.sf-form-item-warning ::-webkit-input-placeholder { color: #dccda7; }
.sf-form-item-warning :-moz-placeholder { /* Firefox 18- */ color: #dccda7; }
.sf-form-item-warning ::-moz-placeholder { /* Firefox 19+ */ color: #dccda7; }
.sf-form-item-warning :-ms-input-placeholder { color: #dccda7; }

/* message */

.sf-form-message { margin: 20px 20px 0; padding: 8px 10px 10px; border-radius: 5px; }
.sf-form-message p { font-family: 'Open Sans', sans-serif; font-size: 0.95em; color: #fff; }
.sf-form-message .sf-icon { position: relative; display: inline-block; top: 4px; padding-right: 3px; }

.sf-form-message .sf-icon-warning { background-position: 0 -30px; }
.sf-form-message .sf-icon-success { background-position: -40px -30px; }
.sf-form-message .sf-icon-info { background-position: -80px -30px; }

.sf-form-message-warning { background: #f2c40f; }

.sf-form-message-success { background: #30cb6f; }

.sf-form-message-info { background: #5face2; }

/* ---------------- */
/* Form Layouts */

.sf-form-item-fullwidth { width: 100%; }
.sf-form-item-2column { width: 46%; }

/* full width */

.sf-form-item-fullwidth .sf-text-label { float: left; width: 20%; }
.sf-form-item-fullwidth .sf-form-input,
.sf-form-item-fullwidth .sf-form-textarea,
.sf-form-item-fullwidth .sf-form-select { width: 75% }
.sf-form-item-fullwidth .sf-form-checkbox,
.sf-form-item-fullwidth .sf-form-radio { margin-left: 20%; }

/* 2 column */

.sf-form-item-2column .sf-text-label { display: block; float: none; width: auto; }
.sf-form-item-2column .sf-form-input,
.sf-form-item-2column .sf-form-textarea,
.sf-form-item-2column .sf-form-select { width: 100% }
.sf-form-item-2column .sf-form-checkbox,
.sf-form-item-2column .sf-form-radio { margin-left: 0; }

/* ---------------- */
/* Responsive */

@media only screen and (min-width: 1176px) {}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}

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

.left { float: none; }
.right { float: none; }

/* ---------------- */
/* Form Layouts */

/* full width */

.sf-form-item-fullwidth .sf-icon { top: 8px; }
.sf-form-item-fullwidth .sf-text-label { display: block; float: none; width: auto; }
.sf-form-item-fullwidth .sf-form-input,
.sf-form-item-fullwidth .sf-form-textarea,
.sf-form-item-fullwidth .sf-form-select { width: 100% }
.sf-form-item-fullwidth .sf-form-checkbox,
.sf-form-item-fullwidth .sf-form-radio { margin-left: 0; }

.sf-form-item-2column { width: 100%; }

}

@media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* ---------------- */
/* Form Validation */

/* icons */

.sf-icon { -webkit-background-size: 190px 50px; }

.sf-icon-warning { background-position: -60px 0; }
.sf-icon-success { background-position: -100px 0; }
.sf-icon-info { background-position: -140px 0; }

/* message */

.sf-form-message .sf-icon-warning { background-position: -60px -30px; }
.sf-form-message .sf-icon-success { background-position: -100px -30px; }
.sf-form-message .sf-icon-info { background-position: -140px -30px; }

}