@font-face 							{font-family: arial-narrow; src: url("../fonts/arial-narrow.ttf");}
@font-face 							{font-family: century-gothic-regular; src: url("../fonts/century-gothic-regular.ttf");}

/* Global ------------------------------------------------------------------ */
*									{box-sizing: border-box;}
body								{font-size: 1vw; font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; overflow-y: scroll; background-color: #fcfcfc;}
a									{text-decoration: none;}
a:visited							{color: black;}
table								{border-collapse: collapse;}

/* Contenu ----------------------------------------------------------------- */
.contentDiv							{max-width: 900px; margin: 0 auto;}

.potierTable						{width: 100%; font-family: Calibri, Helvetica, sans-serif;}
.potierTable td						{padding: 0; vertical-align: top;}
.potierLinks						{font-family: arial-narrow; font-size: 1.5vw; overflow: hidden;}
.potierLinks a						{color: black;}
.potierLinks a:hover				{color: blue;}

#potierMosaic						{}
#potierMosaic td					{border-size: 0; padding: 0;}
#potierMosaic img					{display: block;}

.poPoster							{width: 40%; }
.poPoster img						{width: 100%; padding-right: 2vw;}
.poName								{font-size: 1.8vw; font-family: arial-narrow; display: block; }
.poIntroBig							{font-size: 1.4vw;}
.poIntro 							{font-size: 1vw; margin: 0;}
.poTitle							{font-size: 2vw; padding-top: 2vw; font-family: arial-narrow; color: blue;}
.poTitle a							{color: blue;}
.poAddr								{font-size: 1vw; margin: 1vw 0;}
.poWeb								{font-size: 1vw; font-family: arial-narrow;}
.poWeb a:visited					{color: blue;}
.poAddr								{font-size: 1vw; margin: 1vw 0;}
.poPhone							{font-size: 1vw; font-family: arial-narrow; margin-top: 1vw;}
.poPuce								{width: 1.4em; margin-right: .3vw;}

/* Daporama page potier.php ------------------------------------------------ */
#diaporama 							{position: relative; overflow: hidden;}
#diaporamaContainer					{position: absolute; top: 0px; left: 0px; width: 100%; height:100%;}	
#diaporamaContainer img				{width: 100%; height: 100%; position: absolute; top: 0px; display: none;}
#diaporamaCircles					{opacity: 0.7; text-align: center; position: relative;}
#diaporamaCircles .donut			{width: 1vw; margin: .1vw; cursor: pointer;}
#diaporamaCircles span:hover		{cursor: pointer;}
#diaporamaPause						{position: absolute; top: 2vw; left: 2vw; width: 3vw; display: none; cursor: pointer;}
#diaporamaTextContainer				{height: 5em; position: relative;}
#diaporamaTextBox					{font-family: "Courier New", Courier, monospace; display: none; width: 100%; font-size: 0.8vw; position: relative; top: 50%; transform: translateY(-50%); text-align: center;}
#diaporamaTextBox h4				{margin: .1vw 0;}
#diaporamaTextBox a					{color: blue; text-decoration: underline;}
	
#big-diaporamaExt 					{width: 70%; max-width: 1280px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #888;}
#big-diaporama 						{position: relative; overflow: hidden;}
#big-diaporamaContainer				{position: absolute; top: 0px; left: 0px; width: 100%; height:100%;}	
#big-diaporamaContainer img			{width: 100%; height: 100%; position: absolute; top: 0px; display: none;}

#big-diaporamaCircles				{opacity: 0.7; padding-top: 1vw; text-align: center; }
#big-diaporamaCircles .donut		{width: 1vw; margin: .1vw; cursor: pointer;}
#big-diaporamaCircles span:hover	{cursor: pointer;}
#big-diaporamaPause					{position: absolute; top: 2vw; left: 2vw; width: 3vw; display: none; cursor: pointer;}
#big-diaporamaClose					{position: absolute; top: 2vw; right: 2vw; width: 3vw; cursor: pointer;}

#big-diaporamaTextBox				{color: #777777; position: absolute; bottom: 0px; left: 0px; overflow: hidden; background-color: white; opacity: 0.9; padding: 12px; display: none; width: 100%; box-shadow: 0px -14px 26px 0px rgba(0, 0, 0, .2);}
#big-diaporamaTextBox h4			{margin: .1vw 0;}
#big-diaporamaTextBox a				{color: #777777; text-decoration: none;}

/* Boutons ----------------------------------------------------------------- */
#diaporamaFullScreen				{width: 1vw; margin: .3vw; position: absolute; right: 0; cursor: pointer; margin: 0.1vw;}
#diaporamaMinimize					{width: 1vw; margin: .3vw; position: absolute; right: 0; cursor: pointer; margin: 0.1vw;}			

/* Overlay ----------------------------------------------------------------- */
#overlayImages						{background-color: #a7a079; position: fixed; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; display: none;}

/* Ecrans de moins de 768 pixels ------------------------------------------- */
@media (max-width: 768px) {
	.contentDiv								{padding: 2vw 5.5vw 0 5.5vw;}

	#potiersTable							{font-size: 1.8vw;}						/* Table contenant la liste des potiers */
	.poName									{font-size: 3.5vw; }					/* Pages des potiers */
	.poIntroBig								{font-size: 2.4vw;}
	.poIntro 								{font-size: 1.8vw;}
	.poTitle								{font-size: 4.5vw; padding-top: 5vw;}
	.poAddr									{font-size: 2vw; margin: 2vw 0;}
	.poPhone								{font-size: 2vw; margin-top: 2vw;}
	.poWeb									{font-size: 2vw; margin-bottom: 2vw;}
	.potierLinks							{font-size: 3vw;}						/* Liens en bas des pages Potiers */
	#diaporamaCircles .donut				{width: 2vw;}
	#diaporamaFullScreen					{visibility: hidden;}
}

@media (min-width: 1601px)  {
	body									{font-size:0.8vw;}
	#potiersTable							{font-size:1vw;}				/* Table contenant la liste des potiers */
	.poName									{font-size:1.5vw;}				/* Pages des potiers */
	.poIntroBig								{font-size:1.2vw;}
	.poIntro								{font-size:0.8vw;}
	.poTitle								{font-size:1.7vw;}
	.poAddr									{font-size:0.8vw;}
	.poPhone								{font-size:0.8vw;}
	.poWeb									{font-size:0.8vw;}
	.potierLinks							{font-size:1.1vw;}				/* Liens en bas des pages Potiers */
	#diaporamaCircles .donut				{width: 0.7vw;}
}