thetruththemes

Triforce - Power

Aug 4th, 2015 (edited)
1,182
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 54.70 KB | None | 0 0
  1. <html>
  2. <!---------------------------------------------------------------------------
  3.  
  4. ,,
  5. ,GG,
  6. GIIG
  7. Gl''lG
  8. ;G' 'G;
  9. GP YG
  10. oQ' 'Qo -Tʀɪғᴏʀᴄᴇ ᴛʜᴇᴍᴇ ʙʏ
  11. *TGGGGGGGGGGGGQQQ, ,QQQGGGGGGGGGGGGP* ɴʏᴄᴛᴏᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ
  12. *TGo, '* *' ,oGP*
  13. *TGo, ɴʏᴄᴛ□ᴛʜᴇᴍᴇs ,oGP* -ᴘʟᴇᴀsᴇ ʀᴇғᴇʀ ᴛᴏ ᴏʀɪɢɪɴᴀʟ
  14. *TGio,, ,,oiGP* ᴘᴏsᴛ ʟɪɴᴋ ғᴏʀ ʀᴜʟᴇs ᴀɴᴅ ᴍɪsᴄ
  15. ;GGT' 'TGG:
  16. GG' ii 'GG -ᴅᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴀɴʏ ᴏғ ᴛʜᴇ
  17. GG' ,GG, 'GG ᴄᴏᴅᴇ ᴄʀᴇᴅɪᴛ ᴏʀ ᴍᴏᴠᴇ ɪᴛ ᴛᴏ
  18. GG* oGGGGo. *GG ᴀ ᴘᴀɢᴇ.
  19. oG* oGG* *GGo. *Go
  20. ;GG;oGG* *GGo;GG;
  21. ,GGGT* *TGGG,
  22. ""' '""
  23.  
  24. ---------------------------------------------------------------------------->
  25.  
  26. <!-- hover titles -->
  27. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  28. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  29.  
  30. <head>
  31.  
  32. {block:Ifcustomfavicon}<link rel="shortcut icon" href="{image:favicon}"/>{/block:Ifcustomfavicon}
  33. {block:IfNotcustomfavicon}<link rel="shortcut icon" href="{favicon}"/>{/block:IfNotcustomfavicon}
  34.  
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  36. <title>{Title}</title>
  37. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  38.  
  39. <!-------------------------------- IMAGES ---------------------------------->
  40. <meta name="image:Background" content=""/>
  41. <meta name="image:Power Triforce BG" content="http://static.tumblr.com/u5vz4xb/16Ook61vp/theme2.gif"/>
  42. <meta name="image:Power Triforce Hover BG" content="http://static.tumblr.com/u5vz4xb/89Qok61xk/theme1.gif"/>
  43. <meta name="image:Wisdom Triforce BG" content="http://static.tumblr.com/u5vz4xb/jN1ok61w4/theme3.gif"/>
  44. <meta name="image:Wisdom Triforce Hover BG" content="http://static.tumblr.com/u5vz4xb/89Qok61xk/theme1.gif"/>
  45. <meta name="image:Courage Triforce BG" content="http://static.tumblr.com/u5vz4xb/KvHok61wb/theme4.gif"/>
  46. <meta name="image:Courage Triforce Hover BG" content="http://static.tumblr.com/u5vz4xb/89Qok61xk/theme1.gif"/>
  47. <meta name="image:Custom Cursor" content="http://static.tumblr.com/u5vz4xb/LcPok5lqt/cursor_3.png"/>
  48. <meta name="image:Custom Cursor Links" content="http://static.tumblr.com/u5vz4xb/hr7ok5lr2/cursor_4.png"/>
  49. <meta name="image:Favicon" content="https://41.media.tumblr.com/ec013e085af242e22d2db201527b6dc9/tumblr_nrb6lhcASH1s60yyoo8_r1_75sq.png"/>
  50. <meta name="image:Default Audio Pic" content="http://static.tumblr.com/eda695b154a06b2594b9e1eea723112a/u5vz4xb/2T9nskq5l/tumblr_static_e2uxr37xblcsww48kg000osw8.png"/>
  51.  
  52. <!-------------------------------- COLORS ---------------------------------->
  53. <!-- Full Body -->
  54. <meta name="color:Background" content="#000000"/>
  55. <meta name="color:Scroll BG" content="#000000"/>
  56. <meta name="color:Scroll Thumb" content="#b35e28"/>
  57. <!-- Gameplay HUD -->
  58. <meta name="color:Hearts" content="#571212"/>
  59. <meta name="color:Hearts Outline" content="#571212"/>
  60. <meta name="color:Energy" content="#304432"/>
  61. <meta name="color:Energy Outline" content="#1e311f"/>
  62. <meta name="color:Rupee Dark" content="#79231d"/>
  63. <meta name="color:Rupee Light" content="#79231d"/>
  64. <meta name="color:Rupee Text" content="#5b605c"/>
  65. <meta name="color:A Button BG" content="#304432"/>
  66. <meta name="color:A Button Border" content="#1b281c"/>
  67. <meta name="color:B Button BG" content="#79231d"/>
  68. <meta name="color:B Button Border" content="#3e1111"/>
  69. <!-- Sidebar -->
  70. <meta name="color:Power Triforce BG" content="#000000"/>
  71. <meta name="color:Power Triforce Hover BG" content="#000000"/>
  72. <meta name="color:Wisdom Triforce BG" content="#000000"/>
  73. <meta name="color:Wisdom Triforce Hover BG" content="#000000"/>
  74. <meta name="color:Courage Triforce BG" content="#000000"/>
  75. <meta name="color:Courage Triforce Hover BG" content="#000000"/>
  76. <meta name="color:Triforce Text" content="#eae6d3"/>
  77. <meta name="color:Items Links BG" content="#1f1818"/>
  78. <meta name="color:Items Links Border" content="#201e1c"/>
  79. <meta name="color:Items Links Hover BG" content="#922226"/>
  80. <meta name="color:Items Rings" content="#0f0c0c"/>
  81. <meta name="color:Items BG" content="#000000"/>
  82. <meta name="color:Description Text" content="#38413e"/>
  83. <meta name="color:Description Links" content="#922226"/>
  84. <meta name="color:Description Links Hover" content="#b35e28"/>
  85. <!-- Posts -->
  86. <meta name="color:Posts BG" content="#000000"/>
  87. <meta name="color:Posts 2nd BG" content="#0b0f0f"/>
  88. <meta name="color:Posts Title" content="#2f3e38"/>
  89. <meta name="color:Posts Text" content="#29332f"/>
  90. <meta name="color:Posts Bold" content="#2f3e38"/>
  91. <meta name="color:Posts Italic" content="#29332f"/>
  92. <meta name="color:Posts Code" content="#3e3e3e"/>
  93. <meta name="color:Posts Code BG" content="#1a1a1a"/>
  94. <meta name="color:Posts Links" content="#922226"/>
  95. <meta name="color:Posts Links Hover" content="#b35e28"/>
  96. <meta name="color:Posts Blockquote" content="#141a11"/>
  97. <meta name="color:Audio Player" content="#5e7369"/>
  98. <!-- Post Endings -->
  99. <meta name="color:Postending Symbols" content="#ab5741"/>
  100. <meta name="color:Postending Symbols BG" content="#1f1818"/>
  101. <meta name="color:Postending Symbols Border" content="#201e1c"/>
  102. <meta name="color:Postending Symbols Hover" content="#fe9a45"/>
  103. <meta name="color:Postending Symbols BG Hover" content="#090c0c"/>
  104. <meta name="color:Postending Symbols Border Hover" content="#090c0c"/>
  105. <meta name="color:Postending Symbols Liked Post" content="#a53737"/>
  106. <meta name="color:Postending Text" content="#364044"/>
  107. <meta name="color:Postending Text BG" content="#090c0c"/>
  108. <meta name="color:Postending Text Links" content="#6b563b"/>
  109. <meta name="color:Postending Text Links Hover" content="#c1723a"/>
  110. <!-- Permalink -->
  111. <meta name="color:Permalink Text" content="#2f3e38"/>
  112. <meta name="color:Permalink Links" content="#3e4c46"/>
  113. <meta name="color:Permalink Links Hover" content="#922226"/>
  114. <meta name="color:Permalink Blockquote" content="#141a11"/>
  115. <!-- Misc. -->
  116. <meta name="color:Link Hover BG" content="#090c0c"/>
  117. <meta name="color:Link Hover Text" content="#eae6d3"/>
  118. <meta name="color:Selection BG" content="#922226"/>
  119. <meta name="color:Selection Text" content="#eae6d3"/>
  120. <meta name="color:Selection Links" content="#eae6d3"/>
  121.  
  122. <!-------------------------------- OPTIONS --------------------------------->
  123. <meta name="select:Description Text Alignment" content="justify" title="justify"/>
  124. <meta name="select:Description Text Alignment" content="right" title="right"/>
  125. <meta name="select:Description Text Alignment" content="left" title="left"/>
  126. <meta name="select:Description Text Alignment" content="center" title="center"/>
  127.  
  128. <meta name="if:White Tumblr Controls" content="0"/>
  129. <meta name="if:Small Tumblr Controls" content="1"/>
  130. <meta name="if:Gameplay HUD" content="1"/>
  131. <meta name="if:Hover for Sidebar" content="1"/>
  132. <meta name="if:Monochrome Photos" content="0"/>
  133. <meta name="if:Fade Photos" content="1"/>
  134. <meta name="if:Postending Symbols for Indexpage" content="1"/>
  135. <meta name="if:Custom Cursor" content="1"/>
  136. <meta name="if:Custom Favicon" content="1"/>
  137. <meta name="if:Dark Audio Player" content="1"/>
  138.  
  139. <!--------------------------------- TEXTS ---------------------------------->
  140. <meta name="text:Health Hearts" content="&#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004; &#xf004;"/>
  141. <meta name="text:Energy Length" content="100px" />
  142. <meta name="text:Rupees" content="475"/>
  143. <meta name="text:Ask Verb" content="wondered" />
  144. <meta name="text:Link 1 Image" content="https://68.media.tumblr.com/3bc75378d21dc2b38fc2d7667cfcd9c3/tumblr_nrb6lhcASH1s60yyoo2_r2_75sq.png" />
  145. <meta name="text:Link 1 URL" content="/" />
  146. <meta name="text:Link 1 Hover" content="Link 1" />
  147. <meta name="text:Link 2 Image" content="https://68.media.tumblr.com/693866652596f282c4cf13b1cd243f12/tumblr_nrb6lhcASH1s60yyoo4_r4_75sq.png" />
  148. <meta name="text:Link 2 URL" content="/" />
  149. <meta name="text:Link 2 Hover" content="Link 2" />
  150. <meta name="text:Link 3 Image" content="https://68.media.tumblr.com/18f584a320222a097151e8fd67c350f9/tumblr_nrb6lhcASH1s60yyoo5_r3_75sq.png" />
  151. <meta name="text:Link 3 URL" content="/" />
  152. <meta name="text:Link 3 Hover" content="Link 3" />
  153. <meta name="text:Link 4 Image" content="https://68.media.tumblr.com/78699dc8277121bce610a14de12d030f/tumblr_nrb6lhcASH1s60yyoo1_r2_75sq.png" />
  154. <meta name="text:Link 4 URL" content="/" />
  155. <meta name="text:Link 4 Hover" content="Link 4" />
  156. <meta name="text:Link 5 Image" content="https://68.media.tumblr.com/21ac0426009cd4b1700e127bac8a70cd/tumblr_nrb6lhcASH1s60yyoo3_r4_75sq.png" />
  157. <meta name="text:Link 5 URL" content="/" />
  158. <meta name="text:Link 5 Hover" content="Link 5" />
  159. <meta name="text:Link 6 Image" content="https://68.media.tumblr.com/5ee152483e8d0485efa8da8caedc0a5a/tumblr_nrb6lhcASH1s60yyoo6_r3_75sq.png" />
  160. <meta name="text:Link 6 URL" content="/" />
  161. <meta name="text:Link 6 Hover" content="Link 6" />
  162.  
  163. <!-- symbol font (like the credit) -->
  164. <script src="https://use.fontawesome.com/a71f6a22b2.js"></script>
  165. <!-- custom font 1/2 -->
  166. <link href="https://fonts.googleapis.com/css?family=Cinzel|Montserrat:400,700" rel="stylesheet">
  167.  
  168. </head>
  169.  
  170. <style type="text/css">
  171.  
  172. /* custom font 3/3 */
  173. @import url(http://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative:400,700);
  174.  
  175. /* ------------------------------- DECORATION ---------------------------- */
  176.  
  177. /* body */
  178. body {
  179. color:{color:Posts Text};
  180. background:{color:background} url('{image:background}') fixed;
  181. font: normal normal normal 11px/17px 'Montserrat', sans-serif;
  182. text-align:justify;}
  183.  
  184. /*-------------------------- CREDIT; DON'T REMOVE -------------------------*/
  185.  
  186. #credit {
  187. z-index:99999; position:fixed;
  188. display:block;
  189. bottom:10px; right:10px;
  190. height:20px; width:20px;
  191. border-radius:50%;
  192. padding:6px 7px 8px 7px;
  193. background:{color:Postending symbols BG};
  194. box-shadow:0px 0px 0px 4px {color:Postending symbols Border} inset;}
  195. #credit:hover {
  196. padding:5px 7px 9px 7px;
  197. background:{color:Postending symbols BG Hover};
  198. box-shadow:0px 0px 0px 4px {color:Postending symbols Border Hover} inset;
  199. -webkit-transition: all 0.2s linear;
  200. -moz-transition: all 0.2s linear;
  201. transition: all 0.2s linear;}
  202. #credit:after {
  203. position:absolute;
  204. content:"";
  205. width:0px; height:0px;
  206. border:20px solid {color:Postending symbols};
  207. border-width:0px 10px 18px 10px;
  208. border-color:transparent transparent {color:Postending symbols} transparent;
  209. -webkit-transition: all 0.2s linear;
  210. -moz-transition: all 0.2s linear;
  211. transition: all 0.2s linear;}
  212. #credit:hover:after {
  213. width:0px; height:0px;
  214. margin-left:-1px;
  215. border:20px solid {color:Postending symbols Hover};
  216. border-width:0px 11px 20px 11px;
  217. border-color:transparent transparent {color:Postending symbols Hover} transparent;}
  218.  
  219. /* ------------------------------ MINOR STUFF ---------------------------- */
  220.  
  221. /* tumblr controls */
  222. .tmblr-iframe {
  223. z-index:9999 !important;
  224. {block:IfWhiteTumblrControls}
  225. -webkit-filter: invert(100%) hue-rotate(180deg) !important;
  226. -moz-filter: invert(100%) hue-rotate(180deg) !important;
  227. -ms-filter: invert(100%) hue-rotate(180deg) !important;
  228. -o-filter: invert(100%) hue-rotate(180deg) !important;
  229. filter: invert(100%) hue-rotate(180deg) !important;
  230. {/block:IfWhiteTumblrControls}
  231. {block:IfSmallTumblrControls}
  232. transform: scale(0.8) !important;
  233. -webkit-transform: scale(0.8) !important;
  234. -moz-transform: scale(0.8) !important;
  235. -o-transform: scale(0.8) !important;
  236. -ms-transform: scale(0.8) !important;
  237. transform-origin:right;
  238. webkit-transform-origin:right;
  239. -moz-transform-origin:right;
  240. -o-transform-origin:right;
  241. -ms-transform-origin:right;
  242. {/block:IfSmallTumblrControls}}
  243.  
  244. /* hover text */
  245. #s-m-t-tooltip {
  246. z-index: 99999; display: block;
  247. margin-left: 30px; margin-top: 5px;
  248. max-width:200px;
  249. padding: 5px 5px 5px 6px;
  250. font: normal normal normal 9px/10px 'Montserrat', san-serif;
  251. color: {color:Link Hover Text};
  252. text-transform:uppercase;
  253. letter-spacing:1px;
  254. text-align:center;
  255. background: {color:Link Hover BG};}
  256.  
  257. /* scrollbar */
  258. ::-webkit-scrollbar {
  259. height: 14px; width: 14px;
  260. background: {color:Scroll BG};}
  261. ::-webkit-scrollbar-thumb {
  262. background: {color:Scroll Thumb};
  263. border:4px solid {color:Scroll BG};
  264. border-radius:5px;}
  265.  
  266. /* drag n' click selection */
  267. ::selection {
  268. background: {color:Selection BG};
  269. color: {color:Selection Text};}
  270. ::-moz-selection {
  271. background: {color:Selection BG};
  272. color: {color:Selection Text};}
  273. a::selection {
  274. background: {color:Selection BG};
  275. color: {color:Selection Links};}
  276. a::-moz-selection {
  277. background: {color:Selection BG};
  278. color: {color:Selection Links};}
  279.  
  280. /* ------------------------------ FONT STUFF ----------------------------- */
  281.  
  282. /* links */
  283. a:link, a:active, a:visited{
  284. text-decoration:none;
  285. color:{color:Posts Links};
  286. -webkit-transition: all 0.5s linear;
  287. -moz-transition: all 0.5s linear;
  288. transition: all 0.5s linear;}
  289. a:hover {
  290. color:{color:Posts Links Hover};
  291. -webkit-transition: all 0.2s linear;
  292. -moz-transition: all 0.2s linear;
  293. transition: all 0.2s linear;}
  294. a i, i a, a em, em a, a b, b a, a strong, strong a {
  295. color:{color:Posts Links} !important;
  296. -webkit-transition: all 0.35s linear;
  297. -moz-transition: all 0.35s linear;
  298. transition: all 0.35s linear;}
  299. a i:hover, i a:hover, a em:hover, em a:hover, a b:hover, b a:hover, a strong:hover, strong a:hover {
  300. color:{color:Posts Links Hover} !important;}
  301.  
  302. /* main font decorations */
  303. .posts p:last-child {
  304. margin-bottom:0px;}
  305. .posts p:first-child {
  306. margin-top:0px;}
  307. b, strong {color:{color:Posts Bold};}
  308. i, em {color:{color:Posts Italic};}
  309. pre {color:{color:Posts Code};
  310. font-size:10px;
  311. max-width:100%;
  312. font-family:consolas;
  313. background:{color:Posts Code BG};
  314. padding:4px 7px 5px 7px;
  315. white-space: pre-wrap;
  316. white-space: -moz-pre-wrap;
  317. white-space: -pre-wrap;
  318. white-space: -o-pre-wrap;
  319. word-wrap: break-word;}
  320. code {
  321. color:{color:Posts Code};
  322. font-size:10px;
  323. font-family:consolas;
  324. background:{color:Posts Code BG};
  325. padding:0px 1px 0px 1px;}
  326. .posts p:last-child {
  327. margin-bottom:0px;}
  328. .posts p:first-child {
  329. margin-top:0px;}
  330.  
  331. /* text and link post titles */
  332. h1 {font: normal normal 700 16px/18px 'Cinzel', serif;
  333. color:{color:Posts Title};
  334. text-align:center;
  335. text-transform:lowercase;
  336. letter-spacing:2px;}
  337. /* quote and ask post titles */
  338. h2 {font: normal normal 700 15px/17px 'Cinzel', serif;
  339. color:{color:Posts Bold};
  340. text-align:center;
  341. text-transform:lowercase;
  342. letter-spacing:1px;}
  343. .posts h1:first-child, .posts h2:first-child {margin-top:0px;}
  344.  
  345. h1 small, h2 small, small h2, small h1 {
  346. font-family:Cinzel !important;
  347. font-size:13px !important; line-height:13px !important;
  348. letter-spacing:0.5px !important;}
  349. h2 sup, h2 sub {
  350. font-family:Cinzel !important;
  351. font-size:11px !important; line-height:11px !important;
  352. letter-spacing:0.5px !important;}
  353. h2 a, a h2 {
  354. font: normal normal 700 15px/17px 'Cinzel', serif !important;
  355. text-align:center !important;
  356. text-transform:lowercase !important;
  357. letter-spacing:1px !important;}
  358.  
  359. /*---------------------------------------------------------------------------
  360. E N T I R E S I D E B A R
  361. ---------------------------------------------------------------------------*/
  362.  
  363. /* ------------------------------- TRIFORCE ------------------------------ */
  364.  
  365. /* all together */
  366. .tri {
  367. position:fixed;
  368. top:50%; left:45%;
  369. height:100px; width:120px;
  370. overflow:hidden;
  371. -webkit-transition: all 0.4s ease-in-out;
  372. -moz-transition: all 0.4s ease-in-out;
  373. transition: all 0.4s ease-in-out;}
  374. .tri:hover {
  375. -webkit-transition: all 0.4s ease-in-out;
  376. -moz-transition: all 0.4s ease-in-out;
  377. transition: all 0.4s ease-in-out;}
  378.  
  379. /* words */
  380. .tri center {
  381. opacity:0;
  382. font: normal normal normal 13px/8px 'Cinzel', serif;
  383. text-transform:lowercase;
  384. letter-spacing:3px;
  385. color:{color:Triforce Text};
  386. text-shadow:0px 0px 0px {color:Triforce Text}, 0px 0px .25px {color:Triforce Text};
  387. text-align:center;
  388. position:relative;
  389. top:50%; margin:10px 0px 0px 3px;
  390. -webkit-transform: translateY(-50%);
  391. -ms-transform: translateY(-50%);
  392. transform: translateY(-50%);
  393. -webkit-transition: all 0.4s ease-in-out;
  394. -moz-transition: all 0.4s ease-in-out;
  395. transition: all 0.4s ease-in-out;}
  396. .tri:hover center {opacity:1;}
  397.  
  398. /* each force individually */
  399. #power {
  400. margin-left:-370px;
  401. background: {color:Power Triforce BG} url({image:Power Triforce BG}) center/cover;
  402. box-shadow:0px 0px 1px 0px {color:background} inset;}
  403. #powerbg {
  404. opacity:0; display:block;
  405. height:100px; width:120px;
  406. position:relative; top:0px;
  407. margin-bottom:-100px;
  408. background: {color:Power Triforce Hover BG} url({image:Power Triforce Hover BG}) center/cover;
  409. -webkit-transition: all 0.4s ease-in-out;
  410. -moz-transition: all 0.4s ease-in-out;
  411. transition: all 0.4s ease-in-out;}
  412. #power:hover #powerbg {
  413. opacity:1;}
  414.  
  415. #wisdom {
  416. margin-left:-430px;
  417. background: {color:Wisdom Triforce BG} url({image:Wisdom Triforce BG}) center/cover;
  418. box-shadow:0px 0px 1px 0px {color:background} inset;}
  419. #wisdom:hover {
  420. margin-left:-450px;}
  421. #wisdombg {
  422. opacity:0; display:block;
  423. height:100px; width:120px;
  424. position:relative; top:0px;
  425. margin-bottom:-100px;
  426. background: {color:Wisdom Triforce Hover BG} url({image:Wisdom Triforce Hover BG}) center/cover;
  427. -webkit-transition: all 0.4s ease-in-out;
  428. -moz-transition: all 0.4s ease-in-out;
  429. transition: all 0.4s ease-in-out;}
  430. #wisdom:hover #wisdombg {
  431. opacity:1;}
  432.  
  433. #courage {
  434. margin-top:-120px; margin-left:-310px;
  435. background: {color:Courage Triforce BG} url({image:Courage Triforce BG}) center/cover;
  436. box-shadow:0px 0px 1px 0px {color:background} inset;}
  437. #courage:hover {
  438. margin-top:-105px; margin-left:-290px;}
  439. #couragebg {
  440. opacity:0; display:block;
  441. height:100px; width:120px;
  442. position:relative; top:0px;
  443. margin-bottom:-100px;
  444. background: {color:Courage Triforce Hover BG} url({image:Courage Triforce Hover BG}) center/cover;
  445. -webkit-transition: all 0.4s ease-in-out;
  446. -moz-transition: all 0.4s ease-in-out;
  447. transition: all 0.4s ease-in-out;}
  448. #courage:hover #couragebg {
  449. opacity:1;}
  450.  
  451. /* what 'clips' the rectangle into a triangle */
  452. .clip-left {
  453. position:relative;
  454. top:-45px; left:-25px;
  455. height:120px; width:60px;
  456. overflow:hidden;
  457. background:{color:background} url('{image:background}') fixed;
  458. box-shadow:0px 0px 1px 0px {color:background};
  459. -ms-transform: rotate(31deg);
  460. -webkit-transform: rotate(31deg);
  461. transform: rotate(31deg);}
  462. .clip-right {
  463. position:relative;
  464. top:-165px; left:85px;
  465. height:120px; width:60px;
  466. overflow:hidden;
  467. background:{color:background} url('{image:background}') fixed;
  468. box-shadow:0px 0px 1px 0px {color:background};
  469. -ms-transform: rotate(329deg);
  470. -webkit-transform: rotate(329deg);
  471. transform: rotate(329deg);}
  472. /* so backgrounds are regular and NOT rotated */
  473. .clip-left .clipbg {
  474. position:relative;
  475. top:-10px; left:-30px;
  476. height:140px; width:120px;
  477. background:{color:background} url('{image:background}') fixed;
  478. -ms-transform: rotate(329deg);
  479. -webkit-transform: rotate(329deg);
  480. transform: rotate(329deg);}
  481. .clip-right .clipbg {
  482. position:relative;
  483. top:-10px; left:-30px;
  484. height:140px; width:120px;
  485. background:{color:background} url('{image:background}') fixed;
  486. -ms-transform: rotate(31deg);
  487. -webkit-transform: rotate(31deg);
  488. transform: rotate(31deg);}
  489.  
  490. /* ------------------------------ LOWER MENUS ---------------------------- */
  491.  
  492. /* description */
  493. #description {
  494. position:fixed; z-index:2;
  495. left:45%; top:50%;
  496. width:130px;
  497. text-align:{select:Description Text Alignment};
  498. color:{color:Description Text};
  499. font-size:10px; line-height:12px;
  500. letter-spacing:1px;}
  501. #description a {color:{color:Description Links}}
  502. #description a:hover {color:{color:Description Links Hover}}
  503. #description b, #description strong, #description i, #description em {color:{color:Description Text};}
  504. .space {float:left; clear:left; height:12px;}
  505.  
  506. /* pagination */
  507. #pagination {
  508. z-index:99999; position:fixed;
  509. color:{color:description text};
  510. top:0px; left:50%;
  511. margin-left:-57px;
  512. background:{color:background} url('{image:background}') fixed;
  513. width:550px; padding:10px 1px;
  514. font-size:10px;
  515. text-transform:uppercase;
  516. letter-spacing:1px;
  517. text-align:center;}
  518. #pagination b, #pagination strong {color:{color:description text};}
  519. .p-active {
  520. display:inline-block;
  521. min-width:18px;
  522. line-height:10px;
  523. padding:7px 2px 7px 2px;
  524. letter-spacing:1px;}
  525. #pagination a .p-active {
  526. color:{color:description links};
  527. -webkit-transition: all 0.3s linear;
  528. -moz-transition: all 0.3s linear;
  529. transition: all 0.3s linear;}
  530. #pagination a .p-active:hover {
  531. color:{color:description links hover};}
  532.  
  533. /* sidebar links */
  534. .inventory {
  535. position:fixed; z-index:1;
  536. top:50%; left:45%;
  537. height:132px; width:145px;
  538. text-align:center;
  539. letter-spacing:-1px;}
  540. .inventory a {
  541. display:block; position:absolute;
  542. width:46px; height:46px;
  543. border-radius:50%;
  544. background-color:{color:Items Links BG};
  545. box-shadow: 0px 0px 0px 5px {color:Items Links Border} inset;
  546. -webkit-transition: all 0.2s linear;
  547. -moz-transition: all 0.2s linear;
  548. transition: all 0.2s linear;
  549. transform: rotate(5deg);
  550. -webkit-transform: rotate(5deg);
  551. -moz-transform: rotate(5deg);
  552. -o-transform: rotate(5deg);
  553. -ms-transform: rotate(5deg);}
  554. .inventory a:hover {
  555. width:50px; height:50px;
  556. margin:0px;
  557. background:{color:Items Links Hover BG};
  558. box-shadow: 0px 0px 0px 5px {color:Items Links Hover BG} inset;
  559. transform: rotate(0deg);
  560. -webkit-transform: rotate(0deg) translate(-2px, -2px);
  561. -moz-transform: rotate(0deg) translate(-2px, -2px);
  562. -o-transform: rotate(0deg) translate(-2px, -2px);
  563. -ms-transform: rotate(0deg) translate(-2px, -2px);}
  564. .inventory a img {width:100%; height:100%;
  565. -webkit-transition: all 0.2s linear;
  566. -moz-transition: all 0.2s linear;
  567. transition: all 0.2s linear;}
  568. .inventory a:hover img {margin-bottom:-2px;}
  569.  
  570. .inventory a:nth-of-type(1) {margin-top:-1px; margin-left:24px;}
  571. .inventory a:nth-of-type(2) {margin-top:-1px; margin-left:75px;}
  572. .inventory a:nth-of-type(3) {margin-top:44px; margin-left:99px;}
  573. .inventory a:nth-of-type(4) {margin-top:89px; margin-left:75px;}
  574. .inventory a:nth-of-type(5) {margin-top:89px; margin-left:24px;}
  575. .inventory a:nth-of-type(6) {margin-top:44px; margin-left:0px;}
  576.  
  577. /* inventory background */
  578. #ring {
  579. opacity:1;
  580. position:fixed; z-index:1;
  581. top:50%; left:45%;
  582. height:80px; width:80px;
  583. border:20px double {color:Items Rings};
  584. background:{color:Items BG};
  585. border-radius:50%;
  586. text-align:center;}
  587. #items {
  588. display:inline-block;
  589. position:relative;
  590. top:50%; margin-left:-4px;
  591. -webkit-transform: translateY(-50%);
  592. -ms-transform: translateY(-50%);
  593. transform: translateY(-50%);
  594. font: normal normal bold 12px/8px 'Cinzel', san-serif;
  595. text-transform:lowercase;
  596. text-align:center;
  597. letter-spacing:2.5px;
  598. color:{color:Items Links Hover BG};
  599. padding:3px 0px 3px 2px;
  600. -webkit-transition: all 0.5s linear;
  601. -moz-transition: all 0.5s linear;
  602. transition: all 0.5s linear;}
  603.  
  604. /* --------------------------- SIDEBAR + HOVER --------------------------- */
  605.  
  606. {block:IfNotHoverforSidebar}
  607. /* side container */
  608. #side {
  609. position:fixed;
  610. top:50%; left:45%;
  611. margin-top:-245px; margin-left:-485px;
  612. width:350px; height:450px;
  613. border-radius:50% 50% 30px 50px;}
  614.  
  615. /* everything else */
  616. #power {margin-top:-220px;
  617. -webkit-transition: all 0.7s ease-in-out;
  618. -moz-transition: all 0.7s ease-in-out;
  619. transition: all 0.7s ease-in-out;}
  620. #power:hover {margin-top:-240px;}
  621. #wisdom {margin-top:-120px;
  622. -webkit-transition: all 0.7s ease-in-out;
  623. -moz-transition: all 0.7s ease-in-out;
  624. transition: all 0.7s ease-in-out;}
  625. #wisdom:hover {margin-top:-105px;}
  626. #courage {margin-top:-120px;
  627. -webkit-transition: all 0.7s ease-in-out;
  628. -moz-transition: all 0.7s ease-in-out;
  629. transition: all 0.7s ease-in-out;}
  630. #courage:hover {margin-top:-105px;}
  631. #ring {margin-left:-443px; margin-top:45px;}
  632. .inventory {margin-left:-458px; margin-top:39px;}
  633. #description {opacity:1; margin-left:-310px; margin-top:52px;}
  634. {/block:IfNotHoverforSidebar}
  635.  
  636. {block:IfHoverforSidebar}
  637. /* speed that everything moves */
  638. #side, #side #ring, #side .inventory, #side #description{
  639. -webkit-transition: all 0.7s ease-in-out;
  640. -moz-transition: all 0.7s ease-in-out;
  641. transition: all 0.7s ease-in-out;}
  642.  
  643. /* side container */
  644. #side {
  645. position:fixed;
  646. top:50%; left:45%;
  647. margin-top:-190px; margin-left:-440px;
  648. width:260px; height:230px;
  649. border-radius:50% 50% 10px 10px;}
  650. #side:hover {
  651. margin-top:-245px; margin-left:-485px;
  652. width:350px; height:450px;
  653. border-radius:50% 50% 30px 50px;}
  654.  
  655. /* everything else when hovered */
  656. #side #power {margin-top:-170px;
  657. -webkit-transition: all 0.7s ease-in-out;
  658. -moz-transition: all 0.7s ease-in-out;
  659. transition: all 0.7s ease-in-out;}
  660. #side:hover #power {margin-top:-220px;}
  661. #side:hover #power:hover {margin-top:-240px;}
  662.  
  663. #side #wisdom {margin-top:-70px;
  664. -webkit-transition: all 0.7s ease-in-out;
  665. -moz-transition: all 0.7s ease-in-out;
  666. transition: all 0.7s ease-in-out;}
  667. #side:hover #wisdom {margin-top:-120px;}
  668. #side:hover #wisdom:hover {margin-top:-105px;}
  669.  
  670. #side #courage {margin-top:-70px;
  671. -webkit-transition: all 0.7s ease-in-out;
  672. -moz-transition: all 0.7s ease-in-out;
  673. transition: all 0.7s ease-in-out;}
  674. #side:hover #courage {margin-top:-120px;}
  675. #side:hover #courage:hover {margin-top:-105px;}
  676.  
  677. #side #ring {
  678. opacity:0;
  679. margin-left:-393px; margin-top:45px;
  680. transform: rotate(90deg);
  681. -webkit-transform: rotate(90deg);
  682. -moz-transform: rotate(90deg);
  683. -o-transform: rotate(90deg);
  684. -ms-transform: rotate(90deg);}
  685. #side:hover #ring {
  686. opacity:1;
  687. margin-left:-443px; margin-top:45px;
  688. transform: rotate(0deg);
  689. -webkit-transform: rotate(0deg);
  690. -moz-transform: rotate(0deg);
  691. -o-transform: rotate(0deg);
  692. -ms-transform: rotate(0deg);}
  693.  
  694. #side .inventory {
  695. opacity:0;
  696. margin-left:-408px; margin-top:39px;
  697. transform: rotate(90deg);
  698. -webkit-transform: rotate(90deg);
  699. -moz-transform: rotate(90deg);
  700. -o-transform: rotate(90deg);
  701. -ms-transform: rotate(90deg);}
  702. #side:hover .inventory {
  703. opacity:1;
  704. margin-left:-458px; margin-top:39px;
  705. transform: rotate(0deg);
  706. -webkit-transform: rotate(0deg);
  707. -moz-transform: rotate(0deg);
  708. -o-transform: rotate(0deg);
  709. -ms-transform: rotate(0deg);}
  710.  
  711. #side #description {opacity:0; margin-left:-400px; margin-top:52px;}
  712. #side:hover #description {opacity:1; margin-left:-310px; margin-top:52px;}
  713. {/block:IfHoverforSidebar}
  714.  
  715. /* ----------------------------- GAMEPLAY HUD ---------------------------- */
  716.  
  717. #hearts {
  718. position:fixed;
  719. top:35px; left:15px;
  720. width:130px; height:26px;
  721. padding:1px 2px;
  722. overflow:hidden;
  723. font:normal normal normal 10px/13px fontawesome;
  724. word-spacing:.5px;
  725. word-wrap: break-word;
  726. text-align:left;
  727. color:{color:Hearts};
  728. text-shadow:1px 0px 0px {color:Hearts Outline}, -1px 0px 0px {color:Hearts Outline}, 0px 1px 0px {color:Hearts Outline}, 0px -1px 0px {color:Hearts Outline};}
  729. #hearts span {
  730. display:inline-block;
  731. font-size:14px;
  732. line-height:13px;
  733. margin-left:-2px;}
  734.  
  735. #energy {
  736. position:fixed;
  737. top:70px; left:17px;
  738. width:125px; height:6px;
  739. border:1px solid {color:Energy Outline};
  740. border-radius:2px;
  741. box-shadow: {text:Energy Length} 0px 0px {color:Energy} inset, 0px 0px 16px -4px {color:Energy Outline} inset;}
  742.  
  743. #rupees {
  744. position:fixed;
  745. bottom:20px; left:21px;
  746. width:130px;
  747. font: normal normal normal 11px/10px 'Montserrat', san-serif;
  748. letter-spacing:1.5px;
  749. color: {color:Rupee Text};}
  750. #rupee {
  751. vertical-align:middle;
  752. margin-top:5px;
  753. z-index:1; margin-right:7px;
  754. display:inline-block;
  755. height:6px; width:6px;
  756. background:{color:Rupee Light};
  757. border:2px solid {color:Rupee Light};
  758. border-width: 0px 0px 2px 2px;
  759. border-color: transparent transparent {color:Rupee Dark} {color:Rupee Dark};}
  760. #rupee:before {
  761. content:""; z-index:2;
  762. display:inline-block;
  763. position:relative;
  764. left:0px; top:-6px;
  765. height:11px; width:12px;
  766. background:{color:Rupee Light};
  767. box-shadow: 3px 0px 0px 0px rgba(255,255,255,0.5) inset, -3px 0px 0px 0px {color:Rupee Dark} inset;
  768. transform: rotate(45deg);
  769. -webkit-transform: rotate(45deg);
  770. -moz-transform: rotate(45deg);
  771. -o-transform: rotate(45deg);
  772. -ms-transform: rotate(45deg);}
  773. #rupee:after {
  774. content:""; z-index:1;
  775. display:inline-block;
  776. position:relative;
  777. left:6px; top:-22px;
  778. height:6px; width:6px;
  779. background:{color:Rupee Light};
  780. border:2px solid {color:Rupee Light};
  781. border-width:2px 2px 0px 0px;
  782. border-color:#fff {color:Rupee Dark} transparent transparent;}
  783.  
  784. #buttons {
  785. z-index:-999; position:fixed;
  786. font-size:11px; font-weight:bold;
  787. border-radius:50%;}
  788. #letters {
  789. text-align:center;
  790. position:relative; top:50%;
  791. -webkit-transform: translateY(-50%);
  792. -ms-transform: translateY(-50%);
  793. transform: translateY(-50%);}
  794. .a {top:30px; right:10px;
  795. width:23px; height:23px;
  796. background:{color:A Button BG};
  797. color:{color:A Button Border};
  798. border:1px solid {color:A Button Border};}
  799. .b {top:45px; right:40px;
  800. width:18px; height:18px;
  801. background:{color:B Button BG};
  802. color:{color:B Button Border};
  803. border:1px solid {color:B Button Border};}
  804.  
  805. /*---------------------------------------------------------------------------
  806. E N T I R E P O S T S
  807. ---------------------------------------------------------------------------*/
  808.  
  809. /* posts position */
  810. #entries {
  811. z-index:1;
  812. margin-top:90px; margin-left:50%;
  813. position:relative;}
  814. /* posts themselves */
  815. .posts {
  816. margin:0 0 100px -50px;
  817. width: 500px; padding:20px;
  818. overflow:hidden;
  819. border-radius:3px;
  820. background: {color:Posts BG} url('');}
  821.  
  822. /* ------------------------------- POST TYPES ---------------------------- */
  823. /* text post */
  824. blockquote {
  825. padding:0px;
  826. padding-left:6px;
  827. margin:-3px 0 -1px 6px;
  828. border-left: 2px solid {color:posts blockquote};}
  829. hr {display: block;
  830. margin: 30px 80px;
  831. border:1px solid {color:posts blockquote};
  832. border-width:2px 0px 0px 0px;}
  833.  
  834. /* bullet lists */
  835. ol {margin-left:-8px;
  836. list-style-type:decimal;}
  837. ul {margin-left:-20px;
  838. list-style-type:none;}
  839. ul li::before {
  840. content:"";
  841. margin:0px 10px 2px 0px;
  842. display:inline-block;
  843. height:4px; width:4px;
  844. border-radius:50%;
  845. background:{color:posts blockquote};}
  846. li {margin-bottom:3px;}
  847.  
  848. /* text-images */
  849. .posts img {
  850. vertical-align:middle;
  851. max-width:100%;}
  852. .posts img a, .posts a img {
  853. box-shadow:none;}
  854. /* the credit below images that are from other people */
  855. .tmblr-full {margin:0;}
  856. .tmblr-attribution {
  857. opacity:.8;
  858. margin-top:0px;
  859. font-family:Calibri;
  860. font-size:8px; line-height:8px;
  861. text-transform:uppercase;
  862. letter-spacing:1px;}
  863. .tmblr-attribution::after {content: " >";}
  864.  
  865. /* link posts */
  866. .link-posts a {
  867. background: {color:Posts Links};
  868. display:inline-block;
  869. width: 480px;
  870. padding:10px;
  871. color:{color:Posts BG};}
  872. .link-posts a:hover {
  873. background: {color:Posts Links Hover}}
  874.  
  875. /* ask posts */
  876. .ask-posts img {
  877. vertical-align:middle;
  878. display:inline-block;
  879. margin-right:7px;
  880. max-width:64px;}
  881. .ask-posts .question {
  882. vertical-align:middle;
  883. display:inline-block;
  884. min-height:44px; width:406px;
  885. padding: 10px;
  886. background: {color:Posts 2nd BG};}
  887.  
  888. .ask-posts h2 {
  889. text-align:left;
  890. margin:-5px 0px 5px -10px;
  891. padding:0px 10px 0px 10px;}
  892. .ask-posts h2 a {
  893. font: normal normal 400 12px/14px 'Orbitron', sans-serif;
  894. box-shadow:none;}
  895.  
  896. /* quote posts */
  897. .quote-posts {
  898. padding:10px 0px;
  899. text-align:center}
  900. .quote {
  901. vertical-align:middle;
  902. width:430px;
  903. display:inline-block;}
  904. .quote-posts .fa {
  905. font-size:20px;
  906. vertical-align:middle;
  907. display:inline-block;
  908. color:{color:Posts Blockquote}}
  909.  
  910. /* chat posts */
  911. .chat {margin:0px; padding:0px; line-height:14px;}
  912. .chat li {text-align:left;}
  913. .chat li::before {display:none;}
  914. .chat li {
  915. padding:6px 8px;
  916. margin-bottom:2px;
  917. background: {color:Posts 2nd BG};}
  918. .chat li:last-of-type {
  919. margin-bottom:0px;}
  920.  
  921. /* photo posts */
  922. .posts img, .posts .html_photoset, .posts #audio-pic {
  923. {block:IfFadePhotos}opacity:0.75;{/block:IfFadePhotos}
  924. {block:IfMonochromePhotos}
  925. -webkit-filter: grayscale(100%);
  926. -moz-filter: grayscale(100%);
  927. -ms-filter: grayscale(100%);
  928. -o-filter: grayscale(100%);
  929. filter: grayscale(100%);{/block:IfMonochromePhotos}
  930. -webkit-transition-duration: 0.5s;
  931. -moz-transition-duration:0.5s;
  932. -o-transition-duration:0.5s;
  933. transition-duration:0.5s;}
  934. .posts:hover img, .posts:hover .html_photoset, .posts:hover #audio-pic {
  935. opacity:1;
  936. -webkit-filter: grayscale(0%);
  937. -moz-filter: grayscale(0%);
  938. -ms-filter: grayscale(0%);
  939. -o-filter: grayscale(0%);
  940. filter: grayscale(0%);
  941. -webkit-transition-duration: 0.5s;
  942. -moz-transition-duration:0.5s;
  943. -o-transition-duration:0.5s;
  944. transition-duration:0.5s;}
  945.  
  946. /* photoset focused image background */
  947. .tmblr-lightbox {
  948. background-color:transparent !important;}
  949. .vignette {
  950. z-index:99998! important;
  951. opacity:.75 !important;
  952. background-color:{color:background} !important;
  953. background-image:none !important;}
  954. .tmblr-lightbox .lightbox-image {
  955. z-index:99999! important;
  956. border-radius:0px !important;
  957. background:{color:background} !important;
  958. box-shadow:0px 0px 0px 30px {color:background} !important;}
  959. .tmblr-lightbox .lightbox-caption {
  960. z-index:99999! important;
  961. font-family:consolas !important;
  962. font-size:10px !important;
  963. font-size: 15px !important;
  964. font-weight: bold !important;
  965. color: {color:posts title} !important;
  966. text-shadow: 0 4px 30px {color:background} !important;}
  967.  
  968. /* video posts */
  969. #youtube_iframe, .tumblr_video_container {
  970. margin-bottom:5px; max-width:100%;}
  971. .caption iframe, .caption #youtube_iframe, .caption .tumblr_video_container {
  972. margin:5px 0px; max-width:100%;}
  973.  
  974. /* audio posts */
  975. #audio-pic {
  976. display:inline-block;
  977. vertical-align:middle;
  978. margin-right:2px;
  979. width:135px; height:135px;
  980. background: url('{image:Default Audio Pic}');
  981. background-size:cover;}
  982. #info-container {
  983. display:inline-block;
  984. vertical-align:middle;
  985. text-align:left;
  986. font-size:8px; line-height:15px;
  987. width:355px;
  988. text-transform:uppercase;
  989. letter-spacing:1px;}
  990. #info-container li {
  991. display:block;
  992. padding:5px 8px;
  993. margin:2px 0px;
  994. background: {color:Posts 2nd BG};}
  995. #info-container li::before {display:none;}
  996. .posts .audio_player {
  997. max-width:355px; max-height:27px;
  998. margin:0px;
  999. background:{color:Audio Player};
  1000. {block:IfMonochromePhotos}
  1001. -webkit-filter: grayscale(100%);
  1002. -moz-filter: grayscale(100%);
  1003. -ms-filter: grayscale(100%);
  1004. -o-filter: grayscale(100%);
  1005. filter: grayscale(100%);{/block:IfMonochromePhotos}
  1006. -webkit-transition: all 0.2s linear;
  1007. -moz-transition: all 0.2s linear;
  1008. transition: all 0.2s linear;}
  1009. .posts:hover .audio_player {
  1010. {block:IfMonochromePhotos}
  1011. -webkit-filter: grayscale(0%);
  1012. -moz-filter: grayscale(0%);
  1013. -ms-filter: grayscale(0%);
  1014. -o-filter: grayscale(0%);
  1015. filter: grayscale(0%);{/block:IfMonochromePhotos}}
  1016. .tumblr_audio_player {
  1017. width:355px; opacity:.66;}
  1018.  
  1019. /* ----------------------------- POSTS INFO ------------------------------ */
  1020.  
  1021. /* if Symbols */
  1022. #postinfo {
  1023. position:absolute;
  1024. margin-top:30px; margin-left:-20px;
  1025. text-align:center;
  1026. width: 540px;}
  1027. /* individual circles */
  1028. #postinfo a {
  1029. display:inline-block; margin:0px 8px;
  1030. height:20px; width:20px;
  1031. padding:6px 7px 8px 7px;
  1032. border-radius:50%;
  1033. vertical-align:middle;
  1034. line-height:22px; font-size:22px;
  1035. color:{color:Postending symbols};
  1036. background:{color:Postending symbols BG};
  1037. box-shadow:0px 0px 0px 4px {color:Postending symbols Border} inset;
  1038. -webkit-transition: all 0.2s linear;
  1039. -moz-transition: all 0.2s linear;
  1040. transition: all 0.2s linear;}
  1041. #postinfo a:hover {
  1042. margin:0px 12px;
  1043. padding:5px 7px 9px 7px; font-size:24px;
  1044. color:{color:Postending symbols Hover};
  1045. background:{color:Postending symbols BG Hover};
  1046. box-shadow:0px 0px 0px 4px {color:Postending symbols Border Hover} inset;}
  1047.  
  1048. /* circles like button */
  1049. #postinfo #like {
  1050. vertical-align:middle;
  1051. display:inline-block;}
  1052. #postinfo .like_button {
  1053. display:inline-block;
  1054. position:relative;
  1055. top:0px; left:0px;}
  1056. #postinfo .like_button iframe {
  1057. position:absolute;
  1058. margin:1px 0px 0px -31px;
  1059. display:inline-block;
  1060. opacity:0; z-index:99;}
  1061. #postinfo .like_button::before {
  1062. content:"\f08a";
  1063. display:inline-block;
  1064. margin-left:8px;
  1065. height:20px; width:20px;
  1066. padding:6px 7px 8px 7px;
  1067. border-radius:50%;
  1068. text-align:center;
  1069. font-size:20px; line-height:24px;
  1070. font-family:'FontAwesome';
  1071. color:{color:Postending symbols};
  1072. background:{color:Postending symbols BG};
  1073. box-shadow:0px 0px 0px 4px {color:Postending symbols Border} inset;
  1074. -webkit-transition: all 0.2s linear;
  1075. -moz-transition: all 0.2s linear;
  1076. transition: all 0.2s linear;}
  1077. #postinfo .like_button:hover::before {
  1078. margin-left:12px; font-size:22px;
  1079. color:{color:Postending symbols Hover};
  1080. background:{color:Postending symbols BG Hover};
  1081. box-shadow:0px 0px 0px 4px {color:Postending symbols Border Hover} inset}
  1082. #postinfo .like_button.liked::before {
  1083. content:"\f004";
  1084. color:{color:Postending symbols Liked Post}; !important;}
  1085.  
  1086. /* if no Symbols */
  1087. #postending {
  1088. padding:10px; width:500px;
  1089. margin:15px 0px -10px -10px;
  1090. background: {color:Postending Text BG};
  1091. text-align:center;
  1092. margin-top:15px;
  1093. font-size:9px;
  1094. text-transform:uppercase;
  1095. letter-spacing:1px;
  1096. color: {color:Postending Text};}
  1097. #postending a {
  1098. color:{color:Postending Text Links};}
  1099. #postending a:hover {
  1100. color:{color:Postending Text Links Hover};}
  1101.  
  1102. /* ---------------------------- PERMALINK -------------------------------- */
  1103.  
  1104. /* permalink position */
  1105. #permalink {
  1106. background:;/* if you want the post-notes to have a non-transparent bg */
  1107. margin:-100px 0px 0px -50px;
  1108. width: 500px; padding: 20px;}
  1109.  
  1110. /* scrollbar */
  1111. ::-webkit-scrollbar {
  1112. height: 14px; width: 14px;
  1113. background: {color:Scroll BG};}
  1114. ::-webkit-scrollbar-thumb {
  1115. background: {color:Scroll Thumb};
  1116. border:4px solid {color:Scroll BG};
  1117. border-radius:5px;}
  1118.  
  1119. /* post notes container */
  1120. .notes {
  1121. max-height:600px;
  1122. overflow: auto;
  1123. text-align:center;
  1124. line-height:0px; font-size:0px;
  1125. color:transparent;
  1126. letter-spacing:0px;}
  1127. .notes li::before {display:none;}
  1128. .notes a {
  1129. font: normal normal normal 9px/17px 'Montserrat', san-serif;
  1130. text-transform:uppercase;
  1131. letter-spacing:1px;
  1132. color:{color:Permalink Links};}
  1133. .notes a:hover {
  1134. color:{color:Permalink Links Hover};}
  1135. .notes blockquote, .notes .answer_content {
  1136. font: normal normal normal 9px/17px 'Montserrat', san-serif;
  1137. letter-spacing:1px;
  1138. max-width:350px;
  1139. margin:3px auto; border:none;
  1140. color:{color:Permalink Links};
  1141. background:{color:Permalink Blockquote};}
  1142. .notes blockquote {
  1143. display:inline-block;
  1144. padding:1px 10px 0px 10px;}
  1145. .notes .answer_content {
  1146. display:block;
  1147. padding:2px 10px 1px 10px;}
  1148. .notes img {display:none;}
  1149. .notes li {margin-left:-10px;}
  1150.  
  1151. /* replaced regular sentences with fa symbols */
  1152. .notes .like span a::after, .notes .reblog .tumblelog::after, .notes .reblog blockquote::before, .notes .reblog blockquote::after, .notes .answer_content::before, .notes .answer_content::after, .notes .reply .action a::after {
  1153. font-weight:normal;
  1154. vertical-align:middle;
  1155. content:"";
  1156. font-family:'FontAwesome';
  1157. display:inline-block; margin:0px 5px;
  1158. font-size:10px;
  1159. color:{color:Permalink Text};}
  1160. .notes .like span a::after {content:"\f004";}
  1161. .notes .reblog .tumblelog::after {content: "\f079";}
  1162. .notes .reblog blockquote::before, .notes .answer_content::before {content: "\f10d"; margin-top:-1px;}
  1163. .notes .reblog blockquote::after, .notes .answer_content::after {content: "\f10e"; margin-top:-1px;}
  1164. .notes .reply .action a::after {content: "\f063";}
  1165.  
  1166. </style>
  1167. <body>
  1168.  
  1169. <!-------------------------------- CURSOR ---------------------------------->
  1170.  
  1171. {block:IfCustomCursor}
  1172. <style type="text/css"> body {cursor: url({image:Custom Cursor}), auto;} a, a:hover{cursor:url({image:Custom Cursor Links}), auto;}
  1173. </style>
  1174. <!-- Custom cursors don't show up on empty spaces, but this fixes that -->
  1175. <div style="position:fixed; background:rgba(0,0,0,0); top:0px; left:0px; width:100%; height:100%; z-index: -99999999999999;"></div>{/block:IfCustomCursor}
  1176.  
  1177. <!-------------------------- CREDIT; DON'T REMOVE -------------------------->
  1178. <a href="http://nyctothemes.tumblr.com/" title="© nyctothemes" id="credit"></a>
  1179.  
  1180. <!--------------------------------- HUD ------------------------------------>
  1181. {block:IfGameplayHUD}
  1182. <div id="hearts">{text:Health Hearts} <span>&#xf004;</span></div>
  1183. <div id="energy"></div>
  1184. <div id="rupees">
  1185. <div id="rupee"></div> {text:Rupees}
  1186. </div>
  1187. <div id="buttons" class="a"><div id="letters">A</div></div>
  1188. <div id="buttons" class="b"><div id="letters">B</div></div>
  1189. {/block:IfGameplayHUD}
  1190.  
  1191. <!------------------------------- TRIFORCE --------------------------------->
  1192. <div id="side">
  1193. <a href="/" class="tri" id="power">
  1194. <div id="powerbg"></div>
  1195. <center>home</center>
  1196. <div class="clip-left"><div class="clipbg"></div></div>
  1197. <div class="clip-right"><div class="clipbg"></div></div>
  1198. </a>
  1199. <a href="/archive" class="tri" id="wisdom">
  1200. <div id="wisdombg"></div>
  1201. <center>past</center>
  1202. <div class="clip-left"><div class="clipbg"></div></div>
  1203. <div class="clip-right"><div class="clipbg"></div></div>
  1204. </a>
  1205. <a href="/ask" class="tri" id="courage">
  1206. <div id="couragebg"></div>
  1207. <center>ask</center>
  1208. <div class="clip-left"><div class="clipbg"></div></div>
  1209. <div class="clip-right"><div class="clipbg"></div></div>
  1210. </a>
  1211.  
  1212. <!-------------------------------- MENU ------------------------------------>
  1213.  
  1214. <!-- description -->
  1215. <div id="description">
  1216. <div class="space" style="width:0px;"></div>
  1217. <div class="space" style="width:6px;"></div>
  1218. <div class="space" style="width:15px;"></div>
  1219. <div class="space" style="width:20px;"></div>
  1220. <div class="space" style="width:21px;"></div>
  1221. <div class="space" style="width:19px;"></div>
  1222. <div class="space" style="width:13px;"></div>
  1223. <div class="space" style="width:5px;"></div>
  1224. {description}</div>
  1225.  
  1226. <!-- sidebar links -->
  1227. <div id="ring"><div id="items">ITEMS</div></div>
  1228. <div class="inventory">
  1229. <a href="{text:link 1 URL}" title="{text:link 1 hover}"><img src="{text:Link 1 Image}"></a>
  1230. <a href="{text:link 2 URL}" title="{text:link 2 hover}"><img src="{text:Link 2 Image}"></a>
  1231. <a href="{text:link 3 URL}" title="{text:link 3 hover}"><img src="{text:Link 3 Image}"></a>
  1232. <a href="{text:link 4 URL}" title="{text:link 4 hover}"><img src="{text:Link 4 Image}"></a>
  1233. <a href="{text:link 5 URL}" title="{text:link 5 hover}"><img src="{text:Link 5 Image}"></a>
  1234. <a href="{text:link 6 URL}" title="{text:link 6 hover}"><img src="{text:Link 6 Image}"></a>
  1235. </div>
  1236. </div>
  1237.  
  1238. <!-- page navigation -->
  1239. {block:Pagination}<div id="pagination">
  1240. {block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}<div class="p-active">◀</div>{block:PreviousPage}</a>{/block:PreviousPage}
  1241. chapter <b>{CurrentPage}</b> of <b>{TotalPages}</b>
  1242. {block:NextPage}<a href="{NextPage}">{/block:NextPage}<div class="p-active">▶</div>{block:NextPage}</a>{/block:NextPage}
  1243. </div>{/block:Pagination}
  1244. <!--------------------------------- POSTS --------------------------------->
  1245. <div id="entries">
  1246. {block:posts}
  1247.  
  1248. <div class="posts">
  1249.  
  1250. <!-- text posts -->
  1251. {block:Text}
  1252. {block:Title}<h1>{Title}</h1>{/block:Title}
  1253. <div class="caption">{Body}</div>
  1254. {/block:Text}
  1255.  
  1256. <!-- link posts -->
  1257. {block:Link}
  1258. {block:Thumbnail}<center>
  1259. <a href="{Thumbnail-HighRes}">
  1260. <img src="{Thumbnail}" class="photo-posts" style="margin-bottom:5px;">
  1261. </a>
  1262. </center>{/block:Thumbnail}
  1263. <div class="link-posts"><h1><a href="{URL}">
  1264. {Name}&nbsp;&#8594;
  1265. </a></h1></div>
  1266. {block:Description}<div class="caption">
  1267. <p>{Description}</p>
  1268. </div>{/block:Description}
  1269. {/block:Link}
  1270.  
  1271. <!-- ask posts -->
  1272. {block:Answer}
  1273. <div class="ask-posts">
  1274. <img src="{AskerPortraitURL-64}">
  1275. <div class="question">
  1276. <h2>{Asker} {text:Ask Verb}:</h2> {Question}
  1277. </div></div><br>
  1278. <div id="caption">{Answer}</div>
  1279. {/block:Answer}
  1280.  
  1281. <!-- quote posts -->
  1282. {block:Quote}
  1283. <h2 class="quote-posts">
  1284. <l class="fa fa-quote-left"></l>
  1285. <div class="quote">{Quote}</div>
  1286. <l class="fa fa-quote-right"></l>
  1287. </h2>
  1288. <div style="text-align:right; margin-right:20px">
  1289. {block:Source}<b>- {Source}</b>{/block:Source}
  1290. </div>
  1291. {/block:Quote}
  1292.  
  1293. <!-- chat posts -->
  1294. {block:Chat}
  1295. {block:Title}<h1>{Title}</h1>{/block:Title}
  1296. <ul class="chat">{block:Lines}
  1297. <li class="user_{UserNumber}">{block:Label}
  1298. <b style="margin-right:5px">{Label}</b>
  1299. {/block:Label} {Line}</li>
  1300. {/block:Lines}</ul>
  1301. {/block:Chat}
  1302.  
  1303. <!-- photo posts -->
  1304. {block:Photo}
  1305. <center>
  1306. {block:HighRes}<a href="{PhotoURL-HighRes}" target="_blank" style="box-shadow:none">{/block:HighRes}<img src="{PhotoURL-500}" class="photo-posts"/>{block:HighRes}</a>{/block:HighRes}
  1307. </center>
  1308. {block:Caption}<br><div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}
  1309.  
  1310. {block:Photoset}
  1311. <div style="width:540px; margin-left:-20px; text-align:middle">
  1312. {Photoset}
  1313. </div>
  1314. {block:Caption}<br><div class="caption">{Caption}</div>{/block:Caption}{/block:Photoset}
  1315.  
  1316. <!-- video post -->
  1317. {block:Video}
  1318. {Video-500}
  1319. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1320. {/block:Video}
  1321.  
  1322. <!-- audio posts -->
  1323. {block:Audio}
  1324. <!--image-->
  1325. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}<div id="audio-pic" {block:AlbumArt}style="background:none"{/block:AlbumArt}>
  1326. {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
  1327. </div>{block:IndexPage}</a>{/block:IndexPage}
  1328. <div id="info-container">
  1329. <!--player-->
  1330. {block:ifDarkAudioPlayer}{AudioPlayerBlack}{/block:ifDarkAudioPlayer}
  1331. {block:ifNotDarkAudioPlayer}{AudioPlayerWhite}{/block:ifNotDarkAudioPlayer} <!--info-->
  1332. {block:TrackName}<li><b>Track:</b> {TrackName}</li>{/block:TrackName}
  1333. {block:Artist}<li><b>Artist:</b> {Artist}</li>{/block:Artist}
  1334. {block:Album}<li><b>Album:</b> {Album}</li>{/block:Album}
  1335. {block:PlayCount}<li><b>Plays:</b> {FormattedPlayCount}</li>{/block:PlayCount}
  1336. </div>
  1337. {block:Caption}<div class="caption" style="margin-top:10px;">{Caption}</div>{/block:Caption}{/block:Audio}
  1338.  
  1339. <!------------------------------ POST ENDING ------------------------------->
  1340.  
  1341. {block:PermalinkPage}{block:Date}<div id="postending">
  1342.  
  1343. <!-- date posted -->
  1344. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}</a>
  1345. <!-- notes counter -->
  1346. {block:NoteCount}
  1347. || {NoteCountWithLabel}
  1348. {/block:NoteCount}
  1349. <!-- reblogged from -->
  1350. {block:RebloggedFrom}<br>
  1351. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1352. {/block:RebloggedFrom}
  1353. <!-- original poster -->
  1354. {block:ContentSource}
  1355. || Source: <a href="{SourceURL}">{SourceTitle}</a>
  1356. {/block:ContentSource}
  1357. <!-- tags -->
  1358. {block:HasTags}<br><div style="padding:0px 20px 0px 20px">
  1359. Tags: {block:Tags}<a href="{TagURL}">{Tag}</a>, {/block:Tags}
  1360. </div>{/block:HasTags}
  1361.  
  1362. </div>{/block:Date}{/block:PermalinkPage}
  1363.  
  1364. <!------------- If Symbols for Index Page ------------->
  1365. {block:IfPostendingSymbolsForIndexpage}
  1366. {block:IndexPage}
  1367. <div id="postinfo">
  1368.  
  1369. <!-- date posted -->
  1370. {block:Date}
  1371. <a href="{Permalink}" title="{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}"><l class="fa fa-hourglass-half"></l></a>
  1372. {/block:Date}
  1373. <!-- notes counter -->
  1374. {block:NoteCount}
  1375. <a href="{Permalink}" title="{NoteCountWithLabel}"><l class="fa fa-search"></l></a>
  1376. {/block:NoteCount}
  1377. <!-- original poster -->
  1378. {block:ContentSource}
  1379. <a href="{SourceURL}" title="Source: {SourceTitle}"><l class="fa fa-copyright"></l></a>
  1380. {/block:ContentSource}
  1381. <!-- reblogged from -->
  1382. {block:RebloggedFrom}
  1383. <a href="{ReblogParentURL}" title="Via: {ReblogParentName}"><l class="fa fa-at"></l></a>
  1384. {/block:RebloggedFrom}
  1385. <!-- tags -->
  1386. {block:HasTags}
  1387. <a href="{Permalink}" title="# {block:Tags}{Tag}, {/block:Tags}"><l class="fa fa-tag"></l></a>
  1388. {/block:HasTags}
  1389. <!-- reblog and like -->
  1390. <a href="{ReblogURL}" title="Reblog"><l class="fa fa-refresh"></l></a>
  1391. <div id="like" title="like">{LikeButton size="30"}</div>
  1392.  
  1393. </div>
  1394. {/block:IndexPage}
  1395. {/block:IfPostendingSymbolsForIndexpage}
  1396.  
  1397. <!------------- If NO Symbols for Index Page ------------->
  1398. {block:IfNotPostendingSymbolsForIndexpage}
  1399. {block:IndexPage}
  1400. {block:Date}<div id="postending">
  1401.  
  1402. <!-- date posted -->
  1403. <a href="{Permalink}">{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}</a>
  1404. <!-- notes counter -->
  1405. {block:NoteCount}
  1406. || {NoteCountWithLabel}
  1407. {/block:NoteCount}
  1408. <!-- reblogged from -->
  1409. {block:RebloggedFrom}<br>
  1410. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1411. {/block:RebloggedFrom}
  1412. <!-- original poster -->
  1413. {block:ContentSource}
  1414. || Source: <a href="{SourceURL}">{SourceTitle}</a>
  1415. {/block:ContentSource}
  1416. <!-- tags -->
  1417. {block:HasTags}<br><div style="padding:0px 20px 0px 20px">
  1418. Tags: {block:Tags}<a href="{TagURL}">{Tag}</a>, {/block:Tags}
  1419. </div>{/block:HasTags}
  1420.  
  1421. </div>{/block:Date}
  1422. {/block:IndexPage}
  1423. {/block:IfNotPostendingSymbolsForIndexpage}
  1424.  
  1425. </div> <!-- ending div tag for "posts" -->
  1426.  
  1427. {/block:Posts}
  1428.  
  1429. <!------------------------------- PERMALINK -------------------------------->
  1430.  
  1431. {block:PostNotes}
  1432. <div id="permalink">
  1433. <div id="notescontainer">{PostNotes}</div>
  1434. </div>
  1435. {/block:PostNotes}
  1436.  
  1437. </div> <!-- ending div tag for "entries" --><script>
  1438. /* questions? ask oddhour.tumblr.com */
  1439. var updatePhotosetCss = "<style id='updatePhotosetStyle'> .photoset .photoset_row.photoset_row_1 img { max-width: 540px; } .photoset .photoset_row.photoset_row_1 { margin-top:5px; } .photoset .photoset_row.photoset_row_2 img { max-width: 268px; } .photoset .photoset_row.photoset_row_2 { margin-top:5px; } .photoset .photoset_row.photoset_row_3 img { max-width: 177px; } .photoset .photoset_row.photoset_row_3 { margin-top:5px; } .photoset .photoset_row { text-align: center; width: 540px; } .photoset .photoset_row .photoset_photo {margin-left:4px;} .photoset { width: 540px; }</style>";
  1440. function updatePhotoset() {
  1441.  
  1442. $(".photoset").each( function (i, e) {
  1443. if($(this.contentDocument).find("#updatePhotosetStyle").size() <= 0)
  1444. $(this.contentDocument).find("head").append(updatePhotosetCss);
  1445. var photoset = $(this.contentDocument).find(".photoset");
  1446. var photosetRows = photoset.find(".photoset_row");
  1447. photoset.find(".photoset_photo")
  1448. .each(function () {
  1449. var hiResSrc = $(this).attr("href");
  1450. var img = $(this).find('img');
  1451. img.attr("src", hiResSrc );
  1452. img.attr("style", "");
  1453. });
  1454. photosetRows.attr("style", "").css("margin-bottom", "-5px");
  1455. photoset.attr("style","");
  1456.  
  1457. $(this).height($(this.contentDocument.body).height());
  1458. });
  1459. }
  1460.  
  1461. updatePhotoset();
  1462.  
  1463. var photosetTimer = setInterval(updatePhotoset, 1500);
  1464. $(window).on('load', function () { setTimeout(function() {clearInterval(photosetTimer)}, 2000); })
  1465. </script>
  1466.  
  1467. </body>
  1468. </html>
Add Comment
Please, Sign In to add comment