Change the.css template css for this one:
body {
padding: 0px;
margin: 0px;
width: 100%;
background: #f9f9f9; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
}
body > center > span > a{display: none;}
a {
text-decoration: none;
}
/* -- -- TOPO -- -- */
.faixaVerde {
background-color: #00052b;
width: 100%;
}
.faixaVerde .conteudo {
width: 1000px;
padding: 20px 0px 20px 0px;
height: 110px;
}
.faixaVerde .logo {
float: left;
width: 300px;
}
.faixaVerde .nomeTopo {
float: right;
color: #FFF;
font-family: 'Roboto', sans-serif;
letter-spacing: -1px;
height: 100%;
font-weight: bold;
}
.faixaVerde .nomeTopo .instituicao{
float: right;
font-size: 26px;
line-height: 30px;
}
.faixaVerde .nomeTopo .cidade{
width: 100%;
text-align: right;
float: right;
font-size: 45px;
line-height: 45px;
letter-spacing: -2px;
}
.faixaAmarela{
background-color: #ffeb00;
width: 100%;
position: relative;
min-height: 20px;
}
.faixaCinza {
position: relative;
z-index: 999;
/* height: 120px; */
width: 100%;
background: #1a7ed4; /* Old browsers */
/* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); */
background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
/* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); */ /* Chrome,Safari4+ */
/* background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); */ /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
/* background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
/* display: table; */
margin-bottom: -200px;
}
/* -- -- -- -- */
body .conteudo {
width: 980px;
position: relative;
z-index: 1001;
}
/* -- -- MENU -- -- */
.menu {
width: 100%;
height: 180px;
text-align: center;
margin: -60px 0px 50px 0px;
text-align: center;
position: relative;
z-index: 1;
display: none;
}
.menu .caixa {
display: inline-block;
padding: 5px;
cursor: pointer;
}
.menu .caixa .bolha {
width: 70px;
height: 70px;
padding: 15px;
border: solid 1px #CCC;
border-radius: 50%;
background: #f9f9f9; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
-moz-box-shadow: 0px 0px 40px #CCC;
-webkit-box-shadow: 0px 0px 40px #CCC;
box-shadow: 0px 0px 40px #CCC;
}
.menu .caixa:hover .bolha{
-moz-box-shadow: 0px 0px 50px #bcbcbc;
-webkit-box-shadow: 0px 0px 50px #bcbcbc;
box-shadow: 0px 0px 50px #bcbcbc;
}
.menu .caixa #verde {
background: #008291; /* Old browsers */
background: -moz-linear-gradient(top, #008291 0%, #00555e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008291), color-stop(100%,#00555e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #008291 0%,#00555e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #008291 0%,#00555e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #008291 0%,#00555e 100%); /* IE10+ */
background: linear-gradient(to bottom, #008291 0%,#00555e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008291', endColorstr='#00555e',GradientType=0 ); /* IE6-9 */
}
.menu .caixa .bolha img {
width: 50px;
}
.menu .caixa span {
color: #4D4D4D;
font-family: 'Oswald', sans-serif;
letter-spacing: -1px;
font-size: 20px;
}
.menu .caixa:hover span{
text-shadow:0px 0px 20px #CCC;
}
/* -- -- */
.conteudo .caixaTexto {
width: 80%;
color: #4D4D4D;
text-align: justify;
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 18px;
}
h3 {
color: #4D4D4D;
font-family: 'Roboto', sans-serif;
letter-spacing: -1px;
font-size: 25px;
text-align: left;
}
.filtro {
font-family: Arial, sans-serif;
border: solid 1px #bcbcbc;
background-color: #fff;
padding: 10px;
text-align: left;
margin-bottom: -1px;
margin-top: 100px;
}
.filtro select {
padding: 5px;
}
table {
width: 100%;
border: solid 1px #ccc;
background-color: #fff;
font-family: 'Roboto', sans-serif;
line-height: 18px;
text-align: center;
font-weight: bolder;
color: #505050;
}
table thead tr {
background: #f9f9f9; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
}
table thead th {
font-weight: bold;
border: solid 1px #ccc;
padding: 5px;
}
table tbody td {
border: solid 1px #ccc;
padding: 5px 30px;
}
.even {background: #BEE8ED;}
.even:hover {background: #A3DAE0;}
.odd {background: #F9F9F9;}
.odd:hover {background: #E9E9E9;}
tbody tr:nth-child(even) {background: #f1f1f1;}
tbody tr:nth-child(even):hover {background: #e0e0e0;}
tbody tr:nth-child(odd) {background: #ffffff;}
tbody tr:nth-child(odd):hover {background: #feffef;}
.paginacao {
border: solid 1px #bcbcbc;
background-color: #fff;
padding: 10px;
text-align: left;
margin-top: -1px;
}
.paginacao span {
font-family: Arial, sans-serif;
font-size: 18px;
color: #4D4D4D;
padding: 5px;
margin: 5px 2px 5px 0px;
cursor: pointer;
border: solid 1px #e6e6e6;
background: #f9f9f9; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
}
.download{float:right;width: 290px;background:#fff;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-transition:transform 500ms ease;-moz-transition:transform 500ms ease;transition:transform 500ms ease;font: bold 16px 'Roboto';} .download > span{width: 130px;padding:20px 10px 0 10px;text-align:center;float:right;} .download span > span{display:block;line-height:130%;font-size:1.1em;color:#666;font-weight: bold;} .download .btn{margin:5px 0 0 0;color:#fff;background: #dc4642;padding: 8px;border-radius: 5px;} .download .icon-pdf{width:120px;height:120px;background:#ecf0f1;-webkit-border-radius:10px 0 0 10px;-moz-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;padding:10px;float:left} .download:hover{-webkit-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);-moz-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);-o-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);-ms-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg)}
If you remove only the element z-index: -1;
of .faixaCinza
it will override the div .conteudo
. I adjusted this css to make it right.
The problem is that the
div class conteudo
somehow this superimposing your image– MarceloBoni
In.css template, in row 70, in class
.faixaCinza
remove theposition: relative;
– MarceloBoni
It seems that the class
.faixaCinza
is with the negative z-index, this is breaking. If you take the z-index, it already works.– Ikaro Pinheiro
@Marceloboni makes an answer that I will give as correct =)
– Alexandre Lopes
@Ikaropinheiro thanks for the help, but if I remove only the z-index, it overrides the table. =)
– Alexandre Lopes
If the lower ones solve the problem, you can vote for one of them :) remove the
position:relative
can break your page depending on the size of the screen, the ideal would be to look for another solution.– MarceloBoni
So Marcelo, worse than the answers make the blue bar overlap the table, I want it to be behind the table, only that the link works, I did what you said and worked super well, =D
– Alexandre Lopes
Are you sure this should be the expected behavior? https://i.stack.Imgur.com/Alenr.gif
– MarceloBoni
Yes @Marceloboni =D, I already updated, look there. How do you make this GIF?
– Alexandre Lopes
@Marceloboni I put . content with
z-index:2;
and faixaCinza withz-index:1;
– Alexandre Lopes
I use a program called Licecap
– MarceloBoni