/******************************************************************************
** STRUCTURE OF DYNAMICALLY CREATED ELEMENTS
*******************************************************************************
**
** <div id="ORIGINAL_IDParagraphContainer" class="paragraphContainer">
**     <ul id="ORIGINAL_IDParagraphToolbar" class="paragraphToolbar">
**         <li id="BUTTON_ID" class="paragraphEditButton">
**             <a></a>
**         </li>
**         <li class="paragraphEditSelect">
**             <select>
**             </select>
**         </li>
**     </ul>
**     <iframe id="ORIGINAL_IDParagraphIframe" class="paragraphIframe">
**     </iframe>
**     <textarea id="ORIGINAL_IDParagraphTextarea" class="paragraphEditor">
**     </textarea>
** </div>
*/

/* TOOLBAR BUTTONS */

.paragraphToolbar a
{
	display: block;
	width: 24px;
	height: 24px;
	overflow: hidden;
	background-repeat: no-repeat;
	text-indent: -1000em;
	text-decoration: none;
}

.paragraphToolbar a.paragraphButtonFontcolor
{
	display: block;
	width: 32px;
	height: 24px;
	overflow: hidden;
	background-repeat: no-repeat;
	text-indent: -1000em;
	text-decoration: none;
}

.paragraphToolbar a:hover
{
	background-position: 0 -24px;
}

.paragraphToolbar a:active
{
	margin-top: 2px;
	margin-left: 2px;
	background-position: 0 -48px;
}

.paragraphToolbar li.on a, .paragraphToolbar li.on a:hover
{
	background-position: 0 -48px;
}

.paragraphToolbar li.paragraphEditButton
{
	background-image: url(../images/paragrapheditor_button_shadow.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
}

.paragraphToolbar li.paragraphEditSelect
{
	background-image: url(../images/paragrapheditor_button_shadow.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	width: 100px;
}

.paragraphButtonBold
{
	background-image: url(../images/button_bold.gif);
}

.paragraphButtonHTML
{
	background-image: url(../images/button_html.gif);
}

.paragraphButtonImage
{
	background-image: url(../images/paragrapheditor_button_image.gif);
}

.paragraphButtonItalic
{
	background-image: url(../images/button_italic.gif);
}

.paragraphButtonLink
{
	background-image: url(../images/paragrapheditor_button_link.gif);
}

.paragraphButtonUnderline
{
	background-image: url(../images/button_underline.gif);
}

.paragraphButtonLink
{
	background-image: url(../images/button_link.gif);
}

.paragraphButtonClear
{
	background-image: url(../images/button_clear.gif);
}

.paragraphButtonDelete
{
	background-image: url(../images/button_delete.gif);
}


.paragraphSelectFontsize
{
	font-size:8pt;
}

.paragraphButtonFontcolor
{
	background-image: url(../images/button_fontcolor.gif);
}

.paragraphSource a
{
	background-image: url(../images/paragrapheditor_button_empty.gif);
	cursor: default;
}

.paragraphSource li.on a, .paragraphSource li.on a:hover
{
	background-position: 0 0;
}

.paragraphSource .paragraphButtonHTML
{
	background-image: url(../images/button_html.gif);
}

.paragraphSource .paragraphButtonHTML:hover
{
	cursor: pointer;
}




/* TOOLBAR */

.paragraphToolbar
{
	list-style: none;
	height: 26px;
	width:300px;
	margin: 0px;
	padding: 0px;
	border: 1px solid #CCCCCC;
	background-image: url(../images/paragrapheditor_toolbar_bg.gif);
	background-repeat: repeat-x;
}

.paragraphCollapsingToolbar
{
	z-index: 100;
	position: absolute;
}

* html .paragraphToolbar
{
	width: auto;
}

.paragraphToolbar li
{
	display: inline;
	float: left;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	margin-left: 7px;
	line-height: 24px;
}




/* EDITING AREA */

.paragraphIframe
{
	clear: left;
	border-top: 2px grey solid;
	border-left: 2px grey solid;
	border-right: 1px #DDDDDD solid;
	border-bottom: 1px #DDDDDD solid;
	width: 300px;
	height: 45px;
}

.paragraphContainer textarea.paragraphEditor
{
	clear: left;
	border-top-width: 1px;
	padding: 0;
}




/* EDITOR CONTAINER */

.paragraphContainer
{
}

/* Popup PANELS*/
.paragraphPanel
{
    border: #8f8f73 1px solid;
    padding: 2px;
    background-color: #ffffff;
}

.paragraphPanel, .paragraphPanel TD
{
    font-family: 'Microsoft Sans Serif' , Tahoma, Arial, Verdana, Sans-Serif;
    font-size: 11px;
}