.wpd { position: absolute; z-index: 9999; width: 208px; padding: 5px; height: 221px; z-index: 9999; background: #efefef; -webkit-box-shadow: 0 0 10px #999; -moz-box-shadow: 0 0 10px #999; } .wpd .header { position: relative; margin: -5px -5px 3px -5px; } .wpd .header .next, .wpd .header .previous, .wpd .header .title{ display: block; white-space: nowrap; background: #efefef; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,.8); height: 22px; -moz-box-shadow: 0 0 1px 1px rgba(0,0,0,.1) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(0,0,0,.1) inset, 0 1px 0 rgba(0,0,0,.3); } .wpd .header .title { text-align: center; margin: 0px 33px; padding: 3px 0 2px; } .wpd .header .next{ padding: 1px 5px 1px 4px; } .wpd .header .previous{ padding: 1px 3px 1px 6px; } .wpd .header .disabled, .wpd .header .title.disabled:hover, .wpd .header .previous.disabled:hover, .wpd .header .next.disabled:hover{ color: #233610; background: #efefef; cursor: default; text-shadow: none; box-shadow: 0 0 1px 1px rgba(0,0,0,.1) inset, 0 1px 0 rgba(0,0,0,.3); } .wpd .header .next:hover, .wpd .header .previous:hover, .wpd .header .title:hover{ background-color: #ddd; } .wpd .header .next:active, .wpd .header .previous:active, .wpd .header .title:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; } .wpd .header .title:focus { outline: 0; background: #fafafa; } .wpd .header .titleText { font-weight: bold; font-size: 16px; } .wpd .header .next, .wpd .header .previous, .wpd .header .closeButton { position: absolute; width: 24px; text-align: center; padding-bottom:4px; top: 0px; cursor: pointer; font-weight: bold; font-size: 18px; } .wpd .header .previous { left: 0px; } .wpd .header .next { right: 0px; } .wpd .header .closeButton { display: none; right: 5px; } .wpd .header .upArrow{ font-size: 85%; vertical-align: 2px; padding-left: 5px; } .wpd .body { position: relative; top: 0px; left: 0px; width: 208px; height: 193px; overflow: hidden; } .wpd .time { width: 100%; height: 100%; } .wpd .time .hour, .wpd .time .separator, .wpd .time .minutes, .wpd .time .ampm { border: 1px solid #ccc; background: #fff; width: 50px; font-size: 32px; position: absolute; top: 50px; text-align: center; padding: 2px; line-height: 32px; height: auto; } .wpd .time .hour, .wpd .time .minutes, .wpd .time .ampm { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .wpd .time .hour { left: 10px; } .wpd .time .separator { background: transparent; border: 0; width: 10px; left: 71px; top: 60px; } .wpd .time .minutes { left: 90px; } .wpd .time .ampm { left: 150px; } .wpd .time .ok { position: absolute; top: 105px; width: 136px; left: 30px; font-size: 20px; } .wpd .days .day { float: left; cursor: pointer; text-align: center; padding-top: 4px; width: 27px; overflow: hidden; height: 21px; margin: 0 3px 3px 0; font-weight: bold; } .wpd .days .day0 { margin-right: 0; } .wpd .days .week5 .day { margin-bottom: 0; } .wpd .days .title { font-weight: 200; cursor: default; } .wpd .days .otherMonth { font-weight: normal; } .wpd .months .month { float: left; cursor: pointer; text-align: center; overflow: hidden; width: 69px; height: 31px; padding-top: 15px; margin: 0 3px 3px 0; font-size: 16px; } .wpd .months .month3, .wpd .months .month6, .wpd .months .month9, .wpd .months .month12 { margin-right: 0; width: 64px; } .wpd .months .month10, .wpd .months .month11, .wpd .months .month12 { margin-bottom: 0; } .wpd .years .year { float: left; cursor: pointer; text-align: center; padding-top: 11px; width: 50px; overflow: hidden; height: 25px; margin: 0 3px 3px 0; font-size: 16px; } .wpd .years .year3, .wpd .years .year7, .wpd .years .year11, .wpd .years .year15, .wpd .years .year19 { margin-right: 0; width: 47px; } .wpd .years .year16, .wpd .years .year17, .wpd .years .year18, .wpd .years .year19 { margin-bottom: 0; height: 26px; } .wpd .selected { background: #000 !important; color: #fff !important; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .wpd .unavailable { background: #edd !important; color: #b88 !important; cursor: default !important; } .wpd .days .week .day:hover, .wpd .months .month:hover, .wpd .years .year:hover { background: #fff !important; color: #000 !important; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }