View difference between Paste ID: 5QVFkLvX and 0BxcVgmG
SHOW: | | - or go back to the newest paste.
1-
       						**UPDATED 8-24 FOR FIREFOX BUGS**
1+
       					**UPDATED 8-24 FOR FIREFOX BUGS**
2-
                                            !!!!!!!!!!!!Read It!!!!!!!!!!!!
2+
3
4-
                                                   (⊙.⊙(☉_☉)⊙.⊙)
4+
					!!!!!!!!!!!!Read It!!!!!!!!!!!!
5
 
6
                                                (⊙.⊙(☉_☉)⊙.⊙)
7
 
8
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.   
9
10
............................
11
 
12
IMAGES
13
14-
If you want to change out the pics but keep the color scheme for the images, the PSD is here: 
14+
15-
https://drive.google.com/file/d/0B79YHAkeE7Subk1rdWVXRWtqZlE
15+
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=Raleway:400,900|Playfair+Display:400,700italic|Marck+Script|Oswald|Dynalight|Roboto+Condensed:400,700);
59-
@import url(http://fonts.googleapis.com/css?family=Raleway:400,900|Marck+Script|Oswald|Dynalight|Roboto+Condensed:400,700);
59+
60
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */  
61
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
62
 
63
.vicarious { Structure }
64
65
66
body { 
67
background-color: 202020; 
68-
background-color: 163851; 
68+
69
background-repeat:repeat;
70
background-attachment:fixed;
71
background-position:center center;
72
}  
73
74
table, tr, td {background-color:transparent;}
75
76
.viclike2meet_table, .vicinterests_table, #sidebar {
77
visibility:visible;
78
z-index:2;
79
position:absolute;
80
top:0%;
81
left:50%;
82
border:0px solid;  
83
margin-top:0px;  
84
height:auto;
85
overflow:hidden;
86
display:inline-block;
87
background-color:transparent;
88
}
89
90
.viclike2meet_table {  width:350px;height:auto;margin-left:-160px; }
91
.viclike2meet_table tr { margin:0px;  }
92
.viclike2meet_table td { margin:0px; max-width:350px; overflow:hidden;   }
93
 
94
.vicinterests_table{ width:425px; height:auto;margin-left:195px;}
95
.vicinterests_table tr { margin:0px; }
96
.vicinterests_table td { margin:0px; max-width:425px; overflow:hidden;  }  
97
98
99
.vic_table {
100
padding:0px;
101
margin:0px;
102
width:100%;
103
margin-bottom:4px;
104
border:0px solid;
105
background-color:d7d7d7;
106-
background-color:f2f2f2;
106+
107
overflow:hidden;
108
}
109
 
110
.vic_table tr { margin:0px; }
111
.vic_table td { margin:0px; width:100%; text-align:center; padding: 0; /* 'cellpadding' equivalent */ }   
112
113
114
 .vicarious{ Google Chrome Scrollbar }
