View difference between Paste ID: iKRTVxCs and iPk9tUTV
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
 
9
IMAGES
10
11
Image dimensions are located in Like to Meet.
12
13
If you elect to keep the color scheme/overlays for pics, the psd is here:
14
15-
https://drive.google.com/file/d/0B79YHAkeE7SuWDZDQmY2b0lhNFU
15+
https://drive.google.com/file/d/0B79YHAkeE7SuSEU1MlF4OW01QWc
16
 ............................
17
   
18
MUSIC PLAYER
19
 
20
REPLACE MY MUSIC PLAYER WITH YOUR OWN.  
21
22
Read the cited note under the music player for additional instructions.
23
 
24
............................
25
 
26
27
FOR ROLEPLAYER.ME USERS:
28
 
29
For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:  
30
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.  
31
 
32
<font class="h1">Header 1</font>
33
 
34
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:
35
<h1>Header</h1> <strike>Strike</strike> etc..
36
 
37
OR just leave them as they are.  They will work for you either way.  
38
39
40
///////////////////////////////////////////////////
41
 
42
 
43
 
44
                        Don't forget to replace the XXXXX with your friend ID number.
45
 
46
                                                     (>‿◠)✌
47
 
48
 
49
                *****************************SAVE YOUR WORK AS YOU GO.*******************************
50
                                
51
 
52
DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.  
53
 
54
-----------------------------ABOUT ME-----------------------------
55
  
56
 
57
<style type="text/css">
58
@import url(http://fonts.googleapis.com/css?family=Halant:300,400,500,600,700|Vast+Shadow|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Raleway:400,800,100,200,300,500,600,700,900|Oswald:300,400,700|Dynalight|Tangerine:400,700|Roboto+Condensed:400,700);
59
 
60-
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */ 
60+
61
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
62
 
63
 
64
.vicarious { Structure }
65
 
66
body {
67-
background-color:231f1d;
67+
68
background-color:f0efe2;
69
background-repeat:repeat;
70
background-attachment:fixed;
71
background-position:center center;
72
}  
73
 
74
table, tr, td { background-color:transparent; border:0px; padding:0px; margin:0px; }
75
 
76
.vic-LEFT-SIDE_table, .vic-RIGHT-SIDE_table  {
77
visibility:visible;
78
z-index:2;
79
position:absolute;
80
top:0%;
81
left:50%;
82
border:0px;  
83
margin-top:270px;  
84
height:auto;
85
display:inline-block;
86
padding:0px;
87
}
88
 
89
.vic-LEFT-SIDE_table { width:250px; height:auto; margin-left:-250px;}
90
.vic-LEFT-SIDE_table tr { }
91
.vic-LEFT-SIDE_table td { margin:0px; max-width:250px;}  
92
 
93
.vic-RIGHT-SIDE_table { width:500px; height:auto; margin-left:10px; }
94-
.vic-RIGHT-SIDE_table td { margin:0px; max-width:500px;} 
94+
95
.vic-RIGHT-SIDE_table td { margin:0px; max-width:500px;}
96
 
97
 
98
.vic_table {
99
width:100%;
100-
border:2px solid #352f2c; 
100+
101-
background-color:231f1d; 
101+
border:2px solid #760d0b;
102
background-color: f0efe2;
103
overflow:hidden;
104
display:block;
105
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
106-
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75); 
106+
107
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
108
}
109
 
110
.vic_table tr { }
111
.vic_table td { width:100%; }  
112
 
113
 .vicarious{ Google Chrome Scrollbar }
114
 
115
::-webkit-scrollbar {width: 10px;}
116
 
117
::-webkit-scrollbar-track {
118
border: 1px solid #000000 ;
119
background-color:transparent;
120
}
121
 
122-
border-width: 10px 5px 1px 3px;
122+
123-
border-style:  solid;
123+
border:1px solid #cba865;
124-
border-top-color: 71615a;
124+
background-color:760d0b;
125-
border-right-color: 71615a;
125+
126-
border-bottom-color: 413a36;
126+
127-
border-left-color: 413a36;
127+
128-
background-color:dcd1cb ;
128+
129
-webkit-border-bottom-left-radius: 90px;
130
border-bottom-left-radius: 90px;
131
}
132
 
133
.vicarious { General Text }
134
 
135
table, tr, td, li, p, div, .text, .btext, a, b, i {
136
font-family:tahoma;
137
font-size:7pt;
138
line-height:100%;
139
color:390100;
140
padding:0px;
141
margin:0px;
142
text-decoration:none;
143-
color:574d48;
143+
144
text-align:left;
145
word-wrap: break-word;
146
}
147
 
148
p {
149
text-align:justify;
150
margin-top: 5px;
151
text-indent:10px;
152
word-wrap: break-word;
153
}
154
 
155
p::first-line {  }
156
p::first-letter {   }
157
 
158
b {
159
font-family: 'Roboto Condensed', sans-serif;
160
color:760d0b;
161
font-size:8pt;
162
text-transform:uppercase;
163
}  
164-
color:6c5d56;
164+
165
i {
166-
text-transform:uppercase; 
166+
167
color:940300;
168
font-size:10pt;
169
}
170
 
171-
color:50453f;
171+
172-
font-size:10pt; 
172+
color:240100;
173
text-decoration:underline;
174
}
175
 
176-
color:4a423e;
176+
177
color:b80300;
178
text-decoration:line-through;
179
letter-spacing:1pt;
180
}
181-
color:574d48;
181+
182
.strong, strong {
183
font-family: "Oswald", Helvetica, sans-serif;
184
color:790200;
185
font-size: 9pt;
186-
.strong, strong { 
186+
187
line-height:110%;
188
}
189
 
190
em {
191
font-family: 'Tangerine', cursive;
192
color:c60400;
193
font-weight:700;
194-
em { 
194+
195
}
196-
color:716560;
196+
197
.vicarious { Headers }
198
 
199
.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 {
200
margin:0px;
201
padding:0px;
202
display:block;
203
text-transform:none;
204
line-height:100%;  
205
}  
206
 
207
.h1, h1 {
208
margin:10px 0px;
209
height:50px;
210
line-height:50px;
211
font-size:33px;
212
overflow:hidden;
213
text-align:center;
214
padding:0px 10px;
215-
font-size:35px;
215+
color:f0efe2;
216
background-color:cba865;
217
font-family: 'Vast Shadow', cursive;
218
text-transform:uppercase;
219-
color:6c5d56;
219+
220-
background-color:1b1816; 
220+
text-shadow:  -1px -1px 0 #760d0b, 1px -1px 0 #760d0b, -1px 1px 0 #760d0b, 1px 1px 0 #760d0b;
221
}
222
 
223
.h2, h2 {
224-
text-shadow:  -1px -1px 0 #1b1816, 1px -1px 0 #1b1816, -1px 1px 0 #1b1816, 1px 1px 0 #1b1816;
224+
225-
} 
225+
226
font-size:10px;
227
text-align:center;
228
text-transform:uppercase;
229
padding:5px 0px;
230
color:cba865;
231
background-color:760d0b;
232
font-family: 'Roboto Condensed', sans-serif;
233-
padding:5px; 
233+
234-
color:6c5d56;
234+
235-
background-color:1b1816; 
235+
236
.h3, h3 {
237-
width:490px;
237+
238-
} 
238+
239
font-size:12px;
240
overflow:hidden;
241
text-align:left;
242
padding:5px;
243
color:760d0b;
244
background-color:transparent;
245
font-family: 'Raleway', sans-serif;
246
font-weight:700;
247-
color:50453f;
247+
248-
background-color:1b1816; 
248+
249
border-color:000000;
250
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
251
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
252
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
253-
border-color:413a36;
253+
254
 
255
.cite {font-size:0px; color:transparent;display:block; height:0px;}
256
 
257-
} 
257+
258
 
259
/* Background2 */
260
 
261
#color2 {
262
visibility:visible;
263
position:fixed;
264
background-color:760d0b;
265
top:0%;
266
left:50%;
267
z-index:1;  
268-
background-color:1b1816; 
268+
269
margin-left:-395px;
270
width:100%;
271-
z-index:1;   
271+
272
padding:0px;
273
border-left:10px solid #cba865;
274
}
275-
height:100%; 
275+
276
/* Top */
277-
border-left:10px solid #dcd1cb; 
277+
278-
} 
278+
279
position:absolute;
280
top:0%;
281
left:50%;
282
z-index:3;  
283
margin-top:10px;
284
margin-left:-250px;
285
width:760px;
286-
z-index:3;   
286+
height:250px;
287
background-color:760d0b;
288
padding:0px;
289
border:2px solid #352f2c;
290-
height:250px; 
290+
291-
background-color:231f1d;
291+
292
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
293-
border:2px solid #352f2c; 
293+
294
 
295
/* Music */
296
 
297
#music {
298
visibility:visible;
299
position:fixed;
300
bottom:0%;
301
left:0%;
302
z-index:4;  
303
margin-bottom:10px;
304
margin-left:10px;
305
width:20px;
306-
z-index:4;   
306+
307
background-size:20px 20px;
308
background-image:url(http://i61.tinypic.com/bgzmhf.jpg);
309
background-repeat:repeat;
310-
height:20px; 
310+
311
}
312-
background-image:url(http://i61.tinypic.com/2cymogl.jpg);
312+
313
#music .player {
314
position:absolute;
315
margin-top:0px;
316
margin-left:0px;
317
width:20px;
318
height:20px;
319
background-color:760d0b;
320
overflow:hidden;
321
opacity:0;
322
-webkit-transition: all 0.2s linear 0.1s;
323-
background-color:231f1d;
323+
324
-ms-transition:all 0.2s linear  0.1s;
325
-o-transition: all 0.2s linear 0.1s;
326
transition: all 0.2s linear 0.1s;
327
}
328
 
329
#music:hover .player {
330
width:200px;
331
overflow:none;
332
opacity:1;
333
}
334
 
335
/* Sidebar */
336
 
337
#sidebar {
338
visibility:visible;
339
position:fixed;
340
top:0%;
341
left:50%;
342
z-index:3;  
343
margin-top:0px;
344
margin-left:-575px;
345
width:270px;
346-
z-index:3;   
346+
347
background-color:rgba(0,0,0,0);
348
padding:0px;
349
border:0px;  
350
}
351
 
352
#sidebar .name {
353-
border:0px;   
353+
z-index:4;  
354-
} 
354+
355
margin-top:80px;
356
margin-left:0px;
357-
z-index:4;   
357+
358
height:20px;
359
overflow:hidden;  
360
font-size:20px;
361
line-height:20px;
362-
height:20px; 
362+
363
color: 000000;
364
}
365
 
366
 
367-
color: dcd1cb; 
367+
368-
} 
368+
z-index:3;  
369
position:absolute;
370
margin-top:100px;
371
margin-left:0px;
372-
z-index:3;   
372+
373
height:10px;
374
overflow:hidden;  
375
font-size:10px;
376
line-height:10px;
377-
height:10px; 
377+
378
color: 000000;
379
opacity:0;
380
-webkit-transition: all 0.2s linear 0.1s;
381
-moz-transition:all 0.2s linear 0.1s;
382-
color: dcd1cb; 
382+
383
-o-transition: all 0.2s linear 0.1s;
384
transition: all 0.2s linear 0.1s;
385
}
386
 
387
#sidebar:hover .contact {
388
opacity:1;
389-
} 
389+
390
}
391
 
392
 
393
#sidebar .vicbox {
394
z-index:4;  
395
float:left;
396
position:absolute;
397
margin-top:100px;
398-
z-index:4;   
398+
399
width:250px;
400
height:175px;  
401
overflow: hidden;  
402
border:10px solid #cba865;
403
background-color: ecebdd;
404
}
405
 
406-
border:10px solid #dcd1cb;
406+
407-
background-color:231f1d; 
407+
408
height:175px;
409
position: absolute;
410
overflow: hidden;
411
top:0px;
412-
height:175px; 
412+
413
opacity: 1;
414
-webkit-transform: translateX(-300px);
415
-moz-transform: translateX(-300px);
416
-ms-transform: translateX(-300px);
417
-o-transform: translateX(-300px);
418
transform: translateX(-300px);
419
-webkit-transition: all 0.4s ease-in-out;
420
-moz-transition:all 0.4s ease-in-out;
421
-ms-transition:all 0.4s ease-in-out;
422
-o-transition: all 0.4s ease-in-out;
423
transition: all 0.4s ease-in-out;
424
background-color: ecebdd;  
425
}
426
 
427
.vicbox img {
428-
background-color:231f1d;  
428+
429
position: relative;
430
width:250px;
431
height:175px;
432
overflow:hidden;
433
-webkit-transition: all 0.3s ease-in-out;
434
-moz-transition:all 0.3s ease-in-out;
435-
height:175px; 
435+
436
-o-transition: all 0.3s ease-in-out;
437
transition: all 0.3s ease-in-out;
438
}
439
 
