.html-editor
{
	.btn-toolbar
	{
		padding:2px;
		border-bottom:1px solid black;
		button
		{
			background-color:transparent;
			border:1px solid transparent;
			margin:0px;
			padding:0px;
			&:hover
			{
				border:1px solid black;
				background-color:#ccc;
			}	
			
			i
			{
				display:block;
				width:22px;
				height:22px;
				background:url(images/jquery-te.png) no-repeat
			}
			&.font-size i {
				background-position:0 0
			}
			&.color i {
				background-position:-22px 0
			}
			&.bold i {
				background-position:-44px 0
			}
			&.italic i {
				background-position:-66px 0
			}
			&.underline	 i {
				background-position:-88px 0
			}
			&.ordered-list i {
				background-position:-110px 0
			}
			&.unordered-list i {
				background-position:-132px 0
			}
			&.subscript i {
				background-position:-154px 0
			}
			&.superscript i {
				background-position:-176px 0
			}
			&.outdent i {
				background-position:-198px 0
			}
			&.indent i {
				background-position:-220px 0
			}
			&.align-left i {
				background-position:-242px 0
			}
			&.align-center i {
				background-position:-264px 0
			}
			&.align-right i {
				background-position:-286px 0
			}
			&.strikethrough i {
				background-position:-308px 0
			}
			&.link i {
				background-position:-330px 0
			}
			&.unlink i {
				background-position:-352px 0
			}
			&.clean i {
				background-position:-374px 0
			}
			&.horizontal-rule i {
				background-position:-396px 0
			}
			&.source i{
				background-position:-418px 0
			}
			&.picture
			{
				padding:4px;
				i {
			  	background-image: url("@{iconSpritePath}"); /*using bootstrap's glyphicon */ 
				background-position: -456px -48px;
				width:14px;
				height:14px;
				}
			}
			
		}

	}
	.content
	{
		min-height:4em;
		padding:10px;
	}
	border:1px solid black;
	margin:5px;
}

.html-editor-dialog-box
{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: @zindexModal;
  width: 300px;
  margin: 0 0 0 -150px;
  background-color: @white;
  border: 1px solid #999;	
  outline: none;

  &.fade {
    .transition(e('opacity .3s linear, top .3s ease-out'));
    top: -100px;
  }
  &.fade.in { top: 50px; }
  .modal-header
  {
  	padding:4px;
  	h3
  	{
  		text-align:center;
  		font-size:120%;
  	}
  }
}	
