/**********************************************************
	0.	Utility classes
***********************************************************/
.f-l { float:left; }
.f-r { float:right; }
.f-n { float:none; }
.inv { display:none; }
.cur { cursor:default; }


/**********************************************************
	1.	Editor wrapper
		1.1.	ToolBar (.tb)
		1.2.	Editor Area (.e)
		1.3.	Status Bar (.sb)
***********************************************************/
.wrapper { width:735px;height:400px; }
.wrapper-subject { width:735px;height:91px; }

.tb { width:100%;height:36px;clear:both; }
	.tb-l { width:4px;height:100%;background:transparent url("../images/editor/static.png") no-repeat 0 -173px;float:left; }
	.tb-m { width:727px;height:auto;background:#000 url("../images/editor/horizontal.png") repeat-x 0 -323px;float:left;padding:0 0 2px 0; }
		.tb-c { height:25px;margin-top:3px;padding:2px;border:1px solid #d1d1d1;background:#f4f4f4 url("../images/editor/horizontal.png") repeat-x 0 -1px;  }
	.tb-r { width:4px;height:100%;background:transparent url("../images/editor/static.png") no-repeat -14px -173px;float:left; }

.e { width:100%;height:339px;clear:both; }
.e-subject { width:100%;height:45px;clear:both; }
	.et { width:100%;height:8px;background-color:#fff;clear:both; }
		.et-l { width:9px;height:8px;background:#fff url("../images/editor/static.png") no-repeat 0 -55px;float:left; }
		.et-m { width:717px;height:8px;background:#fff url("../images/editor/horizontal.png") repeat-x 0 -55px;float:left; }
		.et-r { width:9px;height:8px;background:#fff url("../images/editor/static.png") no-repeat -9px -55px;float:left; }
	.em-subject { width:100%;height:32px;background-color:#fff;clear:both; }
	.em { width:100%;height:326px;background-color:#fff;clear:both; }
		.em-l { width:9px;height:100%;background:#000 url("../images/editor/vertical.png") repeat-y;float:left; }
		.em-m { width:717px;height:100%;background-color:#fff;float:left; }
		.em-r { width:9px;height:100%;background:#000 url("../images/editor/vertical.png") repeat-y -9px 0;float:left; }
	.eb { width:100%;height:5px;background-color:#fff;clear:both; }
		.eb-l { width:9px;height:5px;background:#fff url("../images/editor/static.png") no-repeat 0 -63px;float:left; }
		.eb-m { width:717px;height:5px;background:#fff;float:left; }
		.eb-r { width:9px;height:5px;background:#fff url("../images/editor/static.png") no-repeat -9px -63px;float:left; }
.sb { width:100%;height:10px;clear:both;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px;color:#fff; }
	.sb-l { width:9px;height:10px;background:#fff url("../images/editor/static.png") no-repeat 0 -89px;float:left; }
	.sb-m { width:717px;height:10px;float:left;background:#000 url("../images/editor/horizontal.png") repeat-x 0px -84px;}
	.sb-r { width:9px;height:10px;background:#fff url("../images/editor/static.png") no-repeat -9px -89px;float:left;}
	*html .sb-l { width:9px;height:1px;background:#fff url("../images/editor/static.png") no-repeat 0 -86px;float:left; }
	*html .sb-m { width:717px;height:1px;float:left;background:#000 url("../images/editor/horizontal.png") repeat-x 0px -81px;}
	*html .sb-r { width:9px;height:1px;background:#fff url("../images/editor/static.png") no-repeat -9px -86px;float:left;}	
/*
	.mode { float:left; }
	.mode a.btn { height:24px;margin:3px 0 0 1px;background:none;display:block;float:left;padding:0 8px 0 0;text-decoration:none;cursor:default;color:#333; }
	.mode a.btn span { display:block;background:none;line-height:24px;padding:0 0 0 8px; }
	.mode a.btn:hover { background:transparent url("../images/editor/horizontal.png") no-repeat right -148px; }
	.mode a.btn:hover span { background:transparent url("../images/editor/static.png") no-repeat -250px -54px; }
	.mode a.btn:active { outline:none; }
	.mode a.btn:active span { padding:1px 0 0 8px; }
	.mode a.btn-sel { height:24px;margin:3px 0 0 1px;background:transparent url("../images/editor/horizontal.png") no-repeat right -121px;display:block;float:left;padding:0 8px 0 0;text-decoration:none;cursor:default;color:#333; }
	.mode a.btn-sel span { display:block;background:transparent url("../images/editor/static.png") no-repeat -250px -27px;line-height:24px;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("../images/editor/static.png") no-repeat;display:block; }
	.mode img.design { background-position:-234px -16px;}
	.mode img.html { background-position:-234px 0; }

	.path { float:left;color:#333;margin-top:4px;margin-bottom:-4px;width:auto; }
	.path-l { width:auto;height:24px;float:left;padding:0 8px 0 16px;line-height:23px;background:transparent url("../images/editor/static.png") no-repeat right -123px;cursor:default; }
	.path-m { float:left;width:auto;height:24px;background:none;padding:0;max-width:500px !important;overflow:hidden; }
	.path-m a.btn { height:21px;margin-top:1px;background:none;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:#333;line-height:21px;padding:0 0 0 3px;line-height:21px; }
	.path-m a.btn:hover { background:#fff url("../images/editor/horizontal.png") no-repeat right -175px; }
	.path-m a.btn:hover span { background:transparent url("../images/editor/static.png") no-repeat -252px -81px; }
	.path-m a.btn:active { outline:none; }
	.path-m a.btn:active span { color:#000; }
	.path-m a.btn-sel { height:21px;margin-top:1px;background:#000 url("../images/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("../images/editor/static.png") no-repeat -252px -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,.path-r { float:left;width:8px;height:24px;background:transparent url("../images/editor/static.png") no-repeat -247px -123px; }

	.count { float:right;width:85px;font-size:9px;margin-top:6px;padding-left:6px;color:#333;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:25px; }
.toolbar .sep { width:10px;height:25px;background:#fff url("../images/editor/static.png") no-repeat -25px 0; }
.toolbar .end { width:4px;height:25px;background:#fff url("../images/editor/static.png") no-repeat -15px 0; }

.grip { width:10px;height:25px;background:#fff url("../images/editor/static.png") no-repeat -4px 0; }

.item { width:25px;height:25px;background:transparent url("../images/editor/buttons.png") no-repeat; }

/* Various classes controlling a split button's dropdown graphics */
.split .ca_tb_ddn { width:15px;height:25px;background:#fff url("../images/editor/buttons.png") no-repeat -1337px 0; }
.split-h .ca_tb_ddn { width:15px;height:25px;background:#fff url("../images/editor/buttons.png") no-repeat -1337px -25px; }
.split-a .ca_tb_ddn { width:15px;height:25px;background:#fff url("../images/editor/buttons.png") no-repeat -1337px -50px; }
.split-c .ca_tb_ddn { width:15px;height:25px;background:#fff url("../images/editor/buttons.png") no-repeat -1337px -75px; }
.split-c-h .ca_tb_ddn { width:15px;height:25px;background:#fff url("../images/editor/buttons.png") no-repeat -1337px -100px; }
.split-c-a .ca_tb_ddn { width:15px;height:25px;background:#fff url("../images/editor/buttons.png") no-repeat -1337px -125px; }
.split-d .ca_tb_ddn { width:15px;height:25px;background:#fff url("../images/editor/buttons.png") no-repeat -1337px -150px; }
.split-d-c .ca_tb_ddn { width:15px;height:25px;background:#fff url("../images/editor/buttons.png") no-repeat -1337px -175px; }

/* Formatting toolbar items */
.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:-25px 0; }
.italic-h { background-position:-25px -25px; }
.italic-a { background-position:-25px -50px; }
.italic-c { background-position:-25px -75px; }
.italic-c-h { background-position:-25px -100px; }
.italic-c-a { background-position:-25px -125px; }
.italic-d { background-position:-25px -150px; }
.italic-d-c { background-position:-25px -175px; }

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

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

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

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

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


/*
	These two items have transparent elements that allow the background colour to be visible.

	When a colour is selected through the colour picker menu, the background colour of the appropriate item
	is changed to reflect this new colour. As such, a generic class is added to all state classes, similar to the way
	the split button works.

	Since an item is rendered as a <table> with the specified class(es), and the item's ImageUrl property is an <img> within
	a <td> cell, it becomes neccessary to drill down through CSS inheritance to assign an item's image cell the correct CSS
	class.
*/
.font-color .ca_tb_img img { background:transparent url("../images/editor/buttons.png") no-repeat -1175px 0; }
.font-color-h .ca_tb_img img { background-position:-1175px -25px; }
.font-color-a .ca_tb_img img { background-position:-1175px -50px; }
.font-color-c .ca_tb_img img { background-position:-1175px -75px; }
.font-color-c-h .ca_tb_img img { background-position:-1175px -100px; }
.font-color-c-a .ca_tb_img img { background-position:-1175px -125px; }
.font-color-d .ca_tb_img img { background-position:-1175px -150px; }
.font-color-d-c .ca_tb_img img { background-position:-1175px -175px; }

.bg-color .ca_tb_img img { background:transparent url("../images/editor/buttons.png") no-repeat -1200px 0; }
.bg-color-h .ca_tb_img img { background-position:-1200px -25px; }
.bg-color-a .ca_tb_img img { background-position:-1200px -50px; }
.bg-color-c .ca_tb_img img { background-position:-1200px -75px; }
.bg-color-c-h .ca_tb_img img { background-position:-1200px -100px; }
.bg-color-c-a .ca_tb_img img { background-position:-1200px -125px; }
.bg-color-d .ca_tb_img img { background-position:-1200px -150px; }
.bg-color-d-c .ca_tb_img img { background-position:-1200px -175px; }

/*	Required to change the "colour indicator" part of the item  */
.font-color .ca_tb_img img { background-color:#ff5010; }
.bg-color .ca_tb_img img { background-color:#fe0; }


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

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



/*	ToolBar combo box style */
.tb-cmb { color:#333;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:8px;padding-left:0px;background:#fff url("../images/editor/horizontal.png") repeat-x 0 -427px; }
.tb-cmb-hover { color:#333;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:8px;background-color:#fff; }
.tb-txt { background:none;padding-left:8px;color:#000;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;height:12px;font-size:11px;border:none;cursor:default !important;text-align:left !important; }



/**********************************************************
	4.	Menus
		4.1		ComboBox dropdowns
			- Generic dropdown
			- Document style dropdown
			- Font size dropdown
		4.2		Undo & Redo menus
		4.3		Insert Symbol menu
		4.4		Insert Table menu

***********************************************************/
/* ComboBox dropdown menu */
.ddn { cursor:default;color:#666;background-color:transparent;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px;border:1px solid #bbb;z-index:20000 !important; }
.ddn-ftr { width:100%;height:8px;background:transparent url("../images/editor/horizontal.png") no-repeat 50% -315px; }
.ddn-con { width:188px;height:auto;background-color:#f6f6f6;text-align:left; }
	.ddn-con .font { line-height:22px;background:none; }
	.ddn-con .font img { width:16px;height:16px;float:left;margin:3px 4px 0 0;background:transparent url("../images/editor/static.png") no-repeat -186px 0; }
.ddn-item { width:182px;padding-left:8px;line-height:22px;background:none; }
.ddn-item-hover { width:182px;background:transparent url("../images/editor/static.png") no-repeat -58px -217px;padding-left:8px;line-height:22px;color:#333; }

/* Font size menu */
.style-item { width:188px;height:34px;line-height:34px;padding-left:8px; }
.style-item-hover { width:188px;height:34px;line-height:34px;color:#000;background:transparent url("../images/editor/static.png") no-repeat -58px -261px;padding-left:8px; }

/* Font size menu */
.size-con { width:64px;height:auto;background-color:#f6f6f6;text-align:left; }
.size-item { width:64px;padding-left:8px;line-height:22px;background:none; }
.size-item-hover { width:64px;background:transparent url("../images/editor/static.png") no-repeat -58px -239px;padding-left:8px;line-height:22px;color:#333; }

/* Undo & redo menus */
.undo-list { width:188px;height:182px;background-color:transparent; }
.undo-list .list { height:156px;overflow-x:hidden;overflow:auto;background:#f6f6f6 url(../images/editor/menus/menu.png) repeat-y; }
.undo-list a,.undo-list a.hover { display:block;height:22px;line-height:22px;text-decoration:none;color:#666;cursor:default;padding:0 0 0 40px;margin:0; }
.undo-list a:hover { color:#000;background:#f6f6f6 url(../images/editor/menus/menu.png) no-repeat -190px 0; }
.undo-list a:active { outline:none; }
.undo-list a.selected { display:block;height:22px;line-height:22px;text-decoration:none;color:#666;padding:0 0 0 40px;background:#f6f6f6 url(../images/editor/menus/undo.png) no-repeat; }
.undo-list a.selected:hover { background-color:#e0e0e0; }
.undo-list span { line-height:25px;display:block;padding-left:10px;background:#e3e3e3 url(../images/editor/menus/undo.png) no-repeat -190px 0;color:#666;font-weight:bold;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; }




/* Colour menu styles */
.color-menu { width:176px;color:#666666;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; }
.swatch-title { width:176px;height:23px;line-height:23px;background:transparent url(../images/editor/_color/title.gif) no-repeat scroll 0%;cursor:default; }
.swatch-title-preset { width:176px;height:24px;line-height:24px;background:transparent url(../images/editor/_color/title-preset.gif) no-repeat scroll 0%; }
.swatch-title span,.swatch-title-preset span { color:#666666;font-weight:bold;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px;padding-left:10px; }

.color-menu-item { width:176px;height:23px;padding-left:8px;line-height:23px;background:#f6f6f6 url(../images/editor/_color/color.png) repeat-y -176px 0;cursor:default; }
.color-menu-item-hover { width:176px;height:23px;padding-left:8px;line-height:23px;background:transparent url(../images/editor/_color/item-hover.gif) repeat-y scroll 0%;cursor:default; }
.color-menu-item img,.color-menu-item-hover img { vertical-align:middle; }
.color-menu-footer { width:176px;height:14px;background:transparent url(../images/editor/_color/color.png) no-repeat -880px 0;cursor:default; }
.swatch-image { border:none;padding:0;margin:0; }
.preset-swatches { width:176px;height:92px;display:block;background:#f6f6f6 url(../images/editor/_color/color-swatches.png) no-repeat; }
.standard-swatches { width:176px;height:21px;display:block;background:#f6f6f6 url(../images/editor/_color/color-swatches.png) no-repeat 0 -92px; }
.custom-swatches { width:176px;height:21px;line-height:21px;cursor:default;padding-bottom:2px;background:transparent url(../images/editor/_color/background.gif) repeat-y scroll 0%; }
.custom-swatches .swatches-container { margin-left:5px;padding-top:4px; }
.custom-swatches .swatch { width:13px;height:13px;float:left;margin-right:4px;background:transparent url(../images/editor/_color/color-swatches.png) no-repeat -13px -113px; }
.custom-swatches .swatch img { background:transparent url(../images/editor/menus/color-swatches.png) no-repeat 0 -113px; }
.color-menu img { display:block; }
.color-highlight,.color-selected { width:176px;height:206px;background:transparent url(../images/editor/_color/color-highlight.png) no-repeat 5px 28px;z-index:9000;position:absolute;left:0px;top:0px; }

.SourceCssClass { font-family:"Consolas","Lucida Console","Courier New",monospace;font-size:12px;border:none; }
.DesignCssClass { font-family:Arial,Helvetica,sans-serif;color:#333;font-size:12px; }
.HighlightCssClass { background-color:#cee2ec; }