# archive stuff

<a href="/"><img src="http://i.imgur.com/sVDCKk0.png"></a>
<br><br>
<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

<div class="mtitle">navigate -</div>

</td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">

<tr><!--RIGA1-->
<td class="ww" width="245px" halign="center"><div class="qlknc"><div class="qlkn"><a href="xx">works</a></div> <div class="qlkn"><a href="xx">character</a></div><div class="qlkn"><a href="xx">codes</a></div><div class="qlkn"><a href="xx">resources</a></div></div></td>
<td class="aa" width="245px" halign="center"><div class="outlnc"><div class="outln"><a href="http://8tracks.com/timaeustyrant">8tracks</a></div><div class="outln"><a href="http://archiveofourown.org/users/timaeustyrant">ao3</a></div><div class="outln"><a href="https://charahub.com/user/timaeustyrant">charahub</a></div><div class="outln"><a href="https://listography.com/kingmorgue">listography</a></div><div class="outln"><a href="http://sintheliath.tumblr.com/">themes</a></div><div class="outln"><a href="http://nintengloom.tumblr.com/">personal</a></div></div></td>
<td class="ww" width="200px" halign="center"><div class="inizc"><div class="iniz"><a href="http://barcode.blogfree.net/?t=4881504"><img src="http://i.imgur.com/Vgx05ki.gif"></a></div><div class="iniz"><a href="http://barcode.blogfree.net/?t=4898235"><img src="http://i.imgur.com/qOZvs2h.gif"></a></div><div class="iniz"><img src="http://placehold.it/88x15"></div><div class="iniz"><a href="xx"><img src="http://placehold.it/88x15"></a></div><div class="iniz"><a href="xx"><img src="http://placehold.it/88x15"></a></div><div class="iniz"><a href="xx"><img src="http://placehold.it/88x15"></a></div></div>
<br><br>see more @ <a href="xx">page</a></td>
</tr>

</table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>

<div id="slideshow">

<!-- Radio -->
<input checked="checked" type="radio" name="pan" id="pan1">
<input type="radio" name="pan" id="pan2">
<input type="radio" name="pan" id="pan3">
<input type="radio" name="pan" id="pan4">
<div id="slides">
<div id="mask">
<div class="slide_content">

<div class="pannello" id="p1"> <!-- Pannello 1 -->
<table style="background: transparent" width="100%" valign="center">
<tr>
<td width="200px"><div class="linkle">
<a href="x"><i class="fa fa-folder-open-o"></i> works</a>
<a href="x"><i class="fa fa-code"></i> codes</a>
<a href="x"><i class="fa fa-file-zip-o"></i> characters</a>
<a href="x"><i class="fa fa-gears"></i> resources</a></div>
</td>
<td><div class="swant"><img src="http://i.imgur.com/aA8fewE.gif"></div><div class="swantwr"><b>pyramidion</b> - <i>collective</i>
<br>this collective was born to hold all of my graphic works and my css/html sheets. it's nothing fancy but does its job quite well.</class></td>
</tr>
<tr valign="center">
<td colspan="2" height="100px" align="center">
<img src="http://i.imgur.com/AB0BL4u.png"></td>
</tr>
</table>
</div>

<div class="pannello" id="p2"> <!-- Pannello 2 -->
<table align="center" valign="center" width="100%">
<tr valign="center">
<td width="50%">
<div class="lastwrtit">last works</div><br>
<div class="lastimg"><img src="http://i.imgur.com/PeWZhPR.gif"></div><div class="lastwrc"><div class="lastwr"><a href="x"><i class="fa fa-heart-o"></i> #9 icons</a></div> <div class="lastwr"><a href="x"><i class="fa fa-heart-o"></i> #8 icons</a></div> <div class="lastwr"><a href="x"><i class="fa fa-code"></i> #3 codes</a></div></div><div class="lastimgd"><img src="http://i.imgur.com/KOLQDGF.gif"></div></td>
<td width="50%">
<div class="charasi"><a href="x"><img src="http://i.imgur.com/nSKsbPM.png"></a></div>
<div class="charaspec">Diedritch - drafted / fave character</div></td>
</tr>
<tr valign="center">
<td colspan="2">
bannerone ?</td>
</tr>
</table>
</div>

<div class="pannello" id="p3"> <!-- Pannello 3 -->
e qua boh si vedrà
</div>
</div>
</div>
</div>

<div id="active">
<label for="pan1">links</label>
<label for="pan2">latest</label>
<label for="pan3">out</label>
</div>


</div>


