/*Documento style_menu.css*/
{
margin:0;
padding:0;
}

body{
 background: beige url(/static/img/faixa-preta-azul.jpg);
 background-repeat: repeat-x;
 margin-top: 10px;
}
/*Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.*/
@media screen and (max-width: 720px) {
      #container, .p, .h1, .h2, .h3, #menu, #oNav, .div, .ul, .li, .a{
	  min-width: 240px;
	  width: 240px;
	 /*background-color: aqua;*/
  }
}
 #container{ 
        border: 0.1em dotted #000;
        width:60%;
        margin:0 auto;
        margin-top: 100px;
        padding-left: 1.4em;
        padding-right: 1.4em;
        background-color: #FFFFFF;
    }

    h1, h2{
    text-align: center;
    }

     ul#menu > li {
              float:left;
              }

     ul#menu >li > ul{
             left:0;
             top: 19px;/*==========================================================*/
             }

    ul{
         padding:0; <!--remove o padding-->
         margin:0;<!--remove a margin-->
         list-style:none; 
         }

    li{
         border: 1px solid black;
         width:120px;<!--com pixel a largura não muda ao diminui o viewport  -->
         padding:3px;
         text-align: center;
         position:relative;
         list-style:none;/*retira a marcação de lista do submenu*/
         }

 li:hover{
      background-color: black;/* cor de fundo*/
      color: white; /* cor da fonte branca para ser visível em fundo preto*/
      }

    li > ul{ /*submenu=====================================*/
       position:absolute;
       left:120px;/*cola o submenu ao sub/submenu=====================================*/
       top:0;
       color:black;
       list-style:none;/*retira a marcação de lista do submenu*/
    }

/*----------------------------*/
#oNav {
    height: 30px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: right;
    padding-top: 5px;
    padding-right: 20px;
    background-color:#39f;
    background-image: linear-gradient(to bottom, #def, #036);
    text-shadow: 10px 10px 0px 0px;
    margin-right:15px;
    border-radius: 1px 30px 30px 1px;
    box-shadow: 2px 2px 6px #000; /*6px representa o borrão*/
    }

#div {
  display: block;
}

#oNav > span > a {
   color: #000;/*36f; cor da fonte da aba*/
}

/*----------------------------*/
 pre{
-moz-hyphens:auto;
-ms-hyphens:auto; 
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}