HTML <input type="radio" class="sheet-switch-pc-show sheet-switch" title="ship-show" name="attr_ship-show" value="1" checked/><span style="text-align: left;">PC</span>
<input type="radio" class="sheet-switch-ship-show sheet-switch" title="ship-show" name="attr_ship-show" value="2" /><span style="text-align: left;">SHIP</span>
<div class="sheet-switch-pc" style="position: relative; height: 450px; width: 800px; top:0px; left: 0%;">
<!--name and position-->
<div style="position: absolute; top: 33px; left: 375px;">
<input type="text" name="attr_character_name" title="name" style="width: 175px;" />
</div>
<div style="position: absolute; top: 62px; left: 375px;">
<input type="text" name="attr_position" title="position" style="width: 175px;"/>
</div>
<!--ammo/credits/luckyshots/motivation-->
<div>
<div style="position: absolute; top: 118px; left: 117px;">
<input type="number" name="attr_ammo" title="ammo" style="width: 50px;"/>
</div>
<div style="position: absolute; top: 118px; left: 210px;">
<input type="number" name="attr_credits" title="credits" style="width: 60px;"/>
</div>
<div style="position: absolute; top: 118px; left: 320px;">
<input type="number" name="attr_luckyshots" title="luckyshots" style="width: 50px;"/>
</div>
<div style="position: absolute; top: 118px; left: 428px;">
<input type="text" name="attr_motivation" title="motivation" style="width: 100px;"/>
</div>
<div style="position: absolute; top: 118px; left: 588px;">
<input type="number" name="attr_experience" title="experience" style="width: 60px;"/>
</div>
</div>
<!--nanomeds-->
<div style="position: absolute; top: 48px; left: 103px;">
<input type="number" name="attr_nanomeds" title="nanomeds" style="width: 50px;"/>
</div>
<!--equipment-->
<div style="position: absolute; top: 172px; left: 62px; width: 170px">
<input type="text" name="attr_equip1" title="equip1" style="width: 170px;"/>
<input type="text" name="attr_equip2" title="equip2" style="width: 170px;"/>
<input type="text" name="attr_equip3" title="equip3" style="width: 170px;"/>
<input type="text" name="attr_equip4" title="equip4" style="width: 170px;"/>
<input type="text" name="attr_equip5" title="equip5" style="width: 170px;"/>
<input type="text" name="attr_equip6" title="equip6" style="width: 170px;"/>
<input type="text" name="attr_equip7" title="equip7" style="width: 170px;"/>
</div>
<!--cliches-->
<div style="position: absolute; top: 175px; left: 255px; width: 170px">
<label>1<input type="text" name="attr_cliche1_name" title="cliche1_name" value="Cliche Name" style="width: 90px;"/><input type="number" name="attr_cliche1" style="width: 30px;"/>/<input type="number" name="attr_cliche1_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 204px; left: 255px; width: 170px">
<input type="text" name="attr_cliche1_spec" value="Specializations" title="cliche1_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 233px; left: 255px; width: 170px">
<label>2<input type="text" name="attr_cliche2_name" title="cliche2_name" style="width: 90px;"/><input type="text" name="attr_cliche2" style="width: 30px;"/>/<input type="number" name="attr_cliche2_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 263px; left: 255px; width: 170px">
<input type="text" name="attr_cliche2_spec" title="cliche2_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 293px; left: 255px; width: 170px">
<label>3<input type="text" name="attr_cliche3_name" title="cliche3_name" style="width: 90px;"/><input type="text" name="attr_cliche3" style="width: 30px;"/>/<input type="number" name="attr_cliche3_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 323px; left: 255px; width: 170px">
<input type="text" name="attr_cliche3_spec" title="cliche3_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 175px; left: 436px; width: 170px">
<label>4<input type="text" name="attr_cliche4_name" title="cliche4_name" style="width: 90px;"/><input type="number" name="attr_cliche4" style="width: 30px;"/>/<input type="number" name="attr_cliche4_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 204px; left: 436px; width: 170px">
<input type="text" name="attr_cliche4_spec" title="cliche4_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 233px; left: 436px; width: 170px">
<label>5<input type="text" name="attr_cliche5_name" title="cliche5_name" style="width: 90px;"/><input type="text" name="attr_cliche5" style="width: 30px;"/>/<input type="number" name="attr_cliche5_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 263px; left: 436px; width: 170px">
<input type="text" name="attr_cliche5_spec" title="cliche5_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 293px; left: 436px; width: 170px">
<label>6<input type="text" name="attr_cliche6_name" title="cliche6_name" style="width: 90px;"/><input type="text" name="attr_cliche6" style="width: 30px;"/>/<input type="number" name="attr_cliche6_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 323px; left: 436px; width: 170px">
<input type="text" name="attr_cliche6_spec" title="cliche6_spec" style="width: 170px;"/>
</div>
<!--equipment-->
<div style="position: absolute; top: 170px; left: 623px;">
<input type="text" name="attr_encum1" title="encum1" style="width: 145px;"/>
<input type="text" name="attr_encum2" title="encum2" style="width: 145px;"/>
<input type="text" name="attr_encum3" title="encum3" style="width: 145px;"/>
</div>
</div>
<div class="sheet-switch-ship" style="position: relative; height: 450px; width: 800px; top:0px; left: 0%;">
<!--cliches column 1-->
<div style="position: absolute; top: 35px; left: 10px; width: 170px">
<label>1<input type="text" name="attr_shipcliche1_name" title="shipcliche1_name" value="Cliche Name" style="width: 90px;"/><input type="number" name="attr_shipcliche1" style="width: 30px;"/>/<input type="number" name="attr_shipcliche1_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 64px; left: 10px; width: 170px">
<input type="text" name="attr_shipcliche1_spec" title="shipcliche1_spec" value="Specializations" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 93px; left: 10px; width: 170px">
<label>2<input type="text" name="attr_shipcliche2_name" title="shipcliche2_name" style="width: 90px;"/><input type="text" name="attr_shipcliche2" style="width: 30px;"/>/<input type="number" name="attr_shipcliche2_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 122px; left: 10px; width: 170px">
<input type="text" name="attr_shipcliche2_spec" title="shipcliche2_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 151px; left: 10px; width: 170px">
<label>3<input type="text" name="attr_shipcliche3_name" title="shipcliche3_name" style="width: 90px;"/><input type="text" name="attr_shipcliche3" style="width: 30px;"/>/<input type="number" name="attr_shipcliche3_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 180px; left: 10px; width: 170px">
<input type="text" name="attr_shipcliche3_spec" title="shipcliche3_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 209px; left: 10px; width: 170px">
<label>4<input type="text" name="attr_shipcliche4_name" title="shipcliche4_name" style="width: 90px;"/><input type="number" name="attr_shipcliche4" style="width: 30px;"/>/<input type="number" name="attr_shipcliche4_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 238px; left: 10px; width: 170px">
<input type="text" name="attr_shipcliche4_spec" title="shipcliche4_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 267px; left: 10px; width: 170px">
<label>5<input type="text" name="attr_shipcliche5_name" title="shipcliche5_name" style="width: 90px;"/><input type="text" name="attr_shipcliche5" style="width: 30px;"/>/<input type="number" name="attr_shipcliche5_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 296px; left: 10px; width: 170px">
<input type="text" name="attr_shipcliche5_spec" title="shipcliche5_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 325px; left: 10px; width: 170px">
<label>6<input type="text" name="attr_shipcliche6_name" title="shipcliche6_name" style="width: 90px;"/><input type="text" name="attr_shipcliche6" style="width: 30px;"/>/<input type="number" name="attr_shipcliche6_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 354px; left: 10px; width: 170px">
<input type="text" name="attr_shipcliche6_spec" title="shipcliche6_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 383px; left: 10px; width: 170px">
<label>7<input type="text" name="attr_shipcliche7_name" title="shipcliche7_name" style="width: 90px;"/><input type="text" name="attr_shipcliche7" style="width: 30px;"/>/<input type="number" name="attr_shipcliche7_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 412px; left: 10px; width: 170px">
<input type="text" name="attr_shipcliche7_spec" title="shipcliche7_spec" style="width: 170px;"/>
</div>
<!--cliches column 2-->
<div style="position: absolute; top: 35px; left: 190px; width: 170px">
<label>8<input type="text" name="attr_shipcliche8_name" title="shipcliche8_name" value="Cliche Name" style="width: 90px;"/><input type="number" name="attr_shipcliche8" style="width: 30px;"/>/<input type="number" name="attr_shipcliche8_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 64px; left: 190px; width: 170px">
<input type="text" name="attr_shipcliche8_spec" title="shipcliche8_spec" value="Specializations" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 93px; left: 190px; width: 170px">
<label>9<input type="text" name="attr_shipcliche9_name" title="shipcliche9_name" style="width: 90px;"/><input type="text" name="attr_shipcliche9" style="width: 30px;"/>/<input type="number" name="attr_shipcliche9_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 122px; left: 190px; width: 170px">
<input type="text" name="attr_shipcliche9_spec" title="shipcliche9_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 151px; left: 190px; width: 170px">
<label>10<input type="text" name="attr_shipcliche10_name" title="shipcliche10_name" style="width: 85px;"/><input type="text" name="attr_shipcliche10" style="width: 30px;"/>/<input type="number" name="attr_shipcliche10_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 180px; left: 190px; width: 170px">
<input type="text" name="attr_shipcliche10_spec" title="shipcliche10_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 209px; left: 190px; width: 170px">
<label>11<input type="text" name="attr_shipcliche11_name" title="shipcliche11_name" style="width: 85px;"/><input type="number" name="attr_shipcliche11" style="width: 30px;"/>/<input type="number" name="attr_shipcliche11_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 238px; left: 190px; width: 170px">
<input type="text" name="attr_shipcliche11_spec" title="shipcliche11_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 267px; left: 190px; width: 170px">
<label>12<input type="text" name="attr_shipcliche12_name" title="shipcliche12_name" style="width: 85px;"/><input type="text" name="attr_shipcliche12" style="width: 30px;"/>/<input type="number" name="attr_shipcliche12_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 296px; left: 190px; width: 170px">
<input type="text" name="attr_shipcliche12_spec" title="shipcliche12_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 325px; left: 190px; width: 170px">
<label>13<input type="text" name="attr_shipcliche13_name" title="shipcliche13_name" style="width: 85px;"/><input type="text" name="attr_shipcliche13" style="width: 30px;"/>/<input type="number" name="attr_shipcliche13_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 354px; left: 190px; width: 170px">
<input type="text" name="attr_shipcliche13_spec" title="shipcliche13_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 383px; left: 190px; width: 170px">
<label>14<input type="text" name="attr_shipcliche14_name" title="shipcliche14_name" style="width: 85px;"/><input type="text" name="attr_shipcliche14" style="width: 30px;"/>/<input type="number" name="attr_shipcliche14_max" style="width: 30px;"/></label>
</div>
<div style="position: absolute; top: 412px; left: 190px; width: 170px">
<input type="text" name="attr_shipcliche14_spec" title="shipcliche14_spec" style="width: 170px;"/>
</div>
<div style="position: absolute; top: 11px; left: 472px; width: 160px">
<input type="text" name="attr_shipname" title="shipname" style="width: 160px;"/>
</div>
<div style="position: absolute; top: 40px; left: 472px; width: 160px">
<input type="text" name="attr_shipclass" title="shipclass" style="width: 160px;"/>
</div>
<div style="position: absolute; top: 35px; left: 660px; width: 130px">
<input type="text" name="attr_cargo1" value="Cargo Type" title="cargo1" style="width: 100px;"/><input type="number" name="attr_cargo1load" style="width: 30px;"/>
<input type="text" name="attr_cargo2" style="width: 100px;"/><input type="number" name="attr_cargo2load" title="cargo2" style="width: 30px;"/>
<input type="text" name="attr_cargo3" style="width: 100px;"/><input type="number" name="attr_cargo3load" title="cargo3" style="width: 30px;"/>
<input type="text" name="attr_cargo4" style="width: 100px;"/><input type="number" name="attr_cargo4load" title="cargo4" style="width: 30px;"/>
<input type="text" name="attr_cargo5" style="width: 100px;"/><input type="number" name="attr_cargo5load" title="cargo5" style="width: 30px;"/>
<input type="text" name="attr_cargo6" style="width: 100px;"/><input type="number" name="attr_cargo6load" title="cargo6" style="width: 30px;"/>
<input type="text" name="attr_cargo7" style="width: 100px;"/><input type="number" name="attr_cargo7load" title="cargo7" style="width: 30px;"/>
<input type="text" name="attr_cargo8" style="width: 100px;"/><input type="number" name="attr_cargo8load" title="cargo8" style="width: 30px;"/>
<input type="text" name="attr_cargo9" style="width: 100px;"/><input type="number" name="attr_cargo9load" title="cargo9" style="width: 30px;"/>
<input type="text" name="attr_cargo10" style="width: 100px;"/><input type="number" name="attr_cargo10load" title="cargo10" style="width: 30px;"/>
<input type="text" name="attr_cargo11" style="width: 100px;"/><input type="number" name="attr_cargo11load" title="cargo11" style="width: 30px;"/>
<input type="text" name="attr_cargo12" style="width: 100px;"/><input type="number" name="attr_cargo12load" title="cargo12" style="width: 30px;"/>
<input type="text" name="attr_cargo13" style="width: 100px;"/><input type="number" name="attr_cargo13load" title="cargo13" style="width: 30px;"/>
<input type="text" name="attr_cargo14" style="width: 100px;"/><input type="number" name="attr_cargo14load" title="cargo14" style="width: 30px;"/>
</div>
</div> CSS .sheet-switch-pc-show:not(:checked)~.sheet-switch-pc {display:none;}
.sheet-switch-ship-show:not(:checked)~.sheet-switch-ship {display:none;}
.sheet-background {
width: 800px;
height: 450px;
}
.sheet-switch-pc::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background: url('<a href="http://i.imgur.com/7PcOsGV.jpg" rel="nofollow">http://i.imgur.com/7PcOsGV.jpg</a>');
background-size: 800px 450px;
}
.sheet-backgroundb {
width: 800px;
height: 450px;
}
.sheet-switch-ship::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background: url('<a href="http://i.imgur.com/yIKO14b.jpg" rel="nofollow">http://i.imgur.com/yIKO14b.jpg</a>');
background-size: 800px 450px;
}
.charsheet label {
color: rgb(166,199,224);
}
input.sheet-tab::before
{
content: attr(title);
border: solid 1px #a8a8a8;
border-bottom-color: black;
text-align: center;
display: inline-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: 50px;
height: 20px;
font-size: 18px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
