/* Variables */

@background-color: #F1F1F1;
@border-color: #CDCDCD;
@light-gray: #4A4A4A;
@selected-blue: #C3DBF8;
@selected-green: #D1E1A8;
@button-blue: #4A90E2;

/* Mixins */

.round-corners(@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

.animate {
  -moz-transition: all 0.1s ease-in;
  -webkit-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

/* Template */

#master-container {
	width: 1050px;
	margin: 0 auto;
	border: 1px solid @border-color;
}
#form-container {
	float:left;
	width: 100%;
	overflow:hidden;
	clear: left;
}
#tabs-container {
	float:left;
	width:100%;
	position:relative;
	border: 1px solid @border-color;
	border-width: 0 1px 0 0;
	right:60%;
}
.left-col {
	float:left;
	width:40%;
	position:relative;
	left:60%;
	overflow:hidden;
}
.right-col {
	float:left;
	width:60%;
	position:relative;
	left:60%;
	overflow:hidden;
}

/* Tabs */

.nav-tabs {

	margin: 0px;
	padding: 0px;
	border: 1px solid @border-color;
	border-width: 0 0 1px 0;
	margin-top: 46px;
	position: relative;

	li:first-child {
		margin-left: 10px;
	}

	li {

		list-style-type: none;
		display: inline-block;
		padding: 10px 15px;
		font-size: 14px;
		cursor: pointer;

		a {
			text-decoration: none;
		}

		position: relative;
		
	}

	li.active {
		border: 1px solid @border-color;
		.round-corners(3px);
		border-bottom-color: @background-color;
		padding-bottom: 12px;
		top: 1px;
	}

}

.required-star {
	color: red;
}

/* Form Container */

#form-container {
	hr {
		border: 1px solid @border-color;
		border-width: 1px 0 0 0;
	}

	h3 {
		margin-top: 0px;
		margin-bottom: 0px;
	}

}

/* Form Fields */

.right-col {

	margin-bottom: 20px;
	
	.loading {
		width: 100%;
		text-align: center;
		margin-top: 17%;
	}

	#form-elements, #sortable-elements {
		padding: 0px;
		margin: 0px;
	}

	#form-elements li {
		list-style-type: none;
	}

	.form-element {

		position: relative;
		list-style-type: none;
		cursor: pointer;
		padding: 25px;

		input, texarea, label {
			cursor: pointer;
		}

		h2, h5 {
			margin: 0px;
			padding: 0px;
		}
		h2 {
			margin-bottom: 5px;
		}

	}

	#form-settings-element {
		margin-bottom: 10px;
	}
	#form-settings-element:hover {
		border: none;
	}
	#form-settings-element.selected {
		background-color: @selected-blue;
	}

	#sortable-elements {
		padding: 0px;
		margin: 0px;
		margin-top: 25px;

		.form-element {
			width: 85%;
			margin: 10px 0 10px 25px;
			list-style-type: none;
			cursor: pointer;
			padding: 15px;
			border: 1px solid @border-color;

			label {
				display: block;
				font-size: 14px;
				margin-bottom: 10px;
			}
		}

		.form-element.selected {
			background-color: #DCF7C0;
			border: 1px solid #7ED321;
		}

		.form-element:hover {
			border: 1px dashed #7ED321;
		}

		.section-break {
		
			margin: 25px !important;
			padding: 0px !important;
			border: none !important;
			width: 100%;
			left: 0px;
			
			label {
				font-size: 20px !important;
				padding: 10px;
				padding-bottom: 0px;
				margin-bottom: 0px !important;
			}

			p {
				margin-top: 0px;
				padding: 10px;
				padding-top: 0px;
			}

	 	}

	}

	.button {
		margin: 20px 0 30px 25px;
	}

}

/* Tabs toolbox */

.left-col {

	.form-group label {
		font-weight: bold;
		font-size: 15px;
		margin-top: 10px;
		margin-bottom: 8px;
		display: block;
	}

	.col-sm-6 {
		width: 47%;
		float: left;
		margin-left: 7px;
	}

	.section {
		padding: 20px;
		border: 1px solid @border-color;
		margin: 0 0 15px 0;
		.round-corners(3px);
	}

	.new-element {
		margin-bottom: 3px;
	}

	.choice  {
		margin-bottom: 5px;
	}

	textarea {
		width: 100%;
	}

	input[type='text'] {
		width: 100%;
	}

}

/* Footer */

#footer {
	
	width: 600px;
	text-align: center;
	margin: 0 auto;

	p {
		margin-top: 30px;
		font-size: 14px;
	}

	font-size: 12px;

}