scorm.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. /* copy of default_scorm.css */
  2. .inner_lp_toc {
  3. overflow: auto;
  4. background-color: white;
  5. height: 210px;
  6. }
  7. .inner_lp_toc .scorm_item a {
  8. font-size: 13px;
  9. margin-right: 1px;
  10. padding-bottom: 2px;
  11. text-decoration: none;
  12. color: #2F3E46;
  13. }
  14. .inner_lp_toc .scorm_item a.chapter_module {
  15. font-weight: normal;
  16. margin-right: 10px;
  17. }
  18. .inner_lp_toc .scorm_item_highlight {
  19. border: 1px solid #999;
  20. background:#999;
  21. font-weight:bold;
  22. text-shadow:0 -1px 1px #666;
  23. background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#999));
  24. background-image:-webkit-linear-gradient(top,#666,#999);
  25. background-image:-moz-linear-gradient(top,#666,#999);
  26. background-image:-ms-linear-gradient(top,#666,#999);
  27. background-image:-o-linear-gradient(top,#666,#999);
  28. background-image:linear-gradient(top,#666,#999);
  29. margin-right: 0px;
  30. padding: 10px 0px 10px 0px;
  31. text-decoration: none;
  32. }
  33. .inner_lp_toc .scorm_item_highlight a {
  34. color:#fff;
  35. margin-right: 1px;
  36. text-decoration: none;
  37. font-weight: bold;
  38. }
  39. .inner_lp_toc .scorm_item_section {
  40. border:1px solid #222;
  41. background:#333;
  42. font-weight:bold;
  43. color:#fff;
  44. text-shadow:0 -1px 1px #000;
  45. background-image:-webkit-gradient(linear,left top,left bottom,from(#555),to(#333));
  46. background-image:-webkit-linear-gradient(top,#555,#333);
  47. background-image:-moz-linear-gradient(top,#555,#333);
  48. background-image:-ms-linear-gradient(top,#555,#333);
  49. background-image:-o-linear-gradient(top,#555,#333);
  50. background-image:linear-gradient(top,#555,#333);
  51. margin-right: 1px;
  52. padding: 10px 0px 10px 0px;
  53. text-decoration: none;
  54. }
  55. .inner_lp_toc .scorm_item {
  56. font-size: 16px;
  57. margin-left: 10px;
  58. margin-right:10px;
  59. text-decoration: none;
  60. border-color: rgba(255, 255, 255, 0.3);
  61. }
  62. .inner_lp_toc .scorm_item_1 {
  63. border-bottom: 1px solid #CCCCCC;
  64. background:#eee;
  65. font-weight:bold;
  66. color:#444;
  67. text-shadow:0 1px 1px #f6f6f6;
  68. background-image:-webkit-gradient(linear,left top,left bottom,from(#fdfdfd),to(#eee));
  69. background-image:-webkit-linear-gradient(top,#fdfdfd,#eee);
  70. background-image:-moz-linear-gradient(top,#fdfdfd,#eee);
  71. background-image:-ms-linear-gradient(top,#fdfdfd,#eee);
  72. background-image:-o-linear-gradient(top,#fdfdfd,#eee);
  73. background-image:linear-gradient(top,#fdfdfd,#eee);
  74. margin-right: 1px;
  75. padding: 10px 0px 10px 0px;
  76. text-decoration: none;
  77. font-weight: normal;
  78. background:#FDFDFD;
  79. }
  80. .inner_lp_toc .scorm_item_2 {
  81. background-image:-webkit-gradient(linear,left top,left bottom,from(#fdfdfd),to(#eee));
  82. background-image:-webkit-linear-gradient(top,#fdfdfd,#eee);
  83. background-image:-moz-linear-gradient(top,#fdfdfd,#eee);
  84. background-image:-ms-linear-gradient(top,#fdfdfd,#eee);
  85. background-image:-o-linear-gradient(top,#fdfdfd,#eee);
  86. background-image:linear-gradient(top,#fdfdfd,#eee);
  87. border-bottom: 1px solid #CCCCCC;
  88. color: #444444;
  89. font-weight: bold;
  90. text-shadow: 0 1px 1px #F6F6F6;
  91. margin-right: 1px;
  92. padding: 10px 0px 10px 0px;
  93. text-decoration: none;
  94. font-weight: normal;
  95. }
  96. .inner_lp_toc .scorm_item_section .scorm_item:before
  97. {
  98. content : url('../lp_section.png'); /* from main/newscorm/lp_controller.php file */
  99. vertical-align: text-top;
  100. margin-right : 5px;
  101. }
  102. .scorm_section_level_0 {
  103. padding : 0 0 0 0;
  104. }
  105. .scorm_section_level_1 {
  106. padding : 0 0.5em 0 2em;
  107. }
  108. .scorm_section_level_2 {
  109. padding : 0 0.5em 0 4em;
  110. }
  111. .scorm_section_level_3 {
  112. padding : 0 0.5em 0 6em;
  113. }
  114. .scorm_section_level_4 {
  115. padding : 0 0.5em 0 8em;
  116. }
  117. .scorm_section_level_5 {
  118. padding : 0 0.5em 0 10em;
  119. }
  120. .scorm_item_level_0 {
  121. padding : 0 0 0 0;
  122. }
  123. .scorm_item_level_1 {
  124. padding : 0 1.5em 0 1.5em;
  125. }
  126. .scorm_item_level_2 {
  127. padding : 0 1.5em 0 3em;
  128. }
  129. .scorm_item_level_3 {
  130. padding : 0 1.5em 0 4.5em;
  131. }
  132. .scorm_item_level_4 {
  133. padding : 0 1.5em 0 6em;
  134. }
  135. .scorm_item_level_5 {
  136. padding : 0 1.5em 0 7.5em;
  137. }
  138. .scorm_item.scorm_item_level_2 > a, .scorm_item.scorm_item_level_3 > a, .scorm_item.scorm_item_level_4 > a, .scorm_item.scorm_item_level_5 > a{
  139. font-weight: normal;
  140. }
  141. /* end of copy of default_scorm.css */
  142. .scormpage {
  143. height: 100%;
  144. }
  145. .scormpage .menu {
  146. width: 180px;
  147. float: left;
  148. margin: 1px;
  149. padding: 0px;
  150. margin-top: 0px;
  151. padding-top: 0px;
  152. }
  153. .lp_toc {
  154. background-color: white;
  155. height: 380px;
  156. width: 99%;
  157. border-right: 1px none;
  158. }
  159. .inner_lp_toc {
  160. overflow: auto;
  161. background-color: #F2F2EF;
  162. height: 210px;
  163. padding: 10px;
  164. }
  165. .inner_lp_toc .scorm_item a {
  166. margin-right: 1px;
  167. padding-bottom: 2px;
  168. text-decoration: none;
  169. color: #2F3E46;
  170. }
  171. .inner_lp_toc .scorm_item a.chapter_module {
  172. font-weight: normal;
  173. margin-right: 10px;
  174. }
  175. .inner_lp_toc .scorm_item_highlight {
  176. border:1px solid #00aad4;
  177. background:#00aad4;
  178. background-image:none;
  179. margin-right: 0px;
  180. padding: 10px 0px 10px 0px;
  181. text-decoration: none;
  182. }
  183. .inner_lp_toc .scorm_item_highlight a {
  184. color:#fff;
  185. margin-right: 1px;
  186. text-decoration: none;
  187. }
  188. .inner_lp_toc .scorm_item_section {
  189. border:1px solid #222;
  190. background:#333;
  191. font-weight:normal;
  192. color:#fff;
  193. text-shadow:0 -1px 1px #000;
  194. background-image:-webkit-gradient(linear,left top,left bottom,from(#555),to(#333));
  195. background-image:-webkit-linear-gradient(top,#555,#333);
  196. background-image:-moz-linear-gradient(top,#555,#333);
  197. background-image:-ms-linear-gradient(top,#555,#333);
  198. background-image:-o-linear-gradient(top,#555,#333);
  199. background-image:linear-gradient(top,#555,#333);
  200. margin-right: 1px;
  201. padding: 10px 0px 10px 0px;
  202. text-decoration: none;
  203. }
  204. .inner_lp_toc .scorm_item {
  205. font-size: 14px;
  206. margin-left: 10px;
  207. margin-right:10px;
  208. text-decoration: none;
  209. border-color: rgba(255, 255, 255, 0.3);
  210. }
  211. .inner_lp_toc .scorm_item_1 {
  212. border-bottom: 1px solid #CCCCCC;
  213. background:#eee;
  214. font-weight:bold;
  215. color:#444;
  216. text-shadow:0 1px 1px #f6f6f6;
  217. background-image:none;
  218. margin-right: 1px;
  219. padding: 10px 0px 10px 0px;
  220. text-decoration: none;
  221. font-weight: normal;
  222. }
  223. .inner_lp_toc .scorm_item_2 {
  224. background-image:none;
  225. border-bottom: 1px solid #CCCCCC;
  226. color: #444444;
  227. font-weight: normal;
  228. margin-right: 1px;
  229. padding: 10px 0px 10px 0px;
  230. text-decoration: none;
  231. font-weight: normal;
  232. }
  233. .inner_lp_toc .scorm_title {
  234. font-weight: bold;
  235. background:#ccc;
  236. font-size: 14px;
  237. color: #444;
  238. }
  239. .inner_lp_toc .scorm_title_text {
  240. margin-left: 10px;
  241. }
  242. .inner_lp_toc .scorm_status_img {
  243. margin:0px;
  244. margin-left: -10px;
  245. width:10px;
  246. }
  247. .lp_navigation {
  248. overflow: auto;
  249. background-color: white;
  250. height: 44px;
  251. width:180px;
  252. padding-top: 4px;
  253. padding-bottom:0px;
  254. border: none;
  255. margin-top: -18px;
  256. border-top: 1px dotted black;
  257. border-bottom: 1px dotted black;
  258. }
  259. .lp_navigation_elem {
  260. padding-left: 15px;
  261. padding-top: 0px;
  262. }
  263. /*.scormpage .menu */
  264. .lp_navigation_elem .progresstext {
  265. margin-top: -20px;
  266. }
  267. /*.scormpage .menu */
  268. .lp_navigation_elem .buttons {
  269. margin-left: 0px;
  270. margin-right: 0em;
  271. margin-top: 0.4em;
  272. }
  273. .scormpage .menu .notification {
  274. background-color: white;
  275. height: 50px;
  276. }
  277. .scormpage .menu .notification .message {
  278. background-color: white;
  279. height: 50px;
  280. width: 180px;
  281. border: none;
  282. }
  283. .scormpage .content {
  284. /*float: left;
  285. width: 60%;*/
  286. margin-top: 0px;
  287. padding-top: 0px;
  288. padding-left: 180px;
  289. background-color: white;
  290. }
  291. .iframe {
  292. border: 0px solid black;
  293. height: 100%;
  294. width: 95%;
  295. margin: 0px;
  296. padding-right: 0px;
  297. overflow: auto;
  298. vertical-align: top;
  299. }
  300. .scormpage .footer {
  301. clear: both;
  302. }
  303. #image_preview {
  304. padding-left: 17px;
  305. }
  306. #msg_div_id {
  307. padding-left: 17px;
  308. padding-top: 4px;
  309. }
  310. .breadcrumb .divider {
  311. color: #FFCC00;
  312. padding-bottom: 0;
  313. padding-left: 5px;
  314. padding-right: 5px;
  315. padding-top: 0;
  316. }
  317. #learning_path_breadcrumb_zone .breadcrumb{
  318. background: #ff3019; /* Old browsers */
  319. background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
  320. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
  321. background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
  322. background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
  323. background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
  324. background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */
  325. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
  326. color: #fff;
  327. text-transform: capitalize;
  328. border:none;
  329. -webkit-border-radius: 1px;
  330. -moz-border-radius: 1px;
  331. border-radius: 1px;
  332. }
  333. #learning_path_breadcrumb_zone .breadcrumb a{
  334. color: #FFF;
  335. }
  336. #learning_path_breadcrumb_zone .breadcrumb a:hover{
  337. text-decoration: none;
  338. opacity: 0.8;
  339. }
  340. #scorm_title {
  341. font-weight: bold;
  342. background:none;
  343. font-size: 20px;
  344. background-image: none;
  345. color: #cf0404;
  346. padding-top: 15px;
  347. padding-bottom: 15px;
  348. }
  349. #learning_path_main #control {
  350. opacity: 1;
  351. }
  352. .buttons a img:hover{
  353. opacity: 0.7;
  354. }
  355. #author_image{
  356. background-color: #F2F2EF;
  357. -webkit-border-radius: 10px;
  358. -moz-border-radius: 10px;
  359. border-radius: 10px;
  360. border: 1px solid #CCCCCC;
  361. margin-top: 10px;
  362. }
  363. #author_icon img{
  364. background-color: #fff;
  365. padding: 5px;
  366. -webkit-border-radius: 10px;
  367. -moz-border-radius: 10px;
  368. border-radius: 10px;
  369. }
  370. #author_image .progresstext{
  371. font-size: 20px;
  372. color: #cf0404;
  373. font-weight: bold;
  374. }
  375. #learning_path_left_zone #header {
  376. font-size: 18px;
  377. margin-top: 10px;
  378. }
  379. #learning_path_left_zone .no-border{
  380. background: none;
  381. color: #cf0404;
  382. }
  383. .progress {
  384. height: 18px;
  385. margin-bottom: 18px;
  386. overflow: hidden;
  387. background-color: #f7f7f7;
  388. background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
  389. background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
  390. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
  391. background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
  392. background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
  393. background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
  394. background-repeat: repeat-x;
  395. -webkit-border-radius: 4px;
  396. -moz-border-radius: 4px;
  397. border-radius: 4px;
  398. filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
  399. -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  400. -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  401. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  402. }
  403. .progress-striped .bar {
  404. background-color: #F86700;
  405. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  406. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  407. -webkit-animation: progress-bar-stripes 2s linear infinite;
  408. animation: progress-bar-stripes 2s linear infinite;
  409. }
  410. /*STYLES PROCESS LESSION*/
  411. .inner_lp_toc .scorm_completed {
  412. background-image: url("images/blue_arrow.png") !important;
  413. background-position: 255px center !important;
  414. background-repeat: no-repeat;
  415. }
  416. .inner_lp_toc .scorm_item_1 {
  417. background:none;
  418. background-repeat: no-repeat;
  419. border-bottom-color: #CCCCCC;
  420. border-bottom-style: solid;
  421. border-bottom-width: 1px;
  422. color: #444444;
  423. font-weight: normal;
  424. margin-right: 1px;
  425. padding-bottom: 10px;
  426. padding-left: 0;
  427. padding-right: 0;
  428. padding-top: 10px;
  429. text-shadow: 0 1px 1px #F6F6F6;
  430. }
  431. #learning_path_main #control {
  432. background-image: none;
  433. background-color: #d7eef4;
  434. bottom: 0;
  435. height: 34px;
  436. margin-bottom: auto;
  437. margin-left: auto;
  438. margin-right: auto;
  439. margin-top: auto;
  440. padding-bottom: 8px;
  441. padding-left: 0;
  442. padding-right: 0;
  443. padding-top: 8px;
  444. position: absolute;
  445. text-align: center;
  446. width: 100%;
  447. border-top:1px solid #00AAD4;
  448. }
  449. .inner_lp_toc .scorm_item_highlight {
  450. background-color: #cf0404;
  451. background-image: url("images/white_arrow.png") !important;
  452. background-position: 255px center !important;
  453. background-repeat: no-repeat;
  454. border: 1px solid #cf0404;
  455. text-shadow:none;
  456. }
  457. #author_name {
  458. color: #666666;
  459. float: left;
  460. font-size: 13px;
  461. margin-top: 2px;
  462. text-align: center;
  463. width: 100%;
  464. padding-top: 10px;
  465. padding-bottom: 5px;
  466. }