body, h1, h2, h3, p, quote, small, form, input, ul, li, ol, label { /* Simple page reset */ margin: 0; padding: 0; }
body { /* Setting default text color, background and a font stack */ color: #555555; font-size: 14px; background: #fcfcfc; font-family: Arial, Helvetica, sans-serif; }

.note { height: 150px; padding: 10px; width: 150px; position: absolute; overflow: hidden; cursor: move; font-family: Trebuchet MS,Tahoma,Myriad Pro,Arial,Verdana,sans-serif; font-size: 22px; /* Adding a CSS3 shadow below the note, in the browsers which support it: */ -moz-box-shadow: 2px 2px 0 #DDDDDD; -webkit-box-shadow: 2px 2px 0 #DDDDDD; box-shadow: 2px 2px 0 #DDDDDD; }

#fancy_ajax .note { cursor: default; }

/* Three styles for the notes: */

.yellow { background-color: #FDFB8C; border: 1px solid #DEDC65; }

.blue { background-color: #A6E3FC; border: 1px solid #75C5E7; }

.green { background-color: #A5F88B; border: 1px solid #98E775; }

/* Each note has a data span, which holds its ID */
span.data { display: none; }

/* The "Add a note" button: */
#addButton { position: absolute; top: -70px; left: 0; }

/* Green button class: */
a.green-button, a.green-button:visited { color: black; display: block; font-size: 10px; font-weight: bold; height: 15px; padding: 6px 5px 4px; text-align: center; width: 60px; text-shadow: 1px 1px 1px #DDDDDD; background: url(../../images/fancybox/img/button_green.png) no-repeat left top; }

    a.green-button:hover { text-decoration: none; background-position: left bottom; }

.author { /* The author name on the note: */ bottom: 10px; color: #666666; font-family: Arial,Verdana,sans-serif; font-size: 12px; position: absolute; right: 10px; }

#main { /* Contains all the notes and limits their movement: */ margin: 0 auto; position: relative; width: 98%; z-index: 10; background: url(../../images/fancybox/img/add_a_note_help.gif) no-repeat left top; }

h3.popupTitle { border-bottom: 1px solid #DDDDDD; color: #666666; font-size: 24px; font-weight: normal; padding: 0 0 5px; }

#noteData { /* The input form in the pop-up: */ height: 200px; margin: 30px 0 0 200px; width: 350px; }

.note-form label { display: block; font-size: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 3px; }

.note-form textarea, .note-form input[type=text] { background-color: #FCFCFC; border: 1px solid #AAAAAA; font-family: Arial,Verdana,sans-serif; font-size: 16px; height: 60px; padding: 5px; width: 300px; margin-bottom: 10px; }

.note-form input[type=text] { height: auto; }

.color { /* The color swatches in the form: */ cursor: pointer; float: left; height: 10px; margin: 0 5px 0 0; width: 10px; }

#note-submit { margin: 20px auto; }

/* The styles below are only necessary for the demo page */

h1 { background: #f0f0f0; border-bottom: 1px solid #eaeaea; font-size: 1.5em; font-weight: normal; margin-bottom: 15px; padding: 15px; text-align: center; }

h2 { font-size: 0.9em; font-weight: normal; padding-right: 40px; position: relative; right: 0; text-align: right; text-transform: uppercase; top: -48px; }

a, a:visited { color: #0196e3; text-decoration: none; outline: none; }

    a:hover { text-decoration: underline; }

p.tutInfo { /* The tutorial info on the bottom of the page */ padding: 10px 0; text-align: center; position: fixed; bottom: 0px; background: #f0f0f0; border-top: 1px solid #eaeaea; width: 100%; z-index: 15; }

h1, h2, p.tutInfo { font-family: "Myriad Pro",Arial,Helvetica,sans-serif; }