115
::-webkit-scrollbar {width: 10px;}
116
::-webkit-scrollbar-track {border: 1px solid #000000;background-color:transparent;}
117
::-webkit-scrollbar-thumb {border: 1px solid #000000;background-color:ffffff;}
118
 
119
.vicarious { text }
120
121
table, tr, td, li, p, div, .text, .btext, a, b, i { 
122
font-family:tahoma; 
123
font-size:7pt; 
124
line-height:100%; 
125
color: 4e4e4e;
126-
color: 163851;
126+
127
margin:0px;
128
text-decoration:none;
129
text-transform:none;
130
}
131
132
p {text-align:justify; margin-top: 5px;text-indent:10px; }
133
p:first-line {  }
134
p:first-letter { font-size: 9pt; }
135
 
136
  
137
b { 
138
font-size:8pt;
139
text-transform:uppercase;
140
font-family: 'Roboto Condensed', sans-serif;
141
color: 000000;
142-
color: 12708b;
142+
143
144
i { 
145
font-size:10pt;
146
color: 424242;
147-
color: c2c2c2;
147+
148
}
149
150
.u, u {
151
color: 202020;
152-
color: 163851;
152+
153
}
154
155
.strike, strike {
156
color: 4e4e4e ;
157-
color: 114f60 ;
157+
158
letter-spacing:1pt;
159
}
160
161
.strong, strong {
162
font-family:courier new;  
163
font-size: 9pt;
164
text-transform:uppercase; 
165
color: 454545;   
166-
color: c2c3c4;   
166+
167
} 
168
169
em {
170
font-family:brush script mt;
171
font-size:11pt;
172
color: 4b4b4b;
173-
color: 002241;
173+
174
175
.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .one, one, .two, two, .three, three. small, big  { 
176
padding:0px;
177
margin:0px; 
178
}  
179
180
 
181
.blockquote {
182
height:auto;
183
display:block;
184
text-align:justify;
185
margin:5px 5px 5px 10px;
186
padding: 5px 5px 5px 10px;
187
border-left:10px double #151515;
188-
border-left:10px double #355974;
188+
189
-moz-border-radius-topleft: 90px;
190
-webkit-border-top-left-radius: 90px;
191
 border-top-left-radius: 90px;
192
-moz-border-radius-topright: 5px;
193
-webkit-border-top-right-radius: 5px;
194
border-top-right-radius: 5px;
195
-moz-border-radius-bottomright: 5px;
196
-webkit-border-bottom-right-radius: 5px;
197
border-bottom-right-radius: 5px;
198
-moz-border-radius-bottomleft: 90px;
199
-webkit-border-bottom-left-radius: 90px;
200
border-bottom-left-radius: 90px;
201
}
202
  
203
204
.cite {font-size:0px; color:transparent;display:block; height:0px;}
205
206
207
.vicarious { Divs } 
208
209
/* add*/  
210
#add {
211
visibility:visible;
212
z-index:2000;
213
position:fixed;
214
bottom:0%;
215
left:0%;
216
margin-bottom:20px;  
217
margin-left:20px;
218
background-color:transparent;
219
}
220
221
#add a {
222
text-transform:none;
223
text-decoration:none;
224
height:25px;
225
width:25px;
226
line-height:25px;
227
font-size:18pt;
228
overflow:hidden;
229
color:ffffff;
230
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
231
}
232
233
/* SIDEBAR */  
234
235
#sidebar { 
236
position:fixed;
237
z-index:10000;
238
margin-top:0px;
239
margin-left:-605px;
240
width:440px; 
241
height:100%;
242
background-color:transparent;
243
}
244
245
#sidebar .sidebarB {
246
position:absolute;
247
margin-top:100px;
248
margin-left:0px;
249
width:430px; 
250
height:300px;
251
background-color: eaeaea;
252-
background-color:f2f2f2;
252+
253
}
254
255
.sidebarB .def {
256
z-index:10000;
257
position:absolute;
258
margin-top:5px;
259
margin-left:25px;
260
width:190px; 
261
height:190px;
262
background-color:transparent; 
263
transform: rotate(345deg); 
264
-webkit-transform: rotate(345deg); 
265
-moz-transform: rotate(345deg); 
266
-o-transform: rotate(345deg); 
267
-ms-transform: rotate(345deg); 
268
transition:All 1s linear 0s;
269
-webkit-transition:All 1s linear 0s;
270
-moz-transition:All 1s linear 0s;
271
-o-transition:All 1s linear 0s;
272
} 
273
274
.sidebarB:hover .def {  
275
transition:All 1s linear 0s;
276
-webkit-transition:All 1s linear 0s;
277
-moz-transition:All 1s linear 0s;
278
-o-transition:All 1s linear 0s;
279
transform: rotate(360deg); 
280
-webkit-transform: rotate(360deg); 
281
-moz-transform: rotate(360deg); 
282
-o-transform: rotate(360deg); 
283
-ms-transform: rotate(360deg); 
284
}
285
286
.def .linx {
287
z-index:2;
288
position:absolute;
289
margin-top:0px;
290
margin-left:0px;
291
width:190px; 
292
height:190px;
293
background-color:d7d7d7;
294-
background-color:f2f2f2;
294+
295
296
.def a {
297
letter-spacing:0pt;
298
height:34px;
299
line-height:34px;
300
display:block;
301
outline:dashed;
302
outline-offset:-6px; 
303
outline-width:1px;
304
text-transform:uppercase;
305
text-decoration:none;
306
text-align:center;
307
color:151515;
308-
color:355974;
308+
309
border:1px solid #202020;
310-
border:1px solid #163851;
310+
311
overflow:hidden;
312
font-family: 'Raleway', sans-serif; 
313
transition:All .6s ease-in-out 0s; 
314
-webkit-transition:All .6s ease-in-out 0s;
315
-moz-transition:All .6s ease-in-out 0s;
316
-o-transition:All .6s ease-in-out 0s;
317
}
318
319
.def a:hover {
320
color:b4b4b4;
321
letter-spacing:2pt;
322
background-color:e7e7e7;
323
}
324
325
.def1 {
326
opacity:1;
327
z-index:3;
328
position:absolute;
329
margin-top:0px;
330
margin-left:0px;
331
width:180px; 
332
height:180px;
333
background-size:180px 180px;
334
border:5px solid #454545;
335-
border:5px solid #c2c3c4;
335+
336
-webkit-transition:All 1s linear 0s;
337
-moz-transition:All 1s linear 0s;
338
-o-transition:All 1s linear 0s;
339
transform-origin: top left;
340
transform-style: preserve-3D;
341
transform: rotate(0deg); 
342
}
343
344
.def:hover .def1 { 
345
opacity:0;
346
transform: rotate(-180deg);
347
transform-origin:-0px -0px;  
348
-ms-transform: rotate(-180deg);  
349
-ms-transform-origin:-0px -0px;  
350
-webkit-transform: rotate(-180deg); 
351
-webkit-transform-origin:-0px -0px;  
352
-moz-transform: rotate(-180deg);  
353
-moz-transform-origin:-0px -0px;  
354
-o-transform: rotate(-180deg);  
355
-o-transform-origin:-0px -0px;    
356
} 
357
358
.sidebarB .quote1 {
359
position:absolute;
360
margin-top:245px;
361
margin-left:5px;
362
width:400px; 
363
height:30px;
364
line-height:30px; 
365
outline:solid;
366
outline-offset:-2px; 
367
outline-width:1px;
368
 color:ffffff;
369
background-color: 151515; 
370
display:block;
371
overflow:hidden;
372
text-align:center;
373-
padding:5px 10px;
373+
padding:5px 10px; 
374
transition:All 1.4s linear .7s;
375
-webkit-transition:All 1.4s linear .7s;
376
-moz-transition:All 1.4s linear .7s;
377
-o-transition:All 1.4s linear .7s;
378
}
379
380
.sidebarB:hover .quote1 {
381
font-size:10pt;
382
color: e0e0e0;
383
background-color: 202020; 
384-
background-color: 355974; 
384+
385
height:60px;
386
line-height:100%;
387
margin-left:25px;
388
margin-top:205px;
389
transition:All 1s linear 0s;
390
-webkit-transition:All 1s linear 0s;
391
-moz-transition:All 1s linear 0s;
392
-o-transition:All 1s linear 0s;
393
}
394
395
.sidebarB .title {
396
font-family: 'Playfair Display', serif;
397-
font-family: 'Marck Script', cursive;
397+
font-style:italic;
398-
font-size:42px;
398+
font-size:37px;
399
position:absolute;
400
margin-top:5px;
401
margin-left:240px;
402
text-align:center;
403
display:block;
404
width:170px; 
405
height:50px;
406
line-height:50px;
407
overflow:hidden;
408-
color: cfd5d7;
408+
color:151515;
409
background-color:transparent; 
410
}
411
412
.sidebarB .stuff {
413
position:absolute;
414
margin-top:60px;
415
margin-left:240px;
416
width:170px; 
417
height:215px;
418
overflow:hidden;
419
background-color:transparent; 
420
}
421
422
.sidebarB .icon {
423
display:block;
424
text-align:center;
425
opacity:1;
426
position:absolute;
427
margin-top:0px;
428
margin-left:0px;
429
width:170px;
430
height:125px;
431
font-size:100px;
432
line-height:125px;
433
color: ffffff;
434-
color: cfd5d7;
434+
text-shadow: 4px 2px 2px rgba(0, 0, 0, 1);
435
background-color:transparent;  
436
transition:All 1.4s ease-in-out 0s; 
437
-webkit-transition:All 1.4s ease-in-out 0s;
438
-moz-transition:All 1.4s ease-in-out 0s;
439
-o-transition:All 1.4s ease-in-out 0s;
440
}
441
442
.sidebarB:hover .icon {
443
font-size:2pt;
444
height:10px;
445
margin-top:-125px;
446
opacity:0;  
447
transition:All .6s ease-in-out 0s; 
448
-webkit-transition:All .6s ease-in-out 0s;
449
-moz-transition:All .6s ease-in-out 0s;
450
-o-transition:All .6s ease-in-out 0s;
451
}
452
453
.sidebarB .info {
454
position:absolute;
455
margin-top:0px;
456
margin-left:0px;
457
width:145px;
458
padding:10px;
459
height:170px;
460
overflow:hidden;
461
opacity:0;
462
transition: all 1s ease-out 0s;
463
-o-transition-transition: all 1s ease-out 0s;
464
-webkit-transition: all 1s ease-out 0s;
465
-moz-transition: all 1s ease-out 0s;
466
outline:dashed;
467
outline-offset:-6px; 
468
outline-width:1px;
469
text-align:center;
470
background-color: 151515; 
471
color: e6e6e6;
472-
color: 9f9f9f;
472+
473
-moz-box-shadow:    4px 4px 2px 0px rgba(0, 0, 0, 0.75);
474
box-shadow:         4px 4px 2px 0px rgba(0, 0, 0, 0.75);
475
}
476
477
.sidebarB:hover .info {
478
opacity:1;
479
margin-top:20px;
480
transition: all 1s ease-out 1s;
481
-o-transition-transition: all 1s ease-out 1s;
482
-webkit-transition: all 1s ease-out 1s; 
483
-moz-transition: all 1s ease-out;
484
}
485
486
.sidebarB .strong, .sidebarB strong {
487
color: ffffff;
488-
color: 355974;
488+
489
text-align:center;
490
padding:2px;
491
line-height:100%;
492
margin-top:5px;
493
}
494
495
496
/* INTERESTS - TABLE 1 */   
497
498
#INTtable1 {
499
width:425px;
500
height:500px;
501
background-color:transparent;
502
}
503
504
#INTtable1 .line1, #INTtable1 .line2, #INTtable1 .line3, #INTtable1 .line4 {
505
position:absolute;
506
transition:All 1s linear;
507
-webkit-transition:All 1s linear;
508
-moz-transition:All 1s linear;
509
-o-transition:All 1s linear;
510
background-color:transparent;
511
border-style:solid;
512
}
513
514
#INTtable1 .line1, #INTtable1 .line2 { border-width:5 5 0 0; }
515
#INTtable1 .line3, #INTtable1 .line4 { border-width:0 0 5 5; }
516
#INTtable1 .line1, #INTtable1 .line3 { height:145px; border-color:#fefefe; }
517-
#INTtable1 .line1, #INTtable1 .line3 { height:145px; border-color:#355974; }
517+
#INTtable1 .line2, #INTtable1 .line4 { height:245px; border-color:#454545; }
518-
#INTtable1 .line2, #INTtable1 .line4 { height:245px; border-color:#c2c3c4; }
518+
519
#INTtable1 .line1 { width:110px; margin:80px 0px 0px 305px;}
520
#INTtable1 .line2 { width:100px; margin:90px 0px 0px 305px;}
521
#INTtable1 .line3 { width:135px; margin:335px 0px 0px 5px;}
522
#INTtable1 .line4 { width:125px; margin:225px 0px 0px 15px;}
523
524
#INTtable1:hover .line1 { height:400px; }
525
#INTtable1:hover .line2 { height:390px; }
526
#INTtable1:hover .line3, #INTtable1:hover .line4  { margin-top:5px; }
527
#INTtable1:hover .line3 { height:475px; }
528
#INTtable1:hover .line4 { height:465px; }
529
530
#INTtable1 .about {
531
background-color: eaeaea;
532-
background-color:f2f2f2;
532+
533
padding:0px 5px;
534
height:365px; 
535
margin:100px 0px 0px 25px;
536
position:absolute;
537
text-align:justify;
538
overflow:auto;
539
transition:All .6s ease-in-out 0s; 
540
-webkit-transition:All .6s ease-in-out 0s;
541
-moz-transition:All .6s ease-in-out 0s;
542
-o-transition:All .6s ease-in-out 0s;
543
}
544
545
#INTtable1:hover .about {
546
background-color:ffffff;
547
}
548
549
#INTtable1 .quote {
550
opacity:1;
551
z-index:1;
552
font-family: 'Raleway', sans-serif; 
553
font-size:7pt;
554
letter-spacing:0pt; 
555
width:245px;
556
height:20px; 
557
line-height:20px;
558
margin:470px 0px 0px 150px;
559
position:absolute;
560
text-align:left;
561
padding:0px;
562
letter-spacing:1pt;
563
text-transform:uppercase;
564
color: 4a4a4a;
565-
color:355974;
565+
566
display:block;
567
transition:All .6s ease-in-out 0s; 
568
-webkit-transition:All .6s ease-in-out 0s;
569
-moz-transition:All .6s ease-in-out 0s;
570
-o-transition:All .6s ease-in-out 0s;
571
}
572
573
#INTtable1:hover .quote {
574
opacity:0;
575
}
576
577
#INTtable1 .music {
578
z-index:2;
579
opacity:0;
580
width:245px;
581
height:20px; 
582
margin:470px 0px 0px 150px;
583
position:absolute;
584
padding:0px;
585
overflow:hidden;
586
display:block;
587
transition:All .6s ease-in-out 0s; 
588
-webkit-transition:All .6s ease-in-out 0s;
589
-moz-transition:All .6s ease-in-out 0s;
590
-o-transition:All .6s ease-in-out 0s;
591
}
592
593
#INTtable1:hover .music { opacity:1;}
594
#INTtable1 .xxx  {z-index:2;opacity:1;}
595
#INTtable1:hover .xxx {opacity:0;}
596
#INTtable1 .xxy  {z-index:1;opacity:0;}
597
#INTtable1:hover .xxy {opacity:1;}
598
599
#INTtable1 .xxx, #INTtable1 .xxy {
600
background-color:transparent;
601
width:280px;
602
height:100px;
603
position:absolute;
604
margin:5px 0px 0px 25px;
605
transition:All .6s ease-in-out 0s; 
606
-webkit-transition:All .6s ease-in-out 0s;
607
-moz-transition:All .6s ease-in-out 0s;
608
-o-transition:All .6s ease-in-out 0s;
609
}
610
611
#INTtable1 img {
612
border-width:5px; 
613
border-style:solid;
614
border-color:#151515;
615-
border-color:#355974;
615+
616
width:80px;
617
display:inline-block;
618
} 
619
620
/* INTERESTS - TABLE 2 */  
621
622
#INTtable2 {
623
background-color:#fefefe; 
624-
background-color:#355974; 
624+
625
height:424px;
626
overflow:hidden;
627
}
628
629
.vicbox {
630
width: 207px;
631
height: 207px;
632
margin: 0px;
633
float: left; 
634
overflow: hidden;
635
position: relative;
636
text-align: center;
637
}
638
639
.vicbox .mask, .vicbox .content {
640
width: 207px;
641
height: 207px;
642
position: absolute;
643
overflow: hidden;
644
top: 0;
645
left: 0;
646
background-color: rgba(0,0,0,0.5);
647-
background-color: rgba(53,89,116,0.5);
647+
648
transition: all 0.3s ease-in 0.4s;
649
}
650
651
.vicbox:hover .mask {  
652
opacity:1; 
653
transition-delay: 0s;
654
}
655
656
.vicbox img {
657
width:207px;
658
height:207px;
659
overflow:hidden;
660
display: block;
661
position: relative;
662
transition: all 0.4s ease-in-out 0.5s; 
663
}
664
665
.vicbox:hover img { 
666
transition-delay: 0s; 
667
}
668
669
.vicbox .h2, .vicbox h2 {
670
font-family: 'Oswald', sans-serif; 
671
display:block;
672
text-transform: uppercase;
673
color: ffffff;
674
text-align: center;
675
position: relative;
676
font-size: 10pt;
677
line-height:100%;
678
padding: 5px; 
679
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
680
opacity:0;
681
transform: scale(10);
682
transition: all 0.3s ease-in-out 0.1s;
683
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
684
background: transparent;
685
margin: 20px 10px 0px 10px;
686
}
687
688
.vicbox:hover .h2, .vicbox:hover h2 { 
689
opacity: 1;
690
transform: scale(1);
691
transition-delay: 0.1s;
692
}
693
694
.vicbox .stats {
695
position: relative;
696
color: ffffff;
697
padding: 10px 5px 5px 5px;
698
text-align: left;
699
overflow:auto;
700
height:140px;
701
margin:0px 10px;
702
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
703
opacity:0;
704
transform: scale(10);
705
transition: all 0.3s ease-in-out 0.2s;
706
} 
707
708
.stats p {
709
color:ffffff;
710
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
711
}
712
713
.stats b {
714
font-size:8pt;
715
color: e1e1e1;
716-
color:d7dee3;
716+
717
} 
718
719
.vicbox:hover .stats { 
720
opacity:1; 
721
transform: scale(1);
722
transition-delay: 0.2s;
723
} 
724
725
726
/* INTERESTS - TABLE 3 */  
727
728
#INTtable3 {
729
width:425px;
730
height:350px;
731
overflow:hidden; 
732
}
733
734
#INTtable3 .title1 {
735
z-index:7;
736
font-size:40pt;
737
width:415px;
738
height:50px;
739
line-height:50px;
740
color:fefefe;
741-
color:355974;
741+
742
padding:10px 5px 80px 5px;
743
border-bottom:2px solid #d7d7d7;
744-
border-bottom:2px solid f2f2f2;
744+
background-color:151515;
745-
background-color:eaeced;
745+
746
margin-left:0px;
747
position:absolute;
748
display:block;
749
overflow:hidden;
750
-webkit-box-shadow: 0px 5px 0px 0px rgba(181, 181, 181, 0.75);
751
-moz-box-shadow:    0px 5px 0px 0px rgba(181, 181, 181, 0.75);
752
box-shadow:         0px 5px 0px 0px rgba(181, 181, 181, 0.75);
753
font-family: 'Dynalight', cursive;
754
text-transform:none;
755
letter-spacing:1pt;
756
}
757
758
#INTtable3 .title2 {
759
z-index:8;
760
font-size:6pt;
761
width:205px;
762
height:10px;
763
line-height:10px;
764
color:151515;
765
text-align:right;
766
padding:2px 215px 2px 5px;
767
background-color:fefefe;
768-
background-color:355974;
768+
769
margin-top:60px;
770
margin-left:0px;
771
display:block;
772
overflow:hidden; 
773
text-transform:uppercase;
774
font-family: 'Raleway', sans-serif; 
775
letter-spacing:3pt;
776
}
777
778
#INTtable3 .pic {
779
z-index:9;
780
width:100px;
781
height:100px;   
782
background-size:100px 100px; 
783
position:absolute;
784
margin-top:20px;
785
margin-left:300px; 
786
overflow:none; 
787
border:5px solid #fefefe; 
788-
border:5px solid #355974; 
788+
789
-moz-border-radius: 360px;
790
border-radius: 360px;
791
}
792
793
#INTtable3 .about {
794
z-index:6;
795
width:397px;
796
height:140px;    
797
position:absolute;
798
margin-top:145px;
799
margin-left:5px;
800
padding:5px; 
801
overflow:auto; 
802
border-width:0px 4px 0px 4px;
803
border-style:double;
804
border-color:fefefe; 
805-
border-color:355974; 
805+
background-color: eeeeee;
806-
background-color:f2f2f2;
806+
807
808
#INTtable3 .quote {
809
z-index:7;
810
width:405px;
811
height:35px;    
812
line-height:100%;
813
padding:10px;
814
position:absolute;
815
margin-top:295px;
816
margin-left:0px;
817
overflow:auto; 
818
color: eeeeee;
819-
color:355974;
819+
820
text-align:center;
821
background-color:151515;
822-
background-color:eaeced;
822+
823
font-size:9pt;
824
overflow:hidden; 
825
} 
826
827
828
/* INTERESTS - TABLE 4 */  
829
830
#INTtable4 {
831
width:405px;
832
height:168px;
833
overflow:hidden; 
834
border:5px solid #454545;
835-
border:5px solid #c2c3c4;
835+
836
overflow:auto;
837
}
838
839
840
/* LIKE TO MEET - TABLE 1 */  
841
842
#LK2MEETtable1 {
843
width:350px;
844
height:500px;
845
overflow:hidden;
846
}
847
848
#LK2MEETtable1 .namefield {
849
background-color: transparent; 
850
width:502px;
851
height:75px;
852
position:absolute;
853
margin-left:60px;
854
margin-top:212px;
855
transform: rotate(90deg) ;
856
-webkit-transform: rotate(90deg) ;
857
-moz-transform: rotate(90deg) ;
858
-o-transform: rotate(90deg) ;
859
-ms-transform: rotate(90deg) ;
860
display:block;
861
overflow:hidden;
862
}
863
864
#LK2MEETtable1 .h1, #LK2MEETtable1 h1 {
865
margin:0px;
866
text-align:left;
867
padding-left:15px; 
868
height:55px; 
869
line-height:55px;
870
font-size:55px; 
871
font-family: 'Oswald', sans-serif; 
872
color:0f0f0f;
873-
color:cfd5d7;
873+
border-bottom:20px solid #fefefe; 
874-
border-bottom:20px solid #355974; 
874+
875
overflow:hidden;
876
}
877
878
#LK2MEETtable1 .default, #LK2MEETtable1 .innerbox {
879
position:absolute; 
880
transition:All 1s linear 0s;
881
-webkit-transition:All 1s linear 0s;
882
-moz-transition:All 1s linear 0s;
883
-o-transition:All 1s linear 0s;
884
}
885
886
#LK2MEETtable1 .default {
887
margin:0px 0px 0px 0px;
888
overflow:none; 
889
opacity:1;
890
z-index:1;
891
width:275px; 
892
height:500px; 
893
background-size:275px 500px;
894
}
895
896
#LK2MEETtable1:hover .default {
897
opacity:.2;
898
}
899
900
#LK2MEETtable1 .innerbox {
901
overflow:hidden;
902
opacity:0;
903
z-index:2;
904
width:200px; 
905
height:380px; 
906
padding:10px;
907
margin:0px 0px 0px 25px; 
908
border:1px solid #c2b0ad; 
909
background-color:e7e7e7;
910
outline:dashed;
911
outline-offset:-6px; 
912
outline-width:1px;
913
 -webkit-box-shadow: 4px 4px 2px 0px rgba(176, 176, 176, 0.75);
