/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 09-sep-2019, 17:18:44
    Author     : Q
*/


input#abrir-cerrar {
    visibility:hidden;
    top: -9999px;
    float: right;
    z-index:5;
}

label[for="abrir-cerrar"] {
    font-size: 32px;
    font-weight: bold;
    line-height: 35px;
    cursor:pointer;
    background-color:transparent;
    color:black;
    float: right;
    z-index:5;
    margin-right: -1rem;
}

#sidebar {
    /*
    Para ocultar el menú, le pone un ancho 0
    Nota:
    z-index:0 no tiene el efecto deseado porque
    hay elementos de la página a ese mismo nivel.
    */
    z-index: 5;
    width:0;
}

input#abrir-cerrar:checked ~ #sidebar {
    width:14rem;
    z-index:5;
    border: 2px black solid;
}

.sidebar {
    position: absolute;
    height: auto;
    /*
    Lo centra horizontalmente.
    Verticalmente, lo pone a 1/5
    desde el borde superior.
    */
    top: calc((100% - 10rem)/5); /* 4 líneas de menú x 2 + 1 margen sup + 1 margen inf */
    right: calc((100% - 14rem)/2);
    background-color: #99cccc;
    overflow-x: hidden;
    z-index:5;
    border-radius:8px;
    text-align: center;
}

.sidebar ul, .sidebar li{
    margin:0;
    padding:0;
    list-style:none inside;
    z-index:5;
}

.sidebar ul {
    margin: 1rem 1rem 1rem 1rem;
    display: block;
    z-index:5;
}

.sidebar input {
    width:12rem;
    display: block;
    font-size: 120%;
    font-weight: bold;
    color: #000;
    background-color: #ccffff;
    text-decoration: none;
    border-radius:4px;
    margin-top:4px;
    margin-bottom:4px;
    z-index:5;
}

.sidebar input:hover{
    cursor: pointer;
    color:#000;
    background-color: #f90;
    z-index:5;
}