styles.css

.previewNote { left:12px; top:38px; z-index:1; }
.buttonGroup { margin-top: 30px; width:310px; }
.clear { clear:both; }

#noteDialog { display:none; background-color: #fff; }

.flowboard_zone{

    height: 700px;
    border: 1px solid #ccc;
    float:left;
    text-align: center;
    font-weight: bold;
    overflow: hidden;

}

.note{
    height:100px;
    padding:5px;
    width:100px;
    position:absolute;
    overflow:hidden;
    cursor:move;
    line-height: 16px;
    font-weight: bold;

    font-family: Arial,Verdana,sans-serif;
    font-size:12px;

    -moz-box-shadow: 5px 5px 5px #aaa;
    -webkit-box-shadow: 5px 5px 5px #aaa;
    box-shadow: 5px 5px 5px #ccc;
}

}

.x_note{
    height:100px;
    padding:5px;
    width:100px;
    position:absolute;
    overflow:hidden;
    line-height: 16px;
    font-weight: bold;

    font-family: Arial,Verdana,sans-serif;
    font-size:12px;

    /* 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;
}

.note .x_note .body { width:80px;}

#noteDialog .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;	
}

.purple{
	background-color:#ff00ff;
	border:1px solid #cc00cc;	
}

.orange{
	background-color:#ff9900;
	border:1px solid #cc6600;	
}

.pink{
	background-color:#ff99cc;
	border:1px solid #cc66aa;	
}

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

#note-post { margin-left: 20px; }
#note-import { margin-left: 20px; }
#note-close { margin-left: 20px; }
#note-submit{ margin: 20px auto; }

.note .time {
    bottom:4px;
    color:#666666;
    font-family:Arial,Verdana,sans-serif;
    font-size:10px;
    position:absolute;
    overflow: hidden;
}

/* Green button class: */
a.add_new_note {
	color:black;
	font-weight:bold;
	height:24px;
	padding: 2px;
	text-align:center;
	width:24px;
    background-color: #FDFB8C;
    text-decoration: none;
    border:1px solid #DEDC65;
}

.ui-state-active{
    background-color: #eee;
}

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

.flowboardmain{
	/* Contains all the notes and limits their movement: */
	margin:0 auto;
	position:relative;
	width:100%;
	min-height:700px;
	z-index:10;
    background-repeat: no-repeat;
    background-size: contain;
}

#noteData{
	/* The input form in the pop-up: */
	height:400px;
	margin:0px 0px 0px 130px;
	width:315px;
}

.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:12px;
	height:60px;
	padding:5px;
	margin-bottom:10px;
	line-height: 16px;
}

.pr-body{
    width: 300px;
}

.pr-timeleft{
    width:40px;
}

.pr-estimate{
    width:40px;
}

.pr-status{
    width:300px;
    height: auto;
}

.pr-author{
    width:300px;
}

.pr-postcontent{
    width:300px;
}

.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;
}



.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

.ui-widget { }
.ui-widget .ui-widget { }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {  }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { background: #FDFB8C 50% 50% repeat-x; color: #000; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }


.ui-dialog { position: absolute; padding: 10px; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
.ui-dialog .ui-dialog-titlebar-close { display:none; color:#000; position: absolute; right: 0px; top: 0px; width: 19px; margin: -19px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }

.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-widget-overlay { background: #666666 url(img/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .70;filter:Alpha(Opacity=50); }
.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 2px; background: #000000 url(img/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }