source: products/qPloneTabs/branches/quintagroup.plonetabs/trunk/quintagroup/plonetabs/browser/resources/plonetabs.css @ 155

/* <dtml-with base_properties> (do not remove this :) */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */

/*
***************************************************************************************************
*                                                                                                 *
*   There are two global self-excluding classes: 'viewing' and 'sorting',                         *
*   one local class 'editing' for menu items which are expanded for editing,                      *
*   and one more local class 'adding' for adding form when it's in open state.                    *
*                                                                                                 *
*   Reorder action are always available and it TEMPORARY stop other actions on the form:          *
*       editing items                                                                             *
*       deleting items                                                                            *
*       toggling item visibility                                                                  *
*       adding item                                                                               *
*                                                                                                 *
*   After returning to 'viewing' class from 'sorting' all items become to the same state they     *
*   were before sorting (in editing state or not).                                                *
*                                                                                                 *
*   And the same behaviour for adding form: form state ('adding' or not) become the same it was   *
*   before sorting.                                                                               *
*                                                                                                 *
*   All actions except reordering could be done at any time in relationship to each other.        *
*                                                                                                 *
***************************************************************************************************
*/

.kssTabsActive #app.viewing         .reorder-controls,
.kssTabsActive #app.sorting         .sort-controls,
/* #app.viewing li.editing          .editform, */
#app.viewing li.editing             .edit-fields-wrapper,
#app #addaction.adding              .field-visible,
#app #addaction.adding              .field-name dt,
#app #addaction.adding              .field-action,
/* fix for 'non js' version 
#app #addaction.adding              .field-action label,*/
#app #addaction                     .field-action label,
.kssTabsActive #app #addaction.adding              .collapseAdvanced,
#app #addaction.adding              .field-id,
#app #addaction.adding              .field-condition,
#app #addaction.adding              .add-controls,
.kssTabsActive #app.viewing #tabslist li      .url-helper,
.kssTabsActive #app.viewing #tabslist li      .tab-title,
.kssTabsActive #app                           .editcancel {
    display: block;
}

#app                                #busy,
#app.viewing                        .noitems,
#app                                .reorder-controls,
#app                                .sort-controls,

/* fix for 'non js' version */
#app.viewing #tabslist li           .url-helper,
#app.viewing #tabslist li           .tab-title,
.kssTabsActive #app.viewing #tabslist li.editing      .url-helper,
.kssTabsActive #app.viewing #tabslist li.editing      .tab-title,

#app                                .drag-handle,
#app                                .delete,
.kssTabsActive #app                 .visibility,
/* .kssTabsActive #app                 .editform, */
.kssTabsActive #app                 .edit-fields-wrapper,
.kssTabsActive #app                 .editdelete,
.kssTabsActive #app                 .editreset,
#app.sorting                        #addaction,
.kssTabsActive #app                 .field-visible,
.kssTabsActive #app                 .field-name dt,
.kssTabsActive #app                 .field-action,
.kssTabsActive #app #addaction                 .collapseAdvanced,
.kssTabsActive #app                 .field-id,
.kssTabsActive #app                 .field-condition,
.kssTabsActive #app                 .add-controls,
.kssTabsActive #app                 .change-button,
#app                                .editcancel {
    display: none;
}

#app.working #busy,
.kssTabsActive #app.viewing ul.csshover li:hover    .delete,
.kssTabsActive #app.viewing ul.csshover li.onHover  .delete,
#app.viewing ul.csshover li:hover    .visibility,
#app.viewing ul.csshover li.onHover  .visibility,
.kssTabsActive #app.viewing ul.csshover li:hover    .drag-handle,
.kssTabsActive #app.viewing ul.csshover li.onHover  .drag-handle,
#app ul#roottabs.csshover li:hover   .visibility,
#app ul#roottabs.csshover li.onHover .visibility
/* #app.sorting                         .drag-handle*/ {
    display: inline;
}

/**********************************************************/
/* Additional style for functionality withou javascript   */
.kssTabsActive #autogeneration_controls {
    display: none;
}

#app dl.collapseAdvanced dt.headerAdvanced {
    display: none;
}

.kssTabsActive #app dl.collapseAdvanced dt.headerAdvanced {
    display: block;
}

#app input#buttoncancel {
    display: none;
}

.kssTabsActive #app #buttoncancel {
    display: block;
}

/**********************************************************/

#app #tabslist img.drag-handle {
    cursor: move;
}

#app .invisible span.tab-title {
    color:#aaa;
}

/*common***************************************************/

#app input.change-button {
    float: none;
}

#app #autogeneration_section {
    margin-top: 1em;
}

div.reorder-controls,
div.sort-controls {
    float:left;
}

.drag-handle {
    float:left;
/*    margin:0.5em 0.5em 0 0; */
    margin-right: 0.2em;
}

#app ul {
    list-style-type: none;
    list-style-image: none;
    margin:2.5em 0 0 1.7em;
}

#app .delete {
    background: url(++resource++trash.gif) 12px 50% no-repeat;
    padding: 0 0 0 25px;
    line-height:1.8em;
    font-size:80%;
    border:0;
    position:absolute;
    right:0;
    margin-right:-5.7em;
    color: #436976 !important;
}

* html #app .delete {
    margin-right:-4.7em;
}

