previews.css 29 KB

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