body {
  background-color: #D1D2C2;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8125em;
  margin: 0 auto;
  padding: 0;
  color: black;
}

button,input,textarea,select {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

input[type="radio"], input[type="checkbox"] {
  margin: 0 3px 0 0;
  padding: 0;
  vertical-align: text-bottom;
}

small {
  font-size: smaller;
}

button {
  border: none;
  text-align: left;
}

button::-moz-focus-inner {
  border: 0;
  outline: none;
  padding: 0;
}

button:hover {
  cursor: pointer;
}

input:focus,textarea:focus {
  border-color: #e84f13;
}

ul {
  padding: 0 0 0 1.2em;
  margin: 1em 0 0.5em;
  list-style: disc outside;
}

li,dt,dd {
  line-height: 1.4em;
}

/* TODO : Valider la nécessiter d'un input.cache ??? */
script,input[type="hidden"], input.cache {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

a,a:visited {
  text-decoration: none;
  color: #0054A0;
}

.informations {
  font-size: 8pt;
  font-style: italic;
}

#page {
  width: 976px;
  min-height: 640px;
  margin: 0 auto;
  background-color: white;
  position: relative;
}

#page a:focus,#page a:hover,#page a:active,#page button:focus,#page button:hover,#page button:active {
  text-decoration: underline;
}
#page a.disable,#page button[disabled] {
  text-decoration: none;
}

#header {
  background: url(../images/gradients.png) repeat-x 0 -161px;
  padding: 10px 10px 0 10px;
  position: relative;
}

#header a.gouv,#header a.maaprat {
  background: url(../images/maa.png) no-repeat 0 0;
  height: 60px;
  width: 90px;
  display: block;
  text-indent: -9999px;
}

#page.login #header,#page.telepac.accueil #header {
  background-position: 0 0;
}

#page.login #header a.maaprat,#page.telepac.accueil #header a.maaprat {
  background-position: 0 -62px;
  height: 53px;
  display: block;
}

#header a.maaprat { /* forme reduite du header pas de logo maa */
  display: none;
  position: relative;
  top: 0;
  left: 0;
}

#page.login #header a.telepac,#page.telepac.accueil #header a.telepac {
  background-position: 0 0;
  height: 113px;
  width: 366px;
  top: 20px;
}

#header a.telepac {
  background: url(../images/telepac.png) no-repeat 0 -129px;
  text-indent: -9999px;
  display: block;
  width: 300px;
  height: 79px;
  margin: 2px 0 0 110px;
  position: absolute;
  top: 14px;
}

#header h1 {
  color: #0054A0;
  font-size: 2.4em;
  font-weight: normal;
  margin: 0 0 0 340px;
  position: absolute;
  top: 46px;
}

#page.telepac.login #header h1,#page.telepac.accueil #header h1 {
  margin-left: 501px;
}

#page.telepac #header h1 {
  font-size: 1.8em;
  top: 55px;
}

#header h1 strong {
  font-weight: normal;
  color: #009930;
}

#header a.button,.panel button,.panel .button {
  background-color: #0054a0;
  color: #FFF;
  text-decoration: none;
  padding: 2px 6px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  outline: none;
  vertical-align: middle;
  line-height: normal !important;
  border: 0;
  cursor: pointer;
}

#header a.disable,.panel button .disable,.panel .disable {
  background-color: #CCCCCC;
  cursor: default;
}

.panel .button,.panel button {
  display: inline-block;
  margin: 5px 0 0;
  color: white !important;
  vertical-align: baseline;
}

#header a.button:before,button:before,.panel .button:before,#content a:before {
  content: '\25BA\00A0';
}

#header div.menuAnnexe {
  position: absolute;
  right: 10px;
  top: 10px;
}

#header div.menuAnnexe small {
  line-height: 10px;
  float: left;
  margin-right: 5px; 
}

/**
 * MENU PRINCIPALE
 */
#menu {
  list-style: none;
  margin: 10px 0 0 0;
  position: relative;
  padding: 0;
  font-size: 0.8em;
  min-height: 26px;
}

#menu>li:first-child {
  background: url(../images/home.gif) no-repeat 0 0;
  height: 26px;
  padding: 0;
  width: 32px;
}

#menu>li:first-child:hover {
  background-position: 0 -26px;
}

#menu li {
  line-height: 1em;
  text-align: center;
  padding: 3px 10px;
  float: left;
}

#menu>li {
  width: 112px;
  height: 20px;
}

#menu>li ul {
  height: 30px;
  clear: both;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  left: 0;
  top: 26px;
  position: absolute;
  width: 100%;
}

