/*[of]:font faces*/
/*[of]:OFL Sorts Mill Goudy TT*/
@font-face {
   font-family: 'OFL Sorts Mill Goudy TT';
   font-style: normal;
   font-weight: normal;
   src: 
      local('OFL Sorts Mill Goudy TT'), 
      url('http://themes.googleusercontent.com/font?kit=9ZZVVBRCceNnPBXqWLH8IOLhrilDyef6adyH-Bknj3c')
      format('truetype');
}

@font-face {
   font-family: 'OFL Sorts Mill Goudy TT';
   font-style: italic;
   font-weight: normal;
   src:
      local('OFL Sorts Mill Goudy TT'), 
      url('http://themes.googleusercontent.com/font?kit=4zlbkWdiblhTyAxV3yYOK6onTEOBYrnaEhLOl51rT3k') 
      format('truetype');
}
/*[cf]*/
/*[of]:Crimson Text*/
@font-face {
   font-family: 'Crimson Text';
   font-style: normal;
   font-weight: normal;
   src: 
      local('Crimson Text'), 
      url('http://themes.googleusercontent.com/font?kit=3IFMwfRa07i-auYR-B-zNfesZW2xOQ-xsNqO47m55DA') 
      format('truetype');
}
/*[cf]*/
/*[of]:Droid Serif*/
@font-face {
   font-family: 'Droid Serif';
   font-style: normal;
   font-weight: normal;
   src: 
      local('Droid Serif'), 
      url('http://themes.googleusercontent.com/font?kit=70P0G8gxVDIV6F9om0DsKg') 
      format('truetype');
}

@font-face {
   font-family: 'Droid Serif';
   font-style: normal;
   font-weight: bold;
   src:
      local('Droid Serif'), 
      url('http://themes.googleusercontent.com/font?kit=QQt14e8dY39u-eYBZmppwf5Jgr8ufe5A6KahQF76Xmg') 
      format('truetype');
}

@font-face {
   font-family: 'Droid Serif';
   font-style: italic;
   font-weight: normal;
   src: 
      local('Droid Serif'), 
      url('http://themes.googleusercontent.com/font?kit=cj2hUnSRBhwmSPr9kS5895bd9NUM7myrQQz30yPaGQ4') 
      format('truetype');
}

@font-face {
   font-family: 'Droid Serif';
   font-style: italic;
   font-weight: bold;
   src: 
      local('Droid Serif'), 
      url('http://themes.googleusercontent.com/font?kit=c92rD_x0V1LslSFt3-QEps5gzdOPyAFVZA8FnZ4sZC0') 
      format('truetype');
}
/*[cf]*/
/*[of]:Yanone Kaffeesatz*/
@font-face {
   font-family: 'Yanone Kaffeesatz';
   font-style: normal;
   font-weight: 700;
   src: 
      local('Yanone Kaffeesatz'), 
      url('http://themes.googleusercontent.com/font?kit=We_iSDqttE3etzfdfhuPRQL07A8tpHrkwi7BQtnqF-Q') 
      format('truetype');
}

@font-face {
   font-family: 'Yanone Kaffeesatz';
   font-style: normal;
   font-weight: 400;
   src: 
      local('Yanone Kaffeesatz'), 
      url('http://themes.googleusercontent.com/font?kit=YDAoLskQQ5MOAgvHUQCcLdZ76ZYKVLHIjRQjrp3kYFc') 
      format('truetype');
}

@font-face {
   font-family: 'Yanone Kaffeesatz';
   font-style: normal;
   font-weight: 300;
   src: 
      local('Yanone Kaffeesatz'), 
      url('http://themes.googleusercontent.com/font?kit=We_iSDqttE3etzfdfhuPRfYfc3bPVUtuDoUoHMkf5-E') 
      format('truetype');
}

@font-face {
   font-family: 'Yanone Kaffeesatz';
   font-style: normal;
   font-weight: 200;
   src: 
      local('Yanone Kaffeesatz'), 
      url('http://themes.googleusercontent.com/font?kit=We_iSDqttE3etzfdfhuPRWdYuNb9i97qInNKPYJgRwg') 
      format('truetype');
}
/*[cf]*/
/*[of]:Tangerine*/
@font-face {
   font-family: 'Tangerine';
   font-style: normal;
   font-weight: normal;
   src: 
      local('Tangerine'), 
      url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') 
      format('truetype');
}
/*[cf]*/
/*[of]:Crushed*/
@font-face {
   font-family: 'Crushed';
   font-style: normal;
   font-weight: normal;
   src: 
      local('Crushed'), 
      local('Crushed-Regular'), 
      url('http://themes.googleusercontent.com/font?kit=YIdTMeWIkibBbaflhmOxCQ') 
      format('truetype');
}
/*[cf]*/
/*[cf]*/
/*[of]:Fonts*/
/*[c]$Font1: "Crushed", "Georgia", "Times", serif*/
/*[c]$Font2: "David Transparent", "David", "Cambria", serif*/
/*[c]$Font3: "Trebuchet MS", "Tahoma", "Arial", sans-serif*/
/*[c]$Font4: "Yanone Kaffeesatz", "Cordia New", "Kartika", sans-serif*/
/*[c]$Font5: "Tangerine", "Script MT Bold", cursive*/
/*[c]$Font6: "Calibri", "Corbel", "Segoe UI", sans-serif*/
/*[c]$Font7: "Corbel", "Tahoma", "Trebuchet MS", sans-serif*/
/*[c]$Font8: "Trebuchet MS", "DejaVu Sans", "Arial", sans-serif*/
/*[c]$Font9: "DejaVu Serif Condensed", "Georgia", "Book Antiqua", serif*/
/*[cf]*/
/*[of]html:Catch missing style*/
/* To detect indefined styles. */
/*[c]BODY {*/
   /*[c]font-family: "Dingbats", "Webdings", symbol;*/
   /*[c]font-size: 5px;*/
   /*[c]font-weight: 900;*/
   /*[c]color: yellow;*/
   /*[c]border-color: red;*/
   /*[c]background: red;*/
   /*[c]margin: 0;*/
   /*[c]padding: 0;*/
/*[c]}*/
/*[cf]*/

/*[c]Commons*/

/*[of]:*\:focus*/
/*#3789EF*/
/*#9DBCC7*/

@-moz-document url-prefix() {
   A:focus,
   INPUT:focus,
   SELECT:focus {
      outline-style: solid;
      outline-color: #509BEF;
      outline-width: 3px;
   }
}

@media
   all and (-webkit-min-device-pixel-ratio:10000), 
   not all and (-webkit-min-device-pixel-ratio:0)
{
   head~body A:focus,
   head~body INPUT:focus,
   head~body SELECT:focus {
      outline-style: solid;
      outline-color: #509BEF;
      outline-width: 3px;
   }
}
/*[cf]*/
/*[of]:Elements*/
/*[of]:HTML*/
HTML {
   font-size: 100%;
      /* Avoids IE 5-7 bug with EM fonts */
      /* Source: http://covertprestige.info/css/base-stylesheet/ */
}
/*[cf]*/
/*[of]:BODY*/
BODY {
   color: #754A11;
   font-size: 120%;
   line-height: 140%;
}
/*[cf]*/
/*[of]:A*/
A,
A:link,
A:visited {
   color: inherit; /* Overrides browser defaults */
   text-decoration: none; /* Replaced by a bottom border: nicer */
   border-bottom-style: solid;
   border-bottom-width: 0.02em;
   padding-bottom: 0.07em;
   border-bottom-width: 1px;
}

A.visited-matters:visited {
   opacity: 0.8;
   filter: alpha(opacity=80);
}
/*[cf]*/
/*[of]:A IMG*/
A IMG {
   border-style: none;
}
/*[cf]*/
/*[of]:CAPTION, H1, H2, H3, LABEL, TH*/
LABEL,
H1,
H2,
H3 {
   background: transparent;
      /* Color, font size and font weight, later defined
      * for each element */
   padding: 0;
      /* No left and right peers */
}

CAPTION,
LABEL,
H1,
H2,
H3,
TH {
   line-height: 105%;
}

H1 {
   text-align: center;
   padding-left: 41px; /* Same as padding left of OL/UL */
   padding-right: 41px; /* Same as padding left of OL/UL */
   margin: 2px 0 0 0;
   font-family: "Crushed", "Georgia", "Times", serif;
   font-size: 130%;
   font-weight: normal;
   line-height: 1em;
}

CAPTION,
H2,
H3 {
   font-family: "David Transparent", "David", "Cambria", serif;
   font-weight: normal;
}

CAPTION,
H2 {
   margin: 0;
   padding-left: 0;
   padding-right: 41px; /* Same as padding left of OL/UL */
   letter-spacing: 0.05em;
   font-size: 120%;
   text-align: left;
   line-height: 1.3em;
}

H2:first-letter {
   text-transform: uppercase;
}

H1 + H2 {
   margin-top: 0.5em;
}

TH,
LABEL {
   font-family: "Trebuchet MS", "Tahoma", "Arial", sans-serif;
   font-weight: normal;
}

TH,
LABEL {
   font-size: 105%;
}

H3,
INPUT.button {
   font-size: 95%;
}

H3 {
   margin: 1em 0 0 0;
   font-style: italic;
   letter-spacing: 1px;
   padding-left: 41px; /* Same as padding left of OL/UL */
   padding-right: 41px; /* Same as padding left of OL/UL */
   text-align: left;
   font-size: 100%;
}

LABEL {
   margin: 0.25em 0; /* Vertical margins must be equals */
}
/*[cf]*/
/*[of]:OL, UL, P, TABLE, .area*/
/*[c]Containers without direct text*/

TABLE,
UL,
OL,
.area {
   background: transparent;
}

/*[c]First level containers*/

TABLE,
UL,
OL {
   margin: 0.7em auto;
   padding: 0;
   width: auto;
      /* Not 100%, to allow later specification of h paddings */
   min-width: 15em;
}

UL,
OL {
   list-style-image: url(long-dash.png);
   list-style-position: outside;
   padding-left: 41px;
      /* 41 = 14 + 27 */
      /* 27 = image width, 14 = standard offet */
      /* Leave other paddings as previously defined */
      /* Also the same padding as for H2 */
}

P,
BLOCKQUOTE {
   font-weight: normal;
   text-align: right;
   background: transparent;
   padding: 0;
   margin: 0.7em 0;
   font-family: "Calibri", "Corbel", "Segoe UI", sans-serif;
   font-size: 100%;
}

BLOCKQUOTE {
   font-style: italic;
   padding-left: 50px;
   padding-top: 0.6em;
   padding-bottom: 0.6em;
   padding-right: 1em;
   background-image: url("quote.png");
   background-position: 1% 1%;
   background-repeat: no-repeat;
   float: right;
   max-width: 35%;
   border-left-style: dashed;
   border-top-style: dashed;
   border-bottom-style: dashed;
   border-width: 2px;
}

TABLE,
OL,
UL {
   font-family: "Yanone Kaffeesatz", "Cordia New", "Kartika", sans-serif;
   font-size: 110%;
}
/*[cf]*/
/*[of]li-td:CAPTION, LI, TD, TH*/
LI,
TD {
   font-size: inherit;
   font-weight: normal;
   line-height: 115%;
}

CAPTION,
LI,
TD,
TH {
   padding: 0.15em 0.40em 0.30em 0.40em;
}

LI {
   padding-left: 0;
}

LI + LI {
   padding-top: 0.60em;
      /* There is no cell spacing in an LI, so add padding instead */
}
/*[cf]*/
/*[of]:(TD|LI) (INPUT.text|INPUT.file|SELECT)*/
TD INPUT.text,
TD INPUT.file,
LI INPUT.text,
LI INPUT.file,
TD SELECT,
LI SELECT {
   margin-top: 0;
   margin-bottom: 0;
}
/*[cf]*/
/*[of]:INPUT.text, INPUT.file, LABEL, SELECT, TEXTAREA\: same flow behaviour*/
LABEL,
INPUT.text,
INPUT.file,
SELECT,
TEXTAREA {
   display: inline-block;
   vertical-align: middle;
}
/*[cf]*/
/*[of]:INPUT.text, INPUT.file, LABEL, SELECT, TEXTAREA\: same font weight*/
LABEL,
INPUT.text,
INPUT.file,
SELECT,
TEXTAREA {
   font-weight: normal;
}
/*[cf]*/
/*[of]:INPUT.text, INPUT.file, SELECT\: same height*/
SELECT,
INPUT.text,
INPUT.file {
   height: 1.5em;
}
/*[cf]*/
/*[of]:INPUT.text, INPUT.file, SELECT, TEXTAREA\: same border, background and padding*/
INPUT.text,
INPUT.file,
SELECT,
TEXTAREA {
   border: 1px solid;
   padding: 0 0.20em; /* Vertical paddings must be equal */
}

SELECT {
   padding-right: 0; /* There is the arrow there */
}

INPUT.text[disabled],
INPUT.file[disabled],
SELECT[disabled],
TEXTAREA[disabled] {
   background-color: transparent;
   border-style: dotted;
}
/*[cf]*/
/*[of]:INPUT.text, INPUT.file, SELECT, TEXTAREA\: same margin, font and color*/
INPUT.text,
INPUT.file,
SELECT,
TEXTAREA {
   margin: 0.25em 0; /* Vertical margins must be equal */

   font-family: inherit;
   font-weight: inherit;
   font-size: 90%;
   color: inherit; /* Overrides browser defaults */
}
/*[cf]*/
/*[of]:LABEL, LI, TH*/
LABEL,
LI,
TH {
   color: #A23A17;
}
/*[cf]*/
/*[cf]*/
/*[of]:Classes*/
/*[of]:.disabled*/
.disabled {
   cursor: default;
   opacity: 0.35;
}

.disabled,
.disabled * {
   filter: alpha(opacity=35);
}
/*[cf]*/
/*[of]:INPUT.button*/
/*[of]:INPUT.button*/
INPUT.button {

   /*[c]Flow*/

   display: inline;

   /*[c]Size*/

   min-width: 7em;
   padding: 0 0.4em; 
      /* Horizontal padding must not exeed 0.4em, due to IE 8 which */
      /* computed paddings bigger than with other browsers. */
   border-width: 1px;
   height: 1.90em;

   /*[c]Position*/

   margin: 0.4em 0;
      /* A left-margin is later defined for .button */
      /* following a .button */

   /*[c]Cosmetic*/

   font-weight: normal;
   border-style: solid;
   background-color: transparent;
   color: inherit; /* Overrides browser defaults */
   border-color: #754A11;
      /* Most browser fails to honnor requirement to use text color here */
   cursor: pointer;
   border-radius: 12px;
   -o-border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
}
/*[cf]*/
/*[of]:INPUT.button + INPUT.button*/
INPUT.button + INPUT.button {

   /*[c]Position*/

   margin-left: 0.8em; /* Double of vertical margins */
}
/*[cf]*/
/*[of]:INPUT.button.disabled*/
INPUT.button.disabled {
   /* Style pour bouton disabled, pour FF, qui n'affiche pas */
   /* les boutons personalisés comme désactivés quand ils le sont. */
   /* Il faut de plus passer par une classe, car l'utilisation */
   /* d'un selecteur basé sur l'attribut disabled, ne fonctionne pas */
   /* sous tout les navigateurs */

   /*[c]Cosmectic*/

   cursor: default; /* Override the non-default one specified as default */
}
/*[cf]*/
/*[cf]*/
/*[of]:A.button*/
/*[of]:A.button*/
A.button {

   /*[c]Flow*/

   display: inline-block; /* Override button's class defaults */

   /*[c]Size*/

   padding: 0;
   width: 50px;
      /* Default widths for most buttons. This is overriden */
      /* for others */
   height: 70px;
      /* Default, overriden for .no-label. Should be 65px, but
      /* this display hugly with 65px. 5px more looks nicer. */
   line-height: 15px;
   font-size: 12px;
   overflow: hidden;
      /* Contains image which is switched with */
      /* position shift */
   border-width: 0;

   /*[c]Position*/

   margin: 3px 0 0px 3px;
      /* Buttons are added right to left, so */
      /* there is no right padding. This is the default for most */
      /* buttons, and this is overriden for others */

   /*[c]Cosmetic*/

   font-family: "Corbel", "Tahoma", "Trebuchet MS", sans-serif;
   font-weight: normal;
   color: #989678;
      /* Button label text color and focus rectangle color */
   text-align: center;
   cursor: pointer;
   border-style: none;

   /*[c]Bug*/

   position: relative;
      /* IE6 bug: without this, the overflow:hidden */
      /* will not apply */
}
/*[cf]*/
/*[of]:A.button.no-label*/
A.button.no-label {
   height: 50px;
   margin-bottom: 20px; /* overidden height - height */
}
/*[cf]*/
/*[of]:A.button IMG*/
A.button IMG {
   /* No width on the image: it is a sprite. Its container only */
   /* defines the width. No height defined neither, as it depends on */
   /* the context: in the left pan, there are buttons which are smaller. */

   /*[c]Flow*/

   position: relative;
      /* To move it and change this way the */
      /* image the button displays */

   /*[c]Size*/

   padding: 0;

   /*[c]Position*/

   margin: 0;

   /*[c]Cosmetic*/

   border: none;
      /* Drop border around in anchors which IE adds */
}
/*[cf]*/
/*[of]:A.button.highlight*/
A.button.highlight {
   /* Cannot use uderline beceause it does not display with IE */

   /*[c]Cosmetic*/

   color: inherit;
      /* Button label text color on hover, which is */
      /* handled in JavaScript */
      /* Force inherit as the default for A.button is not inherit */
   font-family: "Corbel", "Tahoma", "Trebuchet MS", sans-serif;
   font-weight: bold;
}
/*[cf]*/
/*[of]:A.button.disabled*/
A.button.disabled {
   /* Cannot use uderline beceause it does not display with IE */
   /* But this is finally better, as underlined would means active */

   /*[c]Cosmetic*/

   cursor: default;
      /* Cursor aspect will also reflect */
      /* the button state */
}
/*[cf]*/

/*[c]Specialized buttons*/

/*[of]:A.button.half-left*/
A.button.half-left {

   /*[c]Size*/

   width: 25px;

   /*[c]Position*/

   margin-right: 0;
}
/*[cf]*/
/*[of]:A.button.half-right*/
A.button.half-right {

   /*[c]Size*/

   width: 25px;

   /*[c]Position*/

   margin-left: 0;
}
/*[cf]*/
/*[of]:A.button.half-height*/
A.button.half-height {
   /* There is no top and bottom version as there is left and right */
   /* for half width: half height buttons are symetric. */

   /*[c]Size*/

   height: 39px;

   /*[c]Position*/

   margin-left: 0;
}
/*[cf]*/

/*[of]:A.button.tiny*/
A.button.tiny {
   /* A. is needed, beceause A.button is declared with A. and we need */
   /* to override some A.button definitions */

   /*[c]Size*/

   padding: 0;
   width: 23px; /* Override button's class defaults */
   height: 27px; /* Override button's class defaults */

   /*[c]Position*/

   margin: 1px; /* Override button's class defaults */
}
/*[cf]*/
/*[cf]*/
/*[of]dialog-box.buttonbox:.popup*/
/*[of]:.popup*/
.popup {

   /*[c]Size*/

   padding: 0.20em 1em 0.20em 1em;
   border-width: 3px;
   font-size: 85%;

   /*[c]Visibility*/

   z-index: 1;
      /* Increase this value if ever needed */

   /*[c]Cosmetic*/

   background-color: #FFD7A4;
   border-style: solid;
   border-radius: 15px;
   -o-border-radius: 15px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;

   box-shadow: 10px 10px 5px #754A11;
   -webkit-box-shadow: 10px 10px 5px #754A11;
   -moz-box-shadow: 5px 7px 10px #754A11;
   /* No box-shadow for Safari and IE */
}
/*[cf]*/
/*[of]:.popup .header*/
.popup .header {

   /*[c]Cosmetic*/

   font-variant: small-caps;
}
/*[cf]*/
/*[of]:.popup .header H1*/
.popup .header H1 {

   /*[c]Size*/

   border-bottom-width: 1px;
   padding-bottom: 0.30em;

   /*[c]Position*/

   margin: 0;
   padding-right: 0;
      /* Because it is text-align:right */

   /*[c]Cosmetic*/

   border-bottom-style: solid;
   padding-top: 0.30em;
   text-align: right;
}
/*[cf]*/
/*[of]:.popup .header .controls*/
.popup .header .controls {

   /*[c]Size*/

   font-size: 81%;
   padding-top: 0.20em;
   padding-bottom: 0.40em;

   /*[c]Cosmetic*/

   text-align: left;
}
/*[cf]*/
/*[of]:.popup .header .controls **/
.popup .header .controls * {

   /*[c]Cosmetic*/

   vertical-align: middle;
}
/*[cf]*/
/*[of]:.popup .content*/
.popup .content {

   /*[c]Position*/

   margin-top: 1em;
   margin-right: 2em;

   /*[c]Cosmetic*/

   background-color: transparent;
   border-style: none;
}

/*[cf]*/
/*[of]:.popup .footer*/
.popup .footer {

   /*[c]Size*/

   font-size: 62%;
   border-top-width: 1px;
   padding-top: 0.30em;
   padding-bottom: 0.30em;

   /*[c]Position*/

   margin-bottom: 0;
   margin-top: 0.60em;

   /*[c]Cosmetic*/

   font-variant: small-caps; /* Like .header */
   text-align: left; /* H reversed of .controls */

   /* V Reversed of H2 */
   border-top-style: solid;
}
/*[cf]*/
/*[of]:.popup INPUT.button*/
.popup INPUT.button {
   display: inline-block;
   width: auto;
}
/*[cf]*/

.popup TABLE,
.popup UL,
.popup OL {
}

.popup INPUT {
   background-color: #FFE4C1;
}

.popup INPUT.text,
.popup INPUT.file,
.popup SELECT,
.popup TEXTAREA {
   font-size: 110%;
      /* The default defined is 90%, but .popup define a font-size */
      /* of 85%, and 90% of 85%, while still usable, is not the best */
      /* for input fields. */
}
/*[cf]*/
/*[of]:.selection-info*/
.selection-info {
   height: 5em;
   background-color: #FFEACC;
}


/*[cf]*/
/*[of]:.menu*/
OL.menu,
UL.menu {
   margin-top: 0;
   margin-bottom: 0;
}

.menu LI {
   padding-top: 0;
   padding-bottom: 0.2em;
}
/*[cf]*/
/*[of]:P.controls*/
P.controls {
   margin: 0;
   text-align: left;
   padding-left: 41px; /* Same as padding left of UL/OL. */
}

P.controls A {
   font-size: 90%;
   font-variant: small-caps;
   margin-right: 0.3em;
   white-space: nowrap;
   display: inline-block;
}
/*[cf]*/
/*[of]:.notice*/
.notice {
   font-family: "DejaVu Serif Condensed", "Georgia", "Book Antiqua", serif;
   font-style: italic;
}
/*[cf]*/
/*[of]:.internals*/
.internals {
   display: none;
}
/*[cf]*/
/*[cf]*/

/*[c]Main*/

/*[of]:Navigation*/
/*[of]:#main .path*/
#main .path,
#main .path P {

   /*[c]Size*/

   font-size: 100%;

   /*[c]Cosmetic*/

   font-family: "Trebuchet MS", "DejaVu Sans", "Arial", sans-serif;
   text-transform: lowercase;
}
/*[cf]*/

/*[c]Element link and its sublinks*/

/*[of]:#main .element-link*/
#main .element-link {

   /*[c]Cosmetic*/

   color: #A23A17;
}
/*[cf]*/
/*[of]:#main .element-link.visited,*/
#main .element-link.visited {

   /*[c]Cosmetic*/

   color: #56636C; /*!!! ne semble pas s'appliquer */
}
/*[cf]*/
/*[of]:#main .element-link\:(hover|focus|active),*/
#main A.element-link:focus,
#main A.element-link:hover {
   /* Opera has troubles here, and keep the :focus on links */
   /* even when another element get the focus. */
   
   /* No color defined because otherwise it is to much */
   /* Further more, .element-link already has a kind of focus color */
}

#main A.element-link:active {
   color: #F39618;
}
/*[cf]*/
/*[of]:#main .element-link.selected*/
#main .element-link.selected {

   /*[c]Cosmetic*/

   /* !!! trouver une couleur qui convient ou trouver */
   /* un autre signe distinctif */
}
/*[cf]*/

/*[c]Hoist parent link*/

/*[of]:#main .hoist-parent-link*/
#main .hoist-parent-link {

   /*[c]Flow*/

   display: inline-block; /* To get sizes */

   /*[c]Size*/

   width: 35px;
   height: 19px;
   padding-bottom: 5px; /* to get bottom aligned with font underline */

   /*[c]Position*/

   position: relative;
   top: 4px;
   margin: 0;

   /*[c]Cosmetic*/

   background-image: url("to-parent.png");
   border-style: none; /* For Internet Explorer and some others */
   vertical-align: bottom;
   background-repeat: no-repeat; /* Needed beceause of the padding */
   background-position: 0;
}
/*[cf]*/
/*[of]:#main .hoist-parent-link.visited*/
#main .hoist-parent-link.visited {

   /*[c]Cosmetic*/

   background-position: -35px; /* 35 * -1 */
}
/*[cf]*/
/*[of]:#main .hoist-parent-link\:(hover|focus|active)*/
/* #main A.element-link:focus, #main A.element-link:hover style disabled, */
/* so this one two. */

#main .hoist-parent-link:hover,
#main .hoist-parent-link:focus {

   /*[c]Cosmetic*/

   /*[c]background-position: -70px; /* 35 * -2 */*/
}

#main .hoist-parent-link:active {

   /*[c]Cosmetic*/

   background-position: -70px; /* 35 * -2 */
}
/*[cf]*/
/*[of]:#main .hoist-parent-link.selected*/
#main .hoist-parent-link.selected {

   /*[c]Cosmetic*/

   background-position: -105px; /* 35 * -3 */
}
/*[cf]*/

/*[c]Path connectors*/

