.calendar-archives { position: relative; width: 100%; } .calendar-archives * { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; } .calendar-archives a { text-decoration: none; } .calendar-archives .archives-years { position: relative; overflow: hidden; } .calendar-archives .cal-nav { background: #EF9677; position: relative; width: 100%; height: 30px; margin-bottom: 1px; } .calendar-archives .cal-nav * { line-height: 30px; } .calendar-archives .cal-nav .prev-year, .calendar-archives .cal-nav .next-year { display: block; position: absolute; width: 30px; font-size: 18px; text-align: center; color: #fff; } .calendar-archives .cal-nav .prev-year:hover, .calendar-archives .cal-nav .next-year:hover { background: #86CAE9; color: #fff; } .calendar-archives .cal-nav .prev-year.disabled, .calendar-archives .cal-nav .next-year.disabled { opacity: .4; cursor: default; } .calendar-archives .cal-nav .prev-year.disabled:hover, .calendar-archives .cal-nav .next-year.disabled:hover { background: none; color: #fff; } .calendar-archives .cal-nav .prev-year { left: 0; border-right: 1px #fff solid; } .calendar-archives .cal-nav .next-year { right: 0; border-left: 1px #fff solid; } .calendar-archives .cal-nav .year-nav { position: absolute; width: 100px; left: 50%; margin-left: -50px; text-align: center; } .calendar-archives .cal-nav .year-nav:hover { background: #EA8462; } .calendar-archives .cal-nav .year-nav a.year-title { display: block; width: 100%; color: #fff; } .calendar-archives .cal-nav .year-nav .arrow-down { color: #fff; position: absolute; width: 20px; right: 0; top: 0; cursor: pointer; font-size: 10px; border-left: 1px solid #EF9677; font-family: Verdana, Arial, Helvetica, sans-serif; } .calendar-archives .cal-nav .year-nav .arrow-down:hover { background: #86CAE9; } .calendar-archives .cal-nav .year-nav .year-select { position: absolute; z-index: 99; display: none; width: 100%; background: #fff; -moz-box-shadow: 0 0 10px #000000; -webkit-box-shadow: 0 0 10px #000000; box-shadow: 0 0 10px #000000; top: 0; } .calendar-archives .cal-nav .year-nav .year-select .year { display: block; color: #86CAE9; } .calendar-archives .cal-nav .year-nav .year-select .year:hover { background: #86CAE9; cursor: pointer; color: #fff; } .calendar-archives .cal-nav .year-nav .year-select .year.selected { color: #fff; background: #F2C8BA; } .calendar-archives .archives-years { overflow: hidden; } .calendar-archives .archives-years .year { position: absolute; top: 0; left: 0; margin-left: -100%; width: 100%; z-index: 0; } .calendar-archives .archives-years .year .year-link { display: none; } .calendar-archives .archives-years .year.last { position: relative; } .calendar-archives .archives-years .year.current { margin-left: 0; z-index: 1; } .calendar-archives .archives-years .year .month { float: left; width: 25%; height: 50px; border-right: 1px #FFFFFF solid; border-bottom: 1px #FFFFFF solid; overflow: hidden; background: #86CAE9; position: relative; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; } .calendar-archives .archives-years .year .month a { display: block; margin: 0; padding: 0; width: 100%; height: 100%; color: #FFF!important; } .calendar-archives .archives-years .year .month .month-name { text-transform: capitalize; font-size: 16px; font-weight: 400; display: block; position: absolute; top: 6px; left: 8px; } .calendar-archives .archives-years .year .month .postcount { display: block; position: absolute; bottom: 6px; right: 6px; } .calendar-archives .archives-years .year .month .postcount .count-text { font-size: 9px; } .calendar-archives .archives-years .year .month:hover { background: #5ebce5; } .calendar-archives .archives-years .year .month.empty { color: #ccc; background: #f0f0f0; } .calendar-archives .archives-years .year .month.last { border-right: 0; }