lumiere.css

/**
 * Lumiere Movies CSS standard for frontpages
 */

/***********************************************************
******************** Popups
***********************************************************/

/* Popups body */
body.lum_body_popup {font-family: sans-serif;margin:1em;}
/* Popups body with colors (according to options selected in admin */
body.lum_body_popup_white {color: #575757;background: white;}
body.lum_body_popup_black {color: white;background: black;}
body.lum_body_popup_lightgrey {color: black;background: lightgrey;}

.lum_popup_titlemenu{text-align: center;vertical-align: middle;margin: 0px;margin-left: 5px;font-weight: bold;font-size: medium;}
.lum_popup_titlemenu a:hover {color: #A8A8A8;text-decoration: none;}

.hidesection{display:none;}
.activatehidesection {cursor:help;}

#lum_popup_search{ /*link to the "similiar titles" in a popup movie */
	background: url(../pics/search.png) no-repeat left;
	font-style:italic;
	padding-left: 16px;
}

#lum_popup_link_back { /*link to the go back, in a popup people */
	font-style:italic;
}

.lum_popup_link_with_movie { /*link to the internal popup, from popups*/
	background: url(../pics/lumiere-ico-noir13x13.png) no-repeat left;
	padding-left: 16px;
}

.lum_popup_img { /* div for movie or people picture in popups */
	text-align: right;
	margin-right: 1em;
}

.lum_popup_menu_title, .lum_link_no_popup, .lum_popup_internal_link { /* links inside popups, internal links, title menu links, no popups in posts */
	color: #ff0000;
	text-decoration: none !important;
}

.lum_popup_menu_title:hover, .lum_popup_menu_title:visited, .lum_link_no_popup:hover, .lum_link_no_popup:visited, .lum_popup_internal_link:visited, 
.lum_popup_internal_link:hover  {
	color: #ff8e8b;
	text-decoration: none !important;
}

.lum_link_taxo_page, .lum_link_taxo_page:hover, .lum_link_taxo_page:visited { /** Link to a taxonomy page, link in widget/into the post  */
}

.lum_link_make_popup, .lum_link_make_popup:hover, .lum_link_make_popup:visited { /** Link to all types of modal windows popup */
}

.lum_link_with_movie { /* Link to a movie popup */
	background: url(../pics/lumiere-ico-noir13x13.png) no-repeat left;
	padding-left: 16px;
	cursor:pointer;
}

.lum_link_with_people  { /* Link to a people popup */
	cursor:pointer;
}

.lum_taxo_link{} /* Link in a taxonomy page */

.lum_link_sourceimdb { /* Link to the IMDb source */
}

.noresult { /*text displayed when no results found*/
	color: #addc23;
}

.add_cursor{
	cursor:pointer;
}
/* ---------------------------------------- Divs flex */

.lumiere_container{display:flex;flex-wrap:wrap;}
.lumiere_display_flex{display:flex;}
.lumiere_display_flex_align_flex_end{display:flex;justify-content: flex-end;}
.lumiere_flex_auto{flex:auto;}
.lumiere_container_border{border: 1px black solid;border-radius:10px;padding:5px;margin:5px;background-color:white;}
.lumiere_container_flex50, .lumiere_container_flex_fifty{flex:50%;}
.lumiere_container_flex_two{flex:2%;}
.lumiere_container_flex_30{flex:30%;}
.lumiere_container_flex_70{flex:70%;}

/* ---------------------------------------- Tables */

/* ------------------- Top menu */

.tabletitrecolonne{margin-bottom:0px;height:25px;left:10px;right:10px;}

