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