/*========================================================================================
  Default ERP5 Web CSS.

  Guidelines (how-to create a good css):
    * All measurements should be expressed with scalable units like em, ex, %.
    * pt, px must be avoid expect for box borders (not sure) and tricks related to borders (like position popup of Edit Tabs)
    * Test your design and layout against font size increasing/decreasing.
    * Test your html code semantics value by disabling all your css.
    * Don't put styling directives in xhtml code.

  Tested Browser:
    * Firefox 1.5.0.6
    * Konqueror 3.4.2
    * Opera 9.01
    * Internet Explorer 6 (Layout: OK; Style: not OK)

  TODO: * Layout is ok in ie6, now styling should be adapted to support ie6.
        * The "WebWidget" class should be used somewhere to identify such objects easily
          and enhance semantics.
========================================================================================*/



/*========================================================================================
**  GENERAL STUFF
**========================================================================================*/

/* Good CSS directive to include in every website to reset all browser default style.
------------------------------------------------------------------ */

* {
  padding: 0;
  margin: 0;
}

.clear {clear: both}
p.clear {display: none}

img {border: 0}

a:link, a:visited {text-decoration: none}
a:active, a:hover {text-decoration: underline}
a:link {color: #00248f}
a:visited {color: #909}
a:hover {color: #39f}

a img, h3 img, button img, li img {vertical-align: middle}

ul {list-style-position: inside}
li {margin-left: 1em}

fieldset#hidden_fieldset,
.doNotDisplay {display: none} /* For compatibility */
.do_not_display {display: none}

.hiddenLabel label {display: none} /* For compatibility */
.hidden_label label {display: none}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p {
  margin: .6em 0;
  text-align: justify;
}

.document div.content {
  color: #000;
}

/* Workflow states
------------------------------------------------------------------ */

span.draft       {color: #be854d}
span.published,
span.validated   {color: #078307}
span.invalidated {color: #ab0303}
span.cancelled   {color: #ccc}



/* Emulate <center> html tag.
   This class is called 'centered' to not interfer with the 'center' group
   used in erp5_xhtml_style rigid positionning mechanism.
------------------------------------------------------------------ */

.centered,
.centeredInner {
  width: 100%;
  text-align: center;
}

*.centered *,
*.centeredInner * {
  margin-left: auto;
  margin-right: auto;
}



/* Default content styling (apply to everything, site wide);
   Typography & colors (fonts, color, background).
------------------------------------------------------------------ */

body {background: #e6e6e6 url(erp5-website-background.png) top left no-repeat}

body, input, textarea, select, table {
  color: #333;
  font-family: Sans, Verdana, Tahoma, Georgia, Geneva, Arial, sans-serif;
  font-size: 8pt; /* XXX font-size should not be expressed in pt unit.
                  ** This unit is quite convinient actually because it scale well
                  ** in any browser on font resizing.
                  */
  line-height: 1.5em; /* Let the content breathe ! This reduce the density of
                      ** paragraph and make the text easier to read.
                      */
}

.code, code {font-family: monospace}

#transition_message, .warning, .error, .important {
  color: #f00;
  font-weight: bold;
}

h1 {
  margin-top: 1.3em;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.7em;
  color: #000;
}

blockquote {
  margin: .5em;
  padding: .5em;
  border-left: 2px #ddd solid;
  background: #f9f9f9;
}

input#hidden_button {
  width: 0;
  height: 0;
  display: inline;
  border-width: 0;
  float: left;
}

/* Login page style
------------------------------------------------------------------ */

div.content.login {padding: 0 1em}
div.content.login fieldset {border: none}

/* Breadcrumb default style
------------------------------------------------------------------ */

div.breadcrumb li a.selected {
  border-bottom: 1px dashed #00248f; /* same color as "a:link" rule */
  text-decoration: none;
}

div.breadcrumb li a.selected:hover {border-bottom-color: #39f} /* same as "a:hover" rule */

</center>