Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!--- Theme by iamthemelocked
- DO NOT REMOVE THE CREDIT
- DO NOT COPY
- DO NOT CLAIM AS YOUR OWN
- IF YOU DO THEN I´LL MAKE YOU INTO SHOES
- BIT NOT GOOD, ISN´T IT?--->
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
- <title>Navi /// {Title}</title>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.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:0,tip_fade_speed:600,attribute:"title"});});})(jQuery);</script>
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
- <link rel="shortcut icon" href="{favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <!--- SPECIAL FONTS --->
- <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
- <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic|Inconsolata:400,700' rel='stylesheet' type='text/css'>
- <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
- <!--- SPECIAL FONTS --->
- <style type="text/css">
- /* basic styles */
- /* --- SCROLLBAR ---*/
- ::-webkit-scrollbar {background-color:white; height:5px; width:4px}::-webkit-scrollbar-thumb:vertical {background-color:#e5de71; height:40px;}::-webkit-scrollbar-thumb:horizontal {background-color:#f6f6f6; height:5px!important}
- iframe#tumblr_controls {top:auto;bottom:0;z-index:98;opacity:.4!important;position:fixed!important;-webkit-transition:opacity .4s linear;transition:opacity .4s linear;}
- iframe#tumblr_controls:hover {opacity:.67!important;}
- /* --- SCROLLBAR ---*/
- /* --- BODY ---*/
- #s-m-t-tooltip{
- position:absolute;
- margin-top: 15px;
- margin-left:15px;
- z-index:9999999999999;
- background:#222222;
- color:#fff;
- text-transform:uppercase;
- letter-spacing:0.5px;
- font-family:calibri;
- line-height:13px;
- max-width:300px;
- font-size:8px;
- padding:2px 6px;
- -webkit-transition:all 0.4s;
- -moz-transition:all 0.4s;
- -ms-transition:all 0.4s;
- -o-transition:all 0.4s;
- transition:all 0.4s;
- }
- body {
- color: #222222;
- background:#fafafa;
- font: 9px 'Trebuchet MS', sans-serif;
- overflow:hidden;
- font-family:'open sans', 'helvetica neue', arial, sans-serif;
- }
- *, body, a, a:hover {cursor: url(http://33.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto;}
- b, strong {color: color:#222;word-wrap:normal;}
- i, em {color: color:#222};word-wrap:normal;}
- p {margin-top:5px;margin-bottom:5px}
- ol {list-style:normal;}
- ul {list-style:square;}
- small {font-size:8px;}
- big {font-size:10px;}
- blockquote {
- padding-left:10px;
- margin-left:10px;
- margin-top:5px;
- border-left:1px solid;
- }
- a {
- font-weight:normal;
- word-wrap:initial;
- text-decoration:none;
- word-wrap: break-word;
- -moz-outline-style:none;
- -webkit-transition:all 0.5s;
- -moz-transition:all 0.5s;
- -ms-transition:all 0.5s;
- -o-transition:all 0.5s;
- transition:all 0.5s;
- }
- a:hover {
- -moz-outline-style:none;
- -webkit-transition:all 0.5s;
- -moz-transition:all 0.5s;
- -ms-transition:all 0.5s;
- -o-transition:all 0.5s;
- transition:all 0.5s;
- }
- /* --- BODY ---*/
- /* --- BOXES ---*/
- #navi{
- margin-top:150px;
- left:0;right:0;margin-left:auto;margin-right:auto;
- height:351px;
- width:658px;
- text-align:left;
- z-index:999999;
- background:white;
- opacity:1;
- display:inline-block;
- position:fixed;
- border-bottom:5px solid black;
- overflow:hidden;
- -webkit-transition:all 0.5s;
- -moz-transition:all 0.5s;
- -ms-transition:all 0.5s;
- -o-transition:all 0.5s;
- transition:all 0.5s;
- }
- .box {
- float:right;
- width:460px;
- margin-top: -111px;
- margin-left:126px;
- height:316px;
- overflow:auto;
- background:white;
- display:block;
- text-align:left;
- position: absolute;
- top:141px;
- left:-65px;
- }
- .box a {
- font-family:calibri;
- font-size:8px;
- display:inline-block;
- width:125px;
- height:10px;
- border-left:3px solid black;
- overflow:hidden;
- letter-spacing:1px;
- padding:4px 4px 4px 8px;
- background:#f8f8f8;
- color:#b6b6b6;
- margin:1px 4px;
- text-decoration: none!important;
- outline:none;
- text-transform:uppercase;
- }
- .box a:hover{color:#ffffff;}
- .box a:hover:nth-child(5n+1){box-shadow:inset 150px 0 0 0 #df6c7a;}
- .box a:hover:nth-child(5n+2){box-shadow:inset 150px 0 0 0 #df9a6c;}
- .box a:hover:nth-child(5n+3){box-shadow:inset 150px 0 0 0 #e5de71;}
- .box a:hover:nth-child(5n+4){box-shadow:inset 150px 0 0 0 #8bea71;}
- .box a:hover:nth-child(5n+5){box-shadow:inset 150px 0 0 0 #97c5e0;}
- #boximage img{
- width:113px;
- height:300px;
- position:absolute;
- margin-top:28px;
- padding:2px;
- -webkit-filter: grayscale(100%);
- -moz-filter: grayscale(100%);
- filter: grayscale(100%);
- border:1px solid #f8f8f8;
- margin-left:525px;
- }
- [type=radio]:checked ~ label {text-align:right;color:#fff;background-color:#df6c7a;text-decoration:none!important;font-weight:bold;}
- [type=radio]:checked ~ label {background:#f8f8f8;color:#000;}
- [type=radio]:checked ~ label ~ .box {z-index: 1;}
- .click label{color:white;width:12px;padding:5px;margin:85px 0px -83px 0px;text-transform: uppercase;height:12px;text-align:center;display:block;font-family:calibri;font-size:10px;line-height:12px;background:black;}
- .click label:hover {color:white;background-color:#e5de71;}
- .click [type=radio] {display: none;}
- /* --- BOXES ---*/
- /* --- TITLES ---*/
- #title {
- text-transform:uppercase;
- font-family:'open sans', 'helvetica neue', arial, sans-serif;
- color:#fff;
- position:relative;
- margin-top:-16px;
- width:340px;
- overflow:hidden;
- display:block;
- text-align:left;
- margin-left:5px;
- letter-spacing:1px;
- font-size:13px;
- }
- .sub {
- font-weight:bold;
- font-family: 'Montserrat', sans-serif;
- font-size:12px;
- background:#f8f8f8;
- color:#000;
- text-align:right;
- width:425px;
- margin-left:4px;
- line-height:13px;
- margin-bottom:5px;
- text-transform:uppercase;
- padding:3px 8px 2px 8px;
- }
- /* --- TITLES ---*/
- /* --- LINKS ---*/
- #links {
- margin-top:120px;
- left:0;right:0;margin-left:auto;margin-right:auto;
- width:650px;
- height:12px;
- text-align:right;
- padding:8px 4px;
- opacity:1;
- background-color:#000;
- z-index:9999999999999999;
- position:absolute;
- }
- #links a{
- text-transform:uppercase;
- font-size:8px;
- width:auto;
- padding:0px;
- font-family:calibri;
- color:#fff;
- margin:0px 8px 0px 8px;
- position:relative;
- letter-spacing:0.5px;
- display:inline-block;
- }
- #links a:before{
- content:'';
- top:95%;
- width:0%;
- height:1px;
- right:50%;
- background:transparent;
- position:absolute;
- transition:all .2s linear;
- -webkit-transition:all .2s linear;
- -moz-transition:all .2s linear;
- -o-transition:all .2s linear;
- }
- #links a:hover::before{
- width:100%;
- right:0%;
- background:#e5de71;
- }
- /* --- LINKS ---*/
- /* --- SELECTION ---*/
- ::selection {
- background-color:#fff;
- color:#222;
- border-radius:2px;
- }
- ::-moz-selection {
- background-color:#fff;
- color:#222;
- border-radius:2px;
- }
- /* --- SELECTION ---*/
- /* --- DON´T DELETE THE CREDIT PLEASE ---*/
- .credit, .credit a {
- width:12px;
- height:12px;
- bottom:5px;
- right:6px;
- padding:2px;
- font-size:8px;
- letter-spacing:1px;
- color:white;
- line-height:17px;
- line-height:170%;
- position:fixed;
- text-align:center;
- font-family:calibri;
- text-transform:uppercase;
- background-color:#e5de71;
- border:1px solid #cccccc;
- z-index:9999999999999999999999;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .credit a:hover {
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- background-color:black;
- color:white;
- transform:rotate(360deg);
- -ms-transform:rotate(360deg);
- -webkit-transform:rotate(360deg);}
- /* --- DON´T DELETE THE CREDIT PLEASE ---*/
- {CustomCSS}
- </style>
- <div id="navi">
- <div id="boximage"><img src="http://static.tumblr.com/9c6e0afe0ec7c59ef55a76d2323371a6/xasysa0/7M9nr9xdt/tumblr_static_9om94yw8g4kko80g0go4cck8s.jpg"></div>
- <div class="click">
- <input type="radio" id="tab-1" name="tab-group-1" checked>
- <label for="tab-1"><a title="Nonfandom">#1</a></label>
- <div class="box">
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #5</a>
- <a href="/tagged/">your tag #6</a>
- <a href="/tagged/">your tag #7</a>
- <a href="/tagged/">your tag #8</a>
- <a href="/tagged/">your tag #9</a>
- <a href="/tagged/">your tag #10</a>
- <a href="/tagged/">your tag #11</a>
- <a href="/tagged/">your tag #12</a>
- <a href="/tagged/">your tag #13</a>
- <a href="/tagged/">your tag #14</a>
- <a href="/tagged/">your tag #15</a>
- </br></br></br>
- <div class="sub">Tags Section Title ··· </div>
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #5</a>
- <a href="/tagged/">your tag #6</a>
- <a href="/tagged/">your tag #7</a>
- <a href="/tagged/">your tag #8</a>
- <a href="/tagged/">your tag #9</a>
- <a href="/tagged/">your tag #10</a>
- <a href="/tagged/">your tag #11</a>
- <a href="/tagged/">your tag #12</a></br></br>
- <a href="/tagged/">your tag #13</a>
- <a href="/tagged/">your tag #14</a>
- <a href="/tagged/">your tag #15</a>
- </div></div>
- <div class="click">
- <input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">
- <a title="Mine">#2</a></label>
- <div class="box">
- <div class="sub">Tags Section Title ··· </div>
- <a href="/tagged/">Lorem ipsum</a>
- <a href="/tagged/">dolor sit</a>
- <a href="/tagged/">amet consectetur</a>
- <a href="/tagged/">adipiscing</a>
- <a href="/tagged/">elit sed do eiusmod</a>
- <a href="/tagged/">et dolore magna</a>
- <a href="/tagged/">aliqua</a>
- <a href="/tagged/">Ut enim ad minim</a>
- <a href="/tagged/">veniam</a>
- <a href="/tagged/">quis nostrud exercitation</a>
- <a href="/tagged/">ullamco laboris</a>
- <a href="/tagged/">nisi ut aliquip ex ea</a>
- <a href="/tagged/">commodo consequat</a>
- <a href="/tagged/">Lorem ipsum</a>
- <a href="/tagged/">dolor sit</a>
- <a href="/tagged/">amet consectetur</a>
- <a href="/tagged/">adipiscing</a>
- <div class="sub">Tags Section Title ··· </div>
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- </div></div>
- <div class="click">
- <input type="radio" id="tab-3" name="tab-group-1">
- <label for="tab-3"><a title="Game Of Thrones">#3</a></label>
- <div class="box">
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #5</a>
- <a href="/tagged/">your tag #6</a>
- <a href="/tagged/">your tag #7</a>
- <a href="/tagged/">your tag #8</a>
- </br></br>
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #5</a>
- <a href="/tagged/">your tag #6</a>
- <a href="/tagged/">your tag #7</a>
- <a href="/tagged/">your tag #8</a>
- <a href="/tagged/">your tag #9</a>
- <a href="/tagged/">your tag #10</a>
- <a href="/tagged/">your tag #11</a>
- <a href="/tagged/">your tag #12</a>
- </br>
- <div class="sub">Tags Section Title ··· </div>
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- </div></div>
- <div class="click">
- <input type="radio" id="tab-4" name="tab-group-1">
- <label for="tab-4"><a title="Breaking Bad">#4</a></label>
- <div class="box">
- <a href="/tagged/">Lorem ipsum</a>
- <a href="/tagged/">dolor sit</a>
- <a href="/tagged/">amet consectetur</a>
- <a href="/tagged/">adipiscing</a>
- <a href="/tagged/">elit sed do eiusmod</a>
- <a href="/tagged/">et dolore magna</a>
- <a href="/tagged/">aliqua</a>
- <a href="/tagged/">Ut enim ad minim</a>
- <a href="/tagged/">veniam</a>
- <a href="/tagged/">quis nostrud exercitation</a>
- <a href="/tagged/">ullamco laboris</a>
- <a href="/tagged/">nisi ut aliquip ex ea</a>
- <a href="/tagged/">commodo consequat</a>
- <a href="/tagged/">Lorem ipsum</a>
- <a href="/tagged/">dolor sit</a>
- <a href="/tagged/">amet consectetur</a>
- <a href="/tagged/">adipiscing</a>
- <a href="/tagged/">elit sed do eiusmod</a>
- <a href="/tagged/">et dolore magna</a>
- <a href="/tagged/">aliqua</a>
- <a href="/tagged/">Ut enim ad minim</a>
- <a href="/tagged/">veniam</a>
- <a href="/tagged/">quis nostrud exercitation</a>
- <a href="/tagged/">ullamco laboris</a>
- <a href="/tagged/">nisi ut aliquip ex ea</a>
- <a href="/tagged/">commodo consequat</a>
- </br></br>
- <a href="/tagged/">Lorem ipsum</a>
- <a href="/tagged/">dolor sit</a>
- <a href="/tagged/">amet consectetur</a>
- <a href="/tagged/">adipiscing</a>
- <a href="/tagged/">elit sed do eiusmod</a>
- <a href="/tagged/">et dolore magna</a>
- </div></div>
- <div class="click">
- <input type="radio" id="tab-5" name="tab-group-1">
- <label for="tab-5"><a title="BBC Sherlock">#5</a></label>
- <div class="box">
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- </br></br>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #5</a>
- <a href="/tagged/">your tag #6</a>
- <a href="/tagged/">your tag #7</a>
- <a href="/tagged/">your tag #8</a>
- <a href="/tagged/">your tag #9</a>
- <a href="/tagged/">your tag #10</a>
- <a href="/tagged/">your tag #11</a>
- <a href="/tagged/">your tag #12</a>
- <a href="/tagged/">your tag #13</a>
- </br></br>
- <div class="sub">Tags Section Title ··· </div>
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #5</a>
- <a href="/tagged/">your tag #6</a>
- <a href="/tagged/">your tag #7</a>
- <a href="/tagged/">your tag #8</a>
- <a href="/tagged/">your tag #9</a>
- </div></div>
- <div class="click">
- <input type="radio" id="tab-6" name="tab-group-1">
- <label for="tab-6"><a title="Doctor Who">#6</a></label>
- <div class="box">
- <a href="/tagged/">Lorem ipsum</a>
- <a href="/tagged/">dolor sit</a>
- <a href="/tagged/">amet consectetur</a>
- <a href="/tagged/">adipiscing</a>
- </br></br>
- <a href="/tagged/">elit sed do eiusmod</a>
- <a href="/tagged/">et dolore magna</a>
- <a href="/tagged/">aliqua</a>
- <a href="/tagged/">Ut enim ad minim</a>
- <a href="/tagged/">veniam</a>
- <a href="/tagged/">quis nostrud exercitation</a>
- <a href="/tagged/">ullamco laboris</a>
- <a href="/tagged/">nisi ut aliquip ex ea</a>
- <a href="/tagged/">commodo consequat</a>
- </br></br>
- <a href="/tagged/">elit sed do eiusmod</a>
- <a href="/tagged/">et dolore magna</a>
- <a href="/tagged/">aliqua</a>
- <a href="/tagged/">Ut enim ad minim</a>
- <a href="/tagged/">veniam</a>
- <a href="/tagged/">quis nostrud exercitation</a>
- <a href="/tagged/">ullamco laboris</a>
- <a href="/tagged/">nisi ut aliquip ex ea</a>
- <a href="/tagged/">commodo consequat</a>
- </br></br>
- <a href="/tagged/">Lorem ipsum</a>
- <a href="/tagged/">dolor sit</a>
- <a href="/tagged/">amet consectetur</a>
- </div></div>
- <div class="click">
- <input type="radio" id="tab-7" name="tab-group-1">
- <label for="tab-7"><a title="Hannibal">#7</a></label>
- <div class="box">
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #5</a>
- <a href="/tagged/">your tag #6</a>
- <a href="/tagged/">your tag #7</a>
- <a href="/tagged/">your tag #8</a>
- <a href="/tagged/">your tag #9</a>
- <a href="/tagged/">your tag #10</a>
- <a href="/tagged/">your tag #11</a>
- <a href="/tagged/">your tag #12</a>
- <a href="/tagged/">your tag #13</a>
- <a href="/tagged/">your tag #14</a>
- <a href="/tagged/">your tag #15</a>
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #5</a>
- <a href="/tagged/">your tag #6</a>
- <a href="/tagged/">your tag #7</a>
- <a href="/tagged/">your tag #8</a>
- <a href="/tagged/">your tag #9</a>
- <a href="/tagged/">your tag #10</a>
- <a href="/tagged/">your tag #11</a>
- <a href="/tagged/">your tag #12</a>
- <a href="/tagged/">your tag #13</a>
- <a href="/tagged/">your tag #14</a>
- <a href="/tagged/">your tag #15</a>
- <a href="/tagged/">your tag #1</a>
- <a href="/tagged/">your tag #2</a>
- <a href="/tagged/">your tag #3</a>
- <a href="/tagged/">your tag #4</a>
- <a href="/tagged/">your tag #5</a>
- <a href="/tagged/">your tag #6</a>
- <a href="/tagged/">your tag #7</a>
- <a href="/tagged/">your tag #8</a>
- <a href="/tagged/">your tag #9</a>
- </div></div>
- <div class="click">
- <input type="radio" id="tab-8" name="tab-group-1">
- <label for="tab-8"><a title="House MD">#8</a></label>
- <div class="box">
- <a href="/tagged/">Lorem ipsum</a>
- <a href="/tagged/">dolor sit</a>
- <a href="/tagged/">amet consectetur</a>
- <a href="/tagged/">adipiscing</a>
- <a href="/tagged/">elit sed do eiusmod</a>
- <a href="/tagged/">et dolore magna</a>
- <a href="/tagged/">aliqua</a>
- <a href="/tagged/">Ut enim ad minim</a>
- <a href="/tagged/">veniam</a>
- <a href="/tagged/">quis nostrud exercitation</a>
- <a href="/tagged/">ullamco laboris</a>
- <a href="/tagged/">nisi ut aliquip ex ea</a>
- </br></br>
- <div class="sub">Tags Section Title ··· </div>
- <a href="/tagged/">Lorem ipsum</a>
- <a href="/tagged/">dolor sit</a>
- <a href="/tagged/">amet consectetur</a>
- <a href="/tagged/">adipiscing</a>
- <a href="/tagged/">elit sed do eiusmod</a>
- <a href="/tagged/">et dolore magna</a>
- <a href="/tagged/">aliqua</a>
- <a href="/tagged/">Ut enim ad minim</a>
- <a href="/tagged/">veniam</a>
- <a href="/tagged/">quis nostrud exercitation</a>
- <a href="/tagged/">ullamco laboris</a>
- <a href="/tagged/">nisi ut aliquip ex ea</a>
- <a href="/tagged/">commodo consequat</a>
- </div></div>
- </div>
- <div id="links">
- <a href="/">Index</a>
- <a href="/ask">Message</a>
- <a href="/">Link 1</a>
- <a href="/">Link 2</a>
- <a href="http://iamthemelocked.tumblr.com/">Creator</a>
- <div id="title">Meteors; destined to burn</div>
- </div>
- <span class="credit">
- <a href="http://iamthemelocked.tumblr.com/" title="theme by iamthemelocked">TL</a></span>
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement