API tools faq
paste
Advertisement
foundcas

theme 12: and you love the sea

foundcas
Aug 31st, 2014
349
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-- Don't steal and all that jazz. Any problems just tell me and I'll try to fix it. I honestly don't care if you move the credit or change the styling to suit your tastes, just don't put it on a separate page // capecoding.tumblr.com/ask -->
  5.  
  6. <title>{Title}</title>
  7.  
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12. <!--Default Variables-->
  13.  
  14. <meta name="color:Background" content="#fff">
  15. <meta name="color:Post Background" content="#fff8e5">
  16. <meta name="color:Border" content="#66aaaa">
  17. <meta name="color:Text" content="#444">
  18. <meta name="color:Link" content="#bbccaa">
  19. <meta name="color:Hover" content="#ddcc99"/>
  20. <meta name="color:Scrollbar" content="#ddcc99">
  21. <meta name="color:Selection" content="#66aaaa">
  22. <meta name="color:Selection BG" content="#ddcc99">
  23. <meta name="color:Post Titles" content="#000">
  24. <meta name="color:Ask Text" content="#66aaaa">
  25. <meta name="color:Ask Background" content="#e2e2e2">
  26.  
  27. <meta name="image:Border" content="http://i.imgur.com/5oyBfCV.jpg">
  28.  
  29. <meta name="select:Title Font" name="Parisienne" content="parisienne">
  30. <meta name="select:Title Font" name="Girl Next Door" content="girl next door">
  31. <meta name="select:Title Font" name="La Belle Aurore" content="la belle">
  32. <meta name="select:Title Font" name="Homemade Apple" content="homemade apple">
  33. <meta name="select:Title Font" name="Sacramento" content="sacramento">
  34. <meta name="select:Title Font" name="Seaweed Script" content="seaweed">
  35.  
  36. <meta name="if:Sidebar" content="1">
  37. <meta name="if:Header" content="1">
  38. <meta name="if:Greyscale" content="1">
  39. <meta name="if:ShowStopBullyingLogo" content="1">
  40. <meta name="if:Circle" content="1">
  41. <meta name="if:Text" content="1">
  42. <meta name="if:LowerRoman" content="1">
  43.  
  44. <meta name="if:Link1" content="1">
  45. <meta name="if:Link2" content="1">
  46. <meta name="if:Link3" content="1">
  47.  
  48. <meta name="text:Link 1 URL" content="">
  49. <meta name="text:Link 1" content="">
  50. <meta name="text:Link 2 URL" content="">
  51. <meta name="text:Link 2" content="">
  52. <meta name="text:Link 3 URL" content="">
  53. <meta name="text:Link 3" content="">
  54.  
  55. <link href='http://fonts.googleapis.com/css?family=Parisienne|The+Girl+Next+Door|Homemade+Apple|Sacramento' rel='stylesheet' type='text/css'>
  56.  
  57. <!-- jquery for tooltips-->
  58.  
  59. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  60.  
  61. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  62.  
  63. <script>
  64.  
  65. (function($){
  66.  
  67. $(document).ready(function(){
  68.  
  69. $("a[title]").style_my_tooltips({
  70.  
  71. tip_follows_cursor:true,
  72.  
  73. tip_delay_time:30,
  74.  
  75. tip_fade_speed:300,
  76.  
  77. attribute:"title"
  78.  
  79. });
  80.  
  81. });
  82.  
  83. })(jQuery);
  84.  
  85. </script>
  86.  
  87. <style type="text/css">
  88. .parisienne{
  89. font-family: 'Parisienne', cursive;
  90. }
  91. .girl next door{
  92. font-family: 'The Girl Next Door', cursive;
  93. }
  94. .la belle{
  95. font-family: 'La Belle Aurore', cursive;
  96. }
  97. .homemade apple{
  98. font-family: 'Homemade Apple', cursive;
  99. }
  100. .sacramento{
  101. font-family: 'Sacramento', cursive;
  102. }
  103. .seaweed{
  104. font-family: 'Seaweed Script', cursive;
  105. }
  106.  
  107. #s-m-t-tooltip{
  108. position:absolute;
  109. margin-top: -20px;
  110. z-index:9999;
  111. padding:1px;
  112. color:#fff;
  113. background:url('http://i.imgur.com/5oyBfCV.jpg');
  114. }
  115.  
  116. ::-webkit-scrollbar{
  117. background:none;
  118. width:6px;
  119. }
  120. ::-webkit-scrollbar-thumb{
  121. background:{color:Scrollbar};
  122. border:1px solid #fff;
  123. width:6px;
  124. }
  125. ::selection{
  126. color:{color:Selection};
  127. background:{color:Selection BG};
  128. }
  129.  
  130. /*basics*/
  131. blockquote {
  132. padding:3px 10px;
  133. border-left:1px solid {color:text};
  134. margin-left:10px;
  135. }
  136.  
  137. blockquote img{
  138. max-width:250px;
  139. }
  140.  
  141. body {
  142. background:{color:background};
  143. color:{color:text};
  144. font-family:arial;
  145. font-size:11px;
  146. text-align:justify;
  147. margin:0;
  148. line-height:16px;
  149. word-wrap:break-word;
  150. }
  151.  
  152. pre, code {
  153. padding:10px;
  154. box-sizing:border-box;
  155. -moz-box-sizing:border-box;
  156. webkit-box-sizing:border-box;
  157. display:block;
  158. white-space: pre-wrap;
  159. white-space: -moz-pre-wrap;
  160. white-space: -pre-wrap;
  161. white-space: -o-pre-wrap;
  162. word-wrap: break-word;
  163. width:100%; overflow-x:auto;
  164. background:#eee;
  165. }
  166.  
  167. #l, #r, #t, #b {
  168. background: {color:Border};
  169. position: fixed;
  170. }
  171.  
  172. #l, #r {
  173. top: 0; bottom: 0;
  174. width: 30px;
  175. }
  176. #l { left: 0; }
  177. #r { right: 0; }
  178.  
  179. #t, #b {
  180. left: 0; right: 0;
  181. height: 30px;
  182. }
  183. #t { top: 0; }
  184. #b { bottom: 0; }
  185.  
  186. a{
  187. color:{color:link};
  188. padding:2px;
  189. text-decoration:none;
  190. -webkit-transition: all .8s ease;
  191. -moz-transition: all .8s ease;
  192. -o-transition: all .8s ease;
  193. }
  194.  
  195. a:hover {
  196. border-bottom:1px solid {color:Hover};
  197. box-shadow: inset 0 20px 0 {color:Hover};
  198. color:{color:Text};
  199. -webkit-transition: all .8s ease;
  200. -moz-transition: all .8s ease;
  201. -o-transition: all .8s ease;
  202. }
  203.  
  204. img{
  205. opacity:1;
  206. border:none;
  207. text-decoration:none}
  208.  
  209.  
  210. small {
  211. font-size:9px;}
  212.  
  213. big {
  214. font-size:12px;}
  215.  
  216.  
  217. #title {
  218. font-size:12px;
  219. line-height:18px;
  220. font-weight:bold;
  221. padding:10px;
  222. text-transform:uppercase;
  223. text-align:center;
  224. color:{color:Post Titles};
  225. -webkit-transition: all .8s ease;
  226. -moz-transition: all .8s ease;
  227. -o-transition: all .8s ease;
  228. }
  229.  
  230.  
  231.  
  232. {block:ifSidebar}
  233. /*sidebar*/
  234. #sidebar {
  235. text-align:left;
  236. position:fixed;
  237. margin-left:100px;
  238. margin-top:180px;
  239. width:150px;
  240. text-align:center;
  241. -webkit-transition: all .8s ease;
  242. -moz-transition: all .8s ease;
  243. -o-transition: all .8s ease;
  244. }
  245.  
  246. #blogt {
  247. font-size:18px;
  248. font-weight:bold;
  249. -webkit-transition: all .8s ease;
  250. -moz-transition: all .8s ease;
  251. -o-transition: all .8s ease;
  252. }
  253.  
  254. #sidebar:hover #blogt{
  255. font-family:{select:Title Font};
  256. -webkit-transition: all .8s ease;
  257. -moz-transition: all .8s ease;
  258. -o-transition: all .8s ease;
  259. }
  260. #links {
  261. margin:20px 0px;
  262. }
  263. {block:IfCircle}
  264. #links a {
  265. display:inline-block;
  266. width:10px;
  267. height:10px;
  268. border-radius:100%;
  269. margin-right:5px;
  270. border:1px solid transparent;
  271. background:{color:Link};
  272. -webkit-transition: all .8s ease;
  273. -moz-transition: all .8s ease;
  274. -o-transition: all .8s ease;
  275. }
  276. #links a:hover{
  277. background:{color:Hover};
  278. border:1px solid {color:Border};
  279. -webkit-transition: all .8s ease;
  280. -moz-transition: all .8s ease;
  281. -o-transition: all .8s ease;
  282. }
  283. {/block:IfCircle}
  284.  
  285. {block:IfText}
  286. #links a {
  287. font-size:12px;
  288. display:inline-block;
  289. margin-right:5px;
  290. border-bottom:1px solid transparent;
  291. color:{color:Link};
  292. -webkit-transition: all .8s ease;
  293. -moz-transition: all .8s ease;
  294. -o-transition: all .8s ease;
  295. }
  296. #links a:hover{
  297. box-shadow:none;
  298. color:{color:Hover};
  299. border-bottom:1px solid {color:Border};
  300. -webkit-transition: all .8s ease;
  301. -moz-transition: all .8s ease;
  302. -o-transition: all .8s ease;
  303. }
  304. {/block:IfText}
  305.  
  306. {block:IfLowerRoman}
  307. #links a {
  308. font-size:13px;
  309. display:inline-block;
  310. margin-right:10px;
  311. border-bottom:1px solid transparent;
  312. color:{color:Link};
  313. -webkit-transition: all .8s ease;
  314. -moz-transition: all .8s ease;
  315. -o-transition: all .8s ease;
  316. }
  317. #links a:hover{
  318. box-shadow:none;
  319. border-bottom:1px solid {color:Border};
  320. -webkit-transition: all .8s ease;
  321. -moz-transition: all .8s ease;
  322. -o-transition: all .8s ease;
  323. }
  324. {/block:IfLowerRoman}
  325.  
  326. #description {
  327. margin:-10px -100px;
  328. opacity:0;
  329. width:120;
  330. -webkit-transition: all .8s ease;
  331. -moz-transition: all .8s ease;
  332. -o-transition: all .8s ease;
  333. }
  334. #sidebar:hover #description{
  335. margin:0px 0px;
  336. opacity:1;
  337. -webkit-transition: all .8s ease;
  338. -moz-transition: all .8s ease;
  339. -o-transition: all .8s ease;
  340. }
  341. {/block:ifSidebar}
  342.  
  343. /*pagination*/
  344. #pagination {
  345. position:fixed;
  346. bottom:30px;
  347. width:605px;
  348. padding:9px;
  349. background:{color:Background};
  350. text-transform:lowercase;
  351. font-weight:bold;
  352. text-align:right;
  353. }
  354. #pagination a {
  355. padding:10px;
  356. }
  357.  
  358. #pagination a:hover{
  359. color:{color:Text};
  360. background:{color:Hover};
  361. border:none;
  362. }
  363.  
  364.  
  365.  
  366.  
  367.  
  368. {block:ifHeader}
  369. #top{
  370. margin-top:100px;
  371. margin-left:200px;
  372. height:85px;
  373. width:450px;
  374. -webkit-transition: all .8s ease;
  375. -moz-transition: all .8s ease;
  376. -o-transition: all .8s ease;
  377. }
  378.  
  379. #top:hover #topt{
  380. font-family:{select:Title Font};
  381. margin-left:-220px;
  382. -webkit-transition: all .8s ease;
  383. -moz-transition: all .8s ease;
  384. -o-transition: all .8s ease;
  385. }
  386.  
  387. #topt{
  388. text-align:center;
  389. width:225px;
  390. font-size:20px;
  391. font-weight:bold;
  392. -webkit-transition: all .8s ease;
  393. -moz-transition: all .8s ease;
  394. -o-transition: all .8s ease;
  395. }
  396.  
  397. #hdesc{
  398. width:400px;
  399. height:70px;
  400. overflow-y:auto;
  401. opacity:0;
  402. -webkit-transition: all .8s ease;
  403. -moz-transition: all .8s ease;
  404. -o-transition: all .8s ease;
  405. }
  406. #top:hover #hdesc{
  407. width:250px;
  408. margin-left:165px;
  409. margin-top:-80px;
  410. opacity:1;
  411. -webkit-transition: all .8s ease;
  412. -moz-transition: all .8s ease;
  413. -o-transition: all .8s ease;
  414. }
  415. #hlinks {
  416. margin:15px 0px;
  417. opacity:0;
  418. -webkit-transition: all .8s ease;
  419. -moz-transition: all .8s ease;
  420. -o-transition: all .8s ease;
  421. }
  422. #top:hover #hlinks{
  423. opacity:1;
  424. -webkit-transition: all .8s ease;
  425. -moz-transition: all .8s ease;
  426. -o-transition: all .8s ease;
  427. }
  428. {block:IfCircle}
  429. #hlinks a {
  430. display:inline-block;
  431. width:10px;
  432. height:10px;
  433. border-radius:100%;
  434. margin-right:5px;
  435. border:1px solid transparent;
  436. background:{color:Link};
  437. -webkit-transition: all .8s ease;
  438. -moz-transition: all .8s ease;
  439. -o-transition: all .8s ease;
  440. }
  441. #hlinks a:hover{
  442. background:{color:Hover};
  443. border:1px solid {color:Border};
  444. -webkit-transition: all .8s ease;
  445. -moz-transition: all .8s ease;
  446. -o-transition: all .8s ease;
  447. }
  448. {/block:IfCircle}
  449.  
  450. {block:IfText}
  451. #hlinks a {
  452. font-family:arial;
  453. font-size:12px;
  454. display:inline-block;
  455. margin-right:5px;
  456. border-bottom:1px solid transparent;
  457. color:{color:Link};
  458. -webkit-transition: all .8s ease;
  459. -moz-transition: all .8s ease;
  460. -o-transition: all .8s ease;
  461. }
  462. #hlinks a:hover{
  463. box-shadow:none;
  464. color:{color:Hover};
  465. border-bottom:1px solid {color:Border};
  466. -webkit-transition: all .8s ease;
  467. -moz-transition: all .8s ease;
  468. -o-transition: all .8s ease;
  469. }
  470. {/block:IfText}
  471.  
  472. {block:IfLowerRoman}
  473. #hlinks a {
  474. font-family:arial;
  475. font-size:13px;
  476. display:inline-block;
  477. margin-right:10px;
  478. border-bottom:1px solid transparent;
  479. color:{color:Link};
  480. -webkit-transition: all .8s ease;
  481. -moz-transition: all .8s ease;
  482. -o-transition: all .8s ease;
  483. }
  484. #hlinks a:hover{
  485. box-shadow:none;
  486. color:{color:Hover};
  487. border-bottom:1px solid {color:Border};
  488. -webkit-transition: all .8s ease;
  489. -moz-transition: all .8s ease;
  490. -o-transition: all .8s ease;
  491. }
  492. {/block:IfLowerRoman}
  493. {/block:ifHeader}
  494.  
  495.  
  496.  
  497.  
  498.  
  499.  
  500. /*posts*/
  501.  
  502. #entries {
  503. margin-top:90px;
  504. margin-left:300px;
  505. width:530px;
  506. }
  507.  
  508.  
  509.  
  510. #posts {
  511. width:500px;
  512. {block:IndexPage}
  513. margin-bottom:75px;
  514. {/block:IndexPage}
  515. {block:PermalinkPage}
  516. margin-bottom:50px;
  517. {/block:PermalinkPage}
  518. padding:30px;
  519. background:#fff;
  520. border:30px solid transparent;
  521. border-image: url('{image:Border}') 30 30 round;
  522. {block:ifGreyscale}
  523. -webkit-filter:grayscale(1);
  524. {/block:ifGreyscale}
  525. -webkit-transition: all .8s ease;
  526. -moz-transition: all .8s ease;
  527. -o-transition: all .8s ease;
  528. }
  529. {block:ifGreyscale}
  530. #posts:hover{
  531. -webkit-filter:grayscale(0);
  532. box-shadow: inset 560px 0 0 {color:Post Background};
  533. }
  534. {/block:ifGreyscale}
  535. #posts:hover{
  536. box-shadow: inset 560px 0 0 {color:Post Background};
  537. -webkit-transition: all .8s ease;
  538. -moz-transition: all .8s ease;
  539. -o-transition: all .8s ease;
  540. }
  541. #posts img {
  542. max-width:500px;
  543. }
  544.  
  545. #posts img, #posts li, #posts blockquote {
  546. max-width: 100%;
  547. }
  548. .caption {
  549. width:100%;
  550. margin-top:10px;
  551. }
  552.  
  553. /*quote*/
  554.  
  555. #titlequote{text-align:left;
  556. font-size:14px;
  557. line-height:18px;
  558. font-weight:bold;
  559. }
  560. #source {
  561. margin-top:15px;
  562. margin-left:15px;}
  563.  
  564. /*audio*/
  565.  
  566. .player {
  567. width:25px;
  568. height:25px;
  569. overflow:hidden;
  570. position:absolute;
  571. background:white;}
  572.  
  573. .audioinfo {
  574. margin-left:50px;
  575. }
  576.  
  577.  
  578. /*asks*/
  579. .q {
  580. padding:0px;
  581. font-style:italic;
  582. -webkit-transition: all .8s ease;
  583. -moz-transition: all .8s ease;
  584. -o-transition: all .8s ease;
  585. }
  586. .q:hover a{
  587. color:{color:Ask Text};
  588. }
  589. .q:hover{
  590. padding:10px;
  591. color:{color:Ask Text};
  592. background:{color:Ask Background};
  593. -webkit-transition: all .8s ease;
  594. -moz-transition: all .8s ease;
  595. -o-transition: all .8s ease;
  596. }
  597. .as {
  598. font-weight:bold;
  599. font-style:none;
  600. }
  601.  
  602. .a {
  603. margin-top:10px;
  604. }
  605.  
  606.  
  607. /*chat*/
  608.  
  609. .chat ol {
  610. padding:0;
  611. list-style:none;
  612. }
  613. .chat li{
  614. margin-top:4px;
  615. padding:3px;
  616. border:1px solid transparent;
  617. -webkit-transition: all .8s ease;
  618. -moz-transition: all .8s ease;
  619. -o-transition: all .8s ease;
  620. }
  621. .chat:hover li{
  622. border:1px solid {color:Border};
  623. -webkit-transition: all .8s ease;
  624. -moz-transition: all .8s ease;
  625. -o-transition: all .8s ease;
  626. }
  627. .line {padding:5px 0;}
  628.  
  629. .label {font-weight:bold;
  630. }
  631.  
  632.  
  633.  
  634.  
  635.  
  636. /*permalink and notes*/
  637.  
  638. #permalink {
  639. margin-top:15px;
  640. font-size:10px;
  641. text-transform:uppercase;
  642. }
  643. #permalink a {margin-right:10px;
  644. }
  645.  
  646.  
  647. .tags {
  648. text-transform:lowercase;
  649. word-break:break-all;
  650. font-size:10px;
  651. padding-top:3px;
  652. {block:IndexPage}
  653. margin-top:-50px;
  654. opacity:0;
  655. {/block:IndexPage}
  656. -webkit-transition: all .8s ease;
  657. -moz-transition: all .8s ease;
  658. -o-transition: all .8s ease;
  659. }
  660.  
  661. #posts:hover .tags{
  662. {block:IndexPage}
  663. margin-top:0px;
  664. opacity:1;
  665. {/block:IndexPage}
  666. -webkit-transition: all .8s ease;
  667. -moz-transition: all .8s ease;
  668. -o-transition: all .8s ease;
  669. }
  670.  
  671. .pagenotes {
  672. {block:IndexPage}
  673. display: none;
  674. {/block:IndexPage}
  675. width:400px;
  676. text-align:left;
  677.  
  678. }
  679. .pagenotes img {
  680. display:none
  681. }
  682.  
  683. .pagenotes li {
  684. list-style-type:none;
  685. padding:5px 0px;
  686. text-align:left;
  687. margin:0 0 0 -40px;
  688. }
  689.  
  690. /*UPDATES TAB*/
  691. #lostatsea {
  692. width:150px;
  693. height:90px;
  694. margin-top:150px;
  695. position:fixed;
  696. font-size:10px;
  697. margin-left:1100px;
  698. z-index:9999;
  699. }
  700.  
  701. #update1,#update2,#update3,#update4,#update5,#update6{
  702. z-index:9999;
  703. }
  704.  
  705. .updatetitle {
  706. letter-spacing:1px;
  707. font-size:14px;
  708. padding:2px;
  709. color:#fff;
  710. font-family:{select:Title Font};
  711. background:#66aaaa;
  712. -moz-transition-duration:0.7s;
  713. -webkit-transition-duration:0.7s;
  714. -o-transition-duration:0.7s;
  715.  
  716. }
  717.  
  718. #update1 {
  719. height:15px;
  720. width:15px;
  721. margin-bottom:5px;
  722. background:#66aaaa;
  723. }
  724.  
  725. #update1:hover .updatesinfo1{
  726. height:140px; /*--change the length of your updates text here--*/
  727. opacity:1;
  728. -moz-transition-duration:0.7s;
  729. -webkit-transition-duration:0.7s;
  730. -o-transition-duration:0.7s;
  731. }
  732.  
  733. #update1:hover{
  734. border-radius:100%;
  735. -ms-transform:rotate(360deg);
  736. -webkit-transform:rotate(360deg);
  737. transform:rotate(360deg);
  738. -moz-transition-duration:0.7s;
  739. -webkit-transition-duration:0.7s;
  740. -o-transition-duration:0.7s;
  741. }
  742.  
  743. .updatesinfo1 {
  744. margin-left:40px;
  745. width:130px;
  746. height:10px;
  747. opacity:0;
  748. position:fixed;
  749. overflow:hidden;
  750. -moz-transition-duration:1.7s;
  751. -webkit-transition-duration:1.7s;
  752. -o-transition-duration:1.7s;
  753. }
  754.  
  755. #update2 {
  756. height:15px;
  757. width:15px;
  758. margin-bottom:5px;
  759. background:#66aaaa;
  760. }
  761.  
  762. #update2:hover .updatesinfo2{
  763. height:40px; /*--change the length of your updates text here--*/
  764. opacity:1;
  765. -moz-transition-duration:0.7s;
  766. -webkit-transition-duration:0.7s;
  767. -o-transition-duration:0.7s;
  768. }
  769.  
  770. #update2:hover{
  771. border-radius:100%;
  772. -ms-transform:rotate(-360deg);
  773. -webkit-transform:rotate(-360deg);
  774. transform:rotate(-360deg);
  775. -moz-transition-duration:0.7s;
  776. -webkit-transition-duration:0.7s;
  777. -o-transition-duration:0.7s;
  778. }
  779.  
  780. .updatesinfo2 {
  781. margin-left:-150px;
  782. width:125px;
  783. height:10px;
  784. opacity:0;
  785. position:fixed;
  786. overflow:hidden;
  787. text-align:right;
  788. -moz-transition-duration:1.7s;
  789. -webkit-transition-duration:1.7s;
  790. -o-transition-duration:1.7s;
  791. }
  792.  
  793. #update3 {
  794. height:15px;
  795. width:15px;
  796. margin-bottom:5px;
  797. background:#66aaaa;
  798. }
  799.  
  800. #update3:hover .updatesinfo3{
  801. opacity:1;
  802. height:110px; /*--change the length of your updates text here--*/
  803. -moz-transition-duration:0.7s;
  804. -webkit-transition-duration:0.7s;
  805. -o-transition-duration:0.7s;
  806. }
  807.  
  808. #update3:hover{
  809. border-radius:100%;
  810. -ms-transform:rotate(360deg);
  811. -webkit-transform:rotate(360deg);
  812. transform:rotate(360deg);
  813. -moz-transition-duration:0.7s;
  814. -webkit-transition-duration:0.7s;
  815. -o-transition-duration:0.7s;
  816. }
  817.  
  818. .updatesinfo3 {
  819. margin-left:40px;
  820. width:125px;
  821. height:1px;
  822. opacity:0;
  823. position:fixed;
  824. overflow:hidden;
  825. -moz-transition-duration:1.7s;
  826. -webkit-transition-duration:1.7s;
  827. -o-transition-duration:1.7s;
  828. }
  829.  
  830. #update4 {
  831. height:15px;
  832. width:15px;
  833. margin-bottom:5px;
  834. background:#66aaaa;
  835. }
  836.  
  837. #update4:hover .updatesinfo4{
  838. opacity:1;
  839. height:50px; /*--change the length of your updates text here--*/
  840. -moz-transition-duration:0.7s;
  841. -webkit-transition-duration:0.7s;
  842. -o-transition-duration:0.7s;
  843. }
  844.  
  845. #update4:hover{
  846. border-radius:100%;
  847. -ms-transform:rotate(-360deg);
  848. -webkit-transform:rotate(-360deg);
  849. transform:rotate(-360deg);
  850. -moz-transition-duration:0.7s;
  851. -webkit-transition-duration:0.7s;
  852. -o-transition-duration:0.7s;
  853. }
  854.  
  855. .updatesinfo4 {
  856. margin-left:-150px;
  857. width:125px;
  858. height:1px;
  859. opacity:0;
  860. position:fixed;
  861. overflow:hidden;
  862. text-align:right;
  863. -moz-transition-duration:1.7s;
  864. -webkit-transition-duration:1.7s;
  865. -o-transition-duration:1.7s;
  866. }
  867. #update5 {
  868. height:15px;
  869. width:15px;
  870. margin-bottom:5px;
  871. background:#66aaaa;
  872. }
  873.  
  874. #update5:hover .updatesinfo5{
  875. opacity:1;
  876. height:50px; /*--change the length of your updates text here--*/
  877. -moz-transition-duration:0.7s;
  878. -webkit-transition-duration:0.7s;
  879. -o-transition-duration:0.7s;
  880. }
  881.  
  882. #update5:hover{
  883. border-radius:100%;
  884. -ms-transform:rotate(360deg);
  885. -webkit-transform:rotate(360deg);
  886. transform:rotate(360deg);
  887. -moz-transition-duration:0.7s;
  888. -webkit-transition-duration:0.7s;
  889. -o-transition-duration:0.7s;
  890. }
  891.  
  892. .updatesinfo5 {
  893. margin-left:40px;
  894. width:125px;
  895. height:1px;
  896. opacity:0;
  897. position:fixed;
  898. overflow:hidden;
  899. -moz-transition-duration:1.7s;
  900. -webkit-transition-duration:1.7s;
  901. -o-transition-duration:1.7s;
  902. }
  903. #update6 {
  904. height:15px;
  905. width:15px;
  906. margin-bottom:5px;
  907. background:#66aaaa;
  908. }
  909.  
  910. #update6:hover .updatesinfo6{
  911. opacity:1;
  912. height:120px; /*--change the length of your updates text here--*/
  913. -moz-transition-duration:0.7s;
  914. -webkit-transition-duration:0.7s;
  915. -o-transition-duration:0.7s;
  916. }
  917.  
  918. #update6:hover{
  919. border-radius:100%;
  920. -ms-transform:rotate(-360deg);
  921. -webkit-transform:rotate(-360deg);
  922. transform:rotate(-360deg);
  923. -moz-transition-duration:0.7s;
  924. -webkit-transition-duration:0.7s;
  925. -o-transition-duration:0.7s;
  926. }
  927.  
  928. .updatesinfo6 {
  929. margin-left:-150px;
  930. width:125px;
  931. height:1px;
  932. opacity:0;
  933. position:fixed;
  934. overflow:hidden;
  935. text-align:right;
  936. -moz-transition-duration:1.7s;
  937. -webkit-transition-duration:1.7s;
  938. -o-transition-duration:1.7s;
  939. }
  940.  
  941.  
  942. /*CREDIT*/
  943. #credit {
  944. right:10px;
  945. bottom:10px;
  946. font-size:12px;
  947. text-transform:uppercase;
  948. text-align:center;
  949. position:fixed;
  950. padding:5px;
  951. -webkit-transition: all 0.8s ease;
  952. -moz-transition: all 0.8s ease;
  953. -o-transition: all 0.8s ease;
  954. }
  955.  
  956. #credit a:hover {
  957. -webkit-transition: all 0.8s ease;
  958. -moz-transition: all 0.8s ease;
  959. -o-transition: all 0.8s ease;
  960. color:#444;
  961. border-radius:100%;
  962. }
  963. {CustomCSS}
  964.  
  965.  
  966. </style>
  967.  
  968.  
  969.  
  970. </head>
  971.  
  972. <body>
  973.  
  974.  
  975.  
  976.  
  977.  
  978.  
  979.  
  980. <div id="lostatsea">
  981.  
  982. <div id="update1">
  983. <div class="updatesinfo1">
  984.  
  985. <div class="updatetitle">title<br></div>
  986.  
  987. put your updates here
  988.  
  989. </div>
  990. </div>
  991.  
  992. <div id="update2">
  993. <div class="updatesinfo2">
  994.  
  995. <div class="updatetitle">title<br></div>
  996.  
  997. put your updates here
  998.  
  999. </div>
  1000. </div>
  1001.  
  1002. <div id="update3">
  1003. <div class="updatesinfo3">
  1004.  
  1005. <div class="updatetitle">title<br></div>
  1006.  
  1007. put your updates here
  1008.  
  1009. </div>
  1010. </div>
  1011.  
  1012. <div id="update4">
  1013.  
  1014. <div class="updatesinfo4">
  1015.  
  1016. <div class="updatetitle">title<br></div>
  1017.  
  1018. put your updates here
  1019.  
  1020. </div>
  1021. </div>
  1022.  
  1023. <div id="update5">
  1024.  
  1025. <div class="updatesinfo5">
  1026.  
  1027. <div class="updatetitle">title<br></div>
  1028.  
  1029. put your updates here
  1030.  
  1031. </div>
  1032. </div>
  1033.  
  1034. <div id="update6">
  1035.  
  1036. <div class="updatesinfo6">
  1037.  
  1038. <div class="updatetitle">title<br></div>
  1039.  
  1040. put your updates here
  1041.  
  1042. </div>
  1043. </div>
  1044.  
  1045. </div>
  1046. </div>
  1047.  
  1048.  
  1049.  
  1050.  
  1051.  
  1052. {block:ifSidebar}
  1053. <div id="sidebar">
  1054. <div id="blogt">{Title}</div>
  1055. <div id="links">
  1056. {block:IfCircle}
  1057. <a title="home" href="/"></a>
  1058. <a title="inquire" href="/msg"></a>
  1059. {block:ifLink1}<a title="{text:Link 1}" href="{text:Link 1 URL}"></a>{/block:ifLink1}
  1060. {block:ifLink2}<a title="{text:Link 2}" href="{text:Link 2 URL}" ></a>{/block:ifLink2}
  1061. {block:ifLink3}<a title="{text:Link 3}" href="{text:Link 3 URL}"></a> {/block:ifLink3}
  1062. {block:HasPages}{block:Pages}<a title="{Label}" href="{URL}"></a>{/block:Pages}{block:HasPages}
  1063. {/block:IfCircle}
  1064.  
  1065. {block:IfText}
  1066. <a href="/">home</a>
  1067. <a href="/ask">ask</a>
  1068. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  1069. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  1070. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  1071. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{block:HasPages}
  1072. {/block:IfText}
  1073.  
  1074. {block:IfLowerRoman}
  1075. <a title="home" href="/">i</a>
  1076. <a title="inquire" href="/ask">ii</a>
  1077. {block:ifLink1}<a title="{text:Link 1}" href="{text:Link 1 URL}">iii</a>{/block:ifLink1}
  1078. {block:ifLink2}<a title="{text:Link 2}" href="{text:Link 2 URL}" >iv</a>{/block:ifLink2}
  1079. {block:ifLink3}<a title="{text:Link 3}" href="{text:Link 3 URL}">v</a> {/block:ifLink3}
  1080. {/block:IfLowerRoman}
  1081. </div>
  1082. <div id="description">{Description}</div>
  1083. </div>
  1084. {/block:ifSidebar}
  1085.  
  1086.  
  1087.  
  1088.  
  1089.  
  1090.  
  1091.  
  1092.  
  1093.  
  1094.  
  1095. <div id="entries">
  1096.  
  1097.  
  1098.  
  1099. {block:ifHeader}
  1100. <div id="top">
  1101.  
  1102.  
  1103. <div id="topt">{Title}
  1104.  
  1105.  
  1106.  
  1107. <div id="hlinks">
  1108. {block:IfCircle}
  1109. <a title="home" href="/"></a>
  1110. <a title="inquire" href="/msg"></a>
  1111. {block:ifLink1}<a title="{text:Link 1}" href="{text:Link 1 URL}"></a>{/block:ifLink1}
  1112. {block:ifLink2}<a title="{text:Link 2}" href="{text:Link 2 URL}" ></a>{/block:ifLink2}
  1113. {block:ifLink3}<a title="{text:Link 3}" href="{text:Link 3 URL}"></a> {/block:ifLink3}
  1114. {block:HasPages}{block:Pages}<a title="{Label}" href="{URL}"></a>{/block:Pages}{block:HasPages}
  1115. {/block:IfCircle}
  1116.  
  1117. {block:IfText}
  1118. <a href="/">home</a>
  1119. <a href="/ask">ask</a>
  1120. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  1121. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  1122. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  1123. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{block:HasPages}
  1124. {/block:IfText}
  1125.  
  1126. {block:IfLowerRoman}
  1127. <a title="home" href="/">i</a>
  1128. <a title="message" href="/ask">ii</a>
  1129. {block:ifLink1}<a title="{text:Link 1}" href="{text:Link 1 URL}">iii</a>{/block:ifLink1}
  1130. {block:ifLink2}<a title="{text:Link 2}" href="{text:Link 2 URL}" >iv</a>{/block:ifLink2}
  1131. {block:ifLink3}<a title="{text:Link 3}" href="{text:Link 3 URL}">v</a> {/block:ifLink3}
  1132. {/block:IfLowerRoman}
  1133. </div>
  1134.  
  1135. </div>
  1136.  
  1137. <div id="hdesc">{Description}</div>
  1138.  
  1139.  
  1140. </div>
  1141. {/block:ifHeader}
  1142.  
  1143.  
  1144.  
  1145.  
  1146. {block:Posts}
  1147. <div id="posts">
  1148.  
  1149.  
  1150. {block:Quote}
  1151.  
  1152.  
  1153. <div id="titlequote">“{Quote}”</div>
  1154. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  1155. {/block:Quote}
  1156.  
  1157.  
  1158.  
  1159. {block:Text}
  1160.  
  1161. {block:Title}
  1162. <div id="title">{Title}</div>{/block:Title}
  1163. {Body}
  1164. {/block:Text}
  1165.  
  1166. {block:Link}
  1167. <div id="title"><center><a href="{URL}">{Name}</a></center></div>{block:Description}{Description}{/block:Description}
  1168. {/block:Link}
  1169.  
  1170. {block:Chat}
  1171. {block:Title}
  1172. <h1>{Title}</h1>
  1173. {/block:Title}
  1174. <div class="chat">
  1175. <ol>{block:Lines}
  1176. <li class="line {Alt}">
  1177. {block:Label}
  1178. <span class="label">
  1179. {Label}</span>
  1180. {/block:Label}{Line}</li>
  1181. {/block:Lines}
  1182. </ol></div>
  1183. {/block:Chat}
  1184.  
  1185. {block:Photo}
  1186. <center>
  1187. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
  1188. {/block:Photo}
  1189.  
  1190. {block:Photoset}
  1191. {Photoset-500}
  1192. {/block:Photoset}
  1193.  
  1194. {block:Video}
  1195. {Video-500}
  1196. {/block:Video}
  1197.  
  1198. {block:Audio}
  1199. <div class="player">{AudioPlayerWhite}</div>
  1200. <div class="audioinfo">
  1201. {block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}
  1202. </div>
  1203. {/block:Audio}
  1204.  
  1205. {block:Answer}
  1206. <div class="q">
  1207. <div class="as">{Asker}: “{Question}”</div>
  1208. </div>
  1209. <div class="a">{Answer}</div>
  1210. {/block:Answer}
  1211.  
  1212. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1213.  
  1214. {block:Date}
  1215. <div id="permalink">
  1216. <a title="{TimeAgo}" href="{Permalink}">{12Hour}:{Minutes} {AmPm}</a>
  1217. <a style="float:right" href="{ReblogURL}">reblog</a>
  1218. {block:PermalinkPage}{block:NoteCount}<a href="{Permalink}">+ {NoteCount}</a>{/block:NoteCount}{block:RebloggedFrom}<a href="{ReblogParentURL}" title="via: {ReblogParentName}">♦♦♦</a>{block:ContentSource}<a href="{ReblogRootURL}" title="source: {ReblogRootName}">♦♦♦</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}
  1219.  
  1220. {block:HasTags}<div class="tags">stored under → {block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1221. </div>
  1222. {/block:Date}
  1223.  
  1224.  
  1225.  
  1226. </div>
  1227.  
  1228.  
  1229. {block:PostNotes}
  1230. <div class="pagenotes">
  1231. {PostNotes}
  1232. </div>
  1233. {/block:PostNotes}
  1234.  
  1235.  
  1236. {/block:Posts}
  1237.  
  1238. <div id="pagination">
  1239. {block:Pagination}
  1240. {block:PreviousPage}
  1241. <a href="{PreviousPage}">&larr; previous </a>
  1242. {/block:PreviousPage}
  1243.  
  1244. {block:JumpPagination length="5"}
  1245. {block:CurrentPage}<a href="{URL}">{PageNumber}</a>{/block:CurrentPage}
  1246. {block:JumpPage}<a class="jump2" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1247. {/block:JumpPagination}
  1248.  
  1249. {block:NextPage}
  1250. <a href="{NextPage}">next &rarr;</a>
  1251. {/block:NextPage}
  1252. {/block:Pagination}
  1253. </div>
  1254.  
  1255.  
  1256.  
  1257.  
  1258. </div>
  1259.  
  1260.  
  1261. {block:ContentSource}
  1262. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1263. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1264. {/block:SourceLogo}
  1265. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1266. {/block:ContentSource}
  1267. <div id="l"></div>
  1268. <div id="r"></div>
  1269. <div id="t"></div>
  1270. <div id="b"></div>
  1271.  
  1272. {block:IfShowStopBullyingLogo}
  1273. <div style="bottom:30px; left:30px; width:auto; height:auto; position:fixed; display:block; z-index:9999999; background-color:transparent"><a href="http://stop-bullies.tumblr.com"><img src=" http://i43.tinypic.com/2w585e1.png" width="90"></div>
  1274. {/block:IfShowStopBullyingLogo}
  1275.  
  1276. <div id="credit"><a title="by foundcas" href="http://foundcas.tumblr.com">fc</a></div>
  1277.  
  1278. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!