Advertisement
trenzalours

Theme 18 - Wicked

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