li {margin-bottom: 10px;}
header h1 {
   background-color: inherit;
   color: inherit;
   margin: 0;
}
h1 {
   color: #34B233; 
   margin: 20px 0 30px;
}
h2 {color: #656565;}
button, input[type="button"], input[type="submit"] {background-color: #34B233;}
button:disabled, button:disabled:hover, input[type="button"]:disabled, input[type="button"]:disabled:hover, input[type="submit"]:disabled, input[type="submit"]:disabled:hover {
   background-color: #909090;
   opacity: .6;
}
/*ie8*/
button[disabled="disabled"], button[disabled="disabled"]:hover, input[type="button"][disabled="disabled"], input[type="button"][disabled="disabled"]:hover, input[type="submit"][disabled="disabled"], input[type="submit"][disabled="disabled"]:hover {
   background-color: #909090;
   filter:alpha(opacity=60); 
}
hr {
   background-color: #34B233; 
   border: none; 
   height: 3px; 
   margin: 30px 150px 10px;
}
/*Ruban - Adaptation pour SIE*/
.contenuRuban {
   background-color: #34B233 !important;
   color: #fff !important;
}
.titreNomApp {font-style: italic;}
.contenuRuban::before, .contenuRuban::after {border-top-color: #8DD48C;}
#contenu {padding: 5px 0 15px;}
#contenu > div {
   background-color: #fff; 
   margin: 15px 40px;
}
#contenu > div > h2 {
   margin-bottom: 15px;
   padding-bottom: 5px;
} 
#contenu > div > h2 ~ p {margin-top: 20px;}
.formuleBienvenue {
   display: inline-block; 
   position: absolute;
   right: 0;
}  
#labelPrenomNom { 
   font-family: "Segoe UI",arial,sans-serif;
   font-size: 1.2em;
   font-style: italic;
}
.boite {
   background-color: #fff;
   display: inline-block;
   padding: 20px 30px 20px 0;
}
#accueil {background-color: #fff !important;}
#accueil > h2 {color: #656565;}
.formConnexion > h3 {
   background-color: #37424a;
   color: #fff;
   padding: 5px 10px;
   }
.formConnexion ~ p {margin-top: 20px;}
#changerMotPasse #ctlMessage, #confirmation #ctlMessage {width: auto;}
#lstActionsPerso {
   border-radius: 5px;
   border: 1px solid #c0c0c0;
   border-top-width: 6px;
   float: right;
   margin-bottom: 20px;
   margin-top: 40px;
   padding: 5px 10px 2px;
}
#lstActionsPerso li {margin-bottom: 0;}
#lstActionsPerso a {
   font-size: .9em;
   line-height: 2em;
}
#ctlAffectation { margin-top: 12px;}
.lstReleves article a[id^="ctlPeriodeRelSansAjust"], .lstReleves article a[id^="ctlEleFlltFisc"], .lstReleves article li a, #lstActionsPerso a {
   background: url(../img/go_gris.png) left no-repeat;
   color: #707070;
   display: block;
   padding: 0 20px;
   text-decoration: none;
}
.lstReleves article li a {
   display: inline-block;
   font-size: .9em; 
   line-height: 2em; 
   width: 150px;
}
.lstReleves article a[id^="ctlPeriodeRelSansAjust"]:hover, .lstReleves article a[id^="ctlEleFlltFisc"]:hover, .lstReleves article li a:hover, #lstActionsPerso a:hover {text-shadow: 0px 1px 1px #c0c0c0;}
#contenantConsultation {
   clear: both;
   padding-top: 35px; 
   position: relative;
}
#contenantConsultation a.actif {color: #34B233;}
#contenantConsultation .formGeneral > * {margin-top: 25px;}
#contenantConsultation .formGeneral > h3 {margin-top: 5px;}
#contenantConsultation h2 {
   background-color: #34B233; 
   border: 2px solid #34B233;
   border-left: 5px solid #30A52F; 
   -webkit-box-shadow: 1px 1px 3px 2px #b0b0b0;
   -moz-box-shadow: 1px 1px 3px 2px #b0b0b0;
   box-shadow: 1px 1px 3px 2px #b0b0b0;  
   border-radius: 3px;
   display: inline-block; 
   font-size: 1.2em; 
   position: absolute; 
   left: 0;
   top:0; 
}
#contenantConsultation h2:hover {
   -webkit-box-shadow: 0px 0px 3px 1px #b0b0b0;
   -moz-box-shadow: 0px 0px 3px 1px #b0b0b0;
   box-shadow: 0px 0px 3px 1px #b0b0b0;
}
#contenantConsultation h2 a {
   color: #fff; 
   display: inline-block; 
   line-height: 45px; 
   padding: 5px 5px 5px 50px;
   text-decoration: none;
   width: 220px;
   white-space: nowrap;
} 
#contenantConsultation .actif h2 {
   background-color: #fff; 
   border-left: 2px solid #34B233; 
   -webkit-box-shadow: 0px 0px 3px 1px #b0b0b0; 
   -moz-box-shadow: 0px 0px 3px 1px #b0b0b0; 
   box-shadow: 0px 0px 3px 1px #b0b0b0; 
}
#contenantConsultation:not(.ie8) .actif h2:after {
   background-color: #fff;
   border-bottom-left-radius: 4px;
   border-left: 2px solid #34B233;
   border-bottom: 2px solid #34B233;
   -webkit-box-shadow: -1px 1px 1px #b0b0b0;
   -moz-box-shadow: -1px 1px 1px #b0b0b0;
   box-shadow: -1px 1px 1px #b0b0b0;
   content: "\00a0";
   display: block;
   height: 15px;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   position: absolute;
   bottom: -10px;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   width: 15px;
}
#contenantConsultation .actif h2:hover, #contenantConsultation .actif h2:hover:after {box-shadow: none;}
#contenantConsultation .actif h2 a {color: #34B233;}
#contenantConsultation section + section h2 {left: 290px;}
#contenantConsultation section + section + section h2 {left: 580px;}
#contenantConsultation section > div { margin-top: 50px;}
#consultation {position: relative;}
#consultation section h2 a  {
   background-image: url(../img/Picto.png);
   background-repeat: no-repeat;
} 

.blocAnneesReleves > li > a.actif {
   border-bottom: 2px solid #34B233;
   display: inline;
   text-decoration: none;
}
.blocAnneesReleves:not(.ie8) > li > a.actif:after {
   background-color: #fff;
   border-bottom-left-radius: 2px;
   border-left: 2px solid #34B233;
   border-bottom: 2px solid #34B233;
   content: "\00a0";
   display: block;
   height: 7px;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   bottom: 3px;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   width: 7px;
}
.blocAnneesReleves > li {
   display: inline-block;
   margin-right: 10px;
   vertical-align: top;
}
#ctlAnneeRelSalActive, #ctlAnneeFiscActive {display: none;}
#ctlAnneeRelSalActive.ctlEleAnneeRelSal, #ctlAnneeFiscActive.ctlEleAnneeFisc {
   color: #34B233;
   display: inline-block !important;
   border-bottom: 2px solid #34B233;
}
.blocAutreAnnee {position: relative;}
.blocAutreAnnee:not(.ie8) > div:before { 
   background-color: #fff;
   border-top-right-radius: 3px;
   border-right: 2px solid #d0d0d0;
   border-top: 2px solid #d0d0d0;
   content: "\00a0";
   display: inline-block;
   height: 15px;
   position: relative;
   left: 55px;
   top: -10px;
   transform: rotate( -45deg );
   -webkit-transform: rotate( -45deg );
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   width: 15px;
   z-index: 200;
}
.blocAutreAnnee > div { 
   background-color: #fff;
   border: 2px solid #d0d0d0;
   border-radius: 5px; 
   box-shadow: 4px 4px 2px rgba(0,0,0,0.6);
   position: absolute; 
   left: -20px;
   top: 30px;
   z-index: 100;
}
.blocAutreAnnee:not(.ie8) ul { margin-top: -15px;}
.blocAutreAnnee ul { 
   max-height: 250px;
   padding: 0 18px 10px; 
   overflow-y: auto;
}
.blocAutreAnnee ul li {
   background-color: #f1f1f0; 
   border-bottom: 1px solid #e0e0e0; 
   border-left: 1px solid #e0e0e0; 
   padding: 5px 15px; 
   margin: 5px 0;
   width: 55px;
}
.blocAutreAnnee ul li:hover {border-color: #d0d0d0;}
.blocAutreAnnee ul li:hover a {
   opacity: 1;    
   filter:alpha(opacity==100); 
}
.blocAutreAnnee ul a {
   color: #606060;
   opacity: 0.8;    
   filter:alpha(opacity=80); 
   text-decoration: none; 
}
.blocAutreAnnee ul a.actif {
   border-bottom: none; 
   opacity: 1; 
   filter:alpha(opacity=100);
}
.blocAutreAnnee ul a:after {
   color: #606060;
   content: '»';
   font-family: "Segoe UI",OpenSans,arial,sans-serif;
   font-size: 1.1em;
   padding-left: 10px;
   opacity: 0.3;
   filter:alpha(opacity=30); 
   position: relative;
   bottom: 2px;
}
body[class="ieOld"] .blocAutreAnnee ul a:after {font-family: "Segoe UI",arial,sans-serif;}
.eleAutreAnnee {text-decoration: none;}
.eleAutreAnnee:after { 
   content: '▼';
   color: #909090;
   font-size: .9em;
   margin-left: 5px;
}
.eleAutreAnnee > span {text-decoration: underline;}
#ctlBlocPeriodeRel, #ctlBlocFlltFisc {margin-top: 15px;}
.lstReleves article h3 {font-size: 1.2em;}
.lstReleves article:before, .lstReleves:not(.ie8) article:before {
   content: "";
   position: absolute;
   top: -1px;
   left: -1px;
   border-bottom: 20px solid #fefefe;
   border-left: 20px solid #fff;
   -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
   -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
   box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}
.lstReleves article  {
   min-width: 175px;
   min-height: 40px;
   position: relative;
   -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
   -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
   box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
   border-left: 1px solid #DCDCDC;
   border-top: 1px solid #DCDCDC;
   border-radius: 5px;
   padding: 10px 10px 20px 30px;
   margin-bottom: 20px;
}
.lstReleves article ul {
   margin-top: 5px; 
   top: 0 !important;
}
.lstReleves article li {margin-bottom: 0;}
.lstReleves .nonDisp h3 {
   opacity: 0.7;
   filter: alpha(opacity=70);
}
.lstReleves .nonDisp h3 > span {
   background: url(../img/renvoi.png) right top no-repeat;
   padding-right: 17px;
}
#ctlInfoNonDisp > span {
   background: url(../img/renvoi.png) left top no-repeat;
   padding: 0 17px;
}
#horaire.actif {padding-bottom: 160px;}
#horaire h2 a {background-position: 5px 4px;} 
#horaire.actif h2 a {background-position: 5px -42px;} 
#relSal h2 a {background-position: 5px -88px;}
#relSal.actif h2 a {background-position: 5px -133px;} 
#flltFisc h2 a {background-position: 5px -179px;} 
#flltFisc.actif h2 a {background-position: 5px -224px;} 
#horaireDetail {display: inline-block;}
#horaireDetail > p {margin-top : 10px;}
#navigationHoraire {
   background-color: #e9e9e9; 
   margin: 30px 0 10px; 
   padding: 5px 0; 
   position: relative;
}
#navigationHoraire > p {
   position: absolute; 
   top: 5px; 
}
#navigationHoraire > p:first-child, #ctlJourPrec {left: 10px;}
#navigationHoraire > p ~ p, #ctlJourSuiv {right: 10px;}
#dateHoraire {
   margin-left: auto; 
   margin-right: auto; 
   width: 100%;
}
#dateHoraire > p {
   line-height: 34px; 
   text-align: center;
}
#inputDateHoraire {
   border-top-right-radius: 0; 
   border-bottom-right-radius: 0; 
   box-shadow: none; 
   width: 120px;
}
#ctlJourPrec, #ctlJourSuiv {position: absolute;}
#ctlJourPrec span, #ctlJourSuiv span {display: none;}
#ctlJourSuiv {top: 5px;}
#ctlMessage + #navigationHoraire {display: block;}
#ctlSemainePrec, #ctlSemaineSuiv, #ctlShowHoraire, #ctlJourPrec a, #ctlJourSuiv a { background: url(../img/Horaire.png) no-repeat center;}
#ctlSemainePrec, #ctlSemaineSuiv, #ctlJourPrec a, #ctlJourSuiv a {
   border: none;
   box-shadow: none;
   color: transparent;
   display: block;
   font-size: 0;
   height: 32px;
   padding: 0;
   width: 32px;
}
#ctlSemainePrec, #ctlJourPrec a {background-position: 0 -37px;}
#ctlSemaineSuiv, #ctlJourSuiv a {background-position: 0 -74px;}
#ctlShowHoraire {
   background-color: #909090;
   background-position: 0 0; width: 32px; height: 32px;
   height: 34px;
   width: 34px;
   border: none;
   border-radius: 0 5px 5px 0;
   box-shadow: none;
   color: transparent;
   font-size: 0;
   margin-left: -4px;
   padding: 0;
   vertical-align: top;
}
#ctlOubliMotPasse, #ctlInscription {font-size: .9em;}
#confMatricule {
   background: url(../img/Messages.png) 0 -54px no-repeat;
   display: inline-block;
   height: 24px;
   line-height: 24px;
   padding-left: 32px;
}
#donneesPersonnelles .formGeneral {margin-top: 5px;}
#donneesPersonnelles > h3 {margin-top: 25px;}
#donneesPersonnelles dl {
   margin-left: 50px; 
   margin-top: 15px; 
   position: relative;
}
#donneesPersonnelles dt {
   font-weight: bold; 
   line-height: 1.5em;
}
#donneesPersonnelles dd {padding-left: 20px;}
#prenom, #prenom + dd {
   position: absolute; 
   left: 450px; 
   top: 0;
}
#prenom + dd {top: 1.5em;}
#adresse {margin-top: 20px;}
.menuAction {
   position: absolute;
   right: 5px;
   top:20px;
}
.menuAction li {
   background: -ms-linear-gradient(rgb(254, 254, 254), rgb(240, 240, 240));
   background: -webkit-linear-gradient(rgb(254, 254, 254), rgb(240, 240, 240)); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(rgb(254, 254, 254), rgb(240, 240, 240)); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(rgb(254, 254, 254), rgb(240, 240, 240)); /* For Firefox 3.6 to 15 */
   background: linear-gradient(rgb(254, 254, 254), rgb(240, 240, 240)); /* Standard syntax */
   border: 1px solid #B2B2B2;
   border-radius: 2px; 
   display: inline-block;
   vertical-align: top;
}
.menuAction li:hover {
    background: -ms-linear-gradient(rgb(240, 240, 240), rgb(254, 254, 254));
    background: -webkit-linear-gradient(rgb(240, 240, 240), rgb(254, 254, 254)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgb(240, 240, 240), rgb(254, 254, 254)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgb(240, 240, 240), rgb(254, 254, 254)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgb(240, 240, 240), rgb(254, 254, 254)); /* Standard syntax */
}
.menuAction li a {  
   display: inline-block;  
   font-size: 1.5em;
   line-height: 2em;
   text-decoration: none;  
   text-align: center;
   padding: 0 7px;
}  
/* Calendrier*/
#listeJour table,#listeJour tr, #listeJour th ,#listeJour td{vertical-align:top;}
#listeJour .aujourdhui {background-color:#909090; color: #fff;}
#listeJour .absence {background-color: #FFBFBF;}
#listeJour .activite {background-color: #B2CAF6;}
#listeJour .contrainte {background-color: #FFA040;}
#listeJour .disponible {background-color: #BFEFBF;}
#listeJour .reservation {background-color: #D0D0D0;}
#listeJour .paiement {background-color: #FFFF80;}
#listeJour li {
   border: 1px solid #e0e0e0;
   display: inline-block;
   vertical-align: top;
}   
#listeJour table {border: none;}
#listeJour thead, #listeJour td[headers="plageJour1"], #calendrierPlage {
   background-color: #E9E9E9;
   text-align: center;
}
#listeJour th > span {
   display: block;
   line-height: 1.6em;
}
#listeJour th .jour + span {display: none;}
#listeJour .date {font-size: 0.9em;}
#listeJour .sommaire, #listeJour .disponible > div {
   overflow: hidden;
   width: 100px;
}
#listeJour td, #listeJour th {
   border: none;
   padding: 0 5px;
   overflow: hidden;
   width: 103px;
   max-width: 103px;
}
#listeJour td {
   border-top: 1px solid #e0e0e0;
   line-height: 30px;
}
/* Pour éviter un décalage des cellules fusionnées car elles ont une bordure de moins  */
#listeJour td, .activite > div {height: 30px;}
#listeJour td[rowspan="2"] {height: 61px;}
#listeJour td[rowspan="3"] {height: 92px;}
#listeJour td[rowspan="4"] {height: 123px;}
#listeJour td[rowspan="5"] {height: 154px;}
#listeJour td[rowspan="6"] {height: 185px;}
#listeJour td[rowspan="7"] {height: 216px;}
#listeJour td[rowspan="8"] {height: 247px;}
#listeJour td[rowspan="9"] {height: 278px;}
#listeJour td[rowspan="10"] {height: 309px;}
#listeJour td[rowspan="11"] {height: 340px;}
#listeJour td[rowspan="12"] {height: 371px;}
#listeJour td[rowspan="13"] {height: 402px;}
#listeJour td[rowspan="14"] {height: 433px;}
#listeJour td[rowspan="15"] {height: 464px;}
#listeJour td[rowspan="16"] {height: 495px;}
#listeJour td[rowspan="17"] {height: 526px;}
#listeJour td[rowspan="18"] {height: 557px;}
#listeJour td[rowspan="19"] {height: 588px;}
#listeJour td[rowspan="20"] {height: 619px;}
#listeJour td[rowspan="21"] {height: 650px;}
#listeJour td[rowspan="22"] {height: 681px;}
#listeJour td[rowspan="23"] {height: 712px;}
#listeJour td[rowspan="24"] {height: 743px;}
#listeJour td[rowspan="25"] {height: 774px;}
#listeJour td[rowspan="26"] {height: 805px;}
#listeJour td[rowspan="27"] {height: 836px;}
#listeJour td[rowspan="28"] {height: 867px;}
#listeJour td[rowspan="29"] {height: 898px;}
#listeJour td[rowspan="30"] {height: 929px;}
#listeJour {white-space: nowrap;}
#listeJour td[headers^="plageJour"], #listeJour th[id^="plageJour"]  {display: none;}
#jour1 td[headers="plageJour1"], #jour1 th[id="plageJour1"] {
   display:block;
   width: auto;
}
#jour1 td[headers="detailJour1"], #jour1 th[id="detailJour1"] {border-left: 2px solid #e0e0e0;}
#listeJour td[onclick^="afficherDetail"]:hover {cursor: pointer;}
#listeJour sup {line-height: 80%;}
.dateAnnee {display: none;}
.dateMois > .abbr::after {content: ".";}
.dateMois > .masquerSiAbbr {display: none;}
#contenantHoraireDetail {
   background-color: #909090;
   border: 1px solid #e0e0e0;
   border-radius: 5px;
   box-shadow: 5px 5px 3px rgba(0,0,0,0.6), -1px 0 1px rgba(0,0,0,0.2);
   color: #000;
   position: absolute;
}
#contenantHoraireDetail:not(.ie8) {
   border: none; 
   z-index: 100;
}
#contenantHoraireDetail:hover {cursor: pointer;}
.detail {
   background-color: #fff;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   color: #000;
   max-height: 125px;
   overflow-y: auto;
   padding: 7px;
   white-space: nowrap;
}
.enteteDetailCalendrier {
   background-color: #909090;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   color: #fff;
   padding: 7px 10px;
}
.enteteDetailCalendrier > p {text-align: center;}
#contenantHoraireDetail .enteteDetailHeure > span + span + span:before {content: '- ';}
#contenantHoraireDetail .enteteDetailHeure > span + span + span:empty::before {content: '';}
.detail.masquer, #contenantHoraireDetail.masquer {display: none;}
#calendrierPlage{display: none;}
.blocPourResponsive {display: none;}
.donneesFormAvecLabel {white-space: nowrap;}
.donneesFormAvecLabel {
   position: relative;
   padding-bottom: 100px;
}
.donneesFormComboBox{
    width: 194px;
}

