themes/Sidebar/jscalendar/calendar-phpwiki.css

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