View difference between Paste ID: qTcvq3Xe and iKRTVxCs
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/0B79YHAkeE7SuSEU1MlF4OW01QWc
15+
https://drive.google.com/file/d/0B79YHAkeE7SuRXJLcFFBNnhhMHc
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
<style type="text/css">
56
@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);
57
 
58
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */  
59
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
60
 
61
 
62
.vicarious { Structure }
63
 
64
body {
65
background-image:url();  
66
background-color:e7e7e7;
67
background-repeat:repeat;
68-
background-color:f0efe2;
68+
69
background-position:center center;
70
}  
71
 
72
table, tr, td { background-color:transparent; border:0px; padding:0px; margin:0px; }
73
 
74
.vic-LEFT-SIDE_table, .vic-RIGHT-SIDE_table  {
75
visibility:visible;
76
z-index:2;
77
position:absolute;
78
top:0%;
79
left:50%;
80
border:0px;  
81
margin-top:270px;  
82
height:auto;
83
display:inline-block;
84
padding:0px;
85
}
86
 
87
.vic-LEFT-SIDE_table { width:250px; height:auto; margin-left:-250px;}
88
.vic-LEFT-SIDE_table tr { }
89
.vic-LEFT-SIDE_table td { margin:0px; max-width:250px;}  
90
 
91
.vic-RIGHT-SIDE_table { width:500px; height:auto; margin-left:10px; }
92
.vic-RIGHT-SIDE_table tr { }
93
.vic-RIGHT-SIDE_table td { margin:0px; max-width:500px;}
94
 
95
 
96
.vic_table {
97
width:100%;
98
margin-bottom:4px;
99
border:2px solid #497784;
100
background-color: e7e7e7;
101-
border:2px solid #760d0b;
101+
102-
background-color: f0efe2;
102+
103
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
104
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
105
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
106
}
107
 
108
.vic_table tr { }
109
.vic_table td { width:100%; }  
110
 
111
 .vicarious{ Google Chrome Scrollbar }
112
 
113
::-webkit-scrollbar {width: 10px;}
114
 
115
::-webkit-scrollbar-track {
116
border: 1px solid #000000 ;
117
background-color:transparent;
118
}
119
 
120
::-webkit-scrollbar-thumb {
121
border:1px solid #000000;
122
background-color:497784;
123-
border:1px solid #cba865;
123+
124-
background-color:760d0b;
124+
125
border-top-right-radius: 90px;
126
-moz-border-radius-bottomleft: 90px;
127
-webkit-border-bottom-left-radius: 90px;
128
border-bottom-left-radius: 90px;
129
}
130
 
131
.vicarious { General Text }
132
 
133
table, tr, td, li, p, div, .text, .btext, a, b, i {
134
font-family:tahoma;
135
font-size:7pt;
136
line-height:100%;
137
color: 101f23;
138
padding:0px;
139-
color:390100;
139+
140
text-decoration:none;
141
text-transform:none;
142
text-align:left;
143
word-wrap: break-word;
144
}
145
 
146
p {
147
text-align:justify;
148
margin-top: 5px;
149
text-indent:10px;
150
word-wrap: break-word;
151
}
152
 
153
p::first-line {  }
154
p::first-letter {   }
155
 
156
b {
157
font-family: 'Roboto Condensed', sans-serif;
158
color:497784;
159
font-size:8pt;
160-
color:760d0b;
160+
161
}  
162
 
