course.css 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  1. /*
  2. ==============================================================================
  3. GLOBAL STYLES
  4. ==============================================================================
  5. */
  6. .dokeos_course {
  7. width:95%;
  8. margin:1em auto;
  9. text-align:center;
  10. }
  11. /*
  12. ------------------------------------------------------------------------------
  13. Introductory title
  14. ------------------------------------------------------------------------------
  15. */
  16. #box_title1, #footer1 {
  17. border:1px solid #4171b5;
  18. padding:1em;
  19. width:99%;
  20. margin:1em auto;
  21. }
  22. #box_title1 h1 {
  23. font:bold 2.5em Arial, sans-serif, sans;
  24. }
  25. #box_title h2 {
  26. font:bold 2em Arial, sans-serif, sans;
  27. }
  28. #content1 {
  29. width:99%;
  30. clear:both;
  31. text-align:justify;
  32. }
  33. #content1 img.icon {
  34. float:left;
  35. margin:0 1em 1em 1em;
  36. display:block;
  37. vertical-align:top;
  38. }
  39. #email1 {
  40. float:right;
  41. clear:right;
  42. text-align:right;
  43. }
  44. #email1, .manager1 {
  45. width:50%;
  46. }
  47. #footer1 {
  48. font-weight:bold;
  49. height: 1em;
  50. line-height: 1em;
  51. }
  52. #manager1 {
  53. float:left;
  54. clear:left;
  55. text-align:left;
  56. }
  57. /*
  58. ------------------------------------------------------------------------------
  59. Explanation
  60. ------------------------------------------------------------------------------
  61. */
  62. #content2 {
  63. position:absolute;
  64. top:2em;
  65. left:18em;
  66. text-align:justify;
  67. margin-right:2em;
  68. }
  69. #content2 h1 {
  70. padding:.5em;
  71. font:bold 2em Arial, sans-serif, sans;
  72. }
  73. #content2 h2 {
  74. font:normal 1.1em Arial, sans-serif, sans;
  75. margin:.2em 0 3em .5em;
  76. }
  77. #content2 p {
  78. margin:.5em;
  79. }
  80. #explanation {
  81. text-align:center;
  82. margin: 1em auto;
  83. width:auto;
  84. border:1px solid #4171b5;
  85. }
  86. #list2 {
  87. width:10em;
  88. border:1px solid #4171b5;
  89. margin:2em auto;
  90. }
  91. #list2 p {
  92. text-align:left;
  93. margin-left:.2em;
  94. }
  95. #list2 li {
  96. margin:0 0 0 2em;
  97. padding:0;
  98. text-indent:.5em;
  99. text-align:left;
  100. list-style-position:inside;
  101. }
  102. #list2 ul {
  103. margin:0 0 .5em 0;
  104. padding:0;
  105. text-align:left;
  106. list-style-position:inside;
  107. }
  108. #main2 {
  109. border:1px solid #4171b5;
  110. }
  111. #nav2 {
  112. position:absolute;
  113. left:2em;
  114. top:3em;
  115. width:15em;
  116. }
  117. .template2 {
  118. position:relative;
  119. }
  120. /*
  121. ------------------------------------------------------------------------------
  122. Course objetives
  123. ------------------------------------------------------------------------------
  124. */
  125. #box_title3, #content3 {
  126. border:1px solid #4171b5;
  127. padding:1em;
  128. width:99%;
  129. margin:1em auto;
  130. }
  131. #box_title3 h1 {
  132. font:bold 3.5em Arial, sans-serif, sans;
  133. }
  134. #content3 {
  135. position:relative;
  136. padding-bottom:50px;
  137. text-align:left;
  138. }
  139. #content3 #primary {
  140. font-weight:bold;
  141. font-size:2em;
  142. margin:0;
  143. padding:0;
  144. }
  145. #content3 #primary li, #content3 #secondary li {
  146. margin:0 0 0 1em;
  147. padding:0;
  148. }
  149. #content3 #primary .secondary {
  150. font-weight:normal;
  151. font-size:.8em;
  152. margin:0 0 0 2em;
  153. padding:0;
  154. }
  155. #footer3 {
  156. position:absolute;
  157. bottom:0;
  158. right:0;
  159. }
  160. /*
  161. ==============================================================================
  162. Styles for corporative version
  163. ==============================================================================
  164. */
  165. #corp {
  166. font:normal .85em Lucida Grande, Arial, sans-serif, sans;
  167. }
  168. #corp a {
  169. text-decoration: none;
  170. font: bold 100% Arial, sans-serif, sans;
  171. color: #4170b4;
  172. }
  173. #corp a:hover, #corp a:focus {
  174. color: #111;
  175. }
  176. /*
  177. ------------------------------------------------------------------------------
  178. Introductory title
  179. ------------------------------------------------------------------------------
  180. */
  181. #corp #box_title1 {
  182. background:transparent url("images/alert.jpg") no-repeat top center;
  183. border:none;
  184. padding-top:10px;
  185. }
  186. #corp #box_title1 #bottom {
  187. background:transparent url("images/alert.jpg") no-repeat top center;
  188. height:40px;
  189. width:100%;
  190. }
  191. #corp #footer1 {
  192. border: 1px solid #ddd;
  193. line-height:.8em;
  194. height:.8em;
  195. padding:.5em;
  196. }
  197. /*
  198. ------------------------------------------------------------------------------
  199. Explanation
  200. ------------------------------------------------------------------------------
  201. */
  202. #corp #explanation {
  203. background:transparent url("images/alert.jpg") no-repeat top center;
  204. border:none;
  205. padding-top:10px;
  206. }
  207. #corp #explanation #bottom {
  208. background:transparent url("images/alert.jpg") no-repeat top center;
  209. height:40px;
  210. margin-top:-15px;
  211. width:100%;
  212. }
  213. #corp #list2, #corp #main2 {
  214. border:1px solid #aaa;
  215. }
  216. #corp #content2 #main2 h2 {
  217. font:bold 1.1em Arial, sans-serif, sans;
  218. margin:.2em 0 3em .5em;
  219. }
  220. /*
  221. ------------------------------------------------------------------------------
  222. Course objetives
  223. ------------------------------------------------------------------------------
  224. */
  225. #corp #box_title3 {
  226. background:transparent url("images/alert.jpg") no-repeat top center;
  227. border:none;
  228. padding-top:10px;
  229. }
  230. #corp #box_title3 #bottom {
  231. background:transparent url("images/alert.jpg") no-repeat top center;
  232. height:40px;
  233. width:100%;
  234. }
  235. #corp #content3 {
  236. border:1px solid #bbb;
  237. }
  238. /*
  239. ==============================================================================
  240. Styles for academic version
  241. ==============================================================================
  242. */
  243. #academic {
  244. font-family:normal .85em trebuchet, verdana, Arial, sans-serif, sans;
  245. color: #000915;
  246. }
  247. #academic a {
  248. text-decoration: none;
  249. font: bold 100% Arial, sans-serif, sans;
  250. color: #4171b5;
  251. }
  252. #academic a:hover, a:focus {
  253. color: #000915;
  254. }
  255. /*
  256. ------------------------------------------------------------------------------
  257. Introductory title
  258. ------------------------------------------------------------------------------
  259. */
  260. #academic #box_title1 {
  261. background:transparent url("images/alert_academic.jpg") no-repeat top center;
  262. border:none;
  263. padding-top:10px;
  264. color: #00122B;
  265. }
  266. #academic #box_title1 #bottom {
  267. background:transparent url("images/alert_academic.jpg") no-repeat top center;
  268. height:40px;
  269. width:100%;
  270. }
  271. #academic #footer1 {
  272. background: #8cafe1 url('images/crystal3.png') repeat-x;
  273. }
  274. #academic #footer1 a {
  275. color:#fff;
  276. }
  277. #academic #footer1 a:hover, #academic #footer1 a:focus {
  278. color: #000915;
  279. }
  280. /*
  281. ------------------------------------------------------------------------------
  282. Explanation
  283. ------------------------------------------------------------------------------
  284. */
  285. #academic #explanation {
  286. background:transparent url("images/alert_academic.jpg") no-repeat top center;
  287. border:none;
  288. padding-top:10px;
  289. color: #00122B;
  290. }
  291. #academic #explanation #bottom {
  292. background:transparent url("images/alert_academic.jpg") no-repeat top center;
  293. height:40px;
  294. width:100%;
  295. }
  296. #academic #list2, #academic #main2 {
  297. border: 1px solid #0049AF;
  298. }
  299. #academic #nav2 img {
  300. margin-bottom:3em;
  301. }
  302. #academic #nav2 .logo {
  303. margin-left:-1.2em;
  304. }
  305. #academic #nav2 {
  306. top:5em;
  307. }
  308. /*
  309. ------------------------------------------------------------------------------
  310. Course objetives
  311. ------------------------------------------------------------------------------
  312. */
  313. #academic #box_title3 {
  314. border: 1px solid #0049AF;
  315. background: #b0c8eb url('images/crystal3.png') repeat-x;
  316. color: #00122B;
  317. }
  318. #academic #content3 {
  319. border: 1px solid #0049AF;
  320. }
  321. /*
  322. ==============================================================================
  323. Styles for baby version
  324. ==============================================================================
  325. */
  326. #baby {
  327. font:normal .85em 'Lucida Grande', verdana, Arial, sans-serif, sans;
  328. color: #000;
  329. }
  330. #baby a {
  331. text-decoration: none;
  332. font: bold 100% Arial, sans-serif, sans;
  333. color: #9a0;
  334. }
  335. #baby a:hover, a:focus {
  336. color: #470;
  337. }
  338. /*
  339. ------------------------------------------------------------------------------
  340. Introductory title
  341. ------------------------------------------------------------------------------
  342. */
  343. #baby #box_title1 {
  344. background:transparent url("images/alert_baby.jpg") no-repeat top center;
  345. border:none;
  346. padding-top:10px;
  347. color: #00122B;
  348. }
  349. #baby #box_title1 #bottom {
  350. background:transparent url("images/alert_baby.jpg") no-repeat top center;
  351. height:40px;
  352. width:100%;
  353. }
  354. #baby #footer1 {
  355. background-color:transparent;
  356. border: 1px solid #BFAF00;
  357. padding: .2em;
  358. color: #3F3A00;
  359. }
  360. /*
  361. ------------------------------------------------------------------------------
  362. Explanation
  363. ------------------------------------------------------------------------------
  364. */
  365. #baby #explanation {
  366. background:transparent url("images/alert_baby.jpg") no-repeat top center;
  367. border:none;
  368. padding-top:10px;
  369. color: #3F3A00;
  370. }
  371. #baby #explanation #bottom {
  372. background:transparent url("images/alert_baby.jpg") no-repeat top center;
  373. height:40px;
  374. width:100%;
  375. }
  376. #baby #list2, #baby #main2 {
  377. border: 1px solid #BFAF00;
  378. }
  379. #baby #nav2 {
  380. top:0;
  381. }
  382. #baby #content2 #main2 h2 {
  383. font:bold 1.1em Arial, sans-serif, sans;
  384. margin:.2em 0 3em .5em;
  385. }
  386. /*
  387. ------------------------------------------------------------------------------
  388. Course objetives
  389. ------------------------------------------------------------------------------
  390. */
  391. #baby #box_title3 {
  392. background:transparent url("images/alert_baby.jpg") no-repeat top center;
  393. border:none;
  394. padding-top:10px;
  395. color: #3F3A00;
  396. }
  397. #baby #box_title3 #bottom {
  398. background:transparent url("images/alert_baby.jpg") no-repeat top center;
  399. height:40px;
  400. width:100%;
  401. }
  402. #baby #content3 {
  403. border: 1px solid #BFAF00;
  404. }