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: #333333;
  86   padding-left: 3px;
  87   padding-right: 3px;
  88   /* IE hacks for input elements */
  89   border-style: expression(this.type=='checkbox' || this.type=='radio' || this.id=='quicksearchbox' ? 'none' : 'solid');
  90   border-width: expression(this.type=='checkbox' || this.type=='radio' ? '0' : '1px');
  91   border-color: expression(this.type=='checkbox' || this.type=='radio' ? '' : '#666666');
  92   background-color: expression(this.type=='checkbox' || this.type=='radio' ? 'transparent' : '#ffffff');
  93 }
  94
  95 input.button
  96 {
  97   height: 20px;
  98   color: #333333;
  99   font-size: 12px;
 100   padding-left: 8px;
 101   padding-right: 8px;
 102   background: url(images/buttons/bg.gif) repeat-x #f0f0f0;
 103   border: 1px solid #a4a4a4;
 104 }
 105
 106 input.button:hover
 107 {
 108   color: black;
 109 }
 110
 111 input.mainaction
 112 {
 113   font-weight: bold;
 114   border: 1px solid #999;
 115 }
 116
 117 img
 118 {
 119   behavior: url('skins/default/pngbehavior.htc');
 120   border: 0;
 121 }
 122
 123 .alttext
 124 {
 125   font-size: 11px;
 126 }
 127
 128 .hint
 129 {
 130   color: #666;
 131   font-size: 11px;
 132 }
 133
 134 /** common user interface objects */
 135
 136 #header
 137 {
 138   position: absolute;
 139   top: 10px;
 140   left: 20px;
 141   width: 170px;
 142   height: 40px;
 143   z-index: 100;
 144 }
 145
 146 #taskbar
 147 {
 148   position: absolute;
 149   top: 0px;
 150   right: 0px;
 151   width: 600px;
 152   height: 37px;
 153   background: url(images/taskbar.gif) top right no-repeat;
 154   padding: 10px 4px 10px 0px;
 155   text-align: right;
 156   white-space: nowrap;
 157   z-index: 2;
 158 }
 159
 160 #taskbar a,
 161 #taskbar a:active,
 162 #taskbar a:visited
 163 {
 164   font-size: 11px;
 165   color: #666666;
 166   text-decoration: none;
 167   padding: 6px 16px 6px 25px;
 168   background-repeat: no-repeat;
 169 }
 170
 171 #taskbar a:hover
 172 {
 173   color: #333333;
 174 }
 175
 176 a.button-mail
 177 {
 178   background-image: url(images/buttons/mail.gif);
 179 }
 180
 181 a.button-addressbook
 182 {
 183   background-image: url(images/buttons/addressbook.gif);
 184 }
 185
 186 a.button-settings
 187 {
 188   background-image: url(images/buttons/settings.gif);
 189 }
 190
 191 a.button-logout
 192 {
 193   background-image: url(images/buttons/logout.gif);
 194 }
 195
 196
 197 #message
 198 {
 199   position: absolute;
 200   display: none;
 201   top: -1px;
 202   left: 200px;
 203   right: 200px;
 204   z-index: 5000;
 205   opacity: 0.85;
 206   /* IE */
 207   filter: alpha(opacity=85);
 208 }
 209
 210 #message div
 211 {
 212   width: 400px;
 213   margin: 0px auto;
 214   height: 24px;
 215   min-height: 24px;
 216   padding: 8px 10px 8px 46px;
 217 }
 218
 219 #message div.notice,
 220 #remote-objects-message
 221 {
 222   background: url(images/display/info.png) 6px 3px no-repeat;
 223   background-color: #F7FDCB;
 224   border: 1px solid #C2D071;
 225 }
 226
 227 #message div.error,
 228 #message div.warning
 229 {
 230   background: url(images/display/warning.png) 6px 3px no-repeat;
 231   background-color: #EF9398;
 232   border: 1px solid #DC5757;
 233 }
 234
 235 #message div.confirmation
 236 {
 237   background: url(images/display/confirm.png) 6px 3px no-repeat;
 238   background-color: #A6EF7B;
 239   border: 1px solid #76C83F;
 240 }
 241
 242 #message div.loading
 243 {
 244   background: url(images/display/loading.gif) 6px 3px no-repeat;
 245   background-color: #EBEBEB;
 246   border: 1px solid #CCCCCC;
 247 }
 248
 249 .splitter
 250 {
 251   user-select: none;
 252   -moz-user-select: none;
 253   -khtml-user-select: none;
 254   position: absolute;
 255   background: url(images/dimple.png) center no-repeat;
 256 }
 257
 258 .splitter-h
 259 {
 260   cursor: n-resize;
 261   background-position: center 2px;
 262 }
 263
 264 .splitter-v
 265 {
 266   cursor: e-resize;
 267   background-position: 2px center;
 268 }
 269
 270 .boxtitle
 271 {
 272   height: 12px !important;
 273   padding: 4px 20px 3px 20px;
 274   border-bottom: 1px solid #999;
 275   color: #333;
 276   font-size: 11px;
 277   font-weight: bold;
 278   background-color: #EBEBEB;
 279   background-image: url(images/listheader_aqua.gif);
 280 }
 281
 282 .radios-left label
 283 {
 284   padding-left: 0.3em;
 285 }
 286
 287 /***** common table settings ******/
 288
 289 table.records-table thead tr td
 290 {
 291   height: 20px;
 292   padding: 0px 4px 0px 4px;
 293   vertical-align: middle;
 294   border-bottom: 1px solid #999999;
 295   color: #333333;
 296   background-color: #EBEBEB;
 297   background-image: url(images/listheader_aqua.gif);
 298   font-size: 11px;
 299   font-weight: bold;
 300 }
 301
 302 table.records-table tbody tr td
 303 {
 304   height: 16px;
 305   padding: 2px 4px 2px 4px;
 306   font-size: 11px;
 307   white-space: nowrap;
 308   border-bottom: 1px solid #EBEBEB;
 309   overflow: hidden;
 310   text-align: left;
 311 }
 312
 313 table.records-table tr
 314 {
 315   background-color: #FFFFFF;
 316 }
 317
 318 table.records-table tr.selected td
 319 {
 320   color: #FFFFFF;
 321   background-color: #CC3333;
 322 }
 323
 324 table.records-table tr.focused td
 325 {
 326 }
 327
 328 table.records-table tr.unfocused td
 329 {
 330   color: #FFFFFF;
 331   background-color: #929292;
 332 }
 333
 334
 335 /***** mac-style quicksearch field *****/
 336
 337 #quicksearchbar
 338 {
 339   position: absolute;
 340   top: 55px;
 341   right: 20px;
 342   width: 182px;
 343   height: 20px;
 344   text-align: right;
 345   background: url('images/searchfield.gif') top left no-repeat;
 346 }
 347
 348 #quicksearchbar a
 349 {
 350   position: absolute;
 351   top: 3px;
 352   right: 4px;
 353   text-decoration: none;
 354 }
 355
 356 #quicksearchbar img
 357 {
 358   vertical-align: middle;
 359 }
 360
 361 #quicksearchbox
 362 {
 363   position: absolute;
 364   top: 2px;
 365   left: 20px;
 366   width: 140px;
 367   font-size: 11px;
 368   padding: 0px;
 369   border: none;
 370 }
 371
 372
 373 /*\*/
 374 html>body*#quicksearchbar[id$="quicksearchbar"]:not([class="none"]) { background-image: none; }
 375 html>body*#quicksearchbar[id$="quicksearchbar"]:not([class="none"]) a { top: 5px; }
 376 html>body*#quicksearchbar[id$="quicksearchbar"]:not([class="none"]) #quicksearchbox { width: 180px; top:0px; right: 1px; left: auto; }
 377 /**/
 378
 379
 380 /***** roundcube webmail pre-defined classes *****/
 381
 382 #rcversion
 383 {
 384   position: absolute;
 385   top: 67px;
 386   left: 20px;
 387   width: 160px;
 388   text-align: center;
 389
 390   font-weight: normal;
 391   font-size: x-small;
 392   font-variant: small-caps;
 393
 394   color: #999999;
 395   /*border: 1px solid #308014;
 396   background-color: #b4eeb4;*/
 397 }
 398
 399 #rcmdraglayer
 400 {
 401   min-width: 300px;
 402   width: auto !important;
 403   width: 300px;
 404   border: 1px solid #999999;
 405   background-color: #F9F9F9;
 406   padding-left: 8px;
 407   padding-right: 8px;
 408   padding-top: 3px;
 409   padding-bottom: 3px;
 410   font-size: 11px;
 411   white-space: nowrap;
 412   opacity: 0.7;
 413   -moz-opacity: 0.7;
 414   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
 415 }
 416
 417 a.rcmContactAddress
 418 {
 419   text-decoration: none;
 420 }
 421
 422 a.rcmContactAddress:hover
 423 {
 424   text-decoration: underline;
 425 }
 426
 427 #rcmKSearchpane
 428 {
 429   background-color: #F9F9F9;
 430   border: 1px solid #CCCCCC;
 431 }
 432
 433 #rcmKSearchpane ul
 434 {
 435   margin: 0px;
 436   padding: 2px;
 437   list-style-image: none;
 438   list-style-type: none;
 439 }
 440
 441 #rcmKSearchpane ul li
 442 {
 443   display: block;
 444   height: 16px;
 445   font-size: 11px;
 446   padding-left: 6px;
 447   padding-top: 2px;
 448   padding-right: 6px;
 449   white-space: nowrap;
 450   cursor: pointer;
 451 }
 452
 453 #rcmKSearchpane ul li.selected
 454 {
 455   color: #ffffff;
 456   background-color: #CC3333;
 457 }
 458