Advertisement
VicariousHelpSite

Layout 146

Sep 2nd, 2014
259
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. !!!!!!!!!!!!Read It!!!!!!!!!!!!
  2.  
  3. (⊙.⊙(☉_☉)⊙.⊙)
  4.  
  5. CAN'T EMPHASIZE THIS ENOUGH: There are div ids/classes, tables (table, tr, td) and img classes in this layout. Be VERY, VERY, VERY careful not to drop off any of the coding.
  6.  
  7.  
  8. !!!!! If you flip this layout to something other than Sherlock and your character's last name is longer than that of 'Holmes', replace the code in the Sherlock Holmes name table with this one. It will save you from having to alter the code for that section.
  9.  
  10. <div class="namefield namefield-alt">
  11. <font class="h1">Samuel</font>
  12. <font class="h2">Winchester</font>
  13. </div>
  14.  
  15. ............................
  16. IMAGES
  17.  
  18.  
  19. .IMAGE LIST LIKE TO MEET {
  20. 4 pics: IMG1A & IMG2A (130px width X 165px height) / IMG1B & IMG2B (100px width X 100px height) ;
  21. Banner 1: 500px width X 250px height (Height doesn't matter);
  22. Banner 2: 500px width X 350px height (Height doesn't matter);
  23. }
  24.  
  25. .IMAGE LIST INTERESTS, etc {
  26. Top pic: 300px width X 300px height;
  27. 5 pics (diagonal) 100px width X 100px height;
  28. Big Connection Pic: 300px width X 200px height;
  29. 9 Small Connection Pics: 90px width X 90px height;
  30. }
  31.  
  32. .IMAGE LIST SIDEBAR {
  33. Hover Image: 260px width X 260px height;
  34. }
  35.  
  36. ............................
  37.  
  38. MUSIC PLAYER
  39.  
  40. REPLACE MY MUSIC PLAYER WITH YOUR OWN.
  41.  
  42. *See the note under the music player for special instructions.
  43.  
  44.  
  45.  
  46. ............................
  47.  
  48.  
  49. FOR EliteRoleplayers.net Users ONLY:
  50. The grayscale image filter for the triple pics / quote section for Firefox will not work on Elite. The Chrome filter WILL work. If you have an Elite profile AND use FF AND want to keep those images in black and white, you will need to manually alter your images to black and white via Photoshop, etc.*/
  51.  
  52. ............................
  53.  
  54.  
  55. FOR ROLEPLAYER.ME USERS:
  56.  
  57. For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:
  58. I code for ALL sites. Not every website will allow headers to be placed as <h1>Header 1</h1>. For that reason, I turn them into font classes with a period in front (.h1) in About Me and script them in the tables as I have done below.
  59.  
  60. <font class="h1">Header 1</font>
  61.  
  62. If you are on a website like RPer.me that allows regular header, underline, strong, etc coding, you can just use regular header coding for all of the header, lyric, special text labels like so:
  63. <h1>Header</h1> <strike>Strike</strike> etc..
  64.  
  65. OR just leave them as they are. They will work for you either way.
  66.  
  67.  
  68. ///////////////////////////////////////////////////
  69.  
  70.  
  71.  
  72. Don't forget to replace the XXXXX with your friend ID number.
  73.  
  74. (>‿◠)✌
  75.  
  76.  
  77. *****************************SAVE YOUR WORK AS YOU GO.*******************************
  78.  
  79.  
  80. DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.
  81.  
  82. -----------------------------ABOUT ME-----------------------------
  83.  
  84. <style type="text/css">
  85. @import url(http://fonts.googleapis.com/css?family=Raleway:400,900|Playfair+Display:400,700italic|Marck+Script|Oswald|Dynalight|Kaushan+Script|Roboto+Condensed:400,700);
  86.  
  87.  
  88. /* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
  89. /* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
  90.  
  91.  
  92. .vicarious { Structure }
  93.  
  94. body {
  95. background-color:383b41;
  96. background-image:url( );
  97. background-repeat:repeat;
  98. background-attachment:fixed;
  99. background-position:center center;
  100. }
  101.  
  102. table, tr, td { background-color:transparent; border:0px; padding:0px; margin:0px; }
  103.  
  104. .vicinterests_table, .viclike2meet_table {
  105. visibility:visible;
  106. z-index:2;
  107. position:absolute;
  108. top:0%;
  109. left:50%;
  110. border:0px;
  111. margin-top:5px;
  112. height:auto;
  113. display:inline-block;
  114. padding:0px;
  115. }
  116.  
  117. .vicinterests_table{ width:302px; height:auto; margin-left:-245px; }
  118. .vicinterests_table tr { }
  119. .vicinterests_table td { margin:0px; max-width:300px; }
  120.  
  121. .viclike2meet_table { width:502px; height:auto; margin-left:62px; }
  122. .viclike2meet_table tr { }
  123. .viclike2meet_table td { margin:0px; max-width:500px; }
  124.  
  125. .vic_table {
  126. width:100%;
  127. margin-bottom:4px;
  128. border:1px solid #0a0000;
  129. background-color:eeeeee;
  130. overflow:hidden;
  131. display:block;
  132. }
  133.  
  134. .vic_table tr { }
  135. .vic_table td { width:100%; }
  136.  
  137. .vicarious{ Google Chrome Scrollbar }
  138. ::-webkit-scrollbar {width: 10px;}
  139. ::-webkit-scrollbar-track {border: 1px solid #000000;background-color:transparent;}
  140. ::-webkit-scrollbar-thumb {border: 1px solid #000000; background-color:75777c;}
  141.  
  142. .vicarious { General Text }
  143.  
  144. table, tr, td, li, p, div, .text, .btext, a, b, i {
  145. font-family:tahoma;
  146. font-size:7pt;
  147. line-height:100%;
  148. color: 424242;
  149. padding:0px;
  150. margin:0px;
  151. text-decoration:none;
  152. text-transform:none;
  153. text-align:left;
  154. word-wrap: break-word;
  155. }
  156.  
  157. p {
  158. text-align:justify;
  159. margin-top: 5px;
  160. text-indent:10px;
  161. word-wrap: break-word;
  162. }
  163.  
  164. p::first-line { }
  165. p::first-letter { font-size: 9pt; }
  166.  
  167.  
  168. b {
  169. font-size:8pt;
  170. text-transform:uppercase;
  171. font-family: 'Roboto Condensed', sans-serif;
  172. color:393e49;
  173. }
  174.  
  175. i {
  176. font-size:10pt;
  177. color: 4f5460;
  178. font-family: 'Dynalight', cursive;
  179. }
  180.  
  181. .u, u {
  182. color: 62666f;
  183. text-decoration:underline;
  184. }
  185.  
  186. .strike, strike {
  187. color: 727885;
  188. text-decoration:line-through;
  189. letter-spacing:1pt;
  190. }
  191.  
  192. .strong, strong {
  193. font-family: "Oswald", Helvetica, sans-serif;
  194. font-size: 9pt;
  195. text-transform:uppercase;
  196. color: 2a4c5f;
  197. }
  198.  
  199. em {
  200. font-family:brush script mt;
  201. font-size:11pt;
  202. color: 396781;
  203. }
  204.  
  205. .vicarious { Headers }
  206.  
  207. .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .h13, h13, .h14, h14, .h15, h15, .one, one, .two, two, .three, three, .blockquote, blockquote {
  208. margin:0px;
  209. padding:0px;
  210. display:block;
  211. text-transform:none;
  212. }
  213.  
  214. .h3, h3 {
  215. padding:10px 45px 10px 5px;
  216. font-family: "Oswald", Helvetica, sans-serif;
  217. font-size:20pt;
  218. text-align:right;
  219. text-transform:uppercase;
  220. color:eeeeee;
  221. background-color: 2a2f39;
  222. }
  223.  
  224.  
  225. .h8, h8 {
  226. margin:10px 15px 20px 15px;
  227. font-family: 'Dynalight', cursive;
  228. font-size:20pt;
  229. line-height: 100%;
  230. text-align: center;
  231. }
  232.  
  233. .h12, h12 {
  234. margin-top:10px;
  235. padding: 10px 5px 5x 5px;
  236. font-family: 'Roboto Condensed', sans-serif;
  237. letter-spacing: 1pt ;
  238. font-size:20pt;
  239. line-height: 90%;
  240. text-align: center;
  241. text-transform: uppercase;
  242. }
  243.  
  244. .h13, h13 {
  245. padding: 5px;
  246. font-family: 'Roboto Condensed', sans-serif;
  247. letter-spacing: 1pt ;
  248. font-size:12pt;
  249. line-height: 90%;
  250. text-align:right;
  251. text-transform: uppercase;
  252. background-color:121212;
  253. color:dddddd;
  254. }
  255.  
  256. .h14, h14 {
  257. padding: 5px;
  258. font-family: 'Raleway', sans-serif;
  259. font-size:12pt;
  260. line-height: 90%;
  261. text-align:center;
  262. color:121212;
  263. }
  264.  
  265. .blockquote, blockquote {
  266. height:auto;
  267. text-align:justify;
  268. margin:5px 5px 5px 10px;
  269. padding: 5px 5px 5px 10px;
  270. border-left:10px double #2a2f39;
  271. background-color:eeeeee;
  272. }
  273.  
  274. .cite {font-size:0px; color:transparent;display:block; height:0px;}
  275.  
  276. .vicarious { Divs }
  277.  
  278. .vicarious { LIKE TO MEET SECTION }
  279.  
  280. /* Name Table */
  281.  
  282. .namefield {
  283. height:225px;
  284. overflow:hidden;
  285. }
  286.  
  287. .namefield .h1, .namefield h1, .namefield .h2, .namefield h2 {
  288. position:absolute;
  289. margin-left:0px;
  290. overflow:hidden;
  291. color:383b41;
  292. }
  293.  
  294. .namefield .h1, .namefield h1 {
  295. margin-top:15px;
  296. padding: 0px 10px 0px 5px;
  297. font-family: 'Dynalight', cursive;
  298. letter-spacing: 0pt;
  299. font-size:75px;
  300. height:85px;
  301. line-height:85px;
  302. width:485px;
  303. text-align:right;
  304. text-shadow: 1px 1px 1px rgba(0,0,0,0.8) ;
  305. }
  306.  
  307. .namefield-alt .h1, .namefield-alt h1 {
  308. margin-top:50px;
  309. font-size:90px;
  310. height:105px;
  311. line-height:105px;
  312. }
  313.  
  314. .namefield .h1::first-letter, .namefield h1::first-letter {
  315. font-size: 90px;
  316. text-transform:uppercase;
  317. }
  318.  
  319. .namefield-alt .h1::first-letter, .namefield-alt h1::first-letter {
  320. font-size: 90px;
  321. text-transform:uppercase;
  322. }
  323.  
  324. .namefield .h2, .namefield h2 {
  325. margin-top:0px;
  326. padding: 0px 5px 0px 5px;
  327. font-family: "Oswald", Helvetica, sans-serif;
  328. letter-spacing: 1pt;
  329. font-size:130px;
  330. height:225px;
  331. line-height:225px;
  332. width:490px;
  333. text-align:left;
  334. text-transform:uppercase;
  335. text-shadow: -1px -1px 1px rgba(0,0,0,0.8) ;
  336. }
  337.  
  338. .namefield-alt .h2, .namefield-alt h2 {
  339. font-size:80px;
  340. letter-spacing: -3pt;
  341. }
  342.  
  343. .namefield .h2::first-letter, .namefield h2::first-letter, .namefield-alt .h2::first-letter, .namefield-alt h2::first-letter {
  344. font-size: 225px;
  345. }
  346.  
  347. /* 4 pics and Quote Table */
  348.  
  349. .Stacker {
  350. width:500px;
  351. height:175px;
  352. overflow:hidden;
  353. }
  354.  
  355. .Stacker .quote{
  356. width:220px;
  357. height:175px;
  358. margin-top:5px;
  359. margin-left:140px;
  360. }
  361.  
  362. .img1a, .img1b, .img2a, .img2b, .Stacker .quote {position:absolute; overflow:hidden;}
  363. .img1a, .img2a {width:130px; height:165px; margin-top:5px;}
  364. .img1b, .img2b {width:100px; height:100px; margin-top:70px;}
  365. .img1a {margin-left:5px;}
  366. .img1b {margin-left:75px;}
  367. .img2a {margin-left:365px;}
  368. .img2b {margin-left:325px;}
  369.  
  370. .img1b, .img2b, .img1a, .img2a {
  371. outline:solid;
  372. outline-offset:-7px;
  373. outline-width:2px;
  374. outline-color: dddddd;
  375. color:dddddd;
  376. }
  377.  
  378. .Stacker .h5, .Stacker h5, .Stacker .h6, .Stacker h6 {
  379. overflow:hidden;
  380. text-align:center;
  381. text-transform:uppercase;
  382. color: 222222 ;
  383. }
  384.  
  385. .Stacker .h5, .Stacker h5 {
  386. font-family: "Oswald", Helvetica, sans-serif;
  387. font-size:50px;
  388. height:60px;
  389. line-height:60px;
  390. }
  391.  
  392. .Stacker .h6, .Stacker h6 {
  393. margin:5px 40px 0px 40px;
  394. font-family: 'Playfair Display', serif;
  395. font-size:23px;
  396. height:100px;
  397. line-height:105%;
  398. }
  399.  
  400. .Stacker .h6::first-line, .Stacker h6::first-line { font-size:16px; letter-spacing:1pt; }
  401. .Stacker big { font-family: 'Raleway', sans-serif; font-size:36px; }
  402. .Stacker small { font-size:19px; }
  403.  
  404. /*Present Day & History Tables */
  405.  
  406. .about {
  407. width:432px;
  408. height:165px;
  409. margin:25px;
  410. padding:5px;
  411. overflow:auto;
  412. display:inline-block;
  413. border:4px double #2a2f39;
  414. outline: 2px solid;
  415. outline-offset:5px;
  416. outline-color:3a404a;
  417. background-color:dbdcdd;
  418. }
  419.  
  420. .vicarious { INTERESTS, ETC}
  421.  
  422. /* SIDE TEXT TABLE */
  423.  
  424. .Sidetext_Table {
  425. width:300px;
  426. height:280px;
  427. overflow:hidden;
  428. }
  429.  
  430. .about2, .sidetext {
  431. position:absolute;
  432. }
  433.  
  434. .about2 {
  435. margin-left:5px;
  436. margin-top:5px;
  437. padding:5px;
  438. width:240px;
  439. height:260px;
  440. overflow:auto;
  441. background-color:dbdcdd;
  442. }
  443.  
  444. .sidetext {
  445. margin-top:120px;
  446. margin-left:140px;
  447. width:280px;
  448. height:40px;
  449. transform: rotate(90deg) ;
  450. -webkit-transform: rotate(90deg) ;
  451. -moz-transform: rotate(90deg) ;
  452. -o-transform: rotate(90deg) ;
  453. -ms-transform: rotate(90deg) ;
  454. }
  455.  
  456. .sidetext .h4, sidetext .h4 {
  457. padding: 0px 0px 0px 5px;
  458. font-family: "Oswald", Helvetica, sans-serif;
  459. letter-spacing:4pt;
  460. font-size:40px;
  461. height:40px;
  462. line-height:40px;
  463. text-align:center;
  464. text-transform:uppercase;
  465. color:ffffff;
  466. background-color:dbdcdd;
  467. }
  468.  
  469. /* Diagonal Pic Tables */
  470.  
  471. .Diag {
  472. width:300px;
  473. height:100px;
  474. }
  475.  
  476. .Diag .quote1 {
  477. position:absolute;
  478. margin-top:0px;
  479. margin-left:105px;
  480. height:100px;
  481. width:195px;
  482. }
  483.  
  484. .Diag .quote2 {
  485. position:absolute;
  486. margin-top:0px;
  487. margin-left:0px;
  488. height:100px;
  489. width:195px;
  490. }
  491.  
  492. .imgA, .imgB, .imgC {
  493. -webkit-filter: grayscale(100%);
  494. filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  495. width:100px;
  496. height:100px;
  497. position:absolute;
  498. margin-top:0px;
  499. }
  500.  
  501. .imgD, .imgE {
  502. width:100px;
  503. height:100px;
  504. position:absolute;
  505. margin-top:0px;
  506. }
  507.  
  508. .imgA, .imgD {margin-left:0px;}
  509. .imgB {margin-left:100px;}
  510. .imgC, .imgE {margin-left:200px;}
  511.  
  512.  
  513. .Diag .one, .Diag one, .Diag .two, .Diag two, .Diag .three, .Diag three {
  514. height:30px;
  515. line-height:30px;
  516. }
  517.  
  518. .Diag .one, .Diag one {
  519. font-family: 'Playfair Display', serif;
  520. font-size:29pt;
  521. text-align:left;
  522. text-transform:uppercase;
  523. color: 222222 ;
  524. }
  525.  
  526. .Diag .two, .Diag two {
  527. font-family: 'Marck Script', cursive;
  528. font-size:19pt;
  529. text-align:center;
  530. text-transform:lowercase;
  531. color: 222222 ;
  532. }
  533.  
  534. .Diag .three, .Diag three {
  535. padding:5px 0px 0px 0px;
  536. font-family: "Oswald", Helvetica, sans-serif;
  537. font-size:29pt;
  538. letter-spacing:1pt;
  539. text-align:center;
  540. text-shadow: 1px 1px 1px rgba(0,0,0,0.8) ;
  541. text-transform:uppercase;
  542. color: ffffff ;
  543. }
  544.  
  545. .Diag .h10, .Diag h10 {
  546. font-family: "Oswald", Helvetica, sans-serif;
  547. letter-spacing:-1pt;
  548. font-size:40pt;
  549. height:50px;
  550. line-height:50px;
  551. text-align:center;
  552. text-transform:uppercase;
  553. color: 222222;
  554. }
  555.  
  556. .Diag .h11, .Diag h11 {
  557. font-family: "Oswald", Helvetica, sans-serif;
  558. font-size:35pt;
  559. height:50px;
  560. line-height:50px;
  561. letter-spacing:-1pt;
  562. text-align:center;
  563. text-transform:uppercase;
  564. color: 222222 ;
  565. }
  566.  
  567. /* Stats Table */
  568.  
  569. .stats {
  570. padding:10px;
  571. width:280px;
  572. height:240px;
  573. overflow:auto;
  574. color:575758;
  575. background-color: 2a2f39;
  576. text-align:justify;
  577. }
  578.  
  579. .stats p { color:575758;line-height:110%; }
  580. .stats b { padding:2px; font-size:7pt; color:ced3cd; }
  581. .stats i { color:eeeeee; }
  582. .stats .u, .stats u { color:e2e7e0; }
  583. .stats .strike, .stats strike { color:e0e1db; }
  584. .stats .strong, .stats strong { color:7e8488;padding:2px; line-height:110%;}
  585. .stats em { color:7a888f; }
  586. .stats::-webkit-scrollbar-thumb {background-color:b1b1b1;}
  587.  
  588.  
  589. /* Connection ( Big Pic ) Table */
  590.  
  591. .HovTable {
  592. width:300px;
  593. height:200px;
  594. background-size:300px 200px;
  595. background-repeat:none;
  596. background-position:center center;
  597. overflow:hidden;
  598. }
  599.  
  600. .HovTable .mask {
  601. position:absolute;
  602. margin-top: 160px;
  603. margin-left:0px;
  604. width:300px;
  605. height:20px;
  606. -webkit-transition: all 0.6s linear;
  607. -moz-transition: all 0.6s linear;
  608. -ms-transition: all 0.6s linear;
  609. -o-transition: all 0.6s linear;
  610. transition: all 0.6s linear;
  611. overflow:hidden;
  612. background-color: rgba(255,255,255,0.5);
  613. }
  614.  
  615. .HovTable:hover .mask {
  616. margin-top: 0px;
  617. height:200px;
  618. }
  619.  
  620. .name, .info {
  621. -webkit-transition: all 0.6s linear;
  622. -moz-transition: all 0.6s linear;
  623. -ms-transition: all 0.6s linear;
  624. -o-transition: all 0.6s linear;
  625. transition: all 0.6s linear;
  626. background-color:dbdcdd;
  627. }
  628.  
  629. .HovTable:hover .name, .HovTable:hover .info {
  630. -webkit-transition: all 0.6s linear;
  631. -moz-transition: all 0.6s linear;
  632. -ms-transition: all 0.6s linear;
  633. -o-transition: all 0.6s linear;
  634. transition: all 0.6s linear;
  635. background-color:dbdcdd;
  636. }
  637.  
  638. .name {
  639. margin: 0px;
  640. height:20px;
  641. width:290px;
  642. font-size:16px;
  643. padding:0px 10px 0px 0px;
  644. line-height:20px;
  645. text-align:right;
  646. display:block;
  647. overflow:hidden;
  648. font-family: 'Raleway', sans-serif;
  649. border-bottom:0px solid #000000;
  650. }
  651.  
  652. .HovTable:hover .name {
  653. margin:20px 15px 0px 15px;
  654. width:260px;
  655. border-bottom:2px solid #000000;
  656. }
  657.  
  658. .info {
  659. margin:5px 15px 15px 15px;
  660. padding:5px;
  661. height:125px;
  662. width:260px;
  663. opacity:0;
  664. overflow:auto;
  665. }
  666.  
  667. .HovTable:hover .info { opacity:1; }
  668.  
  669.  
  670. /* Connections Table - 9 pics */
  671.  
  672. .conns {
  673. width:300px;
  674. height:300px;
  675. overflow:hidden;
  676. }
  677.  
  678. .conns img {
  679. float:left;
  680. overflow:hidden;
  681. margin:0px 5px 0px 0px;
  682. width:80px;
  683. height:80px;
  684. border:5px solid #999999;
  685. -webkit-border-radius: 0px;
  686. -moz-border-radius: 0px;
  687. border-radius: 0px;
  688. -webkit-transition: all 0.2s ease-in-out;
  689. -moz-transition: all 0.2s ease-in-out;
  690. -ms-transition: all 0.2s ease-in-out;
  691. -o-transition: all 0.2s ease-in-out;
  692. transition: all 0.2s ease-in-out;
  693. }
  694.  
  695. .conn1:hover img, .conn2:hover img, .conn3:hover img, .conn4:hover img, .conn5:hover img, .conn6:hover img, .conn7:hover img, .conn8:hover img, .conn9:hover img {
  696. width:50px;
  697. height:50px;
  698. border:20px solid #333333;
  699. -webkit-border-radius: 360px;
  700. -moz-border-radius: 360px;
  701. border-radius: 360px;
  702. -webkit-transition: all 0.6s ease-in-out .6s;
  703. -moz-transition: all 0.6s ease-in-out .6s;
  704. -ms-transition: all 0.6s ease-in-out .6s;
  705. -o-transition: all 0.6s ease-in-out .6s;
  706. transition: all 0.6s ease-in-out .6s;
  707. }
  708.  
  709. .conns .info {
  710. float:right;
  711. margin:0px 0px 0px 5px;
  712. padding:5px;
  713. width:175px;
  714. height:80px;
  715. overflow:hidden;
  716. background-color:eeeeee;
  717. opacity:0;
  718. -webkit-transition: all 0.2s ease-in-out;
  719. -moz-transition: all 0.2s ease-in-out;
  720. -ms-transition: all 0.2s ease-in-out;
  721. -o-transition: all 0.2s ease-in-out;
  722. transition: all 0.2s ease-in-out;
  723. }
  724.  
  725. .conn1:hover .info, .conn2:hover .info, .conn3:hover .info, .conn4:hover .info, .conn5:hover .info, .conn6:hover .info, .conn7:hover .info, .conn8:hover .info, .conn9:hover .info {
  726. opacity:1;
  727. overflow:auto;
  728. -webkit-transition: all 0.6s ease-in-out 1.2s;
  729. -moz-transition: all 0.6s ease-in-out 1.2s;
  730. -ms-transition: all 0.6s ease-in-out 1.2s;
  731. -o-transition: all 0.6s ease-in-out 1.2s;
  732. transition: all 0.6s ease-in-out 1.2s;
  733. }
  734.  
  735. .conn1, .conn2, .conn3, .conn4, .conn5, .conn6, .conn7, .conn8, .conn9 {
  736. background-color:eeeeee;
  737. position:absolute;
  738. margin-top: 7.5px;
  739. width:90px;
  740. height:90px;
  741. overflow:hidden;
  742. z-index:2;
  743. -webkit-transition: all 0.2s linear;
  744. -moz-transition: all 0.2s linear;
  745. -ms-transition: all 0.2s linear;
  746. -o-transition: all 0.2s linear;
  747. transition: all 0.2s linear;
  748. }
  749.  
  750. .conn1, .conn2, .conn3 {margin-top: 7.5px;}
  751. .conn4, .conn5, .conn6 {margin-top: 105px;}
  752. .conn7, .conn8, .conn9 {margin-top: 202.5px;}
  753. .conn1, .conn4, .conn7 { margin-left: 7.5px; }
  754. .conn2, .conn5, .conn8 { margin-left: 105px; }
  755. .conn3, .conn6, .conn9 { margin-left: 202.5px;}
  756.  
  757. .conn1:hover, .conn2:hover, .conn3:hover, .conn4:hover, .conn5:hover, .conn6:hover, .conn7:hover, .conn8:hover, .conn9:hover {
  758. width:285px;
  759. z-index:3;
  760. -webkit-transition: all 0.6s linear;
  761. -moz-transition: all 0.6s linear;
  762. -ms-transition: all 0.6s linear;
  763. -o-transition: all 0.6s linear;
  764. transition: all 0.6s linear;
  765. }
  766.  
  767. .conn2:hover, .conn3:hover, .conn5:hover, .conn6:hover, .conn8:hover, .conn9:hover { margin-left: 7.5px; }
  768.  
  769.  
  770. .vicarious { Movies }
  771.  
  772. /* SIDEBAR */
  773.  
  774. #sidebar {
  775. visibility:visible;
  776. z-index:2;
  777. position:fixed;
  778. top:0%;
  779. left:50%;
  780. border:1px solid #0a0000;
  781. background-color:dbdcdd;
  782. background-image:url(http://i60.tinypic.com/6869s2.jpg);
  783. background-repeat:repeat;
  784. margin-top:5px;
  785. margin-left:-555px;
  786. width:300px;
  787. height:100%;
  788. }
  789.  
  790. .vicbox {
  791. z-index:3;
  792. position: relative;
  793. width: 260px;
  794. height: 260px;
  795. margin: 10px;
  796. float: left;
  797. border: 10px solid #ffffff;
  798. overflow: hidden;
  799. text-align: center;
  800. }
  801.  
  802. .vicbox .mask, .vicbox .content {
  803. top: 0;
  804. left: 0;
  805. width: 260px;
  806. height: 260px;
  807. position: absolute;
  808. overflow: hidden;
  809. }
  810.  
  811. .vicbox img {
  812. width:260px;
  813. height:260px;
  814. display: block;
  815. position: relative
  816. }
  817.  
  818. .vicbox .mask-1,
  819. .vicbox .mask-2 {
  820. height:361px;
  821. width: 361px;
  822. background-color: rgba(255,255,255,0.5);
  823. opacity: 1;
  824. transition: all 0.3s ease-in-out 0.6s;
  825. }
  826.  
  827. .vicbox .mask-1 {
  828. left: auto;
  829. right: 0px;
  830. transform: rotate(56.5deg) translateX(-180px);
  831. transform-origin: 100% 0%;
  832. }
  833. .vicbox .mask-2 {
  834. top: auto;
  835. bottom: 0px;
  836. transform: rotate(56.5deg) translateX(180px);
  837. transform-origin: 0% 100%;
  838. }
  839.  
  840. .vicbox .content {
  841. background-color: rgba(255,255,255,0.9);
  842. height: 0px;
  843. opacity: 0.5;
  844. width: 260px;
  845. overflow: hidden;
  846. text-align:center;
  847. transform: rotate(-33.5deg) translate(-112px,166px);
  848. transform-origin: 0% 100%;
  849. transition: all 0.4s ease-in-out 0.3s;
  850. }
  851.  
  852. #sidebar:hover .content {
  853. margin:10px;
  854. height: 220px;
  855. width: 220px;
  856. padding:10px;
  857. opacity: 0.9;
  858. overflow:auto;
  859. transform: rotate(0deg) translate(0px,0px);
  860. }
  861.  
  862. #sidebar:hover .mask-1,
  863. #sidebar:hover .mask-2{
  864. transition-delay: 0s;
  865. }
  866.  
  867. #sidebar:hover .mask-1{
  868. transform: rotate(56.5deg) translateX(1px);
  869. transform: rotate(56.5deg) translateX(37px);
  870. }
  871.  
  872. #sidebar:hover .mask-2 {
  873. transform: rotate(56.5deg) translateX(-1px);
  874. transform: rotate(56.5deg) translateX(-37px);
  875. }
  876.  
  877. #sidebar .h15, #sidebar h15 {
  878. margin:10px 5px 5px 5px;
  879. padding:5px;
  880. line-height:100%;
  881. font-family: "Oswald", Helvetica, sans-serif;
  882. font-size:12pt;
  883. text-align:center;
  884. text-transform:uppercase;
  885. color:eeeeee;
  886. background-color: 2a2f39;
  887. opacity:0;
  888. -webkit-transition: all 0.6s linear;
  889. -moz-transition: all 0.6s linear;
  890. -ms-transition: all 0.6s linear;
  891. -o-transition: all 0.6s linear;
  892. transition: all 0.6s linear;
  893. }
  894.  
  895. #sidebar:hover .h15, #sidebar:hover h15 {
  896. opacity:1;
  897. }
  898.  
  899. #sidebar .contact, #sidebar .music, #sidebar .links {
  900. z-index:2;
  901. position:absolute;
  902. margin-left:20px;
  903. margin-top:50px;
  904. width:260px;
  905. text-align:center;
  906. opacity:0;
  907. overflow:hidden;
  908. }
  909.  
  910. #sidebar .links {
  911. height:auto;
  912. overflow:hidden;
  913. }
  914.  
  915. #sidebar:hover .links { margin-top:355px;}
  916.  
  917. #sidebar a {
  918. font-family: 'Roboto Condensed', sans-serif;
  919. text-transform:uppercase;;
  920. text-decoration:none;
  921. height:15px;
  922. line-height:15px;
  923. width:15px;
  924. margin:10px 2px;
  925. overflow:hidden;
  926. color:eeeeee;
  927. background-color: 2a2f39;
  928. display:inline-block;
  929. -webkit-transition: all .5s ease-in-out ;
  930. -moz-transition: all .5s ease-in-out ;
  931. -ms-transition: all .5s ease-in-out ;
  932. -o-transition: all .5s ease-in-out ;
  933. transition: all .5s ease-in-out ;
  934. font-size:0pt;
  935. text-align:center;
  936. }
  937.  
  938. #sidebar a:hover {
  939. width:45px;
  940. font-size:9px;
  941. }
  942.  
  943. #sidebar .contact {
  944. height:25px;
  945. line-height:25px;
  946. font-family: "Oswald", Helvetica, sans-serif;
  947. font-size:14pt;
  948. text-transform:uppercase;
  949. display:block;
  950. color:2a2f39;
  951. background-color:ffffff;
  952. }
  953.  
  954. #sidebar .music { height:20px; background-color:ffffff; }
  955.  
  956. #sidebar:hover .music, #sidebar:hover .contact, #sidebar:hover .links { opacity:1; }
  957.  
  958. #sidebar:hover .contact { margin-top:300px; }
  959.  
  960. #sidebar:hover .music { margin-top:330px; }
  961.  
  962. #sidebar .links, #sidebar:hover .contact {
  963. -webkit-transition: all 1.6s linear 3.6s;
  964. -moz-transition: all 1.6s linear 3.6s;
  965. -ms-transition:all 1.6s linear 3.6s;
  966. -o-transition: all 1.6s linear 3.6s;
  967. transition: all 1.6s linear 3.6s;
  968. }
  969.  
  970. #sidebar .music, #sidebar:hover .music {
  971. -webkit-transition: all 1.6s linear 2.6s;
  972. -moz-transition: all 1.6s linear 2.6s;
  973. -ms-transition:all 1.6s linear 2.6s;
  974. -o-transition: all 1.6s linear 2.6s;
  975. transition: all 1.6s linear 2.6s;
  976. }
  977.  
  978. #sidebar .contact, #sidebar:hover .links {
  979. -webkit-transition: all 1.6s linear 1.6s;
  980. -moz-transition: all 1.6s linear 1.6s;
  981. -ms-transition: all 1.6s linear 1.6s;
  982. -o-transition: all 1.6s linear 1.6s;
  983. transition: all 1.6s linear 1.6s;
  984. }
  985.  
  986.  
  987.  
  988. .vicarious{ Hide Codes }
  989. .profileInfo, .userProfileURL, .friendsComments, .blurbs, .friendSpace, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userProfiledetail, .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .blacktext12, .navigationBar, .btext, .redlink, .redtext, .blacktext10, tr#groups, .navigationBar, .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
  990. table table table table td {width:0px;}
  991. .contactTable td, table table td.text table td,table table table table table td {width:auto;}
  992. div div select, div div form {display:none !important;}
  993. select { visibility:hidden!important; WIDTH:0px!important;}
  994. table div {display:none;}
  995. table table div {display:block;}
  996. .clearfix {display:none !important;position:absolute!important;}
  997. div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
  998. .profileInfo tr tr td { visibility:hidden; }
  999. .profileInfo td.text { visibility:visible; }
  1000. .vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
  1001. </style></td></tr></table><table style="display:none"><tr><td>
  1002.  
  1003.  
  1004.  
  1005.  
  1006.  
  1007. -----------------------------LIKE TO MEET-------------------------
  1008.  
  1009. </td></tr></table></td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" class="viclike2meet_table"><tr><td valign="top"><table cellspacing="0" cellpadding="0" style="width:500px;"><tr><td>
  1010.  
  1011. <font class="cite">
  1012. The above table code must remain at the top. FULL tables below can be rearranged.
  1013. </font>
  1014.  
  1015. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1016.  
  1017. <div class="namefield">
  1018. <font class="h1">Sherlock</font>
  1019. <font class="h2">Holmes</font>
  1020. </div>
  1021.  
  1022. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1023.  
  1024. <div class="Stacker">
  1025.  
  1026. <div class="Quote">
  1027.  
  1028. <font class="h5">Sentiment</font>
  1029.  
  1030. <font class="h6">is a chemical
  1031. <big>defect</big>
  1032. <small>found on the</small>
  1033. losing side
  1034. </font>
  1035.  
  1036. </div>
  1037.  
  1038. <img class="img1a" src="http://i60.tinypic.com/53meer.jpg">
  1039. <img class="img1b" src="http://i60.tinypic.com/2dtyrf9.jpg">
  1040. <img class="img2a" src="http://i62.tinypic.com/9pq7ae.jpg">
  1041. <img class="img2b" src="http://i59.tinypic.com/21e15ic.jpg">
  1042.  
  1043. </div>
  1044.  
  1045. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1046.  
  1047. <img src="http://i59.tinypic.com/jkk1sy.jpg">
  1048.  
  1049.  
  1050. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1051.  
  1052. <font class="h12">History | Origins</font>
  1053.  
  1054. <div class="about">
  1055.  
  1056. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
  1057.  
  1058. <font class="blockquote">
  1059. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1060. </font>
  1061.  
  1062. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
  1063.  
  1064. </div>
  1065.  
  1066. <font class="h8">
  1067. Shut up everybody, shut up!
  1068. <BR>Don’t move, don’t speak, don’t breathe, I’m trying to think.
  1069. </font>
  1070.  
  1071.  
  1072. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1073.  
  1074. <img src="http://i59.tinypic.com/fllmyw.jpg">
  1075.  
  1076.  
  1077. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1078.  
  1079. <font class="h12">Present Day</font>
  1080.  
  1081. <div class="about">
  1082.  
  1083. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1084.  
  1085. </div>
  1086.  
  1087. <font class="h8">
  1088. I am the most unpleasant, rude, ignorant and all-round obnoxious arsehole that anyone could possibly have the misfortune to meet.
  1089. </font>
  1090.  
  1091.  
  1092.  
  1093.  
  1094. -----------------------------INTERESTS----------------------------
  1095.  
  1096. </td></tr></table></td></tr></table></td></tr></table><table class="vicinterests_table" cellspacing="0" cellpadding="0"><tr><td valign="top" padding="0"><table cellspacing="0" cellpadding="0" style="width:300px;"><tr><td>
  1097.  
  1098. <font class="cite">
  1099. The above table code must remain at the top. FULL tables below can be rearranged.</font>
  1100.  
  1101. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1102.  
  1103. <img src="http://i62.tinypic.com/oglaj6.jpg">
  1104.  
  1105. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1106.  
  1107. <font class="h3">I'm not a</font>
  1108.  
  1109. <div class="Sidetext_Table">
  1110.  
  1111. <div class="about2">
  1112. <p>You can put your personality details here. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1113.  
  1114. <BR>
  1115.  
  1116. <em>Emphasized</em>
  1117. <b>Bold</b>
  1118. <i>Italics</i>
  1119. <font class="u">underline</font>
  1120. <font class="strike">strike</font>
  1121. <font class="strong">strong</font>
  1122.  
  1123. </div><div class="sidetext">
  1124.  
  1125. <font class="h4">psychopath</font>
  1126.  
  1127. </div></div>
  1128.  
  1129.  
  1130. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1131.  
  1132. <div class="Diag">
  1133.  
  1134. <img class="imgA" src="http://i62.tinypic.com/2gxjij7.jpg">
  1135.  
  1136. <div class="quote1">
  1137. <font class="one">I'm a</font>
  1138. <font class="two">high-functioning</font>
  1139. <font class="three">sociopath</font>
  1140. </div></div>
  1141.  
  1142.  
  1143. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1144.  
  1145. <div class="Diag">
  1146.  
  1147. <img class="imgD" src="http://i62.tinypic.com/2gxjij7.jpg">
  1148.  
  1149. <img class="imgB" src="http://i62.tinypic.com/2gxjij7.jpg">
  1150.  
  1151. <img class="imgE" src="http://i62.tinypic.com/2gxjij7.jpg">
  1152.  
  1153. </div>
  1154.  
  1155.  
  1156. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1157.  
  1158. <div class="Diag">
  1159.  
  1160. <img class="imgC" src="http://i62.tinypic.com/2gxjij7.jpg">
  1161.  
  1162. <div class="quote2">
  1163. <font class="h10">Do your</font>
  1164. <font class="h11">research</font>
  1165. </div></div>
  1166.  
  1167. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1168.  
  1169. <div class="stats">
  1170. <font class="strong">»Legal</font>
  1171. <B>Nicknames:</B> Put Your Information Here
  1172. <B>Aliases:</B> Put Your Information Here
  1173. <B>Date Of Birth:</B> Put Your Information Here
  1174. <B>Place Of Birth:</B> Put Your Information Here
  1175. <B>Current Residence:</B> Put Your Information Here
  1176.  
  1177. <font class="strong">»Physical</font>
  1178. <B>Ethnicity:</B> Put Your Information Here
  1179. <B>Hair Color:</B> Put Your Information Here
  1180. <B>Eye Color:</B> Put Your Information Here
  1181. <B>Height:</B> Put Your Information Here
  1182. <B>Weight:</B> Put Your Information Here
  1183. <B>Birthmarks/Scars:</B> Put Your Information Here
  1184.  
  1185. <font class="strong">»Biological</font>
  1186. <B>Mother:</B> Put Your Information Here
  1187. <B>Father:</B> Put Your Information Here
  1188. <B>Sister(S):</B> Put Your Information Here
  1189. <B>Brother(S):</B> Put Your Information Here
  1190. <B>Other Family:</B> Put Your Information Here
  1191.  
  1192. <font class="strong">»Relationships</font>
  1193. <B>Status:</B> Put Your Information Here
  1194. <B>Orientation:</B> Put Your Information Here
  1195. <B>Current:</B> Put Your Information Here
  1196. <B>Former:</B> Put Your Information Here
  1197.  
  1198. <font class="strong">»Education</font>
  1199. <B>High School</B> Put Your Information Here
  1200. <B>College</B> Put Your Information Here
  1201. <B>Major</B> Put Your Information Here
  1202. <B>Degree</B> Put Your Information Here
  1203.  
  1204. <font class="strong">»Employment</font>
  1205. <B>Occupation:</B> Put Your Information Here
  1206. <B>Job Description:</B> Put Your Information Here
  1207. <B>Employer:</B> Put Your Information Here
  1208. <B>Skill Set:</B> Put Your Information Here
  1209.  
  1210.  
  1211. <p><em>Emphasized</em>
  1212. <b>Bold</b>
  1213. <i>Italics</i>
  1214. <font class="u">underline</font>
  1215. <font class="strike">strike</font>
  1216. <font class="strong">strong</font>
  1217.  
  1218. </div>
  1219.  
  1220.  
  1221. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1222.  
  1223. <div class="HovTable" style="background-image:url(http://i59.tinypic.com/2vs0rjd.jpg);">
  1224.  
  1225. <div class="mask">
  1226.  
  1227. <div class="name">Connection Name or Title</div>
  1228.  
  1229. <div class="info">
  1230.  
  1231. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1232.  
  1233. </div></div></div>
  1234.  
  1235.  
  1236. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1237.  
  1238. <font class="h14">
  1239.  
  1240. Listen, what I said before John, I meant it. I don’t have friends; I’ve just got one.
  1241.  
  1242. </font>
  1243.  
  1244.  
  1245. -----------------------------MUSIC--------------------------------
  1246.  
  1247. </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
  1248.  
  1249. <div class="conns"><div class="conn1">
  1250.  
  1251. <img src="http://i62.tinypic.com/2nizexh.jpg">
  1252.  
  1253. <div class="info">
  1254.  
  1255. <font class="h13">Connection Name</font>
  1256. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1257.  
  1258.  
  1259. </div></div><div class="conn2">
  1260.  
  1261. <img src="http://i59.tinypic.com/5tuzye.jpg">
  1262.  
  1263. <div class="info">
  1264.  
  1265. <font class="h13">Connection Name</font>
  1266. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1267.  
  1268. </div></div><div class="conn3">
  1269.  
  1270. <img src="http://i61.tinypic.com/2r44rad.jpg">
  1271.  
  1272. <div class="info">
  1273.  
  1274. <font class="h13">Connection Name</font>
  1275. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1276.  
  1277. </div></div><div class="conn4">
  1278.  
  1279. <img src="http://i59.tinypic.com/o6xm45.jpg">
  1280.  
  1281. <div class="info">
  1282.  
  1283. <font class="h13">Connection Name</font>
  1284. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1285.  
  1286. </div></div><div class="conn5">
  1287.  
  1288. <img src="http://i59.tinypic.com/o6xm45.jpg">
  1289.  
  1290. <div class="info">
  1291.  
  1292. <font class="h13">Connection Name</font>
  1293. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1294.  
  1295.  
  1296. </div></div><div class="conn6">
  1297.  
  1298. <img src="http://i59.tinypic.com/o6xm45.jpg">
  1299.  
  1300. <div class="info">
  1301.  
  1302. <font class="h13">Connection Name</font>
  1303. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1304.  
  1305. </div></div><div class="conn7">
  1306.  
  1307. <img src="http://i59.tinypic.com/o6xm45.jpg">
  1308.  
  1309. <div class="info">
  1310.  
  1311. <font class="h13">Connection Name</font>
  1312.  
  1313. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1314.  
  1315. </div></div><div class="conn8">
  1316.  
  1317. <img src="http://i59.tinypic.com/o6xm45.jpg">
  1318.  
  1319. <div class="info">
  1320.  
  1321. <font class="h13">Connection Name</font>
  1322. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1323.  
  1324.  
  1325. </div></div><div class="conn9">
  1326.  
  1327. <img src="http://i59.tinypic.com/o6xm45.jpg">
  1328.  
  1329. <div class="info">
  1330.  
  1331. <font class="h13">Connection Name</font>
  1332. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  1333.  
  1334.  
  1335. </div></div></div>
  1336.  
  1337.  
  1338. -----------------------------MOVIES-------------------------------
  1339.  
  1340. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0"><tr><td valign="top" align="center"><table cellspacing="0" cellpadding="0"><tr><td>
  1341.  
  1342. <div id="sidebar"><div class="vicbox">
  1343.  
  1344. <img src="http://i60.tinypic.com/29pc2ms.jpg">
  1345.  
  1346. <div class="mask mask-1"></div><div class="mask mask-2"></div><div class="content">
  1347.  
  1348. <font class="h15">Verses</font>
  1349. Verse | Verse | Verse | Verse
  1350.  
  1351. <font class="h15">Writing Style</font>
  1352. Multiple Paragraphs to Novella
  1353.  
  1354. <font class="h15">Dues</font>
  1355. Comments (0) Starters (0) Messages (0)
  1356.  
  1357. </div></div><div class="links">
  1358.  
  1359. <a href="/logincomplete.php">Home</a>
  1360. <a href="/invite_friend.php?friend_id=xxxxxx">Add</a>
  1361. <a href="/send_message.php?member_id=xxxxxx">Message</a>
  1362. <a href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
  1363. <a href="/gallery.php?member_id=xxxxxx">Photos</a>
  1364. <a href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
  1365. <a href="/#">Extra</a>
  1366. <a href="/#">Extra</a>
  1367. <a href="/#">Extra</a>
  1368.  
  1369. </div><div class="music">
  1370.  
  1371. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
  1372. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  1373. <param name="bgcolor" value="#ffffff" />
  1374. <param name="wmode" value="opaque" />
  1375. <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/fq0ub3ppce/BBC_Sherlock_s_Theme_Melody.mp3&autoplay=1&bgcolor=ffffff&loadingcolor=2a2f39&buttoncolor=2a2f39&slidercolor=2a2f39" />
  1376. </object>
  1377.  
  1378. <font class="cite">You will note a line of code that starts with param name="wmode" above. 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 code will keep it hidden until the sidebar has been hovered over.</font>
  1379.  
  1380. </div><div class="contact">
  1381.  
  1382. AIM: CONTACTINFO
  1383.  
  1384. </div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement