theme/base/style/course.css

   1 /**
   2  * CSS for displaying courses and everything in them
   3  */
   4 .section_add_menus {text-align:right;}
   5 .dir-rtl .section_add_menus {text-align:left;}
   6 .section_add_menus .horizontal div,
   7 .section_add_menus .horizontal form {display:inline;}
   8 .section_add_menus optgroup {font-weight:normal;font-style: italic;}
   9 .section_add_menus .urlselect { margin-left: .4em;}
  10 .dir-rtl .section_add_menus .urlselect { margin-right: .4em; margin-left: 0;}
  11 .section_add_menus .urlselect select { margin-left: .2em;}
  12 .dir-rtl .section_add_menus .urlselect select { margin-right: .2em; margin-left: 0;}
  13 .section_add_menus .urlselect img.iconhelp { padding: 0; margin: 0; vertical-align: text-bottom;}
  14
  15 .sitetopic ul.section { margin: 5px; padding: 0; }
  16 .course-content ul.section { margin: 1em;}
  17 .sitetopic .section .activity img.activityicon,
  18 .course-content .section .activity img.activityicon {
  19     vertical-align: text-bottom;
  20     margin-right: 3px;
  21     margin-left: 3px;
  22     width: 24px;
  23     height: 24px;
  24 }
  25
  26 .sitetopic .section .activity .activityinstance,
  27 .course-content .section .activity .activityinstance,
  28 .section .activity .activityinstance {
  29     display: inline-block;
  30 }
  31
  32 .section .activity .editing_move {
  33     position: absolute;
  34     left: 0;
  35     top: 0;
  36 }
  37
  38 .dir-rtl .section .activity .editing_move {
  39     left: auto;
  40     right: 0;
  41 }
  42
  43 .section .activity .mod-indent-outer {
  44     display: table;
  45     padding-left: 24px;
  46 }
  47
  48 .section .label .mod-indent-outer {
  49     padding-left: 24px;
  50     display: block;
  51 }
  52
  53 .dir-rtl .section .activity .mod-indent-outer {
  54     padding-left: auto;
  55     padding-right: 24px;
  56 }
  57
  58 .section .activity .actions {
  59     position: absolute;
  60     right: 0;
  61     top: 0;
  62 }
  63
  64 .dir-rtl .section .activity .actions {
  65     left: 0;
  66     right: auto;
  67 }
  68
  69 .sitetopic .section .activity .activityinstance div,
  70 .course-content .section .activity .activityinstance div { display: inline;}
  71 .course-content .section .activity .activityinstance form { display: inline;}
  72 .sitetopic .section .activity .activityinstance,
  73 .course-content .section .activity .activityinstance {
  74     height: 2em;
  75 }
  76
  77 .editing .sitetopic .section .activity .activityinstance,
  78 .editing .course-content .section .activity .activityinstance,
  79 .editing .sitetopic .section .activity .contentwithoutlink,
  80 .editing .course-content .section .activity .contentwithoutlink {
  81     padding-right: 200px;
  82 }
  83
  84 .dir-rtl.editing .sitetopic .section .activity .activityinstance,
  85 .dir-rtl.editing .course-content .section .activity .activityinstance,
  86 .dir-rtl.editing .sitetopic .section .activity .contentwithoutlink,
  87 .dir-rtl.editing .course-content .section .activity .contentwithoutlink {
  88     padding-left: 200px;
  89     padding-right: initial;
  90 }
  91
  92 .sitetopic .section .activity .activityinstance,
  93 .course-content .section .activity .activityinstance,
  94 .sitetopic .section .activity .contentwithoutlink,
  95 .course-content .section .activity .contentwithoutlink {
  96     padding-right: 32px;
  97     height: 2em;
  98     display: table-cell;
  99
 100 }
 101
 102 .sitetopic .section .label .activityinstance,
 103 .course-content .section .label .activityinstance,
 104 .sitetopic .section .label .contentwithoutlink,
 105 .course-content .section .label .contentwithoutlink {
 106     padding-right: 32px;
 107     display: block;
 108     height: inherit;
 109 }
 110
 111 .dir-rtl .sitetopic .section .activity .activityinstance,
 112 .dir-rtl .course-content .section .activity .activityinstance,
 113 .dir-rtl .sitetopic .section .activity .contentwithoutlink,
 114 .dir-rtl .course-content .section .activity .contentwithoutlink {
 115     padding-left: 32px;
 116     padding-right: initial;
 117 }
 118
 119 .sitetopic .section .activity .filler,
 120 .course-content .section .activity .filler {
 121     width: 16px;
 122     height: 16px;
 123     margin: 4px;
 124     display: inline-block;
 125     vertical-align: text-bottom;
 126 }
 127
 128 .dir-rtl .sitetopic .section .activity .activityinstance,
 129 .dir-rtl .course-content .section .activity .activityinstance { padding-right: 0; padding-left: 3em;}
 130 .sitetopic .section .activity .commands,
 131 .course-content .section .activity .commands {
 132     white-space: nowrap;
 133     display: inline-block;
 134 }
 135
 136 .section .activity .moodle-actionmenu .menu > li > *,
 137 .section .activity .moodle-actionmenu .menubar > li > * {
 138     display: inline-block;
 139     min-height: 16px;
 140 }
 141 .section .activity .moodle-actionmenu[data-enhanced] .menu > li > * {
 142     display: block;
 143 }
 144 .section .activity .moodle-actionmenu[data-enhanced] .menu {margin-left: -2.8em;}
 145 .section img.iconsmall {
 146     vertical-align: text-bottom;
 147     width: 16px;
 148     height: 16px;
 149     margin: 4px;
 150 }
 151 .section .editing_title img.iconsmall {
 152     width: 12px;
 153     height: 12px;
 154     margin: 4px 8px 4px 0;
 155 }
 156
 157 .section .activity.editor_displayed a.editing_title,
 158 .section .activity.editor_displayed .moodle-actionmenu {
 159     display: none;
 160 }
 161
 162 .single-section h3.sectionname {text-align:center;clear:both;}
 163 .sitetopic .section li.activity,
 164 .course-content .section li.activity {padding: .2em;}
 165 .section .activity .activityinstance .groupinglabel { padding-left: .45em; }
 166 .sitetopic .section .activity .availabilityinfo,
 167 .sitetopic .section .activity .contentafterlink,
 168 .course-content .section .activity .availabilityinfo,
 169 .course-content .section .activity .contentafterlink { margin-top: 0.5em;}
 170 .dir-rtl .sitetopic .section .activity .availabilityinfo,
 171 .dir-rtl .sitetopic .section .activity .contentafterlink,
 172 .dir-rtl .course-content .section .activity .availabilityinfo,
 173 .dir-rtl .course-content .section .activity .contentafterlink { margin-left: 0; margin-right: 30px;}
 174 .section .activity .contentafterlink p { margin:.5em 0; }
 175 .sitetopic .section .activity:hover,
 176 .course-content .section .activity:hover { background-color: #EEE; }
 177 .course-content .section-summary { border: 1px solid #DDD; margin-top: 5px; list-style: none; }
 178 .course-content .section-summary .section-title  { margin: 2px 5px 10px 5px; }
 179 .course-content .section-summary .summarytext { margin: 2px 5px 2px 5px; }
 180 .course-content .section-summary .section-summary-activities .activity-count {margin-right: 10px;color: #AAA; font-size: 12px; margin-right: 15px;}
 181 .course-content .section-summary .summary { margin-top: 5px; }
 182 .course-content .single-section { margin-top: 1em; }
 183 .course-content .single-section .section-navigation { display: block; padding: 0.5em; margin-bottom: -0.5em; }
 184 .course-content .single-section .section-navigation .title { font-weight: bold; font-size: 108%; }
 185 .course-content .single-section .section-navigation .mdl-left { font-weight: normal; float: left; margin-right: 1em; }
 186 .dir-rtl .course-content .single-section .section-navigation .mdl-left {float:right;}
 187 .course-content .single-section .section-navigation .mdl-left .larrow { margin-right: 0.1em; }
 188 .course-content .single-section .section-navigation .mdl-right { font-weight: normal; float: right; margin-left: 1em; }
 189 .dir-rtl .course-content .single-section .section-navigation .mdl-right {float: left;}
 190 .course-content .single-section .section-navigation .mdl-right .rarrow { margin-left: 0.1em; }
 191 .course-content .single-section .section-navigation .mdl-bottom { margin-top: 0; }
 192
 193 #page-site-index .subscribelink {text-align:right;}
 194 #site-news-forum h2,
 195 #frontpage-course-list h2,
 196 #frontpage-category-names h2,
 197 #frontpage-category-combo h2 {margin-bottom: 9px;}
 198 #page-site-index .clearfloat {float: none;clear: both; height:0px;}
 199
 200 .path-course-view a.reduce-sections {padding-left: 0.2em;}
 201 .path-course-view .subscribelink {text-align:right;}
 202 .path-course-view .unread {margin-left: 3em;}
 203 .path-course-view .block.drag .header {cursor: move;}
 204 .path-course-view .completionprogress { text-align: right; }
 205 .dir-rtl.path-course-view .completionprogress { text-align: left; }
 206 .path-course-view .single-section .completionprogress { margin-right: 5px; }
 207 .path-course-view .section .summary {line-height:normal;}
 208
 209 .path-site li.activity > div,
 210 .path-course-view li.activity > div {position:relative;}
 211 .path-course-view li.activity form.togglecompletion .ajaxworking {position:absolute; right: 22px; width: 16px; height: 16px; background: url([[pix:i/ajaxloader]]) no-repeat;}
 212 .path-course-view li.activity form.togglecompletion div {display:inline;}
 213 .dir-rtl.path-course-view li.activity form.togglecompletion,
 214 .dir-rtl.path-course-view li.activity span.autocompletion {left:1.7em;right:auto;padding:0px;}
 215 .dir-rtl.path-course-view .completionprogress {float: none;}
 216 .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {right: -22px;}
 217
 218 li.section.hidden span.commands a.editing_hide,
 219 li.section.hidden span.commands a.editing_show {cursor:default;}
 220
 221 .section img.movetarget {height:16px;width:80px;}
 222
 223 .weeks-format, /* Window-width: 800 pixels.IE doesn't support, see inline IE conditional comment. */
 224 .topics-format {margin-top: 8px;min-width: 763px;}
 225
 226 #page-course-pending .singlebutton,
 227 #page-course-index .singlebutton,
 228 #page-course-index-category .singlebutton,
 229 #page-course-editsection .singlebutton {text-align:center;}
 230
 231 #coursesearch {margin-top: 1em;text-align:center;}
 232
 233 #page-course-pending .pendingcourserequests {margin-bottom: 1em;}
 234 #page-course-pending .pendingcourserequests .singlebutton {display: inline;}
 235 #page-course-pending .pendingcourserequests .cell {padding: 0 5px;}
 236 #page-course-pending .pendingcourserequests .cell.c6 {white-space: nowrap;}
 237
 238 /* Courses and categories lists */
 239
 240 .coursebox {width: 100%;margin-bottom:15px;}
 241 .coursebox.collapsed {margin-bottom:0}
 242 .coursebox.collapsed > .content {display:none;}
 243 .coursebox > .info > .coursename a {display:block;background-image:url([[pix:moodle|i/course]]);background-repeat: no-repeat;padding-left:21px;background-position: left top;}
 244 .coursebox.remotehost .coursename a {background-image:url([[pix:moodle|i/mnethost]]);}
 245 .coursebox > .info > .coursename,
 246 .coursebox .content .teachers,
 247 .coursebox .content .courseimage,
 248 .coursebox .content .coursefile {float:left;width:40%;clear:left;}
 249 .coursebox .content .teachers li {list-style-type:none;padding:0;margin:0;}
 250 .coursebox .enrolmenticons {padding:3px 0;float:right;}
 251 .coursebox .moreinfo {padding:3px 0;float:right;}
 252 .coursebox .enrolmenticons img,
 253 .coursebox .moreinfo img {margin:0 .2em;}
 254 .coursebox .content {clear:both;overflow: hidden;}
 255 .coursebox .content .summary,
 256 .coursebox .content .coursecat {float:right;width: 55%;}
 257 .coursebox .content .coursecat {text-align:right;clear:right;}
 258 .coursebox.remotecoursebox .remotecourseinfo {float:left;width: 40%;}
 259 .coursebox .content .courseimage img {max-width:100px;max-height:100px;}
 260
 261 .coursebox >.info >.coursename {margin: 5px;padding:0;}
 262 .coursebox .content .teachers,
 263 .coursebox .content .coursecat,
 264 .coursebox .content .summary,
 265 .coursebox .content .courseimage,
 266 .coursebox .content .coursefile,
 267 .coursebox.remotecoursebox .remotecourseinfo {margin:3px 5px;padding:0;}
 268
 269 .dir-rtl .coursebox > .info > .coursename a {padding-left:0;padding-right:21px;background-position: top right;}
 270 .dir-rtl .coursebox > .info > .coursename,
 271 .dir-rtl .coursebox .teachers,
 272 .dir-rtl .coursebox .content .courseimage,
 273 .dir-rtl .coursebox .content .coursefile {float:right;clear:right;}
 274 .dir-rtl .coursebox .enrolmenticons,
 275 .dir-rtl .coursebox .moreinfo {float:left;}
 276 .dir-rtl .coursebox .summary,
 277 .dir-rtl .coursebox .coursecat {float:left;}
 278 .dir-rtl .coursebox .coursecat {text-align:left;clear:left;}
 279
 280 .course_category_tree .category .numberofcourse {font-size: 0.85em;}
 281 .dir-rtl .course_category_tree .category .numberofcourse {padding-right: 20px;}
 282
 283 .course_category_tree .controls {visibility: hidden;}
 284 .course_category_tree .controls div {display:inline;cursor:pointer;}
 285 .jsenabled .course_category_tree .controls {visibility: visible;}
 286
 287 .course_category_tree .category >.info > .categoryname {background-image:url([[pix:moodle|t/collapsed_empty]]);background-repeat: no-repeat;background-position:center left;margin:0.5em 5px;}
 288 .dir-rtl .course_category_tree .category >.info > .categoryname {background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);background-position:center right;margin:0.5em 5px;}
 289 .course_category_tree .category.with_children >.info > .categoryname {background-image:url([[pix:moodle|t/expanded]]);}
 290 .course_category_tree .category.with_children.collapsed >.info > .categoryname {background-image:url([[pix:moodle|t/collapsed]]);}
 291 .dir-rtl .course_category_tree .category.with_children.collapsed >.info .categoryname {background-image:url([[pix:moodle|t/collapsed_rtl]]);}
 292 .course_category_tree .category.collapsed >.content {display:none;}
 293 .course_category_tree .category > .info > .categoryname {padding:2px 18px;margin:3px;}
 294 .course_category_tree .category > .content {padding-left:16px;overflow: hidden;}
 295
 296 .dir-rtl .course_category_tree .category > .content {padding-left:0;padding-right:16px;}
 297
 298 .course_category_tree .subcategories > .paging,
 299 .courses > .paging {margin:0;padding:5px;text-align:center;}
 300
 301 .courses > .paging.paging-morelink,
 302 .course_category_tree .subcategories > .paging.paging-morelink {text-align:left;}
 303
 304 .dir-rtl .courses > .paging.paging-morelink,
 305 .dir-rtl .course_category_tree .subcategories > .paging.paging-morelink {text-align:right;}
 306
 307 #page-course-info .generalbox.info,
 308 #page-enrol-index .generalbox.info {border:none;}
 309
 310 .path-course .clearfloat {float:none; clear:both;height:0px;}
 311
 312 .section .spinner {
 313     height: 16px;
 314     width: 16px;
 315 }
 316 .section .activity .spinner {
 317     margin: 4px;
 318     left: 100%;
 319     position: absolute;
 320 }
 321
 322 .dir-rtl .section .activity .spinner {
 323     left: auto;
 324     right: 100%;
 325 }
 326
 327 /* Quick edit of module name */
 328
 329 .sitetopic .section .activity form.activityinstance,
 330 .course-content .section .activity form.activityinstance { display: inline; vertical-align: middle; }
 331 span.editinstructions {
 332     position: absolute;
 333     top: 0px;
 334     margin-top: -22px;
 335     margin-left: 30px;
 336     line-height: 16px;
 337     font-size: .85em;
 338     padding: .1em .4em;
 339     background-color: #ffc;
 340     color: #000;
 341     text-decoration: none;
 342     z-index:9999;
 343     box-shadow:2px 2px 5px 1px #ccc;
 344     border:1px solid #ddd;
 345 }
 346 .dir-rtl span.editinstructions { left: auto; right: 32px;}
 347 input.titleeditor { vertical-align: text-bottom; }
 348 .editing .course-content .section .activity.editor_displayed .activityinstance {
 349     padding-right: initial;
 350 }
 351 .dir-rtl.editing .course-content .section .activity.editor_displayed .activityinstance {
 352     padding-left: initial;
 353 }
 354
 355 /* Course drag and drop upload styles */
 356 #dndupload-status {width:40%;margin:0 30%;padding:6px;border:1px solid #ddd;top:-5px;text-align:center;background:#ffc;position:absolute;left:0;box-shadow:2px 2px 5px 1px #ccc;border-radius:0px 0px 8px 8px;z-index: 0;}
 357 .dndupload-preview {color:#909090;border:1px dashed #909090;list-style:none; margin-top: .2em; padding: .3em; line-height: 16px;}
 358 .dndupload-preview img.icon { vertical-align: text-bottom; padding: 0;}
 359 .dndupload-progress-outer {width:70px;border:1px solid black;border-radius:4px;height:10px;display:inline-block;margin:0;padding:0;overflow:hidden;position:relative;}
 360 .dndupload-progress-inner {width:0%;height:100%;background-color:green;display:inline-block;margin:0;padding:0;float:left;box-shadow: 0 0 4px #229b15;border-radius:2px;background-repeat:repeat-x;background-position:top;background-image:url([[pix:theme_base|progress]])}
 361 .dndupload-hidden {display:none;}
 362
 363 /** Course category management **/
 364 #course-category-listings {background-color:#fff;border:1px solid #e1e1e8;margin-bottom:200px;}
 365
 366 /** Two column layout */
 367 #course-category-listings.columns-2 > #category-listing > div {border-right:1px solid #e1e1e8;}
 368 .dir-rtl #course-category-listings.columns-2 > #category-listing > div {border-left:1px solid #e1e1e8;border-right:0;}
 369
 370 #course-category-listings.columns-2 > #course-listing > div {border-left:1px solid #e1e1e8;margin-left:-1px;}
 371 #course-category-listings.columns-2.viewmode-courses.course-selected > #course-listing > div {border-right:1px solid #e1e1e8;margin-right:-1px;}
 372 #course-category-listings.columns-2 > #course-detail > div {border-left:1px solid #e1e1e8;}
 373
 374 /** Three column layout */
 375 #course-category-listings.columns-3 #category-listing > div {border-right:1px solid #DDD;}
 376 #course-category-listings.columns-3 #course-listing > div {border-right:1px solid #e1e1e8;border-left:1px solid #e1e1e8;margin-right:-1px;margin-left:-1px;}
 377 #course-category-listings.columns-3 #course-detail > div {border-left:1px solid #DDD;}
 378
 379 #course-category-listings > div {}
 380 #course-category-listings > div > div {min-height:300px;}
 381 #course-category-listings h3 {margin:0;padding:0.6em 1em 0.5em;text-align:left;background-color:#f7f7f9;border-bottom:1px solid #e1e1e8;}
 382 #course-category-listings h4 {margin:1em 0 0;padding:0.6em 1em 0.5em;text-align:left;}
 383 .dir-rtl #course-category-listings h3,
 384 .dir-rtl #course-category-listings h4 {text-align:right;}
 385 .coursecat-management-header .moodle-actionmenu,
 386 #course-category-listings .moodle-actionmenu {white-space:nowrap;}
 387
 388 #course-category-listings .listing-actions {text-align:center;padding:0.4em 0.3em 0.3em;}
 389 #course-category-listings .listing-actions > * {display:inline-block;line-height:2.2em;}
 390 #course-category-listings .listing-actions > .moodle-actionmenu {display:inline-block;}
 391 .coursecat-management-header .moodle-actionmenu[data-enhanced].show .menu a,
 392 #course-category-listings .listing-actions > .moodle-actionmenu .menu a {padding: 4px 1em;}
 393 #course-category-listings .listing-actions .iconsmall {margin-left:0.5em;}
 394 #course-category-listings ul.ml {list-style: none;margin:1em 0;}
 395 #course-category-listings ul.ml ul.ml {margin:0;}
 396 #course-category-listings li {line-height:2.2em;}
 397 #course-category-listings li > div {border-bottom:1px solid #fff;border-top:1px solid #fff;}
 398 #course-category-listings li > div:hover {background-color:#fafafa;}
 399 #course-category-listings li.highlight {background-color:transparent;}
 400 #course-category-listings li.highlight > div,
 401 #category-listing li.highlight.listitem > div > .ba-checkbox,
 402 #course-category-listings li.highlight > div:hover,
 403 #course-category-listings li[data-selected='1'].highlight > div {background-color:#ddffaa;}
 404 #course-category-listings li+li > div,
 405 #course-category-listings li:first-child > div {border-top-color:#f7f7f9;}
 406 #course-category-listings li .tree-icon {margin-right:0.5em;width:12px;height:12px;}
 407 .dir-rtl #course-category-listings li .tree-icon {margin-left:0.5em;}
 408 #course-category-listings li[data-selected='1'] > div {background-color:#FFFFD8;border-top-color: #e1e1e8;border-bottom-color:#f7f7f9;}
 409 #course-category-listings li[data-selected='1'] li:first-of-type > div,
 410 #course-category-listings li[data-selected='1'][data-expandable='0']+li > div {border-top-color:#e1e1e8;}
 411 #course-category-listings li[data-selected='1']:last-of-type > div {border-bottom-color:#e1e1e8;}
 412 #course-category-listings > div > div > ul.ml > li:first-child > div {border-top:0;}
 413
 414 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) li {line-height:normal;}
 415 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar li,
 416 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar a,
 417 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menu .menu-action-text {display:inline-block;}
 418 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar a {color:inherit;}
 419 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar a > img,
 420 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar .caret {display:none;}
 421
 422 .jsenabled #course-category-listings .moodle-actionmenu[data-enhance] .toggle-display img {
 423     width: auto;
 424 }
 425
 426 .jsenabled #course-category-listings .moodle-actionmenu[data-enhance] .toggle-display.textmenu {
 427     padding-right: 4px;
 428 }
 429 .jsenabled #course-category-listings .moodle-actionmenu[data-enhance] .toggle-display.textmenu .caret {
 430     vertical-align:text-top;
 431 }
 432
 433 #course-category-listings .item-actions {margin-right:1em;display:inline-block;display:initial;}
 434 #course-category-listings .item-actions img {margin: 0 4px;}
 435 #course-category-listings .item-actions .menubar img {vertical-align:inherit;}
 436 #course-category-listings .item-actions .menu img {max-width:none;width:12px;}
 437 #course-category-listings .item-actions.show .menu a {padding:4px 1em 4px 4px;}
 438
 439 #course-category-listings li .tree-icon {margin-left:0;}
 440 #course-category-listings li li .tree-icon {margin-left:1em;}
 441 #course-category-listings li li li .tree-icon {margin-left:2em;}
 442 #course-category-listings li li li li .tree-icon {margin-left:3em;}
 443 #course-category-listings li li li li li .tree-icon {margin-left:4em;}
 444 #course-category-listings li li li li li li .tree-icon {margin-left:4.5em;}
 445 #course-category-listings li li li li li li li .tree-icon {margin-left:5em;}
 446 #course-category-listings li li li li li li li li .tree-icon {margin-left:5.5em;}
 447
 448 .dir-rtl #course-category-listings li .tree-icon {margin-right:0;margin-left: 0.5em;}
 449 .dir-rtl #course-category-listings li li .tree-icon {margin-right:1em;}
 450 .dir-rtl #course-category-listings li li li .tree-icon {margin-right:2em;}
 451 .dir-rtl #course-category-listings li li li li .tree-icon {margin-right:3em;}
 452 .dir-rtl #course-category-listings li li li li li .tree-icon {margin-right:4em;}
 453 .dir-rtl #course-category-listings li li li li li li .tree-icon {margin-right:4.5em;}
 454 .dir-rtl #course-category-listings li li li li li li li .tree-icon {margin-right:5em;}
 455 .dir-rtl #course-category-listings li li li li li li li li .tree-icon {margin-right:5.5em;}
 456
 457 #course-listing .listitem .drag-handle {display:none;}
 458 .jsenabled #course-listing .listitem .drag-handle {margin-right:0.5em;display:inline-block;cursor:pointer;}
 459 #course-listing .listitem .categoryname {display:inline-block;margin-left:1em;color:#a1a1a8;}
 460 #course-listing .listitem .coursename {display:inline-block;}
 461
 462 #category-listing .course-count {color:#a1a1a8;margin-right:2em;min-width:3.5em;display:inline-block;}
 463 #category-listing .listitem.collapsed > ul.ml {display: none;}
 464 #category-listing .course-count .smallicon {width:0.8em;height:0.8em;margin:0 0.3em;}
 465
 466 #category-listing .listitem > div > .ba-checkbox {vertical-align:middle;width:2.2em;text-align:center;margin:-1px 0;padding-top:2px;margin-right:0.5em;}
 467 .dir-rtl #category-listing .listitem > div > .ba-checkbox {margin-left:0.5em;margin-right:0.5em;}
 468 #category-listing .listitem[data-selected='1'] > div > .ba-checkbox {margin:0 0.5em 0 0;padding:0;}
 469 .dir-rtl #category-listing .listitem[data-selected='1'] > div > .ba-checkbox {margin-left:0.5em;}
 470 .category-bulk-actions {margin: 0 0.5em 0.5em;}
 471
 472 #course-category-listings .listitem .idnumber {color:#a1a1a8;margin-right:2em;}
 473 #course-category-listings .listitem > div > .float-left {float:left;}
 474 #course-category-listings .listitem > div > .float-right {float:right;text-align:right;}
 475 .dir-rtl #course-category-listings .listitem > div > .float-left {float:right;}
 476 .dir-rtl #course-category-listings .listitem > div > .float-right {float:left;text-align:left;}
 477
 478 #course-category-listings .listitem[data-visible="0"],
 479 #course-category-listings .listitem[data-visible="0"] > div > a {color:#AAA;}
 480 #course-category-listings .listitem > div .item-actions .action-hide,
 481 #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-show {display:inline;}
 482 #course-category-listings .listitem > div .item-actions .action-show,
 483 #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-hide,
 484
 485 #category-listing .listitem:first-child > div .item-actions .action-moveup,
 486 #category-listing .listitem:last-child > div .item-actions .action-movedown,
 487 #course-listing > .firstpage .listitem:first-child > div .item-actions .action-moveup,
 488 #course-listing > .lastpage .listitem:last-child > div .item-actions .action-movedown {display: none;}
 489
 490 #course-category-listings .listitem > div a.without-actions {color: #333;}
 491
 492 #course-listing li > div {padding-left:1em;}
 493
 494 #course-category-listings .detail-pair {border-bottom:1px solid #e1e1e8;margin:0 1em;}
 495 #course-category-listings .detail-pair > * {display:inline-block;line-height:2.2em;}
 496 #course-category-listings .detail-pair .pair-key {font-weight:bold;text-align:left;}
 497 .dir-rtl #course-category-listings .detail-pair .pair-key {text-align:right;}
 498 #course-category-listings .detail-pair .pair-key span {margin-right: 1em;display:block;}
 499 .dir-rtl #course-category-listings .detail-pair .pair-key span {margin-right: 0;}
 500 #course-category-listings .detail-pair:last-child {border-bottom-width:0;}
 501
 502 #course-category-listings .bulk-actions .detail-pair > * {display:block;width:100%;}
 503 #course-category-listings .bulk-actions .detail-pair .pair-value {margin-left:2.2em;}
 504 .dir-rtl #course-category-listings .bulk-actions .detail-pair .pair-value {margin-left:0;margin-right:2.2em;}
 505
 506 #course-category-listings .select-a-category .notifymessage,
 507 #course-category-listings .select-a-category .alert {margin: 1em;}
 508
 509 .dir-rtl.jsenabled .moodle-actionmenu[data-enhanced] .menu.align-tr-br {right: inherit;}
 510 /** Management header styling **/
 511 .coursecat-management-header {vertical-align:middle;}
 512 .coursecat-management-header h2 {display:inline-block;text-align:left;}
 513 .coursecat-management-header > div {display:inline-block;float:right;}
 514 .coursecat-management-header > div > div {display:inline-block;margin-left:1em;}
 515 .dir-rtl .coursecat-management-header h2 {text-align:right;}
 516 .dir-rtl .coursecat-management-header > div {float:left;margin-right:1em;margin-left:0;}
 517 .coursecat-management-header .view-mode-selector .moodle-actionmenu {display:inline-block;}
 518 .coursecat-management-header .view-mode-selector img {margin-left:0.5em;vertical-align: baseline;}
 519 .coursecat-management-header  select {max-width: 300px;white-space: nowrap;}
 520
 521 .listing-pagination,
 522 .listing-pagination-totals {text-align:center;}
 523 .listing-pagination .yui3-button {background-color:#FFF;border:0;margin:0.4em 0.2em 0.45em;font-size:10.4px;}
 524 .listing-pagination .yui3-button.active-page {background-color:#E5EFFD;}
 525 .listing-pagination-totals.dimmed {color:#999;margin:0.4em 1em 0.45em;}
 526
 527 #category-listing .bulk-action-checkbox {vertical-align:middle;margin:0 0 0.5em 3px;}
 528 .dir-rtl #category-listing .bulk-action-checkbox {vertical-align:middle;margin:0 3px 0.5em 0;}
 529 #course-listing .bulk-action-checkbox {margin-right:0.6em;vertical-align:middle;margin-bottom:0.5em;}
 530
 531 /**
 532  * Display sizes:
 533  * Large displays                   1200        +
 534  * Default displays                  980     1199
 535  * Tablets                           768      979
 536  * Small tablets and large phones    481      767
 537  * Phones                              0      480
 538  */
 539
 540 @media (min-width: 1200px) and (max-width: 1600px) {
 541     #course-category-listings.columns-3 {background-color:transparent;border:0;}
 542     #course-category-listings.columns-3 #category-listing,
 543     #course-category-listings.columns-3 #course-listing {width:50%;}
 544     #course-category-listings.columns-3 #category-listing > div,
 545     #course-category-listings.columns-3 #course-listing > div,
 546     #course-category-listings.columns-3 #course-detail {border:1px solid #e1e1e8;background-color:#FFF;}
 547     #course-category-listings.columns-3 #course-detail > div {border:0;}
 548     #course-category-listings.columns-3 #course-detail {width:100%;margin-top:1em;}
 549 }
 550
 551 @media (max-width: 1199px) {
 552     #course-category-listings.columns-2,
 553     #course-category-listings.columns-3 {background-color:transparent;border:0;}
 554     #course-category-listings.columns-2 #category-listing,
 555     #course-category-listings.columns-2 #course-listing,
 556     #course-category-listings.columns-2 #course-detail,
 557     #course-category-listings.columns-3 #category-listing,
 558     #course-category-listings.columns-3 #course-listing,
 559     #course-category-listings.columns-3 #course-detail {width:100%;margin-bottom:1em;}
 560     #course-category-listings.columns-2 #category-listing > div,
 561     #course-category-listings.columns-2 #course-listing > div,
 562     #course-category-listings.columns-2 #course-detail > div,
 563     #course-category-listings.columns-3 #category-listing > div,
 564     #course-category-listings.columns-3 #course-listing > div,
 565     #course-category-listings.columns-3 #course-detail > div {border:1px solid #e1e1e8;background-color:#FFF;}
 566 }
 567
 568 /** Custom YUI grid CSS **/
 569 .grid-col {
 570     display: inline-block;
 571     zoom: 1; *display: inline;
 572     letter-spacing: normal;
 573     word-spacing: normal;
 574     vertical-align: top;
 575     text-rendering: auto;
 576 }
 577 .grid-col-1{display:block;}
 578 .grid-col-1-2{width: 50%;}
 579 .grid-col-1-3{width: 33.33333%;}
 580 .grid-col-2-3{width: 66.66667%;}
 581 .grid-col-1-4{width: 25%;}
 582 .grid-col-3-4{width: 75%;}
 583 .grid-col-1-5{width: 20%;}
 584 .grid-col-2-5{width: 40%;}
 585 .grid-col-3-5{width: 60%;}
 586 .grid-col-4-5{width: 80%;}
 587 .grid-col-1-6{width: 16.66667%;}
 588 .grid-col-5-6{width: 83.33333%;}
 589 .grid-col-1-7{width: 14.28571%;}
 590 .grid-col-2-7{width: 28.57143%;}
 591 .grid-col-3-7{width: 42.85714%;}
 592 .grid-col-4-7{width: 57.14286%;}
 593 .grid-col-5-7{width: 71.42857%;}
 594 .grid-col-6-7{width: 85.71429%;}
 595 .grid-col-1-8{width: 12.5%;}
 596 .grid-col-3-8{width: 37.5%;}
 597 .grid-col-5-8{width: 62.5%;}
 598 .grid-col-7-8{width: 87.5%;}
 599 .grid-col-1-9{width: 11.11111%;}
 600 .grid-col-2-9{width: 22.22222%;}
 601 .grid-col-4-9{width: 44.44444%;}
 602 .grid-col-5-9{width: 55.55556%;}
 603 .grid-col-6-9{width: 66.66667%;}
 604 .grid-col-7-9{width: 77.77778%;}
 605 .grid-col-8-9{width: 88.88889%;}
 606 .grid-col-1-10{width: 10%;}
 607 .grid-col-3-10{width: 30%;}
 608 .grid-col-7-10{width: 70%;}
 609 .grid-col-9-10{width: 90%;}
 610 .grid-col-1-11{width: 9.09091%;}
 611 .grid-col-2-11{width: 18.18182%;}
 612 .grid-col-3-11{width: 27.27273%;}
 613 .grid-col-4-11{width: 36.36364%;}
 614 .grid-col-5-11{width: 45.45455%;}
 615 .grid-col-6-11{width: 54.54545%;}
 616 .grid-col-7-11{width: 63.63636%;}
 617 .grid-col-8-11{width: 72.72727%;}
 618 .grid-col-9-11{width: 81.81818%;}
 619 .grid-col-10-11{width: 90.90909%;}
 620 .grid-col-1-12{width: 8.33333%;}
 621 .grid-col-5-12{width: 41.66667%;}
 622 .grid-col-7-12{width: 58.33333%;}
 623 .grid-col-9-12{width: 75%;}
 624 .grid-col-11-12{width: 91.66667%;}
 625 .grid-row-r {
 626     letter-spacing: -0.31em;
 627     *letter-spacing: normal;
 628     word-spacing: -0.43em;
 629 }
 630
 631 .opera-only :-o-prefocus,
 632 .grid-row-r {word-spacing: -0.43em;}
 633 .grid-row-r img {max-width: 100%;}
 634
 635 @media (min-width:980px) {
 636     .grid-visible-phone     { display: none; }
 637     .grid-visible-tablet    { display: none; }
 638     .grid-visible-desktop   { }
 639     .grid-hidden-phone      { }
 640     .grid-hidden-tablet     { }
 641     .grid-hidden-desktop    { display: none; }
 642 }
 643
 644 @media (max-width:480px) {
 645     .grid-row-r > [class ^= "grid-col"] {
 646         width:100%;
 647     }
 648 }
 649
 650 @media (max-width:767px) {
 651     .grid-row-r > [class ^= "grid-col"] {
 652         width:100%;
 653     }
 654     .grid-visible-phone     { }
 655     .grid-hidden-phone      { display: none; }
 656     .grid-hidden-desktop    { }
 657     .grid-visible-desktop   { display: none; }
 658 }
 659
 660 @media (min-width:768px) and (max-width:979px) {
 661     .grid-visible-tablet    {}
 662     .grid-hidden-tablet     { display: none; }
 663     .grid-hidden-desktop    {}
 664     .grid-visible-desktop   { display: none; }
 665 }