/*==========================================================================*/
/*                CSS DESTINÉ A L'AFFICHAGE SUR TABLETTES   				*/
/*==========================================================================*/

/********************************************/
/**                                        **/
/**             Personnalisable            **/
/**                                        **/
/********************************************/

html, input, textarea, select{
	font-family: Georgia, serif;
	font-size:1.2em;
}

h1{
	font-family:lobster, sans-serif;
	font-size: 3rem;
	color: #800312;
	display:inline;
	margin-left:10px;
}


h2{
	font-family:lobster, sans-serif;
	font-size: 2.25rem;
	color: #800312;
}

h3{
	margin: 10px 0px 5px 10px;
	font-family:lobster, sans-serif;
	font-size: 1.75rem;
	color: #800312;
}

h4
{
	font-size: 1.25rem;
	color:black;
	margin:0px 0px 0px 5px;
}

.indication
{
	font-family:lobster, sans-serif;
	font-size:1.5rem;
}

/* Couleur de fond du site */
body{
  background: rgba(62,88,164,1);
  background: -moz-linear-gradient(left, rgba(62,88,164,1) 0%, rgba(39,52,131,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(62,88,164,1)), color-stop(100%, rgba(39,52,131,1)));
  background: -webkit-linear-gradient(left, rgba(62,88,164,1) 0%, rgba(39,52,131,1) 100%);
  background: -o-linear-gradient(left, rgba(62,88,164,1) 0%, rgba(39,52,131,1) 100%);
  background: -ms-linear-gradient(left, rgba(62,88,164,1) 0%, rgba(39,52,131,1) 100%);
  background: linear-gradient(to right, rgba(62,88,164,1) 0%, rgba(39,52,131,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e58a4', endColorstr='#273483', GradientType=1 );
}

/* Titre actualité et menu(formule) */
#contenuTitreNew, .nomMenuPizza{
	font-family:lobster, sans-serif;
	color: #2f2f2f;
}

/* Page */
#contenuPage, #contenuPageClient{
	text-align: left;
	background-color: #FAFAFA;
	/* Box shadow */
	-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
}

/*******************/
/* Les Page client */
/*******************/
	/* Background qui contient une activité */
	#actuClient{
		background-color: white;
		text-align : left;
		/* Box shadow */
		-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
	}
	/* Background qui contient les horaires et l'adresse de la pizzeria*/
	.block{
		background-color: #FAFAFA;
		/* Box shadow */
		-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
	}
	
	.tableauPizzaReduit
	{
		border-top:5px solid #800312;
	}
	
	.menuPizzaClient
	{
		background-color: white;
		text-align : left;
		/* Box shadow */
		-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
	}
/***********************/
/* FIN Des Page client */
/***********************/

/*********************/
/*      Footer       */
/*********************/
	/* Couleur du footer */
	#contenuFooter{
		background-color: #302f2f;
	}

	/* Couleur du text du footer */
	#contenuFooter table{
		color: white;
	}

	/* Lien du footer */
	#contenuFooter a{
		color: white;
		text-decoration:none; 
	}
	#contenuFooter a:hover{
		color: #bebebe;
	}
/*************************/
/*      FIN Footer       */
/*************************/

/**************************/
/*    MENU Ingrédient    */
/**************************/

	/* Menu des ingrédients de la page ajout et modification de pizza */
	#menuIngredient{
		background-color: #302f2f;
		list-style-type:none;
		text-align: center;
	}
	
	#menuIngredient li{
		background-color: #302f2f;
		font-family:lobster, sans-serif;
		font-size: 1.1rem;
		color: white;
		text-decoration:none;
		text-align:center;
		border-left: 1px solid white;
	}
	
	#menuIngredient li:hover{
		background-color: #212121;
		color: white;
		cursor:pointer;
	}
	
/*****************************/
/*   FIN MENU Ingrédient    */
/*****************************/

/*************************/
/*          MENU         */
/*************************/
	#menu ul, #menu ul li, #btAfficheMenu{
		background-color: #302f2f;
	}
	
	#menu a, #btAfficheMenu{
		font-family:lobster, sans-serif;
		font-size: 2rem;
		color: white;
		text-decoration:none;
		text-align:center;
	}
	
	#menu a:hover{
		background-color: #212121;
		color: white;
	}
/*************************/
/*        FIN MENU       */
/*************************/

/**************************/
/*   Affiche site client  */ 
/**************************/
/* Background qui contient le lient ver la page client */
	#affichage_site a{
		padding: 10px;
		text-decoration:none; 
		color: white;
		background-color: #302f2f;
		font-family:lobster, sans-serif;
	}
	#affichage_site a:hover{
		background-color: #212121;
	}

