home *** CD-ROM | disk | FTP | other *** search
/ Chip 2004 April / CMCD0404.ISO / Software / Freeware / Programare / groupoffice-com-2.01 / controls / jscalendar / calendar-blue.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2004-03-08  |  4.7 KB  |  232 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 #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. }
  232.