deanlirium TAGS #1 - from the lighthouse pack

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head><title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">

<!---

▣▣▣
TAGS PAGE #1 BY DEANLIRIUM
▣▣▣

PLEASE like and/or reblog the theme post if you use! Edit as you want but YOU MUST leave the credit. Seriously though if you need a base code just google it!
if you need anything please ask me OFF ANON so that I can reply privately! :)

--->

<script type="text/javascript" src="http://static.tumblr.com/t0g3sds/Xxmn9cdk0/shine.min.js"></script>

<link href='http://fonts.googleapis.com/css?family=Lustria|Poiret+One|Crete+Round|Oswald:700|Montserrat:700|Fjalla+One|Orienta|Noto+Sans:700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <script src="http://static.tumblr.com/t0g3sds/Gahn9huzv/modernizr.custom.04022.js"></script>

 <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:200,
attribute:"title"
});
});
})(jQuery);
</script>

   <style type="text/css">


@font-face {font-family:Bebas Neue;src:url('http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf');}

/*--scrollbar--*/

::-webkit-scrollbar-thumb:vertical {height:5px; background-color:#aaa;}                                             /*change scrollbar color*/
::-webkit-scrollbar-thumb:horizontal {background-color:#aaa;}                                                            /*change scrollbar color*/
::-webkit-scrollbar {background-color:transparent;height:0px;width:4px;border:2px solid transparent;}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{background-color:#ffffff;display:block;height:0px;border-right:0px solid transparent;border-left:0px solid transparent;
}

::selection {
    color:#444444;}
::-moz-selection {
    color:#444444;}
::-webkit-selection {
    color:#444444;}

body {
    background-color:#ffffff; /*change background color*/
    background-image:url(''); /*set a background image if needed*/
    background-attachment:fixed;
    font-family:calibri;
    color:#848182;  /*change text color; for this and all the other colors you can use www.colorpicker.com*/
    font-size:10px;}

a {
    color:#ffffff; /*change link color*/
    text-decoration:none;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;}
    a:hover {
    color:#ffffff; /*change link color on hover*/
    text-decoration:none;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;}

img {
    border:none;
    padding-bottom:none;
    display: block;}

h1 {
    font-size:12px;
    font-family:'cambria';
    font-style:italic;
    font-weight:normal;
    line-height:10px;
    text-align:center;}

#sidebar {
    margin-left: -200px;
    left:50%;
    overflow:hidden;
    line-height:15px;
    width: 400px;
    height:400px;
    text-align: center;
    margin-top:-140px;}

#sidebarimg img{
    width:400px;
    height:400px;
    margin-top:0px;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;}

#description {
    width:300px;
    height:200px;
    margin-left:42px;
    padding:10px;
    padding-bottom:0px;
    padding-top:3px;
    text-align:justify;
    margin-top:15px;
    position:fixed;}

#links {
    margin-top:-290px;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;}
#links a {
    padding:5px;
    margin-right:0px;
    font-family:'cambria';
    font-style:italic;
    font-size:13px;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;}
#links a:hover{
    text-shadow: 0 1px 1px #444444;}

#cred {
    left:-60px;
    bottom:6px;
    font-size:9px;
    padding:5px;
    color:#848182;
    z-index:2147483647;
    text-transform:uppercase;
    border:1px solid transparent;
    position:fixed;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;}

#cred:hover {
    left:6px;
    background:white;
    border-bottom:1px solid #eeeeee;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    }
#cred:hover a{
    color:#768297;}
#cred a{
    color:#848182;}

#s-m-t-tooltip {
    max-width:300px;
    padding:5px;
    padding-top:2px;
    padding-bottom:2px;
    margin:5px 0px 0px 10px;
    background-color:#ffffff;
    font-family:calibri;
    font-size:8px;
    line-height:8px;
    text-transform:uppercase;
    color:#848182;
    z-index:2147483647;}

#title {
    margin-left:-200px;
    width:400px;
    font-size:30px; /*change title size*/
    top:0px;
    padding-top:20px;
    font-weight:bold; }

header {
    position: fixed;
    width: 100%;
    top:110px;
    height: 190px;
    left:50%;
    margin-left:0px;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;}

.demo-text {
    color: #fcfcfc; /*change title color*/
    font-style:normal;
    text-align:center;
    text-transform:uppercase;
    font-family: 'Montserrat'; /*change title font; choose between Montserrat, Lustria, Poiret One, Crete Round, Oswald, Fjalla One, Orienta, Noto Sans, Helvetica, Cambria, Bebas Neue, Times New Roman*/
    font-weight: 700;
    line-height:70px;}

      /*--Cursor code--*/

   *, body, img, a, a:hover {cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png"), auto}

.tabs {
    position: relative;
	width: 300px;
	height:300px;}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 80px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;}
.tabs input#tab-2{
	top: 25px;}
.tabs input#tab-3{
	top: 50px;}
.tabs input#tab-4{
	top: 75px;}
.tabs input#tab-5{
	top: 100px;}
.tabs input#tab-6{
	top: 125px;}
.tabs input#tab-7{
	top: 150px;}
.tabs input#tab-8{
	top: 175px;}

.tabs label {
	background: rgba(255,255,255,1); /*change unchecked tabs color, use RGB values (on sites like colorpicker or rgbtool! the final 1 is the opacity of the closed tabs, change it it needed*/
	font-size: 8px;
	line-height: 25px;
	height: 25px;
	position: relative;
	padding: 0 10px;
	display: block;
	width: 70px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: right;
	float: left;
	clear: both;
	border-left:solid 5px #fff;}

.tabs label:after {
    content: '';
	position: absolute;
	right: -2px;
	top: 0;
	width: 2px;
	height: 100%;}

.tabs input:hover + label {
	background: rgba(255,255,255,0.5);} /*change unchecked tabs color WHEN HOVERING, use RGB values (on sites like colorpicker or rgbtool! the final 0.5 is the opacity of the closed tabs, change it it needed*/

.tabs label:first-of-type {
    z-index: 8;}

.tab-label-2 {
    z-index: 7;}

.tab-label-3 {
    z-index: 6;}

.tab-label-4 {
    z-index: 5;}

.tab-label-5 {
    z-index: 4;}

.tab-label-6 {
    z-index: 3;}

.tab-label-7 {
    z-index: 2;}

.tab-label-8 {
    z-index: 1;}

.tabs input:checked + label {
	background: rgba(255,255,255,0.5); /*change checked tab color, use RGB values (on sites like colorpicker or rgbtool! the final 0.5 is the opacity of the closed tabs, change it it needed*/
	z-index: 6;}

.clear-shadow {
	clear: both;}

.content {
	background: rgba(255,255,255,0.5); /*change tags box background color, use RGB values (on sites like colorpicker or rgbtool! the final 0.5 is the opacity of the closed tabs, change it it needed*/
	position: fixed;
    width: 200px;
    top:244px;
    margin-left:95px;
	height: 200px;
	z-index: 5;
	overflow: hidden;}

.content div {
    position:fixed;
    overflow-y:scroll;
    border:solid 20px transparent;
    width:160px;
    height:160px;
	z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    transition: all linear 0.5s;}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4,
.tabs input.tab-selector-5:checked ~ .content .content-5,
.tabs input.tab-selector-6:checked ~ .content .content-6,
.tabs input.tab-selector-7:checked ~ .content .content-7,
.tabs input.tab-selector-8:checked ~ .content .content-8 {
	z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -moz-transition: opacity ease-out 0.2s 0.1s;
    -o-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;}

.content a{
    margin-top:5px;
    color:#848182;   /*change the color of the tags*/
    display:block;
    width:100%;
    margin-left:10px;
    padding-left:10px;
    font-family:cambria;
    font-size:10px;
    border-left:solid 0px transparent;
    letter-spacing:0.1em;
    font-style:italic;}

.content a:hover{
    color:#bbb;
    border-left:solid 10px #ffffff;}  /*change the color of the border that appears when you hover on the tags*/

</style></head>

<body>

<header><h1 id="title" class="demo-text">tags</h1>

<div id="sidebar">
<div id="sidebarimg">

<!--- change the image; upload it somewhere (like the tumblr static uploader, just google it!), get the direct url and paste it below instead of the one I put! --->

<img src="http://static.tumblr.com/4a5284c34714e1f7b3a6aaf78dccffe5/t0g3sds/B9nn9fmvw/tumblr_static_bh3f6z0mako4c8cok0kwwscgo.jpg"></div>

<div id="links">
<a href="/" title="home">i.</a>
<a href="/ask" title="letters">ii.</a>

<!--- add custom links --->

<a href="link url" title="link title">iii.</a>
<a href="link url" title="link title">iv.</a>
<a href="link url" title="link title">v.</a>
<a href="link url" title="link title">vi</a>

</div>

<div id="description">

<section class="tabs">

	   <!--- tab buttons; change 'category' into what you need --->

<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked">
<label for="tab-1" class="tab-label-1">category</label>

<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2">
<label for="tab-2" class="tab-label-2">category</label>

<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3">
<label for="tab-3" class="tab-label-3">category</label>

<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4">
<label for="tab-4" class="tab-label-4">category</label>

<input id="tab-5" type="radio" name="radio-set" class="tab-selector-5">
<label for="tab-5" class="tab-label-5">category</label>

<input id="tab-6" type="radio" name="radio-set" class="tab-selector-6">
<label for="tab-6" class="tab-label-6">category</label>

<input id="tab-7" type="radio" name="radio-set" class="tab-selector-7">
<label for="tab-7" class="tab-label-7">category</label>

<!--- if you need less tabs just delete the ones you don't need, for example from here --->

<input id="tab-8" type="radio" name="radio-set" class="tab-selector-8">
<label for="tab-8" class="tab-label-8">category</label>

<!--- to here --->

			    <div class="clear-shadow"></div>

		        <div class="content">
			        <div class="content-1">

			        <!--- first tab content; to set your tags put your tag name after/tagged/ instead of example-tag, use a hyphen instead of the space between words. Then change 'tag' into whatever you want the link to show as title! --->

						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>

						<!--- if you need more or less tag just copy or delete the lines you need! --->

				    </div>

			        <div class="content-2">

			        <!--- second tab content --->

						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>

				    </div>

			        <div class="content-3">

			        <!--- third tab content --->

						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>

				    </div>
				    <div class="content-4">

			        <!--- fourth tab content --->

						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>

				    </div>

				    <div class="content-5">

				    <!--- fifth tab content --->

						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>

				    </div>


				    <div class="content-6">

			        <!--- sixth tab content --->

						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>

				    </div>


				    <div class="content-7">

			        <!--- seventh tab content --->

						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>

				    </div>


				    <div class="content-8">

			        <!--- eight tab content --->

						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>
						<a href="/tagged/example-tag">tag</a>

				    </div>

		        </div>
			</section>

</div></div></header></div></div></div>



<div id="cred">
<a href="http://deanlirium.tumblr.com/">deanlirium <span style="font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;╳</span></a>
</div></div></div></div></div></div></div>

</body>


    <script type="text/javascript">
      var shine = new Shine(document.getElementById('title'));

      function handleMouseMove(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
      }

      window.addEventListener('mousemove', handleMouseMove, false);


var config = new shinejs.Config({
  numSteps: 5,
  opacity: 0.5,
  opacityPow: 1.8,
  offset: 0.15,
  blur: 40,
  blurPow: 1,
  shadowRGB: new shinejs.Color(68,68,68) /*change the shadow color using RGB colors; websites like www.colorpicker.com or www.rgbtool.com will help, just select your color and write here the numerical values next to R, G and B next to the color slidebar - remember to use a comma between the values!*/

});

shine.config = config;
shine.draw();

/*If you want to disable the shadow auto pilot, delete from here*/

function update() {
        window.requestAnimationFrame(update);
        var time = new Date().getTime();
        var speed = 0.00018;  // 1 = 1000 rotations/s
        var phase = time * speed * 2.0 * Math.PI;
        var radiusX = window.innerWidth * 0.5;
        var radiusY = window.innerHeight * 0.5;
        shine.light.position.x = radiusX + radiusX * Math.cos(phase);
        shine.light.position.y = radiusY + radiusY * Math.sin(phase * 0.7);
        shine.draw();
      }

      update();

/*to here!*/

    </script>

</html>