New user tabs from Shane and myself ... these bring together the
[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 /* weblib.php table */
168 .tabledivider {
169     border-width:1px;
170     border-style:solid;
171     border-left:0px;
172     border-right:0px;
173     border-top:0px;
177 /* entry-page index.php */ 
178 .sitetopic {
179     border-width:1px;
180     border-style:solid;
184 /* paging bar */
185 .pagingbar {
186     text-align:center;
188 .pagingbar a {
189     padding-left: 10px;
191 .pagingbar .thispage {
192     padding-left: 10px;
195 /*****************************
196 ***
197 *** Admin
198 ***
199 ******************************/
200 /* admin, calendar */
201 table.formtable {
202     margin: auto;
205 table.formtable tbody th {
206     background: none;
207     vertical-align: top;
210 table.formtable tbody td,
211 table.formtable tbody th
213     padding: 5px;
216 /*****************************
217 ***
218 *** Course
219 ***
220 ******************************/
222 .section .activity img.activityicon {
223     vertical-align:middle;
224     height:16px;
225     width:16px;
228 .section img.movetarget {
229     height:16px;
230     width:80px;
233 /* course, entry-page, login */
234 .headingblock {
235     border-width:1px;
236     border-style:solid;
237     padding:5px;
241 /* course */
243 #course-view .section td {
244     vertical-align:top;
247 #course-view .section .content {
248     padding:5px;
249     border-style:solid;
250     border-width:1px;
251     border-left:0px;
252     border-right:0px;
255 #course-view .section .side {
256     padding:5px;
257     border-style:solid;
258     border-width:1px;
261 #course-view .section .left {
262     border-right:0px;
263     text-align:center;
264     font-weight:bold;
265     width: 1.5em;
268 #course-view .section .right {
269     border-left:0px;
270     text-align:center;
271     width: 1.5em;
274 #course-view .current .side {
277 #course-view .topics {
278     margin-top: 9px;
281 #course-view .weeks {
282     margin-top: 9px;
285 #course-view .section .spacer {
286     height:0.5em;
289 #course-view .section .weekdates {
293 .categoryboxcontent,
294 .courseboxcontent {
295     border-width:1px;
296     border-style:solid;
300 /* user */
301 .userinfobox {
302     border-width: 1px;
303     border-style: solid;
304     border-collapse: separate;    
307 .userinfobox .left {
308     padding: 10px;
309     width: 100px;
312 .userinfobox .content {
313     padding: 10px;
314     vertical-align: top;
317 .userinfobox .links {
318     width: 100px;
319     padding: 5px;
320     vertical-align: bottom;
323 .userinfobox .list td {
324     padding: 3px;
327 .userinfobox .username {
328     padding-bottom: 20px;
329 }    
332 table.userinfobox {
333     width: 80%;
334     margin-left: 10%;
335     margin-right: 10%;
340 /*****************************
341 ***
342 *** Activities
343 ***
344 ******************************/
345 /* assignment, forum, glossary */
346 .forumheaderlist,
347 .forumpost {
348     border-width:1px;
349     border-style:solid;
350     border-collapse:separate;
353 .forumpost {
354     margin-top: 15px;
357 .forumpost .topic {
358     padding: 4px;
362 .forumpost .commands {
363     padding-top: 0.5em;
364     text-align:right;
367 .forumpost .ratings {
368     padding-top: 1em;
369     text-align:right;
372 .forumpost .content {
373     padding: 4px;
376 .forumpost .footer {
377     padding-top: 0.5em;
378     text-align:right;
381 .forumpost .link {
382     padding-top: 0.5em;
383     text-align:right;
387 .forumpost .left {
388     width: 35px;
389     padding: 4px;
390     text-align: center;
391     vertical-align: top;
394 .forumpostindent {
395     margin-left: 30px;
398 body#user-view .forumpost,
399 .course .forumpost {
400     width: 100%;
403 body#mod-forum-search .c0 {
404     text-align: right;
407 body#mod-forum-search .introcontent {
408     padding: 15px;
409     font-weight:bold;
412 .forumolddiscuss {
413     text-align: right;
416 .forumheaderlist {
417     width: 100%;
420 .forumheaderlist td {
421     border-width:1px 0px 0px 1px;
422     border-style:solid;
425 .forumheaderlist .replies {
426     text-align: center;
429 .forumheaderlist .picture {
430     width: 35px;
433 .forumheaderlist .discussion .starter {
434     vertical-align: middle;
437 .forumheaderlist .discussion .lastpost {
438     white-space: nowrap;
441 .forumheaderlist .discussion .author {
442     white-space: nowrap;
445 .paging {
446     text-align: center;
447     margin: 10px 0px 10px 0px;
450 .unread {
451     padding-right:2px;
452
455 /* glossary, wiki */
456 .glossarypost .commands {
457     width: 200px;
458     white-space: nowrap;
461 .entryboxheader {
462     border-width: 1px 1px 0px 1px;
463     border-style: solid;
466 .entrybox {
467     border-width: 0px 1px 1px 1px;
468     border-style: solid;
471 .glossarypost {
472     width: 95%;
473     border-width:1px;
474     border-style:solid;
475     border-collapse:separate;
476     margin-bottom: 5px;
477     text-align: left;
481 .entrylist {
482     border-width:0px;
485 .entrylowersection {
486     padding-top: 10px;
488 .entrylowersection table{
489     width: 100%;
491 .entrylowersection .aliases {
492     text-align:center;
493     font-size: 0.8em;
495 .entrylowersection .icons,
496 .entrylowersection .ratings {
497     text-align:right;
498     font-size: 0.8em;
499     padding-right: 5px;
501 .entrylowersection .ratings {
502     padding-bottom: 2px;
505 .glossarypost .entry {
506     padding: 3px;
509 .glossarypost .picture {
510     width: 35px;
513 .glossarycomment {
514     border-width:1px;
515     border-style:solid;
516     border-collapse:separate;
517     margin-bottom: 5px;
518     text-align: left;
522 .glossarycomment .entry {
523     padding: 3px;
526 .glossarycomment .picture {
527     width: 35px;
530 .glossarycomment .icons {
531     text-align: right;
534 /* tabs for glossary */
536 .generaltab,
537 .generaltabselected,
538 .generaltabinactive {
539     background:none;
542 .glossarydisplay {
543     width: 70%;
546 .glossarydisplay .tabs {
547     width: 100%;
550 .glossarydisplay .separator {
551     width: 4px;
554 .glossarydisplay .tabs .selected,
555 .glossarydisplay .tabs .inactive,
556 .glossarydisplay .tabs .general {
559 .glossarypopup {
560     width: 95%;
563 .glossaryapproval {
564     width: 100%;
567 /******************************************************************/
568 /* tabs */
569 .tabs {
570     width: auto;
573 body#mod-quiz-report .tabs .side,
574 body#message-index .tabs .side,
575 body.course .tabs .side, 
576 body.user .tabs .side,
577 body#mod-forum-user .tabs .side {
578     border-style: solid;
579     border-width: 0px 0px 1px 0px;
580     border-color: #AAAAAA;
581     width: 50%;
584 body#mod-quiz-report .tabs,
585 body#message-index .tabs,
586 body.course .tabs,
587 body.user .tabs,
588 body#mod-forum-user .tabs {
589     margin-bottom: 15px;
592 .tabrow {
593     border-collapse:collapse;
594     width:100%;
595     margin:0;
597 .tabrow td {
598     height:34px;
599     padding:0 0 0 14px;
600     background:url(pix/tab/left.gif) top left no-repeat;
602 .tabrow th {
603     display:none;
605 .tabrow td .tablink {
606     display:block;
607     height:34px;
608     line-height:38px;
609     padding:0 14px 0 0;
610     background:url(pix/tab/right.gif) top right no-repeat;
611     text-align:center;
612     white-space:nowrap;
613     text-decoration:none;
615 .tabrow td:hover {
616     background-image:url(pix/tab/left_hover.gif);
618 .tabrow td:hover .tablink {
619     line-height:32px;
620     background-image:url(pix/tab/right_hover.gif);
623 .tabrow .last span {
624     display:block;
625     padding:0px 1px 0px 0px;
626     background:url(pix/tab/right_end.gif) top right no-repeat;
628 .tabrow .selected {
629     background:url(pix/tab/left_active.gif) top left no-repeat;
631 .tabrow .selected .tablink {
632     background:url(pix/tab/right_active.gif) top right no-repeat;
633     line-height:38px;
635 .tabrow td.selected:hover {
636     background-image:url(pix/tab/left_active_hover.gif);
638 .tabrow td.selected:hover .tablink {
639     background-image:url(pix/tab/right_active_hover.gif);
642 /******************************************************************/
644 /* message */
645 .message_link {
646     vertical-align:middle;
649 .message_search_results {
650     border-collapse:collapse;
651     border-spacing:0px;
654 table.message_search_results td {
655     padding:5px;
656     border-width:1px;
657     border-style:solid;
661 /* quiz */
662 .feedbacktext {
663     display:block;
666 body#mod-quiz-report table#attempts,
667 body#mod-quiz-report table#commands
669     width: 80%;
670     margin: auto;
672 body#mod-quiz-report table#attempts {
673     margin: 20px auto;
675 body#mod-quiz-report table#attempts .header,
676 body#mod-quiz-report table#attempts .cell
678     padding: 4px;
680 body#mod-quiz-report table#attempts .header .commands {
681     display: inline;
683 body#mod-quiz-report table#attempts .picture {
684     width: 40px;
686 body#mod-quiz-report table#attempts td {
687     border-left-width: 1px;
688     border-right-width: 1px;
689     border-left-style: solid;
690     border-right-style: solid;
694 /*****************************
695 ***
696 *** Calendar
697 ***
698 ******************************/
699 /* calendar */
701 #calendar {
702     width: 100%;
703     border-spacing: 5px;
704     border-collapse: separate;
707 #calendar .maincalendar,
708 #calendar .sidecalendar
710     vertical-align: top;
711     border: 1px solid;
714 #calendar .sidecalendar {
715     width: 25%;
718 #calendar .maincalendar table.calendarmonth {
719     border-collapse: separate;
720     margin: 0px auto;
721     width: 98%;
724 #calendar .maincalendar table.calendarmonth th {
725     padding:10px;
726     border-bottom:2px solid;
729 #calendar .maincalendar table.calendarmonth td {
730     height: 5em;
731     padding-left: 4px;
732     padding-top: 4px;
735 #calendar .maincalendar table.calendarmonth td,
736 table.minicalendar td,
737 table.minicalendar th {
738     width:14%;
739     vertical-align:top;
742 #calendar .maincalendar table.calendarmonth td table td {
743     height: auto;
746 #calendar div.header
748     padding: 5px;
751 #calendar .maincalendar .buttons {
752     float: right;
755 #calendar .maincalendar .filters table,
756 #calendar .sidecalendar .filters table,
757 .sideblock.block_calendar_month .filters table
759     border-collapse:separate;
760     border-spacing: 2px;
761     background-color: #EEEEEE;
762     padding: 2px;
763     width: 100%;
766 #calendar .maincalendar .filters {
767     padding: 0px 10px;
770 #calendar .sidecalendar .filters,
771 .sideblock.block_calendar_month .filters
773     padding: 5px;
776 #calendar .maincalendar .controls {
777     clear:both;
778     padding:10px;
781 #calendar .maincalendar table.calendarmonth ul.events-new,
782 #calendar .maincalendar table.calendarmonth ul.events-underway
784     padding:0px;
785     margin:0px;
786     list-style-type:none;
789 #calendar .maincalendar table.calendarmonth ul li {
790     margin-top: 4px;
793 table.minicalendar {
794     width: 100%;
795     margin:10px auto;
796     padding:2px;
797     border-width:1px;
798     border-style:solid;
799     border-collapse:separate;
800     border-spacing:1px !important;
803 table.minicalendar th {
804     padding: 0px 2px;
807 #calendar .maincalendar .eventlist {
808     padding: 10px;
811 #calendar .maincalendar .eventlist .topic {
812     padding: 5px;
813     border-style:solid; /* borders */
814     border-width: 0px;
815     border-bottom-color: #EEEEEE;
816     border-bottom-width: 1px;
819 #calendar .maincalendar .eventlist .event {
820     width:100%;
821     margin-bottom:10px;
822     border-spacing:0px;
823     border-collapse:separate;
824     border-width:1px;
825     border-style:solid;
828 #calendar .maincalendar .eventlist .event .name {
829     float:left;
832 #calendar .maincalendar .eventlist .event .course {
833     float:left;
834     clear:left;
837 #calendar .maincalendar .eventlist .event .date {
838     float:right;
841 #calendar .maincalendar .eventlist .event .description .commands {
842     width:100%;
845 #calendar .maincalendar .eventlist .event .description {
846     padding:5px;
849 #calendar .maincalendar .eventlist .event .picture {
850     padding:8px;
853 #calendar .maincalendar .eventlist .event .side {
854     width:32px;
857 #calendar #selecteventtype table {
858     margin:auto;
861 #calendar .event_global,
862 #calendar .event_course,
863 #calendar .event_group,
864 #calendar .event_user,
865 .minicalendar .event_global,
866 .minicalendar .event_course,
867 .minicalendar .event_group,
868 .minicalendar .event_user,
869 .block_calendar_month .event_global,
870 .block_calendar_month .event_course,
871 .block_calendar_month .event_group,
872 .block_calendar_month .event_user
874     border:2px solid !important;
877 #calendar .duration_global,
878 #calendar .duration_course,
879 #calendar .duration_group,
880 #calendar .duration_user,
881 .minicalendar .duration_global,
882 .minicalendar .duration_course,
883 .minicalendar .duration_group,
884 .minicalendar .duration_user
886     border-top:2px solid !important;
887     border-bottom:2px solid !important;
890 #calendar .today,
891 .minicalendar .today {
892     border:2px solid !important;
894     
895 .cal_popup_bg {
896     padding:0px;
897     margin:0px;
898     border:1px solid;
901 .cal_popup_close {
902     margin-right:5px;
905 .cal_popup_caption {
906     border-width:0px 0px 1px 0px;
907     border-style:solid;
908     padding-bottom:2px;
911 table.calendar-controls {
912     width: 100%;
915 table.calendar-controls .previous,
916 table.calendar-controls .next
918     width: 12%;
921 #calendar .maincalendar .calendar-controls .previous,
922 #calendar .maincalendar .calendar-controls .next
924     width: 30%;
927 /*****************************
928 ***
929 *** Blocks
930 ***
931 ******************************/
932 /* block_search_forums.php */
934 .block_search_forums.sideblock .searchform {
935     text-align: center;
938 .block_search_forums.sideblock .searchform img {
939     vertical-align: middle;
942 /* block_rss_client.php */
943 .rssclientlink {
944     padding-bottom:5px;
945     border-top:1px solid;
948 .rssclientdescription {
949     padding-left:10px;
950     padding-bottom:8px;
954 /* sideblock */
955 .sideblock {
956     width: 100%;
957     margin-bottom:1em;
958     border-collapse:separate;
959     border-width:1px;
960     border-style:solid;
963 .sideblock .header {
964     padding:4px;
967 .sideblock .header .hide-show {
968     float:right;
971 .sideblock .header .hide-show img.hide-show-image {
972     height:11px;
973     width:11px;
974     margin-top:0.25em;
977 .sideblock .header .commands {
978     float: right;
979     margin-top: 0.3em;
982 .sideblock .header .title {
983     float: left;
986 .sideblock .header .commands a {
987     margin: 0px 2px;
990 .sideblock .content {
991     padding:4px;
994 .sideblock .content hr {
995     height:1px;
996     margin-top:4px;
997     margin-bottom:4px;
998     border:none;
999     border-top:1px solid;
1002 .sideblock .header .hide-show img.hide-show-image {
1003     background: url('../../pix/t/switch_minus.gif') no-repeat bottom;
1006 .sideblock.hidden .header .hide-show img.hide-show-image {
1007     background: url('../../pix/t/switch_plus.gif') no-repeat bottom;
1010 .sideblock.hidden .content {
1011     display: none;
1014 .sideblock .list {
1015     width: 100%;
1018 .sideblock .list .c0{
1019     padding: 2px;
1022 .sideblock .footer {
1023     margin-top:4px;
1026 .sideblock .header .icon.hide,
1027 .sideblock .header .icon.edit {
1028     margin-right: 6px;
1031 /* sideblock weblib.php */
1032 .block_course_summary .content {
1033     padding:10px;
1036 /* blocklib.php */
1038 .block_adminblock .content {
1039     text-align: center;
1040     padding: 10px;
1043 /* block_quiz_results.php */
1044 .block_quiz_results table.grades {
1045     width: 100%;
1048 .block_quiz_results table.grades caption {
1049     margin: 1em 0px 0px 0px;
1050     border-bottom: 1px solid;
1053 .block_quiz_results table.grades .number, .block_quiz_results table.grades .grade {
1054     width: 10%;
1057 .block_quiz_results h1 {
1058     margin: 4px;
1061 /*****************************
1062 ***
1063 *** Doc
1064 ***
1065 ******************************/
1067 /* contents.php */
1069 .cell {  /* Very generic table cell*/
1070     vertical-align: top;
1073 body#doc-contents h1 {
1074     font-size: 1em;
1075     margin: 1em 0px 0px 0px;
1078 body#doc-contents ul {
1079     list-style-type: none;
1080     margin: 0px;
1081     padding: 0px;
1082     font-size: 0.8em;
1083     width: 90%; /* try it on IE without this and see what happens */
1086 body#course-view .unread {
1087     margin-left: 3em;
1088
1090 body#admin-index .c0 {
1091     vertical-align: top;
1092     background: #FAFAFA;
1093
1095 body#admin-modules table.generaltable td.cell,
1096 body#admin-modules .generaltablecell {
1097     padding-top: 2px;
1098     padding-bottom: 2px;
1099
1101 body#admin-blocks table.generaltable td.cell,
1102 body#admin-blocks .generaltablecell {
1103     padding-top: 1px;
1104     padding-bottom: 1px;
1105
1107 body#admin-config .confighelp {
1108     display: block;
1109     padding-bottom: 20px;
1111 body#course-enrol .generalbox {
1112     margin-top: 20px;
1114 body#course-enrol .coursebox {
1115     margin-top: 20px;
1118 .loginbox .content {
1119     border-width:1px;
1120     border-style:solid;
1121     padding:15px;
1124 .headingblock .link {
1125     text-align:right;
1128 body#course-user .graph {
1129     text-align: center;
1132 body#course-user .section,
1133 body#course-user .content {
1134     margin-left: 30px;
1135     margin-right: 30px;
1138 body#course-user .section {
1139     border-width:1px;
1140     border-style:solid;
1141     padding:10px;
1142     border-color:#AAAAAA;
1143     margin-bottom: 20px;
1146 body#course-user .section h2 {
1147     margin-top: 0px;