API tools faq
paste
Advertisement
nofacesface

Orithyia Revamp

nofacesface
Nov 15th, 2014
7,288
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--THEME BY NO-FACES-FACE
  5. steal and I'll find you and punch you in the throat  (◡‿◡✿)
  6. -->
  7.  
  8. <head>
  9.  
  10. {block:ifSnow}
  11. <script src="http://static.tumblr.com/p2evvtm/7Lzm07nfv/snowstorm.js"></script>
  12. <script>
  13. snowStorm.autoStart = true;
  14. snowStorm.snowColor = '{color:Snow Color}'; // Snow Color
  15. snowStorm.flakesMaxActive = 200;  // Amount of Snowflakes Falling
  16. snowStorm.flakeBottom = null; // Snowflakes piling up on bottom of your screen?
  17. snowStorm.freezeOnBlur = true;
  18. </script>
  19. {/block:ifSnow}
  20.  
  21. <meta name="color:Link" content=""/>
  22. <meta name="color:Link Title" content=""/>
  23. <meta name="color:Link Title BG" content=""/>
  24. <meta name="color:Hover" content="" />
  25. <meta name="color:Scroll" content="" />
  26.  
  27. <meta name="color:Background" content="" />
  28. <meta name="color:Post BG" content="" />
  29. <meta name="color:Snow Color" content="" />
  30.  
  31. <meta name="color:Text" content="" />
  32. <meta name="color:Underline" content="" />
  33. <meta name="color:Bold" content="" />
  34. <meta name="color:Italic" content="" />
  35. <meta name="color:Blockquote" content="" />
  36. <meta name="color:Blog Title" content=""/>
  37. <meta name="color:Post Title" content="" />
  38. <meta name="color:Description" content="" />
  39.  
  40. <meta name="color:Borders" content="" />
  41.  
  42. <meta name="color:Pagination" content="" />
  43. <meta name="color:Pagination Hover" content="" />
  44. <meta name="color:Gift" content="" />
  45.  
  46. <meta name="color:Permalink Icon" content="" />
  47. <meta name="color:Permalink Icon Hover" content="" />
  48.  
  49. <meta name="image:circle" content=""/>
  50. <meta name="image:Background" content="" />
  51.  
  52. <meta name="text:Link 1" content="/" />
  53. <meta name="text:Link 1 Title" content="refresh" />
  54. <meta name="text:Link 2" content="/ask" />
  55. <meta name="text:Link 2 Title" content="whisper" />
  56. <meta name="text:Link 3" content="/archive" />
  57. <meta name="text:Link 3 Title" content="past" />
  58. <meta name="text:Link 4" content="/submit" />
  59. <meta name="text:Link 4 Title" content="submit" />
  60. <meta name="text:Music Code" content="" />
  61.  
  62. <meta name="if:Music" content="1"/>
  63. <meta name="if:Caption" content="1"/>
  64. <meta name="if:HoverCaption" content="1"/>
  65. <meta name="if:Snow" content="1"/>
  66. <meta name="if:Grayscale" content="0"/>
  67. <meta name="if:posttype3" content="0"/>
  68. <meta name="if:posttype2" content="1"/>
  69. <meta name="if:posttype1" content="0"/>
  70. <meta name="if:infinitescroll" content="1"/>
  71. <meta name="if:BlurredSidebar" content="1"/>
  72. <meta name="if:ZoomSidebar" content="1"/>
  73.  
  74. <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title> {block:Description}<meta name=""
  75. content="{MetaDescription}" />{/block:Description}
  76. <link rel="shortcut icon" href="{Favicon}">
  77.  
  78. <!-- start of script tooltip -->
  79. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  80. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  81. <script>
  82. (function($){
  83. $(document).ready(function(){
  84. $("a[title]").style_my_tooltips({
  85. tip_follows_cursor:true,
  86. tip_delay_time:90,
  87. tip_fade_speed:600,
  88. attribute:"title"
  89. });
  90. });
  91. })(jQuery);
  92. </script>
  93. <style type="text/css">
  94.  
  95. /* FONT AWESOME */
  96. @import url(http://weloveiconfonts.com/api/?family=fontawesome);
  97. [class*="fontawesome-"]:before {font-family: 'FontAwesome', sans-serif;}
  98.  
  99. #tumblr_controls {
  100. position: fixed !important;}
  101.  
  102. iframe#tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:0.2; right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  103.  
  104. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.2s linear;opacity: 1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  105.  
  106. ::-webkit-scrollbar {width: 5px;height:5px; background: #fff;}
  107. ::-webkit-scrollbar-thumb {background:{color:Scroll};}
  108.  
  109. #s-m-t-tooltip{
  110. max-width:300px;
  111. margin:15px;
  112. padding:2px 8px;
  113. background: {color:Link Title BG};
  114. color:{color:Link Title};
  115. z-index:999999;
  116. font-size: 9px;
  117. font-style: oblique;
  118. text-transform:lowercase;
  119. box-shadow:1px 1px 3px rgba(0,0,0,.1);}
  120.  
  121. /* GENERAL */
  122.  
  123. body{
  124. cursor:crosshair;
  125. margin:0px;
  126. font-family: calibri;
  127. text-transform: uppercase;
  128. font-size: 8px;
  129. letter-spacing: 2px;
  130. line-height: 12px;
  131. color: {color:text};
  132. background-color: {color:Background};
  133. background-image: url({image:Background});
  134. word-wrap: break-word;
  135. background-attachment: fixed;}
  136.  
  137. a:link, a:active, a:visited{color: {color:Link}; letter-spacing: 2px; text-decoration: none;-webkit-transition: all 0.7s ease;transition: all 0.7s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;}
  138.  
  139. a:hover{ color: {color:Hover}; cursor: help;}
  140.  
  141. a.class2, a.class2:link, a.class2:active, a.class2:visited  { color:{color:Permalink Icon}; cursor: help; text-decoration: none; color: {color:Permalink Icon}; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; -moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;}
  142.  
  143. a.class2:hover{ color: {color:Permalink Icon Hover};}
  144.  
  145. /* POSTS */
  146.  
  147. #content{
  148. margin-top: 80px;
  149. margin-left:100px;
  150. {block:ifposttype3}
  151. width:600px;
  152. {/block:ifposttype3}
  153.  {block:ifposttype2}
  154. width:540px;
  155. {/block:ifposttype2}
  156. {block:ifposttype1}
  157. width:500px;
  158. {/block:ifposttype1}}
  159.  
  160. .entry{
  161. {block:ifposttype1}
  162. width: 400px;
  163. {/block:ifposttype1}
  164. {block:ifposttype2}
  165. width: 500px;
  166. {/block:ifposttype2}
  167. {block:ifposttype3}
  168. width: 250px;
  169. {/block:ifposttype3}
  170. opacity: 1;
  171. position: relative;
  172. {block:ifnotposttype3}
  173. margin: 20px 10px;
  174. {/block:ifnotposttype3}
  175. {block:ifposttype3}
  176. margin: 10px 10px;
  177. {/block:ifposttype3}
  178. overflow: hidden;
  179. -webkit-transition: all 0.4s ease-in-out;
  180. -moz-transition: all 0.4s ease-in-out;
  181. -o-transition: all 0.4s ease-in-out;
  182. -ms-transition: all 0.4s ease-in-out;
  183. transition: all 0.4s ease-in-out;}
  184.  
  185.  
  186. .entry img{
  187. max-width:100%;
  188. opacity: 1px;
  189. -webkit-transition: opacity 0.6s linear;
  190. -webkit-transition: all 0.6s ease-in-out;
  191. -moz-transition: all 0.6s ease-in-out;
  192. -o-transition: all 0.6s ease-in-out;}
  193.    
  194.  
  195. {block:ifGrayscale}
  196. .html_photoset {
  197. -webkit-filter: grayscale(100%);
  198. -webkit-transition: all 0.8s ease-in-out;
  199. -moz-transition: all 0.8s ease-in-out;
  200. -o-transition: all 0.8s ease-in-out;
  201. -ms-transition: all 0.8s ease-in-out;
  202. transition: all 0.8s ease-in-out;}
  203.  
  204. .html_photoset:hover {
  205. -webkit-filter: grayscale(0);}
  206.  
  207. #entry img {
  208. -webkit-filter: grayscale(100%);
  209. -webkit-transition: all 0.8s ease-in-out;
  210. -moz-transition: all 0.8s ease-in-out;
  211. -o-transition: all 0.8s ease-in-out;
  212. -ms-transition: all 0.8s ease-in-out;
  213. transition: all 0.8s ease-in-out;}
  214.  
  215. #entry img:hover {
  216. -webkit-filter: grayscale(0);}
  217. {/block:ifGrayscale}
  218.  
  219. .entry:hover {
  220. opacity: .8;
  221. -webkit-filter:none;
  222. -webkit-transition: opacity 0.6s linear;
  223. -webkit-transition: all 0.6s ease-in-out;
  224. -moz-transition: all 0.6s ease-in-out;
  225. -o-transition: all 0.6s ease-in-out;}
  226.  
  227.  
  228.  
  229. /* SIDEBAR */
  230.  
  231. .header {
  232. z-index: 999999999;
  233. height: 65px;
  234. width: 100%;
  235. opacity: .9;
  236. position: fixed;
  237. background-image: url({image:Background});
  238. top: 0px;}
  239.  
  240. .headerc {
  241. z-index: 999999999;
  242. height: 65px;
  243. position: fixed;
  244. margin-left: 110px;
  245. {block:ifposttype3}
  246. width: 520px;
  247. {block:ifposttype3}
  248. {block:ifposttype2}
  249. width: 500px;
  250. {block:ifposttype2}
  251. {block:ifposttype1}
  252. width: 400px;
  253. {block:ifposttype1}
  254. margin-top: 0px;
  255. border-bottom: 3px solid {color:Borders};}
  256.  
  257. .container {
  258. width: 300px;
  259. height: 400px;
  260. padding: 5px;
  261. position: fixed;
  262. {block:ifposttype1}
  263. margin-left: 600px;
  264. {/block:ifposttype1}
  265. {block:ifposttype2}
  266. margin-left: 700px;
  267. {/block:ifposttype2}
  268. {block:ifposttype3}
  269. margin-left: 720px;
  270. {/block:ifposttype3}
  271. margin-top: 50px;}
  272.  
  273. .circle, .circlep {
  274. z-index: 10;
  275. overflow:hidden;
  276. width: 300px;
  277. height: 300px;
  278. border-radius: 500px;
  279. background-color: rgba(255,255,255,0.7);
  280. position: fixed;
  281. margin-left: 0px;
  282. margin-top: 10px;
  283. }
  284.  
  285. .circlep {
  286. position: absolute;
  287. margin-top: 0px;
  288. -webkit-transition: opacity 0.6s linear;
  289. -webkit-transition: all 0.6s ease-in-out;
  290. -moz-transition: all 0.6s ease-in-out;
  291. -o-transition: all 0.6s ease-in-out;}
  292.  
  293. .circlep img {
  294. position: absolute;
  295. border-radius: 500px;
  296. width: 100%;
  297. height: 100%;}
  298.  
  299. .circle:hover .circlep {
  300. {block:ifBlurredSidebar}
  301. -webkit-filter: blur(1px);
  302. -moz-filter: blur(1px);
  303. -o-filter: blur(1px);
  304. -ms-filter: blur(1px);
  305. filter: blur(1px);
  306. {/block:ifBlurredSidebar}
  307. {block:ifZoomSidebar}
  308. width: 400px;
  309. height: 400px;
  310. margin: -30px;
  311. {/block:ifZoomSidebar}}
  312.  
  313. .titlebox {
  314. overflow: hidden;
  315. {block:ifposttype1}
  316. width: 290px;
  317. {/block:ifposttype1}
  318. {block:ifposttype2}
  319. max-width: 130px;
  320. {/block:ifposttype2}
  321. {block:ifposttype3}
  322. max-width: 350px;
  323. {/block:ifposttype3}
  324. position: absolute;
  325. left: 0px;
  326. bottom: 0px;
  327. text-align: left;
  328. color: {color:Blog Title};    
  329. font-style: oblique;
  330. font-size: 15px;
  331. text-transform: lowercase;
  332. letter-spacing: 3px;
  333. padding: 5px;
  334. -webkit-transition: opacity 0.6s linear;
  335. -webkit-transition: all 0.6s ease-in-out;
  336. -moz-transition: all 0.6s ease-in-out;
  337. -o-transition: all 0.6s ease-in-out;}
  338.  
  339. .titlebox:hover { letter-spacing: 5px;}
  340.  
  341. .descbox {
  342. z-index: 12;
  343. overflow:hidden;
  344. width: 300px;
  345. height: 300px;
  346. border-radius: 500px;
  347. background-color: rgba(255,255,255,0.5);
  348. position: fixed;
  349. margin-left: 0px;
  350. margin-top: 0px;
  351. opacity: 0;
  352. -webkit-transition: opacity 0.6s linear;
  353. -webkit-transition: all 0.6s ease-in-out;
  354. -moz-transition: all 0.6s ease-in-out;
  355. -o-transition: all 0.6s ease-in-out;}
  356.  
  357. .circle:hover .descbox {opacity: 1;}
  358.  
  359. .description {
  360. text-align: center;
  361. color: {color:Description};
  362. letter-spacing: 2px;
  363. font-size: 8px;
  364. font-family: calibri;
  365. padding: 60px;}
  366.    
  367.  
  368. /* NAVIGATION */
  369.  
  370. .circle1, .circle2, .circle3, .circle4 {
  371. opacity: 1;
  372. position: fixed;
  373. height: 55px;
  374. width: 55px;
  375. background-color: none;
  376. margin-top: 324px;
  377. margin-left: 30px;
  378. -webkit-transition: opacity .7s linear;
  379. -webkit-transition: all .7s ease-in-out;
  380. -moz-transition: all .7s ease-in-out;
  381. -o-transition: all .7s ease-in-out;}
  382.  
  383. .circle1 img, .circle2 img, .circle3 img, .circle4 img  {width: 100%;}
  384.  
  385. div.both1:hover .circle1 { margin-top: 354px;}
  386.  
  387. .circle2 {
  388. margin-top: 344px;
  389. margin-left: 91px;}
  390.  
  391. div.both2:hover .circle2 {
  392. margin-top: 374px;}
  393.  
  394. .circle3 {
  395. margin-top: 321px;
  396. margin-left: 150px;}
  397.  
  398. div.both3:hover .circle3 {margin-top: 334px;}
  399.  
  400. .circle4 {
  401. margin-top: 333px;
  402. margin-left: 210px;}
  403.  
  404. div.both4:hover .circle4 {margin-top: 365px;}
  405.  
  406. .l1, .l2, .l3, .l4 {
  407. width: 1px;
  408. height: 52px;
  409. background-color: #aaa;
  410. position: fixed;
  411. margin-left: 57px;
  412. margin-top: 277px;
  413. -webkit-transition: opacity 0.7s linear;
  414. -webkit-transition: all 0.7s ease-in-out;
  415. -moz-transition: all 0.7s ease-in-out;
  416. -o-transition: all 0.7s ease-in-out;}
  417.  
  418. div.both1:hover .l1 {height: 81px;}
  419.  
  420. .l2 {
  421. height: 50px;
  422. margin-left: 117px;
  423. margin-top: 300px;}
  424.  
  425. div.both2:hover .l2 {height: 80px;}
  426.  
  427. .l3 {
  428. height: 27px;
  429. margin-left: 177px;
  430. margin-top: 300px;}
  431.  
  432. div.both3:hover .l3 {height: 40px;}
  433.  
  434. .l4 {
  435. height: 67px;
  436. margin-left: 237px;
  437. margin-top: 271px;}
  438.  
  439. div.both4:hover .l4 {height: 99px;}
  440.  
  441.  
  442. /* TITLES */
  443.  
  444. .titleb {
  445. width: auto;
  446. padding-left: 10px;
  447. border-bottom: 3px solid {color:Borders};
  448. }
  449.  
  450. .title {
  451. padding-bottom: 3px;
  452. text-align: right;
  453. line-height: 13px;
  454. font-size: 12px;
  455. font-style: oblique;
  456. letter-spacing: 2px;
  457. text-transform: lowercase;
  458. color:{color:Post Title};
  459. -webkit-transition: all 0.6s ease-in-out;
  460. -moz-transition: all 0.6s ease-in-out;
  461. -o-transition: all 0.6s ease-in-out;
  462. -ms-transition: all 0.6s ease-in-out;
  463. transition: all 0.6s ease-in-out;}
  464.  
  465. .entry:hover .title {
  466. letter-spacing: 3px;}
  467.  
  468. .source {text-align:right;}
  469.  
  470. /* PERMALINKS */
  471.  
  472. .like_button {
  473. position:relative;
  474. display:inline-block;
  475. cursor:pointer!important;
  476. overflow:hidden;}
  477. .like_button iframe {
  478. position:absolute;
  479. top:0;
  480. left:0;
  481. width:100%;
  482. height:100%;
  483. opacity:0;}
  484. .like_button::before {
  485. content:'♥';
  486. color: {color:Permalink Icon};
  487. font-family:'calibri'!important;
  488. text-transform:lowercase!important;
  489. position:relative;
  490. font-size:13px;
  491. margin-top: 2px;
  492. -webkit-transition: all 0.5s ease-in-out;
  493. -moz-transition: all 0.5s ease-in-out;
  494. -o-transition: all 0.5s ease-in-out;
  495. -ms-transition: all 0.5s ease-in-out;
  496. transition: all 0.5s ease-in-out;}
  497. .like_button:hover::before, .like_button.liked::before {
  498. color: {color:Permalink Icon Hover};
  499. cursor:pointer!important;
  500. -webkit-transition: all 0.5s ease-in-out;
  501. -moz-transition: all 0.5s ease-in-out;
  502. -o-transition: all 0.5s ease-in-out;
  503. -ms-transition: all 0.5s ease-in-out;
  504. transition: all 0.5s ease-in-out;}
  505.  
  506. .entry:hover #txtperma  {
  507. opacity:1;
  508. right: 13px;
  509. -webkit-transition: all 0.9s ease;
  510. -moz-transition: all 0.9s ease;
  511. height: 25px;}
  512.  
  513. #txtperma {
  514. z-index: 9;
  515. bottom: 5px;
  516. right:-110px;
  517. text-align: right;
  518. position: absolute;
  519. {block:ifposttype1}
  520. width: 290px;
  521. {/block:ifposttype1}
  522. {block:ifposttype2}
  523. width: 440px;
  524. {/block:ifposttype2}
  525. {block:ifposttype3}
  526. width: 290px;
  527. {/block:ifposttype3}
  528. height: 25px;
  529. opacity:1;
  530. -webkit-transition: all 0.7s ease;
  531. -moz-transition: all 0.7s;}
  532.  
  533. .hlperma {
  534. padding: 5px;
  535. text-align: right;
  536. text-transform: uppercase;
  537. font-style: normal;
  538. font-size: 13px;
  539. letter-spacing: 2px;}
  540.  
  541. {block:PermalinkPage}
  542. #permalink {
  543. text-align: center;
  544. padding:10px;
  545. background-color: {color:Post BG};
  546. letter-spacing: 2px;
  547. color: {color:Text};}
  548.  
  549. .taggy {
  550. padding: 10px;
  551. background: {color:Post BG};
  552. text-align: center;
  553. margin-top: 15px;}
  554.  
  555. {/block:PermalinkPage}
  556.  
  557. /*PAGINATION*/
  558.  
  559. #paginwrapper {
  560. opacity: 1;
  561. position: absolute;
  562. bottom: 10px;
  563. right: 5px;
  564. z-index: 999;
  565. -webkit-transition: opacity 0.6s linear;
  566. -webkit-transition: all 0.6s ease-in-out;
  567. -moz-transition: all 0.6s ease-in-out;
  568. -o-transition: all 0.6s ease-in-out;}
  569.  
  570. .current_page, .jump_page:hover {
  571. padding: 5px;
  572. color: {color:Pagination Hover};
  573. font-size:9px;
  574. text-decoration:none;
  575. font-family: calibri;
  576. font-style: normal;
  577. background-color: {color:Gift};}
  578.  
  579. .current_page {
  580. background-color: rgba(255,255,255,0.7);
  581. font-size: 9px;
  582. color: {color:Gift};}
  583.  
  584. .jump_page {
  585. padding: 5px;
  586. background-color: rgba(255,255,255,0.7);
  587. color: {color:Pagination};
  588. font-size:9px;
  589. text-decoration:none;
  590. font-family: calibri;
  591. font-style: normal;}
  592.  
  593. /* AUDIO */
  594.  
  595. .newplayerbutton {
  596. position: absolute;
  597. width: 23px;
  598. height: 23px;
  599. margin-left: 29px;
  600. margin-top: 29px;
  601. overflow: hidden;}
  602.            
  603. .playerbuttonhug {
  604. position: absolute;
  605. top: -13px;
  606. left: -1px;}
  607.  
  608. .tumblr_audio_player {
  609. border: none;
  610. padding: 0px;
  611. margin-top: 0px;
  612. margin-left: 0px;
  613. height: 50px;
  614. width: auto;}
  615.  
  616. .playerbuttonbg {
  617. position: absolute;
  618. width: 80px;
  619. height: 80px;
  620. margin-top: 0px;
  621. margin-left: 0px;
  622. background-color: rgba(255,255,255,0.8);
  623. opacity: .4;
  624. transition: opacity .8s ease-in-out;
  625. -moz-transition: opacity .8s ease-in-out;
  626. -webkit-transition: opacity .8s ease-in-out;}
  627.            
  628. .playerbuttonbg:hover {opacity: .9;}
  629.  
  630. .audioimgwrapper {
  631. position: absolute;
  632. overflow: hidden;
  633. width: 80px;
  634. height: 80px;}
  635.  
  636. .audimg {
  637. position: absolute;
  638. width:100%;
  639. height: 100%;}
  640.  
  641. .audimg img {
  642. width: 100%;
  643. height: auto;}
  644.            
  645. .trackdetails {
  646. position: absolute;
  647. margin-left: 80px;
  648. margin-top: 0px;
  649. background: {color:Post BG};
  650. {block:ifposttype1}
  651. width:320px;
  652. {/block:ifposttype1}
  653.  {block:ifposttype2}
  654. width:440px;
  655. {/block:ifposttype2}
  656. {block:ifposttype3}
  657. width:220px;
  658. {/block:ifposttype3}
  659. height: 80px;}
  660.  
  661. .tra {
  662. margin-left: 5px;
  663. margin-top: 5px;
  664. line-height: 15px;
  665. overflow: auto;
  666. {block:ifposttype1}
  667. width:310px;
  668. {/block:ifposttype1}
  669.  {block:ifposttype2}
  670. width:430px;
  671. {/block:ifposttype2}
  672. {block:ifposttype3}
  673. width:210px;
  674. {/block:ifposttype3}
  675. height: 70px;}
  676.            
  677. .audiowrapper {
  678. width: auto;
  679. height: 80px;}
  680.  
  681. /* ANSWER */
  682.  
  683. .askbox {
  684. width: auto;
  685. height: auto;}
  686.  
  687. .qbox, .rbox {
  688. background-color: {color:Post BG};
  689. width: auto;
  690. padding: 10px;
  691. position: relative;
  692. padding: 25px;}
  693.  
  694. .qbox {
  695. padding-bottom: 40px;}
  696.  
  697. .rbox {
  698. padding-top: 40px;}
  699.  
  700. .anon {
  701. position: relative;
  702. width: 100%;
  703. height: 10px;}
  704.  
  705. .anonme {
  706. position: absolute;
  707. z-index: 999;
  708. width: 40px;
  709. height: 40px;
  710. padding: 10px;
  711. border-radius: 500px;
  712. {block:ifposttype1}
  713. margin-left:165px;
  714. {/block:ifposttype1}
  715.  {block:ifposttype2}
  716. margin-left:215px;  
  717. {/block:ifposttype2}
  718. {block:ifposttype3}
  719. margin-left:95px;
  720. {/block:ifposttype3}
  721. margin-top: -25px;
  722. background-image: url({image:Background});}
  723.  
  724. .anonpic {
  725. position: absolute;
  726. width: 40px;
  727. height: 40px;
  728. border-radius: 500px;
  729. overflow: hidden;}
  730.  
  731. .anonpic img {
  732. width: 100%;
  733. height: auto;}
  734.  
  735. /* TEXT */
  736.  
  737. i, em {color:{color:Italic};}
  738.  
  739. b, strong {
  740. color:{color:Bold};
  741. letter-spacing: 3px;}
  742.  
  743. ul,ol {
  744. margin-left: 10px;
  745. padding: 5px;}
  746.  
  747. ol {margin-left: 0px;}
  748.  
  749. p {margin: 0px;}
  750.  
  751. u {
  752. text-decoration:none;
  753. color: {color:Underline};
  754. letter-spacing: 1px;
  755. border-bottom:1px solid {color:Underline};}
  756.  
  757. blockquote {
  758. border-left: 2px solid {color:Blockquote};
  759. margin: 3px;
  760. padding: 2px 5px;}
  761.  
  762. .quote, .text, .audc {
  763. padding:15px;
  764. width: auto;
  765. color: {color:Text};
  766. background: {color:Post BG};
  767. text-align: justify;}
  768.  
  769. .cap {
  770. height: auto;
  771. width: auto;
  772. padding: 15px;
  773. background: {color:Post BG};}
  774.  
  775. .caption {
  776. {block:IndexPage}
  777. position: absolute;
  778. top: 30px;
  779. left: 30px;
  780. max-height: 50%;
  781. opacity: 0;
  782. max-width: 75%;
  783. background: rgba(255,255,255,0.9);
  784. {/block:IndexPage}
  785. {block:PermalinkPage}
  786. height: auto;
  787. width: auto;
  788. background: {color:Post BG};
  789. {/block:PermalinkPage}
  790. padding: 15px;
  791. overflow: auto;
  792. color: {color:Text};
  793. text-align: justify;
  794. -webkit-transition: all 0.7s ease-in-out;
  795. -moz-transition: all 0.7s ease-in-out;
  796. -o-transition: all 0.7s ease-in-out;
  797. -ms-transition: all 0.7s ease-in-out;
  798. transition: all 0.7s ease-in-out;}
  799.  
  800. {block:IndexPage}
  801. .caption:hover {background: rgba(255,255,255,1);}
  802.  
  803. .entry:hover .caption {
  804. opacity: 1;}
  805.  
  806. {/block:IndexPage}
  807.  
  808. .audc {margin-top: 10px;}
  809.  
  810. .photow {
  811. background: {color:Post BG};}
  812.  
  813. .vidw {
  814. background: {color:Post BG};}
  815.  
  816. /* MUSIC */
  817.  
  818. .melody {
  819. background-color: rgba(255,255,255,0.8);
  820. overflow: hidden;
  821. position: fixed;
  822. height: 35px;
  823. width: 35px;
  824. bottom: 16px;
  825. border-right: 3px solid {color:Borders};
  826. left: 60px;}
  827.  
  828. .reverberate {
  829. position:absolute;
  830. height: 10px;
  831. width: 10px;
  832. margin-top: 0px;
  833. margin-left: 0px;
  834. padding: 10px;
  835. -webkit-transition: opacity .7s linear;
  836. -webkit-transition: all .7s ease-in-out;
  837. -moz-transition: all .7s ease-in-out;
  838. -o-transition: all .7s ease-in-out;}
  839.  
  840. .melody:hover .reverberate {
  841. margin-top: -50px;}
  842.  
  843. .harmony {
  844. overflow: hidden;
  845. position:absolute;
  846. height: 20px;
  847. width: 20px;
  848. margin-top: 50px;
  849. margin-left: 7px;
  850. -webkit-transition: opacity .7s linear;
  851. -webkit-transition: all .7s ease-in-out;
  852. -moz-transition: all .7s ease-in-out;
  853. -o-transition: all .7s ease-in-out;}
  854.  
  855. .melody:hover .harmony {
  856. margin-top: 5px;}
  857.  
  858. .rhythm {
  859. position:absolute;
  860. height: 25px;
  861. width: 30px;
  862. margin-top: 4px;
  863. margin-left: -20px;}
  864.  
  865. /* MISC */
  866.  
  867. #warning {
  868. z-index: -10000;
  869. position: fixed;
  870. top: 0;left: 0;
  871. width: 100%;
  872. height: 100%;
  873. background-color: rgba(255,255,255,0.8);
  874. color: #000;
  875. text-align: center;
  876. text-transform: uppercase;
  877. padding-top: 250px;
  878. font-family: consolas;
  879. font-size: 13px;
  880. letter-spacing: 4px;
  881. opacity: 0;
  882. {block:ifposttype1}
  883. {block:ifposttype3}opacity: 1;z-index:10000;{/block:ifposttype3}
  884. {block:ifposttype2}opacity: 1;z-index:10000;{/block:ifposttype2}
  885. {block:ifposttype2}{block:ifposttype3}opacity: 1;z-index:10000;{/block:ifposttype3}{/block:ifposttype2}
  886. {/block:ifposttype1}
  887. {block:ifposttype2}{block:ifposttype3}opacity: 1;z-index:10000;{/block:ifposttype3}{/block:ifposttype2}
  888. {block:ifnotposttype1}{block:ifnotposttype2}{block:ifnotposttype3}opacity: 1;z-index:10000;{/block:ifnotposttype3}{/block:ifnotposttype2}{/block:ifnotposttype1}}
  889.  
  890. .c img{
  891. padding-left: 2.5px;
  892. padding-top: 2px;
  893.  border-radius: 500px;
  894. opacity: 0;
  895. width:25px;
  896. height: 25px;
  897. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  898. -o-transition: 0.5s ease;-moz-transition: 0.5s ease;}
  899.  
  900. .c{overflow: hidden; position:fixed;right:7px;bottom:7px; background-color: rgba(0,0,0,0.3); width: 30px; height: 30px; border-radius: 500px;}
  901.  
  902. .c img:hover{opacity: 1;}
  903.  
  904. .popup_block{
  905. display:none;
  906. padding:20px;
  907. float:left;
  908. position:fixed;
  909. top:50%;left:50%;
  910. z-index: 99999;}
  911.  
  912. img.btn_close {float: right;margin: -20 -20px 0 0;}
  913. *html #fade {position: absolute;}
  914. *html .popup_block {position: absolute;}
  915. #fade {display:none;background:#fff;position:fixed;left:0;top:0;
  916. width:100%;height:100%;opacity:0.8;z-index:9999;}
  917.  
  918. .l .odd{display:block;padding:5px 5px;}
  919. .l .even{display:block;background: rgba(255,255,255,0.6);padding:5px 5px;}
  920.  
  921. ::selection {color: {color:Hover};}
  922. ::-moz-selection {color: {color:Hover};}
  923. ::-webkit-selection{color: {color:Hover};}
  924.  
  925. img{ margin-bottom:-3px;}
  926.  
  927. /* POSTNOTES */
  928.  
  929. ol.notes a, ol.notes {
  930. text-align: left;
  931. list-style:none;
  932. line-height: 16px;}
  933.  
  934. ol.notes {
  935. background-color: {color:Post BG};
  936. padding: 10px;}
  937.  
  938. ol.notes li.note img.avatar {
  939. vertical-align: -2px;
  940. margin-right:10px;
  941. background-color: #000;
  942. border-radius: 2px;
  943. width:15px;}
  944.  
  945. ol.notes li.note {margin:10px 0px 10px 0px;}
  946. ol.notes li.note span.action {font-style: normal;}
  947. ol.notes li.note .answer_content {font-weight: normal;}
  948. ol.notes li.note blockquote {padding:4px 10px;margin: 10px 0px 0px 25px;}
  949.  
  950. </style>
  951.  
  952. {block:indexpage}
  953. {block:ifposttype3}
  954. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  955.  
  956. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  957. <script type="text/javascript">
  958. $(window).load(function () {
  959. $('#content').masonry({
  960. itemSelector : ".posts",
  961. },
  962. function() { $('#content').masonry({ appendedContent: $(this) }); }
  963. );
  964. });
  965. </script>
  966. {/block:ifposttype3}
  967. {block:ifnotposttype3}{block:ifinfinitescroll}
  968. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  969. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script> <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script> <script type="text/javascript" charset="utf-8"> var $j = jQuery.noConflict(); $j(function() { if (navigator.platform == "iPad" || navigator.platform == "iPhone") return; $j("img").lazyload({ placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif", effect: "fadeIn", }); }); </script>
  970. {/block:ifinfinitescroll}{/block:ifnotposttype3}
  971. {/block:indexpage}
  972.  
  973.  
  974. </head>
  975. <body>
  976.  
  977. <div id="warning">please select only one post size</div>
  978.  
  979. {block:ifMusic}
  980. <div class="melody">
  981. <div class="reverberate">
  982. <img src="http://media.tumblr.com/tumblr_m7w2izzY0j1r6o8v2.gif"/>
  983. </div><!--reverberate-->
  984. <div class="harmony">
  985. <div class="rhythm">
  986. {text:Music Code}
  987. </div><!--rhythm-->    
  988. </div><!--harmony-->
  989. </div><!--melody-->
  990. {/block:ifMusic}
  991.  
  992. <div class="header">
  993. <div class="headerc">
  994. <a href="/">
  995. <div class="titlebox">
  996. {Title}
  997. </div><!--titlebox-->
  998. </a>
  999. {block:ifnotinfinitescroll}
  1000. {block:Pagination}
  1001. <div id="paginwrapper">
  1002. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page"><span class="fontawesome-caret-left"></span></a>{/block:PreviousPage}
  1003. {block:JumpPagination length="3"}
  1004. {block:CurrentPage}<span class="current_page"><span class="fontawesome-gift"></span></span>{/block:CurrentPage}
  1005. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1006. {block:NextPage}<a href="{NextPage}" class="jump_page"><span class="fontawesome-caret-right"></span></a>{/block:NextPage}
  1007. </div>
  1008. {/block:Pagination}
  1009. {/block:ifnotinfinitescroll}
  1010. </div><!--headerc-->
  1011. </div><!--header-->
  1012.  
  1013. <div class="container">
  1014.  
  1015. <div class="circle">
  1016. <div class="circlep">
  1017. <img src="{image:circle}"></div>
  1018. <div class="descbox">
  1019. <div class="description">{Description}</div>
  1020. </div>
  1021. </div>
  1022.  
  1023. <div class="both1">
  1024. <a href="{text:Link 1}" title="{text:Link 1 Title}"><div class="circle1"><img src="http://static.tumblr.com/cbjpgjf/xJ7mx1z76/xmas1.png"></div></a>
  1025. <div class="l1"></div>
  1026. </div>
  1027.  
  1028. <div class="both2">
  1029. <a href="{text:Link 2}" title="{text:Link 2 Title}"><div class="circle2"><img src="http://static.tumblr.com/cbjpgjf/jX3mx1yt3/xmas2.png"></div></a>
  1030. <div class="l2"></div>
  1031. </div>
  1032.  
  1033. <div class="both3">
  1034. <a href="{text:Link 3}" title="{text:Link 3 Title}" ><div class="circle3"><img src="http://static.tumblr.com/cbjpgjf/AwYmx1zi0/xmas3.png"></div></a>
  1035. <div class="l3"></div>
  1036. </div>
  1037.  
  1038. <div class="both4">
  1039. <a href="{text:Link 4}" title="{text:Link 4 Title}"><div class="circle4"><img src="http://static.tumblr.com/cbjpgjf/BMsmx204v/marisa-lerin-christmas-ornament-4-template-shape-tree-mat-commercial-use.png"></div></a>
  1040. <div class="l4"></div>
  1041. </div>
  1042.    
  1043. </div><!--container-->
  1044.  
  1045. <div id="content">
  1046. {block:Posts}
  1047.  
  1048. <div class="entry">
  1049.  
  1050. {block:IndexPage}
  1051. <div id="txtperma">
  1052. <a href="{ReblogURL}" target="_blank" title="reblog this" class="class2"><span class="hlperma"><span class="fontawesome-retweet"></span></span></a>
  1053. <a href="{Permalink}" title="{NoteCountwithLabel}" class="class2"><span class="hlperma"><span class="fontawesome-link"></span></span></a>
  1054. <a href="{ReblogParentURL}" title="tagged: {block:Tags}#{Tag} {/block:Tags}"  class="class2"><span class="hlperma"><span class="fontawesome-tag"></span></span></a>
  1055. <span class="hlperma">{LikeButton}</span>
  1056. </div>
  1057. {/block:IndexPage}
  1058.  
  1059. {block:Text}
  1060. {block:Title}
  1061. <div class="titleb">
  1062. <div class="title">
  1063. {Title}
  1064. </div><!--title-->
  1065. </div><!--titleb-->    
  1066. {/block:Title}
  1067. <div class="text">{Body}</div>
  1068. {/block:Text}
  1069.  
  1070. {block:Link}
  1071. <a href="{URL}">
  1072. <div class="titleb">
  1073. <div class="title">
  1074. {Name} <span class="fontawesome-gift"></span>
  1075. </div><!--title-->
  1076. </div></a><!--titleb-->    
  1077. {block:Description}
  1078. <div class="text">{Description}</div>
  1079. {/block:Description}
  1080. {/block:Link}
  1081.  
  1082. {block:Photo}
  1083. <a href="{Permalink}">
  1084. {block:IndexPage}
  1085. <div class="photow">
  1086. {block:ifposttype1}<center><img src="{PhotoURL-400}"></center>{/block:ifposttype1}
  1087. {block:ifposttype2}<center><img src="{PhotoURL-500}"></center>{/block:ifposttype2}
  1088. {block:ifposttype3}<center><img src="{PhotoURL-250}"></center>{/block:ifposttype3}
  1089. </div>
  1090. {/block:IndexPage}
  1091. {block:PermalinkPage}
  1092. <div class="photow">
  1093. {block:ifposttype1}<center><img src="{PhotoURL-400}"></center>{/block:ifposttype1}
  1094. {block:ifposttype2}<center><img src="{PhotoURL-500}"></center>{/block:ifposttype2}
  1095. {block:ifposttype3}<center><img src="{PhotoURL-250}"></center>{/block:ifposttype3}
  1096. </div>
  1097. {/block:PermalinkPage}
  1098. {block:ifCaption}{block:Caption}
  1099. {block:ifHoverCaption}
  1100. <div class="caption">
  1101. {Caption}    
  1102. </div>
  1103. {/block:ifHoverCaption}
  1104. {block:ifnotHoverCaption}
  1105. <div class="cap">
  1106. {Caption}    
  1107. </div>
  1108. {/block:ifnotHoverCaption}
  1109. {/block:Caption}{/block:ifCaption}
  1110. {/block:Photo}
  1111.  
  1112. {block:Photoset}
  1113. {block:IndexPage}
  1114. <div class="photow">
  1115. {block:ifposttype1}{Photoset-400}{/block:ifposttype1}
  1116. {block:ifposttype2}{Photoset-500}{/block:ifposttype2}
  1117. {block:ifposttype3}{Photoset-250}{/block:ifposttype3}
  1118. </div>
  1119. {/block:IndexPage}
  1120. {block:PermalinkPage}
  1121. <div class="photow">
  1122. {block:ifposttype1}{Photoset-400}{/block:ifposttype1}
  1123. {block:ifposttype2}{Photoset-500}{/block:ifposttype2}
  1124. {block:ifposttype3}{Photoset-250}{/block:ifposttype3}
  1125. </div>
  1126. {/block:PermalinkPage}
  1127. {block:ifCaption}{block:Caption}
  1128. {block:ifHoverCaption}
  1129. <div class="caption">
  1130. {Caption}    
  1131. </div>
  1132. {/block:ifHoverCaption}
  1133. {block:ifnotHoverCaption}
  1134. <div class="cap">
  1135. {Caption}    
  1136. </div>
  1137. {/block:ifnotHoverCaption}
  1138. {/block:Caption}{/block:ifCaption}
  1139. {/block:Photoset}
  1140.  
  1141. {block:Quote}
  1142. <div class="quote">{Quote}<div class="source">{Source}</div></div>
  1143. {/block:Quote}
  1144.  
  1145. {block:Chat}
  1146. {block:Title}
  1147. <div class="titleb">
  1148. <div class="title">
  1149. {Title}
  1150. </div>
  1151. </div><!--titleb-->
  1152. {/block:Title}
  1153. <div class="text">
  1154. {block:Lines}
  1155. <div class="l {Alt}"><div class="{Alt} user_{UserNumber}">
  1156. {block:Label}
  1157. <b>{Label}</b>
  1158. {/block:Label}
  1159. {Line}
  1160. </div></div>
  1161. {/block:Lines}
  1162. </div><!--text-->
  1163. {block:ifCaption}{block:Caption}
  1164. <div class="cap">
  1165. {Caption}    
  1166. </div>
  1167. {/block:Caption}{/block:ifCaption}
  1168. {/block:Chat}
  1169.  
  1170. {block:AudioPlayer}
  1171. <div class="audiowrapper">
  1172. {block:AlbumArt}
  1173. <div class="audioimgwrapper">
  1174. <div class="audimg"><img src="{AlbumArtURL}"></div>
  1175. <div class="playerbuttonbg">
  1176. <div class="newplayerbutton">
  1177. <div class="playerbuttonhug"> {AudioPlayerWhite} </div>
  1178. </div>
  1179. </div><!--playerbuttonhug-->
  1180. </div><!--audioimgwrapper-->
  1181. {/block:AlbumArt}
  1182. <div class="trackdetails">
  1183. <div class="tra">
  1184. {block:TrackName}<b>Title:</b> {TrackName}{/block:TrackName}<br>
  1185. {block:Artist}<b>Artist:</b> {Artist}{/block:Artist}<br>
  1186. {block:Album}<b>Album:</b> {Album}{/block:Album}<br>
  1187. <b>Plays:</b> {PlayCountWithLabel}
  1188. </div><!--tra-->
  1189. </div><!--trackdetails-->
  1190. </div><!--audiowrapper-->
  1191. {block:ifCaption}{block:Caption}
  1192. <div class="cap">
  1193. {Caption}    
  1194. </div>
  1195. {/block:Caption}{/block:ifCaption}
  1196. {/block:AudioPlayer}
  1197.  
  1198. {block:Video}
  1199. {block:IndexPage}
  1200. <div class="vidw">
  1201. {block:ifposttype1}{Video-400}{/block:ifposttype1}
  1202. {block:ifposttype2}{Video-500}{/block:ifposttype2}
  1203. {block:ifposttype3}{Video-250}{/block:ifposttype3}
  1204. </div>
  1205. {/block:IndexPage}
  1206. {block:PermalinkPage}
  1207. <div class="vidw">
  1208. {block:ifposttype1}{Video-400}{/block:ifposttype1}
  1209. {block:ifposttype2}{Video-500}{/block:ifposttype2}
  1210. {block:ifposttype3}{Video-250}{/block:ifposttype3}
  1211. </div>
  1212. {/block:PermalinkPage}
  1213. {block:ifCaption}{block:Caption}
  1214. <div class="cap">
  1215. {Caption}    
  1216. </div>
  1217. {/block:Caption}{/block:ifCaption}
  1218. {/block:Video}
  1219.  
  1220. {block:Answer}
  1221. <div class="askbox">
  1222. <div class="qbox">
  1223. <b>{Asker} asked:</b> {Question}  
  1224. </div><!--qbox-->
  1225. <div class="anon">
  1226. <div class="anonme">
  1227. <div class="anonpic">
  1228. <img src="{AskerPortraitURL-64}"/>
  1229. </div><!--anonpic-->
  1230. </div><!--anonme-->
  1231. </div><!--anon-->
  1232. <div class="rbox">
  1233. {Answer}  
  1234. </div><!--rbox-->
  1235. </div><!--askbox-->
  1236. {/block:Answer}
  1237.  
  1238. {block:PermalinkPage}
  1239. <div id="permalink">
  1240. {block:Date}<a href="{Permalink}">{Month} {DayOfMonth}</a>{/block:Date}
  1241. {block:NoteCount} |<a href="{Permalink}">{NoteCount}%</a>{block:NoteCount}
  1242. {block:RebloggedFrom}| <a href="{ReblogParentURL}" title="{ReblogParentName}" ><span class="fontawesome-reply"></span></a> | <a href="{ReblogRootURL}" title="{ReblogRootName}" >origin</a>{/block:RebloggedFrom}
  1243. {block:HasTags}<div class="taggy">tagged: {block:Tags}<a href="{TagURL}">#{Tag} </a>{/block:Tags}</div>{/block:HasTags}
  1244. {/block:PermalinkPage}
  1245.  
  1246. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1247.  
  1248. </div>
  1249. {/block:Posts}
  1250. </div>
  1251.  
  1252.  
  1253. <div class="c">
  1254. <a href="http://nff-themes.tumblr.com"><img src="http://static.tumblr.com/cbjpgjf/hmgmwsd81/yyylamo.png"></a>
  1255. </div>
  1256.  
  1257. </body>
  1258. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!