/******************************************************************************
** STRUCTURE OF DYNAMICALLY CREATED ELEMENTS
*******************************************************************************
**
** <div id="ORIGINAL_IDWidgContainer" class="widgContainer">
**     <ul id="ORIGINAL_IDWidgToolbar" class="widgToolbar">
**         <li id="BUTTON_ID" class="widgEditButton">
**             <a></a>
**         </li>
**         <li class="widgEditSelect">
**             <select>
**             </select>
**         </li>
**     </ul>
**     <iframe id="ORIGINAL_IDWidgIframe" class="widgIframe">
**     </iframe>
**     <textarea id="ORIGINAL_IDWidgTextarea" class="widgEditor">
**     </textarea>
** </div>
*/

/* TOOLBAR BUTTONS */

.widgToolbar a
{
        display: block;
        width: 30px;
        height: 30px;
        overflow: hidden;
        background-repeat: no-repeat;
        text-indent: -1000em;
        text-decoration: none;
}

.widgToolbar a:hover
{
        background-position: 0 -30px;
}

.widgToolbar a:active
{
        margin-top: 2px;
        margin-left: 2px;
        background-position: 0 -60px;
}

.widgToolbar li.on a, .widgToolbar li.on a:hover
{
        background-position: 0 -60px;
}

.widgToolbar li.widgEditButton
{
        background-image: url(../images/widgeditor_button_shadow.gif);
        background-repeat: no-repeat;
        background-position: bottom right;
}

.widgButtonBold
{
        background-image: url(../images/widgeditor_button_bold.gif);
}

.widgButtonHTML
{
        background-image: url(../images/widgeditor_button_html.gif);
}


.widgButtonImage
{
        background-image: url(../images/widgeditor_button_image.gif);
}

.widgButtonItalic
{
        background-image: url(../images/widgeditor_button_italic.gif);
}

.widgButtonLink
{
        background-image: url(../images/widgeditor_button_link.gif);
}

.widgButtonOrdered
{
        background-image: url(../images/widgeditor_button_ordered.gif);
}

.widgButtonUnordered
{
        background-image: url(../images/widgeditor_button_unordered.gif);
}

.widgSource a
{
        background-image: url(../images/widgeditor_button_empty.gif);
        cursor: default;
}

.widgSource li.on a, .widgSource li.on a:hover
{
        background-position: 0 0;
}

.widgSource .widgButtonHTML
{
        background-image: url(../images/widgeditor_button_html.gif);
}

.widgSource .widgButtonHTML:hover
{
        cursor: pointer;
}




/* TOOLBAR */

.widgToolbar
{
        list-style: none;
        width: 99% !important;
        width: 100%;
        height: 42px;
        margin: 0;
        padding: 0 0 0 1px;
        border: 1px solid #CCCCCC;
        background-image: url(../images/widgeditor_toolbar_bg.gif);
        background-repeat: repeat-x;
}

* html .widgToolbar
{
        width: auto;
}

.widgToolbar li
{
        display: inline;
        float: left;
        width: 32px;
        height: 32px;
        margin-top: 5px;
        margin-left: 7px;
        line-height: 30px;
}




/* EDITING AREA */

.widgIframe
{
        clear: left;
        width: 99% !important;
        width: 100%;
        height: 220px;
        border-top-width: 1px;
}

.widgContainer textarea.widgEditor
{
        clear: left;
        width: 100%;
        height: 200px;
        border-top-width: 1px;
        padding: 0;

        }




/* EDITOR CONTAINER */

.widgContainer
{

}