/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2006.03.19
   PURPOSE: Controls the layout of the site and styles
            the menus
 **************************************************************/



/**************************************************************
   #content: Sets the width of the site.  Make changes here
             to convert to a fixed width site.
 **************************************************************/

#content {
  height: 100%;
  min-height: 100%;

  text-align: left;
}

#content,
#width {
  /* max-width hack for IE since it doesn't understand the valid css property */
/*
  width: expression(document.body.clientWidth > 1000 ? "1000px" : "99%");  
  max-width: 1000px;
*/
  background: #FFF;
  width: 800px;
  margin: 10px auto 0px auto;
}
/*
#content[id],
#width[id] {
  width: 99%;
  height: auto;
}
*/


/**************************************************************
   #header: Contient la hierarchie, le champs recherche, la banner et les petites news
 **************************************************************/

#header {
  position: relative;
}

#header div div {
  margin: 1px;
  border: 1px #AAA solid;
}

#header .hierarchie,
#header .recherche {
  padding-top: 6px;
  height: 20px;
}

#header .hierarchie span {
  padding-left: 5px;
}

#header .recherche {
  padding-top: 4px;
  padding-bottom: 2px;
}

#header[id] .recherche[class] {
}

#header .recherche input {
border:0px none;
color:#00aecb;
font-family:arial,helvetica,sans-serif;
font-size:11px;
  margin: 0px;
  background: #FFF;
}

#header .banner,
#header #dernieres-nouvelles {
  height: 150px;
}

#header #dernieres-nouvelles {
  border: none;
  margin: 0px;
  padding: 0px;
}

#header[id] #dernieres-nouvelles[id] {
  margin: 0px 0px 1px 0px;
}

#header #dernieres-nouvelles * {
  padding: 0px;
  margin: 0px 1px 2px 1px;
  border: none;
}

#scrolling_nouvelles {
  height: 127px
}

#header #dernieres-nouvelles h2 {
  margin: -1px 0px 0px 0px;
  padding-top: 3px;
}

#header .top-menu {
  height: 27px;
  margin: -7px 0px 0px 0px;
  padding: 0px;
  border-width: 0px 0px 0px 1px;
  font-weight: bold;
}

#header .top-menu a {
  display: block;
  margin: 1px 0px 0px 0px;
  padding: 6px 8px 7px 8px;
}

#header[id] .top-menu a {
  height: 20px;
  margin: 1px 0px 0px 0px;
  padding: 6px 8px 0px 8px;
}

#header .top-menu a:hover {
  background-color: #00aecb;
  color: #FFF;
}


/**************************************************************
   .sideMenu: Le menu de gauche de ouf en javascript
 **************************************************************/

#sideMenu {
}

/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
  position: absolute;
  overflow: hidden;
  left: -1000px;
  top: -1000px;
}

/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
  position: absolute;
}

/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
  position: relative;
  left: 0px;
  top:0px;
  z-index: 2;
  line-height:0;
  font-size: 0;
}

.transMenu.top .items {
  border-top: none;
}

/* each TR.item is one menu item */
.transMenu .item{
  line-height:120%;
  font-family: sans-serif;
  /* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
  border: none;
  cursor: pointer;
  cursor: hand;
  display: block;
  /*width: 145px !important;*/
/*  width: 160px;*/
  background: #f8c83a;
  vertical-align: middle;
  font-size: 11px;
/*  font-weight: bold;*/
  color: #000;
  text-align: left;
  text-indent: 15px;
  height: 20px !important;
  height: 15px;
  width: 100%;
  text-decoration: none;
  border-bottom: 1px solid #FFF;
}
.transMenu .item td {

}
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index:1;
  -moz-opacity: .8;
  filter: alpha(opacity=80);
}

/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
  position: absolute;
  z-index: 3;
  top: 3px;
  width: 2px;
  -moz-opacity: .4;
  filter: alpha(opacity=40);
}

/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
  position: absolute;
  z-index: 1;
  left: 3px;
  height:2px;
  -moz-opacity: .4;
  filter: alpha(opacity=40);
}

/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
  color: #fff;
  background: #ff8533;
}

/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
#sideMenu .transMenu img {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