163
i {
164
font-family: 'Dynalight', cursive;
165
color: 38616d;
166
font-size:10pt;
167-
color:940300;
167+
168
 
169
.u, u {
170
color: 587d88;
171
text-decoration:underline;
172-
color:240100;
172+
173
 
174
.strike, strike {
175
color: 80989f;
176
text-decoration:line-through;
177-
color:b80300;
177+
178
}
179
 
180
.strong, strong {
181
font-family: "Oswald", Helvetica, sans-serif;
182
color: 2f5965;
183
font-size: 9pt;
184-
color:790200;
184+
185
line-height:110%;
186
}
187
 
188
em {
189
font-family: 'Tangerine', cursive;
190
color: 85acb7;
191
font-weight:700;
192-
color:c60400;
192+
193
}
194
 
195
.vicarious { Headers }
196
 
197
.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 {
198
margin:0px;
199
padding:0px;
200
display:block;
201
text-transform:none;
202
line-height:100%;  
203
}  
204
 
205
.h1, h1 {
206
margin:10px 0px;
207
height:50px;
208
line-height:50px;
209
font-size:30px;
210
overflow:hidden;
211-
font-size:33px;
211+
212
padding:0px 5px;
213
color: e7e7e7;
214-
padding:0px 10px;
214+
background-color:497784;
215-
color:f0efe2;
215+
216-
background-color:cba865;
216+
217
letter-spacing:-1pt;
218
text-shadow:  -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
219
}
220-
text-shadow:  -1px -1px 0 #760d0b, 1px -1px 0 #760d0b, -1px 1px 0 #760d0b, 1px 1px 0 #760d0b;
220+
221
.h2, h2 {
222
letter-spacing:1pt;
223
margin-bottom:6px;
224
font-size:10px;
225
text-align:center;
226
text-transform:uppercase;
227
padding:5px;
228
font-family: 'Roboto Condensed', sans-serif;
229-
padding:5px 0px;
229+
width:490px;
230-
color:cba865;
230+
color: e7e7e7;
231-
background-color:760d0b;
231+
background-color: 6d929c;
232
}
233
 
234
.h3, h3 {
235
margin:5px 0px;
236
line-height:100%;
237
font-size:12px;
238
overflow:hidden;
239
text-align:left;
240
padding:5px;
241
color:497784;
242
background-color:transparent;
243-
color:760d0b;
243+
244
font-weight:700;
245
border-width:4px 0px 4px 0px;
246
border-style:double;
247
border-color:000000;
248
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
249
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
250
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
251
}
252
 
253
.cite {font-size:0px; color:transparent;display:block; height:0px;}
254
 
255
.vicarious { Divs }
256
 
257
/* Background2 */
258
 
259
#color2 {
260
visibility:visible;
261
position:fixed;
262
background-color:497784;
263
top:0%;
264-
background-color:760d0b;
264+
265
z-index:1;  
266
margin-top:0px;
267
margin-left:-395px;
268
width:100%;
269
height:100%;
270
padding:0px;
271
border-left:10px solid #000000;
272
}
273-
border-left:10px solid #cba865;
273+
274
/* Top */
275
#top {
276
visibility:visible;
277
position:absolute;
278
top:0%;
279
left:50%;
280
z-index:3;  
281
margin-top:10px;
282
margin-left:-250px;
283
width:760px;
284
height:250px;
285
background-color:497784;
286
padding:0px;
287-
background-color:760d0b;
287+
288
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
289
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
290
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
291
}
292
 
293
/* Music */
294
 
295
#music {
296
visibility:visible;
297
position:fixed;
298
bottom:0%;
299
left:0%;
300
z-index:4;  
301
margin-bottom:10px;
302
margin-left:10px;
303
width:20px;
304
height:20px;
305
background-size:20px 20px;
306
background-image:url(http://i57.tinypic.com/552snk.jpg);
307
background-repeat:repeat;
308-
background-image:url(http://i61.tinypic.com/bgzmhf.jpg);
308+
309
}
310
 
311
#music .player {
312
position:absolute;
313
margin-top:0px;
314
margin-left:0px;
315
width:20px;
316
height:20px;
317
background-color:497784;
318
overflow:hidden;
319-
background-color:760d0b;
319+
320
-webkit-transition: all 0.2s linear 0.1s;
321
-moz-transition:all 0.2s linear 0.1s;
322
-ms-transition:all 0.2s linear  0.1s;
323
-o-transition: all 0.2s linear 0.1s;
324
transition: all 0.2s linear 0.1s;
325
}
326
 
327
#music:hover .player {
328
width:200px;
329
overflow:none;
330
opacity:1;
331
}
332
 
333
/* Sidebar */
334
 
335
#sidebar {
336
visibility:visible;
337
position:fixed;
338
top:0%;
339
left:50%;
340
z-index:3;  
341
margin-top:0px;
342
margin-left:-575px;
343
width:270px;
344
height:100%;
345
background-color:rgba(0,0,0,0);
346
padding:0px;
347
border:0px;  
348
}
349
 
