skins/jscalendar/calendar-blue.css

   1 /* The main calendar widget.  DIV containing a table. */
   2
   3 div.calendar { position: relative; }
   4
   5 .calendar, .calendar table {
   6   border: 1px solid #556;
   7   font-size: 11px;
   8   color: #000;
   9   cursor: default;
  10   background: #eef;
  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: #778 url(menuarrow.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: #fff;
  29   color: #000;
  30   padding: 2px;
  31 }
  32
  33 .calendar thead .headrow { /* Row <TR> containing navigation buttons */
  34   background: #778;
  35   color: #fff;
  36 }
  37
  38 .calendar thead .daynames { /* Row <TR> containing the day names */
  39   background: #bdf;
  40 }
  41
  42 .calendar thead .name { /* Cells <TD> containing the day names */
  43   border-bottom: 1px solid #556;
  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: #aaf;
  55   color: #000;
  56   border: 1px solid #04f;
  57   padding: 1px;
  58 }
  59
  60 .calendar thead .active { /* Active (pressed) buttons in header */
  61   background-color: #77c;
  62   padding: 2px 0px 0px 2px;
  63 }
  64
  65 /* The body part -- contains all the days in month. */
  66
  67 .calendar tbody .day { /* Cells <TD> containing month days dates */
  68   width: 2em;
  69   color: #456;
  70   text-align: right;
  71   padding: 2px 4px 2px 2px;
  72 }
  73 .calendar tbody .day.othermonth {
  74   font-size: 80%;
  75   color: #bbb;
  76 }
  77 .calendar tbody .day.othermonth.oweekend {
  78   color: #fbb;
  79 }
  80
  81 .calendar table .wn {
  82   padding: 2px 3px 2px 2px;
  83   border-right: 1px solid #000;
  84   background: #bdf;
  85 }
  86
  87 .calendar tbody .rowhilite td {
  88   background: #def;
  89 }
  90
  91 .calendar tbody .rowhilite td.wn {
  92   background: #eef;
  93 }
  94
  95 .calendar tbody td.hilite { /* Hovered cells <TD> */
  96   background: #def;
  97   padding: 1px 3px 1px 1px;
  98   border: 1px solid #bbb;
  99 }
 100
 101 .calendar tbody td.active { /* Active (pressed) cells <TD> */
 102   background: #cde;
 103   padding: 2px 2px 0px 2px;
 104 }
 105
 106 .calendar tbody td.selected { /* Cell showing today date */
 107   font-weight: bold;
 108   border: 1px solid #000;
 109   padding: 1px 3px 1px 1px;
 110   background: #fff;
 111   color: #000;
 112 }
 113
 114 .calendar tbody td.weekend { /* Cells showing weekend days */
 115   color: #a66;
 116 }
 117
 118 .calendar tbody td.today { /* Cell showing selected date */
 119   font-weight: bold;
 120   color: #00f;
 121 }
 122
 123 .calendar tbody .disabled { color: #999; }
 124
 125 .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
 126   visibility: hidden;
 127 }
 128
 129 .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
 130   display: none;
 131 }
 132
 133 /* The footer part -- status bar and "Close" button */
 134
 135 .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
 136   text-align: center;
 137   background: #556;
 138   color: #fff;
 139 }
 140
 141 .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
 142   background: #fff;
 143   color: #445;
 144   border-top: 1px solid #556;
 145   padding: 1px;
 146 }
 147
 148 .calendar tfoot .hilite { /* Hover style for buttons in footer */
 149   background: #aaf;
 150   border: 1px solid #04f;
 151   color: #000;
 152   padding: 1px;
 153 }
 154
 155 .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
 156   background: #77c;
 157   padding: 2px 0px 0px 2px;
 158 }
 159
 160 /* Combo boxes (menus that display months/years for direct selection) */
 161
 162 .calendar .combo {
 163   position: absolute;
 164   display: none;
 165   top: 0px;
 166   left: 0px;
 167   width: 4em;
 168   cursor: default;
 169   border: 1px solid #655;
 170   background: #def;
 171   color: #000;
 172   font-size: 90%;
 173 }
 174
 175 .calendar .combo .label,
 176 .calendar .combo .label-IEfix {
 177   text-align: center;
 178   padding: 1px;
 179 }
 180
 181 .calendar .combo .label-IEfix {
 182   width: 4em;
 183 }
 184
 185 .calendar .combo .hilite {
 186   background: #acf;
 187 }
 188
 189 .calendar .combo .active {
 190   border-top: 1px solid #46a;
 191   border-bottom: 1px solid #46a;
 192   background: #eef;
 193   font-weight: bold;
 194 }
 195
 196 .calendar td.time {
 197   border-top: 1px solid #000;
 198   padding: 1px 0px;
 199   text-align: center;
 200   background-color: #f4f0e8;
 201 }
 202
 203 .calendar td.time .hour,
 204 .calendar td.time .minute,
 205 .calendar td.time .ampm {
 206   padding: 0px 3px 0px 4px;
 207   border: 1px solid #889;
 208   font-weight: bold;
 209   background-color: #fff;
 210 }
 211
 212 .calendar td.time .ampm {
 213   text-align: center;
 214 }
 215
 216 .calendar td.time .colon {
 217   padding: 0px 2px 0px 3px;
 218   font-weight: bold;
 219 }
 220
 221 .calendar td.time span.hilite {
 222   border-color: #000;
 223   background-color: #667;
 224   color: #fff;
 225 }
 226
 227 .calendar td.time span.active {
 228   border-color: #f00;
 229   background-color: #000;
 230   color: #0f0;
 231 }