API tools faq
paste
lollyxbeans

snotlout theme

lollyxbeans
Feb 8th, 2016
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.83 KB | None | 0 0
raw download clone embed print report
  1. <style> body { cursor:url('http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), auto }
  2. a, a:hover { cursor:url('http://31.media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif'), auto };
  3. </style>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5.  
  6. <!--
  7.  
  8. THEME #8 — GRAVITY
  9. by xstardusttx--themes.tumblr.com or queenvictoria.co.vu
  10.  
  11. DO NOT REDISTRIBUTE
  12. DO NOT USE AS A BASE CODE
  13. DO NOT TAKE CREDIT
  14. DO NOT REMOVE CREDIT
  15. DO NOT USE IMAGES SMALLER THAN 500w and 400h (anything proportional to that is allowed)
  16.  
  17. -->
  18.  
  19.  
  20. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  21. <head>
  22.  
  23. <script type="text/javascript"
  24. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  25. <script>
  26. $(document).ready(function() {
  27. //
  28. $('a.poplight[href^=#]').click(function() {
  29. var popID = $(this).attr('rel'); //Get Popup Name
  30. var popURL = $(this).attr('href'); //Get Popup href to define size
  31. var query= popURL.split('?');
  32. var dim= query[1].split('&');
  33. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  34. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  35. var popMargTop = ($('#' + popID).height() + 80) / 2;
  36. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  37. //Apply Margin to Popup
  38. $('#' + popID).css({
  39. 'margin-top' : -popMargTop,
  40. 'margin-left' : -popMargLeft
  41. });
  42. $('body').append('<div id="fade"></div>');
  43. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  44. return false;
  45. });
  46. $('a.close, #fade').live('click', function() {
  47. $('#fade , .popup_block').fadeOut(function() {
  48. $('#fade, a.close').remove(); //fade them both out
  49. });
  50. return false;
  51. });
  52. });
  53. </script>
  54.  
  55. <title>{Title}</title>
  56. <link rel="shortcut icon" href="{Favicon}">
  57. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  58. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  59.  
  60. <link href='https://fonts.googleapis.com/css?family=Montserrat|Dosis:500,800' rel='stylesheet' type='text/css'>
  61.  
  62. <meta name="text:musiccode" content="place billy music player code here">
  63.  
  64. <meta name="text:link1" content="ONE">
  65. <meta name="text:link1 url" content="/">
  66. <meta name="text:link2" content="TWO">
  67. <meta name="text:link2 url" content="/">
  68. <meta name="text:link3" content="THREE">
  69. <meta name="text:link3 url" content="/">
  70.  
  71. <style type="text/css">
  72.  
  73. /*-----SCROLLBAR-----*/
  74.  
  75. ::-moz-selection {background-color:#585556;
  76. color:#fff;}
  77. ::selection {background-color:#585556;
  78. color:#fff;}
  79. ::-webkit-scrollbar {height: 3px;width: 3px;}
  80. ::-webkit-scrollbar-thumb {background-color:#c8c8c8; width: 3px;}
  81. ::-webkit-scrollbar-track{background-color:transparent width: 1px;}
  82.  
  83.  
  84. /*-----BODY-----*/
  85. body {
  86. background-color:{color:bg};
  87. background-position: fixed;
  88. background-repeat: no-repeat;
  89. background-image:url('http://i.imgur.com/wW7ifKd.png');
  90. font-family: 'Dosis', sans-serif; /*go to http://www.google.com/webfonts if you want more fonts*/
  91. font-size:14px;
  92. padding-bottom:5px;
  93. padding-top:0px;
  94. padding-right:0px;
  95. padding-left:0px;
  96. text-align:justify; /*right, left, center or justify*/
  97. color:#141815;
  98. margin:0;
  99. }
  100.  
  101. /*TEXT LINKS*/
  102. a {
  103. text-decoration:none;
  104. -moz-outline-style:none;
  105. color:#c6cac8;
  106. -webkit-transition: all 0.5s ease;
  107. -moz-transition: all 0.5s ease;
  108. -o-transition: all 0.5s ease
  109. }
  110.  
  111. a:hover {
  112. color:#d7f4f9;
  113. -webkit-transition: all 0.5s ease;
  114. -moz-transition: all 0.5s ease;
  115. -o-transition: all 0.5s ease
  116. }
  117. a.tip {
  118. text-decoration: none
  119. }
  120. a.tip:hover {
  121. position: relative;
  122. }
  123. a.tip span {
  124. display: none
  125. }
  126. a.tip:hover span {
  127. padding: 3px;
  128. color:#fff;
  129. font-size: 15px;
  130. display: block;
  131. z-index: 100;
  132. background: transparent;
  133. left: -10px;
  134. margin: 10px;
  135. position: absolute;
  136. top: -20px;
  137. text-decoration: none
  138. }
  139. /*IMAGES*/
  140. img {
  141. border:none;
  142. max-width:100%;
  143. height:auto;
  144. opacity: .6;
  145. -webkit-filter: sepia(60%); /* Chrome, Safari, Opera */
  146. filter: sepia(60%);
  147. filter: alpha(opacity=60);
  148. -moz-opacity: 0.6;
  149. -khtml-opacity: 0.6;
  150. transition: opacity .8s ease-in-out;
  151. -moz-transition: opacity .8s ease-in-out;
  152. -webkit-transition: opacity .8s ease-in-out;
  153. }
  154. img:hover {
  155. opacity: 1.0;
  156. -webkit-filter: sepia(10%); /* Chrome, Safari, Opera */
  157. filter: sepia(10%);
  158. filter: alpha(opacity=100);
  159. -moz-opacity: 1.0;
  160. -khtml-opacity: 1.0;
  161. transition: opacity .8s ease-in-out;
  162. -moz-transition: opacity .8s ease-in-out;
  163. -webkit-transition: opacity .8s ease-in-out;
  164. }
  165.  
  166.  
  167. iframe.photoset {
  168. opacity: .6;
  169. filter: alpha(opacity=60);
  170. -moz-opacity: 0.6;
  171. -khtml-opacity: 0.6;
  172. transition: opacity .9s ease-in-out;
  173. -moz-transition: opacity .8s ease-in-out;
  174. -webkit-transition: opacity .8s ease-in-out;
  175. }
  176.  
  177. iframe.photoset:hover {
  178. opacity: 1.0;
  179. filter: alpha(opacity=100);
  180. -moz-opacity: 1.0;
  181. -khtml-opacity: 1.0;
  182. transition: opacity .8s ease-in-out;
  183. -moz-transition: opacity .8s ease-in-out;
  184. -webkit-transition: opacity .8s ease-in-out;
  185. }
  186.  
  187.  
  188. h1 {
  189. font-size:18px;
  190. font-family: 'Montserrat', sans-serif;
  191. text-align:center;
  192. color:#c6cac8;
  193. line-height:15px;
  194. text-transform:uppercase; /*lowercase(minuscule/small letter), uppercase(capital letters) or normal*/
  195. text-shadow: -2px 2px 0px #372911;
  196. }
  197.  
  198. h2 {
  199. font-size:18px;
  200. font-family: 'Montserrat', sans-serif;
  201. text-align:left;
  202. color:#c6cac8;
  203. line-height:15px;
  204. text-transform:uppercase; /*lowercase(minuscule/small letter), uppercase(capital letters) or normal*/
  205. text-shadow: 4px 4px 0px #372911;
  206. }
  207.  
  208. b, strong {
  209. text-transform:uppercase;
  210. color:#c6cac8;
  211. font-size:14px;
  212. font-weight: 800;
  213. font-family: 'Dosis', sans-serif;
  214. text-shadow: -1px 1px 0px #372911;
  215. }
  216.  
  217. i, em {
  218. font-family: 'Dosis', sans-serif;
  219. color:#c6cac8;
  220. letter-spacing:1.5px;
  221. font-size:12px;}
  222.  
  223.  
  224. /*BLOCKQUOTE*/
  225. blockquote {
  226. width: 380px;
  227. font-size:14px;
  228. font-family: 'Dosis', sans-serif;
  229. text-transform: normal;
  230. line-height:10px;
  231. margin-left:0px;
  232. padding: 4px;
  233. padding-left:9px;
  234. border-left: 3px solid #67736a;
  235. color: #141815;
  236. -webkit-transition: opacity 0.6s linear;
  237. -webkit-transition: all 0.6s ease-in-out;
  238. -moz-transition: all 0.6s ease-in-out;
  239. -o-transition: all 0.6s ease-in-out;
  240. }
  241.  
  242. blockquote img {
  243. max-width:100%;
  244. height:auto;}
  245.  
  246.  
  247. /*-----SIDEBAR-----*/
  248.  
  249. #sidebar {
  250. position:fixed;
  251. width:400px;
  252. height: 500px;
  253. margin-right:0px;
  254. margin-left:75px;
  255. margin-top:0px;
  256. margin-bottom:0px;
  257. }
  258.  
  259.  
  260.  
  261. /*SIDEBAR LINKS*/
  262. .links {
  263. position:fixed;
  264. width:10px;
  265. height:500px;
  266. margin-left:292px;
  267. margin-top:-167px;
  268. text-align:center;
  269. z-index:99999999999999999999;
  270. }
  271. .links a {
  272. opacity: 1;
  273. display:inline-block;
  274. position:center;
  275. margin-left:2px;
  276. margin-right:5px;
  277. margin-top:5px;
  278. margin-bottom:0px;
  279. padding:2px;
  280. width:10px;
  281. font-family: 'Dosis', sans-serif;
  282. font-style:normal;
  283. font-weight:normal;
  284. text-decoration:none;
  285. text-transform:uppercase;
  286. font-size:20px;
  287. color:#222c25;
  288. border-radius: 100%;
  289. background-color: transparent;
  290. -webkit-transition:all 0.5s ease-in-out;
  291. -moz-transition:all 0.5s ease-in-out;
  292. -o-transition:all 0.5s ease-in-out;
  293. transition:all 0.5s ease-in-out;
  294. text-shadow: 0px 3px 3px #434e46;
  295. }
  296.  
  297. .links a:hover {
  298. opacity: 1;
  299. text-decoration:none;
  300. color:#e1ede4;
  301. background-color: transparent;
  302. -webkit-transition:all 0.5s ease-in-out;
  303. -moz-transition:all 0.5s ease-in-out;
  304. -o-transition:all 0.5s ease-in-out;
  305. transition:all 0.5s ease-in-out;}
  306.  
  307. .blinks {
  308. position:fixed;
  309. width:10px;
  310. height:500px;
  311. margin-left:96px;
  312. margin-top:-208px;
  313. text-align:center;
  314. z-index:99999999999999999999;
  315. }
  316. .blinks a {
  317. opacity: 1;
  318. display:inline-block;
  319. position:center;
  320. margin-left:2px;
  321. margin-right:5px;
  322. margin-top:5px;
  323. margin-bottom:0px;
  324. padding:2px;
  325. width:10px;
  326. font-family: 'Dosis', sans-serif;
  327. font-style:normal;
  328. font-weight:normal;
  329. text-decoration:none;
  330. text-transform:uppercase;
  331. font-size:28px;
  332. color:#222c25;
  333. border-radius: 100%;
  334. background-color: transparent;
  335. -webkit-transition:all 0.5s ease-in-out;
  336. -moz-transition:all 0.5s ease-in-out;
  337. -o-transition:all 0.5s ease-in-out;
  338. transition:all 0.5s ease-in-out;
  339. text-shadow: 0px 3px 3px #434e46;}
  340.  
  341. .blinks a:hover {
  342. opacity: 1;
  343. text-decoration:none;
  344. color:#e1ede4;
  345. background-color: transparent;
  346. -webkit-transition:all 0.5s ease-in-out;
  347. -moz-transition:all 0.5s ease-in-out;
  348. -o-transition:all 0.5s ease-in-out;
  349. transition:all 0.5s ease-in-out;}
  350.  
  351. .clinks {
  352. position:fixed;
  353. width:10px;
  354. height:500px;
  355. margin-left:211px;
  356. margin-top:-206px;
  357. text-align:center;
  358. z-index:99999999999999999999;
  359. }
  360. .clinks a {
  361. opacity: 1;
  362. display:inline-block;
  363. position:center;
  364. margin-left:2px;
  365. margin-right:5px;
  366. margin-top:5px;
  367. margin-bottom:0px;
  368. padding:2px;
  369. width:10px;
  370. font-family: 'Dosis', sans-serif;
  371. font-style:normal;
  372. font-weight:normal;
  373. text-decoration:none;
  374. text-transform:uppercase;
  375. font-size:32px;
  376. color:#222c25;
  377. border-radius: 100%;
  378. background-color: transparent;
  379. -webkit-transition:all 0.5s ease-in-out;
  380. -moz-transition:all 0.5s ease-in-out;
  381. -o-transition:all 0.5s ease-in-out;
  382. transition:all 0.5s ease-in-out;
  383. text-shadow: 0px 3px 3px #434e46;}
  384.  
  385. .clinks a:hover {
  386. opacity: 1;
  387. text-decoration:none;
  388. color:#e1ede4;
  389. background-color:transparent;
  390. -webkit-transition:all 0.5s ease-in-out;
  391. -moz-transition:all 0.5s ease-in-out;
  392. -o-transition:all 0.5s ease-in-out;
  393. transition:all 0.5s ease-in-out;}
  394.  
  395. .dlinks {
  396. position:fixed;
  397. width:10px;
  398. height:500px;
  399. margin-left:128px;
  400. margin-top:-130px;
  401. text-align:center;
  402. z-index:99999999999999999999;
  403. }
  404. .dlinks a {
  405. opacity: 1;
  406. display:inline-block;
  407. position:center;
  408. margin-left:2px;
  409. margin-right:5px;
  410. margin-top:5px;
  411. margin-bottom:0px;
  412. padding:2px;
  413. width:10px;
  414. font-family: 'Dosis', sans-serif;
  415. font-style:normal;
  416. font-weight:normal;
  417. text-decoration:none;
  418. text-transform:uppercase;
  419. font-size:20px;
  420. color:#222c25;
  421. border-radius: 100%;
  422. background-color: transparent;
  423. -webkit-transition:all 0.5s ease-in-out;
  424. -moz-transition:all 0.5s ease-in-out;
  425. -o-transition:all 0.5s ease-in-out;
  426. transition:all 0.5s ease-in-out;
  427. text-shadow: 0px 3px 3px #434e46;}
  428.  
  429. .dlinks a:hover {
  430. opacity: 1;
  431. text-decoration:none;
  432. color:#e1ede4;
  433. background-color: transparent;
  434. -webkit-transition:all 0.5s ease-in-out;
  435. -moz-transition:all 0.5s ease-in-out;
  436. -o-transition:all 0.5s ease-in-out;
  437. transition:all 0.5s ease-in-out;}
  438.  
  439. .elinks {
  440. position:fixed;
  441. width:10px;
  442. height:500px;
  443. margin-left:309px;
  444. margin-top:-259px;
  445. text-align:center;
  446. z-index:99999999999999999999;
  447. }
  448. .elinks a {
  449. opacity: 1;
  450. display:inline-block;
  451. position:center;
  452. margin-left:2px;
  453. margin-right:5px;
  454. margin-top:5px;
  455. margin-bottom:0px;
  456. padding:2px;
  457. width:10px;
  458. font-family: 'Dosis', sans-serif;
  459. font-style:normal;
  460. font-weight:normal;
  461. text-decoration:none;
  462. text-transform:uppercase;
  463. font-size:25px;
  464. color:#222c25;
  465. border-radius: 100%;
  466. background-color: transparent;
  467. -webkit-transition:all 0.5s ease-in-out;
  468. -moz-transition:all 0.5s ease-in-out;
  469. -o-transition:all 0.5s ease-in-out;
  470. transition:all 0.5s ease-in-out;
  471. text-shadow: 0px 3px 3px #434e46;}
  472.  
  473. .elinks a:hover {
  474. opacity: 1;
  475. text-decoration:none;
  476. color:#e1ede4;
  477. background-color: transparent;
  478. -webkit-transition:all 0.5s ease-in-out;
  479. -moz-transition:all 0.5s ease-in-out;
  480. -o-transition:all 0.5s ease-in-out;
  481. transition:all 0.5s ease-in-out;}
  482.  
  483. /*PAGINATION*/
  484. #pagibar {
  485. position:fixed;
  486. width:300px;
  487. margin-right:0px;
  488. margin-left:0px;
  489. margin-top:0px;
  490. margin-bottom:0px;
  491. }
  492. .pagi {
  493. text-transform: uppercase;
  494. font-weight:normal;
  495. font-family: 'Dosis', sans-serif;
  496. margin-top: -52px;
  497. letter-spacing:1px;
  498. margin-left: 710px;
  499. width: 90px;
  500. text-align:right;
  501. position: fixed;
  502. }
  503.  
  504. .pagi a {
  505. padding:0px;
  506. color: #c6cac8 !important;
  507. font-size: 30px;
  508. text-shadow: 0px 3px 3px #333d36 !important;}
  509.  
  510. }
  511.  
  512. .pagi a:hover {
  513. opacity: 1;
  514. text-decoration:none;
  515. color:#fff;
  516. background-color: transparent;
  517. -webkit-transition:all 0.5s ease-in-out;
  518. -moz-transition:all 0.5s ease-in-out;
  519. -o-transition:all 0.5s ease-in-out;
  520. transition:all 0.5s ease-in-out;}
  521.  
  522.  
  523. /*-----ENTRIES-----*/
  524. #entriescontainer {
  525. border: 0px solid #bbb;
  526. border-radius: 0px;
  527. overflow-y: auto;
  528. overflow-x: hidden;
  529. margin-top:360px;
  530. margin-left: 170px;
  531. width: 640px;
  532. height:280px;
  533. }
  534. #entries {
  535. padding:0px;
  536. width:600px;
  537. margin-left:0px;
  538. margin-top:0px;
  539. font-size:14px;
  540. line-height: 11px;
  541. margin-bottom:0px;
  542. }
  543.  
  544.  
  545.  
  546. #posts {
  547. width:610px;
  548. padding-bottom:20px;
  549. padding:10px;
  550. margin-top:5px;
  551. background-color: #4a544d;
  552. -webkit-filter: ♦(0%);
  553. -webkit-transition: all 0.6s ease;
  554. -moz-transition: all 0.6s ease;
  555. transition: all 0.6s ease;
  556. }
  557.  
  558.  
  559. /*POST INFO*/
  560. #info {
  561. border-top:1px solid #67736a;
  562. width:610px;
  563. padding-top:8px;
  564. font-size:10px;
  565. margin-left:-1px;
  566. font-style:normal;
  567. text-align:left;
  568. -moz-transition-duration:0.6s;
  569. -webkit-transition-duration:0.6s;
  570. -o-transition-duration:0.6s;
  571. }
  572.  
  573. #info a{
  574. margin-top:-20px;
  575. color:#c6cac8;
  576. }
  577.  
  578. #info a:hover{
  579. color:#e2dcd9;
  580. }
  581.  
  582. /*TAGS*/
  583. .tags {
  584. font-family: 'Dosis', sans-serif;
  585. width:610px;
  586. line-height:100%; /*space between line and line*/
  587. text-align:left;
  588. padding-top:7px;
  589. text-transform: lowercase;
  590. font-size:10px;
  591. -moz-transition-duration:0.6s;
  592. -webkit-transition-duration:0.6s;
  593. -o-transition-duration:0.6s;
  594. }
  595.  
  596. .tags a {
  597. font-style:italic;
  598. color:#d1ccbc;
  599. margin-right:5px;
  600. line-height:120%;
  601. }
  602.  
  603. .tags a:hover {
  604. text-decoration:underline;
  605. color:#9e603e;
  606. }
  607.  
  608. /*NOTES*/
  609. .notes {
  610. background-color:#FFFFFF;
  611. text-transform:normal;
  612. letter-spacing:0px;
  613. font-size:10px;
  614. margin-top:20px;
  615. font-style:normal;
  616. margin-left:-20px;
  617. text-align:left;
  618. line-height:30px;
  619. border-bottom:1px solid #D8D8D8;
  620. }
  621.  
  622. .notes img{
  623. padding:2px;
  624. border:1px solid #eee;
  625. margin-bottom:-4px;
  626. -webkit-transition:all 0.5s ease-in-out;
  627. -moz-transition:all 0.5s ease-in-out;
  628. -o-transition:all 0.5s ease-in-out;
  629. -ms-transition:all 0.5s ease-in-out;
  630. transition:all 0.5s ease-in-out;
  631. }
  632.  
  633. .notes img:hover {opacity: 0.6;
  634. -webkit-transition:all 0.6s ease-in-out;
  635. -moz-transition:all 0.6s ease-in-out;
  636. -o-transition:all 0.6s ease-in-out;
  637. -ms-transition:all 0.6s ease-in-out;
  638. transition:all 0.6s ease-in-out;}
  639.  
  640.  
  641. /* --- QUOTE ---*/
  642. .quote {
  643. font-size:18px;
  644. font-family: 'Dosis', sans-serif;
  645. font-style:normal;
  646. line-height:17px;
  647. margin-bottom:15px;
  648. text-transform:normal;
  649. text-align:left;
  650. font-weight:normal;
  651. font-style:none;
  652. color:#c6cac8;
  653. }
  654.  
  655. .quotesource {
  656. font-size:9px;
  657. text-align:right;
  658. font-style:none;
  659. text-transform:lowercase;
  660. font-family: 'Dosis', sans-serif;
  661. margin-bottom:5px;
  662. color:#c6cac8;
  663. }
  664.  
  665.  
  666. /* --- AUDIO ---*/
  667. .audio {
  668. height:60px;
  669. margin-bottom:40px;
  670. }
  671.  
  672. .audio-album {
  673. position:relative;
  674. margin-top: 0px;
  675. width:100px;
  676. padding:3px;
  677. border:1px solid #E1E1E1;
  678. -webkit-transition: opacity 0.1s linear;
  679. opacity: 1;
  680. }
  681.  
  682. .audio-player {
  683. opacity:.2;
  684. width:25px;
  685. height:25px;
  686. overflow:hidden;
  687. position:static;
  688. border:0px;
  689. z-index:86;
  690. margin-left:43px;
  691. margin-top:-70px;
  692. -webkit-transition: all 0.6s ease-out;
  693. -o-transition: all 0.6s ease-out;
  694. -webkit-transition: all 0.6s ease-out;
  695. -moz-transition: all 0.6s ease-out;
  696. }
  697.  
  698. .audio-player:hover {
  699. opacity: 0.8;
  700. -webkit-transition: all 0.6s ease-out;
  701. -o-transition: all 0.6s ease-out;
  702. -webkit-transition: all 0.6s ease-out;
  703. -moz-transition: all 0.6s ease-out;
  704. }
  705.  
  706. .audio-info {
  707. margin-top:-60px;
  708. z-index: 86;
  709. position:static;
  710. margin-left:120px;
  711. line-height:180%;
  712. padding:10px;
  713. }
  714.  
  715. .audio:hover .audio-player {
  716. opacity:.7;
  717. -webkit-transition: all 0.6s ease-out;
  718. -o-transition: all 0.6s ease-out;
  719. -webkit-transition: all 0.6s ease-out;
  720. -moz-transition: all 0.6s ease-out;
  721. }
  722. .audiocaption {
  723. margin-top: 50px;
  724. }
  725.  
  726. /* --- ASK---*/
  727. .ask {
  728. font-size:20px;
  729. font-family: 'Dosis', sans-serif;
  730. letter-spacing:-2px;
  731. font-weight:bold;
  732. text-align:right;
  733. font-size: 10px;
  734. padding:6px;
  735. background: transparent;
  736. text-transform:lowercase;
  737. }
  738.  
  739. .question {
  740. letter-spacing:0px;
  741. margin-top:-12px;
  742. font-style:italic;
  743. padding:4px;
  744. background:#FAFAFA;
  745. text-align:right;
  746. font-size: 12px;
  747. color:{color:Text};
  748. border-bottom:1px solid #E6E6E6;
  749. }
  750.  
  751. .answer {
  752. width:400px;
  753. letter-spacing:0px;
  754. text-align:justify;
  755. padding-top:5px;
  756. margin-bottom:1px;
  757. font-size: 12px;
  758. color:{color:Text};
  759. }
  760.  
  761. /* ---CHAT---*/
  762. .user_1 .label {color:{color:text}; font-weight:normal; font-style:italic;}
  763. .user_2 .label {color:{color:text}; font-weight:normal; font-style:italic; }
  764. .user_3 .label {color:{color:text}; font-weight:normal; font-style:italic;}
  765. .user_4 .label {color:{color:text}; font-weight:normal; font-style:italic; }
  766. .user_5 .label {color:{color:text}; font-weight:normal; font-style:italic;}
  767. .user_6 .label {color:{color:text}; font-weight:normal; font-style:italic; }
  768. .user_7 .label {color:{color:text}; font-weight:normal; font-style:italic; }
  769. .user_8 .label {color:{color:text}; font-weight:normal; font-style:italic; }
  770. .user_9 .label {color:{color:text}; font-weight:normal; font-style:italic; }
  771. .user_10 .label {color:{color:text}; font-weight:normal; font-style:italic; }
  772. .user_11 .label {color:{color:text}; font-weight:normal; font-style:italic; }
  773. .user_12 .label {color:{color:text}; font-weight:normal; font-style:italic; }
  774. .ul.chat {font-size:14px; font-family: 'Dosis', sans-serif; }
  775. .chat ol {}
  776. .chat li {list-style:none; margin-left:-38px; padding:2px; font-family: 'Dosis', sans-serif; font-style: none; font-size: 12px; }
  777.  
  778.  
  779. #maker{
  780. float:right;
  781. position:fixed;
  782. bottom:5px;
  783. right:10px;
  784. padding:7px;
  785. font-size:8px;
  786. text-align:center;
  787. line-height:210%;
  788. text-transform:uppercase;
  789. -webkit-transition: opacity 0.6s linear;
  790. -webkit-transition: all 0.6s ease-in-out;
  791. -moz-transition: all 0.6s ease-in-out;
  792. -o-transition: all 0.6s ease-in-out;}
  793.  
  794. #maker:hover {
  795. -webkit-transition: opacity 0.6s linear;
  796. -webkit-transition: all 0.6s ease-in-out;
  797. -moz-transition: all 0.6s ease-in-out;
  798. -o-transition: all 0.6s ease-in-out;transform: rotate(360deg);
  799. -ms-transform: rotate(360deg);
  800. -webkit-transform: rotate(360deg);
  801. -o-transform: rotate(360deg);
  802. -moz-transform: rotate(360deg);
  803. }
  804.  
  805. #maker a{
  806. padding:7px;
  807. color:#c6cac8;
  808. }
  809.  
  810. #maker a:hover{
  811. color:#fff;
  812. padding:7px;
  813. background-color:{color:hover};
  814. }
  815.  
  816. #bubble-music {
  817. position:fixed;
  818. left:155px;
  819. top:120px;
  820. width:25px;
  821. height:25px;
  822. background-color:#5c675f;
  823. border-radius:100%;
  824. -moz-border-radius:100%;
  825. overflow:hidden;
  826. -webkit-transition: all 0.5s ease-out;
  827. -moz-transition: all 0.5s ease-out;
  828. transition: all 0.5s ease-out
  829. }
  830.  
  831. #bubble-music:hover {
  832. border-radius:9px;
  833. -moz-border-radius:9px;
  834. width:140px;
  835. height:30px;
  836. }
  837.  
  838. .music_embed {
  839. margin:-23px 0 0 70px;
  840. z-index:1;
  841. font-family:consolas;
  842. font-size:8px;
  843. -webkit-transition: all 0.5s ease-out;
  844. -moz-transition: all 0.5s ease-out;
  845. transition: all 0.5s ease-out
  846. }
  847.  
  848. #bubble-music:hover .music_embed {
  849. margin:-23px 0 0 34px;
  850. opacity:1;
  851. }
  852.  
  853. {CustomCSS}</style></head><body><div id="bubble-music">
  854. <img style="margin:5px; opacity:0.5" src="https://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif">
  855. <div class="music_embed">
  856. {text:musiccode}
  857. </div>
  858. </div>
  859.  
  860.  
  861.  
  862. <div id="sidebar">
  863.  
  864. <div class="links"><a href="/" class="tip" style="">✖<span>refresh</span></a></div>
  865. <div class="blinks"><a href="/ask" class="tip" style="">✖<span>ask</span></a></div>
  866. <div class="clinks"><a href="{text:link1 url}" class="tip" style="">✖<span>{text:link1}</span></a></div>
  867. <div class="dlinks"><a href="{text:link2 url}" class="tip" style="">✖<span>{text:link2}</span></a></div>
  868. <div class="elinks"><a href="{text:link3 url}" class="tip" style="">✖<span>{text:link3}</span></a></div>
  869.  
  870. </div>
  871.  
  872. <div id="pagibar">
  873. {block:Pagination}
  874. <div class="pagi">
  875. {block:PreviousPage}
  876. <a href="{PreviousPage}"class="tip">◀<span>back</span></a>
  877. {/block:PreviousPage}
  878.  
  879. {block:NextPage}
  880. <a href="{NextPage}" class="tip">▶︎<span>next</span>︎</a>
  881. {/block:NextPage}
  882. </div>
  883. {/block:Pagination}
  884.  
  885.  
  886. </div>
  887.  
  888. <div id="entriescontainer">
  889. <div id="entries">{block:Posts}<div id="posts">
  890.  
  891.  
  892. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  893.  
  894.  
  895. {block:Photo}{LinkOpenTag}<center><img src="{PhotoURL-400}"></center>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  896.  
  897.  
  898. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  899.  
  900.  
  901. {block:Photoset}<center>{Photoset-400}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  902.  
  903.  
  904. {block:Quote}<div class="quote">" {Quote} "</div>{block:Source} <div class="quotesource">—{Source}</div>{/block:Source}{/block:Quote}
  905.  
  906.  
  907. {block:Audio}
  908. <div class="audio">
  909. {block:AlbumArt}<img class="audio-album" src="{AlbumArtURL}">{/block:AlbumArt}
  910. <div class="audio-player">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div>
  911.  
  912.  
  913. <div class="audio-info">
  914. {block:TrackName}<b>Title:</b> {TrackName}<BR>{/block:TrackName}
  915. {block:Artist}<b>Artist:</b> {Artist}<BR>{/block:Artist}
  916. {block:Album}<b>Album:</b> {Album}<BR>{/block:Album}
  917. {block:PlayCount}<b>Plays:</b> {PlayCount}<BR>{/block:PlayCount}
  918. </div></div>
  919. <div class="audiocaption">{block:Caption}{Caption}{/block:Caption}</div>
  920. {/block:Audio}
  921.  
  922.  
  923. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  924.  
  925.  
  926. {block:Chat}<ul class="chat">{block:Title}{Title}{/block:Title} {block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  927.  
  928.  
  929. {block:Answer}<div id="question"><span style="text-transform:uppercase;font-size:9px;font-style:italic;">— {Asker}: </span>{Question}</div><left> <font face="cambria">{Answer}</font>{/block:Answer}
  930.  
  931.  
  932. <div id="info"> posted <a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} </a> {block:RebloggedFrom} from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource} <a href="{SourceURL}">© <a href="{SourceURL}">{SourceLink}</a> {/block:ContentSource}{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom} with <a href="{Permalink}">{NoteCountWithLabel}</a>
  933. {block:HasTags}<div id="tags">{block:Tags} #<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}</div></div>
  934. {/block:Posts}
  935. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  936. {/block:Posts}</div></div></div></div>
  937.  
  938.  
  939. <div id="maker"><a href="http://www.xstardusttx--themes.tumblr.com" title="xstardusttx--themes">VO</a></div></center>
  940.  
  941.  
  942. <!--DON'T DELETE THIS CODE IF YOU DON'T WANT TO SEE THE SOURCE UNDER THE IMAGE/TEXT-->
  943. {block:ContentSource}
  944. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  945. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  946. {/block:SourceLogo}
  947. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  948. {/block:ContentSource}
  949.  
  950. <style type="text/css">
  951. /** colour of title text and background **/
  952. .h-title {color:#c6cac8; background:#657068;}
  953. /** colour of title background on hover and when tab is open **/
  954. .h-title:hover, .ss-ud input:checked + label .h-title {color: #c6cac8; background:#657068;}
  955. /** colour of close text **/
  956. .close {color:#657068;}
  957. /** colour of close text on hover **/
  958. .close:hover {color:#c6cac8;}
  959. /** colour of border at the bottom of tabs **/
  960. .ss-ud input:checked ~ article {border-bottom:3px solid #657068;}
  961. /** background colour of tabs **/
  962. .ss-ud article {background:#c6cac8;}
  963. /** colour of text in tabs **/
  964. .ss-ud input:checked ~ article {color:#222c25;}
  965. /** colour of scrollbar **/
  966. .ac-plus15-lines::-webkit-scrollbar-thumb:vertical {background:#222c25;}
  967.  
  968. #hovertab {width:50px; height:68px; position:fixed; top:8px; left:8px;
  969. z-index:9999; overflow:hidden;}
  970.  
  971. #hovertab img {pointer-events:none; margin-left:0px; width:50px;
  972. opacity:0.6;-webkit-filter: sepia(0%); /* Chrome, Safari, Opera */
  973. filter: sepia(10%);}
  974.  
  975. #hovertab:hover {width:130px; height:300px;}
  976.  
  977. #hovertab:hover img {margin-left:40px; opacity:1;}
  978.  
  979. #hover-cont {
  980. width:130px; height:800px; margin-top:10px; margin-left:-200px;}
  981.  
  982. #hovertab:hover #hover-cont {margin-left:0px;}
  983.  
  984. .ss-ud article, .ss-ud input:checked ~ article {
  985. transition: height 0.3 ease-in-out, box-shadow 0.6s linear;}
  986.  
  987. .ss-ud {width:120px; margin-left:0px; margin-top:0px;}
  988.  
  989. .h-title, .close {cursor:pointer; margin-top:8px; margin-left:0px;
  990. display:block; width:80px; padding:3px 0px 4px 0px; text-align:center;
  991. font-family:Tahoma; font-size:7px; text-transform:uppercase;
  992. letter-spacing:2px;}
  993.  
  994. .ss-ud input:checked + label .close {padding:0px; opacity:0;
  995. transition:all 0.2s ease-out;
  996. -webkit-transition-duration:all 0.2s ease-out;
  997. -o-transition-transition:all 0.2s ease-out;
  998. -moz-transition-durartion:all 0.2s ease-out;
  999. -ms-transition-durartion:all 0.2s ease-out;}
  1000.  
  1001. .close {opacity:1; background:transparent;}
  1002.  
  1003. .ss-ud input:checked + label .h-title {width:120px; margin-left:-20px;
  1004. transition:all 0.2s ease-out;
  1005. -webkit-transition-duration:all 0.2s ease-out;
  1006. -o-transition-transition:all 0.2s ease-out;
  1007. -moz-transition-durartion:all 0.2s ease-out;
  1008. -ms-transition-durartion:all 0.2s ease-out;
  1009. }
  1010.  
  1011. .ss-ud input {display:none;}
  1012.  
  1013. .ss-ud article {overflow:hidden; height:0px; position:relative;
  1014. font-family:Tahoma; text-transform:uppercase; text-align:justify;
  1015. font-weight:500; font-size:7px; color:#fff; letter-spacing:1px;
  1016. margin-left:25px; padding:0px; width:80px;}
  1017.  
  1018. .ss-ud input:checked ~ article {width:112px; margin-left:5px; padding:4px;}
  1019.  
  1020. .ss-ud input:checked ~ article.ac-1-line {height:8px;}
  1021. .ss-ud input:checked ~ article.ac-2-lines {height:16px;}
  1022. .ss-ud input:checked ~ article.ac-3-lines {height:24px;}
  1023. .ss-ud input:checked ~ article.ac-4-lines {height:32px;}
  1024. .ss-ud input:checked ~ article.ac-5-lines {height:40px;}
  1025. .ss-ud input:checked ~ article.ac-6-lines {height:48px;}
  1026. .ss-ud input:checked ~ article.ac-7-lines {height:56px;}
  1027. .ss-ud input:checked ~ article.ac-8-lines {height:64px;}
  1028. .ss-ud input:checked ~ article.ac-9-lines {height:72px;}
  1029. .ss-ud input:checked ~ article.ac-10-lines {height:80px;}
  1030. .ss-ud input:checked ~ article.ac-11-lines {height:88px;}
  1031. .ss-ud input:checked ~ article.ac-12-lines {height:96px;}
  1032. .ss-ud input:checked ~ article.ac-13-lines {height:104px;}
  1033. .ss-ud input:checked ~ article.ac-14-lines {height:112px;}
  1034. .ss-ud input:checked ~ article.ac-15-lines {height:120px;}
  1035. .ss-ud input:checked ~ article.ac-plus15-lines {height:120px;
  1036. overflow-y:scroll;}
  1037.  
  1038. .ac-plus15-lines::-webkit-scrollbar {height:auto; width:3px;
  1039. background:#eee;}
  1040.  
  1041. .ac-plus15-lines::-webkit-scrollbar-thumb:vertical {height:auto;}
  1042.  
  1043. #hovertab, #hovertab img, #hovertab:hover, #hovertab:hover img,
  1044. #hover-cont, #hovertab:hover #hover-cont, .h-title, .h-title-x, .close,
  1045. .h-title:hover, .h-title-x:hover, .close:hover, .ss-ud article {
  1046. transition:all 0.4s ease-in-out;
  1047. -webkit-transition-duration:all 0.4s ease-in-out;
  1048. -o-transition-transition:all 0.4s ease-in-out;
  1049. -moz-transition-durartion:all 0.4s ease-in-out;
  1050. -ms-transition-durartion:all 0.4s ease-in-out;}
  1051. </style>
  1052.  
  1053. <div id="hovertab">
  1054.  
  1055. <img src="http://i.imgur.com/GKhT7oa.png" />
  1056.  
  1057. <div id="hover-cont"><section class="ss-ud">
  1058.  
  1059. <div><input id="ac-hover1" name="ss" type="radio" />
  1060. <label for="ac-hover1"><div class="h-title">snotlout!</div></label>
  1061. <article class="ac-3-lines">
  1062. <!-- In the line above, change the number 2 to however many lines of text you want; i.e. for 5 lines of text "ac-5-lines" for 6 write "ac-6-lines" and so on. The number can be any number between 2 and 15.
  1063. If you want only on line of text write "ac-1-line"
  1064. If you want more than 15 lines of text write "ac-plus15-line" -->
  1065.  
  1066. Independent &</br> Selective </br>
  1067. Snotlout Jorgenson
  1068.  
  1069. </article></div>
  1070.  
  1071. <!------------------ TO DELETE TAB 2 DELETE FROM HERE ------------------>
  1072. <div><input id="ac-hover2" name="ss" type="radio" />
  1073. <label for="ac-hover2"><div class="h-title">Snotlout!</div></label>
  1074. <article class="ac-2-lines">
  1075.  
  1076. read rules & about before interacting!
  1077.  
  1078. </article></div>
  1079. <!------------------------------- TO HERE ------------------------------->
  1080.  
  1081.  
  1082. <!------------------ TO DELETE TAB 3 DELETE FROM HERE ------------------>
  1083. <div><input id="ac-hover3" name="ss" type="radio" />
  1084. <label for="ac-hover3"><div class="h-title">oi! oi! oi!</div></label>
  1085. <article class="ac-4-lines">
  1086.  
  1087. tracking: thxarrogantrider</br>
  1088. EST: Start date</br>
  1089. Played by: MUN</br>
  1090.  
  1091.  
  1092. </article></div>
  1093. <!------------------------------- TO HERE ------------------------------->
  1094.  
  1095.  
  1096.  
  1097. <!-- To add more tabs, copy tab four but change "ac-hover4" (both of them). If it's you're fifth tab change it to "ac-hover5", you sixth "ac-hover6" and so on -->
  1098.  
  1099. <div><input id="ac-hover-close" name="ss" type="radio" checked/>
  1100. <label for="ac-hover-close"><!-- steyerogers --><div class="close">close</div></label></div>
  1101. </section></div></div>
  1102.  
  1103. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!