API tools faq
paste
Advertisement
Guest User

Jae-Hwa

a guest
Oct 24th, 2014
131
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.68 KB | None | 0 0
raw download clone embed print report
  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. .pfor {display:none;}
  4. #profile { background-color: transparent;
  5. border: none;}
  6. /* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
  7. /* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
  8.  
  9. .vicarious { Structure }
  10.  
  11. body{
  12. width:100%;
  13. height:100%;
  14. padding:0px;
  15. margin:0px;
  16. background-color:FF3300;
  17. background-image:url(http://i62.tinypic.com/294kyfb.jpg);
  18. background-position:center center;
  19. background-attachment:fixed;
  20. background-repeat:repeat;
  21. }
  22.  
  23. table, tr, td {background-color:transparent; display:inline-block;}
  24.  
  25. .vicarious{ Google Chrome Scrollbar }
  26.  
  27. ::-webkit-scrollbar {width: 10px;}
  28. ::-webkit-scrollbar-track { border: 1px solid #CC3300; background-color:transparent; }
  29. ::-webkit-scrollbar-thumb { border: 1px solid #FF9; background-color:FF9; }
  30.  
  31.  
  32. .vicarious { GENERAL TEXT }
  33.  
  34. a, b, i, p, table, tr, td, li, div, .text, .btext {
  35. font-family:calibri;
  36. font-size:7.5pt;
  37. line-height:95%;
  38. color: beb8a2;
  39. padding:0px;
  40. margin:0px;
  41. text-decoration:none;
  42. text-transform:none;
  43. word-spacing:-1px;
  44. }
  45.  
  46. a { display:block; }
  47.  
  48. p {
  49. text-align:justify;
  50. margin-top: 5px;
  51. text-indent:3px;
  52. }
  53.  
  54. p:first-line {
  55. font-weight:bold; }
  56.  
  57. p:first-letter {
  58. font-size: 9pt;
  59. font-family: 'Ruthie', cursive;
  60. padding-left:5px;
  61. }
  62.  
  63. b {
  64. font-size:8pt;
  65. text-transform:uppercase;
  66. font-family: 'Roboto Condensed', sans-serif;
  67. color: ;
  68. }
  69.  
  70. i {
  71. font-size:10pt;
  72. color: ;
  73. font-family: 'Dynalight', cursive;
  74. }
  75.  
  76. .u, u {
  77. color: 97b0aa;
  78. text-decoration:underline;
  79. }
  80.  
  81. .strike, strike {
  82. color: d3cebd;
  83. text-decoration:line-through;
  84. letter-spacing:1pt;
  85. }
  86.  
  87. .strong, strong {
  88. font-family:courier new;
  89. font-size: 9pt;
  90. text-transform:uppercase;
  91. color:ddc9aa;
  92. font-weight:900;
  93. }
  94.  
  95. em {
  96. font-family:brush script mt;
  97. font-size:11pt;
  98. color: 89a4a6;
  99. }
  100.  
  101. .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 {
  102. padding:0px;
  103. margin:0px;
  104. line-height:auto;
  105. }
  106.  
  107. .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 {
  108. display:block;
  109. }
  110.  
  111. big {
  112. font-size:36pt;
  113. text-transform:uppercase;
  114. font-family: 'Dynalight', cursive;
  115. }
  116.  
  117. .cite {font-size:0px; color:transparent;display:block; height:0px;}
  118.  
  119.  
  120. p {text-align:justify;}
  121.  
  122.  
  123. .vicarious{ Div Commons }
  124.  
  125. /* MAIN ATTRIBUTES SHARED BY DIVS FROM VARIOUS SECTIONS */
  126.  
  127.  
  128.  
  129. /* Background X mark images for Divs ( Same as profile body background ) */
  130.  
  131. #SIDEBAR #default, .pic .mask, .stats .block, .m11 .bae, .m22 .mask {
  132. background-image:url(http://i62.tinypic.com/294kyfb.jpg);
  133. background-position:center center;
  134. background-repeat:repeat;
  135. }
  136.  
  137. #MAIN1, #MAIN2, #LINX, #SIDEBAR, #LINE1, #LINE2, #LINE3 {
  138. visibility:visible;
  139. top:0%;
  140. left:50%;
  141. z-index:2;
  142. overflow:hidden;
  143. }
  144.  
  145. #MAIN1, #MAIN2 { position:absolute; }
  146.  
  147. #LINX, #SIDEBAR, #LINE1, #LINE2, #LINE3 {position:fixed;}
  148. #LINX, #SIDEBAR, #MAIN2 {background-color:transparent; }
  149.  
  150.  
  151. .vicarious{ Divs }
  152.  
  153.  
  154. /* SIDEBAR */
  155.  
  156. #SIDEBAR #default, #SIDEBAR:hover #default, #SIDEBAR #info, #SIDEBAR:hover #info {
  157. -webkit-transition: all .6s ease 1s;
  158. -moz-transition: all .6s ease 1s;
  159. -o-transition: all .6s ease 1s;
  160. -ms-transition: all .6s ease 1s;
  161. transition: all .6s ease 1s;
  162. }
  163.  
  164. #sidebar #namefield, #SIDEBAR #lower {
  165. transition:All .6s linear 0s;
  166. -webkit-transition:All .6s linear 0s;
  167. -moz-transition:All .6s linear 0s;
  168. -o-transition:All .6s linear 0s;
  169. -ms-transition: all .6s ease 0s;
  170. }
  171.  
  172. #SIDEBAR {
  173. margin-top:0px;
  174. margin-left:-575px;
  175. padding:0px;
  176. width:310px;
  177. height:100%;
  178. }
  179.  
  180. #SIDEBAR #default {
  181. position:absolute;
  182. overflow:hidden;
  183. margin-left:0px;
  184. margin-top:100px;
  185. z-index:3;
  186. padding:0px;
  187. width:300px;
  188. height:400px;
  189. padding:0px;
  190. background-color:996633 ;
  191. border:5px solid #FF9;
  192. }
  193.  
  194. #SIDEBAR:hover #default {
  195. opacity:0;
  196. }
  197.  
  198. #default img {
  199. overflow:hidden;
  200. margin:5px;
  201. width:280px;
  202. height:380px;
  203. border:5px solid #996633;
  204. }
  205.  
  206. #SIDEBAR #info {
  207. position:absolute;
  208. overflow:hidden;
  209. margin-left:0px;
  210. margin-top:100px;
  211. z-index:3;
  212. padding:0px;
  213. width:300px;
  214. height:400px;
  215. opacity:0;
  216. background-color:CC3300;
  217. border:5px solid #996633;
  218. }
  219.  
  220. #SIDEBAR:hover #info {
  221. opacity:1;
  222. }
  223.  
  224. #info .textbox {
  225. position:absolute;
  226. height:250px;
  227. width:250px;
  228. overflow:auto;
  229. margin-top:0px;
  230. margin-left:20px;
  231. padding:5px;
  232. opacity:0;
  233. background-color: rgba(255,255,255,0.05);
  234. transition:All .6s linear 0s;
  235. -webkit-transition:All .6s linear 0s;
  236. -moz-transition:All .6s linear 0s;
  237. -o-transition:All .6s linear 0s;
  238. -ms-transition: all .6s ease 0s;
  239. }
  240.  
  241. #SIDEBAR:hover .textbox {
  242. opacity:1;
  243. margin-top:20px;
  244. transition:All 1.6s linear 3.6s;
  245. -webkit-transition:All 1.6s linear 3.6s;
  246. -moz-transition:All 1.6s linear 3.6s;
  247. -o-transition:All 1.6s linear 3.6s;
  248. -ms-transition: all 1.6s ease 3.6s;
  249. }
  250.  
  251. #SIDEBAR .h1, #SIDEBAR h1 {
  252. margin:10px 0px;
  253. background-color:FF9933;
  254. font-size:14pt;
  255. font-family: 'Oswald', sans-serif;
  256. font-weight:700;
  257. font-style:italic;
  258. text-align:center;
  259. padding:0px 10px;
  260. text-transform:none;
  261. line-height:60%;
  262. }
  263.  
  264.  
  265. #info .contact {
  266. position:absolute;
  267. overflow:hidden;
  268. margin-top:305px;
  269. margin-left:5px;
  270. height:25px;
  271. width:280px;
  272. padding:0px 5px;
  273. opacity:0;
  274. color:2b687;
  275. background-color:c8bd;
  276. font-size:9pt;
  277. line-height:25px;
  278. font-family: 'Oswald', sans-serif;
  279. display:block;
  280. text-align:center;
  281. text-transform:none;
  282. transition:All .2s linear 0s;
  283. -webkit-transition:All .2s linear 0s;
  284. -moz-transition:All .2s linear 0s;
  285. -o-transition:All .2s linear 0s;
  286. -ms-transition: all .2s ease 0s;
  287. }
  288.  
  289. #SIDEBAR:hover .contact{
  290. opacity:1;
  291. margin-top:365px;
  292. transition:All 1.6s linear 4s;
  293. -webkit-transition:All 1.6s linear 4s;
  294. -moz-transition:All 1.6s linear 4s;
  295. -o-transition:All 1.6s linear 4s;
  296. -ms-transition: all 1.6s ease 4s;
  297. }
  298.  
  299.  
  300. #sidebar #namefield {
  301. position:fixed;
  302. overflow:hidden;
  303. margin-top:100px;
  304. margin-left:0px;
  305. height:60px;
  306. line-height:60px;
  307. width:290px;
  308. opacity:0;
  309. background-color:FF9933;
  310. font-size:16pt;
  311. z-index:5;
  312. font-family: 'Oswald', sans-serif;
  313. font-weight:700;
  314. font-style:italic;
  315. display:block;
  316. text-align:center;
  317. padding:0px 10px;
  318. text-transform:none;
  319. -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  320. -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  321. box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  322. }
  323.  
  324. #SIDEBAR:hover #namefield {
  325. margin-top:400px;
  326. opacity:1;
  327. transition:All 1.6s linear 2s;
  328. -webkit-transition:All 1.6s linear 2s;
  329. -moz-transition:All 1.6s linear 2s;
  330. -o-transition:All 1.6s linear 2s;
  331. -ms-transition: all 1.6s ease 2s;
  332. }
  333.  
  334.  
  335. #SIDEBAR #lower {
  336. position:fixed;
  337. overflow:hidden;
  338. margin-top:100px;
  339. margin-left:0px;
  340. height:105px;
  341. width:300px;
  342. opacity:0;
  343. background-color:2b687;
  344. border:5px solid #c8bda;
  345. }
  346.  
  347. #SIDEBAR:hover #lower {
  348. margin-top:515px;
  349. opacity:1;
  350. transition:All 2s linear 2s;
  351. -webkit-transition:All 2s linear 2s;
  352. -moz-transition:All 2s linear 2s;
  353. -o-transition:All 2s linear 2s;
  354. -ms-transition: all 2s ease 2s;
  355. }
  356.  
  357. #lower .quote {
  358. width:280px;
  359. height:60px;
  360. padding:5px;
  361. margin:5px;
  362. display:block;
  363. font-family: 'Dynalight', cursive;
  364. font-size:14pt;
  365. overflow:hidden;
  366. text-align:center;
  367. background-color: rgba(255,255,255,0.05);
  368. }
  369.  
  370. #lower .music {
  371. width:300px;
  372. height:20px;
  373. text-align:center;
  374. display:block;
  375. overflow:hidden;
  376. margin-bottom:5px;
  377. }
  378.  
  379.  
  380. /* MAIN AREA 1 */
  381.  
  382. #MAIN1 {
  383. margin-top:25px;
  384. margin-left:-240px;
  385. padding:0px;
  386. width:700px;
  387. height:510px;
  388. background-color:2b687;
  389. border:5px solid #c8bda;
  390. }
  391.  
  392. #MAIN1 .title {
  393. position:absolute;
  394. width:285px;
  395. height:55px;
  396. margin-top:5px;
  397. margin-left:5px;
  398. }
  399.  
  400. #MAIN1 .h1, #MAIN1 h1 {
  401. height:25px;
  402. line-height:25px;
  403. padding:5px;
  404. font-size:25px;
  405. text-align:center;
  406. background-color:8298;
  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:2b6879;
  417. background-color:c8bda;
  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: rgba(255,255,255,0.05);
  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:2b6879;
  466. background-color:82993;
  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 #c8bd5;
  476. opacity:0;
  477. background-color: rgba(255,255,255,0.05);
  478. background-color:82983;
  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:2b6879;
  492. background-color:c8bd5;
  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:2b687;
  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:6c857;
  518. height:20px;
  519. line-height:20px;
  520. font-size:15px;
  521. padding:5px 10px 5px 5px;
  522. margin:5px 0px;
  523. text-align:right;
  524. background-color:c8bda;
  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:2b689;
  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. z-index:3;
  561. position:absolute;
  562. width:700px;
  563. height:20px;
  564. line-height:20px;
  565. font-size:10px;
  566. display:block;
  567. overflow:hidden;
  568. margin-top:0px;
  569. margin-left:0px;
  570. background-color: rgba(255,255,255,0.05);
  571. opacity:1;
  572. -webkit-transition: all .6s linear 1s;
  573. -moz-transition: all .6s linear 1s;
  574. -o-transition: all .6s linear 1s;
  575. -ms-transition: all .6s linear 1s;
  576. transition: all .6s linear 1s;
  577. }
  578.  
  579. #more:hover .plus {
  580. height:0px;
  581. opacity:0;
  582. -webkit-transition: all .0s linear 1s;
  583. -moz-transition: all .0s linear 1s;
  584. -o-transition: all .0s linear 1s;
  585. -ms-transition: all .0s linear 1s;
  586. transition: all .0s linear 1s;
  587. }
  588.  
  589. #more .pic, #more .about, #more .title, #more:hover .pic, #more:hover .about, #more:hover .title {
  590. -webkit-transition: all .6s linear 1s;
  591. -moz-transition: all .6s linear 1s;
  592. -o-transition: all .6s linear 1s;
  593. -ms-transition: all .6s linear 1s;
  594. transition: all .6s linear 1s;
  595. }
  596.  
  597. #more .pic, #more .about, #more .title {
  598. opacity:0;
  599. }
  600.  
  601. #more:hover .pic, #more:hover .about, #more:hover .title {
  602. opacity:1;
  603. overflow:auto;
  604. }
  605.  
  606.  
  607. /* MAIN AREA 2 */
  608.  
  609. #MAIN2 {
  610. margin-top:550px;
  611. margin-left:-240px;
  612. padding:0px;
  613. width:710px;
  614. height:260px;
  615. }
  616.  
  617. #MAIN2 .m11, #MAIN2 .m22, #MAIN2 .m33 {
  618. position:absolute;
  619. margin-top:0px;
  620. padding:0px;
  621. height:250px;
  622. background-color:2b6879;
  623. border:5px solid #c8bda5;
  624. }
  625.  
  626. #MAIN2 .m11 {
  627. margin-left:0px;
  628. width:300px;
  629. overflow:hidden;
  630. }
  631.  
  632. #MAIN2 .m22 {
  633. margin-left:315px;
  634. width:250px;
  635. overflow:hidden;
  636. }
  637.  
  638. #MAIN2 .m33 {
  639. margin-left:580px;
  640. width:120px;
  641. overflow-y:auto;
  642. overflow-x:hidden;
  643. }
  644.  
  645. .m11 .bae {
  646. float:right;
  647. width:140px;
  648. height:140px;
  649. margin:0px 0px 0px 5px;
  650. overflow:hidden;
  651. color:2b6879;
  652. outline:solid;
  653. outline-offset:-10px;
  654. outline-width:1px;
  655. background-color:2b689;
  656. }
  657.  
  658. .bae .conn5 {
  659. margin-top:10px;
  660. margin-left:10px;
  661. width:120px;
  662. height:120px;
  663. background-size:120px 120px;
  664. background-repeat:no-repeat;
  665. background-color:2b689;
  666. }
  667.  
  668. .m11 .about {
  669. width:280px;
  670. height:230px;
  671. padding:5px;
  672. margin:5px;
  673. overflow:auto;
  674. font-size:7pt;
  675. background-color:67898b;
  676. text-align:left;
  677. }
  678.  
  679. .m11 p {
  680. font-size:7pt;
  681. }
  682.  
  683. .m11 b {
  684. color:34626f;
  685. font-size:10pt;
  686. }
  687.  
  688. .m11 big {
  689. font-family: 'Ruthie', cursive;
  690. font-size:20pt;
  691. padding-right:5px;
  692. }
  693.  
  694. .m11 .strong, .m11 strong {
  695. font-family: 'Dynalight', cursive;
  696. font-size: 10pt;
  697. text-transform:none;
  698. font-weight:normal;
  699. }
  700.  
  701. .m11 .h5, .m11 h5 {
  702. padding:10px 5px;
  703. margin:0px 0px 5px 0px;
  704. font-size:13pt;
  705. text-align:right;
  706. border-bottom:2px solid #c8bda5;
  707. font-style:italic;
  708. -moz-border-radius-bottomleft: 90px;
  709. -webkit-border-bottom-left-radius: 90px;
  710. border-bottom-left-radius: 90px
  711. }
  712.  
  713. #MAIN2 .h4, #MAIN2 h4 {
  714. font-family: 'Dynalight', cursive;
  715. font-size:16pt;
  716. text-align:right;
  717. padding:5px;
  718. border-bottom:2px solid #2b6879;
  719. color:2b6879;
  720. }
  721.  
  722. .m22 .conn1, .m22 .conn2, .m22 .conn3, .m22 .conn4 {
  723. position:absolute;
  724. padding:0px;
  725. width:125px;
  726. height:125px;
  727. z-index:1;
  728. background-size:125px 125px;
  729. -webkit-transition: all .4s ease 0s;
  730. -moz-transition: all .4s ease 0s;
  731. -o-transition: all .4s ease 0s;
  732. -ms-transition: all .4s ease 0s;
  733. transition: all .4s ease 0s;
  734. }
  735.  
  736. .m22 .conn1, .m22 .conn2 {margin-top:0px;}
  737. .m22 .conn3, .m22 .conn4 {margin-top:125px;}
  738. .m22 .conn1, .m22 .conn3 {margin-left:0px;}
  739. .m22 .conn2, .m22 .conn4 {margin-left:125px;}
  740.  
  741.  
  742. .m22 .conn1:hover, .m22 .conn2:hover, .m22 .conn3:hover, .m22 .conn4:hover {
  743. width:250px;
  744. height:250px;
  745. margin-top:0px;
  746. margin-left:0px;
  747. z-index:2;
  748. background-size:250px 250px;
  749. -webkit-transition: all .4s ease .2s;
  750. -moz-transition: all .4s ease .2s;
  751. -o-transition: all .4s ease .2s;
  752. -ms-transition: all .4s ease .2s;
  753. transition: all .4s ease .2s;
  754. }
  755.  
  756. .m22 .mask {
  757. overflow:hidden;
  758. position:relative;
  759. width:250px;
  760. height:250px;
  761. margin-top:0px;
  762. margin-left:0px;
  763. -webkit-transition: all .4s ease 0s;
  764. -moz-transition: all .4s ease 0s;
  765. -o-transition: all .4s ease 0s;
  766. -ms-transition: all .4s ease 0s;
  767. transition: all .4s ease 0s;
  768. opacity:0;
  769. background-color:c8bda5;
  770. outline:solid;
  771. outline-offset:-10px;
  772. outline-width:5px;
  773. color:2b6879;
  774. }
  775.  
  776. .conn1:hover .mask, .conn2:hover .mask, .conn3:hover .mask, .conn4:hover .mask {
  777. -webkit-transition: all .6s ease 1.6s;
  778. -moz-transition: all .6s ease 1.6s;
  779. -o-transition: all .6s ease 1.6s;
  780. -ms-transition: all .6s ease 1.6s;
  781. transition: all .6s ease 1.6s;
  782. opacity:1;
  783. }
  784.  
  785. .m22 .about {
  786. overflow:hidden;
  787. position:absolute;
  788. width:200px;
  789. height:200px;
  790. margin-top:20px;
  791. margin-left:20px;
  792. padding:5px;
  793. -webkit-transition: all .4s ease 0s;
  794. -moz-transition: all .4s ease 0s;
  795. -o-transition: all .4s ease 0s;
  796. -ms-transition: all .4s ease 0s;
  797. transition: all .4s ease 0s;
  798. opacity:0;
  799. background-color:829893;
  800. }
  801.  
  802. .conn1:hover .about, .conn2:hover .about, .conn3:hover .about, .conn4:hover .about {
  803. overflow:auto;
  804. -webkit-transition: all .6s ease 1.6s;
  805. -moz-transition: all .6s ease 1.6s;
  806. -o-transition: all .6s ease 1.6s;
  807. -ms-transition: all .6s ease 1.6s;
  808. transition: all .6s ease 1.6s;
  809. opacity:1;
  810. }
  811.  
  812. .m33 a, .m33 a:hover {
  813. -webkit-transition: all .6s ease;
  814. -moz-transition: all .6s ease;
  815. -o-transition: all .6s ease;
  816. -ms-transition: all .6s ease;
  817. transition: all .6s ease;
  818. }
  819.  
  820. .m33 a {
  821. overflow:hidden;
  822. text-decoration:none;
  823. font-family: 'Lato', sans-serif;
  824. font-weight:300;
  825. height:20px;
  826. line-height:20px;
  827. color: 2b6879;
  828. margin:0px 1px 1px 1px;
  829. background-color:c8bda5;
  830. border: 2px solid #829893;
  831. text-align:center;
  832. }
  833.  
  834. .m33 a:hover {
  835. border-left-width:118px;
  836. }
  837.  
  838. /* PROFILE LINES */
  839.  
  840. #LINE1, #LINE2, #LINE3 {
  841. margin-top:0px;
  842. padding:0px;
  843. width:20px;
  844. height:100%;
  845. }
  846.  
  847. #LINE1 {
  848. margin-left:495px;
  849. background-color:829893;
  850. }
  851.  
  852. #LINE2 {
  853. margin-left:525px;
  854. background-color:c1baa3;
  855. }
  856.  
  857. #LINE3 {
  858. margin-left:-445px;
  859. width:50px;
  860. background-color:FF9933;
  861. }
  862.  
  863.  
  864. /* PROFILE LINKS */
  865.  
  866. #LINX {
  867. overflow:none;
  868. margin-top:-300px;
  869. margin-left:500px;
  870. padding:0px;
  871. width:40px;
  872. height:300px;
  873. text-decoration:none;
  874. background-color:transparent;
  875. -webkit-transition: all 0s linear 0s;
  876. -moz-transition: all 0s linear 0s;
  877. -o-transition: all 0s linear 0s;
  878. -ms-transition: all 0s linear 0s;
  879. transition: all 0s linear 0s;
  880. }
  881.  
  882. body:hover #LINX {
  883. margin-top:100px;
  884. -webkit-transition: all .6s linear 0s;
  885. -moz-transition: all .6s linear 0s;
  886. -o-transition: all .6s linear 0s;
  887. -ms-transition: all .6s linear 0s;
  888. transition: all .6s linear 0s;
  889. }
  890.  
  891. #LINX a {
  892. -webkit-transition: all .6s ease;
  893. -moz-transition: all .6s ease;
  894. -o-transition: all .6s ease;
  895. -ms-transition: all .6s ease;
  896. transition: all .6s ease;
  897. -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  898. -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  899. box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  900. }
  901.  
  902. #LINX a {
  903. font-size:0pt;
  904. margin:5px;
  905. padding:0px;
  906. width:10px;
  907. height:10px;
  908. background-color:2b6879;
  909. border:10px double #c8bda5;
  910. color:2b6879;
  911. outline:solid;
  912. outline-offset:-10px;
  913. outline-width:0px;
  914. }
  915.  
  916. #LINX a:hover {
  917. outline:solid;
  918. outline-offset:-5px;
  919. outline-width:5px;
  920. background-color:c8bda5;
  921. border:10px double #2b6879;
  922. }
  923.  
  924.  
  925.  
  926. .vicarious{ Hide Codes }
  927. .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; }
  928. table table table table td {width:0px;}
  929. .contactTable td, table table td.text table td,table table table table table td {width:auto;}
  930. div div select, div div form {display:none !important;}
  931. select { visibility:hidden!important; WIDTH:0px!important;}
  932. table div {display:none;}
  933. table table div {display:block;}
  934. .clearfix {display:none !important;position:absolute!important;}
  935. div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
  936. .profileInfo tr tr td { visibility:hidden; }
  937. .profileInfo td.text { visibility:visible; }
  938. .vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
  939. </style></td></tr></table><table style="display:none"><tr><td>
  940.  
  941.  
  942.  
  943.  
  944. -----------------------------LIKE TO MEET-------------------------
  945.  
  946. <font class="cite">
  947.  
  948. PAST THIS INTO LIKE TO MEET FOR REFERENCE. IT WILL NOT BE VISIBLE ON THE PROFILE.
  949.  
  950.  
  951. Instructions
  952.  
  953. ------ > BACKGROUND IMAGES
  954.  
  955. 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.
  956.  
  957.  
  958. ------ > IMAGES
  959.  
  960. A summary of sizes needed are as follows:
  961.  
  962. One default pic (INTERESTS/ div id="default") of 280px width X 380px height.
  963.  
  964. Two main pics (MUSIC / div class="pic") of 400px width X 480px height.
  965.  
  966. For the sake of simplicity, the remaining pics should be 250px width by 250px height. The layout will size them down appropriate if necessary.
  967.  
  968.  
  969. ------ > TEXT
  970.  
  971. .vicarious { GENERAL TEXT }
  972.  
  973. 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.
  974.  
  975. 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.
  976.  
  977. ------ > Music Player
  978.  
  979. 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.
  980.  
  981.  
  982. </cite>
  983.  
  984. -----------------------------INTERESTS----------------------------
  985.  
  986. </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">
  987.  
  988. <div id="LINE3"></div><div id="sidebar"><div ID="lower"><div class="quote">
  989.  
  990. Thy soul shall find itself alone 'mid dark thoughts of the gray tombstone; not one, of all the crowd, to pry into thine hour of secrecy.
  991.  
  992. </div><div class="music">
  993.  
  994.  
  995.  
  996.  
  997. </div></div><div ID="default">
  998.  
  999. <img src="http://i.picpar.com/B5gb.jpg">
  1000.  
  1001.  
  1002. </div><div id="info"><div class="textbox">
  1003.  
  1004. <font class="h1">Welcome! Le Chat Noir~</font>
  1005. Hello. Welcome to Le Chat Noir. Don't be shy, come on in. What would you like? We have desserts made from the finest baker, as well as, sandwiches and teas. Want coffee? No problem. We serve our customers with a smile. Oh! Don't forget the entertainment. We have an open stage for every artist.
  1006. <br>
  1007. Word of warning, the owner is evil no matter if he's smiling. Please don't scream when your head is in hands if you:
  1008. <li>Break/Throw a temper tantrum.</li>
  1009. <li>Violate/Harass.</li>
  1010. <li>Disrespect.</li>
  1011. <br>
  1012. Enjoy yourself.~
  1013.  
  1014.  
  1015. <font class="h1">Sangtae</font>
  1016. <b>NICKNAMES:</b> .
  1017. <BR><b>ALIASES:</b> None.
  1018. <BR><b>AGE:</b> Twenty-One
  1019. <BR><b>PLACE OF BIRTH:</b> Seol, Korea.
  1020. <BR><b>CURRENT RESIDENCE:</b> Le Chat Noir.
  1021. <BR><b>ETHNICITY:</b> Korean
  1022. <BR><b>HAIR COLOR:</b> Brown
  1023. <BR><b>EYE COLOR:</b> Black
  1024. <BR><b>HEIGHT:</b> 5'9
  1025. <BR><b>WEIGHT:</b> 140
  1026. <BR><b>DISFIGUREMENTS:</b>
  1027. <BR><b>STATUS:</b> Single
  1028. <BR><b>ORIENTATION:</b> Pansexual
  1029.  
  1030. <font class="h1">Gaji Algo</font>
  1031. <BR><b>BROTHER(S):</b> Twin Je-Hye
  1032. <br><b>OCCUPATION:</b> Waiter. Barista
  1033. <BR><b>EMPLOYER:</b> Himself
  1034. <BR><b>SKILLSET:</b> Wouldn't you like to know.
  1035.  
  1036. <font class="h1">Jeongi<{WIP}></font>
  1037.  
  1038.  
  1039. </div><div class="contact">
  1040.  
  1041. AIM: CONTACTINFO
  1042.  
  1043. </div></div><div id="namefield">
  1044.  
  1045. <big>S</big>eung
  1046. <big>J</big>ae-Hwa
  1047.  
  1048. </div></div>
  1049.  
  1050.  
  1051.  
  1052.  
  1053. </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">
  1054.  
  1055.  
  1056. </div></div></div></div>
  1057.  
  1058.  
  1059.  
  1060. </div>
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!