/************************/
/*        Bouton        */
/************************/
	.button{
		background: #302f2f;
		color: white;
		border: 0px;
		padding: 5px 10px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	.button:hover{
		background: #191919;
		cursor:pointer;
	}
/************************/
/*      FIN Bouton      */
/************************/

	/* Background qui contient le prix d'une pizza */
	.prixTableauPizza{
		font-family:lobster, sans-serif;
		background-color: #242323;
		color: white;
	}

	/* Toutes les popups + le panneau de connexion au backoffice */
	.panneauxPopup,#panneauxConnexion{
		background-color: #F5F5F5;
		border: 1px solid #cacaca;
		/* Border radius */
		border-radius: 15px; 
		-moz-border-radius: 15px; 
		-webkit-border-radius: 15px;
		/* box-shadow */
		box-shadow:0px 0px 3px gray;	
		-moz-box-shadow:0px 0px 3px gray; 
		-webkit-box-shadow:0px 0px 3px gray;
	}
	
	/* Couleur des lignes des tableaux de pizza */
	.lignePizzaPair{
		background-color: #FAFAFA;
	}
	.lignePizzaImpair{
		background-color: #e2e2e2;
	}
	
	/* Contour des ingrédients cocher */
	.ingredientCocher{
		/* box-shadow */
		-moz-box-shadow: 0px 0px 5px 5px #32cb00;
		-webkit-box-shadow: 0px 0px 5px 5px #32cb00;
		-o-box-shadow: 0px 0px 5px 5px #32cb00;
		box-shadow: 0px 0px 5px 5px #32cb00;
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#32cb00, Direction=NaN, Strength=5);
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		cursor:pointer;
	}
	
	/* Contour des ingrédients décocher */
	.ingredientDecocher{
		-moz-box-shadow: 0px 0px 10px 10px #ffffff;
		-webkit-box-shadow: 0px 0px 10px 10px #ffffff;
		-o-box-shadow: 0px 0px 10px 10px #ffffff;
		box-shadow: 0px 0px 10px 10px #ffffff;
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		cursor:pointer;
	}
	
	/* Toutes les textBox */
	.textBox, .textBoxH28W180, .textBoxH28W240, .textBoxH24W160, .textBoxH24W100, .H28W260{
		background: transparent;
		border: none;
		border-bottom: 1px dashed #212121;
		font-style: italic;
	}
	
	/* Tous les textArea */
	textarea{
		border: 1px dashed #212121;
		font-style: italic;
		/* Border radius */
		border-radius: 3px; 
		-moz-border-radius: 3px; 
		-webkit-border-radius: 5px;
	}
	
/********************************************/
/**                                        **/
/**           Fin Personnalisable          **/
/**                                        **/
/********************************************/
html{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

body{
	margin: 0px;
	padding: 0px;
}

/* Style d'écriture */
@font-face {
    font-family: 'lobster';
    src: url('font/lobster.eot?') format('eot'),
		 url('font/lobster.woff2') format('woff2'),
         url('font/lobster.woff') format('woff'),
         url('font/lobster.otf') format('truetype'),
         url('font/lobster.svg#lobster_1.4regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

fieldset{
	margin-left: 20px;
	width:90%;
}

#page{
	width: 100%;
	height: 100%;
}

#header{
	width: 100%;
	position: relative;
}

#contenuPage{
	position: relative;
	margin-top: 0px;
	width: 100%px;
	min-height:100%;
	padding:0px;
	text-align: left;
	overflow: hidden; /* Enpeche les floats de sortir */
}

#footer{
	width: 100%;
	clear: both;
	padding: 0px;
}

#contenuFooter{
	height: auto;
	margin-bottom: 0px;
	padding: 10px;
}

/* Affichage d'une liste d'ingrédient par défaut */
#liste1{
	display: block;
}

/* Header admin */
/* Affichage du site client */
/* Background qui contient le lient ver la page client */
#affichage_site{
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 10px;
}

/***************/
/*    LOGIN   */
/***************/

	#panneauxConnexion{
		position:relative;
		width: 50%;
		height:50%;
		margin: 25% 25%;
		padding-top: 20px;
	}
	

/*************************/
/*       FIN LOGIN       */
/*************************/

/*************************/
/*         MENU          */
/*************************/

	#menu{
		margin-bottom: 10px;
	}

	#menu ul{
		padding:0;
		margin:0;
		list-style-type:none;
		width: 100%;
		height: auto;
		text-align: center;
	}
	
	#menu ul li, #btAfficheMenu{
		float:none;
		width:100%;
		padding: 10px 0px;
	}
	
	#menu a{
		display:block;
		float:none;
		/*padding: 0px 25.170px;*/
		line-height:auto;
		width: 100%;
		
	}
	
	.menuCache
	{
		height:0px;
	}
	
	.menuAffiche
	{
		height:auto;
	}

/*************************/
/*       FIN MENU        */
/*************************/

/**************************/
/*    MENU Ingredident    */
/**************************/

	/* Menu des ingrédients de la page ajout et modification de pizza */
	#menuIngredient{
		padding:0;
		margin:0;
		width: auto;
		height: 30px;
		margin-left: 20px;
	}
	
	#menuIngredient li{
		float: left;
		display:block;
		float:left;
		padding: 5px 5px;
		line-height:20px;
	}
	
	#conteneurListeIngredient{
		height: auto;
	}
		
/*****************************/
/*   FIN MENU Ingredident    */
/*****************************/

/*************************/
/* Liste des ingrédients */
/*************************/

	#popupAjout, #popupModification{
		display: none;
		width: 380px;
		height: 200px;
		margin: -100px 0 0 -175px;
		padding: 10px;
	}

/***************/
/* Ajout pizza */
/***************/

	#popupAjoutCategPizza{
		display: none;
		width: 330px;
		height: 160px;
		margin: -80px 0 0 -175px;
		padding: 10px;
	}

	#popupAjoutIngredient{
		display: none;
		width: 360px;
		height: 200px;
		margin: -100px 0 0 -175px;
		padding: 10px;
	}
	
	#divApercu
	{
		background:#fafafa;
		position:fixed;
		right:0;
		left:0;
		bottom:0;
	}

/***************/
/*  Actualite  */
/***************/

	#popupAjoutNew{
		display: none;
		width: 400px;
		height: 310px;
		margin: -155px 0 0 -200px;
		padding: 10px;
	}
	
	#popupModifNew{
		display: none;
		width: 400px;
		height: 280px;
		margin: -140px 0 0 -200px;
		padding: 10px;
	}
	
	#new{
		border: 1px solid gray;
		height: auto
		text-align : left;
		position: relative;
		margin-bottom: 20px;
		display:block;
		min-height: 170px;
		width: 100%;
		height: auto;
		padding: 10px 0px;
	}
	
	#contenuTitreNew{
		font-size:2rem;
	}
	
	#textDiv{
		float:left;
		width:70%;
	}
	
/*******************/
/*  Fin actualite  */
/*******************/

/* Parti cliente du site */
/***********************************/
/*             Client              */
/***********************************/

	#actuClient{
		min-height:170px;
		width: 100%;
		height: auto;
		padding: 10px 0px;
		margin-bottom: 40px;
	}
	
	#imageNew
	{
		float:left;
		width: 25%;
		min-height: 200px;
		margin: 10px 10px 10px 10px;
		background-repeat:no-repeat;
		background-size:contain;
	}

	#contenuPageClient{
		width: 100%;
		padding:10px 0px 0px 0px;
		margin-bottom: 7px;
	}
	
	#btAnnulerSelection{
		margin-top: -20px;
		margin-left: 440px;
		width: 250px;
	}
	
	.nomMenuPizza
	{
		font-size:2em;
	}

/***********************************/
/*           FIN Client            */
/***********************************/

/********************/
/*    Liste Menu    */
/********************/

	#popupAjoutMenu{
		display: none;
		width: 420px;
		height: 310px;
		margin: -140px 0 0 -185px;
		padding: 10px;
	}
	
	#popupModifMenu{
		display: none;
		width: 420px;
		height: 310px;
		margin: -140px 0 0 -185px;
		padding: 10px;
	}
	
/************************************/
/************************************/
/***                              ***/
/***             CLASS            ***/
/***                              ***/
/************************************/
/************************************/
	
	textarea{
		width: 100%;
		resize: none;
		background: transparent;
		outline: none;
		padding: 0px;
		margin-bottom: 5px;
		margin-bottom: 5px;
	}
	
/*******************/
/*     TextBox     */
/*******************/

	.textBox, .textBoxH28W180, .textBoxH28W240, .textBoxH24W160, .textBoxH24W100, .textBoxH28W260{
		outline: none;
		padding: 0px;
		margin-bottom: 5px;
	}

	.textBoxH28W180{
		line-height: 1.2rem;
		width: 180px;
	}

	.textBoxH28W240{
		line-height: 1.2rem;
		width: 240px;
	}

	.textBoxH24W160{
		line-height: 1.2rem;
		width: 160px;
	}

	.textBoxH24W100{
		line-height: 1.2rem;
		width: 100px;
	}

	.textBoxH28W260{
		line-height: 1.2rem;
		width: 260px;
	}
	