#menu>li.current ul {
  display: block;
  z-index: 1;
}

#menu>li ul li,#menu>li ul li a {
  font-size: 11px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  height: 22px;
}

#menu>li ul li a:hover {
  text-decoration: underline;
}

#menu>li ul li {
  color: #CCCCCC;
  max-width: 86px;
  min-width: 70px;
  padding-top: 4px;
  padding-bottom: 4px;
}

#menu>li:first-child a {
  text-indent: -9999px;
  padding: 0;
  margin: 0;
}

#menu a {
  color: white;
  display: block;
  height: 100%;
  text-decoration: none;
  text-transform: uppercase;
  margin: 0 -10px;
  padding: 0 10px;
  width: 100%;
}

#menu>li.menu1,#menu>li.menu1 ul {
  background-color: #FF6600;
}

#menu>li.menu2,#menu>li.menu2 ul {
  background-color: #009930;
}

#menu>li.menu3,#menu>li.menu3 ul {
  background-color: #0054a0;
}

#menu>li.menu4,#menu>li.menu4 ul {
  background-color: #CC3399;
}

#menu>li.menu5,#menu>li.menu5 ul {
  background-color: #990000;
}

#menu>li.menu6,#menu>li.menu6 ul {
  background-color: #0099FF;
}

#menu>li.menu7,#menu>li.menu7 ul {
  background-color: #FFCC00;
}

#menu>li.menu1 ul li.current {
  background-color: #CC3300;
}

#menu>li.menu2 ul li.current {
  background-color: #006633;
}

#menu>li.menu3 ul li.current {
  background-color: #003399;
}

#menu>li.menu4 ul li.current {
  background-color: #990066;
}

#menu>li.menu5 ul li.current {
  background-color: #660000;
}

#menu>li.menu6 ul li.current {
  background-color: #0066CC;
}

#menu>li.menu7 ul li.current {
  background-color: #CC9900;
}

/**
 * BARRE D'OUTILS
 */
#toolbar {
  background-color: #DFDFDF;
  font-size: 0.85em;
  margin: 30px 0 0;
  overflow: hidden;
  padding: 3px 10px;
  line-height: 2em;
  text-align: right;
  white-space: nowrap;
  min-height: 23px;
}

#toolbar>* {
  margin-left: 3px; 
}

#toolbar>*:first-child {
  margin-left: 0; 
}

#toolbar>.siret {
  text-align: right;
}

#toolbar>.pacage,#toolbar>.denomination {
  float: left;
  margin-top: 0.1em;
}

#toolbar>.denomination {
  text-transform: uppercase;
  text-align: center;
  width: 280px;
}

#toolbar .etat-signe,#toolbar .etat-encours,#toolbar .etat-invalide {
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  border: 1px solid white;
  color: white;
  font-size: 1.1em;
  height: 22px;
  text-align: center;
  min-width: 100px;
  padding: 0 10px;
  display: inline-block;
}

#toolbar .etat-signe {
  background-color: #1BA936;
}

#toolbar .etat-encours {
  background-color: #ee8304;
}

#toolbar .etat-invalide {
  background-color: #c00000;
}

#toolbar>form {
  text-align: right;
  display: inline-block;
}

#toolbar form label {
  display: inline;
  line-height: normal;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  width: auto;
}

/**
 * PICTOGRAMME DES ALERTES 
 */
.pictogramme {
  background: url("../img/pastille_excl_min.png") no-repeat scroll 0 -2px;
  height: 22px;
  padding: 0;
  width: 22px;
  vertical-align: middle;
  display: inline-block;
}

button.pictogramme:before {
  content: ' ';
  content: none;
}

.bloquant {
  background-image: url("../img/pastille_excl_maj.png");
}

.ok {
  background-image: url("../img/pastille_excl_ok.png");
}

/* TODO : Factoriser avec .pictogramme */
.calcul {
  background: url("../img/calculer.gif") no-repeat scroll 0 -2px;
  height: 24px;
  padding: 0;
  width: 35px;
  vertical-align: middle;
  display: inline-block;
}
#page button.calcul:hover {
  text-decoration: none; 
}
button.calcul:before {
  content: none;
  content: ' ';
}

/* TODO : revoir l'intêret d'utiliser des ID */
#debutNumpacRapide {
  width: 30px;
}

#finNumpacRapide {
  width: 55px;
}

#toolbar form button {
  /* TODO : rassembler tous les boutons dans un seul fichier */
  background: url(../images/btn_recherche.png) repeat scroll 0 0
    transparent;
  height: 21px;
  width: 21px;
  text-indent: -9999px;
  padding: 0;
}

