+input.stickynote { display:none; }
+input.stickynote + .stickynote {
+ position: fixed;
+ background-color: #FF8;
+ top: 4em; bottom: 4em;
+ left: -4.5em; width: 5em;
+ padding: 1ex;
+ max-height: 90%;
+ z-index: 2;
+}
+input.stickynote + .stickynote > * { display: none; }
+input.stickynote + .stickynote > label {
+ position: absolute;
+ top: 0; bottom: 0;
+ display: block;
+ text-align: right;
+ font-weight: bold;
+}
+input.stickynote + .stickynote:hover {
+ left: -1ex;
+}
+input.stickynote:checked + .stickynote {
+ width: auto;
+ left: 1em;
+ right: 1em;
+}
+input.stickynote:checked + .stickynote > textarea {
+ display: block;
+ position: absolute;
+ left; 0; right: 0; bottom: 0; top: 0;
+ width: 100%; height: 100%;
+ background-color: #FF8;
+ padding: 2em 1em;
+}
+input.stickynote:checked + .stickynote > button {
+ display: block;
+ position: absolute;
+ right: .5ex; bottom: .5ex;
+ z-index: 2;
+}
+input.stickynote:checked + .stickynote > label {
+ display: block;
+ position: static;
+ font-size: 0;
+}
+input.stickynote:checked + .stickynote > label:before {
+ position: absolute;
+ font-size: initial;
+ content: "x";
+ top: .5ex; right: .5ex;
+ padding: .125ex .75ex;
+ background-color: #000;
+ color: #FFF;
+ border-radius: 1ex;
+ z-index: 2;
+}
+
+