previews.css 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938
  1. /********************************
  2. * Licensed Materials - Property of IBM
  3. *
  4. * IBM Cognos Products: cpscrn
  5. *
  6. * (C) Copyright IBM Corp. 2013
  7. *
  8. * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
  9. ********************************/
  10. body.previews {
  11. margin: 0;
  12. padding: 0;
  13. background-image: url("../../../themedesigner/configuration/applications/default/previews/images/linen pattern.png");
  14. background-repeat: repeat;
  15. }
  16. a {
  17. color: #51486d;
  18. font-weight: normal;
  19. text-decoration: none;
  20. }
  21. a:VISITED {
  22. color: #FF0000;
  23. }
  24. a:HOVER {
  25. color: #51486d;
  26. text-decoration: underline;
  27. }
  28. .previews .breadcrumbContainer {
  29. float: left;
  30. margin: 10px 0 0 10px;
  31. }
  32. .previews .breadcrumbContainer .breadcrumbPath {
  33. font-family: Arial, Tahoma, Verdana, sans-serif;
  34. font-size: 0.75em;
  35. margin: 0;
  36. color: #292929;
  37. font-weight: bold;
  38. }
  39. .previews .breadcrumbContainer .breadcrumbSeparator {
  40. padding: 0 5px;
  41. font-weight: normal;
  42. }
  43. /* Portlets */
  44. .previews .portlet {
  45. border: 1px solid #999999;
  46. width: 400px;
  47. height: 250px;
  48. position: absolute;
  49. top: 50%;
  50. left: 50%;
  51. margin: -125px 0 0 -200px;
  52. -webkit-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  53. -moz-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  54. box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  55. }
  56. .previews .portletHeader {
  57. width: 100%;
  58. height: 24px;
  59. position: relative;
  60. background-color: #f6f5f8;
  61. background-image: none;
  62. background-image: none, -moz-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  63. background-image: none, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f1f6), color-stop(100%,#d6d3e2));
  64. background-image: none, -webkit-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  65. background-image: none, -o-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  66. background-image: none, -ms-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  67. background-image: none, linear-gradient(to bottom, #f2f1f6 0%, #d6d3e2 100%);
  68. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f1f6', endColorstr='#d6d3e2',GradientType=0 );
  69. zoom: 1;
  70. border-bottom: 1px solid #8b81ac;
  71. }
  72. .previews .portletBody {
  73. width: 100%;
  74. height: 225px;
  75. position: relative;
  76. background: #ffffff;
  77. }
  78. .previews .portletHeader .portletHeaderTitle p {
  79. color: #51486d;
  80. font-size: 0.6875em;
  81. font-weight: bold;
  82. font-family: Tahoma, arial, geneva, helvetica, sans-serif;
  83. float: left;
  84. line-height: 24px;
  85. padding-left: 4px;
  86. margin: 0;
  87. }
  88. .previews .portletHeader .portletHeaderCloseIcon {
  89. float: right;
  90. width: 16px;
  91. height:16px;
  92. margin: 4px;
  93. }
  94. /* Dialogs */
  95. .previews .dialog {
  96. border: 1px solid #999999;
  97. width: 350px;
  98. height: 400px;
  99. position: absolute;
  100. top: 50%;
  101. left: 50%;
  102. margin: -200px 0 0 -175px;
  103. -webkit-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  104. -moz-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  105. box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  106. }
  107. .previews .dialogHeader {
  108. width: 100%;
  109. height: 24px;
  110. position: relative;
  111. background-color: #d6d3e2;
  112. background-image: none;
  113. background-image: none, -moz-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  114. background-image: none, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f1f6), color-stop(100%,#d6d3e2));
  115. background-image: none, -webkit-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  116. background-image: none, -o-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  117. background-image: none, -ms-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  118. background-image: none, linear-gradient(to bottom, #f2f1f6 0%, #d6d3e2 100%);
  119. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f1f6', endColorstr='#d6d3e2',GradientType=0 );
  120. zoom: 1;
  121. border-bottom: #FF0000 #FF0000 #FF0000;
  122. }
  123. .previews .dialogBody {
  124. width: 100%;
  125. height: 336px;
  126. position: relative;
  127. background: #ffffff;
  128. }
  129. .previews .dialogFooter {
  130. border-top: #FF0000 #FF0000 #FF0000;
  131. width: 100%;
  132. height: 38px;
  133. position: relative;
  134. background: #f2f1f6;
  135. }
  136. .previews .dialogBody .dialogBodyContainer {
  137. padding: 10px;
  138. width: calc(100% - 20px);
  139. }
  140. .previews .dialogHeader .dialogHeaderTitle p{
  141. color: #51486d;
  142. font-size: 0.6875em;
  143. font-weight: bold;
  144. font-family: Tahoma, arial, geneva, helvetica, sans-serif;
  145. float: left;
  146. line-height: 24px;
  147. padding-left: 4px;
  148. margin: 0;
  149. }
  150. .previews .dialogHeader .dialogHeaderCloseIcon {
  151. float: right;
  152. width: 16px;
  153. height:16px;
  154. margin: 4px;
  155. }
  156. .previews .buttonContainer {
  157. margin: 0;
  158. padding: 0;
  159. height: 34px;
  160. }
  161. .previews .button {
  162. float: left;
  163. border-radius: 3px;
  164. border: 1px solid #c6c6d7;
  165. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  166. background-color: #f2f1f6;
  167. background-image: none;
  168. background-image: -moz-linear-gradient(top, #f2f1f6 0%, #c7c7cb 100%);
  169. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f1f6), color-stop(100%,#c7c7cb));
  170. background-image: -webkit-linear-gradient(top, #f2f1f6 0%, #c7c7cb 100%);
  171. background-image: -o-linear-gradient(top, #f2f1f6 0%, #c7c7cb 100%);
  172. background-image: -ms-linear-gradient(top, #f2f1f6 0%, #c7c7cb 100%);
  173. background-image: linear-gradient(to bottom, #f2f1f6 0%, #c7c7cb 100%);
  174. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f1f6', endColorstr='#c7c7cb',GradientType=0 );
  175. zoom: 1;
  176. padding: 0 10px;
  177. min-width: 65px;
  178. margin: 4px 8px 0;
  179. list-style-type: none;
  180. display: inline-block;
  181. cursor: pointer;
  182. }
  183. .previews .button.hover, .previews .hover.button {
  184. background-color: #f2f1f6;
  185. background-image: none;
  186. background-image: -moz-linear-gradient(top, #f2f1f6 0%, #e3e2e7 100%);
  187. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f1f6), color-stop(100%,#e3e2e7));
  188. background-image: -webkit-linear-gradient(top, #f2f1f6 0%, #e3e2e7 100%);
  189. background-image: -o-linear-gradient(top, #f2f1f6 0%, #e3e2e7 100%);
  190. background-image: -ms-linear-gradient(top, #f2f1f6 0%, #e3e2e7 100%);
  191. background-image: linear-gradient(to bottom, #f2f1f6 0%, #e3e2e7 100%);
  192. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f1f6', endColorstr='#e3e2e7',GradientType=0 );
  193. zoom: 1;
  194. cursor: pointer;
  195. }
  196. .previews .button.active, .previews .active.button {
  197. background-color: #f2f1f6;
  198. background-image: none;
  199. background-image: -moz-linear-gradient(top, #c7c7cb 0%, #f2f1f6 100%);
  200. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7c7cb), color-stop(100%,#f2f1f6));
  201. background-image: -webkit-linear-gradient(top, #c7c7cb 0%, #f2f1f6 100%);
  202. background-image: -o-linear-gradient(top, #c7c7cb 0%, #f2f1f6 100%);
  203. background-image: -ms-linear-gradient(top, #c7c7cb 0%, #f2f1f6 100%);
  204. background-image: linear-gradient(to bottom, #c7c7cb 0%, #f2f1f6 100%);
  205. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7cb', endColorstr='#f2f1f6',GradientType=0 );
  206. zoom: 1;
  207. -moz-box-shadow: inset 3px 0 8px rgba(0, 0, 0, 0.13);
  208. -webkit-box-shadow: inset 3px 0 8px rgba(0, 0, 0, 0.13);
  209. box-shadow: inset 3px 0 8px rgba(0, 0, 0, 0.13);
  210. cursor: pointer;
  211. }
  212. .previews .button.disabled, .previews .disabled.button {
  213. background-color: #f2f1f6;
  214. background-image: none;
  215. background-image: -moz-linear-gradient(top, #f2f1f6 0%, #c7c7cb 100%);
  216. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f1f6), color-stop(100%,#c7c7cb));
  217. background-image: -webkit-linear-gradient(top, #f2f1f6 0%, #c7c7cb 100%);
  218. background-image: -o-linear-gradient(top, #f2f1f6 0%, #c7c7cb 100%);
  219. background-image: -ms-linear-gradient(top, #f2f1f6 0%, #c7c7cb 100%);
  220. background-image: linear-gradient(to bottom, #f2f1f6 0%, #c7c7cb 100%);
  221. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f1f6', endColorstr='#c7c7cb',GradientType=0 );
  222. zoom: 1;
  223. cursor: pointer;
  224. }
  225. .previews .button:focus {
  226. outline: 1px dotted #000000;
  227. border-radius: 3px;
  228. }
  229. .previews .button:FIRST-CHILD {
  230. margin-left: 4px;
  231. }
  232. .previews .button .label {
  233. font-size: 0.75em;
  234. line-height: 1em;
  235. text-align: center;
  236. color: #51486d;
  237. text-shadow: 0 1px #ffffff;
  238. font-weight: bold;
  239. margin: 7px 0;
  240. font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  241. }
  242. .previews .button.disabled .label, .previews .disabled.button .label {
  243. color: #767676;
  244. }
  245. .previews .button:active .label {
  246. color: #51486d;
  247. }
  248. .previews .dialogText, .previews .plaintext {
  249. font-size: 0.6875em;
  250. font-family: Tahoma, arial, geneva, helvetica, sans-serif;
  251. margin: 10px 0 0;
  252. color: #292929;
  253. }
  254. .previews .dialogLabel, .previews .formLabel {
  255. font-size: 0.6875em;
  256. font-weight: bold;
  257. font-family: Tahoma, arial, geneva, helvetica, sans-serif;
  258. margin: 10px 0 0;
  259. color: #51486d;
  260. }
  261. .previews .formLabel {
  262. font-weight: normal;
  263. }
  264. .previews .formText {
  265. font-size: 0.6875em;
  266. font-family: Tahoma, arial, geneva, helvetica, sans-serif;
  267. color: #292929;
  268. }
  269. .previews .formLabel.right {
  270. text-align: right;
  271. }
  272. .previews .textbox {
  273. box-sizing: border-box;
  274. margin-top: 5px;
  275. }
  276. .previews .textarea {
  277. width: 100%;
  278. box-sizing: border-box;
  279. margin-top: 5px;
  280. height: 100px;
  281. }
  282. .previews .select {
  283. margin-top: 5px;
  284. box-sizing: border-box;
  285. width: 100%;
  286. }
  287. /* banner */
  288. .previews .bannerContainer {
  289. position: absolute;
  290. width: 850px;
  291. top: 50%;
  292. left: 50%;
  293. margin: -100px 0 0 -425px;
  294. -webkit-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  295. -moz-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  296. box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  297. }
  298. .previews .primaryBannerContainer {
  299. height: 38px;
  300. width: 100%;
  301. background-color: #51486d;
  302. background-image: none;
  303. background-image: none, -moz-linear-gradient(top, #8b81ac 0%, #51486d 100%);
  304. background-image: none, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b81ac), color-stop(100%,#51486d));
  305. background-image: none, -webkit-linear-gradient(top, #8b81ac 0%, #51486d 100%);
  306. background-image: none, -o-linear-gradient(top, #8b81ac 0%, #51486d 100%);
  307. background-image: none, -ms-linear-gradient(top, #8b81ac 0%, #51486d 100%);
  308. background-image: none, linear-gradient(to bottom, #8b81ac 0%, #51486d 100%);
  309. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b81ac', endColorstr='#51486d',GradientType=0 );
  310. zoom: 1;
  311. }
  312. .previews .secondaryBannerContainer {
  313. width: 100%;
  314. height: 4px;
  315. background: #fdc339;
  316. }
  317. .previews .primaryBannerLeft {
  318. float: left;
  319. height: 100%;
  320. }
  321. .previews .primaryBannerRight {
  322. float: right;
  323. height: 100%;
  324. padding-right: 20px;
  325. }
  326. .previews .bannerHeader {
  327. float: left;
  328. padding-left: 20px;
  329. }
  330. .previews .bannerHeader p {
  331. font-size: 0.8125em;
  332. color: #ffffff;
  333. font-weight: bold;
  334. text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  335. font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  336. margin: 0;
  337. line-height: 38px;
  338. }
  339. .previews .menuContainer {
  340. width: 180px;
  341. height: auto;
  342. box-shadow: 1px 0px 1px rgba(0,0,0,0.25), -1px 0px 1px rgba(0,0,0,0.25), 0px 2px 1px rgba(0,0,0,0.25);
  343. background: #ffffff;
  344. border-radius: 0 0 2px 2px;
  345. border-color: #9c93b8;
  346. border-style: solid;
  347. border-width: 0 2px 2px;
  348. position: absolute;
  349. top: 38px;
  350. margin-left: -3px;
  351. }
  352. .previews .menuContainer ul {
  353. margin: 0;
  354. padding: 0;
  355. }
  356. .previews .menuContainer .menuItem {
  357. list-style-type: none;
  358. }
  359. .previews .bannerSearchBox {
  360. float: right;
  361. width: 150px;
  362. margin-left: 10px;
  363. }
  364. .previews .bannerSearchBox .textbox {
  365. margin-top: 10px;
  366. }
  367. .previews .bannerMenuItem{
  368. float: right;
  369. margin-left: 10px;
  370. width: auto;
  371. height: 100%;
  372. border-width: 0 1px;
  373. border-color: transparent;
  374. border-style: solid;
  375. }
  376. .previews .bannerMenuItem .bannerMenuItemContainer {
  377. width: 100%;
  378. height: 100%;
  379. }
  380. .previews .bannerMenuItem.hover, .previews .hover.bannerMenuItem {
  381. background-color: #332d45;
  382. background-image: none;
  383. background-image: none, -moz-linear-gradient(top, #332d45 0%, #8b81ac 100%);
  384. background-image: none, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#332d45), color-stop(100%,#8b81ac));
  385. background-image: none, -webkit-linear-gradient(top, #332d45 0%, #8b81ac 100%);
  386. background-image: none, -o-linear-gradient(top, #332d45 0%, #8b81ac 100%);
  387. background-image: none, -ms-linear-gradient(top, #332d45 0%, #8b81ac 100%);
  388. background-image: none, linear-gradient(to bottom, #332d45 0%, #8b81ac 100%);
  389. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#332d45', endColorstr='#8b81ac',GradientType=0 );
  390. zoom: 1;
  391. height: 100%;
  392. }
  393. .previews .bannerMenuItem:hover {
  394. background-color: #332d45;
  395. background-image: none;
  396. background-image: none, -moz-linear-gradient(top, #332d45 0%, #8b81ac 100%);
  397. background-image: none, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#332d45), color-stop(100%,#8b81ac));
  398. background-image: none, -webkit-linear-gradient(top, #332d45 0%, #8b81ac 100%);
  399. background-image: none, -o-linear-gradient(top, #332d45 0%, #8b81ac 100%);
  400. background-image: none, -ms-linear-gradient(top, #332d45 0%, #8b81ac 100%);
  401. background-image: none, linear-gradient(to bottom, #332d45 0%, #8b81ac 100%);
  402. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#332d45', endColorstr='#8b81ac',GradientType=0 );
  403. zoom: 1;
  404. height: 100%;
  405. }
  406. .previews .bannerMenuItem.active, .previews .active.bannerMenuItem {
  407. background-color: #8b81ac;
  408. background-image: none;
  409. background-image: none, -moz-linear-gradient(top, #8b81ac 0%, #332d45 100%);
  410. background-image: none, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b81ac), color-stop(100%,#332d45));
  411. background-image: none, -webkit-linear-gradient(top, #8b81ac 0%, #332d45 100%);
  412. background-image: none, -o-linear-gradient(top, #8b81ac 0%, #332d45 100%);
  413. background-image: none, -ms-linear-gradient(top, #8b81ac 0%, #332d45 100%);
  414. background-image: none, linear-gradient(to bottom, #8b81ac 0%, #332d45 100%);
  415. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b81ac', endColorstr='#332d45',GradientType=0 );
  416. zoom: 1;
  417. border-color: #8b81ac;
  418. border-width: 0 1px;
  419. border-style: solid;
  420. height: 100%;
  421. -webkit-box-shadow: 1px 0px #292929, -1px 0px #292929;
  422. -moz-box-shadow: 1px 0px #292929, -1px 0px #292929;
  423. box-shadow: 1px 0px #292929, -1px 0px #292929;
  424. }
  425. .previews .bannerMenuItem:active {
  426. background-color: #8b81ac;
  427. background-image: none;
  428. background-image: none, -moz-linear-gradient(top, #8b81ac 0%, #332d45 100%);
  429. background-image: none, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b81ac), color-stop(100%,#332d45));
  430. background-image: none, -webkit-linear-gradient(top, #8b81ac 0%, #332d45 100%);
  431. background-image: none, -o-linear-gradient(top, #8b81ac 0%, #332d45 100%);
  432. background-image: none, -ms-linear-gradient(top, #8b81ac 0%, #332d45 100%);
  433. background-image: none, linear-gradient(to bottom, #8b81ac 0%, #332d45 100%);
  434. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b81ac', endColorstr='#332d45',GradientType=0 );
  435. zoom: 1;
  436. border-color: #8b81ac;
  437. border-width: 0 1px;
  438. border-style: solid;
  439. height: 100%;
  440. -webkit-box-shadow: 1px 0px #292929, -1px 0px #292929;
  441. -moz-box-shadow: 1px 0px #292929, -1px 0px #292929;
  442. box-shadow: 1px 0px #292929, -1px 0px #292929;
  443. }
  444. .previews .menuContainer .menuItem.hover {
  445. background-color: #d6d3e2;
  446. }
  447. .previews .bannerMenuItem .menuItemIcon, .previews .menuContainer .menuItem .menuItemIcon {
  448. float: left;
  449. margin: 10px 5px;
  450. }
  451. .previews .menuContainer .menuItem .menuItemIcon {
  452. margin: 10px;
  453. }
  454. .previews .bannerMenuItem .menuItemPulldownIcon{
  455. float: left;
  456. margin: 10px 5px 0 0;
  457. }
  458. .previews .bannerMenuItem .menuLabel {
  459. float: left;
  460. margin: 0px 5px;
  461. color: #f2f1f6;
  462. font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  463. font-size: 0.75em;
  464. line-height: 38px;
  465. }
  466. .previews .menuContainer .menuItem.disabled .menuItemLabel, .previews .menuContainer .disabled.menuItem .menuItemLabel {
  467. color: #8b81ac;
  468. }
  469. .previews .menuContainer .menuItem .menuItemLabel {
  470. float: none;
  471. color: #51486d;
  472. margin: 0px 5px;
  473. font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  474. font-size: 0.75em;
  475. line-height: 38px;
  476. float: left;
  477. }
  478. .previews .menuContainer .menuItem .menuItemLabel.hover, .previews .menuContainer .menuItem .hover.menuItemLabel {
  479. color: #51486d;
  480. }
  481. .previews .bannerSeparator {
  482. float: right;
  483. height: 100%;
  484. margin-left: 10px;
  485. }
  486. .previews .bannerSeparator .bannerSeparatorImage {
  487. margin: 10px 0 0;
  488. }
  489. .previews .primaryBannerLogoContainer {
  490. width: auto;
  491. line-height: 38px;
  492. padding: 11px 0 0 20px;
  493. }
  494. .previews .primaryBannerLogoContainer.left {
  495. float: left;
  496. padding-left: 20px;
  497. }
  498. .previews .primaryBannerLogoContainer.right {
  499. float: right;
  500. width: 41px;
  501. }
  502. .previews .primaryBannerLogo {
  503. float: right;
  504. background: none no-repeat;
  505. background-image: url(../../../skins/modern/branding/ibm-logo-white.gif);
  506. width: 41px;
  507. height: 35px;
  508. display: ;
  509. }
  510. .previews .customLogo {
  511. width: 45px;
  512. height: 16px;
  513. display: none;
  514. background-image: none;
  515. background-image: url(../../../skins/modern/branding/your_logo_here.gif);
  516. background-position: top left;
  517. background-repeat: no-repeat;
  518. }
  519. /* Generics */
  520. .previews .genericContainer {
  521. width: 750px;
  522. height: 350px;
  523. background-color: #ffffff;
  524. position: absolute;
  525. top: 50%;
  526. left: 50%;
  527. margin: -175px 0 0 -375px;
  528. -webkit-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  529. -moz-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  530. box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  531. border-radius: 2px;
  532. }
  533. .previews .toolbarContainer {
  534. height: 34px;
  535. float: right;
  536. margin-right: 10px;
  537. }
  538. .previews .toolbarListContainer {
  539. margin: 0;
  540. padding: 0;
  541. height: 34px;
  542. }
  543. .previews .toolbarItem {
  544. list-style-type: none;
  545. float: left;
  546. display: block;
  547. border: 1px solid transparent;
  548. }
  549. .previews .toolbarItem.hover, .previews .hover.toolbarItem {
  550. background-color: #f6f5f8;
  551. background-image: none;
  552. background-image: -moz-linear-gradient(top, #f9f9fb 0%, #f2f1f6 100%);
  553. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9fb), color-stop(100%,#f2f1f6));
  554. background-image: -webkit-linear-gradient(top, #f9f9fb 0%, #f2f1f6 100%);
  555. background-image: -o-linear-gradient(top, #f9f9fb 0%, #f2f1f6 100%);
  556. background-image: -ms-linear-gradient(top, #f9f9fb 0%, #f2f1f6 100%);
  557. background-image: linear-gradient(to bottom, #f9f9fb 0%, #f2f1f6 100%);
  558. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9fb', endColorstr='#f2f1f6',GradientType=0 );
  559. zoom: 1;
  560. cursor: pointer;
  561. border-radius: 3px;
  562. border: #8b81ac 1px solid;
  563. }
  564. .previews .toolbarItem.active, .previews .active.toolbarItem {
  565. background-color: #f2f1f6;
  566. background-image:
  567. ;
  568. cursor: pointer;
  569. border-radius: 3px;
  570. border: #8b81ac 1px solid;
  571. }
  572. .previews .toolbarItem.selected, .previews .selected.toolbarItem {
  573. background-color: #8b81ac;
  574. background-image: none;
  575. background-image: none, -moz-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  576. background-image: none, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f1f6), color-stop(100%,#d6d3e2));
  577. background-image: none, -webkit-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  578. background-image: none, -o-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  579. background-image: none, -ms-linear-gradient(top, #f2f1f6 0%, #d6d3e2 100%);
  580. background-image: none, linear-gradient(to bottom, #f2f1f6 0%, #d6d3e2 100%);
  581. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f1f6', endColorstr='#d6d3e2',GradientType=0 );
  582. zoom: 1;
  583. border: 1px dotted #8b81ac;
  584. }
  585. .previews .toolbarItem .toolbarItemContainer {
  586. height: 32px;
  587. margin: 0 5px;
  588. }
  589. .previews .toolbarItem .toolbarItemContainer .toolbarItemIcon, .previews .toolbarItem .toolbarItemContainer .toolbarItemSeparator {
  590. float: left;
  591. margin: 8px 0;
  592. }
  593. .previews .toolbarItem .toolbarItemContainer .toolbarItemLabel {
  594. float: left;
  595. font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  596. font-size: 0.75em;
  597. line-height: 38px;
  598. color: #51486d;
  599. margin: 0 0 0 5px;
  600. line-height: 32px;
  601. }
  602. .previews .formsContainer {
  603. height: 135px;
  604. }
  605. .previews .formsContainerLeft {
  606. float: left;
  607. width: 50%;
  608. }
  609. .previews .formsContainerRight {
  610. float: right;
  611. width: 50%;
  612. }
  613. .previews .formsContainerInner {
  614. padding: 0 10px 10px;
  615. }
  616. .previews .textContainer .plaintext {
  617. margin-left: 10px;
  618. margin-right: 10px;
  619. }
  620. /* Grid */
  621. .previews .gridContainer {
  622. width: 750px;
  623. height: 360px;
  624. background-color: #ffffff;
  625. position: absolute;
  626. top: 50%;
  627. left: 50%;
  628. margin: -180px 0 0 -375px;
  629. -webkit-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  630. -moz-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  631. box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  632. border-radius: 2px;
  633. }
  634. .previews .controlsContainer {
  635. padding: 10px 15px 0;
  636. }
  637. .previews .controlsContainer .entriesTextbox {
  638. width: 50px;
  639. }
  640. .previews .gridContainer .tableContainer {
  641. padding: 10px 15px;
  642. }
  643. .previews .gridContainer table {
  644. width: 100%;
  645. border: 1px solid #8b81ac;
  646. }
  647. .previews .gridContainer table thead tr th {
  648. background-color: #8b81ac;
  649. background: none;
  650. background-image: -moz-linear-gradient(top, #8b81ac 0%, #787095 100%);
  651. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b81ac), color-stop(100%,#787095));
  652. background-image: -webkit-linear-gradient(top, #8b81ac 0%, #787095 100%);
  653. background-image: -o-linear-gradient(top, #8b81ac 0%, #787095 100%);
  654. background-image: -ms-linear-gradient(top, #8b81ac 0%, #787095 100%);
  655. background-image: linear-gradient(to bottom, #8b81ac 0%, #787095 100%);
  656. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b81ac', endColorstr='#787095',GradientType=0 );
  657. zoom: 1;
  658. padding: 10px 7px;
  659. color: #f9f9fb;
  660. text-shadow: 0 1px #292929;
  661. font-size: 0.75em;
  662. font-family: Arial, Tahoma, Verdana, sans-serif;
  663. font-weight: bold;
  664. border-width: 0 0 1px 1px;
  665. border-style: solid;
  666. border-color: #8b81ac;
  667. }
  668. .previews .gridContainer table thead tr th:first-child {
  669. border-width: 0 0 1px 0;
  670. }
  671. .previews .gridContainer table thead tr th.left {
  672. text-align: left;
  673. }
  674. .previews .gridContainer table thead tr th.col16px {
  675. width: 16px;
  676. }
  677. .previews .gridContainer table tbody tr {
  678. background-color: #ffffff;
  679. }
  680. .previews .gridContainer table tbody tr.alternate {
  681. background-color: #f6f5f8;
  682. }
  683. .previews .gridContainer table tbody tr.selected {
  684. background-color: #c6c6d7;
  685. }
  686. .previews .gridContainer table tbody tr.hover {
  687. background-color: #f2f1f6;
  688. }
  689. .previews .gridContainer table tbody tr td {
  690. font-size: 0.75em;
  691. font-family: Arial, Tahoma, Verdana, sans-serif;
  692. color: #51486d;
  693. padding: 7px;
  694. }
  695. .previews .gridContainer table tbody tr td input {
  696. margin-top: 0;
  697. }
  698. .previews .gridContainer table tbody tr td.center {
  699. text-align: center;
  700. }
  701. .previews .gridContainer table tfoot tr {
  702. background-color: #d6d3e2;
  703. }
  704. .previews .gridContainer table tfoot tr td {
  705. font-size: 0.75em;
  706. font-family: Arial, Tahoma, Verdana, sans-serif;
  707. color: #332d45;
  708. padding: 4px;
  709. border-color: #8b81ac;
  710. border-style: solid;
  711. border-width: 1px 0 0 0;
  712. }
  713. .previews .gridContainer .controlsContainer input {
  714. width: 50px;
  715. }
  716. /* Tabs */
  717. .previews .tabsContainer {
  718. width: 700px;
  719. height: 400px;
  720. background: #ffffff;
  721. padding: 20px;
  722. position: absolute;
  723. top: 50%;
  724. left: 50%;
  725. margin: -200px 0 0 -375px;
  726. -webkit-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  727. -moz-box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  728. box-shadow: 0px 0px 38px 0px rgba(0,0,0,0.65), 0px 5px 5px rgba(0, 0, 0, 0.4);
  729. }
  730. .previews .horizontalTabsContainer {
  731. position: absolute;
  732. width: 530px;
  733. left: 190px;
  734. top: 21px;
  735. z-index: 999;
  736. }
  737. .previews .horizontalTabs {
  738. margin: 0;
  739. padding: 0;
  740. border-bottom: 1px solid #9c93b8;
  741. width: 530px;
  742. height: 39px;
  743. background-color: #ffffff;
  744. }
  745. .previews .verticalTabs {
  746. margin: 0;
  747. padding: 0;
  748. }
  749. .previews .verticalTabs .secondary {
  750. margin: 12px 10px 0;
  751. padding: 0;
  752. position: relative;
  753. z-index: 999;
  754. border-top: 1px solid #cccccc;
  755. }
  756. .previews .verticalTabsContainer {
  757. width: 166px;
  758. position: absolute;
  759. top: 60px;
  760. left: 20px;
  761. z-index: 999;
  762. }
  763. .previews .tabItem {
  764. border-radius: 0;
  765. border-width: 1px;
  766. border-style: solid;
  767. background-color: #ffffff;
  768. background-image: none;
  769. background-image: none;
  770. padding: 12px 0px 13px;
  771. list-style-type: none;
  772. cursor: pointer;
  773. }
  774. .previews .horizontalTabs .tabItem {
  775. float: left;
  776. border-color: #cccccc #cccccc #9c93b8;
  777. display: inline-block;
  778. margin: 1px 2px 0 0;
  779. border-radius: 1px 1px 0 0;
  780. }
  781. .previews .horizontalTabs .tabItem:first-child {
  782. margin-left: 15px;
  783. }
  784. .previews .verticalTabs .tabItem {
  785. display: block;
  786. border-color: #cccccc;
  787. margin: 2px 0 0;
  788. border-radius: 0px 0 0 0px;
  789. border-radius: 0;
  790. border-width: 1px;
  791. border-style: solid;
  792. }
  793. .previews .verticalTabs .tabItem.parent, .previews .verticalTabs .parent.tabItem {
  794. padding-bottom: 0;
  795. border-color: #cccccc;
  796. border-left-width: 1px;
  797. border-radius: 0;
  798. background-color: #ffffff;
  799. }
  800. .previews .verticalTabs .tabItem:first-child {
  801. margin-top: 0px;
  802. }
  803. .previews .verticalTabs .secondary .tabItem {
  804. border-width: 0;
  805. font-size: 12px;
  806. padding-left: 30px;
  807. margin-left: -10px;
  808. margin-right: -10px;
  809. }
  810. .previews .verticalTabs .secondary .tabItem.selected, .previews .verticalTabs .secondary .selected.tabItem {
  811. font-weight: bold;
  812. }
  813. .previews .verticalTabs .secondary .tabItem:first-child {
  814. margin-top: 0;
  815. }
  816. .previews .horizontalTabs .tabItem .label {
  817. font-size: 0.75em;
  818. line-height: 1em;
  819. text-align: center;
  820. color: #292929;
  821. font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  822. margin: 0;
  823. }
  824. .previews .verticalTabs .tabItem .label {
  825. font-size: 0.75em;
  826. line-height: 1em;
  827. text-align: center;
  828. color: #292929;
  829. font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  830. margin: 0;
  831. }
  832. .previews .verticalTabs .tabItem .label {
  833. text-align: left;
  834. }
  835. .previews .horizontalTabs .tabItem.active, .previews .horizontalTabs .active.tabItem {
  836. border-radius: 3px 3px 0 0;
  837. padding-top: 11px;
  838. border-width: 2px 1px 1px;
  839. border-style: solid;
  840. border-color: #fdc339 #9c93b8 #ffffff;
  841. background-color: #ffffff;
  842. background-image: none;
  843. background-image: none;
  844. }
  845. .previews .horizontalTabs .tabItem.hover, .previews .horizontalTabs .active.hover {
  846. border-top: 2px solid #ffce5b;
  847. border-radius: 3px 0 0 3px;
  848. padding-top: 11px;
  849. background-color: #ffffff;
  850. background-image: none;
  851. background-image: none;
  852. }
  853. .previews .verticalTabs .tabItem.active, .previews .verticalTabs .active.tabItem {
  854. background-color: #8b81ac;
  855. background-image: none;
  856. background-image: none;
  857. color: #ffffff;
  858. }
  859. .previews .verticalTabs .tabItem.hover, .previews .verticalTabs .active.hover {
  860. background-color: #c6c6d7;
  861. background-image: none;
  862. background-image: none;
  863. color: #292929;
  864. }
  865. .previews .verticalTabs .secondary .tabItem.active, .previews .verticalTabs .secondary .active.tabItem {
  866. border-width: 0;
  867. border-radius: 0;
  868. background-color: #8b81ac;
  869. background-image: none;
  870. background-image: none;
  871. }
  872. .previews .verticalTabs .tabItem.active .label, .previews .verticalTabs .active.tabItem .label {
  873. color: #ffffff;
  874. }
  875. .previews .verticalTabs .tabItem.active.parent .label, .previews .verticalTabs .active.parent.tabItem .label {
  876. color: #292929;
  877. }
  878. .previews .verticalTabs .secondary .tabItem.active .label, .previews .verticalTabs .secondary .active.tabItem .label {
  879. color: #ffffff;
  880. }
  881. .previews .verticalTabs .secondary .tabItem.hover, .previews .verticalTabs .secondary .hover.tabItem {
  882. border-width: 0;
  883. border-radius: 0;
  884. background-color: #c6c6d7;
  885. background-image: none;
  886. background-image: none;
  887. }
  888. .previews .verticalTabs .tabItem.hover .label, .previews .verticalTabs .hover.tabItem .label {
  889. color: #292929;
  890. }
  891. .previews .verticalTabs .secondary .tabItem.hover .label, .previews .verticalTabs .secondary .hover.tabItem .label {
  892. color: #292929;
  893. }
  894. .previews .tabItem .tabItemContainer {
  895. padding: 0 15px;
  896. }
  897. .previews .tabItem.active .label, .previews .active.tabItem .label {
  898. font-weight: bold;
  899. color: #51486d;
  900. }
  901. .previews .tabItem.hover .label, .previews .hover.tabItem .label {
  902. color: #51486d;
  903. }
  904. .previews .verticalTabs .secondary .tabItem .label {
  905. text-align: left;
  906. font-weight: normal;
  907. font-size: 1em;
  908. }
  909. .previews .verticalTabs .secondary .tabItem.active .label, .previews .verticalTabs .secondary .active.tabItem .label {
  910. color: #ffffff;
  911. font-weight: bold;
  912. }
  913. .previews .tabsBodyContainer {
  914. border-width: 0 1px 1px;
  915. border-style: solid;
  916. border-color: #9c93b8;
  917. width: 528px;
  918. height: 360px;
  919. position: absolute;
  920. right: 20px;
  921. top: 60px;
  922. }