/*========================================================================================
  Content CSS (View mode)

  The default behaviour is to use the editable mode CSS.
  However, to change the appearance between view mode and editable mode,
  it is possible to define here a different CSS.

========================================================================================*/







/*========================================================================================
**  FORMs & INPUTs
**========================================================================================*/

/*
  Inspired by Aleksandar Vaci?'s work,
  distributed under Creative Commons Paternity Licence:
    * http://www.aplus.co.yu/css/forms/?css=1
    * http://creativecommons.org/licenses/by/2.0/
------------------------------------------------------------------ */

div#main_content input, textarea, select {
  border: 1px solid #999;
}

div#main_content input, textarea {
  padding: 1px;
}

div#main_content fieldset.bottom textarea {
  width: 100%;
}

div#main_content input.button, input[type="submit"] {
  /* XXX Is this case happend in current web implementation ? */
  background: #fff url(erp5-website-button.png) bottom repeat-x;
}

div#main_content input[type="image"] {
  border: 0;
  vertical-align: bottom;
  background-color: transparent;
}

div#main_content button {
  margin: .8em .5em;
  padding: .3em;
}

div#main_content button.sort_button {
  background-color:inherit;
  border-width:0pt;
  color:inherit;
  cursor:pointer;
  padding:0em;
  margin:0em;
  float:left;
}

div#main_content button.sort_button span {
  color:inherit;
  font-size:90%;
  text-decoration:underline;
}


/* Default Listbox styling
** TODO: change colors to have better integration in default erp5 web theme.
------------------------------------------------------------------ */

div#main_content .ListSummary table {
  width: 100%;
  background-color: white;
  padding: .1em;
  margin-top: 1em;
  background: #fff url(erp5-website-field.png) top repeat-x;
  border: 1pt solid #ccc;
  color: #666;
  padding: 2px;
}

div#main_content .ListContent table {
  margin-bottom: 2em;
  width: 100%;
}

div#main_content .ListContent td {
  padding: .1em;
  border: 1pt solid #adb9cc;
  vertical-align: top;
}

div#main_content .ListContent td.Data  {
  background: #adb9cc
}

div#main_content .ListContent tr.DataA {
  background: #fff
}

div#main_content .ListContent tr.DataB {
  background: #eee
}

div#main_content .ListContent table tr:hover {background: #ccc}

/* Custom web Listbox styling.
** TODO: change colors to have better integration in default erp5 web theme.
------------------------------------------------------------------ */

div#main_content table.listbox,
div#main_content table.listbox tr,
div#main_content table.listbox td,
div#main_content table.listbox th {
  border: 0;
  color: #000;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
}

div#main_content table.listbox {
  margin-bottom: 3em;
  width: 100%;
}

div#main_content table.listbox .right {float: right}
div#main_content table.listbox .left  {float: left}

div#main_content table.listbox caption,
div#main_content div.searchResultHeader {
  border-top: 1px #3366CC solid;
  background-color: #c3e3df;
  padding: .2em;
  color: #000;
}

div#main_content table.listbox caption em,
div#main_content div.searchResultHeader em {
  font-weight: bold;
  font-style: normal;
}

div#main_content table.listbox thead th,
div#main_content table.listbox thead td {
  border-right: 1px #ccc solid;
  text-align: center;
  color: #666;
  background: #ddd;
}

div#main_content table.listbox thead th:last-child,
div#main_content table.listbox thead td:last-child {
  border-right: none;
}

div#main_content table.listbox thead th {
  text-transform: capitalize;
  font-variant: small-caps;
}

div#main_content table.listbox tbody td.externalLink a,
div#main_content table.listbox tbody th.externalLink a {
  text-decoration: none;
  background: transparent url(erp5-website-external-link.png) center right no-repeat;
  padding-right: 15px;
  color: #637dc1;
}

div#main_content table.listbox tbody td.externalLink a:hover,
div#main_content table.listbox tbody th.externalLink a:hover {
  text-decoration: underline;
  color: #637dc1;
}

div#main_content table.listbox tbody td, table.listbox tbody th {border-top: 1px solid #ddd}

div#main_content table.listbox td, table.listbox th {
  text-align: left;
  padding: .2em .5em;
}

div#main_content table.listbox tbody td a,
div#main_content table.listbox tbody td a:hover,
div#main_content table.listbox tbody td a:visited {color: #4343D9}

div#main_content table.listbox tbody tr {
  background: #fff;
}

div#main_content table.listbox tbody tr:hover {background: #ccc}

div#main_content table.listbox tbody span.number, tbody span.date {float: right}

div#main_content table.listbox tbody .mainLink {
  font-weight: bold;
  display: block;
}

div#main_content table.listbox tfoot th, table.listbox tfoot td {border-top: 1px solid #999}

div#main_content table.listbox tfoot td {text-align: right}

div#main_content table.listbox tfoot .pageNavigation button {
  border: 1px #eee solid;
  background: #fff;
  padding: .2em .4em;
  margin: 0 .1em;
}

div#main_content table.listbox tfoot .pageNavigation button:hover {
  border: 1px #999 solid;
  text-decoration: none;
  background: #eee;
}

/*========================================================================================
**  PAGE LAYOUT
**========================================================================================*/

/* Content zone form styling (apply for editable mode and read
   only mode within the content zone).
   TODO: Change form rendering to let the field go below the label
         if there is not enought width to display them inline.
   TODO: Use dtml variables to define dynamiccaly label width.
------------------------------------------------------------------ */

div#main_content fieldset {
  margin: 1em 0;
  padding: .5em;
  background: transparent;
  border-color: #ccc;
  border-width: 1px 0 0;
  border-style: dotted none none;
}

div#main_content.list_mode fieldset {
  border-style: none none;
  margin: 0;
  padding: 0em 0.5em;
}

div#main_content fieldset.header {
  border-style: none none;
}

div#main_content fieldset > div {
  clear: both;
  margin: .1em 0;
  position: relative;
}

div#main_content fieldset div.input {
  margin-left: 11.5em;  /* = div#main_content label width + 0.5 of margin */
}

div#main_content fieldset legend {
  padding: .2em .5em;
  font-weight: bold;
  color: #666;
  text-transform: capitalize;
}

div#main_content fieldset label {
  margin: 0;
  display: block;
  width: 11em;
  text-align: right;
  float: left;
  text-transform: capitalize;
}

div#main_content fieldset div.field label:after {content: ":"}

/* Edit tabs styling.
** Edit tabs are another part of admin stuffs and
** should respect other admin design convention
** (colors, etc...) to keep the UI consistent.
------------------------------------------------------------------ */

div.document div.actions {
  position: relative;
  width: 100%;
  height: 3em;
}

div.document div.actions ul {
  position: absolute;
  bottom: -1px;
  list-style: none;
  margin: 0;
}

div.document div.actions ul li  {
  display: inline;
  margin: 0;
  padding: 0;
}

div.document div.actions ul a,
div.document div.actions ul li.selected a {
  display: block;
  float: left;
  padding: 4px 1em;
  margin: 1px 2px 0 0;
  text-align: center;
  text-decoration: none;
}

div.document div.actions ul a {
  background: #fffae1;
  border: 1px solid #999;
}

div.document div.actions ul li.selected a,
div.document div.actions ul li.selected a:hover {
  border-bottom: none;
  padding-bottom: 6px;
  margin-top: 0;
  background: #fff;
}

div.document div.actions ul a:hover {
  margin-top: 0;
  border-color: #000;
  border-bottom: none;
  padding-bottom: 5px;
}



/* Editable mode forms styling
------------------------------------------------------------------ */

div.document > div.editable {border: 1px solid #999}

/* Save button styling */
div.actions button {
/*  position: absolute; */
  float: right;
  z-index: 300;
  top: -.5em;
  right: 0;
}

/* Bottom Save buttons styling - XXX NOT YET CENTERED */

div.bottom_actions {
  position: relative;
  width: 100%;
  height: 3em;
  margin-left: auto;
  margin-right: auto;
}


div.bottom_actions button {
  position: absolute;
  z-index: 300;
}

div.bottom_actions button.saveEdit {
  right:10em;
}

div.bottom_actions button.saveView {
  right:0em;
}

div.bottom_actions button.saveEdit .description {
 position: relative;
 top: 3px;
 left: 2px;
}

div.bottom_actions button.saveView .description {
 position: relative;
 top: 3px;
 left: 3px;
}

div.bottom_actions button.saveView .image,
div.bottom_actions button.saveEdit .image {
  float: left;
  display: block;
  width: 22px;
  height: 22px;
}

div.bottom_actions button.saveEdit span.image {
  background-image: url('https://glossary.app.nexedi.net/images/save.png');
}

div.bottom_actions button.saveView span.image {
  background-image: url('https://glossary.app.nexedi.net/images/save-preview.png');
}

/* Reset common fieldset styling for bottom group in editable mode:
     - no need to let some free space in the left side
     - no need to display label
     - no need to display fieldset legend
   TODO: Because thoses properties are used for generic ".bottom" fieldset
         and webcontent custom forms, we can add a new CSS class with a better
         name to enhance semantics.
*/
div#main_content fieldset.bottom legend,
div#main_content fieldset.bottom label {
  display: none;
}

div#main_content fieldset.bottom div.input {margin-left: inherit}



/* Special rendering for read-only webcontent
     (used in WebPage_viewAsWeb and so on).
------------------------------------------------------------------ */

div#main_content > fieldset.webcontent {
  margin: 0;
  border: 0;
}

/* TODO: redo webcontent header spacing policy because lack of consistency
         (not tested with huge titles) */

div#main_content > fieldset#fieldset_webcontent {padding: 2em}

div#main_content > fieldset.header {
  padding-bottom: 1em;
  border-bottom: .3em solid #999;
}

/* TODO: span.headline should be a h1, h2, h-something tag to improve SEO */
div#main_content > fieldset.webcontent span.headline {
  display: block;
  margin: 1em 0;
  padding: 0 1em;
  font-size: 200%;
  color: #999;
  font-weight: bold;
  text-shadow: .1em .1em .1em #eee;
  line-height: 140%;
}

div#main_content > fieldset.webcontent span.summary {
  display: block;
  font-size: 120%;
  padding: 0 2em;
  font-style: italic;
}


div#main_content fieldset.webcontent span.headline {
  margin: 1em 0;
  /*padding: 0 1em;*/
  padding: 0em;
  font-size: 250%;
  color: #999;
  font-weight: bold;
  text-shadow: .1em .1em .1em #eee;
  line-height: 140%;
  text-align: left;
}