914
-moz-box-shadow:    4px 4px 2px 0px rgba(176, 176, 176, 0.75);
915
box-shadow:         4px 4px 2px 0px rgba(176, 176, 176, 0.75);
916
}
917
918
.innerbox .text { 
919
width:180px; 
920
margin:5px;
921
padding:5px;
922
height:360px;  
923
overflow:auto;
924
}
925
926
 .innerbox p {}
927
928
#LK2MEETtable1:hover .innerbox {
929
overflow:auto;
930
opacity:1;
931
margin:50px 0px 0px 25px;
932
}
933
934
/* LIKE TO MEET - TABLE 2 */  
935
936
#LK2MEETtable2 {
937
z-index:7;
938
width:330px;
939
height:330px;
940
overflow:hidden; 
941
outline:solid;
942
outline-offset:-15px; 
943
outline-width:5px;
944
outline-color:454545;
945
border:5px solid #eeeeee; 
946-
outline-color:c2c3c4;
946+
947-
border:5px solid #355974; 
947+
948
949
#LK2MEETtable2 .about {
950
z-index:8;
951
width:290px;
952
height:240px;
953
margin-top:15px;
954
margin-left:15px;
955
padding:5px;
956
position:absolute;
957
overflow:auto;
958
}
959
960
#LK2MEETtable2 img {
961
width:100px;
962
height:100px;
963
overflow:hidden;
964
float:left;
965
padding:10px;
966
margin:2px;
967
background-color:454545;
968
outline:dotted;
969-
background-color:c2c3c4;
969+
970
outline-width:1px;
971
outline-color:ffffff;
972
}
973
974
#LK2MEETtable2 .text {
975
z-index:9;
976
position:absolute;
977
width:330px;
978
height:30px;
979
margin-top:275px;
980
margin-left:0px;
981
overflow:hidden;
982
background-color:151515; 
983
transition:All .4s linear 2s; 
984-
background-color:355974; 
984+
985
-moz-transition:All .4s linear 2s;
986
-o-transition:All .4s linear 2s;
987
}
988
989
#LK2MEETtable2 .text:hover {
990
height:330px;
991
margin-top:0px;
992
transition:All .4s linear 0s; 
993
-webkit-transition:All .4s linear 0s; 
994
-moz-transition:All .4s linear 0s; 
995
-o-transition:All .4s linear 0s; 
996
}
997
998
.text  .title {
999
position:absolute;
1000
width:320px;
1001
height:30px;
1002
line-height:30px;
1003
font-size:12pt;
1004
color:ffffff;
1005
padding-right:10px;
1006
display:block;
1007
text-align:right;
1008
margin-top:0px;
1009
margin-left:0px;
1010
overflow:hidden;
1011
text-transform:uppercase;
1012
}
1013
1014
.text .additional {
1015
position:absolute;
1016
margin-top:40px;
1017
margin-left:10px;
1018
width:270px;
1019
height:210px;
1020
padding:10px;
1021
background-color:d7d7d7;
1022
overflow:auto;
1023-
background-color:f2f2f2;
1023+
1024
border:double #fefefe 10px;
1025
transition:All .8s linear 0s; 
1026-
border:double #355974 10px;
1026+
1027
-moz-transition:All .8s linear 0s;
1028
-o-transition:All .8s linear 0s;
1029
}
1030
1031
.text:hover .additional {
1032
opacity:1;
1033
margin-top:50px;
1034
transition:All .8s linear 1s; 
1035
-webkit-transition:All .8s linear 1s;
1036
-moz-transition:All .8s linear 1s;
1037
-o-transition:All .8s linear 1s;
1038
}
1039
 
1040
1041
/* LIKE TO MEET - TABLE 3 */  
1042
1043
#LK2MEETtable3 {
1044
width:350px;
1045
height:170px;
1046
overflow:hidden;
1047
outline:groove;
1048
outline-offset:-20px; 
1049
outline-width:1px;
1050
background-color: ffffff;
1051
color: 151515;  
1052-
background-color:355974;
1052+
1053-
color:ffffff;  
1053+
1054
1055
#LK2MEETtable3 .shorty {
1056
width:290px;
1057
height:100px; 
1058
text-align:justify;
1059
position:auto;
1060
padding:5px;
1061
margin:25px 0px 0px 25px;
1062
overflow:auto;  
1063
}
1064
1065
.shorty p { color: 151515;  text-indent:0px;} 
1066
.shorty p:first-letter { font-size: 7pt; }
1067-
.shorty p {color:ffffff;text-indent:0px;} 
1067+
1068
1069
#LK2MEETtable3 .one, #LK2MEETtable3 one  {
1070
display:block;
1071
background-color:151515;
1072
color:fefefe;
1073-
background-color:f2f2f2;
1073+
1074-
color:355974;
1074+
1075
height:35px;
1076
width:35px;
1077
font-size:16pt;
1078
font-family: 'Raleway', sans-serif; 
1079
outline:dashed;
1080
outline-offset:-6px; 
1081
outline-width:1px;
1082
float:left;
1083
margin:2px;
1084
text-align:center;
1085
}
1086
1087
1088
/* LIKE TO MEET - Connections Tables */  
1089
1090
#LK2MEETconnTables {
1091
width:350px;
1092
height:110px;
1093
overflow:hidden; 
1094
border-bottom:2px solid #d7d7d7;
1095
-webkit-box-shadow: 0px 5px 0px 0px rgba(181, 181, 181, 0.75);
1096-
border-bottom:2px solid #f2f2f2;
1096+
1097
box-shadow:         0px 5px 0px 0px rgba(181, 181, 181, 0.75);
1098
}
1099
1100
#LK2MEETconnTables .title1, #LK2MEETconnTables .title1, #LK2MEETconnTables .pic, #LK2MEETconnTables .conn {
1101
transition:All .6s linear 0s; 
1102
-webkit-transition:All .6s linear 0s;
1103
-moz-transition:All .6s linear 0s;
1104
-o-transition:All .6s linear 0s;
1105
}
1106
1107
#LK2MEETconnTables .title1 {
1108
z-index:7;
1109
font-size:16pt;
1110
width:340px;
1111
height:30px;
1112
line-height:30px;
1113
color:000000;
1114
text-align:right;
1115-
color:355974;
1115+
1116
margin-top:0px;
1117
margin-left:0px;
1118
position:absolute;
1119
display:block;
1120
overflow:hidden;
1121
font-family: 'Raleway', sans-serif; 
1122
text-transform:none;
1123
letter-spacing:1pt;
1124
}
1125
1126
#LK2MEETconnTables:hover .title1 {
1127
margin-left:-360px;
1128
opacity:0;
1129
}
1130
1131
#LK2MEETconnTables .title2 {
1132
z-index:8;
1133
font-size:6pt;
1134
width:230px;
1135
height:10px;
1136
line-height:10px;
1137
color:ffffff;
1138
text-align:left;
1139
padding:2px 5px 2px 115px;
1140
background-color:454545;
1141
position:absolute;
1142-
background-color:c2c3c4;
1142+
1143
margin-left:0px;
1144
display:block;
1145
overflow:hidden; 
1146
text-transform:uppercase;
1147
font-family: 'Raleway', sans-serif; 
1148
letter-spacing:3pt;
1149
}
1150
1151
#LK2MEETconnTables:hover .title2 {
1152
margin-left:360px;
1153
opacity:0;
1154
transition:All .6s linear .6s; 
1155
-webkit-transition:All .6s linear .6s;
1156
-moz-transition:All .6s linear .6s;
1157
-o-transition:All .6s linear .6s;
1158
}
1159
1160
#LK2MEETconnTables .pic {
1161
z-index:9;
1162
width:80px;
1163
height:80px;   
1164
background-size:80px 80px; 
1165
position:absolute;
1166
margin-top:10px;
1167
margin-left:25px; 
1168
overflow:none; 
1169
border:5px solid #454545; 
1170
} 
1171-
border:5px solid #c2c3c4; 
1171+
1172
#LK2MEETconnTables:hover .pic  {
1173
margin-left:245px;
1174
opacity:1;
1175
transition:All .6s linear 1.2s; 
1176
-webkit-transition:All .6s linear 1.2s;
1177
-moz-transition:All .6s linear 1.2s;
1178
-o-transition:All .6s linear 1.2s;
1179
}
1180
 
