View difference between Paste ID: 323rSizs and nSfb18Zt
SHOW: | | - or go back to the newest paste.
1
       				        !!!!!!!!!!!!Read It!!!!!!!!!!!!
2
 
3
                                                (⊙.⊙(☉_☉)⊙.⊙)
4
 
5
CAN'T EMPHASIZE THIS ENOUGH:  There are div ids/classes, tables (table, tr, td) and img classes in this layout.  Be VERY, VERY, VERY careful not to drop off any of the coding.   
6
7
............................
8
 
9
IMAGES
10
11-
This layout will code image sizes for you.  For the sake of simplicity you may make all photos 250px width by 250px height EXCEPT the 'default' photo in Like to Meet and the 'banner' size photo in Music. The tall 'default' image is 275px width by 500px height.  The 'banner' (Vicbox) image in Music is 500px width by 300px height.
11+
Image dimensions are located in Like to Meet
12
13
If you elect to keep the color scheme for pics, the psd is here:
14-
https://drive.google.com/file/d/0B79YHAkeE7SuejREWlRIbFllX3M
14+
https://drive.google.com/file/d/0B79YHAkeE7SuNm5yUDVBZk15SGM
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
<style type="text/css">
57
@import url(http://fonts.googleapis.com/css?family=Raleway:400,800,100,200,300,500,600,700,900|Oswald:300,400,700|Dynalight|Tangerine:400,700|Roboto+Condensed:400,700);
58
  
59
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */  
60
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
61
62
 
63
.vicarious { Structure }
64
 
65
body {
66
background-image:url();   
67
background-color:dcb754; 
68-
-----------------------------HEROES-------------------------------
68+
background-repeat:repeat;
69
background-attachment:fixed;
70
background-position:center center;
71
}   
72
 
73
table, tr, td { background-color:transparent; border:0px; padding:0px; margin:0px; }
74
 
75
.vic-LEFT-SIDE_table, .vic-RIGHT-SIDE_table  {
76
visibility:visible;
77
z-index:2;
78
position:absolute;
79
top:0%;
80
left:50%;
81
border:0px;  
82
margin-top:160px;  
83
height:auto;
84
display:inline-block;
85
padding:0px;
86
}
87
 
88
.vic-LEFT-SIDE_table{ width:500px; height:auto; margin-left:-215px;  }
89
.vic-LEFT-SIDE_table tr { }
90
.vic-LEFT-SIDE_table td { margin:0px; max-width:500px;  }  
91
 
92
.vic-RIGHT-SIDE_table { width:300px; height:auto;  margin-left:295px;  }
93
.vic-RIGHT-SIDE_table tr { }
94
.vic-RIGHT-SIDE_table td { margin:0px; max-width:300px;   }
95
 
96
.vic_table {
97
width:100%;
98
margin-bottom:4px;
99
border:0px solid #;  
100
background-color:;
101
overflow:hidden;
102
display:block; 
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
::-webkit-scrollbar {width: 10px;}
113
114
::-webkit-scrollbar-track {
115
border: 1px solid #203449 ;
116
background-color:transparent;}
117
118
::-webkit-scrollbar-thumb {
119
border: 4px double #203449 ; 
120
background-color: c89e5b; 
121
-moz-border-radius-topright: 90px;
122
-webkit-border-top-right-radius: 90px;
123
border-top-right-radius: 90px;
124
-moz-border-radius-bottomleft: 90px;
125
-webkit-border-bottom-left-radius: 90px;
126
border-bottom-left-radius: 90px;
127
}
128
 
129
.vicarious { General Text }
130
 
131
table, tr, td, li, p, div, .text, .btext, a, b, i {
132
font-family:tahoma;
133
font-size:7pt;
134
line-height:100%;
135
color:203449 ;
136
padding:0px;
137
margin:0px;
138
text-decoration:none;
139
text-transform:none;
140
text-align:left;
141
word-wrap: break-word;
142
}
143
 
144
p {
145
text-align:justify;
146
margin-top: 5px;
147
text-indent:10px;
148
word-wrap: break-word;
149
}
150
 
151
p::first-line {  }
152
p::first-letter {   } 
153
 
154
b {
155
font-size:8pt;
156
text-transform:uppercase;
157
font-family: 'Roboto Condensed', sans-serif; 
158
}  
159
 
160
i {
161
font-size:10pt;
162
color: ;
163
font-family: 'Dynalight', cursive;
164
}
165
 
166
.u, u {
167
text-decoration:underline;
168
}
169
 
170
.strike, strike {
171
text-decoration:line-through;
172
letter-spacing:1pt;
173
}
174
 
175
.strong, strong {
176
font-family: "Oswald", Helvetica, sans-serif;
177
font-size: 9pt;
178
text-transform:uppercase;
179
line-height:110%;
180
}
181
 
182
em {
183
font-family: 'Tangerine', cursive;
184
font-weight:700;
185
font-size:16pt;
186
}
187
 
188
.vicarious { Headers }
189
 
190
big, small, .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 {
191
margin:0px;
192
padding:0px;
193
display:block;
194
text-transform:none;
195
line-height:100%;  
196
}  
197
198
.h15, h15 {
199
background-color:caa05b;
200
border-width:10px 10px 10px 165px;
201
border-style:solid;
202
border-color: #203449;
203
width:325px;
204
height:28px;
205
line-height:28px;
206
font-family: 'Dynalight', cursive;
207
font-size:22px; 
208
display:block;
209
text-align:right;
210
padding-right:5px;
211
212
}
213
214
big { 
215
font-family: 'Raleway', sans-serif;
216
font-size:14pt;
217
text-align:center;
218
text-transform:uppercase;
219
padding:5px;
220
}
221
222
small { 
223
font-family: "Oswald", Helvetica, sans-serif;
224
text-transform:uppercase;
225
letter-spacing:2pt;
226
background-color: 203449;
227
color:c79d5b;
228
text-align:right;
229
padding:5px;
230
}
231
 
232
.blockquote, blockquote {
233
height:auto;
234
text-align:justify;
235
margin:5px 5px 5px 10px;
236
padding: 5px 5px 5px 10px;
237
border-left:10px double # ;
238
background-color: ;
239
} 
240
241
a.conn {
242
display:block;
243
text-decoration:none;
244
text-transform:uppercase;
245
font-family: 'Roboto Condensed', sans-serif;
246
font-size:9pt;
247
height:18px;
248
line-height:18px;
249
text-align:center;
250
padding:0px;
251
margin:0px;
252
letter-spacing:2pt;
253
color:dcb754;
254
background-color:203449;
255
border-width:1px 2px 1px 2px;
256
border-color:c79d5b;
257
border-style:solid;
258
-webkit-transition: all 0.6s ease-in-out;
259
-moz-transition: all  0.6s ease-in-out;
260
-ms-transition: all  0.6s ease-in-out;
261
-o-transition: all  0.6s ease-in-out;
262
transition: all  0.6s ease-in-out;
263
}
264
265
a.conn:hover {
266
text-decoration:line-through;
267
font-size:7pt;
268
} 
269
270
.cite {font-size:0px; color:transparent;display:block; height:0px;}
271
 
272
.vicarious { Divs }
273
274
/* Commons */
275
276
#topbar, #namefield, #Underlay, #SDback, #Underlay2, #sidebar {
277
visibility:visible;
278
position:fixed;
279
top:0%;
280
padding:0px; 
281
}
282
 
283
284
/* Topbar */ 
285
286
#topbar {
287
z-index:4;
288
right:0%;  
289
margin-top:0px; 
290
margin-right:0px; 
291
background-color:203449;
292
width:100%; 
293
height:130px; 
294
border-width:0px 0px 10px 0px;
295
border-style:double;
296
border-color:c89e5b;
297
background-repeat:no-repeat;
298
background-size:125px 130px;
299
background-position:top right;
300
}
301
 