/********************/
/*   FIN TextBox    */
/********************/

/********************/
/*      Bouton      */
/********************/

		.btADroite{
			right: 10px;
		}

	/* liste ingredient */
		.btSupprimerListeIng{
			display:none;
			position: absolute;
			right: 25px;
			cursor:pointer;
		}

		.btModifierListeIng{
			display:none;
			position: absolute;
			left: 25px;
			cursor:pointer;
		}

	/* liste pizza */
		.btSupprimerAjoutPizza{
			display:none;
			position:absolute;
			margin-top: -62px;
			margin-left: 58px;
			cursor:pointer;
		}

		.btModifierAjoutPizza{
			display: none;
			position: absolute;
			margin-top: -62px;
			margin-left: 38px;
			cursor:pointer;
		}

		.btAjoutCategPizza{
			position: absolute;
			margin-top: -14px;
			margin-left: -16px;
			background: url("images/icon/ajout.png") no-repeat;
			width: 24px;
			height: 24px;
			border: 0px;
			cursor:pointer;
		}

		.btMouvePizzaUp, .btMouvePizzaDown{
			display: none;
			position: absolute;
			margin-left: -24px;
			cursor:pointer;
		}

		.btMouvePizzaUp{
			background: url("images/icon/haut.png") no-repeat;
			margin-top:-10px;
			width: 24px;
			height: 24px;
			border: 0px;
		}
		
		.btMouvePizzaDown{
			background: url("images/icon/bas.png") no-repeat;
			width: 24px;
			height: 24px;
			border: 0px;
		}
		
		.btModif{
			background: url("images/icon/modif.png") no-repeat;
			width: 24px;
			height: 24px;
			border: 0px;
			cursor:pointer;
		}
		
		.btSuppr{
			background: url("images/icon/suppr.png") no-repeat;
			width: 24px;
			height: 24px;
			border: 0px;
			cursor:pointer;
		}
	
		/* bouton ajout ingredient */
		/* ajout_pizza_admin, liste_ingredient, modificatin_pizza_admin */
		.btAjout{
			width: 50px;
			height: 50px;
			background:url(images/icon/ajout50.png);
			border: 0px;
			cursor:pointer;
		}
	
	/*********************************
	**        Page actualite        **
	*********************************/

		.btModifNew{
			/*float: right;*/
			position: absolute;
			top: 0px;
			right: 26px;
			cursor:pointer;
		}
		
		.btSupprNew{
			/*float: right;*/
			position: absolute;
			top: 0px;
			right:2px;
			cursor:pointer;
		}

	/*********************************
	**      FIN Page actualite      **
	*********************************/
		
/*******************/
/*   FIN Bouton    */
/*******************/
	
/****************************/
/* Tableau Liste des pizzas */
/****************************/

	/* Div contenant le formulaire "Tailles de Pizzas" */
	#taillesPizza
	{
		width: 100%;
	}
		/* Div contenant le bouton "créez votre pizza" */
	#divCreationPizza
	{
		overflow: auto;
		width: 100%;
		height: auto;
		text-align:center;
	}
	.tableauPizza, .tableauPizzaAdmin{
		border-collapse:collapse;
		width:100%;
	}
	
	/* Pas d'affichage du tableau Pizza classique
	en mode "tablette" ou "smartphone".
	On affiche plutôt tableauPizzaReduit */
	.tableauPizza
	{
		display:none;
	}
	
	.tableauPizzaReduit
	{
		border-collapse:collapse;
		width:100%;
	}
	
	.tableauPizzaReduit td
	{
		padding: 10px 0px 10px 0px;
	}
	
	.tableauPizzaReduit tr
	{
		padding-left:10px;
		padding-bottom:10px;
		/*width: 100%;*/
	}

	.colonePizza{
		width: 900px;
		height: 50px;
		padding-left: 24px;
	}

	.gauchePizza{
		width: 100%;
	}
	.gauchePizza tr{
		margin-right:20px;
		display:block;
		float:left;
		width:33%;
	}
	.droitePizza
	{
		height:auto;
		overflow: hidden;
	}
	
/********************************/
/* FIN Tableau Liste des pizzas */
/********************************/	

/* Tableau aperçu ajout/modification pizza */
.tabApercu{
	width: 940px;
}

/*****************************/
/*   Liste des ingrédients   */
/*****************************/
	.listeIngredient, .listeIngredient li{
		list-style-type:none;
		width: 910px;
		float: left;
	}

	.listeIngredient li{
		position: relative;
		width: 120px;
		height: 100px; /* 116px */
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 4px;
		margin-right: 4px;
	}

	.listeIngredient li form{
		margin: 0px;
		padding: 0px;
	}
