$CFG->preferlinegraphs will make graphs use lines instead of bars
[moodle.git] / theme / standard / styles_layout.css
1 /************************************************* 
2 ***
3 *** layout
4 ***
5 **************************************************/
7 /*************************************************
8 ***
9 *** This CSS file contains all layout definitions
10 *** like positioning, floats,
11 *** margins, paddding,
12 *** borders etc.
13 ***
14 *** Shortindex:
15 *** basic and general styles
16 *** header and footer styles
17 *** content styles (alphabetically)
18 *** admin, course, activities, calendar, blocks
19 *** 
20 *** Please sort new styles for existing content
21 *** into the appropriate part of this CSS file.
22 *** Styles for new Blocks or Activities please
23 *** place at the end.
24 *** Wouldn't the alphabetical order be better?
25 ***
26 **************************************************/
29 /* basic styles */
30 .clearer {
31     clear:both;
32     margin:0px;
33     padding:0px;
34     height:1px;
35     border:none;
36     background:transparent;
37 }
39 .continuebutton {
40     text-align: center;
41 }
44 /* general styles */
46 form {
47     margin-bottom:0px;
48 }
50 table {
51     border-spacing: 0px;
52     border-collapse: collapse;
53 }
55 a img {
56     border:none;
57 }
59 /* header styles */
60 #header-home {
61     padding:1em 0.5em;
62     height:2em;
63 }
65 #header {
66     padding:0.1em 0.5em;
67 }
69 .headermain {
70     float:left;
71 }
73 #header .headermain {
74     margin:0.2em 0em;
75 }
77 #footer {
78     text-align:center;
79 }
81 .headermenu {
82     float:right;
83     text-align:right;
84 }
86 #nav-bar {
87     padding:3px 0.5em;
88     height:1.3em;
89 }
91 #breadcrumb {
92     float:left;
93     margin:0.2em 0em;
94 }
96 #navbutton {
97     float:right;
98 }
100 #layout-table {
101     width:100%;
102     border-spacing:5px;
103     border-collapse:separate;
106 #layout-table #left-column,
107 #layout-table #middle-column,
108 #layout-table #right-column
110     vertical-align:top;
113 /* footer styles */
116 /*****************************
117 ***
118 *** content styles
119 ***
120 ******************************/
121 /* many places */
122 .generalbox {
123     border-width:1px;
124     border-style:solid;
127 .generalbox#intro {   /* On most modules */
128     text-align:center;
131 .noticebox {
132     border-width:1px;
133     border-style:solid;
135 .errorbox {
136     border-width:1px;
137     border-style:solid;
138     margin: 1em 15%;
139     width: 70%;
141 .errorbox .title {
142     padding: 5px;
144 .informationbox {
145     border-width:1px;
146     border-style:solid;
148 .feedbackbox {
149     border-width:1px;
150     border-style:solid;
152 .feedbackby {
154 .feedback {
156 .initialbar {
157     text-align: center;
160 /* summary of a user in a nice little box - weblib.php */
161 .userinfobox {
162     margin-bottom:5px;
163     border-width:1px;
164     border-style:solid;
167 .userinfoboxside,
168 .userinfoboxsummary,
169 .userinfoboxlinkcontent { }
172 /* weblib.php table */
173 .tabledivider {
174     border-width:1px;
175     border-style:solid;
176     border-left:0px;
177     border-right:0px;
178     border-top:0px;
182 /* entry-page index.php */ 
183 .sitetopic {
184     border-width:1px;
185     border-style:solid;
189 /* paging bar */
190 .pagingbar {
191     text-align:center;
193 .pagingbar a {
194     padding-left: 10px;
196 .pagingbar .thispage {
197     padding-left: 10px;
200 /*****************************
201 ***
202 *** Admin
203 ***
204 ******************************/
205 /* admin, calendar */
206 table.formtable {
207     margin: auto;
210 table.formtable tbody th {
211     background: none;
212     vertical-align: top;
215 table.formtable tbody td,
216 table.formtable tbody th
218     padding: 5px;
221 /*****************************
222 ***
223 *** Course
224 ***
225 ******************************/
227 .section .activity img.activityicon {
228     vertical-align:middle;
229     height:16px;
230     width:16px;
233 .section img.movetarget {
234     height:16px;
235     width:80px;
238 /* course, entry-page, login */
239 .headingblock {
240     border-width:1px;
241     border-style:solid;
242     padding:5px;
246 /* course */
248 #course-view .section td {
249     vertical-align:top;
252 #course-view .section .content {
253     padding:5px;
254     border-style:solid;
255     border-width:1px;
256     border-left:0px;
257     border-right:0px;
260 #course-view .section .side {
261     padding:5px;
262     border-style:solid;
263     border-width:1px;
266 #course-view .section .left {
267     border-right:0px;
268     text-align:center;
269     font-weight:bold;
270     width: 1.5em;
273 #course-view .section .right {
274     border-left:0px;
275     text-align:center;
276     width: 1.5em;
279 #course-view .current .side {
282 #course-view .topics {
283     margin-top: 9px;
286 #course-view .weeks {
287     margin-top: 9px;
290 #course-view .section .spacer {
291     height:0.5em;
294 #course-view .section .weekdates {
298 .categoryboxcontent,
299 .courseboxcontent {
300     border-width:1px;
301     border-style:solid;
305 /* user */
306 .userinfobox {
307     border-width: 1px;
308     border-style: solid;
309     border-collapse: separate;    
312 .userinfobox .left {
313     padding: 10px;
314     width: 100px;
317 .userinfobox .content {
318     padding: 10px;
319     vertical-align: top;
322 .userinfobox .links {
323     width: 100px;
324     padding: 5px;
325     vertical-align: bottom;
328 .userinfobox .username {
329     padding-bottom: 20px;
330 }    
333 table.userinfobox {
334     width: 80%;
335     margin-left: 10%;
336     margin-right: 10%;
341 /*****************************
342 ***
343 *** Activities
344 ***
345 ******************************/
346 /* assignment, forum, glossary */
347 .forumheaderlist,
348 .forumpost {
349     border-width:1px;
350     border-style:solid;
351     border-collapse:separate;
354 .forumpost {
355     margin-top: 15px;
358 .forumpost .topic {
359     padding: 4px;
363 .forumpost .commands {
364     padding-top: 0.5em;
365     text-align:right;
368 .forumpost .ratings {
369     padding-top: 1em;
370     text-align:right;
373 .forumpost .content {
374     padding: 4px;
377 .forumpost .footer {
378     padding-top: 0.5em;
379     text-align:right;
382 .forumpost .link {
383     padding-top: 0.5em;
384     text-align:right;
388 .forumpost .left {
389     width: 35px;
390     padding: 4px;
391     text-align: center;
392     vertical-align: top;
395 .forumpostindent {
396     margin-left: 30px;
399 body#user-view .forumpost,
400 .course .forumpost {
401     width: 100%;
404 body#mod-forum-search .c0 {
405     text-align: right;
408 body#mod-forum-search .introcontent {
409     padding: 15px;
410     font-weight:bold;
413 .forumolddiscuss {
414     text-align: right;
417 .forumheaderlist {
418     width: 100%;
421 .forumheaderlist td {
422     border-width:1px 0px 0px 1px;
423     border-style:solid;
426 .forumheaderlist .replies {
427     text-align: center;
430 .forumheaderlist .picture {
431     width: 35px;
434 .forumheaderlist .discussion .starter {
435     vertical-align: middle;
438 .forumheaderlist .discussion .lastpost {
439     white-space: nowrap;
442 .forumheaderlist .discussion .author {
443     white-space: nowrap;
446 .paging {
447     text-align: center;
448     margin: 10px 0px 10px 0px;
451 .unread {
452     padding-right:2px;
453
456 /* glossary, wiki */
457 .glossarypost .commands {
458     width: 200px;
459     white-space: nowrap;
462 .entryboxheader {
463     border-width: 1px 1px 0px 1px;
464     border-style: solid;
467 .entrybox {
468     border-width: 0px 1px 1px 1px;
469     border-style: solid;
472 .glossarypost {
473     width: 95%;
474     border-width:1px;
475     border-style:solid;
476     border-collapse:separate;
477     margin-bottom: 5px;
478     text-align: left;
482 .entrylist {
483     border-width:0px;
486 .entrylowersection {
487     padding-top: 10px;
489 .entrylowersection table{
490     width: 100%;
492 .entrylowersection .aliases {
493     text-align:center;
494     font-size: 0.8em;
496 .entrylowersection .icons,
497 .entrylowersection .ratings {
498     text-align:right;
499     font-size: 0.8em;
500     padding-right: 5px;
502 .entrylowersection .ratings {
503     padding-bottom: 2px;
506 .glossarypost .entry {
507     padding: 3px;
510 .glossarypost .picture {
511     width: 35px;
514 .glossarycomment {
515     border-width:1px;
516     border-style:solid;
517     border-collapse:separate;
518     margin-bottom: 5px;
519     text-align: left;
523 .glossarycomment .entry {
524     padding: 3px;
527 .glossarycomment .picture {
528     width: 35px;
531 .glossarycomment .icons {
532     text-align: right;
535 /* tabs for glossary */
537 .generaltab,
538 .generaltabselected,
539 .generaltabinactive {
540     background:none;
543 .glossarydisplay {
544     width: 70%;
547 .glossarydisplay .tabs {
548     width: 100%;
551 .glossarydisplay .separator {
552     width: 4px;
555 .glossarydisplay .tabs .selected,
556 .glossarydisplay .tabs .inactive,
557 .glossarydisplay .tabs .general {
560 .glossarypopup {
561     width: 95%;
564 .glossaryapproval {
565     width: 100%;
568 /******************************************************************/
569 /* tabs */
570 .tabs {
571     width: auto;
574 body#mod-quiz-report .tabs .side,
575 body#message-index .tabs .side {
576     border-style: solid;
577     border-width: 0px 0px 1px 0px;
578     border-color: #AAAAAA;
579     width: 50%;
582 body#mod-quiz-report .tabs {
583     margin-bottom: 15px;
586 .tabrow {
587     border-collapse:collapse;
588     width:100%;
589     margin:0;
591 .tabrow td {
592     height:34px;
593     padding:0 0 0 14px;
594     background:url(pix/tab/left.gif) top left no-repeat;
596 .tabrow th {
597     display:none;
599 .tabrow td .tablink {
600     display:block;
601     height:34px;
602     line-height:38px;
603     padding:0 14px 0 0;
604     background:url(pix/tab/right.gif) top right no-repeat;
605     text-align:center;
606     white-space:nowrap;
607     text-decoration:none;
609 .tabrow td:hover {
610     background-image:url(pix/tab/left_hover.gif);
612 .tabrow td:hover .tablink {
613     line-height:32px;
614     background-image:url(pix/tab/right_hover.gif);
617 .tabrow .last span {
618     display:block;
619     padding:0px 1px 0px 0px;
620     background:url(pix/tab/right_end.gif) top right no-repeat;
622 .tabrow .selected {
623     background:url(pix/tab/left_active.gif) top left no-repeat;
625 .tabrow .selected .tablink {
626     background:url(pix/tab/right_active.gif) top right no-repeat;
627     line-height:38px;
629 .tabrow td.selected:hover {
630     background-image:url(pix/tab/left_active_hover.gif);
632 .tabrow td.selected:hover .tablink {
633     background-image:url(pix/tab/right_active_hover.gif);
636 /******************************************************************/
638 /* message */
639 .message_link {
640     vertical-align:middle;
643 .message_search_results {
644     border-collapse:collapse;
645     border-spacing:0px;
648 table.message_search_results td {
649     padding:5px;
650     border-width:1px;
651     border-style:solid;
655 /* quiz */
656 .feedbacktext {
657     display:block;
660 body#mod-quiz-report table#attempts,
661 body#mod-quiz-report table#commands
663     width: 80%;
664     margin: auto;
666 body#mod-quiz-report table#attempts {
667     margin: 20px auto;
669 body#mod-quiz-report table#attempts .header,
670 body#mod-quiz-report table#attempts .cell
672     padding: 4px;
674 body#mod-quiz-report table#attempts .header .commands {
675     display: inline;
677 body#mod-quiz-report table#attempts .picture {
678     width: 40px;
680 body#mod-quiz-report table#attempts td {
681     border-left-width: 1px;
682     border-right-width: 1px;
683     border-left-style: solid;
684     border-right-style: solid;
688 /*****************************
689 ***
690 *** Calendar
691 ***
692 ******************************/
693 /* calendar */
695 #calendar {
696     width: 100%;
697     border-spacing: 5px;
698     border-collapse: separate;
701 #calendar .maincalendar,
702 #calendar .sidecalendar
704     vertical-align: top;
705     border: 1px solid;
708 #calendar .sidecalendar {
709     width: 25%;
712 #calendar .maincalendar table.calendarmonth {
713     border-collapse: separate;
714     margin: 0px auto;
715     width: 98%;
718 #calendar .maincalendar table.calendarmonth th {
719     padding:10px;
720     border-bottom:2px solid;
723 #calendar .maincalendar table.calendarmonth td {
724     height: 5em;
725     padding-left: 4px;
726     padding-top: 4px;
729 #calendar .maincalendar table.calendarmonth td,
730 table.minicalendar td,
731 table.minicalendar th {
732     width:14%;
733     vertical-align:top;
736 #calendar .maincalendar table.calendarmonth td table td {
737     height: auto;
740 #calendar div.header
742     padding: 5px;
745 #calendar .maincalendar .buttons {
746     float: right;
749 #calendar .maincalendar .filters table,
750 #calendar .sidecalendar .filters table,
751 .sideblock.block_calendar_month .filters table
753     border-collapse:separate;
754     border-spacing: 2px;
755     background-color: #EEEEEE;
756     padding: 2px;
757     width: 100%;
760 #calendar .maincalendar .filters {
761     padding: 0px 10px;
764 #calendar .sidecalendar .filters,
765 .sideblock.block_calendar_month .filters
767     padding: 5px;
770 #calendar .maincalendar .controls {
771     clear:both;
772     padding:10px;
775 #calendar .maincalendar table.calendarmonth ul.events-new,
776 #calendar .maincalendar table.calendarmonth ul.events-underway
778     padding:0px;
779     margin:0px;
780     list-style-type:none;
783 #calendar .maincalendar table.calendarmonth ul li {
784     margin-top: 4px;
787 table.minicalendar {
788     width: 100%;
789     margin:10px auto;
790     padding:2px;
791     border-width:1px;
792     border-style:solid;
793     border-collapse:separate;
794     border-spacing:1px !important;
797 table.minicalendar th {
798     padding: 0px 2px;
801 #calendar .maincalendar .eventlist {
802     padding: 10px;
805 #calendar .maincalendar .eventlist .topic {
806     padding: 5px;
807     border-style:solid; /* borders */
808     border-width: 0px;
809     border-bottom-color: #EEEEEE;
810     border-bottom-width: 1px;
813 #calendar .maincalendar .eventlist .event {
814     width:100%;
815     margin-bottom:10px;
816     border-spacing:0px;
817     border-collapse:separate;
818     border-width:1px;
819     border-style:solid;
822 #calendar .maincalendar .eventlist .event .name {
823     float:left;
826 #calendar .maincalendar .eventlist .event .course {
827     float:left;
828     clear:left;
831 #calendar .maincalendar .eventlist .event .date {
832     float:right;
835 #calendar .maincalendar .eventlist .event .description .commands {
836     width:100%;
839 #calendar .maincalendar .eventlist .event .description {
840     padding:5px;
843 #calendar .maincalendar .eventlist .event .picture {
844     padding:8px;
847 #calendar .maincalendar .eventlist .event .side {
848     width:32px;
851 #calendar #selecteventtype table {
852     margin:auto;
855 #calendar .event_global,
856 #calendar .event_course,
857 #calendar .event_group,
858 #calendar .event_user,
859 .minicalendar .event_global,
860 .minicalendar .event_course,
861 .minicalendar .event_group,
862 .minicalendar .event_user,
863 .block_calendar_month .event_global,
864 .block_calendar_month .event_course,
865 .block_calendar_month .event_group,
866 .block_calendar_month .event_user
868     border:2px solid !important;
871 #calendar .duration_global,
872 #calendar .duration_course,
873 #calendar .duration_group,
874 #calendar .duration_user,
875 .minicalendar .duration_global,
876 .minicalendar .duration_course,
877 .minicalendar .duration_group,
878 .minicalendar .duration_user
880     border-top:2px solid !important;
881     border-bottom:2px solid !important;
884 #calendar .today,
885 .minicalendar .today {
886     border:2px solid !important;
888     
889 .cal_popup_bg {
890     padding:0px;
891     margin:0px;
892     border:1px solid;
895 .cal_popup_close {
896     margin-right:5px;
899 .cal_popup_caption {
900     border-width:0px 0px 1px 0px;
901     border-style:solid;
902     padding-bottom:2px;
905 table.calendar-controls {
906     width: 100%;
909 table.calendar-controls .previous,
910 table.calendar-controls .next
912     width: 12%;
915 #calendar .maincalendar .calendar-controls .previous,
916 #calendar .maincalendar .calendar-controls .next
918     width: 30%;
921 /*****************************
922 ***
923 *** Blocks
924 ***
925 ******************************/
926 /* block_search_forums.php */
928 .block_search_forums.sideblock .searchform {
929     text-align: center;
932 .block_search_forums.sideblock .searchform img {
933     vertical-align: middle;
936 /* block_rss_client.php */
937 .rssclientlink {
938     padding-bottom:5px;
939     border-top:1px solid;
942 .rssclientdescription {
943     padding-left:10px;
944     padding-bottom:8px;
948 /* sideblock */
949 .sideblock {
950     width: 100%;
951     margin-bottom:1em;
952     border-collapse:separate;
953     border-width:1px;
954     border-style:solid;
957 .sideblock .header {
958     padding:4px;
961 .sideblock .header .hide-show {
962     float:right;
965 .sideblock .header .hide-show img.hide-show-image {
966     height:11px;
967     width:11px;
968     margin-top:0.25em;
971 .sideblock .header .commands {
972     float: right;
973     margin-top: 0.3em;
976 .sideblock .header .title {
977     float: left;
980 .sideblock .header .commands a {
981     margin: 0px 2px;
984 .sideblock .content {
985     padding:4px;
988 .sideblock .content hr {
989     height:1px;
990     margin-top:4px;
991     margin-bottom:4px;
992     border:none;
993     border-top:1px solid;
996 .sideblock .header .hide-show img.hide-show-image {
997     background: url('../../pix/t/switch_minus.gif') no-repeat bottom;
1000 .sideblock.hidden .header .hide-show img.hide-show-image {
1001     background: url('../../pix/t/switch_plus.gif') no-repeat bottom;
1004 .sideblock.hidden .content {
1005     display: none;
1008 .sideblock .list {
1009     width: 100%;
1012 .sideblock .list .c0{
1013     padding: 2px;
1016 .sideblock .footer {
1017     margin-top:4px;
1020 .sideblock .header .icon.hide,
1021 .sideblock .header .icon.edit {
1022     margin-right: 6px;
1025 /* sideblock weblib.php */
1026 .block_course_summary .content {
1027     padding:10px;
1030 /* blocklib.php */
1032 .block_adminblock .content {
1033     text-align: center;
1034     padding: 10px;
1037 /* block_quiz_results.php */
1038 .block_quiz_results table.grades {
1039     width: 100%;
1042 .block_quiz_results table.grades caption {
1043     margin: 1em 0px 0px 0px;
1044     border-bottom: 1px solid;
1047 .block_quiz_results table.grades .number, .block_quiz_results table.grades .grade {
1048     width: 10%;
1051 .block_quiz_results h1 {
1052     margin: 4px;
1055 /*****************************
1056 ***
1057 *** Doc
1058 ***
1059 ******************************/
1061 /* contents.php */
1063 .cell {  /* Very generic table cell*/
1064     vertical-align: top;
1067 body#doc-contents h1 {
1068     font-size: 1em;
1069     margin: 1em 0px 0px 0px;
1072 body#doc-contents ul {
1073     list-style-type: none;
1074     margin: 0px;
1075     padding: 0px;
1076     font-size: 0.8em;
1077     width: 90%; /* try it on IE without this and see what happens */
1080 body#course-view .unread {
1081     margin-left: 3em;
1082
1084 body#admin-index .c0 {
1085     vertical-align: top;
1086     background: #FAFAFA;
1087
1089 body#admin-modules table.generaltable td.cell,
1090 body#admin-modules .generaltablecell {
1091     padding-top: 2px;
1092     padding-bottom: 2px;
1093
1095 body#admin-blocks table.generaltable td.cell,
1096 body#admin-blocks .generaltablecell {
1097     padding-top: 1px;
1098     padding-bottom: 1px;
1099
1101 body#admin-config .confighelp {
1102     display: block;
1103     padding-bottom: 20px;
1105 body#course-enrol .generalbox {
1106     margin-top: 20px;
1108 body#course-enrol .coursebox {
1109     margin-top: 20px;
1112 .loginbox .content {
1113     border-width:1px;
1114     border-style:solid;
1115     padding:15px;
1118 .headingblock .link {
1119     text-align:right;