/*
Couleurs Jangopom :
   - Rouge-bordeau : #cd4240
   - Beige : #f9f0e0
   - Vert : #88aa00
*/


html, body {
   width:100%;
   height:100%;
   padding:0;
   margin:0;
}
body {
   font-family: 'Delius',handwriting;
}
h1, h2, h3, h4, h5, h6 {
  font-family:'Mukta Mahee',Helvetica,Arial,Lucida,sans-serif
}
a {color:#cd4240; text-decoration:none;}
a:hover { color:#88aa00; text-decoration:underline;}

a.button {
    padding: 6px;
    border: 1px outset buttonborder;
    border-radius: 4px;
    color: #fff;
    background-color: #cd4240;
    text-decoration: none;
    font-size:1.2em
    font-weight: bold;
}
a.button:hover {
    background-color:#880000;
}

.clear {
       clear:both;
}

#bandeau {
    width: 100%;
    height:210px;
    background-color: #f9f0e0;
   background-image: url('img/vichy-10.jpg');
   background-position:left bottom;
   background-repeat: repeat-x;
}

#header-logo-image {
	 width:210px;
	 float:left;
	 margin-right:20px;
 }
#header-logo-image img {
	max-width:150px;
	max-height:150px;
	margin:0 0 30px 20px;
	float:left;
}
#header-menu, #admin-menu {
	display:inline;
	font-size:1.5em;
	color:#88aa00;
	margin-top:60px;
}
#header-menu ul, #admin-menu ul {
   margin:0;
   padding:0;
}
#header-menu li, #admin-menu li {
   list-style-type:none;
   float:left;
   padding-left:30px;
}
#header-menu li, #admin-menu li {
	margin-bottom:15px;
	font-size:1.2em;
	z-index:100;
}
#header-menu li ul li, #admin-menu li ul li {
	margin-bottom:5px;
	font-size:0.9em;
}

#header-menu ul ul, #admin-menu ul ul {display: none; position: absolute; left: 114px; top: -1px; margin:0px; padding: 0px; border: 1px solid grey;}
#header-menu li, #admin-menu li {list-style-type: none; position: relative; text-align:center;}
.niveau2 li, .niveau3 li {margin-bottom:0!important; padding-bottom:7px!important;}
#header-menu li:hover ul.niveau2, #admin-menu li:hover ul.niveau2, li li:hover ul.niveau3 {display: block;}
#header-menu a, #admin-menu a { padding:2px 6px; color:#cd4240; text-decoration:none;}
#header-menu li a:hover, #admin-menu a:hover, .menu_actif {background-color: #88aa00; color:#fff!important; text-decoration:none;}

#bandeau #title {
	clear:both;
    width:100%;
	margin:0 0 30px 20px;
    font-size:1.2em;
    font-weight:bold;
    text-align:center;
}

.main {
	 position:relative;
	 padding-left:100px;
	 padding-right:100px;
	 z-index:0;
 }
 .main h1, .main h2, .main h3, .main h4, .main h5, .main h6 {
	 display:block;
	 width:100%;
 }
 .main table {
     margin-top: 20px;
     margin-bottom: 20px;
 }
 .main table, th, td {
  border: 1px solid #cd4240;
}
thead {
    top:0;
    position:sticky;
    background:#cd4240;
    color:#fff;
    z-index:1000;
}
tr:hover, td:hover {
   background-color:#f9f0e0;
}
thead tr:hover, thead th:hover {
   background-color:#cd4240;
}

#footer {
   background-color:#f9f0e0;
   background-image: url('img/vichy-10.jpg');
   background-position:left top;
   background-repeat: repeat-x;
   padding-top:40px;
   padding-bottom:20px;
   text-align:center;
   color: #000;
   font-weight:bold;
   font-size:1.2em;
}
#footer a {
   color:#88aa00;
}

#resp-menu {
	display: none;
    position:absolute;
    top:10px;;
    right:10px;
    z-index:1000;
}
#rmenu {
    margin-top: 24px;
    background-color:#fff;
    padding:5px;
    border: 1px solid #cd4240;
    box-shadow: -1px 1px 5px #000;
}
#rmenu li {list-style-type: none;}
#rmenu a:hover {text-decoration:underline;}
.fa {
	float:right;
	font-size:24px;
}


.login #page, #concours #content, #add_concours #content {
	width:50%;
	text-align:center;
	margin:auto;
}
.login img {
	width:200px;
	height:213px;
	margin:auto;
}

