/******************************************************************************
** 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/editor/button_shadow.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.widgButtonBold {
    background-image: url(/images/editor/button_bold.gif);
}
.widgButtonHTML {
    background-image: url(/images/editor/button_html.gif);
}
.widgButtonImage {
    background-image: url(/images/editor/button_image.gif);
}
.widgButtonItalic {
    background-image: url(/images/editor/button_italic.gif);
}
.widgButtonLink {
    background-image: url(/images/editor/button_link.gif);
}
.widgButtonOrdered {
    background-image: url(/images/editor/button_ordered.gif);
}
.widgButtonUnordered {
    background-image: url(/images/editor/button_unordered.gif);
}

.widgSource a {
    background-image: url(/images/editor/button_empty.gif);
    cursor: default;
}
.widgSource li.on a, .widgSource li.on a:hover {
    background-position: 0 0;
}

.widgSource .widgButtonHTML {
    background-image: url(/images/editor/button_html.gif);
}
.widgSource .widgButtonHTML:hover {
    cursor: pointer;
}


/* TOOLBAR */
.widgToolbar {
    list-style: none;
    width: 85%;
    height: 30px;
    margin: 0;
    padding: 0 0 0 2px;
    background: #FFF;
}
* html .widgToolbar {
    width: auto;
}
.widgToolbar li {
    display: inline;
    float: left;
    width: 32px;
    height: 32px;
    margin-top: 4px;
    margin-right: 7px;
    line-height: 30px;
}


/* EDITING AREA */
.widgIframe {
    clear: left;
    width: 85%;
    height: 150px;
    border-top: 2px solid #808080;
    border-right: 1px solid #D4D0C8;
    border-bottom: 1px solid #D4D0C8;
    border-left: 2px solid #808080;
}
.widgContainer textarea.widgEditor {
    clear: left;
    width: 85%;
    height: 150px;
    border-top-width: 1px;
}


/* EDITOR CONTAINER */
.widgContainer { }