Wug (CSS: character)

Posted: 17 Sep 2015 10:28:10PM in Wug
Last edited: 17 Sep 2015 10:59:09PM
1
/*************************************************************************/
2
/* character css by cy @ toyhou.se                                       */
3
/*************************************************************************/
4
/* sidebar */
5
6
#sidebar .display-user-tiny, #sidebar .display-character img
7
{
8
    display: none;
9
}
10
#sidebar .display-character
11
{
12
    text-align: right;
13
    font-size: 3em;
14
    float: right;
15
    clear: both;
16
    color: #c4efd6 !important;
17
}
18
#sidebar
19
{
20
    font-family: "Lucida Grande",arial,Georgia,verdana,sans-serif !important;
21
    text-align: right;
22
    width: 30%;
23
    padding-top: 100px;
24
    padding-bottom: 100px;
25
    padding-right: 20px;
26
    background-color: #335c68
27
}
28
#sidebar a
29
{
30
    color: #64a6a8;
31
}
32
#sidebar a:hover
33
{
34
    color: #f92269;
35
    background-color: transparent;
36
}
37
#sidebar li.active
38
{
39
    color: #c4efd6;
40
    background-color: #64a6a8;
41
}
42
43
.side-nav
44
{
45
    padding-left: 40%;
46
}
47
.side-nav .header
48
{
49
    height: 150px;
50
    width: 150px;
51
    background-image: url('http://i.imgur.com/OcWG3Dh.jpg');
52
    border-bottom-left-radius: 50%;
53
    border-top-left-radius: 50%;
54
    border-bottom-right-radius: 3px;
55
    border-top-right-radius: 3px;
56
    font-size: 0px;
57
    float: right;
58
    clear: both;
59
    margin-right: 10px;
60
}
61
.side-nav .display-user
62
{
63
    text-align: right;
64
    font-size: 3em;
65
    line-height: 2.5em;
66
    float: right;
67
    clear: both;
68
    color: #c4efd6 !important;
69
}
70
.side-nav .display-user img, .side-nav li.divider
71
{
72
    display: none;
73
}
74
.side-nav li.blurb
75
{
76
    float: right;
77
    clear: both;
78
    color: #f7f7e7;
79
    text-align: right;
80
}
81
.side-nav li.blurb hr
82
{
83
    border-style: dashed;
84
    border-color:  #c4efd6;
85
    margin-top: 5px;
86
}
87
.side-nav li a
88
{
89
    float: right;
90
    clear: both;
91
    padding-right: 30px;
92
93
}
94
95
/*************************************************************************/
96
/* content */
97
98
#main
99
{
100
    background-color: #f7f7e7
101
}
102
103
#content
104
{
105
    font-family: "Lucida Grande",arial,Georgia,verdana,sans-serif !important;
106
    width: 50%;
107
    float: left;
108
    /*width: 70%;*/
109
    padding-left: 30px;
110
    padding-top: 50px;
111
    padding-bottom: 50px;
112
    color: #335c68;
113
}
114
115
blockquote
116
{
117
    background-color: transparent;
118
    color: #335c68;
119
    border-left: 5px solid #64a6a8;
120
    padding-top: 10px;
121
    padding-bottom: 10px;
122
}
123
124
.stuff
125
{
126
    font-family: "Lucida Grande",arial,Georgia,verdana,sans-serif !important;
127
    /*width: 60%;*/
128
    text-align: justified;
129
    padding-bottom: 30px;
130
    color: #335c68;
131
}
132
.stuff hr
133
{
134
    margin-bottom: 10px !important;
135
    border-style: dashed;
136
    border-color: #f92269;
137
}
138
.stuff a
139
{
140
    color: #64a6a8;
141
}
142
.stuff a:hover
143
{
144
    color: #c4efd6;
145
}
146
.stuff h1, .stuff h2, .stuff h3, .stuff h4, .stuff h5
147
{
148
    color: #64a6a8;
149
}
150
151
/*************************************************************************/
152
/* character divs */
153
/* You can get rid of the character stats section by adding
154
155
.character-stats {display: none;}
156
157
   Or you can replace the entire character stats section with a picture of
158
   your choice (but changing the position will be a little annoying.)
159
   Remove everything between here and... (scroll down) */
