/*
Labels should not wrap inputs but textareas need be 
wrapped with .form-textarea-wrapper. Form items should 
roughly follow the structure below to be in keeping 
with drupal webform markup
  <.form-item>
    <label>
    <.field-prefix>
    <input>
    <.field-suffix>
    <.description>
  </div>
 
Add hook to add hoffi-form class onto forms
  function hoffi_form_alter(&$form, &$form_state, $form_id) {
	$form['#attributes']['class'][] = 'hoffi-form';
  }
*/


/* 
GENERAL & MOBILE
------------------------------------------------------------------- */
/* MOBILE COLUMNS */
.col{
	box-sizing: border-box; 
	display: inline-block;
	vertical-align: top;
	width: 100%;
}
.s-col-1{ width: 8.33%; }
.s-col-2{ width: 16.66%; }
.s-col-3{ width: 25%; }
.s-col-4{ width: 33.33%; }
.s-col-5{ width: 41.66%; }
.s-col-6{ width: 50%; }
.s-col-7{ width: 58.33%; }
.s-col-8{ width: 66.66%; }
.s-col-9{ wid: 75%; }
.s-col-10{ width: 83.33%; }
.s-col-11{ width: 91.66%; }
.s-col-12{ width: 100%; }


.hoffi-form .hidden{
	display: none;
}
/* OVERRIDES */
.hoffi-form .form-required,
.hoffi-form .webform-component-textarea .grippie{ 
	display: none; 
}

/* TAXONOMY AUTO-COMPLETE */
#autocomplete ul li{ font-size: 16px; }

/* INPUTS */
.hoffi-form .form-textarea-wrapper{ width: 100%; }
.hoffi-form input,
.hoffi-form textarea{
	font: inherit;
}
.hoffi-form input[type="text"],
.hoffi-form textarea,
.hoffi-form input[type="email"],
.hoffi-form input[type="search"],
.hoffi-form input[type="url"],
.hoffi-form input[type="tel"],
.hoffi-form input[type="number"],
.hoffi-form input[type="password"],
.hoffi-form input[type="date"],
.hoffi-form input[type="time"],
.hoffi-form input[type="datetime"],
.hoffi-form input[type="datetime-local"],
.hoffi-form input[type="week"],
.hoffi-form input[type="month"],
.hoffi-form input[type="file"],
.hoffi-form .form-type-dragndrop-upload .droppable,
.hoffi-form select{
	display: block;
	width: 100%;
	box-sizing: border-box;
    padding: 8px 10px;
    font-size: 16px;
    background-color: #fff;
	color: #333;
    border: 1px solid #808080;
    border-radius: 4px;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-transition: all ease-in-out .15s;
    -o-transition: all ease-in-out .15s;
    transition: all ease-in-out .15s;
}
.hoffi-form input[type="text"],
.hoffi-form input[type="email"],
.hoffi-form input[type="search"],
.hoffi-form input[type="url"],
.hoffi-form input[type="tel"],
.hoffi-form input[type="number"],
.hoffi-form input[type="password"],
.hoffi-form input[type="date"],
.hoffi-form input[type="time"],
.hoffi-form input[type="datetime"],
.hoffi-form input[type="datetime-local"],
.hoffi-form input[type="week"],
.hoffi-form input[type="month"],
.hoffi-form input[type="file"],
.hoffi-form select{
	height: 38px;
}
.hoffi-form input[type="checkbox"],
.hoffi-form input[type="radio"]{
	margin: 3px 3px 3px 0;
}
.hoffi-form input[type="text"]:required,
.hoffi-form textarea:required,
.hoffi-form input[type="email"]:required,
.hoffi-form input[type="search"]:required,
.hoffi-form input[type="url"]:required,
.hoffi-form input[type="tel"]:required,
.hoffi-form input[type="number"]:required,
.hoffi-form input[type="password"]:required,
.hoffi-form input[type="date"]:required,
.hoffi-form input[type="time"]:required,
.hoffi-form input[type="datetime"]:required,
.hoffi-form input[type="datetime-local"]:required,
.hoffi-form input[type="week"]:required,
.hoffi-form input[type="month"]:required,
.hoffi-form select:required{
	/* anything? */
}
.hoffi-form input[type="text"]:valid:focus,
.hoffi-form textarea:valid:focus,
.hoffi-form input[type="email"]:valid:focus,
.hoffi-form input[type="search"]:valid:focus,
.hoffi-form input[type="url"]:valid:focus,
.hoffi-form input[type="tel"]:valid:focus,
.hoffi-form input[type="number"]:valid:focus,
.hoffi-form input[type="password"]:valid:focus,
.hoffi-form input[type="date"]:valid:focus,
.hoffi-form input[type="time"]:valid:focus,
.hoffi-form input[type="datetime"]:valid:focus,
.hoffi-form input[type="datetime-local"]:valid:focus,
.hoffi-form input[type="week"]:valid:focus,
.hoffi-form input[type="month"]:valid:focus,
.hoffi-form select:valid:focus{
	border: 1px solid #27ae60;
}
.hoffi-form input[type="text"]:invalid:focus,
.hoffi-form textarea:invalid:focus,
.hoffi-form input[type="email"]:invalid:focus,
.hoffi-form input[type="search"]:invalid:focus,
.hoffi-form input[type="url"]:invalid:focus,
.hoffi-form input[type="tel"]:invalid:focus,
.hoffi-form input[type="number"]:invalid:focus,
.hoffi-form input[type="password"]:invalid:focus,
.hoffi-form input[type="date"]:invalid:focus,
.hoffi-form input[type="time"]:invalid:focus,
.hoffi-form input[type="datetime"]:invalid:focus,
.hoffi-form input[type="datetime-local"]:invalid:focus,
.hoffi-form input[type="week"]:invalid:focus,
.hoffi-form input[type="month"]:invalid:focus,
.hoffi-form select:invalid:focus{
	border: 1px solid #c0392b;
}
.hoffi-form input[type="text"]:focus,
.hoffi-form textarea:focus,
.hoffi-form input[type="email"]:focus,
.hoffi-form input[type="search"]:focus,
.hoffi-form input[type="url"]:focus,
.hoffi-form input[type="tel"]:focus,
.hoffi-form input[type="number"]:focus,
.hoffi-form input[type="password"]:focus,
.hoffi-form input[type="date"]:focus,
.hoffi-form input[type="time"]:focus,
.hoffi-form input[type="datetime"]:focus,
.hoffi-form input[type="datetime-local"]:focus,
.hoffi-form input[type="week"]:focus,
.hoffi-form input[type="month"]:focus,
.hoffi-form select:focus{
	outline: 0;
	border: 1px solid #3498db;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 3px 4px rgba(0, 0, 0, 0.2)	
}
.hoffi-form input[type="text"][disabled],
.hoffi-form textarea[disabled],
.hoffi-form input[type="email"][disabled],
.hoffi-form input[type="search"][disabled],
.hoffi-form input[type="url"][disabled],
.hoffi-form input[type="tel"][disabled],
.hoffi-form input[type="number"][disabled],
.hoffi-form input[type="password"][disabled],
.hoffi-form input[type="date"][disabled],
.hoffi-form input[type="time"][disabled],
.hoffi-form input[type="datetime"][disabled],
.hoffi-form input[type="datetime-local"][disabled],
.hoffi-form input[type="week"][disabled],
.hoffi-form input[type="month"][disabled],
.hoffi-form select[disabled]{
	background-color: #ccc;
}