350
#sidebar .name {
351
z-index:4;  
352
position:absolute;
353
margin-top:80px;
354
margin-left:0px;
355
width:180px;
356
height:20px;
357
overflow:hidden;  
358
font-size:20px;
359
line-height:20px;
360
font-family: 'Halant', serif;
361
color: 000000;
362
}
363
 
364
 
365
#sidebar .contact {
366
z-index:3;  
367
position:absolute;
368
margin-top:100px;
369
margin-left:0px;
370
width:180px;
371
height:10px;
372
overflow:hidden;  
373
font-size:10px;
374
line-height:10px;
375
font-family: 'Halant', serif;
376
color: 000000;
377
opacity:0;
378
-webkit-transition: all 0.2s linear 0.1s;
379
-moz-transition:all 0.2s linear 0.1s;
380
-ms-transition:all 0.2s linear  0.1s;
381
-o-transition: all 0.2s linear 0.1s;
382
transition: all 0.2s linear 0.1s;
383
}
384
 
385
#sidebar:hover .contact {
386
opacity:1;
387
margin-top:300px;
388
}
389
 
390
 
391
#sidebar .vicbox {
392
z-index:4;  
393
float:left;
394
position:absolute;
395
margin-top:100px;
396
margin-left:0px;
397
width:250px;
398
height:175px;  
399
overflow: hidden;  
400
border:10px solid #000000;
401
background-color: e7e7e7;
402-
border:10px solid #cba865;
402+
403-
background-color: ecebdd;
403+
404
.vicbox .mask  {
405
width:250px;
406
height:175px;
407
position: absolute;
408
overflow: hidden;
409
top:0px;
410
left:0px;
411
opacity: 1;
412
-webkit-transform: translateX(-300px);
413
-moz-transform: translateX(-300px);
414
-ms-transform: translateX(-300px);
415
-o-transform: translateX(-300px);
416
transform: translateX(-300px);
417
-webkit-transition: all 0.4s ease-in-out;
418
-moz-transition:all 0.4s ease-in-out;
419
-ms-transition:all 0.4s ease-in-out;
420
-o-transition: all 0.4s ease-in-out;
421
transition: all 0.4s ease-in-out;
422
background-color: e7e7e7;  
423
}
424-
background-color: ecebdd;  
424+
425
.vicbox img {
426
display: block;
427
position: relative;
428
width:250px;
429
height:175px;
430
overflow:hidden;
431
-webkit-transition: all 0.3s ease-in-out;
432
-moz-transition:all 0.3s ease-in-out;
433
-ms-transition:all 0.3s ease-in-out;
434
-o-transition: all 0.3s ease-in-out;
435
transition: all 0.3s ease-in-out;
436
}
437
 
438
.vicbox big {
439
font-family: "Oswald", Helvetica, sans-serif;
440
display:block;
441
color:e7e7e7;
442
background-color: 497784;
443-
color:cba865;
443+
444-
background-color: 760d0b;
444+
445
font-size: 15px;
446
line-height:15px;
447
padding: 2px;    
448
 
449
}
450
 
451
.vicbox .the411 {
452
background-color:transparent;
453
position: relative;
454
text-align: center;
455
margin:10px;
456
width: 220px;
457
height: 145px;
458
padding: 5px;
459
overflow:auto;
460
-webkit-transition: all 0.2s linear 0.1s;
461
-moz-transition:all 0.2s linear 0.1s;
462
-ms-transition:all 0.2s linear  0.1s;
463
-o-transition: all 0.2s linear 0.1s;
464
transition: all 0.2s linear 0.1s;
465
}
466
 
467
#sidebar:hover .mask {
468
-webkit-transform: translateX(0px);
469
-moz-transform: translateX(0px);
470
-ms-transform: translateX(0px);
471
-o-transform: translateX(0px);
472
transform: translateX(0px);
473
}    
474
 
475
                 
476
#sidebar:hover img {
477
-webkit-transform: translateX(300px);
478
-moz-transform: translateX(300px);
479
-ms-transform: translateX(300px);
480
-o-transform: translateX(300px);
481
transform: translateX(300px);
482
transition-delay: 0.1s;
483
}
484
 
485
#sidebar:hover .the411 {
486
transition-delay: 0.4s;
487
}
488
 
489
#sidebar .linx {
490
z-index:3;  
491
position:absolute;
492
margin-top:295px;
493
margin-left:190px;
494
width:100px;
495
height:200px;
496
overflow:none;
497
}
498
 
499
#sidebar a  {  
500
text-decoration:none;
501
text-transform:none;
502
display:block;
503
width:100%;
504
font-size:10px;
505
height:2px;
506
line-height:2px;
507
overflow:none;
508
text-align:left;
509
font-family: 'Roboto', sans-serif;
510
font-weight:300;
511
color:e7e7e7;
512
border-left:0px solid #000000;
513-
color:ecebdd;
513+
514-
border-left:0px solid #cba865;
514+
515
-webkit-transition: opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
516
-moz-transition: opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
517
-ms-transition: opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
518
-o-transition:  opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
519
transition:  opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
520
margin:-20px 0px 0px 0px;
521
opacity:0;
522
}
523
 
524
#sidebar:hover a {
525
margin:20px 0px 10px 0px;
526
opacity:1;
527
}
528
 
529
#sidebar a:hover {  
530
color: 000000;
531
border-left-width:15px;  
532-
color: cba865;
532+
533
letter-spacing:0pt;
534
}
535
 
536
/* Right Side of Profile */
537
 
538
.about {
539
width:480px;
540
height:150px;
541
margin:5px;
542
padding:5px;
543
overflow:auto;
544
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
545
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
546
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);  
547
}
548
 
549
.threegifs {
550
width:500px;
551
height:255px;
552
overflow:hidden;
553
}
554
 
555
.threegifs .Gifs {
556
position:absolute;
557
padding:5px;
558
overflow:hidden;
559
background-color:497784;
560
border:4px solid #000000;
561-
background-color:760d0b;
561+
562-
border:4px solid #cba865;
562+
563
}
564
 
565
.gifs-a  {
566
width:150px;
567
height:150px;
568
background-size:150px 150px;
569
margin-top:10px;
570
margin-left:10px;
571
}
572
 
573
.gifs-b {
574
width:125px;
575
height:125px;
576
background-size:125px 125px;
577
margin-top:50px;
578
margin-left:50px;
579
}
580
 
581
.gifs-c {
582
width:100px;
583
height:100px;
584
background-size:100px 100px;
585
margin-top:100px;
586
margin-left:100px;
587
}
588
 
589
 
590
.threegifs .title {
591
position:absolute;
592
margin-top:225px;
593
margin-left:10px;
594
width:203px;
595
height:20px;
596
padding:2px;
597
overflow:hidden;  
598
font-family: "Oswald", Helvetica, sans-serif;
599
font-size:10px;
600
line-height:16px;
601
color:497784;
602
text-transform:uppercase;
603-
color:8c7f78;
603+
604
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
605
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
606
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
607
}
608
 
609
.threegifs .textbox {
610
position:absolute;
611
margin-top:10px;
612
margin-left:255px;
613
width:225px;
614
height:225px;
615
padding:5px;
616
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
617
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
618
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
619
overflow:auto;  
620
}
621
 
622
.conns {
623
width:500px;
624
height:110px;
625
overflow:hidden;  
626
}
627
 
628
.conns .imgA, .conns .imgB, .conns .imgC {
629
position:absolute;
630
margin-top:5px;
631
width:100px;
632
height:100px;
633
overflow:hidden;  
634
}
635
 
636
.conns .imgA { margin-left: 185px; }
637
.conns .imgB { margin-left: 290px; }
638
.conns .imgC { margin-left: 395px; }
639
 
640
 
