Roundcubemail devel
view | history | commit | commitdiff
alecpl
2012-04-14 9870dac30de1b8d1bdeab57af3eeb7c89b21ef76
commit | author | age
e7c445 1 /**
T 2  * Roundcube webmail styles for skin "Larry"
3  *
071c78 4  * Copyright (c) 2012, The Roundcube Dev Team
e7c445 5  * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
T 6  *
7  * The contents are subject to the Creative Commons Attribution-ShareAlike
8  * License. It is allowed to copy, distribute, transmit and to adapt the work
9  * by keeping credits to the original autors in the README file.
10  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
11  *
12  * $Id$
13  */
14
15 body {
16     font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
74d4c7 17     font-size: 11px;
e7c445 18     color: #333;
T 19     background: url(images/linen.jpg) repeat #d1d5d8;
20     margin: 0;
071c78 21 }
T 22
23 body.noscroll {
24     /* also avoids bounce effect in Chrome and Safari */
25     overflow: hidden;
e7c445 26 }
T 27
b1fa1a 28 a {
T 29     color: #0069a6;
30 }
31
32 a:visited {
33     color: #0186ba;
34 }
35
36 img {
37   border: 0;
38 }
39
e7c445 40 input[type="text"],
T 41 input[type="password"],
42 textarea {
bab043 43     margin: 0; /* Safari by default adds a margin */
e7c445 44     padding: 4px;
b1fa1a 45     border: 1px solid #b2b2b2;
e7c445 46     border-radius: 4px;
b1fa1a 47     box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
T 48     -moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
49     -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
50     -o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
e7c445 51 }
T 52
53 input[type="text"]:focus,
54 input[type="password"]:focus,
55 input.button:focus,
e19229 56 textarea:focus {
e7c445 57     border-color: #4787b1;
T 58     box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
59     -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
60     -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
61     -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
62a618 62     outline: none;
e7c445 63 }
T 64
65 input.placeholder,
66 textarea.placeholder {
67     color: #aaa;
68 }
b1fa1a 69
543ccb 70 .bold {
T 71     font-weight: bold;
72 }
b1fa1a 73
T 74 /*** buttons ***/
e7c445 75
T 76 input.button {
28e18c 77     display: inline-block;
T 78     margin: 0 2px;
188634 79     padding: 2px 5px;
28e18c 80     color: #525252;
74d4c7 81     text-shadow: 0px 1px 1px #fff;
28e18c 82     border: 1px solid #c0c0c0;
T 83     border-radius: 4px;
84     background: #f7f7f7;
85     background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
86     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6));
87     background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
88     background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
89     background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
68e13c 90     box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
T 91     -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
92     -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
93     -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
28e18c 94     text-decoration: none;
bab043 95     outline: none;
28e18c 96 }
T 97
98 .formbuttons input.button {
e19229 99     color: #ddd;
e7c445 100     font-size: 110%;
74d4c7 101     text-shadow: 0px 1px 1px #333;
e7c445 102     padding: 4px 12px;
28e18c 103     border-color: #465864;
e7c445 104     border-radius: 5px;
T 105     background: #7a7b7d;
68e13c 106     background: -moz-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* FF3.6+ */
T 107     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(100%,#606060)); /* Chrome,Safari4+ */
108     background: -o-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* Opera 11.10+ */
109     background: -ms-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* IE10+ */
110     background: linear-gradient(top, #7b7b7b 0%, #606060 100%); /* W3C */
74d4c7 111     box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
T 112     -o-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
113     -webkit-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
114     -moz-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
e7c445 115 }
T 116
bab043 117 .formbuttons input.button:hover,
4f1b7a 118 .formbuttons input.button:focus,
T 119 input.button.mainaction:hover,
120 input.button.mainaction:focus {
e19229 121     color: #f2f2f2;
188634 122     border-color: #465864;
74d4c7 123     box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888;
T 124     -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888;
125     -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888;
126     -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888;
e7c445 127 }
T 128
28e18c 129 .formbuttons input.button:active {
e7c445 130     color: #fff;
68e13c 131     background: -moz-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
T 132     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(100%,#7b7b7b));
133     background: -o-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
134     background: -ms-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
135     background: linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
e7c445 136 }
T 137
138 input.button.mainaction {
139     color: #ededed;
4f1b7a 140     text-shadow: 0px 1px 1px #333;
e7c445 141     border-color: #1f262c;
T 142     background: #505050;
68e13c 143     background: -moz-linear-gradient(top, #505050 0%, #2a2e31 100%);
T 144     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(100%,#2a2e31));
145     background: -o-linear-gradient(top, #505050 0%, #2a2e31 100%);
146     background: -ms-linear-gradient(top, #505050 0%, #2a2e31 100%);
147     background: linear-gradient(top, #505050 0%, #2a2e31 100%);
4f1b7a 148     box-shadow: inset 0 1px 0 0 #777;
T 149     -moz-box-shadow: inset 0 1px 0 0 #777;
150     -webkit-box-shadow: inset 0 1px 0 0 #777;
151     -o-box-shadow: inset 0 1px 0 0 #777;
e7c445 152 }
T 153
b1fa1a 154 input.button.mainaction:active {
T 155     color: #fff;
74d4c7 156     background: #515151;
68e13c 157     background: -moz-linear-gradient(top, #2a2e31 0%, #505050 100%);
T 158     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2e31), color-stop(100%,#505050));
159     background: -o-linear-gradient(top, #2a2e31 0%, #505050 100%);
160     background: -ms-linear-gradient(top, #2a2e31 0%, #505050 100%);
161     background: linear-gradient(top, #2a2e31 0%, #505050 100%);
b1fa1a 162 }
T 163
e7c445 164 input.button[disabled],
T 165 input.button[disabled]:hover,
166 input.button.mainaction[disabled] {
167     color: #aaa !important;
168 }
169
170 input.mainaction {
171     font-weight: bold;
172 }
173
b1fa1a 174 /** link buttons **/
T 175
176 a.button {
177     display: inline-block;
a4be51 178     margin: 0 2px;
b1fa1a 179     padding: 2px 5px;
T 180     color: #525252;
74d4c7 181     text-shadow: 0px 1px 1px #fff;
a4be51 182     border: 1px solid #c6c6c6;
b1fa1a 183     border-radius: 4px;
T 184     background: #f7f7f7;
185     background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
186     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6));
187     background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
188     background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
189     background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
68e13c 190     box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
T 191     -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
192     -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
193     -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
b1fa1a 194     text-decoration: none;
e7c445 195 }
T 196
68e13c 197 a.button:focus,
bab043 198 input.button:focus {
188634 199     border-color: #4fadd5;
T 200     box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
201     -moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
202     -webkit-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
203     -o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
68e13c 204     outline: none;
188634 205 }
T 206
74d4c7 207 label.disabled,
b1fa1a 208 a.button.disabled {
T 209     color: #999;
e7c445 210 }
T 211
188634 212 a.button.disabled,
T 213 input.button.disabled,
214 input.button[disabled],
215 a.button.disabled:hover,
216 input.button.disabled:hover,
217 input.button[disabled]:hover {
218     border-color: #c6c6c6;
68e13c 219     box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
T 220     -o-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
221     -webkit-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
222     -moz-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
188634 223 }
T 224
b1fa1a 225 a.button.disabled span.inner {
T 226     opacity: 0.4;
d5fedc 227     filter: alpha(opacity=40);
e7c445 228 }
b1fa1a 229
c7dcb3 230 a.button.pressed,
28e18c 231 a.button:active,
T 232 input.button:active {
b1fa1a 233     background: #e6e6e6;
T 234     background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
235     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#f9f9f9));
236     background: -o-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
237     background: -ms-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
238     background: linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
239 }
240
a4be51 241 .pagenav.dark a.button {
b1fa1a 242     font-weight: bold;
T 243     border-color: #e6e6e6;
071c78 244     background: #d8d8d8;
b1fa1a 245     background: -moz-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
T 246     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#bababa));
247     background: -o-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
248     background: -ms-linear-gradient(top, #d8d8d8 0%, #bababa 100%);
249     background: linear-gradient(top, #d8d8d8 0%, #bababa 100%);
a4be51 250     box-shadow: 0 1px 1px 0 #999;
T 251     -o-box-shadow: 0 1px 1px 0 #999;
252     -webkit-box-shadow: 0 1px 1px 0 #999;
253     -moz-box-shadow: 0 1px 1px 0 #999;
b1fa1a 254 }
T 255
a4be51 256 .pagenav.dark a.button.pressed {
b1fa1a 257     background: #bababa;
T 258     background: -moz-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
259     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#d8d8d8));
260     background: -o-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
261     background: -ms-linear-gradient(top, #bababa 0%, #d8d8d8 100%);
262     background: linear-gradient(top, #bababa 0%, #d8d8d8 100%);
263 }
264
b540ed 265 .pagenav a.button {
T 266     padding: 1px 3px;
68e13c 267     height: 16px;
becca0 268     vertical-align: middle;
b540ed 269 }
T 270
b1fa1a 271 .pagenav a.button span.inner {
T 272     display: inline-block;
b540ed 273     width: 16px;
T 274     height: 13px;
c7dcb3 275     text-indent: 1000px;
T 276     overflow: hidden;
b540ed 277     background: url(images/buttons.png) -6px -211px no-repeat;
b1fa1a 278 }
T 279
280 .pagenav a.prevpage span.inner {
b540ed 281     background-position: -7px -226px;
b1fa1a 282 }
T 283
284 .pagenav a.nextpage span.inner {
b540ed 285     background-position: -28px -226px;
b1fa1a 286 }
T 287
288 .pagenav a.lastpage span.inner {
b540ed 289     background-position: -28px -211px;
T 290 }
291
292 .pagenav a.pageup span.inner {
af05fe 293     background-position: -7px -241px;
b540ed 294 }
T 295
296 .pagenav a.pagedown span.inner {
af05fe 297     background-position: -29px -241px;
T 298 }
299
300 .pagenav a.reply span.inner {
301     background-position: -7px -256px;
302 }
303
304 .pagenav a.forward span.inner {
b540ed 305     background-position: -29px -256px;
T 306 }
307
af05fe 308 .pagenav a.replyall span.inner {
b540ed 309     background-position: -7px -271px;
T 310 }
311
312 .pagenav a.extwin span.inner {
313     background-position: -29px -271px;
b1fa1a 314 }
T 315
316 .pagenav .countdisplay {
317     display: inline-block;
847d31 318     padding:0 1em;
74d4c7 319     text-shadow: 0px 1px 1px #fff;
847d31 320     min-width: 16em;
becca0 321 }
T 322
323 .pagenavbuttons {
324     position: relative;
325     top: -2px;
b1fa1a 326 }
T 327
328 a.iconbutton {
329     display: inline-block;
330     width: 24px;
331     height: 18px;
332     text-decoration: none;
a4be51 333     text-indent: -1000px;
b1fa1a 334     background: url(images/buttons.png) -1000px 0 no-repeat;
T 335 }
336
918bb9 337 a.iconbutton.disabled {
T 338     opacity: 0.4;
d5fedc 339     filter: alpha(opacity=40);
918bb9 340     cursor: default;
T 341 }
342
b1fa1a 343 a.iconbutton.searchoptions {
74d4c7 344     background-position: -2px -317px;
b1fa1a 345 }
T 346
347 a.iconbutton.reset {
74d4c7 348     background-position: -25px -317px;
b1fa1a 349 }
T 350
74d4c7 351 a.iconbutton.cancel {
T 352     background-position: -7px -377px;
353 }
354
355 a.iconlink {
356     display: inline-block;
357     color: #888;
358     text-decoration: none;
071c78 359     white-space: nowrap;
74d4c7 360     padding: 2px 8px 2px 20px;
T 361     background: url(images/buttons.png) -1000px 0 no-repeat;
362 }
363
364 a.iconlink:hover {
365     text-decoration: underline;
366 }
367
68e13c 368 a.iconlink.delete {
T 369     background-position: -7px -337px;
370 }
371
74d4c7 372 a.iconlink.add {
T 373     background-position: -7px -357px;
374 }
375
68e13c 376 a.iconlink.remove {
5ff7ba 377     background-position: -7px -378px;
68e13c 378 }
T 379
380 a.iconlink.cancel {
74d4c7 381     background-position: -7px -397px;
T 382 }
bab043 383
68e13c 384 a.iconlink.edit {
T 385     background-position: -7px -417px;
386 }
387
388 a.iconlink.upload {
389     background-position: -6px -437px;
bab043 390 }
T 391
b1fa1a 392
T 393 /*** message bar ***/
e7c445 394
T 395 #message div.loading,
396 #message div.warning,
397 #message div.error,
398 #message div.notice,
c7dcb3 399 #message div.confirmation,
T 400 #message-objects div.notice {
e7c445 401     color: #555;
T 402     font-weight: bold;
b540ed 403     padding: 6px 30px 6px 25px;
e7c445 404     display: inline-block;
T 405     white-space: nowrap;
406     background: url(images/messages.png) 0 5px no-repeat;
b1fa1a 407     cursor: default;
e7c445 408 }
T 409
410 #message div.warning {
411     color: #960;
543ccb 412     background-position: 0 -86px;
e7c445 413 }
T 414
415 #message div.error {
416     color: #cf2734;
417     background-position: 0 -55px;
418 }
419
420 #message div.confirmation {
421     color: #093;
543ccb 422     background-position: 0 -25px;
e7c445 423 }
T 424
425 #message div.loading {
426     background: url(images/ajaxloader.gif) 2px 6px no-repeat;
b1fa1a 427 }
T 428
ff4c18 429 #message div a,
T 430 #message div span {
431     padding-right: 0.5em;
432     text-decoration: none;
433 }
434
435 #message div a:hover {
436     text-decoration: underline;
437     cursor: pointer;
438 }
439
b1fa1a 440 #message.statusbar {
T 441     position: absolute;
442     bottom: 0;
443     left: 0;
444     right: 0;
445     height: 27px;
446     padding-left: 8px;
447     border-top: 1px solid #ddd;
448     border-radius: 0 0 4px 4px;
449     background: #eaeaea;
450     background: -moz-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
451     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#c8c8c8));
452     background: -o-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
453     background: -ms-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
454     background: linear-gradient(top, #eaeaea 0%, #c8c8c8 100%);
b540ed 455     white-space: nowrap;
T 456     overflow: hidden;
457     text-overflow: ellipsis;
e7c445 458 }
T 459
0e530b 460 .ui-dialog.error .ui-dialog-title,
T 461 .ui-dialog.warning .ui-dialog-title,
462 .ui-dialog.confirmation .ui-dialog-title {
463     padding-left: 25px;
464     background: url(images/messages.png) 0 5px no-repeat;
465     text-shadow: 0 1px 1px #fff;
466 }
467
468 .ui-dialog.warning .ui-dialog-title {
469     color: #960;
470     background-position: 0 -90px;
471 }
472
473 .ui-dialog.error .ui-dialog-title {
474     color: #cf2734;
475     background-position: 0 -60px;
476 }
477
478 .ui-dialog.confirmation .ui-dialog-title {
479     color: #093;
480     background-position: 0 -30px;
481 }
482
483 .ui-dialog.popupmessage .ui-dialog-titlebar {
484     padding: 8px 1em 4px 1em;
485     background: #e3e3e3;
486     background: -moz-linear-gradient(top, #e3e3e3 0%, #cfcfcf 100%);
487     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e3e3), color-stop(100%,#cfcfcf));
488     background: -o-linear-gradient(top, #e3e3e3 0%, #cfcfcf 100%);
489     background: -ms-linear-gradient(top, #e3e3e3 0%, #cfcfcf 100%);
490     background: linear-gradient(top, #e3e3e3 0%, #cfcfcf 100%);
491 }
492
493 .ui-dialog.popupmessage .ui-widget-content {
494     font-size: 12px;
495     background: #eee;
496     background: -moz-linear-gradient(top, #eee 0%, #dcdcdc 100%);
497     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#dcdcdc));
498     background: -o-linear-gradient(top, #eee 0%, #dcdcdc 100%);
499     background: -ms-linear-gradient(top, #eee 0%, #dcdcdc 100%);
500     background: linear-gradient(top, #eee 0%, #dcdcdc 100%);
501 }
502
e7c445 503
T 504 /*** basic page layout ***/
505
506 #topline {
507     height: 18px;
508     background: url(images/linen_header.jpg) repeat #666;
509     border-bottom: 1px solid #4f4f4f;
510     padding: 2px 0 2px 10px;
511     color: #aaa;
512 }
513
514 #topnav {
515     height: 46px;
516     margin-bottom: 10px;
517     padding: 0 0 0 10px;
071c78 518     background: #111;
d5fedc 519     background: -moz-linear-gradient(top, #404040 0%, #060606 100%);
T 520     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#060606));
521     background: -o-linear-gradient(top, #404040 0%, #060606 100%);
522     background: -ms-linear-gradient(top, #404040 0%, #060606 100%);
523     background: linear-gradient(top, #404040 0%, #060606 100%);
e7c445 524 }
T 525
526 #topline a,
527 #topnav a {
528     color: #eee;
529     text-decoration: none;
530 }
531
12bf0f 532 #topline a:hover {
c7dcb3 533     text-decoration: underline;
T 534 }
535
e7c445 536 #toplogo {
T 537     padding-top: 2px;
538 }
539
540 .topleft {
541     float: left;
542 }
543
544 .topright {
545     float: right;
c7dcb3 546 }
T 547
548 .closelink {
549     display: inline-block;
550     padding: 2px 10px 2px 20px;
e7c445 551 }
T 552
553 #topline span.username {
554     padding-right: 1em;
555 }
556
e19229 557 #topline .topleft a {
e7c445 558     display: inline-block;
e19229 559     padding: 2px 0.8em 0 0;
T 560     color: #aaa;
e7c445 561 }
T 562
563 #topline a.button-logout {
564     display: inline-block;
565     padding: 2px 10px 2px 20px;
b1fa1a 566     background: url(images/buttons.png) -6px -193px no-repeat;
e7c445 567     color: #fff;
T 568 }
c7dcb3 569
e7c445 570
b1fa1a 571 /*** taskbar ***/
T 572
e7c445 573 #taskbar a {
b1fa1a 574     display: inline-block;
T 575     height: 34px;
576     padding: 12px 10px 0 6px;
577 }
578
579 #taskbar a span.button-inner {
e7c445 580     display: inline-block;
T 581     font-size: 110%;
582     font-weight: normal;
74d4c7 583     text-shadow: 0px 1px 1px black;
b1fa1a 584     padding: 5px 0 0 34px;
T 585     height: 19px;
586     background: url(images/buttons.png) -1000px 0 no-repeat;
e7c445 587 }
T 588
589 #taskbar a.button-selected {
590     color: #3cf;
591     background-color: #2c2c2c;
592 }
593
b1fa1a 594 #taskbar a.button-mail span.button-inner {
T 595     background-position: 0 2px;
e7c445 596 }
T 597
b1fa1a 598 #taskbar a.button-mail:hover span.button-inner,
T 599 #taskbar a.button-mail.button-selected span.button-inner {
600     background-position: 0 -22px;
e7c445 601 }
T 602
b1fa1a 603 #taskbar a.button-addressbook span.button-inner {
T 604     background-position: 0 -48px;
e7c445 605 }
T 606
b1fa1a 607 #taskbar a.button-addressbook:hover span.button-inner,
T 608 #taskbar a.button-addressbook.button-selected span.button-inner {
609     background-position: 0 -72px;
e7c445 610 }
T 611
b1fa1a 612 #taskbar a.button-settings span.button-inner {
T 613     background-position: 0 -96px;
e7c445 614 }
T 615
b1fa1a 616 #taskbar a.button-settings:hover span.button-inner,
T 617 #taskbar a.button-settings.button-selected span.button-inner {
618     background-position: 0 -120px;
e7c445 619 }
T 620
b1fa1a 621 #taskbar a.button-calendar span.button-inner {
T 622     background-position: 0 -144px;
e7c445 623 }
T 624
b1fa1a 625 #taskbar a.button-calendar:hover span.button-inner,
T 626 #taskbar a.button-calendar.button-selected span.button-inner {
627     background-position: 0 -168px;
e7c445 628 }
T 629
630 #mainscreen {
631     position: absolute;
632     top: 88px;
633     left: 10px;
634     right: 10px;
635     bottom: 20px;
b1fa1a 636 }
T 637
638 #mainscreen.offset {
639     top: 130px;
e7c445 640 }
T 641
68e13c 642 #mainscreen .offset {
T 643     margin-top: 42px;
644 }
645
e7c445 646 .uibox {
T 647     border: 1px solid #a3a3a3;
648     border-radius: 4px;
649     box-shadow: 0 0 2px #999;
650     -o-box-shadow: 0 0 2px #999;
651     -webkit-box-shadow: 0 0 2px #999;
652     -moz-box-shadow: 0 0 2px #999;
653     background: #fff;
654 }
655
e19229 656 .scroller {
T 657     overflow: auto;
658 }
659
660 .readtext {
661     width: 42em;
662     padding: 12px;
68e13c 663     font-size: 12px;
e19229 664 }
T 665
666 .readtext > h1,
667 .readtext > h2,
668 .readtext > h3 {
669     margin-top: 0;
670 }
671
672 .watermark {
673     background-image: url(images/watermark.jpg);
674     background-position: center;
675     background-repeat: no-repeat;
676 }
677
b1fa1a 678 /*** lists ***/
T 679
e7c445 680 .listbox {
T 681     background: #d9ecf4;
b1fa1a 682     overflow: hidden;
T 683 }
684
685 .listbox .scroller {
686     position: absolute;
687     top: 0;
688     left: 0;
689     width: 100%;
690     bottom: 0;
691     overflow: auto;
692 }
693
e19229 694 .listbox .scroller.withfooter {
c7dcb3 695     bottom: 42px;
T 696 }
697
b1fa1a 698 .listbox .boxtitle + .scroller {
T 699     top: 34px;
700 }
701
702 .boxtitle,
703 .uibox .listing thead td {
704     font-size: 12px;
705     font-weight: bold;
ad726a 706     padding: 10px 8px 3px 8px;
T 707     height: 20px;  /* doesn't affect table-cells in FF */
b1fa1a 708     margin: 0;
74d4c7 709     text-shadow: 0px 1px 1px #fff;
b1fa1a 710     border-bottom: 1px solid #bbd3da;
918bb9 711     white-space: nowrap;
ad726a 712 }
T 713
714 .uibox .listing thead td {
715     padding-bottom: 8px;
716     height: auto;
b1fa1a 717 }
T 718
719 .uibox .boxtitle,
720 .uibox .listing thead td {
721     background: #b0ccd7;
722     color: #004458;
723     border-radius: 4px 4px 0 0;
724 }
725
726 .listbox .listitem,
28e18c 727 .listbox .tablink,
b1fa1a 728 .listing tbody td,
T 729 .listing li {
730     display: block;
731     border-top: 1px solid #fff;
732     border-bottom: 1px solid #bbd3da;
733     cursor: default;
734     font-weight: normal;
735 }
736
737 .listbox .listitem a,
28e18c 738 .listbox .tablink a,
b1fa1a 739 .listing tbody td,
T 740 .listing li a {
741     display: block;
742     color: #376572;
74d4c7 743     text-shadow: 0px 1px 1px #fff;
b1fa1a 744     text-decoration: none;
T 745     cursor: default;
cdb955 746     padding: 6px 8px 2px 8px;
ad726a 747     height: 17px; /* doesn't affect table-cells in FF */
e19229 748     white-space: nowrap;
b540ed 749 }
T 750
751 .listing tbody td {
752     display: table-cell;
ad726a 753     padding-bottom: 5px;
T 754     height: auto;
071c78 755     min-height: 14px;
T 756 }
757
758 .webkit .listing tbody td {
759     height: 14px;
b1fa1a 760 }
T 761
762 .listbox .listitem.selected,
28e18c 763 .listbox .tablink.selected,
12bf0f 764 .listbox .listitem.selected > a,
T 765 .listbox .tablink.selected > a,
7961f8 766 .listing tbody tr.unfocused td,
b1fa1a 767 .listing tbody tr.selected td,
68e13c 768 .listing li.selected,
12bf0f 769 .listing li.selected > a {
b1fa1a 770     color: #004458;
T 771     font-weight: bold;
772 }
773
774 ul.listing {
775     display: block;
776     list-style: none;
777     margin: 0;
778     padding: 0;
28e18c 779 }
T 780
781 ul.listing li {
782     background-color: #d9ecf4;
783 }
784
b540ed 785 ul.listing li.droptarget,
T 786 table.listing tr.droptarget td {
28e18c 787     background-color: #c7e3ef;
b1fa1a 788 }
T 789
74d4c7 790 table.listing,
T 791 table.layout {
792     border: 0;
b1fa1a 793     width: 100%;
879b05 794     border-spacing: 0;
74d4c7 795 }
T 796
797 table.layout td {
798     vertical-align: top;
c7dcb3 799 }
T 800
801 .listbox .boxfooter {
802     position: absolute;
803     bottom: 0;
804     left: 0;
805     width: 100%;
806     height: 42px;
807     border-top: 1px solid #ccdde4;
808     background: #d9ecf4;
809     -webkit-box-shadow: inset 0 1px 0 0 #fff;
810     -moz-box-shadow: inset 0 1px 0 0 #fff;
811     box-shadow: inset 0 1px 0 0 #fff;
68e13c 812     white-space: nowrap;
T 813     overflow: hidden;
c7dcb3 814 }
T 815
816 .boxfooter .listbutton {
817     display: inline-block;
818     text-decoration: none;
819     width: 48px;
820     border-right: 1px solid #fff;
821     background: #c7e3ef;
822     padding: 3px 0;
823     margin-top: 1px;
824 }
825
826 .boxfooter .listbutton .inner {
827     display: inline-block;
828     width: 48px;
829     height: 35px;
830     text-indent: -1000px;
831     background: url(images/buttons.png) -1000px 0 no-repeat;
832 }
833
e19229 834 .boxfooter .listbutton.add .inner {
b9441a 835     background-position: 10px -1301px;
bab043 836 }
T 837
838 .boxfooter .listbutton.delete .inner {
b9441a 839     background-position: 10px -1342px;
e19229 840 }
T 841
c7dcb3 842 .boxfooter .listbutton.groupactions .inner {
b9441a 843     background-position: 5px -1382px;
68e13c 844 }
T 845
c6db4a 846 .boxfooter .listbutton.addto .inner {
T 847     background-position: 5px -1422px;
848 }
849
850 .boxfooter .listbutton.addcc .inner {
851     background-position: 5px -1462px;
852 }
853
854 .boxfooter .listbutton.addbcc {
855     width: 54px;
856 }
857
858 .boxfooter .listbutton.addbcc .inner {
859     width: 54px;
860     background-position: 2px -1502px;
861 }
862
1ba07f 863 .boxfooter .listbutton.removegroup .inner {
T 864     background-position: 5px -1540px;
865 }
866
68e13c 867 .boxfooter .listbutton.disabled .inner {
T 868     opacity: 0.4;
d5fedc 869     filter: alpha(opacity=40);
68e13c 870 }
T 871
872 .boxfooter .countdisplay {
873     display: inline-block;
874     position: relative;
875     top: 10px;
876     color: #69929e;
877     padding: 3px 6px;
878 }
879
880 .boxpagenav {
881     position: absolute;
882     top: 10px;
883     right: 6px;
884     width: auto;
885 }
886
887 .boxpagenav a.icon {
888     display: inline-block;
889     padding: 1px 3px;
890     height: 13px;
891     width: 14px;
892     text-indent: 1000px;
becca0 893     vertical-align: bottom;
68e13c 894     overflow: hidden;
T 895     background: url(images/buttons.png) -4px -286px no-repeat;
896 }
897
898 .boxpagenav a.icon.prevpage {
899     background-position: -4px -301px;
900 }
901
902 .boxpagenav a.icon.nextpage {
903     background-position: -28px -301px;
904 }
905
906 .boxpagenav a.icon.lastpage {
907     background-position: -28px -286px;
908 }
909
910 .boxpagenav a.icon.disabled {
911     opacity: 0.4;
d5fedc 912     filter: alpha(opacity=40);
b1fa1a 913 }
T 914
e19229 915 .centerbox {
T 916     width: 40em;
68e13c 917     margin: 16px auto;
e19229 918 }
T 919
920 .errorbox {
921     width: 40em;
922     padding: 20px;
923 }
924
925 .errorbox h3 {
15f48a 926     font-size: 16px;
T 927     margin-top: 0;
928 }
e19229 929
b1fa1a 930
68e13c 931 /*** Records table ***/
T 932
933 table.records-table {
934     display: table;
935     width: 100%;
936     table-layout: fixed;
937     border-collapse: collapse;
938     border-spacing: 0;
939     border: 1px solid #bbd3da;
940 }
941
942 .boxlistcontent .records-table {
943     border: 0;
944 }
945
946 .records-table thead td {
947     color: #69939e;
948     font-size: 11px;
949     font-weight: bold;
950     background: #d6eaf3;
951     background: -moz-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
071c78 952     background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(8%,#d6eaf3), color-stop(100%,#d6eaf3));
68e13c 953     background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
T 954     background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%);
955     background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
956     border-left: 1px solid #bbd3da;
957     padding: 8px 7px;
ec3181 958     overflow: hidden;
A 959     text-overflow: ellipsis;
68e13c 960 }
T 961
962 .records-table.sortheader thead td {
963     padding: 0;
964 }
965
966 .records-table thead td a,
967 .records-table thead td span {
968     display: block;
cdb955 969     padding: 7px 7px;
68e13c 970     color: #69939e;
T 971     text-decoration: none;
ec3181 972     overflow: hidden;
A 973     text-overflow: ellipsis;
68e13c 974 }
T 975
976 .records-table tbody td {
cdb955 977     padding: 2px 7px;
68e13c 978     border-bottom: 1px solid #ddd;
T 979     border-left: 1px dotted #bbd3da;
980     white-space: nowrap;
981     cursor: default;
982     overflow: hidden;
983     text-overflow: ellipsis;
984     background-color: #fff;
985 }
986
987 .records-table thead tr td:first-child,
988 .records-table tbody tr td:first-child {
989     border-left: 0;
990 }
991
992 .records-table tr.selected td {
993     color: #fff !important;
994     background: #019bc6;
995     background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%);
996     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4));
997     background: -o-linear-gradient(top, #019bc6 0%, #017cb4 100%);
998     background: -ms-linear-gradient(top, #019bc6 0%, #017cb4 100%);
999     background: linear-gradient(top, #019bc6 0%, #017cb4 100%);
1000 }
1001
1002 .records-table tr.selected td a,
1003 .records-table tr.selected td span {
1004     color: #fff !important;
1005 }
1006
1007 .records-table tr.unfocused td {
1008     color: #fff !important;
1009     background: #4db0d2;
1010 }
1011
1012 .records-table tr.unfocused td a,
1013 .records-table tr.unfocused td span {
1014     color: #fff !important;
1015 }
1016
1017 .records-table tr.deleted td,
1018 .records-table tr.deleted td a {
1019     color: #ccc !important;
1020 }
1021
1022
b1fa1a 1023 /*** iFrames ***/
68e13c 1024
T 1025 #aboutframe {
1026     width: 97%;
1027     height: 100%;
1028     border: 0;
1029     padding: 0;
1030 }
b1fa1a 1031
T 1032 body.iframe {
1033     background: #fff;
68e13c 1034     margin: 38px 0 10px 0;
T 1035 }
1036
1037 body.iframe.footerbuttons {
1038     margin-bottom: 42px;
b540ed 1039 }
T 1040
1041 body.iframe.fullheight {
1042     margin: 0;
b1fa1a 1043 }
T 1044
e19229 1045 .contentbox .boxtitle,
b1fa1a 1046 body.iframe .boxtitle {
T 1047     color: #777;
1048     background: #eee;
1049     background: -moz-linear-gradient(top, #eee 0%, #dfdfdf 100%);
1050     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#dfdfdf));
1051     background: -o-linear-gradient(top, #eee 0%, #dfdfdf 100%);
1052     background: -ms-linear-gradient(top, #eee 0%, #dfdfdf 100%);
1053     background: linear-gradient(top, #eee 0%, #dfdfdf 100%);
1054     border-bottom: 1px solid #ccc;
1055 }
1056
e19229 1057 body.iframe .boxtitle {
T 1058     position: fixed;
1059     top: 0;
1060     left: 0;
1061     width: 100%;
bab043 1062     z-index: 100;
68e13c 1063 }
T 1064
1065 body.iframe .footerbuttons {
1066     position: fixed;
1067     left: 0;
1068     bottom: 0;
1069     width: 100%;
1070     z-index: 110;
1071     background: #fff;
1072     padding: 8px;
e19229 1073 }
T 1074
b1fa1a 1075 .boxcontent {
T 1076     padding: 10px;
e19229 1077 }
T 1078
1079 .contentbox .scroller {
1080     position: absolute;
1081     top: 34px;
1082     left: 0;
1083     right: 0;
1084     bottom: 28px;
1085     overflow: auto;
b1fa1a 1086 }
T 1087
1088 .footerleft {
1089     padding: 0 12px;
1090 }
1091
1092 .propform fieldset {
1093     margin-bottom: 20px;
1094     border: 0;
1095     padding: 0;
1096 }
1097
1098 .propform fieldset legend {
1099     display: block;
1100     font-size: 14px;
1101     font-weight: bold;
b540ed 1102     padding-bottom: 10px;
T 1103     margin-bottom: 0;
1104 }
1105
1106 .propform fieldset fieldset legend {
1107     color: #666;
1108     font-size: 12px;
b1fa1a 1109 }
T 1110
74d4c7 1111 fieldset.floating {
T 1112     float: left;
1113     margin-right: 10px;
1114     margin-bottom: 10px;
1115 }
1116
b1fa1a 1117 table.propform {
T 1118     width: 100%;
1119     border-spacing: 0;
1120     border-collapse: collapse;
1121 }
1122
74d4c7 1123 ul.proplist li,
b1fa1a 1124 table.propform td {
T 1125     width: 80%;
1126     padding: 4px 10px;
1127     background: #eee;
1128     border-bottom: 2px solid #fff;
1129 }
1130
1131 table.propform td.title {
1132     width: 20%;
1133     color: #333;
1134     padding-right: 20px;
1135     white-space: nowrap;
e19229 1136 }
T 1137
1138 table.propform .mceLayout td {
1139     padding: 0;
1140     border-bottom: 0;
74d4c7 1141 }
T 1142
1143 ul.proplist {
1144     list-style: none;
1145     margin: 0;
1146     padding: 0;
1147 }
1148
1149 ul.proplist li {
1150     width: auto;
e7c445 1151 }
T 1152
4f1b7a 1153 #pluginbody {
T 1154     position: absolute;
1155     top: 0;
1156     left: 0;
1157     right: 0;
1158     bottom: 0;
1159 }
1160
e7c445 1161
T 1162 /*** Login form ***/
1163
1164 #login-form {
1165     position: relative;
1166     width: 580px;
1167     margin: 20ex auto 2ex auto;
1168 }
1169
1170 #login-form .box-inner {
1171     width: 430px;
1172     background: url(images/linen_login.jpg) top left no-repeat #5c5c5c;
1173     margin: 0 50px;
1174     padding: 10px 24px 24px 24px;
1175     border: 1px solid #333;
1176     border-radius: 5px;
1177     box-shadow: inset 0 0 1px #ccc;
1178     -o-box-shadow: inset 0 0 1px #ccc;
1179     -webkit-box-shadow: inset 0 0 1px #ccc;
1180     -moz-box-shadow: inset 0 0 1px #ccc;
1181 }
1182
1183 #login-form .box-bottom {
1184     background: url(images/login_shadow.png) top center no-repeat;
1185     margin-top: -3px;
1186     padding-top: 10px;
1187 }
1188
1189 #login-form td.input {
4dbc96 1190     width: 80%;
e7c445 1191     padding: 8px;
T 1192 }
1193
1194 #login-form input[type="text"],
1195 #login-form input[type="password"] {
4dbc96 1196     width: 100%;
b1fa1a 1197     border-color: #666;
e7c445 1198 }
T 1199
1200 #login-form input.button {
1201     color: #444;
74d4c7 1202     text-shadow: 0px 1px 1px #fff;
e7c445 1203     border-color: #f9f9f9;
T 1204     background: #f9f9f9;
d5fedc 1205     background: -moz-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%);
T 1206     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e2e2e2));
1207     background: -o-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%);
1208     background: -ms-linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%);
1209     background: linear-gradient(top, #f9f9f9 0%, #e2e2e2 100%);
af05fe 1210     box-shadow: inset 0 1px 0 0 #fff;
T 1211     -moz-box-shadow: inset 0 1px 0 0 #fff;
1212     -webkit-box-shadow: inset 0 1px 0 0 #fff;
1213     -o-box-shadow: inset 0 1px 0 0 #fff;
1214 }
1215
bab043 1216 #login-form input.button:hover,
T 1217 #login-form input.button:focus {
1218     box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff;
1219     -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff;
1220     -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff;
1221     -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff;
e7c445 1222 }
T 1223
1224 #login-form input.button:active {
1225     color: #333;
d5fedc 1226     background: -moz-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%);
T 1227     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#f9f9f9));
1228     background: -o-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%);
1229     background: -ms-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%);
1230     background: linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%);
e7c445 1231 }
T 1232
4dbc96 1233 #login-form form table {
T 1234     width: 98%;
1235 }
1236
e7c445 1237 #login-form td.title {
4dbc96 1238     width: 20%;
T 1239     white-space: nowrap;
e7c445 1240     color: #cecece;
74d4c7 1241     text-shadow: 0px 1px 1px black;
e7c445 1242     text-align: right;
T 1243     padding-right: 1em;
1244 }
1245
264476 1246 #login-form p.formbuttons {
e7c445 1247     margin-top: 2em;
T 1248     text-align: center;
1249 }
1250
1251 #login-form #logo {
1252     margin-bottom: 20px;
1253 }
1254
1255 #login-form #message {
1256     min-height: 40px;
1257     padding: 5px 25px;
a1f855 1258     text-align: center;
e7c445 1259 }
T 1260
1261 #login-form #message div {
a1f855 1262     display: inline-block;
A 1263     padding-right: 0;
e7c445 1264 }
T 1265
1266 #bottomline {
1267     font-size: 90%;
1268     text-align: center;
1269     margin-top: 2em;
1270 }
1271
b1fa1a 1272
T 1273
1274 /*** quicksearch **/
1275
1276 #quicksearchbar {
1277     width: 100%;
1278 }
1279
1280 #quicksearchbar input {
1281     width: 176px;
879b05 1282     margin: 0;
b1fa1a 1283     padding: 5px 26px 5px 38px;
T 1284     background: #f1f1f1;
1285     border-color: #a3a3a3;
879b05 1286     font-weight: bold;
b1fa1a 1287 }
T 1288
1289 #quicksearchbar #searchmenulink {
1290     position: absolute;
1291     top: 5px;
1292     left: 8px;
1293 }
1294
1295 #quicksearchbar #searchreset {
1296     position: absolute;
1297     top: 4px;
13ed1e 1298     right: 3px;
b1fa1a 1299 }
13ed1e 1300
T 1301
1302 /*** toolbar ***/
1303
1304 .toolbar a.button {
1305     text-align: center;
1306     font-size: 10px;
1307     color: #555;
e19229 1308     min-width: 50px;
13ed1e 1309     max-width: 75px;
ad726a 1310     height: 13px;
13ed1e 1311     overflow: hidden;
T 1312     text-overflow: ellipsis;
1313     white-space: nowrap;
bab043 1314     padding: 28px 2px 0 2px;
74d4c7 1315     text-shadow: 0px 1px 1px #eee;
13ed1e 1316     box-shadow: none;
T 1317     -moz-box-shadow: none;
1318     -webkit-box-shadow: none;
1319     -o-box-shadow: none;
1320     background: url(images/buttons.png) -100px 0 no-repeat transparent;
1321     border: 0;
1322 }
1323
1324 .toolbar a.button.disabled {
004a08 1325     opacity: 0.4;
d5fedc 1326     filter: alpha(opacity=40);
13ed1e 1327 }
T 1328
c7dcb3 1329 .dropbutton {
T 1330     display: inline-block;
1331     position: relative;
13ed1e 1332 }
T 1333
c7dcb3 1334 .dropbutton .dropbuttontip {
T 1335     display: block;
1336     position: absolute;
186d6e 1337     right: 0;
c7dcb3 1338     top: 0;
T 1339     height: 42px;
1340     width: 18px;
543ccb 1341     background: url(images/buttons.png) 0 -1255px no-repeat;
c7dcb3 1342     cursor: pointer;
T 1343 }
1344
1345 .dropbutton .dropbuttontip:hover {
543ccb 1346     background-position: -26px -1255px;
004a08 1347 }
T 1348
1349 .dropbutton a.button.disabled + .dropbuttontip {
1350     opacity: 0.5;
d5fedc 1351     filter: alpha(opacity=50);
004a08 1352 }
T 1353
1354 .dropbutton a.button.disabled + .dropbuttontip:hover {
1355     background-position: 0 -1255px;
c7dcb3 1356 }
T 1357
186d6e 1358 .dropbutton a.button {
A 1359     margin-left: 0;
1360     padding-left: 0;
1361     margin-right: 0;
1362     padding-right: 0;
1363 }
1364
c7dcb3 1365 .toolbar a.button.back {
b9441a 1366     background-position: 0 -1216px;
c7dcb3 1367 }
T 1368
1369 .toolbar a.button.checkmail {
b9441a 1370     background-position: center -1176px;
13ed1e 1371 }
T 1372
a4be51 1373 .toolbar a.button.compose {
13ed1e 1374     background-position: center -530px;
T 1375 }
1376
a4be51 1377 .toolbar a.button.reply {
13ed1e 1378     background-position: center -570px;
c7dcb3 1379 }
T 1380
a4be51 1381 .toolbar a.button.reply-all {
186d6e 1382     min-width: 64px;
A 1383     background-position: left -610px;
a4be51 1384 }
T 1385
1386 .toolbar a.button.forward {
186d6e 1387     min-width: 64px;
A 1388     background-position: left -650px;
a4be51 1389 }
T 1390
1391 .toolbar a.button.delete {
1392     background-position: center -690px;
1393 }
1394
1395 .toolbar a.button.archive {
1396     background-position: center -730px;
1397 }
1398
1399 .toolbar a.button.junk {
1400     background-position: center -770px;
1401 }
1402
1403 .toolbar a.button.print {
1404     background-position: center -810px;
13ed1e 1405 }
T 1406
004a08 1407 .toolbar a.button.markmessage {
af5995 1408     background-position: center -1094px;
004a08 1409 }
T 1410
13ed1e 1411 .toolbar a.button.more {
a4be51 1412     background-position: center -850px;
13ed1e 1413 }
T 1414
74d4c7 1415 .toolbar a.button.attach {
T 1416     background-position: center -890px;
1417 }
1418
1419 .toolbar a.button.spellcheck {
4be86f 1420     min-width: 64px;
A 1421     background-position: left -930px;
bab043 1422 }
T 1423
675628 1424 .toolbar a.button.spellcheck.selected {
1ba07f 1425     background-position: left -1610px;
ff4c18 1426     color: #1978a1;
675628 1427 }
A 1428
004a08 1429 .toolbar a.button.insertsig {
T 1430     background-position: center -1135px;
1431 }
1432
bab043 1433 .toolbar a.button.search {
T 1434     background-position: center -970px;
1435 }
1436
1437 .toolbar a.button.import {
b9441a 1438     background-position: center -1012px;
bab043 1439 }
T 1440
1441 .toolbar a.button.export {
b9441a 1442     background-position: center -1054px;
74d4c7 1443 }
T 1444
847d31 1445 a.menuselector {
T 1446     display: inline-block;
1447     border: 1px solid #ababab;
1448     border-radius: 4px;
1449     background: #f8f8f8;
1450     background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
1451     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
1452     background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
1453     background: -ms-linear-gradient(top, #f9f9f9 0%, #dddddd 100%);
1454     background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
1455     text-decoration: none;
1456     color: #333;
1457 }
1458
1459 a.menuselector .handle {
1460     display: inline-block;
ad726a 1461     padding: 3px 32px 0 8px;
T 1462     min-height: 18px;
847d31 1463     text-shadow: 0px 1px 1px #fff;
T 1464     background: url(images/selector.png) right center no-repeat;
1465     border-radius: 4px;
1466 }
1467
1468 a.menuselector:active {
1469     background: #dddddd;
1470     background: -moz-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
1471     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#f8f8f8));
1472     background: -o-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
1473     background: -ms-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
1474     background: linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
1475     text-decoration: none;
1476 }
1477
7a32e9 1478 a.dropdownselector {
T 1479     position: absolute;
1480     z-index: 1;
1481 }
1482
1483 select.decorated {
1484     position: relative;
1485     z-index: 10;
1486     opacity: 0;
737fbe 1487     height: 22px;
7a32e9 1488     cursor: pointer;
737fbe 1489     filter: alpha(opacity=0);
T 1490     -khtml-appearance: none;
1491     -webkit-appearance: none;
7a32e9 1492 }
T 1493
1494 html.opera select.decorated {
1495     opacity: 1;
737fbe 1496     height: auto;
T 1497 }
1498
1499 select.decorated option {
1500     color: #fff;
1501     background: #444;
24dd95 1502     border: 0;
T 1503     border-top: 1px solid #5a5a5a;
1504     border-bottom: 1px solid #333;
737fbe 1505     text-shadow: 0px 1px 1px #333;
T 1506     padding: 6px 10px;
1507     outline: none;
7a32e9 1508 }
T 1509
74d4c7 1510
fe8374 1511 /*** quota indicator ***/
A 1512
1513 #quotadisplay {
1514     left: 6px;
1515     font-size: 12px;
1516     font-weight: bold;
1517     text-shadow: 0px 1px 1px #fff;
1518     padding-left: 30px;
1519     height: 18px;
1520     background: url(images/quota.png) -100px 0 no-repeat;
1521 }
1522
13ed1e 1523 /*** popup menus ***/
T 1524
74d4c7 1525 .popupmenu,
T 1526 #rcmKSearchpane {
13ed1e 1527     display: none;
c7dcb3 1528     position: absolute;
T 1529     top: 32px;
1530     left: 90px;
1531     width: auto;
1532     background: #444;
1533     border: 1px solid #999;
1534     z-index: 240;
1535     border-radius: 4px;
1536     box-shadow: 0 2px 6px 0 #333;
1537     -moz-box-shadow: 0 2px 6px 0 #333;
1538     -webkit-box-shadow: 0 2px 6px 0 #333;
1539     -o-box-shadow: 0 2px 6px 0 #333;
847d31 1540 }
T 1541
1542 .popupmenu.dropdown {
1543     border-radius: 0 0 4px 4px;
1544     border-top: 0;
13ed1e 1545 }
T 1546
74d4c7 1547 ul.toolbarmenu,
T 1548 #rcmKSearchpane ul {
c7dcb3 1549     margin: 0;
T 1550     padding: 0;
1551     list-style: none;
1552 }
13ed1e 1553
74d4c7 1554 .googie_list td,
T 1555 ul.toolbarmenu li,
1556 #rcmKSearchpane ul li {
c7dcb3 1557     color: #fff;
T 1558     white-space: nowrap;
1559     min-width: 130px;
1560     margin: 0;
1561     border-top: 1px solid #5a5a5a;
1562     border-bottom: 1px solid #333;
1563 }
13ed1e 1564
74d4c7 1565 .googie_list tr:first-child td,
737fbe 1566 ul.toolbarmenu li:first-child,
T 1567 select.decorated option:first-child {
c7dcb3 1568     border-top: 0;
T 1569 }
1570
74d4c7 1571 .googie_list tr:last-child td,
737fbe 1572 ul.toolbarmenu li:last-child,
T 1573 select.decorated option:last-child {
c7dcb3 1574     border-bottom: 0;
T 1575 }
1576
74d4c7 1577 .googie_list td span,
c7dcb3 1578 ul.toolbarmenu li a {
T 1579     display: block;
1580     color: #666;
74d4c7 1581     text-shadow: 0px 1px 1px #333;
c7dcb3 1582     text-decoration: none;
T 1583     min-height: 14px;
1584     padding: 6px 10px 6px 10px;
1585 }
1586
071c78 1587 .googie_list td span {
T 1588     padding: 3px 10px;
1589 }
1590
74d4c7 1591 .googie_list td span,
c7dcb3 1592 ul.toolbarmenu li a.active {
T 1593     color: #fff;
74d4c7 1594     cursor: default;
c7dcb3 1595 }
T 1596
74d4c7 1597 .googie_list td.googie_list_onhover,
T 1598 ul.toolbarmenu li a.active:hover,
737fbe 1599 #rcmKSearchpane ul li.selected,
T 1600 select.decorated option:hover,
1601 select.decorated option[selected='selected'] {
c7dcb3 1602     background-color: #00aad6;
T 1603     background: -moz-linear-gradient(top, #00aad6 0%, #008fc9 100%);
1604     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00aad6), color-stop(100%,#008fc9));
1605     background: -o-linear-gradient(top, #00aad6 0%, #008fc9 100%);
1606     background: -ms-linear-gradient(top, #00aad6 0%, #008fc9 100%);
1607     background: linear-gradient(top, #00aad6 0%, #008fc9 100%);
68e13c 1608 }
T 1609
4be86f 1610 ul.toolbarmenu.iconized li a,
A 1611 ul.toolbarmenu.selectable li a {
68e13c 1612     padding-left: 30px;
c7dcb3 1613 }
T 1614
4be86f 1615 ul.toolbarmenu.selectable li a.selected {
A 1616     background: url(images/messages.png) 4px -27px no-repeat;
1617 }
1618
c7dcb3 1619 ul.toolbarmenu li label {
T 1620     display: block;
1621     color: #fff;
1622     padding: 4px 8px;
74d4c7 1623     text-shadow: 0px 1px 1px #333;
T 1624 }
1625
af05fe 1626 ul.toolbarmenu li a.icon {
T 1627     color: #eee;
1628     padding: 2px 6px;
1629 }
1630
1631 ul.toolbarmenu li span.icon {
1632     display: block;
1633     min-height: 14px;
ad726a 1634     padding: 4px 4px 1px 24px;
T 1635     height: 17px;
af05fe 1636     background-image: url(images/listicons.png);
T 1637     background-position: -100px 0;
1638     background-repeat: no-repeat;
1639     opacity: 0.2;
d5fedc 1640     filter: alpha(opacity=20);
af05fe 1641 }
T 1642
1643 ul.toolbarmenu li a.active span.icon {
1644     opacity: 0.99;
d5fedc 1645     filter: alpha(opacity=100);
af05fe 1646 }
T 1647
1648 ul.toolbarmenu li span.read {
1649     background-position: 0 -1220px;
1650 }
1651
1652 ul.toolbarmenu li span.unread {
1653     background-position: 0 -1196px;
1654 }
1655
1656 ul.toolbarmenu li span.flagged {
1657     background-position: 0 -1244px;
1658 }
1659
1660 ul.toolbarmenu li span.unflagged {
1661     background-position: 0 -1268px;
1662 }
1663
847d31 1664 ul.toolbarmenu li span.mail {
T 1665     background-position: 0 -1293px;
1666 }
1667
1668 ul.toolbarmenu li span.list {
1669     background-position: 0 -1317px;
1670 }
1671
1672 ul.toolbarmenu li span.invert {
1673     background-position: 0 -1340px;
1674 }
1675
1676 ul.toolbarmenu li span.cross {
1677     background-position: 0 -1365px;
1678 }
1679
af05fe 1680 ul.toolbarmenu li span.print {
T 1681     background-position: 0 -1436px;
1682 }
1683
1684 ul.toolbarmenu li span.download {
1685     background-position: 0 -1412px;
1686 }
1687
1688 ul.toolbarmenu li span.edit {
1689     background-position: 0 -1388px;
1690 }
1691
1692 ul.toolbarmenu li span.viewsource {
1693     background-position: 0 -1460px;
1694 }
1695
1696 ul.toolbarmenu li span.extwin {
1697     background-position: 0 -1484px;
1698 }
1699
847d31 1700 ul.toolbarmenu li span.conversation {
T 1701     background-position: 0 -1532px;
1702 }
1703
74d4c7 1704 #rcmKSearchpane {
T 1705     border-radius: 0 0 4px 4px;
1706     border-top: 0;
1707 }
1708
1709 #rcmKSearchpane ul li {
1710     text-shadow: 0px 1px 1px #333;
1711     text-decoration: none;
1712     min-height: 14px;
1713     padding: 6px 10px 6px 10px;
1714     border: 0;
da042d 1715     cursor: default;
74d4c7 1716 }
T 1717
1718 .popupdialog {
1719     display: none;
1720     padding: 10px;
1721 }
1722
1723 .popupdialog .formbuttons {
1724     margin: 20px 0 4px 0;
1725 }
1726
bab043 1727 .ui-dialog .prompt input {
T 1728     display: block;
1729     margin: 8px 0;
1730 }
1731
74d4c7 1732 .hint {
T 1733     margin: 4px 0;
1734     color: #999;
1735     text-shadow: 0px 1px 1px #fff;
c7dcb3 1736 }
28e18c 1737
918bb9 1738 .splitter {
T 1739     user-select: none;
1740     -moz-user-select: none;
1741     -khtml-user-select: none;
1742     position: absolute;
1743     background: url(images/splitter.png) center no-repeat;
1744 }
1745
1746 .splitter-h {
1747     height: 10px;
1748     width: 100%;
1749     cursor: n-resize;
1750     cursor: row-resize;
1751     background-position: center 0;
1752 }
1753
1754 .splitter-v {
1755     width: 10px;
1756     height: 100%;
1757     cursor: e-resize;
1758     cursor: col-resize;
1759     background-position: 0 center;
1760 }
28e18c 1761
T 1762 #rcmdraglayer {
b540ed 1763     min-width: 260px;
28e18c 1764     width: auto !important;
b540ed 1765     width: 260px;
28e18c 1766     padding: 6px 8px;
T 1767     background: #444;
1768     border: 1px solid #555;
1769     border-radius: 4px;
1770     box-shadow: 0 2px 6px 0 #333;
1771     -moz-box-shadow: 0 2px 6px 0 #333;
1772     -webkit-box-shadow: 0 2px 6px 0 #333;
1773     -o-box-shadow: 0 2px 6px 0 #333;
1774     z-index: 250;
1775     color: #ccc;
1776     white-space: nowrap;
1777     opacity: 0.92;
d5fedc 1778     filter: alpha(opacity=92);
74d4c7 1779     text-shadow: 0px 1px 1px #333;
28e18c 1780 }
T 1781
1782 #rcmdraglayer:after {
1783     content: "";
1784     position: absolute;
1785     top: 6px;
1786     left: -6px;
1787     border-style: solid;
1788     border-width: 6px 6px 6px 0;
1789     border-color: transparent #444;
1790     /* reduce the damage in FF3.0 */
1791     display: block; 
1792     width: 0;
071c78 1793     z-index: 251;
28e18c 1794 }
T 1795
071c78 1796 .draglayercopy:before {
28e18c 1797     position: absolute;
071c78 1798     bottom: -6px;
28e18c 1799     left: -6px;
T 1800     content: " ";
071c78 1801     width: 16px;
T 1802     height: 16px;
1803     background: url(images/buttons.png) -7px -358px no-repeat;
1804     z-index: 255;
28e18c 1805 }
T 1806
bab043 1807
d1c909 1808 /*** attachment list ***/
T 1809
1810 .attachmentslist {
1811     list-style: none;
1812     margin: 0;
1813     padding: 0;
1814     overflow: hidden;
1815     text-overflow: ellipsis;
1816 }
1817
1818 .attachmentslist li {
1819     display: block;
1820     position: relative;
1821     background: url(images/filetypes.png) 0 0 no-repeat;
1822     margin-bottom: 1px;
1823 }
1824
1825 .attachmentslist li.pdf {
1826     background-position: 0 -26px;
1827 }
1828
1829 .attachmentslist li.doc,
f70932 1830 .attachmentslist li.docx,
d1c909 1831 .attachmentslist li.msword {
T 1832     background-position: 0 -52px;
1833 }
1834
e88a14 1835 .attachmentslist li.odt {
T 1836     background-position: 0 -78px;
1837 }
1838
d1c909 1839 .attachmentslist li.xls,
f70932 1840 .attachmentslist li.xlsx,
d1c909 1841 .attachmentslist li.msexcel {
e88a14 1842     background-position: 0 -104px;
T 1843 }
1844
1845 .attachmentslist li.ods {
1846     background-position: 0 -130px;
d1c909 1847 }
T 1848
1849 .attachmentslist li.zip,
1850 .attachmentslist li.gz {
1851     background-position: 0 -156px;
1852 }
1853
10560d 1854 .attachmentslist li.rar {
d1c909 1855     background-position: 0 -182px;
T 1856 }
1857
e88a14 1858 .attachmentslist li.image {
T 1859     background-position: 0 -208px;
1860 }
1861
1862 .attachmentslist li.jpg,
1863 .attachmentslist li.jpeg {
1864     background-position: 0 -234px;
1865 }
1866
1867 .attachmentslist li.png {
1868     background-position: 0 -260px;
1869 }
1870
1871 .attachmentslist li.m4p {
1872     background-position: 0 -286px;
1873 }
1874
1875 .attachmentslist li.mp3,
1876 .attachmentslist li.audio {
1877     background-position: 0 -312px;
1878 }
1879
1880 .attachmentslist li.video {
1881     background-position: 0 -338px;
1882 }
1883
1884 .attachmentslist li.ics,
1885 .attachmentslist li.calendar {
1886     background-position: 0 -364px;
1887 }
1888
d1c909 1889 .attachmentslist li a,
T 1890 #compose-attachments ul li {
1891     display: block;
1892     color: #333;
1893     font-weight: bold;
1894     padding: 8px 4px 3px 30px;
1895     text-shadow: 0px 1px 1px #fff;
1896     text-decoration: none;
1897     white-space: nowrap;
1898 }
1899
1900 .attachmentslist li a:hover {
1901     text-decoration: underline;
1902 }
1903
1904 .attachmentslist li.uploading {
1905     background: url(images/ajaxloader.gif) 2px 6px no-repeat;
1906 }
1907
1908 .attachmentslist li a.delete,
1909 .attachmentslist li a.cancelupload {
1910     position: absolute;
1911     top: 6px;
1912     right: 0;
1913     width: 24px;
1914     height: 18px;
1915     padding: 0;
1916     text-decoration: none;
1917     text-indent: -1000px;
1918     background: url(images/buttons.png) -7px -337px no-repeat;
1919 }
1920
1921 .attachmentslist li a.cancelupload {
1922     background-position: -7px -377px;
1923 }
1924
1925
bab043 1926 /*** fieldset tabs ***/
T 1927
1928 .tabsbar {
68e13c 1929     margin-bottom: 12px;
bab043 1930     padding-top: 15px;
T 1931     height: 27px;
1932 }
1933
1934 .tabsbar .tablink {
1935     padding: 15px 1px 15px 0;
1936     background: #f8f8f8;
1937     background: -moz-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
1938     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(50%,#d3d3d3), color-stop(100%,#f8f8f8));
1939     background: -webkit-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
1940     background: -o-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
1941     background: -ms-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
1942     background: linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
1943 }
1944
1945 .tabsbar .tablink:last-child {
1946     background: none;
1947 }
1948
1949 .tabsbar .tablink:last-child a {
1950     border-right: 0;
1951 }
1952
1953 .tabsbar .tablink a {
1954     padding: 15px;
1955     color: #999;
1956     font-size: 12px;
1957     font-weight: bold;
1958     text-decoration: none;
1959     background: #fff;
1960     border-right: 1px solid #fafafa;
1961 }
1962
1963 .tabsbar .tablink.selected a {
1964     color: #004458;
071c78 1965     background: #f6f6f6;
bab043 1966     background: -moz-linear-gradient(top, #fff 40%, #efefef 100%);
T 1967     background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#fff), color-stop(100%,#efefef));
1968     background: -o-linear-gradient(top, #fff 40%, #efefef 100%);
1969     background: -ms-linear-gradient(top, #fff 40%, #efefef 100%);
1970     background: linear-gradient(top, #fff 40%, #efefef 100%);
1971 }
1972
1973 fieldset.tab {
1974     border: 0;
1975     padding: 0;
68e13c 1976     margin-left: 0;
bab043 1977 }