302
/* Connection Links */
303
304
.connsImg {
305
height:200px;
306
background-color:203449;
307
}
308
309
.connsImg {
310
float:right;
311
width:100px;
312
overflow:hidden;
313
}
314
315
.conns {
316
float:left; 
317
width:195px; 
318
overflow:auto;
319
}
320
321
322
/* Name */ 
323
324
#namefield {
325
z-index:7; 
326
left:50%; 
327
margin-top:25px;  
328
margin-left:-220px;  
329
width:800px;
330
height:100px;  
331
line-height:100px;
332
font-size:80px;
333
text-align:left;
334
font-family: 'Roboto Condensed', sans-serif;
335
color:c89e5b;
336
text-transform:uppercase; 
337
text-shadow:  -1px -1px 0 #3c2f1b, 1px -1px 0 #ddb853, -1px 1px 0 #3c2f1b, 1px 1px 0 #ddb853;
338
}
339
340
#namefield i {  
341
color:c89e5b;
342
font-size:75px;
343
text-transform:none;
344
}  
345
346
#Underlay { 
347
z-index:2; 
348
left:0%;
349
margin-top:0px; 
350
margin-left:0px; 
351
background-color:203449; 
352
width:100%;  
353
height:150px; 
354
}
355
356
/* Sidebar */ 
357
 
