skins/default/common.css

   1 /***** RoundCube|Mail basic styles *****/
   2
   3 body
   4 {
   5   margin: 8px;
   6   background-color: #F6F6F6; /* #EBEBEB; */
   7   color: #000000;
   8 }
   9
  10 body.iframe
  11 {
  12   margin: 0px;
  13   background-color: #FFF;
  14 }
  15
  16 body.extwin
  17 {
  18   margin: 10px;
  19 }
  20
  21 body, td, th, div, p, h3
  22 {
  23   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  24   font-size: 12px;
  25   color: #000000;
  26 }
  27
  28 th
  29 {
  30   font-weight: normal;
  31 }
  32
  33 h3
  34 {
  35   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  36   font-size: 18px;
  37   color: #000000;
  38 }
  39
  40 a, a:active, a:visited
  41 {
  42   color: #000000;
  43   outline: none;
  44 }
  45
  46 a.button, a.button:visited, a.tab, a.tab:visited, a.axislist
  47 {
  48   color: #000000;
  49   text-decoration: none;
  50 }
  51
  52 a.tab
  53 {
  54   width: 80px;
  55   display: block;
  56   text-align: center;
  57 }
  58
  59 hr
  60 {
  61   height: 1px;
  62   background-color: #666666;
  63   border-style: none;
  64 }
  65
  66 input[type="text"],
  67 input[type="button"],
  68 input[type="password"],
  69 textarea
  70 {
  71   font-size: 9pt;
  72   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  73   padding: 1px;
  74   padding-left: 3px;
  75   padding-right: 3px;
  76   border: 1px solid #666666;
  77   color: #333333;
  78   background-color: #ffffff;
  79 }
  80
  81 input, textarea
  82 {
  83   font-size: 9pt;
  84   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  85   color: black;
  86   padding-left: 3px;
  87   padding-right: 3px;
  88 }
  89
  90 input.button
  91 {
  92   height: 20px;
  93   color: #333333;
  94   font-size: 12px;
  95   padding-left: 8px;
  96   padding-right: 8px;
  97   background: url(images/buttons/bg.gif) repeat-x #f0f0f0;
  98   border: 1px solid #a4a4a4;
  99 }
 100
 101 input.button:hover
 102 {
 103   color: black;
 104 }
 105
 106 input.mainaction
 107 {
 108   font-weight: bold;
 109   border: 1px solid #999;
 110 }
 111
 112 img
 113 {
 114   border: 0;
 115 }
 116
 117 .alttext
 118 {
 119   font-size: 11px;
 120 }
 121
 122 .hint
 123 {
 124   color: #666;
 125   font-size: 11px;
 126 }
 127
 128 /** common user interface objects */
 129
 130 #header
 131 {
 132   position: absolute;
 133   top: 8px;
 134   left: 19px;
 135   width: 170px;
 136   height: 40px;
 137   z-index: 100;
 138 }
 139
 140 #taskbar
 141 {
 142   position: absolute;
 143   top: 0px;
 144   right: 0px;
 145   width: 600px;
 146   height: 37px;
 147   background: url(images/taskbar.gif) top right no-repeat;
 148   padding: 10px 4px 10px 0px;
 149   text-align: right;
 150   white-space: nowrap;
 151   z-index: 2;
 152 }
 153
 154 #taskbar a
 155 {
 156   font-size: 11px;
 157   color: #666666;
 158   text-decoration: none;
 159   padding: 6px 14px 6px 27px;
 160   background: url('images/taskicons.gif') no-repeat;
 161 }
 162
 163 #taskbar a:hover
 164 {
 165   color: #333333;
 166 }
 167
 168 #taskbar a.button-mail
 169 {
 170   background-position: 0 0;
 171 }
 172
 173 #taskbar a.button-addressbook
 174 {
 175   background-position: 0 -25px;
 176 }
 177
 178 #taskbar a.button-settings
 179 {
 180   background-position: 0 -50px;
 181 }
 182
 183 #taskbar a.button-logout
 184 {
 185   background-position: 0 -75px;
 186 }
 187
 188 #message
 189 {
 190   position: absolute;
 191   display: none;
 192   top: -1px;
 193   left: 200px;
 194   right: 200px;
 195   z-index: 5000;
 196   opacity: 0.85;
 197 }
 198
 199 #message div
 200 {
 201   width: 400px;
 202   margin: 0px auto;
 203   min-height: 22px;
 204   padding: 8px 10px 8px 46px;
 205 }
 206
 207 #message div.notice,
 208 #remote-objects-message
 209 {
 210   background: url('images/display/icons.png') 6px 3px no-repeat;
 211   background-color: #F7FDCB;
 212   border: 1px solid #C2D071;
 213 }
 214
 215 #message div.error,
 216 #message div.warning
 217 {
 218   background: url('images/display/icons.png') 6px -97px no-repeat;
 219   background-color: #EF9398;
 220   border: 1px solid #DC5757;
 221 }
 222
 223 #message div.confirmation
 224 {
 225   background: url('images/display/icons.png') 6px -47px no-repeat;
 226   background-color: #A6EF7B;
 227   border: 1px solid #76C83F;
 228 }
 229
 230 #message div.loading
 231 {
 232   background: url('images/display/loading.gif') 6px 3px no-repeat;
 233   background-color: #EBEBEB;
 234   border: 1px solid #CCCCCC;
 235 }
 236
 237 #pagecontent
 238 {
 239   position: absolute;
 240   top: 95px;
 241   left: 20px;
 242 }
 243
 244 .pagenav a.button,
 245 .pagenav a.buttonPas
 246 {
 247   display: block;
 248   float: left;
 249   width: 11px;
 250   height: 11px;
 251   padding: 0;
 252   margin: 1px;
 253   overflow: hidden;
 254   background: url('images/pagenav.gif') 0 0 no-repeat transparent;
 255   opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
 256 }
 257
 258 .pagenav a.buttonPas {
 259   opacity: 0.35;
 260 }
 261
 262 .pagenav a.firstpageSel {
 263   background-position: 0 -11px;
 264 }
 265
 266 .pagenav a.prevpage {
 267   background-position: -11px 0;
 268 }
 269
 270 .pagenav a.prevpageSel {
 271   background-position: -11px -11px;
 272 }
 273
 274 .pagenav a.nextpage {
 275   background-position: -22px 0;
 276 }
 277
 278 .pagenav a.nextpageSel {
 279   background-position: -22px -11px;
 280 }
 281
 282 .pagenav a.lastpage {
 283   background-position: -33px 0;
 284 }
 285
 286 .pagenav a.lastpageSel {
 287   background-position: -33px -11px;
 288 }
 289
 290 .splitter
 291 {
 292   user-select: none;
 293   -moz-user-select: none;
 294   -khtml-user-select: none;
 295   position: absolute;
 296   background: url(images/dimple.png) center no-repeat;
 297 }
 298
 299 .splitter-h
 300 {
 301   cursor: n-resize;
 302   background-position: center 2px;
 303 }
 304
 305 .splitter-v
 306 {
 307   cursor: e-resize;
 308   background-position: 2px center;
 309 }
 310
 311 .boxtitle
 312 {
 313   height: 12px !important;
 314   padding: 2px 10px 5px 5px;
 315   border-bottom: 1px solid #999;
 316   color: #333;
 317   font-size: 11px;
 318   font-weight: bold;
 319   background: url('images/listheader.gif') top left repeat-x #CCC;
 320 }
 321
 322 .boxcontent
 323 {
 324   padding: 15px 10px 10px 10px;
 325 }
 326
 327 .boxcontent table td.title
 328 {
 329   color: #666;
 330   padding-right: 10px;
 331 }
 332
 333
 334 /***** common table settings ******/
 335
 336 table.records-table thead tr td
 337 {
 338   height: 20px;
 339   padding: 0px 4px 0px 4px;
 340   vertical-align: middle;
 341   border-bottom: 1px solid #999999;
 342   color: #333333;
 343   background: url('images/listheader.gif') top left repeat-x #CCC;
 344   font-size: 11px;
 345   font-weight: bold;
 346 }
 347
 348 table.records-table tbody tr td
 349 {
 350   height: 16px;
 351   padding: 2px 4px 2px 4px;
 352   font-size: 11px;
 353   white-space: nowrap;
 354   border-bottom: 1px solid #EBEBEB;
 355   overflow: hidden;
 356   text-align: left;
 357 }
 358
 359 table.records-table tr
 360 {
 361   background-color: #FFFFFF;
 362 }
 363
 364 table.records-table tr.selected td
 365 {
 366   color: #FFFFFF;
 367   background-color: #CC3333;
 368 }
 369
 370 table.records-table tr.focused td
 371 {
 372 }
 373
 374 table.records-table tr.unfocused td
 375 {
 376   color: #FFFFFF;
 377   background-color: #929292;
 378 }
 379
 380
 381 /***** mac-style quicksearch field *****/
 382
 383 #quicksearchbar
 384 {
 385   position: absolute;
 386   top: 55px;
 387   right: 20px;
 388   width: 182px;
 389   height: 20px;
 390   text-align: right;
 391   background: url('images/searchfield.gif') top left no-repeat;
 392 }
 393
 394 #searchreset
 395 {
 396   position: absolute;
 397   top: 3px;
 398   right: 4px;
 399   text-decoration: none;
 400 }
 401
 402 #searchmod
 403 {
 404  position: absolute;
 405  top: 3px;
 406  right: 160px;
 407 }
 408
 409 #quicksearchbar img
 410 {
 411   vertical-align: middle;
 412 }
 413
 414 #quicksearchbox
 415 {
 416   position: absolute;
 417   top: 2px;
 418   left: 24px;
 419   width: 140px;
 420   height: 15px;
 421   font-size: 11px;
 422   padding: 0px;
 423   border: none;
 424 }
 425
 426
 427 /***** roundcube webmail pre-defined classes *****/
 428
 429 #rcversion
 430 {
 431   position: absolute;
 432   top: 67px;
 433   left: 20px;
 434   width: 160px;
 435   text-align: center;
 436
 437   font-weight: normal;
 438   font-size: x-small;
 439   font-variant: small-caps;
 440
 441   color: #999999;
 442   /*border: 1px solid #308014;
 443   background-color: #b4eeb4;*/
 444 }
 445
 446 #rcmdraglayer
 447 {
 448   min-width: 300px;
 449   width: auto !important;
 450   width: 300px;
 451   border: 1px solid #999999;
 452   background-color: #F9F9F9;
 453   padding-left: 8px;
 454   padding-right: 8px;
 455   padding-top: 3px;
 456   padding-bottom: 3px;
 457   font-size: 11px;
 458   white-space: nowrap;
 459   opacity: 0.7;
 460 }
 461
 462 a.rcmContactAddress
 463 {
 464   text-decoration: none;
 465 }
 466
 467 a.rcmContactAddress:hover
 468 {
 469   text-decoration: underline;
 470 }
 471
 472 #rcmKSearchpane
 473 {
 474   background-color: #F9F9F9;
 475   border: 1px solid #CCCCCC;
 476 }
 477
 478 #rcmKSearchpane ul
 479 {
 480   margin: 0px;
 481   padding: 2px;
 482   list-style-image: none;
 483   list-style-type: none;
 484 }
 485
 486 #rcmKSearchpane ul li
 487 {
 488   display: block;
 489   height: 16px;
 490   font-size: 11px;
 491   padding-left: 6px;
 492   padding-top: 2px;
 493   padding-right: 6px;
 494   white-space: nowrap;
 495   cursor: pointer;
 496 }
 497
 498 #rcmKSearchpane ul li.selected
 499 {
 500   color: #ffffff;
 501   background-color: #CC3333;
 502 }
 503
 504 #login-form
 505 {
 506   margin-left: auto;
 507   margin-right: auto;
 508   margin-top: 50px;
 509   width: 400px;
 510   border: 1px solid #999;
 511 }
 512
 513 #login-form table td.title
 514 {
 515   text-align: right;
 516   white-space: nowrap;
 517 }
 518
 519 #login-form table
 520 {
 521   width: 1%;
 522   margin: auto;
 523 }
 524
 525 #rcmloginuser, #rcmloginpwd, #rcmloginhost
 526 {
 527   width: 200px;
 528 }
 529
 530 #console
 531 {
 532   opacity: 0.8;
 533 }
 534
 535
 536 /***** onclick menu list *****/
 537
 538 ul.toolbarmenu
 539 {
 540   margin: 0;
 541   padding: 0;
 542   list-style: none;
 543 }
 544
 545 ul.toolbarmenu li
 546 {
 547   font-size: 11px;
 548   white-space: nowrap;
 549   min-width: 130px;
 550 }
 551
 552 ul.toolbarmenu li a
 553 {
 554   display: block;
 555   color: #a0a0a0;
 556   padding: 2px 8px 3px 22px;
 557   text-decoration: none;
 558   min-height: 14px;
 559 }
 560
 561 ul.toolbarmenu li a.active,
 562 ul.toolbarmenu li a.active:active,
 563 ul.toolbarmenu li a.active:visited
 564 {
 565   color: #333;
 566 }
 567
 568 ul.toolbarmenu li input
 569 {
 570   vertical-align: middle;
 571 }
 572
 573 ul.toolbarmenu li hr
 574 {
 575   color: #ccc;
 576   width: 130px;
 577   height: 1px;
 578   margin: 2px 1px 2px 1px;
 579 }
 580
 581 ul.toolbarmenu li img
 582 {
 583   float: left;
 584   margin: 0 2px;
 585 }
 586
 587 ul.toolbarmenu li.separator_below
 588 {
 589   border-bottom: 1px solid #ccc;
 590   margin-bottom: 2px;
 591   padding-bottom: 2px;
 592 }
 593
 594 ul.toolbarmenu li.separator_above
 595 {
 596   border-top: 1px solid #ccc;
 597   margin-top: 2px;
 598   padding-top: 2px;
 599 }