/* FILE */
.hoffi-form .webform-component-file input[type="file"]{ margin-bottom: 5px; }
.hoffi-form .webform-component-file input[type="file"],
.hoffi-form .webform-component-file input[type="submit"]{
	height: 42px;
}

/* SELECT */
/* Use javascript plugin for fancy select boxes */

/* RADIOS & CHECKBOXES */
.hoffi-form .form-checkboxes .form-item,
.hoffi-form .form-radios .form-item{ 
	display: block;
	padding: 0 0 10px 0;
}
.hoffi-form .form-checkboxes label,
.hoffi-form .form-type-checkbox label,
.hoffi-form .form-checkboxes input,
.hoffi-form .form-type-checkbox input,
.hoffi-form .form-radios label,
.hoffi-form .form-radios input{
	display: inline;
	width: auto;
	vertical-align: middle;
}

/* WEBFORM DATE ITEM */
.hoffi-form .webform-datepicker .form-item{
	display: block;
	margin: 0 -20px 5px 0; /* negative margin to pull columns in line */
}

/* BUTTONS & SUBMITS */
.hoffi-form input[type="submit"]{
	display: block;
	width: 100%;
	background-color: #3498db;
	color: white;
	box-sizing: border-box;
	font-size: 16px;
	padding: 8.5px 12px;
	text-align: center;
	border: none;
	border-radius: 4px;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-transition: all ease-in-out .15s;
    -o-transition: all ease-in-out .15s;
    transition: all ease-in-out .15s;
}