358
#SDBack {
359
z-index:5;
360
left:50%; 
361
margin-top:132.5px; 
362
margin-left:-605px; 
363
border-width:0px 10px 0px 10px;
364
border-style:double;
365
border-color:c89e5b;
366
background-color:203449; 
367
width:350px;
368
height:100%; 
369
-webkit-border-radius: 5px;
370
-moz-border-radius: 5px;
371
border-radius: 5px;
372
}
373
374
#Underlay2 { 
375
z-index:3;  
376
left:50%;
377
border:0px;  
378
margin-top:132.5px; 
379
margin-left:-615px; 
380
background-color:203449; 
381
width:390px;
382
height:100%;  
383
}
384
385
#sidebar, 
386
#sidebar .SBimg, 
387
#sidebar:hover .SBimg, 
388
#sidebar .mask, 
389
#sidebar:hover .mask {
390
-webkit-transition: all 0.2s ease-in-out 0s;
391
-moz-transition: all  0.2s ease-in-out 0s;
392
-ms-transition: all  0.2s ease-in-out 0s;
393
-o-transition: all  0.2s ease-in-out 0s;
394
transition: all  0.2s ease-in-out 0s;
395
}  
396
397
#sidebar {
398
z-index:6;  
399
left:50%;  
400
margin-top:0px; 
401
margin-left:-595px; 
402
background-color:203449;   
403
width:350px; 
404
height:100%; 
405
}  
406
407
#sidebar .SBimg   {
408
z-index:4;
409
width: 300px;
410
height: 300px;
411
position:absolute;
412
margin-top:15px;
413
margin-left:15px;
414
border:10px solid #c69b5c;
415
background-color:203449;  
416
overflow: hidden;
417
text-align: center;   
418
-moz-border-radius-topleft: 90px;
419
-webkit-border-top-left-radius: 90px;
420
border-top-left-radius: 90px;  
421
}    
422
423
#sidebar .mask { 
424
position:absolute;
425
top:0;
426
left:0;
427
background-color:203449;    
428
width: 300px;
429
height: 300px;
430
opacity:0; 
431
-moz-border-radius-topleft: 80px;
432
-webkit-border-top-left-radius: 80px;
433
border-top-left-radius: 80px;  
434
}
435
436
#sidebar .notices {
437
margin:25px;
438
padding:5px;
439
background-color:203449;    
440
width: 240px;
441
height: 240px;  
442
overflow:auto; 
443
color:dcb754;
444
text-align:center;
445
} 
446
447
.notices b, .notices p, .notices i, .notices .strong, .notices strong, .notices em {
448
color:dcb754;
449
}
450
 
451
#sidebar:hover .mask {
452
opacity:1; 
453
} 
454
455
#sidebar big {
456
font-family: "Oswald", Helvetica, sans-serif;
457
font-size:12px;
458
height:15px;
459
line-height:15px;
460
text-align:right;
461
padding:5px;
462
margin:5px 0px 5px 0px;
463
color:203449;
464
border-left:15px solid #c69b5c;
465
background-color:dcb754;   
466
}
467
468
#sidebar .music {
469
z-index:3;
470
position:absolute;
471
margin-top:-200px;
472
margin-left:75px;
473
width:200px;
474
height:20px; 
475
opacity:0;
476
overflow:hidden;
477
-webkit-transition: all 0.6s ease-in-out 4.5s;
478
-moz-transition: all  0.6s ease-in-out 4.5s;
479
-ms-transition: all  0.6s ease-in-out 4.5s;
480
-o-transition: all  0.6s ease-in-out 4.5s;
481
transition: all  0.6s ease-in-out 4.5s;
482
}
483
484
#sidebar:hover .music {
485
opacity:1;
486
margin-top:360px;
487
} 
488
489
490
#sidebar a {  
491
position:absolute; 
492
text-decoration:none;
493
text-transform:uppercase;
494
font-family:arial narrow;
495
display:block;
496
font-size:10px;
497
width:23px;
498
height:23px;
499
line-height:23px;
500
border:4px double #c79d5b;
501
outline:solid;
502
outline-offset:-10px;
503
outline-width:2px;  
504
padding:1px; 
505
letter-spacing:0pt;
506
color:dcb754;
507
background-color:203449;
508
text-align:center;
509
opacity:0;
510
}
511
512
#sidebar a:hover {
513
color:203449;
514
background-color:dcb754;
515
border:4px double #203449;
516
}  
517
518
#sidebar a.LK1, #sidebar a.LK3, #sidebar a.LK5, #sidebar a.LK7 { 
519
margin-top:400px; 
520
}
521
522
#sidebar a.LK2, #sidebar a.LK4, #sidebar a.LK6, #sidebar a.LK8 { 
523
margin-top:420px;
524
}
525
526
#sidebar a.LK1 {margin-left:15px;}
527
#sidebar a.LK2 {margin-left:55px;}
528
#sidebar a.LK3 { margin-left:95px;}
529
#sidebar a.LK4 {margin-left:135px;}
530
#sidebar a.LK5 {margin-left:175px;}
531
#sidebar a.LK6 {margin-left:215px;}
532
#sidebar a.LK7 {margin-left:255px;}
533
#sidebar a.LK8 {margin-left:295px;}
534
535
#sidebar:hover a.LK1, #sidebar:hover a.LK2, #sidebar:hover a.LK3, #sidebar:hover a.LK4, #sidebar:hover a.LK5, #sidebar:hover a.LK6, #sidebar:hover a.LK7, #sidebar:hover a.LK8 {
536
opacity:1;
537
margin-top:410px;
538
}
539
540
 
