/*****************************************************************************************
** Mise en page pour écrans de plus de 1800px de large ***********************************
*****************************************************************************************/

/* 
	Rappel de la structure principale de l'arbre HTML 
	body
		header	
		aside.caroussel (caroussel) en option
		main
		aside 
		aside (en option)
		footer
	Note : chaque élèment contient un div.responsiveframe pour contrôler la largeur du 
	contenu */
		
	

body {
	background-image:url('../images/curtains.jpg');
	background-repeat:no-repeat;
	background-position-x:right;
  	background-size: 100%;
  	padding-top:3em;
  
}


.responsiveframe { /* géneralement un div mais aussi un p en fin de page */
	width:1800px;																 /* RD */
	margin:auto;
	/* overflow:hidden; */
}


/*****************************************************************************************
** header ********************************************************************************
*****************************************************************************************/

header { 
	
}

header div { border:0px solid green;  }

header img { 
	border: 0px solid blue;
	margin-top:1.5em;
	margin-left:9em;
	float:left
 }
 
header nav {
 	border:0px solid pink;
 	height:10em;
}

header nav>ul {
 	border:0px solid black;
 	float:right;
 	margin-top:2em
 
}

header nav>ul>li {
 	border:0px solid maroon;
 	float:left;
 	margin-right:2em;
 	margin-top:4em;
}

header nav>ul>li:last-child {
	margin-right:9em;
}
/*****************************************************************************************
** aside.caroussel (caroussel) ***********************************************************
*****************************************************************************************/

aside.caroussel { border:0px solid pink }

aside.caroussel>div { 
	border:0px solid black;
	position:relative;	
	height:765px;
	overflow:hidden;	
}
aside.caroussel>div>img {
	position:absolute;
	z-index:10;
	top:362px;
	cursor: pointer;
}
aside.caroussel>div>img#previous {
	left:20px;
}
aside.caroussel>div>img#next {
	right:20px;
}

aside.caroussel ul img {
	width:1800px;
}

aside.caroussel li {
	height:765px;
	position:absolute;
	z-index:0;
	left:-1800px;
	top:0;
	transition-property: left;
  	transition-duration: 1s;
}
aside.caroussel li.left {
	z-index:1;
	left:-1800;	
}
aside.caroussel li.active {
	z-index:1;
	left:0;	
}
aside.caroussel li.right {
	z-index:1;
	left:1800px;	
}

aside.caroussel figcaption {
	position:absolute;
	bottom:2em;
	left:4em;
	font-size:4em;
	font-family: "EB Garamond", serif;
	color:white;
	text-shadow: 2px 2px 4px black;
	letter-spacing:0.1em;
	/*
	background-color:rgba(0,0,0,0.3);
	padding:0.5em
	*/
}







/*****************************************************************************************
** main *******************************************************************************
*****************************************************************************************/

main { 
	
		
}

/* Design specifique : category */

body.category>main {
	border:10px solid red;
	padding:9.375em 0 9.375em 0;	
}

body.category h1 { 
	text-align:center;
	margin-bottom:3em;
	border:0px solid green;
}

body.category h1+p { 
	float:left;
	width:49%;
	border:0px solid black;
 }
 
body.category h1+p+p {
	border:0px solid red;
	margin-left:51%
}
 
body.category main ul {
	border:0px solid blue;
	margin-top:8em;
	clear:both;
	list-style-type:none;
}


body.category main li {
	margin-left:0;
	float:left;
	width:600px;
}

body.category main li:nth-child(1) { text-align:left }
body.category main li:nth-child(2) { text-align:center }
body.category main li:nth-child(3) { text-align:right }
body.category main li:nth-child(4) { text-align:left }
body.category main li:nth-child(5) { text-align:center }
body.category main li:nth-child(6) { text-align:right }
body.category main li:nth-child(7) { text-align:left }
body.category main li:nth-child(8) { text-align:center }
body.category main li:nth-child(9) { text-align:right }
body.category main li:nth-child(10) { text-align:left }
body.category main li:nth-child(11) { text-align:center }
body.category main li:nth-child(12) { text-align:right }


/* Design specifique : A propos */


/* Design specifique : contact */
body.page-id-35>main div.colonne1 {
		border:2px solid red;
		float:left;
		width:50%
}
body.page-id-35>main div.colonne2 {
		border:2px solid blue;
		margin-left:50%;
}

/* Design specifique : page de Shaun of the Dead */
body.postid-65>main h1 {
	border: 10px solid pink
}


body.postid-200 {
	
}

body.postid-200 main {
	border:25px solid red
}



/*****************************************************************************************
** aside.asideseries *************************************************************************
*****************************************************************************************/

aside.asideseries { border:0px solid yellow}

aside.asideseries img { 
	width:1188px;																/* RD */
	height:668px;
	float:left;
	margin-right:5em;
}
aside.asideseries h2 { 
	border:0px solid maroon;
	padding-top:1em;
}
aside.asideseries h3 {
	padding-top:2em;
	padding-bottom:1em;
}
aside.asideseries p {
	padding-right:4em;
	margin-bottom:3em;
}



/*****************************************************************************************
** aside.asidefilms ***************************************************************************
*****************************************************************************************/

aside.asidefilms { 
	border:0px solid blue;
}

aside.asidefilms img:first-child { 
	float:left; 
	margin-right:4em
}
aside.asidefilms img+img { 
	float:right;
	margin-left:2em;
}
aside.asidefilms h2 { 
	border:0px solid green;
	padding-top:2em;
	font-size:3em;
}
aside.asidefilms h2>span {
	font-size:2em}
aside.asidefilms p { 
	border:0px solid blue;
	margin: 3em 40% 3em 0;
}
aside.asidefilms .clear { margin-bottom:-1px}

/*****************************************************************************************
** footer *******************************************************************************
*****************************************************************************************/

footer {
	padding-top:5em;
	/*border:5px solid pink;*/
}

footer>div:first-child {
	/*border:5px solid green;*/
	text-align:center
}

footer nav {
	float:left;
	width:25%;
	
}
footer nav li {
	margin-bottom:3em;
}

footer div>div {
	/* border:5px solid green;*/
	float:right;
	width:25%
}

footer address {
	/*border:5px solid teal;*/
	text-align:left;
	font-variant:small-caps;
	line-height:1.5em;
}
footer address span {
	font-weight:bold
}

footer address p:last-child {
	margin-top:3em;
}

footer ul {
	margin-top:3em
}

footer ul>li { 																	/* RD */
	float:left;
	margin-right:2em;
}


footer div+div {
	clear:both;
	background-image:url('../images/seats.jpg');
	background-repeat:no-repeat;
	background-size: 100%;
	background-position:right 20%;
  	padding-top:3em;
  	margin-top:3em;
  	padding-bottom:3em;
  	text-align:right;
  	text-transform:uppercase;

}