/******* BEGIN: Including fnclient2.css *******/
<%@ include file="/WEB-INF/inc/CssTop.css" %>
/*
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 {} /*hack because include line above is killing first css rule*/
.fn-canvas {
    position: relative;
    top: 0px;
    left: 0px;
    border: 0px;
    padding: 0px;
    margin: 0px;
    text-align: right;
}

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

.fn-container {
	text-align: left;
    position: absolute;
    left:10px;
}

.fn-container img {
	/**/
}

/* Note areas - a separate class is applied to those being edited. */

.fn-area {
 position: absolute;
 background: url(http://s.bebo.com/img/trans.gif);
 border: 0px solid #222;
}

#fn-area-new{
 background: url(http://s.bebo.com/img/trans.gif);
 border: 1px dotted #06c;
}

.fn-container-active .fn-area {
 visibility: inherit;
}

.fn-container-inactive .fn-area {
 visibility: hidden;
}

.fn-area-editing {
 position: absolute;
 visibility: visible;
 border: 1px dashed #FFFFFF;
}


.fn-area-innerborder-left {
 position: absolute;
 top: 0px;
 left: 0px;
 border-left: 0px solid #fff;
 width: 0px;
 height: 100%;
}

.fn-area-innerborder-top {
 position: absolute;
 top: 0px;
 left: 0px;
 border-top: 0px solid #fff;
 width: 100%;
 height: 0px;
}

.fn-area-innerborder-right {
 position: absolute;
 top: 0px;
 right: 0px;
 border-right: 0px solid #fff;
 width: 0px;
 height: 100%;
}

.fn-area-innerborder-bottom {
 position: absolute;
 left: 0px;
 bottom: 0px;
 border-bottom: 0px solid #fff;
 width: 100%;
 height: 0px;
}


/* Notes themselves. */

.fn-note {
 position: absolute;
 left: 25%;
 top: 100%;
 visibility: hidden;
 padding: 2px;
 *padding:0;
 background:url(http://s.bebo.com/img/opaque-50.png);
 _background:#000;
}
.fn-note span {
 margin-top: 2px;
 *margin:0;
 display: block;
 text-align: center;
}
.fn-note-text {
 margin-bottom: 1px;
 font-size: 110%;
 font-weight: bold;
 color: #FFFFFF;
 white-space:nowrap;
}


/* 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: absolute;
 top: 0px;
 right: 0px;
 width:100%;
 height: 100%;
 z-index: 20;
 visibility: hidden;
 border: 0px;
}
.fn-controlbar-inactive {
 width: 0px;
 height: 0px;
}
.fn-controlbar-active {
 width: 100%;
 border: 0px solid red;
}

.fn-controlbar span {
 position: absolute;
 visibility: hidden;
 bottom: 2px;
 height: 11px;
 font-size: 1px;
 line-height: 1px;
 cursor: pointer;
}
.fn-controlbar-active span {
 visibility: inherit;
 border: 0px;
}

span.fn-controlbar-add-inactive {
 width: 100%;
 height: 100%;
 border: 0px solid green;
 cursor: crosshair;
  background-image: url(http://s.bebo.com/img/trans.gif);
}

span.fn-controlbar-add-active {
 left: 0px;
 top: -5px;
 width: 20px;
 height: 20px;
 background-image: url(http://s.bebo.com/img/trans.gif);
 border: 0px solid red;
}


/* Editing UI */


.fn-editbar {
 position: absolute;
 z-index: 40;
 background:url(http://s.bebo.com/img/opaque-50.png);
 _background:#282828;
 color: #FFFFFF;
 border: 1px solid black;
}

.fn-editbar-inactive {
 visibility: hidden;
}

.fn-editbar-active {
 visibility: inherit;
 /*padding-bottom: 3px;*/
}

.fn-editbar-fields {
 text-align: left;
 left: 0px;
 top: 100%;
 width: 222px;
 z-index: 100;
 padding: 5px;
}

.privacySettingDiv {
  display: none;
}
input.emailAddressForTagged {
  display: none;
}

.fn-friendemail {
/*   display: none; */
}	

.fn-editbar label {
 margin-top: 100px;
 margin-left: 5px;
 font-weight: bold;
}

.fn-editbar-fields p {
 font-weight: bold;
 text-align: left;
 display: block;
}
.fn-editbar-fields .text-input {
	display:block;
	clear:both;	
}
.fn-editbar-fields div.form-buttons {
	margin-top:3px;
	margin-bottom:0;	
}
.fn-editbar-content {
 width: 0%;
 height: 0;
 font-size: 0pt;
 cursor: text;
 border: 0px solid #ddd;
}
/*
.fn-editbar span {
 position: absolute;
 visibility: visible;
 top: 2px;
 height: 11px;
 font-size: 1px;
 line-height: 1px;
 cursor: pointer;
}

.fn-editbar-active span {
 visibility: inherit;
}
*/
span.fn-editbar-ok {
	  visibility: inherit;
 position: absolute;
 /*top: 18px;
 left: 68%;*/
}

span.fn-editbar-cancel {
 visibility: inherit;
  position: absolute;
 /*right: 2px;
 top: 18px;*/
}

div.emailWrapper {
  display: none;
}


/*
.fn-friends {
 position: absolute;
 top: 90px;
 visibility: inherit;
 width: 100%;
 height : 850px; 
 overflow : auto;
 background-color: #00ff00;
}

.fn-friend {
 position: relative;
 visibility: inherit;
 width: 90;
 font-size: 8px;
 background-color: #ff00ff;
}

.fn-button {
 align: left;
 width: 10%;
 background-color: #ffff00;
}
*/
/******* END: Including fnclient2.css *******/