.cadre_demi_gauche {
   width:45%;
   margin-right:2.5%;
   margin-bottom: 25px;
   padding:10px;
   border: 1px solid #aeaeae;
   float: left;
   background-color: #f9f0e0;
}

.cadre_demi_droite {
   width:45%;
   margin-left:2.5%;
   margin-bottom: 25px;
   padding:10px;
   border: 1px solid #aeaeae;
   float: left;
   background-color: #f9f0e0;
}

.cadre_produit {
   float: left;
   border: 1px solid #aeaeae;
   width: 260px;
   margin-right: 10px;
   margin-bottom: 15px;
   padding: 5px;
   font-size:1.2em;
   font-weight:bold;
   text-align:center;
}
.cadre_produit img {
   width: 95%;
   margin-top:5px;
}
.cadre_produit .description {
   text-align: left;
   font-size:0.7em;
   font-weight:normal;
   margin-top:10px;
   margin-bottom:20px;
}


.inactif {
   color:#888;
   background-color:#ddd;
}
.inactif_produit {
   opacity: 0.6;
}
.inactif_produit img {
   filter: grayscale(1);
}
.inactif_produit a {
   color:#333;
}
.inactif_produit a:hover {
   color:#88aa00;
}
.hors_saison img {
    -webkit-filter: sepia(100%);
	filter: sepia(100%);
}
.hors_saison a {
   color:#897741;
}
.hors_saison a:hover {
   color:#88aa00;
}
.small {
	font-size: 0.8em;
}
.txt_red {
	color:#cd4240;
}
.fond_col {
    background-color:#cd4240;
    color:#fff;
    padding:10px;
}
.fond_vert {
    background-color:#88aa00;
    color:#fff;
    padding:10px;
}
.fond_vert:hover {
    background-color:#88aa00!important;
}
.fond_beige {
   background-color:#f9f0e0 !important;
}
.fond_gris {
   background-color:#ccc !important;
}
.txt_gris {
   color:#888 !important;
}
.gras {
   font-weight: bold;
}
.coche {
    width:15px;
    height: 15px;
}
.bord_tab table td {
    border: 1px solid #aaa;
}
.no_bord td {
    border: 0px!important;
}
	
	
a img.bouton {
	float:left;
	margin:3px 10px;
	width:30px;
	height:30px;
}
.actif .bouton, .fini .bouton {
	float:none!important;
	margin:0 5px;
	width:15px!important;
	height:15px!important;
}
a img.bouton {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
	margin:3px 10px;
}
a:hover img.bouton {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

input.petit {
	width:25px;
}
input.grand {
	width:600px;
	max-width:100%;
}
textarea {
  width: 600px;
  max-width:100%;
  height: 150px;
}
.checktxt {
	position: relative;
	display:inline-block;
	margin-top: -10px;
}
.cadre {
	float:left;
	text-align:center;
	  border: 1px solid #EAEAEA;
	  margin: 5px 20px 5px 0;
	  padding: 3px;
	  width:28%;
}
.cadre input {
	padding:0!important;
}

table.rollover tr:hover {
	background:grey;
}
.no_mail {
	text-decoration: line-through;
	font-style: italic;
}
.normal {
	text-decoration: none!important;
	color:red;
}

.hidden {
   display: none;
}



.center {
	text-align:center;
}
.hide {
	display:none;
}
.petit_bouton {
	padding: 5px 10px;
   font-size: 14px;
}


input[type="text"],
input[type="email"],
input[type="password"],
textarea {
	padding: 1%;
	border: 1px solid #ccc;
	line-height: 20px;
	width: 60%;
	margin: 0 0 30px;
	background-color: #f9f0e0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.terrain input,
.terrain textarea {
	width: 95%;
}
.terrain input.small {
	width: 25%;
}
#config_ptv input[type="text"] {
    width: 36px!important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus {
	border: 1px solid #EAEAEA;
}
input {
	width: 60%;
	padding: 4px 10px 4px 10px;
	height: 36px;
	color: #444;
	background-color: #FFFFFF;
	margin: 0;
	border: 1px solid #EAEAEA;
}   */
input:focus {
	padding-left: 10px;
	border-color: #EAEAEA;
	text-indent: 0;
}
input[type="radio"],
input[type="checkbox"] {
   width: 60px;
}
input[type="reset"],
input[type="button"],
input[type="submit"],
button {
   margin-bottom: 30px;
   padding: 10px 20px;
	background-color: #cd4240;
	border: 0px;
	transition: background-color 0.3s linear 0s;
   -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius:3px;
   font-size: 18px;
   -moz-appearance: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
	display:inline-block;
   color: #FFFFFF;
}
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
	background-color: #880000;
}
/*input[type="checkbox"] {
	width:10%!important;
}  */

.pref img {
	width:50px;
	height:50px;
	margin:auto;
}

.label {
  position: relative;  /*les .label deviennent référents*/
  cursor: help;
  border-radius: 50%;
  background: #cd4240;
  color: #fff;
  padding: 2px;
}
.label:hover:after,
.label:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -1.4em;
  left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px;
  background: #cd4240;
  color: #fff;
  border-radius: 4px;
  font-size: 1.1rem;
}
[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "?";
  position: absolute;
  top: -1em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 20px;
  color: #cd4240;
}
/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;
}


