1/* The main calendar widget. DIV containing a table. */ 2 3div.calendar { position: relative; } 4 5.calendar, .calendar table { 6 border: 1px solid #206A9B; 7 font-size: 11px; 8 color: #000; 9 cursor: default; 10 background: #F1F8FC; 11 font-family: tahoma,verdana,sans-serif; 12} 13 14/* Header part -- contains navigation buttons and day names. */ 15 16.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */ 17 text-align: center; /* They are the navigation buttons */ 18 padding: 2px; /* Make the buttons seem like they're pressing */ 19} 20 21.calendar .nav { 22 background: #007ED1 url(menuarrow2.gif) no-repeat 100% 100%; 23} 24 25.calendar thead .title { /* This holds the current "month, year" */ 26 font-weight: bold; /* Pressing it will take you to the current date */ 27 text-align: center; 28 background: #000; 29 color: #fff; 30 padding: 2px; 31} 32 33.calendar thead tr { /* Row <TR> containing navigation buttons */ 34 background: #007ED1; 35 color: #fff; 36} 37 38.calendar thead .daynames { /* Row <TR> containing the day names */ 39 background: #C7E1F3; 40} 41 42.calendar thead .name { /* Cells <TD> containing the day names */ 43 border-bottom: 1px solid #206A9B; 44 padding: 2px; 45 text-align: center; 46 color: #000; 47} 48 49.calendar thead .weekend { /* How a weekend day name shows in header */ 50 color: #a66; 51} 52 53.calendar thead .hilite { /* How do the buttons in header appear when hover */ 54 background-color: #34ABFA; 55 color: #000; 56 border: 1px solid #016DC5; 57 padding: 1px; 58} 59 60.calendar thead .active { /* Active (pressed) buttons in header */ 61 background-color: #006AA9; 62 border: 1px solid #008AFF; 63 padding: 2px 0px 0px 2px; 64} 65 66/* The body part -- contains all the days in month. */ 67 68.calendar tbody .day { /* Cells <TD> containing month days dates */ 69 width: 2em; 70 color: #456; 71 text-align: right; 72 padding: 2px 4px 2px 2px; 73} 74.calendar tbody .day.othermonth { 75 font-size: 80%; 76 color: #bbb; 77} 78.calendar tbody .day.othermonth.oweekend { 79 color: #fbb; 80} 81 82.calendar table .wn { 83 padding: 2px 3px 2px 2px; 84 border-right: 1px solid #000; 85 background: #C7E1F3; 86} 87 88.calendar tbody .rowhilite td { 89 background: #def; 90} 91 92.calendar tbody .rowhilite td.wn { 93 background: #F1F8FC; 94} 95 96.calendar tbody td.hilite { /* Hovered cells <TD> */ 97 background: #def; 98 padding: 1px 3px 1px 1px; 99 border: 1px solid #8FC4E8; 100} 101 102.calendar tbody td.active { /* Active (pressed) cells <TD> */ 103 background: #cde; 104 padding: 2px 2px 0px 2px; 105} 106 107.calendar tbody td.selected { /* Cell showing today date */ 108 font-weight: bold; 109 border: 1px solid #000; 110 padding: 1px 3px 1px 1px; 111 background: #fff; 112 color: #000; 113} 114 115.calendar tbody td.weekend { /* Cells showing weekend days */ 116 color: #a66; 117} 118 119.calendar tbody td.today { /* Cell showing selected date */ 120 font-weight: bold; 121 color: #D50000; 122} 123 124.calendar tbody .disabled { color: #999; } 125 126.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */ 127 visibility: hidden; 128} 129 130.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */ 131 display: none; 132} 133 134/* The footer part -- status bar and "Close" button */ 135 136.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */ 137 text-align: center; 138 background: #206A9B; 139 color: #fff; 140} 141 142.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */ 143 background: #000; 144 color: #fff; 145 border-top: 1px solid #206A9B; 146 padding: 1px; 147} 148 149.calendar tfoot .hilite { /* Hover style for buttons in footer */ 150 background: #B8DAF0; 151 border: 1px solid #178AEB; 152 color: #000; 153 padding: 1px; 154} 155 156.calendar tfoot .active { /* Active (pressed) style for buttons in footer */ 157 background: #006AA9; 158 padding: 2px 0px 0px 2px; 159} 160 161/* Combo boxes (menus that display months/years for direct selection) */ 162 163.calendar .combo { 164 position: absolute; 165 display: none; 166 top: 0px; 167 left: 0px; 168 width: 4em; 169 cursor: default; 170 border: 1px solid #655; 171 background: #def; 172 color: #000; 173 font-size: 90%; 174 z-index: 100; 175} 176 177.calendar .combo .label, 178.calendar .combo .label-IEfix { 179 text-align: center; 180 padding: 1px; 181} 182 183.calendar .combo .label-IEfix { 184 width: 4em; 185} 186 187.calendar .combo .hilite { 188 background: #34ABFA; 189 border-top: 1px solid #46a; 190 border-bottom: 1px solid #46a; 191 font-weight: bold; 192} 193 194.calendar .combo .active { 195 border-top: 1px solid #46a; 196 border-bottom: 1px solid #46a; 197 background: #F1F8FC; 198 font-weight: bold; 199} 200 201.calendar td.time { 202 border-top: 1px solid #000; 203 padding: 1px 0px; 204 text-align: center; 205 background-color: #E3F0F9; 206} 207 208.calendar td.time .hour, 209.calendar td.time .minute, 210.calendar td.time .ampm { 211 padding: 0px 3px 0px 4px; 212 border: 1px solid #889; 213 font-weight: bold; 214 background-color: #F1F8FC; 215} 216 217.calendar td.time .ampm { 218 text-align: center; 219} 220 221.calendar td.time .colon { 222 padding: 0px 2px 0px 3px; 223 font-weight: bold; 224} 225 226.calendar td.time span.hilite { 227 border-color: #000; 228 background-color: #267DB7; 229 color: #fff; 230} 231 232.calendar td.time span.active { 233 border-color: red; 234 background-color: #000; 235 color: #A5FF00; 236} 237