You are here

Home » API reference » Opigno WYSIWYG Templates App 7

opigno_wt_app.css in Opigno WYSIWYG Templates App 7 

.white {
font-family:verdana;
border:0;
width:900px; 
background-color:#ffffff; 
margin:auto; 
text-align:left;
}

.quiz-question-body table, .quiz-question-body tr, .quiz-question-body tbody, .node-quiz-directions table, .node-quiz-directions tr, .node-quiz-directions tbody {
border:0;
}

table.left-panel {width:260px;}

td .blue-text {background-position:bottom left; background-repeat:no-repeat; padding:0px 20px 30px 20px; color: #1084A7;}


table.grey-arrow, table.dark-grey, table.arrow-ch, table.ch-end {
width:470px;
margin:5px 18px 0px 18px;
}

table.arrow-ch {
margin-left:70px;
background-color:#d9dbde;
width:470px;
}

td.arrow-ch-int {
width:100%;
border-top:5px solid #d9dbde; 
background-image:url(../img/fon-essai.jpg);
background-repeat:no-repeat;
background-position:bottom center;
padding-bottom:40px;
color: #fff;
}

table.arrow-ch h2 {

font-weight:normal;
font-size:1.2em;
margin:0px 15px;
}

table.ch-end {
margin-bottom:40px;
margin-top:3px;
border:5px solid #d9dbde; 
width:470px;
margin-left:70px;
}

table.ch-end td {
padding:3px 0px;
background-image:url(../img/grey-pattern.jpg);
background-repeat:repeat-x;
background-position:top left;
color:#999ba0;
}

table.ch-end td h2 {
font-weight:normal;
font-size:1.1em;
margin:0px 15px;
color: #1084A7;
}

td.arrow-ch-int {
    background-image: url("../img/channel-arrow-bloc.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    border-top: 5px solid #D9DBDE;
    color: #FFFFFF;
    padding-bottom: 40px;
    width: 100%;
}

.cellscontent {margin:20px 20px 40px 20px; width:860px;}
.cellscontent h2 {color: #1084A7;}
.cellscontent tr { margin:50px; }
.cellscontent2 {margin:20px 20px 40px 20px; width:860px; border-collapse:separate !important;}
.cellscontent3 {margin:0px 20px 00px 20px; width:860px;}


td.first-item-process {
padding:10px 10px 10px 20px;
width:95px;
}

td.cell-item-process {
background-image:url(../img/process-grey.jpg);
background-repeat:no-repeat;
background-position:center left;
border-collapse: collapse;
font-size: 16px;
padding: 10px 10px 10px 60px;
width: 95px;
}

.comments {
margin-top:20px;
width:100%;
}

.post-it-table {
margin:0px;
}

.pin {
background-image:url(../img/scotch-post-it.jpg); 
background-repeat:no-repeat;
}

td.pin {
padding:0;
}

.pin-corner td {
padding:40px 30px 40px 50px;
}

.pin-corner {
    background-image: url("../img/corner-post-it.jpg");
    background-position: right bottom;
    background-repeat: no-repeat;
    width: 450px;
	margin-bottom: 0px;
}

td.imagecenter {
margin:0px auto;
width: 50%;
vertical-align:middle;
}

.process_table {
background-color:#dcdcde; 
margin:0px 12px;
}

.end-process{
background-image:url(../img/process-end.jpg); 
background-repeat:no-repeat; 
background-position:center right;
}

.pyramide-background {
width:580px; 
background-image:url(../img/pyramide.jpg); 
background-repeat:no-repeat; 
background-position:top center; 
text-align:center; 
margin:0px 10px; 
padding-top:70px;
text-align:center;
}

.pyramide-background p {
margin-bottom:0px;
}

.pyramide-background td{
border-top:2px solid #ffffff;
text-align:center;
color:#fff;
text-align:center;
margin-right:auto;
margin-left:auto;
padding:10px 0px;
}

td.pyramide-top {
padding-top:80px;
}

.hori-table-main {
background-color: #afb1b6;
margin-left:40px;
width:90%;
border:3px solid #ececec;
}


.hori-table-main h4 {
color: #1084A7; 
padding-bottom:15px; 
font-weight:normal; 
font-style:italic;
}

.hori-table-line td{
padding:10px;
border:3px solid #eee;
}

td.hori-table-cell {background-color:#afafaf; color: #fff; width:30%; padding:10px;}

td.hori-table-cell h3, td.hori-table-cell h2, td.hori-table-cell h4 {color: #fff; background-image:none; padding-left:0; text-decoration:none;}

.hori-table-line {
background-color:#fff;
padding:10px;
}

.hori-table-main ul {
list-style-image:url(../img/orange-bullet.png);
margin-left:25px;
}

.hori-table-main ul li {
margin-bottom:15px;
}

td.illusleft{
vertical-align: middle !important;
}

.circular {
width:450px;
margin-top:0px;
margin-bottom:0px;
margin-right:20px;
margin-left:100px;
color:#666;
}

.circular td{
padding: 0px;
}

table.circ-a1 {
width:450px;
margin-bottom:0px;
}

table.circ-a2 {
background-image:url(../img/circular-haut.jpg);
background-repeat:no-repeat;
width:450px;
margin-bottom:0px;
}

table.circ-a3 {
background-image:url(../img/circular-bas.jpg);
background-position:bottom left;
background-repeat:no-repeat;
width:450px;
margin-bottom:0px;
}

td.circular-item {
background-image:url(../img/degrade1.jpg);
background-repeat:repeat-x;
width:120px;
padding:15px 5px;
-moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px; border-radius:7px; 
}

.circular p {
padding:0px;
text-align:center;
}

td.circular-cell1{
width:150px;
}

td.circular-cell2{
height:60px;
}

td.circular-cell3{
height:50px;
}

td.circular-cell4{
width:160px;
}

td.item-image-legende img {
margin:5px;
border:1px solid #cccccc; 
}


td.item-image-legende {
padding:5px;
background-image:url(../img/gallery-background.jpg);
background-repeat:repeat-x;
text-align:center;
width:33%;
border:1px solid #ffffff !important;
}

td.item-image-legende p {
	font-size:0.9em; padding:5px; color: #1084A7; text-align:center; margin:0px 15px;
}

.image-and-legend {
margin-right:25px;
}

.image-and-legend td {
text-align:center;
padding:0px 10px 10px 10px;
}

td.legendingrey {
border:1px solid #cccccc; background-color:#9b9fa7; font-size:0.9em; color: #ffffff; padding:5px;
}

td.cellcenter {vertical-align:middle !important;}

.table-with-borders{ border: 1px solid #DDDDDD !important;}

table.methodology {
background-color:#d2d2d7;
border:1px solid #cecfd4;
font-size:0.9em;
color: #6e6e70;
-moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; 
}

table.methodology td {
padding:5px;
width:25%;
}

table.methodology img {
border:1px solid #b3b4b9;
margin-bottom:10px;
margin-top:10px;
}


table.methodology h2 {
color:#fff;
font-weight:bold;
}

table.methodology td.methoarrow {
background-image:url(../img/methodologyarrow.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:40px;
}

td.methofirst {
font-size:1.1em;
vertical-align:middle;
}

td.methofirst p, td.methofirst ul{
padding:15px;
}

td.methofirst ul li{
margin:17px 5px 17px 7px;
padding-left:5px;
list-style-image:url(../img/liarrow.png);
}

td.roundcell{
background-image:url(../img/gallery-background.jpg);
background-repeat:repeat-x;
width:45%;
padding:20px;
-moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; behavior: url(border-radius.htc);
}

.growth {
background-image:url(../img/climbing-arrow.jpg);
background-repeat:no-repeat;
width:500px;
margin-left:50px;
color:#666;
vertical-align:top;
}

.growth td.text-growth-stage {
font-size:0.9em;
padding-top:145px;
padding-left:15px;
}

.growth td.text-growth-stage p{
padding:0;
margin:0;
}
.growth td.text-growth-stage table td {
padding-top:0px; padding-bottom:25px;
}

td.growth-line1{
padding-left:240px;
}

td.growth-line2{
padding-left:190px;
}

td.growth-line3{
padding-left:150px;
}

td.growth-line4{
padding-left:125px;
}

td.growth-line5{
padding-left:100px;
}

td.growth-line6{
padding-left:80px;
}

td.growth-line7{
padding-left:60px;
}

.premiere {
background-color: #9b9fa7;
border:1px solid #ffffff;
color:#ffffff;

}

.ligne td, .premiere td {
padding:5px 10px;
border:1px solid #ffffff;
}

.ligne {
background-color: #eceaea;
}

table.matrix22 tr td p, table.matrix22_scenario tr td p {
margin:25px 15px; 
}

table.matrix22, table.matrix22_scenario{
position:relative; z-index: 0;
width:570px;
border-collapse:separate !important;
border-spacing: 10px;
margin-right:25px;

}

.matrix22 tr {
height:200px;
}

.matrix22_scenario tr {
height:100px;
}

td.rond {
border: 1px solid #cbcbcb;
color:#666;
vertical-align:top;
margin-right:15px;
-moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px; border-radius:7px; behavior: url(border-radius.htc);
}

td.matrixcell1{
background-color:#e6e5e4; 
}

td.matrixcell2{
background-color:#e8e1dc; 
}

td.matrixcell3{
background-color:#d3d2d1; 
}

File

css/opigno_wt_app.css
View source 
  1. .white {

  2. font-family:verdana;

  3. border:0;

  4. width:900px; 

  5. background-color:#ffffff; 

  6. margin:auto; 

  7. text-align:left;

  8. }

  9. 

  10. .quiz-question-body table, .quiz-question-body tr, .quiz-question-body tbody, .node-quiz-directions table, .node-quiz-directions tr, .node-quiz-directions tbody {

  11. border:0;

  12. }

  13. 

  14. table.left-panel {width:260px;}

  15. 

  16. td .blue-text {background-position:bottom left; background-repeat:no-repeat; padding:0px 20px 30px 20px; color: #1084A7;}

  17. 

  18. 

  19. table.grey-arrow, table.dark-grey, table.arrow-ch, table.ch-end {

  20. width:470px;

  21. margin:5px 18px 0px 18px;

  22. }

  23. 

  24. table.arrow-ch {

  25. margin-left:70px;

  26. background-color:#d9dbde;

  27. width:470px;

  28. }

  29. 

  30. td.arrow-ch-int {

  31. width:100%;

  32. border-top:5px solid #d9dbde; 

  33. background-image:url(../img/fon-essai.jpg);

  34. background-repeat:no-repeat;

  35. background-position:bottom center;

  36. padding-bottom:40px;

  37. color: #fff;

  38. }

  39. 

  40. table.arrow-ch h2 {

  41. 

  42. font-weight:normal;

  43. font-size:1.2em;

  44. margin:0px 15px;

  45. }

  46. 

  47. table.ch-end {

  48. margin-bottom:40px;

  49. margin-top:3px;

  50. border:5px solid #d9dbde; 

  51. width:470px;

  52. margin-left:70px;

  53. }

  54. 

  55. table.ch-end td {

  56. padding:3px 0px;

  57. background-image:url(../img/grey-pattern.jpg);

  58. background-repeat:repeat-x;

  59. background-position:top left;

  60. color:#999ba0;

  61. }

  62. 

  63. table.ch-end td h2 {

  64. font-weight:normal;

  65. font-size:1.1em;

  66. margin:0px 15px;

  67. color: #1084A7;

  68. }

  69. 

  70. td.arrow-ch-int {

  71.     background-image: url("../img/channel-arrow-bloc.jpg");

  72.     background-position: center bottom;

  73.     background-repeat: no-repeat;

  74.     border-top: 5px solid #D9DBDE;

  75.     color: #FFFFFF;

  76.     padding-bottom: 40px;

  77.     width: 100%;

  78. }

  79. 

  80. .cellscontent {margin:20px 20px 40px 20px; width:860px;}

  81. .cellscontent h2 {color: #1084A7;}

  82. .cellscontent tr { margin:50px; }

  83. .cellscontent2 {margin:20px 20px 40px 20px; width:860px; border-collapse:separate !important;}

  84. .cellscontent3 {margin:0px 20px 00px 20px; width:860px;}

  85. 

  86. 

  87. td.first-item-process {

  88. padding:10px 10px 10px 20px;

  89. width:95px;

  90. }

  91. 

  92. td.cell-item-process {

  93. background-image:url(../img/process-grey.jpg);

  94. background-repeat:no-repeat;

  95. background-position:center left;

  96. border-collapse: collapse;

  97. font-size: 16px;

  98. padding: 10px 10px 10px 60px;

  99. width: 95px;

  100. }

  101. 

  102. .comments {

  103. margin-top:20px;

  104. width:100%;

  105. }

  106. 

  107. .post-it-table {

  108. margin:0px;

  109. }

  110. 

  111. .pin {

  112. background-image:url(../img/scotch-post-it.jpg); 

  113. background-repeat:no-repeat;

  114. }

  115. 

  116. td.pin {

  117. padding:0;

  118. }

  119. 

  120. .pin-corner td {

  121. padding:40px 30px 40px 50px;

  122. }

  123. 

  124. .pin-corner {

  125.     background-image: url("../img/corner-post-it.jpg");

  126.     background-position: right bottom;

  127.     background-repeat: no-repeat;

  128.     width: 450px;

  129. 	margin-bottom: 0px;

  130. }

  131. 

  132. td.imagecenter {

  133. margin:0px auto;

  134. width: 50%;

  135. vertical-align:middle;

  136. }

  137. 

  138. .process_table {

  139. background-color:#dcdcde; 

  140. margin:0px 12px;

  141. }

  142. 

  143. .end-process{

  144. background-image:url(../img/process-end.jpg); 

  145. background-repeat:no-repeat; 

  146. background-position:center right;

  147. }

  148. 

  149. .pyramide-background {

  150. width:580px; 

  151. background-image:url(../img/pyramide.jpg); 

  152. background-repeat:no-repeat; 

  153. background-position:top center; 

  154. text-align:center; 

  155. margin:0px 10px; 

  156. padding-top:70px;

  157. text-align:center;

  158. }

  159. 

  160. .pyramide-background p {

  161. margin-bottom:0px;

  162. }

  163. 

  164. .pyramide-background td{

  165. border-top:2px solid #ffffff;

  166. text-align:center;

  167. color:#fff;

  168. text-align:center;

  169. margin-right:auto;

  170. margin-left:auto;

  171. padding:10px 0px;

  172. }

  173. 

  174. td.pyramide-top {

  175. padding-top:80px;

  176. }

  177. 

  178. .hori-table-main {

  179. background-color: #afb1b6;

  180. margin-left:40px;

  181. width:90%;

  182. border:3px solid #ececec;

  183. }

  184. 

  185. 

  186. .hori-table-main h4 {

  187. color: #1084A7; 

  188. padding-bottom:15px; 

  189. font-weight:normal; 

  190. font-style:italic;

  191. }

  192. 

  193. .hori-table-line td{

  194. padding:10px;

  195. border:3px solid #eee;

  196. }

  197. 

  198. td.hori-table-cell {background-color:#afafaf; color: #fff; width:30%; padding:10px;}

  199. 

  200. td.hori-table-cell h3, td.hori-table-cell h2, td.hori-table-cell h4 {color: #fff; background-image:none; padding-left:0; text-decoration:none;}

  201. 

  202. .hori-table-line {

  203. background-color:#fff;

  204. padding:10px;

  205. }

  206. 

  207. .hori-table-main ul {

  208. list-style-image:url(../img/orange-bullet.png);

  209. margin-left:25px;

  210. }

  211. 

  212. .hori-table-main ul li {

  213. margin-bottom:15px;

  214. }

  215. 

  216. td.illusleft{

  217. vertical-align: middle !important;

  218. }

  219. 

  220. .circular {

  221. width:450px;

  222. margin-top:0px;

  223. margin-bottom:0px;

  224. margin-right:20px;

  225. margin-left:100px;

  226. color:#666;

  227. }

  228. 

  229. .circular td{

  230. padding: 0px;

  231. }

  232. 

  233. table.circ-a1 {

  234. width:450px;

  235. margin-bottom:0px;

  236. }

  237. 

  238. table.circ-a2 {

  239. background-image:url(../img/circular-haut.jpg);

  240. background-repeat:no-repeat;

  241. width:450px;

  242. margin-bottom:0px;

  243. }

  244. 

  245. table.circ-a3 {

  246. background-image:url(../img/circular-bas.jpg);

  247. background-position:bottom left;

  248. background-repeat:no-repeat;

  249. width:450px;

  250. margin-bottom:0px;

  251. }

  252. 

  253. td.circular-item {

  254. background-image:url(../img/degrade1.jpg);

  255. background-repeat:repeat-x;

  256. width:120px;

  257. padding:15px 5px;

  258. -moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px; border-radius:7px; 

  259. }

  260. 

  261. .circular p {

  262. padding:0px;

  263. text-align:center;

  264. }

  265. 

  266. td.circular-cell1{

  267. width:150px;

  268. }

  269. 

  270. td.circular-cell2{

  271. height:60px;

  272. }

  273. 

  274. td.circular-cell3{

  275. height:50px;

  276. }

  277. 

  278. td.circular-cell4{

  279. width:160px;

  280. }

  281. 

  282. td.item-image-legende img {

  283. margin:5px;

  284. border:1px solid #cccccc; 

  285. }

  286. 

  287. 

  288. td.item-image-legende {

  289. padding:5px;

  290. background-image:url(../img/gallery-background.jpg);

  291. background-repeat:repeat-x;

  292. text-align:center;

  293. width:33%;

  294. border:1px solid #ffffff !important;

  295. }

  296. 

  297. td.item-image-legende p {

  298. 	font-size:0.9em; padding:5px; color: #1084A7; text-align:center; margin:0px 15px;

  299. }

  300. 

  301. .image-and-legend {

  302. margin-right:25px;

  303. }

  304. 

  305. .image-and-legend td {

  306. text-align:center;

  307. padding:0px 10px 10px 10px;

  308. }

  309. 

  310. td.legendingrey {

  311. border:1px solid #cccccc; background-color:#9b9fa7; font-size:0.9em; color: #ffffff; padding:5px;

  312. }

  313. 

  314. td.cellcenter {vertical-align:middle !important;}

  315. 

  316. .table-with-borders{ border: 1px solid #DDDDDD !important;}

  317. 

  318. table.methodology {

  319. background-color:#d2d2d7;

  320. border:1px solid #cecfd4;

  321. font-size:0.9em;

  322. color: #6e6e70;

  323. -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; 

  324. }

  325. 

  326. table.methodology td {

  327. padding:5px;

  328. width:25%;

  329. }

  330. 

  331. table.methodology img {

  332. border:1px solid #b3b4b9;

  333. margin-bottom:10px;

  334. margin-top:10px;

  335. }

  336. 

  337. 

  338. table.methodology h2 {

  339. color:#fff;

  340. font-weight:bold;

  341. }

  342. 

  343. table.methodology td.methoarrow {

  344. background-image:url(../img/methodologyarrow.png);

  345. background-position:left center;

  346. background-repeat:no-repeat;

  347. padding-left:40px;

  348. }

  349. 

  350. td.methofirst {

  351. font-size:1.1em;

  352. vertical-align:middle;

  353. }

  354. 

  355. td.methofirst p, td.methofirst ul{

  356. padding:15px;

  357. }

  358. 

  359. td.methofirst ul li{

  360. margin:17px 5px 17px 7px;

  361. padding-left:5px;

  362. list-style-image:url(../img/liarrow.png);

  363. }

  364. 

  365. td.roundcell{

  366. background-image:url(../img/gallery-background.jpg);

  367. background-repeat:repeat-x;

  368. width:45%;

  369. padding:20px;

  370. -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; behavior: url(border-radius.htc);

  371. }

  372. 

  373. .growth {

  374. background-image:url(../img/climbing-arrow.jpg);

  375. background-repeat:no-repeat;

  376. width:500px;

  377. margin-left:50px;

  378. color:#666;

  379. vertical-align:top;

  380. }

  381. 

  382. .growth td.text-growth-stage {

  383. font-size:0.9em;

  384. padding-top:145px;

  385. padding-left:15px;

  386. }

  387. 

  388. .growth td.text-growth-stage p{

  389. padding:0;

  390. margin:0;

  391. }

  392. .growth td.text-growth-stage table td {

  393. padding-top:0px; padding-bottom:25px;

  394. }

  395. 

  396. td.growth-line1{

  397. padding-left:240px;

  398. }

  399. 

  400. td.growth-line2{

  401. padding-left:190px;

  402. }

  403. 

  404. td.growth-line3{

  405. padding-left:150px;

  406. }

  407. 

  408. td.growth-line4{

  409. padding-left:125px;

  410. }

  411. 

  412. td.growth-line5{

  413. padding-left:100px;

  414. }

  415. 

  416. td.growth-line6{

  417. padding-left:80px;

  418. }

  419. 

  420. td.growth-line7{

  421. padding-left:60px;

  422. }

  423. 

  424. .premiere {

  425. background-color: #9b9fa7;

  426. border:1px solid #ffffff;

  427. color:#ffffff;

  428. 

  429. }

  430. 

  431. .ligne td, .premiere td {

  432. padding:5px 10px;

  433. border:1px solid #ffffff;

  434. }

  435. 

  436. .ligne {

  437. background-color: #eceaea;

  438. }

  439. 

  440. table.matrix22 tr td p, table.matrix22_scenario tr td p {

  441. margin:25px 15px; 

  442. }

  443. 

  444. table.matrix22, table.matrix22_scenario{

  445. position:relative; z-index: 0;

  446. width:570px;

  447. border-collapse:separate !important;

  448. border-spacing: 10px;

  449. margin-right:25px;

  450. 

  451. }

  452. 

  453. .matrix22 tr {

  454. height:200px;

  455. }

  456. 

  457. .matrix22_scenario tr {

  458. height:100px;

  459. }

  460. 

  461. td.rond {

  462. border: 1px solid #cbcbcb;

  463. color:#666;

  464. vertical-align:top;

  465. margin-right:15px;

  466. -moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px; border-radius:7px; behavior: url(border-radius.htc);

  467. }

  468. 

  469. td.matrixcell1{

  470. background-color:#e6e5e4; 

  471. }

  472. 

  473. td.matrixcell2{

  474. background-color:#e8e1dc; 

  475. }

  476. 

  477. td.matrixcell3{

  478. background-color:#d3d2d1; 

  479. }

  480. 

  481.