source: products/quintagroup.plonetabs/trunk/quintagroup/plonetabs/browser/resources/plonetabs.css @ 872

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

/*
***************************************************************************************************
*                                                                                                 *
*   This doc is outdated now, don't read it!!!                                                    *
*                                                                                                 *
*   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.        *
*                                                                                                 *
***************************************************************************************************
*/

/*---------- QUINTAGROUP PLONE TABS LAYOUT ----------*/
.qPloneTabs ul {
  list-style-type:none;
  list-style-image:none;
  margin-left:18px;
  }
.kssTabsActive ul {
  margin-left:0;
  }
.titleWrapper,
.kssTabsActive .editing .titleWrapper,
.qPloneTabs .delete,
.kssTabsActive .edit-fields-wrapper,
.kssTabsActive .bridge,
.qPloneTabs .drag-handle,
.kssTabsActive .field-action,
.kssTabsActive .collapsedBlock .contentAdvanced,
#addaction .headerAdvanced,
.qPloneTabs .headerAdvanced,
.kssTabsActive .add-controls,
.kssTabsActive .kssHidden,
.kssTabsActive #autogeneration_controls {
  display:none;
  }
.kssTabsActive .titleWrapper,
.kssTabsActive li.editing .edit-fields-wrapper,
.kssTabsActive .adding .bridge,
.adding .field-action,
.adding .collapseAdvanced,
.kssTabsActive .headerAdvanced,
.kssTabsActive #addaction.adding .headerAdvanced,
.adding .add-controls,
.kssTabsActive .expandedBlock .contentAdvanced,
.kssTabsActive .field-action label {
  display:block;
  }
.kssTabsActive li:hover .bridge,
.kssTabsActive li:hover .delete,
.kssTabsActive li:hover .drag-handle,
.kssTabsActive #app #addaction.adding      .error-container {
  display:inline;
  }

/*----- Items List Section -----*/
#tabslist li {
  clear:left;
  margin:0.1em 6.5em 0.1em 0;
  position:relative;
  width:35em;
  }
.kssTabsActive #tabslist li {
  margin-left:-12px;
  }
#tabslist li span {
  display:block;
  }
.qPloneTabs .delete {
  background:url(++resource++trash.gif) 5px 50% no-repeat;
  border:0;
  font-size:80%;
  left:100%;
  line-height:1.8em;
  padding:0 0 0 18px;
  position:absolute;
  }
.qPloneTabs .editing form {
  margin:0 0 0 30px;
  }
.qPloneTabs dl {
  margin:0;
  padding:0;
  }
.qPloneTabs dl label {
  display:none;
  }
.qPloneTabs dl dl label {
  display:block;
  } 
.qPloneTabs dd {
  margin:0;
  }
.qPloneTabs dd dl {
  margin:0.5em 0;
  }
.qPloneTabs input[type="text"] {
  padding:2px 0;
  text-indent:3px;
  //text-indent:0;
  width:99.5%;
  }
.qPloneTabs input:focus {
  border:1px inset threedface !important;
  }
.qPloneTabs form div {
  line-height:1.4em;
  }
.qPloneTabs div input {
  margin:0 0.1em 0 0;
  width:auto;
  }
.edit-controls,
.add-controls {
  margin:0.25em 0;
  }

/*--- Title Wrapper ---*/
.titleWrapper {
  background-color:#fff;
  margin-left:30px;
  overflow:hidden;
  padding:1px 5px;
  white-space:nowrap;
  }
.titleWrapper:hover {
  background-color:#FFFFDD;
  border:1px inset threedface;
  cursor:text;
  padding:0 4px;
  }
.tab-title {
  float:left;
  min-width:35%;
  padding-right:0.5em;
  position:relative;
  z-index:1;
  }
#app .invisible span.tab-title {
  color:#aaa;
  }
.url-helper {
  color:#aaa;
  font-size:80%;
  overflow:hidden;
  padding-right:0.5em;
  }

/*--- Bridge ---*/
.qPloneTabs .bridge {
  left:-1.5em;
  //left:-1.7em;
  position:absolute;
  top:0.2em;
  width:3em;
  }
.kssTabsActive .qPloneTabs .bridge {
  left:0;
  width:30px;
  }
/* IE need this to remove the padding around the check box */
.kssTabsActive .qPloneTabs .bridge input {
  height:13px;
  width:13px;
  }
.drag-handle {
  cursor:move;
  float:left;
  margin-right:0.2em;
  //margin-top:0.2em;
  }

/*----- Edit Item Section -----*/
#app dl.collapseAdvanced {
  line-height:1em;
  position:relative;
  }
#app dl.collapseAdvanced dt.headerAdvanced {
  background:url(++resource++treeCollapsed.gif) no-repeat 6px 50%;
  color:#436976;
  cursor:pointer;
  font-size: 90%;
  font-weight:normal;
  line-height:2em;
  margin:0;
  padding: 0 6px 0 22px;
  position:absolute;
  right:0;
  top:0;
  }
#app dl.expandedBlock dt.headerAdvanced {
  background-image:url(++resource++treeExpanded.gif);
  }
#app dl.collapseAdvanced dd.contentAdvanced {
  background-color:#dee7ec;
  padding:1px 1.5em 0.5em;
  zoom:1;
  }
#app dl.expandedBlock dd.contentAdvanced {
  display: block;
  }

/*----- Add Action Section -----*/
#addaction {
  margin-left:18px;
  position:relative;
  width:35em;
  }
.kssTabsActive #addaction {
  width:32.5em;
  }
#addaction .field-action {
  position:relative;
  }
#addaction .field-action label {
  bottom:0;
  color: #8cacbb;
  font-size:80%;
  font-weight:normal;
  line-height:2.1em;
  position:absolute;
  right:0.5em;
  }
#addaction.adding .field-action input {
  margin-top:0.1em; 
  padding-right:9em;
  width:23.3em;
  }
#addaction .bridge {
  left:-18px;
  top:0;
  }
  
/*----- Autogenerated Section -----*/
#autogeneration_section {
  margin-top:1em;
  }
#roottabs {
  margin-left:0;
  }
#roottabs li {
  margin:0.1em 6.5em 0.1em 0;
  padding-left:18px;
  position:relative;
  width:35em;
  }
#roottabs li:hover {
  background-color:#FFD;
  cursor:default;
  }
#roottabs .bridge {
  left:0;  
  }
#roottabs li:hover .bridge {
  display:block;
  }
#autogeneration_controls {
  padding-left:18px;
  }
.qPloneTabs .visibility {
  height:13px;
  width:13px;
  }

/*----- Error Messeges -----*/
.qPloneTabs dl.error {
  border:1px solid #D80;
  font-size:0.91em;
  margin:2px 0 0;
  }
.collapseAdvanced dl.error {
  margin-top:2em !important;  
  }
.qPloneTabs dl.error dt {
  color:#fff;
  float:left;
  line-height:1.5em;
  margin-right:0.5em;
  padding:0 0.5em;
  }
.qPloneTabs dl.error dd {
  padding:0 0.5em;
  }
.qPloneTabs dl.error input[type="text"] {
  margin:0 -0.5em;
  width:102.4%;
  }
.qPloneTabs .contentAdvanced dl.error input[type="text"] {
  width:102.5%;
  }
#addaction.adding .error #actaction {
  width:26.4em;
  }

#kssPortalMessage {
    float: right;
}

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