641
.conns .first, .conns .last {
642
position:absolute;
643
line-height:20px;
644
font-size:20px;
645
width:150px;
646
height:20px;
647
display:block;
648
color:497784;
649
overflow:hidden;
650-
color:760d0b;
650+
651
 
652
.conns .first {
653
transform: rotate(338deg) ;
654
-webkit-transform: rotate(338deg) ;
655
-moz-transform: rotate(338deg) ;
656
-o-transform: rotate(338deg) ;
657
-ms-transform: rotate(338deg) ;
658
text-align:right;
659
padding-right:20px;
660
margin-left:0px;
661
margin-top:30px;
662
border-bottom:2px solid #000000;
663
}
664-
border-bottom:2px solid #cba865;
664+
665
.conns .last {
666
transform: rotate(158deg) ;
667
-webkit-transform: rotate(158deg) ;
668
-moz-transform: rotate(158deg) ;
669
-o-transform: rotate(158deg) ;
670
-ms-transform: rotate(158deg) ;
671
text-align:left;
672
padding-left:20px;
673
margin-left:10px;
674
margin-top:50px;
675
}
676
 
677
.connsImg {
678
float:left;
679
margin:5px 0px 5px 5px;
680
width:250px;
681
height:150px;
682
overflow:hidden;
683
}
684
 
685
.connsImg img {
686
width:250px;
687
height:150px;
688
overflow:hidden;
689
}
690
 
691
.connsInfo {
692
float:right;
693
margin:5px 5px 5px 0px;
694
width:225px;
695
height:140px;
696
padding:5px;
697
overflow:auto;
698
}
699
 
700
 
701
/* Left Side of Profile */
702
 
703
.personality {
704
width:230px;
705
height:195px;
706
margin:5px;
707
padding:5px;
708
overflow:auto;
709
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
710
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
711
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);  
712
}
713
 
714
.stats {
715
width:230px;
716
height:75px;
717
padding:5px;
718
margin:5px;
719
overflow:auto;
720
}
721
 
722
.connLinks {  
723
width:250px;
724
height:120px;
725
overflow:auto;
726
}
727
 
728
.connLinks a {
729
text-decoration:none;
730
text-transform:uppercase;
731
display:block;
732
font-size:8px;
733
height:12px;
734
line-height:12px;
735
overflow:none;
736
text-align:center;
737
font-family: "Oswald", Helvetica, sans-serif;
738
padding:2px;
739
margin-bottom:2px;
740
color:497784;
741
background-color:e7e7e7;
742-
color:760d0b;
742+
743-
background-color:ecebdd;
743+
744
border-color: #000000;
745
letter-spacing:2pt;
746-
border-color: #cba865;
746+
747
-moz-transition:all .8s ease 0s;
748
-ms-transition:all .8s ease 0s;
749
-o-transition: all .8s ease 0s;
750
transition: all .8s ease 0s;
751
}
752
 
753
.connLinks a:hover {
754
border-color: #e7e7e7;
755
color:e7e7e7;
756-
border-color: #ecebdd;
756+
background-color:000000;
757-
color:ecebdd;
757+
758-
background-color:cba865;
758+
759
 .vicarious{ Hide Codes }
760
.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; }
761
table table table table td {width:0px;}
762
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
763
div div select, div div form {display:none !important;}
764
select { visibility:hidden!important; WIDTH:0px!important;}
765
table div {display:none;}
766
table table div {display:block;}
767
.clearfix {display:none !important;position:absolute!important;}
768
div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
769
.profileInfo tr tr td { visibility:hidden; }
770
.profileInfo td.text { visibility:visible; }
771
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
772
</style></td></tr></table><table style="display:none"><tr><td>
773
774
  
775
  
776
-----------------------------LIKE TO MEET-------------------------
777
 
778
 <font class="cite">
779
 
780
===Image sizes===
781
 
782
Top Banner:  760px width by 250px height
783
 
784
Sidebar Image: 250px width by 175px height
785
 
