html {
 /* XXX width: 85%;  work with current layout technic but, background should be changed */
  margin-right: auto;
  margin-left: auto;
}

/*========================================================================================
**  GENERAL LAYOUT
**  Layout technique based on http://alistapart.com/articles/holygrail/
**========================================================================================*/

.document div.content {
  background: #fff;
  border: .1em solid #ccc;
  padding: 0em 0.7em;
}

.document div.content.editable {
  padding: 0em 0em;
}

/* Define some constant to make the css flexible without pain */


body {
  min-width: 580px;
}

form#main_form {
  padding-left: 190px;
  padding-right: 200px;
}

form#main_form div#wrapper_footer,
form#main_form div#wrapper_header   /* Customisation of template_erp5_web is required to make header work */
{
  margin-left: -190px;
  margin-right: -185px;
}

form#main_form div#main_content,
form#main_form div#wrapper_left,
form#main_form div#wrapper_right {
  position: relative;
  float: left;
}

form#main_form div#main_content {
  padding: 0 0px;
  width: 100%;
  margin: 1em 0;
}

form#main_form div#wrapper_left {
  width: 180px;
  padding: 0 5px;
  right: 190px;
  margin-left: -100%;
}

form#main_form div#wrapper_right {
  width: 190px;
  padding: 0 5px;
  margin-right: -200px;
}

form#main_form div#wrapper_header,
form#main_form div#wrapper_footer {
  clear: both;
}

/*** IE Fix ***/
* html form#main_form div#wrapper_left {
  left: 200px;
}




/*========================================================================================
** WIDGETS
**
** Widgets are built as a fieldset inside a wrapper div
** We use the fact that widgets are always part of a wrapper div to
** implement a different rendering from the standard form rendering
**
** TODO:
** - it could be useful to add a new class to identity widgets more easily
**========================================================================================*/

/* Wrapper Layout
-----------------------------------------------*/

/* Standard wrapper */

form#main_form div.wrapper div.column fieldset.widget {
  background:  #fff url(erp5-website-field.png) top repeat-x;
  border: 1px solid #ccc;
  color: #666;
  padding: 2px;
  margin: 1em 0;
}

form#main_form div.wrapper div.column fieldset.widget legend {
  padding: 0.2em .5em;
  font-weight: bold;
  color: #666;
  text-transform: capitalize;
  background: #eee;
}

form#main_form div.wrapper div.column fieldset.widget div.field label:after {content: ":"}

/* Transparent wrapper - useful to display a logo */
form#main_form div.wrapper div.transparent fieldset.widget {
  border: 0;
  background: transparent;
  margin: 0 0;
  padding: 0 0;
}

form#main_form div.wrapper div.transparent fieldset.widget legend {
  display: None;
}

form#main_form div.wrapper div.transparent fieldset.widget label {
  display: None;
}

/* Widget Layout
-----------------------------------------------*/

/* Special layout for logo widget */
form#main_form div.column fieldset.widget div.field.logo {
  padding: 2em 0 0;
  margin-bottom: 1.5em;
  border: 0;
  background: transparent;
}

form#main_form div.wrapper div.field.logo label {
  display: none;
}

/* Special layout for footer group */
form#main_form div#wrapper_footer div.field {
  margin: 0;
  padding: .7em;
  background: #ccc url(erp5-website-micro-gray-shadow.png) top repeat-x;
  border-color: #999;
  border-width: 0 0 1px;
  border-style: solid;
}

form#main_form div#wrapper_footer fieldset.widget {
  border-width: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}

form#main_form div#wrapper_footer fieldset.widget legend {
  display: none;
}

form#main_form div#wrapper_footer div.field label {
  display: none;
}

/* Special layout for search widget */
form#main_form div.searchButton {
  float: left;
  margin-left: 0.3em;
}

form#main_form div.searchButton input {
  height: 2em;
}

form#main_form div.searchInput {
  float: left;
}

form#main_form div.searchInput input, textarea, select { /* This should be common XXX */
  border: 1px solid #999;
}

/* Special layout for language widget */
form#main_form div.languageSelector {
  float: right;
}