.titrecolonne{text-align: center;vertical-align: middle;float: left;margin: 0px;margin-left: 5px;font-family: Arial;font-weight: bold;font-size: medium;height: 42px;text-decoration: none;}
.titrecolonne a:hover {color: #A8A8A8;}

.lumiere_float_left, .imdblt_float_left{float:left;}
.lumiere_float_right, .imdblt_float_right{float:right;}

/* ------------------- Results list */

.TableListeResultats{font-size: medium;margin-left:2%;padding: 5px;width: 96%;}

.TableListeResultatsTitre{font-family: Arial, Helvetica, Sans-Serif;font-weight: bold;color: #909090;text-decoration: none;padding: 3px 3px 3px 3px;text-align: center;font-size: 18px;}

.TableListeResultatsColGauche{padding-left:5px;}

.TableListeResultatsColDroite{text-align:right;padding-right:5px;}

/* ---- Presentation part */

.TableauPresentation {width:100%;}

.colpicture {height:auto;width:30%;padding-right:10px;}

.picture {/*border:#000000 thick ridge;*/}

/* ------------------- Left menu */

.TableauSousRubrique {padding: 0px 0px 0px 0px;width:100%;}

.TitreSousRubriqueColGauche {padding: 0px 0px 0px 0px;width: 25%;vertical-align:top;font-size:15px;}

.TitreSousRubriqueColDroite {text-align:center;font-size:12px;padding-right:13px;padding-left:13px;}


/* ------------------- Misc */

/* ---- Div */

.titrefilm, .identity{text-align:center;font-size:x-large;clear: both;}

.titrefilm a:hover, .identity a:hover {color: #FFEAFD;}

.soustitreidentity, .soustitrefilm {text-align:center;padding:5px;}

.TitreSousRubrique{font-size : 1.0em;border-bottom: 1px solid #333333;border-right: 1px solid #333333;text-align : right;padding: 3px 3px 3px 3px;}

/* ---------------------------------------- Others */

.TitreSousRubriqueColDroite li {list-style-type:none;text-align:justify;}

.imdbdiv-liees { /* to integrate two div in one */display:flex;flex-wrap:wrap;}
.imdbdiv-liees a { text-decoration:none;}

#triviafield, #nicknamesfield, #quotesfield, #selffilmofield, #biographicalfield, #tradmarksfield, #directorfilmofield, #producerfilmofield, #actorfilmofield, #actressfilmofield, #triviafieldmovie, #soundtrackfield, #goofsfield, #soundtrackfield {
display:none;
text-align:left;
}



/***********************************************************
******************** Widget & Inside posts & Taxonomy pages
***********************************************************/

.lum_results_frame {			/* The entire results div */
	padding-bottom:20px;
}

					/* not in use */
.lum_results_frame_grey, .lum_results_frame_white, .lum_results_frame_black { 
}

.lum_results_section_subtitle { 	/* Section title */
	font-weight:bold;
	font-size:115%;
	padding-right:5px;
}

.lumiere-lines-common {			/* common div to all elements */
	padding: 0 10px 0 10px;
	text-align:left;
}
.lumiere-lines-common hr {
	margin:0.5em;
}
.lumiere-lines-common:nth-child(3) { 	/* first two children are the title and the picture */
	padding-top:20px;
}
.lumiere-lines-common:last-child { 	/* latest div */
	padding-bottom:20px;
}

		/* GREY theme */
.lumiere-lines-common_grey{		/* Theme selected in the admin menu option */
	border-left:1px solid black;
	border-right:1px solid black;
	background-color:grey;
	color:white;
}
.lumiere-lines-common_grey a{
	color:gold;
	text-decoration: none !important;
}
.lumiere-lines-common_grey a.lum_link_taxo_page {
	color:#f0e68c;
}
.lumiere-lines-common_grey a:hover, .lumiere-lines-common_grey a.lum_link_taxo_page:hover {
	color:white;
}
.lumiere-lines-common_grey:last-child {
	border-bottom:1px solid black;
	border-radius:0 0 10px 10px;
}
		/* WHITE theme */
.lumiere-lines-common_white{		/* Theme selected in the admin menu option */
	border-left:1px solid black;
	border-right:1px solid black;
	background-color:white;
}
.lumiere-lines-common_white a {
	color:grey;
	text-decoration: none !important;
}
.lumiere-lines-common_white a.lum_popup_internal_link {
	color: #ff0000;
}
.lumiere-lines-common_white a:hover, .lumiere-lines-common_white a.lum_popup_internal_link:hover {
	color: #ff8e8b;
}
.lumiere-lines-common_white:last-child {
	border-bottom:1px solid black;
	border-radius:0 0 10px 10px;
}
		/* BLACK theme */
.lumiere-lines-common_black{		/* Theme selected in the admin menu option */
	background-color:black;
	color:white;
}
.lumiere-lines-common_black a {
	text-decoration: none !important;
	color:darkgrey;
}
.lumiere-lines-common_black a.lum_link_taxo_page {
	color:#778899;
}
.lumiere-lines-common_black a:hover, .lumiere-lines-common_black a.lum_link_taxo_page:hover {
	color:white;
}

.lumiere-lines-common_black a.lum_taxo_link.lum_link_with_movie { /* pic with black background in taxo page, condition: two classes lum_taxo_link && lum_link_with_movie */
	background: url(../pics/lumiere-ico-blanc13x13.png) no-repeat left !important;
}

.lumiere-lines-common_black:last-child {
	border-radius:0 0 10px 10px;
}


.imdbelementTITLE { 			/*TITLE*/
	text-align: center;
	font-weight:bold;
	font-size:140%;
	padding:10px;
	}
.imdbelementTITLE_grey{		/* additional theme selected in the menu option */
	background-color:black;
	border:1px solid black;
	border-radius:10px 10px 0 0;
	color:white;
	}
.imdbelementTITLE_white{		/* additional theme selected in the menu option */
	background-color:grey;
	border-radius:10px 10px 0 0;
	color:white;
	}
.imdbelementTITLE_black{		/* additional theme selected in the menu option */
	background-color:white;
	border:1px solid black;
	border-radius:10px 10px 0 0;
	color:black;
	}

.imdbelementPIC {			/*PIC div tag */
	padding:30px 20px 10px 10px;
	float:left;
}

.imdbelementPICimg {			/*PIC img tag */
}

.imdbelementCOUNTRY {			/*COUNTRY*/}

.imdbelementRUNTIME {			/*RUNTIME*/}

.imdbelementLANGUAGE {			/*LANGUAGE*/}

.imdbelementRATING {			/*RATING*/}

.imdbelementRATING-picture {vertical-align:baseline;}

.imdbelementGENRE {			/*GENRE*/}

.imdbelementGOOF {			/*GOOF*/}

.imdbelementCOMMENT {			/*COMMENT*/}

.imdbelementQUOTE {			/*QUOTE*/}

.imdbelementTAGLINE {			/*TAGLINE*/}

.imdbelementCOLOR {			/*COLOR*/}

.imdbelementTRAILER {			/*TRAILER*/}

.imdbelementALSOKNOWN {			/*ALSOKNOW*/}

.imdbelementCOMPOSER {			/*COMPOSER*/}

.imdbelementSOUNDTRACK {		/*SOUNDTRACK*/}

.imdbelementKEYWORD {			/*KEYWORDS*/}

.imdbelementPRODCOMPANY {		/*PRODUCTION COMPANIES*/}

.imdbelementOFFICIALWEBSITE {		/*OFFICIAL WEBSITE*/}

.imdbelementDIRECTOR {			/*DIRECTOR*/}

.imdbelementCREATOR {			/*CREATOR*/}

.imdbelementPRODUCER {			/*PRODUCER*/}

.imdbelementWRITER {			/*WRITER*/}

.imdbelementACTOR {			/*ACTOR*/}

.imdbelementPLOT {			/*PLOT*/}

.imdbelementSOURCE {			/*SOURCE*/}

.imdbelementSOURCE-picture {vertical-align:middle;display:inline;}


/* ---------------------------------------- Taxonomy people pages */


.lumiere-padding-lines-common-picture{padding: 20px 20px 0 10px;}
.postsTaxonomy{margin-left:2em;}
.lumiere-lines-common-fix{min-height:100px}

.lumiere_font_12 {font-size:12px;}
.lumiere_font_small {font-size:small;}
.lumiere_img_taxo_thumbnail{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.2);
	opacity: 0;
	text-align: center;
	transition: all .3s ease;
}

.lumiere_taxo_results {
/*	padding:2em; */
}

/* ---------------------------------------- Polylang forms */

#tag_lang{width:100px;}

/* ---------------------------------------- Search class */

body.gutenberg_search{margin:20px !important;background-color:grey;color:white;}
body.gutenberg_search a{background-color:darkslategrey;color:darkgrey;border-radius:10px;padding:5px;}
body.gutenberg_search a:hover{color:darkslategrey;background-color:darkgrey;border-radius:10px;padding:5px;}
h1#searchmovie_title {padding:20px;color:white;font-size: revert;}
input#moviesearched{ width:60%;background-color:lightyellow;}
span.label_moviesearched{font-size:larger !important;padding:10px;}
.lumiere_container_gutenberg_border{border-radius:10px;padding:10px;margin:5px;background-color:darkgrey;}
.lumiere_gutenberg_results{color:lavender;}
span.lumiere_gutenberg_copy_class{background-color: cornsilk;color:darkgrey;padding:10px;border-radius:10px;margin:5px;border: 1px solid black;}

/***********************************************************
******************** Spinners
***********************************************************/

/**
 * Full screen spinner, to activate add a div .parent__spinner in HTML after the body
 * NO MORE IN USE
.parent__spinner{position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: white;display:flex;justify-content:center;align-items: center;z-index: 1000;height: 100%;width: 100%;opacity:1;animation:fade;animation-duration: 0s;animation-delay:1s;animation-fill-mode: forwards;}
.loading__spinner{border: 20px solid white;border-top:20px solid darkgrey;border-bottom:20px solid darkgrey;border-radius: 70%;width:100px;height:100px;margin: auto;position:absolute;right:0;top:0;bottom:0;left:0;animation-name:spin;animation-duration:4s;animation-fill-mode:forwards;}
@keyframes spin {0% {transform: rotate(0deg);visibility:visible;}50%{transform: rotate(180deg);visibility:visible;}to {transform:rotate(360deg);visibility:hidden;height:0; width:0;}}
@keyframes fade {from{opacity:1;display: block;}to{opacity:0;z-index:-100; display:none;height:0;width:0;display: none;clip-path:circle(0);}}
@keyframes monanim {from{overflow:hidden;}to{overflow:visible;}}
 */
 
/**
 * On click a HTML tag spinners, to activate add a div|span .lum_add_spinner that will be changed in javascript
 * .loader is added by javascript, .parent-loader too
 * .parent-loader id a full background screen, .loader the animation that is the middle of the screen
 */

/* HTML: <div id="spinner-placeholder"></div> */
#parent-spinner {
	position: fixed;
	top: 0;
	left: 0;
	background-color:rgba(0,0,0,0.3);
	width:100vw;
	height:100vh;
	z-index:99;
}

#spinner {
	position: absolute;
	top: 0;
	left: 50%;
	bottom: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index:100;
	width: 120px;
	height: 20px;
	background:
	linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
	animation: l1 15s infinite linear; /* The spinner has a loop of 15 seconds */
}

@keyframes l1 {
	100% {background-size:100%}
}

/***********************************************************
******************** Misc
***********************************************************/

.lumiere_align_left{text-align:left;}
.lumiere_align_right{text-align:right;}
.lumiere_align_center{align-self:center;text-align:center;}

.lum_width_fit_cont{width:fit-content;}
.lumiere_width_fifty_perc{width:50%;}
.lumiere_width_eighty_perc{width:80%;}
.lumiere_width_30_perc{width:30%;}
.lumiere_width_20_perc{width:20%;}
.lumiere_width_15_perc{width:15%;}
.lumiere_font_em_11{font-size:1.1em;}
.lumiere_padding_two{padding:2px;}
.lumiere_padding_five{padding:5px;}
.lumiere_padding_15{padding:15px;}
.lum_padding_bott_2vh{padding-bottom:2vh;}
.lumiere_bold{font-weight:bold;}
.lumiere_italic{font-style:italic !important;}