/* Content */
#page.menu1 .title {
  background-color: #FF6600;
}

#page.menu2 .title {
  background-color: #009930;
}

#page.menu3 .title {
  background-color: #0054a0;
}

#page.menu4 .title {
  background-color: #CC3399;
}

#page.menu5 .title {
  background-color: #990000;
}

#page.menu6 .title {
  background-color: #0099FF;
}

#page.menu7 .title {
  background-color: #FFCC00;
}

#content .title.menu1 {
  background-color: #FF9933;
}

#content>form {
  padding: 0 10px;
}

form>fieldset,form>ul.messages {
  padding: 10px;
  margin: 5px -10px;
  border-width: 0 0 1px 0;
  border-style: solid;
  float: none;
  clear: both; /* bizarre, phénomène induit par le <a> en float:right dans le div.title */ 
}

form>p+fieldset {
  border-width: 1px 0; 
}

#content>form>.title,#content>form>.buttons {
  margin-left: -10px;
  margin-right: -10px;
}

.buttons {
  text-align: right; 
}

/* TODO : Remplacer l'imbrication <div class="title"><h1>...</h1></div> par <h1>...</h1> */
#content .title {
  -moz-border-radius: 0 10px 0 0;
  -webkit-border-radius: 0 10px 0 0;
  border-radius: 0 10px 0 0;
  background-color: gray;
  clear: both;
  color: white;
  height: 18px;
  padding: 0 10px;
  margin: 0 0 0.67em;
}

#content .title h1 {
  margin: 0;
  float: left;
}

#content .title a {
  color: white !important;
  float: right;
  text-decoration: none;
  padding: 0 10px;
}

#content,#footer {
  clear: both;
}

#content {
  padding: 10px 10px 32px;
  overflow: hidden;
}

h1 {
  font-size: 1.1em;
}

#content h1 {
  text-transform: uppercase;
}

h2 {
  font-size: 1em;
  border-width: 1px 0 0 0;
  border-style: solid;
  padding-top: 0.5em;
  margin: 0.80em 0; 
}
form>h2 {
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
}
form>fieldset+h2 {
  border-width: 0 0 0 0;
}

#content .panel {
  margin: 0 0 20px 0;
  padding: 18px;
}

.panel>h1 {
  margin: 2px 0 20px 0;
}

.message-accueil a {
  color: blue !important;
}
.message-accueil a:before {
  content: none !important;
}

#login.panel,#actualite.panel,#securite.panel,#information.panel {
  float: right;
  margin: 0 10px 10px 0;
}

#login.panel,#actualite.panel {
  min-height: 189px;
}

#login.panel {
  float: left;
  width: 337px;
}

#securite.panel {
  float: left;
}

#login.panel>form {
  margin-top: 40px;
}
#login.panel>ul.messages+form {
  margin-top: 0px;
}

#login.panel label {
  margin: 1px 41% 5px 0;
  min-width: 15em;
}
#login.panel label>input {
  margin-left: 0;
  max-width: 157%;
}
#login.panel label>small {
  margin-top: 1.8em;
}

#login.panel button {
  width: 7em;
  margin: 0.5em 0 1.5em 15em;
}

#actualite.panel, #information.panel {
  margin-right: 0;   
}

#actualite.panel {
  width: 536px;
  color: #676568;
}

#information.panel, #securite.panel {
  min-height: 225px;
  background-color: white;
}

#information.panel {
  width: 572px;
  padding: 0;
}

#securite.panel {
  clear: left;
  width: 365px;
  color: #009930;
  padding: 0 10px 0 0;
  width: 363px;
}
  
#page.login #footer {
  background: url(../images/footer.jpg) no-repeat;
  height: 199px;
}

#page.login #content {
  padding-bottom: 199px;
}

#password {
  width: 460px;
}

#questions {
  width: 650px;
}

#questions .codeTelepac {
  float: right;
}

.panel,#sub-menu>ul {
  background-color: #E8E9D7;
  overflow: hidden;
  border: none;
}

#sub-menu {
  float: left;
  width: 240px;
}

#sub-menu>ul {
  list-style: none outside;
  padding: 0;
}

#sub-menu>ul a {
  text-decoration: none;
  color: black;
}

#sub-menu>ul a strong {
  font-weight: normal;
}

#sub-menu>ul>li>a {
  color: white;
  display: block;
  padding: 7px 10px;
  background: url(../images/titre-sous-menu.gif) no-repeat;
}

#sub-menu>ul>li>ul,#sub-menu>ul>li>ul>li>ul {
  list-style: none outside;
  margin: 10px 0;
}

#sub-menu>ul>li>ul>li,#sub-menu>ul>li>ul>li>ul>li {
  background: url(../images/icons.png) no-repeat left 5px;
  padding: 2px 2px 2px 15px;
}

/* 
 * MESSAGES :
 *  - d'erreur
 *  - d'avertissement
 *  - d'information (par défaut)
 */
ul.messages {
  list-style: none;
}

ul.messages>li {
  background: url(../images/icons_group.png) no-repeat left -177px;
  padding-left: 1.8em;
}

ul.messages>li.erreur,ul.messages>li.avertissement {
  font-weight: bold;
}

ul.messages>li.erreur { 
  color: #c00000;
}

#main {
  float: right;
  width: 700px;
}

#content .panel h1 {
  text-transform: none;
}

.panel label {
    vertical-align: middle;
}

#content .panel h2 {
  margin-bottom: 20px;
  border: none;
  padding: 0;
}

/* boutons de navigations */
.buttons {
  clear: both;
  margin: 5px 0 10px;
  height: 16px;
  /*couleur par default*/
  border-bottom: 2px solid gray;
  border-top: 2px solid gray;
}

.buttons a, .buttons button {
  font-size: 0.9em;
  height: 100%;
  list-style: none outside none;
  margin: 0 10px;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
  background-color: transparent;
  /*couleur par default*/
  color: gray;
}

/* Pourquoi ne pas utiliser a[disabled] ?? */
#page #content .buttons a.disabled {
  color: gray;
}

.buttons>.comment {
  padding: 0 10px;
  float: left;
}

#page.menu1 h2, #page.menu1 .buttons, #page.menu1 form>fieldset, #page.menu1 form>ul.messages, #page.menu1 #menuform {
  border-color: #FF6600;
}

#page.menu2 h2, #page.menu2 .buttons, #page.menu2 form>fieldset, #page.menu2 form>ul.messages, #page.menu2 #menuform  {
  border-color: #009930;
}

#page.menu3 h2, #page.menu3 .buttons, #page.menu3 form>fieldset, #page.menu3 form>ul.messages, #page.menu3 #menuform  {
  border-color: #0054a0;
}

#page.menu4 h2, #page.menu4 .buttons, #page.menu4 form>fieldset, #page.menu4 form>ul.messages, #page.menu4 #menuform  {
  border-color: #CC3399;
}

#page.menu5 h2, #page.menu5 .buttons, #page.menu5 form>fieldset, #page.menu5 form>ul.messages, #page.menu5 #menuform  {
  border-color: #990000;
}

#page.menu6 h2, #page.menu6 .buttons, #page.menu6 form>fieldset, #page.menu6 form>ul.messages, #page.menu6 #menuform  {
  border-color: #0099FF;
}

#page.menu7 h2, #page.menu7 .buttons, #page.menu7 form>fieldset, #page.menu7 form>ul.messages, #page.menu7 #menuform {
  border-color: #FFCC00;
}

/* TODO : Du coup tous les <a> ?? */
#page.menu1 #content a, #page.menu1 .buttons button {
  color: #FF6600;
}

#page.menu2 #content a, #page.menu2 .buttons button  {
  color: #009930;
}

#page.menu3 #content a, #page.menu3 .buttons button  {
  color: #0054a0;
}

#page.menu4 #content a, #page.menu4 .buttons button  {
  color: #CC3399;
}

#page.menu5 #content a, #page.menu5 .buttons button  {
  color: #990000;
}

#page.menu6 #content a, #page.menu6 .buttons button  {
  color: #0099FF;
}

#page.menu7 #content a, #page.menu7 .buttons button  {
  color: #FFCC00;
}

/**
 * FORMULAIRES (mise en forme par défaut) : 
 * Champs alignés sous 2 colonnes avec libéllés alignés à gauche et champ alignés
 * à gauche entre eux.
 * 
 * Rappels/remarques :
 * - Un premier niveau de fieldset peut être utilisé pour rassembler les champs
 *   ayant un sens commun.
 * - Un second niveau de fielset rassembler les champs liées entre eux (ex: dates
 *   début/fin, choix multiples...)
 * - le libéllé à sa propre sous-zone. En cas de dépassement, le texte revient à 
 *   la ligne et le champ associé est aligné sur la fin du libéllé
 */
form label {
  display: inline-block;
  line-height: 1.6em;
  margin: 0.4em 254px 0.4em 0;
  min-width: 214px;
  padding: 0;
  vertical-align: top;
}

label>input,label>select,label>textarea,label>span.readonly {
  left: 100%;
  margin-left: 3px;
  margin-right: -250px;
  max-width: 220px;
  display: block;
  margin-top: -1.6em;
  position: relative;
}
label>span.readonly {
  /* dans le cas ou le contenu est vide */
  min-height: 1.6em;
}
label>input[type=checkbox],label>input[type=radio] {
  margin-bottom: 0.4em;
  margin-top: -1.4em;
  margin-left: 3px;
}
label>small {
  display: block;
  float: left;
  width: 100%;
  line-height: normal;
  margin-right: -2000px;   /* quelquechose de suffisament grand */ 
  margin-top: 2em;
}
label>input ~ small,label>select ~ small,label>textarea ~ small,label>span.readonly ~ small {
  position: relative;
  left: 100%;
  margin-left: 3px;
  margin-top: 0;
  max-width: 240px;
}

input[readonly], textarea[readonly], .readonly {
  border-width: 0px;
  font-weight: bold;
}
textarea[readonly] {
  border: 1px solid;
}

fieldset>legend {
  font-size: 1em;
  font-weight: bold;
  margin: 0.6em 0;
  padding: 0;
  width: 100%;
  float: left;
}
fieldset > legend+* {
  clear: left;
}

fieldset label {
  float: left;
  min-height: 1.85em;
}

fieldset fieldset {
  padding: 0;
  margin: 0 24% 0 0;
  border: none;
  float: left;
  clear: both;
}
fieldset fieldset + *,fieldset fieldset ~ div  {
  clear: both;
}

fieldset fieldset>label:first-child,
fieldset fieldset>input:first-child,
fieldset fieldset>textarea:first-child,
fieldset fieldset>select:first-child {
  float: left;
  left: -722px;
  margin-left: 722px;
  margin-right: -50%;
  position: relative;
  clear: both;
}
fieldset>fieldset>legend {
  font-weight: normal;
  line-height: 1.4em; 
  margin: 0 500px -2.2em 0;
  padding: 0.5em 0 0.3em;
  white-space: normal;
  width: 214px;
  position: static;
}

fieldset>fieldset>legend ~ * {
  position: relative;
  left: 214px;
  width: auto;
  margin: 0.4em 5px 0.4em 3px;
  vertical-align: baseline;
  display: inline-block;
  float: none;
  clear: both;
}

fieldset>fieldset>legend~label>input,
fieldset>fieldset>legend~label>span.readonly,
fieldset>fieldset>legend~label>select,
fieldset>fieldset>legend~label>textarea {
  /* alignement vertical pour centrer avec le <legend> qui ne supporte pas le vertical-align */
  display: inline-block;
  margin: -3px 0;
  position: static;
  max-width: 100%;
}
fieldset>fieldset>legend~label>input[type=checkbox],
fieldset>fieldset>legend~label>input[type=radio] {
  display: inline-block;
  margin: 0 3px 0 0;
  position: static;
}

fieldset>fieldset>legend ~ label,
fieldset>fieldset>legend ~ span.readonly {
  max-width: 48%;
  min-width: 23%;
  margin-bottom: 0.4em;
  margin-top: 0.4em;
}
fieldset > fieldset > legend ~ span.readonly {
    padding-top: 0.2em;
}

/* suppression d'un separateur sur deux lorsque qu'il n'y à rien entre les deux */
fieldset+div.buttons,fieldset+script+div.buttons {
  margin-top: -6px;
}

fieldset p {
  clear: left;
  line-height: 1.6em;
  margin: 0.4em 0;
  padding: 0;
}

/* constructions spécifiques */
fieldset.adresse>legend, fieldset.adresse > legend:first-child {
  padding-top: 0.2em;
}
fieldset.adresse>input,fieldset.adresse>span.readonly {
  display: block !important;
}
fieldset.adresse>span.readonly {
  height: 2em;
  padding: 0;
}

fieldset.pacage {
  margin: 0;
  padding: 0;
  float: none;
}

/** 
 * AUTRES TYPES DE FORMULAIRES FREQUENTS :
 * Un champ (<label>) par ligne sauf les champs liées entre eux (<fieldset>) : 
 * dates début/fin, choix multiples...
 * 
 * - Le premier niveau de <fieldset> désigne ce type de formulaire par la classe 
 *   "declaration" (TODO: le nom doit être revu car pas assez parlant...)
 * - Le second niveau de <fieldset> rassemble soit des champs d'une même question,
 *   soit une question et ses compléments, auquel cas un troisième niveau est possible
 * - Troisième niveau de <fieldset> pour des compléments d'une question
 */
fieldset.declaration label,fieldset.declaration label:first-child {
  padding: 0;
  width: auto;
  display: inline-block;
  clear: both;
  margin-right: 0;
}
fieldset.declaration label>input,fieldset.declaration label>span.readonly,
fieldset.declaration label>select,fieldset.declaration label>textarea {
  display: inline;
  margin: 0;
  position: static;
  max-width: 100%;
}

fieldset.declaration fieldset {
  float: none;
  margin: 0;
  min-height: 2.4em;
  /* zone du libéllé avec retour à la ligne si nécessaire */
  padding-left: 630px;
  width: 306px;
}
fieldset.declaration fieldset > legend {
  width: 630px;
  margin-right: 300px;
}
fieldset.declaration fieldset > *,fieldset.declaration fieldset > *:first-child {
  margin-left: -630px;
  clear: both;
} 
fieldset.declaration fieldset > legend ~ * {
  display: inline-block;
  max-width: 300px;
  margin: 0.4em 0 0.4em 0.5em;
  left: 0;
}

fieldset.declaration fieldset > label:first-child {
  left: 0;
  margin-bottom: 0;
}
fieldset.declaration fieldset > fieldset,fieldset.declaration fieldset > fieldset:first-child {
  left: 0;
}
fieldset.declaration fieldset > label:first-child ~ *,
fieldset.declaration fieldset > fieldset:first-child ~ *,
fieldset.declaration fieldset > *:first-child ~ fieldset>legend {
  padding-top: 0;
  padding-left: 20px;
}
fieldset.declaration fieldset > *:first-child ~ fieldset {
  padding: 0 0 0 630px;
  min-height: 2em;
}
fieldset.declaration fieldset > *:first-child ~ fieldset>legend ~ * {
  margin-top: 0; 
  margin-bottom: 0; 
}
fieldset.declaration fieldset > *:first-child ~ fieldset>legend {
  width: 610px;
}

fieldset.declaration fieldset.pacage {
  padding: 0 !important;
  width: auto;
}
fieldset.declaration fieldset.pacage > legend {
  width: 214px !important;
  margin-left: 0 !important; 
}
fieldset.declaration fieldset.pacage  > legend ~ * {
  left: 234px !important;
}

/* bizarre, à revoir ? */
#content fieldset  ul li a {
  list-style: none outside none;
  padding: 0 3px;
  text-decoration: none;
}

/**
 * TABLEAUX
 */
table {
  padding: 0;
}

tbody tr td {
  vertical-align: top;
}

tbody tr[onclick], tbody[onclick] {
  cursor: pointer;
}

thead, tfoot {
  color: white;
  background-color: gray;
}

thead {
  height: 24px;
  text-align: center;
}

tfoot {
  height: 10px;
}

tbody {
  background-color: #E8E9D7;
}

tbody tr:hover {
  background-color: #D1D2C2;
}

#page.menu1 thead,#page.menu1 tfoot {
  background-color: #FF6600;
}

#page.menu2 thead,#page.menu2 tfoot {
  background-color: #009930;
}

#page.menu3 thead,#page.menu3 tfoot {
  background-color: #0054a0;
}

#page.menu4 thead,#page.menu4 tfoot {
  background-color: #CC3399;
}

#page.menu5 thead,#page.menu5 tfoot {
  background-color: #990000;
}

#page.menu6 thead,#page.menu6 tfoot {
  background-color: #0099FF;
}

#page.menu7 thead,#page.menu7 tfoot {
  background-color: #FFCC00;
}

table.IBAN tr, 
table.RIB tr,
/* ancienne façon a migrer dès que possible : */ 
table#champsCompte tr {
  background-color: white !important;
}

tbody ul {
  clear: both;
  list-style: none;
  padding: 0;
  margin: 0;
}

tbody ul li,tbody ul li a {
  text-decoration: none;
  text-transform: none;
  float: left;
}

thead tr td ul {
  clear: both;
  list-style: none;
  padding: 0;
  margin: 0;
}

thead a,tfoot a {
  color: white !important;
  padding: 0 5px;
}

thead li,thead a  {
  text-decoration: none;
  text-transform: none;
  float: left;
  font-weight: normal;
  cursor: pointer;
}

/* TODO : généraliser ceci, plus besoin de thead ul li a... */
thead>tr>th>a {
  margin: 0.5em; 
  position: inherit;
}

thead li.disabled a {
  cursor: default;
}

#content .small {
  font-size: 8pt;
}

#footer {
  background: #D1D2C2 url(../images/footer.png) no-repeat 0 0;
  height: 32px;
  position: absolute;
  bottom: 0px;
  width: 100%;
}

/* décoration des minipopup*/
/* TODO : Généraliser/harmoniser les popup */
#page.minipopup , #page.alt, #page.apercuSynthese {
  width: 800px;
  min-height: 600px;
  margin: 0 auto;
  background-color: white;
  overflow: hidden;
  position: relative;
}

/* TODO : Harmoniser les popup */
.minipopup #header, .alt #header, .apercuSynthese #header {
  background-position: 0 -359px;
  height: 30px;
}

.minipopup #toolbar, .alt #toolbar, .apercuSynthese #toolbar {
  top: 0;
  margin: 0;
}

/*fin cas particulier*/

/**
 * LETTRES (En cours, à finaliser) :
 * Construction particulière convenant aux dépot des télédéclaration par exemple
 */
div.lettre,div.lettre>fieldset {
  border: 1px solid black;
  padding: 3px;
  width: auto;
}

div.lettre {
  margin: 0 -10px;
}

div.lettre>fieldset {
  margin: 10px 0;
}

div.lettre>h1 {
  background: url(../images/maa.png) no-repeat 0 0;
  text-align: center;
  height: 115px;
}

div.lettre a {
  text-decoration: none;
  color: #009930;
}

/* Mode écran large */
#page.large {
  width: 1264px;
}

#page.large #footer {
  background-position: 0 -32px;
}

#page.large #menu > li:first-child {
  width: 32px;
}

#page.large #menu>li {
  width: 153px;
}

/**
 * Reprise des anciens styles d'alignement du texte dans les tableaux
 *
 * FIXME :
 *  - utilisation inapproprié de ID (car un ID est unique), c'est une classe qui
 *    doit être définie
 *  - il faut étendre le principe pour les champs de saisie de manière a ouvrir
 *    la porte à des traitements JavaScript génériques par exemple 
 */
#data_reference {
  padding: 0 4px 0 4px;
  text-align: center;
}

#data_libelle {
  padding: 0 4px 0 4px;
  text-align: left;
}

#data_number {
  padding: 0 4px 0 4px;
  text-align: right;
}

/**
 * CHEMIN DE FER 
 */
#menuform {
  border-style: solid;
  border-width: 0 0 1px;
  height: 50px;
  margin: 0 -10px;
  padding: 0 10px;
}

#menuform>ul {
  list-style: none outside;
  padding: 0;
  position: relative;
}

#menuform>ul li ul {
  list-style: none outside;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
}

#menuform>ul li {
  cursor: pointer;
  margin: 1px 0px;
  text-align: left;
  padding-left: 40px;
  background: url(../img/progression_mid.gif) no-repeat left;
  display: inline;
  vertical-align: middle;
}

#menuform>ul li ul li:first-child {
  margin: 0 5px 0 7px;
  background: url(../img/progression_n2.gif) no-repeat left;
  background-position: 0 2px;
}

#menuform>ul li a,#menuform>ul li ul li a {
  text-decoration: none;
}

#menuform>ul li a.selected,#menuform>ul li ul li a.selected {
  font-weight: bold;
  text-decoration: underline;
}

#menuform a:before {
  content: '';
}  

#page.menu1 #menuform>ul li {
  background: url(../img/progression_mid_menu1.gif) no-repeat left;
}

#page.menu2 #menuform>ul li {
  background: url(../img/progression_mid_menu2.gif) no-repeat left;
}

#page.menu3 #menuform>ul li {
  background: url(../img/progression_mid_menu3.gif) no-repeat left;
}

#page.menu4 #menuform>ul li {
  background: url(../img/progression_mid_menu4.gif) no-repeat left;
}

#page.menu5 #menuform>ul li {
  background: url(../img/progression_mid_menu5.gif) no-repeat left;
}

#page.menu6 #menuform>ul li {
  background: url(../img/progression_mid_menu6.gif) no-repeat left;
}

#page.menu7 #menuform>ul li {
  background: url(../img/progression_mid_menu7.gif) no-repeat left;
}

#page.menu1 #menuform>ul li ul li:first-child {
  background: url(../img/progression_n2_menu1.gif) no-repeat left;
}

#page.menu2 #menuform>ul li ul li:first-child {
  background: url(../img/progression_n2_menu2.gif) no-repeat left;
}

#page.menu3 #menuform>ul li ul li:first-child {
  background: url(../img/progression_n2_menu3.gif) no-repeat left;
}

#page.menu4 #menuform>ul li ul li:first-child {
  background: url(../img/progression_n2_menu4.gif) no-repeat left;
}

#page.menu5 #menuform>ul li ul li:first-child {
  background: url(../img/progression_n2_menu5.gif) no-repeat left;
}

#page.menu6 #menuform>ul li ul li:first-child {
  background: url(../img/progression_n2_menu6.gif) no-repeat left;
}

#page.menu7 #menuform>ul li ul li:first-child {
  background: url(../img/progression_n2_menu7.gif) no-repeat left;
}

/* 
 * ALERTES, 2 montages possibles (pour l'instant) :
 *  - sous forme de liste pour par exemple énumérer le nombre d'alertes par type
 *  - sous forme de liste de définitions (<dl> <dt> <dd>) pour par exemple une 
 *    liste exhaustive des alertes avec le code en définition (<dt>) et la description (<dd>) 
 */
ul.alertes>li, dl.alertes>dt {
  padding-left: 1.8em;
  background-repeat: no-repeat;
  background-position: left top;
}

/* TODO : images à mettres sous forme de CSS sprites dans un fichier alertes.gif */
.alertes>.info {
  background-image: url(../img/puce_min.gif);
}

.alertes>.bloquante {
  background-image: url(../img/puce_maj.gif);
}

.alertes>.imprimable {
  background-image: url(../img/puce_imp.gif);
}

ul.alertes {
  list-style: none;
  padding: 0;
}

dl.alertes>dt {
  width: 8em;
  font-weight: bold;
}

dl.alertes>dd {
  margin-left:  9em;
}

dl.alertes>dt+dd {
  margin-top: -1.4em;
}
/*
 * pour les tableaux de pilotage
 */
 
/* TODO : Trop générique ! */
.total {
  font-weight: bold;
}

/* TODO : Trop générique ! */
.data {
  white-space: nowrap;
}

/* TODO : Trop générique ! */
.firstCol {
  background-color: gray;
  white-space: nowrap;
}

/* TODO : Trop générique ! */
.value {
  background-color: gray;
  width:128px;
}

#page.menu1 .firstCol, #page.menu1 .value {
  background-color: #fbd4ba;
}

#page.menu2 .firstCol, #page.menu2 .value {
  background-color: #bef3ce;
}

#page.menu3 .firstCol, #page.menu3 .value {
  background-color: #c6e0f8;
}

#page.menu4 .firstCol, #page.menu4 .value {
  background-color: #edbfdd;
}

#page.menu5 .firstCol, #page.menu5 .value {
  background-color: #ec9a9a;
}

#page.menu6 .firstCol, #page.menu6 .value {
  background-color: #caeaff;
}

#page.menu7 .firstCol, #page.menu7 .value {
  background-color: #fdefb7;
}

/* TODO : Voir l'utilité ce ceci */
.interligne {
  height:5px;
  background-color: gray;
}

#page.menu1 .interligne {
  background-color: #FF6600;
}

#page.menu2 .interligne {
  background-color: #009930;
}

#page.menu3 .interligne {
  background-color: #0054a0;
}

#page.menu4 .interligne {
  background-color: #CC3399;
}

#page.menu5 .interligne {
  background-color: #990000;
}

#page.menu6 .interligne {
  background-color: #0099FF;
}

#page.menu7 .interligne {
  background-color: #FFCC00;
}

/*
 * reprise de boutons de saisie des numéros pacage
 * TODO : Passer aux nouveaux boutons de la charte ! Et limiter à une classe CSS pour tous les boutons
 */
#content a.verifier, #content a.rechercher {
  background-position: left top;
  background-repeat: no-repeat;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  padding: 0 1px;
  margi: 0;
}
#content a.verifier:before, #content a.rechercher:before {
  content: none;
}

#content a.verifier {
  background-image: url(../img/verifie.png) ;
}
#content a.verifier:hover {
  background-image: url(../img/verifie_o.png);
}

#content a.rechercher {
  background-image: url(../img/cons_doss.png);
}
#content a.rechercher:hover {
  background-image: url(../img/cons_doss_o.png);
}

/*
 * mise en place de la passerelle
 */
#passerelles {
  z-index: 50;
  background-color: #D1D2C2; 
  width: 260px; 
  position: absolute;
  left: 64%;
  top: 5%; 
  border: 2px solid #0054A0; 
  display: none;
}

#passerelles ul {
  list-style: none;
  padding: 0 0 0 20px;
}

#passerelles li {
  background: url("../images/icons.png") no-repeat scroll left 5px transparent;
  padding: 2px 2px 2px 15px;
}

#passerelles li a {
  color: black;
  text-decoration: none;
}