/**
 * @file
 * Style for CKEditor templates.
 *
 */
#cketemplate {
  
}
/*********** GRID CSS **************/
/***********************************/

/*  SECTIONS  */
#cketemplate .section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
#cketemplate .col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
#cketemplate .col:first-child { margin-left: 0;}

/*  GROUPING  */
#cketemplate .group:before,
#cketemplate .group:after { content:""; display:table; }
#cketemplate .group:after { clear:both;}
#cketemplate .group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF ONE  */
.cketemplate-a .span_1_of_1,
.cketemplate-b .span_1_of_1,
.cketemplate-h .group-1 .span_1_of_1,
.cketemplate-h .group-3 .span_1_of_1,
.cketemplate-i .group-1 .span_1_of_1,
.cketemplate-i .group-2 .span_1_of_1,
.cketemplate-i .group-4 .span_1_of_1 {
	width: 100%;
}
#cketemplate .image-wrapper img {
	width: 100%;
  max-height: 450px;
}

/*  GRID OF TWO  (20% x 80%)*/
.cketemplate-c .span_1_of_2 {
	width: 19.2%;
}
.cketemplate-c .span_2_of_2 {
	width: 79.2%;
}

/*  GRID OF TWO  (80% x 20%)*/
.cketemplate-d .span_1_of_2 {
	width: 79.2%;
}
.cketemplate-d .span_2_of_2 {
	width: 19.2%;
}

/*  GRID OF TWO  (50% x 50%)*/
.cketemplate-e .span_1_of_2,
.cketemplate-f .span_1_of_2,
.cketemplate-g .span_1_of_2,
.cketemplate-i .group-5 .span_1_of_2 {
	width: 49.2%;
}
.cketemplate-e .span_2_of_2,
.cketemplate-f .span_2_of_2,
.cketemplate-g .span_2_of_2,
.cketemplate-i .group-5  .span_2_of_2 {
	width: 49.2%;
}

/*  GRID OF TWO  (20% x 80%)*/
.cketemplate-h .group-2 .span_1_of_2 {
	width: 250px;
  height: 350px;
}
.cketemplate-h  .group-2 .span_2_of_2 {
	min-width: 70%;
}

/*  GRID OF TWO  (80% x 20%)*/
.cketemplate-h .group-4 .span_1_of_2 {
	width: 79.2%;
}
.cketemplate-h  .group-4 .span_2_of_2 {
	width: 19.2%;
}
/*  GRID OF TWO  (80% x 20%)*/
.cketemplate-i .group-3 .span_1_of_2 {
	width: 79.2%;
}
.cketemplate-i  .group-3 .span_2_of_2 {
	width: 19.2%;
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0% !important;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100% !important; }
}

/*********** Editor CSS **************/
/**************************************/
body.cke_editable #cketemplate .col {
  background-color: #F6F6F6;
  border: 2px dashed #CCCCCC;
  box-sizing: border-box;
}

/********** Miscellaneous CSS ********/
/*************************************/
#cketemplate h2 {
  margin-top: 0;
}