/*
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 #DDDDDD;
 /*background-color: #eef5f9;
 border-left: 1px solid #d5e6ee;
 border-top: 1px solid #d5e6ee;
 border-right: 1px solid #d5e6ee; */
 top:0px; /* Was 50px */
}

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

.fn-container {
 position: absolute;
/* left: 40px;*/
}

.fn-container img {
 border-width: 0;
}


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

.fn-area {
 position: absolute;
 background: url(../images/fotonotes/transparent.gif);
 border: 2px solid;
 background: rgba(255, 255, 255, .5);
 filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#66FFFFFF);
}

#fn-area-new{
 border: 2px dotted #FF0000;
}

.fn-container-active .fn-area {
 display:block;
 /* visibility: inherit; */
}

.fn-container-inactive .fn-area {
 visibility: hidden; 
 /* display:none; */
}

.fn-area-editing {
 position: absolute;
 /* display:inline; */
 visibility: visible;
 background: url(../images/fotonotes/transparent.gif);
 border: 2px dashed #FFFFFF;
 cursor: crosshair;
}


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

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

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

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


/* Notes themselves. */

.fn-note {
 position: absolute;
 left: 0%;
 top: 100%;
 width: 150px;
 visibility: hidden;
 /* display:none; */
 padding: 4px;
 background-color: #FFEECC;
 border: 1px solid #FF0000;
 z-index: 2;
 -moz-border-radius: 7px; /* Non-standard */
}
.fn-note span {
 display: block;
 margin-top: 2px;
 text-align: left;
 line-height: 1em;
 z-index: 2; 
}
.fn-note-title {
 margin-bottom: 1px;
 font-size: 110%;
 font-weight: bold;
 color: #666633;
 z-index: 2; 
}
.fn-note-content {
 color: #000000;
 z-index: 2; 
}
.fn-note-author {
 font-size: 80%;
 font-style: italic;
 text-align: right;
 color: #333300;
 z-index: 2; 
}

.fn-note-border {
 z-index: 2; 
}

.fn-area-editing .fn-close {
    display:none;
}

.fn-area .fn-close {
    position:absolute;
    visibility:hidden;
    top:-12px;
    right:-12px;
    padding:4px;
    background-image: -moz-linear-gradient(top,#fff,#ddd);
    background-image: -ms-linear-gradient(top,#fff,#ddd);
    background-image: -o-linear-gradient(top,#fff,#ddd);
    background-image: -webkit-linear-gradient(top,#fff,#ddd);
    background-image: linear-gradient(to bottom,#fff,#ddd);
    border-radius:50%;
    box-shadow:0px 1px 4px #888;
}