#status { text-align:center; display:none; }
#status.online { background:green; display:flex; justify-content:center; align-items:center; position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100vh; z-index:10000; }
#status.offline { background:red; display:flex; justify-content:center; align-items:center; position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100vh; z-index:10000; }
#status.connect { background:orange; display:flex; justify-content:center; align-items:center; position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100vh; z-index:10000; }
#state { background:white; position: absolute; padding:20px; }

.txt_vertical {
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
   -webkit-writing-mode: vertical-rl;
   writing-mode: vertical-rl;
}



@media screen and (max-width: 1230px) {
	#header-logo-image img {
		max-width:90px;
		max-height:90px;
		margin-bottom:20px;
		float:none;
	}
	.main {
		margin:0;
		width:100%;
		max_width:100%;
		padding:0!important;
	}
	#bandeau {
        height:120px;
    }
    #admin-menu {
        font-size:1em;
    }
	#header-menu {
        display:none;
	}
    #resp-menu {
    	display: block;
    	padding-top:30px;
    }
    #resp-menu ul {
       margin:0;
       padding:0;
    }
    #resp-menu li {
       list-style-type:none;
       float:left;
       padding-left:30px;
    }
    #resp-menu li {
	    margin-bottom:15px;
	    font-size:1.2em;
	    z-index:100;
    }
    #resp-menu li ul li {
	    margin-bottom:5px;
	    font-size:0.9em;
    }
    #resp-menu li img {
        width:auto;
        height:35px
    }
	#site-title {
		font-size: 16px;
	}
	.pc{
        display:none;
    }
    .cadre_produit {
       width:260px;
       float:left;
       margin-left:0;
       margin-right:10px;
    }
	#commandes input[type="submit"] {
       margin-left:20%!important;
    }
}



@media screen and (max-width: 550px) {
	#header-logo-image img {
		max-width:90px;
		max-height:90px;
		margin-bottom:20px;
		float:none;
	}
	.main {
		margin:0;
		width:100%;
		max_width:100%;
		padding:0!important;
	}
	#bandeau {
        height:120px;
    }
	#header-menu {
        display:none;
	}
    #resp-menu {
    	display: block;
    	padding-top:30px;
    }
    #resp-menu ul {
       margin:0;
       padding:0;
    }
    #resp-menu li {
       list-style-type:none;
       float:left;
       padding-left:30px;
    }
    #resp-menu li {
	    margin-bottom:15px;
	    font-size:1.2em;
	    z-index:100;
    }
    #resp-menu li ul li {
	    margin-bottom:5px;
	    font-size:0.9em;
    }
    #resp-menu li img {
        width:auto;
        height:35px
    }
	#site-title {
		font-size: 16px;
	}
	.pc{
        display:none;
    }
    .cadre_produit {
       width:80%;
       float:none;
       margin-left:9.5%;
       margin-right:9.5%;
    }
	#commandes input[type="submit"] {
       margin-left:20%!important;
    }
}




@media print {
	
	body {
	  font-size: 12pt
	}
	.noprint {
		display:none;
	}
	#menu {
		display:none;
	}
	.main {
		border-left:none!important;
		width:100%!important;
	}
	form {
		display:none;
	}
	.small {
		font-size:10px;
	}
	.big {
		font-size:15px;
		font-weight:bold;
	}
	.white, .white td {
		background-color: rgba(255, 255, 255, 1);
	}
  
  
}