/* Cucco Business  -  Menu responsivo 
    24/03/2017
    ver na url: https://tableless.com.br/header-responsivo-somente-com-css/
Formatei o “label .control-nav” para ser o botão responsivo, o “label .control-nav-close” para ser a cortina bloqueando o fundo e o ‘nav’ para ficar fixo e redimensionável.
Agora o pulo do gato
Utilizando seletores do CSS3 que são os ‘:checked’ e ‘~’, conseguimos formatar elementos de acordo com a necessidade, veja a documentação.https://www.w3.org/TR/css3-selectors/#selectors
Sendo mais claro, com o seletor ‘~’ você consegue selecionar elemento do mesmo pai declarado depois dele.
Ao marcar o input, no css usando o transform vamos exibir suavemente o menu, 
*/
/* 
    Created on : 22/05/2017, 08:48:19
    Author     : AtoCarlos
*/

.classVideo {
    width: 100%;
}

/*-- Menu da administracao - Tutoriais... --*/
div.administrationWrapper{
	width: 100%;
}
div.administrationWrapper div.administrationMenu {
    max-width: 350px;
	    float: left;
}
div.administrationWrapper div.administrationMenu ul  {
    font-size: 0.9em;
	   margin: 0;
	  padding: 0;
	 position: absolute;
	  z-index: 99;
  	   height: 500px;
     overflow: scroll;  
	max-width: 330px;  /*18%;*/
}

div.administrationWrapper div.administrationMenu ul li {
	list-style-type: none;
	
}

div.administrationWrapper div.administrationMenu ul li a {
	        display: block;
	        padding: 12px 10px;
	  margin-bottom: 5px;
	text-decoration: none;
	          color: #4c4c4c;
	    font-weight: bold;
             height: 12px;
}

div.administrationWrapper div.administrationMenu ul li a:hover {
	color: #F79C33;
}

div.administrationWrapper div.administrationMenu ul li a.active {
               color: rgb(90, 175, 201);
}


/* Traços do menu navegacao de Agendas */
div.administrationMenu label {
    display: none;
}
div.administrationMenu input {
    display: none;
}
div.administrationMenu span.tracos {
      font-size: 30px;
    font-weight: bold;
}

div.administrationMenu span.opcaoAdministracaoName{
          color: rgb(90, 175, 201);
    font-family: "Shree Devanagari 714",Monaco, monospace;
      font-size: 0.8em;
}

/*-- Menu da administracao - final... --*/


/* Administration conteudo: onde aparece informacoes e os videos*/

div.administrationConteudo {                  /* dojoAttachPoint = divContent*/
	                float: right;
	           background: #FFF;
	              padding: 20px;
	        border-radius: 10px;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	                width: 72%;
	      -moz-box-shadow: 0 0 5px #ccc;
	   -webkit-box-shadow: 0 0 5px #ccc;
	           box-shadow: 0 0 5px #ccc;
	/*position: relative; */
	               height: 480px;
                 overflow: scroll;      
}

div.administrationConteudo h2 {
	  font-weight: bold;
	    font-size: 1.5em;
	margin-bottom: 15px;
}

fieldset.boxCinzaSelect {
              padding-top: 0px;
            padding-right: 10px;
           padding-bottom: 10px;
             padding-left: 10px;
	           background: #efefef;
	               border: 1px solid #CCC;
  	   -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	        border-radius: 5px;
        
	           margin-top: 0px;
	        margin-bottom: 10px;
               max-height: 195px;
                 overflow: scroll;
                 font-size: 0.8em;
        
}
fieldset.boxSelectFinance {
              padding-top: 0px;
            padding-right: 10px;
           padding-bottom: 10px;
             padding-left: 10px;
	           background-color: #efefef;
	               border: solid 2px #CCC;
  	   -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	        border-radius: 5px;
        
	           margin-top: 0px;
	        margin-bottom: 10px;
                 overflow: scroll;
        
}
div.psAtivo{
     margin-top: 20px;
     margin-left: 50px;
}
 .formatoFree{
    font-family: "Courier new",Monaco, monospace;
      font-size: 0.8em;
          color: red;
}
 .formatoFreeBold{
    font-family: "Courier new",Monaco, monospace;
      font-size: 0.8em;
          color: red;
    font-weight: bold;
}
 .formatoFreeConfiguracao{
    font-family: "Courier new",Monaco, monospace;
      font-size: 0.8em;
          color: red;
    margin-left: 20px;
}
.blueClass{
    color: #0086f7;
}
.blackBoldClass{
          color: black;
	font-weight: bold;
}

