/**
 * @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
 *
 */

#menu_horiz {
	font-weight: normal;
	text-align: center;
	margin: 0;
	padding: 4px 0 8px 0;
	width: 100%;
	color:	#fff;
}

#top_menu { /* ul */
	clear: both;
	display: block;
	height: 30px;
	position: relative;
	z-index: 20;
	list-style : none;
	margin: 0;
	padding: 0;
}

#top_menu li {
	float: left;
	position: relative;
	list-style : none;
	text-align: center;
	font-size: 130%;
	font-style: normal;
	font-weight: normal;
	margin-left: 0;
	padding: 2px 0;
}

#top_menu li a {
	color:	#fff;
	padding: 1px;
	margin: 0;
	display: block;
	float : none;/* !important;
	float : left;*/
	position: relative;
	z-index: 50;
	text-decoration: none;
}

#top_menu li a:hover {
	text-decoration: none;
	font-size: 105%;
}

#top_menu > li ul {
	display: block;
	width: 100%;
/*	min-width: 200px;*/
	position: absolute;
	z-index: 19;
	left: -999em;
	clear: left;
	margin-left: 30px;
	padding: 0 2px;
	background-color: #7f7f7f;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

#top_menu li li {
	width: 100%;
	height: 1.3em;
	text-align: left;
	font-size: 80%;
	padding: 0 5px;
}

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

#top_menu li:hover ul ul, #top_menu li:hover ul ul ul,
#top_menu li.sfhover ul ul, #top_menu li.sfhover ul ul ul {
	left: -999em;
}

#top_menu li:hover ul, #top_menu li li:hover ul, #top_menu li li li:hover ul,
#top_menu li.sfhover ul, #top_menu li li.sfhover ul, #top_menu li li li.sfhover ul {
	left: 0;
}

/******** Reglages perso ajoutés */
#top_menu li.parent.active {
	font-style: italic;
	font-weight: bold;
}
#top_menu li.current {
	font-style: italic;
	font-weight: bold;
}

.header__icon {
	z-index: 1000;
}

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

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

  #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: 66px;
		cursor: pointer;
	}
    .header__icon:after {
		content: '';
		position: absolute;
		display: block;
		width: 1rem;
		height: 0;
		top: 16px;
		left: 15px;
		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_horiz {
		position: absolute;
		float:left;
		left: var(--menu-left);
		top: 0;
		bottom: 0;
		width: var(--menu-width);
		height: 400px;
		margin: 0;
		overflow-y: scroll;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		transform: translateX(var(--menu-width) * -1);
		z-index: 100;
		display: none;
	}

	#menu_horiz > ul, #menu_horiz > ul ul {
		left: 0;
		border: none;
		background-color: transparent;
		position: relative;
	}
    /* Un lien par ligne */
    #menu_horiz ul li, #menu_horiz a {
		width: 100%;
		text-align: left;
		padding: 5px 10px;
		float: none;
		display: block;
    }

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

	.with--sidebar #menu_horiz {
		display: block;
	    transform: translateX(var(--menu-width) * -1);
	    transition-duration: 300ms;
	}
	.with--sidebar .site-pusher {
	    transform: translateX(var(--menu-width));
		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: 10;
	}
	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_horiz { max-height: 711px; }
}

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

@media only screen and (min-height: 667px) and (max-height: 739px) and (orientation: portrait) {
	#menu_horiz { max-height: 566px; }
}

@media only screen and (min-height: 561px) and (max-height: 666px) and (orientation: portrait) {
	#menu_horiz { max-height: 460px; }
}
@media only screen and (max-height: 560px) and (orientation: portrait) {
	#menu_horiz { max-height: 360px; }
}