/* Styles globaux
________________________________________________________*/

BODY {padding: 0; margin: 0; background-color: #fcfcfc; font-family: "Lato", Arial, Tahoma, sans-serif; font-size: 14px;}
::selection {background: #d09956; color: #fff;}
A {color: #d29a4f;}
A:hover {text-decoration: none; color: #7e5d30;}
H1 {font-size: 22px; padding: 4px; margin: 0;}
H2 {font-size: 46px; line-height: 48px; font-weight: 400; letter-spacing: 0px; font-weight: bold; margin: 18px 0; padding: 0;}
H5 {text-transform: uppercase !important; letter-spacing: 4px !important; font-size: 14px !important; font-family: 'lato', sans-serif !important; color: #c99d43; margin: 0; padding: 0;}

HR {height: 1px; color: #c99d43; background-color: #c99d43; width: 20%; border: none; margin: 10px 0 35px 0; padding: 0;}
	HR.center {margin: 35px auto 35px;}
SELECT, INPUT[type="text"], INPUT[type="date"], INPUT[type="password"], INPUT[type="number"], TEXTAREA {color: #626262; background-color: rgba(255, 255, 255, 1); border-color: #ddd; box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.02); padding: 10px; outline: none; max-width: 100%; display: inline-block; font-size: 14px; border-width: 1px; border-style: solid; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
SELECT:focus, INPUT:focus, TEXTAREA:focus {color: #1982c2; background-color: rgba(233, 245, 252, 1) !important; border-color: #d5e5ee;}
.calign {text-align: center;}
.ralign {text-align: right;}
#mainbody {padding: 30px;}
DIV.error {border: 1px solid red; padding: 10px; margin-bottom: 20px; background-color: #fff; font-weight: bold;}
P.error {font-weight: bold; padding: 0 5px;}
P.info {padding: 0 5px;}
#confirmation {margin-bottom: 30px; color: #27358d; font-weight: bold;}
.exp {vertical-align: top; color: #27358d; font-style: normal; font-size: 16px;}


/* CompatibilitŽ site Wordpress
________________________________________________________*/

@font-face{font-family:'icons';src:url(../fonts/icons.eot?93978679);src:url(../fonts/icons.eot?93978679#iefix) format("embedded-opentype"),url(../fonts/icons.woff?93978679) format("woff"),url(../fonts/icons.ttf?93978679) format("truetype");font-weight:400;font-style:normal}
[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"icons";font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:none!important;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}
[class^="icon-"]:before, [class*=" icon-"]:before {font-family: "icons"; font-style: normal; font-weight: 400; speak: none; display: inline-block;
text-decoration: none!important; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: .2em;}
.icon-mail-line:before{content:'\e8d1'}
.icon-phone:before{content:'\e8f4'}
.icon-attention:before{content:'\e810'}
.icon-info-circled:before{content:'\e8a5'}
.icon-menu-fine:before {content: '\e960';}
.icon-cancel-fine:before {content: '\e963';}


/* Barre du haut
________________________________________________________*/

#topmenu {background-color: #303192; margin: 0; padding: 0; display: block; border: 0; color: #bbb; font-size: 17px; width: 100%; z-index: 30; }

	#menucontainer {margin: 0 0 0 13px; position: relative; padding: 0; border: 0; vertical-align: baseline;}
	#menucontainer:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;}

	.right_menu {float: right; padding: 12px 0;}
	#topmenu UL {list-style: none outside; display: inline-block;}
		.contact_details {padding: 12px 0 10px 0; margin: 0;}
		#topmenu LI {display: inline-block; margin-right: 7px;}
			#topmenu LI I {margin-right: 2px;}
			.icon-mail-line:before {content: '\e8d1';}
			.icon-phone:before {content: '\e8f4';}
			#topmenu A {color: #bbb; text-decoration: none;}
			#topmenu A:hover {color: #297ac2; text-decoration: underline;}

		.site_menu {float: right; font-size: 15px; margin-right: 4px; margin-bottom: 13px;}
			.site_menu .active {font-weight: bold;}

@media only screen and (max-width: 768px) {
	#topmenu {background-color: #FFF;}
	#menucontainer {text-align: center;}
		#menucontainer .contact_details {margin: 0 auto; padding: 4px 0; color: #000;}
			#menucontainer .contact_details A {color: #0095eb; font-size: 14px;}
		#menucontainer .site_menu {display: block; float: none; margin: 15px 0 0 0; padding: 0;}
}


/* Menu
________________________________________________________*/

#mainmenu {background-color: #fff; margin: 0; border-width: 0 0 1px 0; border-color: #eee; border-style: solid; position: relative;}
	#mainmenu .logo {float: left; padding: 18px 0 10px 32px;}
		#mainmenu #logo IMG {width: 184px;}
	#mainmenu UL.menu {list-style: none outside; display: inline-block; padding: 0 30px;}
		#mainmenu .menu LI {display: inline-block; padding: 0; position: relative;}
		#mainmenu .menu LI:hover {z-index: 204;}
			#mainmenu .menu LI A {padding:0 0; color: #444; text-decoration: none; position: relative;}
			#mainmenu .menu LI A:hover {color: #c99d43; transition-property: color; transition-duration: 0.3s;}
				#mainmenu .menu LI A SPAN {display: block; line-height: 60px; padding: 0 20px; white-space: nowrap; border-width: 0 1px 0 0; border-style: solid; border-color: #f2f2f2; text-transform: uppercase;  position: relative;}
				#mainmenu .menu LI:last-child A SPAN {border-right-width: 0;}
				#mainmenu .menu LI A SPAN:after {content: ""; height: 4px; display: block; position: absolute; left: 0; right: 0; bottom: -20px; z-index: 203; background-color: #c99d43; opacity: 0; filter: alpha(opacity=0);}
				#mainmenu .menu LI A:hover SPAN:after {opacity: 1; transition-property: opacity; transition-duration: 0.8s;}
#mainmenu:after {content: ""; display: table; clear: both;}
.responsive-menu-toggle {color: #c99d43; float: right; right: 20px; position: absolute; top: 50%; margin-top: -17px; width: 34px; height: 34px; text-align: center; border-radius: 3px; display: none;}
A.responsive-menu-toggle I {font-size: 22px; line-height: 34px;}
@media only screen and (max-width: 1240px) {
	.responsive-menu-toggle {display: inline-block;}
	#menu {display: none;}
}
#slider {background-color: #181818; color: #A6A6A6; width: 250px; z-index: 9003; display: hidden; height: 1px;}
	#slider A {color: #A6A6A6;}
	#slider A:hover {color: #FFF;}
	#slider .close-wrapper {height: 60px; font-size: 22px; line-height: 34px; text-align: right;}
	#slider .close-wrapper A.close {height: 34px; width: 34px; display: block; float: right; margin: 13px 13px 0 0;}
	#panelmenu {width: 100%; border-top: 1px solid #1F1F1F; margin: 0; padding: 0;}
		#panelmenu LI {border-bottom: 1px solid #1F1F1F; list-style-type: none; padding: 11px 5px 10px 20px; margin: 0; font-size: 15px;}
		#panelmenu LI A {text-decoration: none;}
		#panelmenu LI A:hover {color: #FFF;}

@media only screen and (max-width: 768px) {
		#mainmenu .logo {text-align: center; width: 100%; padding: 28px 0; margin: 0;}
			#logo {margin: 0;}
}


/* ƒtapes de prŽ-rŽservation
________________________________________________________*/

#rubriques {margin-bottom: 30px; margin-top: 0 !important; padding-bottom: 0 !important;}
	#rubriques UL {list-style: none; display: inline-block; padding: 0; margin: 0 0 0 12px; font-size: 0;}
		#rubriques .inactif {color: #999;}
		#rubriques LI {display: inline-block; padding: 0 12px 10px 0; margin: 0; font-size: 14px;}
			#rubriques SPAN {display: inline-block; text-align: center; width: 24px; height: 24px; border-radius: 12px; line-height: 24px; font-weight: bold; margin-right: 2px; font-size: 14px;}
			#rubriques .actif {font-weight: bold;}
			#rubriques .actif SPAN {background-color: #27358d; color: #fff;}
			#rubriques .inactif SPAN {background-color: #ccc; color: #444;}
			#rubriques A {color: #27358d;}
			#rubriques .valide {border-bottom: 2px solid #d29a4f;}

@media only screen and (max-width: 768px) {
		#rubriques .valide {border-bottom-width: 0;}
}


/* Liste des salles
________________________________________________________*/

#liste-salles {text-align: center; margin-bottom: 30px;}
	#liste-salles > DIV {display: inline-block; width: 100px; color: #ccc; cursor: pointer; font-weight: bold; border-right: 1px solid #ddd; padding: 10px 0; margin: 0; vertical-align: top;}
	#liste-salles > DIV:last-child {border-width: 0;}
	#liste-salles > DIV:hover {color: #dc9658;}
	#liste-salles > DIV.selection {color: #000; background: -webkit-linear-gradient(rgba(255,255,255,0.2) 0%, #f0f0f0 100%);}
		#liste-salles > DIV SPAN {display: block;}
		#liste-salles > DIV SPAN:last-child {font-size: 18px;}
		#liste-salles A {text-decoration: none; color: #ccc;}
		#liste-salles A:hover {color: #dc9658;}


/* Onglets
________________________________________________________*/

#tabs {margin: 0; padding: 0px; list-style: none;}
	#tabs LI {background: none;	display: inline-block; padding: 10px 15px; cursor: pointer; font-size: 18px;}
	#tabs LI.current {border-bottom: 4px solid #c99d43; color: #c99d43; background-color: #fff; box-shadow: 0px -1px 1px #f0f0f0;}
.tab-content, .box, #ajout-res {background-color: #fff; padding: 20px; box-shadow: 0px 0px 1px #f0f0f0; display: none; border: 1px solid #ddd;}
.tab-content.current, .box, #ajout-res {display: inherit;}


/* Tableaux
________________________________________________________*/
	
.requiredtext {color: red; margin: 4px 0 0 0;}
.requiredfield {color: red;}
.delete, .edit, .icon {cursor: pointer; vertical-align: middle;}
.iconcell {width: 70px;}
.error {color: red;}

.info_table {display: table; width: 100%; margin-bottom: 0;}
.info_cell {display: table-cell; width: 50%; vertical-align: top;}
.info_table .info_cell:first-child {padding-right: 5px;}
.info_table .info_cell:last-child {padding-left: 5px;}
	.info_block {border: 1px solid #dedede; background-color: #fff; padding: 10px; margin-bottom: 10px;}
		.sheet_line {padding: 5px 0;}
			.sheet_line SPAN {display: inline-block;}
			.sheet_label {width: 170px; font-weight: bold;}
			.sheet_label_long {width: 240px; font-weight: bold;}
			.sheet_label_longer {width: 400px; font-weight: bold;}
			.sheet_line .icon {cursor: default;}

.block {padding: 4px;}
	.block H2 {margin-top: 20px; font-size: 18px;}
	.list {width: 100%; border: 1px solid #ebebeb; border-collapse: collapse;}
		.list TH, #factures TH, #reservations TH, #prestations TH, #prochainesfactures TH {background-color: #ebebeb; text-align: left; padding: 6px; border: 1px solid #d0d0d0; box-shadow: inset 1px 1px 4px 2px #e5e5e5;}
		.list TH.center, .list TD.center, #factures TH.calign, #prestations TH.calign, #prochainesfactures TH.calign, #reservations TH.calign {text-align: center;}
		.list TH.right, .list TD.right, #factures TH.ralign, #prestations TH.ralign, #prochainesfactures TH.ralign {text-align: right;}
		.list TD {padding: 6px; border: 1px solid #d0d0d0; vertical-align: middle; color: #444;}
		.list TR:nth-child(even) TD {background-color: #fff;}
		.list TR:nth-child(odd) TD {background-color: #f5f5f5;}

.preres {color: #302f8c !important;}
.annule {text-decoration: line-through !important; color: #999;}
.tableinfo {color: #666; font-style: italic; margin: 10px 0 40px 0; font-size: 12px;}


/* Formulaires
________________________________________________________*/

.container, .container2 {padding: 10px 0;}
	.container LABEL {display: block; font-size: 12px; margin-bottom: 5px; font-weight: bold;}
	.container2 LABEL {display: inline-block; font-weight: bold; width: 150px;}
	.container2 INPUT {display: inline-block !important;}
.checkbox-container {padding: 10px 0;}

SPAN.topalign {vertical-align: top;}

.champs_obligatoires {padding: 15px 0;}
.obligatoire {color: red;}

#ajout-res DIV, #recherche-res DIV {padding: 14px 5px;}
#ajout-res DIV.separation, #recherche-res DIV.separation {border-bottom: 1px dotted #ccc;}
#ajout-res DIV:first-child, #recherche-res DIV:first-child {padding: 0 5px 14px 5px;}
	#ajout-res SPAN, #recherche-res SPAN {display: inline-block; width: 120px; font-weight: bold;}
	#ajout-res SELECT, #ajout-res INPUT, #recherche-res SELECT, #recherche-res INPUT {display: inline; margin: 0;}
#ajout-res DIV:last-child {padding-bottom: 0;}
#res-recurrente, #decathlon {border-width: 0 0 0 2px; border-style: solid; border-color: #ccc; padding: 10px !important; margin: 0 0 0 5px;}
	#decathlon SPAN {width: 160px;}


/* Pages
________________________________________________________*/

.pages {margin: 12px 0; font-size: 14px; font-weight: bold;}
	.pages STRONG, .pages A {display: inline-block; margin: 0 1px; padding: 0 2px;}
	.pages STRONG {background-color: #352a91; color: #fff;}


/* Boutons
________________________________________________________*/

.buttons {margin: 15px 0px;}
.buttonsbox {margin: 8px 4px;}
	BUTTON {color: #fff; background-color: #c99d43; padding: 14px 24px; cursor: pointer; font-size: 14px; border-width: 0; transition-property: background-color; transition-duration: 0.4s; box-shadow: 1px 1px 2px #999; margin-right: 10px; margin-bottom: 4px;}
	BUTTON.smallbutton {color: #fff; background-color: #c99d43; padding: 5px 12px; cursor: pointer; font-size: 12px; border-width: 0; transition-property: background-color; transition-duration: 0.4s; box-shadow: 0 0 1px #999;}
	BUTTON.trash {background-image: url('../img/trash.gif'); background-position: 10px center; background-repeat: no-repeat; padding-left: 30px;}
	BUTTON:hover {background-color: #7e5d30;}
	BUTTON.cancel {background-color: #999;}
	BUTTON.cancel:hover {background-color: #555;}
	BUTTON:disabled {background-color: #999; cursor: not-allowed; opacity: 0.5;}


/* Factures
________________________________________________________*/

#factures, #reservations, #prestations, #prochainesfactures {border: 1px solid #eee; border-collapse: collapse; width: 100%;}
	#factures TD, #reservations TD, #prestations TD, #prochainesfactures TD {padding: 8px 6px; background-color: #fff; vertical-align: middle; border: 1px solid #eee; color: #444;}

.facture {border: 1px solid #eee;}
	.facture A, .facture IMG, .facture SPAN {vertical-align: middle;}
	.facture TD:last-child {font-weight: bold;}
#factures .facture:hover TD, #reservations TR:hover TD, #prestations TR:hover TD, #prochainesfactures TR:hover TD {background-color: #e6e7f0;}
#prochainesfactures TR TD:first-child {font-weight: bold;}
#prochainesfactures TD.estimation {font-style: italic; color: #999;}

@media only screen and (max-width: 768px) {
	.facture TD:first-child IMG {height: 16px;}
}


/* Recherche de salle
________________________________________________________*/

#recherche {border: 1px solid #dedede; background-color: #fff;}
	#recherche .info_block {border-width: 0; margin: 0;}
	#recherche .info_cell {padding: 4px;}
	#recherche .info_cell:first-child {border-right: 1px dotted #dedede;}
		#recherche .sheet_line {margin: 10px 0 0 0; padding: 0 0 10px 0; border-bottom: 1px dotted #e5e5e5;}
		#recherche .info_cell .sheet_line:first-child {margin-top: 0;}
		#recherche .info_cell .sheet_line:last-child {border-bottom: 0; padding-bottom: 0;}
		#recherche .info_cell .top_align {vertical-align: top; padding-top: 4px}
			#recherche .sheet_label {width: 100px;}
			#recherche INPUT, #recherche SELECT {display: inline-block; margin-right: 2px;}
			#recherche UL {padding: 0; margin: 0; float: left;}
				#recherche LI {list-style-type: none; padding: 0 20px 4px 0;}

@media only screen and (max-width: 768px) {
	#recherche .info_cell {display: block; width: 99%;}
	#recherche .info_cell:first-child {border-right-width: 0;}
	#recherche .info_cell:first-child .sheet_line:last-child {border-bottom: 1px dotted #e5e5e5; padding: 0 0 10px 0;}
}

#resultats {padding: 5px; margin-bottom: 30px;}
#aucunresultat {font-weight: bold; margin-bottom: 5px;}
	#aucunresultat A {color: #27358d;}

.result-salle H4 {font-size: 18px; color: #303192; margin-bottom: 10px;}
.result-dates {display: table;}
	.result-dates .result-date {display: table-row;}
	.result-dates .result-date:hover {color: #666;}
		.result-dates .result-date DIV {display: table-cell; padding: 2px 15px 2px 0;}


/* Planning
________________________________________________________*/

#calendrier {display: table; width: 100%;}
	#calendrier > DIV {display: table-row;}
			#calendrier > DIV > DIV {display: table-cell; vertical-align: top; padding: 0;}
			#calendrier > DIV > DIV:first-child {width: 238px; padding-right: 10px;}

@media only screen and (max-width: 1000px) {
	#calendrier, #calendrier DIV {display: block !important;}
}

#calendrier .ui-datepicker-calendar TR:hover TD {background-color: #dc9658 !important; color: #fff !important;}
#calendrier .ui-datepicker-calendar TR:hover .ui-state-default {background-color: #dc9658; border-color: #dc9658; color: #fff; opacity: 1 !important;}
#calendrier .ui-state-highlight {border-color: #d6d6d6; background-color: #f8f8f8; color: #454545;}
#calendrier .currentweek {border: 1px solid #183989; background-color: #183989;}
	#calendrier .currentweek .ui-state-default {background-color: #183989; border-color: #183989; color: #fff; opacity: 1 !important;}

#lien-recherche {padding: 24px 2px 0 2px; font-size: 16px; text-align: center;}
	#lien-recherche A {color: #7e5d30;}

#planning-salles {padding: 0 4px;}
	#planning-salles H3 {text-align: center;}
	.planning {width: 100%; table-layout: auto; border: 1px solid #666; border-collapse: collapse;}
	.planning TR {border-bottom: 2px solid #666; height: 1px;}
	.planning TR:hover TH:first-child {color: #d39c54;}
	.planning TH {background-image: none; text-align: left; height: 30px; background-color: #fff; padding: 5px;}
		.case {padding: 0; height: 30px; width: 3.2%;}
		.planning TH.jour {border-right: 2px solid #666; width: 10.4%;}
		.bordheure {border-right: 2px solid #666;}
		.planning TD {border-right: 1px solid #666;}
		.planning TD.bordheure {border-right: 2px solid #666;}
		.planning TD DIV {text-align: center;}
			.planning TD DIV SPAN {font-size: 0.8vw;}
			.planning .reserve A {color: #fff; text-decoration: none;}
			.planning .reserve A:hover {text-decoration: underline;}

			.planning .interdit DIV, .planning .nonreservable DIV, .planning .reserve DIV {cursor: not-allowed;}
			.planning .interdit {background-color: #d07c7e;}
			.planning .nonreservable {background-color: #76c173;}
			.planning .libre {background-color: #76c173; cursor: pointer;}
			.planning .libre:hover {background-color: #bbe0ba;}
			.planning .reserve {background-color: #d07c7e;}
			.planning .selection {background-color: #7395c1;}
			.planning .supprcase {border-top-color: #fff; border-left-color: #fff;}

#info-planning {padding-top: 8px;}

#select-salle {display: inline;}

.lienstableau {padding: 20px 4px; font-size: 14px; font-weight: bold;}
	.lienstableau DIV {float: left; width: 33.33%; display: inline-block;}
	.colgauche {text-align: left;}
	.colcentre {text-align: center;}
	.colcentre SELECT {margin: 0 auto;}
	.coldroite {text-align: right;}
	.lienstableau:after {content: ""; display: table; clear: both;}

#legende, #rubriques {text-align: center; border: 1px solid #e0e0e0; padding: 10px; background-color: #f0f0f0; margin-top: 20px;}
	#legende SPAN {display: inline-block; vertical-align: middle; margin-right: 5px;}
	#legende SPAN:last-child {margin-right: 0;}
.code_couleur {width: 20px; height: 20px; border: 1px solid #666;}
	#legende .libre {background-color: #76c173;}
	#legende .interdit {background-color: #d07c7e;}
	#legende .selection {background-color: #7395c1;}


/* RŽcapitulatif
________________________________________________________*/

DIV.recap-res {display: table; width: 100%; box-shadow: 0px 0px 1px #f0f0f0; margin-bottom: 15px; border: 1px solid #eee;}
DIV.recap-res:hover {border-color: #ccc;}
	DIV.recap-res > DIV.recap-col {display: table-cell; padding: 20px; background-color: #fff;}
		DIV.recap-res > DIV.recap-col DIV {margin-bottom: 5px;}
		DIV.recap-res > DIV.recap-col DIV:last-child {margin-bottom: 0;}
	DIV.recap-res > DIV.recap-col:last-child {width: 50px; vertical-align: middle; text-align: center;}
		DIV.recap-res H4 {padding: 0; margin: 0 0 10px 0; font-size: 15px;}
		.suppr-res {cursor: pointer;}
.res_error {color: red; font-weight: bold; margin-top: 10px;}
#res-vide {margin-bottom: 30px;}
#annuler-res DIV {text-align: left;}
DIV.frais {font-weight: bold; margin-top: 10px;}

EM.important {color: red;}


/* Decathlon ActivitŽs
________________________________________________________*/

#bloc_decat {background-color: #fff; border: 1px solid #d0d0d0; box-shadow: 1px 1px 4px #aaa; padding: 10px; margin: 10px 0 20px 0;}
	#bloc_decat > DIV {padding: 5px 2px;}
	#titre_decat {text-transform: uppercase !important; font-size: 18px; font-weight: bold; font-style: italic; color: #333;}
	#infos_decat > DIV:first-child {margin-bottom: 4px;}
	#infos_decat DIV DIV {padding: 3px 0;}
	#infos_decat SPAN {display: inline-block; width: 100px;}
	#infos_decat_intitule {font-weight: bold; margin-top: 10px;}
#retour {margin-top: 40px;}
.date_annulee {color: red;}