@charset "utf-8";
/* Este arquivo estiliza o index */

/* estilo para tela maior */
html, body,  iframe {margin:0; padding:0; height:100%}
    iframe {display:block; width:100%; border:none}
body{/* estiliza a tag body */
    font-family: Trebuchet MS;/* estilo fonte */
    color: #333;/* define cor da fonte cinza */
    margin: 0px;/* retira as margem */
    width: 100%;/* largura */
    overflow: hidden;
}
input{
    display: none;
}
label[for="bt_menu"]{
    display: none;
}
.coluna-menu{
    position: relative;
    float: left;
    width: 220px;/* largura dos menus */
    height: 100%;
}
.item ul {/* estiliza os menus com background cinza */
    list-style: none;/* oculta caracteres da lista */
    background-color: #51A5BA;/* background preto escuro */
	padding: 5px 0px 0px 8px;/* espacamento a esquerda */
	/* espacamento a esquerda */
    height: 39px;/* altura */
    width: 205px;/* largura */
    margin-bottom: -12px;/* espacamento abaixo */
    border-radius: 4px;/* cantos arredondados */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.item ul li a{/* estiliza a tag 'a' */
    color: #FFF;/* define cor da fonte branca */
    text-decoration:none;/* sem efeito */
}
.item ul li a div{/* estiliza a tag div */
    padding-top: 8px;/* espacamento acima */
    cursor: pointer;/* cursor do mouse tipo link*/
}
.item ul:hover{/* configura entrada do cursor do mouse */
    background-color: #6BCAE2;/* background cinza */
    text-decoration: none;/* sem efeito  */
}
.item2 ul {/* estiliza os menus sem background */
    list-style: none;/* oculta caracteres da lista */
    background-color: #fff;/* background branco */
    padding-left: 8px;/* espacamento a esquerda */
    height: 39px;/* altura */
    width: 210px;/* largura */
    margin-bottom: -12px;
    border-radius: 4px;/* cantos arredondados */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.item2 ul li a{/* estiliza a tag 'a' */
    color: #333;/* define cor da fonte cinza */
    text-decoration:none;/* sem efeito */
}
.item2 ul li a div{/* estiliza a tag div */
    padding-top: 8px;
    cursor: pointer;/* cursor do mouse tipo link*/
}
.item2 ul:hover{/* configura entrada do cursor do mouse */
    text-decoration: none;/* efeito sublinhado */
}
.frame{/* estiliza o iframe */
	width: 600px;
	display:block;
	margin-left: 12px;
    max-width: 100%;
    max-height: 100%;
    border: none;
    overflow: hidden;
}

/* estilo para tela media */
@media (max-width: 847px){

    body{/* estiliza a tag body */
        font-family: Trebuchet MS;/* estilo fonte */
        color: #333;/* define cor da fonte cinza */
        margin: 0px;/* retira as margem */
        width: 100%;/* largura */
        overflow: hidden;
    }
    input{/* oculta o input checbox */
        display: none;
    }
    label[for="bt_menu"]{
        display: block;
    }
    img{/* oculta a tag img */
        display: none;
    }
    .icon{
		color:#FFF;
		text-align: center;
		background-color: #51A5BA;
		height: 32px;/* altura do menu */
		width: 80px;/* largura do menu */
		cursor: pointer;
		padding: 5px;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		-o-border-radius: 4px;
    }
    .icon:before{
        content: '\002630';
        font-size: 20px;
        z-index: 1;
    }
    input:checked ~ .coluna-menu{
        position: absolute;
        visibility: visible;
        display: block;
        height: 100%;
        width: 100%;
    }
    .coluna-menu{
        margin-top: 5px;
        display: none;
    }
    .item ul {/* estiliza os menus com background cinza */
        list-style: none;/* oculta caracteres da lista */
        background-color: #51A5BA;/* background cinza claro */
        margin: 0px;
        padding: 5px 0px 10px 20px;/* espacamento a esquerda */
        border-bottom: solid 1px #fff;
        height: 30px;/* altura */
        width: 100%;/* largura */
    }
    .item ul li a{/* estiliza a tag 'a' */
        color: #FFF;/* define cor da fonte cinza */
        text-decoration: none;/* sem efeito */
    }
    .item ul li a div{/* estiliza a tag div */
        cursor: pointer;/* cursor do mouse tipo link*/
    }
    .item ul:hover{/* configura entrada do cursor do mouse */
        background-color: #6BCAE2;/* background cinza */
        text-decoration: none;/* efeito sublinhado */
    }
    .item2 ul {/* estiliza os menus sem background */
        list-style: none;/* oculta caracteres da lista */
        background-color: #fff;/* background branco */
        margin: 0px;
        padding: 10px 0px 0px 20px;/* espacamento a esquerda */
        height: 30px;/* altura */
        width: 100%;/* largura */
    }
    .item2 ul li a{/* estiliza a tag 'a' */
        color: #000;/* define cor da fonte cinza */
        text-decoration: none;/* sem efeito */
    }
    .item2 ul li a div{/* estiliza a tag div */
        padding-top: 8px;
        cursor: pointer;/* cursor do mouse tipo link*/
    }
    .item2 ul:hover{/* configura entrada do cursor do mouse */
        text-decoration: underline;/* efeito sublinhado */
    }
    .frame{/* estiliza o iframe */
        width: 620px;
		display:block;
		margin-left: 12px;
    	max-width: 100%;
    	max-height: 100%;
    	border: none;
    	overflow: hidden;
    }

}

/* estilo para tela menor */
@media (max-width: 320px){

    body{/* estiliza a tag body */
        font-family: Trebuchet MS;/* estilo fonte */
        color:#333;/* define cor da fonte cinza */
        margin: 0px;/* retira as margem */
        width: 100%;/* largura */
        overflow: hidden;
    }
    input{/* oculta o input checbox */
        display: none;
    }
    label[for="bt_menu"]{
        display: block;
    }
    img{/* oculta a tag img */
        display: none;
    }
    .icon{
		color: #FFF;
        text-align: center;
        background-color: #51A5BA;
        height: 32px;/* altura do menu */
        width: 80px;/* largura do menu */
        cursor: pointer;
        padding: 5px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
    }
    .icon:before{
        content: '\002630';
        font-size: 20px;
        z-index: 1;
    }
    input:checked ~ .coluna-menu{
        position: absolute;
        visibility: visible;
        display: block;
        height: 100%;
        width: 100%;
    }
    .coluna-menu{
        margin-top: 5px;
        display: none;
    }
    .item ul {/* estiliza os menus com background cinza */
        list-style: none;/* oculta caracteres da lista */
        background-color: #51A5BA;/* background cinza claro */
        margin: 0px;
        padding: 5px 0px 5px 20px;/* espacamento a esquerda */
        border-bottom: solid 1px #fff;
        height: 30px;/* altura */
        width: 100%;/* largura */
    }
    .item ul li a{/* estiliza a tag 'a' */
        color: #fff;/* define cor da fonte cinza */
        text-decoration:none;/* sem efeito */
    }
    .item ul li a div{/* estiliza a tag div */
        font-size: 13px;
        cursor: pointer;/* cursor do mouse tipo link*/
    }
    .item ul:hover{/* configura entrada do cursor do mouse */
        background-color: #6BCAE2;/* background cinza */
        text-decoration: none;/* efeito sublinhado */
    }
    .item2 ul {/* estiliza os menus sem background */
        list-style: none;/* oculta caracteres da lista */
        /*background-color: #fff; background branco */
        margin: 0px;
        padding: 10px 0px 0px 20px;/* espacamento a esquerda */
        height: 30px;/* altura */
        width: 100%;/* largura */
    }
    .item2 ul li a{/* estiliza a tag 'a' */
        color: #000;/* define cor da fonte cinza */
        text-decoration:none;/* sem efeito */
    }
    .item2 ul li a div{/* estiliza a tag div */
        font-size: 13px;
        padding-top: 8px;
        cursor: pointer;/* cursor do mouse tipo link*/
    }
    .item2 ul:hover{/* configura entrada do cursor do mouse */
        text-decoration: none;/* efeito sublinhado */
    }
    .frame{/* estiliza o iframe */
        width: 620px;
		display:block;
		margin-left: 12px;
    	max-width: 100%;
    	max-height: 100%;
    	border: none;
		overflow: hidden;

}