786
Left Side of Profile
787
Image below Personality: 250px width by 350px height (height doesn't matter)
788
Image below Stats: 250px width by 300px height (height doesn't matter)
789
 
790
Right Side of Profile
791
Fire & Blood Banner: 500px width by 300px height (height doesn't matter)
792
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.
793-
Bookworm Banner: 500px width by 300px height (height doesn't matter)
793+
794
Single Connection image: 250px width by 150px height
795
 
796
</font>  
797
798
-----------------------------INTERESTS----------------------------
799
800
 </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>
802+
803
<div id="top">
804
<img src="http://i.imgur.com/sfVdLrS.png">
805
</div>
806-
<img src="http://i60.tinypic.com/dyt1ye.jpg">
806+
807
<div id="sidebar"><div class="vicbox">
808
809
<img src="http://i.imgur.com/hiujLhn.gif">
810
811-
<img src="http://i57.tinypic.com/65pfkg.jpg">
811+
812
<div class="mask"><div class="the411">
813
814
<big>Verses</big>
815
Verse | Verse | Verse | Verse
816
 
817
<big>Writing Style</big>
818
Multi-Para to Novella
819
820
<big>Dues</big>
821
Starters (0) Comments (0) Messages (0)
822
823
824
825
</div></div></div><div class="Name">
826
827
Display Name
828
829
</div><div class="Contact">
830
831
AOL: Contactinfo
832
833
</div><div class="linx">
834
835
<a href="/logincomplete.php">Home</a>  
836
<a href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
837
<a href="/send_message.php?member_id=xxxxxx">Message</a>
838
<a href="/gallery.php?member_id=xxxxxx">Photos</a>
839
<a href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
840
<a href="/invite_friend.php?friend_id=xxxxxx">Add Me</a>
841
<a href="/#">Extra</a>
842
<a href="/#">Extra</a>
843
844
 
845
</div></div>
846
 
847
848
 
849
<div id="music"><div class="player">
850
851
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
852
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
853
    <param name="bgcolor" value="#e7e7e7" />
854-
    <param name="bgcolor" value="#f0efe2" />
854+
855
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/c1m4kc8c9o/GOT_FB.mp3&autoplay=1&bgcolor=e7e7e7&loadingcolor=497784&buttoncolor=497784&slidercolor=497784" />
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" />
856+
857
858
859
<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>
860
861
862
863
</div></div>
864
   
865
  
866
-----------------------------MUSIC-------------------------------- 
867
868
 </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>
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>
869+
870
<font class="cite">
871
872
Left column of profile.
873
874
The above table code must remain at the top.  FULL tables below can be rearranged.</font>  
875
876
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
877
878
<font class="h3">Personality</font>
879
880
<div class="personality">
881
 
882
 <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.
883
 
884
885
</div>
886
  
887
888
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
889
890
<img src="http://i60.tinypic.com/m34mq.jpg">
891-
<img src="http://i57.tinypic.com/2ch3vk7.jpg">
891+
892
 
893
 
894
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
895
896
<font class="h3">Legal & Physical</font>
897
898
<div class="stats">
899
<b>Name:</B> Input Info
900
<BR><b>Nicknames:</B> Input Info
901
<BR><b>Aliases:</B> Input Info
902
<BR><b>Date Of Birth:</B> Input Info
903
<BR><b>Place Of Birth:</B> Input Info
904
<BR><b>Current Residence:</B> Input Info 
905
<BR><b>Ethnicity:</B> Input Info
906
<BR><b>Hair Color:</B> Input Info
907
<BR><b>Eye Color:</B> Input Info
908
<BR><b>Height:</B> Input Info
909
<BR><b>Weight:</B> Input Info
910
<BR><b>Birthmarks/Scars:</B> Input Info
911
912
</div>
913
914
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
915
916
<font class="h3">Family & Relationships</Font>
917
918
<div class="stats"> 
919
<b>Mother:</B> Input Info
920
<BR><b>Father:</B> Input Info
921
<BR><b>Sister(S):</B> Input Info
922
<BR><b>Brother(S):</B> Input Info
923
<BR><b>Other Family:</B> Input Info 
924
<BR><b>Sexual Orientation:</B> Input Info
925
<BR><b>Relationship Status:</B> Input Info
926
<BR><b>Current Relationship(S):</B> Input Info
927
<BR><b>Past Relationship(S):</B> Input Info 
928
929
</div>
930
931
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
932
933
934
<font class="h3">Education & Employment</Font>
935
936
<div class="stats">
937
<b>High School</B> Input Info
938
<BR><b>College</B> Input Info
939
<BR><b>Major</B> Input Info
940
<BR><b>Degree</B> Input Info 
941
<BR><b>Occupation:</B> Input Info
942
<BR><b>Job Description:</B> Input Info
943
<BR><b>Employer:</B> Input Info
944
<BR><b>Skills:</B> Input Info
945
 
946
947
</div>
948
949
 
950
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
951
952
<img src="http://i60.tinypic.com/2nl5r1s.jpg">
953-
<img src="http://i57.tinypic.com/20z7hiw.jpg">
953+
954
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
955
956
<div class="connLinks">
957
958
<a href="/#">Name Here</a>
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
965
</div>
966
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>
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>
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>
996+
<font class="h1">Daenerys Targaryen</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
1016
1017
1018
</div> 
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>
1021+
<font class="h2">I remember the Undying. Child of three, they called me. Three mounts they promised me, three fires, and three treasons.</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">
1025+
<img src="http://i.imgur.com/OqdZvJ1.gif">
1026
1027
1028
 </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1029
1030
<div class="ThreeGifs">
1031
1032
<font class="cite">
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);}
1038+
.gifs {Background-image:url(http://i.imgur.com/XCoYr0u.gif);}
1039
</style>
1040
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>
1047+
<div class="title">I will take what is mine with fire and blood</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
 
1061
-----------------------------BOOKS--------------------------------
1062
1063
 </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1064
 
1065
<div class="conns">
1066-
<div class="first">Ronald Weasley</div>
1066+
1067-
<div class="last">Gryffindor</div>
1067+
<div class="first">Khal Drogo</div>
1068
<div class="last">Dothraki</div>
1069-
<img class="imga" src="http://i58.tinypic.com/2ur076g.jpg">
1069+
1070-
<img class="imgb" src="http://i60.tinypic.com/51xa87.jpg">
1070+
<img class="imga" src="http://i58.tinypic.com/os71mw.jpg">
1071-
<img class="imgc" src="http://i60.tinypic.com/f9jl2c.jpg">
1071+
<img class="imgb" src="http://i62.tinypic.com/r0q9v9.jpg">
1072
<img class="imgc" src="http://i58.tinypic.com/w6s3e9.jpg">
1073
1074
</div>
1075-
<div class="ConnsImg"><img src="http://i58.tinypic.com/2ijrwnn.jpg"></div>
1075+
1076
<div class="ConnsImg"><img src="http://i60.tinypic.com/2j1aqah.jpg"></div>
1077
1078
<div class="ConnsInfo">
1079
1080
<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.
1081
1082
</div><table><tr><td><font class="h2">
1083-
Next time there’s a ball, ask me before someone else does, and not as a last resort!
1083+
1084
I am the wife of the great Khal and I carry his son inside me! 
1085
1086
</font></td></tr></table>
1087
 
1088
 
1089
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1090
 
1091-
<div class="first">Harry Potter</div>
1091+
1092-
<div class="last">Gryffindor</div>
1092+
1093
<div class="first">Daario Naharis</div>
1094-
<img class="imga" src="http://i61.tinypic.com/2j0z0bt.jpg">
1094+
<div class="last">Stormcrows</div>
1095-
<img class="imgb" src="http://i57.tinypic.com/e6zkmu.jpg">
1095+
1096-
<img class="imgc" src="http://i62.tinypic.com/33k41m8.jpg">
1096+
<img class="imga" src="http://i61.tinypic.com/10h36vb.jpg">
1097
<img class="imgb" src="http://i58.tinypic.com/2wfuwr6.jpg">
1098
<img class="imgc" src="http://i58.tinypic.com/25aj8r6.jpg">
1099
1100-
<div class="connsImg"><img src="http://i60.tinypic.com/fcjuc6.jpg"></div>
1100+
1101
1102
<div class="connsImg"><img src="http://i57.tinypic.com/wtajya.jpg"></div>
1103
1104
<div class="connsInfo">
1105
1106
<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.
1107
1108
1109-
<font class="h2">Books! And cleverness! There are more important things -- friendship and bravery.</font> 
1109+
1110
<table><tr><td>
1111
<font class="h2">Could I love Daario?  What would it mean, if I took him into my bed?</font> 
1112
</td></tr></table>
1113
 
1114
1115
-----------------------------HEROES-------------------------------
1116
1117
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1118
1119
<div style="width:490px; height:100px; padding:5px; overflow:auto;">
1120
1121
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.
1122
1123
</div>