160
161
.character-stats a
162
{
163
    color: #64a6a8;
164
}
165
.character-stats a:hover
166
{
167
    color: #f92269;
168
}
169
.character-stats 
170
{
171
    border: 0px;
172
    padding-left: 30px;
173
    padding-right: 30px;
174
    padding-top: 30px;
175
    padding-bottom: 30px;
176
    margin-bottom: 15px;
177
    background-color: #335c68;
178
    color: #64a6a8;
179
    margin-right: -42%;
180
    width: 42%;
181
    border-radius: 3px;
182
}
183
.character-stat-title 
184
{
185
    color: #f7f7e7;
186
}
187
.character-stats img
188
{
189
    display: none;
190
}
191
192
/* ...here and replace with the following:
193
   (changing the image url and height to suit your image)
194
195
.character-stats 
196
{
197
    border: 0px;
198
    padding-left: 30px;
199
    padding-right: 30px;
200
    padding-top: 30px;
201
    padding-bottom: 30px;
202
    margin-bottom: 15px;
203
    background-color: transparent;
204
    margin-right: -42%;
205
    width: 42%;
206
    border-radius: 3px;
207
    font-size: 0px;
208
    height: 300px;
209
    background-image: url('image url here');
210
}
211
212
*/
213
214
.character-fields-title, .character-fields-title, .character-text-title, .character-recent-images-title
215
{
216
    font-family: "Lucida Grande",arial,Georgia,verdana,sans-serif !important;
217
    padding: 0px 0px 0px 5px;
218
    background-color: transparent;
219
    border: 0px;
220
    color: #64a6a8;
221
    margin-bottom: 10px !important;
222
    border-bottom: 1px;
223
    border-style: dashed;
224
    border-color: #f92269;
225
}
226
.character-field-title
227
{
228
    color: #335c68;
229
}
230
.character-field-value
231
{
232
    color: #64a6a8;
233
}
234
.character-recent-images-gallery
235
{
236
    padding: 0px;
237
}
238
.character-text
239
{
240
    text-align: justified;
241
}
242
243
/*************************************************************************/
244
/* bulletin */
245
246
.bulletin-post
247
{
248
    text-align: justify;
249
    color: #335c68;
250
}
251
.bulletin-caption
252
{
253
    color: #f7f7e7;
254
}
255
abbr
256
{
257
    color: #c4efd6;
258
    border-bottom-color: #64a6a8 !important;
259
    border-bottom-style: dashed !important;
260
}
261
262
/*************************************************************************/
263
/* characters gallery */
264
265
.sub-nav
266
{
267
    border-bottom: 1px dashed #f92269;
268
    padding-top: 30px;
269
    padding-bottom: 30px;
270
}
271
.sub-nav dt
272
{
273
    float: left;
274
    font-weight: bold;
275
    color: #335c68;
276
}
277
.sub-nav dd
278
{
279
    float: right;
280
    text-align: right;
281
    color: #64a6a8;
282
}
283
.sub-nav dd a, 
284
{
285
    color: #64a6a8;
286
}
287
.sub-nav dd a:hover, 
288
ul.pagination li a:hover
289
{
290
    color: #c4efd6;
291
    background-color: transparent;
292
}
293
.sub-nav dt.active a, 
294
.sub-nav dd.active a, 
295
.sub-nav li.active a, 
296
ul.pagination li.current a,
297
button, .button,
298
button.secondary, .button.secondary
299
{
300
    background: none repeat scroll 0% 0% #335c68;
301
    /*border-radius: 0 !important;*/
302
    border: 1px dashed #64a6a8 !important; 
303
    color: #c4efd6;
304
}
305
306
.sub-nav dt.active a:hover, 
307
.sub-nav dd.active a:hover,
308
.sub-nav li.active a:hover,  
309
ul.pagination li.current a:hover,
310
.button:hover,
311
button.secondary:hover, .button.secondary:hover
312
{
313
    background: none repeat scroll 0% 0% #64a6a8;
314
    color: #c4efd6;
315
}
316
317
ul.pagination li a
318
{
319
    background: none repeat scroll 0% 0% #64a6a8;
320
    border: 0 !important;
321
    background-color: transparent;
322
    color: #64a6a8;
323
}
324
325
/*************************************************************************/
326
/* panels */
327
328
.panel
329
{
330
    font-family: "Lucida Grande",arial,Georgia,verdana,sans-serif !important;
331
    font-size: 12px;
332
    text-transform: uppercase;
333
    font-weight: 700;
334
    line-height 18px;
335
}
336
.panel hr
337
{
338
    margin-bottom: 10px !important;
339
    border-style: dashed;
340
    border-color: #f92269;
341
}
342
.th, .th.radius, .thumb
343
{
344
    border: 0px;
345
    padding: 5px;
346
    border-radius: 3px;
347
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
348
}
349
350
/*************************************************************************/
351
/* labels */
352
353
.label, .label a, .label a:hover
354
{
355
    background-color: transparent;
356
    border: 0px;
357
}
358
359
/*************************************************************************/
360
/* hiding */
361
362
#header, #footer, .profiler{ display: none; }