@import "editor_font";

 .option-container {
	margin: 20px 0;
	border: solid 1px #cccccc;
	background-color: #fff;
	@include border-radius(3px,3px,3px,3px);

	.inside { 
		display: inline-block; 
		width: 100%; 	
		position: relative; 
		margin: 0;
		
		.preview_button 
		{
			position: absolute; 
			right: 15px;
			top: 20px; 
			z-index: 99;
		}
		.field_group
		{
			padding: 20px; 
			min-height: 150px; 
			background-color: #fff; 
			position: relative;

			&:nth-of-type(even)
			{
				background-color: rgb(249, 249, 249);
			}			
		}
	}
	.title {	
		font-size: 18px;
		padding: 9px 8px 9px 10px;
		text-align: left;
		text-shadow: 0px 1px 0px #ffffff;
		position: relative;
		display: none; // unused still
	}
	.section-title { 
		padding: 15px; 
		margin-top: 10px;
		background-color: #fff;  
		font-weight: 700;
		font-size: 16px;
	}

		.help { 
 
			position: relative; 
			width: 18px; 
			height: 18px; 
			font-size: 18px;
			margin-left: 10px; 
			
			span {
				font-family: "Open Sans",sans-serif;
				font-size: 12px;
				background-color:#fff;
				color: #000;
				position: absolute;
				display: none;
				padding: 10px 5px;
			 	top: -7px; 
			 	left: 25px;
				min-width: 150px;
				border-radius: 5px;
				text-align: center;
				z-index: 1000; // above all
				border: 1px solid #ccc; 
				line-height: 15px;
 
			}
			&:hover span { 
					display: block; 
				}
		}
		.secondary-icon { 
			color: #ccc; 
			font-size: 12px; 
			float:left;
			
			margin-left: 5px;
			display: none; 
			position: absolute; 
			left: 15px;
			top: 35px;
			&.has-panels-true { display: inline-block; } 
		
		}
		.editor {

			display: table; 
			position: relative;
			width: 100%;
		
			> label { 
				display: inline-block; 
				margin-right: 30px; 
				font-family: inherit; 
 
			}			
		}
		.note {
		//	float: left;
			font-weight: normal;
			font-style: italic;
			color: #808080;
			margin-left: 25px; 
		}		
		
		// the first row labels
		> label { 
			margin: 5px 30px 5px 0; 
			display: inline-block;
			width: 150px; 
			font-weight: 700;
			font-size: 14px;
			font-family: inherit;
			cursor: default;	

			clear: left;
		} 

}

/* The main thing, an option */ 

.option { 
	padding: 5px 10px 0 0;
	 
	
	clear: left; 
	overflow: visible;
	position: relative;

	&:before, &:after {     
		content: " "; /* 1 */
	} 
	&:after { clear: both; } 

	.editor  // idea is that editor without label is trigger more to left to compensate. 
	{
		margin: 0 0 0 0px;
		&.has-label {
			//margin-left: 0;
		}

	}
	> label { 
		display: inline-block; 
		line-height: 30px; 
		font-size: 14px;
		font-weight: 700; 
		width: 100%;
		vertical-align: top; 
	
	}

	.option-list { 
			float: left; 
			display: inline-block;
			&:after { clear: both; }  
			.help {
				float: right;
				margin-top:  5px;
			}
	}
	.secondary-icon { 
		display: none; // off for now
		&.has-panels-true { display: none; } 
	}
}
		
@media (max-width: 980px)
{
	.field-group { 
		padding: 1%;
	}

}