containing the day names */ } .calendar thead .name { /* Cells | containing the day names */ border-bottom: 1px solid #ccc; padding: 2px; text-align: center; } .calendar thead .weekend { /* How a weekend day name shows in header */ color: #b94a48; } .calendar thead .hilite { /* How do the buttons in header appear when hover */ color: #333333; background-color: #e6e6e6; text-decoration: none; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } .calendar thead .active { /* Active (pressed) buttons in header */ background-image: none; outline: 0; -webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 0 0px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 0 0px 2px rgba(0, 0, 0, 0.05); } .calendar thead .daynames .hilite { /* How do the buttons in header appear when hover */ color: #ffffff; text-decoration: none; background-color: #0081c2; background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } /* The body part -- contains all the days in month. */ .calendar tbody .day { /* Cells | containing month days dates */ width: 2em; text-align: right; padding: 2px 4px 2px 2px; } .calendar tbody .day.othermonth { font-size: 80%; color: #aaa; } .calendar tbody .day.othermonth.oweekend { color: #faa; } .calendar table .wn { padding: 2px 3px 2px 2px; border-right: 1px solid #ccc; } .calendar tbody .rowhilite td { color: #333333; background-color: #e6e6e6; } .calendar tbody .rowhilite td.wn { color: #333333; background-color: #e6e6e6; } .calendar tbody td.selected { /* Cell showing selected date */ font-weight: bold; color: #3a87ad; background-color: #d9edf7; } .calendar tbody td.hilite { /* Hovered cells | */ color: #ffffff; text-decoration: none; background-color: #0081c2; background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } .calendar tbody td.active { /* Active (pressed) cells | */ } .calendar tbody td.today { /* Cell showing today date */ font-weight: bold; background-color: #fcf8e3; } .calendar tbody .disabled { color: #999; } .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */ } .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */ display: none; } .calendar tfoot .footrow { /* The |
in footer (only one right now) */ } .calendar tfoot .ttip { /* Tooltip (status bar) cell | */ padding: 1px; border: 1px solid #ccc; color: #333333; background-color: #e6e6e6; text-align: center; } .calendar tfoot .hilite { /* Hover style for buttons in footer */ padding: 1px; background: #e4e0d8; } .calendar tfoot .active { /* Active (pressed) style for buttons in footer */ } .calendar .combo { position: absolute; display: none; width: 4em; top: 0px; left: 0px; cursor: default; background: #fff; border: 1px solid #ccc; padding: 0px; z-index: 100; } .calendar .combo .clabel { background: #fff; padding: 0 0 0 3px; } .calendar .combo .active { } .calendar .combo .hilite { color: #ffffff; text-decoration: none; background-color: #0081c2; background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } .calendar td.time { border-top: 1px solid #ccc; padding: 1px 0px; text-align: center; padding: 2px; } .calendar td.time .hour, .calendar td.time .minute, .calendar td.time .ampm { padding: 3px; border: 1px solid #ccc; background-color: #fff; } .calendar td.time .ampm { text-align: center; } .calendar td.time .colon { padding: 0px 2px 0px 3px; font-weight: bold; } .calendar td.time span.hilite { border: 1px solid #ccc; } .calendar td.time span.active { color: #ffffff; text-decoration: none; background-color: #0081c2; background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } |