/*
  CSS for Gustave Home Pages 
  (c) eclos@free.fr 2019 -> aujourd'hui
*/
@charset "UTF-8";

:root{
  		/* --artwork-width: 760px; */
		--artwork-width: 760px;
	}
	

.GALLERIE { 
	table-layout: fixed;
	/*height:300px;*/
	height:100%;
	width:var(--artwork-width);
	font-weight:bold; 
	font-family:"Arial Narrow,Helvetica"; 
	color:white;
	}

.GALLERIE TR TD{
	width:var(--artwork-width);
	padding-top:28px;
	}

.OeuvreImg{
  margin-right:12px;
  padding:20px;
  /*background-color:ba8752;*/ 
  }
.OeuvreInfo{
  padding:8px;
  }
.OeuvreInfoTitre{
  font-weight:bold; 
  }

#LesOeuvres{
  width:100%;
  }

#OeuvreMiddle{
  display: block;
  margin-left: auto;
  margin-right: auto;

  height:300px;
  width:var(--artwork-width);
  overflow:hidden;
  padding-left:16px;
  background-image:url("img/oeuvresBg.png");
  background-color:transparent;
/*
  padding-left:0px;
  padding-right:0px;
  padding-top:0px;
  padding-bottom:0px;
*/  
  /*
  border-color: red; 
  border-style:ridge; 
  border-width:1px;
  border-right:none;
  border-left:none"
  */
  }
  
.OeuvreSelectBar{
	display: block;
	margin-left: auto;
	margin-right: auto;

	height:36px;
	width:var(--artwork-width);
	background-color:	rgb(230,230,230);
	text-align:center;
	word-wrap: break-word; 

	padding-top:-16px;
	padding-left:16px;
	padding-bottom:3px;

	}
.OeuvreSelectBar .slider{
	width:48%;
	display:inline-block;
	padding:0 0 0 0;
	margin:0 0 0 0;
	vertical-align:middle;
	}
.OeuvreSelectBar .selector{
	width:48%;
	display:inline-block;
	padding:0 0 0 0;
	margin:0 0 0 0;
	vertical-align:middle;
	}

  
@media screen and (max-width: 760px) {
	
	#LesOeuvres{
		/*width:90%; */
		}
	.OeuvreSelectBar{
		height:72px;
		}

	.OeuvreSelectBar .slider{
		width:100%;
		display:block;
		}
	.OeuvreSelectBar .selector{
		/*width:100%;*/
		display:contents;
		}
	.OeuvreSelectBar .selector select{
		width:calc(var(--artwork-width)*.8);
	}

}

@media screen and (max-width: 480px) { /* blue */
	:root{
		--artwork-width: 320px;
	}
	#OeuvreMiddle {
		height:auto;
	}
	.OeuvreImg {
		display: inline-block;
		max-width: calc(var(--artwork-width)*.9);
		height:auto;
		padding:0px;
		margin:0px;
	}
	.OeuvreInfo {
		display: inline-block;
		width: calc(var(--artwork-width)*.9);
		padding:0px;
	}
	.OeuvreSelectBar .slider{
		display:none;
		}
}
@media screen and (max-width: 420px) { /* yellow */
}
@media screen and (max-width: 360px) { /* orange (de 321 à 360) écran 5” à 6” style MI5(360x640) */
	:root{
			--artwork-width: 360px;
		}
	#OeuvreMiddle{
		height:auto;
	}
}
@media screen and (max-width: 320px) { /* lime(i-chose)*/
	:root{
			--artwork-width: 210px;
		}
	#OeuvreMiddle{
		height:400px;
	}
}
@media screen and (max-width: 230px) {
}