@import "preset";
@import "AXUtils";

// AXEditor ///////////////////////////////////////////////////
.AXEditor{
	.dx-axeditor-preset();
	position:relative;padding:0px;margin:0px;
	background:@bgcolor;overflow:hidden;
	border:@border;
	font-family:@font-family;
	.editorHead{
		position:relative;height:30px;z-index:3;
		.me___headFileStatus{
			height:24px;background:url('images/dx-editor-file-status.gif') no-repeat;
			border-bottom:@border;
			text-indent:25px;font-size:11px;line-height:24px;
		}
		.me___tabContainer{
			height:33px;background:url('images/dx-editor-tmBg.gif') repeat-x;
			.me___item{
				float:left;min-width:84px;_width:90px;_overflow:hidden;
				position:relative;height:33px;
				border-right:@border;
				text-align:center;
				a{
					&.me____btn{
						display:block;height:21px;line-height:21px;padding:0px 25px;_padding:0px 5px;
						font-size:12px;color:@color;text-align:center;
						&:hover{
							color:@color-a;
						}
					}
					&.me____tab{
						display:block;height:12px;text-indent:-1000px;overflow:hidden;
						background:url('images/dx-editor-arrow.gif') no-repeat center 1px;font-size:1px;line-height:1px;
						text-decoration:none;
						&:hover{
							background:url('images/dx-editor-arrow-on.gif') no-repeat center 1px;
						}
					}

				}
				.me____attchSwf{
					position:absolute;left:0px;top:0px;border:0px none;height:1px;width:1px;font-size:1px;line-height:1px;
				}

			}
			.me___itemOn{
				background:url('images/dx-editor-tm-bg-on.gif') repeat-x;
			}
		}

		//editor default panel
		.me___headPanel{
			position:relative;padding:4px 0px 5px 0px;height:22px;background:url('images/dx-editor-pa-bg.gif') repeat-x;
			z-index:100;
			a{
				display:block;float:left;height:22px;line-height:22px;text-align:center;
				color:@color-b;text-decoration:none;
				.util-text-ellipsis;
				&:hover{
					color:@color-c;
				}
				&.me___btnL{
					width:23px;background:url('images/dx-editor-btns.gif') no-repeat -170px 0px;
					&:hover{
						background-position:-170px -30px;
					}
				}
				&.me___btnM{
					width:22px;background:url('images/dx-editor-btns.gif') no-repeat -193px 0px;
					&:hover{
						background-position:-193px -30px;
					}
				}
				&.me___btnR{
					width:23px;background:url('images/dx-editor-btns.gif') no-repeat -215px 0px;
					&:hover{
						background-position:-215px -30px;
					}
				}
				&.me___btnLa{
					width:23px;background:url('images/dx-editor-btns.gif') no-repeat -270px 0px;
					&:hover{
						background-position:-270px -30px;
					}
				}
				&.me___btnMa{
					width:22px;background:url('images/dx-editor-btns.gif') no-repeat -293px 0px;
					&:hover{
						background-position:-293px -30px;
					}
				}
				&.me___btnRa{
					width:23px;background:url('images/dx-editor-btns.gif') no-repeat -315px 0px;
					&:hover{
						background-position:-315px -30px;
					}
				}
				&.me___btnS1{
					display:inline-block;padding:0px 5px;height:20px;line-height:20px;border:@border-a;
					.util-border-radius(@radius);
					margin:0px 0px 0px 5px;font-size:11px;
					&:hover{
						background-position:0px -20px;border:@border-b;
						.util-border-radius(@radius);
					}
				}
				&.me___btnSa{
					width:23px;background:url('images/dx-editor-btns.gif') no-repeat -340px 0px;
					&:hover{
						background-position:-340px -30px;
					}
				}
			}
			div{
				display:block;float:left;height:22px;text-align:center;
				&.me___vline{
					width:1px;margin:0px 1px;
				}
				&.me___selectW{
					position:relative;width:118px;margin:0px 3px;
					a{
						&.me___value{
							position:absolute;left:0px;top:0px;padding-right:15px;width:103px;
							background:url('images/dx-editor-btns.gif') no-repeat 0px 0px;font-size:11px;
							color:@color;
							&:hover{
								background-position:0px -30px;
								color:@color-d;
							}
						}
					}
				}
				&.me___selectS{
					position:relative;width:48px;margin:0px 0px 0px 0px;
					a{
						&.me___value{
							position:absolute;left:0px;top:0px;padding-right:15px;width:33px;
							background:url('images/dx-editor-btns.gif') no-repeat -120px 0px;font-size:11px;
							color:@color;
							&:hover{
								background-position:-120px -30px;
								color:@color-d;
							}
						}
					}
				}
				&.me___selectTL{
					position:relative;width:40px;margin:0px 0px;
					a{
						&.me___value{
							position:absolute;left:0px;top:0px;width:25px;text-indent:-1000px;overflow:hidden;
							background:url('images/dx-editor-btns.gif') no-repeat -370px 0px;
							&:hover{
								background-position:-370px -30px;
							}
						}
						&.me___arrow{
							position:absolute;right:0px;top:0px;width:15px;text-indent:-1000px;overflow:hidden;
							background:url('images/dx-editor-btns.gif') no-repeat -395px 0px;
							&:hover{
								background-position:-395px -30px;
							}
						}
					}
					.me___fontColor_disp{
						position:absolute;left:3px;top:0px;width:20px;
					}
				}
				&.me___selectTR{
					position:relative;width:39px;margin:0px 0px;
					a{
						&.me___value{
							position:absolute;left:0px;top:0px;width:25px;text-indent:-1000px;overflow:hidden;
							background:url('images/dx-editor-btns.gif') no-repeat -410px 0px;
							&:hover{
								background-position:-410px -30px;
							}
						}
						&.me___arrow{
							position:absolute;right:0px;top:0px;width:15px;text-indent:-1000px;overflow:hidden;
							background:url('images/dx-editor-btns.gif') no-repeat -434px 0px;
							&:hover{
								background-position:-434px -30px;
							}
						}
					}
					.me___fontBgColor_disp{
						position:absolute;left:3px;top:0px;width:20px;
					}
				}
			}
			span{
				&.me_icon{
					display:block;width:22px;height:22px;text-indent:-1000px;overflow:hidden;
				}
				&.me___span{
					display:block;float:left;width:5px;
					background:url('images/dx-editor-btns.gif') no-repeat -610px 0px;margin:0px 0px 0px 5px;
				}
				&.me___bold{
					background:url('images/dx-editor-icons.gif') no-repeat 0px 0px;width:23px;
				}
				&.me___italic{
					background:url('images/dx-editor-icons.gif') no-repeat -21px 0px;
				}
				&.me___underLine{
					background:url('images/dx-editor-icons.gif') no-repeat -42px 0px;
				}
				&.me___strike{
					background:url('images/dx-editor-icons.gif') no-repeat -63px 0px;width:23px;
				}
				&.me___alignLeft{
					background:url('images/dx-editor-icons.gif') no-repeat -84px 0px;width:23px;
				}
				&.me___alignCenter{
					background:url('images/dx-editor-icons.gif') no-repeat -105px 0px;
				}
				&.me___alignRight{
					background:url('images/dx-editor-icons.gif') no-repeat -126px 0px;
				}
				&.me___alignJustify{
					background:url('images/dx-editor-icons.gif') no-repeat -147px 0px;width:23px;
				}
				&.me___li{
					background:url('images/dx-editor-icons.gif') no-repeat 0px -20px;width:23px;
				}
				&.me___ol{
					background:url('images/dx-editor-icons.gif') no-repeat -21px -20px;
				}
				&.me___outdent{
					background:url('images/dx-editor-icons.gif') no-repeat -42px -20px;
				}
				&.me___indent{
					background:url('images/dx-editor-icons.gif') no-repeat -63px -20px;
				}
				&.me___lineHeight{
					background:url('images/dx-editor-icons.gif') no-repeat -84px -20px;width:23px;
				}
				&.me___url{
					background:url('images/dx-editor-icons.gif') no-repeat -105px -20px;width:23px;
				}
				&.me___imoticon{
					background:url('images/dx-editor-icons.gif') no-repeat -126px -20px;
				}
				&.me___quotation{
					background:url('images/dx-editor-icons.gif') no-repeat -147px -20px;
				}
				&.me___pageBreak{
					background:url('images/dx-editor-icons.gif') no-repeat -168px -20px;width:23px;
				}
				&.me___fontColor{
					background:url('images/dx-editor-icons.gif') no-repeat 0px -40px;
				}
				&.me___fontBgColor{
					background:url('images/dx-editor-icons.gif') no-repeat -21px -40px;
				}
			}
			.me___selecterBox{
				position:absolute;top:0px;left:0px;background:@bgcolor;border:@border;
				.util-border-radius(@radius-a);
				.util-box-shadow(0px,0px,3px,0.5);
				z-index:1000;
				.me___selecterTitle{
					float:none;text-align:left;padding:5px 0px 0px 5px;height:20px;line-height:20px;
				}
				.me___selecterTitleTab{
					float:none;position:relative;height:28px;border-bottom:@border;background:@color-e;
				}
				.me___selecterTitleTabTray{
					position:absolute;left:0px;top:7px;padding:0px 7px;
					A{
						float:none;display:inline-block;height:20px;border:1px solid #bebebe;
						.util-border-radius(3px,3px, 0px, 0px);

						.util-text-ellipsis();
						margin:0px 2px 0px 0px;padding:0px 10px;
						text-align:center;font-size:11px;
						text-shadow:1px 1px 1px #ccc;color:#222 ! important;text-shadow:1px 1px 1px #ccc;cursor:pointer;
						&.on{
							border-bottom:@border-c;background:@bgcolor;font-weight:bold;
						}
					}
				}
				.me___selecterTray{
					float:none;overflow:auto;position:relative;padding:5px 1px;
				}
				.me___selecterBot{
					float:none;padding:0px 5px;font-size:10px;line-height:15px;
					a{color:@color-f;}
				}
				.me___selecterTitleBar{}
				.me___selecterArrow{
					position:absolute;top:0px;left:47px;width:7px;height:4px;
					background:url('images/dx-editor-arrow.gif') no-repeat;font-size:1px;line-height:1px;z-index:10;
				}
				.colorItem{
					display:block;float:left;width:16px;height:16px;border:@border-d;
					text-indent:-1000px;overflow:hidden;margin-top:3px;margin-left:3px;
				}
				.ffItem{
					display:block;float:none;font-size:12px;height:20px;line-height:20px;border:1px solid #fff;
					border-bottom:1px dashed #ccc;margin:3px 3px 0px 3px;text-align:left;
					.util-text-ellipsis();
					&:hover{
						border-bottom:@border-e;
					}
				}
				.me___inputUrl{
					position:absolute;top:30px;left:7px;
					input{
						border:@border-a;padding:2px;font-size:12px;line-height:15px;
					}
				}
				.me___inputBtn{
					position:absolute;top:55px;left:7px;
					input{
						vertical-align:middle;
					}
					.me___inputBtnOK{
						position:absolute;top:0px;left:245px;
					}
				}
				.icoItem{
					display:block;margin:3px 3px 0px 3px;
					img{border:0px;}
				}
			}
			// attch Panel
			.me___headDivPanel_attch{
				position:absolute;float:none;left:0px;top:0px;height:140px;width:100%;
				.me___headDivPanel_attch_btns{
					float:none;background:@bgcolor;height:22px;border-bottom:@border-a;padding:4px 0px;text-align:left;
					.headTitle{
						margin:0px 10px;line-height:22px;
					}
					.me____attchSwf{
						position:absolute;left:5px;top:4px;width:23px;height:22px;
					}
				}
				.me___headDivPanel_attch_CT{
					float:none;text-align:left;background:@bgcolor-a;height:118px;border-bottom:@border-f;
					overflow-x:scroll;overflow-y:hidden;white-space:nowrap;
					.attchItem{
						display:inline-block;float:none;position:relative;width:86px;height:86px;
						border:@border-g;
						.util-border-radius(@radius-b);
						margin-top:5px;margin-left:8px;background:@bgcolor;cursor:pointer;
						.attchItemName{
							position:absolute;left:5px;top:5px;width:76px;text-align:center;font-size:11px;
							line-height:13px;
							.util-text-ellipsis();
						}
						.attchItemPreviewLoad{
							position:absolute;left:13px;top:23px;width:58px;height:58px;text-align:center;
							background:url('images/dx-editor-loading.gif') no-repeat center center;
						}
						.attchItemPreview{
							position:absolute;left:13px;top:23px;width:58px;height:58px;
							text-align:center;background:url('images/dx-editor-file-status.gif') no-repeat center center;
						}
					}
					.attchItemEnd{
						display:inline-block;float:none;width:8px;height:58px;font-size:1px;line-height:1px;clear:both;
					}
					.attchItemON{
						border:@border-h;color:@color-c;background:#eee;
					}
					.componentItem{
						display:inline-block;float:none;position:relative;width:86px;height:86px;
						border:@border-g;
						.util-border-radius(@radius-b);
						margin-top:5px;margin-left:8px;background:@bgcolor;cursor:pointer;
						.componentItemName{
							position:absolute;left:5px;top:5px;width:76px;text-align:center;font-size:11px;
							line-height:13px;
							.util-text-ellipsis();
						}
						.componentItemPreview{
							position:absolute;left:13px;top:23px;width:58px;height:58px;text-align:center;
						}
					}
				}
			}
		}

	}
	.editorHeadExt{
		height:209px;
	}
	// editor body
	.editorBody{
		position:relative;z-index:1;
		.me___AXMask{
			background:@bgcolor;-moz-opacity: 0.3;opacity:.30;filter: alpha(opacity=30);
			position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:1000;
		}
		.me__htmlArea{
			border:0px none;margin:0px;padding:0px 0px;background:@bgcolor-b;color:@color-g;font-size:12px;font-family:Consolas;line-height:18px;
		}
	}
	.editorFoot{
		position:relative;height:32px;background:url('images/dx-editor-bt-bg.gif') repeat-x;z-index:2;
		.me___handle{
			display:block;height:13px;background:url('images/dx-editor-resizer.gif') no-repeat center center;
			text-indent:-1000px;overflow:hidden; font-size:1px;line-height:1px;cursor:row-resize;
		}
		.me___container{
			position:absolute;right:5px;bottom:0px;
			a{
				&.me____tab{
					display:block;float:left;height:20px;line-height:20px;padding:0px 15px;
					font-size:12px;color:@color;text-align:center;
					text-decoration:none;
				}
				&.me____tabOn{
					border-left:@border-a;border-right:@border-a;
					background:url('images/dx-editor-bt.gif') repeat-x;
				}
			}
		}
	}
}