Mudança da fonte dos grupos no CSS

Olá!

Já faz algum tempo que estou tentando mudar a fonte dos grupos do meu fórum, mas o CSS está aceitando somente Amatic SC, Georgia e Wire One, e eu gostaria de testar outras fontes. Já tentei várias vezes fazer a mudança e não está dando certo. Realmente, não sei o que estou fazendo de errado, então se alguém aqui puder me dar uma ajuda, agradeço. Não sei se adianta, mas estou mandando uma parte do CSS, só para conferir como estão as fontes atualmente.

Olá!

Veja aqui mais fontes que poderá usar:

http://www.htmlprogressivo.net/2014/02/Fontes-CSS-Propriedade-font-family-Tutorial.html

Cumprimentos.
Fraise

Oi, Fraise!

Então... O problema não é a escolha da fonte, já tentei várias. Acontece que toda vez que troco a fonte o CSS permanece com as fontes que mostrei no print, ou seja, o código anterior permanece o mesmo, não importando a fonte que eu coloque. É como se nenhuma modificação tivesse sido feita.

Olá!

Ah. Então basicamente você quer mudar a fonte da legenda do fórum?

Cumprimentos.
Fraise

Isso! O problema é que o código do CSS não está alterando a fonte antiga para uma nova.

Olá!

Tente assim:

Código:

#main-content p em b .gensmall, #main-content p em b, a.gensmall {
font-family: 'Wire One'!important;
}

Cumprimentos.
Fraise

Olá!

Além do código do @Fraise provavelmente funcionar, é recomendável usar este para navegadores/dispositivos que não suportam essa fonte:

Código:

#main-content p em b .gensmall, #main-content p em b, a.gensmall {
font-family: 'Wire One', sans-serif !important;
}

Atenciosamente.

Obrigada, Fraise e Raffy. Vou testar os códigos que me passaram e volto a responder para dizer se deu certo, ok?

Olá!

Ficaremos então no aguardo de uma resposta da sua parte.

Cumprimentos.
Fraise

Bom, eu testei o código, mas ainda não está dando certo.

Olá!

Pois bem, teremos de inspecionar melhor seu fórum
Indique-nos por favor o endereço de seu fórum e caso esteja em manutenção, por favor retire-o.

Atenciosamente.

O fórum está em construção, mas abri para a inspeção.

Link: http://draculacursedgenesis.forumeiros.com/

Olá!

Afinal o código funcionou pois aqui está normal, veja:



Atenciosamente.

Não, Raffy. Esse código com a legenda em Wire One é o antigo. Estou tentando mudar essa fonte para uma em estilo gothic, só que toda vez que troco a fonte ela volta para Wire One, exatamente como o teu print está mostrando.

Olá!

Eu pensei que a senhora queria aplicar essa mesma fonte.
Nesse caso, irei precisar de sua folha de estilos (CSS) para remover os códigos antigos relacionados com a fonte da legenda, para poder adicionar os novos sem problemas.

Se quiser pode também dizer qual é a fonte que deseja, que eu modifico imediatamente.

Atenciosamente.

Olá!

Peço desculpas pela demora para responder, tive problemas com a net esses dias, mas agora está tudo bem.

Aqui está o código do CSS, Raffy. Quanto a nova fonte, veja se é possível colocar essa: Berkshire Swash.  

Agradeço, desde já.  

Spoiler:

Olá!

Troque a sua folha de estilos por esta:

Código:


/************FONTES****************/

@font-face {
font-family:'Berkshire Swash';
font-style:normal;
font-weight:400;
src: local('Berkshire Swash'), local(BerkshireSwash-Regular), url(http://themes.googleusercontent.com/static/fonts/berkshireswash/v1/4RZJjVRPjYnC2939hKCAio7PDNlca4RILyZXFX2_UPk.woff) format(woff);
}

@font-face {
 font-family: 'Wire One';
 font-style: normal;
 font-weight: 400;
 src: local('Wire One regular'), local('WireOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/wireone/v3/fas9dl2wmMkt5rCu-aBez_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

@font-face {
 font-family: 'Wire One';
 font-style: normal;
 font-weight: 400;
 font-weight: 400;
 src: local('Wire One regular'), local('WireOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/wireone/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face { font-family: "georgia"; src: url('http://themes.googleusercontent.com/static/fonts/georgia/v2/TwHX4vSxMUnJUdEz1JIgrrtXaZAN_aGv07JTA91X2HI.woff'); }

@font-face { font-family: "georgia"; src: url('http://static.tumblr.com/4yxykdm/xXTlrecqr/georgia.ttf'); }

/************FIM DAS FONTES****************/

.postbody .content {
text-align:justify;
 padding:60px;
}
.chatbox .post {
background-color:#030303;
 border-bottom:none;
  padding:1px;
}
#chatbox_footer {
background-color: transparent;
}
.chatbox_row_1 {
  padding-right: 20px;
    padding-left: 20px;
 font-size:11px;
  text-transform:none;
  background-color:  transparent;
 text-align:left;
  }
.chatbox_row_2 {
  padding-right: 20px;
    padding-left: 20px;
 font-size:11px;
  text-transform:none;
  background-color:  transparent;
 text-align:left;
  }
.chatbox_row_3 {
  padding-right: 20px;
    padding-left: 20px;
 font-size:11px;
 text-transform:none;
  background-color:  transparent;
 text-align:left;
  }

#content-container div#left {
background:url('');
 top: 0;
left: 0;
}
.reck {
 text-align:center;
 text-transform:none;
 align:center;
 float:center;
  margin-top:150px;
 height:150px;
 background-color:#07080F;
 border-bottom: 4px solid #160101;
 color:#bcbcbc;
}
.rck {
  text-align:center;
  align:center;
  text-transform:none;
  padding-top:150px;
 float:center;
  margin-top:150px;
 font-family: Georgia;
 font-size:50px;
 color:#bcbcbc;
}
.forabg li.row dd.topics {
background: #070303;
position: relative;
 padding-left:0px;
 padding-right:0px;
left: 53px;
bottom: -30px;
width: 87px;
padding-bottom: 10px;
height: 11px;
font-size: 9px;
text-transform: uppercase;
}
.forabg li.row dd.posts {
background: #070303;
position: relative;
left: 59px;
  padding-left:0px;
 padding-right:0px;
bottom: -30px;
width: 87px;
height: 11px;
font-size: 9px;
padding-bottom: 10px;
text-transform: uppercase;
}
.forabg li.row dd.lastpost {
 text-align:left;
 text-transform:uppercase;
 font-family:tahoma;
 font-size:10px;
border-bottom: 10px solid #070303;
 border-right: 10px solid #070303;
 border-left: 10px solid #070303;
 border-top: 30px solid #070303;
width: 175px;
margin-left: 35px;
 margin-top:0px;
background-color: #070303;
padding: 7px !important;
padding-top: 35px !important;
box-shadow: 0px 0px 5px black;
}
::-webkit-scrollbar {width: 8px;height: 13px;background-color: #07080F;}
::-webkit-scrollbar-thumb{background-color: #040101;} 
.module {
text-align:center;
 background-color:transparent;
}
.module .h3 {
visibility:hidden;
}
.module .h3 {
visibility:hidden;
display: none;
}
li.header dd, li.header dt {
margin-top: 10px;
text-align: center;
}
.module .h3 {
visibility:hidden;
}
a.mainmenu {
background-color:
transparent;
padding: 3px;
margin-top: 30px!important;
margin-right: -8px !important;
font-weight: 400!important;
font-family: trebuchet ms !important;
font-size: 11px;
color:
#A1A1A1;
width: 880px;
text-transform: uppercase;
border-bottom: 3px solid
#210303;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
a.mainmenu:hover {
background-color:
transparent;
padding: 3px;
margin-top: 30px!important;
margin-right: -8px !important;
font-weight: 400!important;
font-family: trebuchet ms !important;
font-size: 11px;
 color:transparent;
text-shadow: 0px 0px 1px #A1A1A1;
width: 880px;
text-transform: uppercase;
border-bottom: 3px solid
#210303;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.module .h3 {
visibility:hidden;
}
#textarea_content {   
margin-top: 3px;
}
#chatbox {
 background-color:#000000;
}
.chatbox-members{
background-color:#000000;
}
#chatbox_header {
background-color:transparent;
}
.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;}
.opacity div {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.opac div {
 opacity:0.8;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.opac:hover div {
 opacity:0.8;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.opacity:hover div {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

.opac {
 opacity:0.1;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.opac:hover {
 opacity:0.9;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

#wrap {
background-color: #000000;
border: 4px solid #;
box-shadow: 0 0 10px 2px #000000;
}
p {
overflow:auto;
max-height: 300px;
display: block;
margin: auto;
text-transform: uppercase;
font-size: 9px;
}
.h3 {
font-size: 12px;
text-transform: uppercase;
text-align: left;
text-shadow: 1px 1px 1px #000000;
letter-spacing: 0px;}
li.header dl.icon {
height: 42px;
 background-color:#1A0303;
 border-bottom: 0px dotted #120707;
 background-repeat:repeat;
font-family:arial;
letter-spacing: 2px;
padding: 10px 6px 0px;
font-size: 8px;
text-align: center;
text-shadow: 0 2px 2px black;
text-transform: uppercase;
vertical-align: middle;
}
 .table-title h2 {
color: #BDBDBD;
 text-shadow: 1px 1px 1px #000000;
font-family: Wire One;
font-size: 40px;
margin-left: -190px;
letter-spacing: 4px;
font-style: normal;
text-transform: uppercase;
}
ul.forums {
background: #030303;
  margin-top:-0px;
background-repeat: repeat-yes;
border-radius: 0px 0px 0px 0px;
border-bottom: 8px solid #1A0303;
 box-shadow:0px 2px 8px #000000;
}
.desc9 {
 border-bottom:10px solid #070303;
 border-right: 10px solid #070303;
 border-radius: 100px 0px 0px 100px;
background-color:#120707;
background-repeat: repeat;
 text-transform:uppercase;
color: #565656;
 font-family:arial;
display: block;
font-size: 9.5px;
line-height: 100%;
margin-left: 200px;
margin-top: 5px;
padding: 10px;
text-align: justify;
text-shadow: 0px 0px 2px #000000;
width: 400px;
letter-spacing: 0px;
}
.desc8 {
 border-bottom:10px solid #070303;
 border-right: 10px solid #070303;
 border-left: 10px solid #070303;
background-color:#120707;
background-repeat: repeat;
 text-transform:uppercase;
color: #565656;
 font-family:arial;
display: block;
font-size: 9.5px;
line-height: 100%;
margin-left: 200px;
margin-top: 5px;
padding: 0px;
text-align: justify;
text-shadow: 0px 0px 2px #000000;
width: 400px;
letter-spacing: 0px;
}
a.forumtitle {
 color:#bfbcbb;
background-color: #070303;
border-radius: 0px 700px 0px 700px;
 display: block;
 letter-spacing:2px;
 font-family: Georgia;
float: center;
font-size: 13px;
margin-bottom: -20px;
margin-top: 10px;
margin-left: 200px;
padding: 3px;
text-align: center;
text-transform: uppercase;
width: 400px;
height: 17px;
 text-shadow: 1px 1px 0px #000000;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
a.forumtitle:hover {
 margin-left: 200px;
 color:transparent;
 border-radius: 0px 700px 0px 700px;
background-color: #070303;
border-radius: 0px 0px 0px 0px;
 display: block;
 letter-spacing:2px;
 font-family: Wire One;
float: center;
 text-decoration:none;
font-size: 23px;
margin-bottom: -20px;
margin-top: 10px;
margin-left: 5px;
padding: 3px;
text-align: center;
text-transform: uppercase;
width: 400px;
height: 17px;
 text-shadow: 0px 0px 0px #BDBDBD;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.formdesc a:link, .formdesc a:visited, .formdesc a:active {
background-color: transparent;
color: #bdbdbd;
font-size: 8px;
letter-spacing: 1px;
padding: 3px;
text-transform: uppercase;
}
.formdesc a:link:hover {
background-color: transparent;
color: #ffffff;
font-size: 8px;
letter-spacing: 2px;
padding: 3px;
text-transform: uppercase;
}
.formdesc {
 border: 1px solid #120707;
background-color: #120707;
border-radius: 10px 10px 10px 10px;
 margin-bottom:-22px;
display: block;
font-size: 8px;
margin-top: 5px;
padding: 3px;
text-align: center;
text-shadow: 1px 1px 0 #COLOR;
 text-transform: uppercase;
}
p em b a.gensmall {
font-family: Wire One;
font-size: 30px;
 line-height:100%;
letter-spacing: 0px;
font-style: normal;
text-align: center;
text-transform: none;
}
p em {
margin: 4px;
color: transparent;
display: block;
 width: 500px;
 margin-left:250px;
align: center;
 line-height:100%;
}
.post {
background: #030303;
background-repeat: repeat;
background-position: center;
 border-bottom: 8px solid #1A0303;
 padding:10px 10px 10px 10px;
 color:#070303;
}
.postprofile dd {
text-align: left;
}
.postprofile dd, .postprofile dt {
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
}
dl.codebox {
 background-color:#2B1313;
 background-image:url('http://i877.photobucket.com/albums/ab335/LuiRopez/patt.png');
 border-radius: 15px 15px 15px 15px;
color:white;
  text-transform:none;
 border: 1px solid #120707;
}
.spoiler_content.hidden {
 background-color:#2B1313;
 background-image:url('http://i877.photobucket.com/albums/ab335/LuiRopez/patt.png');
 border-radius: 15px 15px 15px 15px;
color:white;
 text-transform:none;
 border: 1px solid #120707;
}
blockquote {
 background-color:#2B1313;
 background-image:url('http://i877.photobucket.com/albums/ab335/LuiRopez/patt.png');
 border-radius: 15px 15px 15px 15px;
color:white;
  text-transform:none;
 border: 1px solid #120707;
}
.topics {
text-shadow: 1px 1px 1px #000000;
}
.posts {
text-shadow: 1px 1px 1px #000000;
}
.lastpost {
text-shadow: 1px 1px 1px #000000;
text-align:center;
align:center;
}
.postprofile{
text-align: center;
}
.postprofile dt a img {
box-shadow: 1px 1px 2px #000000;
margin-top: 0px;
width:200px;
 margin-bottom:8px;
 height:320px;
}
.postprofile {
background-image: url('http://i.imgur.com/KJIxvEE.png');
 border-radius: 0px 0px 30px 0px / 0px 0px 45px 0px;
margin-top: 17px;
border-left: 9px double 120707;
float: right;
font-family: arial;
 line-heighr:90%;
font-size: 11px;
 text-transform:uppercase;
margin-right: -3px;
padding-top: 0px;
color: #d4d4d4;
text-align: center;
width: 220px;
box-shadow:0px 2px 5px #000000;
}
p.author {
 background-image: url('http://i48.tinypic.com/2aikcns.jpg');
position: relative;
right: -7em;
color:#e3e3e3;
background-color:#000000;
text-align: center;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
padding: 3px !important;
text-transform: lowercase;
 box-shadow: 0px 2px 5px #000000;
}
.postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
color: #d4d4d4; 
font-family: Wire One;
font-size: 30px;
line-height: 40%;
font-weight:800;
 margin-bottom:-15px;
letter-spacing: 1px;
font-style:normal;
 text-transform:uppercase;
text-decoration: none;
 text-shadow: 1px 1px 1px #000000;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.postprofile a:hover { 
  margin-top:0px;
font-family: Wire One;
font-size: 30px;
letter-spacing: 3px;
font-style:normal;
 text-transform:uppercase;
text-shadow: 1px 1px 1px #000000;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

.subs a {
 text-transform:uppercase;
 text-color:#E7E7E7;
 font-size:9px;
border-left: 4px solid #07080F;
margin: 0px;
padding: 2px;
    -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.subs a:active, .subs a:hover {
 background-color:#070303;
 text-transform:uppercase;
 color:#E7E7E7;
border-left: 40px solid #07080F;
margin: 0px;
padding: 2px 0px 0px;
    -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.formdesc a:link, .formdesc a:visited, .formdesc a:active {
background-color: transparent;
color: #E1E1E1;
font-size: 8px;
letter-spacing: 1px;
padding: 3px;
text-transform: uppercase;
}
.formdesc a:link:hover {
background-color: transparent;
color: #E1E1E1;
font-size: 8px;
letter-spacing: 2px;
padding: 3px;
text-transform: uppercase;
}
.formdesc {

background-color: #070303;
 border: solid 1px #070303;
border-radius: 0px 0px 50px 50px;
 margin-bttom:-20px;
 width:400px;
 height:auto;
float:center;
 position:relative;
 display:block;
 align:center;
font-size: 8px;
margin-top: 5px;
text-align: center;
text-shadow: 1px 1px 0 #COLOR;
 text-transform: uppercase;
}


/************LEGENDAS*********/

#main-content p em b .gensmall, #main-content p em b, a.gensmall {
font-family: 'Berkshire Swash', sans-serif !important;
}

#main-content em{
 font-size:0px
}
#main-content em::before{
 content:'Legenda: ';
 font-size:25px;
font-style:normal;
 opacity: 0.0;}
#main-content em b *{
 font-size:30px;
 font-align: left;
  letter-spacing: 0px;
 font-family: Wire One;
 text-transform:uppercase;
}
#main-content em b *::hover{
 font-size:25px;
 font-align: left;
 font-family: Wire One;
 text-transform: uppercase;
}
#main-content em b a::before{
 content:' • ';color:black
}
#main-content em b:first-child a::before{
 content:''
}
#main-content em,
#main-content em *:link{
 cursor:default;
 color:inherit
}

/************FIM DAS LEGENDAS*********/

/*-------------INICIO TABLON BLACKEST NIGHT BY PYRITE WOLF DE OUR SOURCE CODE!-------------*/
/*-------------COLORES! HERMOSOS COLORES!-------------*/
/*letra de negritas,cosas tachadas, subtitulos y título principal, links y botones (verde sersi, bah)*/
#blackestnight b,#blackestnight s,#blackestnight #h1, #blackestnight #h2, #blackestnight a, #bnbot {
  color: #6c5065 !important;}
/*letra general de la derecha, awards, créditos, staff*/
.bnc3, #bnder, #bnaward span,.bnstaff span {color: #888;}
/*letra principal*/
#bnizq {color: #999;}
/*fondo del cuerpo, textos descriptivos de staff y awards, fondo de texto de los botones*/
#blackestnight, #bnaward span, .bnstaff span,#bnbot  {background: #333;}
/*fondo de la caja de la derecha, cajas de awards, créditos, nombres del staff y de awards, links de staff y awards*/
#bnder,.bnc3,.bnc2, #bnaward b,#bnaward a,.bnstaff b, .bnstaff a {background: #222;}
/*fondo de las cajas principales de contenido*/
#bnizq {background: #171717;}
/*color de barra de navegación*/
#blackestnight ::-webkit-scrollbar-thumb:horizontal, #blackestnight ::-webkit-scrollbar-thumb:vertical {background:#6c5065;}
/*-------------IMAGENES SERSIS-------------*/
/*primer boton*/
.bn1 {background: url('http://imageshack.us/a/img28/2277/fogoconedebarra.png');}
/*segundo boton*/
.bn2 {background: url('http://imageshack.us/a/img12/8993/arconedebarra.png');}
/*tercer boton*/
.bn3 {background: url('http://img843.imageshack.us/img843/6158/guaconedebarra.png');}


/*-------------CODES, CODES DEL TABLON, SERSIS CODES DEL TABLON (?)-------------*/
/*cajas*/
#blackestnight {position: relative;text-align: justify;margin: auto; width: 75%;border-radius: 10px; padding: 10px 15px 10px 50px;font: 12px ubuntu condensed;line-height:13px;right: -4%;}
#bnder {border-radius: 10px; padding:5px 10px;font-size:11px; max-height: 125px; overflow: auto;line-height:12px;}
#bnd {width: 170px;float:right;position: relative;}
#bnizq {height: 105px; overflow: auto;margin-right: 175px; border-radius: 10px; padding:5px 10px;}
.bncaja {overflow: hidden;}
.bnc2 {text-align: center;border-radius: 10px; padding: 10px;}
.bnc3 {border-radius: 10px; padding: 10px;height:215px;overflow-y: auto;overflow-x: hidden;}
.bnescondida {width: 0px;padding: 0px;height: 0px;}
/*Awards*/
#bnaward {display: inline-block;height: 225px;padding: 5px 0px; width: 18%; margin: 0 0.5%;border-radius: 10px;background-position: center !important;background-size: 250% !important;}
#bnaward b,#bnaward span,#bnaward a {opacity: 0;}
#bnaward:hover b,#bnaward:hover span,#bnaward:hover a {opacity: 0.9;}
#bnaward b {display: block; text-align: center;border-radius: 5px; margin:100px 5px 2px 5px;}
#bnaward span {padding: 2px;display: block; border-radius: 5px; text-align: center;margin:0px 5px 2px 5px;height: 50px; overflow: auto;}
#bnaward a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: block; text-align: center;border-radius: 5px;margin:0px 5px;}
#bnaward a:hover {background: #333;}
/*Subtitulos*/
#blackestnight #h1 {margin:0px -5px 2px -5px;padding: 0px 0px 2px 10px; border-bottom: 1px dotted;font-size: 15px; text-transform: uppercase;letter-spacing:2px;}
#blackestnight #h2 {font-size: 20px; text-transform: uppercase;letter-spacing:2px;width: 225px; text-align: center; -webkit-transform: rotate(90deg);transform: rotate(90deg);-moz-transform: rotate(90deg);position: absolute; top: 120px; right: -125px;}
#blackestnight #h3 {font-size: 9px; text-transform: uppercase;text-align: center; color: #888;position: absolute; top: 225px;width: 170px;}
/*Staff*/
.bnstaff {overflow: hidden;width: 40px; height: 40px; background-size: 200%;background-position: center;border-radius: 5px;margin-left: 5px;display: inline-block;position: absolute;top:140px;}
.bns5 {top: 183px;margin: 0px;} .bns6 {top: 183px;left: 42px;} .bns7 {top: 183px;left: 84px;} .bns8 {top: 183px;left: 126px;}
.bnstaff b, .bnstaff span, .bnstaff a {opacity: 0;}
.bnstaff:hover b, .bnstaff:hover span, .bnstaff:hover a {opacity: 0.8;}
.bnstaff:hover {left:0px;top: 140px;z-index: 999; width: 150px; height: 63px;padding:10px; background-size: 100%;margin: 0px;}
.bnstaff b {display: block; text-align: center;border-radius: 5px; margin-bottom: 2px;}
.bnstaff span {display: block;border-radius: 5px; text-align: center;margin-bottom: 2px;}
.bnstaff a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: inline-block; text-align: center;border-radius: 5px;width: 48%; margin: 0px 1%; }
.bnstaff a:hover {background: #333;}
/*botones*/
.bnboton {filter: gray;-webkit-filter: grayscale(100%);width: 65px; height: 65px; border: 5px solid #222;background-size: 200%; position: absolute; left: -30px;border-radius:10px;cursor: pointer;}
.bnboton:hover {width: 130px;left:-95px;background-size: 100%;filter: none;-webkit-filter: grayscale(0%);}
#bnbot {margin: 20px auto; opacity: 0; width: 65px; text-transform: uppercase;letter-spacing: 2px; font-size: 10px;border-radius: 5px;text-align: center;padding: 5px 0px; }
.bnboton:hover #bnbot {opacity: 0.9;}
.bn2 {top: 90px;}
.bn3 {top: 170px;}
.bnselec {filter: none;-webkit-filter: grayscale(0%);}

/*generales*/
#blackestnight * {-webkit-backface-visibility: hidden;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;}

#blackestnight ::-webkit-scrollbar { width: 8px; height: 8px; } #blackestnight ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {display: none;} #blackestnight ::-webkit-scrollbar-track-piece {background: transparent;} #blackestnight ::-webkit-scrollbar-thumb:horizontal, #blackestnight ::-webkit-scrollbar-thumb:vertical {border-radius: 10px;}

@font-face {
 font-family: 'Ubuntu Condensed';
 font-style: normal;
 font-weight: 400;
 src: local('Ubuntu Condensed'), local('UbuntuCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/ubuntucondensed/v3/DBCt-NXN57MTAFjitYxdrFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
}
/*-------------FIN TABLON BLACKEST NIGHT BY PYRITE WOLF DE OUR SOURCE CODE!-------------*/

Cumprimentos.
Fraise

Olá!

O código deu certo.
Muito obrigada pela ajuda, Fraise e Raffy!