/*TAB*/
.inizc {width: 225px}
.iniz {float: left; margin: 2px 5px; border: 3px solid #563E5D; opacity: 0.7; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; width: 88px; height: 15px}
.iniz:hover {opacity: 1; border: 3px solid #C4145A}
 /*quicklinks*/
.qlknc {width: 240px; margin: 0 auto}
.qlkn a, .qlkn a:visited, .qlkn a:active {float: left; width: 100px; margin: 3px 5px; padding: 4px; border: 1px solid #563E5D; color: #F17953; font-family: 'Cousine', Courier, sans-serif; font-size: 12px; text-align: center; letter-spacing: 1px; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out}
.qlkn a:hover {color: #E36698; border: 1px solid #C4145A}
 /*out links*/
.outlnc {width: 240px}
.outln a, .outln a:visited, .outln a:active {width: 100px; float: left; margin: 3px 5px; font-family: 'Cousine', Courier, sans-serif; font-size: 12px; text-align: center; letter-spacing: 1px; background: 181716; color: #F17953; padding: 4px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out}
.outln a:hover {background: transparent; color: #E34278}
/*ABOUT SECTION*/
#abt {display: block; width: 250px; padding: 4px; background: #F3F3F3; box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.35); font-family: 'Cousine', Courier, sans-serif; font-size: 12px; letter-spacing: 1px; line-height: 120%; color: #313131; position: absolute; left: 10px; top: 200px}
#abt .head {width: 250px; border: 2px solid #D01456}
#abt .desc {text-align: justify; padding: 5px}
#abt .desc a, .desc a:visited, .desc a:active, .desc a:hover {color: #D01456; text-decoration: underline}
#abt .lnkk a, .lnkk a:visited, .lnkk a:active {width: 81px; display: block; background: #ED3A79; font-size: 8px; text-align: center; margin: 3px 1px; color: #F3F3F3; float:left; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out}
#abt .lnkk a:hover {color: #ED3A79; background: #F3F3F3}
#abt .desck {font-family: georgia, sans-serif; font-size: 8px; text-transform: uppercase; text-align: center; letter-spacing: 1px; margin: 3px; color: #07023A}
#abt .desck b {color: #EC66A9}
/*FANLIST*/
#fl {-webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; opacity: 0.5; float:left; margin: 3px 3px}
#fl:hover {opacity: 1}
/* SLIDESHOW A SCORRIMENTO AUTOMATICO - http://ffmagazine.forumfree.it/?t=65226584 */
#slideshow {width: 700px; padding: 10px; margin: 10px auto; text-align: center} #slideshow input {display: none}
#mask {width: 100%; overflow:hidden}
#slides {background: #080606; padding: 10px; border: 45px transparent; -webkit-border-image: url(http://i.imgur.com/s83Z3oY.png) 50 round; /* Safari 3.1-5 */
 -o-border-image: url(http://i.imgur.com/s83Z3oY.png) 50 round; /* Opera 11-12.1 */
 border-image: url(http://i.imgur.com/s83Z3oY.png) 50 round}

.slide_content {position: relative; width: 500%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}

#pan1:checked ~ #slides .slide_content {margin-left: 0}
#pan2:checked ~ #slides .slide_content {margin-left: -100%}
#pan3:checked ~ #slides .slide_content {margin-left: -200%}
#pan4:checked ~ #slides .slide_content {margin-left: -300%}

.pannello {width: 20%; float: left; font-family: georgia; font-size: 12px; color: #555}

#active {margin-top: 5px}
#active label {display: inline-block; border-bottom: 3px solid #640B0F; color: #D8CFB1; cursor: pointer; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; font-family: georgia; font-size: 15px; font-weight: bold}
#active label:hover {color: #890000}

#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4) {border-bottom: 3px solid #641918; color: #C1A36F}
/*fast links*/
.linkle, .linkle a, .linkle a:visited, .linkle a:active {display: inline-block; margin: 5px; font-family: georgia; font-size: 14px; text-align: left; color: #C1A36F; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out}
.linkle a:hover {color: #641918}
/*latest*/
.lastimg {max-width: 70px; max-height: 65px; float: left; margin: 0 3px 0 0}
.lastimgd {max-width: 70px; max-height: 65px; float: right; margin: 0 0 0 3px}
.lastxt a:hover {color: #C1A36F}
/*decript*/
.swant {float: left; margin: 0 4px 0 0}
.swantwr {height: 100px; text-align: justify; line-height: 150%; padding: 3px; overflow: auto}
.swantwr b {color: #641918}
.swantwr i {color: #D8CFB1}
/*latest*/
.lastwrc {display: inline-block; float: center; width: 100px; text-align: center}
.lastwr a, .lastwr a:active, .lastwr a:visited {font-size: 16px; color: #641918; margin: 2px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out}
.lastwr a:hover {color: #C1A36F}
.lastwrtit {font-size: 20px; color: #641918; font-family: georgia, serif; text-align: center; display: inline-block; margin: 0 0 3px 0}
/*fave characters*/
.charasi {max-width: 246px; max-height: 50px; margin: 0 0 2px 0; display: inline-block; border: 2px solid #641918; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out}
.charasi:hover {border: 2px solid #D8CFB1}
.charaspec {font-family: georgia, sans-serif; font-size: 11px; padding: 2px; color: #C1A36F; letter-spacing: 1px}