Advertisement
MusicalSpiritA7x

Peter Pan Back Up

Feb 11th, 2016
167
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.09 KB | None | 0 0
  1. <style type="text/css">
  2. @import url(http://fonts.googleapis.com/css?family=Raleway:400,900|Oswald|Dynalight|Roboto+Condensed:400,700|Lato:300,400,700|Ruthie);
  3.  
  4. /* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
  5. /* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
  6.  
  7. .vicarious { Structure }
  8.  
  9. body{
  10. width:100%;
  11. height:100%;
  12. padding:0px;
  13. margin:0px;
  14. background-color:000000;
  15. background-image:url(http://i62.tinypic.com/2lvl8gw.jpg);
  16. background-position:center center;
  17. background-attachment:fixed;
  18. background-repeat:repeat;
  19. }
  20.  
  21. table, tr, td {background-color:transparent; display:inline-block;}
  22.  
  23. .vicarious{ Google Chrome Scrollbar }
  24.  
  25. ::-webkit-scrollbar {width: 10px;}
  26. ::-webkit-scrollbar-track { border: 1px solid #000000; background-color:transparent; }
  27. ::-webkit-scrollbar-thumb { border: 1px solid #000000; background-color:000000 }
  28.  
  29.  
  30. .vicarious { GENERAL TEXT }
  31.  
  32. a, b, i, p, table, tr, td, li, div, .text, .btext {
  33. font-family:calibri;
  34. font-size:7.5pt;
  35. line-height:95%;
  36. color: 04B431;
  37. padding:0px;
  38. margin:0px;
  39. text-decoration:none;
  40. text-transform:none;
  41. word-spacing:-1px;
  42. }
  43.  
  44. a { display:block; }
  45.  
  46. p {
  47. text-align:justify;
  48. margin-top: 5px;
  49. text-indent:3px;
  50. }
  51.  
  52. p:first-line {
  53. font-weight:bold; }
  54.  
  55. p:first-letter {
  56. font-size: 10pt;
  57. font-family: 'Ruthie', cursive;
  58. padding-left:5px;
  59. }
  60.  
  61. b {
  62. font-size:10pt;
  63. text-transform:uppercase;
  64. font-family: 'Roboto Condensed', sans-serif;
  65. color: FF0000;
  66. }
  67.  
  68. i {
  69. font-size:10pt;
  70. color: 04B431;
  71. font-family: 'Dynalight', cursive;
  72. }
  73.  
  74. .u, u {
  75. color: FF0000;
  76. text-decoration:underline;
  77. }
  78.  
  79. .strike, strike {
  80. color: 04B431;
  81. text-decoration:line-through;
  82. letter-spacing:1pt;
  83. }
  84.  
  85. .strong, strong {
  86. font-family:courier new;
  87. font-size: 9pt;
  88. text-transform:uppercase;
  89. color: FF0000;
  90. font-weight:900;
  91. }
  92.  
  93. em {
  94. font-family:brush script mt;
  95. font-size:11pt;
  96. color: 04B431;
  97. }
  98.  
  99. .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .one, one, .two, two, .three, three, .lyric, lyric, .lyric2, lyric2, .lyric3, lyric3, .lyric4, lyric4, .lyric5, lyric5, .lyric6, lyric6, .lyric7, lyric7, small, big {
  100. padding:0px;
  101. margin:0px;
  102. line-height:auto;
  103. }
  104.  
  105. .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .one, one, .two, two, .three, three {
  106. display:block;
  107. }
  108.  
  109. big {
  110. font-size:36pt;
  111. text-transform:uppercase;
  112. font-family: 'Dynalight', cursive;
  113. }
  114.  
  115. .cite {font-size:0px; color:transparent;display:block; height:0px;}
  116.  
  117.  
  118. p {text-align:justify;}
  119.  
  120.  
  121. .vicarious{ Div Commons }
  122.  
  123. /* MAIN ATTRIBUTES SHARED BY DIVS FROM VARIOUS SECTIONS */
  124.  
  125.  
  126.  
  127. /* Background X mark images for Divs ( Same as profile body background ) */
  128.  
  129. #SIDEBAR #default, .pic .mask, .stats .block, .m11 .bae, .m22 .mask {
  130. background-image:url(http://i62.tinypic.com/2lvl8gw.jpg);
  131. background-position:center center;
  132. background-repeat:repeat;
  133. }
  134.  
  135. #MAIN1, #MAIN2, #LINX, #SIDEBAR, #LINE1, #LINE2, #LINE3 {
  136. visibility:visible;
  137. top:0%;
  138. left:50%;
  139. z-index:2;
  140. overflow:hidden;
  141. }
  142.  
  143. #MAIN1, #MAIN2 { position:absolute; }
  144.  
  145. #LINX, #SIDEBAR, #LINE1, #LINE2, #LINE3 {position:fixed;}
  146. #LINX, #SIDEBAR, #MAIN2 {background-color:transparent; }
  147.  
  148.  
  149. .vicarious{ Divs }
  150.  
  151.  
  152. /* SIDEBAR */
  153.  
  154. #SIDEBAR #default, #SIDEBAR:hover #default, #SIDEBAR #info, #SIDEBAR:hover #info {
  155. -webkit-transition: all .6s ease 1s;
  156. -moz-transition: all .6s ease 1s;
  157. -o-transition: all .6s ease 1s;
  158. -ms-transition: all .6s ease 1s;
  159. transition: all .6s ease 1s;
  160. }
  161.  
  162. #sidebar #namefield, #SIDEBAR #lower {
  163. transition:All .6s linear 0s;
  164. -webkit-transition:All .6s linear 0s;
  165. -moz-transition:All .6s linear 0s;
  166. -o-transition:All .6s linear 0s;
  167. -ms-transition: all .6s ease 0s;
  168. }
  169.  
  170. #SIDEBAR {
  171. margin-top:0px;
  172. margin-left:-575px;
  173. padding:0px;
  174. width:310px;
  175. height:100%;
  176. }
  177.  
  178. #SIDEBAR #default {
  179. position:absolute;
  180. overflow:hidden;
  181. margin-left:0px;
  182. margin-top:100px;
  183. z-index:3;
  184. padding:0px;
  185. width:300px;
  186. height:400px;
  187. padding:0px;
  188. background-color:000000 ;
  189. border:5px solid #000000;
  190. }
  191.  
  192. #SIDEBAR:hover #default {
  193. opacity:0;
  194. }
  195.  
  196. #default img {
  197. overflow:hidden;
  198. margin:5px;
  199. width:280px;
  200. height:380px;
  201. border:5px solid #966c7f;
  202. }
  203.  
  204. #SIDEBAR #info {
  205. position:absolute;
  206. overflow:hidden;
  207. margin-left:0px;
  208. margin-top:100px;
  209. z-index:3;
  210. padding:0px;
  211. width:300px;
  212. height:400px;
  213. opacity:0;
  214. background-color:000000;
  215. border:5px solid #000000;
  216. }
  217.  
  218. #SIDEBAR:hover #info {
  219. opacity:1;
  220. }
  221.  
  222. #info .textbox {
  223. position:absolute;
  224. height:250px;
  225. width:250px;
  226. overflow:auto;
  227. margin-top:0px;
  228. margin-left:20px;
  229. padding:5px;
  230. opacity:0;
  231. background-color: 000000(000000);
  232. transition:All .6s linear 0s;
  233. -webkit-transition:All .6s linear 0s;
  234. -moz-transition:All .6s linear 0s;
  235. -o-transition:All .6s linear 0s;
  236. -ms-transition: all .6s ease 0s;
  237. }
  238.  
  239. #SIDEBAR:hover .textbox {
  240. opacity:1;
  241. margin-top:20px;
  242. transition:All 1.6s linear 3.6s;
  243. -webkit-transition:All 1.6s linear 3.6s;
  244. -moz-transition:All 1.6s linear 3.6s;
  245. -o-transition:All 1.6s linear 3.6s;
  246. -ms-transition: all 1.6s ease 3.6s;
  247. }
  248.  
  249. #SIDEBAR .h1, #SIDEBAR h1 {
  250. margin:10px 0px;
  251. background-color: 000000;
  252. font-size:14pt;
  253. font-family: 'Oswald', sans-serif;
  254. font-weight:700;
  255. font-style:italic;
  256. text-align:center;
  257. padding:0px 10px;
  258. text-transform:none;
  259. line-height:60%;
  260. color:eed5ba;
  261. }
  262.  
  263.  
  264. #info .contact {
  265. position:absolute;
  266. overflow:hidden;
  267. margin-top:305px;
  268. margin-left:5px;
  269. height:25px;
  270. width:280px;
  271. padding:0px 5px;
  272. opacity:0;
  273. color:04B431;
  274. background-color: 000000;
  275. font-size:9pt;
  276. line-height:25px;
  277. font-family: 'Oswald', sans-serif;
  278. display:block;
  279. text-align:center;
  280. text-transform:none;
  281. transition:All .2s linear 0s;
  282. -webkit-transition:All .2s linear 0s;
  283. -moz-transition:All .2s linear 0s;
  284. -o-transition:All .2s linear 0s;
  285. -ms-transition: all .2s ease 0s;
  286. }
  287.  
  288. #SIDEBAR:hover .contact{
  289. opacity:1;
  290. margin-top:365px;
  291. transition:All 1.6s linear 4s;
  292. -webkit-transition:All 1.6s linear 4s;
  293. -moz-transition:All 1.6s linear 4s;
  294. -o-transition:All 1.6s linear 4s;
  295. -ms-transition: all 1.6s ease 4s;
  296. }
  297.  
  298.  
  299. #sidebar #namefield {
  300. position:fixed;
  301. overflow:hidden;
  302. margin-top:100px;
  303. margin-left:0px;
  304. height:60px;
  305. line-height:60px;
  306. width:290px;
  307. opacity:0;
  308. background-color:000000;
  309. font-size:16pt;
  310. z-index:5;
  311. font-family: 'Oswald', sans-serif;
  312. font-weight:700;
  313. font-style:italic;
  314. display:block;
  315. text-align:center;
  316. padding:0px 10px;
  317. text-transform:none;
  318. -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  319. -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  320. box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  321. }
  322.  
  323. #SIDEBAR:hover #namefield {
  324. margin-top:400px;
  325. opacity:1;
  326. transition:All 1.6s linear 2s;
  327. -webkit-transition:All 1.6s linear 2s;
  328. -moz-transition:All 1.6s linear 2s;
  329. -o-transition:All 1.6s linear 2s;
  330. -ms-transition: all 1.6s ease 2s;
  331. }
  332.  
  333.  
  334. #SIDEBAR #lower {
  335. position:fixed;
  336. overflow:hidden;
  337. margin-top:100px;
  338. margin-left:0px;
  339. height:105px;
  340. width:300px;
  341. opacity:0;
  342. background-color:000000;
  343. border:5px solid #000000;
  344. }
  345.  
  346. #SIDEBAR:hover #lower {
  347. margin-top:515px;
  348. opacity:1;
  349. transition:All 2s linear 2s;
  350. -webkit-transition:All 2s linear 2s;
  351. -moz-transition:All 2s linear 2s;
  352. -o-transition:All 2s linear 2s;
  353. -ms-transition: all 2s ease 2s;
  354. }
  355.  
  356. #lower .quote {
  357. width:280px;
  358. height:60px;
  359. padding:5px;
  360. margin:5px;
  361. display:block;
  362. font-family: 'Dynalight', cursive;
  363. font-size:14pt;
  364. overflow:hidden;
  365. text-align:center;
  366. background-color: 000000(000000);
  367. }
  368.  
  369. #lower .music {
  370. width:300px;
  371. height:20px;
  372. text-align:center;
  373. display:block;
  374. overflow:hidden;
  375. margin-bottom:5px;
  376. }
  377.  
  378.  
  379. /* MAIN AREA 1 */
  380.  
  381. #MAIN1 {
  382. margin-top:25px;
  383. margin-left:-240px;
  384. padding:0px;
  385. width:700px;
  386. height:510px;
  387. background-color:000000;
  388. border:5px solid #000000;
  389. }
  390.  
  391. #MAIN1 .title {
  392. position:absolute;
  393. width:285px;
  394. height:55px;
  395. margin-top:5px;
  396. margin-left:5px;
  397. }
  398.  
  399. #MAIN1 .h1, #MAIN1 h1 {
  400. height:25px;
  401. line-height:25px;
  402. padding:5px;
  403. font-size:25px;
  404. text-align:center;
  405. background-color:000000;
  406. color:04B431;
  407. font-family: 'Oswald', sans-serif;
  408. }
  409.  
  410. #MAIN1 .h2, #MAIN1 h2 {
  411. height:10px;
  412. line-height:10px;
  413. padding:5px;
  414. font-size:10px;
  415. text-align:right;
  416. color:04B431;
  417. background-color:000000;
  418. font-family: 'Oswald', sans-serif;
  419. }
  420.  
  421. #MAIN1 .about {
  422. position:absolute;
  423. width:265px;
  424. height:400px;
  425. padding:10px;
  426. overflow:auto;
  427. margin-top:65px;
  428. margin-left:5px;
  429. background-color: 000000(000000);
  430. }
  431.  
  432. #MAIN1 .pic {
  433. position:absolute;
  434. background-image:repeat:no-repeat;
  435. width:400px;
  436. height:480px;
  437. background-size:400px 480px;
  438. overflow:hidden;
  439. margin-top:5px;
  440. margin-left:295px;
  441. }
  442.  
  443. .pic .mask, .pic:hover .mask, .pic .stats, .pic:hover .stats {
  444. -webkit-transition: all .6s linear 0s;
  445. -moz-transition: all .6s linear 0s;
  446. -o-transition: all .6s linear 0s;
  447. -ms-transition: all .6s linear 0s;
  448. transition: all .6s linear 0s;
  449. }
  450.  
  451. .pic .mask, .pic .stats {
  452. position:absolute;
  453. opacity:0;
  454. overflow:hidden;
  455. }
  456.  
  457. .pic .mask {
  458. width:400px;
  459. height:480px;
  460. margin-top:0px;
  461. margin-left:0px;
  462. outline:solid;
  463. outline-offset:-10px;
  464. outline-width:2px;
  465. color:04B431;
  466. background-color:000000;
  467. }
  468.  
  469. .pic .stats {
  470. padding:10px;
  471. width:330px;
  472. height:410px;
  473. margin-top:20px;
  474. margin-left:20px;
  475. border:5px solid #000000;
  476. opacity:0;
  477. background-color: 000000(000000);
  478. background-color:000000;
  479. text-align:left;
  480. }
  481.  
  482. .stats .block {
  483. float:right;
  484. width:175px;
  485. height:175px;
  486. margin:0px 0px 5px 5px;
  487. overflow:hidden;
  488. outline:solid;
  489. outline-offset:-10px;
  490. outline-width:5px;
  491. color:04B431;
  492. background-color:000000;
  493. }
  494.  
  495. .block .photo {
  496. margin-top:25px;
  497. margin-left:25px;
  498. width:140px;
  499. height:140px;
  500. padding:20px;
  501. background-size:140px 140px;
  502. background-repeat:no-repeat;
  503. background-position:top left;
  504. -webkit-border-radius: 360px;
  505. -moz-border-radius: 360px;
  506. border-radius:360px;
  507. background-color:000000;
  508. -webkit-box-shadow: -2px -2px 6px 0px rgba(0, 0, 0, 0.30);
  509. -moz-box-shadow: -2px -2px 6px 0px rgba(0, 0, 0, 0.30);
  510. box-shadow: -2px -2px 6px 0px rgba(0, 0, 0, 0.30);
  511. }
  512.  
  513. .stats .h3, .stats h3 {
  514. outline:solid;
  515. outline-offset:-5px;
  516. outline-width:2px;
  517. color:04B431;
  518. background-color:04B431;
  519. height:20px;
  520. line-height:20px;
  521. font-size:15px;
  522. padding:5px 10px 5px 5px;
  523. margin:5px 0px;
  524. text-align:right;
  525. font-family: 'Roboto Condensed', sans-serif;
  526. font-weight:700;
  527. }
  528.  
  529. .pic:hover .mask, .pic:hover .stats {opacity:1;}
  530.  
  531. .pic:hover .stats {overflow:auto;}
  532.  
  533. #MAIN1 #more {
  534. z-index:3;
  535. position:absolute;
  536. overflow:hidden;
  537. width:700px;
  538. height:20px;
  539. margin-top:490px;
  540. margin-left:0px;
  541. background-color:000000;
  542. -webkit-transition: all .6s linear .5s;
  543. -moz-transition: all .6s linear .5s;
  544. -o-transition: all .6s linear .5s;
  545. -ms-transition: all .6s linear .5s;
  546. transition: all .6s linear .5s;
  547. }
  548.  
  549. #MAIN1 #more:hover {
  550. margin-top:0px;
  551. height:500px;
  552. -webkit-transition: all .6s linear .5s;
  553. -moz-transition: all .6s linear .5s;
  554. -o-transition: all .6s linear .5s;
  555. -ms-transition: all .6s linear .5s;
  556. transition: all .6s linear .5s;
  557. }
  558.  
  559. #more .plus {
  560. color:f5d9bc;
  561. z-index:3;
  562. position:absolute;
  563. width:700px;
  564. height:20px;
  565. line-height:20px;
  566. font-size:10px;
  567. display:block;
  568. overflow:hidden;
  569. margin-top:0px;
  570. margin-left:0px;
  571. background-color: rgba(255,255,255,0.05);
  572. opacity:1;
  573. -webkit-transition: all .6s linear 1s;
  574. -moz-transition: all .6s linear 1s;
  575. -o-transition: all .6s linear 1s;
  576. -ms-transition: all .6s linear 1s;
  577. transition: all .6s linear 1s;
  578. }
  579.  
  580. #more:hover .plus {
  581. height:0px;
  582. opacity:0;
  583. -webkit-transition: all .0s linear 1s;
  584. -moz-transition: all .0s linear 1s;
  585. -o-transition: all .0s linear 1s;
  586. -ms-transition: all .0s linear 1s;
  587. transition: all .0s linear 1s;
  588. }
  589.  
  590. #more .pic, #more .about, #more .title, #more:hover .pic, #more:hover .about, #more:hover .title {
  591. -webkit-transition: all .6s linear 1s;
  592. -moz-transition: all .6s linear 1s;
  593. -o-transition: all .6s linear 1s;
  594. -ms-transition: all .6s linear 1s;
  595. transition: all .6s linear 1s;
  596. }
  597.  
  598. #more .pic, #more .about, #more .title {
  599. opacity:0;
  600. }
  601.  
  602. #more:hover .pic, #more:hover .about, #more:hover .title {
  603. opacity:1;
  604. overflow:auto;
  605. }
  606.  
  607.  
  608. /* MAIN AREA 2 */
  609.  
  610. #MAIN2 {
  611. margin-top:550px;
  612. margin-left:-240px;
  613. padding:0px;
  614. width:710px;
  615. height:260px;
  616. }
  617.  
  618. #MAIN2 .m11, #MAIN2 .m22, #MAIN2 .m33 {
  619. position:absolute;
  620. margin-top:0px;
  621. padding:0px;
  622. height:250px;
  623. background-color:000000;
  624. border:5px solid #000000;
  625. }
  626.  
  627. #MAIN2 .m11 {
  628. margin-left:0px;
  629. width:300px;
  630. overflow:hidden;
  631. }
  632.  
  633. #MAIN2 .m22 {
  634. margin-left:315px;
  635. width:250px;
  636. overflow:hidden;
  637. }
  638.  
  639. #MAIN2 .m33 {
  640. margin-left:580px;
  641. width:120px;
  642. overflow-y:auto;
  643. overflow-x:hidden;
  644. }
  645.  
  646. .m11 .bae {
  647. float:right;
  648. width:140px;
  649. height:140px;
  650. margin:0px 0px 0px 5px;
  651. overflow:hidden;
  652. color:000000;
  653. outline:solid;
  654. outline-offset:-10px;
  655. outline-width:1px;
  656. background-color:000000;
  657. }
  658.  
  659. .bae .conn5 {
  660. margin-top:10px;
  661. margin-left:10px;
  662. width:120px;
  663. height:120px;
  664. background-size:120px 120px;
  665. background-repeat:no-repeat;
  666. background-color:000000;
  667. }
  668.  
  669. .m11 .about {
  670. width:280px;
  671. height:230px;
  672. padding:5px;
  673. margin:5px;
  674. overflow:auto;
  675. font-size:7pt;
  676. background-color:000000;
  677. text-align:left;
  678. }
  679.  
  680. .m11 p {
  681. font-size:7pt;
  682. }
  683.  
  684. .m11 b {
  685. color:963764;
  686. font-size:10pt;
  687. }
  688.  
  689. .m11 big {
  690. font-family: 'Ruthie', cursive;
  691. font-size:20pt;
  692. padding-right:5px;
  693. }
  694.  
  695. .m11 .strong, .m11 strong {
  696. font-family: 'Dynalight', cursive;
  697. font-size: 10pt;
  698. text-transform:none;
  699. font-weight:normal;
  700. }
  701.  
  702. .m11 .h5, .m11 h5 {
  703. padding:10px 5px;
  704. margin:0px 0px 5px 0px;
  705. font-size:13pt;
  706. text-align:right;
  707. border-bottom:2px solid #04B431;
  708. font-style:italic;
  709. -moz-border-radius-bottomleft: 90px;
  710. -webkit-border-bottom-left-radius: 90px;
  711. border-bottom-left-radius: 90px
  712. }
  713.  
  714. #MAIN2 .h4, #MAIN2 h4 {
  715. font-family: 'Dynalight', cursive;
  716. font-size:16pt;
  717. text-align:right;
  718. padding:5px;
  719. border-bottom:2px solid #000000;
  720. color:966c7f;
  721. }
  722.  
  723. .m22 .conn1, .m22 .conn2, .m22 .conn3, .m22 .conn4 {
  724. position:absolute;
  725. padding:0px;
  726. width:125px;
  727. height:125px;
  728. z-index:1;
  729. background-size:125px 125px;
  730. -webkit-transition: all .4s ease 0s;
  731. -moz-transition: all .4s ease 0s;
  732. -o-transition: all .4s ease 0s;
  733. -ms-transition: all .4s ease 0s;
  734. transition: all .4s ease 0s;
  735. }
  736.  
  737. .m22 .conn1, .m22 .conn2 {margin-top:0px;}
  738. .m22 .conn3, .m22 .conn4 {margin-top:125px;}
  739. .m22 .conn1, .m22 .conn3 {margin-left:0px;}
  740. .m22 .conn2, .m22 .conn4 {margin-left:125px;}
  741.  
  742.  
  743. .m22 .conn1:hover, .m22 .conn2:hover, .m22 .conn3:hover, .m22 .conn4:hover {
  744. width:250px;
  745. height:250px;
  746. margin-top:0px;
  747. margin-left:0px;
  748. z-index:2;
  749. background-size:250px 250px;
  750. -webkit-transition: all .4s ease .2s;
  751. -moz-transition: all .4s ease .2s;
  752. -o-transition: all .4s ease .2s;
  753. -ms-transition: all .4s ease .2s;
  754. transition: all .4s ease .2s;
  755. }
  756.  
  757. .m22 .mask {
  758. overflow:hidden;
  759. position:relative;
  760. width:250px;
  761. height:250px;
  762. margin-top:0px;
  763. margin-left:0px;
  764. -webkit-transition: all .4s ease 0s;
  765. -moz-transition: all .4s ease 0s;
  766. -o-transition: all .4s ease 0s;
  767. -ms-transition: all .4s ease 0s;
  768. transition: all .4s ease 0s;
  769. opacity:0;
  770. background-color:000000;
  771. outline:solid;
  772. outline-offset:-10px;
  773. outline-width:5px;
  774. color:04B431;
  775. }
  776.  
  777. .conn1:hover .mask, .conn2:hover .mask, .conn3:hover .mask, .conn4:hover .mask {
  778. -webkit-transition: all .6s ease 1.6s;
  779. -moz-transition: all .6s ease 1.6s;
  780. -o-transition: all .6s ease 1.6s;
  781. -ms-transition: all .6s ease 1.6s;
  782. transition: all .6s ease 1.6s;
  783. opacity:1;
  784. }
  785.  
  786. .m22 .about {
  787. overflow:hidden;
  788. position:absolute;
  789. width:200px;
  790. height:200px;
  791. margin-top:20px;
  792. margin-left:20px;
  793. padding:5px;
  794. -webkit-transition: all .4s ease 0s;
  795. -moz-transition: all .4s ease 0s;
  796. -o-transition: all .4s ease 0s;
  797. -ms-transition: all .4s ease 0s;
  798. transition: all .4s ease 0s;
  799. opacity:0;
  800. background-color:000000;
  801. }
  802.  
  803. .conn1:hover .about, .conn2:hover .about, .conn3:hover .about, .conn4:hover .about {
  804. overflow:auto;
  805. -webkit-transition: all .6s ease 1.6s;
  806. -moz-transition: all .6s ease 1.6s;
  807. -o-transition: all .6s ease 1.6s;
  808. -ms-transition: all .6s ease 1.6s;
  809. transition: all .6s ease 1.6s;
  810. opacity:1;
  811. }
  812.  
  813. .m33 a, .m33 a:hover {
  814. -webkit-transition: all .6s ease;
  815. -moz-transition: all .6s ease;
  816. -o-transition: all .6s ease;
  817. -ms-transition: all .6s ease;
  818. transition: all .6s ease;
  819. }
  820.  
  821. .m33 a {
  822. overflow:hidden;
  823. text-decoration:none;
  824. font-family: 'Lato', sans-serif;
  825. font-weight:300;
  826. height:20px;
  827. line-height:20px;
  828. color: 966c7f;
  829. margin:0px 1px 1px 1px;
  830. background-color:000000;
  831. border: 2px solid #000000;
  832. text-align:center;
  833. }
  834.  
  835. .m33 a:hover {
  836. border-left-width:118px;
  837. }
  838.  
  839. /* PROFILE LINES */
  840.  
  841. #LINE1, #LINE2, #LINE3 {
  842. margin-top:0px;
  843. padding:0px;
  844. width:20px;
  845. height:100%;
  846. }
  847.  
  848. #LINE1 {
  849. margin-left:495px;
  850. background-color:000000;
  851. }
  852.  
  853. #LINE2 {
  854. margin-left:525px;
  855. background-color:000000;
  856. }
  857.  
  858. #LINE3 {
  859. margin-left:-445px;
  860. width:50px;
  861. background-color:000000;
  862. }
  863.  
  864.  
  865. /* PROFILE LINKS */
  866.  
  867. #LINX {
  868. overflow:none;
  869. margin-top:-300px;
  870. margin-left:500px;
  871. padding:0px;
  872. width:40px;
  873. height:300px;
  874. text-decoration:none;
  875. background-color:transparent;
  876. -webkit-transition: all 0s linear 0s;
  877. -moz-transition: all 0s linear 0s;
  878. -o-transition: all 0s linear 0s;
  879. -ms-transition: all 0s linear 0s;
  880. transition: all 0s linear 0s;
  881. }
  882.  
  883. body:hover #LINX {
  884. margin-top:100px;
  885. -webkit-transition: all .6s linear 0s;
  886. -moz-transition: all .6s linear 0s;
  887. -o-transition: all .6s linear 0s;
  888. -ms-transition: all .6s linear 0s;
  889. transition: all .6s linear 0s;
  890. }
  891.  
  892. #LINX a {
  893. -webkit-transition: all .6s ease;
  894. -moz-transition: all .6s ease;
  895. -o-transition: all .6s ease;
  896. -ms-transition: all .6s ease;
  897. transition: all .6s ease;
  898. -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  899. -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  900. box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  901. }
  902.  
  903. #LINX a {
  904. font-size:0pt;
  905. margin:5px;
  906. padding:0px;
  907. width:10px;
  908. height:10px;
  909. background-color:000000;
  910. border:10px double #000000;
  911. color:04B431;
  912. outline:solid;
  913. outline-offset:-10px;
  914. outline-width:0px;
  915. }
  916.  
  917. #LINX a:hover {
  918. outline:solid;
  919. outline-offset:-5px;
  920. outline-width:5px;
  921. background-color:000000;
  922. border:10px double #000000;
  923. }
  924.  
  925.  
  926.  
  927. .vicarious{ Hide Codes }
  928. .profileInfo, .userProfileURL, .friendsComments, .blurbs, .blacktext12, .friendSpace, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userProfiledetail, .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .blacktext12, .navigationBar, tr#groups, .navigationBar, .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
  929. table table table table td {width:0px;}
  930. .contactTable td, table table td.text table td,table table table table table td {width:auto;}
  931. div div select, div div form {display:none !important;}
  932. select { visibility:hidden!important; WIDTH:0px!important;}
  933. table div {display:none;}
  934. table table div {display:block;}
  935. .clearfix {display:none !important;position:absolute!important;}
  936. div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
  937. .profileInfo tr tr td { visibility:hidden; }
  938. .profileInfo td.text { visibility:visible; }
  939. .vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
  940. </style></td></tr></table><table style="display:none"><tr><td>
  941.  
  942.  
  943.  
  944.  
  945.  
  946.  
  947. <font class="cite">
  948.  
  949. PAST THIS INTO LIKE TO MEET FOR REFERENCE. IT WILL NOT BE VISIBLE ON THE PROFILE.
  950.  
  951.  
  952. Instructions
  953.  
  954. ------ > BACKGROUND IMAGES
  955.  
  956. The background images are see-through X marks. If you change the color of the background, you will note that the color of the background changes by the X marks remain. If you don't want the X marks, remove the link under Body {background-image:url (LINK) area in About Me. There will also an X mark background image in a few of the divs. The same thing applies. Find the DIV COMMONS in About Me and remove the link if you don't want the X marks to be visible.
  957.  
  958.  
  959. ------ > IMAGES
  960.  
  961. A summary of sizes needed are as follows:
  962.  
  963. One default pic (INTERESTS/ div id="default") of 280px width X 380px height.
  964.  
  965. Two main pics (MUSIC / div class="pic") of 400px width X 480px height.
  966.  
  967. For the sake of simplicity, the remaining pics should be 250px width by 250px height. The layout will size them down appropriate if necessary.
  968.  
  969.  
  970. ------ > TEXT
  971.  
  972. .vicarious { GENERAL TEXT }
  973.  
  974. For the most part, text specifications under General Text apply to the full layout. As such, if you want to change the Bold color for the layout, you would do so under General Text / Bold; however sometimes changes for coloring, size, etc will instead be made IN the individual div sections (under About Me) because they apply to JUST that div.
  975.  
  976. Example - Assume the Bold under General Text is White #FFFFFF and the Bold under a Div1 is Black #000000. To alter the color for the Bold in Div1, you would go to that div section in About Me and alter the B color there instead of the one in General Text.
  977.  
  978. ------ > Music Player
  979.  
  980. You will note a line of code that starts with param name="wmode" on the music player itself. The normal player that you add from flash-mp3-player.net does not contain this. If you are replacing the full player, make sure to add it into your code. Firefox can be buggy with flash players. The extra line of code will keep the player from displaying improperly on the screen.
  981.  
  982.  
  983.  
  984.  
  985.  
  986.  
  987.  
  988.  
  989.  
  990. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
  991.  
  992. <div id="LINE3"></div><div id="sidebar"><div ID="lower"><div class="quote">
  993.  
  994.  
  995.  
  996. </div><div class="music">
  997.  
  998.  
  999. <param name="bgcolor" value="#966c7f" />
  1000. <param name="wmode" value="opaque" />
  1001. <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/v31anstuba/TON_BNO1.mp3&autoplay=1&bgcolor=966c7f&loadingcolor=c8bda5&buttoncolor=c8bda5&slidercolor=c8bda5" />
  1002. </object>
  1003.  
  1004.  
  1005. </div></div><div ID="default">
  1006.  
  1007. <img src="http://i.picpar.com/kFEb.jpg">
  1008.  
  1009.  
  1010. </div><div id="info"><div class="textbox">
  1011.  
  1012. <font class="h1">Out Of Character</font>
  1013. 1) PM Friendly. 2) Do not ask for personal information. 3) Skype is available upon relationship level. 4) Story over Smut. 5) You will never know who's behind the mask. 6) OOC and IC are two completely different things, don't confuse the two!
  1014.  
  1015. <font class="h1">Writing Style</font>
  1016. Semi-Multiple Paragraphs to Novella. Third Person Perspective.
  1017.  
  1018. <font class="h1">Friends</font>
  1019. Tinkerbelle, Wendy, The Lost Boys, Princess Tiger Lily.
  1020.  
  1021. <font class="h1">Enemies</font>
  1022. Captain James Hook, Mr. Smee.
  1023.  
  1024.  
  1025. </div><div class="contact">
  1026.  
  1027. SKYPE: High Relationship Level Required.
  1028.  
  1029. </div></div><div id="namefield">
  1030.  
  1031. <big>P</big>eter
  1032. <big>P</big>an
  1033.  
  1034. </div></div>
  1035.  
  1036.  
  1037.  
  1038. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
  1039.  
  1040. <div id="main1">
  1041.  
  1042. <div class="pic" style="background-image:url(http://i.picpar.com/jFEb.jpg);">
  1043.  
  1044. <div class="mask"></div><div class="stats">
  1045.  
  1046. <font class="h3">Legal & Physical</font>
  1047.  
  1048. <BR><b>FULL NAME:</b> Peter Michael Pan
  1049. <BR><b>NICKNAMES:</b> Pan, Pete, Fly Boy, Pixie Kid/Boy, Fairy Boy/Kid
  1050. <BR><b>ALIASES:</b> Pan, Little Flying Eagle, The Boy Who Wouldn' Grow Up
  1051. <BR><b>DATE OF BIRTH:</b> December 19th ????
  1052. <BR><b>AGE:</b> 12-17 (Depending on Request)
  1053. <BR><b>PLACE OF BIRTH:</b> London, England
  1054. <BR><b>CURRENT RESIDENCE:</b> Neverland
  1055. <BR><b>ETHNICITY:</b> English
  1056. <BR><b>HAIR COLOR:</b> Red
  1057. <BR><b>EYE COLOR:</b> Brown
  1058. <BR><b>HEIGHT:</b> 5'4"
  1059. <BR><b>WEIGHT:</b> 100 lbs
  1060. <BR><b>BIRTHMARKS/SCARS:</b> None.
  1061.  
  1062. <font class="h3">Family & Relationships</font>
  1063.  
  1064. <b>MOTHER:</b> Mary
  1065. <BR><b>FATHER:</b> The fairy prince
  1066. <BR><b>SISTER(S):</b> None
  1067. <BR><b>BROTHER(S):</b> None
  1068. <BR><b>OTHER Family:</b> The Lost Boys
  1069. <BR><b>STATUS:</b> Single
  1070. <BR><b>ORIENTATION:</b> Straight
  1071. <BR><b>CURRENT:</b> N/A
  1072. <BR><b>FORMER:</b> N/A
  1073.  
  1074.  
  1075. </div></div><div class="title">
  1076.  
  1077. <font class="h1">History & Origins</font>
  1078. <font class="h2">"Second Star to the Right and Straight on til Morning!"</font>
  1079.  
  1080. </div><div class="about">
  1081.  
  1082. The
  1083. <b>Boy</b>
  1084. <i>Who</i>
  1085. <font class="u">Never</font>
  1086. <font class="strike">GREW</font>
  1087. <font class="strong">Up</font>
  1088.  
  1089. <p>Peter Pan is a young boy who lives on the island of Neverland. He has a pixie called Tinker Bell who is his best friend and sidekick and he is the current leader of the Lost Boys. He spends most days going on adventures and battling the notorious pirate Captain Hook.
  1090.  
  1091. An earlier story idea involved Peter's birth and how he came to be. When he was an infant, fairies entered his home and took him away to Neverland. When Peter returned, he discovered another baby in his mother's bed. Feeling rejected and forgotten, Peter left and returned to Never Land - now his home. Eventually Peter met Tinker Bell and gathered a group of younger kids and create the Lost Boys. The idea was dropped early in production as Walt Disney believed that how Peter came to be was another story.
  1092.  
  1093. Personality
  1094. “He flies without wings. His shadow leads a merry little life of its own. Face-to-face with the terrible Captain Hook, Peter dispatches that pirate with jaunty ease. Peter is at home with mermaids and understands their language. He is twelve years old forever simply because he refuses to grow up beyond that comfortable age. Most remarkable of all, he knows where Never Land is and how to get there.”
  1095. ―Walt Disney
  1096. Peter Pan is incredibly adventurous and daring. His favorite activities include battling pirates, engaging in friendly wars with the Indians, and listening to Wendy's stories of his adventures. Being a young boy, Peter can be rather impractical and conceited at times, but when it comes to rescuing his friends, he is far more mature than any adult can be. He is respected and loved by nearly every inhabitant of Never Land with the exception of Captain Hook (and his crew) who despises Peter for cutting off his hand and feeding it to the crocodile during their first battle. Ever since, Peter and Hook have been at wits constantly battling in the hope that one would finally "walk the plank." One of the many things Peter discards is adulthood. This drove him to create a team of kids who also desire to stay young who he deems the Lost Boys. One can say Peter stands as a father figure for the group as well. Peter's most trusted companion is Tinker Bell. Even though they have a close best friend relationship, it is obvious Tink has strong feelings for Peter. Whether or not he's actually aware is currently unknown although in the first film when Tink was close to death, Peter stated "Don't you understand Tink, you mean more to me than anything in the world!."
  1097.  
  1098. Despite being heroic and charming, Pan can be quite cocky and being an immortal child somewhat he can also be quite immature. And as such, he enjoys goofing off, listening to stories, playing "pretend", and parties with his friends. Peter's youthful nature symbolizes his place in childhood wonder. Even so, Peter can also be very adult. By the end of the film, despite proclaiming his hatred for adulthood with great intensity, Peter eventually comes to put his more childlike nature aside, for the sake of protecting Tinker Bell, Wendy, her brothers, and the Lost Boys. With this, he brings himself to serve as a more adult figure, by risking his life for the sake of his loved ones, and selflessly escorting Wendy and her brothers home to London, despite his desire to have them stay.
  1099.  
  1100. This directly ties into his dynamic with Captain Hook who, despite Peter developing into a child with an adult mindset, is very much an adult with a more childish mindset, being loud, overly commanding, dependent on others, and prone to tantrums.
  1101.  
  1102.  
  1103.  
  1104.  
  1105. </div><div id="more"><div class="plus">+</div>
  1106.  
  1107. <div class="pic" style="background-image:url(http://i.picpar.com/hFEb.jpg);">
  1108.  
  1109. <div class="mask"></div><div class="stats">
  1110.  
  1111. <font class="h3">Personality</font>
  1112.  
  1113. <div class="status2"><div class="block">
  1114.  
  1115. <div class="photo" style="background-image:url(http://i.picpar.com/gFEb.jpg);">
  1116.  
  1117. </div></div>
  1118.  
  1119. <b>Likes</b> Flying, games, humiliating Captain Hook and his crew, stories, having fun, surprises, Wendy Darling
  1120. <br><b>Dislikes</b> Growing up, rebellious friends, Captain Hook
  1121. <br><b>Traits</b> Adventurous, Heroic, Charming, Childish, Daring, Friendly, Impractical, Conceited, Mature (Towards friends/battles)
  1122.  
  1123. <p> Peter Pan is incredibly adventurous and daring. His favorite activities include battling pirates, engaging in friendly wars with the Indians, and listening to Wendy's stories of his adventures. Being a young boy, Peter can be rather impractical and conceited at times, but when it comes to rescuing his friends, he is far more mature than any adult can be. He is respected and loved by nearly every inhabitant of Never Land with the exception of Captain Hook (and his crew) who despises Peter for cutting off his hand and feeding it to the crocodile during their first battle. Ever since, Peter and Hook have been at wits constantly battling in the hope that one would finally "walk the plank." One of the many things Peter discards is adulthood. This drove him to create a team of kids who also desire to stay young who he deems the Lost Boys. One can say Peter stands as a father figure for the group as well. Peter's most trusted companion is Tinker Bell. Even though they have a close best friend relationship, it is obvious Tink has strong feelings for Peter. Whether or not he's actually aware is currently unknown although in the first film when Tink was close to death, Peter stated "Don't you understand Tink, you mean more to me than anything in the world!."
  1124.  
  1125. Despite being heroic and charming, Pan can be quite cocky and being an immortal child somewhat he can also be quite immature. And as such, he enjoys goofing off, listening to stories, playing "pretend", and parties with his friends. Peter's youthful nature symbolizes his place in childhood wonder. Even so, Peter can also be very adult. By the end of the film, despite proclaiming his hatred for adulthood with great intensity, Peter eventually comes to put his more childlike nature aside, for the sake of protecting Tinker Bell, Wendy, her brothers, and the Lost Boys. With this, he brings himself to serve as a more adult figure, by risking his life for the sake of his loved ones, and selflessly escorting Wendy and her brothers home to London, despite his desire to have them stay.
  1126.  
  1127. This directly ties into his dynamic with Captain Hook who, despite Peter developing into a child with an adult mindset, is very much an adult with a more childish mindset, being loud, overly commanding, dependent on others, and prone to tantrums.
  1128.  
  1129.  
  1130. </div></div></div><div class="title">
  1131.  
  1132. <font class="h1">Abilities</font>
  1133. <font class="h2">"Hook, you codfish!"</font>
  1134.  
  1135. </div><div class="about">
  1136.  
  1137. <p>Flight: Peter Pan's most unique trait is his ability to fly without any physical methods, he uses this to gain the advantage on those who cannot.
  1138. Semi-Immortality: Peter Pan cannot die of old age, but it is never where he can survive death.
  1139. Eternal Youth: Peter Pan cannot age due to being in Neverland which he says nobody can grow up.
  1140. Knife-Fighting: Peter Pan is very skilled with his trusty knife, able to wield it with such skill he can fight a master swordsman, like his nemesis Captain Hook, and hold his own. However, Peter often fights while flying, which gives him an edge; when he fights Hook without flying, he is almost killed.
  1141. Impersonations: Peter Pan has an uncanny talent for impersonating others' voices, as he does when he imitates Hook and tries to trick Mr. Smee into taking Tiger Lily back to her people. In Kingdom Hearts, he imitates Smee to lure out Hook, and in both cases Smee and Hook are fooled.
  1142. </div></div></div>
  1143.  
  1144.  
  1145. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
  1146.  
  1147. <div id="MAIN2"><div class="m11"><div class="about">
  1148.  
  1149. <font class="h5">
  1150. <big>A</big>geless
  1151. <big>B</big>oy
  1152. </font>
  1153.  
  1154. <div class="bae">
  1155. <div class="conn5" style="background-image:url(http://i.picpar.com/fFEb.gif);">
  1156. </div></div>
  1157.  
  1158. <font class="strong">
  1159.  
  1160.  
  1161. </font>
  1162.  
  1163. <p>All you need is Faith, Trust and a little bit of... PIXIE DUST!
  1164.  
  1165. </div></div><div class="m22">
  1166.  
  1167. <div class="conn1" style="background-image:url(http://i.picpar.com/dFEb.png);">
  1168.  
  1169. <div class="mask"><div class="about">
  1170.  
  1171. <font class="h4"></font>
  1172.  
  1173.  
  1174.  
  1175. </div></div></div>
  1176.  
  1177. <div class="conn2" style="background-image:url(http://i.picpar.com/eFEb.jpg);">
  1178.  
  1179. <div class="mask"><div class="about">
  1180.  
  1181. <font class="h4"></font>
  1182.  
  1183.  
  1184.  
  1185. </div></div></div>
  1186.  
  1187. <div class="conn3" style="background-image:url(http://i.picpar.com/cFEb.jpg);">
  1188.  
  1189. <div class="mask"><div class="about">
  1190.  
  1191. <font class="h4"></font>
  1192.  
  1193.  
  1194.  
  1195. </div></div></div>
  1196.  
  1197. <div class="conn4" style="background-image:url(http://i.picpar.com/aFEb.gif);">
  1198.  
  1199. <div class="mask"><div class="about">
  1200.  
  1201. <font class="h4"></font>
  1202.  
  1203.  
  1204.  
  1205. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement