/**
 * @file        ../menuresponsive.css
 * @date        2019-05-25
 * @version     1.0
 * @package     Joomla.Administrator
 * @subpackage  com_exaltarts
 * @since       3.0
 * @copyright   Copyright (C) 2010 - 2019 Jackie Leclair. All rights reserved.
 * @author      Jackie Leclair
 * @description
 * @license     http://www.gnu.org/licenses/gpl-2.0.html
 *
 * @usage       pour menu vertical situé à gauche
 *
 */

/* ############# MENU VERTICAL ###################### */
#menu_vertic {
	float: left;
	margin: 20px 0;
	width: 20%;
}
/*
div.moduletable_menu {
	margin: 0;
	display: block;
}
*/
#left_menu {
	clear: both;
	display: block;
	position: relative;
	text-align: left;
/*	z-index: 100;*/
	list-style : none;
	margin: 60px 0 0 0;
	padding: 0;
}

#left_menu li {
	clear: left;
	margin: 0.5em 0;
	padding: 0;
	line-height: 1.5em;
	list-style : none;
	color: #ddd;
	text-align: left;
	font-size: 120%;
}

#left_menu li a {
	margin: 0;
	padding: 1px;
	display: block;
	float : none;
	position: relative;
	z-index: 22;
	color: #ddd;
	text-decoration: none;
}

#left_menu li a:hover {
	text-decoration: none;
	color: #fff;
	font-size: 125%;
	background: none;
}

#left_menu li ul {
	display: block;
	margin: 0 0 0 1em;
	padding: 0;
}

#left_menu li ul ul { margin: -40px 0 0 10em; }

#left_menu li li {
	text-align: left;
	font-size: 90%;
	line-height: 1.7em;
	margin: 0;
	padding: 0;
}

#left_menu li li a {
	text-transform: none;
	display: block;
	background: none;
}

#left_menu > li.active > span.separator	{
	font-weight: bold;
	color: #fff;
}

#left_menu li.current > a {
	font-weight: bold;
	font-style: italic;
	color: #fff;
}

/*---------------------------------------*\
         $VARIABLES
\*---------------------------------------*/
:root {
	--menu-left: -250px;
	--menu-width: 250px;
	--menu-bg: #555;
}

@media only screen and (max-width: 1024px) {
	.site-pusher, .site-container {
		height: 100%;
	}
	.site-container {
		overflow: hidden;
		max-width: 100%;
	}
	.site-pusher {
/*		transition-duration: 300ms;
		transform: translateX(var(--menu-left));
		width: 1274px;*/
	}

  #contentarea {
    right: 0;
    left: 0;
    bottom: 0;
    padding-top: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* Inertie sur iOS */
  }

	.header {
		position: static;
	}

  /* L'icône hamburger, en utilisant le box-shadow */
	.header__icon {
		position: relative;
		display: block;
		float: left; /**/
		width: 50px;
		height: 50px;
		cursor: pointer;
		z-index: 22;
	}
    .header__icon:after {
		content: '';
		position: absolute;
		display: block;
		width: 1rem;
		height: 0;
		top: 5px;
		left: 16px;
		box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
	}

  /* Le menu collé à gauche est masqué grâce à un transform */
	#menu_vertic {
		margin: 0;
		position: absolute;
		float:left;
		left: var(--menu-left);
		top: 0;
		bottom: 0;
		width: var(--menu-width);
		height: 300px;
		max-height: 100%;
		background-color: var(--menu-bg);
		overflow-y: scroll;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		transform: translateX(var(--menu-left));
		z-index: 10;
		display: none;
	}

	#left_menu, #left_menu ul {
		left: 0;
		margin-top: 0;
		border: none;
		background-color: transparent;
		position: relative;
	}

    #left_menu li, #left_menu a {
		max-width: 100%;
		text-align: left;
		padding: 5px 10px;
		float: none;
		display: block;
    }

    #left_menu > li li {
		font-size: 100%;
		padding: 5px;
    }

	.with--sidebar #menu_vertic {
		display: block;
	    transform: translateX(var(--menu-width));
	    transition-duration: 300ms;
	}
/*	.with--sidebar .site-pusher {
	    transform: translateX(0);
		transition-duration(300ms);
	}*/
	/* On met un cache par dessus le site-content pour bloquer le scroll et permettre le retour au site */
	.with--sidebar .site-cache {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-color: rgba(0, 0, 0, 0.3);
	    z-index: 2;
		overflow: hidden;
	}
	body.with--sidebar {
		overflow: hidden;
	}
}

/* margin 20px pour img.header*/
/*@media only screen and (min-height: 812px) and (max-height: 959px) and (orientation: portrait) {
	#menu_vertic { height: 690px; }
}

@media only screen and (min-height: 740px) and (max-height: 811px) and (orientation: portrait) {
	#menu_vertic { height: 620px; }
}

@media only screen and (min-height: 671px) and (max-height: 739px) and (orientation: portrait) {
	#menu_vertic { height: 550px; }
}

@media only screen and (min-height: 561px) and (max-height: 670px) and (orientation: portrait) {
	#menu_vertic { height: 440px; }
}
@media only screen and (min-height: 481px) and (max-height: 560px) and (orientation: portrait) {
	#menu_vertic { height: 360px; }
}
@media only screen and (max-height: 480px) and (orientation: portrait) {
	#menu_vertic { height: 360px; }
}
*/