template1 [dohtml]
[dohtml]<style type="text/css">.altairs {
position: relative;
width: 400px;
height: 480px;
background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4184/4184137.png?1395276556);
border: solid 10px #B6CFD3;
}
.altair {
float: left;
}
.altair label {
display: block;
width: 40px;
background-color: #FFCEDA;
padding: 7px;
color: #E56178;
position: relative;
left: 30px;
top: 430px;
margin-right: 4px;
font-family: arial;
font-size:10px;
text-transform: uppercase;
text-align: center;
}
.altair [type=radio] {
display: none;
}
.rigel {
position: absolute;
top: 30px;
bottom: 0px;
left: 30px;
right: 0px;
background-color: #B6CFD3;
padding: 20px;
width: 300px;
height: 350px;
text-align: justify;
font-family: verdana;
font-size: 9px;
border: 2px solid #6E4937;
overflow: auto;
}
.rigel::-webkit-scrollbar { width: 2px; height: 2px; }
.rigel::-webkit-scrollbar-track { background-color: #EBEBE9; }
.rigel::-webkit-scrollbar-thumb { background-color: #E56178; }
[type=radio]:checked ~ label {
background-color: #E56178;
color: #FFCEDA;
z-index: 2;
}
[type=radio]:checked ~ label ~ .rigel {
z-index: 1;
}</style>
<center><div class="altairs">
<div class="altair">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">ONE</label>
<div class="rigel">
tab one stuff
</div>
</div>
<div class="altair">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Two</label>
<div class="rigel">
tab two stuff
</div>
</div>
<div class="altair">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Three</label>
<div class="rigel">
tab three stuff
</div>
</div>
<div class="altair">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">four</label>
<div class="rigel">
tab four stuff
</div>
</div>
<div class="altair">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">five</label>
<div class="rigel">
tab five stuff
</div>
</div>
<div class="altair">
<input type="radio" id="tab-6" name="tab-group-1">
<label for="tab-6">six</label>
<div class="rigel">
tab six stuff
</div>
</div>
</div><div style="width:400px; text-align:right; font-size:16px;"><a href="http://shine.b1.jcink.com/index.php?showuser=8866">♣</a></center>[/dohtml]
|