widgets.css 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562
  1. /* SELECTOR (FILTER INTERFACE) */
  2. .selector {
  3. width: 580px;
  4. float: left;
  5. }
  6. .selector select {
  7. width: 270px;
  8. height: 17.2em;
  9. }
  10. .selector-available, .selector-chosen {
  11. float: left;
  12. width: 270px;
  13. text-align: center;
  14. margin-bottom: 5px;
  15. }
  16. .selector-chosen select {
  17. border-top: none;
  18. }
  19. .selector-available h2, .selector-chosen h2 {
  20. border: 1px solid #ccc;
  21. }
  22. .selector .selector-available h2 {
  23. background: white url(../img/nav-bg.gif) bottom left repeat-x;
  24. color: #666;
  25. }
  26. .selector .selector-filter {
  27. background: white;
  28. border: 1px solid #ccc;
  29. border-width: 0 1px;
  30. padding: 3px;
  31. color: #999;
  32. font-size: 10px;
  33. margin: 0;
  34. text-align: left;
  35. }
  36. .selector .selector-filter label {
  37. width: 16px;
  38. padding: 2px;
  39. }
  40. .selector .selector-available input {
  41. width: 230px;
  42. }
  43. .selector ul.selector-chooser {
  44. float: left;
  45. width: 22px;
  46. height: 50px;
  47. background: url(../img/chooser-bg.gif) top center no-repeat;
  48. margin: 10em 5px 0 5px;
  49. padding: 0;
  50. }
  51. .selector-chooser li {
  52. margin: 0;
  53. padding: 3px;
  54. list-style-type: none;
  55. }
  56. .selector select {
  57. margin-bottom: 10px;
  58. margin-top: 0;
  59. }
  60. .selector-add, .selector-remove {
  61. width: 16px;
  62. height: 16px;
  63. display: block;
  64. text-indent: -3000px;
  65. overflow: hidden;
  66. }
  67. .selector-add {
  68. background: url(../img/selector-icons.gif) 0 -161px no-repeat;
  69. cursor: default;
  70. margin-bottom: 2px;
  71. }
  72. .active.selector-add {
  73. background: url(../img/selector-icons.gif) 0 -187px no-repeat;
  74. cursor: pointer;
  75. }
  76. .selector-remove {
  77. background: url(../img/selector-icons.gif) 0 -109px no-repeat;
  78. cursor: default;
  79. }
  80. .active.selector-remove {
  81. background: url(../img/selector-icons.gif) 0 -135px no-repeat;
  82. cursor: pointer;
  83. }
  84. a.selector-chooseall, a.selector-clearall {
  85. display: inline-block;
  86. text-align: left;
  87. margin-left: auto;
  88. margin-right: auto;
  89. font-weight: bold;
  90. color: #666;
  91. }
  92. a.selector-chooseall {
  93. padding: 3px 18px 3px 0;
  94. }
  95. a.selector-clearall {
  96. padding: 3px 0 3px 18px;
  97. }
  98. a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
  99. color: #036;
  100. }
  101. a.selector-chooseall {
  102. background: url(../img/selector-icons.gif) right -263px no-repeat;
  103. cursor: default;
  104. }
  105. a.active.selector-chooseall {
  106. background: url(../img/selector-icons.gif) right -289px no-repeat;
  107. cursor: pointer;
  108. }
  109. a.selector-clearall {
  110. background: url(../img/selector-icons.gif) left -211px no-repeat;
  111. cursor: default;
  112. }
  113. a.active.selector-clearall {
  114. background: url(../img/selector-icons.gif) left -237px no-repeat;
  115. cursor: pointer;
  116. }
  117. /* STACKED SELECTORS */
  118. .stacked {
  119. float: left;
  120. width: 500px;
  121. }
  122. .stacked select {
  123. width: 480px;
  124. height: 10.1em;
  125. }
  126. .stacked .selector-available, .stacked .selector-chosen {
  127. width: 480px;
  128. }
  129. .stacked .selector-available {
  130. margin-bottom: 0;
  131. }
  132. .stacked .selector-available input {
  133. width: 442px;
  134. }
  135. .stacked ul.selector-chooser {
  136. height: 22px;
  137. width: 50px;
  138. margin: 0 0 3px 40%;
  139. background: url(../img/chooser_stacked-bg.gif) top center no-repeat;
  140. }
  141. .stacked .selector-chooser li {
  142. float: left;
  143. padding: 3px 3px 3px 5px;
  144. }
  145. .stacked .selector-chooseall, .stacked .selector-clearall {
  146. display: none;
  147. }
  148. .stacked .selector-add {
  149. background: url(../img/selector-icons.gif) 0 -57px no-repeat;
  150. cursor: default;
  151. }
  152. .stacked .active.selector-add {
  153. background: url(../img/selector-icons.gif) 0 -83px no-repeat;
  154. cursor: pointer;
  155. }
  156. .stacked .selector-remove {
  157. background: url(../img/selector-icons.gif) 0 -5px no-repeat;
  158. cursor: default;
  159. }
  160. .stacked .active.selector-remove {
  161. background: url(../img/selector-icons.gif) 0 -31px no-repeat;
  162. cursor: pointer;
  163. }
  164. /* DATE AND TIME */
  165. p.datetime {
  166. line-height: 20px;
  167. margin: 0;
  168. padding: 0;
  169. color: #666;
  170. font-size: 11px;
  171. font-weight: bold;
  172. }
  173. .datetime span {
  174. font-size: 11px;
  175. color: #ccc;
  176. font-weight: normal;
  177. white-space: nowrap;
  178. }
  179. table p.datetime {
  180. font-size: 10px;
  181. margin-left: 0;
  182. padding-left: 0;
  183. }
  184. /* FILE UPLOADS */
  185. p.file-upload {
  186. line-height: 20px;
  187. margin: 0;
  188. padding: 0;
  189. color: #666;
  190. font-size: 11px;
  191. font-weight: bold;
  192. }
  193. .file-upload a {
  194. font-weight: normal;
  195. }
  196. .file-upload .deletelink {
  197. margin-left: 5px;
  198. }
  199. span.clearable-file-input label {
  200. color: #333;
  201. font-size: 11px;
  202. display: inline;
  203. float: none;
  204. }
  205. /* CALENDARS & CLOCKS */
  206. .calendarbox, .clockbox {
  207. margin: 5px auto;
  208. font-size: 11px;
  209. width: 16em;
  210. text-align: center;
  211. background: white;
  212. position: relative;
  213. }
  214. .clockbox {
  215. width: auto;
  216. }
  217. .calendar {
  218. margin: 0;
  219. padding: 0;
  220. }
  221. .calendar table {
  222. margin: 0;
  223. padding: 0;
  224. border-collapse: collapse;
  225. background: white;
  226. width: 100%;
  227. }
  228. .calendar caption, .calendarbox h2 {
  229. margin: 0;
  230. font-size: 11px;
  231. text-align: center;
  232. border-top: none;
  233. }
  234. .calendar th {
  235. font-size: 10px;
  236. color: #666;
  237. padding: 2px 3px;
  238. text-align: center;
  239. background: #e1e1e1 url(../img/nav-bg.gif) 0 50% repeat-x;
  240. border-bottom: 1px solid #ddd;
  241. }
  242. .calendar td {
  243. font-size: 11px;
  244. text-align: center;
  245. padding: 0;
  246. border-top: 1px solid #eee;
  247. border-bottom: none;
  248. }
  249. .calendar td.selected a {
  250. background: #C9DBED;
  251. }
  252. .calendar td.nonday {
  253. background: #efefef;
  254. }
  255. .calendar td.today a {
  256. background: #ffc;
  257. }
  258. .calendar td a, .timelist a {
  259. display: block;
  260. font-weight: bold;
  261. padding: 4px;
  262. text-decoration: none;
  263. color: #444;
  264. }
  265. .calendar td a:hover, .timelist a:hover {
  266. background: #5b80b2;
  267. color: white;
  268. }
  269. .calendar td a:active, .timelist a:active {
  270. background: #036;
  271. color: white;
  272. }
  273. .calendarnav {
  274. font-size: 10px;
  275. text-align: center;
  276. color: #ccc;
  277. margin: 0;
  278. padding: 1px 3px;
  279. }
  280. .calendarnav a:link, #calendarnav a:visited, #calendarnav a:hover {
  281. color: #999;
  282. }
  283. .calendar-shortcuts {
  284. background: white;
  285. font-size: 10px;
  286. line-height: 11px;
  287. border-top: 1px solid #eee;
  288. padding: 3px 0 4px;
  289. color: #ccc;
  290. }
  291. .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
  292. display: block;
  293. position: absolute;
  294. font-weight: bold;
  295. font-size: 12px;
  296. background: #C9DBED url(../img/default-bg.gif) bottom left repeat-x;
  297. padding: 1px 4px 2px 4px;
  298. color: white;
  299. }
  300. .calendarnav-previous:hover, .calendarnav-next:hover {
  301. background: #036;
  302. }
  303. .calendarnav-previous {
  304. top: 0;
  305. left: 0;
  306. }
  307. .calendarnav-next {
  308. top: 0;
  309. right: 0;
  310. }
  311. .calendar-cancel {
  312. margin: 0 !important;
  313. padding: 0 !important;
  314. font-size: 10px;
  315. background: #e1e1e1 url(../img/nav-bg.gif) 0 50% repeat-x;
  316. border-top: 1px solid #ddd;
  317. }
  318. .calendar-cancel:hover {
  319. background: #e1e1e1 url(../img/nav-bg-reverse.gif) 0 50% repeat-x;
  320. }
  321. .calendar-cancel a {
  322. color: black;
  323. display: block;
  324. }
  325. ul.timelist, .timelist li {
  326. list-style-type: none;
  327. margin: 0;
  328. padding: 0;
  329. }
  330. .timelist a {
  331. padding: 2px;
  332. }
  333. /* INLINE ORDERER */
  334. ul.orderer {
  335. position: relative;
  336. padding: 0 !important;
  337. margin: 0 !important;
  338. list-style-type: none;
  339. }
  340. ul.orderer li {
  341. list-style-type: none;
  342. display: block;
  343. padding: 0;
  344. margin: 0;
  345. border: 1px solid #bbb;
  346. border-width: 0 1px 1px 0;
  347. white-space: nowrap;
  348. overflow: hidden;
  349. background: #e2e2e2 url(../img/nav-bg-grabber.gif) repeat-y;
  350. }
  351. ul.orderer li:hover {
  352. cursor: move;
  353. background-color: #ddd;
  354. }
  355. ul.orderer li a.selector {
  356. margin-left: 12px;
  357. overflow: hidden;
  358. width: 83%;
  359. font-size: 10px !important;
  360. padding: 0.6em 0;
  361. }
  362. ul.orderer li a:link, ul.orderer li a:visited {
  363. color: #333;
  364. }
  365. ul.orderer li .inline-deletelink {
  366. position: absolute;
  367. right: 4px;
  368. margin-top: 0.6em;
  369. }
  370. ul.orderer li.selected {
  371. background-color: #f8f8f8;
  372. border-right-color: #f8f8f8;
  373. }
  374. ul.orderer li.deleted {
  375. background: #bbb url(../img/deleted-overlay.gif);
  376. }
  377. ul.orderer li.deleted a:link, ul.orderer li.deleted a:visited {
  378. color: #888;
  379. }
  380. ul.orderer li.deleted .inline-deletelink {
  381. background-image: url(../img/inline-restore.png);
  382. }
  383. ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover {
  384. cursor: default;
  385. }
  386. /* EDIT INLINE */
  387. .inline-deletelink {
  388. float: right;
  389. text-indent: -9999px;
  390. background: transparent url(../img/inline-delete.png) no-repeat;
  391. width: 15px;
  392. height: 15px;
  393. border: 0px none;
  394. outline: 0; /* Remove dotted border around link */
  395. }
  396. .inline-deletelink:hover {
  397. background-position: -15px 0;
  398. cursor: pointer;
  399. }
  400. .editinline button.addlink {
  401. border: 0px none;
  402. color: #5b80b2;
  403. font-size: 100%;
  404. cursor: pointer;
  405. }
  406. .editinline button.addlink:hover {
  407. color: #036;
  408. cursor: pointer;
  409. }
  410. .editinline table .help {
  411. text-align: right;
  412. float: right;
  413. padding-left: 2em;
  414. }
  415. .editinline tfoot .addlink {
  416. white-space: nowrap;
  417. }
  418. .editinline table thead th:last-child {
  419. border-left: none;
  420. }
  421. .editinline tr.deleted {
  422. background: #ddd url(../img/deleted-overlay.gif);
  423. }
  424. .editinline tr.deleted .inline-deletelink {
  425. background-image: url(../img/inline-restore.png);
  426. }
  427. .editinline tr.deleted td:hover {
  428. cursor: default;
  429. }
  430. .editinline tr.deleted td:first-child {
  431. background-image: none !important;
  432. }
  433. /* EDIT INLINE - STACKED */
  434. .editinline-stacked {
  435. min-width: 758px;
  436. }
  437. .editinline-stacked .inline-object {
  438. margin-left: 210px;
  439. background: white;
  440. }
  441. .editinline-stacked .inline-source {
  442. float: left;
  443. width: 200px;
  444. background: #f8f8f8;
  445. }
  446. .editinline-stacked .inline-splitter {
  447. float: left;
  448. width: 9px;
  449. background: #f8f8f8 url(../img/inline-splitter-bg.gif) 50% 50% no-repeat;
  450. border-right: 1px solid #ccc;
  451. }
  452. .editinline-stacked .controls {
  453. clear: both;
  454. background: #e1e1e1 url(../img/nav-bg.gif) top left repeat-x;
  455. padding: 3px 4px;
  456. font-size: 11px;
  457. border-top: 1px solid #ddd;
  458. }