/static/june_2007_style/base.css.tmpl

https://bitbucket.org/cistrome/cistrome-harvard/ · Go Template · 971 lines · 820 code · 151 blank · 0 comment · 0 complexity · 647f6de598db707f6fc385f13098ba35 MD5 · raw file

  1. ## Lucida Grande for proper mac unicode characters, verdana/arial stack for others
  2. body{font:13px/1.231 "Lucida Grande",verdana,arial,helvetica,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% "Lucida Grande",verdana,arial,helvetica,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
  3. body{font-size:75%;}
  4. ## Mixins
  5. .unselectable {
  6. user-select: none;
  7. -moz-user-select: none;
  8. -webkit-user-select: none;
  9. }
  10. .shadow {
  11. -moz-box-shadow: 0 3px 30px black;
  12. -webkit-box-shadow: 0 3px 30px black;
  13. }
  14. ## Real styles
  15. body {
  16. background: $base_bg_bottom;
  17. color: $base_text;
  18. background-image: url(base_bg.png);
  19. background-repeat: repeat-x;
  20. background-position: top;
  21. margin: 10px;
  22. }
  23. img {
  24. border: 0;
  25. }
  26. a:link, a:visited, a:active {
  27. color: $link_text;
  28. }
  29. h1, h2, h3, h4 {
  30. color: $header_text;
  31. /*text-shadow: #bbb 2px 2px 1px;*/
  32. }
  33. h1:first-child, h2:first-child, h3:first-child, h4:first-child {
  34. margin-top: 0px;
  35. }
  36. hr {
  37. border: none;
  38. height: 0px;
  39. border-bottom: dotted $base_text 1px;
  40. }
  41. table {
  42. border-collapse: collapse;
  43. }
  44. th {
  45. text-align: left;
  46. }
  47. div.toolForm {
  48. border: solid $form_border 1px;
  49. }
  50. div.toolFormTitle {
  51. font-weight: bold;
  52. padding: 5px;
  53. padding-left: 10px;
  54. padding-right: 10px;
  55. background: $form_title_bg_bottom;
  56. ## background-image: url(form_title_bg.png);
  57. background-repeat: repeat-x;
  58. background-position: top;
  59. border-bottom: solid $form_border 1px;
  60. }
  61. div.toolParamHelp {
  62. color: #666;
  63. }
  64. div.toolParamHelp a {
  65. color: #666;
  66. }
  67. div.toolFormBody {
  68. background: $form_body_bg_bottom;
  69. background-image: url(form_body_bg.png);
  70. background-repeat: repeat-x;
  71. background-position: top;
  72. padding: 5px 0;
  73. }
  74. div.toolFormBody div.toolFormTitle {
  75. background: transparent;
  76. border: none;
  77. font-weight: bold;
  78. border-bottom: solid $form_border 1px;
  79. margin-bottom: 5px;
  80. }
  81. div.toolFormDisabled div.toolFormTitle {
  82. background: ${layout_bg};
  83. border-color: ${layout_border};
  84. }
  85. div.toolFormDisabled {
  86. border-color: ${layout_border};
  87. }
  88. div.toolHelp {
  89. margin-top: 10px;
  90. }
  91. div.toolHelpBody {
  92. width: 100%;
  93. }
  94. div.metadataForm {
  95. border:solid #aaaaaa 1px;
  96. }
  97. div.metadataFormTitle {
  98. font-weight:bold;
  99. padding:5px;
  100. padding-left:10px;
  101. padding-right:10px;
  102. background:#cccccc;
  103. background-repeat:repeat-x;
  104. background-position:top;
  105. border-bottom:solid #aaaaaa 1px;
  106. }
  107. div.metadataFormBody {
  108. background:#FFFFFF;
  109. background-image:url(form_body_bg.png);
  110. background-repeat:repeat-x;
  111. background-position:top;
  112. padding:5px 0;
  113. }
  114. div.metadataFormBody div.metadataFormTitle {
  115. background:transparent;
  116. border:none;
  117. font-weight:bold;
  118. border-bottom:solid #dcb790 1px;
  119. margin-bottom:5px;
  120. }
  121. div.metadataFormDisabled div.metadataFormTitle {
  122. background:#eee;
  123. border-color:#999;
  124. }
  125. div.metadataFormDisabled {
  126. border-color:#999;
  127. }
  128. div.metadataHelpBody {
  129. width:100%;overflow:auto;
  130. }
  131. div.titleRow {
  132. font-weight: bold;
  133. border-bottom: dotted gray 1px;
  134. margin-bottom: 0.5em;
  135. padding-bottom: 0.25em;
  136. }
  137. ## Forms
  138. div.form {
  139. border: solid $form_border 1px;
  140. }
  141. div.form-title {
  142. font-weight: bold;
  143. padding: 5px 10px;
  144. background: $form_title_bg_bottom;
  145. background-image: url(form_title_bg.png);
  146. background-repeat: repeat-x;
  147. background-position: top;
  148. border-bottom: solid $form_border 1px;
  149. }
  150. div.form-body {
  151. padding: 5px 0;
  152. }
  153. div.form-row {
  154. padding: 5px 10px;
  155. }
  156. div.form-title-row {
  157. padding: 5px 10px;
  158. }
  159. div.repeat-group-item {
  160. border-left: solid $form_border 5px;
  161. margin-left: 10px;
  162. margin-bottom: 10px;
  163. }
  164. div.form-row-error {
  165. background: $error_message_bg;
  166. }
  167. div.form-row label {
  168. font-weight: bold;
  169. display: block;
  170. margin-bottom: .2em;
  171. }
  172. div.form-row label.inline {
  173. display: inline;
  174. }
  175. div.form-row-input {
  176. float: left;
  177. }
  178. div.form-row-input label {
  179. font-weight: normal;
  180. display: inline;
  181. }
  182. div.form-row-error-message {
  183. width: 300px;
  184. float: left;
  185. color: red;
  186. font-weight: bold;
  187. padding: 3px 0 0 1em;
  188. }
  189. select, input, textarea {
  190. font: inherit;
  191. }
  192. select, textarea, input[type="text"], input[type="file"], input[type="password"] {
  193. -webkit-box-sizing: border-box;
  194. max-width: 300px;
  195. }
  196. ## Messages
  197. .errormessagelarge, .warningmessagelarge, .donemessagelarge, .infomessagelarge {
  198. padding: 10px;
  199. padding-left: 52px;
  200. min-height: 32px;
  201. border: 1px solid $error_message_border;
  202. background-color: $error_message_bg;
  203. background-image: url(error_message_icon.png);
  204. background-repeat: no-repeat;
  205. background-position: 10px 10px;
  206. }
  207. .warningmessagelarge {
  208. background-image: url(warn_message_icon.png);
  209. border-color: $warn_message_border;
  210. background-color: $warn_message_bg;
  211. }
  212. .donemessagelarge {
  213. background-image: url(done_message_icon.png);
  214. border-color: $done_message_border;
  215. background-color: $done_message_bg;
  216. }
  217. .infomessagelarge {
  218. background-image: url(info_message_icon.png);
  219. border-color: $info_message_border;
  220. background-color: $info_message_bg;
  221. }
  222. .screencastBox {
  223. padding-left: 10px;
  224. border-color: #AAAA66;
  225. background-color: #FFFFCC;
  226. background-image: none;
  227. }
  228. .errormessage, .warningmessage, .donemessage, .infomessage, .errormessagesmall, .warningmessagesmall, .donemessagesmall, .infomessagesmall {
  229. padding: 5px;
  230. padding-left: 25px;
  231. min-height: 15px;
  232. border: 1px solid $error_message_border;
  233. background-color: $error_message_bg;
  234. background-image: url(error_small.png);
  235. background-repeat: no-repeat;
  236. background-position: 5px 5px;
  237. }
  238. .warningmessage, .warningmessagesmall {
  239. background-image: url(warn_small.png);
  240. border-color: $warn_message_border;
  241. background-color: $warn_message_bg;
  242. }
  243. .donemessage, .donemessagesmall {
  244. background-image: url(ok_small.png);
  245. border-color: $done_message_border;
  246. background-color: $done_message_bg;
  247. }
  248. .infomessage, .infomessagesmall {
  249. background-image: url(info_small.png);
  250. border-color: $info_message_border;
  251. background-color: $info_message_bg;
  252. }
  253. .errormark, .warningmark, .donemark, .infomark, .ok_bgr, .err_bgr {
  254. padding-left: 20px;
  255. min-height: 15px;
  256. background: url(error_small.png) no-repeat;
  257. }
  258. .warningmark {
  259. background-image: url(warn_small.png);
  260. }
  261. .donemark {
  262. background-image: url(ok_small.png);
  263. }
  264. .infomark, .ok_bgr {
  265. background-image: url(info_small.png);
  266. }
  267. table.simple {
  268. font-size: 12px;
  269. background: #fff;
  270. margin: 1em;
  271. border-collapse: collapse;
  272. text-align: left;
  273. }
  274. table.simple th {
  275. font-size: 14px;
  276. font-weight: normal;
  277. padding: 10px 8px;
  278. border-bottom: 2px solid #333;
  279. }
  280. table.simple td {
  281. padding: 10px 8px 0px 8px;
  282. }
  283. table.simple tbody tr:hover td {
  284. color: #333;
  285. }
  286. table.tabletip {
  287. width: 100%;
  288. border-collapse: collapse;
  289. text-align: left;
  290. }
  291. table.tabletip th {
  292. white-space: nowrap;
  293. border-bottom: 1px solid #444;
  294. padding-right: 3px;
  295. }
  296. table.tabletip td {
  297. border-bottom: 1px solid #ddd;
  298. }
  299. table.tabletip tbody tr:hover td {
  300. background-color: #eee;
  301. }
  302. table.colored {
  303. border-top: solid $table_border 1px;
  304. border-bottom: solid $table_border 1px;
  305. }
  306. table.colored td, table.colored th {
  307. text-align: left;
  308. padding: 5px;
  309. }
  310. table.colored tr.header {
  311. background: $table_header_bg;
  312. background-image: url(form_title_bg.png);
  313. background-repeat: repeat-x;
  314. background-position: top;
  315. border-bottom: solid $table_border 1px;
  316. font-weight: bold;
  317. }
  318. table.colored tr {
  319. background: $table_row_bg;
  320. }
  321. table.colored tr.odd_row {
  322. background: $odd_row_bg;
  323. }
  324. div.debug {
  325. margin: 10px;
  326. padding: 5px;
  327. background: #FFFF99;
  328. border: solid #FFFF33 1px;
  329. color: black;
  330. }
  331. div.odd_row {
  332. background: $odd_row_bg;
  333. }
  334. #footer {
  335. display: none;
  336. }
  337. ## Tool panel stuff
  338. td.panel-body {
  339. background: white;
  340. color: $base_text;
  341. background: $menu_bg_over url(menu_bg.png) top repeat-x;
  342. }
  343. div.toolSectionPad {
  344. margin: 0;
  345. padding: 0;
  346. height: 5px;
  347. font-size: 0px;
  348. }
  349. div.toolSectionDetailsInner {
  350. margin-left: 5px;
  351. margin-right: 5px;
  352. }
  353. div.toolSectionTitle {
  354. padding-bottom: 0px;
  355. font-weight: bold;
  356. }
  357. div.toolTitle {
  358. padding-top: 5px;
  359. padding-bottom: 5px;
  360. margin-left: 16px;
  361. margin-right: 10px;
  362. display: list-item;
  363. list-style: square outside;
  364. }
  365. span.toolParameterExpandableCollapsable {
  366. font-weight: bold;
  367. cursor: pointer;
  368. }
  369. ul.toolParameterExpandableCollapsable {
  370. list-style: none;
  371. }
  372. ul.manage-table-actions {
  373. float: right;
  374. margin-top: -2.5em;
  375. }
  376. ul.manage-table-actions li {
  377. display: block;
  378. float: left;
  379. margin-left: 0.5em;
  380. }
  381. ## State colors
  382. .state-color-new {
  383. border-color: $history_new_border;
  384. background: $history_new_bg;
  385. }
  386. .state-color-upload {
  387. border-color: $history_upload_border;
  388. background: $history_upload_bg;
  389. }
  390. .state-color-waiting {
  391. border-color: $history_waiting_border;
  392. background: $history_waiting_bg;
  393. }
  394. .state-color-queued {
  395. border-color: $history_queued_border;
  396. background: $history_queued_bg;
  397. }
  398. .state-color-running {
  399. border-color: $history_running_border;
  400. background: $history_running_bg;
  401. }
  402. .state-color-ok {
  403. border-color: $history_ok_border;
  404. background: $history_ok_bg;
  405. }
  406. .state-color-error {
  407. border-color: $history_error_border;
  408. background: $history_error_bg;
  409. }
  410. .state-color-deleted {
  411. border-color: $history_deleted_border;
  412. background: $history_deleted_bg;
  413. }
  414. .state-fg-new {
  415. color: #FFB030;
  416. }
  417. .state-fg-upload {
  418. color: #D090D0;
  419. }
  420. .state-fg-waiting {
  421. color: #E8C060;
  422. }
  423. .state-fg-queued {
  424. color: #888888;
  425. }
  426. .state-fg-running {
  427. color: #AAAA66;
  428. }
  429. .state-fg-ok {
  430. color: #66AA66;
  431. }
  432. .state-fg-error {
  433. color: #AA6666;
  434. }
  435. .state-fg-deleted {
  436. color: #3399FF;
  437. }
  438. ## Button styles
  439. .action-button {
  440. background: transparent;
  441. line-height: 16px;
  442. color: #333;
  443. text-decoration: none;
  444. font-size: 100%;
  445. font-weight: bold;
  446. display: inline-block;
  447. cursor: pointer;
  448. padding: 2px;
  449. border: solid #aaaaaa 1px;
  450. padding-right: 0.5em;
  451. padding-left: 0.5em;
  452. -moz-border-radius: 0.5em;
  453. -webkit-border-radius: 0.5em;
  454. border-radius: 0.5em;
  455. user-select: none;
  456. -moz-user-select: none;
  457. -webkit-user-select: none;
  458. }
  459. .action-button > * {
  460. vertical-align: middle;
  461. }
  462. .action-button:hover {
  463. color: black;
  464. background: #dddddd;
  465. }
  466. .action-button:active {
  467. color: white;
  468. background: #aaaaaa;
  469. }
  470. ## A menu button is a button that has an attached popup menu
  471. .menubutton {
  472. display: inline-block;
  473. cursor: pointer;
  474. position: relative;
  475. .unselectable;
  476. border: solid transparent 1px;
  477. -moz-border-radius: 0.25em;
  478. -webkit-border-radius: 0.25em;
  479. border-radius: 0.25em;
  480. padding: 1px 0.25em;
  481. margin: -1px -0.25em;
  482. .label {
  483. position: relative;
  484. display: block;
  485. border-right: none;
  486. }
  487. }
  488. .menubutton.action-button {
  489. border-color: #aaaaaa;
  490. }
  491. .menubutton.popup, .action-button.popup {
  492. padding-right: 20px;
  493. background-image: url(../images/dropdownarrow.png);
  494. background-repeat: no-repeat;
  495. background-position: right 7px;
  496. }
  497. .menubutton:hover {
  498. border-color: #aaaaaa;
  499. ## background: #eeeeee;
  500. ## color: #333;
  501. }
  502. ## A split menu button, the main button has an action, the arrow causes the
  503. ## popup menu to appear
  504. .menubutton.popup.split {
  505. padding-right: 2em;
  506. }
  507. .menubutton.popup.split:hover {
  508. background: url(../images/ddarrowsplit.png) no-repeat right -39px;
  509. }
  510. ## Popup menu styles
  511. .overlay-border {
  512. position: absolute;
  513. top: 0;
  514. left: 0;
  515. height: 100%;
  516. width: 100%;
  517. padding: 1em;
  518. margin: -1em;
  519. background-color: rgba(0,0,0,0.5);
  520. -moz-border-radius: 1em;
  521. -webkit-border-radius: 1em;
  522. z-index: -1;
  523. }
  524. div.popmenu-wrapper {
  525. position: absolute;
  526. top: 100%;
  527. z-index: 20000;
  528. ul {
  529. display: block;
  530. margin: 0;
  531. padding: 0;
  532. background: white;
  533. color: #333;
  534. font-weight: bold;
  535. font-style: normal;
  536. white-space: nowrap;
  537. border: solid #aaaaaa 1px;
  538. padding: 3px 0;
  539. -moz-border-radius: 0.5em;
  540. -webkit-border-radius: 0.5em;
  541. border-radius: 0.5em;
  542. ## margin: -3px -0.5em;
  543. ## min-width: 100%;
  544. .unselectable;
  545. li {
  546. display: block;
  547. padding: 3px 1em;
  548. cursor: pointer;
  549. border-top: solid transparent 1px;
  550. border-bottom: solid transparent 1px;
  551. }
  552. li.head {
  553. color: #999;
  554. font-style: italic;
  555. }
  556. }
  557. }
  558. div.popmenu-wrapper ul li:hover {
  559. background: #EEEEFF;
  560. border-color: #aaa;
  561. }
  562. div.popmenu-wrapper ul li.head:hover {
  563. background: inherit;
  564. border-color: transparent;
  565. }
  566. .popup-arrow {
  567. cursor: pointer;
  568. text-decoration: none;
  569. color: #555;
  570. }
  571. .popup-arrow:hover {
  572. color: black;
  573. }
  574. div.permissionContainer {
  575. padding-left: 20px;
  576. }
  577. ## Data grid style
  578. .grid-header {
  579. padding-bottom: 1em;
  580. }
  581. .grid-header h2 {
  582. margin: 0;
  583. margin-bottom: 0.5em;
  584. }
  585. .grid-header .title {
  586. font-weight: bold;
  587. }
  588. .grid {
  589. padding-top: 1em;
  590. border-collapse: collapse;
  591. width: 100%;
  592. }
  593. .grid tbody td {
  594. border-top: solid #DDDDDD 1px;
  595. border-bottom: solid #DDDDDD 1px;
  596. padding: 0.3em 0.5em;
  597. }
  598. .grid tbody td:empty {
  599. padding: 0;
  600. }
  601. .grid thead tr {
  602. height: 2em;
  603. }
  604. .grid thead th {
  605. background: $table_header_bg;
  606. ## background-image: url(form_title_bg.png);
  607. background-repeat: repeat-x;
  608. background-position: top;
  609. border-top: solid $table_border 1px;
  610. border-bottom: solid $table_border 1px;
  611. padding: 0.3em 0.5em;
  612. text-align: left;
  613. white-space: nowrap;
  614. }
  615. .grid tfoot td {
  616. background-color: #F8F8F8;
  617. border-top: solid #DDDDDD 1px;
  618. border-bottom: solid #DDDDDD 1px;
  619. padding: 0.3em 0.5em;
  620. }
  621. .grid .current {
  622. background-color: #EEEEFF;
  623. }
  624. ## Styles for areas of text content
  625. .text-content {
  626. hr {
  627. display:block;
  628. background:black;
  629. color:black;
  630. width:100%;
  631. height:1px;
  632. border:none;
  633. background:#aaa;
  634. color:#aaa;
  635. }
  636. table
  637. {
  638. border-collapse:collapse;
  639. border-top:1px solid #ccc;
  640. border-left:1px solid #ccc;
  641. }
  642. blockquote {
  643. color:#666;
  644. }
  645. fieldset {
  646. border-color:#ccc;
  647. border:1px solid #ccc;
  648. }
  649. th,td {
  650. border-bottom:1px solid #ddd;
  651. border-right:1px solid #ccc;
  652. }
  653. th,td {
  654. padding:.8em;
  655. }
  656. }
  657. ## Icon buttons.
  658. .icon-button {
  659. width: 16px;
  660. height: 16px;
  661. display: block;
  662. float: left;
  663. margin-left: 2px;
  664. ## Allow alt text for screen readers
  665. text-indent: 20px;
  666. background-repeat:no-repeat;
  667. background-position: 0px 0px;
  668. padding: 0;
  669. }
  670. .icon-button.display {
  671. -sprite-group: history-buttons;
  672. -sprite-image: eye_icon.png;
  673. }
  674. .icon-button.display:hover {
  675. -sprite-group: history-buttons;
  676. -sprite-image: eye_icon_dark.png;
  677. }
  678. .icon-button.display_disabled {
  679. -sprite-group: history-buttons;
  680. -sprite-image: eye_icon_grey.png;
  681. }
  682. .icon-button.delete {
  683. -sprite-group: history-buttons;
  684. -sprite-image: delete_icon.png;
  685. }
  686. .icon-button.delete:hover {
  687. -sprite-group: history-buttons;
  688. -sprite-image: delete_icon_dark.png;
  689. }
  690. .icon-button.delete_disabled {
  691. -sprite-group: history-buttons;
  692. -sprite-image: delete_icon_grey.png;
  693. }
  694. .icon-button.edit {
  695. -sprite-group: history-buttons;
  696. -sprite-image: pencil_icon.png;
  697. }
  698. .icon-button.edit:hover {
  699. -sprite-group: history-buttons;
  700. -sprite-image: pencil_icon_dark.png;
  701. }
  702. .icon-button.edit_disabled {
  703. -sprite-group: history-buttons;
  704. -sprite-image: pencil_icon_grey.png;
  705. }
  706. .icon-button.tag {
  707. -sprite-group: fugue;
  708. -sprite-image: fugue/tag-label.png;
  709. }
  710. .icon-button.tags {
  711. -sprite-group: fugue;
  712. -sprite-image: fugue/tags.png;
  713. }
  714. .icon-button.tag--plus {
  715. -sprite-group: fugue;
  716. -sprite-image: fugue/tag--plus.png;
  717. }
  718. .icon-button.toggle-expand {
  719. -sprite-group: fugue;
  720. -sprite-image: fugue/toggle-expand.png;
  721. }
  722. .icon-button.toggle {
  723. -sprite-group: fugue;
  724. -sprite-image: fugue/toggle.png;
  725. }
  726. .icon-button.toggle-contract {
  727. -sprite-group: fugue;
  728. -sprite-image: fugue/toggle.png;
  729. }
  730. .icon-button.arrow-circle {
  731. -sprite-group: fugue;
  732. -sprite-image: fugue/arrow-circle.png;
  733. }
  734. .icon-button.chevron {
  735. -sprite-group: fugue;
  736. -sprite-image: fugue/chevron.png;
  737. }
  738. .icon-button.bug {
  739. -sprite-group: fugue;
  740. -sprite-image: fugue/bug.png;
  741. }
  742. .icon-button.disk {
  743. -sprite-group: fugue;
  744. -sprite-image: fugue/disk.png;
  745. }
  746. .icon-button.information {
  747. -sprite-group: fugue;
  748. -sprite-image: fugue/information-white.png;
  749. }
  750. .icon-button.annotate {
  751. -sprite-group: fugue;
  752. -sprite-image: fugue/sticky-note-text.png;
  753. }
  754. .icon-button.vis-chart {
  755. -sprite-group: fugue;
  756. -sprite-image: fugue/chart.png;
  757. }
  758. .icon-button.go-to-full-screen {
  759. -sprite-group: fugue;
  760. -sprite-image: fugue/external.png;
  761. }
  762. .icon-button.import {
  763. -sprite-group: fugue;
  764. -sprite-image: fugue/plus-circle.png;
  765. }
  766. .tipsy {
  767. padding: 5px;
  768. font-size: 10px;
  769. filter: alpha(opacity=80);
  770. background-repeat: no-repeat;
  771. background-image: url(../images/tipsy.gif);
  772. }
  773. .tipsy-inner {
  774. padding: 5px 8px 4px 8px;
  775. background-color: black;
  776. color: white;
  777. max-width: 200px;
  778. text-align: center;
  779. }
  780. .tipsy-north {
  781. background-position: top center;
  782. }
  783. .tipsy-south {
  784. background-position: bottom center;
  785. }
  786. .tipsy-east {
  787. background-position: right center;
  788. }
  789. .tipsy-west {
  790. background-position: left center;
  791. }
  792. .editable-text {
  793. cursor:pointer;
  794. }
  795. .editable-text:hover {
  796. cursor: text;
  797. border: dotted #999999 1px;
  798. }
  799. .text-and-autocomplete-select {
  800. -sprite-group: fugue;
  801. -sprite-image: fugue/control-270.png;
  802. -sprite-horiz-position: right;
  803. }
  804. .icon-button.multiinput{
  805. background:url(../images/documents-stack.png) no-repeat;
  806. cursor:pointer;
  807. float:none;
  808. display:inline-block;
  809. margin-left:10px;
  810. }
  811. .icon-button.multiinput.disabled{
  812. background:url(../images/documents-stack-faded.png) no-repeat;
  813. cursor:auto;
  814. }
  815. .workflow-invocation-complete{
  816. border:solid 1px #6A6;
  817. border-left-width:5px;
  818. margin:10px 0;
  819. padding-left:5px;
  820. }