/**********************************************************
	0.	Utility classes
***********************************************************/
.f-l { float:left; }
.f-r { float:right; }
.f-n { float:none; }


/**********************************************************
	1.	Editor wrapper
		1.1.	ToolBar (.tb)
		1.2.	Editor Area (.e)
		1.3.	Status Bar (.sb)
***********************************************************/
.wrapper { width:600px;height:690px; }

.tb { width:100%;height:30px;clear:both; }
	.tb-l { width:9px;height:30px;background: transparent url(../img/editor/static.png) no-repeat -345px -25px;float:left; }
	.tb-m { width:582px;height:25px;background: #000 url(../img/editor/horizontal.png) repeat-x;float:left;padding:3px 0 2px 0; }
		.tb-c { width:230px;height:23px; }
	.tb-r { width:9px;height:30px;background:transparent url(../img/editor/static.png) no-repeat -354px -25px;float:left; }

.e { width:600px;height:683px;clear:both; }
	.et { width:600px;height:8px;background-color:#fff;clear:both; }
		.et-l { width:9px;height:8px;background:#fff url(../img/editor/static.png) no-repeat -345px -55px;float:left; }
		.et-m { width:582px;height:8px;background:#fff url(../img/editor/horizontal.png) repeat-x 0 -55px;float:left; }
		.et-r { width:9px;height:8px;background:#fff url(../img/editor/static.png) no-repeat -354px -55px;float:left; }
	.em { width:600px;height:670px;background-color:#f0f;clear: none; }
		.em-l { width:9px;height:100%;background:#000 url(../img/editor/vertical.png) repeat-y;float:left; }
		.em-m { width:582px;height:100%;background-color: #ff6699;float:left; }
		.em-r { width:9px;height:100%;background:#000 url(../img/editor/vertical.png) repeat-y -9px 0;float:left; }
	.eb { width:600px;height:5px;background-color:#000;clear:both; }
		.eb-l { width:9px;height:5px;background:#fff url(../img/editor/static.png) no-repeat -345px -63px;float:left; }
		.eb-m { width:582px;height:5px;background:#fff;float:left; }
		.eb-r { width:9px;height:5px;background:#fff url(../img/editor/static.png) no-repeat -354px -63px;float:left; }

.sb { width:600px;height:31px;clear:both;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px;color:#fff; }
	.sb-l { width:9px;height:31px;background:#fff url(../img/editor/static.png) no-repeat -345px -68px;float:left; }
	.sb-m { width:582px;height:31px;float:left;background:#000 url(../img/editor/horizontal.png) repeat-x 0px -63px; }
	.sb-r { width:9px;height:31px;background:#fff url(../img/editor/static.png) no-repeat -354px -68px;float:left; }

	.mode { float:left; }
	.mode a.btn { height:27px;margin-left:1px;background:transparent url(../img/editor/horizontal.png) no-repeat right -94px;display:block;float:left;padding:0 8px 0 0;text-decoration:none;cursor:default;color:#fff; }
	.mode a.btn span { display:block;background:transparent url(../img/editor/static.png) no-repeat -595px 0;line-height:27px;padding:0 0 0 8px; }
	.mode a.btn:hover { background:transparent url(../img/editor/horizontal.png) no-repeat right -148px; }
	.mode a.btn:hover span { background:transparent url(../img/editor/static.png) no-repeat -595px -54px; }
	.mode a.btn:active { outline:none; }
	.mode a.btn:active span { padding:1px 0 0 8px; }
	.mode a.btn-sel { height:27px;margin-left:1px;background:transparent url(../img/editor/horizontal.png) no-repeat right -121px;display:block;float:left;padding:0 8px 0 0;text-decoration:none;cursor:default;color:#fff; }
	.mode a.btn-sel span { display:block;background:transparent url(../img/editor/static.png) no-repeat -595px -27px;line-height:27px;padding:0 0 0 8px; }
	.mode a.btn-sel:active { outline:none; }
	.mode img.icon { width:16px;height:16px;float:left;border:0;margin:5px 4px 0 0;background:transparent url(../img/editor/static.png) no-repeat;display:block; }
	.mode img.design { background-position:-579px -16px;}
	.mode img.html { background-position:-579px 0; }

	.path { float:left;color:#fff;margin-top:4px;margin-bottom:-4px;width:450px; }
	.path-l { width:auto;height:24px;float:left;padding:0 8px 0 16px;line-height:23px;background:transparent url(../img/editor/static.png) no-repeat right -147px;cursor:default; }
	.path-m { float:left;width:auto;height:24px;background:#000 url(../img/editor/horizontal.png) repeat-x 0px -217px;padding:0;max-width:450px !important;overflow:hidden; }
	.path-m a.btn { height:21px;margin-top:1px;background-color:transparent;display:block;float:left;padding:0 3px 0 0;text-decoration:none;cursor:default; }
	.path-m a.btn span { display:block;background-color:transparent;color:#eee;line-height:21px;padding:0 0 0 3px;line-height:21px; }
	.path-m a.btn:hover { background:#000 url(../img/editor/horizontal.png) no-repeat right -175px; }
	.path-m a.btn:hover span { background:transparent url(../img/editor/static.png) no-repeat -597px -81px; }
	.path-m a.btn:active { outline:none; }
	.path-m a.btn:active span { color:#fff;padding:1px 0 0 3px; }
	.path-m a.btn-sel { height:21px;margin-top:1px;background:#000 url(../img/editor/horizontal.png) no-repeat right -196px;display:block;float:left;padding:0 3px 0 0;text-decoration:none;cursor:default; }
	.path-m a.btn-sel span { display:block;background:transparent url(../img/editor/static.png) no-repeat -597px -102px;color:#fff;line-height:21px;padding:0 0 0 3px;line-height:21px; }
	.path-m a.btn-sel:active { outline:none; }
	.path-m .sep { float:left;width:8px;height:24px;background:transparent url(../img/editor/static.png) no-repeat -592px -123px; }
	.path-r { width:5px;height:24px;float:left;background:transparent url(../img/editor/static.png) no-repeat -595px -171px; }

	.count { float:left;width:85px;font-size:9px;margin-top:6px;padding-left:6px;color:#fff;cursor:default; }
	.count .words,.count .chars { height:10px;line-height:10px; }
	.count div.lbl { float:left;width:32px;padding-right:6px;text-align:right; }
	.count div.val { float:left;width:45px;overflow:hidden; }


/**********************************************************
	2.	ToolBar and ToolBar items

	Item states use the following naming conventions:
		* default: (item)
		* hover: (item)-h
		* active: (item)-a
		* checked: (item)-c
		* checked-hover: (item)-c-h
		* checked-active: (item)-c-a
		* disabled: (item)-d
		* disabled-checked: (item)-c-d

***********************************************************/
.toolbar { width:400px;height:23px;background:#000 url(../img/editor/horizontal.png) repeat-x -30px 0; }
.toolbar .sep { width:10px;height:25px;background:#000 url(../img/editor/static.png) no-repeat -370px 0; }
.toolbar .end { width:4px;height:25px;background:#6e6e6e url(../img/editor/static.png) no-repeat -360px 0; }

.grip { width:15px;height:25px;background:#6e6e6e url(../img/editor/static.png) no-repeat -345px 0; }


.item { width:23px;height:25px;background:transparent url(../img/editor/static.png) no-repeat; }

.bold { background-position:0 0; }
.bold-h { background-position:0 -25px; }
.bold-a { background-position:0 -50px; }
.bold-c { background-position:0 -75px; }
.bold-c-h { background-position:0 -100px; }
.bold-c-a { background-position:0 -125px; }
.bold-d { background-position:0 -150px; }
.bold-d-c { background-position:0 -175px; }

.italic { background-position:-23px 0; }
.italic-h { background-position:-23px -25px; }
.italic-a { background-position:-23px -50px; }
.italic-c { background-position:-23px -75px; }
.italic-c-h { background-position:-23px -100px; }
.italic-c-a { background-position:-23px -125px; }
.italic-d { background-position:-23px -150px; }
.italic-d-c { background-position:-23px -175px; }

.underline { background-position:-46px 0; }
.underline-h { background-position:-46px -25px; }
.underline-a { background-position:-46px -50px; }
.underline-c { background-position:-46px -75px; }
.underline-c-h { background-position:-46px -100px; }
.underline-c-a { background-position:-46px -125px; }
.underline-d { background-position:-46px -150px; }
.underline-d-c { background-position:-46px -175px; }

.strikethrough { background-position:-69px 0; }
.strikethrough-h { background-position:-69px -25px; }
.strikethrough-a { background-position:-69px -50px; }
.strikethrough-c { background-position:-69px -75px; }
.strikethrough-c-h { background-position:-69px -100px; }
.strikethrough-c-a { background-position:-69px -125px; }
.strikethrough-d { background-position:-69px -150px; }
.strikethrough-d-c { background-position:-69px -175px; }

.increase-indent { background-position:-92px 0; }
.increase-indent-h { background-position:-92px -25px; }
.increase-indent-a { background-position:-92px -50px; }
.increase-indent-c { background-position:-92px -75px; }
.increase-indent-c-h { background-position:-92px -100px; }
.increase-indent-c-a { background-position:-92px -125px; }
.increase-indent-d { background-position:-92px -150px; }
.increase-indent-d-c { background-position:-92px -175px; }

.decrease-indent { background-position:-115px 0; }
.decrease-indent-h { background-position:-115px -25px; }
.decrease-indent-a { background-position:-115px -50px; }
.decrease-indent-c { background-position:-115px -75px; }
.decrease-indent-c-h { background-position:-115px -100px; }
.decrease-indent-c-a { background-position:-115px -125px; }
.decrease-indent-d { background-position:-115px -150px; }
.decrease-indent-d-c { background-position:-115px -175px; }

.bullets { background-position:-138px 0; }
.bullets-h { background-position:-138px -25px; }
.bullets-a { background-position:-138px -50px; }
.bullets-c { background-position:-138px -75px; }
.bullets-c-h { background-position:-138px -100px; }
.bullets-c-a { background-position:-138px -125px; }
.bullets-d { background-position:-138px -150px; }
.bullets-d-c { background-position:-138px -175px; }

.numbering { background-position:-161px 0; }
.numbering-h { background-position:-161px -25px; }
.numbering-a { background-position:-161px -50px; }
.numbering-c { background-position:-161px -75px; }
.numbering-c-h { background-position:-161px -100px; }
.numbering-c-a { background-position:-161px -125px; }
.numbering-d { background-position:-161px -150px; }
.numbering-d-c { background-position:-161px -175px; }

.cut { background-position:-184px 0; }
.cut-h { background-position:-184px -25px; }
.cut-a { background-position:-184px -50px; }
.cut-c { background-position:-184px -75px; }
.cut-c-h { background-position:-184px -100px; }
.cut-c-a { background-position:-184px -125px; }
.cut-d { background-position:-184px -150px; }
.cut-d-c { background-position:-184px -175px; }

.copy { background-position:-207px 0; }
.copy-h { background-position:-207px -25px; }
.copy-a { background-position:-207px -50px; }
.copy-c { background-position:-207px -75px; }
.copy-c-h { background-position:-207px -100px; }
.copy-c-a { background-position:-207px -125px; }
.copy-d { background-position:-207px -150px; }
.copy-d-c { background-position:-207px -175px; }

.paste { background-position:-230px 0; }
.paste-h { background-position:-230px -25px; }
.paste-a { background-position:-230px -50px; }
.paste-c { background-position:-230px -75px; }
.paste-c-h { background-position:-230px -100px; }
.paste-c-a { background-position:-230px -125px; }
.paste-d { background-position:-230px -150px; }
.paste-d-c { background-position:-230px -175px; }

.word-paste { background-position:-253px 0; }
.word-paste-h { background-position:-253px -25px; }
.word-paste-a { background-position:-253px -50px; }
.word-paste-c { background-position:-253px -75px; }
.word-paste-c-h { background-position:-253px -100px; }
.word-paste-c-a { background-position:-253px -125px; }
.word-paste-d { background-position:-253px -150px; }
.word-paste-d-c { background-position:-253px -175px; }