home *** CD-ROM | disk | FTP | other *** search
/ Chip 2004 April / CMCD0404.ISO / Software / Freeware / Programare / groupoffice-com-2.01 / controls / jscalendar / calendar-win2k-cold-1.css < prev    next >
Cascading Style Sheet File  |  2004-03-08  |  6KB  |  265 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: #c8d0d4;
  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: #c8d0d4;
  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: #788084;
  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: #e8f0f4;
  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: #d8e0e4;
  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: #b8c0c4;
  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: 1px solid;
  120.   border-color: #fff #000 #000 #fff;
  121. }
  122.  
  123. .calendar tbody td.active { /* Active (pressed) cells <TD> */
  124.   padding: 2px 2px 0px 2px;
  125.   border: 1px solid;
  126.   border-color: #000 #fff #fff #000;
  127. }
  128.  
  129. .calendar tbody td.selected { /* Cell showing selected date */
  130.   font-weight: bold;
  131.   padding: 2px 2px 0px 2px;
  132.   border: 1px solid;
  133.   border-color: #000 #fff #fff #000;
  134.   background: #d8e0e4;
  135. }
  136.  
  137. .calendar tbody td.weekend { /* Cells showing weekend days */
  138.   color: #f00;
  139. }
  140.  
  141. .calendar tbody td.today { /* Cell showing today date */
  142.   font-weight: bold;
  143.   color: #00f;
  144. }
  145.  
  146. .calendar tbody .disabled { color: #999; }
  147.  
  148. .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  149.   visibility: hidden;
  150. }
  151.  
  152. .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  153.   display: none;
  154. }
  155.  
  156. /* The footer part -- status bar and "Close" button */
  157.  
  158. .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  159. }
  160.  
  161. .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  162.   background: #e8f0f4;
  163.   padding: 1px;
  164.   border: 1px solid #000;
  165.   background: #788084;
  166.   color: #fff;
  167.   text-align: center;
  168. }
  169.  
  170. .calendar tfoot .hilite { /* Hover style for buttons in footer */
  171.   border-top: 1px solid #fff;
  172.   border-right: 1px solid #000;
  173.   border-bottom: 1px solid #000;
  174.   border-left: 1px solid #fff;
  175.   padding: 1px;
  176.   background: #d8e0e4;
  177. }
  178.  
  179. .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  180.   padding: 2px 0px 0px 2px;
  181.   border-top: 1px solid #000;
  182.   border-right: 1px solid #fff;
  183.   border-bottom: 1px solid #fff;
  184.   border-left: 1px solid #000;
  185. }
  186.  
  187. /* Combo boxes (menus that display months/years for direct selection) */
  188.  
  189. .calendar .combo {
  190.   position: absolute;
  191.   display: none;
  192.   width: 4em;
  193.   top: 0px;
  194.   left: 0px;
  195.   cursor: default;
  196.   border-top: 1px solid #fff;
  197.   border-right: 1px solid #000;
  198.   border-bottom: 1px solid #000;
  199.   border-left: 1px solid #fff;
  200.   background: #d8e0e4;
  201.   font-size: 90%;
  202.   padding: 1px;
  203. }
  204.  
  205. .calendar .combo .label,
  206. .calendar .combo .label-IEfix {
  207.   text-align: center;
  208.   padding: 1px;
  209. }
  210.  
  211. .calendar .combo .label-IEfix {
  212.   width: 4em;
  213. }
  214.  
  215. .calendar .combo .active {
  216.   background: #c8d0d4;
  217.   padding: 0px;
  218.   border-top: 1px solid #000;
  219.   border-right: 1px solid #fff;
  220.   border-bottom: 1px solid #fff;
  221.   border-left: 1px solid #000;
  222. }
  223.  
  224. .calendar .combo .hilite {
  225.   background: #048;
  226.   color: #aef;
  227. }
  228.  
  229. .calendar td.time {
  230.   border-top: 1px solid #000;
  231.   padding: 1px 0px;
  232.   text-align: center;
  233.   background-color: #e8f0f4;
  234. }
  235.  
  236. .calendar td.time .hour,
  237. .calendar td.time .minute,
  238. .calendar td.time .ampm {
  239.   padding: 0px 3px 0px 4px;
  240.   border: 1px solid #889;
  241.   font-weight: bold;
  242.   background-color: #fff;
  243. }
  244.  
  245. .calendar td.time .ampm {
  246.   text-align: center;
  247. }
  248.  
  249. .calendar td.time .colon {
  250.   padding: 0px 2px 0px 3px;
  251.   font-weight: bold;
  252. }
  253.  
  254. .calendar td.time span.hilite {
  255.   border-color: #000;
  256.   background-color: #667;
  257.   color: #fff;
  258. }
  259.  
  260. .calendar td.time span.active {
  261.   border-color: #f00;
  262.   background-color: #000;
  263.   color: #0f0;
  264. }
  265.