440
.vicbox big {
441
font-family: "Oswald", Helvetica, sans-serif;
442
display:block;
443
color:cba865;
444
background-color: 760d0b;
445
text-align: center;
446
margin:10px 0px 5px 0px;
447-
color:dcd1cb;
447+
448-
background-color:352f2c;
448+
449
padding: 2px;    
450
 
451
}
452
 
453
.vicbox .the411 {
454
background-color:transparent;
455
position: relative;
456
text-align: center;
457
margin:10px;
458
width: 220px;
459
height: 145px;
460
padding: 5px;
461
overflow:auto;
462
-webkit-transition: all 0.2s linear 0.1s;
463
-moz-transition:all 0.2s linear 0.1s;
464
-ms-transition:all 0.2s linear  0.1s;
465-
overflow:auto; 
465+
466
transition: all 0.2s linear 0.1s;
467
}
468
 
469
#sidebar:hover .mask {
470
-webkit-transform: translateX(0px);
471
-moz-transform: translateX(0px);
472
-ms-transform: translateX(0px);
473
-o-transform: translateX(0px);
474
transform: translateX(0px);
475
}    
476
 
477
                 
478
#sidebar:hover img {
479
-webkit-transform: translateX(300px);
480
-moz-transform: translateX(300px);
481
-ms-transform: translateX(300px);
482
-o-transform: translateX(300px);
483
transform: translateX(300px);
484
transition-delay: 0.1s;
485
}
486
 
487
#sidebar:hover .the411 {
488
transition-delay: 0.4s;
489
}
490
 
491
#sidebar .linx {
492
z-index:3;  
493
position:absolute;
494
margin-top:295px;
495
margin-left:190px;
496-
z-index:3;   
496+
497
height:200px;
498
overflow:none;
499
}
500
 
501-
height:200px; 
501+
502-
overflow:none; 
502+
503-
} 
503+
504
display:block;
505
width:100%;
506
font-size:10px;
507
height:2px;
508
line-height:2px;
509
overflow:none;
510-
font-size:10px; 
510+
511
font-family: 'Roboto', sans-serif;
512
font-weight:300;
513
color:ecebdd;
514
border-left:0px solid #cba865;
515
padding-left:5px;
516
letter-spacing:1pt;
517-
color:dcd1cb; 
517+
518-
border-left:0px solid #dcd1cb;
518+
519
-ms-transition: opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
520
-o-transition:  opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
521
transition:  opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
522
margin:-20px 0px 0px 0px;
523
opacity:0;
524
}
525
 
526-
margin:-20px 0px 0px 0px; 
526+
527
margin:20px 0px 10px 0px;
528-
} 
528+
529
}
530
 
531
#sidebar a:hover {  
532-
opacity:1; 
532+
color: cba865;
533-
} 
533+
534
letter-spacing:2pt;  
535-
#sidebar a:hover {   
535+
536-
color:6c5d56;
536+
537
 
538
/* Right Side of Profile */
539
 
540
.about {
541
width:480px;
542
height:150px;
543
margin:5px;
544
padding:5px;
545-
width:480px; 
545+
546-
height:150px; 
546+
547
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
548-
padding:5px; 
548+
549
}
550
 
551
.threegifs {
552
width:500px;
553
height:255px;
554
overflow:hidden;
555
}
556
 
557
.threegifs .Gifs {
558
position:absolute;
559
padding:5px;
560
overflow:hidden;
561
background-color:760d0b;
562
border:4px solid #cba865;
563
background-repeat:no-repeat;
564-
overflow:hidden; 
564+
565-
background-color:dcd1cb;
565+
566-
border:4px solid #72625a;
566+
567
.gifs-a  {
568-
background-position:center center; 
568+
569
height:150px;
570
background-size:150px 150px;
571
margin-top:10px;
572-
width:150px; 
572+
573
}
574
 
575
.gifs-b {
576
width:125px;
577
height:125px;
578
background-size:125px 125px;
579
margin-top:50px;
580-
width:125px; 
580+
581
}
582
 
583
.gifs-c {
584
width:100px;
585
height:100px;
586
background-size:100px 100px;
587
margin-top:100px;
588-
width:100px; 
588+
589
}
590
 
591
 
592
.threegifs .title {
593
position:absolute;
594
margin-top:225px;
595
margin-left:10px;
596
width:203px;
597
height:20px;
598
padding:2px;
599
overflow:hidden;  
600-
width:203px; 
600+
601
font-size:10px;
602
line-height:16px;
603
color:8c7f78;
604
text-transform:uppercase;
605
text-align:center;
606
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
607
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
608
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
609
}
610
 
611
.threegifs .textbox {
612-
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75); 
612+
613
margin-top:10px;
614
margin-left:255px;
615
width:225px;
616
height:225px;
617
padding:5px;
618
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
619-
width:225px; 
619+
620
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
621
overflow:auto;  
622
}
623
 
624-
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75); 
624+
.conns {
625
width:500px;
626
height:110px;
627
overflow:hidden;  
628-
.conns { 
628+
629
 
630
.conns .imgA, .conns .imgB, .conns .imgC {
631
position:absolute;
632
margin-top:5px;
633
width:100px;
634
height:100px;
635
overflow:hidden;  
636
}
637
 
638
.conns .imgA { margin-left: 185px; }
639
.conns .imgB { margin-left: 290px; }
640
.conns .imgC { margin-left: 395px; }
641
 
642
 
643
.conns .first, .conns .last {
644
position:absolute;
645
line-height:20px;
646
font-size:20px;
647-
.conns .first, .conns .last { 
647+
648
height:20px;
649
display:block;
650
color:760d0b;
651
overflow:hidden;
652
}
653
 
654-
color:61544e; 
654+
655
transform: rotate(338deg) ;
656
-webkit-transform: rotate(338deg) ;
657
-moz-transform: rotate(338deg) ;
658
-o-transform: rotate(338deg) ;
659
-ms-transform: rotate(338deg) ;
660
text-align:right;
661
padding-right:20px;
662
margin-left:0px;
663
margin-top:30px;
664
border-bottom:2px solid #cba865;
665-
padding-right:20px; 
665+
666
 
667
.conns .last {
668-
border-bottom:2px solid #352f2c;
668+
669
-webkit-transform: rotate(158deg) ;
670
-moz-transform: rotate(158deg) ;
671
-o-transform: rotate(158deg) ;
672
-ms-transform: rotate(158deg) ;
673
text-align:left;
674
padding-left:20px;
675
margin-left:10px;
676-
-ms-transform: rotate(158deg) ; 
676+
677-
text-align:left; 
677+
678
 
679
.connsImg {
680
float:left;
681
margin:5px 0px 5px 5px;
682
width:250px;
683-
.connsImg { 
683+
684
overflow:hidden;
685
}
686
 
687-
height:150px; 
687+
688
width:250px;
689
height:150px;
690
overflow:hidden;
691
}
692
 
693-
height:150px; 
693+
.connsInfo {
694
float:right;
695
margin:5px 5px 5px 0px;
696
width:225px;
697-
.connsInfo { 
697+
698
padding:5px;
699
overflow:auto;
700
}
701
 
702-
padding:5px; 
702+
703
/* Left Side of Profile */
704
 
705
.personality {
706
width:230px;
707
height:195px;
708
margin:5px;
709
padding:5px;
710-
width:230px; 
710+
711-
height:195px; 
711+
712
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
713-
padding:5px; 
713+
714
}
715
 
716
.stats {
717
width:230px;
718
height:75px;
719
padding:5px;
720
margin:5px;
721
overflow:auto;
722
}
723
 
724
.connLinks {  
725
width:250px;
726
height:120px;
727
overflow:auto;
728
}
729
 
730
.connLinks a {
731
text-decoration:none;
732
text-transform:uppercase;
733
display:block;
734
font-size:8px;
735
height:12px;
736
line-height:12px;
737-
display:block; 
737+
738-
font-size:8px; 
738+
739
font-family: "Oswald", Helvetica, sans-serif;
740
padding:2px;
741
margin-bottom:2px;
742-
border:1px solid #352f2c;
742+
color:760d0b;
743
background-color:ecebdd;
744
border-width:1px 5px 1px 5px; 
745
border-style:solid;
746
border-color: #cba865;
747
letter-spacing:2pt;
748-
background-color:1b1816;
748+
749
-moz-transition:all .8s ease 0s;
750
-ms-transition:all .8s ease 0s;
751
-o-transition: all .8s ease 0s;
752
transition: all .8s ease 0s;
753
}
754
 
755-
} 
755+
756
border-color: #ecebdd;
757
color:ecebdd;
758-
background-color:dcd1cb; 
758+
background-color:cba865;
759
}
760
 
761
 .vicarious{ Hide Codes }
762
.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; }
763
table table table table td {width:0px;}
764
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
765
div div select, div div form {display:none !important;}
766
select { visibility:hidden!important; WIDTH:0px!important;}
767
table div {display:none;}
768
table table div {display:block;}
769
.clearfix {display:none !important;position:absolute!important;}
770
div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
771
.profileInfo tr tr td { visibility:hidden; }
772
.profileInfo td.text { visibility:visible; }
773
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
774
</style></td></tr></table><table style="display:none"><tr><td>
775
776
777
778
-----------------------------LIKE TO MEET-------------------------
779
 
780
<font class="cite">
781
782
===Image sizes===
783
784
Top Banner:  760px width by 250px height
785
786
Sidebar Image: 250px width by 175px height
787
788
Left Side of Profile
789
Image below Personality: 250px width by 350px height (height doesn't matter)
790
Image below Stats: 250px width by 300px height (height doesn't matter)
791
792-
5 By 5 Banner: 500px width by 300px height (height doesn't matter)
792+
793
Bookworm Banner: 500px width by 300px height (height doesn't matter)
794
3 Gif images (Stacked diagonally): Make 1 image at 150px width by 150px height.  The layout will re-size two of them for the overlay effect.
795
3 Connection Images: 100px width by 100px height
796
Single Connection image: 250px width by 150px height
797
798
</font>  
799
800
-----------------------------INTERESTS----------------------------
801-
 </td></tr></table></td></tr></table></td></tr></table><table  cellspacing="0" cellpadding="0"><tr><td valign="top" padding="0"><table cellspacing="0" cellpadding="0"><tr><td>
801+
802
   </td></tr></table></td></tr></table></td></tr></table><table  cellspacing="0" cellpadding="0"><tr><td valign="top" padding="0"><table cellspacing="0" cellpadding="0"><tr><td>
803-
<div id="color2"></div><div id="top">
803+
804
<div id="color2"></div>
805-
<img src="http://i59.tinypic.com/2hxc9rc.jpg">
805+
<div id="top">
806
<img src="http://i60.tinypic.com/dyt1ye.jpg">
807-
</div><div id="sidebar"><div class="vicbox">
807+
808
809-
<img src="http://i.imgur.com/OmKwcg4.gif">
809+
<div id="sidebar"><div class="vicbox">
810
811
<img src="http://i57.tinypic.com/65pfkg.jpg">
812
813
814
<div class="mask"><div class="the411">
815
816
<big>Verses</big>
817
Verse | Verse | Verse | Verse
818
 
819
<big>Writing Style</big>
820
Multi-Para to Novella
821
822
<big>Dues</big>
823
Starters (0) Comments (0) Messages (0)
824
825
826-
Faith Lehane
826+
827
</div></div></div><div class="Name">
828
829
Display Name
830
831
</div><div class="Contact">
832
833
AOL: Contactinfo
834
835
</div><div class="linx">
836
837
<a href="/logincomplete.php">Home</a>  
838
<a href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
839
<a href="/send_message.php?member_id=xxxxxx">Message</a>
840
<a href="/gallery.php?member_id=xxxxxx">Photos</a>
841
<a href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
842
<a href="/invite_friend.php?friend_id=xxxxxx">Add Me</a>
843
<a href="/#">Extra</a>
844-
</div></div><div id="music"><div class="player">
844+
845
846
 
847
</div></div>
848-
    <param name="bgcolor" value="#231f1d" />
848+
849
 
850-
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/aucopcxxre/H_MH.mp3&autoplay=1&bgcolor=231f1d&loadingcolor=dcd1cb&buttoncolor=dcd1cb&slidercolor=dcd1cb" />
850+
<div id="music"><div class="player">
851
852
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
853
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
854
    <param name="bgcolor" value="#f0efe2" />
855
<param name="wmode" value="opaque" />
856
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/zfht3iyjtu/FATM_RH.mp3&autoplay=1&bgcolor=f0efe2&loadingcolor=760d0b&buttoncolor=760d0b&slidercolor=760d0b" />
857
</object>
858
859
860
<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>
861
862
863
864-
 </td></tr></table></td></tr></table></td></tr></table><table class="vic-LEFT-SIDE_table" cellspacing="0" cellpadding="0"><tr><td valign="top" padding="0"><table cellspacing="0" cellpadding="0"  style="width:250px;"><tr><td>
864+
865
  
866
-----------------------------MUSIC-------------------------------- 
867
868
869
   </td></tr></table></td></tr></table></td></tr></table><table class="vic-LEFT-SIDE_table" cellspacing="0" cellpadding="0"><tr><td valign="top" padding="0"><table cellspacing="0" cellpadding="0"  style="width:250px;"><tr><td>
870
 
871
<font class="cite">
872
873
Left column of profile.
874
875
The above table code must remain at the top.  FULL tables below can be rearranged.</font>  
876
877
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
878
879
<font class="h3">Personality</font>
880
881
<div class="personality">
882
 
883
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
884
 
885
886-
<img src="http://i60.tinypic.com/2924akw.jpg">
886+
887
  
888
889
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
890
891
<img src="http://i57.tinypic.com/2ch3vk7.jpg">
892
893
 
894
 
895
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
896
897
<font class="h3">Legal & Physical</font>
898
899
<div class="stats">
900
<b>Name:</B> Input Info
901
<BR><b>Nicknames:</B> Input Info
902
<BR><b>Aliases:</B> Input Info
903
<BR><b>Date Of Birth:</B> Input Info
904
<BR><b>Place Of Birth:</B> Input Info
905
<BR><b>Current Residence:</B> Input Info 
906
<BR><b>Ethnicity:</B> Input Info
907
<BR><b>Hair Color:</B> Input Info
908
<BR><b>Eye Color:</B> Input Info
909
<BR><b>Height:</B> Input Info
910
<BR><b>Weight:</B> Input Info
911
<BR><b>Birthmarks/Scars:</B> Input Info
912
913
</div>
914
915
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
916
917
<font class="h3">Family & Relationships</Font>
918
919
<div class="stats"> 
920
<b>Mother:</B> Input Info
921
<BR><b>Father:</B> Input Info
922
<BR><b>Sister(S):</B> Input Info
923
<BR><b>Brother(S):</B> Input Info
924
<BR><b>Other Family:</B> Input Info 
925
<BR><b>Sexual Orientation:</B> Input Info
926
<BR><b>Relationship Status:</B> Input Info
927
<BR><b>Current Relationship(S):</B> Input Info
928
<BR><b>Past Relationship(S):</B> Input Info 
929
930
</div>
931
932
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
933
934
935
<font class="h3">Education & Employment</Font>
936
937
<div class="stats">
938
<b>High School</B> Input Info
939
<BR><b>College</B> Input Info
940
<BR><b>Major</B> Input Info
941
<BR><b>Degree</B> Input Info 
942
<BR><b>Occupation:</B> Input Info
943
<BR><b>Job Description:</B> Input Info
944
<BR><b>Employer:</B> Input Info
945
<BR><b>Skills:</B> Input Info
946
 
947-
<img src="http://i62.tinypic.com/289g75f.jpg">
947+
948
</div>
949
950
 
951
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
952
953
<img src="http://i57.tinypic.com/20z7hiw.jpg">
954
955
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
956
957
<div class="connLinks">
958
959
<a href="/#">Name Here</a>
960
<a href="/#">Name Here</a>
961
<a href="/#">Name Here</a>
962
<a href="/#">Name Here</a>
963
<a href="/#">Name Here</a>
964
<a href="/#">Name Here</a> 
965
966
</div>
967
968
969
-----------------------------MOVIES-------------------------------
970
  
971
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
972
973
<div style="width:240px; height:100px; padding:5px; overflow:auto;">
974
975
Extra Table
976
977
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
978
979
</div>
980
981
-----------------------------TV---------------------------
982
  
983
 </td></tr></table></td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" class="vic-RIGHT-SIDE_table"><tr><td valign="top"><table cellspacing="0" cellpadding="0"  style="width:500px;"><tr><td>
984
 
985
<font class="cite">
986
987
Right column of profile.
988
989
The above table code must remain at the top.  FULL tables below can be rearranged.
990-
<font class="h1">The Dark Slayer</font>
990+
991
992
993
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
994
 
995
996
<font class="h1">Hermione Granger</font>
997
998
<div class="about">
999
1000
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
1001
1002
<BR>
1003
1004
<em>Emphasized</em>
1005
<b>Bold</b>
1006
<i>Italics</i>
1007
<font class="u">underline</font>
1008
<font class="strike">strike</font>
1009
<font class="strong">strong</font>
1010
  
1011
1012
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
1013
1014
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
1015-
<font class="h2">When I'm fighting, it's like the whole world goes away and I only know one thing: that I'm gonna win and they're gonna lose. I like that feelin'.</font>
1015+
1016
1017
1018
</div> 
1019-
<img src="http://i57.tinypic.com/35bcx9y.jpg">
1019+
1020
1021
<font class="h2">I’ve tried a few simple spells just for practice and it’s all worked for me. I’ve learned all our course books by heart, of course.</font>
1022
1023
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1024
1025
<img src="http://i62.tinypic.com/15dtjeq.jpg">
1026
1027
1028
 </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1029
1030
<div class="ThreeGifs">
1031
1032-
.gifs {Background-image:url(http://i.imgur.com/CZ7ECdw.gif);}
1032+
1033
Put the image url for your gif trio in the slot below. It will apply to all three gif spots.  If you decide you want three different images, delete <style.... to .../style> below and just put normal img src tags between the div tags on each of the below three gif divs.
1034
1035
</font>
1036
1037
<style>
1038
.gifs {Background-image:url(http://i62.tinypic.com/fknu6h.jpg);}
1039
</style>
1040
1041-
<div class="title">The road to redemption is a rocky path.</div>
1041+
1042
<div class="gifs gifs-a"> </div> 
1043
<div class="gifs gifs-b"> </div> 
1044
<div class="gifs gifs-c"> </div>  
1045
1046
1047
<div class="title">I’m hoping to do some good in the world!</div>
1048
1049
1050
<div class="textbox">
1051
1052
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
1053
1054
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
1055
1056
1057
</div></div>
1058
1059
 
1060
-----------------------------BOOKS--------------------------------
1061-
<div class="first">Buffy</div>
1061+
1062-
<div class="last">Summers</div>
1062+
1063
 
1064-
<img class="imga" src="http://i62.tinypic.com/2lblzwi.jpg">
1064+
1065-
<img class="imgb" src="http://i61.tinypic.com/x35rpl.jpg">
1065+
1066-
<img class="imgc" src="http://i61.tinypic.com/2hwznlv.jpg">
1066+
<div class="first">Ronald Weasley</div>
1067
<div class="last">Gryffindor</div>
1068
1069
<img class="imga" src="http://i58.tinypic.com/2ur076g.jpg">
1070-
<div class="ConnsImg"><img src="http://i59.tinypic.com/dfvptz.jpg"></div>
1070+
<img class="imgb" src="http://i60.tinypic.com/51xa87.jpg">
1071
<img class="imgc" src="http://i60.tinypic.com/f9jl2c.jpg">
1072
1073
</div>
1074
1075
<div class="ConnsImg"><img src="http://i58.tinypic.com/2ijrwnn.jpg"></div>
1076
1077
<div class="ConnsInfo">
1078-
Thank god we're hot chicks with super powers.
1078+
1079
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
1080
1081
</div><table><tr><td><font class="h2">
1082
1083
Next time there’s a ball, ask me before someone else does, and not as a last resort!
1084
</font></td></tr></table>
1085
 
1086
 
1087
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1088
 
1089-
<div class="first">Angel</div>
1089+
1090-
<div class="last">Angelus</div>
1090+
1091
<div class="first">Harry Potter</div>
1092-
<img class="imga" src="http://i60.tinypic.com/x5edl3.jpg">
1092+
<div class="last">Gryffindor</div>
1093-
<img class="imgb" src="http://i61.tinypic.com/2lsfn21.jpg">
1093+
1094-
<img class="imgc" src="http://i62.tinypic.com/fzai69.jpg">
1094+
<img class="imga" src="http://i61.tinypic.com/2j0z0bt.jpg">
1095
<img class="imgb" src="http://i57.tinypic.com/e6zkmu.jpg">
1096
<img class="imgc" src="http://i62.tinypic.com/33k41m8.jpg">
1097
1098-
<div class="connsImg"><img src="http://i62.tinypic.com/b6dq4o.jpg"></div>
1098+
1099
1100
<div class="connsImg"><img src="http://i60.tinypic.com/fcjuc6.jpg"></div>
1101
1102
<div class="connsInfo">
1103
1104
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
1105
1106
1107-
I gotta be the first Slayer in history to be sponsored by a vampire.
1107+
1108
<table><tr><td>
1109
<font class="h2">Books! And cleverness! There are more important things -- friendship and bravery.</font> 
1110
</td></tr></table>
1111
 
1112
 
1113
1114
-----------------------------HEROES-------------------------------
1115
1116
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1117
1118
<div style="width:490px; height:100px; padding:5px; overflow:auto;">
1119
1120
Extra Table.  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
1121
1122
</div>