scorm.css 14 KB

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