1181
#LK2MEETconnTables .conn {
1182
opacity:0;
1183
z-index:10;
1184
font-size:16pt;
1185
width:0px;
1186
height:80px;
1187
padding:5px;
1188
margin-top:10px;
1189
margin-left:25px; 
1190
position:absolute;
1191
overflow:hidden;
1192
background-color: ffffff;
1193
font-family:arial narrow;
1194-
background-color: e0e0e0;
1194+
1195
}
1196
1197
.conn p {;font-family:arial narrow;}
1198
1199
#LK2MEETconnTables:hover .conn {
1200
width:200px;
1201
opacity:1;
1202
overflow:auto;
1203
transition:All .6s linear 1.2s; 
1204
-webkit-transition:All .6s linear 1.2s;
1205
-moz-transition:All .6s linear 1.2s;
1206
-o-transition:All .6s linear 1.2s;
1207
}
1208
1209
/* LIKE TO MEET - Connections Links*/  
1210
1211
#LK2MEETlinksTable {
1212
background-color: d7d7d7; 
1213
width:350px;
1214-
background-color:eaeced; 
1214+
1215
overflow:hidden;  
1216
}
1217
1218
#LK2MEETlinksTable .left, #LK2MEETlinksTable .right {
1219
width:48%;
1220
overflow:auto; 
1221
height:95px;
1222
} 
1223
1224
#LK2MEETlinksTable .left { float:left;} 
1225
#LK2MEETlinksTable .right { float:right; }
1226
1227
#LK2MEETlinksTable a {
1228
background-color:151515;
1229
color:ffffff;
1230-
background-color:355974;
1230+
1231
display:block;
1232
text-align:center;
1233
height:17px;
1234
line-height:17px;
1235
margin-bottom:2px;
1236
font-family: 'Roboto Condensed', sans-serif;
1237
outline:solid;
1238
outline-offset:-3px; 
1239
outline-width:1px; 
1240
text-transform;uppercase;
1241
text-decoration:none;
1242
letter-spacing:0pt;
1243
transition:All .6s linear 0s; 
1244
-webkit-transition:All .6s linear 0s;
1245
-moz-transition:All .6s linear 0s;
1246
-o-transition:All .6s linear 0s;
1247
}
1248
1249
#LK2MEETlinksTable a:hover {
1250
background-color: fefefe;
1251
color: 151515; 
1252-
background-color:f2f2f2;
1252+
1253-
color:355974; 
1253+
1254
}
1255
1256
 .vicarious{ Hide Codes }
1257
.profileInfo, .userProfileURL, .friendsComments, .blurbs, .blacktext12, .friendSpace, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userProfiledetail,  .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .blacktext12, .navigationBar, tr#groups,  .navigationBar, .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
1258
table table table table td {width:0px;}
1259
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
1260
div div select, div div form {display:none !important;}
1261
select { visibility:hidden!important; WIDTH:0px!important;}
1262
table div {display:none;}
1263
table table div {display:block;}
1264
.clearfix {display:none !important;position:absolute!important;} 
1265
div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
1266
.profileInfo tr tr td { visibility:hidden; }
1267
.profileInfo td.text { visibility:visible; }
1268
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/} 
1269
</style></td></tr></table><table style="display:none"><tr><td>
1270
1271
 
1272
1273
1274
1275
 
1276
-----------------------------LIKE TO MEET-------------------------
1277
 
1278
 
1279
  
1280
</td></tr></table></td></tr></table><table class="viclike2meet_table"><tr><td valign="top" align="center"><table><tr><td>
1281
 
1282
<font class="cite">
1283
The above table code must remain at the top.  FULL tables below can be rearranged.
1284
1285
***Image Sizing Instructions***
1286
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 this section. The tall 'default' image is 275px width by 500px height. 
1287
</font> 
1288
 
