main.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


#tdddApp{border-width:30px 30px 60px 30px;border-image:url("border.png") 30 30 60 30 stretch;-moz-border-image:url("border.png") 30 30 60 30 stretch; -webkit-border-image:url("border.png") 30 30 60 30 stretch;}
body {font-size: 62.5%; font-family: Helvetica, sans-serif; }
#tdddApp ul h2 {font-size: 2em; margin: 0.5em; text-align: center; color:black;  font-family:"Delius Unicase", cursive;}
#tdddApp ul li.sticky {position: relative; width: 10em; height: 10em; float: left; margin: 1em; padding: 0 0.6em 0.6em 0.6em; box-shadow: 2px 2px 7px rgba(33,33,33,.2);font-size: 1em;overflow-y:auto;overflow-x:hidden;}
li.ui-state-highlight {position: relative; width: 10em; height: 10em; float: left; padding: 0.6em; font-size: 1em; margin:1em; border: 0.2em dashed rgb(128,153,182);}
#todo-list, #doing-list, #done-list {width:33%; display: inline-block; min-height: 500px;height:100%}
#tdddApp>ul>li:nth-child(even){-o-transform:rotate(4deg); -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); }
#tdddApp>ul>li:nth-child(3n){-o-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg);}

#tdddApp ul li h3 {height:90%; font-size:1.8em; line-height:1.2em; font-family: "Handlee", cursive;}

.sticky .toolbar:hover .color-picker, .sticky .toolbar:hover .close{visibility: visible;}
.sticky .toolbar .color-picker, .sticky .toolbar .close{visibility: hidden;}
.toolbar .close a {float:right; font-size: 1.4em; text-decoration:none;opacity:0.6;filter:alpha(opacity=40);}
.toolbar { height:1em;}
.toolbar .color-picker {float:left; display: inline-block; height:0.6em;}
.color-picker li {float:left; margin-top: 2px; width:1em; height:0.6em; display:inline-block}
.color-picker li:hover {border-top:2px solid black; margin-top: 0px}
.color-picker li.yellow{background-color: #feea3d;}
.color-picker li.blue{background-color: #89f0ff;}
.color-picker li.green{background-color: #83fe83;}
.color-picker li.pink{background-color: #ffb2b2;}
.color-picker li.purple{background-color: #9bb6fe;}
.color-picker li.grey{background-color: #dadada;}
li.sticky textarea {width: 94%; height: 88%; margin-top:0.5em; border-color: #899BC1; resize:none; background-color: rgba(255,255,255,0.6);}

.sticky.yellow{background-color: #fef49c;}
.sticky.blue{background-color: #adf4ff;}
.sticky.green{background-color: #b2ffa1;}
.sticky.pink{background-color: #ffc7c7;}
.sticky.purple{background-color: #b6caff;}
.sticky.grey{background-color: #eeeeee;}

#tdddApp ul li.sticky:hover, #tdddApp ul li.sticky:focus{-moz-box-shadow:10px 10px 7px rgba(0,0,0,.3); -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.3); box-shadow:10px 10px 7px rgba(0,0,0,.3); -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); position:relative; z-index:5;}

.info, .info a{color:grey; text-align:right;}