<style>
body
{
	background-color: #66FFFF;
}


/* Main menu */

#menu
{
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;
	background: #4A4A6D;
	background: -moz-linear-gradient(#4A4A6D, #4A4A6D); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4A4A6D),color-stop(1, #4A4A6D));	
	background: -webkit-linear-gradient(#444, #4A4A6D);	
	background: -o-linear-gradient(#444, #4A4A6D);
	background: -ms-linear-gradient(#444, #4A4A6D);
	background: linear-gradient(#444, #4A4A6D);
	-moz-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	line-height: 0;
}

#menu a 
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #CCFFCC;
	font: 12px/25px Verdana, Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
	color: #99FF33;
}

*html #menu li a:hover /* IE6 */
{
	color: #99FF33;
}

#menu li:hover > ul
{
	display: block;
}

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px; 
    left: 0;
    z-index: 99999;    
    background: #4A4A6D;
    background: -moz-linear-gradient(#4A4A6D, #4A4A6D);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4A4A6D),color-stop(1, #4A4A6D));
    background: -webkit-linear-gradient(#4A4A6D, #4A4A6D);    
    background: -o-linear-gradient(#4A4A6D, #4A4A6D);	
    background: -ms-linear-gradient(#4A4A6D, #4A4A6D);	
    background: linear-gradient(#444, #4A4A6D);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul ul
{
  top: 0;
  left: 150px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a
{    
    padding: 10px;
	height: 10px;
	width: 135px; 
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
}

*html #menu ul a /* IE6 */
{    
	height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{    
	height: 10px;
}

#menu ul a:hover
{
    background: #82828E; 
	background: -moz-linear-gradient(#A9A9B1, #777);	
	background: -webkit-gradient(linear, left top, left bottom, from(#A9A9B1), to(#82828E));
	background: -webkit-linear-gradient(#A9A9B1, #82828E);
	background: -o-linear-gradient(#A9A9B1, #82828E);
	background: -ms-linear-gradient(#A9A9B1, #82828E);
	background: linear-gradient(#A9A9B1, #82828E);
}



#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{ //seta para cima
    border-bottom-color: #82828E; 
}

#menu ul ul li:first-child a:hover:after
{ //seta para esquerda
    border-right-color: #04ACEC; 
    border-bottom-color: transparent; 	
}


#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

h1 { /* para título principal */
   color: #99CC00;
   font-family: arial;
   font-size: 25px;
 }
h1.Geral { 
   color: #838875;
   font-family: arial, verdana;
   font-size: 24px;
   margin-bottom: 0; /*o margim top deixa padrão, mas o bottom muda para o caso de se querer colocar um texto logo após, como é no caso da pg de lista de revendas. */
 }
h1.geralMenor { 
   color: #838875;
   font-family: arial, verdana;
   font-size: 16px;
   margin-bottom: 0; /*o margim top deixa padrão, mas o bottom muda para o caso de se querer colocar um texto logo após, como é no caso da pg de lista de revendas. */
 }
 
#containerGeral {
	background-color:#CBCAD2;
	border-radius: 10px;
	width: 85%;
	margin-top: 5px;
	text-align: center; /* isto vai alinhar os elementos dentro da div, mas não mexe no texto do parágrafo, pois este será alinhado em justify pelo p.textos */
	
	left: 50%; position: absolute; transform: translateX(-50%); /* isto é para centralizar div.*/ 
	}

 
p.Geral {
  font-family: Verdana, arial;
  text-indent: 45px;
  line-height: 150%;
  text-align: justify;
  color : #000666; /* cor da fonte */
  font-size: 13;
  padding-left: 20px;
  padding-right: 20px;
 }
p.GeralToLI {
  font-family: Verdana, arial;
  text-align: justify;
  color : #000666; /* cor da fonte */
  font-size: 15;
  padding-right: 20px;
 }
p.GeralNoMargin {
  font-family: Verdana, arial;
  text-align: justify;
  color : #000666; /* cor da fonte */
  font-size: 15;
  padding-right: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
 }
 
h2.Geral { 
   color: #660033;
   font-family: arial, verdana;
   font-size: 16px;
   text-decoration: underline;
   text-align: left;
   padding-left: 20px;
 }

h2.fonteAmarela { 
   color: #FFFF00;
   font-family: arial, verdana;
   font-size: 20px;
   text-decoration: none;
   text-align: left;
   padding-left: 20px;
 }
 
 
h2.fontRoxa {
font-family: 'ITCOfficinaSerifBold';
    font-size: 19px;
    margin: 10px 20px 13px 0 !important;
    padding: 0 !important;

    color: #8E44B4;
    } 
 
p.fonteMenor {
  font-family: calibri;
  line-height: 100%;
  text-align: justify;
  color : #121212; /* cor da fonte */
  font-size: 16px;
  padding-left: 0px;
  padding-right: 20px;
  margin-top: 0; 
  margin-bottom: 0;
 }

ul.inside {
    list-style-position: inside;
}

table.fundoAzul {
    border-radius: 10px;
    background: #5E8DDC;
    border: 0px;
    width: 65%;
    margin: 0 auto; /* centraliza */
}

table.fundoVerm {
    border-radius: 10px;
    background: #DD5044;
    border: 0px;
    width: 65%;
    margin: 0 auto; /* centraliza */
}

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #008080;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}

/*as bordas abaixo é para qdo não quiser fazer as 4 bordas todas. Só 1, 2 ou 4. Dá para usar em tables, tds, etc.*/
.borderTop {border-color:   #808080; border-top-style: solid; border-top-width: 1px;}
.borderLeft {border-color:   #808080; border-left-style: solid; border-left-width: 1px;}
.borderBot {border-color:   #808080; border-bottom-style: solid; border-bottom-width: 1px;}  
.borderRight {border-color:   #808080; border-right-style: solid; border-right-width: 1px;}  
.borderBotRight {border-color:   #808080; 
                 border-bottom-style: solid; border-bottom-width: 1px;
				 border-right-style: solid; border-right-width: 1px;} 
.borderLeftBot {border-color:   #808080; 
 				border-left-style: solid; border-left-width: 1px;
    			border-bottom-style: solid; border-bottom-width: 1px;}  
.borderLefRight {border-color:   #808080; 
				 border-left-style: solid; border-left-width: 1px;
    			 border-right-style: solid; border-right-width: 1px;}
.borderLeftTop {border-color:   #808080; 
				border-left-style: solid; border-left-width: 1px;
    			border-top-style: solid; border-top-width: 1px;}      
.borderTopBot {border-color:   #808080; 
			   border-top-style: solid; border-top-width: 1px;
			   border-bottom-style: solid; border-bottom-width: 1px;}      			  
.borderTopRight {border-color:   #808080; 
				 border-top-style: solid; border-top-width: 1px;
				 border-right-style: solid; border-right-width: 1px;}      
.borderLeftRight {border-color:   #808080; 
				  border-left-style: solid; border-left-width: 1px;
    		      border-right-style: solid; border-right-width: 1px;}
.borderTopLeftBot {border-color:   #808080; 
				   border-top-style: solid; border-top-width: 1px;
				   border-left-style: solid; border-left-width: 1px;
    		       border-bottom-style: solid; border-bottom-width: 1px;}
.borderTopBotRight {border-color:   #808080;
					border-top-style: solid; border-top-width: 1px;
      		        border-bottom-style: solid; border-bottom-width: 1px;
    		        border-right-style: solid; border-right-width: 1px;}
.borderAll {border-color:   #808080; 
			border-top-style: solid; border-top-width: 1px;
		    border-left-style: solid; border-left-width: 1px;
            border-bottom-style: solid; border-bottom-width: 1px;
            border-right-style: solid; border-right-width: 1px;}
        
.seta:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  margin-right: 6px;
  width: 0; 
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent; 
  }
.setaLeft:before {border-right: 5px solid #003366;}
.setaRigth:before {border-left: 5px solid #003366;}
.setaUp:before {border-bottom: 5px solid #003366;}
.setaDown:before {border-right: 5ptopx solid #003366;
}


.trToTitGrid 
{
 background-color: #003366;
 font-family: verdana;
 font-size: 13px;
 color: #FFFF99;
}
.trToTitGrid td {
 text-align: center; 
}

.trToGrid 
{
 font-family: arial, verdana;
 font-size: 12px; //nsp, mas sem definir o tamanho da fonte, o heigth o td fica maior que o normal qdo tem link de css do bootstap na pg. com esta classe, resolve.
}
.trToGrid td {
 height:20px;
 vertical-align: center; 
}


</style>