[Help] change position and color of the tabs

Hello guys, I have the following questions, I had to create some tabs on the plug to that used the model provided by Aaron, but now I can not: 1 - put the buttons that switch the tabs vertically 2 - change the background color of these gray for buttons only 3 - Remove the edge of the tab the code: HTML &lt;input type="radio" name="attr_tab" value="1" title="Características" checked="checked" /&gt; &lt;input type="radio" name="attr_tab" value="2" title="Habilidades" /&gt; &lt;input type="radio" name="attr_tab" value="3" title="Combate" /&gt; &lt;input type="radio" name="attr_tab" value="4" title="Magia" /&gt; &lt;div class='sheet-3colrow'&gt; &lt;div class='sheet-col'&gt; &lt;!-- First column --&gt; &lt;div&gt; &lt;span&gt;&lt;img src="<a href="http://i1109.photobucket.com/albums/h426/trodurizen/Logo_zpsa8tooaa2.jpg&quot;&gt;&lt;/span" rel="nofollow">http://i1109.photobucket.com/albums/h426/trodurizen/Logo_zpsa8tooaa2.jpg"&gt;&lt;/span</a>&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- Second column --&gt; &lt;span&gt;&lt;label for="name"&gt;Nome:&lt;/label&gt;&lt;/span&gt; &lt;input type="text" name="attr_nome"/&gt; &lt;span&gt;&lt;label for="raca"&gt;Raça:&lt;/label&gt;&lt;/span&gt; &lt;select value="0" name="attr_raca"&gt; &lt;option value="" selected&gt; &lt;/option&gt; &lt;option value="anao"&gt;Anão&lt;/option&gt; &lt;option value="e-dourado"&gt;Elfo Dourado&lt;/option&gt; &lt;option value="e-florestal"&gt;Elfo Florestal&lt;/option&gt; &lt;option value="humano"&gt;Humano&lt;/option&gt; &lt;option value="m-elfo"&gt;Meio-elfo&lt;/option&gt; &lt;option value="pequenino"&gt;Pequenino&lt;/option&gt; &lt;/select&gt; &lt;span&gt;&lt;label for="profissao"&gt;Profissão:&lt;/label&gt;&lt;/span&gt; &lt;select name="attr_profissao"&gt; &lt;option value="" selected&gt; &lt;/option&gt; &lt;option value="bardo"&gt;Bardo&lt;/option&gt; &lt;option value="guerreiro"&gt;Guerreiro&lt;/option&gt; &lt;option value="ladino"&gt;Ladino&lt;/option&gt; &lt;option value="mago"&gt;Mago&lt;/option&gt; &lt;option value="rastreador"&gt;Rastreador&lt;/option&gt; &lt;option value="sacerdote"&gt;Sacerdote&lt;/option&gt; &lt;/select&gt; &lt;span&gt;&lt;label for="especializacao"&gt;Especialização:&lt;/label&gt;&lt;/span&gt; &lt;select name="attr_especializacao"&gt; &lt;option value="" selected&gt; &lt;/option&gt; &lt;option value="arautos"&gt;Confraria dos Arautos&lt;/option&gt; &lt;option value="artistas"&gt;Confraria dos Artistas&lt;/option&gt; &lt;option value="eruditos"&gt;Confraria dos Eruditos&lt;/option&gt; &lt;option value="cacadores"&gt;Trilha dos Caçadores&lt;/option&gt; &lt;option value="exploradores"&gt;Trilha dos Exploradores&lt;/option&gt; &lt;option value="guardioes"&gt;Trilha dos Guardiões&lt;/option&gt; &lt;option value="ladroes"&gt;Guilda dos Ladrões&lt;/option&gt; &lt;option value="piratas"&gt;Guilda dos Piratas&lt;/option&gt; &lt;option value="assassinos"&gt;Guilda dos Assassinos&lt;/option&gt; &lt;option value="cavaleiros"&gt;Academia dos Cavaleiros&lt;/option&gt; &lt;option value="infantaria"&gt;Academia de Infantaria&lt;/option&gt; &lt;option value="arqueiros"&gt;Academia dos Arqueiros&lt;/option&gt; &lt;option value="gladiadores"&gt;Academia dos Gladiadores&lt;/option&gt; &lt;option value="ilusoes"&gt;Colégio das Ilusões&lt;/option&gt; &lt;option value="elemental"&gt;Colégio Elemental&lt;/option&gt; &lt;option value="necromantico"&gt;Colégio Necromântico&lt;/option&gt; &lt;option value="naturalista"&gt;Colégio Naturalista&lt;/option&gt; &lt;option value="alquimico"&gt;Colégio Alquímica&lt;/option&gt; &lt;option value="conhecimento"&gt;Colégio do Conhecimento&lt;/option&gt; &lt;option value="o-blator"&gt;Ordem de Blator&lt;/option&gt; &lt;option value="o-cambu"&gt;Ordem de Cambu&lt;/option&gt; &lt;option value="o-crezir"&gt;Ordem de Crezir&lt;/option&gt; &lt;option value="o-crisagom"&gt;Ordem de Crisagom&lt;/option&gt; &lt;option value="o-cruine"&gt;Ordem de Cruine&lt;/option&gt; &lt;option value="o-ganis"&gt;Ordem de Ganis&lt;/option&gt; &lt;option value="o-lena"&gt;Ordem de Lena&lt;/option&gt; &lt;option value="o-maira"&gt;Ordem de Maira&lt;/option&gt; &lt;option value="o-palier"&gt;Ordem de Palier&lt;/option&gt; &lt;option value="o-parom"&gt;Ordem de Parom&lt;/option&gt; &lt;option value="o-plandis"&gt;Ordem de Plandis&lt;/option&gt; &lt;option value="o-selimom"&gt;Ordem de Selimom&lt;/option&gt; &lt;option value="o-sevides"&gt;Ordem de Sevides&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- Third column --&gt; &lt;span&gt;&lt;label for="classe-social"&gt;Classe social:&lt;/label&gt;&lt;/span&gt; &lt;select name="attr_classe-social"&gt; &lt;option value="ex-servo"&gt;Ex-servo&lt;/option&gt; &lt;option value="ex-escravo"&gt;Ex-escravo&lt;/option&gt; &lt;option value="livre"&gt;Livre&lt;/option&gt; &lt;option value="pequeno-comerciante"&gt;Pequeno comerciante&lt;/option&gt; &lt;option value="artifice"&gt;Artífice&lt;/option&gt; &lt;option value="grande-comerciante"&gt;Grande comerciante&lt;/option&gt; &lt;option value="baixa-nobreza"&gt;Baixa nobreza&lt;/option&gt; &lt;option value="alta-nobreza"&gt;Alta nobreza&lt;/option&gt; &lt;/select&gt; &lt;span&gt;&lt;label for="deus"&gt;Deus:&lt;/label&gt;&lt;/span&gt; &lt;select name="attr_deus"&gt; &lt;option value="blator"&gt;Blator&lt;/option&gt; &lt;option value="cambu"&gt;Cambu&lt;/option&gt; &lt;option value="crezir"&gt;Crezir&lt;/option&gt; &lt;option value="crisagom"&gt;Crisagom&lt;/option&gt; &lt;option value="cruine"&gt;Cruine&lt;/option&gt; &lt;option value="ganis"&gt;Ganis&lt;/option&gt; &lt;option value="lena"&gt;Lena&lt;/option&gt; &lt;option value="maira"&gt;Maira&lt;/option&gt; &lt;option value="palier"&gt;Palier&lt;/option&gt; &lt;option value="parom"&gt;Parom&lt;/option&gt; &lt;option value="plandis"&gt;Plandis&lt;/option&gt; &lt;option value="selimom"&gt;Selimom&lt;/option&gt; &lt;option value="sevides"&gt;Sevides&lt;/option&gt; &lt;/select&gt; &lt;span&gt;&lt;label for="estagio"&gt;Estágio:&lt;/label&gt;&lt;/span&gt; &lt;input type="number" name="attr_estagio"/&gt; &lt;span&gt;&lt;label for="experiencia"&gt;Experiencia:&lt;/label&gt;&lt;/span&gt; &lt;input type="number" name="attr_experiencia"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div class='sheet-3colrow'&gt; &lt;div class='sheet-col'&gt; &lt;!-- First column --&gt; &lt;span&gt;&lt;label for="atributos"&gt;Atributos Primários&lt;/label&gt;&lt;/span&gt; &lt;span&gt;&lt;label for="intelecto"&gt;Intelecto:&lt;/label&gt;&lt;/span&gt; &lt;input value="0" type="number" name="attr_intelecto"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_intelecto'&gt;&lt;/button&gt; &lt;span&gt;&lt;label for="aura"&gt;Aura:&lt;/label&gt;&lt;/span&gt; &lt;input value="0" type="number" name="attr_aura"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_aura'&gt;&lt;/button&gt; &lt;span&gt;&lt;label for="carisma"&gt;Carisma:&lt;/label&gt;&lt;/span&gt; &lt;input value="0" type="number" name="attr_carisma"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_carisma'&gt;&lt;/button&gt; &lt;span&gt;&lt;label for="forca"&gt;Força:&lt;/label&gt;&lt;/span&gt; &lt;input value="0" type="number" name="attr_forca"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_forca'&gt;&lt;/button&gt; &lt;span&gt;&lt;label for="fisico"&gt;Físico:&lt;/label&gt;&lt;/span&gt; &lt;input value="0" type="number" name="attr_fisico"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_fisico'&gt;&lt;/button&gt; &lt;span&gt;&lt;label for="agilidade"&gt;Agilidade:&lt;/label&gt;&lt;/span&gt; &lt;input value="0" type="number" name="attr_agilidade"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_agilidade'&gt;&lt;/button&gt; &lt;span&gt;&lt;label for="percepcao"&gt;Percepção:&lt;/label&gt;&lt;/span&gt; &lt;input value="0" type="number" name="attr_percepcao"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_percepcao'&gt;&lt;/button&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- Second column --&gt; &lt;span&gt;&lt;label for="atributos-secundarios"&gt;Atributos Secundários&lt;/label&gt;&lt;/span&gt; &lt;span&gt;&lt;label for="rf"&gt;Resistência Física:&lt;/label&gt;&lt;/span&gt; &lt;input name="attr_rf" type="number" value="@{fisico}+{estagio}" disabled="true"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_rf'&gt;&lt;/button&gt; &lt;span&gt;&lt;label for="rf"&gt;Resistência à Magia:&lt;/label&gt;&lt;/span&gt; &lt;input name="attr_rm" type="number" value="(@{attr_aura})+(@{attr_estagio})" disabled="true"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_rm'&gt;&lt;/button&gt; &lt;span&gt;&lt;label for="vb"&gt;Velocidade:&lt;/label&gt;&lt;/span&gt; &lt;input name="attr_vb" type="number" value="(@{attr_aura})+(@{attr_estagio})" disabled="true"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_vb'&gt;&lt;/button&gt; &lt;span&gt;&lt;label for="karma"&gt;Karma:&lt;/label&gt;&lt;/span&gt; &lt;input name="attr_karma" type="number" value="" disabled="true"/&gt; &lt;span&gt;&lt;label for="atributos-defesas"&gt;Defesas&lt;/label&gt;&lt;/span&gt; &lt;span&gt;&lt;label for="da"&gt;Defesa ativa:&lt;/label&gt;&lt;/span&gt; &lt;select name="attr_da" value="L"&gt; &lt;option value="L"&gt;L&lt;/option&gt; &lt;option value="M"&gt;M&lt;/option&gt; &lt;option value="P"&gt;P&lt;/option&gt; &lt;/select&gt; &lt;input name="attr_valor-da" type="number" value="(@{attr_aura})+(@{attr_estagio})" disabled="true"/&gt; &lt;span&gt;&lt;label for="dp"&gt;Defesa Passiva:&lt;/label&gt;&lt;/span&gt; &lt;select name="attr_da" value="L"&gt; &lt;option value="L"&gt;L&lt;/option&gt; &lt;option value="M"&gt;M&lt;/option&gt; &lt;option value="P"&gt;P&lt;/option&gt; &lt;/select&gt; &lt;input name="attr_valor-dp" type="number" value="(@{attr_aura})+(@{attr_estagio})" disabled="true"/&gt; &lt;/div&gt; &lt;div class='sheet-col'&gt; &lt;!-- Third column --&gt; &lt;span&gt;&lt;label for="classe-social"&gt;Classe social:&lt;/label&gt;&lt;/span&gt; &lt;select name="attr_classe-social"&gt; &lt;option value="ex-servo"&gt;Ex-servo&lt;/option&gt; &lt;option value="ex-escravo"&gt;Ex-escravo&lt;/option&gt; &lt;option value="livre"&gt;Livre&lt;/option&gt; &lt;option value="pequeno-comerciante"&gt;Pequeno comerciante&lt;/option&gt; &lt;option value="artifice"&gt;Artífice&lt;/option&gt; &lt;option value="grande-comerciante"&gt;Grande comerciante&lt;/option&gt; &lt;option value="baixa-nobreza"&gt;Baixa nobreza&lt;/option&gt; &lt;option value="alta-nobreza"&gt;Alta nobreza&lt;/option&gt; &lt;/select&gt; &lt;span&gt;&lt;label for="deus"&gt;Deus:&lt;/label&gt;&lt;/span&gt; &lt;select name="attr_deus"&gt; &lt;option value="blator"&gt;Blator&lt;/option&gt; &lt;option value="cambu"&gt;Cambu&lt;/option&gt; &lt;option value="crezir"&gt;Crezir&lt;/option&gt; &lt;option value="crisagom"&gt;Crisagom&lt;/option&gt; &lt;option value="cruine"&gt;Cruine&lt;/option&gt; &lt;option value="ganis"&gt;Ganis&lt;/option&gt; &lt;option value="lena"&gt;Lena&lt;/option&gt; &lt;option value="maira"&gt;Maira&lt;/option&gt; &lt;option value="palier"&gt;Palier&lt;/option&gt; &lt;option value="parom"&gt;Parom&lt;/option&gt; &lt;option value="plandis"&gt;Plandis&lt;/option&gt; &lt;option value="selimom"&gt;Selimom&lt;/option&gt; &lt;option value="sevides"&gt;Sevides&lt;/option&gt; &lt;/select&gt; &lt;span&gt;&lt;label for="estagio"&gt;Estágio:&lt;/label&gt;&lt;/span&gt; &lt;input type="number" name="attr_estagio"/&gt; &lt;span&gt;&lt;label for="experiencia"&gt;Experiencia:&lt;/label&gt;&lt;/span&gt; &lt;input type="number" name="attr_experiencia"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; consectetur adipisicing elit &lt;/div&gt; &lt;div&gt; sed do eiusmod tempor incididunt ut labore et dolore magna aliqua &lt;/div&gt; &lt;div&gt; Ut enim ad minim veniam &lt;/div&gt; CSS div.sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; } input.sheet-tab { width: 150px; height: 20px; position: relative; top: 20px; left: 20px; margin: -1.5px; cursor: pointer; z-index: 1; } input.sheet-tab::before { content: attr(title); border: solid 1px #a8a8a8; border-bottom-color: black; text-align: center; display: block; background: #fff; background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); width: 150px; height: 20px; font-size: 12px; } input.sheet-tab:checked::before { background: #dcdcdc; background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); border-bottom-color: #fff; } input.sheet-tab:not(:first-child)::before { border-left: none; } input.sheet-tab2::before { background: #; background: -moz-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: -webkit-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: -ms-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: -o-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); } input.sheet-tab2:checked::before { background: #dcdcdc; background: -moz-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: -webkit-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: -ms-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: -o-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); border-bottom-color: #fcecec; } div.sheet-tab-content { border: none; border-top-color: #000; margin: 2px 0 0 5px; padding: 5px; } .sheet-principal { background-color: white; width: 231px; height: 88px; } .sheet-label-name{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:80px; left:280px; } .sheet-input-name{ width: 250px; font-family:Palatino Linotype; font-size: 12; position:absolute; top:70px; left:330px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-raca{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:110px; left:280px; } .sheet-lista-raca{ width: 250px; font-family:Palatino Linotype; font-size: 12; position:absolute; top:100px; left:330px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-profissao{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:140px; left:280px; } .sheet-lista-profissao{ width: 230px; font-family:Palatino Linotype; font-size: 12; position:absolute; top:130px; left:350px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-especializacao{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:170px; left:280px; } .sheet-lista-especializacao{ width: 190px; font-family:Palatino Linotype; font-size: 12; position:absolute; top:160px; left:390px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-c-social{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:80px; left:620px; } .sheet-lista-c-social{ width: 250px; font-family:Palatino Linotype; font-size: 12; position:absolute; top:70px; left:720px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-deus{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:110px; left:620px; } .sheet-lista-deus{ width: 250px; font-family:Palatino Linotype; font-size: 12; position:absolute; top:100px; left:720px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-estagio{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:140px; left:620px; } .sheet-lista-estagio{ width: 250px; font-family:Palatino Linotype; font-size: 12; position:absolute; top:130px; left:720px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-experiencia{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:170px; left:620px; } .sheet-input-experiencia{ width: 250px; font-family:Palatino Linotype; font-size: 12; position:absolute; top:160px; left:720px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-atributos{ font-family:Palatino Linotype; font-size: 80; top:230px; left:30px; position: absolute; } .sheet-label-intelecto{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:260px; left:30px; } .sheet-input-intelecto{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:250px; left:120px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-intelecto{ position:absolute; top:250px; left:160px; } .sheet-label-aura{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:290px; left:30px; } .sheet-input-aura{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:280px; left:120px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-aura{ position:absolute; top:280px; left:160px; } .sheet-label-carisma{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:320px; left:30px; } .sheet-input-carisma{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:310px; left:120px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-carisma{ position:absolute; top:310px; left:160px; } .sheet-label-forca{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:350px; left:30px; } .sheet-input-forca{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:340px; left:120px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-forca{ position:absolute; top:340px; left:160px; } .sheet-label-fisico{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:380px; left:30px; } .sheet-input-fisico{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:370px; left:120px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-fisico{ position:absolute; top:370px; left:160px; } .sheet-label-agilidade{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:410px; left:30px; } .sheet-input-agilidade{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:400px; left:120px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-agilidade{ position:absolute; top:400px; left:160px; } .sheet-label-percepcao{ font-family:Palatino Linotype; font-size: 8; position:absolute; top:440px; left:30px; } .sheet-input-percepcao{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:430px; left:120px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-percepcao{ position:absolute; top:430px; left:160px; } .sheet-label-atributos-secundarios{ font-family:Palatino Linotype; font-size: 80; top:230px; left:280px; position: absolute; } .sheet-label-rf{ font-family:Palatino Linotype; font-size: 80; top:260px; left:280px; position: absolute; } .sheet-input-rf{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:250px; left:440px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-rf{ position:absolute; top:250px; left:480px; } .sheet-label-rm{ font-family:Palatino Linotype; font-size: 80; top:290px; left:280px; position: absolute; } .sheet-input-rm{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:280px; left:440px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-rm{ position:absolute; top:280px; left:480px; } .sheet-label-vb{ font-family:Palatino Linotype; font-size: 80; top:320px; left:280px; position: absolute; } .sheet-input-vb{ width: 25px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:310px; left:440px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-roll-vb{ position:absolute; top:310px; left:480px; } .sheet-label-karma{ font-family:Palatino Linotype; font-size: 80; top:350px; left:280px; position: absolute; } .sheet-input-karma{ width: 70px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:340px; left:440px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-defesas{ font-family:Palatino Linotype; font-size: 80; top:380px; left:280px; position: absolute; } .sheet-label-da{ font-family:Palatino Linotype; font-size: 80; top:410px; left:280px; position: absolute; } .sheet-lista-da{ width: 50px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:400px; left:440px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-input-valor-da{ width: 50px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:400px; left:495px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-label-dp{ font-family:Palatino Linotype; font-size: 80; top:440px; left:280px; position: absolute; } .sheet-lista-dp{ width: 50px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:430px; left:440px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; } .sheet-input-valor-dp{ width: 50px; font-family:Palatino Linotype; font-size: 12; font-weight: bold; text-align: center; position:absolute; top:430px; left:495px; border: 1px solid; border-top:none; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; }

Check out the Dresden Files RPG sheet for an example of vertical tabs (plus vertical text!)

Hello guys and girls, thank you for your help, I do not know anything about HTML and CSS and learned a lot here at roll20 since I started trying to create my first record, but I reached a point that created a lot of topics for my doubts and more members are striving I do not understand how to solve them. I decided to start from scratch in another topic and take a course at a time so that I can learn rather than just have the answer for you, if you still want to help me created this new topic in which I am organizing my ideas before starting to write the code, I hope to count on your help. New topic:&nbsp; <a href="https://app.roll20.net/forum/post/4144563/help-cus" rel="nofollow">https://app.roll20.net/forum/post/4144563/help-cus</a>... Hugs and thanks!