You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

mail.css 27KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455
  1. /**
  2. * Roundcube webmail styles for the Email section
  3. *
  4. * Copyright (c) 2012, The Roundcube Dev Team
  5. * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
  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. #mailview-left {
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. width: 200px;
  17. bottom: 0;
  18. z-index: 2;
  19. }
  20. #mailview-right {
  21. position: absolute;
  22. top: 0;
  23. left: 212px;
  24. right: 0;
  25. bottom: 0;
  26. z-index: 3;
  27. }
  28. #mailview-right.fullwidth {
  29. left: 0;
  30. }
  31. #mailview-top {
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. right: 0;
  36. bottom: 0px;
  37. }
  38. html.ie #mailview-top {
  39. overflow: visible; /* fixes display issues of fixed list header in IE */
  40. }
  41. #mailview-bottom {
  42. display: none;
  43. position: absolute;
  44. left: 0;
  45. bottom: 0;
  46. right: 0;
  47. height: 0;
  48. border-radius: 4px;
  49. border-top: none;
  50. }
  51. #composeview-right #mailview-bottom {
  52. border-radius: 0 0 4px 4px;
  53. }
  54. #mailboxcontainer,
  55. #messagelistcontainer {
  56. position: absolute;
  57. top: 0;
  58. left: 0;
  59. width: 100%;
  60. bottom: 0;
  61. }
  62. #messagelistcontainer {
  63. top: 0;
  64. bottom: 30px;
  65. overflow: auto;
  66. }
  67. /* Real browsers accept this (not IE) */
  68. html>/**/body #messagelist {
  69. overflow: auto;
  70. overflow-x: hidden;
  71. }
  72. #messagelistfooter {
  73. position: absolute;
  74. bottom: 0;
  75. left: 0;
  76. right: 0;
  77. height: 22px;
  78. padding: 4px 6px;
  79. border-top: 1px solid #ddd;
  80. background: #ebebeb;
  81. background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
  82. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#c6c6c6));
  83. background: -o-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
  84. background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
  85. background: linear-gradient(to bottom, #ebebeb 0%, #c6c6c6 100%);
  86. border-radius: 0 0 4px 4px;
  87. white-space: nowrap;
  88. }
  89. #messagelistfooter.rightalign {
  90. text-align: right;
  91. }
  92. #messagelistfooter #countcontrols {
  93. display: inline-block;
  94. }
  95. #messagelistfooter #listcontrols,
  96. #messagelistfooter #listselectors {
  97. display: inline-block;
  98. margin-right: 2em;
  99. vertical-align: middle;
  100. }
  101. #messagelistfooter #listselectors .menuselector {
  102. margin-top: -2px;
  103. }
  104. a.iconbutton.listmode {
  105. width: 26px;
  106. height: 20px;
  107. background-position: 0 -477px;
  108. }
  109. a.iconbutton.threadmode {
  110. width: 26px;
  111. height: 20px;
  112. background-position: 0 -497px;
  113. }
  114. a.iconbutton.listmode.selected {
  115. background-position: -26px -477px;
  116. }
  117. a.iconbutton.threadmode.selected {
  118. background-position: -26px -497px;
  119. }
  120. #mailboxlist > li:first-child {
  121. border-top: 0;
  122. }
  123. html.mozilla #mailboxlist > li:first-child {
  124. border-radius: 4px 4px 0 0;
  125. }
  126. .folderlist li.mailbox.unread > a {
  127. padding-right: 36px;
  128. }
  129. .folderlist li.unread {
  130. font-weight: bold;
  131. }
  132. .folderlist li.recent > a {
  133. color: #017cb4;
  134. }
  135. .folderlist li.mailbox .unreadcount {
  136. position: absolute;
  137. top: 3px;
  138. right: 6px;
  139. min-width: 1.8em;
  140. line-height: 15px;
  141. padding: 2px 4px;
  142. background: #82acb5;
  143. background: -moz-linear-gradient(top, #82acb5 0%, #6a939f 100%);
  144. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82acb5), color-stop(100%,#6a939f));
  145. background: -o-linear-gradient(top, #82acb5 0%, #6a939f 100%);
  146. background: -ms-linear-gradient(top, #82acb5 0%, #6a939f 100%);
  147. background: linear-gradient(to bottom, #82acb5 0%, #6a939f 100%);
  148. box-shadow: inset 0 1px 1px 0 #536d72;
  149. -webkit-box-shadow: inset 0 1px 1px 0 #536d72;
  150. border-radius: 9px;
  151. color: #fff;
  152. text-align: center;
  153. font-weight: bold;
  154. text-shadow: none;
  155. }
  156. .folderlist li.mailbox.selected > a .unreadcount {
  157. background: #005d76;
  158. background: -moz-linear-gradient(top, #005d76 0%, #004558 100%);
  159. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005d76), color-stop(100%,#004558));
  160. background: -o-linear-gradient(top, #005d76 0%, #004558 100%);
  161. background: -ms-linear-gradient(top, #005d76 0%, #004558 100%);
  162. background: linear-gradient(to bottom, #005d76 0%, #004558 100%);
  163. box-shadow: inset 0 1px 1px 0 #003645;
  164. -webkit-box-shadow: inset 0 1px 1px 0 #003645;
  165. }
  166. .folderlist li.mailbox.recent > a .unreadcount {
  167. background: #017cb4;
  168. background: -moz-linear-gradient(top, #017cb4 0%, #006ca4 100%);
  169. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#017cb4), color-stop(100%,#006ca4));
  170. background: -o-linear-gradient(top, #017cb4 0%, #006ca4 100%);
  171. background: -ms-linear-gradient(top, #017cb4 0%, #006ca4 100%);
  172. background: linear-gradient(to bottom, #017cb4 0%, #006ca4 100%);
  173. box-shadow: inset 0 1px 1px 0 #005080;
  174. -webkit-box-shadow: inset 0 1px 1px 0 #005080;
  175. }
  176. #searchfilter {
  177. position: absolute;
  178. right: 256px;
  179. width: auto;
  180. top: 2px;
  181. }
  182. #searchfilter select {
  183. height: 26px;
  184. }
  185. #mailview-left select.mailboxlist {
  186. position: relative;
  187. top: 10px;
  188. width: 100%;
  189. }
  190. #messagetoolbar {
  191. position: absolute;
  192. top: -6px;
  193. left: 0;
  194. height: 40px;
  195. white-space: nowrap;
  196. z-index: 10;
  197. }
  198. #messagetoolbar.fullwidth {
  199. right: 0;
  200. }
  201. #messagesearchtools {
  202. position: absolute;
  203. right: 0;
  204. top: 0;
  205. }
  206. #mailpreviewtoggle {
  207. display: block;
  208. position: absolute;
  209. top: 7px;
  210. right: 4px;
  211. width: 20px;
  212. height: 18px;
  213. background: url(images/buttons.png?v=32cf.15571) -3px -458px no-repeat;
  214. }
  215. #mailpreviewtoggle.enabled {
  216. background-position: -28px -458px;
  217. }
  218. #s_interval {
  219. margin: 3px 8px;
  220. }
  221. /*** message list ***/
  222. table.messagelist {
  223. z-index: 1;
  224. }
  225. table.messagelist.fixedcopy {
  226. z-index: 2;
  227. }
  228. .messagelist thead th:first-child {
  229. border-radius: 4px 0 0 0; /* for Chrome */
  230. }
  231. .messagelist tr > .attachment,
  232. .messagelist tr > .threads,
  233. .messagelist tr > .status,
  234. .messagelist tr > .flag,
  235. .messagelist tr > .priority {
  236. width: 20px;
  237. padding: 2px 3px !important;
  238. }
  239. .messagelist tr > .threads {
  240. width: 26px;
  241. }
  242. .messagelist tr > .threads + td,
  243. .messagelist tr > .threads + th {
  244. border-left: 0;
  245. }
  246. .messagelist tr > .size {
  247. width: 60px;
  248. text-align: right;
  249. }
  250. .messagelist thead tr th.size {
  251. text-align: left;
  252. }
  253. .messagelist tr > .fromto,
  254. .messagelist tr > .from,
  255. .messagelist tr > .to,
  256. .messagelist tr > .cc,
  257. .messagelist tr > .replyto {
  258. width: 200px;
  259. }
  260. .messagelist tr > .date {
  261. width: 155px;
  262. }
  263. .messagelist tr > .folder {
  264. width: 135px;
  265. }
  266. .messagelist tr > .hidden {
  267. display: none;
  268. }
  269. .messagelist tr.message {
  270. /* background-color: #fff; */
  271. }
  272. .messagelist tr.thread.expanded td {
  273. background-color: #ededed;
  274. }
  275. .messagelist tr.unread {
  276. font-weight: bold;
  277. /* background-color: #fff; */
  278. }
  279. .messagelist tr.flagged th,
  280. .messagelist tr.flagged td,
  281. .messagelist tr.flagged td a {
  282. color: #f30;
  283. }
  284. .messagelist thead tr th.sortedASC a,
  285. .messagelist thead tr th.sortedDESC a {
  286. color: #004458;
  287. text-decoration: underline;
  288. background-image: url(images/listicons.png?v=1877.13442);
  289. background-repeat: no-repeat;
  290. background-position: right -912px;
  291. }
  292. .messagelist thead tr th.sortedASC a {
  293. background-position: right -944px;
  294. }
  295. .messagelist td img {
  296. vertical-align: middle;
  297. display: inline-block;
  298. }
  299. .messagelist tbody td a {
  300. color: #333;
  301. text-decoration: none;
  302. white-space: nowrap;
  303. cursor: default;
  304. }
  305. .messagelist tbody tr td.flag,
  306. .messagelist tbody tr td.status,
  307. .messagelist tbody tr td.subject span.status {
  308. cursor: pointer;
  309. }
  310. .messagelist tr > .flag span,
  311. .messagelist tr > .status span,
  312. .messagelist tr > .attachment span,
  313. .messagelist tr > .priority span {
  314. display: block;
  315. width: 20px;
  316. text-indent: -5000px;
  317. overflow: hidden;
  318. }
  319. .messagelist tr td div.collapsed,
  320. .messagelist tr td div.expanded,
  321. .messagelist tr > .threads .listmenu,
  322. .messagelist tr > .attachment span.attachment,
  323. .messagelist tr > .attachment span.report,
  324. .messagelist tr > .priority span.priority,
  325. .messagelist tr > .priority span.prio1,
  326. .messagelist tr > .priority span.prio2,
  327. .messagelist tr > .priority span.prio3,
  328. .messagelist tr > .priority span.prio4,
  329. .messagelist tr > .priority span.prio5,
  330. .messagelist tr > .flag span.flagged,
  331. .messagelist tr > .flag span.unflagged,
  332. .messagelist tr > .flag span.unflagged:hover,
  333. .messagelist tr > .status span.status,
  334. .messagelist tr > .status span.msgicon,
  335. .messagelist tr > .status span.deleted,
  336. .messagelist tr > .status span.unread,
  337. .messagelist tr > .status span.unreadchildren,
  338. .messagelist tr > .subject span.msgicon,
  339. .messagelist tr > .subject span.deleted,
  340. .messagelist tr > .subject span.unread,
  341. .messagelist tr > .subject span.replied,
  342. .messagelist tr > .subject span.forwarded,
  343. .messagelist tr > .subject span.unreadchildren {
  344. display: inline-block;
  345. vertical-align: middle;
  346. height: 18px;
  347. width: 20px;
  348. padding: 0;
  349. background: url(images/listicons.png?v=1877.13442) -100px 0 no-repeat;
  350. }
  351. .messagelist tbody tr td.attachment span.attachment {
  352. background-position: 0 -996px;
  353. }
  354. .messagelist thead tr th.attachment span.attachment {
  355. background-position: -24px -996px;
  356. }
  357. .messagelist tbody tr td.attachment span.report {
  358. background-position: -24px -1116px;
  359. }
  360. .messagelist thead tr th.priority span.priority {
  361. background-position: -25px -1845px;
  362. }
  363. .messagelist tr td.priority span.prio5 {
  364. background-position: -2px -1905px;
  365. }
  366. .messagelist tr td.priority span.prio4 {
  367. background-position: -2px -1885px;
  368. }
  369. .messagelist tr td.priority span.prio2 {
  370. background-position: -2px -1865px;
  371. }
  372. .messagelist tr td.priority span.prio1 {
  373. background-position: -2px -1845px;
  374. }
  375. .messagelist tbody tr td.flag span.flagged {
  376. background-position: 0 -1036px;
  377. }
  378. .messagelist thead tr th.flag span.flagged {
  379. background-position: -22px -1037px;
  380. }
  381. .messagelist tr:hover td.status span.msgicon {
  382. background-position: -23px -1057px;
  383. }
  384. .messagelist tr:hover td.flag span.unflagged {
  385. background-position: -23px -1076px;
  386. }
  387. .messagelist tr td.subject span.msgicon,
  388. .messagelist tr td.subject span.unreadchildren {
  389. background-position: 0 -1056px;
  390. margin: 0 1px 0 0;
  391. width: 24px;
  392. }
  393. .messagelist tr td.subject span.replied {
  394. background-position: 0 -1076px;
  395. }
  396. .messagelist tr td.subject span.forwarded {
  397. background-position: 0 -1096px;
  398. }
  399. .messagelist tr td.subject span.replied.forwarded {
  400. background-position: 0 -1116px;
  401. }
  402. .messagelist tr td.status span.msgicon,
  403. .messagelist tr td.flag span.unflagged,
  404. .messagelist tr td.status span.unreadchildren {
  405. background-position: 0 1056px; /* no icon */
  406. }
  407. /*
  408. .messagelist tr td.status span.msgicon:hover {
  409. background-position: 0 -272px;
  410. }
  411. */
  412. .messagelist tr td.status span.deleted,
  413. .messagelist tr:hover td.status span.deleted,
  414. .messagelist tr td.subject span.deleted {
  415. background-position: -21px -1096px;
  416. }
  417. .messagelist tr td.status span.status,
  418. .messagelist tr td.status span.unread,
  419. .messagelist tr td.subject span.unread,
  420. .messagelist tr td.status span.unread:hover {
  421. background-position: 0 -1017px !important;
  422. }
  423. .messagelist thead tr th.status span.status {
  424. background-position: -23px -1017px;
  425. }
  426. .messagelist tr td div.collapsed {
  427. background-position: 0 -1137px;
  428. cursor: pointer;
  429. }
  430. .messagelist tr td div.expanded {
  431. background-position: 0 -1157px;
  432. cursor: pointer;
  433. }
  434. .messagelist tr th.threads .listmenu {
  435. background-position: 4px -972px;
  436. cursor: pointer;
  437. width: 24px;
  438. height: 21px;
  439. overflow: hidden;
  440. text-indent: -5000px;
  441. margin: -3px -5px -2px -6px;
  442. padding: 3px 5px 2px 6px;
  443. }
  444. .messagelist tr th.threads .listmenu:focus {
  445. background-color: rgba(73,180,210,0.7);
  446. outline: none;
  447. }
  448. .messagelist thead tr th.subject,
  449. .messagelist tbody tr td.subject {
  450. width: 99%;
  451. white-space: nowrap;
  452. }
  453. .messagelist tbody tr td.subject a {
  454. cursor: default;
  455. vertical-align: middle; /* #1487091 */
  456. }
  457. /* thread parent message with unread children */
  458. .messagelist tbody tr.unroot td.subject a {
  459. text-decoration: underline;
  460. }
  461. /**** tree indicators ****/
  462. .messagelist tbody tr td span.branch div {
  463. display: inline-block;
  464. }
  465. .messagelist tbody tr td span.branch div.tree {
  466. width: 15px;
  467. }
  468. #listoptions ul.proplist {
  469. min-width: 16em;
  470. }
  471. /**** message view ****/
  472. #mailpreviewframe {
  473. display: none;
  474. position: absolute;
  475. top: 0;
  476. left: 0;
  477. width: 100%;
  478. bottom: 0px;
  479. }
  480. #messagecontframe {
  481. border: 0;
  482. border-radius: 4px;
  483. }
  484. #messagecontent {
  485. position: absolute;
  486. top: 110px;
  487. left: 0;
  488. width: 100%;
  489. bottom: 1px;
  490. overflow: auto;
  491. -webkit-overflow-scrolling: touch;
  492. }
  493. #messageheader,
  494. #composeheaders {
  495. position: relative;
  496. padding: 3px 0;
  497. background: #f9f9f9;
  498. background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  499. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
  500. background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  501. background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  502. background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  503. border-bottom: 1px solid #dfdfdf;
  504. }
  505. #mailview-right #messageheader {
  506. border-radius: 4px 4px 0 0;
  507. padding-left: 78px;
  508. /* avoid headers eating up all the vertical space */
  509. max-height: 50%;
  510. overflow: auto;
  511. }
  512. h2.subject {
  513. font-size: 15px;
  514. margin: 0 15em 0 0;
  515. padding: 4px 8px 2px 8px;
  516. white-space: nowrap;
  517. overflow: hidden;
  518. text-overflow: ellipsis;
  519. }
  520. #mailview-right #messageheader h2.subject {
  521. margin-left: -56px;
  522. }
  523. h3.subject {
  524. font-size: 14px;
  525. margin: 0 15em 0 0;
  526. padding: 8px 8px 4px 8px;
  527. white-space: nowrap;
  528. overflow: hidden;
  529. text-overflow: ellipsis;
  530. }
  531. .headers-table td {
  532. color: #666;
  533. padding: 1px 8px;
  534. }
  535. .headers-table td.header,
  536. .ui-dialog-content.popup span.adr {
  537. font-weight: bold;
  538. }
  539. .headers-table td.header-title {
  540. white-space: nowrap;
  541. }
  542. .headers-table td.header a,
  543. .ui-dialog-content.popup span.adr a {
  544. color: #666;
  545. text-decoration: none;
  546. }
  547. .headers-table td.header a:hover,
  548. .ui-dialog-content.popup span.adr a:hover {
  549. text-decoration: underline;
  550. }
  551. .headers-table td.subject {
  552. color: #333;
  553. font-weight: bold;
  554. }
  555. .headers-table td.header span,
  556. .ui-dialog-content.popup span.adr {
  557. white-space: nowrap;
  558. }
  559. .headers-table td.header a.morelink {
  560. color: #0069a6;
  561. white-space: nowrap;
  562. font-weight: normal;
  563. }
  564. .rcmaddcontact {
  565. position: relative;
  566. top: 1px;
  567. margin-left: 0.5em;
  568. }
  569. .rcmaddcontact imp {
  570. width: 20px;
  571. height: 13px;
  572. }
  573. #preview-allheaders {
  574. display: none;
  575. }
  576. #preview-allheaders td.header-title,
  577. #preview-shortheaders td.header-title {
  578. padding-left: 0;
  579. }
  580. #preview-shortheaders td.header {
  581. padding-right: 18px;
  582. }
  583. .moreheaderstoggle {
  584. display: block;
  585. position: absolute;
  586. top: 0;
  587. left: 0;
  588. bottom: 0;
  589. width: 18px;
  590. padding: 0;
  591. outline: none;
  592. background: #f2f2f2;
  593. background: -moz-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
  594. background: -webkit-gradient(linear, left top, right top, color-stop(0,#fbfbfb), color-stop(100%,#e9e9e9));
  595. background: -o-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
  596. background: -ms-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
  597. background: linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
  598. border-right: 1px solid #dfdfdf;
  599. border-radius: 3px 0 0 0; /* for Opera */
  600. }
  601. .moreheaderstoggle:focus {
  602. background: #f2f2f2;
  603. background: -moz-linear-gradient(left, #66bcd9 0, #49b3d2 100%);
  604. background: -webkit-gradient(linear, left top, right top, color-stop(0,#66bcd9), color-stop(100%,#49b3d2));
  605. background: -o-linear-gradient(left, #66bcd9 0, #49b3d2 100%);
  606. background: -ms-linear-gradient(left, #66bcd9 0, #49b3d2 100%);
  607. background: linear-gradient(left, #66bcd9 0, #49b3d2 100%);
  608. border-right-color: #149cc5;
  609. }
  610. .moreheaderstoggle .iconlink {
  611. display: inline-block;
  612. position: absolute;
  613. top: 8px;
  614. left: 0;
  615. width: 18px;
  616. height: 16px;
  617. background: url(images/buttons.png?v=32cf.15571) -27px -242px no-repeat;
  618. }
  619. .moreheaderstoggle.remove .iconlink {
  620. top: auto;
  621. bottom: 5px;
  622. background-position: -5px -242px;
  623. }
  624. #full-headers {
  625. position: relative;
  626. }
  627. div.more-headers {
  628. position: absolute;
  629. top: -12px;
  630. right: 10px;
  631. width: 12px;
  632. height: 10px;
  633. cursor: pointer;
  634. background: url(images/buttons.png?v=32cf.15571) center -1579px no-repeat;
  635. }
  636. div.hide-headers {
  637. background-position: center -1590px;
  638. }
  639. #all-headers {
  640. position: relative;
  641. margin: 4px 10px;
  642. padding: 0;
  643. height: 180px;
  644. border: 1px solid #ccc;
  645. border-radius: 4px;
  646. background: #fdfdfd;
  647. box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
  648. -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
  649. }
  650. #headers-source {
  651. display: none;
  652. position: absolute;
  653. top: 0;
  654. left: 0;
  655. right: 0;
  656. bottom: 0;
  657. padding: 3px 6px;
  658. overflow: auto;
  659. text-align: left;
  660. color: #333;
  661. }
  662. #messageheader.previewheader #all-headers {
  663. margin-left: 0;
  664. }
  665. #messageheader.previewheader {
  666. position: relative;
  667. height: auto;
  668. min-height: 52px;
  669. padding: 0 0 3px 72px;
  670. }
  671. #messageheader.previewheader h3.subject {
  672. padding: 8px 8px 2px 0;
  673. }
  674. #messageheader.previewheader #contactphoto {
  675. display: block;
  676. position: absolute;
  677. top: 11px;
  678. left: 30px;
  679. width: 32px;
  680. height: 32px;
  681. overflow: hidden;
  682. background: url(images/contactpic_32px.png?v=6be9.274) center center no-repeat #fff;
  683. border-radius: 3px;
  684. }
  685. #messageheader.previewheader #contactphoto img {
  686. width: 32px;
  687. height: auto;
  688. border-radius: 3px;
  689. }
  690. #messageheader .message-headers {
  691. min-height: 60px;
  692. }
  693. #messageheader #contactphoto {
  694. display: block;
  695. position: absolute;
  696. top: 34px;
  697. left: 30px;
  698. width: 48px;
  699. height: 48px;
  700. overflow: hidden;
  701. border-radius: 4px;
  702. border: 1px solid #e6e6e6;
  703. background: url(images/contactpic_48px.png?v=1bc4.353) center center no-repeat #fff;
  704. }
  705. #messageheader #contactphoto img {
  706. width: 48px;
  707. height: auto;
  708. border-radius: 4px;
  709. }
  710. #messageheader #countcontrols,
  711. #messageheader #formatcontrols {
  712. position: absolute;
  713. top: 8px;
  714. right: 8px;
  715. text-align: right;
  716. white-space: nowrap;
  717. }
  718. #messageheader #formatcontrols {
  719. top: 38px;
  720. right: 8px;
  721. }
  722. #messageheader .pagenav .countdisplay {
  723. padding-right: 0.5em;
  724. white-space: nowrap;
  725. }
  726. #messagecontent .leftcol,
  727. #messagepreview .leftcol {
  728. margin-right: 252px;
  729. }
  730. #messagecontent .rightcol,
  731. #messagepreview .rightcol {
  732. position: absolute;
  733. right: 8px;
  734. width: 230px;
  735. min-height: 200px;
  736. background: #f0f0f0;
  737. padding: 8px;
  738. border-radius: 4px;
  739. z-index: 1;
  740. }
  741. #messagecontent .rightcol {
  742. margin-top: 8px;
  743. }
  744. #messagebody {
  745. position: relative;
  746. margin: 8px;
  747. }
  748. #message-objects div,
  749. #messagebody span.part-notice {
  750. margin: 8px;
  751. }
  752. #message-objects div.notice {
  753. display: block;
  754. color: #960;
  755. border: 1px solid #ffdf0e;
  756. background-color: #fef893;
  757. background-position: 5px -83px;
  758. padding: 6px 12px 6px 30px;
  759. white-space: normal;
  760. }
  761. #message-objects div a.button,
  762. #messagebody span.part-notice a.button {
  763. margin-left: 10px;
  764. margin-top: -1px;
  765. }
  766. div.message-part,
  767. div.message-htmlpart,
  768. div.message-partheaders {
  769. padding: 10px 2px;
  770. border-top: 1px solid #ccc;
  771. }
  772. #messagebody div:first-child {
  773. padding-top: 0;
  774. border-top: 0;
  775. }
  776. div.message-part div.pre {
  777. margin: 0;
  778. padding: 0;
  779. font-family: monospace;
  780. font-size: 12px;
  781. }
  782. div.message-part span.sig {
  783. color: #666;
  784. }
  785. div.message-part blockquote {
  786. color: blue;
  787. border-left: 2px solid blue;
  788. border-right: 2px solid blue;
  789. background-color: #F6F6F6;
  790. margin: 2px 0;
  791. padding: 0 0.4em;
  792. overflow: hidden;
  793. text-overflow: ellipsis;
  794. }
  795. div.message-part blockquote blockquote {
  796. color: green;
  797. border-left: 2px solid green;
  798. border-right: 2px solid green;
  799. }
  800. div.message-part blockquote blockquote blockquote {
  801. color: #900;
  802. border-left: 2px solid #b00;
  803. border-right: 2px solid #b00;
  804. }
  805. div.message-partheaders {
  806. margin-top: 8px;
  807. padding: 8px 0;
  808. }
  809. div.message-partheaders .headers-table {
  810. width: 100%;
  811. }
  812. div.message-partheaders .headers-table td.header-title {
  813. width: 1%;
  814. padding-left: 0;
  815. vertical-align: top;
  816. }
  817. div.message-partheaders .headers-table td.header {
  818. width: 99%;
  819. }
  820. #messagebody > hr {
  821. color: #fff;
  822. background: #fff;
  823. border: 0;
  824. border-bottom: 2px solid #f0f0f0;
  825. }
  826. #messagebody fieldset.image-attachment {
  827. border: 0;
  828. border-top: 1px solid #ccc;
  829. margin-top: 1em;
  830. }
  831. #messagebody fieldset.image-attachment p > img {
  832. max-width: 80%;
  833. }
  834. #messagebody legend.image-filename {
  835. color: #999;
  836. font-size: 0.9em;
  837. margin: 0 1em;
  838. }
  839. #messagebody p.image-attachment {
  840. position: relative;
  841. padding: 1em;
  842. margin-bottom: 0;
  843. border-top: 1px solid #ccc;
  844. }
  845. #messagebody p.image-attachment a.image-link {
  846. float: left;
  847. display: block;
  848. margin-right: 2em;
  849. min-width: 160px;
  850. min-height: 60px;
  851. text-align: center;
  852. }
  853. #messagebody p.image-attachment .image-filename {
  854. display: block;
  855. font-weight: bold;
  856. line-height: 1.6em;
  857. }
  858. #messagebody p.image-attachment .image-filesize {
  859. padding-right: 1em;
  860. }
  861. #messagebody p.image-attachment .attachment-links a {
  862. margin-right: 0.6em;
  863. }
  864. #messagepartcontainer {
  865. position: absolute;
  866. top: 0;
  867. left: 232px;
  868. right: 0;
  869. bottom: 0;
  870. }
  871. #messagepartframe {
  872. border: 0;
  873. width: 100%;
  874. height: 100%;
  875. }
  876. #messagepartheader {
  877. position: absolute;
  878. top: 0;
  879. left: 0;
  880. width: 220px;
  881. bottom: 0;
  882. }
  883. #messagepartheader table {
  884. table-layout: fixed;
  885. overflow: hidden;
  886. }
  887. #messagepartheader table td {
  888. text-overflow: ellipsis;
  889. overflow: hidden;
  890. }
  891. #messagepartheader table td.title {
  892. width: 60px;
  893. padding-right: 0;
  894. }
  895. /*** message composition ***/
  896. #composeview-left {
  897. position: absolute;
  898. top: 0;
  899. left: 0;
  900. width: 200px;
  901. bottom: 0;
  902. }
  903. #composeview-right {
  904. position: absolute;
  905. top: 0;
  906. left: 212px;
  907. right: 0;
  908. bottom: 0;
  909. }
  910. #compose-contacts {
  911. position: absolute;
  912. top: 0;
  913. left: 0;
  914. width: 100%;
  915. bottom: 0;
  916. }
  917. #compose-contacts .listsearchbox {
  918. display: block;
  919. }
  920. #compose-contacts #directorylist {
  921. border-bottom: 4px solid #c7e3ef;
  922. }
  923. #compose-contacts .scroller {
  924. top: 65px;
  925. border-top: 1px solid #fff;
  926. }
  927. #contacts-table {
  928. table-layout: fixed;
  929. }
  930. #contacts-table td {
  931. width: 100%;
  932. }
  933. #contacts-table td span {
  934. display: block;
  935. }
  936. #contacts-table td span.email {
  937. display: inline;
  938. color: #69939e;
  939. font-style: italic;
  940. margin-left: 0.5em;
  941. }
  942. #compose-contacts li a,
  943. #contacts-table td {
  944. background-image: url(images/listicons.png?v=1877.13442);
  945. background-position: -100px 0;
  946. background-repeat: no-repeat;
  947. overflow: hidden;
  948. text-overflow: ellipsis;
  949. }
  950. #compose-contacts li a {
  951. padding-left: 36px;
  952. }
  953. #contacts-table td.contactgroup a {
  954. color: #376572;
  955. text-decoration: none;
  956. }
  957. #contacts-table td.contactgroup a span {
  958. display: inline-block;
  959. font-size: 16px;
  960. font-weight: bold;
  961. line-height: 11px;
  962. margin-left: 0.3em;
  963. }
  964. #contacts-table tr:first-child td {
  965. border-top: 0;
  966. }
  967. #compose-contacts li.addressbook a {
  968. background-position: 6px -766px;
  969. }
  970. #compose-contacts li.addressbook a:focus,
  971. #compose-contacts li.addressbook.selected a {
  972. background-position: 6px -791px;
  973. }
  974. #contacts-table td.contactgroup {
  975. background-position: 6px -1555px;
  976. }
  977. #contacts-table tr.selected td.contactgroup {
  978. background-position: 6px -1579px;
  979. }
  980. #contacts-table td.contact {
  981. background-position: 6px -1603px;
  982. }
  983. #contacts-table tr.selected td.contact {
  984. background-position: 6px -1627px;
  985. }
  986. #compose-content {
  987. position: absolute;
  988. top: 0;
  989. left: 0;
  990. right: 0;
  991. bottom: 0px;
  992. overflow: hidden;
  993. }
  994. #composeheaders {
  995. border-radius: 4px 4px 0 0;
  996. padding-left: 19px;
  997. }
  998. #composebuttons {
  999. position: absolute;
  1000. top: 6px;
  1001. right: 6px;
  1002. width: auto;
  1003. white-space: nowrap;
  1004. z-index: 100;
  1005. }
  1006. #composebuttons a.button.extwin {
  1007. padding: 2px 3px;
  1008. }
  1009. .compose-headers {
  1010. width: 99%;
  1011. margin-bottom: 2px;
  1012. }
  1013. .compose-headers td {
  1014. padding: 2px 4px;
  1015. }
  1016. .compose-headers td.title {
  1017. width: 11%;
  1018. white-space: nowrap;
  1019. padding-left: 6px;
  1020. }
  1021. .compose-headers td.title label {
  1022. float: left;
  1023. }
  1024. .compose-headers td.title a.iconbutton {
  1025. float: right;
  1026. position: relative;
  1027. top: -2px;
  1028. width: 15px;
  1029. }
  1030. .compose-headers td.editfield {
  1031. width: 90%;
  1032. padding-left: 4px;
  1033. }
  1034. .compose-headers td.editfield a.iconlink {
  1035. margin-left: 0.5em;
  1036. }
  1037. .compose-headers td.formlinks {
  1038. padding: 0 4px;
  1039. }
  1040. .compose-headers td.top {
  1041. vertical-align: top;
  1042. padding-top: 10px;
  1043. }
  1044. .compose-headers td textarea,
  1045. .compose-headers td input {
  1046. width: 100%;
  1047. resize: none;
  1048. }
  1049. #compose-cc, #compose-bcc, #compose-replyto, #compose-followupto {
  1050. display: none;
  1051. }
  1052. #composeoptions {
  1053. display: none;
  1054. padding: 2px 0 0 8px;
  1055. white-space: normal;
  1056. border-top: 1px solid #dfdfdf;
  1057. box-shadow: inset 0 1px 0 0 #fff;
  1058. -webkit-box-shadow: inset 0 1px 0 0 #fff;
  1059. }
  1060. .composeoption {
  1061. color: #666;
  1062. padding-right: 22px;
  1063. white-space: nowrap;
  1064. }
  1065. #composeoptions .composeoption {
  1066. display: inline-block;
  1067. padding: 4px 22px 4px 0;
  1068. }
  1069. #composeoptions .composeoption:last-child {
  1070. padding-right: 4px;
  1071. }
  1072. .mozilla .composeoption input {
  1073. vertical-align: -3px;
  1074. }
  1075. #composeview-bottom {
  1076. position: relative;
  1077. width: 100%;
  1078. height: 200px;
  1079. }
  1080. #composebodycontainer {
  1081. position: absolute;
  1082. top: 0;
  1083. left: 0;
  1084. right: 260px;
  1085. bottom: 0;
  1086. border-radius: 0 0 0 4px;
  1087. }
  1088. #composebodycontainer.buttons {
  1089. bottom: 42px;
  1090. }
  1091. #composebodycontainer.mailvelope {
  1092. right: 0;
  1093. z-index: 10;
  1094. }
  1095. #composebodycontainer.mailvelope > iframe[scrolling='no'] {
  1096. position: relative;
  1097. top: -12px;
  1098. }
  1099. #composebody {
  1100. position: absolute;
  1101. top: 0;
  1102. left: 0;
  1103. bottom: 0;
  1104. width: 99%;
  1105. border: 0;
  1106. border-radius: 0 0 0 4px;
  1107. padding: 4px;
  1108. resize: none;
  1109. font-family: monospace;
  1110. font-size: 9pt;
  1111. outline: none;
  1112. box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
  1113. -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
  1114. }
  1115. #composebody:active,
  1116. #composebody:focus {
  1117. box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
  1118. -webkit-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
  1119. }
  1120. #compose-attachments {
  1121. position: absolute;
  1122. right: 0;
  1123. top: 1px;
  1124. bottom: 0;
  1125. width: 240px;
  1126. background: #f0f0f0;
  1127. border-style: solid;
  1128. border-color: #f0f0f0 #f0f0f0 #f0f0f0 #ddd;
  1129. border-width: 1px;
  1130. padding: 8px;
  1131. overflow: auto;
  1132. }
  1133. #compose-attachments.droptarget {
  1134. background-image: url(images/filedrop.png?v=ba79.421);
  1135. background-position: center bottom;
  1136. background-repeat: no-repeat;
  1137. }
  1138. #compose-attachments.droptarget.hover,
  1139. #compose-attachments.droptarget.active {
  1140. border-color: #019bc6;
  1141. box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
  1142. -webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
  1143. }
  1144. #compose-attachments.droptarget.hover {
  1145. background-color: #d9ecf4;
  1146. box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
  1147. -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
  1148. }
  1149. #compose-attachments .attachment-size {
  1150. color: #888;
  1151. }
  1152. #composeview-bottom .formbuttons.floating {
  1153. position: absolute;
  1154. width: auto;
  1155. right: 260px;
  1156. z-index: 200;
  1157. padding-bottom: 8px;
  1158. }
  1159. #composebodycontainer .mce-tinymce {
  1160. border: 0 !important;
  1161. margin-top: 1px;
  1162. }
  1163. #composebodycontainer .mce-panel {
  1164. border-color: #ccc !important;
  1165. background: #f0f0f0;
  1166. }
  1167. #composebody_toolbargroup {
  1168. border-bottom: 1px solid #ddd;
  1169. }
  1170. #uploadform a.iconlink {
  1171. margin-left: 1em;
  1172. text-indent: -5000px;
  1173. }
  1174. #uploadform form div {
  1175. margin: 4px 0;
  1176. }
  1177. .mailvelopekeyimport div.key {
  1178. position: relative;
  1179. margin-bottom: 2px;
  1180. padding: 1em;
  1181. background-color: #ebebeb;
  1182. }
  1183. .mailvelopekeyimport div.key.revoked,
  1184. .mailvelopekeyimport div.key.disabled {
  1185. color: #a0a0a0;
  1186. }
  1187. .mailvelopekeyimport div.key label {
  1188. display: inline-block;
  1189. margin-right: 0.5em;
  1190. }
  1191. .mailvelopekeyimport div.key label:after {
  1192. content: ":";
  1193. }
  1194. .mailvelopekeyimport div.key label + a,
  1195. .mailvelopekeyimport div.key label + span {
  1196. display: inline-block;
  1197. margin-right: 2em;
  1198. white-space: nowrap;
  1199. }
  1200. .mailvelopekeyimport div.key label + a {
  1201. font-weight: bold;
  1202. }
  1203. .mailvelopekeyimport ul.uids {
  1204. margin: 1em 0 0 0;
  1205. padding: 0;
  1206. }
  1207. .mailvelopekeyimport li.uid {
  1208. border: 0;
  1209. padding: 0.3em;
  1210. }
  1211. .mailvelopekeyimport div.key input.button.importkey {
  1212. position: absolute;
  1213. top: 0.8em;
  1214. right: 0.8em;
  1215. padding: 4px 6px;
  1216. }
  1217. .mailvelopekeyimport div.key input.button[disabled] {
  1218. display: none;
  1219. }