View difference between Paste ID: PQtjNJEX and zYuJAmA4
SHOW: | | - or go back to the newest paste.
1
       					!!!!!!!!!!!!Read It!!!!!!!!!!!!
2
 
3
                                                (⊙.⊙(☉_☉)⊙.⊙)
4
 
5
 
6
ALL COLORS CAN BE CHANGED.For color changes, see the color palette section in About Me.  There are a ton of color schemes online.  It won't take you long to change the color set-up on this profile.
7
 
8
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
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
13
14
ELITEROLEPLAYERS.NET USERS:  PLEASE BE SURE TO READ THE SPECIAL INSTRUCTIONS BEFORE COMING TO ME WITH QUESTIONS REGARDING TABLE ALIGNMENT 
15
16
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
17
18
19
20-
<div class="v390w390h" style="background-image:url(http://i.imgur.com/890oFow.png);">
20+
21
MUSIC PLAYER
22-
((((((FOR ALL PIC SIZES, SEE THE INSTRUCTIONS IN THE ACTUAL LAYOUT CODING.)))))))
22+
23
REPLACE MY MUSIC PLAYER WITH YOUR OWN.  
24-
**********************
24+
25-
PSD FOR ICON & STATS (RED/BLACK) IMAGES:
25+
26-
http://www.2shared.com/photo/xWp0c84_/layout133a.html 
26+
27
............................
28-
*********************
28+
MASTHEAD BANNER
29
 
30
The banner is located at the END of ABOUT ME.  Replace my link with your link to your uploaded image.
31
 
32
............................
33
34
HOVER PICS
35
36
To Change the hover over pics/icons, locate div style classes like the below and replace the http address with a DIRECT link to your uploaded photo image:
37
38
<div class="hbox1" style="background-image:url(http://......);">
39
 
40
41
.......................................
42
43
CONNECTION ICON PICS
44
 
45
There is no magic to this set-up for image replacement.  You will see <img src="http//:..."> for each icon pic.  Just put your url to your uploaded pic in place of mine.
46
 
47
.......................................
48
 
49
PARAGRAPH - SPECIAL
50
 
51
Paragraph first letter and first line:
52
 
53
If you don't want the color to change for the first line of your paragraph, just delete this from the Color Palette near the end of About ME:
54
p:first-line {color:898c92;}
55
 
56
If you don't want any adjustments to the first line and letter of the paragraph, remove this from the Font Styles in About Me:
57
p:first-letter {font-size:15pt;}
58
p:first-line {font-size:10pt;}
59
 
60
.......................................
61
 
62
 FOR ROLEPLAYER.ME USERS:
63
 
64
For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:  
65-
 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false"> 
65+
66
 
67-
</td></tr></table></td></tr></table></td></tr></table></div><style type="text/css">@import url("https://googledrive.com/host/0B79YHAkeE7SuWWthZl94VUJJcHc");@import url(http://fonts.googleapis.com/css?family=Special+Elite|Rancho|Qwigley|Dorsa|Mystery+Quest|Voltaire|Righteous);
67+
68
 
69
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:
70-
.vicarious { CSS/DIV Layout 133a // Layouts available @ http://vicarious-hs.tumblr.com/ }
70+
71
 
72-
/* - -DO NOT REARRANGE MY CODING.  ORDER IS IMPORTANT. - - */    
72+
73
 
74-
.vicarious{Background Properties // BODY COLOR IS IN THE COLOR PALETTE SECTION}
74+
75
76-
background-image:url();
76+
!!!!!!!!!!!!!!!!!!!!SPECIAL INSTRUCTIONS!!!!!!!!!!!!!!!!!!!!!!!!!
77
!!!!!!!!!!!!!!!!!!FOR ELITERPERS.NET USERS ONLY!!!!!!!!!!!!!!!!!!
78-
background-position: bottom left;
78+
79
The tables will be a bit off on Elite.  You will need to adjust the following:
80
81
Find the below NEAR the TOP of About Me and change the top and left marker as notated below (MAKE SURE you have the right one for INTERESTS and NOT Like to Meet)
82
83-
::-webkit-scrollbar {width: 15px;}
83+
.vicarious{Interests Tables Placement (Up/Down/Left/Right) Codes}
84
object, embed, table table table { position:relative; top:-20px; left:10px;}
85-
::-webkit-scrollbar-thumb {border: 1px solid ;}
85+
table table table table{border:0px; position:static;}
86
 
87
(CONTINUED FOR ELITERPERS.NET ONLY) If you use Google Chrome more so than FF, NOW adjust the LIKE TO MEET table placement for LEFT as such:
88
89-
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em {
89+
.vicarious{Like To Meet Tables Placement (Up/Down/Left/Right) Codes}
90
td.text table {position:relative; top:-20px; left:-4px;  }
91
td.text object, td.text embed, td.text table table {position:static;}
92-
line-height: 100% ;
92+
93
!!!!!!!!!!!!!!! END SPECIAL INSTRUCTIONS !!!!!!!!!!!!!!!
94
95
96
97
98
///////////////////////////////////////////////////
99
_______________________________________________
100
 
101
 
102
 
103
 
104
                        Don't forget to replace the XXXXX with your friend ID number.
105
 
106
                                                     (>‿◠)✌
107
 
108
 
109
                *****************************SAVE YOUR WORK AS YOU GO.*******************************
110
 
111
 
112
 
113
                               
114
 
115
DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.  
116
 
117
-----------------------------ABOUT ME---------------------------------
118
 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
119
120-
B, .B2, B2 {
120+
 <style type="text/css">@import url("https://googledrive.com/host/0B79YHAkeE7SuSjRYNk1ucE5hUW8 ");@import url(http://fonts.googleapis.com/css?family=Special+Elite|Rancho|Qwigley|Dorsa|Mystery+Quest|Voltaire|Righteous&effect=decaying);
121
122
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */  
123
.vicarious { LAYOUT 134a // Layouts available @ http://vicarious-hs.tumblr.com/ }
124
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
125
126
.vicarious{ Background Properties }
127-
B {
127+
128
width:100%;
129-
font-size:8pt;
129+
height:100%;
130
background-image: url("");
131
background-attachment:fixed;
132
background-repeat:no-repeat;
133-
.B2, B2  {
133+
background-position:center center;
134
}
135
 
136
.vicarious { Table Properties }
137
table, tr, td { background-color:transparent; border:0;}
138
table table {
139-
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited, a.third, a.third:link, a.third:active, a.third:visited, a.cons, a.cons:link, a.cons:active, a.cons:visited   {
139+
140-
font-family: arial narrow;
140+
border-left:0px double #000000 ;
141-
font-size:9pt;
141+
border-right:0px double #000000;
142
}
143
 
144
table table table  { background-color:transparent; display: inline-table; border:0px solid; }
145
 
146
147
.vic_table {
148
padding:5px;
149
margin-bottom:5px;
150-
transition: all 1s ease-out 0s; 
150+
border:1px solid ; }
151
.vic_table tr { margin:0px; }
152
.vic_table td { margin:0px; width:100%; }   
153
154
.vicarious{Like To Meet Tables Placement (Up/Down/Left/Right) Codes}
155
td.text table {position:relative; top:-20px; left:-9px;  }
156
td.text object, td.text embed, td.text table table {position:static;}
157
 
158-
a.first, a.first:link, a.first:active, a.first:visited {
158+
.vicarious{Interests Tables Placement (Up/Down/Left/Right) Codes}
159-
width:159px;
159+
object, embed, table table table { position:relative; top:0px; left:0px;}
160-
margin:15px 2px;
160+
table table table table{border:0px; position:static;}
161-
line-height:50px;
161+
162-
height:50px;  
162+
163
::-webkit-scrollbar {width: 10px;}
164
::-webkit-scrollbar-track {border: 1px solid ;}
165-
a.second, a.second:link, a.second:active, a.second:visited {
165+
::-webkit-scrollbar-thumb {border: 1px solid ;} 
166
 
167-
width:100px;
167+
168-
line-height:100px;
168+
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  {
169-
height:100px;  
169+
170
font-size: 8pt ;
171
line-height: 90% ;
172
text-decoration:none;
173-
a.third, a.third:link, a.third:active, a.third:visited  {
173+
174-
width:58.25px;
174+
175-
line-height:46px;
175+
P { text-align:justify; }
176-
height:46px;
176+
p:first-letter {font-size:15pt;}
177-
margin:2px;  
177+
p:first-line {font-size:10pt;}
178
 
179
I {
180
font-size:12pt;
181-
a.cons, a.cons:link, a.cons:active, a.cons:visited {
181+
182
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
183-
line-height:100%;  
183+
184
 
185
EM {
186
font-size:16pt;    
187-
.h1, .h2, .h3,  .h4, .h5, .h6, .h7, .h8, .h9, h1, h2, h3, h4, h5, h6, h7, h8, h9, small, big, .one, one, .two, two {
187+
188-
font-family: georgia;
188+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);  
189
}
190
 
191
.strike, strike {
192
text-decoration:line-through;
193
}
194
 
195
.u, u {
196
text-decoration:underline;
197
font-size:10pt;  
198
}
199
 
200-
font-size: 16pt ;
200+
201
font-weight:bolder;
202
font-size:11pt;  
203
}
204
 
205
B, .B2, B2, .B3, B3, .B4, B4 {
206
font-family:copperplate gothic light;
207-
font-family:arial narrow;
207+
208
font-weight:bold;
209-
font-size:9pt;
209+
210-
text-align:left;  
210+
211-
margin-left:5px;
211+
212
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
213
}
214
 
215
B{
216
font-family:georgia;
217
}
218-
padding:5px 0px 0px 5px;
218+
219-
line-height:120%;
219+
.B2, B2  {  
220
letter-spacing:1pt;
221
} 
222-
border-bottom:6px solid;
222+
223
.B3, B3 {  
224
font-size:9pt;  
225
letter-spacing:1pt;
226-
padding:5px 0px 0px 5px;
226+
227-
font-size: 14pt ;
227+
228
.B4, B4 {  
229
font-size:13pt;  
230
letter-spacing:2pt;
231
} 
232
 
233
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited, a.cons, a.cons:link, a.cons:active, a.cons:visited {
234
font-family: 'Voltaire', sans-serif;
235
font-size:15pt;
236
text-align:center;
237
text-transform:uppercase;
238
display:block;
239
font-weight:bold;
240
text-decoration:none;
241
-webkit-transition: all 0.6s ease-out;
242-
font-size:20pt;
242+
-moz-transition: all  0.6s ease-out;
243-
text-align:center;  
243+
-ms-transition: all  0.6s ease-out;
244
-o-transition: all  0.6s ease-out;
245
transition: all  0.6s ease-out;
246
margin-bottom:2px;
247
padding:0px;
248
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);  
249-
font-size:20pt;
249+
250-
text-align:center;  
250+
251
a.first, a.first:link, a.first:active, a.first:visited{ width:46px; line-height:35px;height:35px;}
252
a.first:hover { font-size:25pt; text-decoration: line-through;  }
253
a.second, a.second:link, a.second:active, a.second:visited { line-height:50px;height:50px; width:50px; } 
254
a.cons, a.cons:link, a.cons:active, a.cons:visited {font-size:8pt;letter-spacing:2pt;line-height:100%; text-align:right; padding-right:5px;}
255
a.cons:hover {letter-spacing:1pt;}
256
257
.h1, .h2, .h3,  .h4, .h5, .h6, .h7, .h8, .h9, h1, h2, h3, h4, h5, h6, h7, h8, h9, small, big {
258-
font-size:18pt;
258+
font-family: copperplate gothic light;
259-
text-align:center;  
259+
260-
line-height:120%;
260+
261
display:block;
262
font-size: 11pt ;
263
padding:0px;
264
margin:0px;
265
text-decoration:none;
266
}
267-
letter-spacing:3pt;
267+
268-
font-size:20pt;
268+
269-
text-align:center;  
269+
270
font-size: 12pt ;
271
margin:5px 0px ; 
272
border-bottom:2px solid;
273
font-weight:bold;
274
}
275
 
276
.h2, h2  {
277-
font-size:28pt;
277+
278-
text-align:center;  
278+
279
font-size:24pt; 
280
line-height:160%;
281
text-transform:uppercase;
282-
.one, one   {
282+
283
 
284-
font-size: 30pt ;
284+
285-
margin-left:5px;
285+
286
text-align:left;
287
padding-left:5px;
288
margin-top:10px;
289
font-size: 12pt ;
290
}
291
 
292-
.two, two  {
292+
293-
font-family:arial narrow;
293+
294
font-weight:bold;
295-
font-size:9pt;
295+
296-
text-align:left;  
296+
font-size: 10pt ;
297-
margin-left:275px;
297+
298-
line-height:35%;
298+
299
}
300
 
301
.h5, h5 {
302
font-family: 'Dorsa', sans-serif;
303
font-weight:bold;
304
font-size: 46pt ;  
305
letter-spacing:1pt; 
306
}
307
 
308
.h6, h6  {
309
letter-spacing:1pt;
310
font-size:20pt; 
311
}
312-
.lyric, lyric {Font-size:14pt;}  
312+
313-
.lyric2, lyric2 {Font-size:12pt;}  
313+
314-
.lyric3, lyric3 {Font-size:13pt;}  
314+
315-
.lyric4, lyric4 {Font-size:10pt;}
315+
316
letter-spacing:-1pt;
317-
.lyric6, lyric6 {Font-size:13pt;}  
317+
font-size:20pt; 
318-
.lyric7, lyric7 {Font-size:15pt;letter-spacing:1pt;}    
318+
319
 
320-
.vicarious { Cross Commons }
320+
321
font-weight:bold;
322-
.bottom,  a.first, a.second, a.third, a.cons  {
322+
323-
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
323+
324-
-moz-box-shadow:    2px 2px 5px rgba(0, 0, 0, 0.75);
324+
font-size:18pt; 
325-
box-shadow:         2px 2px 5px rgba(0, 0, 0, 0.75);  
325+
margin:5px 0px;
326
}
327
 
328
small {
329-
.vicarious { Div IDS/Class Styles }
329+
330
letter-spacing:0pt;
331-
.vicframe, .vicframe2, .vicframe3, .v1000w500h,   .v500w835h, .v390w390h, .music, .v390w415h, .v390w360h, .line1, .line2, .line1b, .line1a, .line2a, .line2b, .buffer   {
331+
font-size:12pt; 
332-
left:50%;
332+
333-
top:0%;
333+
334-
position:absolute;  
334+
335
big {
336-
z-index:1;  
336+
font-family: 'Righteous', cursive;
337
letter-spacing:0pt;
338
font-size:28pt; 
339-
.vicframe, .vicframe2, .vicframe3 {height:415px;text-align:center;background-color:transparent;}  
339+
340-
.vicframe, .vicframe2 {width:605px; margin-left:-500px;}  
340+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);  
341-
.vicframe { margin-top:505px;}  
341+
342-
.vicframe2, .vicframe3 {margin-top:925px;}  
342+
343-
.vicframe3 { width:390px;margin-left:110px;}  
343+
344-
.viccontrol, .viccontrol2, .viccontrol3 {margin-left:0px;overflow:hidden;} 
344+
345
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
346
text-decoration:none;
347-
.buffer {
347+
348-
height:85px;
348+
349-
width:1000px;
349+
350-
margin-left:-500px;
350+
351-
margin-top:1345px;
351+
352
}
353
 
354
.lyric, lyric {Font-size:14pt; text-align:left; margin-left:5px;margin-top:5px;line-height:60%;}      
355-
.bottom  {
355+
.lyric2, lyric2 {Font-size:12pt;line-height:35%;}  
356-
width:1000px;
356+
.lyric3, lyric3 {Font-size:13pt;text-align:right; margin-right:5px;line-height:85%;}  
357-
height:80px;
357+
.lyric4, lyric4 {Font-size:13pt;text-align:left; margin-left:5px;} 
358-
left:50%;
358+
359-
bottom:0%;
359+
.lyric6, lyric6 {Font-size:13pt;text-align:left; margin-left:5px;line-height:100%;}  
360-
margin-left:-500px;
360+
.lyric7, lyric7 {Font-size:15pt;letter-spacing:1pt;text-align:right; margin-right:5px; margin-bottom:5px;}     
361-
margin-bottom:0px;
361+
362
.vicarious{ Img / Div  Style Classes}
363
 
364-
z-index:1;  
364+
.img1  {margin:5px 0px; width:82px; height:82px; overflow:hidden; }  
365
.img2  {width:100px; height:100px; overflow:hidden; }  
366
367
.VC   { 
368-
.v390w360h, .v390w390h, .music  {width:390px;margin-left:110px;}   
368+
width:265px; 
369
height:220px; 
370-
.v390w360h  {height:360px;margin-top:980px;}   
370+
371-
.v390w390h  {height:390px;margin-top:505px;}  
371+
padding-left:10px;
372-
.music {height:20px;margin-top:900px;} 
372+
padding-right:5px;
373
text-align:justify;
374-
.v390w415h  {
374+
375-
height:415px;
375+
376-
width:390px;
376+
.vicframe   { 
377-
margin-left:110px;
377+
width:500px; 
378-
margin-top:925px; 
378+
height:225px;
379
text-align:center;
380
background-position:top right; 
381-
.v500w835h  {
381+
382-
width:500px;
382+
383-
height: 835px;
383+
384-
margin-left:-395px;
384+
.viccontrol { margin-left:0px;overflow:hidden; width:215px;}
385-
margin-top:505px; 
385+
386
.leftside {
387
height:100%;
388-
.v1000w500h {
388+
width:50px; 
389-
width:1000px;
389+
390-
height: 500px;
390+
overflow:none;
391-
margin-left:-500px;
391+
z-index:1000;  
392-
margin-top:0px; 
392+
-webkit-transition: all 0.5s linear 2s;
393
-moz-transition: all  0.5s linear 2s;
394
-ms-transition: all  0.5s linear 2s;
395-
.line1, .line1b, .line1a, .line2, .line2a, .line2b {height: 100%;  margin-top:0px; position:fixed; }   
395+
-o-transition: all  0.5s linear 2s;
396-
.line1,  .line2 {width:20px;}   
396+
transition: all  0.5s linear 2s;
397-
.line1 {margin-left:-525px;}  
397+
top:0%; 
398-
.line2 {margin-left:505px;}  
398+
left:0%;
399-
.line1b, .line1a, .line2a, .line2b {width:15px; }  
399+
margin-top:10px;  
400-
.line1b {margin-left:-545px;}  
400+
margin-left:-490px; 
401-
.line1a {margin-left:-565px;}  
401+
402-
.line2b {margin-left:530px;}  
402+
403-
.line2a {margin-left:550px;}  
403+
404
body:hover .leftside {
405
margin-left:0px;
406-
.conns, .connstext { text-align:justify; overflow:auto;}  
406+
-webkit-transition: all 0.5s linear 0s;
407-
.conns {width:490px; height:400px; margin:5px;}   
407+
-moz-transition: all  0.5s linear 0s;
408-
.connsimg {width:100px; height:100px; overflow:hidden;}  
408+
-ms-transition: all  0.5s linear 0s;
409-
.connstext {width:365px; height:96px;border:1px solid;  }  
409+
-o-transition: all  0.5s linear 0s;
410
transition: all  0.5s linear 0s;
411
}  
412
413-
.hbox1, .v390w390h_A { 
413+
.about{
414
width:415px;
415
height:130px;
416
overflow:auto; 
417
padding:5px;
418
text-align:justify;
419
}
420
421
.statsL {
422
float:left; 
423
width:200px; 
424
height:220px; 
425
overflow:hidden;
426
}
427-
width:100px;
427+
428-
height:100px;
428+
.statsR {
429-
line-height:100px; 
429+
float:right; 
430-
font-size:8pt;
430+
width:215px; 
431
height:220px; 
432
overflow:auto;
433
text-align:left;
434
}
435-
.v390w390h  {
435+
436-
height:390px;
436+
.pers {
437-
width:390px;
437+
width:210px; 
438-
margin-left:110px;
438+
height:75px; 
439-
margin-top:505px;  
439+
440
text-align:left;
441
margin-bottom:5px;
442-
.v390w390h_A {
442+
443-
height:380px;
443+
444-
width:380px;
444+
.music {
445-
padding:5px; 
445+
width:210px; 
446-
text-align:justify; 
446+
height:20px; 
447
overflow:hidden; 
448
text-align:center; 
449-
.Hbox1:hover, .v390w390h_A:hover   {
449+
450
451
.hbox1 {
452
width:150px;
453
height:150px; 
454
overflow:hidden;
455
margin:10px 5px;
456
}
457-
.stats {
457+
458-
width:375px; 
458+
.hbox1a {
459-
height:200px; 
459+
width:140px;
460
height:140px; 
461
padding:5px;
462-
padding:0px 5px;
462+
463
text-align:justify;
464
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
465
filter: alpha(opacity=0);
466-
.vicarious{ Color Palette ---- IF YOU CHANGE THE BACKGROUND COLOR, READ THE INFO ABOUT THE LINES }
466+
467
-webkit-transition: all 1s ease-out 0s;
468-
body, .bottom { background-color:740007; }
468+
469
-ms-transition: all 1s ease-out 0s;
470-
::-webkit-scrollbar-track {background-color:000000 ; border-color:222222;}  
470+
471-
::-webkit-scrollbar-thumb {background-color:303030; border-color:222222 ;}
471+
472
}
473-
.viccontrol, .viccontrol2 {background-color:transparent;}
473+
474
475-
 .v1000w500h, .v500w835h, .v390w390h, .music, .v390w415h, .v390w360h, .line1, .line2, .viccontrol3 {background-color:000000;}
475+
.Hbox1a:hover   {
476-
.vicframeimg a, .vicframe2img a, .vicframe3img a {background-color:121212;} 
476+
477-
.conns, .stats, .v390w390h_A {background-color:191919;}
477+
478-
.connstext {border-color:000000; background-color:141414;} 
478+
479
overflow:auto;
480-
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  { color:383838; }
480+
481-
I { color:979797; }
481+
482-
EM { color:dedede; }
482+
483-
B { color:6a6a6a; }
483+
.vicariousmasthead {
484-
.B2, B2 { color:555555; }
484+
position:absolute; 
485-
.strong, strong { color:cdcdcd; }
485+
width:950px; 
486-
.u, u { color:444444; }
486+
height:500px;  
487-
.strike, strike { color:b3000b ; }
487+
padding:3px; 
488
border:1px solid ; 
489-
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited, .hbox1 { color:cbcbcb; background-color:1c1c1c; }
489+
top:0%; 
490-
a.third, a.third:link, a.third:active, a.third:visited   { color:cbcbcb; background-color:740007; }
490+
left:50%; 
491-
a.cons, a.cons:link, a.cons:active, a.cons:visited   { color:740007; background-color:222222; } 
491+
margin-top:5px; 
492-
a.first:hover, a.second:hover, a.third:hover, a.cons:hover  { color:555555; background-color:000000; } 
492+
margin-left:-475px; 
493
z-index:1 !important;
494-
.h1, h1 { color:d2d2d2;background-color:222222; }
494+
visibility:visible !important; 
495-
.one, one  { color:d2d2d2;background-color:transparent; }
495+
display:block !important; 
496-
.h2, h2, .two, two  { color:868686; background-color:transparent;  }
496+
497-
.h3, h3  { color:d2d2d2; background-color:740007; border-color:262626; }
497+
498-
.h4, h4  { color:8e8e8e; background-color:161616; border-color:333333;  }
498+
.vicarious{ Masthead CSS }
499-
.h5, h5  { color:7a7a7a; background-color:222222;   }
499+
 .v {display:none;}
500-
.h6, h6 { color:000000; background-color:540005;   }
500+
body.bodyContent, body, v v v.x {margin-top:490px;margin-left:0px;}
501-
.h7, h7  { color:d2d2d2; background-color:424242;   }
501+
div.profileWidth table div ul, div.clearfix v v.v {top:0px !important;}
502-
.h8, h8  { color:aa000a; background-color:0a0a0a;   }
502+
503
.vicarious{ Color Palette}
504-
big { color:454545;   }
504+
505-
small { color:c3c3c3; background-color:b3000b;   }
505+
 body { background-color:34383a;  }
506
507-
.lyric, lyric { color:444444;   }
507+
::-webkit-scrollbar-track {background-color:000000 ; border-color:000000 ;}  
508-
.lyric2, lyric2 { color:930009;   }
508+
::-webkit-scrollbar-thumb {background-color:4c4945;   border-color:000000 ;}
509-
.lyric3, lyric3 { color:cecece;   }
509+
510-
.lyric4, lyric4 { color:333333;   }
510+
.vic_table, table table table, .vicariousmasthead  {background-color:333333; border-color:666666; }
511-
.lyric5, lyric5 { color:666666;   }
511+
512-
.lyric6, lyric6 { color:930009;   }
512+
.about, .pers, .statsR, .vc, .hbox1a  {background-color:232323; }
513-
.lyric7, lyric7 { color:c4c4c4;   }
513+
.music  {background-color:333333;  }
514
.leftside, .vicframe  {background-color:transparent; }
515-
/* - -The short lines with a tapered edge are actually dual colored.  The 'invisible' portion is simply the same color as the background so that it blends in and cannot be seen.  If you change the background color, you will need to change the line color code (the one that is the same color as the current background color).  If you go into photobucket and grab the paint tool and put in the color code 740007, you will see the rgb numbers as 116 0 7.  In the four lines below, you can see that color on there as well, notated out with the rgb color codes.  If you change the color code of the body background to 003f3e, for example, you would find the rgp in photoshop (or on the web).  The rgb for that hex color is 0 63 62; so you would put (0, 63, 62) in every place below where you currently see (116, 0, 7)  Alternatively, you can just remove the <div class="line1a">, etc in Like to Meet if you don't want the tapered lines in the layout at all.- - */    
515+
516
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p  { color:4f5959; }
517
p:first-line {color:898c92;}
518-
 .line1a { 
518+
I { color:ebebeb; }
519-
background: rgb(116, 0, 7);
519+
EM { color:ebe7e8; }
520-
background: -moz-linear-gradient(45deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);
520+
B {color:696e71;}
521-
background: -webkit-linear-gradient(45deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);
521+
.B2, B2, .B3, B3, .B4, B4  {color:948e87; }
522-
background: -o-linear-gradient(45deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);
522+
.strong, strong {color:d3cbcf; }
523-
background: -ms-linear-gradient(45deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);
523+
.strike, strike {color:efeae7; }
524-
background: linear-gradient(135deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);
524+
525
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {color:7f766d;background-color:transparent; }
526
a.first:hover,  a.second:hover {color:717a7a; }
527-
.line1b { 
527+
a.cons, a.cons:link, a.cons:active, a.cons:visited {color:696e71 ; background-color:3b4141; }
528-
background: rgb(116, 0, 7);
528+
a.cons:hover {color:726864; }
529-
background: -moz-linear-gradient(45deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);
529+
530-
background: -webkit-linear-gradient(45deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);
530+
.h1, h1   {color:505558;  border-color:34393d;}
531-
background: -o-linear-gradient(45deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);
531+
.h2, h2 {color:726864 ; background-color:3b4141; }
532-
background: -ms-linear-gradient(45deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);
532+
.h3, h3 { color:8c9492 ;  }
533-
background: linear-gradient(135deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);
533+
.h5, h5 { color:b8bab9 ;  }
534
.h4, h4 {color:746865 ;background-color:1a1b1b; border-color:34393d;}
535
.h6, h6 {color:000000;background-color:3b4141; }
536-
.line2a { 
536+
.h7, h7 {color:adb3b1; }
537-
background: rgb(0, 0, 0);
537+
.h8, h8 {color:596162; }
538-
background: -moz-linear-gradient(315deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);
538+
small {color:0d0c0b;background-color:77706a; }
539-
background: -webkit-linear-gradient(315deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);
539+
big {color:77706a;background-color:3b4547; }
540-
background: -o-linear-gradient(315deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);
540+
.lyric, lyric { color:b3b8ba;}
541-
background: -ms-linear-gradient(315deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);
541+
.lyric2, lyric2  {color:574f4c;}
542-
background: linear-gradient(45deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);
542+
.lyric3, lyric3  {color:667176; }
543
.lyric4, lyric4  {color:484240; }
544
.lyric5, lyric5 {color:7c8a8b }
545-
.line2b { 
545+
.lyric6, lyric6  {color:807570; }
546-
background: rgb(0, 0, 0);
546+
.lyric7, lyric7  {color:697175; } 
547-
background: -moz-linear-gradient(315deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);
547+
548-
background: -webkit-linear-gradient(315deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);
548+
549-
background: -o-linear-gradient(315deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);
549+
.vicarious{ Hide Codes }
550-
background: -ms-linear-gradient(315deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);
550+
.profileInfo,  .userProfileURL,  .friendsComments, .blacktext12, .friendSpace, .blurbs, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userprofiledetail, .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .navigationBar, .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
551-
background: linear-gradient(45deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);
551+
552
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
553
div div select, div div form {display:none !important;}
554
select { visibility:hidden!important; WIDTH:0px!important;}
555
table div {display:none;}table table div {display:block;}
556
.navigationBar { display: none; }
557-
/* - - CSS!! NO TOUCHY!!! - - */  
557+
div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
558
.vicarious{Misc Codes}
559-
img {border:0px;}
559+
p.breakhere { page-break-after: always }
560-
table, tr, td {background:transparent; border:0px;}
560+
br{line-height:10px!important;} 
561-
img, .contactTable { display:none; }
561+
562-
.vicholder img, .comt img { display:inline; }
562+
563-
table div, td td td, table div div { visibility:hidden; }
563+
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
564-
font, a, .vicsc a { visibility:hidden; }
564+
565-
 .hidenav {display:none}
565+
566-
 div.profileWidth {margin-top: -30px !important;}
566+
</style></td></tr></table></td></tr></table><div class="vicariousmasthead">
567-
 div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}
567+
568-
 div.profileWidth div.clearfix, hidenav hidenav hidenav,
568+
569-
 div.profileWidth div div {filter:none; opacity:0.9999}
569+
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l10_zpsd1f05af4.jpg~original">
570-
 div.profileWidth div.clearfix {position:relative; top:30px}
570+
571-
table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
571+
572-
table table table embed,  .vicholder div embed {position:static !important; width:auto; height:auto; }
572+
</div><table class=v><tr><td><table><tr><td></td></tr></table><table style="display:none"><tr><td>
573-
.text, table table table table a,table table table table div,table table table table div a {visibility:visible;}
573+
574-
.vicsc { display:none; }
574+
575-
.text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
575+
576-
table table, table table td {padding:0px; height:0px;}
576+
577-
marquee { z-index:8; }
577+
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:500px; display:block; word-wrap:break-word">
578-
table div, span, td td td, table div div { visibility:hidden !important; }
578+
579-
.vicholder div, .vicholder div font, .vicholder div a, .vicholder div div, .vicholder font a, .vicholder span, .vicholder div table a, .vicholder div table img, .vicholder div table font, .vicholder div table, .vicholder div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}
579+
<font class="h2">Your Name Here</font> 
580-
.vicDiv {content:"Layouts available @ http://vicarious-hs.tumblr.com";}
580+
581-
/* - - - - - - - */  
581+
582
<font class="h8">Verse 1 - Verse 2 - Verse 3 - Verse 4</font>
583
584-
 .vicarious{ Hide Codes }
584+
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l_zps0b4afcd6.jpg~original">
585-
.userProfileURL { display:none; }
585+
586-
.profileInfo { display:none; }
586+
<font class="h8">Multi-Para to Novella, Third Person POV</font>
587-
.friendsComments { display:none; }
587+
588-
.friendSpace { display:none; }
588+
 </td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:500px; display:block; word-wrap:break-word">
589-
.blurbs {display: none;}
589+
590-
.contactTable {display: none;}
590+
591-
.latestBlogEntry {display: none;}
591+
<table><tr>
592-
.extendedNetwork {display: none;}
592+
593-
.interestsAndDetails {display: none;}
593+
594-
.userprofiledetail {display: none;}
594+
<td><div class="hbox1" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l17_zpsfa5e427f.jpg~original);">
595-
.userAlbums { display:none; }
595+
<div class="hbox1a">
596-
.whitetext12{visibility:hidden; display:none;}
596+
597-
.orangetext15{visibility:hidden; display:none;}
597+
This is box 1.  Text goes here. 
598-
.lightbluetext8{visibility:hidden; display:none}
598+
599
</div></div></td>
600
601-
.profile { display:none !important;visibility:hidden!important; }
601+
<td><div class="hbox1" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l17_zpsfa5e427f.jpg~original);">
602-
table tr td[id='footerWarpper']{display:none !important;visibility:hidden!important;}
602+
<div class="hbox1a">
603
604
This is box 2.  Text goes here.
605-
</style>
605+
606
</div></div></td>
607-
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>
607+
608
<td><div class="hbox1" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l17_zpsfa5e427f.jpg~original);">
609
<div class="hbox1a">
610
611-
</td></tr></table></td></tr></table></td></tr></table></div><DIV class="vicholder"><div class="line2"></div><div class="line2b"></div><div class="line2a"></div><div class="line1"></div><div class="line1b"></div><div class="line1a"></div>
611+
This is box 3.  Text goes here.
612
613-
<div class="v1000w500h"><img src="http://i.imgur.com/eby0N9s.png"></div>
613+
</div></div></td></tr></table>
614
615-
<div class="v500w835h"><img src="http://i.imgur.com/mvbXpET.png"></div>
615+
616
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:500px; display:block; word-wrap:break-word">
617-
<div class="vicframe"><div class="viccontrol">
617+
618
<font class="h5">Main Connections</font> 
619-
<a class="second" href="#conn1" style="background-image:url(http://i.imgur.com/9N1gptq.png);">
619+
620-
<div class="hbox1">Damon</div></a>  
620+
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:500px; display:block; word-wrap:break-word">
621
622-
<a class="second" href="#conn2" style="background-image:url(http://i.imgur.com/ReWJTDW.png);">
622+
<div class="vicframe" style="background-image:url(http://i40.tinypic.com/140xnw3.jpg);"><div class="viccontrol">
623-
<div class="hbox1">Stefan</div></a> 
623+
624
<table><tr>
625-
<a class="second" href="#conn3" style="background-image:url(http://i.imgur.com/e1S1aKH.png);">
625+
<td><a class="second" href="#conn1"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
626-
<div class="hbox1">Katherine</div></a> 
626+
<td><a class="second" href="#conn2"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
627
<td><a class="second" href="#conn3"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
628-
<a class="second" href="#conn4" style="background-image:url(http://i.imgur.com/F6HFzJH.png);">
628+
<td><a class="second" href="#conn4"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
629-
<div class="hbox1">Caroline</div></a>  
629+
</tr><tr>
630
<td><a class="second" href="#conn5"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
631
<td><a class="second" href="#conn6"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
632
<td><a class="second" href="#conn7"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
633
<td><a class="second" href="#conn8"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
634
</tr><tr>
635-
<a id="conn1" href="#"><table><tr><td><div class="conns">
635+
<td><a class="second" href="#conn9"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
636-
<font class="h4">Connection Name Here</font>
636+
<td><a class="second" href="#conn10"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
637
<td><a class="second" href="#conn11"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
638-
<p>Text goes here 
638+
<td><a class="second" href="#conn12"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
639-
</div></td></tr></table></a> 
639+
</tr><tr>
640
<td><a class="second" href="#conn13"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
641-
<a id="conn2" href="#"><table><tr><td><div class="conns">
641+
<td><a class="second" href="#conn14"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
642-
<font class="h4">Connection Name Here</font>
642+
<td><a class="second" href="#conn15"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
643
<td><a class="second" href="#conn16"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
644-
<p>Text goes here 
644+
</tr></table>
645-
</div></td></tr></table></a> 
645+
646
</div><div class="vicframeimg">
647-
<a id="conn3" href="#"><table><tr><td><div class="conns">
647+
648-
<font class="h4">Connection Name Here</font>
648+
649
<a id="conn1" href="#"><table><tr><td><div class="VC">
650-
<p>Text goes here 
650+
<font class="h4">Connection 1 Here</font>
651-
</div></td></tr></table></a> 
651+
652
653-
<a id="conn4" href="#"><table><tr><td><div class="conns">
653+
<img align=left src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l22_zpsbf91791c.jpg~original"> 
654-
<font class="h4">Connection Name Here</font>
654+
I have included a pic (aligned to the left)in Connection 1's box to show you that you can put a larger pic in here before the text field, but if you just want text, remove the image.  BE HELLUVA CAREFUL NOT TO DROP ANY OF THESE CODE TAGS.
655
</div></td></tr></table></a>
656-
<p>Text goes here 
656+
657-
</div></td></tr></table></a> 
657+
<a id="conn2" href="#"><table><tr><td><div class="VC">
658
<font class="h4">Connection 2 Here</font>
659
<a class="cons" href="/FRIENDID">View Profile</a>
660
Text goes here
661
</div></td></tr></table></a>
662-
</div></div><div class="vicframe2"><div class="viccontrol2">
662+
663
<a id="conn3" href="#"><table><tr><td><div class="VC">
664-
<a class="second" href="#conn5" style="background-image:url(http://i.imgur.com/mPtnhRx.jpg);">
664+
<font class="h4">Connection 3 Here</font>
665-
<div class="hbox1">Jeremy</div></a>  
665+
666
Text goes here
667-
<a class="second" href="#conn6" style="background-image:url(http://i.imgur.com/h7BaxqG.png);">
667+
668-
<div class="hbox1">Bonnie</div></a> 
668+
669
<a id="conn4" href="#"><table><tr><td><div class="VC">
670-
<a class="second" href="#conn7" style="background-image:url(http://i.imgur.com/5B7L3Ix.jpg);">
670+
<font class="h4">Connection 4 Here</font>
671-
<div class="hbox1">Alaric</div></a> 
671+
672
Text goes here
673-
<a class="second" href="#conn8" style="background-image:url(http://i.imgur.com/rjTrKj0.png);">
673+
674-
<div class="hbox1">More</div></a> 
674+
675
<a id="conn5" href="#"><table><tr><td><div class="VC">
676-
</div><div class="vicframe2img">
676+
<font class="h4">Connection 5 Here</font>
677
<a class="cons" href="/FRIENDID">View Profile</a>
678
Text goes here
679-
<a id="conn5" href="#"><table><tr><td><div class="conns">
679+
680-
<font class="h4">Connection Name Here</font>
680+
681
<a id="conn6" href="#"><table><tr><td><div class="VC">
682-
<p>Text goes here 
682+
<font class="h4">Connection 6 Here</font>
683
<a class="cons" href="/FRIENDID">View Profile</a>
684
Text goes here
685-
<a id="conn6" href="#"><table><tr><td><div class="conns">
685+
686-
<font class="h4">Connection Name Here</font>
686+
687
<a id="conn7" href="#"><table><tr><td><div class="VC">
688-
<p>Text goes here 
688+
<font class="h4">Connection 7 Here</font>
689
<a class="cons" href="/FRIENDID">View Profile</a>
690
Text goes here
691-
<a id="conn7" href="#"><table><tr><td><div class="conns">
691+
692-
<font class="h4">Connection Name Here</font>
692+
693
<a id="conn8" href="#"><table><tr><td><div class="VC">
694-
<p>Text goes here 
694+
<font class="h4">Connection 8 Here</font>
695
<a class="cons" href="/FRIENDID">View Profile</a>
696
Text goes here
697
</div></td></tr></table></a>
698
699-
<a id="conn8" href="#"><table><tr><td><div class="conns">
699+
<a id="conn9" href="#"><table><tr><td><div class="VC">
700
<font class="h4">Connection 9 Here</font>
701-
<p>Instructions for this section.  REMOVE THE INSTRUCTIONS ONCE YOU ARE DONE READING THROUGH THEM.
701+
702-
<BR>In the event that you have more than 8 connections, I have made the 8th button a 'more' connections field.  Each of the below from the table tag ( < table > ) to the page break ( < br > ) is one small inner table with a pic on the side and text.  Look at the section.  You can clearly see where each one begins and ends.
702+
Text goes here
703-
<BR>If you need more inner connections, copy the entire table (< table > to < br >) and paste it at the end of all the inner connections.  The pic on the first table is set to the right.  The pic on the second table is set to the left.  When you add a table, make sure to copy the type of table (pic left or right) that would go next.
703+
704-
<BR>If you ONLY have eight connections, you can delete this entire area below (again from the FIRST< table > to the LAST< br >)and just put the font class h4 and text like the other sections in buttons 1-7.  If you need help, contact me.
704+
705
<a id="conn10" href="#"><table><tr><td><div class="VC">
706
<font class="h4">Connection 10 Here</font>
707-
<table><tr><td><div class="connsimg" style="float:right">
707+
708-
<img src="http://i.imgur.com/UWn8wBY.png">
708+
Text goes here
709-
</div><div class="connstext" style="float:left;">
709+
710-
<font class="h4">Connection Name Here</font>
710+
711
<a id="conn11" href="#"><table><tr><td><div class="VC">
712-
<p>This entire area is an inner connection table. Text about connection goes here.
712+
<font class="h4">Connection 11 Here</font>
713-
</div></td></tr></table><BR>
713+
714
Text goes here
715-
<table><tr><td><div class="connsimg" style="float:left">
715+
716-
<img src="http://i.imgur.com/EJTqZYo.jpg">
716+
717-
</div><div class="connstext" style="float:right;">
717+
<a id="conn12" href="#"><table><tr><td><div class="VC">
718-
<font class="h4">Connection Name Here</font>
718+
<font class="h4">Connection 12 Here</font>
719
<a class="cons" href="/FRIENDID">View Profile</a>
720-
<p>This entire area is an inner connection table. Text about connection goes here.
720+
Text goes here
721-
</div></td></tr></table><BR> 
721+
722
723-
<table><tr><td><div class="connsimg" style="float:right">
723+
<a id="conn13" href="#"><table><tr><td><div class="VC">
724-
<img src="http://i.imgur.com/ny62sbr.jpg">
724+
<font class="h4">Connection 13 Here</font>
725-
</div><div class="connstext" style="float:left;">
725+
726-
<font class="h4">Connection Name Here</font>
726+
Text goes here
727
</div></td></tr></table></a>
728-
<p>This entire area is an inner connection table. Text about connection goes here.
728+
729-
</div></td></tr></table><BR>
729+
<a id="conn14" href="#"><table><tr><td><div class="VC">
730
<font class="h4">Connection 14 Here</font>
731-
<table><tr><td><div class="connsimg" style="float:left">
731+
732-
<img src="http://i.imgur.com/erI860m.jpg">
732+
Text goes here
733-
</div><div class="connstext" style="float:right;">
733+
734-
<font class="h4">Connection Name Here</font>
734+
735
<a id="conn15" href="#"><table><tr><td><div class="VC">
736-
<p>This entire area is an inner connection table. Text about connection goes here.
736+
<font class="h4">Connection 15 Here</font>
737-
</div></td></tr></table><BR> 
737+
738
Text goes here
739-
<table><tr><td><div class="connsimg" style="float:right">
739+
740-
<img src="http://i.imgur.com/H4mKla6.jpg">
740+
741-
</div><div class="connstext" style="float:left;">
741+
<a id="conn16" href="#"><table><tr><td><div class="VC">
742-
<font class="h4">Connection Name Here</font>
742+
<font class="h4">Connection 16 Here</font>
743
<a class="cons" href="/FRIENDID">View Profile</a>
744-
<p>This entire area is an inner connection table. Text about connection goes here.
744+
Text goes here
745-
</div></td></tr></table><BR>
745+
746
  
747
</div></div>
748-
</div></td></tr></table></a></div></div>
748+
749
750-
<div class="v390w390h" style="background-image:url(http://i.imgur.com/890oFow.png);">
750+
<font class="h6">Friends - Fiends - Foes</font>  
751
752-
<div class="v390w390h_A"> 
752+
753
-----------------------------INTERESTS---------------------------------
754-
<font class="h1">About Me</font>
754+
755-
<P>This is your about me section.  Included below are text styles and instructions.
755+
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
756
757
758-
<font class="h1">Picture Sizes</font>
758+
<font class="h5">The Devil Is In The Details</font> 
759-
<p><B>Many sections will show a height and width for the pic in the div class code, but here is the break-up of sizes:</b>
759+
760-
<BR>Banner (Group photo) = 1000px width by 500px height. 
760+
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
761-
<BR>Elena pic (tall pic on left) = 500px width by 835px height.
761+
762-
<BR>Icon pics (All Connection pics) = 100px width by 100px height.
762+
763-
<BR><BR>If you use this layout for TVD but NOT for the Elena character itself and need a connection pic for her, here is an extra icon pic: http://i.imgur.com/FlaH5qb.png
763+
<div class="about">
764-
<BR><BR>Elena/Stefan/Damon pic (top right pic) = 390px width by 390px height.
764+
765-
<BR>Elena pic2 (bottom right pic) = 390px width by 360px height.
765+
<p>This is your About Me section.  Input your biographical information here.
766-
<BR>Statistical pics (All pics in stats) = 385px width by 150px height.
766+
767
<font class="h1">General Layout Info</font>
768
769
<p>Always replace the XXXXXX in the links with your friend ID number.  Links are located in the "Music" section of this layout.  For links to your mains, put the friend id number for your connections where you see FriendID.
770
771
<p>Banner:  To replace the image in the banner portion of this layout, go to About Me and scroll down to the bottom.  Put your http address for your uploaded image in place of the current one between the " and ".
772
773
<p>REMINDER:  For ALL images, always use the DIRECT LINK provided to you by your image hosting site.
774
775
<p>For images that are hover boxes, find the background-image:url("http://..."); area and replace my http address with yours.
776
777
<p>Replace the provided music player with one of your own.  Use the color codes in that object coding as a guide.
778
779
<p>The first letter of a paragraph will be enlarged and the first line of a paragraph will have a different color.  If you do not want this effect, you can remove the paragraph codes in About Me or you can simply use the page break code <BR> tag in front of your paragraphs instead of the p tag (as seen in the beginning of this paragraph of instructions).
780
 
781
782
<p>For your reference, these are the header codes, etc found in this layout.
783
784
785
<font class="h1">Header1</font>
786
<font class="h2">Header2</font>
787
<font class="h3">Header3</font>
788
<font class="h4">Header4</font>
789
<font class="h5">Header5</font>
790
<font class="h6">Header6</font>
791
<font class="h7">Header7</font>
792
<font class="h8">Header8</font>
793
 
794
<font class="lyric">Line 1 of lyrics</font>
795
<font class="lyric2">Line 2 of lyrics</font>
796
<font class="lyric3">Line 3 of lyrics</font>
797
<font class="lyric4">Line 4 of lyrics</font>
798
<font class="lyric5">Line 5 of lyrics</font>
799
<font class="lyric6">Line 6 of lyrics</font>
800-
</div></div><div class="music">
800+
801
 
802
<BR><B>Bold</b> <i> Italic</i> <em>Emphasized text</em>
803
 
804-
    <param name="bgcolor" value="#000000" />
804+
805-
    <param name="FlashVars" value="mp3=http%3A//k006.kiwi6.com/hotlink/2g01d45p0k/fever_ray_-_the_wolf_from_red_riding_hood_hq_www.mp3fiber.com_.mp3&autoplay=1&bgcolor=000000&loadingcolor=740007&buttoncolor=740007&slidercolor=740007" /></object>
805+
806
<font class="b2">Bold2</font>
807-
</div><div class="v390w360h"><img src="http://i.imgur.com/qTuITw1.png"></div>
807+
<font class="b3">Bold3</font>
808
<font class="b4">Bold4</font>
809
<font class="strong">Strong</font>
810-
<div class="vicframe3"><div class="viccontrol3"><table><tr>
810+
811
<font class="u">Underline</font>
812-
<td><a class="third" href="#s1">I</a></td>
812+
813-
<td><a class="third" href="#s2">II</a></td>
813+
814-
<td><a class="third" href="#s3">III</a></td> 
814+
815-
<td><a class="third" href="#s4">IV</a></td>
815+
816-
<td><a class="third" href="#s5">V</a></td>
816+
817-
<td><a class="third" href="#s6">VI</a></td> 
817+
818
819
</div>
820-
</tr></table></div><div class="vicframe3img"><a id="s1" href="#"><table><tr><td>
820+
821
<font class="h6">Past - Present - Future</font>   
822-
<img src="http://i.imgur.com/mHWIvx6.png"> 
822+
823
 
824-
<div class="stats"> 
824+
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
825
826-
<p><font class="h3">Personality</font>
826+
<font class="h7">Homicidal Tendencies</font> 
827-
<BR><b>Traits:</b> Input Info
827+
828
<table><tr><td>
829
830
<img class="img2" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l22_zpsbf91791c.jpg~original">
831
832
</td><td><div class="pers">
833
834
<b>Traits:</b> Input Info
835-
</div></td></tr></table></a><a id="s2" href="#"><table><tr><td>
835+
836
<BR><b>Addictions:</b> Input Info
837-
<img src="http://i.imgur.com/MwoOhxT.png"> 
837+
838
<BR><b>Dislikes:</b> Input Info
839-
<div class="stats"> 
839+
840
<BR>This is the section for your personality.  Add additional details as needed.
841-
<p><font class="h3">Legal</font>
841+
842-
<BR><b>NAME:</b> Input info
842+
843
</div><div class="music">
844
845
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
846
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
847-
<BR><b>CURRENT RESIDENCE:</b> Input info
847+
    <param name="bgcolor" value="#333333" />
848
    <param name="FlashVars" value="mp3=http%3A//k002.kiwi6.com/hotlink/wsq2887c51/the_hunger_games_-_deep_shadows_soundtrack_www.mp3fiber.com_.mp3&autoplay=1&bgcolor=333333&loadingcolor=696e71&buttoncolor=696e71&slidercolor=696e71" />
849-
</div></td></tr></table></a><a id="s3" href="#"><table><tr><td>
849+
</object>
850
851-
<img src="http://i.imgur.com/V7Dpy8j.png"> 
851+
</div></td><td>
852
853-
<div class="stats"> 
853+
<img class="img2" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l22_zpsbf91791c.jpg~original">
854
855-
<p><font class="h3">Physical</font>
855+
</td></tr></table>
856-
<BR><b>ETHNICITY:</b> Input info
856+
857
<font class="h8">I don't care if you're offended</font> 
858
859
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
860
861
<font class="h1">The Short and Sweet of It</font>
862
863-
</div></td></tr></table></a><a id="s4" href="#"><table><tr><td>
863+
<div class="statsL">
864
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l1_zps633210fd.jpg~original">
865-
<img src="http://i.imgur.com/IYXc6KN.png"> 
865+
866
</div><div class="statsR">
867-
<div class="stats"> 
867+
868
<font class="h3">Legal</font>
869-
<p><font class="h3">Education/Employment</font>
869+
870-
<BR><b>High School</b> Input Info
870+
<b>NAME:</b> Input info
871
<BR><b>NICKNAMES:</b> Input info
872
<BR><b>ALIASES:</b> Input info
873-
<br><b>Degree</b> Input Info
873+
874-
<BR><b>OCCUPATION:</b> Input info
874+
875
<BR><b>CURRENT RESIDENCE:</b> Input info 
876
877
<font class="h3">Physical</font>
878
 
879
<b>ETHNICITY:</b> Input info
880
<BR><b>HAIR COLOR:</b> Input info
881-
<a id="s5" href="#"><table><tr><td>
881+
882-
<img src="http://i.imgur.com/BfqA7PW.png"> 
882+
883-
<div class="stats"> 
883+
884-
<p><font class="h3">Family</font>
884+
885-
<BR><b>MOTHER:</b> Input info
885+
886
<font class="h3">Family</font>
887
 
888
<b>MOTHER:</b> Input info
889
<BR><b>FATHER:</b> Input info
890
<BR><b>SISTER(S):</b> Input info
891-
</div></td></tr></table></a><a id="s6" href="#"><table><tr><td>
891+
892
<BR><b>Other Family:</b> Input info
893-
<img src="http://i.imgur.com/kPoKEbL.png"> 
893+
894
<font class="h3">Relationships</font>
895-
<div class="stats"> 
895+
896
<b>SEXUAL ORIENTATION:</b> Input info
897-
<p><font class="h3">Relationships</font>
897+
898-
<BR><b>SEXUAL ORIENTATION:</b> Input info
898+
899
<BR><b>PAST RELATIONSHIP(S):</b> Input info 
900
 
901-
<BR><b>PAST RELATIONSHIP(S):</b> Input info
901+
<font class="h3">Education</font>
902
 
903-
</div></td></tr></table></a></div></div> 
903+
<b>High School</b> Input Info
904
<br><b>College</b> Input Info
905
<br><b>Major</b> Input Info
906-
<div class="buffer"></div><div class="bottom">
906+
<br><b>Degree</b> Input Info 
907
 
908-
<TABLE><TR>
908+
<font class="h3">Employment</font>
909-
<TD><a CLASS="FIRST" href="/logincomplete.php">Home</a></TD>
909+
910-
<TD><a CLASS="FIRST" href="/invite_friend.php?friend_id=xxxxxx">Add</a></TD>
910+
<b>OCCUPATION:</b> Input info
911-
<TD><a CLASS="FIRST" href="/send_message.php?member_id=xxxxxx">Message</a></TD>
911+
912-
<TD><a CLASS="FIRST" href="/add_testimonial.php?member_id=xxxxxx">Comment</a></TD>
912+
913-
<TD><a CLASS="FIRST" href="/gallery.php?member_id=xxxxxx">Photos</a></TD>
913+
914-
<TD><a CLASS="FIRST" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a></TD>
914+
915-
</TR></TABLE>
915+
916
917
918
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
919
 
920
921-
</div><div class="ficsc"><table><tr><td><table><tr><td><table><tr><td>
921+
<font class="lyric">Try to remember how it felt</font>
922
<font class="lyric2">To just make up your own steps</font>
923
<font class="lyric3">And let anklebiters</font>
924
<font class="lyric4">Chew up, spit out someone else</font>
925
<font class="lyric5">Fall in love with yourself</font>
926
<font class="lyric6">Because someday you’re gonna be</font>
927
<font class="lyric7">The only one you’ve got</font>
928
 
929
930
 
931
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
932
933
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
934
 
935
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
936
937
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
938
939
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
940
941
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
942
943
944
-----------------------------MUSIC---------------------------------
945
946
 </td></tr></table></td></tr></table><table  cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:450px; display:block; word-wrap:break-word">
947
948
 
949
<div class="leftside">
950
<a class="first" href="/logincomplete.php" title="Home">H</a> 
951
<a class="first" href="/invite_friend.php?friend_id=xxxxxx" title="Add">A</a> 
952
<a class="first" href="/send_message.php?member_id=xxxxxx" title="Message">M</a> 
953
<a class="first" href="/add_testimonial.php?member_id=xxxxxx" title="Comment">C</a> 
954
<a class="first" href="/gallery.php?member_id=xxxxxx" title="Photos">P</a> 
955
<a class="first" href="/view_member_blog.php?member_id=xxxxxx" title="Blogs">B</a> 
956
</div>