[Plugin: All-in-One Event Calendar] Tweaking the widget (Colors, transparency, …)

Great plug-in but wanted it to integrate more in the color scheme of my website. Already saw several hints towards tweaking but not conclusive.

I’m still a CSS novice, so learning, but like to share my tweaks with you all. If it can be improved, share it.

Make the following changes in the general.css (Vortex)
Hope it makes sense.

.ai1ec-agenda-widget-view
add: background-color: transparent! important;

important to override in .thenly
background-color: #fff;

.ai1ec-agenda-widget-view .ai1ec-event a
background: #fff; > #333;
border: 1px solid #d4d4d4 > #444;
color: #507295; > #fff

.ai1ec-agenda-widget-view .ai1ec-event a:hover
border-color: #aeaeae; > #aaa /* Only border lights up when hovering over */
remove: color: #354c63; /* Text stays white */

/* Same color pattern as the 2 entries above */
.ai1ec-agenda-widget-view .ai1ec-event.ai1ec-allday a
background: #507295; > #333
border: 1px solid transparent; > #444

.ai1ec-agenda-widget-view .ai1ec-event.ai1ec-allday a:hover
background: #354c63; > #333
add: border: 1px solid #AAA;

.thenly .btn (1137) /* Calendar button, change Text color */
color: #333; > #667! important; /* to override #footer a #ccc in style.css:2625 */

.ai1ec-agenda-widget-view .ai1ec-date
remove: all background entries so no gradient is shown but underlying background
remove: border-top: 1px solid #e5e5e5!important; /* no line above calendar entry */
/* Maybe not remove border-top but use transparant to create space in IE */

.ai1ec-agenda-widget-view h3.ai1ec-date-title
border: 2px solid #8ba5c0; > #d12d37 /* Choose any color, eg site color */

.ai1ec-agenda-widget-view .ai1ec-month
background: #8ba5c0; > #d12d37 /* Choose same color as previous entry */

http://wordpress.org/extend/plugins/all-in-one-event-calendar/