541
542
#sidebar a.LK1, #sidebar:hover a.LK8  {  
543
-webkit-transition: opacity 0.2s ease-out 4s, margin-top 0.2s linear 4.5s;
544
-moz-transition: opacity 0.2s ease-out 4s, margin-top 0.2s linear 4.5s;
545
-ms-transition:opacity 0.2s ease-out 4s, margin-top 0.2s linear 4.5s;
546
-o-transition: opacity 0.2s ease-out 4s, margin-top 0.2s linear 4.5s;
547
transition: opacity 0.2s ease-out 4s, margin-top 0.2s linear 4.5s;
548
}
549
550
#sidebar a.LK2, #sidebar:hover a.LK7 {
551
-webkit-transition: opacity 0.2s ease-out 3.5s, margin-top 0.2s linear 4.5s;
552
-moz-transition: opacity 0.2s ease-out 3.5s, margin-top 0.2s linear 4.5s;
553
-ms-transition:opacity 0.2s ease-out 3.5s, margin-top 0.2s linear 4.5s;
554
-o-transition: opacity 0.2s ease-out 3.5s, margin-top 0.2s linear 4.5s;
555
transition: opacity 0.2s ease-out 3.5s, margin-top 0.2s linear 4.5s;
556
} 
557
558
#sidebar a.LK3, #sidebar:hover a.LK6 {
559
-webkit-transition: opacity 0.2s ease-out 3s, margin-top 0.2s linear 4.5s;
560
-moz-transition: opacity 0.2s ease-out 3s, margin-top 0.2s linear 4.5s;
561
-ms-transition:opacity 0.2s ease-out 3s, margin-top 0.2s linear 4.5s;
562
-o-transition: opacity 0.2s ease-out 3s, margin-top 0.2s linear 4.5s;
563
transition: opacity 0.2s ease-out 3s, margin-top 0.2s linear 4.5s;
564
} 
565
566
#sidebar a.LK4, #sidebar:hover a.LK5 {
567
-webkit-transition: opacity 0.2s ease-out 2.5s, margin-top 0.2s linear 4.5s;
568
-moz-transition: opacity 0.2s ease-out 2.5s, margin-top 0.2s linear 4.5s;
569
-ms-transition:opacity 0.2s ease-out 2.5s, margin-top 0.2s linear 4.5s;
570
-o-transition: opacity 0.2s ease-out 2.5s, margin-top 0.2s linear 4.5s;
571
transition: opacity 0.2s ease-out 2.5s, margin-top 0.2s linear 4.5s;
572
} 
573
574
#sidebar a.LK5, #sidebar:hover a.LK4 {
575
-webkit-transition: opacity 0.2s ease-out 2s, margin-top 0.2s linear 4.5s;
576
-moz-transition: opacity 0.2s ease-out 2s, margin-top 0.2s linear 4.5s;
577
-ms-transition:opacity 0.2s ease-out 2s, margin-top 0.2s linear 4.5s;
578
-o-transition: opacity 0.2s ease-out 2s, margin-top 0.2s linear 4.5s;
579
transition: opacity 0.2s ease-out 2s, margin-top 0.2s linear 4.5s;
580
} 
581
582
#sidebar a.LK6, #sidebar:hover a.LK3 {
583
-webkit-transition: opacity 0.2s ease-out 1.5s, margin-top 0.2s linear 4.5s;
584
-moz-transition: opacity 0.2s ease-out 1.5s, margin-top 0.2s linear 4.5s;
585
-ms-transition:opacity 0.2s ease-out 1.5s, margin-top 0.2s linear 4.5s;
586
-o-transition: opacity 0.2s ease-out 1.5s, margin-top 0.2s linear 4.5s;
587
transition: opacity 0.2s ease-out 1.5s, margin-top 0.2s linear 4.5s;
588
} 
589
590
#sidebar a.LK7, #sidebar:hover a.LK2 {
591
-webkit-transition: opacity 0.2s ease-out 1s, margin-top 0.2s linear 4.5s;
592
-moz-transition: opacity 0.2s ease-out 1s, margin-top 0.2s linear 4.5s;
593
-ms-transition:opacity 0.2s ease-out 1s, margin-top 0.2s linear 4.5s;
594
-o-transition: opacity 0.2s ease-out 1s, margin-top 0.2s linear 4.5s;
595
transition: opacity 0.2s ease-out 1s, margin-top 0.2s linear 4.5s;
596
} 
597
598
#sidebar a.LK8, #sidebar:hover a.LK1 {  
599
-webkit-transition: opacity 0.2s ease-out .5s, margin-top 0.2s linear 4.5s;
600
-moz-transition: opacity 0.2s ease-out .5s, margin-top 0.2s linear 4.5s;
601
-ms-transition:opacity 0.2s ease-out .5s, margin-top 0.2s linear 4.5s;
602
-o-transition: opacity 0.2s ease-out .5s, margin-top 0.2s linear 4.5s;
603
transition: opacity 0.2s ease-out .5s, margin-top 0.2s linear 4.5s;
604
}
605
 
606
607
/* Connections Hover Pics */
608
  
609
610
.vicbox {
611
width: 300px;
612
height: 150px;
613
margin: 0px;
614
float: left;
615
overflow: hidden;
616
position: relative;
617
text-align: center;
618
}
619
620
621
.vicbox .mask  {
622
width: 300px;
623
height: 150px;
624
position: absolute;
625
overflow: hidden;
626
top: 0;
627
left: 0; 
628
opacity: 1;
629
-webkit-transform: translateX(-300px);
630
-moz-transform: translateX(-300px);
631
-ms-transform: translateX(-300px);
632
-o-transform: translateX(-300px);
633
transform: translateX(-300px);
634
-webkit-transition: all 0.4s ease-in-out; 
635
-moz-transition:all 0.4s ease-in-out; 
636
-ms-transition:all 0.4s ease-in-out; 
637
-o-transition: all 0.4s ease-in-out; 
638
transition: all 0.4s ease-in-out; 
639
background-color:dcb754;
640
}
641
642
.vicbox img {
643
display: block;
644
position: relative;
645
-webkit-transition: all 0.3s ease-in-out; 
646
-moz-transition:all 0.3s ease-in-out; 
647
-ms-transition:all 0.3s ease-in-out; 
648
-o-transition: all 0.3s ease-in-out; 
649
transition: all 0.3s ease-in-out; 
650
}
651
652
.vicbox big {
653
font-family: "Oswald", Helvetica, sans-serif;
654
background-color:203449;
655
text-align: center;
656
position: relative;
657
margin:10px;
658
font-size: 15px;
659
line-height:15px;
660
padding: 10px;     
661
transition-delay: 0.1s;
662
color:dcb754;
663
}
664
665
.vicbox .about {
666
position: relative;
667
margin:0px 10px 10px 10px;
668
width: 270px;
669
height: 75px; 
670
padding: 5px;
671
overflow:auto;
672
text-align: justify; 
673
-webkit-transition: all 0.2s linear; 
674
-moz-transition:all 0.2s linear; 
675
-ms-transition:all 0.2s linear; 
676
-o-transition: all 0.2s linear; 
677
transition: all 0.2s linear; 
678
}
679
680
.vicbox:hover .mask { 
681
-webkit-transform: translateX(0px);
682
-moz-transform: translateX(0px);
683
-ms-transform: translateX(0px);
684
-o-transform: translateX(0px); 
685
transform: translateX(0px);
686
}     
687
688
                  
689
.vicbox:hover img { 
690
-webkit-transform: translateX(300px);
691
-moz-transform: translateX(300px);
692
-ms-transform: translateX(300px);
693
-o-transform: translateX(300px);
694
transform: translateX(300px);
695
transition-delay: 0.1s;
696
}
697
698
.vicbox:hover .about, .vicbox big { 
699
transition-delay: 0.4s;
700
}
701
 