/* Added classes by Khanh - 050629 */
#wrap {
  margin: 0px;
  padding: 0px;
}

#menu {
  margin: 0px;
  padding: 0px;
  display: block;
  width: 100%;
}

.transMenu .item#active {
  background: #00aecb;
  color: #fff;
}

.transMenu .item#active.hover {
  color: #fff;
  background: #ff8533;
}

/* For first level menu.*/
a.mainlevel-trans:link, a.mainlevel-trans:visited {
  display: block;
  background: url(../images/site/menu_bg.png) no-repeat;
  background-position: 0px -25px;
  vertical-align: middle;
  font-size: 11px;
  font-weight: bold;
  color: #FFF;
  text-align: left;
  padding-top: 5px;
  padding-left: 18px;
  height: 20px;
  width: 100%;
  text-decoration: none;
  width: 145px;
}

a.mainlevel-trans:hover {
  background-position: 0px 0px;
  text-decoration: none;
  color: #fff;
}

a.mainlevel_active-trans, a.mainlevel_active-trans:visited {
  font-size: 11px;
  color:#F60;
  line-height: 25px;
  display: block;
  height: 25px;
  width: auto;
  margin: 0px;
  padding: 0px 15px 0px 29px;
  background: url(../images/site/menu_bg.png) no-repeat;
  background-position: 0px -25px;
  text-decoration: none;
  color: #333;
}

a.mainlevel_active-trans:hover {
  color: #36C;
}


/*
 * Pages Diplomes
 */

.form_succes {
  background: url(../images/icons/ok.png) no-repeat top left #C8FFBF;
  border: 1px solid #5CDF45;
  border-bottom: 2px solid #5CDF45;
  border-right: 2px solid #5CDF45;
  padding:5px;
}

.form_succes h2 {
  padding: 0px;
  margin-top: 5px;
  margin-left:30px;
  font-weight: bold;
  font-size: 1.5em;
  color: #3ABC23;
}

.form_succes p {
  margin:10px;
}

.erreur_fatale {
  background: url(../images/icons/erreur.png) no-repeat top left #FBE6F2;
  border: 1px solid #D893A1;
  border-bottom: 2px solid #B6718E;
  border-right: 2px solid #B6718E;
  padding:5px;
}

.erreur_fatale h2 {
  padding: 0px;
  margin-top: 5px;
  margin-left:30px;
}

.form_succes .buttons,
.erreur_fatale .buttons {
  color: black;
  margin-left: 40%;
}

.erreur_fatale dl {
  margin-left:40px;
}

.erreur dl {
  margin: 0px;
}

.erreur dt {
  font-weight: bold;
}

.filtre_erreur,
.champ_erreur {
  border-bottom: dotted 1px red;
}

form.myform img.calendrier_img_select,
form.myform img.calendrier_img_reset,
form.myform img.calendrier_img_select:hover,
form.myform img.calendrier_img_reset:hover {
  border: 0px !important;
  padding: 0px;
  vertical-align: middle;
}

form.form_liste th,
form.myform th {
  vertical-align: top;
  font-weight: normal;
  white-space: nowrap;
  padding-right: 5px;
}

form.form_liste td,
form.myform td {
  vertical-align: top;
}

#site_recherche h1,
.diplomes h1,
form.myform h1 {
  color: #222;
  font-weight: bold;
  background: url(../images/site/subhead_bg.png) repeat-x top left;
  height: 20px;
  margin: 5px 0px 0px 0px;
  padding: 3px 0px 0px 0px;
  font-size:10px;
  text-transform: uppercase;
  color:#666666;
  font-size:10px;
  padding-left:4px;
  padding-top:4px;
  margin-bottom: 20px;
  border: 0px;
}

form.myform h3 {
  background:#808080 none repeat scroll 0%;
  font-weight:bold;
  color: white;
  padding:4px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.information {
  display: block;
  color:#999999;
  font-size:11px;
  font-weight:bold;
  padding:10px;
}

.notification {
  display: block;
  background:#F0F0F0 none repeat scroll 0%;
  font-weight:bold;
  padding:4px;
  margin:10px;
}

.warning {
  display: block;
  background:#F0F0F0 none repeat scroll 0%;
  color: #C00;
  font-weight:bold;
  padding:10px;
  margin:10px;
}

form.myform label,
form.myform label {
  padding-left: 12px;
}

form.myform .requis {
  background: url(../images/icons/arrow.png) no-repeat top left;
}

#form_actions {
  border-top: 1px dotted gray;
  border-width: 50%;
  margin-top: 20px;
  padding-top: 10px;
  text-align: center;
}

#espace-diplomes h2,
#dernieres-nouvelles h2,
#menu-diplomes h2 {
  color: #222;
  font-weight: bold;
  background: url(../images/site/subhead_bg.png) repeat-x top left;
  height: 20px;
  margin: 5px 0px 0px 0px;
  padding: 3px 0px 0px 0px;
  font-size:10px;
  text-transform: uppercase;
  color:#666666;
  font-size:10px;
  padding-left:4px;
  padding-top:4px;
}


#menu-diplomes a.mainlevel:link,
#menu-diplomes a.mainlevel:visited {
  background:transparent url(../images/site/menu_diplomes_bg.png) no-repeat scroll 0% 0%;
  color:#FFFFFF;
  display:block;
  font-size:11px;
  font-weight:bold;
  height:20px !important;
  padding-left:18px;
  padding-top:5px;
  text-align:left;
  text-decoration:none;
  vertical-align:middle;
  width:100%;
}

#menu-diplomes a.mainlevel:hover {
  background-position:0px -25px;
  color:#fff;
  text-decoration:none;
}

.erreur_fatale input,
.form_succes input,
input.button,
.form_liste .filtres .button,
#form_actions .button,
#espace-diplomes .button {
  background:transparent url(../images/site/button_bg.png) repeat-x scroll 0%;
  border:3px double #CCCCCC;
  color:#00aecb;
  font-family:Arial,Hevlvetica,sans-serif;
  font-size:11px;
  font-weight:bold;
  height:26px !important;
  line-height:18px !important;
  margin:1px;
  padding:0px 5px;
  text-align:center;
  width:auto;
}

.diplomes table.liste {
  width: 100%;
}

.diplomes table.liste th {
  background: #EEE;
}

.form_liste {
}

.form_liste .actions {
  background:#EEE none repeat scroll 0%;
  margin-bottom: 15px;
  padding-bottom: 5px;
}

.form_liste .filtres {
  width: 100%;
  margin-bottom: 15px;
  padding-bottom: 5px;
}

.form_liste .erreurs h2,
.form_liste .filtres h2,
.form_liste .actions h2 {
  background:#808080 none repeat scroll 0%;
  font-weight:bold;
  color: white;
  padding:4px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.form_liste .filtres a,
.form_liste .actions a {
  font-weight: bold;
  margin: 5px;
}


.form_liste .block-titre,
.form_liste .block-bas {
  background: #CCC;
  width: 100%;
}


/*
 * Coordonnees
 */

#diplomes_coordonnees #photo img {
  background: white;
  padding: 2px;
  border: 1px dotted orange;
  width:100px;
  height:100px;
}


#diplomes_coordonnees #upload_photo {
  background: #EEE;
  border: gray;
}

#diplomes_coordonnees a.voir_button {
  background:transparent url(../images/site/button_bg.png) repeat-x scroll 0%;
  padding: 2px;
  border:3px double #CCCCCC;
  color:#C41D05;
  font-family:Arial,Hevlvetica,sans-serif;
  font-size:11px;
  font-weight:bold;
  width: 12em;
  padding-bottom: 0px;
}

@media print {
  #diplomes_panier_offres input,
  #diplomes_panier_offres .supprimer_btn {
    display: none;
  }
}

/*
 * Annuaire
 */

#diplomes_offres .filtres th,
#diplomes_annuaire .filtres th  {
  background:transparent url(../images/site/dot1.gif) no-repeat scroll 0% 0%;
  padding-left: 15px;
}

#diplomes_annuaire_fiche {
  background: white;
  text-align: left;
  margin-bottom:0px;
  width: 100%;
}

#diplomes_annuaire_fiche #footer {
  margin-top: 10px;
  margin-bottom:0px;
  text-align: center;
  width: 100%;
  border-top: 1px solid #AAA;
}

#form_diplomes_annuaire_fiche h1 {
  margin-bottom: 10px;
}

#form_diplomes_annuaire_fiche h3 {
  margin-left: 10px;
  margin-right: 10px;
}

#diplomes_annuaire_fiche #photo img {
  background: white;
  padding: 2px;
  border: 1px dotted orange;
  position: absolute;
  width:100px;
  height:100px;
}

#form_diplomes_annuaire_fiche table {
  margin-left: 20px;
  margin-right: 20px;
}

#form_diplomes_annuaire_fiche table.experience_pro ul {
  list-style: square;
  margin:0px 0px 0px 30px;;
  padding:0px;

}


/*
 * Offres d'Emploi
 */

#diplomes_offres .panier {
  padding-left: 20px;
  background: url(../images/site/panier.gif) no-repeat top left;
  padding-bottom: 10px;
  vertical-align: top;
}

#diplomes_fiche_offre {
  background: white;
  text-align: left;
  margin-bottom:0px;
  width: 100%;
}

#diplomes_fiche_offre #footer {
  margin-top: 10px;
  margin-bottom:0px;
  text-align: center;
  width: 100%;
  border-top: 1px solid #AAA;
}

#form_diplomes_fiche_offre h1 {
  margin-bottom: 10px;
}

#form_diplomes_fiche_offre h3 {
  margin-left: 10px;
  margin-right: 10px;
}

#form_diplomes_fiche_offre table {
  margin-left: 20px;
  margin-right: 20px;
}

#form_diplomes_fiche_offre #form_actions {
  margin-top: 30px;
}

#form_diplomes_fiche_offre .intitule {
  font-weight: bold;
  font-size: 1.2em;
  color: orange;
  border-bottom: dotted 1px orange;
}

#form_diplomes_fiche_offre .description * {
  font-size: 10px !important;
  color: #888 !important;
  width: 90%;
}



#diplomes_panier_offres {
  text-align: left;
  margin-bottom:0px;
  width: 100%;
}

#form_diplomes_panier_offres h2 {
  background:#808080 none repeat scroll 0%;
  font-weight:bold;
  color: white;
  padding:4px;
  margin: 10px 10px 5px 10px;
}

#form_diplomes_panier_offres table.offre {
  width: 90%;
  margin: auto;
  background: #EEE;
}

#form_diplomes_panier_offres .intitule {
  font-weight: bold;
  font-size: 1.2em;
  color: orange;
  border-bottom: dotted 1px orange;
}

#form_diplomes_panier_offres .description {
  margin: 10px 10px 0px 10px !important;
}

#form_diplomes_panier_offres .description * {
  font-size: 10px !important;
  color: #888 !important;
}

#diplomes_panier_offres #footer {
  margin-top: 10px;
  margin-bottom:0px;
  text-align: center;
  width: 100%;
  border-top: 1px solid #AAA;
}

#diplomes_panier_offres .supprimer_btn {
  background:transparent url(../images/site/button_bg.png) repeat-x scroll 0%;
  border:3px double #CCCCCC;
  color:#C41D05;
  font-family:Arial,Hevlvetica,sans-serif;
  font-size:11px;
  font-weight:bold;
  height:20px !important;
  line-height:18px !important;
  display: block;
  width: 12em;
  text-align:center;
  margin-bottom: 10px;
}

@media print {
  #diplomes_panier_offres input,
  #diplomes_panier_offres .supprimer_btn {
    display: none;
  }
}

/*
 * Cotisations
 */
#diplomes_cotisation td {
  vertical-align: top;
}

#diplomes_cotisation h4 {
  background: #EEE;
  border-bottom: 1px dotted black;
  line-height: 5px;
  margin-left: 0px;
  margin-bottom: 5px;
}

#diplomes_cotisation h4.next {
  margin-top: 10px;
}

#diplomes_cotisation td.bulletin label {
  padding-left: 0px;
}

/*
 * Recherche
 */

#site_recherche .form_liste table {
  width:100%;
}

#site_recherche .form_liste table.liste td {
  padding:10px;
}

#site_recherche .recherche_resultat span {
  color:#999999;
  font-size:11px;
  font-weight:bold;
}

#site_recherche .recherche_resultat a {
  color:#C43C03;
  font-weight:bold;
  text-decoration:none;
}

.liste_actions {
  border-top: 1px dotted gray;
  border-width: 50%;
  text-align: center;
  margin-top: 20px;
  padding-top: 10px;
}


/**************************************************************
   #page: Holds the main page content.
 **************************************************************/
#bulletin {
  text-align: center;
  padding: 2px;
  width: 640px;
  clear: both;
  background: #FFF;
}

#page {
  float: left;
  width: 800px;
  clear: both;
  padding-bottom: 10px;
  background: #FFF;
}

#page h1 {
  /* Rajouter le petit carré à gauche du titre */
}



/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/

#footer {
  margin: 0px auto;
  width: 800px;

  border-top: 1px solid #AAA;
  background: #FFF;
  text-align: center;
  clear: both;
}

#footer p {
  padding: 10px 0px;
}

#footer[id] p {
  padding: 0px 0px 10px 0px;
}


/**************************************************************
   Width classes used by the site columns
 **************************************************************/

.width100 {
  width: 100%;
}

.width85 {
  width: 84%;
}

.width80 {
  width: 79%;
}

.width75 {
  
}

.width75[class] {
  width: 79%;
}

.width70 {
  width: 69.8%;
}

.width50 {
  width: 49.5%;
}

.width45 {
  width: 44.5%;
}

.width33 {
  width: 32.7%;
}

.width30 {
  width: 29.8%;
}

.width25 {
  width: 24.9%;
}

.width20 {
  width: 19.8%;
}

.width15 {
  width: 14.7%;
}

.width5 {
  width: 4.7%;
}



/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.floatRightNotIE[class] {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}



/**************************************************************
   Generic display classes
 **************************************************************/

.clear {
  clear: both;
}

.block {
  display: block;
}

.small {
  font-size: 0.8em;
}

.center {
  text-align: center;
}

.closer {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.closest {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.green {
  color: #A1FF45;
}

.red {
  color: #EA1B00;
}

.blue {
  color: #0033CC;
}

.grey {
  color: #666;
}

.grey a {
  color: #999;
}

.grey a:hover {
  color: #EEE;
}

.gradient {
  margin-bottom: 2em;
  background: url(../images/site/gradient.jpg) repeat-x bottom left;
}

.date {
  display: block;
  float: right;
  margin: 10px;
  padding: 0;
  border: 0;
  font-size: 0.9em;
}


.noBorder,
.noBorder a,
.noBorder a:hover,
.noBorder img,
img.noBorder,
a.noBorder,
a:hover.noBorder,
#page .noBorder,
#page .noBorder a,
#page .noBorder a:hover,
#page .noBorder img,
#page img.noBorder,
#page a.noBorder,
#page a:hover.noBorder,
#header .noBorder,
#header .noBorder a,
#header .noBorder a:hover,
#header .noBorder img,
#header img.noBorder,
#header a.noBorder,
#header a:hover.noBorder {
  border: 0;
}
 
.notDisplayed {
  display: none;
}

.notDisplayedFF[class] {
  display: none;
}

.displayIt:hover>.notDisplayed,
.displayIt:hover>.notDisplayedFF {
  display: block;
}

.signature {
  text-align: right;
}

.question {
  font: 700 "trebuchet ms", serif;
  color: #F39F01;
}

.introduction {
  font-weight: bold;
  background-color: #EEE;
}

.erreur {
  background: url(../images/icons/erreur.png) no-repeat bottom right #FBE6F2;
  border: 1px solid #D893A1;
  color: #333;
  margin: 5px 0px 5px 0px;
  padding: 8px 20px 8px 8px;
}

.ok {
  background: url(../images/icons/ok.png) no-repeat bottom right #C8FFBF;
  border: 1px solid #5CDF45;
  color: #333;
  margin: 5px 0px 5px 0px;
  padding: 8px 20px 8px 8px;
}

#debug {
  text-align: left;
  margin: 10px;
  padding: 5px 10px;
  border: 2px solid grey;
  background: #111;
  font-family: Courier New, sans-serif;
  color: #FFF;
  white-space: pre;
  clear: both;
}