/*
 Este arquivo foi testado para funcionar com o componente
 TWebNavegator do Delphi com Windows 10    
 Atualizado em: 2023-08-15
 Fonte:  https://github.com/aldosena/cssdelphi;
*/

html, body{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #C9C9C9;
	font-size: 14px;
	margin-left: 10px;
	margin-top: 0px;
	height: 100%;
}

/* tags personalizadas */
h1 {color: #78909c }
h2 {color: #607d8b }
h3 {color: #546e7a }
h4 {color: #455a64 }
h5 {color: #37474f }
h6 {color: #263238 }
em {color: green }

/* para a chamada presente e falta */
.F {color: #FF00FF}
.P {color: #006600}


/* para colocar os botões(.png) na janela principal lado a lado */
.myBt {
  float: left; 
  width: 200px;
  text-align: center;
  padding: 10px;
} 

/* -- div q sempres fica oculta por padrão -------------------- */
.divNinja{
            display: none;
}

/* -- aviso div especial --------------------------------------- */
.aviso {
	border-left: 4px solid orange;
	background-color: #ffffe8;
	margin: 20px 200px 20px 100px;
	padding: 5px 5px 5px 10px; 	
 }
 .aviso p {
   color: Tomato;
   padding: 5px 5px 5px 100px;
 }

 .aviso img {
	/* margin-left: 8px; */
	padding-left: 8px;
}
/* --------fim aviso --------------------------------------- --*/

/* -- feliz ------------------------------------------------ */
.feliz {
   border-left: 6px solid #00c853;
   background-color: #f9fbe7;
	 margin: 20px 200px 20px 100px;
	 padding: 5px 5px 5px 5px;
}
.feliz p {
  color: green;
}
/* -- fim feliz --------------------------------------------- */

/* -- triste ----------------------------------------------- */
.triste {
   border-left: 6px solid red;
   background-color: #ffe5ed;
	 margin: 20px 200px 20px 100px;
	 padding: 5px 5px 5px 5px;
}
.triste p {
  color: Tomato;
}
/* -- fim triste   ---------------------------------------- */ 

/* -- pesquisa (usado na linha de pesquia de nome de aluno  ----------------------------------------------- */
.pesquisa {
   background-color: siver;
	 margin: 5px 5px 5px 5px;
	 padding: 5px 5px 5px 5px;
}
/* -- fim pesquisa   ---------------------------------------- */ 

/* -- texto de título ------------------------------------- */
.titulo{
            color: #4527a0;   
}

/* -- uma dica na tela (antigo aviso)  ------ */
.tip{
	color: green;
}

/* div geral só para destacar */
.divSimple{
	border-style: solid;
	border-width: 2px;
	border-color:green;
	margin: 20px;
	padding: 20px;
}	

/* imagens ficam sem bordas */
img {
	border: 0px;
}

/* -- quebra de pagína na hora de imprimir - - - - - - -  */
.xquebra{
      page-break-after: always;
}

/* para funcionar, crie uma div: echo "<div class='xquebra'> </div> <!-- quebra de pagina -->"; */

/* links padrao  --------------------------------------- */
a:link {color: #0000FF; text-decoration: none}
a:visited {color: #0000FF; text-decoration: none}
a:hover{color: #FF00FF; text-decoration: none}
a:active {color: #0000FF; text-decoration: none}  

/* tabela com efeito no mouse forma da chamar: ------------ */
table.zi {
  border-spacing: 8px;
}
table.zi tr {
	background-color: #F0F0F0;
}
table.zi tr:hover {
	background-color: #CCCCCC;
}
table.zi td {
	padding: 4px;
}
/* fim tabela <table class="zi"> -------------------------- */

/* tabela azul ------------------------------------------------------ */
table.blue {
	border-collapse: collapse;
	width: 100%;
}
  
table.blue th, td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #DDD;
} 
table.blue tr:hover {background-color: #D6EEEE;}
/* fim azul ------------------------------------------------------ */


/* tabela slim com bordas simples -------------------------------*/
table.slim {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 8px;
}
table.slim th {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 8px;
}
table.slim tr {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 8px;
}
table.slim td {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 8px;
}
/* fim slim --------------------------------------------------------- --*/

/* CABEÇALHO ---------------------------------- - header */
.header {
	background-color: #999999;
	padding: 4px;
}

/* div geral que pega todo so corpo */
.big {
	padding: 10px;
	overflow:auto;
}  

#rodape {
	background-color: #D7D7FF;
	position: absolute;
	bottom: 0;
	padding:10px;
	margin-top:7px;
}
  
/* MENU SUPERIOR - navigation bar ----------------------------------- */
.topnav {
	overflow: hidden;
	background-color: #333;
  }
  
  /* Style the topnav links */
  .topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
  }
  
  /* Change color on hover */
  .topnav a:hover {
	background-color: #ddd;
	color: black;
  }
/*  fim do menu top ------------------------------------------------ */


/*  MENU LATERAL ------------------------------------------------- */
.menu {
	float:left;
	width:20%;
	text-align:center;
	overflow: hidden; /* aldo */
  }
  .menu a {
	background-color:#dddddd;
	padding:8px;
	margin-top:7px;
	display:block;
	width:100%;
	color:rgb(25, 0, 252);
  }
  .menu a:hover {
	color: rgb(252, 4, 252);
  }  
  /* fim do menu lateral  ------------------------------------ */
  
  .main {
	/* use quando houver menu lateral  */  
	float:left;
	width:70%;
	padding:0 20px;
  }
  .right {
	background-color:#e5e5e5;
	float:left;
	width:20%;
	padding:15px;
	margin-top:7px;
	text-align:center;
  }


/* -- forms ----------------------------------------------- */

/* -- fim forms ---------------------------------------- */

/* quandro de avisos ----------------------------------- */
div.quadroaviso{
  border: 2px solid blue;
  border-radius: 12px;
  padding: 10px;
}

.xote {color: red}
.blood {color: red}
.sky {color: blue} 
.tree {color: green}

@media only screen and (max-width:620px) {
	/* For mobile phones: */
	.menu, .main, .right {
	  width:100%;
	}
}