/* The main calendar widget. DIV containing a table. */ .calendar { position: relative; display: none; font-size: 11px; color: #000; cursor: default; font-family: tahoma,verdana,sans-serif; padding: 4px; margin: 2px 0 0; background-color: #ffffff; border: 1px solid #ccc; *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .calendar table { border: 1px solid #ccc; font-size: 11px; color: #000; cursor: default; font-family: tahoma,verdana,sans-serif; } /* Header part -- contains navigation buttons and day names. */ .calendar .button { /* "<<", "<", ">", ">>" buttons have this class */ text-align: center; padding: 0px; border: 1px solid #ccc; background-color: #f5f5f5; *background-color: #e6e6e6; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; } .calendar .cnav { background-color: #f5f5f5; *background-color: #e6e6e6; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #cccccc; *border: 0; *zoom: 1; -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 0px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 0px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 0px 2px rgba(0, 0, 0, 0.05); } .calendar thead .title { /* This holds the current "month, year" */ font-weight: bold; padding: 1px; border: 1px solid #ccc; color: #333333; background-color: #e6e6e6; *background-color: #d9d9d9; text-align: center; } .calendar thead .headrow { /* Row containing navigation buttons */ } .calendar thead .daynames { /* Row 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 */ padding: 0px; color: #333333; background-color: #e6e6e6; *background-color: #d9d9d9; 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); -moz-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: -moz-linear-gradient(top, #0088cc, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: -o-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; *background-color: #d9d9d9; } .calendar tbody .rowhilite td.wn { color: #333333; background-color: #e6e6e6; *background-color: #d9d9d9; } .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: -moz-linear-gradient(top, #0088cc, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: -o-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; } /* The footer part -- status bar and "Close" button */ .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; *background-color: #d9d9d9; 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 */ } /* Combo boxes (menus that display months/years for direct selection) */ .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: -moz-linear-gradient(top, #0088cc, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: -o-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: -moz-linear-gradient(top, #0088cc, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: -o-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); }