View difference between Paste ID: NhevNFsH and nSfb18Zt
SHOW: | | - or go back to the newest paste.
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-
This layout will code image sizes for you.  For the sake of simplicity you may make all photos 250px width by 250px height EXCEPT the 'default' photo in Like to Meet and the 'banner' size photo in Music. The tall 'default' image is 275px width by 500px height.  The 'banner' (Vicbox) image in Music is 500px width by 300px height.
11+
<font class="h1">Samuel</font>
12
<font class="h2">Winchester</font>
13-
If you elect to keep the color scheme for pics, the psd is here:
13+
</div>
14-
https://drive.google.com/file/d/0B79YHAkeE7SuejREWlRIbFllX3M
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-
Read the cited note under the music player for additional instructions.
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-
-----------------------------TV---------------------------
64+
65
OR just leave them as they are.  They will work for you either way.  
66-
-----------------------------BOOKS--------------------------------
66+
67
68-
-----------------------------HEROES-------------------------------
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>