ninja form

Signed-off-by: Jeff <jeff@gotenzing.com>

+# OS Stuff
+.DS_Store
+
+# Node Stuff
+node_modules
+package-lock.json
+
+# IDE Stuff
+
+## phpStorm
+.idea
+
+## SublimeText
+*.sublime-workspace
+*.sublime-project
+
+# Project Stuff
+.wakatime-project
+deploy.sh

+{
+  "name": "wpninjas/ninja-forms-layout-styles"
+}
\ No newline at end of file

+.wp-color-picker{width:80px}.wp-picker-container .hidden{display:none}.wp-color-result{background-color:#f9f9f9;border:1px solid #bbb;border-radius:2px;cursor:pointer;display:inline-block;height:22px;margin:0 6px 6px 0;position:relative;top:1px;user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;vertical-align:bottom;display:inline-block;padding-left:30px}.wp-color-result:after{background:#f3f3f3;background-image:-webkit-gradient(linear,left top,left bottom,from(#fefefe),to(#f4f4f4));background-image:-webkit-linear-gradient(top,#fefefe,#f4f4f4);background-image:-moz-linear-gradient(top,#fefefe,#f4f4f4);background-image:-o-linear-gradient(top,#fefefe,#f4f4f4);background-image:linear-gradient(to bottom,#fefefe,#f4f4f4);color:#333;text-shadow:0 1px 0 #fff;border-radius:0 1px 1px 0;border-left:1px solid #bbb;content:attr(title);display:block;font-size:11px;line-height:22px;padding:0 6px;position:relative;right:0;text-align:center;top:0}.wp-color-result:hover{border-color:#aaa;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.1)}.wp-color-result:hover:after{color:#222;border-color:#aaa;border-left:1px solid #999}.wp-color-result.wp-picker-open{top:0}.wp-color-result.wp-picker-open:after{content:attr(data-current)}.wp-picker-container,.wp-picker-container:active{display:inline-block;outline:0}.wp-color-result:focus{border-color:#888;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);box-shadow:0 1px 2px rgba(0,0,0,0.2)}.wp-color-result:focus:after{border-color:#888}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-container .button{margin-left:6px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#555}.wp-picker-container .iris-picker{border-color:#dfdfdf;margin-top:6px}input[type="text"].iris-error{background-color:#ffebe8;border-color:#c00;color:#000}
\ No newline at end of file

+.style-handle {
+	cursor: move;
+}
+.hidden {
+	display: none;
+}
+.style-layout {
+	width: 450px;
+	float: left;
+}
+
+#ninja-forms-style-viewport {
+	max-width: 425px;
+	min-height: 250px;
+	position: relative;
+	overflow: hidden;
+}
+#ninja-forms-style-mp-pagination {
+	clear: both;
+	float: none;
+	list-style: none;
+	margin: 20px 0 0;
+	width: 100%;
+	overflow: hidden;
+}
+#ninja-forms-style-mp-pagination li{
+	background: #f1f1f1;
+	border: 1px solid #999;
+	border-radius: 3px;
+	cursor: pointer;
+	float: left;
+	margin-right: 3px;
+	padding: 3px 8px;
+}
+#ninja-forms-style-mp-pagination li.active{
+	background-color: #278AB7;
+	background-image: -webkit-gradient(linear,left top,left bottom,from(#2E9FD2),to(#21759B));
+	background-image: -webkit-linear-gradient(top,#2E9FD2,#21759B);
+	background-image: -moz-linear-gradient(top,#2E9FD2,#21759B);
+	background-image: -ms-linear-gradient(top,#2E9FD2,#21759B);
+	background-image: -o-linear-gradient(top,#2E9FD2,#21759B);
+	background-image: linear-gradient(to bottom,#2E9FD2,#21759B);
+	border-color: #1B607F;
+	-webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
+	box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
+	color: white;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
+#ninja-forms-style-mp-pagination li.drop-hover{
+	background-color: #278AB7;
+	background-image: -webkit-gradient(linear,left top,left bottom,from(#2E9FD2),to(#21759B));
+	background-image: -webkit-linear-gradient(top,#2E9FD2,#21759B);
+	background-image: -moz-linear-gradient(top,#2E9FD2,#21759B);
+	background-image: -ms-linear-gradient(top,#2E9FD2,#21759B);
+	background-image: -o-linear-gradient(top,#2E9FD2,#21759B);
+	background-image: linear-gradient(to bottom,#2E9FD2,#21759B);
+	border-color: #1B607F;
+	-webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
+	box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
+	color: white;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
+#ninja-forms-style-slide {
+	margin-left: 0;
+	width: 9999px;
+	position: relative;
+}
+#ninja-forms-style-slide:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+.ninja-forms-style-placeholder {
+	background: red;
+}
+.sortable.cols-1 {
+	width: 150px;
+}
+
+.sortable.cols-2 {
+	width: 250px;
+}
+
+.sortable.cols-3 {
+	width: 350px;
+}
+
+.sortable.cols-4 {
+	width: 450px;
+}
+
+.sortable li {
+	margin: 1px 1px 1px 0;
+	padding: 1px;
+	float: left;
+	font-size: 2em;
+	text-align: center;
+}
+
+.sortable li.span-1 {
+	width: 100px;
+}
+.sortable li.span-2 {
+	width: 205px;
+}
+
+.sortable li.span-3 {
+	width: 309px;
+}
+
+.sortable li.span-4 {
+	width: 415px;
+}
+
+.sortable li a {
+	font-size: 0.5em;
+	cursor: pointer;
+}
+/*
+.form-table th {
+	width: auto;
+}
+*/
+.ninja-forms-style-sortable li {
+	background: #f1f1f1;
+	border-radius: 3px;
+}
+.ninja-forms-style-sortable li span {
+	background: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	color: #fff;
+	display: block;
+	margin: -2px -2px 2px;
+	font-size: 12px;
+	padding: 2px;
+}
+.ninja-forms-style-button {
+	background: #f3f3f3;
+	background-image: -webkit-gradient(linear,left top,left bottom,from(#fefefe),to(#f4f4f4));
+	background-image: -webkit-linear-gradient(top,#fefefe,#f4f4f4);
+	background-image: -moz-linear-gradient(top,#fefefe,#f4f4f4);
+	background-image: -o-linear-gradient(top,#fefefe,#f4f4f4);
+	background-image: linear-gradient(to bottom,#fefefe,#f4f4f4);
+	border-color: #bbb;
+	color: #333;
+	text-shadow: 0 1px 0 #fff;
+	display: inline-block;
+	text-decoration: none;
+	font-size: 12px;
+	line-height: 22px;
+	height: 24px;
+	margin: 2px 0;
+	padding: 0 10px;
+	cursor: pointer;
+	border-width: 1px;
+	border-style: solid;
+	-webkit-border-radius: 3px;
+	-webkit-appearance: none;
+	border-radius: 3px;
+	white-space: nowrap;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.ninja-forms-style-button:hover {
+	border-color: #999;
+}
+.ninja-custom-css {
+	width: 100%;
+	height: 150px;
+}
+
+.layout-error {
+	background: #dd3d36 !important;
+	border: 1px solid #dd3d36 !important;
+	height: 96px;
+	position: relative;
+}
+.layout-error-msg {
+	color: #fff;
+	font-size: 14px;
+	padding: 10px;
+}

+[class*='ninja-col-'] {
+    float: left;
+    padding: 0 5px;
+}
+
+/*[class*='ninja-col-']:last-of-type {
+    padding-right: 0;
+}*/
+
+.ninja-col-1-2 { width: 50%; }
+.ninja-col-2-2 { width: 100%; }
+
+.ninja-col-1-3 { width: 33.33%; }
+.ninja-col-2-3 { width: 66.66%; }
+.ninja-col-3-3 { width: 100%; }
+
+.ninja-col-1-4 { width: 25%; }
+.ninja-col-2-4 { width: 50%; }
+.ninja-col-3-4 { width: 75%; }
+.ninja-col-4-4 { width: 100%; }
+
+.ninja-row { width: auto; margin: 0 auto; padding: 0; }
+
+.ninja-row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.nf-2col-list-checkbox-wrap li,
+.nf-2col-list-radio-wrap li {
+    float: left;
+    padding: 0 5px;
+    width: 50%;
+}
+
+.nf-3col-list-checkbox-wrap li,
+.nf-3col-list-radio-wrap li {
+    float: left;
+    padding: 0 5px;
+    width: 33.33%;
+}
+
+.nf-4col-list-checkbox-wrap li,
+.nf-4col-list-radio-wrap li {
+    float: left;
+    padding: 0 5px;
+    width: 25%;
+}
+
+/*.ninja-row  > [class*='ninja-col-']:last-of-type {
+    padding-right: 5px;
+}*/
+
+/* =Responsive Structure
+----------------------------------------------- */
+
+@media  only screen and (max-width: 600px) {
+    .ninja-row [class*='ninja-col-'],
+    .nf-2col-list-checkbox-wrap li,
+    .nf-2col-list-radio-wrap li,
+    .nf-3col-list-checkbox-wrap li,
+    .nf-3col-list-radio-wrap li,
+    .nf-4col-list-checkbox-wrap li,
+    .nf-4col-list-radio-wrap li {
+        width: 100%;
+        margin-right: 0;
+    }
+}

+<?php
+
+//Add Styling to the admin menu
+add_action( 'admin_menu', 'ninja_forms_add_style_menu', 99 );
+function ninja_forms_add_style_menu(){
+
+	$capabilities = 'administrator';
+	$capabilities = apply_filters( 'ninja_forms_admin_menu_capabilities', $capabilities );
+
+	$style = add_submenu_page( 'ninja-forms', __( 'Ninja Forms - Layout & Styles', 'ninja-forms-style' ), __( 'Styling', 'ninja-forms-style' ), $capabilities, 'ninja-forms-style', 'ninja_forms_admin' );
+	add_action('admin_print_styles-' . $style, 'ninja_forms_admin_js');
+	add_action('admin_print_styles-' . $style, 'ninja_forms_style_admin_js');
+	add_action('admin_print_styles-' . $style, 'ninja_forms_admin_css');
+	add_action('admin_print_styles-' . $style, 'ninja_forms_style_admin_css');
+}
\ No newline at end of file

+<?php
+
+add_action('wp_ajax_ninja_forms_style_field_styling', 'ninja_forms_style_field_styling');
+function ninja_forms_style_field_styling(){
+	global $ninja_forms_style_metaboxes;
+	$field_id = $_REQUEST['field_id'];
+	$field_row = ninja_forms_get_field_by_id( $field_id );
+	$field_type = $field_row['type'];
+
+	?>
+	<input type="hidden" name="field_id" value="<?php echo $field_id;?>">
+	<?php
+	ninja_forms_style_advanced_checkbox_display();
+
+	do_action( 'ninja_forms_style_field_metaboxes', $field_id );
+
+	if( is_array( $ninja_forms_style_metaboxes['page']['field'] ) ){
+		foreach( $ninja_forms_style_metaboxes['page']['field'] as $key=>$args ){
+			ninja_forms_output_tab_metabox('', $args['slug'], $args);
+		}
+	}
+
+	if( isset( $ninja_forms_style_metaboxes['field'][$field_type] ) AND is_array( $ninja_forms_style_metaboxes['field'][$field_type] ) ){
+		foreach( $ninja_forms_style_metaboxes['field'][$field_type] as $key=>$args ){
+			ninja_forms_output_tab_metabox('', $args['slug'], $args);
+		}
+	}
+
+	die();
+}
+
+function ninja_forms_style_field_metabox_output( $metabox ){
+	$field_id = $_REQUEST['field_id'];
+	$metabox['field_id'] = $field_id;
+	ninja_forms_style_metabox_output( $metabox );
+}
+
+add_action('wp_ajax_ninja_forms_style_field_styling_save', 'ninja_forms_style_field_styling_save');
+function ninja_forms_style_field_styling_save(){
+	$data = $_REQUEST['data'];
+
+	$advanced = $data['advanced'];
+	unset( $data['advanced'] );
+	$field_id = $data['field_id'];
+	unset( $data['field_id'] );
+
+	$field_row = ninja_forms_get_field_by_id( $field_id );
+	$field_data = $field_row['data'];
+
+	$tmp_array = array();
+	foreach( $data as $group => $d ){
+		$field_data['style']['groups'][$group] = $d;
+	}
+
+	$field_data = serialize( $field_data );
+
+	$args = array(
+		'update_array' => array(
+			'data' => $field_data,
+			),
+		'where' => array(
+			'id' => $field_id,
+			),
+	);
+	ninja_forms_update_field( $args );
+
+	$plugin_settings = get_option( 'ninja_forms_settings' );
+
+	$plugin_settings['style']['advanced'] = $advanced;
+
+	update_option( 'ninja_forms_settings', $plugin_settings);
+
+	die();
+}
+
+add_action('wp_ajax_ninja_forms_style_form_styling_save', 'ninja_forms_style_form_styling_save');
+function ninja_forms_style_form_styling_save(){
+	$data = $_REQUEST['data'];
+
+	$advanced = $data['advanced'];
+	unset( $data['advanced'] );
+	$form_id = $data['form_id'];
+	unset( $data['form_id'] );
+
+	$form_row = ninja_forms_get_form_by_id( $form_id );
+	$form_data = $form_row['data'];
+
+	if( isset( $data['container'] ) ){
+		$form_data['style']['groups']['container'] = $data['container'];
+	}
+
+	if( isset( $data['title'] ) ){
+		$form_data['style']['groups']['title'] = $data['title'];
+	}
+
+	if( isset( $data['row'] ) ){
+		$form_data['style']['groups']['row'] = $data['row'];
+	}
+
+	if( isset( $data['row-odd'] ) ){
+		$form_data['style']['groups']['row-odd'] = $data['row-odd'];
+	}
+
+	if( isset( $data['success-msg'] ) ){
+		$form_data['style']['groups']['success-msg'] = $data['success-msg'];
+	}
+
+	if( isset( $data['error_msg'] ) ){
+		$form_data['style']['groups']['error_msg'] = $data['error_msg'];
+	}
+
+	if ( is_array( $form_data ) ) {
+		foreach ( $form_data as $key => $val ) {
+			Ninja_Forms()->form( $form_id )->update_setting( $key, $val );
+		}
+	}
+
+	Ninja_Forms()->form( $form_id )->dump_cache();
+
+	$plugin_settings = get_option( 'ninja_forms_settings' );
+
+	$plugin_settings['style']['advanced'] = $advanced;
+
+	update_option( 'ninja_forms_settings', $plugin_settings);
+
+	die();
+}

+<?php
+
+add_action( 'init', 'ninja_forms_register_tab_impexp_style', 11 );
+function ninja_forms_register_tab_impexp_style(){
+	$args = array(
+		'name' => __( 'Styles', 'ninja-forms-style' ),
+		'page' => 'ninja-forms-impexp',
+		'display_function' => '',
+		'save_function' => 'ninja_forms_save_impexp_style',
+		'show_save' => false,
+	);
+	if( function_exists( 'ninja_forms_register_tab' ) ){
+		ninja_forms_register_tab( 'impexp_style', $args );
+	}
+}
+
+add_action( 'init', 'ninja_forms_register_imp_style_metabox' );
+function ninja_forms_register_imp_style_metabox(){
+	$args = array(
+		'page' => 'ninja-forms-impexp',
+		'tab' => 'impexp_style',
+		'slug' => 'imp_style',
+		'title' => __( 'Import Default Styles', 'ninja-forms-style' ),
+		'settings' => array(
+			array(
+				'name' => 'userfile',
+				'type' => 'file',
+				'label' => __( 'Select a file', 'ninja-forms-style' ),
+				'desc' => '',
+				'max_file_size' => 5000000,
+				'help_text' => '',
+			),
+			array(
+				'name' => 'submit',
+				'type' => 'submit',
+				'label' => __( 'Import Styles', 'ninja-forms-style' ),
+				'class' => 'button-secondary',
+			),
+		),
+	);
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+}
+
+add_action('init', 'ninja_forms_register_exp_style_metabox');
+function ninja_forms_register_exp_style_metabox(){
+
+	$args = array(
+		'page' => 'ninja-forms-impexp',
+		'tab' => 'impexp_style',
+		'slug' => 'exp_style',
+		'title' => __( 'Export Styles', 'ninja-forms-style' ),
+		'settings' => array(
+			array(
+				'name' => 'submit',
+				'type' => 'submit',
+				'label' => __( 'Export Styles', 'ninja-forms-style' ),
+				'class' => 'button-secondary',
+			),
+		),
+	);
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+}
+
+function ninja_forms_save_impexp_style( $data ){
+	if( isset( $data['submit'] ) ){
+		switch( $data['submit'] ){
+			case __( 'Import Styles', 'ninja-forms-style' ):
+				if( $_FILES['userfile']['error'] == UPLOAD_ERR_OK AND is_uploaded_file( $_FILES['userfile']['tmp_name'] ) ){
+					$plugin_settings = get_option( 'ninja_forms_settings' );
+					$file = file_get_contents($_FILES['userfile']['tmp_name']); 
+					$style = unserialize( $file );
+					$plugin_settings['style'] = $style;
+					update_option( 'ninja_forms_settings', $plugin_settings );
+					$update_msg = __( 'Styles Imported', 'ninja-forms-style' );
+					return $update_msg;
+				}
+				break;
+			case __( 'Export Styles', 'ninja-forms-style' ):
+				$download = ninja_forms_export_style();
+				$update_msg = __( 'Styles Exported Successfully', 'ninja-forms-style' );
+				if( $download == 1 ){
+					$update_msg = __( 'No Styles Found', 'ninja-forms-style' );
+				}
+				return $update_msg;
+				break;
+		}
+	}
+}
+
+function ninja_forms_export_style(){
+	$plugin_settings = get_option( 'ninja_forms_settings' );
+	if( isset( $plugin_settings['style'] ) ){
+		$style = $plugin_settings['style'];
+	}else{
+		$style = '';
+	}
+
+	if( $style == '' ){
+		return 1;
+	}else{
+
+		if(isset($plugin_settings['date_format'])){
+			$date_format = $plugin_settings['date_format'];
+		}else{
+			$date_format = 'm/d/Y';
+		}
+
+		$current_time = current_time('timestamp');
+		$today = date($date_format, $current_time);
+
+		$style = serialize( $style );
+		header("Content-type: application/csv");
+		header("Content-Disposition: attachment; filename=ninja-forms-styles-".$today.".nfs");
+		header("Pragma: no-cache");
+		header("Expires: 0");
+		echo $style;
+		die();		
+	}
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_register_tab_style_datepicker_settings' );
+function ninja_forms_register_tab_style_datepicker_settings(){
+	$args = array(
+		'name' => __( 'DatePicker Styles', 'ninja-forms-style' ),
+		'page' => 'ninja-forms-style',
+		'display_function' => 'ninja_forms_style_advanced_checkbox_display',
+		'save_function' => 'ninja_forms_save_style_datepicker_settings',
+	);
+	if( function_exists( 'ninja_forms_register_tab' ) ){
+		ninja_forms_register_tab( 'datepicker_settings', $args );
+	}
+}
+
+add_action( 'init', 'ninja_forms_register_style_datepicker_settings_metaboxes' );
+function ninja_forms_register_style_datepicker_settings_metaboxes(){
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'datepicker_settings',
+		'slug' => 'datepicker_container',
+		'title' => __( 'DatePicker Container', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div#ui-datepicker-div',
+		'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'datepicker_settings',
+		'slug' => 'datepicker_header',
+		'title' => __( 'DatePicker Header', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div#ui-datepicker-div .ui-datepicker-header',
+		'css_exclude' => array( 'float', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'datepicker_settings',
+		'slug' => 'datepicker_week',
+		'title' => __( 'DatePicker Week Days', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div#ui-datepicker-div .ui-datepicker-calendar th',
+		'css_exclude' => array( 'float', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'datepicker_settings',
+		'slug' => 'datepicker_days',
+		'title' => __( 'DatePicker Days', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div#ui-datepicker-div .ui-datepicker-calendar td',
+		'css_exclude' => array( 'float', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'datepicker_settings',
+		'slug' => 'datepicker_prev',
+		'title' => __( 'DatePicker Prev Link', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div#ui-datepicker-div .ui-datepicker-prev',
+		'css_exclude' => array( 'float', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'datepicker_settings',
+		'slug' => 'datepicker_next',
+		'title' => __( 'DatePicker Next Link', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div#ui-datepicker-div .ui-datepicker-next',
+		'css_exclude' => array( 'float', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+}
+
+function ninja_forms_save_style_datepicker_settings( $data ){
+	$plugin_settings = get_option( 'ninja_forms_settings' );
+
+	$plugin_settings['style']['form_settings']['datepicker_container'] = $data['datepicker_container'];
+	$plugin_settings['style']['form_settings']['datepicker_header'] = $data['datepicker_header'];
+	$plugin_settings['style']['form_settings']['datepicker_week'] = $data['datepicker_week'];
+	$plugin_settings['style']['form_settings']['datepicker_days'] = $data['datepicker_days'];
+	$plugin_settings['style']['form_settings']['datepicker_prev'] = $data['datepicker_prev'];
+	$plugin_settings['style']['form_settings']['datepicker_next'] = $data['datepicker_next'];
+
+	update_option( 'ninja_forms_settings', $plugin_settings);
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_register_tab_style_error_settings' );
+function ninja_forms_register_tab_style_error_settings(){
+	$args = array(
+		'name' => __( 'Error Styles', 'ninja-forms-style' ),
+		'page' => 'ninja-forms-style',
+		'display_function' => 'ninja_forms_style_advanced_checkbox_display',
+		'save_function' => 'ninja_forms_save_style_error_settings',
+	);
+	if( function_exists( 'ninja_forms_register_tab' ) ){
+		ninja_forms_register_tab( 'error_settings', $args );
+	}
+}
+
+add_action( 'init', 'ninja_forms_register_style_error_settings_metaboxes' );
+function ninja_forms_register_style_error_settings_metaboxes(){
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'error_settings',
+		'slug' => 'error_msg',
+		'title' => __( 'Error Message Main Wrap Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-forms-error-msg',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'error_settings',
+		'slug' => 'field_error_wrap',
+		'title' => __( 'Error Field Wrap Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-forms-error',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'error_settings',
+		'slug' => 'field_error_label',
+		'title' => __( 'Error Label Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-forms-error label',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'error_settings',
+		'slug' => 'field_error_element',
+		'title' => __( 'Error Element Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-forms-error .ninja-forms-field',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'error_settings',
+		'slug' => 'field_error_msg',
+		'title' => __( 'Error Message Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-forms-error div.ninja-forms-field-error',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+}
+
+function ninja_forms_save_style_error_settings( $data ){
+	$plugin_settings = get_option( 'ninja_forms_settings' );
+
+	$plugin_settings['style']['form_settings']['error_msg'] = $data['error_msg'];
+	$plugin_settings['style']['form_settings']['field_error_wrap'] = $data['field_error_wrap'];
+	$plugin_settings['style']['form_settings']['field_error_label'] = $data['field_error_label'];
+	$plugin_settings['style']['form_settings']['field_error_element'] = $data['field_error_element'];
+	$plugin_settings['style']['form_settings']['field_error_element'] = $data['field_error_element'];
+	$plugin_settings['style']['form_settings']['field_error_msg'] = $data['field_error_msg'];
+
+	update_option( 'ninja_forms_settings', $plugin_settings);
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_register_tab_style_field_settings' );
+function ninja_forms_register_tab_style_field_settings(){
+	$args = array(
+		'name' => __( 'Default Field Styles', 'ninja-forms-style' ),
+		'page' => 'ninja-forms-style',
+		'display_function' => 'ninja_forms_style_advanced_checkbox_display',
+		'save_function' => 'ninja_forms_save_style_field_settings',
+	);
+	if( function_exists( 'ninja_forms_register_tab' ) ){
+		ninja_forms_register_tab( 'field_settings', $args );
+	}
+}
+
+add_action( 'init', 'ninja_forms_register_style_field_settings_metaboxes' );
+
+function ninja_forms_register_style_field_settings_metaboxes(){
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'field_settings',
+		'slug' => 'wrap',
+		'title' => __( 'Wrap Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'field_settings',
+		'css_selector' => 'div.field-wrap',
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'field_settings',
+		'slug' => 'label',
+		'title' => __( 'Label Styles', 'ninja-forms-style'),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'field_settings',
+		'css_selector' => 'div.field-wrap label',
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'field_settings',
+		'slug' => 'field',
+		'title' => __( 'Element Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'field_settings',
+		'css_selector' => '.ninja-forms-field',
+		'css_exclude' => array( 'width', 'height', 'etc' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+}
+
+function ninja_forms_save_style_field_settings( $data ){
+	$plugin_settings = get_option( 'ninja_forms_settings' );
+
+	$plugin_settings['style']['advanced'] = $data['advanced'];
+
+	$plugin_settings['style']['field_settings']['wrap'] = $data['wrap'];
+	$plugin_settings['style']['field_settings']['label'] = $data['label'];
+	$plugin_settings['style']['field_settings']['field'] = $data['field'];
+	
+	update_option( 'ninja_forms_settings', $plugin_settings);
+}
\ No newline at end of file

+<?php
+
+add_action( 'admin_init', 'ninja_forms_register_style_sidebar_select_field' );
+function ninja_forms_register_style_sidebar_select_field(){
+	$args = array(
+		'name' => __( 'Select A Field Type', 'ninja-forms-style' ),
+		'page' => 'ninja-forms-style',
+		'tab' => 'field_type_settings',
+		'display_function' => 'ninja_forms_style_sidebar_select_field_display',
+		'save_function' => '',
+	);
+
+	if( function_exists( 'ninja_forms_register_sidebar' ) ){
+		ninja_forms_register_sidebar('select_subs', $args);
+	}
+	
+}
+
+function ninja_forms_style_sidebar_select_field_display(){
+	global $ninja_forms_fields;
+	$ninja_forms_fields['_list']['type_dropdown_function'] = 'ninja_forms_list_field_type_dropdown';
+	$args = array();
+	if( isset( $_REQUEST['field_type'] ) ){
+		$args['selected'] = $_REQUEST['field_type'];
+	}
+	ninja_forms_field_type_dropdown( $args );
+}
+
+/*
+ *
+ * Function that outputs select options for our "list" field type, since it has sub-types.
+ *
+ * @since 1.0.3
+ * @returns string $output
+ */
+
+function ninja_forms_list_field_type_dropdown( $selected ){
+	$output = '<option value="" disabled>' . __( 'List', 'ninja-forms-style' ) . '</option>';
+
+	if ( $selected == '_list-dropdown' ) {
+		$select = 'selected="selected"';
+	} else {
+		$select = '';
+	}
+	$output .= '<option value="_list-dropdown" '.$select.'>&nbsp;&nbsp;&nbsp;&nbsp;' . __( 'Dropdown (Select)', 'ninja-forms-style' ) . '</option>';
+
+	if ( $selected == '_list-radio' ) {
+		$select = 'selected="selected"';
+	} else {
+		$select = '';
+	}
+	$output .= '<option value="_list-radio" '.$select.'>&nbsp;&nbsp;&nbsp;&nbsp;' . __( 'Radio', 'ninja-forms-style' ) . '</option>';
+
+	if ( $selected == '_list-checkbox' ) {
+		$select = 'selected="selected"';
+	} else {
+		$select = '';
+	}
+	$output .= '<option value="_list-checkbox" '.$select.'>&nbsp;&nbsp;&nbsp;&nbsp;' . __( 'Checkboxes', 'ninja-forms-style' ) . '</option>';
+
+	if ( $selected == '_list-multi' ) {
+		$select = 'selected="selected"';
+	} else {
+		$select = '';
+	}
+	$output .= '<option value="_list-multi" '.$select.'>&nbsp;&nbsp;&nbsp;&nbsp;' . __( 'Multi-Select', 'ninja-forms-style' ) . '</option>';
+
+	return $output;
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_register_tab_style_form_settings' );
+function ninja_forms_register_tab_style_form_settings(){
+	$args = array(
+		'name' => __( 'Form Styles', 'ninja-forms-style' ),
+		'page' => 'ninja-forms-style',
+		'display_function' => 'ninja_forms_style_advanced_checkbox_display',
+		'save_function' => 'ninja_forms_save_style_form_settings',
+	);
+	if( function_exists( 'ninja_forms_register_tab' ) ){
+		ninja_forms_register_tab( 'form_settings', $args );
+	}
+}
+
+add_action( 'init', 'ninja_forms_register_style_form_settings_metaboxes' );
+function ninja_forms_register_style_form_settings_metaboxes(){
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'form_settings',
+		'slug' => 'container',
+		'title' => __( 'Container Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-forms-form-wrap',
+		'css_exclude' => '',
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'form_settings',
+		'slug' => 'title',
+		'title' => __( 'Title Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'h2.ninja-forms-form-title',
+		'css_exclude' => '',
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'form_settings',
+		'slug' => 'required-message',
+		'title' => __( 'Required Message Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => '.ninja-forms-required-items',
+		'css_exclude' => '',
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'form_settings',
+		'slug' => 'row',
+		'title' => __( 'Row Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-row',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'form_settings',
+		'slug' => 'row-odd',
+		'title' => __( 'Odd Row Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-row:nth-child(odd)',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'form_settings',
+		'slug' => 'success-msg',
+		'title' => __( 'Success Response Message Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-forms-success-msg',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+}
+
+function ninja_forms_save_style_form_settings( $data ){
+	$plugin_settings = get_option( 'ninja_forms_settings' );
+
+	$plugin_settings['style']['advanced'] = $data['advanced'];
+	$plugin_settings['style']['form_settings']['container'] = $data['container'];
+	$plugin_settings['style']['form_settings']['title'] = $data['title'];
+	$plugin_settings['style']['form_settings']['required-message'] = $data['required-message'];
+	$plugin_settings['style']['form_settings']['row'] = $data['row'];
+	$plugin_settings['style']['form_settings']['row-odd'] = $data['row-odd'];
+	$plugin_settings['style']['form_settings']['success-msg'] = $data['success-msg'];
+
+	update_option( 'ninja_forms_settings', $plugin_settings);
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_register_tab_style_mp_settings' );
+function ninja_forms_register_tab_style_mp_settings(){
+	$args = array(
+		'name' => __( 'Multi-Part Styles', 'ninja-forms-style' ),
+		'page' => 'ninja-forms-style',
+		'display_function' => 'ninja_forms_style_advanced_checkbox_display',
+		'save_function' => 'ninja_forms_save_style_mp_settings',
+	);
+	if( function_exists( 'ninja_forms_register_tab' ) && function_exists( 'ninja_forms_mp_load_translations' ) ){
+		ninja_forms_register_tab( 'mp_settings', $args );
+	}
+}
+
+add_action( 'init', 'ninja_forms_register_style_mp_settings_metaboxes' );
+function ninja_forms_register_style_mp_settings_metaboxes(){
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_page',
+		'title' => __( 'Form Page', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div .ninja-forms-mp-page',
+		//'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_breadcrumb_container',
+		'title' => __( 'Breadcrumb Container', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => '.ninja-forms-form ul.ninja-forms-mp-breadcrumbs',
+		//'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_breadcrumb_buttons',
+		'title' => __( 'Breadcrumb Buttons', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => '.ninja-forms-form ul.ninja-forms-mp-breadcrumbs li input[type=submit]',
+		//'css_exclude' => array( 'float', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_breadcrumb_hover',
+		'title' => __( 'Breadcrumb Button Hover', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => '.ninja-forms-form ul.ninja-forms-mp-breadcrumbs li input[type=submit]:hover',
+		'css_exclude' => array( 'float', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_breadcrumb_active',
+		'title' => __( 'Breadcrumb Active Button', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => '.ninja-forms-form ul.ninja-forms-mp-breadcrumbs li input[type=submit].ninja-forms-mp-breadcrumb-active',
+		'css_exclude' => array( 'float', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_progress_container',
+		'title' => __( 'Progress Bar Container', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.meter',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_progressbar_fill',
+		'title' => __( 'Progress Bar Fill', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.meter > span',
+		'css_exclude' => array( 'float', 'margin' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_page_title',
+		'title' => __( 'Page Titles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'h3.ninja-forms-mp-page-title',
+		//'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_prevnext_container',
+		'title' => __( 'Prev/Next Container', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'div.ninja-forms-mp-nav-wrap',
+		'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_prev',
+		'title' => __( 'Previous Button', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'form.ninja-forms-form div.ninja-forms-mp-nav-wrap .ninja-forms-mp-prev',
+		//'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_next',
+		'title' => __( 'Next Button', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'form.ninja-forms-form div.ninja-forms-mp-nav-wrap .ninja-forms-mp-next',
+		//'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+
+	$args = array(
+		'page' => 'ninja-forms-style',
+		'tab' => 'mp_settings',
+		'slug' => 'mp_button_hover',
+		'title' => __( 'Prev / Next Button Hover', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_metabox_output',
+		'save_page' => 'form_settings',
+		'css_selector' => 'form.ninja-forms-form div.ninja-forms-mp-nav-wrap .ninja-forms-mp-nav:hover',
+		//'css_exclude' => array( 'float' ),
+	);
+
+	if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+		ninja_forms_register_tab_metabox($args);
+	}
+}
+
+function ninja_forms_save_style_mp_settings( $data ){
+	$plugin_settings = get_option( 'ninja_forms_settings' );
+
+	$plugin_settings['style']['form_settings']['mp_breadcrumb_container'] = $data['mp_breadcrumb_container'];
+	$plugin_settings['style']['form_settings']['mp_breadcrumb_buttons'] = $data['mp_breadcrumb_buttons'];
+	$plugin_settings['style']['form_settings']['mp_breadcrumb_active'] = $data['mp_breadcrumb_active'];
+	$plugin_settings['style']['form_settings']['mp_breadcrumb_hover'] = $data['mp_breadcrumb_hover'];
+	$plugin_settings['style']['form_settings']['mp_progress_container'] = $data['mp_progress_container'];
+	$plugin_settings['style']['form_settings']['mp_progressbar_fill'] = $data['mp_progressbar_fill'];
+	$plugin_settings['style']['form_settings']['mp_page_title'] = $data['mp_page_title'];
+	$plugin_settings['style']['form_settings']['mp_prevnext_container'] = $data['mp_prevnext_container'];
+	$plugin_settings['style']['form_settings']['mp_prev'] = $data['mp_prev'];
+	$plugin_settings['style']['form_settings']['mp_next'] = $data['mp_next'];
+	$plugin_settings['style']['form_settings']['mp_button_hover'] = $data['mp_button_hover'];
+	$plugin_settings['style']['form_settings']['mp_page'] = $data['mp_page'];
+
+	update_option( 'ninja_forms_settings', $plugin_settings);
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_register_tab_style_theme_settings' );
+function ninja_forms_register_tab_style_theme_settings(){
+    $args = array(
+        'name' => 'Themes',
+        'page' => 'ninja-forms-style',
+        //'display_function' => 'ninja_forms_style_theme_display',
+        'save_function' => 'ninja_forms_save_style_theme_settings',
+    );
+    if( function_exists( 'ninja_forms_register_tab' ) ){
+        ninja_forms_register_tab( 'theme_settings', $args );
+    }
+}
+
+add_action( 'init', 'ninja_forms_register_theme_settings_metabox');
+function ninja_forms_register_theme_settings_metabox(){
+
+    $plugin_settings = get_option( 'ninja_forms_settings' );
+    if( isset( $plugin_settings['style'] ) ){
+        $style_settings = $plugin_settings['style'];
+    }else{
+        $style_settings = '';
+    }
+
+    if( isset( $style_settings['default_theme'] ) ){
+        $default_theme = $style_settings['default_theme'];
+    }else{
+        $default_theme = 'none';
+    }
+
+    $args = array(
+        'page' => 'ninja-forms-style',
+        'tab' => 'theme_settings',
+        'slug' => 'set_theme',
+        'title' => __('Default Theme', 'ninja-forms'),
+        'settings' => array(
+            array(
+                'name' => 'default_theme',
+                'type' => 'select',
+                'options' => $themes,
+                'default_value' => $default_theme,
+                'label' => __( 'Default Theme', 'ninja-forms' ),
+                'desc' => '',
+            ),
+        ),
+    );
+    if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+        ninja_forms_register_tab_metabox($args);
+    }
+
+    $args = array(
+        'page' => 'ninja-forms-style',
+        'tab' => 'theme_settings',
+        'slug' => 'edit_themes',
+        'title' => __('Edit Themes', 'ninja-forms'),
+        'settings' => array(
+            array(
+                'name' => 'select_theme',
+                'type' => 'select',
+                'options' => $themes,
+                'default_value' => $selected_theme,
+                'label' => __( 'Select a Theme', 'ninja-forms' ),
+                'desc' => '',
+            ),
+            array(
+                'name' => 'theme_name',
+                'type' => 'text',
+                'label' => __( 'Theme Name (Save Theme As)', 'ninja-forms' ),
+                'desc' => 'Save this theme and changes with a new name',
+            ),
+            array(
+                'name' => 'theme_css',
+                'type' => 'textarea',
+                'label' => __( 'Theme CSS', 'ninja-forms' ),
+                'desc' => '',
+            ),
+        ),
+    );
+    if( function_exists( 'ninja_forms_register_tab_metabox' ) ){
+        ninja_forms_register_tab_metabox($args);
+    }
+}
+
+
+function ninja_forms_style_theme_display() {
+    ?>
+    <select>
+        <option>Theme One</option>
+        <option>Theme Two</option>
+        <option>Theme Three </option>
+    </select>
+    <?php
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_style_default_metaboxes' );
+function ninja_forms_style_default_metaboxes(){
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'wrap',
+		'title' => __( 'Wrap Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap',
+		'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+	ninja_forms_register_style_metabox( 'wrap', $args );
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'label',
+		'title' => __( 'Label Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_label',
+		'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+	ninja_forms_register_style_metabox( 'label', $args );
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'field',
+		'title' => __( 'Element Styles', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]',
+		'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+	ninja_forms_register_style_metabox( 'field', $args );
+
+}
+
+add_action( 'init', 'ninja_forms_style_submit_metaboxes' );
+function ninja_forms_style_submit_metaboxes(){
+	add_action( 'ninja_forms_style_field_metaboxes', 'ninja_forms_style_modify_submit_metaboxes', 10, 1 );
+}
+
+function ninja_forms_style_submit_front_end( $field_id ){
+	ninja_forms_style_modify_submit_metaboxes( $field_id );
+}
+
+add_action( 'ninja_forms_display_after_field', 'ninja_forms_style_submit_front_end' );
+
+
+function ninja_forms_style_modify_submit_metaboxes( $field_id ){
+	$field_row = ninja_forms_get_field_by_id( $field_id );
+	$field_type = $field_row['type'];
+	if( $field_type == '_submit' ){
+		ninja_forms_style_add_submit_metaboxes();
+	}
+}
+
+function ninja_forms_style_add_submit_metaboxes(){
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'submit_element_hover',
+		'field_type' => '_submit',
+		'title' => __( 'Element Hover', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap .ninja-forms-field:hover',
+	);
+
+	ninja_forms_register_style_metabox( 'submit_element_hover', $args );
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_register_style_layout_tab_div' );
+function ninja_forms_register_style_layout_tab_div(){
+	add_action( 'ninja_forms_style_layout_tab_div', 'ninja_forms_style_layout_tab_div' );
+}
+
+function ninja_forms_style_layout_tab_div( $form_id ){
+	if( $form_id != '' ){
+		
+		$form_row = ninja_forms_get_form_by_id( $form_id );
+		$form_data = $form_row['data'];
+
+		if( isset( $form_data['style']['cols'] ) ){
+			$cols = $form_data['style']['cols'];
+		}else{
+			$cols = 1;
+		}
+
+		if ( !is_numeric( $cols ) OR $cols == 0 ) {
+			$cols = 1;
+		}
+
+		$all_fields = ninja_forms_get_fields_by_form_id( $form_id );
+		?>
+		<br />
+		<div>
+			<?php _e( 'Columns', 'ninja-forms-style' ); ?>: 
+			<select name="cols" id="cols">
+				<option value="1" <?php selected( $cols, 1 );?>>1</option>
+				<option value="2" <?php selected( $cols, 2 );?>>2</option>
+				<option value="3" <?php selected( $cols, 3 );?>>3</option>
+				<option value="4" <?php selected( $cols, 4 );?>>4</option>
+			</select>
+		</div>
+		<input type="hidden" name="order" id="order" value="">
+		<div id="col_fields">
+			<?php
+
+			for ($x=1; $x <= $cols; $x++) { 
+				?>
+				<input type="hidden" name="col_<?php echo $x;?>" id="col_<?php echo $x;?>" value="">
+				<?php
+			}
+
+			?>
+		</div>
+		<div class="layout">
+			<?php 
+				ninja_forms_style_output_layout_ul( $form_id, $cols );
+			?>
+		</div><!-- End demo -->
+
+	<?php
+	}
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_register_style_layout_tab_mp_div' );
+function ninja_forms_register_style_layout_tab_mp_div(){
+	if( isset( $_REQUEST['form_id'] ) ){
+		$form_id = $_REQUEST['form_id'];
+	}else{
+		$form_id = '';
+	}
+
+	$enabled = false;
+	if ( function_exists( 'nf_mp_get_page_count' ) ) {
+		if ( nf_mp_get_page_count( $form_id ) > 1 ) {
+			$enabled = true;
+		}
+	} else if ( function_exists( 'ninja_forms_get_form_by_id' ) ) {
+		$form_row = ninja_forms_get_form_by_id( $form_id );
+		$form_data = $form_row['data'];
+		if( isset( $form_data['multi_part'] ) AND $form_data['multi_part'] == 1 ){
+			$enabled = true;
+		}
+	}
+
+	if( $form_id != '' ){
+		if ( $enabled ) {
+			remove_action( 'ninja_forms_style_layout_tab_div', 'ninja_forms_style_layout_tab_div' );
+			add_action( 'ninja_forms_style_layout_tab_div', 'ninja_forms_style_layout_tab_mp_div' );	
+		}
+	}
+}
+
+function ninja_forms_style_layout_tab_mp_div( $form_id ){
+	global $ninja_forms_fields;
+
+	if ( ! function_exists( 'ninja_forms_get_form_by_id' ) )
+		return false;
+
+	$form_row = ninja_forms_get_form_by_id( $form_id );
+	$form_data = $form_row['data'];
+	$all_fields = ninja_forms_get_fields_by_form_id( $form_id );
+	$pages = array();
+	if( is_array( $all_fields ) AND !empty( $all_fields ) ){
+		$pages = array();
+		$this_page = array();
+		$x = 0;
+		foreach( $all_fields as $field ){
+			if ( ! isset ( $ninja_forms_fields[ $field['type'] ] ) )
+				continue;
+			if( $field['type'] == '_page_divider' ){
+				$x++;
+			}
+			$pages[$x][] = $field['id'];
+		}
+	}
+	$page_count = count($pages);
+	if( isset( $_REQUEST['mp_page'] ) ){
+		$current_page = $_REQUEST['mp_page'];
+	}else{
+		$current_page = 1;
+	}
+
+	if( $current_page > $page_count ){
+		$current_page = $page_count;
+	}
+
+	$tmp = $current_page - 1;
+
+	$offset = $tmp * -450;
+
+?>
+	<input type="hidden" id="mp_form" value="1">
+	<input type="hidden" id="mp_page" name="mp_page" value="<?php echo $current_page;?>">
+	<div id="ninja-forms-style-viewport">
+		
+		<ul id="ninja-forms-style-mp-pagination">
+			<li class="style-mp-subtract">-</li>
+			<span id="style-mp-page-list">
+			<?php
+			if( is_array( $pages ) AND !empty( $pages ) ){
+				foreach( $pages as $page => $field_id ){
+					if( $page == $current_page ){
+						$active = 'active';
+						?>
+						<input type="hidden" id="_current_page" name="_current_page" value="<?php echo $current_page;?>">
+						<?php
+					}else{
+						$active = '';
+					}
+					?>
+					<li class="<?php echo $active;?> style-mp-page" title="<?php echo $page;?>" id="ninja_forms_style_mp_page_<?php echo $page;?>"><?php echo $page;?></li>
+					<?php
+				}
+			}
+			?>
+			</span>
+			<li class="style-mp-add">+</li>
+		<span class="spinner" style="float:left;display:none;"></span>
+		</ul>
+		<div id="ninja-forms-slide" style="left: <?php echo $offset;?>px;">
+		<?php
+			if( is_array( $pages ) AND !empty( $pages ) ){
+				foreach( $pages as $page => $fields ){
+					if( isset( $form_data['style']['mp'][$page]['cols'] ) ){
+						$cols = $form_data['style']['mp'][$page]['cols'];
+					}else{
+						$cols = 1;
+					}
+
+					?>
+					<div id="ninja_forms_style_mp_<?php echo $page;?>" class="style-layout">
+						<div>
+							<?php _e( 'Columns', 'ninja-forms-style' ); ?>: 
+							<select name="cols_<?php echo $page;?>" id="cols_<?php echo $page;?>" class="ninja-forms-style-col">
+								<option value="1" <?php selected( $cols, 1 );?>>1</option>
+								<option value="2" <?php selected( $cols, 2 );?>>2</option>
+								<option value="3" <?php selected( $cols, 3 );?>>3</option>
+								<option value="4" <?php selected( $cols, 4 );?>>4</option>
+							</select>
+						</div>
+						<input type="hidden" name="order_<?php echo $page;?>" id="order_<?php echo $page;?>" value="" class="field-order">
+						<div id="col_fields_<?php echo $page;?>">
+							<?php
+							for ($x=1; $x <= $cols; $x++) { 
+								?>
+								<input type="hidden" name="col_<?php echo $x;?>_<?php echo $page;?>" id="col_<?php echo $x;?>_<?php echo $page;?>" value="" class="col-fields">
+								<?php
+							}
+							?>
+						</div>
+
+						<?php
+							ninja_forms_style_output_layout_ul( $form_id, $cols, $fields, $page );
+						?>
+
+					</div>
+				<?php
+				}
+			}
+			?>
+		</div>
+	</div>
+<?php
+}
\ No newline at end of file

+<?php
+
+function ninja_forms_style_output_layout_ul( $form_id, $cols, $fields = '', $page = '' ){
+	global $ninja_forms_fields;
+
+	if( $fields == '' ){
+		$all_fields = ninja_forms_get_fields_by_form_id( $form_id );
+	}else{
+		foreach( $fields as $field_id ){
+			$all_fields[] = ninja_forms_get_field_by_id( $field_id );
+		}
+	}
+
+	if( $page != '' ){
+		$ul_id = 'ninja_forms_style_list_'.$page;
+	}else{
+		$ul_id = '';
+	}
+
+	$all_fields = apply_filters( 'ninja_forms_style_all_fields', $all_fields, $form_id );
+
+	?>
+	<ul id="<?php echo $ul_id;?>" class="sortable ninja-forms-style-sortable cols-<?php echo $cols;?>" rel="<?php echo $cols;?>">
+		<?php
+		if( !empty( $all_fields ) ){
+			foreach( $all_fields as $field ){
+				$type = $field['type'];
+				if( isset( $ninja_forms_fields[$type]['display_function'] ) ){
+					$display_function = $ninja_forms_fields[$type]['display_function'];
+				}else{
+					$display_function = '';
+				}
+				if( isset( $field['data']['label'] ) ){
+					$label = $field['data']['label'];
+				}else{
+					$label = '';
+				}
+				$label = strip_tags( $label );
+				if( $label == '' AND isset( $ninja_forms_fields[$type]['name'] ) ){
+					$label = $ninja_forms_fields[$type]['name'];
+				}
+				if( strlen( $label ) > 13 ){
+					$label = substr( $label, 0, 10 )."...";
+				}
+
+				if( isset( $field['data']['style']['colspan'] ) ){
+					$colspan = $field['data']['style']['colspan'];
+				}else{
+					$colspan = 1;
+				}
+				if( $display_function != '' ){
+					?>
+					<li class="ui-state-default span-<?php echo $colspan;?>" rel="<?php echo $colspan;?>" id="ninja_forms_field_<?php echo $field['id'];?>_li"><span class="style-handle"><?php echo $label;?><br /><?php _e( 'Field ID', 'ninja-forms-style' ); ?>: <?php echo $field['id'];?></span>
+						<a href="#" class="ninja-forms-style-expand ninja-forms-style-button"><?php _e( 'resize', 'ninja-forms-style' ); ?></a><br /><a href="#TB_inline?height=750&width=600&height=600&inlineId=ninja_forms_field_style_div&modal=true" class="thickbox field-styling ninja-forms-style-button" id="styling_<?php echo $field['id'];?>"><?php _e( 'styling', 'ninja-forms-style' ); ?></a>
+					</li>
+					<input type="hidden" name="colspan[<?php echo $field['id'];?>]" id="ninja_forms_field_<?php echo $field['id'];?>_colspan" value="<?php echo $colspan;?>">
+					<?php
+				}else{
+					?>
+					<li class="ui-disabled" style="display:none;" id="ninja_forms_field_<?php echo $field['id'];?>"></li>
+					<?php
+				}
+			}
+		}
+			?>
+	</ul>
+	<?php
+}
\ No newline at end of file

+<?php
+
+function ninja_forms_register_tab_form_style(){
+	$args = array(
+		'name' => __( 'Layout & Styles', 'ninja-forms-style' ),
+		'page' => 'ninja-forms',
+		'display_function' => 'ninja_forms_form_style_tab',
+		'save_function' => 'ninja_forms_save_form_style',
+		'show_save' => false,
+		'disable_no_form_id' => true,
+	);
+	if( function_exists( 'ninja_forms_register_tab' ) ){
+		ninja_forms_register_tab( 'form_layout', $args );
+	}
+}
+
+add_action( 'admin_init', 'ninja_forms_register_tab_form_style', 12 );
+
+function ninja_forms_form_style_tab(){
+	global $ninja_forms_fields;
+
+	if( isset( $_REQUEST['form_id'] ) ){
+		$form_id = $_REQUEST['form_id'];
+	}else{
+		$form_id = '';
+	}
+	?>
+	<input class="button-primary menu-save ninja-forms-save-data" id="ninja_forms_save_data_top" type="submit" value="<?php _e( 'Save Layout', 'ninja-forms-style' ); ?>" />
+	<a href="#TB_inline?height=750&width=600&height=600&inlineId=ninja_forms_form_style_div&modal=true" class="thickbox button-secondary"><?php _e( 'Modify Form Styles', 'ninja-forms-style' );?></a>
+	<br />
+	<br />
+	<?php
+
+	do_action( 'ninja_forms_style_layout_tab_div', $form_id );
+
+	?>
+		<div style="clear: both">
+			<br />
+			<br />
+
+			<?php add_thickbox(); ?>
+			<div id="ninja_forms_field_style_div" style="display:none;">
+				<br />
+				<input type="button" class="save-field-styling button-secondary" value="<?php _e( 'Save', 'ninja-forms-style' );?>">
+				<input type="button" class="cancel-field-styling button-secondary" value="<?php _e( 'Cancel', 'ninja-forms-style' );?>">
+				<span class="spinner" style="float:left;display:none;" id="loading_style"></span>
+				<br />
+				<br />
+
+				<div id="ninja_forms_field_styling">
+				</div>
+			</div>
+
+			<div id="ninja_forms_form_style_div" style="display:none;">
+				<br />
+				<input type="button" class="save-form-styling button-secondary" value="<?php _e( 'Save', 'ninja-forms-style' );?>">
+				<input type="button" class="cancel-form-styling button-secondary" value="<?php _e( 'Cancel', 'ninja-forms-style' );?>">
+				<!-- <span class="spinner" style="float:left;display:none;" id="loading_style"></span> -->
+				<br />
+				<br />
+				<div id="ninja_forms_form_style_inputs">
+					<input type="hidden" name="form_id" value="<?php echo $form_id;?>">
+					<?php
+						ninja_forms_style_advanced_checkbox_display();
+						$args = array(
+							'page' => 'ninja-forms-style',
+							'tab' => 'form_settings',
+							'slug' => 'container',
+							'title' => __( 'Container Styles', 'ninja-forms-style' ),
+							'state' => 'closed',
+							'display_function' => 'ninja_forms_style_form_metabox_output',
+							'save_page' => 'form',
+							'css_selector' => 'div.ninja-forms-form-wrap',
+							'css_exclude' => '',
+						);
+
+						if( function_exists( 'ninja_forms_output_tab_metabox' ) ){
+							ninja_forms_output_tab_metabox('', 'container', $args);
+						}
+
+						$args = array(
+							'page' => 'ninja-forms-style',
+							'tab' => 'form_settings',
+							'slug' => 'title',
+							'title' => __( 'Title Styles', 'ninja-forms-style' ),
+							'state' => 'closed',
+							'display_function' => 'ninja_forms_style_form_metabox_output',
+							'save_page' => 'form',
+							'css_selector' => 'div.ninja-forms-form-wrap .ninja-forms-form-title',
+							'css_exclude' => '',
+						);
+
+						if( function_exists( 'ninja_forms_output_tab_metabox' ) ){
+							ninja_forms_output_tab_metabox('', 'container', $args);
+						}
+
+						$args = array(
+							'page' => 'ninja-forms-style',
+							'tab' => 'form_settings',
+							'slug' => 'row',
+							'title' => __( 'Row Styles', 'ninja-forms-style' ),
+							'state' => 'closed',
+							'display_function' => 'ninja_forms_style_form_metabox_output',
+							'save_page' => 'form',
+							'css_selector' => 'div.ninja-row',
+							'css_exclude' => array( 'float' ),
+						);
+
+						if( function_exists( 'ninja_forms_output_tab_metabox' ) ){
+							ninja_forms_output_tab_metabox('', 'row', $args);
+						}
+
+						$args = array(
+							'page' => 'ninja-forms-style',
+							'tab' => 'form_settings',
+							'slug' => 'row-odd',
+							'title' => __( 'Odd Row Styles', 'ninja-forms-style' ),
+							'state' => 'closed',
+							'display_function' => 'ninja_forms_style_form_metabox_output',
+							'save_page' => 'form',
+							'css_selector' => 'div.ninja-row:nth-child(odd)',
+							'css_exclude' => array( 'float' ),
+						);
+
+						if( function_exists( 'ninja_forms_output_tab_metabox' ) ){
+							ninja_forms_output_tab_metabox('', 'row-odd', $args);
+						}
+
+						$args = array(
+							'page' => 'ninja-forms-style',
+							'tab' => 'form_settings',
+							'slug' => 'success-msg',
+							'title' => __( 'Success Response Message Styles', 'ninja-forms-style' ),
+							'state' => 'closed',
+							'display_function' => 'ninja_forms_style_form_metabox_output',
+							'save_page' => 'form',
+							'css_selector' => 'div.ninja-forms-success-msg',
+							'css_exclude' => array( 'float' ),
+						);
+
+						if( function_exists( 'ninja_forms_output_tab_metabox' ) ){
+							ninja_forms_output_tab_metabox('', 'success-msg', $args);
+						}
+						$args = array(
+							'page' => 'ninja-forms-style',
+							'tab' => 'form_settings',
+							'slug' => 'error_msg',
+							'title' => __( 'Error Response Message Styles', 'ninja-forms-style' ),
+							'state' => 'closed',
+							'display_function' => 'ninja_forms_style_form_metabox_output',
+							'save_page' => 'form',
+							'css_selector' => 'div.ninja-forms-error-msg',
+							'css_exclude' => array( 'float' ),
+						);
+
+						if( function_exists( 'ninja_forms_output_tab_metabox' ) ){
+							ninja_forms_output_tab_metabox('', 'error_msg', $args);
+						}
+
+					?>
+				</div>
+			</div>
+		</div>
+
+		<style>
+			#ninja_forms_admin_metaboxes {
+				display: none;
+			}
+			.postbox h3, .metabox-holder h3 {
+				font-size: 15px;
+				font-weight: normal;
+				padding: 7px 10px;
+				margin: 0;
+				line-height: 1;
+			}
+		</style>
+	<?php
+
+}
+
+function ninja_forms_style_form_metabox_output( $metabox ){
+	$form_id = $_REQUEST['form_id'];
+	$metabox['form_id'] = $form_id;
+	ninja_forms_style_metabox_output( $metabox );
+}
+
+function ninja_forms_save_form_style( $form_id, $data ){
+	global $wpdb, $ninja_forms_admin_update_message;
+
+	$order = '';
+	$cols = array();
+	if( isset( $data['order'] ) ){
+		$order = $data['order'];
+	}else{
+		$all_fields = ninja_forms_get_fields_by_form_id( $form_id );
+		$pages = array();
+		if( is_array( $all_fields ) AND !empty( $all_fields ) ){
+			$pages = array();
+			$this_page = array();
+			$x = 0;
+			foreach( $all_fields as $field ){
+				if( $field['type'] == '_page_divider' ){
+					$x++;
+				}
+				$pages[$x][] = $field['id'];
+			}
+		}
+		$page_count = count($pages);
+
+		for ($i=1; $i <= $page_count; $i++) {
+			if( isset( $data['order_'.$i] ) ){
+				if( $order == '' ){
+					$order = $data['order_'.$i];
+				}else{
+					$order .= ','.$data['order_'.$i];
+				}
+			}
+		}
+	}
+
+	if( $order != '' ){
+		$order = str_replace( 'ninja_forms_field_', '', $order );
+		$order = str_replace( '_li', '', $order );
+		$order = explode( ',', $order );
+		if( is_array( $order ) AND !empty( $order ) ){
+			foreach( $order as $key => $val ){
+				$wpdb->update( NINJA_FORMS_FIELDS_TABLE_NAME, array( 'order' => $key ), array( 'id' => $val ));
+			}
+		}
+	}
+
+	$form_row = ninja_forms_get_form_by_id( $form_id );
+	$form_data = $form_row['data'];
+
+	if( isset( $data['container'] ) ){
+		$form_data['style']['groups']['container'] = $data['container'];
+	}
+
+	if( isset( $data['title'] ) ){
+		$form_data['style']['groups']['title'] = $data['title'];
+	}
+
+	if( isset( $data['row'] ) ){
+		$form_data['style']['groups']['row'] = $data['row'];
+	}
+
+	if( isset( $data['row-odd'] ) ){
+		$form_data['style']['groups']['row-odd'] = $data['row-odd'];
+	}
+
+	if( isset( $data['success-msg'] ) ){
+		$form_data['style']['groups']['success-msg'] = $data['success-msg'];
+	}
+
+	if( isset( $data['error_msg'] ) ){
+		$form_data['style']['groups']['error_msg'] = $data['error_msg'];
+	}
+
+	$mp_enabled = false;
+	if ( function_exists( 'nf_mp_get_page_count' ) ) {
+		if ( nf_mp_get_page_count( $form_id ) > 1 ) {
+			$mp_enabled = true;
+		}
+	} else {
+		$form_row = ninja_forms_get_form_by_id( $form_id );
+		$form_data = $form_row['data'];
+		if( isset( $form_data['multi_part'] ) AND $form_data['multi_part'] == 1 ){
+			$mp_enabled = true;
+		}
+	}
+
+	if( $mp_enabled ){
+		$form_data['style']['cols'] = $cols;
+		unset( $form_data['style']['mp'] );
+		for ($i=1; $i <= $page_count; $i++) {
+			$form_data['style']['mp'][$i]['cols'] = $data['cols_'.$i];
+		}
+	}else{
+		$form_data['style']['cols'] = $data['cols'];
+	}
+
+	$args = array(
+		'update_array' => array(
+			'data' => serialize( $form_data ),
+			),
+		'where' => array(
+			'id' => $form_id,
+			),
+	);
+
+	ninja_forms_update_form( $args );
+
+	if( !empty( $data['colspan'] ) ){
+		foreach( $data['colspan'] as $field_id => $span ){
+			$field_row = ninja_forms_get_field_by_id( $field_id );
+			$field_data = $field_row['data'];
+			$field_data['style']['colspan'] = $span;
+			$field_data = array('data' => serialize($field_data));
+			$wpdb->update( NINJA_FORMS_FIELDS_TABLE_NAME, $field_data, array( 'id' => $field_id ));
+		}
+	}
+
+	$update_msg = __( 'Form Layout Saved', 'ninja-forms-style' );
+	return $update_msg;
+}

+<?php
+
+add_action( 'init', 'ninja_forms_style_list_metaboxes' );
+function ninja_forms_style_list_metaboxes(){
+	add_action( 'ninja_forms_style_field_metaboxes', 'ninja_forms_style_modify_list_metaboxes' );
+	//if( is_admin() ){
+		ninja_forms_style_add_list_metaboxes();
+	//}
+}
+
+function ninja_forms_style_modify_list_metaboxes( $field_id ){
+
+	$field_row = ninja_forms_get_field_by_id( $field_id );
+	$field_type = $field_row['type'];
+	$field_data = $field_row['data'];
+	if( isset( $field_data['list_type'] ) ){
+		$list_type = $field_data['list_type'];
+	}else{
+		$list_type = '';
+	}
+	if( $field_type == '_list' AND $list_type != 'dropdown' ){
+		ninja_forms_style_add_list_metaboxes();
+	}
+}
+
+function ninja_forms_style_add_list_metaboxes(){
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'list_item_row_field',
+		'field_type' => '_list',
+		'title' => __( 'List Item Row', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap ul li',
+		//'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	ninja_forms_register_style_metabox( 'list_item_row_field', $args );		
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'list_item_label_field',
+		'field_type' => '_list',
+		'title' => __( 'List Item Label', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap ul li label',
+		//'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	ninja_forms_register_style_metabox( 'list_item_label_field', $args );
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'list_item_element_field',
+		'field_type' => '_list',
+		'title' => __( 'List Item Element', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap ul li input',
+		//'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	ninja_forms_register_style_metabox( 'list_item_element_field', $args );
+}
\ No newline at end of file

+<?php
+
+add_action( 'init', 'ninja_forms_style_rating_metaboxes', 9 );
+function ninja_forms_style_rating_metaboxes(){
+	add_action( 'ninja_forms_style_field_metaboxes', 'ninja_forms_style_modify_rating_metaboxes' );
+	//if( is_admin() ){
+		ninja_forms_style_add_rating_metaboxes();
+	//}
+}
+
+function ninja_forms_style_modify_rating_metaboxes( $field_id ){
+	$field_row = ninja_forms_get_field_by_id( $field_id );
+	$field_type = $field_row['type'];
+	$field_data = $field_row['data'];
+	if( $field_type == '_rating' ){
+		$args = array( 'page' => 'field' );
+		// ninja_forms_unregister_style_metabox( 'field', $args );
+		ninja_forms_style_add_rating_metaboxes();
+	}
+
+}
+
+function ninja_forms_style_add_rating_metaboxes(){
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'rating_field_item',
+		'field_type' => '_rating',
+		'title' => __( 'Rating Item', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap div.ninja-forms-star-rating a',
+		//'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	ninja_forms_register_style_metabox( 'rating_field_item', $args );
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'rating_field_hover',
+		'field_type' => '_rating',
+		'title' => __( 'Rating Item Hover', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap div.ninja-forms-star-rating-hover a',
+		//'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	ninja_forms_register_style_metabox( 'rating_field_hover', $args );
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'rating_field_selected',
+		'field_type' => '_rating',
+		'title' => __( 'Rating Item Selected', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap div.ninja-forms-star-rating-on a',
+		//'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	ninja_forms_register_style_metabox( 'rating_field_selected', $args );
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'rating_field_cancel',
+		'field_type' => '_rating',
+		'title' => __( 'Cancel Ratings', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap div.rating-cancel a',
+		//'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	ninja_forms_register_style_metabox( 'rating_field_cancel', $args );
+
+	$args = array(
+		'page' => 'field',
+		'tab' => 'form_layout',
+		'slug' => 'rating_field_cancel_hover',
+		'field_type' => '_rating',
+		'title' => __( 'Cancel Ratings Hover', 'ninja-forms-style' ),
+		'state' => 'closed',
+		'display_function' => 'ninja_forms_style_field_metabox_output',
+		'save_page' => 'field',
+		'css_selector' => '#ninja_forms_field_[field_id]_div_wrap div.rating-cancel a:hover',
+		//'css_exclude' => array( 'float', 'padding', 'margin' ),
+	);
+
+	ninja_forms_register_style_metabox( 'rating_field_cancel_hover', $args );
+
+}
\ No newline at end of file

+<?php
+
+function ninja_forms_register_css_option( $slug, $args ){
+	global $ninja_forms_css_options;
+
+	if( is_array( $args ) AND !empty( $args ) ){
+		foreach( $args as $key => $val ){
+			$ninja_forms_css_options[$slug][$key] = $val;
+		}
+	}
+}
+
+function ninja_forms_register_style_metabox( $slug, $args ){
+	global $ninja_forms_style_metaboxes;
+
+	if( isset( $args['field_type'] ) AND $args['field_type'] != '' ){
+		$field_type = $args['field_type'];
+		$ninja_forms_style_metaboxes['field'][$field_type][$slug] = $args;
+	}else{
+		$page = $args['page'];
+		$ninja_forms_style_metaboxes['page'][$page][$slug] = $args;
+	}
+}
+
+function ninja_forms_unregister_style_metabox( $slug, $args ){
+	global $ninja_forms_style_metaboxes;
+
+	if( isset( $args['field_type'] ) AND $args['field_type'] != '' ){
+		$field_type = $args['field_type'];
+		unset( $ninja_forms_style_metaboxes['field'][$field_type][$slug] );
+	}else{
+		$page = $args['page'];
+		unset( $ninja_forms_style_metaboxes['page'][$page][$slug] );
+	}
+}
+
+function ninja_forms_register_css_options( $args ){
+	global $ninja_forms_css_options;
+
+	if( is_array( $args ) AND !empty( $args ) ){
+
+		if( !isset( $args['css_property'] ) ){
+			$args['css_property'] = '';
+		}
+
+		if( !isset( $args['group'] ) OR $args['group'] == '' ){
+			$args['group'] = 'basic';
+		}
+
+		foreach( $args as $arg ){
+			if( is_array( $arg ) ){
+				foreach( $arg as $key => $val ){
+					if( $key == 'name' ){
+						$name = $val;
+					}else{
+						$ninja_forms_css_options[$name][$key] = $val;
+					}
+				}
+			}
+		}
+	}
+}
+
+add_action( 'init', 'ninja_forms_css_options', 9 );
+function ninja_forms_css_options(){
+	$args = array(
+		array(
+			'name' => 'background-color',
+			'type' => 'text',
+			'label' => __( 'Background Color', 'ninja-forms-style' ),
+			'desc' => '',
+			'class' => 'color-picker',
+			'group' => 'basic',
+			'css_property' => 'background',
+		),
+		array(
+			'name' => 'border',
+			'type' => 'text',
+			'label' => __( 'Border Width', 'ninja-forms-style' ),
+			'group' => 'basic',
+			'css_property' => 'border-width',
+		),
+		array(
+			'name' => 'border-style',
+			'type' => 'select',
+			'options' => array(
+				array( 'name' => __( '- None', 'ninja-forms-style' ), 'value' => '' ),
+				array( 'name' => __( 'Solid', 'ninja-forms-style' ), 'value' => 'solid' ),
+				array( 'name' => __( 'Dashed', 'ninja-forms-style' ), 'value' => 'dashed' ),
+				array( 'name' => __( 'Dotted', 'ninja-forms-style' ), 'value' => 'dotted' ),
+			),
+			'label' => __( 'Border Style', 'ninja-forms-style' ),
+			'desc' => '',
+			'group' => 'basic',
+			'css_property' => 'border-style',
+		),
+		array(
+			'name' => 'border-color',
+			'type' => 'text',
+			'label' => __( 'Border Color', 'ninja-forms-style' ),
+			'desc' => '',
+			'class' => 'color-picker',
+			'group' => 'basic',
+			'css_property' => 'border-color',
+		),
+		array(
+			'name' => 'color',
+			'type' => 'text',
+			'label' => __( 'Text Color', 'ninja-forms-style' ),
+			'class' => 'color-picker',
+			'group' => 'basic',
+			'css_property' => 'color',
+		),
+		array(
+			'name' => 'height',
+			'type' => 'text',
+			'label' => __( 'Height', 'ninja-forms-style' ),
+			'group' => 'basic',
+			'css_property' => 'height',
+		),
+		array(
+			'name' => 'width',
+			'type' => 'text',
+			'label' => __( 'Width', 'ninja-forms-style' ),
+			'group' => 'basic',
+			'css_property' => 'width',
+		),
+		array(
+			'name' => 'display',
+			'type' => 'select',
+			'options' => array(
+				array( 'name' => __( '- Default', 'ninja-forms-style' ), 'value' => '' ),
+				array( 'name' => __( 'Block', 'ninja-forms-style' ), 'value' => 'block' ),
+				array( 'name' => __( 'Inline', 'ninja-forms-style' ), 'value' => 'inline' ),
+				array( 'name' => __( 'Inline Block', 'ninja-forms-style' ), 'value' => 'inline-block' ),
+			),
+			'label' => __( 'Display', 'ninja-forms-style' ),
+			'desc' => '',
+			'group' => 'advanced',
+			'css_property' => 'display',
+		),
+		array(
+			'name' => 'float',
+			'type' => 'text',
+			'label' => __( 'Float', 'ninja-forms-style' ),
+			'group' => 'advanced',
+			'css_property' => 'float',
+		),
+		array(
+			'name' => 'font-size',
+			'type' => 'text',
+			'label' => __( 'Font Size', 'ninja-forms-style' ),
+			'group' => 'basic',
+			'css_property' => 'font-size',
+		),
+		array(
+			'name' => 'margin',
+			'type' => 'text',
+			'label' => __( 'Margin', 'ninja-forms-style' ),
+			'group' => 'basic',
+			'css_property' => 'margin',
+		),
+		array(
+			'name' => 'padding',
+			'type' => 'text',
+			'label' => __( 'Padding', 'ninja-forms-style' ),
+			'group' => 'basic',
+			'css_property' => 'padding',
+		),
+		array(
+			'name' => 'advanced',
+			'type' => 'textarea',
+			'label' => __( 'Advanced CSS', 'ninja-forms-style' ),
+			'group' => 'advanced',
+			'class' => 'ninja-custom-css',
+			'css_property' => '',
+		),
+	);
+	ninja_forms_register_css_options( $args );
+}

+<?php
+
+add_action( 'admin_init', 'ninja_forms_style_admin_js' );
+function ninja_forms_style_admin_js(){
+
+	if ( defined( 'NINJA_FORMS_JS_DEBUG' ) && NINJA_FORMS_JS_DEBUG ) {
+		$suffix = '';
+		$src = 'dev';
+	} else {
+		$suffix = '.min';
+		$src = 'min';
+	}
+
+	if( isset( $_REQUEST['page'] ) AND ( $_REQUEST['page'] == 'ninja-forms-style' OR ( $_REQUEST['page'] == 'ninja-forms' AND ( isset( $_REQUEST['tab'] ) AND $_REQUEST['tab'] == 'form_layout' ) ) ) ){
+		wp_enqueue_script( 'wp-color-picker' );
+		wp_enqueue_script( 'ninja-forms-style-admin',
+			NINJA_FORMS_STYLE_URL .'/js/' . $src .'/ninja-forms-style-admin' . $suffix . '.js?nf_ver=' . NINJA_FORMS_STYLE_VERSION,
+			array( 'jquery', 'jquery-ui-dialog', 'jquery-ui-sortable' ) );
+		wp_localize_script( 'ninja-forms-style-admin', 'nf_style', array( 'layout_error' => __( 'There is an error with your layout. Please ensure that all columns are fully spanned. See the error(s) below.', 'ninja-forms-style' ) ) );
+	}
+}
+
+add_action( 'admin_init', 'ninja_forms_style_admin_css' );
+function ninja_forms_style_admin_css(){
+
+	if( isset( $_REQUEST['page'] ) AND ( $_REQUEST['page'] == 'ninja-forms' OR $_REQUEST['page'] == 'ninja-forms-style' ) ){
+		wp_enqueue_style( 'wp-color-picker' );		
+		wp_enqueue_style( 'wp-jquery-ui-dialog' );
+		wp_enqueue_style( 'ninja-forms-style-admin',
+			NINJA_FORMS_STYLE_URL.'/css/ninja-forms-style-admin.css?nf_ver=' . NINJA_FORMS_STYLE_VERSION );
+	}
+
+}

+<?php
+
+function ninja_forms_style_ul_open( $field_id, $data ){
+	global $ninja_forms_style_row_col, $ninja_forms_loading, $ninja_forms_processing;
+
+	if ( isset ( $ninja_forms_loading ) ) {
+		$form_id = $ninja_forms_loading->get_form_ID();
+		$form_data = $ninja_forms_loading->get_all_form_settings();
+		$pages = $ninja_forms_loading->get_form_setting( 'mp_pages' );
+		$field_row = $ninja_forms_loading->get_field_settings( $field_id );
+	} else {
+		$form_id = $ninja_forms_processing->get_form_ID();
+		$form_data = $ninja_forms_processing->get_all_form_settings();
+		$pages = $ninja_forms_processing->get_form_setting( 'mp_pages' );
+		$field_row = $ninja_forms_processing->get_field_settings( $field_id );
+	}
+
+	if( isset( $form_data['ajax'] ) ){
+		$ajax = $form_data['ajax'];
+	}else{
+		$ajax = 0;
+	}
+
+	$mp_enabled = false;
+	if ( function_exists( 'nf_mp_get_page_count' ) ) {
+		if ( nf_mp_get_page_count( $form_id ) > 1 ) {
+			$mp_enabled = true;
+		}
+	} else {
+		$form_row = ninja_forms_get_form_by_id( $form_id );
+		$form_data = $form_row['data'];
+		if( isset( $form_data['multi_part'] ) AND $form_data['multi_part'] == 1 ){
+			$mp_enabled = true;
+		}
+	}
+
+	if ( $mp_enabled ) {
+
+		$current_page = $field_row['data']['page'];
+
+		if( isset( $form_data['style']['mp'][$current_page]['cols'] ) ){
+			$cols = $form_data['style']['mp'][$current_page]['cols'];
+		}else{
+			$cols = 1;
+		}
+	}else{
+		if( isset( $form_data['style']['cols'] ) ){
+			$cols = $form_data['style']['cols'];
+		}else{
+			$cols = 1;
+		}
+	}
+
+	$field_data = $field_row['data'];
+	if( isset( $field_data['style']['colspan'] ) ){
+		$colspan = $field_data['style']['colspan'];
+	}else{
+		$colspan = 1;
+	}
+
+	if( $cols > 1 ){
+   		if( !isset( $ninja_forms_style_row_col ) ){
+   			$ninja_forms_style_row_col = 0;
+   		}
+		if( $ninja_forms_style_row_col == 0 ){
+			?>
+			<div class="ninja-row">
+			<?php
+		}
+		?>
+				<div class="ninja-col-<?php echo $colspan;?>-<?php echo $cols;?>">
+
+ 		<?php
+   	}
+}
+
+add_action( 'ninja_forms_display_before_field', 'ninja_forms_style_ul_open', 11, 2);
+
+function ninja_forms_style_ul_close( $field_id, $data ){
+	global $ninja_forms_style_row_col, $ninja_forms_loading, $ninja_forms_processing;
+
+	if ( isset ( $ninja_forms_loading ) ) {
+		$form_id = $ninja_forms_loading->get_form_ID();
+		$form_data = $ninja_forms_loading->get_all_form_settings();
+		$pages = $ninja_forms_loading->get_form_setting( 'mp_pages' );
+		$field_row = $ninja_forms_loading->get_field_settings( $field_id );
+	} else {
+		$form_id = $ninja_forms_processing->get_form_ID();
+		$form_data = $ninja_forms_processing->get_all_form_settings();
+		$pages = $ninja_forms_processing->get_form_setting( 'mp_pages' );
+		$field_row = $ninja_forms_processing->get_field_settings( $field_id );
+	}
+
+	if( isset( $form_data['ajax'] ) ){
+		$ajax = $form_data['ajax'];
+	}else{
+		$ajax = 0;
+	}
+
+	$mp_enabled = false;
+	if ( function_exists( 'nf_mp_get_page_count' ) ) {
+		if ( nf_mp_get_page_count( $form_id ) > 1 ) {
+			$mp_enabled = true;
+		}
+	} else {
+		$form_row = ninja_forms_get_form_by_id( $form_id );
+		$form_data = $form_row['data'];
+		if( isset( $form_data['multi_part'] ) AND $form_data['multi_part'] == 1 ){
+			$mp_enabled = true;
+		}
+	}
+
+	if( $mp_enabled ){
+
+		$current_page = $field_row['data']['page'];
+
+		if( isset( $form_data['style']['mp'][$current_page]['cols'] ) ){
+			$cols = $form_data['style']['mp'][$current_page]['cols'];
+		}else{
+			$cols = 1;
+		}
+	}else{
+		if( isset( $form_data['style']['cols'] ) ){
+			$cols = $form_data['style']['cols'];
+		}else{
+			$cols = 1;
+		}
+	}
+
+	$field_data = $field_row['data'];
+	if( isset( $field_data['style']['colspan'] ) ){
+		$colspan = $field_data['style']['colspan'];
+	}else{
+		$colspan = 1;
+	}
+
+	if( $cols > 1 ){
+		?>
+		</div>
+		<?php
+		$ninja_forms_style_row_col = $ninja_forms_style_row_col + $colspan;
+		if( ( $ninja_forms_style_row_col ) >= $cols ){
+			?>
+			</div>
+			<?php
+			$ninja_forms_style_row_col = 0;
+		}
+	}
+}
+
+add_action( 'ninja_forms_display_after_field', 'ninja_forms_style_ul_close', 9, 2 );

+<?php
+
+add_action( 'init', 'ninja_forms_register_style_display_css' );
+function ninja_forms_register_style_display_css(){
+	add_action( 'ninja_forms_before_form_display', 'ninja_forms_style_display_css' );
+}
+
+function ninja_forms_style_display_css( $form_id ){
+	global $ninja_forms_tabs_metaboxes, $ninja_forms_tabs, $ninja_forms_css_options, $ninja_forms_style_metaboxes;
+
+	$all_fields = ninja_forms_get_fields_by_form_id( $form_id );
+
+	wp_enqueue_style( 'ninja-forms-style-display',
+		NINJA_FORMS_STYLE_URL.'/css/ninja-forms-style-display.css' );
+
+	$plugin_settings = get_option( 'ninja_forms_settings' );
+
+	if( isset( $plugin_settings['style']['field_type'] ) ){
+		$field_type_css = $plugin_settings['style']['field_type'];
+	}else{
+		$field_type_css = '';
+	}
+
+	$form_row = ninja_forms_get_form_by_id( $form_id );
+	$form_data = $form_row['data'];
+
+
+	?>
+	<style type="text/css" media="screen">
+	<?php
+
+	//Output default settings CSS
+	foreach( $ninja_forms_tabs['ninja-forms-style'] as $slug => $tab ){
+		if( $slug != 'field_type_settings' ){
+			if( isset( $ninja_forms_tabs_metaboxes['ninja-forms-style'][$slug] ) ){
+				foreach( $ninja_forms_tabs_metaboxes['ninja-forms-style'][$slug] as $metabox ){
+
+					$save_page = $metabox['save_page'];
+					$group = $metabox['slug'];
+
+					$output = false;
+					if( isset( $plugin_settings['style'][$save_page][$group] ) ){
+						foreach( $plugin_settings['style'][$save_page][$group] as $prop => $val ){
+							if( $val != '' ){
+								$output = true;
+								break;
+							}
+						}
+					}
+
+					if( $output ){
+						echo $metabox['css_selector'].'{';
+							if( isset( $plugin_settings['style'][$save_page][$group] ) ){
+								foreach( $plugin_settings['style'][$save_page][$group] as $group => $val ){
+									if( $val != '' ){
+										if( isset( $ninja_forms_css_options[$group]['css_property'] ) ){
+											$css_property = $ninja_forms_css_options[$group]['css_property'];
+
+											if( $css_property != '' ){
+												echo $css_property.': '.$val.';';
+											}else{
+												echo $val;
+											}
+										}
+									}
+								}
+							}
+						echo '}';
+					}
+
+				}
+			}
+		}
+	}
+
+	//Output field-type CSS
+	if( is_array( $field_type_css ) ){
+		foreach( $field_type_css as $field_type => $groups ){
+			$output = array();
+			//Check to make sure that all of the css values aren't empty.
+			foreach( $groups as $group => $props ){
+				$output[$group] = false;
+				if( is_array( $props ) AND !empty( $props ) ){
+					foreach( $props as $k => $val ){
+						if( $val != '' ){
+							$output[$group] = true;
+							break;
+						}
+					}
+				}
+			}
+
+			if(strpos($field_type, "_") === 0){
+				$type_slug = substr($field_type, 1);
+			}
+
+			foreach( $groups as $group => $props ){
+				if( $output[$group] ){
+					if( isset( $ninja_forms_tabs_metaboxes['ninja-forms-style']['field_type_settings'][$group] ) ){
+						$css_selector = $ninja_forms_tabs_metaboxes['ninja-forms-style']['field_type_settings'][$group]['css_selector'];
+						$css_selector = str_replace( '[type_slug]', $type_slug, $css_selector );
+						$css_selector = apply_filters( 'ninja_forms_style_field_type_css_selector', $css_selector, $type_slug );
+						if( is_array( $props ) AND !empty( $props ) ){
+							echo $css_selector.'{';
+							foreach( $props as $prop => $value ){
+								if( $value != '' ){
+									if( isset( $ninja_forms_css_options[$prop]['css_property'] ) ){
+										$css_property = $ninja_forms_css_options[$prop]['css_property'];
+										if( $css_property != '' ){
+											echo $css_property.': '.$value.';';
+										}else{
+											echo $value;
+										}
+									}
+								}
+							}
+							echo '}';
+						}
+					}
+				}
+			}
+		}
+	}
+
+	//Output form-specific CSS
+	if( isset( $form_data['style']['groups'] ) AND is_array( $form_data['style']['groups'] ) ){
+		foreach( $form_data['style']['groups'] as $group => $props ){
+			$output = false;
+			foreach( $props as $prop => $value ){
+				if( $value != '' ){
+					$output = true;
+					break;
+				}
+			}
+			if( $output ){
+				switch( $group ){
+					case 'container':
+						echo '#ninja_forms_form_'.$form_id.'_wrap {';
+						break;
+					case 'title':
+						echo '#ninja_forms_form_'.$form_id.'_wrap h2.ninja-forms-form-title {';
+						break;
+					case 'row':
+						echo '#ninja_forms_form_'.$form_id.'_wrap div.ninja-row {';
+						break;
+					case 'row-odd':
+						echo '#ninja_forms_form_'.$form_id.'_wrap div.ninja-row:nth-child(odd) {';
+						break;
+					case 'success-msg':
+						echo '#ninja_forms_form_'.$form_id.'_wrap div.ninja-forms-success-msg {';
+						break;
+					case 'error_msg':
+						echo '#ninja_forms_form_'.$form_id.'_wrap div.ninja-forms-error-msg {';
+						break;
+				}
+
+				foreach( $props as $prop => $value ){
+					if( $value != '' ){
+						if( isset( $ninja_forms_css_options[$prop]['css_property'] ) ){
+							$css_property = $ninja_forms_css_options[$prop]['css_property'];
+							if( $css_property != '' ){
+								echo $css_property.': '.$value.';';
+							}else{
+								echo $value;
+							}
+						}
+					}
+				}
+				echo '}';
+			}
+		}
+	}
+
+	//Output field-specific CSS
+	if( !empty( $all_fields ) ){
+		foreach( $all_fields as $field ){
+			$field_id = $field['id'];
+			do_action( 'ninja_forms_style_field_metaboxes', $field_id );
+
+			$field_type = $field['type'];
+			if( isset( $field['data']['style']['groups'] ) AND is_array( $field['data']['style']['groups'] ) ){
+				foreach( $field['data']['style']['groups'] as $group => $props ){
+
+					$output = false;
+					foreach( $props as $prop => $value ){
+						if( $value != '' ){
+							$output = true;
+							break;
+						}
+					}
+					if( $output ){
+						if( isset( $ninja_forms_style_metaboxes['field'][$field_type][$group] ) ){
+							$css_selector = $ninja_forms_style_metaboxes['field'][$field_type][$group]['css_selector'];
+							$css_selector = str_replace( '[field_id]', $field_id, $css_selector );
+						}else if( isset( $ninja_forms_style_metaboxes['page']['field'][$group] ) ){
+							$css_selector = $ninja_forms_style_metaboxes['page']['field'][$group]['css_selector'];
+							$css_selector = str_replace( '[field_id]', $field_id, $css_selector );
+						}
+
+						echo $css_selector."{";
+						foreach( $props as $prop => $value ){
+							if( $value != '' ){
+								if( isset( $ninja_forms_css_options[$prop]['css_property'] ) ){
+									$css_property = $ninja_forms_css_options[$prop]['css_property'];
+									if( $css_property != '' ){
+										echo $css_property.': '.$value.';';
+									}else{
+										echo $value;
+									}
+								}
+							}
+						}
+						echo '}';
+					}
+				}
+			}
+		}
+	}
+
+
+	?>
+	</style>
+	<?php
+
+}

+<?php
+if ( !function_exists( 'ninja_forms_field_type_dropdown' ) ) {
+	function ninja_forms_field_type_dropdown( $args = '' ){
+		global $ninja_forms_fields, $ninja_forms_field_type_groups;
+		if( isset( $args['echo'] ) ){
+			$echo = $args['echo'];
+		}else{
+			$echo = true;
+		}
+
+		if( isset( $args['selected'] ) ){
+			$selected = $args['selected'];
+		}else{
+			$selected = '';
+		}
+
+		$groups = $ninja_forms_field_type_groups;
+		ksort( $groups );
+
+		$output = '<select name="field_type" id="field_type">
+			<option value="">' . __( '- Field Type', 'ninja-forms-style' ) . '</option>';
+			foreach( $groups as $gslug => $group ){
+				$group_name = $group['name'];
+				$output .= '<optgroup label="'.$group_name.'">';
+					foreach( $ninja_forms_fields as $fslug => $field ){
+						if( isset( $field['group'] ) AND $field['group'] == $gslug ){
+							if( isset( $field['type_dropdown_function'] ) AND $field['type_dropdown_function'] != '' ){
+								$dropdown_function = $field['type_dropdown_function'];
+								$arguments['selected'] = $selected;
+								$output .= call_user_func_array( $dropdown_function, $arguments );
+							}else{
+								if( $fslug == $selected ){
+									$select = 'selected="selected"';
+								}else{
+									$select = '';
+								}
+								$output .= '<option value="'.$fslug.'" '.$select.'>'.$field['name'].'</option>';
+							}
+						}
+					}
+				$output .= '</optgroup>';
+			}
+
+		$output .= '</select>';
+
+		if( $echo ){
+			echo $output;
+		}else{
+			return $output;
+		}
+	}
+}
+
+
+function ninja_forms_style_filter_submit_css_selecter( $css_selector, $field_type ) {
+
+	if ( $css_selector == 'submit_hover' ) {
+		$css_selector = '.ninja-forms-form-wrap .ninja-forms-form input[type=submit]:hover';
+	} elseif ( $field_type == 'submit' ) {
+		$css_selector = '.ninja-forms-form-wrap .ninja-forms-form input[type=submit]';
+	}
+
+	return $css_selector;
+}
+add_filter( 'ninja_forms_style_field_type_css_selector', 'ninja_forms_style_filter_submit_css_selecter', 10, 2 );
\ No newline at end of file

+<?php
+
+if( ! function_exists( 'ninja_forms_style_setup_license' ) ) {
+    function ninja_forms_style_setup_license()
+    {
+        if (class_exists('NF_Extension_Updater')) {
+            $NF_Extension_Updater = new NF_Extension_Updater('Layout and Styles', NINJA_FORMS_STYLE_VERSION, 'WP Ninjas', __FILE__, 'style');
+        }
+    }
+}
+
+add_action( 'admin_init', 'ninja_forms_style_setup_license' );
+
+
+/**
+ * Load translations for add-on.
+ * First, look in WP_LANG_DIR subfolder, then fallback to add-on plugin folder.
+ */
+if( ! function_exists( 'ninja_forms_style_load_translations' ) ) {
+    function ninja_forms_style_load_translations()
+    {
+
+        /** Set our unique textdomain string */
+        $textdomain = 'ninja-forms-style';
+
+        /** The 'plugin_locale' filter is also used by default in load_plugin_textdomain() */
+        $locale = apply_filters('plugin_locale', get_locale(), $textdomain);
+
+        /** Set filter for WordPress languages directory */
+        $wp_lang_dir = apply_filters(
+            'ninja_forms_style_wp_lang_dir',
+            trailingslashit(WP_LANG_DIR) . 'ninja-forms-style/' . $textdomain . '-' . $locale . '.mo'
+        );
+
+        /** Translations: First, look in WordPress' "languages" folder = custom & update-secure! */
+        load_textdomain($textdomain, $wp_lang_dir);
+
+        /** Translations: Secondly, look in plugin's "lang" folder = default */
+        $plugin_dir = trailingslashit(basename(dirname(__FILE__)));
+        $lang_dir = apply_filters('ninja_forms_style_lang_dir', $plugin_dir . 'lang/');
+        load_plugin_textdomain($textdomain, FALSE, $lang_dir);
+
+    }
+}
+add_action( 'plugins_loaded', 'ninja_forms_style_load_translations' );
+
+
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/admin.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/functions.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms-style/tabs/form-settings/form-settings.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms-style/tabs/field-settings/field-settings.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms-style/tabs/field-type-settings/field-type-settings.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms-style/tabs/field-type-settings/sidebars/select-field.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms-style/tabs/error-settings/error-settings.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms-style/tabs/datepicker-settings/datepicker-settings.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms-style/tabs/multipart-settings/multipart-settings.php");
+
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms/tabs/form-layout/form-layout.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms/tabs/form-layout/form-layout-div.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms/tabs/form-layout/form-layout-mp-div.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms/tabs/form-layout/form-layout-output-ul.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms/tabs/form-layout/default-field-metaboxes.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms/tabs/form-layout/list-field-metaboxes.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms/tabs/form-layout/rating-field-metaboxes.php");
+
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/pages/ninja-forms-impexp/tabs/style/impexp-style.php");
+
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/ajax.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/register.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/scripts.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/admin/style-metabox-output.php");
+
+require_once(NINJA_FORMS_STYLE_DIR."/includes/display/div-output.php");
+require_once(NINJA_FORMS_STYLE_DIR."/includes/display/scripts.php");
\ No newline at end of file

+.layouts #nf-main-content {
+  /*max-width: 100%;*/ }
+
+.layouts.few #nf-main-content {
+  max-width: 900px; }
+
+.layouts.several #nf-main-content {
+  max-width: 1200px; }
+
+.layouts.many #nf-main-content {
+  max-width: 100%; }
+
+.layouts-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-line-pack: stretch;
+      align-content: stretch;
+  /*border: 2px dashed darkblue;*/ }
+
+.layouts-row .gutter {
+  border: 0;
+  cursor: ew-resize; }
+
+.layouts-row:hover .gutter.nf-fields-sortable-placeholder, .layouts-row.dragging .gutter.nf-fields-sortable-placeholder {
+  margin: 0;
+  background: #84CC1E !important; }
+
+.layouts-row:hover .gutter, .layouts-row.hovered .gutter {
+  background: #ccc; }
+
+.layouts-row:hover .gutter:first-child, .layouts-row:hover .gutter:last-child {
+  background: #fff; }
+
+.layouts-row:hover .gutter:first-child {
+  border: 1px solid #ccc;
+  background: #fff;
+  cursor: ns-resize !important;
+  position: relative; }
+
+.layouts-row:hover .gutter:first-child::after {
+  content: "";
+  border: 1px solid #ddd;
+  position: absolute;
+  right: 3px;
+  top: 5px;
+  bottom: 5px; }
+
+.layouts-row.dragging .gutter {
+  background: #1EA9EA !important; }
+
+.layouts-row::after {
+  clear: both;
+  content: "";
+  display: block; }
+
+.layouts-cell {
+  float: left;
+  overflow: hidden;
+  padding-left: 4px;
+  padding-right: 4px;
+  /*border: 1px solid orange;*/
+  margin: 10px 0; }
+
+.layouts-cell .nf-fields-sortable-placeholder {
+  margin: 0; }
+
+.layouts-cell .nf-fields-sortable-placeholder + .nf-field-wrap {
+  margin-top: 12px; }
+
+.layouts-cell .nf-field-wrap + .nf-fields-sortable-placeholder {
+  margin-top: -6px; }
+
+.layouts-cell .nf-field-wrap + .nf-fields-sortable-placeholder + .nf-field-wrap {
+  margin-top: 12px; }
+
+/*.layouts-cell .nf-field-wrap {
+    margin: 12px 0;
+}*/
+.nf-field-wrap:last-child {
+  margin-bottom: 0; }
+
+.layouts-cell .nf-field-wrap:last-child {
+  margin-bottom: 0; }
+
+.layouts-dragging .layouts-cell {
+  margin: 0; }
+
+.layouts-handle {
+  background: green;
+  -ms-flex-item-align: stretch;
+      -ms-grid-row-align: stretch;
+      align-self: stretch;
+  float: left;
+  width: 10px; }
+
+.no-fields {
+  color: #888;
+  margin: 10px 0;
+  padding: 15px 10px;
+  text-align: center; }
+
+.no-fields .nf-button {
+  padding: 4px 6px;
+  text-align: center; }
+
+.layouts-row-collection > .nf-fields-sortable-placeholder {
+  margin-bottom: -8px;
+  margin-top: 0; }
+
+.layouts-row-collection > .nf-fields-sortable-placeholder + .layout-row {
+  margin: 6px; }
+
+.layouts-row-collection .layouts-row + .nf-fields-sortable-placeholder {
+  margin-top: -8px; }
+
+.layouts-dragging .layouts-row {
+  padding: 6px;
+  margin: 8px 0; }
+
+.layouts-dragging .layouts-cell .nf-field-wrap {
+  /*margin: 30px 0;*/ }
+
+.layouts-dragging .gutter {
+  width: 20px !important;
+  -webkit-transition: width 0.5s ease;
+  transition: width 0.5s ease; }
+
+.layouts-row.multi-cell .nf-field-wrap {
+  margin: 20px 0; }
+
+.layouts-row.multi-cell .nf-fields-sortable-placeholder {
+  margin: 6px 0; }
+
+.layouts-row.multi-cell .gutter.nf-fields-sortable-placeholder {
+  margin: 0; }
+
+.layouts-row.multi-cell .nf-fields-sortable-placeholder + .nf-field-wrap {
+  margin-top: 0; }
+
+.layouts-row.multi-cell .nf-field-wrap + .nf-fields-sortable-placeholder {
+  margin-top: -14px; }
+
+.layouts-row.multi-cell .nf-field-wrap + .nf-fields-sortable-placeholder + .nf-field-wrap {
+  margin-top: 6px; }
+
+.gutter {
+  position: relative; }
+  .gutter span {
+    color: #aaa;
+    font-size: 12px;
+    position: absolute;
+    top: -5px; }
+  .gutter .percent-left {
+    right: 20px; }
+  .gutter .percent-right {
+    left: 20px; }
+
+@media only screen and (max-width: 1285px) {
+  .layouts.many.nf-drawer-opened .layouts-row,
+  .layouts.several.nf-drawer-opened .layouts-row {
+    /*border-bottom: 2px solid #424242;*/
+    display: block !important; }
+  .layouts.many.nf-drawer-opened .layouts-cell,
+  .layouts.several.nf-drawer-opened .layouts-cell {
+    width: 100% !important; }
+  .layouts.many.nf-drawer-opened .multi-cell .layouts-cell,
+  .layouts.several.nf-drawer-opened .multi-cell .layouts-cell {
+    border-bottom: 1px solid red;
+    padding-bottom: 20px; }
+  .layouts.many.nf-drawer-opened.layouts-dragging .multi-cell .layouts-cell,
+  .layouts.several.nf-drawer-opened.layouts-dragging .multi-cell .layouts-cell {
+    padding-bottom: 0; }
+  .layouts.many.nf-drawer-opened .gutter,
+  .layouts.several.nf-drawer-opened .gutter {
+    display: none; } }
+
+/*# sourceMappingURL=builder.css.map */

+{"version":3,"sources":["builder.scss"],"names":[],"mappings":"AAAA;EACI,oBAAoB,EAEvB;;AAED;EACI,iBAAiB,EACpB;;AACD;EACI,kBAAkB,EACrB;;AACD;EACI,gBAAgB,EACnB;;AAED;EACI,qBAAc;EAAd,qBAAc;EAAd,cAAc;EACd,4BAAuB;MAAvB,uBAAuB;EACvB,gCAAgC,EAEnC;;AACD;EACI,UAAU;EACV,kBAAkB,EACrB;;AACD;EACI,UAAU;EACV,+BAA+B,EAClC;;AACD;EACI,iBAAiB,EACpB;;AACD;EACI,iBAAiB,EACpB;;AACD;EACI,uBAAuB;EACvB,iBAAiB;EACjB,6BAA6B;EAC7B,mBAAmB,EACtB;;AACD;EACI,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;EACnB,WAAW;EACX,SAAS;EACT,YAAY,EACf;;AACD;EACI,+BAA+B,EAClC;;AACD;EACI,YAAY;EACZ,YAAY;EACZ,eAAe,EAClB;;AACD;EACI,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,mBAAmB;EACnB,6BAA6B;EAC7B,eAAe,EAClB;;AAED;EACI,UAAU,EACb;;AACD;EACI,iBAAiB,EACpB;;AACD;EACI,iBAAiB,EACpB;;AACD;EACI,iBAAiB,EACpB;;AACD;;GAEG;AACH;EACI,iBAAiB,EACpB;;AACD;EACI,iBAAiB,EACpB;;AAED;EACI,UAAU,EACb;;AAED;EACI,kBAAkB;EAClB,6BAAoB;MAApB,4BAAoB;MAApB,oBAAoB;EACpB,YAAY;EACZ,YAAY,EACf;;AACD;EACI,YAAY;EACZ,eAAe;EACf,mBAAmB;EACnB,mBAAmB,EACtB;;AACD;EACI,iBAAiB;EACjB,mBAAmB,EACtB;;AAKD;EACI,oBAAoB;EACpB,cAAc,EACjB;;AAED;EACI,YAAY,EACf;;AAED;EACI,iBAAiB,EACpB;;AAKD;EACI,aAAa;EACb,cAAc,EAEjB;;AAED;EACI,mBAAmB,EACtB;;AACD;EACI,uBAAuB;EACvB,oCAA4B;EAA5B,4BAA4B,EAC/B;;AAED;EACI,eAAe,EAClB;;AACD;EACI,cAAc,EACjB;;AACD;EACI,UACH,EAAC;;AACF;EACI,cAAc,EACjB;;AACD;EACI,kBAAkB,EACrB;;AACD;EACI,gBAAgB,EACnB;;AAED;EACI,mBAAmB,EAatB;EAdD;IAGQ,YAAY;IACZ,gBAAgB;IAChB,mBAAmB;IACnB,UAAU,EACb;EAPL;IASQ,YAAY,EACf;EAVL;IAYQ,WAAW,EACd;;AAIL;EACI;;IAEI,qCAAqC;IACrC,0BAA0B,EAC7B;EACD;;IAEI,uBAAuB,EAC1B;EACD;;IAEI,6BAA6B;IAC7B,qBAAqB,EACxB;EACD;;IAEI,kBAAkB,EACrB;EACD;;IAEI,cAAc,EACjB,EAAA","file":"builder.css","sourcesContent":[".layouts #nf-main-content {\n    /*max-width: 100%;*/\n    //margin-top: 30px;\n}\n\n.layouts.few #nf-main-content {\n    max-width: 900px;\n}\n.layouts.several #nf-main-content {\n    max-width: 1200px;\n}\n.layouts.many #nf-main-content {\n    max-width: 100%;\n}\n\n.layouts-row {\n    display: flex;\n    align-content: stretch;\n    /*border: 2px dashed darkblue;*/\n\n}\n.layouts-row .gutter {\n    border: 0;\n    cursor: ew-resize;\n}\n.layouts-row:hover .gutter.nf-fields-sortable-placeholder, .layouts-row.dragging .gutter.nf-fields-sortable-placeholder {\n    margin: 0;\n    background: #84CC1E !important;\n}\n.layouts-row:hover .gutter, .layouts-row.hovered .gutter {\n    background: #ccc;\n}\n.layouts-row:hover .gutter:first-child, .layouts-row:hover .gutter:last-child {\n    background: #fff;\n}\n.layouts-row:hover .gutter:first-child {\n    border: 1px solid #ccc;\n    background: #fff;\n    cursor: ns-resize !important;\n    position: relative;\n}\n.layouts-row:hover .gutter:first-child::after {\n    content: \"\";\n    border: 1px solid #ddd;\n    position: absolute;\n    right: 3px;\n    top: 5px;\n    bottom: 5px;\n}\n.layouts-row.dragging .gutter {\n    background: #1EA9EA !important;\n}\n.layouts-row::after {\n    clear: both;\n    content: \"\";\n    display: block;\n}\n.layouts-cell {\n    float: left;\n    overflow: hidden;\n    padding-left: 4px;\n    padding-right: 4px;\n    /*border: 1px solid orange;*/\n    margin: 10px 0;\n}\n\n.layouts-cell .nf-fields-sortable-placeholder {\n    margin: 0;\n}\n.layouts-cell .nf-fields-sortable-placeholder + .nf-field-wrap {\n    margin-top: 12px;\n}\n.layouts-cell .nf-field-wrap + .nf-fields-sortable-placeholder {\n    margin-top: -6px;\n}\n.layouts-cell .nf-field-wrap + .nf-fields-sortable-placeholder + .nf-field-wrap {\n    margin-top: 12px;\n}\n/*.layouts-cell .nf-field-wrap {\n    margin: 12px 0;\n}*/\n.nf-field-wrap:last-child {\n    margin-bottom: 0;\n}\n.layouts-cell .nf-field-wrap:last-child {\n    margin-bottom: 0;\n}\n\n.layouts-dragging .layouts-cell {\n    margin: 0;\n}\n\n.layouts-handle {\n    background: green;\n    align-self: stretch;\n    float: left;\n    width: 10px;\n}\n.no-fields {\n    color: #888;\n    margin: 10px 0;\n    padding: 15px 10px;\n    text-align: center;\n}\n.no-fields .nf-button {\n    padding: 4px 6px;\n    text-align: center;\n}\n// .layouts-row-collection + .nf-fields-sortable-placeholder {\n//     margin-top: 50px !important;\n// }\n\n.layouts-row-collection > .nf-fields-sortable-placeholder {\n    margin-bottom: -8px;\n    margin-top: 0;\n}\n\n.layouts-row-collection > .nf-fields-sortable-placeholder + .layout-row {\n    margin: 6px;\n}\n\n.layouts-row-collection .layouts-row + .nf-fields-sortable-placeholder {\n    margin-top: -8px;\n}\n// .layouts-row-collection .nf-fields-sortable-placeholder + .layouts-row {\n//     margin-top: -8px;\n// }\n\n.layouts-dragging .layouts-row {\n    padding: 6px;\n    margin: 8px 0;\n    //transition: all 0.5s ease;\n}\n\n.layouts-dragging .layouts-cell .nf-field-wrap {\n    /*margin: 30px 0;*/\n}\n.layouts-dragging .gutter {\n    width: 20px !important;\n    transition: width 0.5s ease;\n}\n\n.layouts-row.multi-cell .nf-field-wrap {\n    margin: 20px 0;\n}\n.layouts-row.multi-cell .nf-fields-sortable-placeholder {\n    margin: 6px 0;\n}\n.layouts-row.multi-cell .gutter.nf-fields-sortable-placeholder {\n    margin: 0\n}\n.layouts-row.multi-cell .nf-fields-sortable-placeholder + .nf-field-wrap {\n    margin-top: 0;\n}\n.layouts-row.multi-cell .nf-field-wrap + .nf-fields-sortable-placeholder {\n    margin-top: -14px;\n}\n.layouts-row.multi-cell .nf-field-wrap + .nf-fields-sortable-placeholder + .nf-field-wrap {\n    margin-top: 6px;\n}\n\n.gutter {\n    position: relative;\n    span {\n        color: #aaa;\n        font-size: 12px;\n        position: absolute;\n        top: -5px;\n    }\n    .percent-left {\n        right: 20px;\n    }\n    .percent-right {\n        left: 20px;\n    }\n}\n\n\n@media only screen and (max-width: 1285px) {\n    .layouts.many.nf-drawer-opened .layouts-row,\n    .layouts.several.nf-drawer-opened .layouts-row {\n        /*border-bottom: 2px solid #424242;*/\n        display: block !important;\n    }\n    .layouts.many.nf-drawer-opened .layouts-cell,\n    .layouts.several.nf-drawer-opened .layouts-cell {\n        width: 100% !important;\n    }\n    .layouts.many.nf-drawer-opened .multi-cell .layouts-cell,\n    .layouts.several.nf-drawer-opened .multi-cell .layouts-cell {\n        border-bottom: 1px solid red;\n        padding-bottom: 20px;\n    }\n    .layouts.many.nf-drawer-opened.layouts-dragging .multi-cell .layouts-cell,\n    .layouts.several.nf-drawer-opened.layouts-dragging .multi-cell .layouts-cell {\n        padding-bottom: 0;\n    }\n    .layouts.many.nf-drawer-opened .gutter,\n    .layouts.several.nf-drawer-opened .gutter {\n        display: none;\n    }\n}\n"]}
\ No newline at end of file

+.nf-multi-cell .nf-row::after {
+  clear: both;
+  content: "";
+  display: block; }
+
+.nf-multi-cell .nf-cell {
+  float: left;
+  padding: 0 5px; }
+
+.nf-multi-cell .five-sixths,
+.nf-multi-cell .four-sixths,
+.nf-multi-cell .one-fourth,
+.nf-multi-cell .one-half,
+.nf-multi-cell .one-sixth,
+.nf-multi-cell .one-third,
+.nf-multi-cell .three-fourths,
+.nf-multi-cell .three-sixths,
+.nf-multi-cell .two-fourths,
+.nf-multi-cell .two-sixths,
+.nf-multi-cell .two-thirds {
+  float: none;
+  margin-left: 0;
+  width: 100%; }
+  .nf-multi-cell .five-sixths .inside,
+  .nf-multi-cell .four-sixths .inside,
+  .nf-multi-cell .one-fourth .inside,
+  .nf-multi-cell .one-half .inside,
+  .nf-multi-cell .one-sixth .inside,
+  .nf-multi-cell .one-third .inside,
+  .nf-multi-cell .three-fourths .inside,
+  .nf-multi-cell .three-sixths .inside,
+  .nf-multi-cell .two-fourths .inside,
+  .nf-multi-cell .two-sixths .inside,
+  .nf-multi-cell .two-thirds .inside {
+    padding: 20px; }
+  .nf-multi-cell .five-sixths::after,
+  .nf-multi-cell .four-sixths::after,
+  .nf-multi-cell .one-fourth::after,
+  .nf-multi-cell .one-half::after,
+  .nf-multi-cell .one-sixth::after,
+  .nf-multi-cell .one-third::after,
+  .nf-multi-cell .three-fourths::after,
+  .nf-multi-cell .three-sixths::after,
+  .nf-multi-cell .two-fourths::after,
+  .nf-multi-cell .two-sixths::after,
+  .nf-multi-cell .two-thirds::after {
+    clear: both;
+    content: "";
+    display: block; }
+
+@media only screen and (max-width: 600px) {
+  .nf-cell {
+    width: 100% !important; } }
+
+/*# sourceMappingURL=display-structure.css.map */

+{"version":3,"sources":["display-structure.scss"],"names":[],"mappings":"AAYA;EAGY,YAAY;EACZ,YAAY;EACZ,eAAe,EAClB;;AANT;EASQ,YAAY;EACZ,eAAe,EAClB;;AAXL;;;;;;;;;;;EAuBQ,YAAY;EACZ,eAAe;EACf,YAAY,EASf;EAlCL;;;;;;;;;;;IA2BY,cAAc,EACjB;EA5BT;;;;;;;;;;;IA8BY,YAAY;IACZ,YAAY;IACZ,eAAe,EAClB;;AAIT;EACI;IACI,uBAAuB,EAC1B,EAAA","file":"display-structure.css","sourcesContent":["\n// .nf-row {\n//     &::after {\n//         clear: both;\n//         content: \"\";\n//         display: block;\n//     }\n// }\n// .nf-cell {\n//     float: left;\n//     padding: 0 5px;\n// }\n.nf-multi-cell {\n    .nf-row {\n        &::after {\n            clear: both;\n            content: \"\";\n            display: block;\n        }\n    }\n    .nf-cell {\n        float: left;\n        padding: 0 5px;\n    }\n    .five-sixths,\n    .four-sixths,\n    .one-fourth,\n    .one-half,\n    .one-sixth,\n    .one-third,\n    .three-fourths,\n    .three-sixths,\n    .two-fourths,\n    .two-sixths,\n    .two-thirds {\n        float: none;\n        margin-left: 0;\n        width: 100%;\n        .inside {\n            padding: 20px;\n        }\n        &::after {\n            clear: both;\n            content: \"\";\n            display: block;\n        }\n    }\n}\n\n@media  only screen and (max-width: 600px) {\n    .nf-cell {\n        width: 100% !important;\n    }\n}\n"]}
\ No newline at end of file

+.nf-cell {
+	float: left;
+	padding: 5px;
+}
\ No newline at end of file

+define( [], function() {
+	var controller = Marionette.Object.extend( {
+		initialize: function() {
+			var fieldCollection = nfRadio.channel( 'fields' ).request( 'get:collection' );
+			fieldCollection.on( 'add', this.maybeAddRow, this );
+
+			this.listenTo( nfRadio.channel( 'drawer-addField' ), 'startDrag:type', this.startDragging );
+			this.listenTo( nfRadio.channel( 'drawer-addField' ), 'stopDrag:type', this.stopDragging );
+
+			this.listenTo( nfRadio.channel( 'drawer-addField' ), 'startDrag:fieldStaging', this.startDragging );
+			this.listenTo( nfRadio.channel( 'drawer-addField' ), 'stopDrag:fieldStaging', this.stopDragging );
+		},
+
+		maybeAddRow: function( model ) {
+            if ( ! model.get( 'cellcid' ) ) {
+				var order = ( ! model.get( 'order' ) || 999 == model.get( 'order' ) ) ? null : model.get( 'order' );
+				nfRadio.channel( 'layouts' ).request( 'add:row', null, { order: order, field: model } );
+			}
+		},
+
+		startDragging: function( ui ) {
+			jQuery( '.layouts-row' ).addClass( 'dragging' );
+			jQuery( '#nf-builder' ).addClass( 'layouts-dragging' );
+		},
+
+		stopDragging: function( ui ) {
+			jQuery( '.layouts-row' ).removeClass( 'dragging' );
+			jQuery( '#nf-builder' ).removeClass( 'layouts-dragging' );
+		}
+
+	});
+
+	return controller;
+} );

+define( [ 'models/rowCollection' ], function( RowCollection ) {
+	var controller = Marionette.Object.extend( {
+		overSortable: false,
+		outFired: false,
+		overCell: false,
+		overRows: false,
+
+		initialize: function() {
+			// Respond to requests to add a row to our collection.
+			nfRadio.channel( 'layouts' ).reply( 'add:row', this.addRow, this );
+		},
+
+		addRow: function( rowCollection, data ) {
+
+			if ( ! rowCollection ) {
+				/*
+				 * In the RC for Ninja Forms, 'formContentData' was 'fieldContentsData'.
+				 * In 3.0, we changed it to 'formContentData', so this line checks for that old setting name if the new one doesn't exist.
+				 * This is for backwards compatibility and can be removed in the future.
+				 *
+				 * TODO: Remove the || portion of this ternary.
+				 */
+				rowCollection = nfRadio.channel( 'settings' ).request( 'get:setting', 'formContentData' ) || nfRadio.channel( 'settings' ).request( 'get:setting', 'fieldContentsData' );
+				if ( false === rowCollection instanceof RowCollection ) return false;
+			}
+
+			if ( 'undefined' == typeof data.order || null == data.order ) {
+				/*
+				 * Get the order of the last item in our row collection.
+				 */
+				rowOrder = rowCollection.pluck( 'order' );
+				data.order = ( 0 < rowOrder.length ) ? _.max( rowOrder ) + 1 : 1;
+			}
+
+			var rowModel = rowCollection.add( {
+				order: data.order,
+				cells: [
+					{
+						order: 0,
+						fields: [ data.field ],
+						width: '100'
+					}
+				]
+			} );
+
+			return rowModel;
+		},
+
+		updateOverSortable: function( val ) {
+			this.overSortable = val;
+		},
+
+		getOverSortable: function() {
+			return this.overSortable;
+		},
+
+		updateOutFired: function( val ) {
+			this.outFired = val;
+		},
+
+		getOutFired: function() {
+			return this.outFired;
+		},
+
+		updateOverCell: function( val ) {
+			this.overCell = val;
+		},
+
+		getOverCell: function() {
+			return this.overCell;
+		}
+	});
+
+	return controller;
+} );
\ No newline at end of file

+define( ['views/rowCollection', 'controllers/loadControllers', 'models/rowCollection'], function( RowCollectionView, LoadControllers, RowCollection ) {
+	var controller = Marionette.Object.extend( {
+		initialize: function() {
+			this.listenTo( nfRadio.channel( 'app' ), 'after:loadControllers', this.loadControllers );
+		},
+
+		loadControllers: function() {
+			new LoadControllers();
+
+			nfRadio.channel( 'formContent' ).request( 'add:viewFilter', this.getFormContentView, 4, this );
+			nfRadio.channel( 'formContent' ).request( 'add:saveFilter', this.formContentSave, 4, this );
+			nfRadio.channel( 'formContent' ).request( 'add:loadFilter', this.formContentLoad, 4, this );
+		
+			/*
+			 * In the RC for Ninja Forms, the 'formContent' channel was called 'fieldContents'.
+			 * This was changed in version 3.0. These radio messages are here to make sure nothing breaks.
+			 *
+			 * TODO: Remove this backwards compatibility radio calls.
+			 */
+			nfRadio.channel( 'fieldContents' ).request( 'add:viewFilter', this.getFormContentView, 4, this );
+			nfRadio.channel( 'fieldContents' ).request( 'add:saveFilter', this.formContentSave, 4, this );
+			nfRadio.channel( 'fieldContents' ).request( 'add:loadFilter', this.formContentLoad, 4, this );
+		},
+
+		getFormContentView: function( collection ) {
+			return RowCollectionView;
+		},
+
+		/**
+		 * When we update our database, set the form setting value of 'formContentData' to our row collection.
+		 * To do this, we have to break our row collection down into an object, then remove all the extra field settings
+		 * so that we're left with just the field IDs.
+		 * 
+		 * @since  3.0
+		 * @return array 
+		 */
+		formContentSave: function( rowCollection ) {
+			var rows = JSON.parse( JSON.stringify( rowCollection ) );	
+			_.each( rows, function( row, rowIndex ) {
+				_.each( row.cells, function( cell, cellIndex ) {
+					_.each( cell.fields, function( field, fieldIndex ) {
+						if ( field.key ) {
+							rows[ rowIndex ].cells[ cellIndex].fields[ fieldIndex ] = field.key;
+						}
+					} );
+				} );
+			} );
+
+			return rows;
+		},
+
+		/**
+		 * When we load our builder view, we filter the formContentData.
+		 * This turns the saved object into a Backbone Collection.
+		 *
+		 * If we aren't passed any data, then this form hasn't been modified with layouts yet,
+		 * so we default to the nfLayouts.rows global variable that is localised for us.
+		 * 
+		 * @since  3.0
+		 * @param  array 		formContentData 	current value of our formContentData.
+		 * @param  bool  		empty				is this a purposefully empty collection?
+		 * @param  array		fields				fields array to be turned into rows. This is only passed if MP is also active.
+		 * @return Backbone.Collection
+		 */
+		formContentLoad: function( formContentData, empty, fields ) {
+			if ( true === formContentData instanceof RowCollection ) return formContentData;
+			
+			empty = empty || false;
+			fields = fields || false;
+			var rowArray = [];
+
+			var formContentLoadFilters = nfRadio.channel( 'formContent' ).request( 'get:loadFilters' );
+
+			/*
+			 * TODO: Bandaid fix for making sure that we interpret fields correclty when Multi-Part is active.
+			 * Basically, if MP is active, we don't want to ever use the nfLayouts.rows.
+			 */
+			var mpEnabled = ( 'undefined' != typeof formContentLoadFilters[1] ) ? true : false;
+
+			/*
+			 * TODO: Bandaid fix for making sure that Layouts can interpret Multi-Part data if Multi-Part is disabled.
+			 */
+			if ( ! mpEnabled && _.isArray( formContentData ) && 0 != _.isArray( formContentData ).length  && 'undefined' != typeof _.first( formContentData ) && 'part' == _.first( formContentData ).type ) {
+				/* 
+				 * Get our layout data from inside MP
+				 */
+				
+				formContentData = _.flatten( _.pluck( formContentData, 'formContentData' ) );
+				_.each( formContentData, function( row, index ) {
+					row.order = index + 1;
+				}, this );
+			}
+
+			if ( _.isArray( formContentData ) && 0 != formContentData.length && 'undefined' == typeof formContentData[0].cells ) {
+				_.each( formContentData, function( key, index ) {
+					rowArray.push( {
+						order: index,
+						cells: [ {
+							order: 0,
+							fields: [ key ],
+							width: '100'
+						} ]
+					} );
+
+				} );
+			} else if ( _.isEmpty( formContentData ) && 'undefined' != typeof nfLayouts && ! mpEnabled ) {
+				rowArray = nfLayouts.rows;
+			} else {
+				rowArray = formContentData;
+			}
+
+			/*
+			 * Ensure that our rows don't have any empty fields
+			 */
+			rowArray = _.filter( rowArray, function( row ) {
+				/*
+				 * Check to see if any of our row's cells have a field.
+				 * If it does, return true and move on.
+				 */
+				return _.some( row.cells, function( cell ) { 
+					return 1 <= cell.fields.length;
+				} );
+			} );
+
+			return new RowCollection( rowArray );
+		}
+	});
+
+	return controller;
+} );
\ No newline at end of file

+define( 
+	[
+		'controllers/data',
+		'controllers/maxCols',
+		'controllers/addField',
+		'controllers/cellSortable',
+		'controllers/gutterDroppable',
+		'controllers/rowsSortable',
+		'controllers/undo',
+		'controllers/updateFieldOrder'
+	], 
+	function
+	(
+		Data,
+		MaxCols,
+		AddField,
+		CellSortable,
+		GutterDroppable,
+		RowsSortable,
+		Undo,
+		UpdateFieldOrder
+	)
+	{
+	var controller = Marionette.Object.extend( {
+		initialize: function() {
+			new MaxCols();
+			new Data();
+			new AddField();
+			new CellSortable();
+			new GutterDroppable();
+			new RowsSortable();
+			new Undo();
+			new UpdateFieldOrder();
+		}
+
+	});
+
+	return controller;
+} );
\ No newline at end of file

+define( [], function() {
+	var controller = Marionette.Object.extend( {
+		initialize: function() {
+			nfRadio.channel( 'layouts' ).reply( 'update:colClass', this.updateColClass );
+		},
+
+		updateColClass: function( num ) {
+			var builderEl = nfRadio.channel( 'app' ).request( 'get:builderEl' );
+			jQuery( builderEl ).removeClass( 'few several many' );
+
+			if ( num == 3 ) {
+				var builderClass = 'few';
+			} else if ( num >= 4 && num <= 5 ) {
+				var builderClass = 'several';
+			} else if ( num >= 6 ) {
+				var builderClass = 'many';
+			} else {
+				var builderClass = '';
+			}
+
+			jQuery( builderEl ).addClass( builderClass );
+
+		}
+
+	});
+
+	return controller;
+} );

+/**
+ * Recalculates our field order attribute.
+ * This isn't the attribute used by Layouts but the one used by core.
+ *
+ * @since  3.0
+ */ 
+define( [], function() {
+	var controller = Marionette.Object.extend( {
+		initialize: function() {
+			nfRadio.channel( 'layouts' ).reply( 'update:fieldOrder', this.updateFieldOrder );
+		},
+
+		updateFieldOrder: function( rowCollection ) {
+			var order = 1;
+			/*
+			 * Loop over our row collection and set the order attribute for any fields we find inside the cells.
+			 */
+			_.each( rowCollection.models, function( rowModel, rowIndex ) {
+				/*
+				 * Loop over our cells and update our field models 'order' attribute.
+				 */
+				_.each( rowModel.get( 'cells' ).models, function( cellModel, cellIndex ) {
+					/*
+					 * Loop over every field in our cell model and update its 'order' attribute.
+					 */
+					_.each( cellModel.get( 'fields' ).models, function( fieldModel, fieldIndex ) {
+						fieldModel.set( 'order', order, { silent: true } );
+						order++;
+					} );
+				} );
+			} );
+		}
+
+	});
+
+	return controller;
+} );

+var nfRadio = Backbone.Radio;
+require( ['controllers/loadContent'], function( LoadContent ) {
+
+	var NFLayouts = Marionette.Application.extend( {
+
+		initialize: function( options ) {
+			this.listenTo( nfRadio.channel( 'app' ), 'after:appStart', this.afterNFLoad );
+		},
+
+		onStart: function() {
+			new LoadContent();
+		},
+
+		afterNFLoad: function( app ) {
+			var builderEl = nfRadio.channel( 'app' ).request( 'get:builderEl' );
+			jQuery( builderEl ).addClass( 'layouts' );
+		}
+	} );
+
+	var nfLayouts = new NFLayouts();
+	nfLayouts.start();
+} );
\ No newline at end of file

+/**
+ * Holds all of our cell models.
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Fields
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( ['models/cellModel'], function( cellModel ) {
+	var collection = Backbone.Collection.extend( {
+		model: cellModel,
+		comparator: 'order',
+
+		initialize: function( models, options ) {
+			this.options = options;
+			this.on( 'change:fields', this.updateRowModel, this );
+			this.on( 'add', this.addCell, this );
+			this.on( 'remove', this.updateCellWidths, this );
+		},
+
+		addCell: function() {
+			this.updateCellWidths();
+			this.updateRowModel();
+			this.options.rowModel.trigger( 'add:cell', this.options.rowModel );
+		},
+
+		updateRowModel: function() {
+			this.options.rowModel.set( 'cells', this );
+			this.options.rowModel.trigger( 'change:cells', this.options.rowModel );
+		},
+
+		/**
+		 * Update our cell widths.
+		 * This is called whenever we add or remove a cell from our cell collection.
+		 * 
+		 * @since  3.0
+		 * @param  Backbone.Model 	cellModel
+		 * @return void
+		 */
+		updateCellWidths: function( cellModel ) {
+			// Calculate a new width for our cells.
+			var width = Math.round( 100 / this.models.length );
+
+			if ( 100 < width * this.models.length ) {
+				width = Math.floor( 100 / this.models.length );
+			}
+
+			// Set our width for each cell.
+			_.each( this.models, function( cell ) {
+				cell.set( 'width', width );
+			} );
+
+			this.sort();
+		}
+	} );
+	return collection;
+} );
\ No newline at end of file

+/**
+ * Holds all of our cell field models.
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Fields
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( [], function( ) {
+	var collection = Backbone.Collection.extend( {
+		comparator: 'cellOrder',
+
+		initialize: function( models, options ) {
+			this.options = options;
+			
+			// Listen to requests to remove a field from a collection.
+			this.listenTo( nfRadio.channel( 'layouts-cell' ), 'remove:field', this.removeField );
+			// We've been passed the cellModel to which this collection belongs.
+			// this.options.cellModel = options.cellModel;
+			_.each( models, function( model ) {
+				if ( 'undefined' == typeof model ) return;
+				model.set( 'cellcid', this.options.cellModel.cid, { silent: true } );
+			}, this );
+
+			// When we add or remove a field from this collection, update our cellModel.
+			this.on( 'add', this.addField, this );
+			this.on( 'remove', this.updateCellModel, this );
+			var fieldCollection = nfRadio.channel( 'fields' ).request( 'get:collection' );
+
+			// When we remove a model from our main field collection, make sure it's removed from this collection as well.
+			fieldCollection.on( 'remove', this.removeModel, this );
+
+			// When we add a model to our main field collection, add it to this collection if its cid matches
+			fieldCollection.on( 'add', this.addModel, this );
+
+		},
+
+		/**
+		 * Add a field to our cell collection
+		 * @since 3.0
+		 */
+		 addField: function( model ) {
+		 	model.set( 'cellcid', this.options.cellModel.cid, { silent: true } );
+		 	if ( 1 == this.options.cellModel.collection.length ) {
+		 		var order = this.options.cellModel.collection.options.rowModel.get( 'order' );
+		 		this.remove( model );
+		 		nfRadio.channel( 'layouts' ).request( 'add:row', this.options.cellModel.collection.options.rowModel.collection, { order: order, field: model } );
+		 	}
+		 	this.updateCellModel();
+		 },
+
+
+		/**
+		 * Update our cellModel.
+		 * @since 3.0
+		 */
+		updateCellModel: function() {
+			this.options.cellModel.set( 'fields', this );
+			this.options.cellModel.trigger( 'change:fields', this.options.cellModel );
+		},
+
+		/**
+		 * Respond to requests to remove a field from a collection.
+		 * @since  3.0
+		 * @param  string id field ID
+		 * @return void
+		 */
+		removeField: function( id ) {
+			if ( this.get( id ) ) {
+				this.remove( this.get( id ) );
+			}
+		},
+
+		removeModel: function( model ) {
+			this.remove( model );
+		},
+
+		addModel: function( model ) {
+			if ( 'undefined' != typeof this.options.cellModel && this.options.cellModel.cid == model.get( 'cellcid' ) ) {
+				this.add( model );
+			}
+		}
+	} );
+	return collection;
+} );
\ No newline at end of file

+/**
+ * Model that holds our cell information
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Layouts
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( ['models/cellFieldCollection'], function( CellFieldCollection) {
+	var model = Backbone.Model.extend( {
+		initialize: function() {
+			var fieldCollection = nfRadio.channel( 'fields' ).request( 'get:collection' );
+			var fieldModels = [];
+
+			_.each( this.get( 'fields' ), function( search ) {
+				if ( 'undefined' == typeof fieldCollection.get( search ) ) {
+					var findField = fieldCollection.findWhere( { key: search } );
+					if ( 'undefined' != typeof findField ) {
+						fieldModels.push( findField );
+					}
+				} else {
+					fieldModels.push( fieldCollection.get( search ) );
+				}
+			} );
+
+			if ( false === this.get( 'fields' ) instanceof Backbone.Collection ) {
+				this.set( 'fields', new CellFieldCollection( fieldModels, { cellModel: this } ) );
+			}
+            this.set( 'order', Number( this.get( 'order' ) ) );
+		}
+		
+	} );
+	
+	return model;
+} );
\ No newline at end of file

+/**
+ * Holds all of our row models.
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Fields
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( ['models/rowModel'], function( rowModel ) {
+	var collection = Backbone.Collection.extend( {
+		model: rowModel,
+		comparator: 'order',
+
+		initialize: function( models ) {
+			this.updateMaxCols( models );
+			this.on( 'add:cell', this.updateMaxCols, this );
+			this.on( 'destroy:cell', this.updateMaxCols, this );
+			this.on( 'remove:cell', this.updateMaxCols, this );
+			this.on( 'destroy', this.updateMaxCols, this );
+			
+			this.on( 'add:field', this.addField, this );
+			this.on( 'append:field', this.appendField, this );
+			this.on( 'remove:field', this.removeField, this );
+		},
+
+		updateMaxCols: function( models ) {
+			var maxCols = 1;
+			if ( true === models instanceof Backbone.Model ) {
+				models = this.models
+			}
+			_.each( models, function( row ) {
+				if ( 'undefined' != typeof row.cells ) {
+					if ( maxCols < row.cells.length ) {
+						maxCols = row.cells.length;
+					}					
+				} else if ( true === row instanceof Backbone.Model ) {
+					if ( maxCols < row.get( 'cells' ).length ) {
+						maxCols = row.get( 'cells' ).length;
+					}
+				}
+					
+			} );
+
+			nfRadio.channel( 'layouts' ).request( 'update:colClass', maxCols );
+		},
+
+		addField: function( fieldModel ) {
+			if ( ! fieldModel.get( 'oldCellcid' ) ) {
+				this.appendField( fieldModel );
+				return false;
+			}
+
+			var cellModel = false;
+			this.every( function( rowModel ) {
+				if ( rowModel.get( 'cells' ).get( { cid: fieldModel.get( 'oldCellcid' ) } ) ) {
+					cellModel = rowModel.get( 'cells' ).get( { cid: fieldModel.get( 'oldCellcid' ) } );
+					return false;
+				}
+				return true;
+			} );
+
+			if ( cellModel ) {
+				cellModel.get( 'fields' ).add( fieldModel );
+				cellModel.collection.sort();
+			} else {
+				this.appendField( fieldModel );
+			}
+
+			fieldModel.set( 'oldCellcid', false );
+		},
+
+		removeField: function( fieldModel ) {
+			if ( ! fieldModel.get( 'oldCellcid' ) ) {
+				fieldModel.set( 'oldCellcid', fieldModel.get( 'cellcid' ) );
+			}
+			nfRadio.channel( 'layouts-cell' ).trigger( 'remove:field', fieldModel.get( 'id' ) );
+		},
+
+		appendField: function( fieldModel ) {
+			nfRadio.channel( 'layouts' ).request( 'add:row', this, { field: fieldModel.get( 'key' ) } );
+		}
+	} );
+	return collection;
+} );
\ No newline at end of file

+/**
+ * Model that holds our row information
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Fields
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( ['models/cellCollection'], function( CellCollection ) {
+	var model = Backbone.Model.extend( {
+
+		initialize: function( models, options ) {
+			this.options = options;
+			this.set( 'cells', new CellCollection( this.get( 'cells' ), { rowModel: this } ) );
+			this.on( 'change:cells', this.checkEmptyCells, this );
+            this.set( 'order', Number( this.get( 'order' ) ) );
+		},
+
+		checkEmptyCells: function( model ) {
+			/*
+			 * Check to see if all our cells are empty. If they are, self destruct.
+			 */
+			var remove = true;
+			_.each( this.get( 'cells' ).models, function( cell ) {
+				if ( 0 != cell.get( 'fields' ).length ) {
+					remove = false;
+				}
+			} );
+
+			if ( remove && 'undefined' != typeof this.collection ) {
+				this.collection.remove( this );
+				return false;
+			}
+
+			return true;
+		}		
+	} );
+	
+	return model;
+} );
\ No newline at end of file

+/**
+ * Individual cell view.
+ *
+ */
+define( ['views/emptyCell'], function( EmptyCell ) {
+	var view = Marionette.CollectionView.extend( {
+		tagname: 'div',
+		className: 'layouts-cell',
+		emptyView: EmptyCell,
+		dropping: false,
+
+		initialize: function( options ) {
+			// Set our collection to the fields within this cell
+			this.collection = this.model.get( 'fields' );
+			// Get our field view from Ninja Forms core.
+			this.childView = nfRadio.channel( 'views' ).request( 'get:fieldItem' );
+			// Get the collection to which this cell belongs.
+			this.cellCollection = options.cellCollection;
+		},
+
+		/**
+		 * When we render we need to:
+		 * 1) Set a data attribute on our cell element representing width.
+		 * 2) Set a data attribute on our cell element representing the cell model.
+		 * 3) Set classes on our cell element based upon how many fields it contains.
+		 * 4) Make our cell sortable droppable if we have more than one cell in the collection.
+		 * 5) Init our sortable.
+		 * 
+		 * @since  version
+		 * @return {[type]} [description]
+		 */
+		onRender: function() {
+			jQuery( this.el ).data( 'width', this.model.get( 'width' ) );
+			jQuery( this.el ).data( 'model', this.model );
+			// Used during troubleshooting to add a class to the cell element.
+			// jQuery( this.el ).addClass( this.model.cid );
+
+			// if ( 1 < this.cellCollection.length ) {
+				// jQuery( this.el ).addClass( 'layouts-droppable nf-fields-sortable' );	
+			// } else { // we want a draggable.
+
+			// }
+			
+			// Set a class based upon how many fields are in our cell.
+			if ( this.collection.models.length == 1 ) {
+				jQuery( this.el ).addClass( 'single-field' );
+				jQuery( this.el ).removeClass( 'multi-field' );
+			} else {
+				jQuery( this.el ).addClass( 'multi-field' );
+				jQuery( this.el ).removeClass( 'single-field' );
+			}
+
+			// Make this cell droppable if we have more than one field.
+			if ( 1 < this.cellCollection.length ) {
+				jQuery( this.el ).addClass( 'layouts-droppable' );	
+				// If we have multiple cells in this row, make this cell droppable for new fields
+				jQuery( this.el ).addClass( 'nf-field-type-droppable' );
+			} else {
+				jQuery( this.el ).removeClass( 'nf-field-type-droppable' );
+				jQuery( this.el ).removeClass( 'layouts-droppable' );	
+			}
+
+			// Init our sortable.
+			this.initSortable();
+		},
+
+		/**
+		 * Initialize our sortable.
+		 * Sends out radio messages when there are sortable events.
+		 * 
+		 * @since  3.0
+		 * @return void
+		 */
+		initSortable: function() {
+			var that = this;
+			jQuery( this.el ).sortable( {
+				// Don't let the item controls be used as a handle.
+				cancel: '.nf-item-controls',
+				// Class name of our placeholder. Adds the green highlight.
+				placeholder: 'nf-fields-sortable-placeholder',
+				// Opacity of the draggable
+				opacity: 0.95,
+				// Acceptable items.
+				items: '.nf-field-wrap, .nf-stage',
+				// We care about the pointer, not an intersection.
+				tolerance: 'pointer',
+				// Allows us to drop items from this sortable into others.
+				connectWith: '.layouts-droppable',
+				// Update droppable areas as we drag. Important because of the "swell" effect on the builder.
+				refreshPositions: true,
+				appendTo: '#nf-main',
+				
+				/**
+				 * Return a helper that will be used for the drag event of the sortable.
+				 * 
+				 * @since  3.0
+				 * @param  object e event object
+				 * @return object   drag element
+				 */
+				helper: function( e ) {
+					var element = nfRadio.channel( 'layouts' ).request( 'getHelper:cellSortable', e, that, this );
+					return element;
+				},
+
+				/**
+				 * When we hover over our sortable while dragging, send out a radio message.
+				 * 
+				 * @since  3.0
+				 * @param  object e  event object
+				 * @param  object ui jQuery UI object
+				 * @return void
+				 */
+				over: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'over:cellSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we hover over out of our sortable while dragging, send out a radio message.
+				 * 
+				 * @since  3.0
+				 * @param  object e  event object
+				 * @param  object ui jQuery UI object
+				 * @return void
+				 */
+				out: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'out:cellSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we sort our sortable while dragging, send out a radio message.
+				 * 
+				 * @since  3.0
+				 * @param  object e  event object
+				 * @param  object ui jQuery UI object
+				 * @return void
+				 */
+		        sort: function( e, ui) {
+		        	     	nfRadio.channel( 'layouts' ).trigger( 'sort:cellSortable', e, ui, that, this );
+		        },
+				
+				/**
+				 * When we receive an item, send out a radio message.
+				 * 
+				 * @since  3.0
+				 * @param  object e  event object
+				 * @param  object ui jQuery UI object
+				 * @return void
+				 */
+				receive: function( e, ui ) {
+					if ( ui.item.dropping ) return;
+					nfRadio.channel( 'layouts' ).trigger( 'receive:cellSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we start dragging, send out a radio message.
+				 * 
+				 * @since  3.0
+				 * @param  object e  event object
+				 * @param  object ui jQuery UI object
+				 * @return void
+				 */
+				start: function( e, ui ) {
+
+					nfRadio.channel( 'layouts' ).trigger( 'start:cellSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we stop dragging, send out a radio message.
+				 * 
+				 * @since  3.0
+				 * @param  object e  event object
+				 * @param  object ui jQuery UI object
+				 * @return void
+				 */
+				stop: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'stop:cellSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we update our sortable order, send out a radio message.
+				 * 
+				 * @since  3.0
+				 * @param  object e  event object
+				 * @param  object ui jQuery UI object
+				 * @return void
+				 */
+				update: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'update:cellSortable', e, ui, that, this );
+				}
+			} );
+		},
+
+		/**
+		 * Template helper functions
+		 * 
+		 * @since  3.0
+		 * @return void
+		 */
+		templateHelpers: function() {
+			return {
+				renderHandleBefore: function() {
+					return '<div class="layouts-handle"></div>';
+				},
+
+				renderHandleAfter: function() {
+					return '<div class="layouts-handle"></div>';
+				}
+			};
+		},
+
+		/**
+		 * View events
+		 * 
+		 * @type {Object}
+		 */
+		events: {
+			'click .delete': 'clickDeleteCell'
+		},
+
+		/**
+		 * When the user clicks to delete a cell, remove the model.
+		 * 
+		 * @since  3.0
+		 * @param  {Object} e event object
+		 * @return void
+		 */
+		clickDeleteCell: function( e ) {
+			nfRadio.channel( 'layouts' ).trigger( 'click:deleteCell', e, this );
+		}
+	} );
+
+	return view;
+} );
\ No newline at end of file

+/*
+ * View that is rendered if we have no fields within a cell.
+ */
+define( [], function() {
+	var view = Marionette.ItemView.extend( {
+		tagname: 'div',
+		template: '#nf-tmpl-empty-cell'
+	} );
+
+	return view;
+} );
\ No newline at end of file

+/**
+ * Row collection (sortable) view.
+ */
+define( ['views/rowItem'], function( RowItemView ) {
+	var view = Marionette.CollectionView.extend( {
+		tagname: 'div',
+		className: 'layouts-row-collection layouts-droppable nf-field-type-droppable nf-fields-sortable',
+		childView: RowItemView,
+		reorderOnSort: true,
+
+		getEmptyView: function() {
+			return nfRadio.channel( 'views' ).request( 'get:mainContentEmpty' );
+		},
+
+		initialize: function() {
+			this.collection.on( 'add', this.maybeInitSortable, this );
+		},
+
+		onBeforeDestroy: function() {
+			this.collection.off( 'add', this.maybeInitSortable );
+		},
+
+		/**
+		 * Remove any rows that are completely empty.
+		 * 
+		 * @since  3.0
+		 * @param  {Backbone.Model} 		rowModel
+		 * @param  {int} index
+		 * @param  {Backbone.Collection} 	rowCollection [description]
+		 * @return {bool}					Should this row be output in the collection view?
+		 */
+		filter: function( rowModel, index, rowCollection ) {
+			var show = false;
+			_.each( rowModel.get( 'cells' ).models, function( cell ) {
+				if ( 0 != cell.get( 'fields' ).length ) {
+					show = true;
+				}
+			} );
+
+			return show;
+		},
+
+		/**
+		 * When we render this view, init our rows collection sortable.
+		 * 
+		 * @since  3.0
+		 * @return void
+		 */
+		onRender: function() {
+			this.maybeInitSortable();
+		},
+
+		maybeInitSortable: function() {
+			if ( 0 < this.collection.models.length ) {
+				this.initSortable();
+			}			
+		},
+
+		initSortable: function() {
+			var that = this;
+			// Init our sortable.
+			jQuery( this.el ).sortable( {
+				helper: 'clone',
+				handle: '.gutter:first',
+				items: '.layouts-row',
+				cancel: '.layouts-cell',
+				tolerance: 'pointer',
+				placeholder: 'nf-fields-sortable-placeholder',
+				appendTo: '#nf-main',
+				grid: [ 5, 5 ],
+
+				/**
+				 * When we start dragging an item, trigger an event.
+				 * 
+				 * @since  3.0
+				 * @param  object 	e  event
+				 * @param  object 	ui jQuery UI element
+				 * @return void
+				 */
+				start: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'start:rowsSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we stop dragging an item, trigger an event.
+				 * 
+				 * @since  3.0
+				 * @param  object 	e  event
+				 * @param  object 	ui jQuery UI element
+				 * @return void
+				 */
+				stop: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'stop:rowsSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we drag an item over our sortable, trigger an event.
+				 * 
+				 * @since  3.0
+				 * @param  object 	e  event
+				 * @param  object 	ui jQuery UI element
+				 * @return void
+				 */
+				over: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'over:rowsSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we move an item off of our sortable, trigger an event.
+				 * 
+				 * @since  3.0
+				 * @param  object 	e  event
+				 * @param  object 	ui jQuery UI element
+				 * @return void
+				 */
+				out: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'out:rowsSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we drop an item on the sortable, trigger an event.
+				 * 
+				 * @since  3.0
+				 * @param  object 	e  event
+				 * @param  object 	ui jQuery UI element
+				 * @return void
+				 */
+				receive: function( e, ui ) {
+					if ( ui.item.dropping ) return;
+					nfRadio.channel( 'layouts' ).trigger( 'receive:rowsSortable', e, ui, that, this );
+				},
+
+				/**
+				 * When we drop an item onto our sortable that changes our item order, trigger an event.
+				 * 
+				 * @since  3.0
+				 * @param  object 	e  event
+				 * @param  object 	ui jQuery UI element
+				 * @return void
+				 */
+				update: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'update:rowsSortable', e, ui, that, this );
+				}
+			} );
+		}
+	} );
+
+	return view;
+} );
\ No newline at end of file

+/**
+ * Single row view
+ */
+define( ['views/cellItem', 'models/cellFieldCollection'], function( CellItemView, CellFieldCollection ) {
+	var view = Marionette.CollectionView.extend( {
+		tagname: 'div',
+		className: 'layouts-row',
+		childView: CellItemView,
+		reorderOnSort: true,
+
+		initialize: function() {
+			// Set our collection to our cells.
+			this.collection = this.model.get( 'cells' );
+			/*
+			 * Set our childViewOptions.
+			 * As the variable name suggests, this will be accessible within our child views.
+			 */
+			this.childViewOptions = {
+				cellCollection: this.collection
+			};
+			// Respond to requests to update our gutter/divider positions
+			nfRadio.channel( 'layouts' ).reply( 'update:gutters', this.updateGutters, this );
+			
+			/*
+			 * Bind listeners to row model events.
+			 */
+			// this.model.on( 'destroy:cell', this.render, this );
+			this.collection.on( 'sort', this.render, this );
+
+			/*
+			 * Bind listeners to our nf-builder so that we can track when the user is dragging rather than just mouse over.
+			 * Because our gutter/divider is a droppable that is very close to a sortable, sometimes the "drop" event will fire when we are just mousing over.
+			 * Tracking that state of the mouse lets us prevent this later.
+			 * 
+			 */
+			jQuery( '#nf-builder' ).on( 'mousedown', function() {
+				jQuery( this ).data( 'mousedown', true );
+			} );
+			
+			jQuery( '#nf-builder' ).on( 'mouseup', function() {
+				jQuery( this ).data( 'mousedown', false );
+			} );
+		},
+
+		/**
+		 * Before we destroy this view, unbind our model change listeners.
+		 * If we don't do this, we'll get JS errors.
+		 * 
+		 * @since  3.0
+		 * @return void
+		 */
+		onBeforeDestroy: function() {
+			// this.model.off( 'add:cell', this.render );
+			// this.model.off( 'destroy:cell', this.render );
+			this.collection.off( 'sort', this.maybeRender );
+		},
+
+		maybeRender: function() {
+			if ( 1 < this.collection.models.length ) {
+				this.render();
+			}
+		},
+
+		/**
+		 * When we render:
+		 * 1) Set our el id to the model cid
+		 * 2) Add a class based upon the number of cells in the row
+		 * 3) Remove any old gutters
+		 * 4) Update our gutters/dividers
+		 * 5) Init our gutters/dividers as droppables
+		 * 
+		 * @since  version
+		 * @return {[type]} [description]
+		 */
+		onRender: function() {
+			// Set el ID
+			jQuery( this.el ).prop( 'id', this.model.cid );
+			// Add class based upon number of cells
+			if ( this.collection.models.length == 1 ) {
+				jQuery( this.el ).addClass( 'single-cell' );
+				jQuery( this.el ).removeClass( 'multi-cell' );
+			} else {
+				jQuery( this.el ).addClass( 'multi-cell' );
+				jQuery( this.el ).removeClass( 'single-cell' );
+			}
+			
+			// Remove any gutters. This prevents extra HTML markup from appearing.
+			jQuery( this.el ).find( '.gutter' ).remove();
+			// Update our gutters/dividers
+			this.updateGutters();
+			// We want to access our rowView object later
+			var rowView = this;
+			// Init our droppables.
+			jQuery( this.el ).find( '.gutter' ).droppable( {
+				// Activate by pointer
+				tolerance: 'pointer',
+				// Class added when we're dragging over
+				hoverClass: 'nf-fields-sortable-placeholder',
+				// Which elements do we want to accept?
+				accept: '.nf-field-type-draggable, .nf-field-wrap, .nf-stage',
+
+				/**
+				 * When we drag over this droppable, trigger a radio event.
+				 * 
+				 * @since  3.0
+				 * @param  object 	e  event
+				 * @param  object 	ui jQuery UI element
+				 * @return void
+				 */
+				over: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'over:gutterDroppable', e, ui, rowView, this );
+				},
+
+				/**
+				 * When we drag out of this droppable, trigger a radio event.
+				 * 
+				 * @since  3.0
+				 * @param  object 	e  event
+				 * @param  object 	ui jQuery UI element
+				 * @return void
+				 */
+				out: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'out:gutterDroppable', e, ui, rowView, this );
+				},
+
+				/**
+				 * When we drop on this droppable, trigger a radio event.
+				 * 
+				 * @since  3.0
+				 * @param  object 	e  event
+				 * @param  object 	ui jQuery UI element
+				 * @return void
+				 */
+				drop: function( e, ui ) {
+					nfRadio.channel( 'layouts' ).trigger( 'drop:gutterDroppable', e, ui, rowView, this );
+				}
+			} );
+		},
+
+		/**
+		 * Check for gutters in our row and activate them as sliders.
+		 * 
+		 * @since  3.0
+		 * @return void
+		 */
+		updateGutters: function() {
+			// Get our gutter elements
+			var elements = jQuery( this.el ).find( '.layouts-cell' );
+			var that = this;
+			// Call split.js to create resizable cells.
+			Split( elements, {
+				minSize: 50,
+				cellCollection: that.collection,
+				// When we start resizing our cell, trigger a radio event.
+				onDragStart: function( data ) {
+					nfRadio.channel( 'layouts' ).trigger( 'dragStart:gutterSlider', data, that.collection );
+				},
+				// When we drag/resize our cell, trigger a radio event.
+				onDrag: function( data ) {
+					nfRadio.channel( 'layouts' ).trigger( 'drag:gutterSlider', data, that.collection );
+				},
+				// When we stop resizing our cell, trigger a radio event.
+				onDragEnd: function( data ) {
+					nfRadio.channel( 'layouts' ).trigger( 'dragEnd:gutterSlider', data, that.collection );
+				}
+			} );
+
+			// Set the css width on our gutters
+			_.each( jQuery( elements ), function( cell, index ) {
+				var width = jQuery( cell ).data( 'width' );
+				var gutterWidth = 10;
+				if ( 0 == index || index == jQuery( elements ).length - 1 ) {
+					// gutterWidth = 5;
+				}
+				jQuery( cell ).css( 'width', 'calc(' + width + '% - ' + gutterWidth + 'px)' );
+			} );
+
+			// Add a gutter/divider before our first cell and after our last cell.
+			var html = '<div class="gutter" style="width: 10px; cursor: ew-resize;"></div>';
+			jQuery( this.el ).find( '.layouts-cell:first' ).before( html );
+			jQuery( this.el ).find( '.layouts-cell:last' ).after( html );
+		}
+
+	} );
+
+	return view;
+} );
\ No newline at end of file

+define( [ 'views/rowCollection', 'models/rowCollection'], function( RowCollectionView, RowCollection ) {
+	var controller = Marionette.Object.extend( {
+		initialize: function() {
+			nfRadio.channel( 'formContent' ).request( 'add:viewFilter', this.getFormContentView, 4 );
+			nfRadio.channel( 'formContent' ).request( 'add:loadFilter', this.formContentLoad, 4 );
+			
+			/*
+			 * In the RC for Ninja Forms, the 'formContent' channel was called 'fieldContents'.
+			 * This was changed in version 3.0. These radio messages are here to make sure nothing breaks.
+			 *
+			 * TODO: Remove this backwards compatibility radio calls.
+			 */
+			nfRadio.channel( 'fieldContents' ).request( 'add:viewFilter', this.getFormContentView, 4 );
+			nfRadio.channel( 'fieldContents' ).request( 'add:loadFilter', this.formContentLoad, 4 );
+		},
+
+		getFormContentView: function( collection ) {
+			return RowCollectionView;
+		},
+
+		/**
+		 * When we load our builder view, we filter the formContentData.
+		 * This turns the saved object into a Backbone Collection.
+		 *
+		 * If we aren't passed any data, then this form hasn't been modified with layouts yet,
+		 * so we default to the nfLayouts.rows global variable that is localised for us.
+		 * 
+		 * @since  3.0
+		 * @param  array formContentData current value of our formContentData.
+		 * @return Backbone.Collection
+		 */
+		formContentLoad: function( formContentData, formModel, empty, fields ) {
+			if ( true === formContentData instanceof RowCollection ) return formContentData;
+			
+			var formContentLoadFilters = nfRadio.channel( 'formContent' ).request( 'get:loadFilters' );
+
+			/*
+			 * TODO: This is a bandaid fix to prevent forms with layouts and parts from freaking out of layouts & styles are deactivated.
+			 * If Layouts is deactivated, it will send the field keys.
+			 */
+			var mpEnabled = ( 'undefined' != typeof formContentLoadFilters[1] ) ? true : false;
+
+			/*
+			 * TODO: Bandaid fix for making sure that Layouts can interpret Multi-Part data if Multi-Part is disabled.
+			 */
+			if ( ! mpEnabled && _.isArray( formContentData ) && 0 != _.isArray( formContentData ).length  && 'undefined' != typeof _.first( formContentData ) && 'part' == _.first( formContentData ).type ) {
+				/* 
+				 * Get our layout data from inside MP
+				 */
+				formContentData = _.flatten( _.pluck( formContentData, 'formContentData' ) );
+			}
+
+			empty = empty || false;
+			fields = fields || false;
+			var rowArray = [];
+
+			if ( _.isArray( formContentData ) && 0 != formContentData.length && 'undefined' == typeof formContentData[0].cells ) {
+				_.each( formContentData, function( key, index ) {
+					rowArray.push( {
+						order: index,
+						cells: [ {
+							order: 0,
+							fields: [ key ],
+							width: '100'
+						} ]
+					} );
+
+				} );
+			} else if ( _.isEmpty( rowArray ) && 'undefined' != typeof nfLayouts && ! mpEnabled ) {
+				rowArray = nfLayouts.rows;
+			} else {
+				rowArray = formContentData;
+			}
+			
+			return new RowCollection( rowArray, { formModel: formModel } );
+		}
+	});
+
+	return controller;
+} );
\ No newline at end of file

+define( 
+	[
+		'controllers/formContentFilters',
+	], 
+	function
+	(
+		FormContentFilters
+	)
+	{
+	var controller = Marionette.Object.extend( {
+		initialize: function() {
+			new FormContentFilters();
+		}
+
+	});
+
+	return controller;
+} );
\ No newline at end of file

+var nfRadio = Backbone.Radio;
+require( ['controllers/loadControllers'], function( LoadControllers ) {
+
+	var NFLayouts = Marionette.Application.extend( {
+
+		initialize: function( options ) {
+			this.listenTo( nfRadio.channel( 'form' ), 'before:filterData', this.loadControllers );
+		},
+
+		loadControllers: function( app ) {
+			new LoadControllers();
+		}
+	} );
+
+	var nfLayouts = new NFLayouts();
+	nfLayouts.start();
+} );
\ No newline at end of file

+/**
+ * Holds all of our cell models.
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Fields
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( ['models/cellModel'], function( cellModel ) {
+	var collection = Backbone.Collection.extend( {
+		model: cellModel,
+		comparator: 'order',
+
+		initialize: function( models, options ) {
+			this.rowModel = options.rowModel;
+			this.formModel = options.formModel;
+		}
+	} );
+	return collection;
+} );
\ No newline at end of file

+/**
+ * Holds all of our cell field models.
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Fields
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( [], function( ) {
+	var collection = Backbone.Collection.extend( {
+		comparator: 'order',
+
+		initialize: function( models, options ) {
+			// We've been passed the cellModel to which this collection belongs.
+			this.cellModel = options.cellModel;
+			_.each( models, function( model ) {
+				model.set( 'cellcid', this.cellModel.cid, { silent: true } );
+			}, this );
+
+			this.listenTo( this.cellModel.collection.rowModel.collection, 'validate:fields', this.validateFields );
+			this.listenTo( this.cellModel.collection.rowModel.collection, 'show:fields', this.showFields );
+			this.listenTo( this.cellModel.collection.rowModel.collection, 'hide:fields', this.hideFields );
+		
+			var fieldCollection = this.cellModel.collection.formModel.get( 'fields' );
+
+			// When we remove a model from our main field collection, make sure it's removed from this collection as well.
+			fieldCollection.on( 'reset', this.resetCollection, this );
+		},
+
+		validateFields: function() {
+			_.each( this.models, function( fieldModel ) {
+				fieldModel.set( 'clean', false ); // @todo remove after this is released in core.
+				nfRadio.channel( 'submit' ).trigger( 'validate:field', fieldModel );
+			}, this );
+		},
+
+		showFields: function() {
+			this.invoke( 'set', { visible: true } );
+            this.invoke( function() {
+                this.trigger( 'change:value', this );
+            });
+		},
+
+		hideFields: function() {
+			this.invoke( 'set', { visible: false } );
+            this.invoke( function() {
+                this.trigger( 'change:value', this );
+            });
+		},
+
+		/**
+		 * When we reset our main field collection, we need to reset any of those fields in this collection.
+		 * 
+		 * @since  3.0.12
+		 * @param  Backbone.Collection 		collection
+		 * @return void
+		 */
+		resetCollection: function( collection ) {
+			var fieldModels = [];
+			_.each( this.models, function( fieldModel ) {
+				if ( 'submit' != fieldModel.get( 'type' ) ) {
+					fieldModels.push( collection.findWhere( { key: fieldModel.get( 'key' ) } ) );
+				} else {
+					fieldModels.push( fieldModel );
+				}
+			} );
+			this.reset( fieldModels );
+		}
+
+	} );
+	return collection;
+} );

+/**
+ * Model that holds our cell information
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Layouts
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( ['models/cellFieldCollection'], function( CellFieldCollection) {
+	var model = Backbone.Model.extend( {
+		initialize: function() {
+			var fieldCollection = this.collection.formModel.get( 'fields' );
+			var fieldModels = [];
+			_.each( this.get( 'fields' ), function( search ) {
+				if ( 'undefined' == typeof fieldCollection.get( search ) ) {
+					var findField = fieldCollection.findWhere( { key: search } );
+					if ( 'undefined' != typeof findField ) {
+						fieldModels.push( findField );
+					}
+				} else {
+					fieldModels.push( fieldCollection.get( search ) );
+				}
+				
+			} );
+			this.set( 'fields', new CellFieldCollection( fieldModels, { cellModel: this } ) );
+            this.set( 'order', Number( this.get( 'order' ) ) );
+			this.listenTo( this.get( 'fields' ), 'change:errors', this.triggerErrors );
+		},
+
+		triggerErrors: function( fieldModel ) {
+			this.collection.trigger( 'change:errors', fieldModel );
+		}
+		
+	} );
+	
+	return model;
+} );
\ No newline at end of file

+/**
+ * Holds all of our row models.
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Fields
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( ['models/rowModel'], function( rowModel ) {
+	var collection = Backbone.Collection.extend( {
+		model: rowModel,
+		comparator: 'order',
+
+		initialize: function( models, options ) {
+			this.formModel = options.formModel;
+		},
+
+		validateFields: function() {
+			/*
+			 * Validate the fields in this row collection.
+			 */
+			this.trigger( 'validate:fields', this );
+		},
+
+		showFields: function() {
+			this.trigger( 'show:fields', this );
+		},
+
+		hideFields: function() {
+			this.trigger( 'hide:fields', this );
+		}
+	} );
+	return collection;
+} );
\ No newline at end of file

+/**
+ * Model that holds our row information
+ * 
+ * @package Ninja Forms Layouts
+ * @subpackage Fields
+ * @copyright (c) 2016 WP Ninjas
+ * @since 3.0
+ */
+define( ['models/cellCollection'], function( CellCollection ) {
+	var model = Backbone.Model.extend( {
+		initialize: function() {
+			this.set( 'cells', new CellCollection( this.get( 'cells' ), { rowModel: this, formModel: this.collection.formModel } ) );
+            this.set( 'order', Number( this.get( 'order' ) ) );
+			this.listenTo( this.get( 'cells' ), 'change:errors', this.triggerErrors );
+		},
+
+		triggerErrors: function( fieldModel ) {
+			this.collection.trigger( 'change:errors', fieldModel );
+		}
+	} );
+	
+	return model;
+} );
\ No newline at end of file

+define( [], function() {
+	var view = Marionette.CompositeView.extend( {
+		template: '#nf-tmpl-cell',
+		className: 'nf-cell',
+
+		getChildView: function() {
+			return nfRadio.channel( 'views' ).request( 'get:fieldLayout' );
+		},
+
+		initialize: function() {
+			this.collection = this.model.get( 'fields' );
+			// Get our fieldItem view.
+			jQuery( this.el ).css( 'width', this.model.get( 'width' ) + '%' );
+		},
+
+		onRender: function() {
+			if ( 0 == this.collection.length ) {
+				jQuery( this.el ).html( ' ' );
+			}
+		},
+
+		attachHtml: function( collectionView, childView ) {
+			jQuery( collectionView.el ).find( 'nf-fields' ).append( childView.el );
+		}
+	} );
+
+	return view;
+} );
\ No newline at end of file

+define( ['views/rowComposite'], function( rowComposite ) {
+	var view = Marionette.CollectionView.extend({
+		tagName: 'nf-rows-wrap',
+		childView: rowComposite
+
+	});
+
+	return view;
+} );
\ No newline at end of file

+define( ['views/cellComposite'], function( cellComposite ) {
+	var view = Marionette.CompositeView.extend( {
+		template: '#nf-tmpl-row',
+		childView: cellComposite,
+		className: 'nf-row',
+
+		initialize: function() {
+			this.collection = this.model.get( 'cells' );
+
+		},
+
+		onAttach: function() {
+			if ( 1 < this.collection.length ) {
+				jQuery( this.el ).closest( '.nf-form-wrap' ).addClass( 'nf-multi-cell' );
+			}
+		},
+
+		attachHtml: function( collectionView, childView ) {
+			jQuery( collectionView.el ).find( 'nf-cells' ).append( childView.el );
+		}
+	} );
+
+	return view;
+} );
\ No newline at end of file

+"use strict";(function(){var a=this,b="addEventListener",c="removeEventListener",d="getBoundingClientRect",e=a.attachEvent&&!a[b],f=a.document,g=function(){for(var a,b=["","-webkit-","-moz-","-o-"],c=0;c<b.length;c++)if(a=f.createElement("div"),a.style.cssText="width:"+b[c]+"calc(9px)",a.style.length)return b[c]+"calc"}(),h=function(a){return"string"==typeof a||a instanceof String?f.querySelector(a):a},i=function(i,j){var k,l,m,n,o,p,q,r,s=[];j="undefined"!=typeof j?j:{},j.gutterSize||(j.gutterSize=10),j.minSize||(j.minSize=100),j.snapOffset||(j.snapOffset=30),j.direction||(j.direction="horizontal"),"horizontal"==j.direction?(k="width",m="clientWidth",n="clientX",o="left",p="gutter gutter-horizontal",q="paddingLeft",r="paddingRight",j.cursor||(j.cursor="ew-resize")):"vertical"==j.direction&&(k="height",m="clientHeight",n="clientY",o="top",p="gutter gutter-vertical",q="paddingTop",r="paddingBottom",j.cursor||(j.cursor="ns-resize"));var t=function(c){var d=this,e=d.a,f=d.b;!d.dragging&&j.onDragStart&&j.onDragStart(this),c.preventDefault(),d.dragging=!0,d.move=v.bind(d),d.stop=u.bind(d),a[b]("mouseup",d.stop),a[b]("touchend",d.stop),a[b]("touchcancel",d.stop),d.parent[b]("mousemove",d.move),d.parent[b]("touchmove",d.move),e[b]("selectstart",C),e[b]("dragstart",C),f[b]("selectstart",C),f[b]("dragstart",C),e.style.userSelect="none",e.style.webkitUserSelect="none",e.style.MozUserSelect="none",e.style.pointerEvents="none",f.style.userSelect="none",f.style.webkitUserSelect="none",f.style.MozUserSelect="none",f.style.pointerEvents="none",d.gutter.style.cursor=j.cursor,d.parent.style.cursor=j.cursor,w.call(d)},u=function(){var b=this,d=b.a,e=b.b;b.dragging&&j.onDragEnd&&j.onDragEnd(this),b.dragging=!1,a[c]("mouseup",b.stop),a[c]("touchend",b.stop),a[c]("touchcancel",b.stop),b.parent[c]("mousemove",b.move),b.parent[c]("touchmove",b.move),delete b.stop,delete b.move,d[c]("selectstart",C),d[c]("dragstart",C),e[c]("selectstart",C),e[c]("dragstart",C),d.style.userSelect="",d.style.webkitUserSelect="",d.style.MozUserSelect="",d.style.pointerEvents="",e.style.userSelect="",e.style.webkitUserSelect="",e.style.MozUserSelect="",e.style.pointerEvents="",b.gutter.style.cursor="",b.parent.style.cursor=""},v=function(a){var b;this.dragging&&(b="touches"in a?a.touches[0][n]-this.start:a[n]-this.start,b<=this.aMin+j.snapOffset?b=this.aMin:b>=this.size-this.bMin-j.snapOffset&&(b=this.size-this.bMin),x.call(this,b),j.onDrag&&j.onDrag(this))},w=function(){var b=a.getComputedStyle(this.parent),c=this.parent[m]-parseFloat(b[q])-parseFloat(b[r]);this.size=this.a[d]()[k]+this.b[d]()[k]+this.aGutterSize+this.bGutterSize,this.percentage=Math.min(this.size/c*100,100),this.start=this.a[d]()[o]},x=function(a){2==j.cellCollection.length&&(this.percentage=100);var b=a/this.size*this.percentage,c=this.percentage-a/this.size*this.percentage,d=y.call(this,[b,c],this.percentage);b=d[0],c=d[1],console.log(b),console.log(c);var e=0;if(_.each(j.cellCollection.models,function(a,d){e+=a==jQuery(this.a).data("model")?b:a==jQuery(this.b).data("model")?c:a.get("width")},this),100>e){var f=100-e;b>c?c+=f:c>b&&(b+=f)}this.a.style[k]=g+"("+b+"% - 10px)",this.b.style[k]=g+"("+c+"% - 10px)",jQuery(this.a).data("width",b),jQuery(this.b).data("width",c)},y=function(a,b){var c=b-_.reduce(a,function(a,b){return a+Math.round(b)},0);return _.chain(a).map(function(b,d){return Math.round(b)+(c>d)-(d>=a.length+c)}).value()},z=function(){var a=this,b=a.a,c=a.b;b[d]()[k]<a.aMin?(b.style[k]=a.aMin-a.aGutterSize+"px",c.style[k]=a.size-a.aMin-a.aGutterSize+"px"):c[d]()[k]<a.bMin&&(b.style[k]=a.size-a.bMin-a.bGutterSize+"px",c.style[k]=a.bMin-a.bGutterSize+"px")},A=function(){var a=this,b=a.a,c=a.b;c[d]()[k]<a.bMin?(b.style[k]=a.size-a.bMin-a.bGutterSize+"px",c.style[k]=a.bMin-a.bGutterSize+"px"):b[d]()[k]<a.aMin&&(b.style[k]=a.aMin-a.aGutterSize+"px",c.style[k]=a.size-a.aMin-a.aGutterSize+"px")},B=function(a){for(var b=0;b<a.length;b++)w.call(a[b]),z.call(a[b]);for(b=a.length-1;b>=0;b--)w.call(a[b]),A.call(a[b])},C=function(){return!1},D=h(i[0]).parentNode;if(!j.sizes){var E=100/i.length;for(j.sizes=[],l=0;l<i.length;l++)j.sizes.push(E)}if(!Array.isArray(j.minSize)){var F=[];for(l=0;l<i.length;l++)F.push(j.minSize);j.minSize=F}for(l=0;l<i.length;l++){var J,L,G=h(i[l]),H=1==l,I=l==i.length-1,K=j.gutterSize;if(l>0&&(L={a:h(i[l-1]),b:G,aMin:j.minSize[l-1],bMin:j.minSize[l],dragging:!1,parent:D,isFirst:H,isLast:I,direction:j.direction},L.aGutterSize=j.gutterSize,L.bGutterSize=j.gutterSize,H&&(L.aGutterSize=j.gutterSize/2),I&&(L.bGutterSize=j.gutterSize/2)),e)J="string"==typeof j.sizes[l]||j.sizes[l]instanceof String?j.sizes[l]:j.sizes[l]+"%";else{if(l>0){var M=f.createElement("div");M.className=p,M.style[k]=j.gutterSize+"px",M[b]("mousedown",t.bind(L)),M[b]("touchstart",t.bind(L)),D.insertBefore(M,G),L.gutter=M}0!==l&&l!=i.length-1||(K=j.gutterSize/2),J="string"==typeof j.sizes[l]||j.sizes[l]instanceof String?j.sizes[l]:g+"("+j.sizes[l]+"% - "+K+"px)"}G.style[k]=J,l>0&&s.push(L)}B(s)};"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=i),exports.Split=i):a.Split=i}).call(window);
\ No newline at end of file