/*
	------------------------------------------------------------------------------------------------------------------
	 MENU DESPLEGABLE DESDE BOTÓN PARA PÁGINA RESPONSIVE DESIGN
	 Reglas:
	 
	 - El menú de instala en el div a2 (esquina superior derecha)
	 - El menú consta de los siguientes elementos div

			<div id="divbtnmenu">
            	<a href="#" id="botonmenu1"><img src="img/botonmenu1.png" id="imgbtnmenu1"></a>
                <a href="#" id="botonmenu2"><img src="img/botonmenu2.png" id="imgbtnmenu2"></a>
            </div>
            <div id="divmenumin"> <!-- menú responsive  -->
            	<ul>
                	<li><a href="#">Opcion1</a></li>
                    <li><a href="#">Opcion2</a></li>
                    <li><a href="#">Opción3</a></li>
				</ul>
			</div>
        	<div id="divmenumax"> <!-- menu pantalla grande (pc, laptop) -->
				<a href="#">Opcion1</a> | <a href="#">Opcion2</a> | <a href="#">Opcion3</a>
			</div>
	- Las imagenes botonmenu1.png y botonmenu2.png son de los botones para desplegar y cultar el menú respectivamente
	- No importa en que div esté el menú max (pantalla grande) pero debe estar dentro del div con id="divmenumax"
	- En el head deberán existir las siguientes líneas y los archivos correspondientes en las rutas especificadas
			<link href="css/MenuBtn_01.css" rel="stylesheet" type="text/css" />
			<script src="js/MenuBtn_01.js" type="text/javascript"></script>
*/

/* Esteblecer aquí colores del menú	*/
#divmenumin				{	background-color:#36C;	}
#divmenumin a			{	font-size:70px; }
#divmenumin a:link		{	font-weight:bold; text-decoration:none; color:#CCC;	}
#divmenumin a:visited	{	font-weight:bold; text-decoration:none; color:#CCC;	}
#divmenumin a:active	{	font-weight:bold; text-decoration:none; color:#CCC;	}
#divmenumin a:hover		{	font-weight:bold; text-decoration:none; color:#FFF;	}
#divmenumin a:focus		{	font-weight:bold; text-decoration:none;	color:#CCC; }

/* Demás configuraciones 	*/
#divbtnmenu				{	display:none; position:fixed; right:1%; top:1%; z-index:999; opacity:0.95; 	}
#botonmenu1				{	display:none;	}
#botonmenu2				{	display:none;	}
#imgbtnmenu1			{	width:100px; height:auto; 	}
#imgbtnmenu2			{	width:100px; height:auto; 	}

#divmenumin				{	width:90%; height:auto; padding:30px; display:none; position:fixed; right:2%; top:120px; z-index:999; opacity:0.95; 	}
#divmenumin ul li		{	display:list-item; list-style-type:none; text-align:center; font-size:60px; margin-top:25px; margin-bottom:25px;	}
	
#divmenumax				{	display:block;	}

@media screen and (max-width:1100px)
{
	#divbtnmenu			{	display:block;	}
	#botonmenu1			{	display:block;	}
	
	#divmenumax			{	display:none;	}
}