API tools faq
paste
trenzalours

kinetic - theme 22

trenzalours
Jan 28th, 2015
385
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.04 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <title>{Title}</title>
  6.  
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10. <link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">
  11. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  12. <link href='http://fonts.googleapis.com/css?family=Roboto:300italic,400,300' rel='stylesheet' type='text/css'>
  13. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/3dkvxpf/Bcjnhguey/normalize.css">
  14. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/3dkvxpf/SUanhud91/component.css">
  15. <!--
  16.  
  17. theme - 22
  18. all theme rules apply
  19. don't steal its not cool
  20. be fucking original
  21. --------
  22.  
  23. The tags and ask box section are located at the very bottom of the theme! Be sure to fill them out if you're going to be using them!
  24.  
  25. -->
  26. <meta name="image:Background Image" content="http://static.tumblr.com/3dkvxpf/amondaiws/5225969324_033c224445_b.jpg"/>
  27.  
  28. <meta name="color:Background" content="#ffffff"/>
  29. <meta name="color:Title" content="#000000"/>
  30. <meta name="color:Text" content="#aaaaaa"/>
  31. <meta name="color:Link" content="#000000"/>
  32. <meta name="color:Hover" content="#ffffff"/>
  33. <meta name="color:Blog Title" content="#000000"/>
  34. <meta name="color:Nav Link" content="#ffffff"/>
  35. <meta name="color:Nav Link Hover" content="#ffffff"/>
  36. <meta name="color:Solid Sidebar" content="#eeeeee"/>
  37. <meta name="color:Scrollbar" content="#eeeeee"/>
  38. <meta name="color:Gradient 1" content="#eeeeee"/>
  39. <meta name="color:Gradient 2" content="#b8b8b8"/>
  40.  
  41.  
  42. <meta name="if:White Icons" content="1">
  43. <meta name="if:Music Player" content="1">
  44. <meta name="if:Askbox" content="1">
  45. <meta name="if:Tags" content="1">
  46. <meta name="if:Grayscale" content="0">
  47. <meta name="if:Hidden Captions" content="0"/>
  48. <meta name="if:Lazy Load" content="0">
  49. <meta name="if:Image Fade" content="1">
  50. <meta name="if:Fade Content" content="0">
  51. <meta name="select:Player Color" content="black" title="Black">
  52. <meta name="select:Player Color" content="grey" title="Grey">
  53.  
  54.  
  55. <meta name="select:Background image" content="bg-cover" title="Full screen">
  56. <meta name="select:Background image" content="bg-pattern" title="Pattern">
  57. <meta name="select:Background image" content="bg-gradient" title="Gradient">
  58. <meta name="select:Background image" content="bg-none" title="None">
  59.  
  60.  
  61. <meta name="text:Music Code" content="Paste your music code here!" />
  62. <meta name="text:Link 1 URL" content="" />
  63. <meta name="text:Link 1 Title Hover" content="hover" />
  64. <meta name="text:Link 1 Title" content="link" />
  65. <meta name="text:Link 2 URL" content="" />
  66. <meta name="text:Link 2 Title Hover" content="hover2" />
  67. <meta name="text:Link 2 Title" content="link2" />
  68. <meta name="text:Link 3 URL" content="" />
  69. <meta name="text:Link 3 Title Hover" content="hover3" />
  70. <meta name="text:Link 3 Title" content="link3" />
  71. <meta name="text:Link 4 URL" content="" />
  72. <meta name="text:Link 4 Title Hover" content="hover4" />
  73. <meta name="text:Link 4 Title" content="link4" />
  74.  
  75. <!--CSS customization here. -->
  76.  
  77. <style type="text/css">
  78.  
  79. #s-m-t-tooltip{
  80. padding:4px 9px;
  81. position:absolute;
  82. margin: 20px 25px;
  83. padding:10px 20px;
  84. font-size:8px;
  85. font-family: 'Consolas', sans-serif;
  86. box-shadow:3px 3px rgba(0, 0, 0, 0.1);
  87. z-index: 99999999999;
  88. letter-spacing:1px;
  89. text-transform:uppercase;
  90. color:{color:Nav Link};
  91. background:{color:solid sidebar};}
  92.  
  93.  
  94. ::-webkit-scrollbar-thumb {background:{color:Scrollbar};}
  95.  
  96. ::-webkit-scrollbar{width: 4px;}
  97. ::-webkit-scrollbar-track {background:{color:Solid Sidebar};
  98. }
  99.  
  100.  
  101. /* LAYOUT BASICS */
  102.  
  103. blockquote {
  104. border-left:1px solid #222;
  105. padding-top:5px;
  106. padding-bottom:5px;
  107. padding-left:5px;
  108. margin-left:5px;}
  109.  
  110. body {
  111. background:{color:background};
  112. color:{color:text};
  113. font-family: 'consolas', sans-serif;
  114. font-size:10px;
  115. letter-spacing:1px;
  116. font-size:9px;
  117. overflow-x:hidden;
  118. width:100%;
  119. text-align:justify;
  120. margin:0;
  121. line-height:1.3em;}
  122.  
  123. ::selection {
  124. background-color:{color:gradient 2};
  125. color:black;}
  126.  
  127.  
  128.  
  129. .bg-none {
  130. background:{color:background};}
  131.  
  132. .bg-cover {
  133. background: url({image:Background Image})
  134. no-repeat center center fixed;
  135. -webkit-background-size: cover;
  136. -moz-background-size: cover;
  137. -o-background-size: cover;
  138. background-size: cover;}
  139.  
  140. .bg-pattern {
  141. background: url({image:Background Image});
  142. background-repeat:repeat;
  143. background-attachment: fixed; }
  144.  
  145. .bg-gradient {
  146. background: {color:Gradient 1}; /* Old browsers */
  147. background: -moz-linear-gradient(top, {color:Gradient 1} 0%, {color:Gradient 2} 100%); /* FF3.6+ */
  148. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,{color:Gradient 1}), color-stop(100%,{color:Gradient 2})); /* Chrome,Safari4+ */
  149. background: -webkit-linear-gradient(top, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* Chrome10+,Safari5.1+ */
  150. background: -o-linear-gradient(top, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* Opera 11.10+ */
  151. background: -ms-linear-gradient(top, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* IE10+ */
  152. background: linear-gradient(to bottom, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* W3C */
  153. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{color:Gradient 1}', endColorstr='{color:Gradient 2}',GradientType=0 ); /* IE6-9 */
  154. background-attachment: fixed;
  155. }
  156.  
  157.  
  158.  
  159.  
  160.  
  161. a {
  162. color:{color:link};
  163. text-decoration:none;
  164. -webkit-transition: all 1s ease;
  165. -moz-transition: all 1s ease;
  166. -o-transition: all 1s ease;
  167. -ms-transition: all 1s ease;
  168. transition: all 1s ease;}
  169.  
  170. a:hover {
  171. color:{color:link};
  172. cursor:help;
  173. text-decoration:none;
  174. -webkit-transition: all 1s ease;
  175. -moz-transition: all 1s ease;
  176. -o-transition: all 1s ease;
  177. -ms-transition: all 1s ease;
  178. transition: all 1s ease;}
  179.  
  180. img{opacity:1;
  181. border:none;
  182. text-decoration:none}
  183.  
  184.  
  185. small {
  186. font-size:10px;}
  187.  
  188. big {
  189. font-size:12px;}
  190.  
  191. pre{
  192. background:{color:background};
  193. padding:10px;
  194. color:{color:text};
  195. font-family: 'consolas', sans-serif;
  196. text-transform:uppercase;
  197. font-size:10px;
  198. letter-spacing:1px;
  199. white-space: pre-wrap;
  200. white-space: -moz-pre-wrap;
  201. white-space: -pre-wrap;
  202. white-space: -o-pre-wrap;
  203. word-wrap: break-word;}
  204.  
  205. code{
  206. text-transform:lowercase;
  207. font-style:italic;
  208. }
  209.  
  210. b,strong{
  211. font-weight:600;
  212. color:{color:text};
  213. }
  214. em,i{
  215. font-style:italic;
  216. color:{color:text};
  217. }
  218.  
  219.  
  220. strike{
  221. text-decoration: line-through;
  222. }
  223.  
  224.  
  225. #title {
  226. font-family:'Roboto' sans-serif;
  227. text-shadow:0px 0px 3px {color:text};
  228. color:{color:text};
  229. text-transform:uppercase;
  230. font-style:italic;
  231. letter-spacing:1px;
  232. text-align:justify;
  233. font-size:13px;
  234. line-height:1.4em;
  235. font-weight:800;
  236. padding:10px;
  237. }
  238.  
  239. li{
  240. line-height:1.5em;
  241. }
  242.  
  243.  
  244.  
  245. /*Pagination*/
  246.  
  247. #pagination {
  248. text-align:center;
  249. margin:0 auto;
  250. margin-bottom:50px;
  251. width:auto;
  252. word-spacing:10px;
  253. width:250px;
  254. margin-left:20px;}
  255.  
  256. #pagination a{
  257. color:{color:Link};
  258. text-shadow:0px 0px 3px {color:Link};
  259. margin-top:-35px;
  260. margin-left:-8px;
  261. padding:5px;
  262. text-transform:uppercase;
  263. font-size:12px;
  264. font-family:'Roboto', sans-serif;
  265. }
  266.  
  267. #pagination a:hover{
  268. color:{color:hover};
  269. text-shadow:0px 0px 3px {color:hover};
  270. }
  271.  
  272.  
  273. /*Container*/
  274.  
  275. #con {
  276. left:50%;
  277. margin-left:-193px;
  278. position:absolute;
  279. }
  280.  
  281. /*sidebar*/
  282.  
  283. #half{
  284. width:100%;
  285. position:relative;
  286. padding:20px;
  287. text-align:center;
  288. background:{color:Solid Sidebar};
  289. }
  290.  
  291. #half:hover #desc{
  292. opacity:1;
  293. margin-top:2px;
  294. -webkit-transition: all 1.3s ease;
  295. -moz-transition: all 1.3s ease;
  296. -o-transition: all 1.3s ease;
  297. -ms-transition: all 1.3s ease;
  298. transition: all 1.3s ease;
  299. }
  300.  
  301. #desc{
  302. opacity:0;
  303. margin:0 auto;
  304. width:320px;
  305. padding:6px;
  306. margin-top:-30px;
  307. text-align:center;
  308. font-size:9px;
  309. text-transform:none;
  310. font-family:'consolas' Sans-Serif;
  311. color:{color:Nav Link};
  312. -webkit-transition: all 1.3s ease;
  313. -moz-transition: all 1.3s ease;
  314. -o-transition: all 1.3s ease;
  315. -ms-transition: all 1.3s ease;
  316. transition: all 1.3s ease;
  317. }
  318.  
  319. #desc a{
  320. color:{color:Nav Link};
  321. }
  322.  
  323. #bt{
  324. margin:0 auto;
  325. width:200px;
  326. padding:9px 0;
  327. font-weight:800;
  328. text-align:center;
  329. vertical-align:center;
  330. text-shadow:0px 0px 3px {color:Blog Title};
  331. color:{color:Blog Title};
  332. font-family: 'Roboto', sans-serif;
  333. text-transform:uppercase;
  334. border-bottom:1px solid {color:Title};
  335. }
  336.  
  337. #bt a{
  338. color:{color:Blog Title};
  339. font-size:20px;
  340. }
  341.  
  342. #nav{
  343. padding-top:10px;
  344. margin:0 auto;
  345. vertical-align:center;
  346. z-index:9;
  347. }
  348. #nav li{
  349. display:inline-block;
  350. list-style:none;
  351. background:{color:Solid Sidebar};
  352. margin-bottom:3px;
  353. letter-spacing:1px;
  354. font-size:8px;
  355. padding:0 7px;
  356. text-transform:uppercase;
  357. -webkit-transition: all 1.3s ease;
  358. -moz-transition: all 1.3s ease;
  359. -o-transition: all 1.3s ease;
  360. -ms-transition: all 1.3s ease;
  361. transition: all 1.3s ease;
  362. }
  363. #nav li a{
  364. color:{color:Nav Link};
  365. }
  366.  
  367. #nav li:hover a{color:{color:Nav Link Hover}; letter-spacing:2px;}
  368.  
  369.  
  370. /*Posts*/
  371.  
  372. #entries{
  373. width:250px;
  374. margin-top:50px;
  375. margin-left:70px;
  376. }
  377.  
  378. .posts {
  379. background:{color:background};
  380. width:250px;
  381. box-shadow:7px 7px rgba(0, 0, 0, 0.1);
  382. padding:20px 20px 14px;
  383. {block:IndexPage}
  384. margin-bottom:150px;
  385. {/block:IndexPage}
  386. {block:PermalinkPage}
  387. margin-bottom:75px;
  388. {/block:PermalinkPage}
  389. border:1px solid {color:Solid Sidebar};
  390. -webkit-transition: all 1s ease;
  391. -moz-transition: all 1s ease;
  392. -o-transition: all 1s ease;
  393. -ms-transition: all 1s ease;
  394. transition: all 1s ease;}
  395.  
  396. #photo-set{
  397. width:250px!imporant;
  398. }
  399. #photo-set img{
  400. width:250px!important;
  401. }
  402. #vids{
  403. width:250px;
  404. }
  405. .video-player iframe {
  406. max-width: 100%;
  407. height: auto;}
  408.  
  409.  
  410. .video-player iframe {
  411. width:250px;
  412. }
  413.  
  414. {block:IfGrayscale}
  415. .posts img{
  416. -webkit-filter: grayscale(100%);
  417. -webkit-transition-duration: 1s;
  418. -moz-transition-duration: 1s;
  419. -o-transition-duration: 1s;
  420. -ms-transition-duration: 1s;
  421. }
  422.  
  423. .posts:hover img{
  424. -webkit-filter: grayscale(0%);
  425. -webkit-transition-duration: 1s;
  426. -moz-transition-duration: 1s;
  427. -o-transition-duration: 1s;
  428. -ms-transition-duration: 1s;
  429. z-index: 2px;
  430. }
  431.  
  432. .html_photoset {
  433. -webkit-filter: grayscale(100%);
  434. -webkit-transition-duration: 1s;
  435. -moz-transition-duration: 1s;
  436. -o-transition-duration: 1s;
  437. -ms-transition-duration: 1s;
  438. }
  439.  
  440. .posts:hover .html_photoset:hover{
  441. -webkit-filter: grayscale(0%);
  442. -webkit-transition-duration: 1s;
  443. -moz-transition-duration: 1s;
  444. -o-transition-duration: 1s;
  445. -ms-transition-duration: 1s;
  446. z-index: 2px;
  447. }
  448. {/block:IfGrayscale}
  449.  
  450. {block:ifImageFade}
  451.  
  452. .posts img{
  453. opacity:0.6;
  454. -webkit-transition-duration: 1s;
  455. -moz-transition-duration: 1s;
  456. -o-transition-duration: 1s;
  457. -ms-transition-duration: 1s;
  458. }
  459.  
  460. .posts:hover img{
  461. opacity:1;
  462. -webkit-transition-duration: 1s;
  463. -moz-transition-duration: 1s;
  464. -o-transition-duration: 1s;
  465. -ms-transition-duration: 1s;
  466. z-index: 2px;
  467. }
  468.  
  469. .html_photoset {
  470. opacity:0.6;
  471. -webkit-transition-duration: 1s;
  472. -moz-transition-duration: 1s;
  473. -o-transition-duration: 1s;
  474. -ms-transition-duration: 1s;
  475. }
  476.  
  477. .posts:hover .html_photoset:hover{
  478. opacity:1;
  479. -webkit-transition-duration: 1s;
  480. -moz-transition-duration: 1s;
  481. -o-transition-duration: 1s;
  482. -ms-transition-duration: 1s;
  483. z-index: 2px;
  484. }
  485. {/block:ifImageFade}
  486.  
  487. .posts img, .posts li, .posts blockquote {max-width: 100%;}
  488. .caption {width:100%;margin-top:10px;}
  489.  
  490. .rules{
  491. background:{color:Solid Sidebar};
  492. color:{color:Nav Link};
  493. padding:10px;
  494. font-family:'consolas' sans-serif;
  495. text-transform:lowercase;
  496. letter-spacing:1px;
  497. line-height:1.5em;
  498. font-size:9px;;
  499. text-align:center;
  500. border-bottom:1px solid {color:blog title};
  501. }
  502. .rules a{
  503. color:{color:title};
  504. }
  505. .rue{
  506. font-size:12px;
  507. padding:6px;
  508. text-align:justify;
  509. color:{color:title};
  510. font-family: 'Roboto', sans-serif;
  511. font-weight:none;
  512. font-style:italic;
  513. text-transform:uppercase;
  514. }
  515.  
  516.  
  517. .thepopup{
  518. display: none;
  519. padding-bottom: 50px;
  520. padding-left: 40px;
  521. padding-right: 40px;
  522. float: left;
  523. position: fixed;
  524. top: 50%;
  525. left: 50%;
  526. color:{color:text};
  527. font-family:consolas;
  528. text-align:justify;
  529. font-size:10px;
  530. line-height:112%;
  531. height:600px;
  532. z-index: 99999999999999999999999999999999999999999999;
  533. }
  534.  
  535. *html #fade {
  536. position: absolute;
  537. }
  538.  
  539. *html .thepopup {
  540. position: absolute;
  541. }
  542.  
  543. #fade {
  544. display: none;
  545. position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  546. opacity: 1;
  547. z-index: 9999;}
  548.  
  549. .bg-none #fade{
  550. background:{color:background};}
  551.  
  552. .bg-cover #fade{
  553. background: url({image:Background Image})
  554. no-repeat center center fixed;
  555. -webkit-background-size: cover;
  556. -moz-background-size: cover;
  557. -o-background-size: cover;
  558. background-size: cover;}
  559.  
  560. .bg-pattern #fade{
  561. background: url({image:Background Image});
  562. background-repeat:repeat;
  563. background-attachment: fixed; }
  564.  
  565. .bg-gradient #fade{
  566. background: {color:Gradient 1}; /* Old browsers */
  567. background: -moz-linear-gradient(top, {color:Gradient 1} 0%, {color:Gradient 2} 100%); /* FF3.6+ */
  568. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,{color:Gradient 1}), color-stop(100%,{color:Gradient 2})); /* Chrome,Safari4+ */
  569. background: -webkit-linear-gradient(top, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* Chrome10+,Safari5.1+ */
  570. background: -o-linear-gradient(top, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* Opera 11.10+ */
  571. background: -ms-linear-gradient(top, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* IE10+ */
  572. background: linear-gradient(to bottom, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* W3C */
  573. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{color:Gradient 1}', endColorstr='{color:Gradient 2}',GradientType=0 ); /* IE6-9 */
  574. background-attachment: fixed;
  575. }
  576.  
  577.  
  578. img.btn_close {
  579. width:40px;
  580. float: right;
  581. margin-top:30px;
  582. margin-left:220px;
  583. padding:10px;
  584. position:absolute;
  585. z-index:1;
  586. {block:ifWhiteIcons}
  587. -webkit-filter: invert(100%);
  588. {/block:ifWhiteIcons}
  589. {block:ifnotWhiteIcons}
  590. -webkit-filter: invert(0%);
  591. {/block:ifnotWhiteIcons}
  592. -webkit-transition: all .6s ease;
  593. -moz-transition: all .6s ease;
  594. -o-transition: all .6s ease;
  595. -ms-transition: all .6s ease;
  596. transition: all .6s ease;
  597. }
  598. img.btn_close:hover{
  599. {block:ifWhiteIcons}
  600. -webkit-filter: invert(0%);
  601. {/block:ifWhiteIcons}
  602. {block:ifnotWhiteIcons}
  603. -webkit-filter: invert(100%);
  604. {/block:ifnotWhiteIcons}
  605. -webkit-transition: all .6s ease-out;
  606. -moz-transition: all .6s ease-out;
  607. -o-transition: all .6s ease-out;
  608. -ms-transition: all .6s ease-out;
  609. transition: all .6s ease-out;
  610. }
  611.  
  612. #main-date{
  613. margin-left:-110px;
  614. width:900px;
  615. float:center;
  616. position:absolute;
  617. padding-top:52px;
  618. margin-bottom:50px;
  619. }
  620.  
  621. #main-update{
  622. margin-left:-110px;
  623. width:900px;
  624. float:center;
  625. position:absolute;
  626. padding-top:50px;
  627. margin-bottom:50px;
  628. }
  629.  
  630. .update{
  631. background:{color:Solid Sidebar};
  632. margin-top:50px;
  633. text-align:center;
  634. margin-right:20px;
  635. padding:20px;
  636. height:210px;
  637. width:190px;
  638. float:left;
  639. box-shadow:7px 7px rgba(0, 0, 0, 0.1);
  640. }
  641.  
  642. .update a{
  643. color:{color:Nav Link};
  644. }
  645.  
  646. .update-2{
  647. background:{color:Solid Sidebar};
  648. margin-top:50px;
  649. text-align:center;
  650. margin-right:20px;
  651. padding:20px;
  652. height:200px;
  653. width:190px;
  654. overflow-y:scroll;
  655. overflow-x:hidden;
  656. float:left;
  657. box-shadow:7px 7px rgba(0, 0, 0, 0.1);
  658. }
  659.  
  660. .update-2 a{
  661. color:{color:Nav Link};
  662. }
  663.  
  664. .update-info{
  665. background:{color:Solid Sidebar};
  666. color:{color:Nav Link};
  667. padding:10px;
  668. font-family: 'consolas', sans-serif;
  669. text-transform:lowercase;
  670. line-height:1.4em;
  671. font-size:9px;
  672. padding:5px;
  673. }
  674.  
  675. .update-info a{
  676. color:{color:Nav Link};
  677. }
  678.  
  679.  
  680. .tag-info{
  681. padding:10px;
  682. font-family:consolas;
  683. text-transform:uppercase;
  684. line-height:2em;
  685. letter-spacing:1px;
  686. font-size:8px;
  687. display:inline-block;
  688. }
  689. .tag-info a{
  690. display:inline-block;
  691. padding:5px 10px;
  692. width:150px;
  693. background:{color:Solid Sidebar};
  694. color:{color:Nav Link};
  695. margin-bottom:15px;
  696. border-left:2px solid {color:title};
  697. border-bottom:2px solid transparent;
  698. -webkit-transition: all 0.8s ease;
  699. -moz-transition: all 0.8s ease;
  700. transition: all 0.8s ease;
  701. }
  702.  
  703. .tag-info a:hover{
  704. color:{color:title};
  705. text-shadow:0px 0px 2px {color:title};
  706. border-bottom:2px solid {color:blog title};
  707. border-left:2px solid transparent;
  708. -webkit-transition: all 0.8s ease;
  709. -moz-transition: all 0.8s ease;
  710. transition: all 0.8s ease;
  711. }
  712.  
  713. .update-info a:hover{
  714. color:{color:Nav Link Hover};
  715. }
  716. .update-info i{
  717. font-size:8px;
  718. padding:1px;
  719. color:{color:nav link};
  720. }
  721. .update-title{
  722. font-weight:800;
  723. text-align:center;
  724. vertical-align:center;
  725. text-shadow:0px 0px 3px {color:Blog Title};
  726. padding:6px 0;
  727. color:{color:Blog title};
  728. font-family: 'Roboto', sans-serif;
  729. text-transform:uppercase;
  730. border-bottom:1px solid {color:Blog Title};
  731. font-size:10px;
  732. margin-bottom:20px;
  733. }
  734.  
  735. #main-date-3{
  736. margin-left:-180px;
  737. width:900px;
  738. float:center;
  739. position:absolute;
  740. padding-top: 40px;
  741. margin-bottom:50px;
  742. }
  743.  
  744. .update-3{
  745. background:{color:solid sidebar};
  746. margin-top:80px;
  747. text-align:center;
  748. margin-right:10px;
  749. margin-bottom:-32px;
  750. overflow-y:scroll;
  751. overflow-x:hidden;
  752. padding:20px;
  753. height:375px;
  754. width:390px;
  755. float:left;
  756. border-radius:3px;
  757. box-shadow:7px 7px rgba(0, 0, 0, 0.1);
  758. }
  759.  
  760.  
  761. .about-p{
  762. text-align:justify;
  763. line-height:1.4em;
  764. font-size:11px;
  765. padding:10px;
  766. margin-top:15px;
  767. color:white;
  768. overflow:hidden;
  769. }
  770.  
  771.  
  772. .button{
  773. margin:0 auto;
  774. text-align:center;
  775. float:center;
  776. }
  777.  
  778.  
  779. /*Quote*/
  780.  
  781. #ink{
  782. font-family:'Roboto' sans-serif;
  783. text-shadow:0px 0px 3px {color:title};
  784. color:{color:title};
  785. text-transform:uppercase;
  786. letter-spacing:1px;
  787. text-align:center;
  788. font-size:13px;
  789. line-height:1.4em;
  790. font-weight:800;
  791. padding:10px;
  792. }
  793.  
  794. #ink a{
  795. text-shadow:0px 0px 3px {color:title};
  796. color:{color:title};
  797. }
  798. #ink-source a{
  799. color:{color:text};
  800. }
  801.  
  802. #ink-source {
  803. text-align:center;
  804. font-style:none;
  805. font-weight:none;
  806. text-transform:uppercase;
  807. margin-top:5px;
  808. font-size:8px;
  809. font-family: 'consolas', sans-serif;;
  810. margin-bottom:20px;}
  811.  
  812. /*audio*/
  813.  
  814. .tracks{
  815. margin-bottom:1px;
  816. width:90px;
  817. padding:9px 4px;
  818. margin-left:5px;
  819. margin-top:2px;}
  820.  
  821. .player iframe {
  822. width: 30px;
  823. height: 30px;}
  824.  
  825. .black .white,
  826. .black .grey { display: none;}
  827. .white .black,
  828. .white .grey { display: none;}
  829. .grey .white,
  830. .grey .black { display: none;}
  831.  
  832. .black .player_container { background: #000;}
  833. .black .player_wrap { background-color: rgba(0,0,0,0.8); }
  834. .grey .player_container { background: #e4e4e4;}
  835. .grey .player_wrap { background-color: rgba(228, 228, 228, 0.8); }
  836.  
  837. .black .tracks { background: #000; color:white;}
  838. .black .tracks { background-color: rgba(0,0,0,0.8);color:white;}
  839. .grey .tracks { background: #e4e4e4;}
  840. .grey .tracks { background-color: rgba(228, 228, 228, 0.8); }
  841.  
  842. .audio {
  843. position: relative;
  844. margin-bottom:20px;
  845. margin-top:10px;
  846. margin-left:10px;
  847. }
  848.  
  849. .player-art {
  850. position: relative;
  851. vertical-align: top;
  852. margin-left:5px;
  853. width: 112px;
  854. height: 112px;
  855. margin-top:13px;
  856. }
  857. .player-art img { width: 112px; }
  858.  
  859. img.album { position: absolute; z-index: 2;}
  860. img.default { position: absolute; z-index: 1; }
  861.  
  862.  
  863. .player-wrap {
  864. position: relative;
  865. width: 95px;
  866. display: inline-block;
  867. left: 0;
  868. }
  869.  
  870. ol.audioinfo {
  871. list-style-type: none;
  872. width: auto;
  873. margin-left:10px;
  874. margin-top:4px;
  875. padding:0;
  876. z-index: 10;
  877. position: relative;
  878. display: inline-block;
  879. vertical-align: top;
  880. line-height: 1.38em;
  881. text-transform:uppercase;
  882. font-family:'Roboto'sans-serif;
  883. font-size:8px;
  884. letter-spacing:1px;
  885. }
  886.  
  887.  
  888. .player {
  889. width: 30px; height: 30px;
  890. overflow: hidden;
  891. margin: -14px 0 0 -14px;
  892. padding: 0px;
  893. position: absolute;
  894. top: 50%;
  895. left: 50%;
  896. }
  897. .player_container {
  898. z-index: 11;
  899. opacity: 0.3; filter: alpha(opacity=30);
  900. -webkit-transition: all 0.2s ease-in-out;
  901. -moz-transition: all 0.2s ease-in-out;
  902. -o-transition: all 0.2s ease-in-out ;
  903. -ms-transition: all 0.2s ease-in-out;
  904. }
  905. .player_wrap {
  906. z-index: 9;
  907. -webkit-transition: all 0.2s ease-in-out;
  908. -moz-transition: all 0.2s ease-in-out;
  909. -o-transition: all 0.2s ease-in-out ;
  910. -ms-transition: all 0.2s ease-in-out; }
  911.  
  912. .player_container, .player_wrap {
  913. position: absolute;
  914. top: 50%;
  915. left: 50%;
  916. width: 50px; height: 50px;
  917. margin-top: -20px;
  918. margin-left: -13px;
  919. -moz-border-radius:50px;
  920. -webkit-border-radius:50px;
  921. border-radius: 50px; }
  922.  
  923. .player_container:hover{
  924. opacity:1;
  925. -webkit-transition: all 0.2s ease-in-out;
  926. -moz-transition: all 0.2s ease-in-out;
  927. -o-transition: all 0.2s ease-in-out ;
  928. -ms-transition: all 0.2s ease-in-out;
  929. }
  930.  
  931. /* Asks */
  932.  
  933. .ques {
  934. margin-bottom:10px;
  935. text-transform:uppercase;
  936. font-weight:300;
  937. font-family:'Roboto'sans-serif;
  938. letter-spacing:1px;
  939. color:{color:text};
  940. padding:10px;
  941. line-height:13px;
  942. }
  943.  
  944. .ques a{
  945. color:{color:link};
  946. }
  947.  
  948. .who {
  949. padding:10px;
  950. color:{color:text};
  951. text-align:left;
  952. border-bottom:1px solid #878;
  953. font-style:italic;
  954. font-size:8px;
  955. }
  956.  
  957.  
  958. .who a{
  959. color:{color:link};}
  960.  
  961. .answer {
  962. margin-top:10px;
  963. padding:10px;
  964. letter-spacing:1px;
  965. text-transform:lowercase;
  966. font-family:'Consolas'sans-serif;
  967. text-align:justify;
  968. font-size:9px;
  969. color:{color:text};
  970. letter-spacing:1px;}
  971. .answer li{
  972. list-style:none;
  973. }
  974. .answer a{
  975. color:{color:link};
  976. font-style:italic;
  977. }
  978.  
  979. /*Chat*/
  980.  
  981. .chat ol {
  982. padding:0;
  983. list-style:none;
  984. }
  985. .line {padding:5px 0;}
  986.  
  987.  
  988. /*Permalink and notes*/
  989.  
  990. .infos {
  991. width:288px;
  992. position:absolute;
  993. margin-top:14px;
  994. margin-left:-21px;
  995. padding:10px 2px;
  996. font-size:8px;;
  997. letter-spacing:1px;
  998. text-transform:uppercase;
  999. text-align:center;
  1000. color:{color:Nav Link};
  1001. background:{color:Solid Sidebar};
  1002. box-shadow:7px 7px rgba(0, 0, 0, 0.1);
  1003. z-index:0;
  1004.  
  1005. }
  1006.  
  1007. .infos a {margin:0 5px;
  1008. text-decoration:none;
  1009. color:{color:Nav Link};}
  1010. .infos a:hover {color:{color:hover};}
  1011.  
  1012.  
  1013.  
  1014. /*Tags*/
  1015.  
  1016. .tags {
  1017. width:290px;
  1018. font-style:italic;
  1019. border:1px solid {color:solid sidebar};
  1020. {block:IndexPage}
  1021. position:absolute;
  1022. margin-top:-20px;
  1023. margin-left:-2px;
  1024. opacity:0;
  1025. {/block:IndexPage}
  1026. {block:PermalinkPage}
  1027. position:absolute;
  1028. margin-top:10px;
  1029. {/block:PermalinkPage}
  1030. box-shadow:7px 7px rgba(0, 0, 0, 0.1);
  1031. text-align:center;
  1032. font-size:8px;
  1033. padding:5px 0;
  1034. color:{color:text};
  1035. margin-left:-2px;
  1036. border-top:1px solid {color:Solid Sidebar};
  1037. text-transform:uppercase;
  1038. background:white;
  1039. word-break:break-all;
  1040. z-index:9999999999999999999999999;
  1041. -webkit-transition: all 0.8s ease;
  1042. -moz-transition: all 0.8s ease;
  1043. transition: all 0.8s ease;
  1044. }
  1045.  
  1046. .tags a{
  1047. text-decoration:none;
  1048. color:{color:text};
  1049. }
  1050. {block:IndexPage}
  1051. .posts:hover .tags{
  1052. opacity:1;
  1053. margin-top:10px;
  1054. margin-bottom:50px;
  1055. box-shadow:7px 7px rgba(0, 0, 0, 0.1);
  1056. }
  1057. {/block:IndexPage}
  1058.  
  1059. /*Page Notes*/
  1060.  
  1061. ol.notes {
  1062. width:265px;
  1063. padding:10px;
  1064. margin-top:130px;
  1065. list-style-type: none;
  1066. background:{color:background};
  1067. box-shadow:7px 7px rgba(0, 0, 0, 0.1);
  1068. }
  1069. ol.notes li.note {
  1070. padding: 4px;
  1071. display: inline-block;}
  1072. ol.notes li.more_notes_link_container {
  1073. display: block;
  1074. font-size:8px;;
  1075. text-transform:uppercase;
  1076. }
  1077. ol.notes li.note img.avatar {
  1078. vertical-align: -2px;
  1079. margin-left: 0px;
  1080. width: 14px;
  1081. height: 14px;
  1082. border-radius: 100%;
  1083. -webkit-border-radius: 100%;
  1084. -moz-border-radius: 100%; }
  1085. ol.notes li.note span.action {
  1086. display: none;}
  1087. ol.notes div.clear {display: none;}
  1088. ol.notes li.note .answer_content {
  1089. display:none;}
  1090. ol.notes li.note blockquote {display:none;}
  1091. ol.notes li.note blockquote a { text-decoration: none; }
  1092.  
  1093.  
  1094.  
  1095. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1096. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1097. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1098.  
  1099. .fade-in {
  1100. opacity:0;
  1101. -webkit-animation:fadeIn ease-in 1;
  1102. -moz-animation:fadeIn ease-in 1;
  1103. animation:fadeIn ease-in 1;
  1104. -webkit-animation-fill-mode:forwards;
  1105. -moz-animation-fill-mode:forwards;
  1106. animation-fill-mode:forwards;
  1107. -webkit-animation-duration:1s;
  1108. -moz-animation-duration:1s;
  1109. animation-duration:1s;
  1110. }
  1111.  
  1112. .fade-in.two {
  1113. -webkit-animation-delay: 0.7s;
  1114. -moz-animation-delay: 0.7s;
  1115. animation-delay: 0.7s;
  1116. }
  1117.  
  1118. {block:ifFadeContent}
  1119. .fade-in.one {
  1120. -webkit-animation-delay: 0.7s;
  1121. -moz-animation-delay: 0.7s;
  1122. animation-delay: 0.7s;
  1123. }
  1124. {/block:ifFadeContent}
  1125. #tumblrcontrols{
  1126. position:fixed;
  1127. top:-2px;
  1128. right:0px;
  1129. padding:5px;
  1130. word-spacing:2px;
  1131. }
  1132.  
  1133.  
  1134. #tumblrcontrols{
  1135. text-align:right;
  1136. font-size:9px;;
  1137. letter-spacing:1px;
  1138. padding:10px 20px;
  1139. opacity:1;
  1140. width:100%;
  1141. font-weight:800;
  1142. background:{color:solid sidebar};
  1143. text-shadow:0px 0px 1px {color:Title};
  1144. color:{color:title};
  1145. font-family: 'Roboto', sans-serif;
  1146. text-transform:uppercase;
  1147. position:fixed;
  1148. z-index:1;
  1149. -webkit-transition: all 1.6s ease-in;
  1150. -moz-transition: all 1.6s ease-in;
  1151. -o-transition: all 1.6s ease-in;
  1152. -ms-transition: all 1.6s ease-in;
  1153. transition: all 1.6s ease-in;
  1154. }
  1155.  
  1156. #tumblrcontrols a{
  1157. padding:5px 9px;
  1158. text-decoration:none;
  1159. color:{color:title};
  1160. background:{color:solid sidebar};
  1161. }
  1162.  
  1163. #tumblrcontrols i{
  1164. color:{color:title};
  1165. font-size:11px;
  1166. }
  1167.  
  1168. #tumblrcontrols a:hover i{
  1169. color:{color:Nav Link Hover};
  1170. }
  1171.  
  1172. #tumblrcontrols a:hover{
  1173. color:{color:Nav Link Hover};
  1174. }
  1175.  
  1176. {block:IndexPage}
  1177. #tumblr_controls {display:none;}
  1178. {/block:IndexPage}
  1179.  
  1180. {block:PermalinkPage}
  1181. #tumblrcontrols{
  1182. display:none;}
  1183. iframe#tumblr_controls {
  1184. top:5px;
  1185. position: fixed !important;
  1186. -moz-transition: all 1s ease-out;
  1187. -webkit-transition: opacity 0.7s linear;
  1188. -webkit-transition: all 1s ease-out;
  1189. transition: all 1s ease-out;
  1190. opacity: 0.4;}
  1191.  
  1192. iframe#tumblr_controls:hover {
  1193. -webkit-transition: opacity 0.7s linear;
  1194. -moz-transition: all 0.4s ease-out;
  1195. -webkit-transition: all 0.4s ease-out;
  1196. transition: all 0.4s ease-out;
  1197. opacity:.7;}
  1198. {/block:PermalinkPage}
  1199.  
  1200. #music{
  1201. text-align:left;
  1202. float:left;
  1203. display:inline-block;
  1204. width:20px;
  1205. height:10px;
  1206. margin-left:30px;
  1207. margin-top:-1px;
  1208. display:block;
  1209. background:{color:sidebar background};
  1210. -webkit-transition: all .7s ease;
  1211. -moz-transition: all .7s ease;
  1212. -o-transition: all .7s ease;
  1213. -ms-transition: all .7s ease;
  1214. transition: all .7s ease;
  1215. }
  1216. #music i{font-size:16px;}
  1217. #music:hover{cursor:help;margin-left:0px;}
  1218. #music:hover #music-con{opacity:1;margin-left:5px;
  1219. -webkit-transition: all .7s ease;
  1220. -moz-transition: all .7s ease;
  1221. -o-transition: all .7s ease;
  1222. -ms-transition: all .7s ease;
  1223. transition: all .7s ease;}
  1224.  
  1225. #music-con{
  1226. opacity:0;
  1227. margin-top:-16px;
  1228. margin-left:-5px;
  1229. width:100px;
  1230. -webkit-transition: all .7s ease;
  1231. -moz-transition: all .7s ease;
  1232. -o-transition: all .7s ease;
  1233. -ms-transition: all .7s ease;
  1234. transition: all .7s ease;}
  1235.  
  1236.  
  1237. /*Credit*/
  1238. #creds {
  1239. font-family: 'consolas', sans-serif;
  1240. position:fixed;
  1241. float:left;
  1242. text-transform:uppercase;
  1243. z-index:1;
  1244. bottom:0px;
  1245. left:0px;
  1246. padding-right:17px;
  1247. padding-top:9px;
  1248. padding-bottom:10px;
  1249. padding-left:10px;
  1250. width:3px;
  1251. height:10px;
  1252. letter-spacing:0px;
  1253. background:{color:solid sidebar};
  1254. -webkit-transition: all 1s ease;
  1255. -moz-transition: all 1s ease;
  1256. -o-transition: all 1s ease;
  1257. -ms-transition: all 1s ease;
  1258. transition: all 1s ease;
  1259. }
  1260. #creds:hover{
  1261. padding-right:17px;
  1262. padding-top:9px;
  1263. padding-bottom:10px;
  1264. padding-left:100px;
  1265. }
  1266. #creds:hover a{
  1267. opacity:1;
  1268. margin-left:-78px;
  1269. color:{color:Nav Link Hover};
  1270. }
  1271.  
  1272. #creds a{
  1273. font-size:8px;
  1274. letter-spacing:1px;
  1275. position:absolute;
  1276. margin-top:-1px;
  1277. margin-left:-150px;
  1278. padding:2px;
  1279. opacity:0;
  1280. background:{color:solid sidebar};
  1281. color:{color:nav link};
  1282. z-index:999999999999;
  1283. }
  1284.  
  1285. #creds span{
  1286. font-size:8px;
  1287. color:{color:nav link};
  1288. letter-spacing:1px;
  1289. -webkit-transition: all 1s ease;
  1290. -moz-transition: all 1s ease;
  1291. -o-transition: all 1s ease;
  1292. -ms-transition: all 1s ease;
  1293. transition: all 1s ease;
  1294. }
  1295.  
  1296. #creds:hover span{
  1297. display:none;
  1298. opacity:0;
  1299. }
  1300.  
  1301.  
  1302.  
  1303. {CustomCSS}
  1304.  
  1305.  
  1306. </style>
  1307.  
  1308. {block:ifLazyLoad}
  1309. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  1310. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  1311. <script type="text/javascript" charset="utf-8">
  1312. var $j = jQuery.noConflict();
  1313. $j(function() {
  1314. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  1315. $j("img").lazyload({
  1316. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  1317. effect: "fadeIn",
  1318. });
  1319. });
  1320. </script>
  1321. {/block:ifLazyLoad}
  1322. </head>
  1323.  
  1324. <body class="{select:Background image}">
  1325. <div id="tumblrcontrols">
  1326. {block:ifMusicPlayer}<div id="music"><i class="fa fa-bars"></i>
  1327. <div id="music-con" style="{block:ifWhiteIcons}
  1328. -webkit-filter:brightness(290%)
  1329. {/block:ifWhiteIcons}
  1330. {block:ifnotWhiteIcons}
  1331. -webkit-filter:brightness(0%)
  1332. {/block:ifnotWhiteIcons}">
  1333. {text:Music Code}
  1334. </div>
  1335. </div>{/block:ifMusicPlayer}
  1336. <a href="http://www.tumblr.com/follow/{Name}">follow</a>
  1337. <a href="http://www.tumblr.com/dashboard">dashboard</a>
  1338. </div>
  1339. <div id="half">
  1340. <div id="sbimage"><img src="{image:Sidebar}"></div>
  1341. <div id="bt"><a href="/">{title}</a></div>
  1342. <div id="nav">
  1343. <nav class="cl-effect-5">
  1344. <li><a href="/"><span data-hover="home">index</span></a></li>
  1345. {block:ifAskbox}
  1346. <li><a href="#?w=500" rel="03" class="poplight"><span data-hover="ask box">message</span></a></li>
  1347. {/block:ifAskbox}
  1348. {block:ifTags}
  1349. <li><a href="#?w=500" rel="01" class="poplight"><span data-hover="tags page">navigation</span></a></li>
  1350. {/block:ifTags}
  1351. <li><a href="{text:Link 1 URL}">
  1352. <span data-hover="{text:Link 1 Hover}">{text:Link 1}</span></a></li>
  1353. <li class="links"><a href="{text:Link 2 URL}"><span data-hover="{text:Link 2 Hover}">{text:Link 2}</span></a></li>
  1354. {block:ifnotTags}
  1355. <li><a href="{text:Link 3 URL}"><span data-hover="{text:Link 3 Hover}">{text:Link 3}</span></a></li>
  1356. {/block:ifnotTags}
  1357. {block:ifnotAskbox}
  1358. <li><a href="{text:Link 4 URL}"><span data-hover="{text:Link 4 Hover}">{text:Link 4}</span></a></li>
  1359. {/block:ifnotAskbox}
  1360. </nav>
  1361. </div>
  1362.  
  1363. <div id="desc">{description}</div>
  1364. </div>
  1365.  
  1366. <div id="con" class="box fade-in one">
  1367. <div id="entries">
  1368.  
  1369. {block:Posts}
  1370. <div class="posts">
  1371.  
  1372. {block:Quote}
  1373. <div id="ink">{Quote}</div>
  1374. {block:Source}<div id="ink-source">{Source}</div>{/block:Source}
  1375. {/block:Quote}
  1376.  
  1377.  
  1378.  
  1379. {block:Text}
  1380. {block:Title}
  1381. <div id="title">{Title}</div>{/block:Title}
  1382. {Body}
  1383.  
  1384. {/block:Text}
  1385.  
  1386. {block:Link}
  1387. <div id="title"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
  1388. {/block:Link}
  1389.  
  1390. {block:Chat}
  1391. {block:Title}
  1392. <h1>{Title}</h1>
  1393. {/block:Title}
  1394. <div class="chat">
  1395. <ol>{block:Lines}
  1396. <li class="line {Alt}">
  1397. {block:Label}
  1398. <span class="label">
  1399. {Label}</span>
  1400. {/block:Label}{Line}</li>
  1401. {/block:Lines}
  1402. </ol></div>
  1403. {/block:Chat}
  1404. {block:Photo}
  1405.  
  1406. {LinkOpenTag}
  1407. <img src="{PhotoURL-250}">
  1408. {LinkCloseTag}
  1409.  
  1410. {block:IfHiddenCaptions}
  1411. {block:PermalinkPage}
  1412. {block:Caption}
  1413. <div class="caption">{Caption}</div>
  1414. {/block:Caption}
  1415. {/block:PermalinkPage}
  1416. {/block:IfHiddenCaptions}
  1417. {block:IfnotHiddenCaptions}
  1418. {block:Caption}
  1419. <div class="caption">{Caption}</div>
  1420. {/block:Caption}
  1421. {/block:IfnotHiddenCaptions}
  1422. {/block:Photo}
  1423.  
  1424. {block:Photoset}
  1425. <div id="photo-set">{Photoset-250}</div>
  1426. {block:IfHiddenCaptions}
  1427. {block:PermalinkPage}
  1428. {block:Caption}
  1429. <div class="caption">{Caption}</div>
  1430. {/block:Caption}
  1431. {/block:PermalinkPage}
  1432. {/block:IfHiddenCaptions}
  1433. {block:IfnotHiddenCaptions}
  1434. {block:Caption}
  1435. <div class="caption">{Caption}</div>
  1436. {/block:Caption}
  1437. {/block:IfnotHiddenCaptions}
  1438. {/block:Photoset}
  1439.  
  1440. {block:Video}
  1441. <div id="vids">
  1442. {Video-250}</div>
  1443. {block:IfHiddenCaptions}
  1444. {block:PermalinkPage}
  1445. {block:Caption}
  1446. <div class="caption">{Caption}</div>
  1447. {/block:Caption}
  1448. {/block:PermalinkPage}
  1449. {/block:IfHiddenCaptions}
  1450. {block:IfnotHiddenCaptions}
  1451. {block:Caption}
  1452. <div class="caption">{Caption}</div>
  1453. {/block:Caption}
  1454. {/block:IfnotHiddenCaptions}
  1455. {/block:Video}
  1456.  
  1457. {block:Audio}
  1458. <div class="audio">
  1459. <div class="player-wrap {select:Player Color}">
  1460. <div class="player-art">
  1461. {block:AlbumArt}
  1462. <img class="album" src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}"/>
  1463. {/block:AlbumArt}
  1464. <img class="default" src="http://static.tumblr.com/3dkvxpf/Pj9nbm5vp/default_cover_m.jpg" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}"/>
  1465. </div>
  1466.  
  1467.  
  1468. <div class="player_wrap {select:Avatar Shape}"></div>
  1469. <div class="player_container {select:Avatar Shape}">
  1470. <div class="player">
  1471. <div class="black">{AudioPlayerBlack}</div>
  1472. <div class="white">{AudioPlayerWhite}</div>
  1473. <div class="grey">{AudioPlayerGrey}</div>
  1474. </div>
  1475. </div>
  1476. </div>
  1477. <ol class="audioinfo">
  1478. <div class="tracks {select:Player Color}">
  1479. <li class="tracks">{block:TrackName} {TrackName}{/block:TrackName}</li>
  1480. <li class="tracks">{block:Artist} {Artist}{/block:Artist} </li>
  1481. <li class="tracks">{block:Album} {Album}{/block:Album}</li>
  1482. </ol>
  1483.  
  1484. </div>
  1485. {block:IfHiddenCaptions}
  1486. {block:PermalinkPage}
  1487. {block:Caption}
  1488. <div class="caption">{Caption}</div>
  1489. {/block:Caption}
  1490. {/block:PermalinkPage}
  1491. {/block:IfHiddenCaptions}
  1492. {block:IfnotHiddenCaptions}
  1493. {block:Caption}
  1494. <div class="caption">{Caption}</div>
  1495. {/block:Caption}
  1496. {/block:IfnotHiddenCaptions}
  1497. {/block:Audio}
  1498.  
  1499. {block:Answer}
  1500. <div class="ques">
  1501. <div class="who" ><b>{Asker}</b> - {Question}</div>
  1502. <div class="answer">{Answer}</div>
  1503. </div>
  1504. {/block:Answer}
  1505.  
  1506. {block:Date}
  1507. <div class="infos">
  1508. <a href="{Permalink}">{Timeago}</a>{block:NoteCount}<a href="{Permalink}">{NoteCountwithlabel}</a>{/block:NoteCount}<a href="{ReblogURL}" target="_blank">reblog</a>{block:permalinkpage}{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:permalinkpage}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">-{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1509. </div>
  1510. {/block:Date}
  1511.  
  1512.  
  1513. </div>
  1514.  
  1515.  
  1516. {block:PostNotes}
  1517. <div class="pagenotes">
  1518. {PostNotes}
  1519. </div>
  1520. {/block:PostNotes}
  1521.  
  1522.  
  1523. {/block:Posts}
  1524.  
  1525. <div id="pagination">
  1526. {block:Pagination}
  1527. {block:PreviousPage}
  1528. <a href="{PreviousPage}"class="links">back</a> -
  1529. {/block:PreviousPage}
  1530.  
  1531.  
  1532. {block:NextPage}
  1533. <a href="{NextPage}" class="links">next</a>
  1534. {/block:NextPage}
  1535. {/block:Pagination}
  1536. </div>
  1537.  
  1538.  
  1539.  
  1540. </div>
  1541.  
  1542. </div>
  1543.  
  1544. {block:ContentSource}
  1545. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1546. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1547. {/block:SourceLogo}
  1548. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  1549. {/block:ContentSource}
  1550.  
  1551. {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom}
  1552.  
  1553.  
  1554. <div id="creds"><a href="http://960px.tumblr.com/">960px</a><span>TT</span></div>
  1555.  
  1556.  
  1557. </div>
  1558.  
  1559. <div id="01" class="thepopup" class="{select:background image}">
  1560. <div id="main-date">
  1561. <Center>
  1562. <div class="update-2"><!---Custom Tags Begin! --->
  1563.  
  1564. <big class="update-title">Tag Title</big><!---Title for the Tags --->
  1565. <p class="tag-info" style="text-align:left;">
  1566. <!---Just replac # with the name of the tag --->
  1567. <a href="/tagged/#"class="links">tag</a><br>
  1568. <a href="/tagged/#"class="links">tag</a><br>
  1569. <a href="/tagged/#"class="links">tag</a><br>
  1570. <a href="/tagged/#"class="links">tag</a><br>
  1571. <a href="/tagged/#"class="links">tag</a><br>
  1572. <a href="/tagged/#"class="links">tag</a><br>
  1573. <a href="/tagged/#"class="links">tag</a><br>
  1574. <a href="/tagged/#"class="links">tag</a><br>
  1575. <a href="/tagged/#"class="links">tag</a><br>
  1576. <a href="/tagged/#"class="links">tag</a><br>
  1577. </p>
  1578. </div>
  1579.  
  1580. <div class="update-2">
  1581. <big class="update-title">Tag Title</big>
  1582. <p class="tag-info" style="text-align:left;">
  1583. <a href="/tagged/#"class="links">tag</a><br>
  1584. <a href="/tagged/#"class="links">tag</a><br>
  1585. <a href="/tagged/#"class="links">tag</a><br>
  1586. <a href="/tagged/#"class="links">tag</a><br>
  1587. <a href="/tagged/#"class="links">tag</a><br>
  1588. <a href="/tagged/#"class="links">tag</a><br>
  1589. <a href="/tagged/#"class="links">tag</a><br>
  1590. <a href="/tagged/#"class="links">tag</a><br>
  1591. <a href="/tagged/#"class="links">tag</a><br>
  1592. <a href="/tagged/#"class="links">tag</a><br>
  1593. </p>
  1594. </div>
  1595.  
  1596. <div class="update-2">
  1597. <big class="update-title">Tag Title</big>
  1598. <p class="tag-info" style="text-align:left;">
  1599. <a href="/tagged/#"class="links">tag</a><br>
  1600. <a href="/tagged/#"class="links">tag</a><br>
  1601. <a href="/tagged/#"class="links">tag</a><br>
  1602. <a href="/tagged/#"class="links">tag</a><br>
  1603. <a href="/tagged/#"class="links">tag</a><br>
  1604. <a href="/tagged/#"class="links">tag</a><br>
  1605. <a href="/tagged/#"class="links">tag</a><br>
  1606. <a href="/tagged/#"class="links">tag</a><br>
  1607. <a href="/tagged/#"class="links">tag</a><br>
  1608. <a href="/tagged/#"class="links">tag</a><br>
  1609. </p>
  1610. </div>
  1611. <div class="update-2">
  1612. <big class="update-title">Tag Title</big>
  1613. <p class="tag-info" style="text-align:left;">
  1614. <a href="/tagged/#"class="links">tag</a><br>
  1615. <a href="/tagged/#"class="links">tag</a><br>
  1616. <a href="/tagged/#"class="links">tag</a><br>
  1617. <a href="/tagged/#"class="links">tag</a><br>
  1618. <a href="/tagged/#"class="links">tag</a><br>
  1619. <a href="/tagged/#"class="links">tag</a><br>
  1620. <a href="/tagged/#"class="links">tag</a><br>
  1621. <a href="/tagged/#"class="links">tag</a><br>
  1622. <a href="/tagged/#"class="links">tag</a><br>
  1623. <a href="/tagged/#"class="links">tag</a><br>
  1624. </p>
  1625. </div>
  1626.  
  1627. <div class="update-2">
  1628. <big class="update-title">Tag Title</big>
  1629. <p class="tag-info" style="text-align:left;">
  1630. <a href="/tagged/#"class="links">tag</a><br>
  1631. <a href="/tagged/#"class="links">tag</a><br>
  1632. <a href="/tagged/#"class="links">tag</a><br>
  1633. <a href="/tagged/#"class="links">tag</a><br>
  1634. <a href="/tagged/#"class="links">tag</a><br>
  1635. <a href="/tagged/#"class="links">tag</a><br>
  1636. <a href="/tagged/#"class="links">tag</a><br>
  1637. <a href="/tagged/#"class="links">tag</a><br>
  1638. <a href="/tagged/#"class="links">tag</a><br>
  1639. <a href="/tagged/#"class="links">tag</a><br>
  1640. </p>
  1641. </div>
  1642.  
  1643. <div class="update-2">
  1644. <big class="update-title">Tag Title</big>
  1645. <p class="tag-info" style="text-align:left;">
  1646. <a href="/tagged/#"class="links">tag</a><br>
  1647. <a href="/tagged/#"class="links">tag</a><br>
  1648. <a href="/tagged/#"class="links">tag</a><br>
  1649. <a href="/tagged/#"class="links">tag</a><br>
  1650. <a href="/tagged/#"class="links">tag</a><br>
  1651. <a href="/tagged/#"class="links">tag</a><br>
  1652. <a href="/tagged/#"class="links">tag</a><br>
  1653. <a href="/tagged/#"class="links">tag</a><br>
  1654. <a href="/tagged/#"class="links">tag</a><br>
  1655. <a href="/tagged/#"class="links">tag</a><br>
  1656. </p>
  1657. </div>
  1658.  
  1659.  
  1660. </div>
  1661. </div>
  1662. </div>
  1663. </div>
  1664.  
  1665.  
  1666. <div id="03" class="thepopup" class="{select:background image}">
  1667. <div id="main-date-3">
  1668. <div class="update-3">
  1669. <big class="update-title">facts & questions</big><br>
  1670. <div class="about-p">
  1671. <p class="rules" style="padding:14px;">
  1672. Mauris pellentesque nibh izzle turpis. Gizzle izzle cool. That's the shizzle break yo neck, yall rhoncizzle fo shizzle. In hac habitasse i'm in the shizzle dictumst. Uhuh ... yih! dapibizzle. Mah nizzle go to hizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle, pretizzle ghetto, mattizzle yippiyo, uhuh ... yih! vitae, nunc. Sheezy suscipizzle. Integizzle semper own yo' pizzle shut the shizzle up.</p>
  1673.  
  1674.  
  1675. <p class="rules" style="padding:14px;">Lorizzle ipsizzle own yo' sizzle gangsta, shiznit shiznit crackalackin. Nullam sapizzle velizzle, ma nizzle volutpat, suscipizzle quis, ass vizzle, arcu. Pellentesque the bizzle break yo neck, yall. Sed erizzle. Shizzle my nizzle crocodizzle izzle pot dapibizzle boom shackalack tempizzle tempor.
  1676. </p>
  1677.  
  1678. </div>
  1679. </div>
  1680.  
  1681. <div class="update-3">
  1682. <big class="update-title">message</big><br>
  1683. <div class="about-p">
  1684. <iframe frameborder="0" height="200" id="ask_form" class="asks" scrolling="none" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"> </iframe>
  1685.  
  1686. </div>
  1687. </div>
  1688. </div>
  1689. </div>
  1690. <!---closing ask pop up--->
  1691. </body>
  1692. <!-- jquery for tooltips-->
  1693. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1694.  
  1695. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1696.  
  1697. <script>
  1698.  
  1699. (function($){
  1700.  
  1701. $(document).ready(function(){
  1702.  
  1703. $("a[title]").style_my_tooltips({
  1704.  
  1705. tip_follows_cursor:true,
  1706.  
  1707. tip_delay_time:40,
  1708.  
  1709. tip_fade_speed:400,
  1710.  
  1711. attribute:"title"
  1712.  
  1713. });
  1714.  
  1715. });
  1716.  
  1717. })(jQuery);
  1718.  
  1719. </script>
  1720.  
  1721. <script type="text/javascript"
  1722. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  1723.  
  1724. <script>
  1725. $(document).ready(function() {
  1726. //
  1727. //When you click on a link with class of poplight and the href starts with a #
  1728. $('a.poplight[href^=#]').click(function() {
  1729. var popID = $(this).attr('rel'); //Get Popup Name
  1730. var popURL = $(this).attr('href'); //Get Popup href to define size
  1731. //Pull Query & Variables from href URL
  1732. var query= popURL.split('?');
  1733. var dim= query[1].split('&');
  1734. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  1735. //Fade in the Popup and add close button
  1736. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://i60.tinypic.com/r720j6.png" class="btn_close" alt="close" /></a>');
  1737. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend;
  1738. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  1739. var popMargTop = ($('#' + popID).height() + 90) / 2;
  1740. var popMargLeft = ($('#' + popID).width() + 90) / 2;
  1741. //Apply Margin to Popup
  1742. $('#' + popID).css({
  1743. 'margin-top' : -popMargTop,
  1744. 'margin-left' : -popMargLeft
  1745. });
  1746. //Fade in Background
  1747. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  1748. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  1749. return false;
  1750. });
  1751. //Close Popups and Fade Layer
  1752. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  1753. $('#fade , .thepopup').fadeOut(function() {
  1754. $('#fade, a.close').remove(); //fade them both out
  1755.  
  1756. });
  1757. return false;
  1758. });
  1759.  
  1760. });
  1761. </script>
  1762. </html>
Advertisement
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!