/*[of]:#main .path-connector*/
#main .path-connector {

   /*[c]Flow*/

   display: inline-block;
      /* To get access to its sizes from JavaScript */

   /*[c]Size*/

   width: 15px;
   height: 19px;
   padding-bottom: 5px;
      /* to get bottom aligned with font underline */

   /*[c]Position*/

   margin: 0;
   margin-left: 5px;
   margin-right: 5px;

   /*[c]Cosmetic*/

   border-style: none;
      /* For Internet Explorer and some others */
   vertical-align: bottom;
   background-repeat: no-repeat;
      /* Needed beceause of the padding */
   background-position: 0;
      /* Initial value */
}
/*[cf]*/
/*[of]:#main .path-connector.to-outer*/
#main .path-connector.to-outer {

   /*[c]Cosmetic*/

   background-image: url("to-outer.png");
}
/*[cf]*/
/*[of]:#main .path-connector.to-inner*/
#main .path-connector.to-inner {

   /*[c]Cosmetic*/

   background-image: url("to-inner.png");
}
/*[cf]*/
/*[cf]*/

/*[of]:Main*/

/*[c]Main*/

/*[of]:#main*/
#main {
   /* #main is the identfier of the BODY element */

   /*[c]Flow*/

   position: absolute;
      /* To grow with content. JavaScript */
      /* app needs to know sizes and it request it on BODY. */
      /* Body will be centered verticaly by JavaScript. */

   /*[c]Size*/

   padding: 0;
   border-width: 7px 14px 7px 14px;
   width: 966px;
      /* #coreContent width + #left width + */
      /* #left margins */

   /*[c]Position*/

   left: 50%;
      /* Part of centering */
   margin: 0;
      /* Must not have any vertical margins. */
      /* See latter comment on position absolute */
   margin-left: -497px;
      /* Centered, so no both left and right margin. Left margin */
      /* width div 2, less 14 for horizontal borders */

   /*[c]Cosmetic*/

   border-style: solid;
   cursor: default;
      /* To avoid text-cursor on non-editable content. As the */
      /* application is an editor, this is important */
   background-color: #FCF8BE;
      /* Same as the one defined for #content, but this one */
      /* will cover all the viewport */
   border-color: #FCF8BE;
      /* This one will not change at run time, */
      /* and hel^p to not have a hugly sharp switch for inside */
      /* to outside. This is the reason why a border is used instead */
      /* of a padding */
}
/*[cf]*/
/*[of]:#main #content*/
#main #content {

   /*[c]Flow*/

   float: right;
      /* Contains float */

   /*[c]Size*/

   padding: 0;
      /* Defined on BODY only. Use its size */

   /*[c]Position*/

   margin: 0;
      /* Idem */

   /*[c]Cosmectic*/

   background-color: #FCF8BE;
      /* Same as for BODY, but must not use transparent, beceause the */
      /* one of BODY may be redefined at run time. */
}
/*[cf]*/

/*[c]Left pan*/

/*[of]:#main #left*/
#main #left {

   /*[c]Flow*/

   float: left;
   position: relative;

   /*[c]Size*/

   padding: 0;
   width: 160px;
   height: 600px;

   /*[c]Position*/

   margin: 0 6px 0 0;
      /* No left margin, beceause it is in a centered content */
      /* Right margin width + width must be odd */

   /*[c]Visibility*/

   z-index: 1;

   /*[c]Cosmetic*/

   background-color: #FFE4C1; /* Same background color as for statusBar */
}
/*[cf]*/
/*[cf]*/
/*[of]:Left*/
/*[of]:#main #ads*/
#main #ads {

   /*[c]Flow*/

   position: relative;

   /*[c]Visibility*/

   z-index: 1;
}
/*[cf]*/
/*[of]:#childsNavigationPan*/
#childsNavigationPan {

   /*[c]Flow*/

   position: relative;
      /* IE6 bug. Without this, an inner position:relative will */
      /* remain at a fixed position when the overflow:auto content */
      /* is scrolled */

   /*[c]Size*/

   overflow: auto;
   border-width: 1px;
   width: 158px; /* #left with - 2px beceause of border */
   height: 598px; /* #left with - 2px beceause of border */
   padding: 0;

   /*[c]Visibility*/

   z-index: 2;

   /*[c]Cosmetic*/

   border-style: solid;
   border-color: #989678; /* Same border color as for statusBar */
}
/*[cf]*/
/*[of]:Childs sequence view*/
/*[of]:#childsSequenceView*/
#childsSequenceView {

   /*[c]Size*/

   margin: 0;
   padding-right: 4px;
   padding-left: 4px;
   padding-top: 4px;
      /* Same top as for statusBar */
   padding-bottom: 4px;
}
/*[cf]*/
/*[of]:#childsSequenceView .list-index*/
#childsSequenceView .list-index {

   /*[c]Size*/

   font-size: 62%;
   padding: 0.50em 1em 0 0;
   
   /*[c]Cosmetic*/

   font-family: "David Transparent", "David", "Cambria", serif;
}
/*[cf]*/
/*[of]:#childsSequenceView .element-link*/
#childsSequenceView .element-link {
   font-size: 88%;
}
/*[cf]*/
/*[of]:#childsSequenceView P*/
#childsSequenceView P {

   /*[c]Size*/

   padding-top: 3px;
   padding-right: 3px;
   padding-bottom: 5px;
   padding-left: 3px;
   border-bottom-width: 1px;
   overflow: hidden;
      /* Height is not constrained */
      /* Does not fully work as expected with IE6, but */
      /* do not mind, and any way, it is not so bad */

   /*[c]Position*/

   margin-top: 5px;
   margin-right: 0px;
   margin-bottom: 3px;
   margin-left: 1px; /* Same as .marked left border width */

   /*[c]Cosmetic*/

   text-align: left;
   border-bottom-style: dashed;
}
/*[cf]*/
/*[of]:#childsSequenceView P.header*/
#childsSequenceView P.header {
   /* Must be before P.marked */

   /*[c]Size*/

   border-bottom-width: 4px;

   /*[c]Cosmetic*/

   border-bottom-style: solid;
   border-color: #989678;
}
/*[cf]*/
/*[of]:#childsSequenceView P.marked*/
#childsSequenceView P.marked {
   /* Must be after P.header */

   /*[c]Size*/

   border-width: 2px;
   border-width: 1px 1px 4px 1px;
   padding-bottom: 31px;

   /*[c]Position*/

   margin-left: 0;

   /*[c]Cosmetic*/

   border-style: solid;
   background-image: url("edit.png");
   background-position: 97% 95%;
   background-repeat: no-repeat;
}
/*[cf]*/
/*[of]:#childsSequenceView.disabled P.marked*/
#childsSequenceView.disabled P.marked {

   /*[c]Cosmetic*/

   background-image: url("edit-grayed.png");
}
/*[cf]*/
/*[of]:#childsSequenceView .sublinks-control*/
#childsSequenceView .sublinks-control {

   /*[c]Flow*/

   display: block;

   /*[c]Size*/

   padding: 0;
   width: 125px; /* 23 * 5 + 4 * 2 + 1 + 1 */

   /*[c]Position*/

   margin: 0;
   margin-top: 3px;
   margin-bottom: 6px;
}
/*[cf]*/
/*[of]:#childsSequenceView .element-title|.element-excerpt*/
#childsSequenceView .element-title,
#childsSequenceView .element-excerpt {

   /*[c]Flow*/

   display: block;

   /*[c]Size*/

   font-size: 65%;
   padding-top: 2px;
   padding-bottom: 2px;
   
   /* A compact styke for a narrow width area */
   line-height: 110%;
   letter-spacing: 0;
   word-spacing: 0;

   /*[c]Cosmetic*/

   color: #0C3551;
}
/*[cf]*/
/*[cf]*/
/*[cf]*/
/*[of]:Top*/
/*[of]:#main #top*/
#main #top {

   /*[c]Flow*/

   float: right;
   position: relative;

   /*[c]Size*/

   padding: 0;
   width: 800px;
      /* coreContent width */
   overflow: visible;
      /* Contains floats, which does not make it grows, and it must */
      /* not, because #elementNameSelect which is display none, must */
      /* not make it grow when is it made display block */

   /*[c]Position*/

   margin: 0;

   /*[c]Visibility*/

   z-index: 3;
   /* #dialogs-frame is level 1 */
   /* #editable      is level 2 */
   /* #top           is level 3 */
   /* #messageBox    is level 4 */
   /* This way, when the #elementNameSelect is opened, it displays */
   /* above the document content, althought it appears before in */
   /* the stream. Further more, it displays below the message box. */
   /* Whenever a message box opens, it is still displayed above */
   /* the select control. */

   /*[c]Cosmetic*/

   background: transparent;
   /* Correct bug for IE6 */
}
/*[cf]*/
/*[of]:#main #top P*/
#main #top P {

   /*[c]Size*/

   white-space: nowrap;

   /*[c]Position*/

   margin: 0;
}
/*[cf]*/
/*[of]:Status bar*/

/*[c]Status bar*/

/* Where current path and file name are displayed */

/*[of]:#main #statusBar*/
#main #statusBar {
   /* Right padding is larger beceause text on the right is italic */

   /*[c]Flow*/

   position: relative;
      /* Context for inner absolutely positioned elements */

   /*[c]Size*/

   width: 787px;
   line-height: 28px;
      /* Must be bigger than font-size of #infoStatus and #fileNameDisplay */
   padding: 4px 6px 3px 5px;
   border-width: 1px;
   overflow: hidden;

   /*[c]Position*/

   margin-bottom: 4px;

   /*[c]Cosmetic*/

   border-style: solid;
   border-color: #989678;
   background-color: #FFE4C1; /* Same background color as for #left */
}
/*[cf]*/

/*[c]Status bar components*/

/*[of]main-window-infostatus:#elementPathView*/
#elementPathView {

   position: relative;

   /*[c]Size*/

   padding-right: 7px;

   /*[c]Position*/

   top: -2px;
   left: 0;
   margin: 0;

   /*[c]Cosmetic*/

   text-align: left;
}
/*[cf]*/
/*[of]main-window-filenamedisplay:#main #fileNameView*/
/*[of]:#main #fileNameView*/
#main #fileNameView {

   /*[c]Flow*/

   position: absolute;

   /*[c]Size*/

   border-left-width: 1px;
   padding-left: 7px;

   /*[c]Position*/

   right: 3px;
   bottom: 3px;

   /*[c]Cosmetic*/

   color: #A23A17;
   font-family: "DejaVu Serif Condensed", "Georgia", "Book Antiqua", serif;
   letter-spacing: 1px;
   font-style: italic;
   background: inherit;
      /* Not transparent, so it can hide any overflow of #elementPathView */
   border-left-style: solid;
   border-left-color: #989678;
}
/*[cf]*/
/*[of]:#main #fileNameView\:first-letter*/
#main #fileNameView:first-letter {
   /*text-transform: capitalize;*/
      /* An Opera bug with this, so removed */
      /* and handled by javascript instead */

}
/*[cf]*/
/*[cf]*/
/*[of]:#main #fileFormatView*/
#main #fileFormatView {

   /*[c]Flow*/

   position: absolute;

   /*[c]Position*/

   top: 3px;
   right: 4px;
}
/*[cf]*/
/*[cf]*/
/*[of]prsentation:Présentation and logo*/
/*[of]:#presentation*/
#presentation {
   /* Fixed dimmensions */

   /*[c]Flow*/

   float: left;
   overflow: hidden;
      /* Beceause of fixed width */

   /*[c]Size*/

   width: 230px;

   /*[c]Cosmetic*/

   background: transparent;
}
/*[cf]*/
/*[of]:#logo*/
#logo {

   /*[c]Size*/

   height: 37px;
   padding: 6px 0 0 0;
   width: 200px;
      /* 200 + 6 = 206 */
      /* 206 < 230 */

   /*[c]Position*/

   margin: 8px 0 0 5px;

   /*[c]Cosmetic*/

   background: transparent;
}
/*[cf]*/

/*[cf]*/
/*[of]:.controls-box*/
/*[of]:.controls-box*/
#top .controls-box {
   /* The one with buttons and controls */

   /*[c]Size*/

   padding: 0;

   /*[c]Position*/

   margin: 0;

   /*[c]Cosmetic*/

   background: transparent;
}
/*[cf]*/
/*[of]:#top .commands A.button*/
#top .commands A.button {

   /*[c]Flow*/

   float: right;
}
/*[cf]*/
/*[of]panel-1-sub-2:#top .editables-box*/
/*[of]:#top .editables-box*/
#top .editables-box {
   /* The one with select and text controls */

   /*[c]Flow*/

   float: left;
      /* Was to be float:right, but fails due to a FireFox 6 bug. */
      /* Luckily, float:left ends to something acceptable */
}
/*[cf]*/

/* 155 + 400 = 555 */
/* 555 is #top .controls-box client width */
/* 400 is #top .commands full width */

/*[of]:#top .editables-box **/
#top .editables-box * {

   position: relative;

   /*[c]Size*/

   font-size: 15px;

   /*[c]Cosmetic*/

   font-family: "Corbel", "Tahoma", "Trebuchet MS", sans-serif;
   vertical-align: middle;
}
/*[cf]*/
/*[of]:#top .editables-box INPUT|LABEL*/
#top .editables-box INPUT,
#top .editables-box LABEL {

   /* Only on INPUT and LABEL, must not apply on SELECT */

   /*[c]Size*/

   height: 18px;
   margin: 5px 0 3px 0;
}
/*[cf]*/
/*[of]:#top .editables-box INPUT|SELECT*/
#top .editables-box INPUT.text,
#top .editables-box SELECT {

   /*[c]Cosmetic*/

   border-style: solid;
   background-color: #FFE4C1;
   border-color: #989678;
}
/*[cf]*/
/*[of]:#top .editables-box INPUT*/
#top .editables-box INPUT {

   /*[c]Size*/

   border-width: 1px;
   width: 85px;
   padding: 0 2px 0 2px;
}
/*[cf]*/
/*[of]:#top .editables-box LABEL*/
#top .editables-box LABEL {

   /*[c]Flow*/

   display: inline-block;

   /*[c]Size*/

   width: 80px;
   overflow: hidden;

   /*[c]Cosmetic*/

   text-align: right;
   color: #989678;
      /* Same as button text color */
}
/*[cf]*/
/*[of]:#top .editables-box #elementNameSelect*/
#top .editables-box #elementNameSelect {

   /*[c]Flow*/

   position: absolute;
      /* Must go out of the flow when it is made visible */
   display: none;
      /* Initial value. Can switch to block */

   /*[c]Size*/

   width: 0em;
      /* IE hack. Without this, IE (up to 8) does not handle min-width. */
      /* The value of width may be anyone smaller that of min-width. */
      /* However, as a side effect, this also make it not properly */
      /* handle any "right" property. Fortunately, we do not use one. */
   min-width: 9.5em;
   font-size: 125%;

   height: auto;
      /* Required, because it has a size attribute defined in HTML, */
      /* and the default style defines a height of 1.6em */

   /*[c]Position*/

   border-width: 6px;
   border-color: #DABE85;
      /* Give it the same color as the #document IFRAME.focus */
   border-style: solid;

   /* Opera would require a "right: 0" here, but due to the side */
   /* effect of an IE bug workaround (see above), we must not do it, */
   /* as otherwise this cause more troubles with IE than it do with */
   /* without this "right: 0" property. Opera simply display the */
   /* select centered, instead of align on the right. That's OK, */
   /* not so bad. */
}
/*[cf]*/
/*[of]:#top .editables-box #elementNameSelect OPTION*/
#top .editables-box #elementNameSelect OPTGROUP,
#top .editables-box #elementNameSelect OPTION {

   /*[c]Bug*/

   font-size: inherit;
      /* Without this, FireFox does not applies the font-size */
      /* given for the SELECT */
}
/*[cf]*/
/*[cf]*/
/*[cf]*/
/*[cf]*/
/*[of]:Document*/

/*[c]Panel layout*/

/*[of]:#main #document*/
#main #document {

   /*[c]Flow*/

   float: left;
   position: relative; /* Pour être un référenciel de positionement abso. */

   /*[c]Size*/

   padding: 0;
   width: 688px;
      /* 688 + 1 + 1 = 690 */
      /* 690 + 110 = 800 = coreContent width */
   height: 483px;
      /* Ajustable librement */
   border-width: 1px;

   /*[c]Position*/

   margin: 0;

   /*[c]Cosmetic*/

   border-style: solid;
   border-color: #0C3551; /* Same as status small text color */
}
/*[cf]*/

/*[c]Panel components*/

/*[of]:#main #document IFRAME*/
#main #document IFRAME {

   /*[c]Flow*/

   position: absolute;

   /*[c]Size*/

   padding: 0;
   border-width: 4px;
   width: 680px;
      /* 680 + 4 + 4 = 688 = #document width */
   height: 475px;
      /* 475 + 4 + 4 = 483 = #right height */

   /*[c]Position*/

   top: 0;
   margin: 0;

   /*[c]Cosmetic*/

   border-style: solid;
   border-color: #989678;
   background-color: #989678;
}
/*[cf]*/
/*[of]:#main #document IFRAME.(blur|focus)*/
#main #document IFRAME.blur {
   /* Keep default border color */
   border-color: #989678;
}

#main #document IFRAME.focus {
   border-color: #DABE85; /*#DEC487 #D6B87A;*/
}
/*[cf]*/
/*[of]dialog-box:#dialogs-frame*/
#dialogs-frame {

   /*[c]Visibility*/

   z-index: 1;
   /* See comments about #top */
}

/*[c]See also dialog box section of this file*/
/*[cf]*/
/*[of]:#main #editable*/
#main #editable {

   /*[c]Visibility*/

   z-index: 2;
   /* See comments about #top */
}

/*[l]:base-elements-styles.css:base-elements-styles.css*/
/*[cf]*/
/*[of]message-box:#main #messageBox*/
/*[of]:#main #messageBox*/
#main #messageBox {

   /*[c]Flow*/

   display: none;
      /* Initiale value */
   position: absolute;
      /* Positioned in #document, and by the way a reference */
      /* for inner positionned elements. */

   /*[c]Size*/

   padding: 0;
      /* Pour l'instant ici */
   width: 60%;

   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 6px; /* 6 = left image width - left border width */
   padding-right: 6px; /* 6 = right image width - right border width */

   border-left-width: 6px;
   border-right-width: 6px;

   /*[c]Position*/

   left: 50%;
   margin-left:-32%; /* width div 2 + adjust */
   bottom: 10%;

   /*[c]Visibility*/

   z-index: 4;
   /* See comments about #top */

   /*[c]Cosmetic*/

   border-left-style: solid;
   border-right-style: solid;
   background-color: #FCF8BE;

   box-shadow: 10px 20px 20px #754A11;
   -webkit-box-shadow: 10px 20px 20px #754A11;
   -moz-box-shadow: 10px 20px 20px #754A11;
   /* No need for -o-box-shadow, as Opera supports */
   /* box-shadow straight away */
}
/*[cf]*/
/*[of]frame-with-round-corners:#MBB2, #MBB4, #MBC1..#MBC4*/
/*[c]Ajout des bordures hautes et basses sur l'extérieur en positionement relatif aprés le flux*/

/*[of]:#MBB2 & #MBB4*/
#MBB2,
#MBB4 {

   /*[c]Flow*/

   position: relative;
      /* Common to MBB2 and MBB4 */
      /* Position defined for each */

   /*[c]Size*/

   padding: 0;
   width: 100%;

   /*[c]Position*/

   margin: 0;

   /*[c]Cosmetic*/

   background: transparent;
   background-color: #FCF8BE; /* For adjustement only */
}
/*[cf]*/
/*[of]:#MBB2*/
#MBB2 {

   /*[c]Size*/

   border-top-width: 6px; /* 6 = top border width */
   height: 8px; /* 6 = top image height - top border width, +2 */

   /*[c]Position*/

   top: -8px; /* 8 = height */

   /*[c]Cosmetic*/

   border-top-style: solid;
}
/*[cf]*/
/*[of]:#MBB4*/
#MBB4 {

   /*[c]Size*/

   height: 8px; /* 6 = bottom image height - bottom border width, +2 */
   border-bottom-width: 6px; /* 6 = bottom border width */

   /*[c]Position*/

   bottom: -8px; /* 8 = height */

   /*[c]Cosmetic*/

   border-bottom-style: solid;
}
/*[cf]*/

/*[c]Ajout des quatres coins en positionement absolu*/

/*[of]:#MBC1, MBC2, MBC3, MBC4*/
#MBC1,
#MBC2,
#MBC3,
#MBC4 {
   /* Image for round corners : square matching border size */

   /*[c]Flow*/

   position: absolute;
      /* Positioned in #messageBox */

   /*[c]Size*/

   width: 12px;
   height: 12px;
}
/*[cf]*/
/*[of]:#MBC1*/
#MBC1 {

   /*[c]Position*/

   top: -8px; /* -top left image height, -2 */
   left: -6px; /* -top left image width */
}
/*[cf]*/
/*[of]:#MBC2*/
#MBC2 {

   /*[c]Position*/

   top: -8px; /* -top right image height, -2 */
   right: -6px; /* -top right image width */
}
/*[cf]*/
/*[of]:#MBC3*/
#MBC3 {

   /*[c]Position*/

   bottom: -8px; /* bottom left image height, -2 */
   right: -6px;
}
/*[cf]*/
/*[of]:#MBC4*/
#MBC4 {

   /*[c]Position*/

   bottom: -8px; /* bottom right image height, -2 */
   left: -6px;
}
/*[cf]*/
/*[cf]*/
/*[of]:#messageBoxClientArea*/
#messageBoxClientArea {

   /*[c]Size*/

   padding: 0;

   /*[c]Position*/

   margin: 0;
}
/*[cf]*/
/*[of]:#messageBoxText*/
#messageBoxText  {

   /*[c]Size*/

   padding: 0 1em 0.40em 1em;
   font-size: 95%;

   /*[c]Position*/

   margin: 0;

   /*[c]Cosmetic*/

   background: transparent;
}

#messageBoxText H1 {
}

#messageBoxText CAPTION,
#messageBoxText H2 {
   letter-spacing: 0;
}

#messageBoxText H2 {
   border-bottom-style: dotted;
   padding-bottom: 0.40em;
   border-width: 1px;
}

#messageBoxText P,
#messageBoxText BLOCKQUOTE {
   text-align: left;
}
/*[cf]*/
/*[of]:#messageBoxText.scrollable*/
#messageBoxText.scrollable {
   border-width: 1px;
   border-top-style: dashed;
   border-left-style: dashed;
   border-bottom-style: dashed;
   padding-top: 16px;
}
/*[cf]*/
/*[of]:Message box controls*/
/*[of]:#messageBox .controls*/
#messageBox .controls {

   /*[c]Size*/

   padding: 0;

   /*[c]Position*/

   margin: 0.40em 1em 0.40em 1em;

   /*[c]Cosmetic*/

   text-align: center;
   vertical-align: middle;
}
/*[cf]*/
/*[of]:IMG#waitMBIcon*/
IMG#waitMBIcon {

   /*[c]Flow*/

   display: inline;
      /* Initial value, switched to none by JavaScript when the */
      /* application is ready */

   /*[c]Size*/

   width: 220px; /* Fixed. From image source */
   height: 19px; /* Fixed. From image source */
   padding: 0;

   /*[c]Position*/

   margin: 0.7em;
}
/*[cf]*/
/*[of]:#messageBox .button*/
#messageBox .button {
   background-color: #FFD7A4;
}
/*[cf]*/
/*[cf]*/
/*[cf]*/
/*[cf]*/
/*[of]:Right*/

/*[c]Panel layout*/

/*[of]:#right*/
#right {

   /*[c]Flow*/

   float: right;

   /*[c]Size*/

   width: 110px;
      /* 110 + 690 = 800 */
   padding: 0;

   /*[c]Position*/

   margin: 0;

   /*[c]Cosmetic*/

   background: transparent;
}
/*[cf]*/
/*[of]:#right .commands A.button*/
#right .commands A.button {

   /*[c]Flow*/

   float: right;
}
/*[cf]*/
/*[of]:#right .separator*/
#right .separator {

   /*[c]Flow*/

   float: right;

   /*[c]Size*/

   width: 100px;
   height: 2px;

   /*[c]Position*/

   margin: 7px 0 14px 0;

   /*[c]Cosmetic*/

   background-color: #989678;

   /*[c]Bug*/

   font-size: 0;
      /* IE6 Bug. Otherwise it assign the outer line height */
      /* this element height */
}
/*[cf]*/

/*[c]Notifications*/

/*[of]:#main .notifications*/
#main .notifications {

   /*[c]Flow*/

   float: right;
   overflow: hidden;

   /*[c]Size*/

   width: 100px;
      /* Must give it a width due to an IE bug */
   padding: 0;

   /*[c]Position*/

   margin: 0;
   clear: right;

   /*[c]Cosmetic*/

   background: transparent;
}
/*[cf]*/
/*[of]:#main .notifications P*/
#main .notifications P {

   /*[c]Flow*/

   display: none;
   float: right;
      /* Valeur initiale */

   /*[c]Size*/

   padding: 0;
   font-size: 12px;
      /* Cannot share with inherit : IE bug here */

   /*[c]Position*/

   margin: 5px 0 0 0;

   /*[c]Cosmetic*/

   font-family: "Yanone Kaffeesatz", "Cordia New", "Kartika", sans-serif;
   background: transparent;
}
/*[cf]*/
/*[of]:#enforceRulesView*/
#enforceRulesView {

   /*[c]Cosmetic*/

   color: #0C3551;
}
/*[cf]*/
/*[of]:#readOnlyView*/
#readOnlyView {

   /*[c]Cosmetic*/

   color: #0C3551;
}
/*[cf]*/
/*[of]:#debugModeView*/
#debugModeView {

   /*[c]Cosmetic*/

   color: #989678;
}
/*[cf]*/
/*[cf]*/
/*[of]:Footer*/
/*[of]:#footer*/
#footer {

   /*[c]Flow*/

   float: right;
      /* Either float left or right, this ends into the same result. */
      /* It has to be float:anything, because its previous siblings are */
      /* all floats and they defines margins. */
}
/*[cf]*/
/*[of]:#footer P*/
#footer P {

   /*[c]Size*/

   padding: 7px 0 7px 0;
   border-width: 1px;
   width: 964px; /* 964 = main-window width less 2 px*/
      /* due to the border */

   /*[c]Position*/

   margin: 12px 0 0 0;

   /*[c]Cosmetic*/

   border-style: solid;
   vertical-align: middle;
   text-align: center;
   background-color: #AFCDE2; /* Same background color as for #left */
   color: #7598B1;
}
/*[cf]*/
/*[of]:#footer P A|IMG*/
#footer P A,
#footer P IMG {

   /*[c]Flow*/

   display: inline;

   /*[c]Cosmetic*/

   vertical-align: middle;
   background: transparent;
}
/*[cf]*/
/*[of]:#footer P A*/
#footer P A {

   /*[c]Size*/

   font-size: 81%;

   /*[c]Position*/

   margin-right: 0.80em;

   /*[c]Cosmetic*/

   font-family: "DejaVu Serif Condensed", "Georgia", "Book Antiqua", serif;
   letter-spacing: 0.08em;
   word-spacing: 0.12em;
   color: #7598B1; /* Overidde browser default */
}
/*[cf]*/
/*[of]:#footer P A.rss-icon*/
#footer P A.icon {
   border-bottom-color: transparent;
}
/*[cf]*/
/*[of]:#footerDeco*/
#footerDeco {

   /*[c]Position*/

    margin-top: 12px; /* Same as font size */
}
/*[cf]*/
/*[cf]*/

/*[c]Dialogs*/

/*[of]:Dialogs*/
/*[of]body.dialog-box:#dialog*/
#dialog {
   /* #dialog is an identfier of a BODY element */

   /*[c]Flow*/

   position: relative;
      /* For positionning of #messageButtonsBox */

   /*[c]Size*/

   padding: 0;
   width: 500px;
      /* width is fixed for beautifying reason only */
   min-height: 472px;
      /* To force display of the vertical scroll bar, and avoid it to */
      /* appear and disappear depending on content. */
      /* Does not work with IE6 */

   /*[c]Position*/

   margin: auto;

   /* About this one : */
   /* Must use position:absolute instead of position:relative, */
   /* beceause with IE and position:relative, the outer HTML element */
   /* grow in width bigger than the frame client width. */
   /* In this case, IE adds the left offset to the overall content */
   /* width, seeming to forget the was a left-margin (it forgets the */
   /* left margin while computing the overall width, but still apply */
   /* the left margin). */

   /*[c]Cosmetic*/

   background-color: #FFD7A4;
      /* The background color is choosed so that it make a smooth
         transition while the background image is loaded. Its color
         is choosen to be as near as possible to the dominant color
         of the background image. */
   cursor: default;
      /* To avoid text-cursor on non-editable text */

   /* Center horizontally. Cannot use "margin: 0 auto", due to an */
   /* IE7 bug (was working fine on IE6) */

}
/*[cf]*/
/*[of]dialog-box.outercontainer:.section*/
#dialog .section {
   /* Always a direct child of BODY#dialog */

   /* outerContainer defines horizontal metrics */
   /* referece for elements to be appended verticaly */

   /*[c]Size*/

   padding: 0;
      /* Use margins of .controlGroup instead */
   border-width: 1px;

   /*[c]Position*/

   margin: 0.6em 0;

   /*[c]Cosmetic*/

   border-style: solid;
   background-color: #E2C1E3;
   border-color: #56636C;

   /*[c]Bug*/

   overflow: auto;
      /* Without this, IE does not takes the bottom margin of contained */
      /* .group into account in the .section height */
}
/*[cf]*/
/*[of]dialog-box.controlgroup:.group*/
/* .group are always inside a .section */

/*[of]:#dialog .group*/
#dialog .group {
   /* Always a direct child of an .outerContainer */

   /*[c]Size*/

   width: 482px;

   /*[c]Position*/

   margin: 0.8em auto;
}
/*[cf]*/
/*[of]:#dialog .group.first*/
#dialog .group.first {
}
/*[cf]*/
/*[of]:#dialog .group.last*/
#dialog .group.last {
}
/*[cf]*/
/*[of]:#dialog .group .content*/
#dialog .group .content {

   /*[c]Size*/

   overflow: auto;
      /* Avoid inner element's margins to collapse with sibling's ones */
   padding: 0.3em 0.4em;
   height: 100%;
      /* IE6 bug. The height:100% give the hasLayout to this, */
      /* requesting it to draw itself without disturbing what comes */
      /* after. Without this, IE6 will shift the content which follow, */
      /* To the right. */
   border-left-width: 1px;
   border-right-width: 1px;

   /*[c]Position*/

   margin: 0;

   /*[c]Cosmetic*/

   background-color: #FFE4C1;
   border-left-style: solid;
   border-right-style: solid;
   text-align: right;
      /* For direct inline block childs */
}
/*[cf]*/
/*[of]:#dialog .group .deco*/
#dialog .group .deco {

   /*[c]Flow*/

   display: block;

   /*[c]Size*/

   width: 482px;
   height: 9px;
   padding: 0;

   /*[c]Position*/

   margin: 0;

   /*[c]Cosmetic*/

   background-repeat: no-repeat;

   /*[c]Bugs*/

   font-size: 1px;
      /* IE6 bug : IE6 interpret the empty content as a blank line. */
      /* Tje font-size:1px, avoid IE6 to display this. */
}
/*[cf]*/
/*[of]:#dialog .group .deco.top*/
#dialog .group .deco.top {

   /*[c]Cosmetic*/

   background-image: url("dialog-section-haut.png");
}
/*[cf]*/
/*[of]:#dialog .group .deco.bottom*/
#dialog .group .deco.bottom {

   /*[c]Cosmetic*/

   background-image: url("dialog-section-bas.png");
}
/*[cf]*/
/*[of]:#dialog .group UL|OL*/
#dialog .group UL,
#dialog .group OL {

   /*[c]Cosmetic*/

   text-align: left;
}
/*[cf]*/
/*[cf]*/
/*[cf]*/
/*[of]elements:Elements*/
/*[of]input-select-option:#dialog INPUT, LABEL, OPTION, SELECT, TEXTAREA, TH*/
/*[of]:#dialog INPUT.text, INPUT.file, OPTION, SELECT, TEXTAREA\: colors and fonts*/
#dialog INPUT.text,
#dialog INPUT.file,
#dialog OPTION,
#dialog SELECT,
#dialog TEXTAREA {
   background-color: #FFD7A4;
   color: inherit;
      /* Safari modify the color for INPUT, while leaving it */
      /* as-is for SELECT. Safari turns #871C1C into #FF0000, so */
      /* need to force inherit for this browser */
}
/*[cf]*/
/*[of]:#dialog OPTION\: colors and fonts*/
#dialog OPTION.highlight {
   color: #7598B1;
}

#dialog OPTION.unassigned {
   color: #56636C;
   font-style: italic;
}
/*[cf]*/
/*[of]:#dialog INPUT.text, INPUT.file, SELECT, TEXTAEZA\: h-metrics*/
#dialog INPUT.file {
   width: auto;
      /* INPUT[type="file"] cannot be safely resized in any */
      /* major browser. */
}

#dialog INPUT.text,
#dialog INPUT.text.value {
   width: 12.5em;
       /* See SELECT.value width */
       /* In some context, INPUT.value may appear in place of */
       /* a SELECT. SELECT is given a width which makes it appears */
       /* the same width as INPUT.value */
}

#dialog INPUT.text.name {
   width: 9em;
       /* See SELECT width */
}

#dialog SELECT {
   width: 13em; /* See INPUT width */
}

#dialog TEXTAREA {
   width: 20em;
}

#dialog .popup INPUT.text,
#dialog .popup TEXTAREA {
   width: 19em;
}

#dialog .popup SELECT {
   width: 12em; /* See INPUT width */
}
/*[cf]*/
/*[of]:#dialog LABEL, TH\: text align*/
#dialog LABEL {
   text-align: right;
}

#dialog TH {
   text-align: left;
}
/*[cf]*/
/*[of]:TD INPUT*/
TD INPUT {
   width: 10em;
}
/*[cf]*/
/*[of]:#dialog .single-option*/
#dialog .single-option LABEL,
#dialog .single-option SELECT,
#dialog .single-option INPUT {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

#dialog .single-option LABEL {
   text-align: center;
}

#dialog .single-option SELECT,
#dialog .single-option INPUT {
   margin-top: 1.3em;
   margin-bottom: 1.3em; /* Same as margin-top */
}
/*[cf]*/
/*[of]:#dialog .erroneous*/
#dialog INPUT.text.erroneous,
#dialog INPUT.file.erroneous,
#dialog SELECT.erroneous,
#dialog TEXTAREA.erroneous {
   border-color: #FF0000; /* The error color */
   background-color: #FFD7D7; /* The error background color */
}

#dialog INPUT.text.name.erroneous,
#dialog LABEL.erroneous {
   color: #FF0000;
}

#dialog .erroneous INPUT.text,
#dialog .erroneous INPUT.file,
#dialog .erroneous SELECT,
#dialog .erroneous TEXTAREA {
   border-color: #FF0000; /* The error color */
   background-color: #FFD7D7; /* The error background color */
}

#dialog .erroneous INPUT.text.name,
#dialog .erroneous INPUT.file,
#dialog .erroneous LABEL {
   color: #FF0000;
}
/*[cf]*/
/*[cf]*/
/*[of]hn-label-th:#dialog .message H2*/
#dialog .message H2 {
   border-top-style: dotted;
   border-top-width: 1px;
   padding-top: 0.40em;
}
/*[cf]*/
/*[of]table-table:#dialog .message P*/
#dialog .message P,
#dialog .message BLOCKQUOTE { /* !!! Hack à revoir */
   text-align: left;
   clear: left; /* .message H2 are float:left */
}

#dialog .message P:first-letter,
#dialog .message BLOCKQUOTE:first-letter {
   font-size: 120%;
   margin-right: 0.2ex;
   font-family: "David Transparent", "David", "Cambria", serif;
}
/*[cf]*/
/*[of]:#dialog .popup*/
#dialog .popup .controls {
   float: none;
   text-align: left;
}

#dialog .popup .content {
   margin-top: 1em;
   margin-right: 2em;
   background-color: transparent;
   border-style: none;
   overflow: visible;
   padding-top: 0;
   padding-bottom: 0;
}
/*[cf]*/
/*[of]p-span-others:#dialog Others*/
#dialog P.selection-info {
   font-size: 90%;
      /* Smaller than normal text size, to save room in a restricted */
      /* size area */
   text-align: right;
   margin: 0 0.2em 1.2em 0.2em;
   padding: 0.2em 0.3em;
   border-style: dashed;
   border-width: 1px;
   overflow: auto;
}

#dialog P .node-name,
#dialog LI .node-name {
   font-family: "Calibri", "Corbel", "Segoe UI", sans-serif;
}

#dialog .parenthesis {
   font-style: italic;
}

#dialog .lasidore-name {
   font-style: italic;
   font-weight: normal;
}
/*[cf]*/
/*[cf]*/
/*[of]:Help and error message*/
/*[of]:Messages boxes*/
#dialog #helpMessageBox {
   background-color: #6D566E;
   /* Possible values are : */
   /* background-color: #6D566E; */
   /* background-color: #500C52; */
}

#dialog #errorMessageBox {
   background-color: #FF0000; /* The error background color */
}
/*[cf]*/
/*[of]:Boxes intial states*/
#dialog #helpMessageBox,
#dialog #errorMessageBox {
   /* display:none is an initial value, which will be dinamicaly
   * switched to display:block. */
   display: none;
}
/*[cf]*/
/*[of]:Message buttons box*/
#dialog #messageButtonsBox {
   position: absolute;
      /* Positionned in #dialog */
   right: -65px;
   top: 0.8em; /* Same as .goup top margin */
   width: 50px;
}
/*[cf]*/
/*[of]:.message .button*/
.message .button {
   float: right;
   margin: 0.40em 0 0.40em 1em;
}
/*[cf]*/
/*[cf]*/
/*[of]:.controls*/
/*[of]:#dialog DIV.controls*/
#dialog DIV.controls {
   padding: 0;
   text-align: center;
      /* Cannot use inline-block due to IE, and cannot use the */
      /* inline-block hack for IE, beceause a width is later specified, */
      /* which would be ignored. */
   background: transparent;
   float: left;
}
/*[cf]*/
/*[of]:#dialog .one-button-group DIV.controls*/
#dialog .one-button-group DIV.controls {
   width: 100%;
}
/*[cf]*/
/*[of]:#dialog .two-buttons-group DIV.controls*/
#dialog .two-buttons-group DIV.controls {
   width: 49%;
}
/*[cf]*/
/*[of]:#dialog .three-buttons-group DIV.controls*/
#dialog .three-buttons-group DIV.controls {
   width: 33%;
}
/*[cf]*/
/*[of]:#dialog .four-buttons-group DIV.controls*/
#dialog .four-buttons-group DIV.controls {
   width: 25%;
}
/*[cf]*/
/*[cf]*/

/*[c]Specialized dialogs*/

/*[of]help-dialog-box:Help dialog*/

/*[c]Mainly definition of contextual text colors*/

/*[of]:#dialog.help-on-element P.controls*/
#dialog.help-on-element P.controls {
   display: none; /* Initial value, changed in JavaScript */
}
/*[cf]*/
/*[of]:#dialog .area*/
#dialog .area {
}
/*[cf]*/
/*[cf]*/
/*[of]:#dialog.explorer*/
#dialog.explorer {
   padding-left: 5px;
   padding-right: 5px;
   width: auto;
}

#dialog.explorer .section {
   padding-left: 10px;
   padding-right: 10px;
   width: auto;
}

#dialog.explorer .group {
   width: auto;
}

#dialog.explorer .group .deco {
   height: 8px; /* Image height less border width : 9 - 1 = 8 */
   position: relative;
   background-color: #FFE4C1;
   width: auto;
   margin-left: 50px; /* Image width */
   margin-right: 50px; /* Image width */
}

#dialog.explorer .group .content {
}

#dialog.explorer .group .deco.top {
   background-image: none; /* Override default */
   border-top-style: solid;
   border-top-width: 1px;
   border-top-color: #754A11;
}

#dialog.explorer .group .deco.bottom {
   background-image: none; /* Override default */
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: #754A11;
}

#dialog.explorer .group .deco.top .left,
#dialog.explorer .group .deco.top .right,
#dialog.explorer .group .deco.bottom .left,
#dialog.explorer .group .deco.bottom .right {
   width: 50px;
   height: 9px;
   position: absolute;
}

#dialog.explorer .group .deco.top .left {
   background-image: url("top-left.png");
   left: -50px; /* Image width */
   top: -1px; /* Border width */
}
#dialog.explorer .group .deco.top .right {
   background-image: url("top-right.png");
   right: -50px; /* Image width */
   top: -1px; /* Border width */
}
#dialog.explorer .group .deco.bottom .left {
   background-image: url("bottom-left.png");
   left: -50px; /* Image width */
   bottom: -1px; /* Border width */
}
#dialog.explorer .group .deco.bottom .right {
   background-image: url("bottom-right.png");
   right: -50px; /* Image width */
   bottom: -1px; /* Border width */
}

#dialog.explorer #messageButtonsBox {
   position: static;
   margin-top: 0.8em; /* Same as .goup top margin */
   width: 50px;
   float: right;
   margin-left: 0.8em; /* Same as margin top, for harmony */
   margin-right: 0.8em;

   /*[c]Bug*/

   /* An IE6 bug: overflow:auto is not properly handled beside of */
   /* a float, and the #messageButtonsBox cover the content, and */
   /* the content has element with an higher z-index. There no way */
   /* to really solve the bug, but at least, try to avoid the bigger */
   /* trouble. Given a z-index, then to be able to, set it position */
   /* relative, then this requires to reset left and top defined */
   /* as the default */

   z-index: 1;
   position: relative; /* Needed to apply z-index */
   left: 0; /* Override default */
   top: 0; /* Override default */
}

#dialog.explorer .section.message .group .content > * {
   max-width: 23em;
   margin-left: auto;
   margin-right: auto;
}

#dialog.explorer UL.menu.directory-menu {
   margin-top: 1em;
}
/*[cf]*/
/*[of]:"My Documents" dialog*/
/*[of]:#storage-view (h-metrics)*/
#dialog #storage-view {
   margin-left: 0;
   margin-right: 0;
}
/*[cf]*/
/*[of]:#storage-view*/
#dialog #storage-view {
   text-align: left;
}

#dialog #storage-view .account-name {
   text-transform: capitalize;
   font-family: "Tangerine", "Script MT Bold", cursive;
   font-size: 160%;
   display: inline-block;
   margin: 0.3em 0 0 0.1em;
}

#dialog #storage-view TABLE {
   border-collapse: separate;
   border-spacing: 2px;
   border-color: inherit; /* For IE6,IE7, which don't inherit here */
}

#dialog #storage-view CAPTION {
   text-align: right;
   white-space: nowrap;
}

#dialog #storage-view TH {
   background-color: #754A11;
   color: #FFE4C1;
}

#dialog #storage-view TD {
   border-style: dotted;
   border-width: 1px;
   text-align: right;
}

#dialog #storage-view TH {
   border-style: solid;
   border-width: 1px;
}

#dialog #storage-view #new-item {
   color: #FF8000;
}
/*[cf]*/
/*[cf]*/