/*
* @Project ASSESP
* @author  FABIANO KUERTEN <fabiano@3fk.com.br>
*/

header {height: 130px; box-shadow: inset 0px 25px 0 #222222, inset 0px 26px 0 #ffffff, 0px 1px 1px #aaaaaa; }
article { font: normal normal normal 14px Arial, sans-serif; letter-spacing: 1.2px; color: #555555;}
article h1 { width: 100%; margin-bottom: 30px; border-bottom: dotted 1px #999999; font: normal normal normal 20px "Times New Roman", Times, serif; color: #cc0000; }
article h2 { margin: 30px 0; font: normal normal bolder 18px "Arial", sans-serif; color: #cc0000; }
article h3 { margin: 30px 0; font: normal normal bolder 18px "Arial", sans-serif; color: #000000; }
article p { margin: 20px 0; line-height: 1.2; word-spacing: 3px; }
article a { text-decoration: none; font-style: italic; font-weight: 600; color: #354b62; }
article a:hover { text-decoration: underline; }
article ul { margin-left: 20px; }
article ul li { margin: 15px 0; list-style-type: disc; line-height: 1.2; }
article ol { margin-left: 20px; }
article ol li { margin: 10px 0; list-style-type: decimal; line-height: 1.2; }
article table { margin: 30px 0; width: 100%; font: normal normal normal 12px "Times New Roman", Times, serif; }
article caption { margin: 15px 0; font-size: 12px; font-weight: 900; text-align: center; color: #cc0000; }
article th { border-bottom: 1px solid #666666; font-size: 12px; font-weight: 900; color: #000000; }
article td { padding: 10px 5px; border: 2px solid #ffffff; text-align: left; background-color: #dddddd; color: #000000; }
article form { margin: 50px 0;}
article form fieldset { background-color: #ffffff; margin-bottom: 15px; padding: 20px 20px; border: 1px solid #999999;  }
article form legend { padding: 3px 20px; background: #e5e5e5; color: #333333; }
article form label { float: left; margin: 15px 8px 0px 0px; }
article label span { font-style: italic; font-size: 0.8em; }
article input { display: block; padding: 5px; height: 30px; border: solid 1px #666666; transition: box-shadow 0.3s, border 0.3s; }
article input[type=checkbox] { width: 20px; }
article input:required, article select:required, article textarea:required { background-color: #eeeeee; }
article textarea{ display: block; resize: none; padding: 5px; border: solid 1px #666666; transition: box-shadow 0.3s, border 0.3s; }
article select { display: block; padding: 4px; height: 30px; border: solid 1px #666666; transition: box-shadow 0.3s, border 0.3s; }
article button { padding: 5px 14px; height: 30px; border: 2px solid #333333; font-size: 14px; text-align: center; text-decoration: none; background-color: #333333; color: #ffffff;  transition-duration: 0.4s; cursor: pointer; }
article button:hover { background-color: #555555; color: #ffffff; }
aside img { width: 100%;}
.grid { display: grid; grid-template-columns: 100%; grid-auto-rows: auto; justify-content: stretch; }
.box { margin-bottom: 30px; border: 10px solid #ffffff; box-shadow: 0px 2px 2px #999999; }
.box div { margin: 10px; padding: 10px; border: 1px solid #ffffff; }
.box div h2 { width: 100%; font: bolder normal normal 16px "Times New Roman", Times, serif; letter-spacing: 2px;  color: #ffffff; }
.box div p { margin-top: 10px; font: bolder italic normal 12px "Times New Roman", Times, serif; letter-spacing: 1px; color: #ffffff; }
.box div a { text-decoration: none; color: #ffffff; }
.box div a:hover { text-decoration: underline; }
.box div a:visited { text-decoration: none; }
.box ul {margin: 10px 0 }
.box li { float: none; width: 100%; margin-left: 10px; list-style:"\21E8"; color: #ffffff; }
.box li a { display: block; padding: 5px; font-size: 12px; text-decoration: none; }
.box li a:hover { background-color: #ffffff; text-decoration: none; color: #354b62; }
.box-azul { background-color: #354b62; }
.box-vermelho { background-color: #cc0000; }
#path { margin-bottom: 40px; height: 20px; background-color: #ffffff; box-shadow: 0px 1px 1px #aaaaaa; }
#path p { padding-top: 5px; font: normal normal normal 10px Arial, sans-serif; line-height: 10px; color: #333333; }
#path a { text-decoration: none; color: #333333; }
#path a:hover { text-decoration: underline; }
.banner { width: 100%; padding: 0px 0px 20px 0; }
.banner img { width: 100%; }

@media only screen and (min-width: 320px) {

}

@media only screen and (min-width: 481px) {

}

@media only screen and (min-width: 768px) {
.grid { grid-template-columns: auto 200px; grid-gap: 10px; }
}

@media only screen and (min-width: 1025px) {
.grid { padding: 0px 30px; grid-template-columns: auto 250px; }
}
@media only screen and (min-width: 1300px) {
.grid { padding: 0px 50px; grid-gap: 30px; grid-template-columns: auto 300px; }
.grid article { font-size: 16px; }
}