1 table#calendar { 2 border: 2px solid #000; 3 } 4 5 colgroup#columns-request { 6 background-color: #eef; 7 } 8 9 colgroup#columns-freebusy { 10 background-color: #fee; 11 } 12 13 th.requestheading { 14 background-color: #aaf; 15 } 16 17 th.participantheading{ 18 background-color: #faa; 19 } 20 21 th.dayheading { 22 background-color: #f85; 23 } 24 25 th.timeslot { 26 vertical-align: top; 27 padding-top: 0; 28 } 29 30 td.event { 31 background-color: #af8; 32 border: 2px solid #000; 33 } 34 35 td.event.continued { 36 border-top: 2px dotted #000; 37 } 38 39 td.event.continues { 40 border-bottom: 2px dotted #000; 41 } 42 43 td.event:target { 44 background-color: #5f4; 45 border-width: 4px; 46 } 47 48 td.event a { 49 color: #009; 50 } 51 52 /* Selection of slots/periods for new events. */ 53 54 input.newevent { 55 display: none; 56 } 57 58 .container { 59 position: relative; 60 } 61 62 .popup { 63 display: none; 64 position: absolute; 65 top: 0; 66 left: 0; 67 } 68 69 .container:hover .popup, 70 .container:focus .popup { 71 display: block; 72 border: 1px solid #000; 73 padding: 4px; 74 background-color: #fff; 75 } 76 77 input.newevent:checked ~ .timepoint { 78 background-color: #af8; 79 text-decoration: underline; 80 } 81 82 /* Hiding/showing unused slots/periods. */ 83 84 input#hideslots { 85 display: none; 86 } 87 88 input#hideslots:checked ~ p label.enable[for=hideslots] { 89 display: none; 90 } 91 92 input#hideslots:not(:checked) ~ p label.disable[for=hideslots] { 93 display: none; 94 } 95 96 input#hideslots:checked ~ table tr.slot.daystart.empty { 97 display: none; 98 }