/* Unminified development version of the datepicker stylesheet. Please use the minified version in production (remember to run a find/replace on the file to update the image locations to suit your installation). */ /* Hide the datepickers associated input by using a className */ .fd-hidden-input { display: none; } /* Screen reader class - used to hide spans inside each cell from the visual display. See: http://webaim.org/techniques/css/invisiblecontent/ */ .fd-screen-reader { position: absolute; left: -999em; top: auto; width: 1px; height: 1px; overflow: hidden; -moz-outline: 0 none; outline: 0 none; } /* The wrapper div */ .date-picker { position: absolute; z-index: 9999; text-align: center; /* Change the font-size to suit your needs. The following line is for the demo that has a 14px font-size defined on the body tag. All other rules are "em" based and inherit from the font-size set here. */ font: 900 0.8em/1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* Styles for the static datePickers */ .static-datepicker { position: relative; top: 5px; left: 0; margin-bottom: 1.5em; } /* The iframe hack to cover selectlists in IE6 */ .iehack { position: absolute; background: #fff; z-index: 9998; padding: 0; margin: 0; border: 0; display: none; } /* The activation "button" created beside each input for popup datePickers */ .date-picker-control span { display: block; width: 14px; height: 14px; overflow: hidden; margin: auto 0; resize: none; outline: none; } /* The hover effect on the activation button */ .date-picker-button-active span, .date-picker-control:focus span, .date-picker-control:hover span, .date-picker-control:active span { outline: none; box-shadow: 0 0 5px rgba(40, 130, 170, 0.7); border-radius: 2px; } .date-picker-control:link, .date-picker-control:visited { position: relative; display: -moz-inline-box; border: 0 none; padding: 0; margin: 0 0 0 -16px; background-color: transparent; background-image: url(../img/asistentes/datepicker/datepicker-normal.png); background-repeat: no-repeat; background-position: 0 0px; background-size: 16px; height: 16px; width: 16px; line-height: 1; cursor: pointer; visibility: visible; text-decoration: none; vertical-align: text-top; resize: none; } /* IE6 & 7 fed "normal" png images */ .oldie .date-picker-control:link, .oldie .date-picker-control:visited { /* IE7 gets a non-base64 encoded image sprite of the base64 encoded image declared above. That's all you have to do for IE7 support as it inherits the background-position declarations used to reposition the sprite */ *background-image: url(../img/asistentes/datepicker/datepicker-normal.png); /* IE6 gets the filter treatment and an individual image for each animation state. This pattern is repeated for all other image-based rules within the stylesheet */ _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='../img/asistentes/datepicker/datepicker-normal.png'); } /* If the datepicker has a valid date then use a different icon for the activation button to let the user know. It's a little detail but it's the little things in life etc */ .date-picker-dateval:link, .date-picker-dateval:visited { background-image: url(../img/asistentes/datepicker/datepicker-selected.png); } /* Again, IE6 gets a "normal" png image from the server. Rinse, repeat. */ .oldie .date-picker-dateval:link, .oldie .date-picker-dateval:visited { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='../img/asistentes/datepicker/datepicker-selected.png'); } /* Hover states etc for the activation button */ .date-picker-button-active:link, .date-picker-button-active:visited, .date-picker-control:focus, .date-picker-control:hover, .date-picker-control:active { background-image: url(../img/asistentes/datepicker/datepicker-focused.png); } /* IE 6 activation button hover states */ .oldie .date-picker-button-active:link, .oldie .date-picker-button-active:visited, .oldie .date-picker-control:focus, .oldie .date-picker-control:hover, .oldie .date-picker-control:active { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='../img/asistentes/datepicker/datepicker-focused.png'); } /* Disabled activation button */ .date-picker-control-disabled:link, .date-picker-control-disabled:visited, .date-picker-control-disabled:hover, .date-picker-control-disabled:active { background-image: url(../img/asistentes/datepicker/datepicker-disabled.png); cursor: default; } /* IE 6 disabled activation button */ .oldie .date-picker-control-disabled:link, .oldie .date-picker-control-disabled:visited, .oldie .date-picker-control-disabled:hover, .oldie .date-picker-control-disabled:active { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='../img/asistentes/datepicker/datepicker-disabled.png'); } .date-picker-control-disabled:hover span, .date-picker-control-disabled:active span { box-shadow:none !important; } /* Feed IE6 the following rule, IE7 should handle the min-width declared previously. */ .oldie .date-picker-control { _width:16px; } /* IE, older Safari & Opera. Seperate CSS rule seems to be required. */ .date-picker-control { display: inline-block; } /* Default datepicker "button" styles */ .date-picker th span { display: block; padding: 0; margin: 0; text-align: center; line-height: 1em; border: 0 none; background: transparent; font-weight: bold; cursor: pointer; } /* The "month, year" display */ .date-picker .month-display, .date-picker .year-display { display: inline; text-transform: uppercase; letter-spacing: 1px; font-weight: normal; font-size: 1.2em; } /* Generic button class for Next & Previous (both month & year) buttons */ .date-picker .prev-but, .date-picker .next-but { font-weight: normal; font-size: 2.4em; font-family: georgia, times new roman, palatino, times, bookman, serif; cursor: pointer; } .date-picker .prev-but, .date-picker .next-but, .date-picker .today-but { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /* Hover effect for Next & Previous (month, year) buttons */ .date-picker .prev-but:hover, .date-picker .next-but:hover, .date-picker .today-but:hover { color: #a84444; } .date-picker .prev-but:hover, .date-picker .next-but:hover { /* Uncomment this if you want a scale effect... -webkit-transform:scale(1.6); -moz-transform:scale(1.6); -ms-transform:scale(1.6); -o-transform:scale(1.6); transform:scale(1.6); text-shadow:0 2px 1px rgba(0,0,0,.4); */; } /* Today button */ .date-picker .today-but { text-align: center; margin: 0 auto; font-weight: normal; font-size: 1em; width: 100%; text-decoration: none; padding-top: 0.3em; text-transform: uppercase; vertical-align: middle; cursor: pointer; } /* Disabled buttons */ .date-picker-disabled .prev-but, .date-picker-disabled .next-but, .date-picker-disabled .today-but, .date-picker-disabled .prev-but:hover, .date-picker-disabled .next-but:hover, .date-picker-disabled .today-but:hover, .date-picker .prev-but.fd-disabled:hover, .date-picker .next-but.fd-disabled:hover, .date-picker .fd-disabled, .date-picker .fd-disabled:hover { color: #aaa; cursor: default !important; opacity: 1; } .date-picker .prev-but.fd-disabled:hover, .date-picker .next-but.fd-disabled:hover { /* Uncomment this if you have uncommented the "scale" rules above -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); */ text-shadow: 0 -1px 1px rgba(255,255,255,.8); } /* The gradient background image */ .date-picker table, .date-picker td, .date-picker tbody th, .date-picker .day-disabled, .date-picker .date-picker-hover.day-disabled, .date-picker .date-picker-unused, .date-picker .month-out { background-color: #fff; background-image: url(../img/asistentes/datepicker/datepicker-gradient.gif); background-repeat: repeat-x; background-position: 0 0; } .oldie .date-picker table, .oldie .date-picker td, .oldie .date-picker tbody th, .oldie .date-picker .day-disabled, .oldie .date-picker .date-picker-hover.day-disabled, .oldie .date-picker .date-picker-unused, .oldie .date-picker .month-out { *background-image: url(../img/asistentes/datepicker/datepicker-gradient.gif); /* Remove from IE6 as it has a bug that never caches images on dynamically created elements which results in one http request being made for each cell of each table rendered by the script. */ _background-image: none; } .date-picker table { table-layout: auto; empty-cells: show; border-spacing: 2px; border-collapse: separate; position: relative; margin: 0; padding: 0; border: 1px solid #ccc; background-position: 0 -20px; text-align: center; padding: 0.3em; z-index: 2; width: auto; height: auto; color: #555; font-size: 1em; border-radius: 0.8em; box-shadow: 0px 0px 5px #aaa; } /* Common TD & TH styling */ .date-picker td, .date-picker tbody th { border: 0 none; padding: 0; text-align: center; vertical-align: middle; cursor: pointer; background-position: 0 -35px; width: 3em; height: 3em; overflow: hidden; outline: transparent none 0px; border: 1px solid #ccc; text-transform: none; font-weight: normal; text-shadow: 0 1px #fff; border-radius: 2px; } .date-picker th { border: 0 none; padding: 0; font-weight: bold; color: #333; text-align: center; vertical-align: middle; text-transform: none; background: none; } .date-picker .date-picker-week-header { border: 1px solid #dcdcdc; font-style: oblique; background: transparent; cursor: default; } .date-picker .date-picker-thead .date-picker-week-header { border: 0 none; cursor: help; } /* The "mon tue wed etc" day header styles */ .date-picker .date-picker-day-header { cursor: help; border: 0 none; padding: 0 0 0.2em 0; text-transform: lowercase; height: auto; } /* tfoot status bar */ .date-picker .date-picker-statusbar { cursor: default; font-weight: normal; text-transform: uppercase; letter-spacing: 0.1em; border: 0 none; background: #fff; height: 2.8em; } /* TD cell that is _not_ used to display a day of the month */ .date-picker .date-picker-unused { border-color: #dcdcdc; cursor: default !important; background-position: 0 -25px; } /* The TH cell used to display the "month, year" title */ .date-picker tr { background: none !important; } .date-picker .date-picker-title { width: auto; height: auto; padding: 0.4em 0; } /* The "todays date" cell style */ .date-picker .date-picker-today { background: #fff url(../img/asistentes/datepicker/datepicker-today.gif) no-repeat 0 0; } .oldie .date-picker .date-picker-today { *background: #fff url(../img/asistentes/datepicker/datepicker-today.gif) no-repeat 0 0; } .date-picker .month-out.date-picker-highlight { color: #b87676; } /* The "highlight days" style */ .date-picker .date-picker-highlight { color: #a86666; } /* The "active cursor" style */ .date-picker td { /* Uncomment this if you want a transition on the cursor cells scale effect -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; */ } /* Keyboard users get a scaled cursor. webKit exhibits buggy behaviour when scaling TD cells so commented out until I find a curious CSS based fix. */ .date-picker-focus .date-picker-hover { /* -webkit-transform:scale(1.25); */ -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } .date-picker .date-picker-hover, .date-picker .month-out.date-picker-hover { background: #fff url(../img/asistentes/datepicker/datepicker-cursor.jpg) no-repeat 0 0; cursor: pointer; border-color: rgb(100,130,170) !important; border-color: rgba(100,130,170,.7) !important; color: rgb(100,130,170); text-shadow: 0px 1px 1px #fff; box-shadow: 0 0 6px rgba(100,130,170,.6); } .oldie .date-picker .date-picker-hover, .oldie .date-picker .month-out.date-picker-hover { *background: #fff url(../img/asistentes/datepicker/datepicker-cursor.jpg) no-repeat 0 0; } /* The "disabled days" style */ .date-picker .day-disabled { color: #888; cursor: default; text-decoration: line-through; background-position: 0 -15px; } .date-picker .month-out { border-color: #ddd; border-color: rgba(220,220,220,0.8); color: #aaa; background-position: 0 -25px; } /* The "selected date" style - color changed below also */ .date-picker .date-picker-selected-date { border-color: #888 !important; border-color: rgba(7,7,7,.6) !important; } /* The date "out of range" style */ .date-picker .out-of-range, .date-picker .not-selectable { color: #ccc; font-style: oblique; background: #fcfcfc; cursor: default; } /* Week number "out of range" && "month-out" styles */ .date-picker th.month-out, .date-picker th.out-of-range { color: #aaa; font-style: oblique; background: #fcfcfc; } /* Week numbers "out of range" */ .date-picker .out-of-range { opacity: 0.6; } /* Used when the entire grid is full but the next/prev months dates cannot be selected */ .date-picker .not-selectable { opacity: 0.8; } .oldie .date-picker .out-of-range { filter: alpha(opacity=60); } .oldie .date-picker .not-selectable { filter: alpha(opacity=80); } .date-picker tr { display: table-row; } .date-picker sup { font-size: 0.86em; letter-spacing: normal; text-transform: none; height: 0; line-height: 1; position: relative; top: -0.2em; vertical-align: baseline !important; vertical-align: top; } .date-picker .date-picker-day-header, .date-picker .month-display, .date-picker .year-display { text-shadow: 0px 1px 1px #fff; } .date-picker .month-display, .date-picker .year-display { cursor: default; } .date-picker td:focus, .date-picker .date-picker-hover { overflow: hidden; -moz-outline: 0 none; outline: 0 none; -o-highlight: 0 none; } /* The "pulse" animation on focused button and datepicker cursor */ .date-picker-focus .date-picker-hover, .date-picker-control:focus span { -webkit-animation: fd-dp-pulse 2s infinite; -moz-animation: fd-dp-pulse 2s infinite; -ms-animation: fd-dp-pulse 2s infinite; -o-animation: fd-dp-pulse 2s infinite; } /* The "selected date" style */ .date-picker .date-picker-selected-date { color: #333; color: rgba(3,3,3,.8); font-weight: bold; font-size: 1.2em; width: 2.4em; height: 2.4em; } /* Remove the box-shadow for the inline datepickers */ .static-datepicker table { box-shadow: 0 0 0 transparent; } .date-picker-focus table { border-color: #999; border-color: rgba(153,153,153,.8); box-shadow: 0px 0px 5px #aaa; } /* Draggable datepickers */ .date-picker .drag-enabled, .date-picker .drag-enabled span { cursor: move; } /* Disabled datePicker */ .date-picker-disabled table { opacity: .8 !important; } .oldie .date-picker-disabled table { filter: alpha(opacity=80); } .date-picker-disabled, .date-picker-disabled td, .date-picker-disabled th, .date-picker-disabled th span { cursor: default !important; } .date-picker-disabled .prev-but:hover, .date-picker-disabled .next-but:hover { /* Uncomment this if you have used the previous scale rules previously declared within the file (for the prev-but and next-but classes) -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); */ text-shadow:none; } body.fd-drag-active { -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; } /* Glow effect for the focused (keyboard active) cursor cell and popup datepickers activation button */ @-webkit-keyframes fd-dp-pulse { 0% { box-shadow:0 0 4px rgba(100, 130, 170, 0.5); } 20% { box-shadow:0 0 4px rgba(70, 130, 170, 0.6); } 40% { box-shadow:0 0 5px rgba(40, 130, 170, 0.7); } 60% { box-shadow:0 0 6px rgba(10, 130, 170, 0.8); } 80% { box-shadow:0 0 5px rgba(40, 130, 170, 0.7); } 100% { box-shadow:0 0 4px rgba(70, 130, 170, 0.6); } } @-moz-keyframes fd-dp-pulse { 0% { box-shadow:0 0 4px rgba(100, 130, 170, 0.5); } 20% { box-shadow:0 0 4px rgba(70, 130, 170, 0.6); } 40% { box-shadow:0 0 5px rgba(40, 130, 170, 0.7); } 60% { box-shadow:0 0 6px rgba(10, 130, 170, 0.8); } 80% { box-shadow:0 0 5px rgba(40, 130, 170, 0.7); } 100% { box-shadow:0 0 4px rgba(70, 130, 170, 0.6); } } @-ms-keyframes fd-dp-pulse { 0% { box-shadow:0 0 4px rgba(100, 130, 170, 0.5); } 20% { box-shadow:0 0 4px rgba(70, 130, 170, 0.6); } 40% { box-shadow:0 0 5px rgba(40, 130, 170, 0.7); } 60% { box-shadow:0 0 6px rgba(10, 130, 170, 0.8); } 80% { box-shadow:0 0 5px rgba(40, 130, 170, 0.7); } 100% { box-shadow:0 0 4px rgba(70, 130, 170, 0.6); } } @-o-keyframes fd-dp-pulse { 0% { box-shadow:0 0 3px rgba(100, 130, 170, 0.55); } 20% { box-shadow:0 0 4px rgba(70, 130, 170, 0.6); } 40% { box-shadow:0 0 5px rgba(40, 130, 170, 0.65); } 60% { box-shadow:0 0 6px rgba(10, 130, 170, 0.7); } 80% { box-shadow:0 0 5px rgba(40, 130, 170, 0.65); } 100% { box-shadow:0 0 4px rgba(70, 130, 170, 0.6); } }