/* = Tablette - Portrait */
@media only screen and (min-width: 600px) and (max-width: 940px),only screen and (max-device-width : 1024px) and (orientation : portrait) {
   body > form {width: 600px;}
   #contenu > div {margin: 5px;}
   h2 {font-size: 1.9em;}
   #accueil h2 {
      font-size: 1.7em;
      margin-left: 10px;
   }
   #accueil .boite {padding: 5px 100px;}
   #accueil .boitePub {max-width: none;}
   #accueil .boitePub > ul{
      margin-left: 25px;
      font-size: 0.7em;
   }
    #accueil .boitePub p {
       margin-bottom: 25px;
       margin-left: 10px;
   }
   #inscription .donneesFormAvecLabel, #oubliMotPasse .donneesFormAvecLabel {font-size: 0.9em;}
   .formGeneral > div { width: auto;}
   .donneesFormAvecLabel {
      border-spacing: 10px;
      font-size: 0.75em;
   }
    .donneesFormComboBox {
        width: 148px;
    }
   #donneesPersonnelles dl {margin-left: 0;}
   #prenom, #prenom + dd {left: 300px;}
   #consultation section h2 a > span {display: none;}
   #consultation section.actif h2 a > span {display: block;}
   #consultation section h2 a {
      height: 40px;
      width: 0;
   }
   #consultation section.actif h2 a {
      height: auto;
      width: auto;
   }
   #contenantConsultation section.actif:first-child + section h2 {left: 260px;}
   #contenantConsultation section.actif:first-child + section + section h2 {left: 330px;}
   #contenantConsultation section:first-child + section.actif + section h2 {left: 245px;}
   #contenantConsultation section:first-child + section h2 {left: 70px;}
   #contenantConsultation section:first-child + section + section.actif h2 {left: 142px;}
   .blocAnneesReleves{font-size: 0.9em;}
   .blocAutreAnnee ul li {
       background-color: #F1F1F0;
       border-bottom: 1px solid #E0E0E0;
       border-left: 1px solid #E0E0E0;
       padding: 5px 15px;
       margin: 5px 0px 5px -15px !important;
       width: 55px;
   }
   #listeJour td, #listeJour th, #listeJour .sommaire, #listeJour .disponible > div {
      width: 63px; 
      max-width: 63px;
   }
   #listeJour, .jour {font-size: 0.9em;}
}


/* = Mobile - Portrait */
@media only screen and (max-width: 500px), only screen and (max-device-width : 480px) and (orientation : portrait) {
   body > form {width: 310px;}
   #contenu > div {margin: 15px 5px;}
   header {height: 22px;}
   header h1 {
      font-size: 1.65em;
      line-height: 22px;
   }
   .formGeneral > div {
      margin: 30px 0;
      padding: 0;
      width: auto;
   }
   #ctlQuitter, #ctlLangue {padding: 0 4px;}
   h2 {font-size: 1.5em;}
   hr {margin: 30px 30px 10px;}
   .masquerResponsive {display: none !important;}
   .formGeneral {margin: 20px 0;}
   .formGeneral .donneesFormAvecLabel {
      border-spacing: 0;
      display: block;
   }
    .donneesFormComboBox {
        width: 194px;
    }
   .formGeneral .donneesFormAvecLabel > p {
      display: block;
      margin-bottom: 15px;
   }
   .formGeneral .donneesFormAvecLabel label, #recaptcha_widget > span {display: block;}
   .formGeneral .donneesFormAvecLabel label > span:after {content: none;}
   footer {padding-bottom: 95px;}
   footer > div {
      height: 105px;
      padding-top: 0;
   }
   #logoGrics {
      background-position: center;
      display: block;
      margin: 5px 0 0;
      position: static;
      width: 100%;
   }
   #accueil .boite {padding: 10px 5px;}
   #accueil .boitePub {display: none;}
   #accueil > h2 {
      font-size: 1.5em;
      margin-left: 5px;
   }
   #donneesPersonnelles dl {margin-left: 10px;}
   #prenom, #adresse {margin-top: 10px;}
   #prenom, #prenom + dd {position: static;}
   #consultation section h2 a > span {display: none;}
   #consultation section.actif h2 a > span {display: inherit;}
   #consultation section h2 a {
      height: 40px;
      width: 0;
   }
   #consultation section.actif h2 a {height: 40px;}
   #consultation section.actif h2 a > span {
      position: absolute;
      left: 0;
      top: 70px;
   }
   #consultation section:first-child + section.actif h2 a > span {left: -72px !important;}
   #consultation section:first-child + section + section.actif h2 a > span {left: -142px !important;}
   #consultation section.actif > div {margin-top: 100px;}
   #contenantConsultation section + section h2 {left: 70px !important;}
   #contenantConsultation section + section + section h2 {left: 140px !important;}
   #relSalInactif .consigne, #flltFiscInactif .consigne {margin: 0 10px;}
   ul.conditionsUtil {margin-left: 30px;}
   .conditionsConfirmation {margin: 0 !important;}
   .conditionsConfirmation .texte {font-size: 0.9em;}
   .formuleBienvenue {margin-bottom: 30px;}
   #pourlstActionsPerso {
      background: #999 url(../img/menu.png) center center no-repeat;
      border-radius: 3px;
      cursor: pointer;
      height: 40px;
      position: absolute;
      right: 10px;
      top: 10px;
      width: 40px;
   }
   #lstActionsPerso {
      background-color: #fff;
      margin-top: 10px;
      position: relative;
      top: -20px;
      right: 40px;
   }
   .blocPourResponsive {display: block !important;}
   #consultation .formuleBienvenue {position: relative;}
   #consultation #labelPrenomNom {
      display: block;
      max-width: 250px;
   }
   /* horaire*/
   #navigationHoraire {width: 300px;}
   #navigationHoraire + div > div {
      margin-left: 80px;
      position: relative;
   }
   #calendrierPlage th {height: 38px;}
   #calendrierPlage td {
      line-height: 30px;
      padding: 0;
   }
   #calendrierPlage {
      position: absolute;
      left: 15px;
      text-align: center;
      width: 65px;
   }
	#listeJour li {width: 200px;}
   #listeJour .sommaire, #listeJour .disponible > div {width: 190px;}
   #jour1 td[headers="detailJour1"], #jour1 th[id="detailJour1"] {border-left: none;}
   #listeJour td[headers^="plageJour"], #listeJour th[id^="plageJour"] {display: none;}
	#listeJour table {width: 100%;}
   .dateAnnee {display: inline;}
   .dateMois > .abbr::after {display: none;}
   .dateMois > .masquerSiAbbr {display: inline;}
   #calendrierPlage{display: table;}
   #inputDateHoraire {width: 90px;}
   #listeJour, .jour {font-size: 1em;}
   #ctlSemainePrec, #ctlSemaineSuiv {display: none;}
   .conditionsConfirmation  { margin-top: 25px !important; }
   .conditionsConfirmation label { 
      font-weight: normal !important; 
      opacity: 1 !important;    
      filter:alpha(opacity=100) !important; 
   }
   #ctlAnneeRelSalActive.ctlEleAnneeRelSal, #ctlAnneeFiscActive.ctlEleAnneeFisc {display: none !important;}
   #selectFiltreFlltFisc { width: 100px; } 
   #ctlBlocAnneeFisc { width: 96px; }
   #selectFiltreRelSal { width: 200px; } 
   #ctlBlocAnneeRelSal { width: 196px; }
   .selectFiltresResponsive a {
      border: 2px solid #c0c0c0;
      border-radius: 5px; 
      display: block;
      line-height: 24px;
      position:relative;
      text-decoration : none;
   }
   .selectFiltresResponsive a span {padding-left: 10px;}
   .selectFiltresResponsive.ouvert a {
      border-bottom-left-radius: 0; 
      border-bottom-right-radius: 0;
      border-bottom-width: 1px;
   }
   .selectFiltresResponsive a:after {
      background-color: #999;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      color: #fff;
      content: '▼';
      font-size: .9em;
      padding: 2px 3px;
      position: absolute;
      right: -2px;
      top: -2px;
   }
   .selectFiltresResponsive.ouvert a:after {
      border-bottom-right-radius: 0; 
      padding-bottom: 1px;
   }
   .selectFiltresResponsive + ul {
      border: 2px solid #c0c0c0;
      border-top-width: 0;
      border-bottom-width: 3px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      max-height: 250px;
      overflow-y: auto;
   }
   .blocAnneesReleves > li,
   .blocAutreAnnee ul li { 
      display: block;
      margin: 2px 0;
      padding: 0;
   }
   .blocAnneesReleves li a {
      background: url(../img/go_gris.png) 5px no-repeat;
      color: #707070 !important;
      display: block;
      font-size: .9em;
      line-height: 2em;
      opacity: 1 !important;
      filter: alpha(opacity=100) !important;
      padding-left: 25px;
      text-decoration: none;
      }
   .blocAnneesReleves a.actif {color: #656565 !important;}
   .blocAnneesReleves li a.actif {
      border: none;
      display: block;
   }
   .blocAnneesReleves > li:hover > a,
   .blocAutreAnnee ul li:hover a { 
      background-color: #f9f9f9;
      opacity: 1 !important;
      filter: alpha(opacity=100) !important;
      text-shadow: 0px 1px 1px #c0c0c0;
   }
   .blocAnneesReleves li a.actif:after {display: none !important;}
   .blocAutreAnnee {margin-top: 0 !important;}
   .blocAutreAnnee > div { 
      background-color: #fff; 
      border: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      position: static; 
   }
   .blocAutreAnnee > div.masquer {display: block;}
   .blocAutreAnnee ul {
      margin-top: 0 !important;
      max-height: none;
      padding: 0;
   }
   .blocAutreAnnee ul li {
      background-color: #fff; 
      border: none; 
      padding: 0;
      width: auto;
   }
   .blocAutreAnnee ul a:after {display: none;}
   .blocAutreAnnee > div:before {display: none !important;}
   .eleAutreAnnee > span {text-decoration: none;}
   #ctlEleAutreAnneeRelSal, #ctlEleAutreAnnee {display: none;}
   .lstReleves article h3 {font-size: 1em;}
   #relSalLst ul article h3 span:before { 
      content: '\A'; 
      white-space: pre;
   }
}

