/*
The overall canvas: added in fnclient-0.5.0 to provide a canvas works space to be able to place
controls outside of image, and also one of: container-inactive container-active
*/



.fn-canvas { position: relative; border: 0px solid #ddd;}

/*
The overall container: always has class="fn-container", and also one of:
container-inactive container-active
*/

.fn-container { position: relative;}
.fn-container img { border-width: 0;}
.fn-view-image-link {	display: block;	margin-top: 10px;	text-align: left;}
#fn-modaldialog {	position: absolute;	background-color: #fddddd;	height: 20px;	width: 150px;	right: 0px;	top: 0px;	color: black;
	padding-left: 4px;}
/* Note areas - a separate class is applied to those being edited. */

.fn-area { position: absolute; background: url(artwork/transparent.gif); cursor: pointer;}
#fn-area-new{ border: 2px dashed #fff;}
.fn-container-active .fn-area { visibility: inherit;}
.fn-container-inactive .fn-area { visibility: hidden;}
.fn-area-editing { position: absolute; visibility: visible; background: url(artwork/transparent.gif); border: 1px dashed #FFFFFF; cursor:  pointer;
}

/* Notes themselves. */
.fn-note { position: absolute; left: 0%; top: 100%; width: 150px; visibility: hidden; padding: 4px; margin-top:4px; 
 background-color: #fff; border:#ccc solid 1px; z-index:10;}
.fn-note span { display: block; margin-top: 2px; text-align: left; line-height: 1em;}
.fn-note-title { margin-bottom: 1px; font-size: 110%; font-weight: bold; color: #000; text-transform: capitalize;}
.fn-note-content { color: #666;}
.fn-note-author { font-size: 10px; text-align: right; color: #aaa;}




/* Note drag/resize UI */
.dragresize { position: absolute; width: 5px; height: 5px; font-size: 1px; background: white; border: 1px solid black;}
.dragresize-tl { top: -8px; left: -8px; cursor: nw-resize;}
.dragresize-tm {top: -8px; left: 50%; margin-left: -4px; cursor: n-resize;}
.dragresize-tr { top: -8px; right: -8px; cursor: ne-resize;}
.dragresize-ml { top: 50%; margin-top: -4px; left: -8px; cursor: w-resize;}
.dragresize-mr { top: 50%; margin-top: -4px; right: -8px; cursor: e-resize;}
.dragresize-bl { bottom: -8px; left: -8px; cursor: sw-resize;}
.dragresize-bm { bottom: -8px; left: 50%; margin-left: -4px; cursor: s-resize;}
.dragresize-br { bottom: -8px; right: -8px; cursor: se-resize;}

/* Control buttons. */
.fn-controlbar { position: relative; height: 40px; z-index: 1;	}
.fn-controlbar-inactive { background: transparent; width:100%;}
.fn-controlbar-active {width:104%;
margin-left:-5px;}
.fn-controlbar span { position: relative; visibility: hidden; cursor: pointer;}
.fn-controlbar-active span { visibility: inherit;}
/*
span.fn-controlbar-toggle-inactive {background-image: url(artwork/toggle-inactive.gif);}
span.fn-controlbar-toggle-active { background-image: url(artwork/toggle-active.gif);}
span.fn-controlbar-add-inactive { background-image: url(artwork/add-inactive.gif);}
span.fn-controlbar-add-active {  background-image: url(artwork/add-active.gif);}
span.fn-controlbar-edit-inactive {background-image: url(artwork/edit-inactive.gif);}
span.fn-controlbar-edit-active {  background-image: url(artwork/edit-active.gif);}
span.fn-controlbar-del-inactive { background-image: url(artwork/del-inactive.gif);}
span.fn-controlbar-del-active { left: 121px; top: -5px; width: 62px; height: 20px; background-image: url(artwork/del-active.gif);}
span.fn-controlbar-credits { left: 233px; top: -1px; width: 77px; height: 20px; background-image: url(artwork/fncredits.gif);}
span.fn-controlbar-logo {  visibility: visible;  right: 2px;  width: 20px;  background-image: url(artwork/fnlogo.gif); }
*/
/* Editing UI */


.fn-editbar { position: absolute; left: 0px; top: 100%; z-index: 100; background-color: #eee; font-size: 12px; padding:0px; border:1px solid #333;}
.fn-editbar-inactive { visibility: hidden;}
.fn-editbar-active { visibility: inherit;}
.fn-editbar-fields { left: 0px; top: 100%; z-index: 100; width: 100%; font-size: 12px;}
.fn-editbar label {}
.fn-editbar-fields p { font-weight: bold; text-align: left; display: block;}

.fn-editbar input { font-weight: normal; font-weight: bold;  }
.fn-editbar-content { width: 90%; height: 3em; font-family: arial, helvetica, sans-serif; font-size: 9pt;
}

.fn-editbar span { position: relative; visibility: visible; cursor: pointer; font-size:16px!important}
.fn-editbar-active span { visibility: inherit;}
span.fn-editbar-ok {  -moz-border-radius:2px; margin-bottom:5px; border-radius:2px; height:1.4em; border-color:none; cursor:pointer; background:#84C1FF; color:#FFFFFF!important; padding:0 5px 0 5px; display:inline-block; line-height:1.4em; border:0; visibility:inherit;}
span.fn-editbar-cancel { -moz-border-radius:2px; margin-bottom:5px; border-radius:2px; height:1.4em; border-color:none; cursor:pointer; background:#84C1FF; color:#FFFFFF!important; padding:0 5px 0 5px; display:inline-block; line-height:1.4em; border:0; visibility:inherit;}