home *** CD-ROM | disk | FTP | other *** search
/ Chip 2004 April / CMCD0404.ISO / Software / Freeware / Programare / groupoffice-com-2.01 / controls / jscalendar / calendar-brown.css < prev    next >
Cascading Style Sheet File  |  2004-03-08  |  5KB  |  225 lines
  1. /* The main calendar widget.  DIV containing a table. */
  2.  
  3. div.calendar { position: relative; }
  4.  
  5. .calendar, .calendar table {
  6.   border: 1px solid #655;
  7.   font-size: 11px;
  8.   color: #000;
  9.   cursor: default;
  10.   background: #ffd;
  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: #edc 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: #654;
  29.   color: #fed;
  30.   padding: 2px;
  31. }
  32.  
  33. .calendar thead .headrow { /* Row <TR> containing navigation buttons */
  34.   background: #edc;
  35.   color: #000;
  36. }
  37.  
  38. .calendar thead .name { /* Cells <TD> containing the day names */
  39.   border-bottom: 1px solid #655;
  40.   padding: 2px;
  41.   text-align: center;
  42.   color: #000;
  43. }
  44.  
  45. .calendar thead .weekend { /* How a weekend day name shows in header */
  46.   color: #f00;
  47. }
  48.  
  49. .calendar thead .hilite { /* How do the buttons in header appear when hover */
  50.   background-color: #faa;
  51.   color: #000;
  52.   border: 1px solid #f40;
  53.   padding: 1px;
  54. }
  55.  
  56. .calendar thead .active { /* Active (pressed) buttons in header */
  57.   background-color: #c77;
  58.   padding: 2px 0px 0px 2px;
  59. }
  60.  
  61. .calendar thead .daynames { /* Row <TR> containing the day names */
  62.   background: #fed;
  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.   text-align: right;
  70.   padding: 2px 4px 2px 2px;
  71. }
  72. .calendar tbody .day.othermonth {
  73.   font-size: 80%;
  74.   color: #bbb;
  75. }
  76. .calendar tbody .day.othermonth.oweekend {
  77.   color: #fbb;
  78. }
  79.  
  80. .calendar table .wn {
  81.   padding: 2px 3px 2px 2px;
  82.   border-right: 1px solid #000;
  83.   background: #fed;
  84. }
  85.  
  86. .calendar tbody .rowhilite td {
  87.   background: #ddf;
  88. }
  89.  
  90. .calendar tbody .rowhilite td.wn {
  91.   background: #efe;
  92. }
  93.  
  94. .calendar tbody td.hilite { /* Hovered cells <TD> */
  95.   background: #ffe;
  96.   padding: 1px 3px 1px 1px;
  97.   border: 1px solid #bbb;
  98. }
  99.  
  100. .calendar tbody td.active { /* Active (pressed) cells <TD> */
  101.   background: #ddc;
  102.   padding: 2px 2px 0px 2px;
  103. }
  104.  
  105. .calendar tbody td.selected { /* Cell showing today date */
  106.   font-weight: bold;
  107.   border: 1px solid #000;
  108.   padding: 1px 3px 1px 1px;
  109.   background: #fea;
  110. }
  111.  
  112. .calendar tbody td.weekend { /* Cells showing weekend days */
  113.   color: #f00;
  114. }
  115.  
  116. .calendar tbody td.today { font-weight: bold; }
  117.  
  118. .calendar tbody .disabled { color: #999; }
  119.  
  120. .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  121.   visibility: hidden;
  122. }
  123.  
  124. .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  125.   display: none;
  126. }
  127.  
  128. /* The footer part -- status bar and "Close" button */
  129.  
  130. .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  131.   text-align: center;
  132.   background: #988;
  133.   color: #000;
  134. }
  135.  
  136. .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  137.   border-top: 1px solid #655;
  138.   background: #dcb;
  139.   color: #840;
  140. }
  141.  
  142. .calendar tfoot .hilite { /* Hover style for buttons in footer */
  143.   background: #faa;
  144.   border: 1px solid #f40;
  145.   padding: 1px;
  146. }
  147.  
  148. .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  149.   background: #c77;
  150.   padding: 2px 0px 0px 2px;
  151. }
  152.  
  153. /* Combo boxes (menus that display months/years for direct selection) */
  154.  
  155. .calendar .combo {
  156.   position: absolute;
  157.   display: none;
  158.   top: 0px;
  159.   left: 0px;
  160.   width: 4em;
  161.   cursor: default;
  162.   border: 1px solid #655;
  163.   background: #ffe;
  164.   color: #000;
  165.   font-size: 90%;
  166. }
  167.  
  168. .calendar .combo .label,
  169. .calendar .combo .label-IEfix {
  170.   text-align: center;
  171.   padding: 1px;
  172. }
  173.  
  174. .calendar .combo .label-IEfix {
  175.   width: 4em;
  176. }
  177.  
  178. .calendar .combo .hilite {
  179.   background: #fc8;
  180. }
  181.  
  182. .calendar .combo .active {
  183.   border-top: 1px solid #a64;
  184.   border-bottom: 1px solid #a64;
  185.   background: #fee;
  186.   font-weight: bold;
  187. }
  188.  
  189. .calendar td.time {
  190.   border-top: 1px solid #a88;
  191.   padding: 1px 0px;
  192.   text-align: center;
  193.   background-color: #fed;
  194. }
  195.  
  196. .calendar td.time .hour,
  197. .calendar td.time .minute,
  198. .calendar td.time .ampm {
  199.   padding: 0px 3px 0px 4px;
  200.   border: 1px solid #988;
  201.   font-weight: bold;
  202.   background-color: #fff;
  203. }
  204.  
  205. .calendar td.time .ampm {
  206.   text-align: center;
  207. }
  208.  
  209. .calendar td.time .colon {
  210.   padding: 0px 2px 0px 3px;
  211.   font-weight: bold;
  212. }
  213.  
  214. .calendar td.time span.hilite {
  215.   border-color: #000;
  216.   background-color: #866;
  217.   color: #fff;
  218. }
  219.  
  220. .calendar td.time span.active {
  221.   border-color: #f00;
  222.   background-color: #000;
  223.   color: #0f0;
  224. }
  225.