/* ITEM WRAPPERS */
.hoffi-form{
	margin: 0 -20px 0 0;
	font-size: 0;
}
.hoffi-form .form-item,
.hoffi-form .form-actions{
	padding: 0 20px 20px 0;
	margin: 0;
	vertical-align: top;
}
.hoffi-form fieldset{
	display: block;
	box-sizing: border-box;
    padding: 20px 0 0 20px;
    margin: 0 20px 20px 0;
	border-radius: 4px;
	border: 1px solid #808080;
	min-width: 0;
}


.hoffi-form .form-markup{
	padding:20px 0;
	font-size: 16px!important;
}
.hoffi-form .webform-component-markup{
	font-size: 16px!important;
}
.hoffi-form .webform-component-markup p{
	margin-bottom: 10px;
}
@media all and (min-width: 768px){
	.hoffi-form .webform-component-markup{
		-webkit-column-count: 2;
		column-count: 2;
	}
}
/* LABELS, LEGENDS & DESCRIPTIONS */
.hoffi-form label{ 
	display: inline-block;
	width: 100%;
	font-size: 16px;
	margin: 0 0 5px 0; 
}
.hoffi-form fieldset legend{
	font-size: 16px;
	font-weight: bold;
	padding: 0 5px;
}
.hoffi-form .description{
	text-align: right;
	margin-top: 5px;
	font-size: 14px;
	color: #808080;
}

/* WEBFORM & DRUPAL SPECIFIC */
/* HIDE THIS FOR NOW */
.hoffi-form .field-name-field-images,
.hoffi-form .field-name-field-display-images,
.hoffi-form .field-name-field-colours,
.hoffi-form .field-name-field-footnote,
.hoffi-form .group-festival{
	display: none;
}
/* Collapsable fieldsets */
.hoffi-form fieldset.collapsed{ border-radius: 0; }

/* Event Dates */
.hoffi-form fieldset.date-combo{ padding: 20px 0 20px 20px; }
.hoffi-form fieldset.date-combo .date-float > .form-item{ display: block; }
.hoffi-form fieldset.date-combo .date-float input,
.hoffi-form fieldset.date-combo .date-float label{
	display: inline;
	vertical-align: middle;
}
.hoffi-form .date-no-float.start-date-wrapper .form-item,
.hoffi-form .date-no-float.end-date-wrapper .form-item{
	display: block;
	padding-bottom: 0;
	margin: 0;
}
.container-inline-date .date-padding,
.container-inline-date .form-item .form-item{
	float: none;
}
fieldset.date-combo .container-inline-date .date-padding{
	padding: 0;
}

/* Multi Upload Images */
.hoffi-form .form-type-dragndrop-upload{}
.hoffi-form .form-type-dragndrop-upload .droppable,
.hoffi-form .form-type-dragndrop-upload .image-widget-data{
	float: none;
	text-align: left;
}
.hoffi-form .field-name-field-images .form-type-dragndrop-upload a{
	width: auto;
	display: inline-block;
}
.hoffi-form .form-type-dragndrop-upload .droppable-message{ 
	font-size: 16px; 
	line-height: normal;
}
.hoffi-form .form-type-dragndrop-upload .droppable-message span{ line-height: 39px; }
.hoffi-form .droppable-browse-button.button:after{
	display: none;
}
.hoffi-form .droppable-message .droppable-standard-upload{
	float: right;
}
.hoffi-form .droppable-message .droppable-standard-upload span{ display: none; }
.hoffi-form .droppable-message{

}

/* Payment options */
.hoffi-form .form-item-submitted-eitem-carafan-9d > label{ display: none; }

/* Colours */
.hoffi-form tr .form-item{
	padding-bottom: 0;
}

/* Footnote */
.hoffi-form .field-name-field-footnote{
	border-top: none;
}

/* File upload */
.hoffi-form .webform-component-file input[type="submit"],
.hoffi-form .field-widget-file-generic input[type="submit"]{
	margin-top: 5px;
}

/*
TABLET 
------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
/* COLUMNS */
.m-col-1{ width: 8.33%; }
.m-col-2{ width: 16.66%; }
.m-col-3{ width: 25%; }
.m-col-4{ width: 33.33%; }
.m-col-5{ width: 41.66%; }
.m-col-6{ width: 50%; }
.m-col-7{ width: 58.33%; }
.m-col-8{ width: 66.66%; }
.m-col-9{ wid: 75%; }
.m-col-10{ width: 83.33%; }
.m-col-11{ width: 91.66%; }
.m-col-12{ width: 100%; }

}

/*
DESKTOP 
------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
/* COLUMNS */
.l-col-1{ width: 8.33%; }
.l-col-2{ width: 16.66%; }
.l-col-3{ width: 25%; }
.l-col-4{ width: 33.33%; }
.l-col-5{ width: 41.66%; }
.l-col-6{ width: 50%; }
.l-col-7{ width: 58.33%; }
.l-col-8{ width: 66.66%; }
.l-col-9{ wid: 75%; }
.l-col-10{ width: 83.33%; }
.l-col-11{ width: 91.66%; }
.l-col-12{ width: 100%; }

/* INLINE ELEMENTS */
.hoffi-form .webform-container-inline > label{
	display: inline-block;
	text-align: right;
	width: 18%;
	margin-right: 2%;
} 
.hoffi-form .webform-container-inline input[type="text"],
.hoffi-form .webform-container-inline .form-textarea-wrapper,
.hoffi-form .webform-container-inline input[type="email"],
.hoffi-form .webform-container-inline input[type="search"],
.hoffi-form .webform-container-inline input[type="url"],
.hoffi-form .webform-container-inline input[type="tel"],
.hoffi-form .webform-container-inline input[type="number"],
.hoffi-form .webform-container-inline input[type="password"],
.hoffi-form .webform-container-inline input[type="date"],
.hoffi-form .webform-container-inline input[type="time"],
.hoffi-form .webform-container-inline input[type="datetime"],
.hoffi-form .webform-container-inline input[type="datetime-local"],
.hoffi-form .webform-container-inline input[type="week"],
.hoffi-form .webform-container-inline input[type="month"],
.hoffi-form .webform-container-inline select{
	display: inline-block;
	width: 80%;
}
.hoffi-form .webform-container-inline .description{
	text-align: left;
	padding-left: 20%;
}

/* BUTTONS & SUBMITS */
.hoffi-form input[type="submit"]{ 
	width: auto;
	padding: 8.5px 50px;
}

/* RADIOS & CHECKBOXES */
.hoffi-form .form-item .form-checkboxes,
.hoffi-form .form-item .form-radios{
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;
}
.hoffi-form .form-checkboxes .form-item{	
	display: block;
	padding: 0 10px 5px 0;
}

.hoffi-form .form-radios .form-item{ 
	display: block;
	padding: 0 30px 5px 0;
}

/* WEBFORM DATE ITEM */
.hoffi-form .webform-container-inline.webform-datepicker select{ width: 100%; }
.hoffi-form .webform-container-inline.webform-datepicker{ 
	position: relative;
	margin: 0 17px 0 0; 
}
.hoffi-form .webform-datepicker .webform-calendar{
	position: absolute;
    top: 0;
    right: -17px;
    width: 18px;
    height: 15px;
    padding: 10.5px 10px;
    border: 1px solid #808080;
	background-color: #ddd;
    border-radius: 0 4px 4px 0;
}
.hoffi-form .webform-datepicker select.day{
	border-radius: 4px 0 0 4px;
}
.hoffi-form .webform-datepicker .form-item{
	box-sizing: border-box;
	width: 33.33%;
	margin: 0;
	display: inline-block;
}
/* INLINE WEBFORM DATE ITEM */
.hoffi-form  .webform-container-inline .webform-datepicker{
	margin: 0;
	width: 80%;
	display: inline-block;
	vertical-align: middle;
}
.hoffi-form  .webform-component-date.webform-container-inline > label{
	margin: 0 2% 20px 0;
	vertical-align: middle;
}
.hoffi-form .webform-component-date.webform-container-inline{ padding: 0 36px 20px 0; }

.hoffi-form .webform-component-file input[type="submit"],
.hoffi-form .field-widget-file-generic input[type="submit"]{
	margin-top: 5px;
	width: 100%;
}
}

/*
LARGE DESKTOP
------------------------------------------------------------------- */
@media screen and (min-width: 1280px) {
/* COLUMNS */
.xl-col-1{ width: 8.33%; }
.xl-col-2{ width: 16.66%; }
.xl-col-3{ width: 25%; }
.xl-col-4{ width: 33.33%; }
.xl-col-5{ width: 41.66%; }
.xl-col-6{ width: 50%; }
.xl-col-7{ width: 58.33%; }
.xl-col-8{ width: 66.66%; }
.xl-col-9{ wid: 75%; }
.xl-col-10{ width: 83.33%; }
.xl-col-11{ width: 91.66%; }
.xl-col-12{ width: 100%; }

/* FILE */
.hoffi-form .webform-component-file input[type="file"],
.hoffi-form .field-widget-file-generic input[type="file"]{
	width: 80%;
	display: inline-block;
}
.hoffi-form .webform-component-file input[type="submit"],
.hoffi-form .field-widget-file-generic input[type="submit"]{
	display: inline-block;
	margin-left: 2%;
	margin-top: 0;
	margin-right: 0;
	width: 18%;
}

}