/* = Mobile - Paysage */
@media only screen and (min-width:501px) and (max-width: 599px), only screen and (max-device-width : 480px) and (orientation : landscape) {
   body > form {width: 500px;}
   h2 {font-size: 1.8em;}
   #contenu > div {margin: 5px;}
   #accueil .boite {padding: 5px 60px;}
   #accueil .boitePub {display: none;}
   #accueil > h2 {font-size: 1.5em;}
   #recaptcha_widget {
      display: block;
      margin-bottom: 15px;
   }
   #recaptcha_widget > input {margin-bottom: 15px;}
   hr {margin: 30px 30px 10px;}
   .formGeneral {margin: 20px 0;}
   .formGeneral .donneesFormAvecLabel {
      border-spacing: 0;
      display: block;
   }
    .donneesFormComboBox {
        width: 194px;
    }
   .formGeneral .donneesFormAvecLabel > p {
      display: block;
      margin-bottom: 15px;
   }
   .formGeneral .donneesFormAvecLabel label, #recaptcha_widget > span {display: block;}
   .formGeneral .donneesFormAvecLabel label > span::after {content: none;}
   #donneesPersonnelles dl {margin-left: 10px;}
   #prenom, #adresse {margin-top: 10px;}
   #prenom, #prenom + dd {position: static;}
   #consultation section h2 a > span {display: none;}
   #consultation section.actif h2 a > span {display: block;}
   #consultation section h2 a {
      height: 40px;
      width: 0;
   }
   #consultation section.actif h2 a {
      height: auto;
      width: auto;
   }
   .blocAnneesReleves{font-size: 0.8em;}
   #contenantConsultation section.actif:first-child + section h2 {left: 260px !important;}
   #contenantConsultation section.actif:first-child + section + section h2 {left: 330px !important;}
   #contenantConsultation section:first-child + section.actif + section h2 {left: 245px !important;}
   #contenantConsultation section:first-child + section h2 {left: 70px !important;}
   #contenantConsultation section:first-child + section + section.actif h2 {left: 142px !important;}
   #relSalInactif .consigne, #flltFiscInactif .consigne {margin: 0 10px;}
   ul.conditionsUtil {margin-left: 30px;}
   .conditionsConfirmation {margin: 0 !important;}
   .conditionsConfirmation .texte {font-size: 0.9em;}
   #lstActionsPerso {margin-bottom: 10px;}
   #listeJour td, #listeJour th, #listeJour .sommaire, #listeJour .disponible > div {
      width: 50px; 
      max-width: 50px;
   }
   #listeJour th {padding: 0 4px;}
   #listeJour, .jour {font-size: 0.9em;}
   .jour > .abbr::after {content: ".";}
   .jour > .masquerSiAbbr {display: none;}
   #relSalLst ul article h3 span:before { 
      content: '\A'; 
      white-space: pre;
   }
}