702
/* 500 x 300 Hover Images */ 
703
704
.InfoImg {
705
position:relative;
706
overflow:hidden;
707
width:500px;
708
height:300px;
709
background-size:500px 300px
710
background-position:center center;
711
background-repeat:no-repeat;
712
}
713
714
.InfoText {
715
position: absolute;
716
overflow: hidden;
717
top: 0;
718
left: 0; 
719
background-color:203449;
720
width:500px;
721
height:300px;
722
opacity:0;
723
overflow:hidden;
724
-webkit-transition: all 0.2s linear .5s;
725
-moz-transition: all  0.2s linear .5s;
726
-ms-transition: all  0.2s linear .5s;
727
-o-transition: all  0.2s linear .5s;
728
transition: all  0.2s linear .5s;
729
}
730
731
.InfoText:hover {
732
opacity:1;
733
}
734
735
.The411 {
736
background-color:dcb754;
737
width:205px;
738
height:250px;
739
padding:5px;
740
overflow:auto;
741
}
742
743
.The411-L {
744
float:left;
745
margin:20px 10px 20px 20px; 
746
}
747
748
.The411-R {
749
float:right;
750
margin:20px 20px 20px 10px; 
751
}
752
753
.The411 big {
754
font-weight:900;
755
font-size:15px;
756
line-height:100%;
757
margin-top:5px;
758
text-align:right;
759
padding-right:15px;
760
border-bottom:2px solid #203449;
761
}
762
763
.The411 small{
764
letter-spacing:1pt;
765
font-size:9px;
766
line-height:100%;
767
padding:5px;
768
margin-top:5px;
769
text-align:center;
770
background-color:203449;
771
color: dcb754;
772
border-top:2px solid #c79d5b;
773
}
774
775
776
/* Tabs Area */ 
777
778
.tabset {
779
width:500px; 
780
height:325px; 
781
overflow:hidden;
782
background-color:203449;
783
}
784
785
.card1, .card2 {
786
position:absolute;
787
width:400px;
788
height:250px;
789
overflow:hidden;
790
}
791
792
.card1 {
793
margin-top:25px;
794
margin-left:25px;
795
background-color:caa05b;
796
}
797
798
.card2 {
799
margin-top:50px;
800
margin-left:75px;
801
background-color:ddb853;
802
outline-color:caa05b;
803
color:caa05b;
804
outline:solid;
805
outline-offset:-10px;
806
outline-width:2px; 
807
}
808
809
.card2 .about1 {
810
background-color:203449; 
811
color:caa05b; 
812
padding:10px;
813
margin:15px;
814
width:350px;
815
height:200px;
816
overflow:auto;
817
text-align:justify;
818
}  
819
820
.tab1, .tab2, .tab3, .tab4 {
821
position:absolute;
822
margin-left:50px;
823
background-color:203449; 
824
width:25px;
825
height:25px;
826
overflow:hidden; 
827
z-index:3;
828
-webkit-transition: all 0.2s linear .5s;
829
-moz-transition: all  0.2s linear .5s;
830
-ms-transition: all  0.2s linear .5s;
831
-o-transition: all  0.2s linear .5s;
832
transition: all  0.2s linear .5s;
833
}
834
835
.tab1 {margin-top:75px;}
836
.tab2 {margin-top:125px;}
837
.tab3 {margin-top:175px;}
838
.tab4 {margin-top:225px;}  
839
840
841
.tab1:hover, .tab2:hover, .tab3:hover, .tab4:hover { 
842
margin-top:65px;
843
margin-left:90px;
844
width:370px;
845
height:220px;
846
z-index:4;
847
-webkit-transition: all 0.6s linear .5s;
848
-moz-transition: all  0.6s linear .5s;
849
-ms-transition: all  0.6s linear .5s;
850
-o-transition: all  0.6s linear .5s;
851
transition: all  0.6s linear .5s;
852
}
853
854
.stats {
855
background-color:203449;  
856
border:2px solid #caa05b; 
857
color:caa05b;
858
padding:10px;
859
margin:15px;
860
width:315px;
861
height:165px;
862
opacity:0; 
863
overflow:hidden;
864
-webkit-transition: all 0.2s ease-in-out .3s;
865
-moz-transition: all  0.2s ease-in-out .3s;
866
-ms-transition: all  0.2s ease-in-out .3s;
867
-o-transition: all  0.2s ease-in-out .3s;
868
transition: all  0.2s ease-in-out .3s;
869
}
870
871
.about1 p, .about1 b, .stats p, .stats b {color:caa05b;}
872
 
873
.about1 big, .stats big {
874
font-size:10pt;
875
text-align:left;
876
color:caa05b;
877
margin:10px 0px 5px 0px;
878
padding:0px 0px 2px 0px;
879
letter-spacing:1pt;
880
border-bottom:2px solid #caa05b;
881
}
882
  
883
.tab1:hover .stats, .tab2:hover .stats, .tab3:hover .stats, .tab4:hover .stats {  
884
opacity:1; 
885
overflow:auto;  
886
-webkit-transition: all 0.6s ease-in-out .8s;
887
-moz-transition: all  0.6s ease-in-out .8s;
888
-ms-transition: all  0.6s ease-in-out .8s;
889
-o-transition: all  0.6s ease-in-out .8s;
890
transition: all  0.6s ease-in-out .8s;
891
} 
892
893
 
894
 .vicarious{ Hide Codes }
895
.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; }
896
table table table table td {width:0px;}
897
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
898
div div select, div div form {display:none !important;}
899
select { visibility:hidden!important; WIDTH:0px!important;}
900
table div {display:none;}
901
table table div {display:block;}
902
.clearfix {display:none !important;position:absolute!important;}
903
div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
904
.profileInfo tr tr td { visibility:hidden; }
905
.profileInfo td.text { visibility:visible; }
906
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
907
</style></td></tr></table><table style="display:none"><tr><td>
908
  
909
-----------------------------LIKE TO MEET-------------------------
910
 
911
<font class="cite">
912
913
===Image sizes===
914
915
Sidebar:  
916
300px width by 300px height
917
918
Topbar:
919
Wolf+Hand / 125px width by 130px height
920
921
Left Side of Profile:
922
2 Images/ 500px width by 300px height 
923
924
Right Side of Profile:
925
Gif / 300px width by 165px height (height doesn't matter)
926
4 Connection Images / 300px width by 150px height
927
Claw marks / 100px width by 200px height
928
929
930
</font>  
931
932
-----------------------------INTERESTS----------------------------
933
934
 </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>
935
 
936
<div id="underlay"></div><div id="underlay2"></div>
937
938
<div id="topbar" style="background-image:url(http://i61.tinypic.com/1443cer.jpg);"></div>   
939
940
<div id="SDBack"></div><div id="sidebar">
941
942
943
<div class="SBimg" style="background-image:url(http://i62.tinypic.com/349fm2t.jpg);">
944
945
<div class="mask"><div class="notices">
946
947
<big>Verses</big>
948
Verse- Verse - Verse - Verse
949
950
<big>Writing Style</big>
951
Multi-para to Novella
952
953
<big>Dues</big>
954
Comments (0) Starters (0) Messages (0)
955
956
<big>Contact</big>
957
AOL: CONTACTINFO
958
959
</div></div></div>
960
961
962
<div class="music">
963
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
964
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
965
    <param name="bgcolor" value="#203449" />
966
<param name="wmode" value="opaque" />
967
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/4bbw77w28n/TON_WM.mp3&autoplay=1&bgcolor=203449&loadingcolor=c69b5c&buttoncolor=c69b5c&slidercolor=c69b5c" />
968
</object>
969
970
<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>
971
972
</div>  
973
974
<a class="lk1" href="/logincomplete.php">H</a>   
975
<a class="lk2" href="/add_testimonial.php?member_id=xxxxxx">C</a>
976
<a class="lk3" href="/send_message.php?member_id=xxxxxx">M</a>
977
<a class="lk4" href="/gallery.php?member_id=xxxxxx">P</a> 
978
<a class="lk5" href="/view_member_blog.php?member_id=xxxxxx">B</a> 
979
<a class="lk6" href="/invite_friend.php?friend_id=xxxxxx">A</a> 
980
<a class="lk7" href="/#">X</a> 
981
<a class="lk8" href="/#">X</a> 
982
983
984
</div> 
985
986
987
<div id="namefield"><i>Peter</i> Rumancek</div>
988
989
990
-----------------------------MUSIC-------------------------------- 
991
992
 </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:500px;"><tr><td>
993
 
994
<font class="cite">
995
996
Left column of profile.
997
998
The above table code must remain at the top.  FULL tables below can be rearranged.</font>  
999
1000
  
1001
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td> 
1002
1003
1004
<div class="InfoImg" style="background-image:url(http://i62.tinypic.com/x1naci.jpg);">
1005
1006
<div class="InfoText">
1007
1008
<div class="The411 The411-L">
1009
<big>Title</big>
1010
<small>Title or Quote</small>
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
1015
<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.
1016
1017
</div><div class="The411 The411-R">
1018
<big>Title</big>
1019
<small>Title or Quote</small>
1020
1021
<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.
1022
1023
1024
<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.
1025
1026
1027
</div></div></div>
1028
1029
1030
1031
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1032
1033
<div class="tabset"><div class="card1"></div><div class="card2">
1034
1035
<div class="about1">
1036
<big>About</big> 
1037
1038
<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.
1039
1040
<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.
1041
 
1042
1043
</div></div>
1044
1045
1046
<div class="tab1"><div class="stats">
1047
 
1048
<big>Personality</big> 
1049
1050
<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
1051
1052
1053
</div></div><div class="tab2"><div class="stats">
1054
1055
<big>Legal</big>
1056
<B>Name:</B> Input Info
1057
<BR><B>Nicknames:</B> Input Info
1058
<BR><B>Aliases:</B> Input Info
1059
<BR><B>Date Of Birth:</B> Input Info
1060
<BR><B>Place Of Birth:</B> Input Info
1061
<BR><B>Current Residence:</B> Input Info
1062
 
1063
<big>Physical</big>
1064
<B>Ethnicity:</B> Input Info
1065
<BR><B>Hair Color:</B> Input Info
1066
<BR><B>Eye Color:</B> Input Info
1067
<BR><B>Height:</B> Input Info
1068
<BR><B>Weight:</B> Input Info
1069
<BR><B>Birthmarks/Scars:</B> Input Info
1070
  
1071
1072
</div></div><div class="tab3"><div class="stats">
1073
 
1074
 
1075
<big>Family</big>
1076
<B>Mother:</B> Input Info
1077
<BR><B>Father:</B> Input Info
1078
<BR><B>Sister(S):</B> Input Info
1079
<BR><B>Brother(S):</B> Input Info
1080
<BR><B>Other Family:</B> Input Info
1081
 
1082
<big>Relationships</big>
1083
<B>Sexual Orientation:</B> Input Info
1084
<BR><B>Relationship Status:</B> Input Info
1085
<BR><B>Current Relationship(S):</B> Input Info
1086
<BR><B>Past Relationship(S):</B> Input Info 
1087
 
1088
1089
</div></div><div class="tab4"><div class="stats"> 
1090
 
1091
<big>Education</big>
1092
<B>High School</B> Input Info
1093
<BR><B>College</B> Input Info
1094
<BR><B>Major</B> Input Info
1095
<BR><B>Degree</B> Input Info
1096
 
1097
<big>Employment</big>
1098
<B>Occupation:</B> Input Info
1099
<BR><B>Job Description:</B> Input Info
1100
<BR><B>Employer:</B> Input Info
1101
<BR><B>Skillset:</B> Input Info
1102
 
1103
1104
</div></div></div>
1105
1106
1107
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1108
 
1109
1110
<font class="h15">
1111
You can tell a whole life by a scent.
1112
</font> 
1113
1114
 
1115
1116
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td> 
1117
1118
<div class="InfoImg" style="background-image:url(http://i62.tinypic.com/2nlct8w.jpg);">
1119
1120
<div class="InfoText">
1121
1122
<div class="The411 The411-L">
1123
<big>Title</big>
1124
<small>Title or Quote</small>
1125
1126
<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.
1127
1128
1129
<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.
1130
1131
</div><div class="The411 The411-R">
1132
<big>Title</big>
1133
<small>Title or Quote</small>
1134
1135
<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.
1136
1137
1138
<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.
1139
1140
1141
</div></div></div>
1142
 
1143
1144
-----------------------------MOVIES-------------------------------
1145
  
1146
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td> 
1147
1148
<big>Left Side Extra table</big>
1149
<small>Create what you want in this space</small>
1150
1151
<div style="height: 150px; padding:5px; margin:5px; overflow:auto;">
1152
1153
<em>Emphasized</em>
1154
<b>Bold</b>
1155
<i>Italics</i>
1156
<font class="u">underline</font>
1157
<font class="strike">strike</font>
1158
<font class="strong">strong</font>
1159
1160
<p>You can duplicate the table and do whatever you want with it. 
1161
1162
 <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.
1163
1164
</div></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td> 
1165
1166
<big>Left Side Extra table</big>
1167
<small>Create what you want in this space</small>
1168
1169
<div style="height: 150px; padding:5px; margin:5px; overflow:auto;">
1170
1171
<p>You can duplicate the table and do whatever you want with it. 
1172
1173
 <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.
1174
1175
</div>
1176
1177
-----------------------------TV---------------------------
1178
1179
</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:300px;"><tr><td>
1180
 
1181
<font class="cite">
1182
1183
Right column of profile.
1184
1185
The above table code must remain at the top.  FULL tables below can be rearranged.
1186
</font>
1187
1188
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1189
1190
<img src="http://i59.tinypic.com/2rqodtw.jpg">
1191
1192
 
1193
 </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1194
1195
 
1196
<div class="vicbox">
1197
<img src="http://i62.tinypic.com/kf5x5w.jpg">
1198
<div class="mask">  
1199
1200
<big>Connection Name 1</big>
1201
1202
<div class="about">
1203
1204
<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.
1205
</div></div></div>
1206
1207
1208
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1209
1210
 
1211
<div class="vicbox">
1212
<img src="http://i58.tinypic.com/21o96v6.jpg">
1213
<div class="mask">  
1214
1215
<big>Connection Name 2</big>
1216
1217
<div class="about">
1218
1219
<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.
1220
1221
</div></div></div>
1222
1223
1224
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1225
1226
 
1227
<div class="vicbox">
1228
<img src="http://i61.tinypic.com/2vs2oh2.jpg">
1229
<div class="mask">  
1230
1231
<big>Connection Name 3</big>
1232
1233
<div class="about">
1234
1235
<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.
1236
1237
</div></div></div>
1238
 
1239
1240
1241
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1242
1243
 
1244
<div class="vicbox">
1245
<img src="http://i60.tinypic.com/2rxhett.jpg">
1246
<div class="mask">  
1247
1248
<big>Connection Name 4</big>
1249
1250
<div class="about">
1251
1252
<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.
1253
1254
</div></div></div>
1255
 
1256
 
1257
 </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>
1258
1259
<div class="connsImg">
1260
1261
<img src="http://i60.tinypic.com/muajo8.jpg">
1262
1263
</div><div class="conns">
1264
1265
<a class="conn" href="/#">Name Here</a>
1266
<a class="conn" href="/#">Name Here</a>
1267
<a class="conn" href="/#">Name Here</a>
1268
<a class="conn" href="/#">Name Here</a>
1269
<a class="conn" href="/#">Name Here</a>
1270
<a class="conn" href="/#">Name Here</a>
1271
<a class="conn" href="/#">Name Here</a>
1272
<a class="conn" href="/#">Name Here</a>
1273
<a class="conn" href="/#">Name Here</a>
1274
<a class="conn" href="/#">Name Here</a>
1275
1276
</div>
1277
1278
 
1279
-----------------------------BOOKS--------------------------------
1280
1281
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td> 
1282
1283
<big>Right Side Extra table</big>
1284
<small>Create what you want in this space</small>
1285
1286
<div style="height: 150px; padding:5px; margin:5px; overflow:auto;">
1287
1288
<em>Emphasized</em>
1289
<b>Bold</b>
1290
<i>Italics</i>
1291
<font class="u">underline</font>
1292
<font class="strike">strike</font>
1293
<font class="strong">strong</font>
1294
1295
<p>You can duplicate the table and do whatever you want with it. 
1296
1297
 <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.
1298
1299
</div>
1300
1301
-----------------------------HEROES-------------------------------
1302
1303
</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td> 
1304
1305
<big>Right Side Extra table</big>
1306
<small>Create what you want in this space</small>
1307
1308
<div style="height: 150px; padding:5px; margin:5px; overflow:auto;">
1309
1310
<p>You can duplicate the table and do whatever you want with it. 
1311
1312
 <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.
1313
1314
</div>