<table class="outfitter_main_table" style="height: 243px; margin: 0 auto;">
<tr>
<td style="height: 30px;" colspan="8">
<div class="titulo">Outfitter</div>
</td>
</tr>
<tr>
<td class="janela" rowspan="7">
<div class="icone_janela_outfit"></div>
<div class="titulo_janela">Outfits</div>
<div class="janela_outfits">
<form id="form_outfits"></form>
</div>
</td>
<td class="janela" rowspan="7">
<div class="icone_janela_mount"></div>
<div class="titulo_janela">Montarias</div>
<div class="janela_montarias">
<form id="form_montarias"></form>
</div>
</td>
</tr>
<tr>
<td style="width: 138px; height: 120px;" rowspan="3">
<div class="esquerda">
<table style="width: 97%; margin: 2px 2px 2px 2px">
<tr style="height: 127px; text-align: center; vertical-align: bottom;">
<td style="position: relative;">
<div class="carregando"></div>
<canvas id="tela" width="128" height="128"></canvas>
</td>
</tr>
<tr>
<td>
<table style="margin-top: -4px; line-height: 12px;">
<tr>
<td><div class="botao_e" id="out_e"></div></td>
<td style="width: 100%"><div class="outfit_nome"></div></td>
<td><div class="botao_d" id="out_d"></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="margin-top: -3px; line-height: 12px;">
<tr>
<td><div class="botao_e" id="mount_e"></div></td>
<td style="width: 100%"><div class="montaria_nome"></div></td>
<td><div class="botao_d" id="mount_d"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td style="vertical-align: top; height: 127px;" colspan="4">
<table class="direita" id="tabela_cores_container">
<tr style="height:20px;">
<td>
<table class="tabela_seletores">
<tr>
<td class="seletores" id="head">Head</td>
<td class="seletores" id="primary">Primary</td>
<td class="seletores" id="secondary">Secondary</td>
<td class="seletores" id="detail">Detail</td>
</tr>
</table>
</td>
</tr>
<tr style="height:104px">
<td style="vertical-align: top;">
<table class="tabela_cores">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
</table>
</td>
</tr>
</table>
</td>
<td class="janela" rowspan="6">
<div class="icone_janela_outfit"></div>
<div class="titulo_janela">Outros</div>
<div class="janela_outfits">
<form id="form_outros"></form>
</div>
</td>
</tr>
<tr>
<td rowspan="3">
<div class="orientacao">
<div class="seta_cima"></div>
<div class="seta_direita"></div>
<div class="seta_baixo"></div>
<div class="seta_esquerda"></div>
</div>
</td>
<td style="height: 25px;">
<div class="check"><input type="checkbox" id="addon_1" name="addon_1"/> <label for="addon_1"></label><span>Addon 1</span></div>
</td>
<td style="height: 25px;">
<div class="check"><input type="checkbox" id="addon_2" name="addon_2"/> <label for="addon_2"></label><span>Addon 2</span></div>
</td>
<td style="height: 25px;">
<div class="botao_sexo invisivel"><div id="sexo" class="sexo_f"></div></div>
</td>
</tr>
<tr style="height: 25px;">
<td style="width: 77px;">
<div class="check"><input type="checkbox" id="animar" name="animar"/> <label for="animar"></label>Animar</div>
</td>
<td style="width: 130px;" colspan="2">
<div class="check"><input type="checkbox" id="vida" name="vida"/> <label for="vida"></label>Barra de Vida</div>
</td>
</tr>
<tr style="height: 25px;">
<td>
<div class="check"><input type="checkbox" id="suavizar" name="suavizar"/> <label for="suavizar"></label>Suavizar Imagem</div>
</td>
<td style="width: 77px;">
<div class="check"><input type="checkbox" id="quadros" name="quadros"/> <label for="quadros"></label>Quadros</div>
</td>
<td style="padding-left: 4px;" colspan="2">
<label>
<input type="text" size="14" class="nome_char" maxlength="29" style="width: 116px;" placeholder="Preencher Nome...">
</label>
</td>
</tr>
<tr style="height: 25px; white-space: nowrap;">
<td colspan="5" style="padding-left: 3px;"><label>Link:
<input type="text" size="51" class="link" onClick="this.select();" readonly="readonly">
</label>
</td>
</tr>
</table>
<table class="quadros" style="display: none; border-collapse: separate; margin: 15px auto; text-align: center;">
<tr>
<tr>
<td colspan="4" style="padding: 4px;" id="tick">Animar com intervalo de 100ms</td>
</tr>
<td>
<canvas class="quadro" id="q0" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q1" width="64" height="64"></canvas>
<canvas class="quadro" id="q2" width="64" height="64"></canvas>
<canvas class="quadro" id="q3" width="64" height="64"></canvas>
</td>
</tr>
<tr>
<td>
<canvas class="quadro" id="q4" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q5" width="64" height="64"></canvas>
<canvas class="quadro" id="q6" width="64" height="64"></canvas>
<canvas class="quadro" id="q7" width="64" height="64"></canvas>
</td>
</tr>
<tr>
<td>
<canvas class="quadro" id="q8" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q9" width="64" height="64"></canvas>
<canvas class="quadro" id="q10" width="64" height="64"></canvas>
<canvas class="quadro" id="q11" width="64" height="64"></canvas>
</td>
</tr>
<tr>
<td>
<canvas class="quadro" id="q12" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q13" width="64" height="64"></canvas>
<canvas class="quadro" id="q14" width="64" height="64"></canvas>
<canvas class="quadro" id="q15" width="64" height="64"></canvas>
</td>
</tr>
<tr>
<td>
<canvas class="quadro" id="q16" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q17" width="64" height="64"></canvas>
<canvas class="quadro" id="q18" width="64" height="64"></canvas>
<canvas class="quadro" id="q19" width="64" height="64"></canvas>
</td>
</tr>
<tr>
<td>
<canvas class="quadro" id="q20" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q21" width="64" height="64"></canvas>
<canvas class="quadro" id="q22" width="64" height="64"></canvas>
<canvas class="quadro" id="q23" width="64" height="64"></canvas>
</td>
</tr>
<tr>
<td>
<canvas class="quadro" id="q24" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q25" width="64" height="64"></canvas>
<canvas class="quadro" id="q26" width="64" height="64"></canvas>
<canvas class="quadro" id="q27" width="64" height="64"></canvas>
</td>
</tr>
<tr>
<td>
<canvas class="quadro" id="q28" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q29" width="64" height="64"></canvas>
<canvas class="quadro" id="q30" width="64" height="64"></canvas>
<canvas class="quadro" id="q31" width="64" height="64"></canvas>
</td>
</tr>
<tr>
<td>
<canvas class="quadro" id="q32" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q33" width="64" height="64"></canvas>
<canvas class="quadro" id="q34" width="64" height="64"></canvas>
<canvas class="quadro" id="q35" width="64" height="64"></canvas>
</td>
</tr>
<tr style="display: inline;">
<td>
<canvas class="quadro" id="q36" width="64" height="64" style="margin-left: 2px;"></canvas>
<canvas class="quadro" id="q37" width="64" height="64"></canvas>
<canvas class="quadro" id="q38" width="64" height="64"></canvas>
<canvas class="quadro" id="q39" width="64" height="64"></canvas>
</td>
</tr>
</table>
<img class="invisivel" id="img_letras" src="https://www.tibiawiki.com.br/wiki/Especial:Redirecionar/file/Outfiter_Letras.png" alt="letras" />
<canvas class="invisivel" id="tela_cor" width="64" height="64"></canvas>
<canvas class="invisivel" id="montagem" width="2560" height="128"></canvas>
<div style="clear: both;"> </div>
