/* Reset global */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, acronym, address, big, cite, code,
dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, fieldset, form, label, legend, caption, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
text-decoration:none;
}
html{
height:100%;
}
a{display:inline-block;}
em{
font-style:italic;
}
dl{
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px solid rgba(0,0,0, 0.1);
}
dt{
color:#666;
}
dd{
margin-left:30px !important;
margin-top:5px;
margin-bottom:10px;
color:#666;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
input[type="search"],
[type="text"],
[type="submit"],
[type="email"],
[type="file"],
[type="url"],
[type="date"]{
font-family: "Times New Roman",Arial,Tahoma !important;
font-size: 1.2em;
outline:none;
}
select{
font-family: "Times New Roman",Arial,Tahoma !important;
font-size: 1.2em;
outline:none;
}
.required{
height:auto;
height:100%;
}
textarea{
font-family: "Times New Roman",Arial,Tahoma !important;
font-size: 1.2em;
outline:none;
}
body{
height: 100%;
font-size:12px !important;
font-family: "Times New Roman",Arial,Tahoma !important;
background:#F7F7F7;
background:-moz-linear-gradient(#F1F1F1, #CCC);
background:-webkit-linear-gradient(#F1F1F1, #CCC);
background:-o-linear-gradient(#F1F1F1, #CCC);
background:-ms-linear-gradient(#F1F1F1, #CCC);
background:linear-gradient(#F1F1F1, #CCC);
}
.buttongroup{
overflow:hidden;
padding:5px 0;
}
.button:first-child{margin-left:0;}
.button{
padding:12px;
background:#EEE;
color:#666;
float:left;
font-size:14px;
margin-left:15px;
border-radius:5px;
margin-top:10px;
box-shadow:0 2px 0 #CCC;
}
.button img{
float:left;
margin-right:10px;
}
.button span{
float:left;
line-height:30px;
}
.button:hover{
background:#F2F2F2;
box-shadow:0 2px 0 #DDD;
}
.button:active{
background:#F2F2F2;
margin-bottom:2px;
box-shadow:0 1px 0 #DDD;
}
#content{
display:flex;
}
#informacoes{
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex:1;
border-left:1px solid rgba(0,0,0, 0.2);
}
#informacoes > article{
padding-left:20px;
font-size:13px !important;
}
#informacoes > article > h1{
font-size:20px !important;
}
/* requerimento */
#requerimento{
width:60%;
padding:10px;
margin:20% auto;
}
#requerimento span{text-align:center;display:block;font-size:1.2em;}
#requerimento label{
display:block;
margin-bottom:10px;
}
#requerimento label span{
display:block;
text-align:left;
font-size:1.2em;
}
#requerimento label input[type="text"]{
padding:9px;
width:95%;
border:1px solid #AAA;
border-radius:4px;
}
#requerimento label select{
padding:9px;
width:97%;
border:1px solid #AAA;
border-radius:4px;
}
#requerimento label input[type="text"]:focus{
box-shadow:0 2px 15px rgba(0,0,0, 0.1);
}
/* queries */
@media screen and (max-width: 600px) {
/* requerimento */
#requerimento{
width:80%;
padding:10px;
margin:20% auto;
}
.button{
width:100%;
margin-left:0;
}
.grid{margin-bottom:10px;}
.grid_1:last-child{border-left:0 !important;}
.grid_1{clear:left;padding: 10px;width:100% !important;border-right: 1px solid #999;}
.grid_2:last-child{border-left:0 !important;}
.grid_2{clear:left;padding: 10px;width:100% !important;border-right: 1px solid #999;}
.grid_3_1{clear:left;width:100%;}
.grid_3{clear:right;padding-left:10px;width:100% !important;;}
.grid_4_1{clear:left;width:100% !important;}
.grid_4{clear:left;width:100% !important;}
.grid_5_1{clear:left;width:100% !important;}
.grid_5{clear:left;width:100% !important;}
}
@media screen and (max-width: 400px) {
/* requerimento */
#requerimento{
width:80%;
padding:10px;
margin:20% auto;
}
.button{
width:100%;
margin-left:0;
}
}
@media screen and (max-width: 240px) {
/* requerimento */
#requerimento{
width:100%;
padding:10px;
margin:20% auto;
}
#header h2{display:none;}
#main > #header #logo{
float:none !important;
text-align:center;
}
.button{width:100%;
margin-left:0;
}
}
@media screen and (max-height:600px){
.required{ height:auto !important;;}
#requerimento{
margin-top:15%;
}
}
@media screen and (max-height:700px){
.required{height:auto !important;;}
#requerimento{
margin-top:15%;
}
}
@media screen and (max-height:800px){
.required{height:auto;}
#requerimento{
margin-top:10%;
}
}
@media screen and (max-height:900px){
.required{height:auto;}
#requerimento{
margin-top:5%;
}
}
@media screen and (max-height:190px){
.required{height:auto;}
html{
height:auto;
}
#requerimento{
margin-top:5%;
}
}
/*
main
*/
#main{
width:940px;
max-width:95%;
height: 100%;
padding:10px;
margin:0 auto;
background:rgba(255,255,255, 10); /* Para deixar transparente altere o valor 10 que de (0.1) a (0.9) */
box-shadow:0 0 45px rgba(0,0,0, 0.1);
position:relative;
}
#main > #header{
padding:10px;
overflow:hidden;
}
#main > #header #logo{
float:left;
margin-right:15px;
}
#main > #header h2{
font-size:1.3em;
}
.grid_1_1{border:0 !important}
.grid_1_1 > .tooltip{
clear:left;
}
.grid_1_1 > .tooltip:first-child{
margin-left:10px;
}
.grid_1_1 > .tooltip:last-child{
margin-left:10px;
}
#box_grid > .tooltip{
float:left;
}
#box_grid > .tooltip:first-child{margin-left:10px;}
#box_grid > .tooltip{margin-right:0;}
.clear{clear:both;}
#nota{
padding:10px;
width:97.555%;
width:calc(100% - 20px);
height:180px;
border:0;
background:url("line.png");
}
/*
Classes de Grelhas
Altere estas configurações para mudar as grids
*/
#boxGrid {overflow:hidden;margin-bottom:15px;}
#boxGrid > .grid_1{border:1px solid #999;}
.grid{margin-bottom:10px;}
.grid_1:last-child{border-left:0 !important;}
.grid_1{float: left;padding: 10px;width: 49.999%;border-right: 1px solid #999;}
.grid_2:last-child{border-left:0 !important;}
.grid_2{float: left;padding: 10px;width:33.333%;border-right: 1px solid #999;}
.grid_3_1{float:left;width:64.999%;}
.grid_3{float:right;padding-left:10px;width:34.999%;}
.grid_4_1{float:left;width:30%;}
.grid_4{float:left;width:39.999%;}
.grid_5_1{float:left;width:45%;}
.grid_5{float:left;width:54.999%;}
/* values */
#values{
font-size:1.3em;
line-height:20px;
border-bottom:1px solid #999;
margin-bottom:5px;
}
.label-value{
font-weight:bold;
margin-right:10px;
padding-bottom:1px;
padding-right:5px;
background:#FFF;
text-transform:uppercase;
float:left;
}
/* titles */
.h1{font-size:1.5em;font-weight:bolder;}
.h2{font-size:1.3em;font-weight:bolder;}
.h3{font-size:1.2em;font-weight:bolder;}
.h4{font-size:1.1em;font-weight:bolder;}
.h5{font-size:1.0em;font-weight:bolder;}
.h6{font-size:0.988em;font-weight:bolder;}
/* class uppercase */
.Touppercase{text-transform:uppercase;}
/* class center */
.center{text-align:center;}
/* classes bordas e paddings */
.borderZero{border:0;}
.border{border-right:1px solid #999;}
.borderRight{border-right:1px solid #999;}
.borderLeft{border-left:1px solid #999;}
.borderTop{border-top:1px solid #999;}
.borderBottom{border-bottom:1px solid #999;}
.padding{padding:10px;}
.paddingRight{padding-right:10px;}
.paddingLeft{padding-left:10px;}
.paddingTop{padding-top:10px;}
.paddingBottom{padding-bottom:15px;}
/* protocol */
.protocol{
font-weight:normal;
text-decoration:underline;
}
/*
Quando ocorrer em uma tabela
ele tera a seguinte formatação
*/
table tr th .tooltip{
float:left;
position:relative;
margin:10px 0 10px 0;
margin-left:0 !important;
}
#box_nofloat {width:100%;padding-left:10px;}
/* tooltip */
.tooltip{
float:left;
position:relative;
margin:10px 0 10px 0;
}
.tooltip{
margin-left:10px;
}
.tooltip span{
font-size:1.2em;
}
table.tooltip{
margin-left:10px;
}
.tooltip{
margin-left:10px;
margin-right:10px;
}
.tooltip:hover #dialog{
display:block !important;
}
.tooltip:first-child{
margin-left:0;
}
.tooltip:last-child{
margin-left:0;
}
/* balão de dialogo */
#dialog{
background:rgba(0,0,0, 0.9);
padding:10px;
color:#FFF;
z-index:9999;
position:absolute;
bottom:30px;
display:none;
border-radius:4px;
box-shadow:0 0 20px rgba(0,0,0, 0.4);
width:115px;
}
#dialog:before{
content:"";
border-style:solid;
border-color:transparent rgba(0,0,0, 0.9) transparent transparent ;
border-width:12px 12px 0 12px;
width:0;
height:0;
position:absolute;
bottom:-2px;
left:20%;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
#button{text-align:center;
margin-bottom:10px;
}
#button > .btn{
padding:8px 15px;
border:1px solid #CCC;
font-size:1.3em;
cursor:pointer;
border-radius:4px;
color:#333;
text-shadow:0 1px 0 #FFF;
box-shadow:0 1px 0 #FFF inset,0 -1px 0 #FFF inset;
background:#F2F2F2;
background:-moz-linear-gradient(#F2F2F2, #CCC);
background:-webkit-linear-gradient(#F2F2F2, #CCC);
background:-o-linear-gradient(#F2F2F2, #CCC);
background:-ms-linear-gradient(#F2F2F2, #CCC);
background:linear-gradient(#F2F2F2, #CCC);
-moz-transition:opacity 0.2s 0.2s linear;
-webkit-transition:opacity 0.2s 0.2s linear;
-o-transition:opacity 0.2s 0.2s linear;
-ms-transition:opacity 0.2s 0.2s linear;
transition:opacity 0.2s 0.2s linear;
}
#button > .btn:hover{
opacity:0.9;
background:#F2F2F2;
box-shadow:0 -1px 0 #FFF inset, 0 1px 0 #FFF inset;
background:-moz-linear-gradient(#CCC, #F2F2F2);
background:-webkit-linear-gradient(#CCC, #F2F2F2);
background:-o-linear-gradient(#CCC, #F2F2F2);
background:-ms-linear-gradient(#CCC, #F2F2F2);
background:linear-gradient(#CCC, #F2F2F2);
}
.tableResult{
width:100%;
margin-top:15%;
border-spacing:3px;
border-collapse:inherit;
font-size:1.1em;
border-radius:4px;
}
.tableResult thead tr th{
padding:10px;
background:#CCC;
text-align:left;
color:#333;
font-weight:bold;
}
.tableResult tbody tr td{
padding:10px;
background:#F4F4F4;
border-bottom:1px solid #DDD;
color:#333;
}
.tableResult tbody tr td a{
text-decoration:underline;
color:#00BFFF;
}
.tableResult caption{
text-align:left;
font-size:1.4em !important;
padding:5px;
}
/* footer */
#footer{
}