1289
1290
1291
</td></tr></table><table class="vic_table"><tr><td> 
1292
1293
<div id="LK2MEETtable1"><div class="namefield">
1294
1295
<font class="h1">FirstName
1296
<font color="b0b0b0">LastName
1297
1298
</font></font></div>
1299
1300
<div class="default" style="background-image:url(http://i61.tinypic.com/2q87l6w.jpg);">
1301-
<div class="default" style="background-image:url(http://i60.tinypic.com/977g5u.jpg);">
1301+
1302
</div><div class="innerbox"><div class="text">
1303
1304
<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.
1305
1306
</div></div></div>
1307
1308
1309
1310
</td></tr></table><table class="vic_table"><tr><td> 
1311
1312
1313
<div id="LK2MEETtable2">
1314
1315
<div class="about">
1316
1317
<p><img src="http://i59.tinypic.com/vrc4lw.jpg">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.
1318-
<p><img src="http://i58.tinypic.com/i1buon.jpg">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.
1318+
1319
<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.
1320
1321
</div>
1322
1323
1324
<div class="text"><div class="title">
1325
1326
Something goes here ▼
1327
1328
</div><div class="additional">
1329
1330
<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. 
1331
1332
1333
<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.
1334
 
1335
1336
</div></div></div>
1337
1338
1339
1340
1341
</td></tr></table><table class="vic_table"><tr><td> 
1342
1343
<div id="LK2MEETtable3"><div class="shorty">
1344
1345
<p><font class="one">A</font>t 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.
1346
1347
</div></div> 
1348
1349
1350
</td></tr></table><table class="vic_table"><tr><td> 
1351
1352
<div id="LK2MEETconnTables">
1353
1354
<div class="title1">Connection One</div>
1355
<div class="title2">Short Quote</div>
1356
1357
<a href="/#">
1358
<div class="pic" style="background-image:url(http://i57.tinypic.com/28aq0rd.jpg);">
1359-
<div class="pic" style="background-image:url(http://i57.tinypic.com/t96ww5.jpg);">
1359+
1360
1361
1362
<div class="conn">
1363
1364
<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.
1365
1366
</div></div>
1367
1368
1369
1370
</td></tr></table><table class="vic_table"><tr><td> 
1371
1372
<div id="LK2MEETconnTables">
1373
1374
<div class="title1">Connection Two</div>
1375
<div class="title2">Short Quote</div>
1376
1377
<a href="/#">
1378
<div class="pic" style="background-image:url(http://i57.tinypic.com/28aq0rd.jpg);">
1379-
<div class="pic" style="background-image:url(http://i57.tinypic.com/t96ww5.jpg);">
1379+
1380
1381
1382
<div class="conn">
1383
1384
<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.
1385
1386
</div></div>
1387
1388
1389
</td></tr></table><table class="vic_table"><tr><td> 
1390
1391
<div id="LK2MEETconnTables">
1392
1393
<div class="title1">Connection Three</div>
1394
<div class="title2">Short Quote</div>
1395
1396
<a href="/#">
1397
<div class="pic" style="background-image:url(http://i57.tinypic.com/28aq0rd.jpg);">
1398-
<div class="pic" style="background-image:url(http://i57.tinypic.com/t96ww5.jpg);">
1398+
1399
1400
1401
<div class="conn">
1402
1403
<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.
1404
1405
</div></div>
1406
1407
</td></tr></table><table class="vic_table"><tr><td> 
1408
1409
<div id="LK2MEETlinksTable"><div class="left">
1410
1411
<a href="/#">Connection Name</a>
1412
<a href="/#">Connection Name</a>
1413
<a href="/#">Connection Name</a>
1414
<a href="/#">Connection Name</a>
1415
<a href="/#">Connection Name</a> 
1416
1417
</div><div class="right">
1418
1419
<a href="/#">Connection Name</a>
1420
<a href="/#">Connection Name</a>
1421
<a href="/#">Connection Name</a>
1422
<a href="/#">Connection Name</a>
1423
<a href="/#">Connection Name</a> 
1424
1425
</div></div>
1426
-----------------------------INTERESTS-----------------------------
1427
 
1428
 
1429
 </td></tr></table></td></tr></table><table class="vicinterests_table"><tr><td valign="top" align="center"><table><tr><td>
1430
 
1431-
</td></tr></table></td></tr></table><table class="vicinterests_table"><tr><td valign="top" align="center"><table><tr><td>
1431+
1432
The above table code must remain at the top.  FULL tables below can be rearranged.
1433
</font> 
1434
1435
</td></tr></table><table class="vic_table"><tr><td>
1436
 
1437
1438
<div id="INTtable1">
1439
1440
<div class="line1"></div><div class="line2"></div><div class="line3"></div><div class="line4"></div> 
1441
1442
1443
<div class="xxx">
1444
1445
<img src="http://i60.tinypic.com/2sabl1v.jpg">
1446
<img src="http://i60.tinypic.com/2v14yfc.jpg">
1447-
<img src="http://i57.tinypic.com/2u5c2ki.jpg">
1447+
<img src="http://i62.tinypic.com/2q3ytl5.jpg">
1448-
<img src="http://i58.tinypic.com/2uemhbs.jpg">
1448+
1449-
<img src="http://i60.tinypic.com/2ry6a74.jpg">
1449+
1450
</div><div class="xxy">
1451
1452
<img src="http://i62.tinypic.com/2l9ryq1.jpg">
1453
<img src="http://i57.tinypic.com/28aq0rd.jpg">
1454-
<img src="http://i57.tinypic.com/t96ww5.jpg">
1454+
<img src="http://i61.tinypic.com/2nl5sva.jpg">
1455-
<img src="http://i59.tinypic.com/s2a6ht.jpg">
1455+
1456-
<img src="http://i58.tinypic.com/jrcvpw.jpg">
1456+
1457
1458
<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.
1459
1460
<font class="blockquote">
1461
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
1462
</font> 
1463
1464
<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?  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.
1465
 
1466
1467
</div><div class="quote">
1468
1469
I shall live by passion and not by law
1470
1471
</div><div class="music">
1472
1473
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
1474
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
1475
    <param name="bgcolor" value="#d7d7d7" />
1476
<param name="wmode" value="opaque" />
1477-
    <param name="bgcolor" value="#f2f2f2" />
1477+
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/giu61ppz04/FATM_H.mp3&autoplay=1&bgcolor=d7d7d7&loadingcolor=151515&buttoncolor=151515&slidercolor=151515" />
1478
</object>
1479-
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/giu61ppz04/FATM_H.mp3&autoplay=1&bgcolor=f2f2f2&loadingcolor=355974&buttoncolor=355974&slidercolor=355974" />
1479+
1480
1481
</div></div>
1482
1483
<font class="cite">You will note a line of code that starts with param name="wmode" above.  The normal player that you add from mp3.flash 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. This will keep it hidden until it's hovered over.</font>
1484
1485
1486
1487
</td></tr></table><table class="vic_table"><tr><td>
1488
1489
<div id="INTtable2"><div class="vicbox" style="position:absolute; margin-top:0px; margin-left:0px; ">
1490
1491-
<img src="http://i62.tinypic.com/6h1grd.jpg">
1491+
<img src="http://i57.tinypic.com/1fzasz.jpg">
1492
1493
<div class="mask">
1494
1495
<font class="h2">Personality</font>
1496
 
