js/Dynarch/style/green.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 #565;
   7   font-size: 11px;
   8   color: #000;
   9   cursor: default;
  10   background: #efe;
  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   background: #676;
  20   color: #fff;
  21   font-size: 90%;
  22 }
  23
  24 .calendar .nav {
  25   background: #676 url(menuarrow.gif) no-repeat 100% 100%;
  26 }
  27
  28 .calendar thead .title { /* This holds the current "month, year" */
  29   font-weight: bold;      /* Pressing it will take you to the current date */
  30   text-align: center;
  31   padding: 2px;
  32   background: #250;
  33   color: #efa;
  34 }
  35
  36 .calendar thead .headrow { /* Row <TR> containing navigation buttons */
  37 }
  38
  39 .calendar thead .name { /* Cells <TD> containing the day names */
  40   border-bottom: 1px solid #565;
  41   padding: 2px;
  42   text-align: center;
  43   color: #000;
  44 }
  45
  46 .calendar thead .weekend { /* How a weekend day name shows in header */
  47   color: #a66;
  48 }
  49
  50 .calendar thead .hilite { /* How do the buttons in header appear when hover */
  51   background-color: #afa;
  52   color: #000;
  53   border: 1px solid #084;
  54   padding: 1px;
  55 }
  56
  57 .calendar thead .active { /* Active (pressed) buttons in header */
  58   background-color: #7c7;
  59   padding: 2px 0px 0px 2px;
  60 }
  61
  62 .calendar thead .daynames { /* Row <TR> containing the day names */
  63   background: #dfb;
  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: #564;
  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 #8a8;
  85   background: #dfb;
  86 }
  87
  88 .calendar tbody .rowhilite td {
  89   background: #dfd;
  90 }
  91
  92 .calendar tbody .rowhilite td.wn {
  93   background: #efe;
  94 }
  95
  96 .calendar tbody td.hilite { /* Hovered cells <TD> */
  97   background: #efd;
  98   padding: 1px 3px 1px 1px;
  99   border: 1px solid #bbb;
 100 }
 101
 102 .calendar tbody td.active { /* Active (pressed) cells <TD> */
 103   background: #dec;
 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: #f8fff8;
 112   color: #000;
 113 }
 114
 115 .calendar tbody td.weekend { /* Cells showing weekend days */
 116   color: #a66;
 117 }
 118
 119 .calendar tbody td.today { font-weight: bold; color: #0a0; }
 120
 121 .calendar tbody .disabled { color: #999; }
 122
 123 .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
 124   visibility: hidden;
 125 }
 126
 127 .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
 128   display: none;
 129 }
 130
 131 /* The footer part -- status bar and "Close" button */
 132
 133 .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
 134   text-align: center;
 135   background: #565;
 136   color: #fff;
 137 }
 138
 139 .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
 140   padding: 2px;
 141   background: #250;
 142   color: #efa;
 143 }
 144
 145 .calendar tfoot .hilite { /* Hover style for buttons in footer */
 146   background: #afa;
 147   border: 1px solid #084;
 148   color: #000;
 149   padding: 1px;
 150 }
 151
 152 .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
 153   background: #7c7;
 154   padding: 2px 0px 0px 2px;
 155 }
 156
 157 /* Combo boxes (menus that display months/years for direct selection) */
 158
 159 .calendar .combo {
 160   position: absolute;
 161   display: none;
 162   top: 0px;
 163   left: 0px;
 164   width: 4em;
 165   cursor: default;
 166   border: 1px solid #565;
 167   background: #efd;
 168   color: #000;
 169   font-size: 90%;
 170   z-index: 100;
 171 }
 172
 173 .calendar .combo .label,
 174 .calendar .combo .label-IEfix {
 175   text-align: center;
 176   padding: 1px;
 177 }
 178
 179 .calendar .combo .label-IEfix {
 180   width: 4em;
 181 }
 182
 183 .calendar .combo .hilite {
 184   background: #af8;
 185 }
 186
 187 .calendar .combo .active {
 188   border-top: 1px solid #6a4;
 189   border-bottom: 1px solid #6a4;
 190   background: #efe;
 191   font-weight: bold;
 192 }
 193
 194 .calendar td.time {
 195   border-top: 1px solid #8a8;
 196   padding: 1px 0px;
 197   text-align: center;
 198   background-color: #dfb;
 199 }
 200
 201 .calendar td.time .hour,
 202 .calendar td.time .minute,
 203 .calendar td.time .ampm {
 204   padding: 0px 3px 0px 4px;
 205   border: 1px solid #898;
 206   font-weight: bold;
 207   background-color: #fff;
 208 }
 209
 210 .calendar td.time .ampm {
 211   text-align: center;
 212 }
 213
 214 .calendar td.time .colon {
 215   padding: 0px 2px 0px 3px;
 216   font-weight: bold;
 217 }
 218
 219 .calendar td.time span.hilite {
 220   border-color: #000;
 221   background-color: #686;
 222   color: #fff;
 223 }
 224
 225 .calendar td.time span.active {
 226   border-color: #f00;
 227   background-color: #000;
 228   color: #0f0;
 229 }