/* Up & Down arrows */
#app .up-arrow {
    line-height: 1.8em;
    font-size: 80%;
    border: 0;
    position: absolute;
    right: 0;
    margin-right: -6.7em;
    color: #436976 !important;
}

#app .down-arrow {
    line-height: 1.8em;
    font-size: 80%;
    border: 0;
    position: absolute;
    right: 0;
    margin-right: -7.7em;
    color: #436976 !important;
}

#app ul.csshover li {
    border: 1px solid transparent;
    border-right:0;
    padding: 0 0.5em;
    margin: 0.1em 0;
    width:35em;
    margin-right:6.5em;
    line-height:1.5em;
    clear:left;
    position:relative;
}

* html #app ul.csshover li {
    border-color:white;
}

#app ul.csshover li span {
    display:block;
}

#app ul.csshover li span.url-helper {
    position:absolute;
    right:0;
    margin-left:20%;
    padding-right:0.5em;
    overflow:hidden;
    font-size:80%;
    color:#aaa;
    text-align: right;
    width: 80%;

}

#app ul.csshover li.editing {
    padding:0;
    margin: 0;
    width:36em;
}

#app.sorting ul.csshover li.editing {
    padding: 0 0.5em;
}

#app li.editing form {
    margin:-0.1em;
}

* html #app li.editing form {
    margin: -0.2em 0 0 0;
}

#app dl {
    margin:0;
}

#app dl label {
    display:none;
}

#app dl dl label {
    display:block;
} 

#app dd {
    margin:0;
}

#app dd dl {
    margin:0.5em 0;
}

#app input[type="text"] {
    width: 99.5%;
}

#app .bridge {
    position:absolute;
    left:-1.5em;
    top:0.2em;
    width:3em;
}

.kssTabsActive #app .bridge {
    left: -3.5em;
    width: 3.5em;
}

* html #app div.bridge {
    top:0;
    left:-2em;
}

#app input:focus {
    border:  1px inset threedface !important;
}

* html #app input {
    width:97.3%;
    padding: 0.1em 0.4em;
}

#app form div {
    line-height:1.4em;
    margin-top:0.1em;
    min-height:1.6em;
}

* html #app form div {
    margin-top:-0.2em;
    position:relative;
    height:1%;
}

#app div input {
    width:auto;
    padding: 0.05em 0.5em;
    float:left;
    margin:0 0.1em 0 0;
}

* html #app div input {
    padding: 0 0.3em;
}

div.field { margin-top:2em; }

/*hover***************************************************/

.kssTabsActive #app.viewing ul#tabslist.csshover li:hover,
.kssTabsActive #app.viewing ul#tabslist.csshover li.onHover {
    background-color: #FFFFDD;
    border: 1px inset threedface;
    cursor: text;
}

.kssTabsActive #app.viewing ul#tabslist.csshover li.editing {
    background-color: White;
    border: 1px solid white;
    cursor: auto;
}

#app ul#roottabs.csshover li:hover,
#app ul#roottabs.csshover li.onHover {
    background-color: #FFFFDD;
/*    border:  1px inset threedface;*/
    cursor: default;
}

/*edit*****************************************************/

#app dl.collapseAdvanced {
    margin-top:0.15em;
    position:relative;
    padding:0;
    border:0 !important;
    height:auto;
    line-height:1em;
}

#app dl.collapseAdvanced dt.headerAdvanced {
    cursor: pointer;
    font-size: 90%;
    font-weight:normal;
    position:absolute;
    padding-right:0.5em;
/*     display:block; */
    margin:0;
    top:0;
    right:0;
    color: #436976;
    line-height:2em;
    background-color:transparent;
}

#app dl.collapseAdvanced dd.contentAdvanced {
    padding:1em 1.5em 0 1.5em;
    border:0;
    background-color:#dee7ec;
}

#app dl.expandedBlock dt.headerAdvanced {
    padding: 0 6px 0 22px;
    background: transparent url(++resource++treeExpanded.gif) no-repeat 6px 50%;
}

#app dl.collapsedBlock dt.headerAdvanced {
    padding: 0 0 0 22px;
    background: transparent url(++resource++treeCollapsed.gif) no-repeat 6px 50%;
 }

#app dl.collapseAdvanced { 
    clear: both;
}

#app dl.expandedBlock dd.contentAdvanced {
    display: block;
}

.kssTabsActive #app dl.collapsedBlock dd.contentAdvanced {
    display: none;
}

/****************************************************************/

#app #addaction {
    margin-left:1.7em;
    width:36.2em;
    position:relative;
}

* html #app #addaction {
    width:36.15em;
}

/* fixed for work in 'without js' version
   removed .adding class from selector
#app #addaction.adding .field-action label {  */

#app #addaction .field-action label {
    position:absolute;
    line-height:2.1em;
    font-size:80%;
    color: #8cacbb;
    right:0.5em;
    font-weight:normal;
    background-color:transparent;
}

#app #addaction.adding .field-action input {
    margin-top:0.1em; 
    padding-right:9em;
    width:27em;
}

* html #app #addaction.adding .field-action input {
    padding-right:0.5em;
    width:96.8%;
    margin-top:-0.05em;
}

#app #addaction .bridge {
    left:-1.8em;
    top:0em;
}

* html #app #addaction .bridge {
    width:1.7em;
    left:-2em;
}


/* </dtml-with> (do not remove this either :) */