1497
<div class="stats">
1498
<b>Type</b> Input Info
1499
<br><b>Traits</b> Input Info
1500
<br><b>Quirks</b> Input Info
1501
 
1502
<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?
1503
1504
</div></div></div>
1505
1506
<div class="vicbox" style="position:absolute; margin-top:0px; margin-left:218px;">
1507
1508-
<img src="http://i61.tinypic.com/jktz85.jpg">
1508+
<img src="http://i61.tinypic.com/2lij81v.jpg">
1509
1510
<div class="mask">
1511
1512
<font class="h2">Legal & Physical</font>
1513
1514
<div class="stats">
1515
<b>NAME:</b> Input info
1516
<BR><b>NICKNAMES:</b> Input info
1517
<BR><b>ALIASES:</b> Input info
1518
<BR><b>DATE OF BIRTH:</b> Input info
1519
<BR><b>PLACE OF BIRTH:</b> Input info
1520
<BR><b>CURRENT RESIDENCE:</b> Input info  
1521
<BR><b>ETHNICITY:</b> Input info
1522
<BR><b>HAIR COLOR:</b> Input info
1523
<BR><b>EYE COLOR:</b> Input info
1524
<BR><b>HEIGHT:</b> Input info
1525
<BR><b>WEIGHT:</b> Input info
1526
<BR><b>BIRTHMARKS/SCARS:</b> Input info
1527
1528
</div></div></div>  
1529
 
1530
1531
<div class="vicbox" style="position:absolute; margin-top:217px; margin-left:0px;">
1532
1533-
<img src="http://i58.tinypic.com/otp34p.jpg">
1533+
<img src="http://i61.tinypic.com/beuceu.jpg">
1534
1535
<div class="mask">
1536
1537
<font class="h2">Family & Relationships</font>
1538
1539
<div class="stats">
1540
<BR><b>MOTHER:</b> Input info
1541
<BR><b>FATHER:</b> Input info
1542
<BR><b>SISTER(S):</b> Input info
1543
<BR><b>BROTHER(S):</b> Input info
1544
<BR><b>Other Family:</b> Input info
1545
<BR><b>STATUS:</b> Input info
1546
<BR><b>ORIENTATION:</b> Input info
1547
<BR><b>CURRENT:</b> Input info
1548
<BR><b>FORMER:</b> Input info
1549
1550
</div></div></div>
1551
1552
<div class="vicbox" style="position:absolute; margin-top:217px; margin-left:218px;">
1553
1554-
<img src="http://i59.tinypic.com/2zyxzzb.jpg">
1554+
<img src="http://i60.tinypic.com/30wms5z.jpg">
1555
1556
<div class="mask">
1557
1558
<font class="h2">Education & Employment</font>
1559
1560
<div class="stats">
1561
<b>High School</b> Input Info
1562
<br><b>College</b> Input Info
1563
<br><b>Major</b> Input Info
1564
<br><b>Degree</b> Input Info
1565
<br><b>OCCUPATION:</b> Input info
1566
<BR><b>JOB DESCRIPTION:</b> Input info
1567
<BR><b>EMPLOYER:</b> Input info
1568
<BR><b>SKILLSET:</b> Input info
1569
1570
1571
</div></div></div></div>
1572
1573
1574
1575
</td></tr></table><table class="vic_table"><tr><td> 
1576
1577
<div id="INTtable3"> 
1578
<div class="title1">Howl</div>
1579
<div class="title2">at the moon</div>
1580
1581-
<div class="pic" style="background-image:url(http://i57.tinypic.com/t96ww5.jpg);"></div>
1581+
<div class="pic" style="background-image:url(http://i57.tinypic.com/28aq0rd.jpg);"></div>
1582
1583
1584
<div class="about">
1585
1586
<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.
1587
1588
1589
<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.
1590
1591
</div><div class="quote"> 
1592
This is where I hide my power.  This is where I become free.
1593
<BR>
1594
This is where I take control and slowly choke your fantasies.
1595
1596
</div></div>
1597
1598
1599
</td></tr></table><table class="vic_table"><tr><td>
1600
1601
1602
<div id="INTtable4">
1603
1604
<p>This is an extra box.
1605
<em>Emphasized</em>
1606
<b>Bold</b>
1607
<i>Italics</i>
1608
<font class="u">underline</font>
1609
<font class="strike">strike</font>
1610
<font class="strong">strong</font>
1611
1612
<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.
1613
1614
</div>
1615
 
1616
 
1617
-----------------------------MUSIC---------------------------------  
1618
 
1619
 </td></tr></table></td></tr></table><table><tr><td valign="top" align="center"><table><tr><td>
1620-
</td></tr></table></td></tr></table><table><tr><td valign="top" align="center"><table><tr><td>
1620+
1621
<div id="sidebar"><div class="sidebarB"><div class="def"> 
1622
1623
<div class="def1" style="background-image:url(http://i62.tinypic.com/qns1np.jpg);">
1624-
<div class="def1" style="background-image:url(http://i59.tinypic.com/wc5d.jpg);">
1624+
1625
</div><div class="linx"> 
1626
1627
<a href="/logincomplete.php">Home</a>
1628
<a href="/send_message.php?member_id=xxxxxx">Message</a>
1629
<a href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
1630
<a href="/gallery.php?member_id=xxxxxx">Photos</a>
1631
<a href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
1632
1633
1634
</div></div><div class="quote1">
1635
1636
But I'm, nothing special.  I'm not unique.  I have many secrets, and I eat the weak.
1637
1638
1639
</div><div class="title">
1640
1641
Arooooo
1642
1643
</div><div class="stuff"> 
1644
1645
<div class="icon">☾</div>
1646
1647
<div class="info">
1648
1649
<Strong>Verses</strong>
1650
<BR>Verse, Verse, Verse, Verse
1651
1652
<BR><Strong>Writing Style</strong>
1653
<BR>Multi-para to Novella
1654
1655
<Strong>Dues</strong>
1656
<br>S:0 | C:0 | M:0
1657
1658
1659
</div></div></div></div> 
1660
1661
 
1662
-----------------------------MOVIES--------------------------------
1663
1664
 <font class="cite">If your profile is private, you can delete this entire section.</font> 
1665
1666
<div id="add"><a href="/invite_friend.php?friend_id=xxxxxx">✚</a></div>
1667
 
1668
 
1669
1670
-----------------------------TELEVISION/BOOKS/HEROES--------------------------------
1671
 
1672
  <font class="cite">LEAVE BLANK</font>