.tpl-layout{
	position:relative;
	outline:none;
	z-index:0;
	overflow:hidden;
	border:1px solid transparent;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	background-repeat:no-repeat;
	background-position: 50% 0%;
	margin: auto;
}

/**
 * 清除浮动影响
 */
.tpl-layout>.layout-body{
	width:100%;
	overflow:hidden;
	opacity:1;
}


.tpl-layout>.layout-body>.column-holder{
    position:relative;
    float:left;
}

.tpl-layout>.layout-body>.column-holder>.column{
	min-height:50px;
	outline:1px dashed black;
	outline-offset:-1px;
    box-shadow: 0 0 1px 1px #ccc inset;
    position:relative;
    overflow:hidden;
}

.tpl-layout>.layout-body>.column-holder>.column>.resize-area{
	position:absolute;
	display:inline-block;
	width:30px;
	height:8px;
	bottom:0;
	left:50%;
	margin-left:-15px;
	cursor:s-resize;
	opacity:0.5;
	z-index:100;
	background-color:transparent;
}


.tpl-layout.work-outline>.layout-body>.column-holder>.column>.resize-area.active{
	background-color:#08d09a;
}


.tpl-layout>.layout-body>.column-holder>.split-holder{
	position:absolute;
	width:8px;
	min-height:50px;
	cursor:w-resize;
	left:100%;
	margin-left:-4px;
	top:0;
}


/**
 * 鼠标移入显示
 * @type {[type]}
 */
.tpl-layout.work-outline{
	border:1px solid #08d09a;
}

.tpl-layout.work-outline .icon{ 
	opacity:0.5;
}

.tpl-layout.work-outline:after {
    content: "";
    display: block;
    clear: both;
}

.tpl-layout.work-outline .icon:hover{
	opacity:1;
}

.tpl-layout.work-outline .move{ 
	position:absolute;
	top:0px;
	left:50%;
	background:url(../images/move.png) 0 0 no-repeat;
	width:40px;
	height:16px;
	margin-left:-20px;
	cursor:move;
	z-index:2;
}

.tpl-layout.work-outline .move-close{
	position:absolute;
	top:0px; left:0px;
	background:url(../images/move-close.png) 0 0 no-repeat;
	width:16px;
	height:16px;
	cursor:pointer;
	z-index:2;
}

.tpl-layout.work-outline .copy{
	position:absolute;
	top:0px;
	left:20px;
	background:url(../images/copy.png) 0 0 no-repeat;
	width:16px;
	height:16px;
	cursor:pointer;
	z-index:2;
}

.tpl-layout.work-outline .saveblock{
	position:absolute;
	top:0px;
	left:40px;
	background:url(../images/saveblock.png) 0 0 no-repeat;
	width:16px;
	height:16px;
	cursor:pointer;
	z-index:2;
}

.tpl-layout.work-outline .split{
	position:absolute;
	background-color:transparent;
	width:8px;
	height:30px;
	z-index: 10000;
	cursor:w-resize;
	opacity:1;
	
}

.tpl-layout.work-outline .split-holder.active .split{
	background-color:#08d09a;
}


.tpl-layout.work-outline .line{
	position:absolute;
	border-right:1px dashed transparent;
	height:100%;
	width:1px;
	z-index: 9999;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	opacity:1;
	
}

.tpl-layout.work-outline .split-holder.active .line{
	border-right-color: #08d09a;
}


/*
layout-12 布局
 */
.tpl-layout-12>.layout-body>.column-holder{
	width:100%;
	
}

/*
layout-6-6 布局
 */
.tpl-layout-6-6>.layout-body>.column-holder{
	width:50%;
	
}

/*
layout-8-4 布局
 */

.tpl-layout-8-4>.layout-body>.left{
	width:66.5%;
}

.tpl-layout-8-4>.layout-body>.right{
	width:33.5%;
}

/*
layout-4-4-4 布局
 */

.tpl-layout-4-4-4>.layout-body>.column-holder{
	width:33.33%;
	
}

/*
layout-2-6-4 布局
 */

.tpl-layout-2-6-4>.layout-body>.left{
	width:16.66%;
}

.tpl-layout-2-6-4>.layout-body>.center{
	width:50%;
}

.tpl-layout-2-6-4>.layout-body>.right{
	width:33.33%;
}

.hide-area{display:none;}
.tpl-sidebar-layout .divided-icon-bg{
	background-color:#474747;
	display:inline-block;
	width:24px;
	height:24px;
	cursor:pointer;
}

.tpl-sidebar-layout .divided-icon-bg.active{
	background-color:#2c2c2c;
}

.tpl-sidebar-layout .divided-icon{
	background:url(../images/divided.png) 0 0 no-repeat;
	width:24px;
	height: 24px;
	display: inline-block;
}

.tpl-layout .dragged-show{
	position:absolute;
	z-index:10000;
	width:120px;
	height:20px;
	display:none;
	line-height:20px;
	text-align:center;
	background:#222;
	color:#fff;
	box-shadow:0 0 1px 1px #ccc;
	margin-top:-10px;
	margin-left:-60px;
	top: 50%;
	left: 50%;
}

.tpl-layout .dragged-line{
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	position:absolute;
	z-index: 9999;
	display:none;
}

.tpl-layout .dragged-line.line-x{
	border-top:1px solid #222;
	width:100%;
	height:1px;
	margin-top:-0.5px;
	left: 0;
	top: 50%;
}


.tpl-layout .dragged-line.line-y{
	border-right: 1px solid #222;
	height: 100%;
	width: 1px;
	margin-left: -0.5px;
	left: 50%;
	top: 0;
}

.tpl-layout .dragged-left{
	position:absolute;
	z-index:9999;
	display:none;
	width:9px;
	height:16px;
	background:url(../images/arrow.png) 0 -16px no-repeat;
	left:0;
	top: 50%;
	margin-top:-9px;
}
.tpl-layout .dragged-left.turn-90{
	top: 0;
	left: 50%;
	margin-top: -4px;
	margin-left: -3.5px;
	transform: rotateZ(90deg);
}

.tpl-layout .dragged-right{
	position:absolute;
	z-index:9999;
	display:none;
	width:9px;
	height:16px;
	background:url(../images/arrow.png) 0 0 no-repeat;
	right:0;
	bottom: 50%;
	margin-bottom:-9px;
}

.tpl-layout .dragged-right.turn-90{
	bottom: 0;
	right: 50%;
	margin-bottom: -4px;
	margin-right: -3px;
	transform: rotateZ(90deg);
}

.tpl-layout-width-list-holder{
	max-height:215px;
}