div.dlgDetalhePrestadorWrapper{
       height: 540px;
    max-width: 480px;
}
div.dlgDetalhePrestador{
	           background: #eee;
   	               border: 1px solid #CCC;
	   -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
      	    border-radius: 5px;
                    clear: both;
               margin-top: 0px;
             margin-right: 20px;
            margin-bottom: 5px;
              margin-left: 35px;
               max-height: 420px;
	              padding: 10px;
                    width: 85%;
                 overflow: scroll;
}

@media screen and (max-width: 768px) {
    nav.navAdministracao ul.ulAdministracao li {
        width: 100%;
        z-index: 0;
    }

    /* Seletor menu administracao  */
    div.administrationMenu label{
               display: block;
             font-size: 16px;
           font-weight: bold;
           padding-top: 10px;
          padding-left: 10px;
        padding-bottom: 8px;
                /* width: 100%;*/
             /*min-width: 320px;*/
    }
    label[for="id_menuAdmin"]:hover {
        color: orange;
    }
    
    div.administrationMenu label {
        margin-left: 15px;
    }
    
        /* label layer cria curtina para bloquear click na tela*/
  div.administrationMenu label.administrationMenuClose {
              position: fixed; 
                 right: 0;
                   top: 0;
                bottom: 0;
                  left: 0;
               display: block;
            background: rgba(0,0,0,0.4);
    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
         -o-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
            transition: all 500ms ease;
     -webkit-transform: translate(100%, 0);
         -ms-transform: translate(100%, 0);
        -moz-transform: translate(100%, 0);
          -o-transform: translate(100%, 0);
             transform: translate(100%, 0);
               z-index: 1;
  } 
    /*<!--
    Utilizando dos seletores do CSS3 que são os ‘:checked’ e ‘~’, conseguimos formatar elementos de acordo com a necessidade, veja a documentação em:https://www.w3.org/TR/css3-selectors/#selectors.
    -->*/
    /*Selects every <nav> element that are preceded by a <input#bus-nav:checked> element */
    
  div.administrationMenu input#id_menuAdmin:checked ~ label.administrationMenuClose{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
  } 
  
  div.administrationMenu input#id_menuAdmin:checked ~ nav.navAdministracao li{
               display: block;         /* display do menu */
            background: #DEDEDE;
           font-weight: normal;
             font-size: 1.0em;
                 width: 320px;
           margin-left: 20px;
                height: 23px;
        padding-bottom: 15px;
	     border-bottom: solid 1px #cfcfcf;
               z-index: 3;  
    }
 
    ul.ulAdministracao{
         overflow: auto;        /* permitir rolar tela na vertical*/
           height: 250px;        
    }
    nav.navAdministracao ul li{
        display: none;
    }
    div.administrationWrapper div.administrationMenu ul  {
	 position: absolute;
	  z-index: 1;  /*1;*/
    max-width: 180px;
    }
    div.administrationWrapper div.administrationMenu ul li {
	list-style-type: none;
    }

    div.administrationWrapper div.administrationMenu ul li a {
	display: block;
	padding: 12px 1px;
    }

    div.administrationWrapper div.administrationMenu ul li a.active {
            color: rgb(90, 175, 201);
    }
   /*  Final Selector do menu Administracao: Tutoriais...*/  
   
    div.administrationWrapper div.administrationMenu ul li a {
        height: 16px;
    }

    div.administrationConteudo h2 {
            float: left;
    	font-size: 1.0em;
            width: 90%;
    }
    
}

@media screen and (max-width: 480px) {

    div.administrationWrapper div.administrationMenu ul li a {
             height: 20px;
    }    

    div.administrationConteudo h2 {
    	font-size: 1.0em;
       /* max-width: 260px;*/
    }
}