@font-face { src: url(../web/open-sans/regular.ttf); font-family: 'Open-Sans-Regular'; } html { font-family: 'Open-Sans-Regular'; font-size: 15px; line-height: 1.4; color: #444; } body { margin: 0; font-size: 1em; } .wrapper { margin: 15px auto; max-width: 1100px; } .container-calendar { padding: 15px; max-width: 475px; margin: 0 auto; overflow: auto; } .button-container-calendar button { position: relative; cursor: pointer; display: inline-block; zoom: 1.5; background: #00a2b7; color: #fff; border: 1px solid #0aa2b5; border-radius: 4px; padding: 5px 10px; top: 10px; outline: none; } .table-calendar { border-collapse: collapse; width: 100%; padding: 0; border-top: 1px solid lightblue; } .table-calendar td, .table-calendar th { padding: 10px; text-align: center; vertical-align: top; } #monthHeader { text-transform: uppercase; color: #999; margin: 0; font-size: 24pt; } #yearHeader { margin: 0 0 10px; padding: 0 3px; font-size: 12pt; color: #999; } .date-picker { cursor: pointer; } .date-picker.selected { font-weight: bold; outline: 1px solid #00BCD4; } .date-picker.selected span { color: #00BCD4; } /* sunday */ .date-picker:nth-child(1), .red-text { color: red; } /* friday */ .date-picker:nth-child(6) { color: green; } #monthAndYear { text-align: center; margin-top: 0; } .button-container-calendar { position: relative; margin-bottom: 1em; overflow: hidden; clear: both; text-align: center; } #previous { float: left; } #next { float: right; } .footer-container-calendar { margin-top: 1em; border-top: 1px solid #dadada; padding: 10px 0; display: none; } .footer-container-calendar select { cursor: pointer; display: inline-block; zoom: 1; background: #ffffff; color: #585858; border: 1px solid #bfc5c5; border-radius: 3px; padding: 5px 1em; } #date-picked { text-align: center; color: #999; border-top: 1px solid lightblue; padding-top: 15px; font-size: 11pt; font-weight: bold; }