html, body{ margin: 0; padding: 0; }
html{ width: 100%; height: 100%; background-color: #6a8699; background-color: #333; }
body{ width: 1200px; min-height: 100%; display: table; margin: 0 auto; box-shadow: 0 0 15px #000; background-color: white; font-family: "Helvetica", Arial; font-size: 12px; color: black; position:relative; -moz-box-sizing: border-box; box-sizing: border-box; }
#bodyIpad{ width:100% !important; }
a{ color: #333; text-decoration: none; }
a:hover{ color: #6a8699; }

table{ border-collapse: collapse; }
td, tr{ border: 1px solid #333; padding: 5px; }
th{ background-color:#666; border: 1px solid #333; color: white; text-decoration: bold; padding: 5px; }

hr{ border: none; border-bottom: 1px dotted black; }

header{
	width: 100%;
	height: 175px;/*210*/
        height: 400px;
	position: relative;
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */
        /*background-image: url("images/fnd1000.png");*/
        background-image: url("images/IMG_20150408_1206552.jpg");
        background-image: url("images/bgan2.png");
        background-image: url("images/IMG_20170923_194953.jpg");
        background-image: url("images/IMG_3011.JPG");
        background-image: url("images/header082020_2.jpg");
        background-size: 100%;
        background-position: 0 100%;
        background-position-y: 57%;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.used{ background-color:#e86464 !important; }

.iconCopy{ width:14px; cursor:pointer; }

#headerIpad{ height:100px !important; background-position-y:39% !important; }

#headerLogo{ height: 170px; position: absolute; top: 0; left: 330px; }
#headerLogo2{ position: absolute; bottom: 45px; right: 10px; width: 150px; }
#headerLogoBig{ position:absolute; left:300px; top:129px; width:600px; }

#headerNav{ width: 100%; color: white; position: absolute; left: 0; bottom: 0; box-shadow: 0 0 5px #333; }
#headerNav2 ul{ margin: 0; padding: 0; }
#headerNav2 li{ padding: 5px 10px; border: 1px solid white; list-style: none; display: inline-block; }
#headerNav2 a{ color: white; text-decoration: none; display: block; width: 100%; height: 100%; border: 1px solid blue; }
#headerNav2 a:hover{ color: red; }

.notification{ margin: 10px; margin-top: 15px; font-size:18px; padding: 5px; text-align: center; font-weight: bold; color: #c42e29; box-shadow: 0px 0px 5px 5px #ccc; background-color: #ccc; }
.notificationAction{ width:50%;margin:auto;margin-top:10px;border-radius:5px;box-shadow:0 0 5px #333;padding:5px; }
.ok{ background-color:#9ab3d5; }
.error{ background-color:#d59a9a; }

#panneauNotif{ display:block; position: absolute; background-color:#222; width:0px; top:0; right:0; box-shadow: inset 3px 0px 10px 1px #000; transition-property:width; transition-duration:.3s }
#panneauNotif .content{ overflow: hidden; }
#panneauNotif #cacherPanneauNotif{ position:absolute; top:0; left:-23px; cursor:pointer; color:white; background-color:rgba(0, 0, 0, 0.5); border-radius:5px 0 0 5px; padding: 3px  0 0 5px; width:18px; height:18px; }
#panneauNotif h1{ color:white; font-size:15px; margin: 5px 0 5px 0; text-align:center; text-transform:uppercase; }
#panneauNotif .oneNotif{ color:white; margin: 0 10px 0 10px; padding:5px; border-bottom: 1px dashed #ddd; }
#panneauNotif .oneNotif:last-child{ border:0; }
#panneauNotif .oneNotif .date{ text-align:right; margin-top:3px; font-size:10px; }
#panneauNotif .oneNotif p{ margin:0; }

#page{ position: relative; }
#page #gauche{ width: 74%; float: left; }
#page #droite{ width: 25%; float: right; border-left: 1px dashed #aaa; }
#page #total{ width: 100%; }

#page #gauche article, #page #total article{ margin: 10px; }
#page #gauche article h1, .titreh1{ font-weight: bold; padding: 5px; margin: 0 0 0 -10px; margin-bottom: 10px; font-size: 16px; background-color: #333; color: white; }
#page #gauche article h1 a{ color: white; }
#page #gauche article h2{ width: 50%; margin: auto; color: black; border-bottom: 1px solid black; text-align: center; font-size: 16px; padding: 2px; clear: both; }
#page #gauche article p{ margin: 5px 0; }

.articleErreur{ color: #87120d; }
.articleErreur h1{ background-color: #9d1c17 !important; }

#listeImagesAnnonce, #listeImagesAnnonceDefauts{ margin-top:10px; margin-bottom:10px; text-align:center; }
#listeImagesAnnonce img, #listeImagesAnnonceDefauts img{ margin:0 3px; }


.boutonsPartager{ padding: 5px 0px; border-top: 1px dotted #666; border-bottom: 1px dotted #666; clear: both; }
.boutonsPartager img{ vertical-align: middle; margin-left: 5px; max-height: 20px; }

.boutonGris{ background-color:#505050; background-image:-webkit-gradient(lenear, left bottom, left top, color-stop(0,#505050), color-stop(1,#707070)); background-position:center top; background-repeat:no-repeat; color:white; font: bold 12px Arial, Helvetica, sans-serif; text-align:center; text-shadow:0 -1px 0 rgba(0,0,0,0.25); width:100%; text-decoration:none; }

#h1recherche, #h1titrerech{ transition-property: all; transition-duration: 1s; }

#page #droite aside{ margin: 10px 5px; }
#page #droite aside h1{ padding: 5px; margin: 0 0 0 -5px; margin-bottom: 10px; font-size: 14px; background-color: #333; color: white; }

.one{ width: 100%; float: left; }
.two{ width: 50%; float: left; }
.two h1{ font-size: 13px !important; }
.three{ width: 33.33%; float: left; }

.case{ width: 95%; margin: auto; margin-top: 10px; margin-bottom: 10px; display: block; padding: 10px 0 10px 0; text-align: center; font-size: 15px; border: 1px solid black; border-radius: 5px; box-shadow: 0px 0px 3px 0px #666; }
.case:hover{ background-color: #ccc; color: black; box-shadow: 0px 0px 5px 0px #333 inset; }
.caseAnnonce{ padding-bottom: 10px; position: relative; }
.caseAnnonce:nth-child(2n+1){ background-color: #eee; }
.caseAnnonce:nth-child(2n+1) h1{ margin-left: 0px !important; }
.caseAnnonce p{ padding: 0 5px; }
.caseAnnonce h1{ margin-left: 0px !important; }
.dimg{ text-align: center; }
.contourImgZoom{ margin:auto; width:370px; height:250px; overflow: hidden; border:0px solid black; }
.contourImgZoom > img{ width:370px; transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s; }
.caseAnnonce:hover > .contourImgZoom > img {
    transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -moz-transform: scale(1.05);
}
.case i{ font-size:30px; text-align:center; }
.case span{ display:block; }
.listeImagesMini{ text-align: center; margin-top: 10px; }
.listeImagesMini img{ margin: 0 2px; cursor: pointer; }
.h1admin{ font-size: 20px; text-align:center; margin-bottom:5px; margin-top:10px; background-color:#ddd; padding: 5px 0 5px 0; }
.h2admin{ text-align:center;border-bottom:1px dashed black;margin:0 5px 0 5px; }

.dimgu{ width: 700px; height: 525px; margin: auto; overflow:visible; cursor: pointer; position: relative; }
.dimgu img{ width: 100%; height: 100%; position: absolute; }

.listeOptionsAnnonce label{ display:inline !important; }

.popupNotificationsCaisse{ background-color:white; right:10px; bottom:10px; box-shadow:0 0 5px #666; padding:10px; border:3px solid #D50000; position:fixed; }
.popupNotificationsCaisse p{ font-size:17px; color:#D50000; margin:3px 0;  }

#notif
{
    position : absolute;
    width : 75px;
    height : 75px;
    top : 0px;
    right : 0px;
    z-index : 1;
    overflow : hidden;
    text-align : right;
    z-index: 9999;
}

.notifBig{ width: 200px !important; height: 200px !important; }
.notifBig span{ font-size: 30px !important; line-height: 40px !important; width: 200px !important; top: 35px !important; right: -45px !important; }

#notif span
{
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 23px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    width: 105px;
    display: block;
    background: #c80d0d;
    background: linear-gradient(#c80d0d 0%, #a80a0a 100%);
    background: -webkit-linear-gradient(top, #c80d0d, #a80a0a);

    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 17px;
    right: -25px; 
}

#voirtout
{
    clear: both;
    display: block;
    width: 100%;
    text-align: center;
    background-color: #ccc;
    border: 1px solid #666;
    padding: 5px;
}

#voirtout:hover
{
    background-color: #aaa;
    color: black;
}

.degradeNoir{
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 15%, rgba(0,0,0,1) 19%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 81%, rgba(0,0,0,0.8) 85%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(15%,rgba(0,0,0,0.8)), color-stop(19%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 15%,rgba(0,0,0,1) 19%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,1) 81%,rgba(0,0,0,0.8) 85%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 15%,rgba(0,0,0,1) 19%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,1) 81%,rgba(0,0,0,0.8) 85%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 15%,rgba(0,0,0,1) 19%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,1) 81%,rgba(0,0,0,0.8) 85%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 15%,rgba(0,0,0,1) 19%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,1) 81%,rgba(0,0,0,0.8) 85%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

#formulaire label{ margin-top: 5px; display: block; }
#formulaire .labelLigne{ display: inline; }
#formulaire input[type="text"], #formulaire input[type="date"], #formulaire input[type="time"], #formulaire input[type="password"], #formulaire input[type="number"], #formulaire textarea, #formulaire select{ border: 1px solid #666; border-radius: 3px; box-shadow: inset 0 1px 5px #ccc; }
#formulaire input[type="text"], #formulaire input[type="date"], #formulaire input[type="time"], #formulaire input[type="password"], #formulaire input[type="number"]{ min-width: 200px; border: 1px solid #666; border-radius: 3px; padding: 5px; }
#formulaire select{ padding: 5px; }
#formulaire textarea{ width: 100%; max-width: 100%; min-height: 150px; }
#formulaire input[type="submit"], #formulaire input[type="button"]{ margin-top: 10px; border: 1px solid #666; border-radius: 3px; padding: 5px; box-shadow: 0 1px 5px #ccc; }
#formulaire .selectformfiltre{ width: 150px; }
#formulaire #valeurRecherche{ width: 60%; }


footer{ width: 100%; height: 0; background-color: #333; display : table-row; box-shadow: inset 0 1px 10px #000; }
footer p{ text-align: center; margin: 0; padding: 10px; color: white; }
footer a{ color: white; text-decoration: none; }

@media screen and (max-width: 640px){
    
    body{ width: 100%; }
    header{ height: 400px; background-size: 100% 100%; background-position: 0 -130px; background-position-y: -130px; }
    header{ height: 0; padding-bottom: 74.62%; overflow: hidden; }
    #page #gauche, #page #droite{ width: 100%; float: none !important; }
    #page #droite{ border: 0px; }

    .caseAnnonce h1{ margin-left: 0px !important; }
    .dimgu{ width: 100%; height: 0; padding-bottom: 74.62%; overflow: hidden; }
    .two{ width: 100%; }
    #menu li{ display: block; width: 100%; }
    #headerLogo2{ bottom: 165px; }
    #headerLogoBig{ width: 80%; top: 50px; left: 10%; }

    #formulaire .selectformfiltre{ width: 45%; }
    #formulaire #valeurRecherche{ margin: auto; width: 95%; }
}

@media screen and (max-width: 360px){
    
    #headerLogo2{ width: 80px; }
    
}