/***********************************/
/* LISTE DES ANIMAUX PAR RUBRIQUE  */
/***********************************/

/* VERSION 2.00 */

@font-face {
	font-family: "Cera";
	font-display: fallback;
	src: url('../../../fonts/Cera Pro/CeraPro-Regular.ttf');
}

@font-face {
	font-family: "MaPolice";
	src: url('../../../fonts/KrustySigns.ttf');
}

body
{
	background-color:white;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	
	font-family:Cera, Arial, Helvetica, sans-serif;
}

a{outline: none;}
:focus{-moz-outline-style: none;}

a:link {text-decoration:none;}
a:active {text-decoration:none;} 
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}

.image-FB-hide
{
	display:none;
}

/**************/
/* CADRE MENU */
/**************/

#CADRE-MENU
{
	background:rgb(20,34,37);
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	margin:0px auto 0px auto;
	padding:10px 0px 10px 0px;
}

@media all and (max-width: 480px) /* Mobile */
{
    #CADRE-MENU
    {
		width:360px;
		padding:5px 0px 5px 0px;
    }
}

/*************************/
/* CADRE CENTRAL DU MENU */
/*************************/

#CADRE-CENTRAL-MENU
{
	display:flex;
	flex-direction:column;
	justify-content:center;
}

@media all and (max-width: 480px) /* Mobile */
{
    #CADRE-CENTRAL-MENU
    {
		width:360px;
		justify-content:flex-start;
		padding:0px 0px 10px 0px;
    }
}

.titre1
{	
	font-size:28px;
	color:white;
	text-shadow:1px 1px 1px silver;
	font-variant:small-caps;
	font-weight:bold;
	text-align:center;
}

.titre2
{	
	font-size:48px;
	color:white;
	text-shadow:1px 1px 1px silver;
	font-variant:small-caps;
	font-weight:bold;
	text-align:center;
}

@media all and (max-width: 480px) /* Mobile */
{
    .titre2
    {
		font-size:40px;
    }
}

/**************************************/
/* CADRE MENU : RUBRIQUE SELECTIONNEE */
/**************************************/

#CADRE-MENU-RUBRIQUE
{
	background:rgb(20,34,37);
	display:flex;
	justify-content:center;
	margin:0px 0px 0px 100px;
}

@media all and (min-width: 800px) and (max-width: 1389px) /* Tablette*/
{
    #CADRE-MENU-RUBRIQUE
	{
		margin:10px 0px 0px 30px;
    }
}

@media all and (max-width: 480px) /* Mobile */
{
    #CADRE-MENU-RUBRIQUE
    {
		width:360px;
		margin:0px 0px 0px 0px;
		padding:5px 0px 5px 0px;
    }
}

.cadre-sous-theme
{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.titre-rubrique
{	
	font-family:MaPolice, Arial, Helvetica, sans-serif;
	font-size:16px;
	color:white;
	font-variant:small-caps;
	text-align:center;
}

.image-rubrique
{
	border-radius:20px;
}

.cadre-annees
{
	display:flex;
	width:500px;
	justify-content:space-between;
	align-items:center;
}

@media all and (max-width: 480px) /* Mobile */
{
    .cadre-annees
    {
		width:350px;
    }
}

.bouton-year-selected
{
	width:100px;
	font-family:MaPolice, Arial, Helvetica, sans-serif;
	font-size:36px;
	color:orange;
	font-variant:small-caps;
	text-align:center;
}

.bouton-year
{
	width:110px;
	border:1px solid white;
	border-radius:10px;
	font-family:MaPolice, Arial, Helvetica, sans-serif;
	font-size:36px;
	color:white;
	font-variant:small-caps;
	text-align:center;
}

@media all and (max-width: 480px) /* Mobile */
{
    .bouton-year
    {
		width:90px;
		font-size:30px;
    }
}

.bouton-year:hover
{
	color:orange;
	border:1px solid orange;
}

.bouton-year-limit
{
	width:110px;
	font-family:MaPolice, Arial, Helvetica, sans-serif;
	font-size:36px;
	color:white;
	font-variant:small-caps;
	text-align:center;
}

@media all and (max-width: 480px) /* Mobile */
{
    .bouton-year-limit
    {
		width:90px;
		font-size:30px;
    }
}

/*******************/
/* PAGE PRINCIPALE */
/*******************/

#MAIN_PAGE
{
	display:flex;
	justify-content:center;
}

#PAGE
{
	width:1150px;
	display:flex;
	flex-direction:column;
	margin:20px 0px 0px 0px;
	padding:20px 0px 20px 0px;
	border:1px solid rgb(205,205,205);
	box-shadow:5px 5px 5px rgb(225,225,225);
}

@media all and (max-width: 480px) /* Mobile */
{
    #PAGE
	{
		width:360px;
		border:none;
		box-shadow:none;
    }
}

/**********************/
/* CADRE DES ANIMAUX  */
/**********************/

#CADRE-PHOTOS
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	margin:20px auto 40px auto;
}

/* Grandes photos et petites photos*/
/* Infos animal sous la grande/petite photo */
/* Voir view/common/CSS/listes-minifig-animaux.css */