/********************************/
/*  FIN Liste des ingrédients   */
/********************************/

/********************************/
/*  Ajout / Modification Pizza  */
/********************************/
	.listeIngredientMenu{
		margin-left: 20px;
		display: none;
		width: 90%;
	}
	.listeIngredientMenu, .listeIngredientMenu li{
		list-style-type:none;
		float: left;
	}

	.listeIngredientMenu li{
		position: relative;
		width: 100px;
		height: 150px; /* 116px */
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 4px;
		margin-right: 4px;
	}
/************************************/
/*  FIN Ajout / Modification Pizza  */
/************************************/

/********************/
/*    Liste Menu    */
/********************/

	.menuPizza{
		border: 1px solid gray;
		height: auto;
		padding:10px;
		width: 100%;
		text-align : left;
		margin-bottom: 20px;
	}
	
	.nomMenuPizza{
	}

	.btModifMenu{
		position: absolute;
		right: 26px;
		cursor:pointer;
	}
	
	.btSupprMenu{
		position: absolute;
		right: 2px;
		cursor:pointer;
	}
	
	.prixMenu{
		float:right;
		margin-right: 6px;
	}
	
	.nomAndDescriptionMenu{
		height: auto;
		margin-left: 6px;
	}
	
/***********************/
/*   FIN Liste Menu    */
/***********************/

/***********************/
/*  Pages coordonnées  */
/***********************/

	.divGaucheCoordonnees
	{
		float: left;
		width: 50%;
	}
	.divDroiteCoordonnees
	{
		overflow: auto;
		width: 50%;
		display: block;
	}
/***************************/
/*  FIN Pages coordonnées  */
/***************************/
	
	
/**********************/
/*       COMMUN       */
/**********************/

	/* Classe pour les éléments invisibles */
	.invisible{
		display:none;
	}
	/* Classe pour les éléments invisibles sur la version
	PC mais qui restent visible sur les appareils mobiles */
	.invisibleR
	{
		display:inherit;
	}

	.erreur{
		border: 2px solid red;
	}

	.panneauxPopup{
		position: absolute;
		top:50%;
		left:50%;
	}

	.wordWrapNew{
		width: 700px;
		height: auto;
		word-wrap: break-word;
		display:block;
	}

	.wordWrapMenu{
		width: 786px;
		height: auto;
		word-wrap: break-word;
	}
	
	.contourDashed{
		border: 2px dashed #212121;
		padding: 5px;
	}
	
	.dimensionPicto{
		width: 65px;
		height: 65px;
	}
	
	.fontSize12{
		font-size: 1rem;
	}
	
	.ombre_menu{
		display:none;
	}
	
	.ombre_footer{
		display:none;
	}
	
/**********************/
/*     FIN COMMUN     */
/**********************/

/***********************************/
/*             Client              */
/***********************************/

/**********************/
/*       COMMUN       */
/**********************/

	.overflowAuto{
		overflow:auto;
	}

	.gauche{
		float: none;
		width: 100%;
	}

	.droite{
		overflow:none;
		width: 100%;
	}

	.block{
		width: 100%;
		height: auto;
		padding:5px 0px 5px 0px;
		margin-bottom: 7px;
	}
	
	.superflu:not(#imageNew)
	{
		display:none;
	}
	

/**********************/
/*     FIN COMMUN     */
/**********************/
	
/*******************/
/*    Actualité    */
/*******************/

	.wordWrapNewClient{
		width: 100%;
		height: auto;
		word-wrap: break-word;
		margin:10px 0px 0px 0px;
	}
	
/********************/
/*    les menus     */
/********************/
	
	.menuPizzaClient{
		width: 100%;
		height: auto;
		padding: 20px 0px;
		margin-bottom: 40px;
		text-align:left;
	}


	.wordWrapMenuClient{
		width: 670px;
		word-wrap: break-word;
	}

/******************/
/*   Les pizzas   */
/******************/
	.tableauPizzaClient{
		border-collapse: collapse;
		width: 680px;
	}
	
	.tableauPizzaClient td{
		padding: 6px;
	}
	
	.prixTableauPizza{
		padding: 5px;
		font-size:1.75rem;
	}
	

	.marginLeft20px{
		margin-left: 20px;
	}
	.marginRight20px{
		margin-right:20px;
	}
	.mask
	{
		position: relative;
		overflow-y: hidden;
		width: 100%;
		height: 200px;
		overflow-x: scroll;
		text-align:center;
	}
	.boutonDeselect
	{
		margin-right: 10px;
	}