/**
 * Containers
 */

div.diagram {
    margin-top: initial;
    margin-right: 5px;
}

div.diagram div.body {
    margin: 0px;
    background: white;
    color: black;
    border: 2px solid #348E82;
    line-height: 20px;
    width: 170px;
    z-index: 20;
    float: left;
    position: absolute;
    box-shadow: 2px 2px 5px #aaa;
   -o-box-shadow: 2px 2px 5px #aaa;
   -webkit-box-shadow: 2px 2px 5px #aaa;
   -moz-box-shadow: 2px 2px 5px #aaa;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

div.diagram div.body:hover {
    box-shadow: 2px 2px 5px #444;
   -o-box-shadow: 2px 2px 5px #444;
   -webkit-box-shadow: 2px 2px 5px #444;
   -moz-box-shadow: 2px 2px 5px #444;
    opacity: 0.95;
    filter: alpha(opacity=95);
}

div.diagram div.title {
   width: 100%;
   height: 20px;
   background: #348E82;
   color: white;
   font-weight: bold;
   text-align: center;
   padding-top: 2px;
   line-height: 150%;
   cursor: move;
   font-size: 12px;
   overflow: hidden;
}

div.diagram div.fieldsContainer {
/*    border-top: 1px dashed #99999D;*/
    height: 95px;
    overflow: auto;
}

div.diagram div.noOverflow {
/*    border-top: 1px dashed #99999D;*/
    overflow: none;
}

option.field,div.diagram div.field {
    color: #99999D;
    height: 20px;
    font-size: 12px;
    padding: 2px 5px 2px 5px;
    overflow: hidden;
}

option.primary,div.diagram div.primary {
    font-weight: bold;
    background: url("../img/key.gif") no-repeat center right #eee;
}

option.foreign,div.diagram div.foreign {
    font-style: italic;
    background: url("../img/right_arrow.gif") no-repeat scroll right center #FAFAFA;
    cursor: pointer;
}

option.many,div.diagram div.many {
    font-style: italic;
    text-decoration: underline;
    background: url("../img/right_arrow_red.gif") no-repeat scroll right center #FAFAFA;
    cursor: pointer;
}

div.diagram #diagramContainer {
/*    background-color: #EEE0FE;*/
    border: 1px dashed #EEE0FE;
    float: left;
    height: 300px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    overflow: auto;
    position: relative;
    width: 100%;
    background: url(../img/grid.jpg) scroll left top #FAFAFA;
    margin-bottom: 0px;
    height: 565px;
}

div.diagram #diagramBoxAnchor {
    position: relative;
    float: left;
    border: 1px #eee dashed;
    left: 500px;
}

div.diagram .resizehandle {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 10px;
   height: 10px;
   cursor: se-resize;
}

.inline-deletelink {
    float: right;
    text-indent: -9999px;
    background: transparent url(../img/inline-delete.png) no-repeat;
    width: 15px;
    height: 15px;
    border: 0px none;
    outline: 0;
}

.inline-morelink {
    float: right;
    text-indent: -9999px;
    background: transparent url(../img/inline-more.png) no-repeat;
    width: 15px;
    height: 15px;
    border: 0px none;
    outline: 0;
}

div.diagram .connection {
    padding: 2px;
    text-align: center;
    color: #AEAA78;
    border: 1px solid #AEAA78;
    opacity: 0.8;
    filter: alpha(opacity=80);
    background-color: white;
    z-index: 1;
    font-size: 12px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis; /* or "clip" */
    max-width: 125px;
}

div.diagram .connection:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    box-shadow: 2px 2px 5px #aaa;
   -o-box-shadow: 2px 2px 5px #aaa;
   -webkit-box-shadow: 2px 2px 5px #aaa;
   -moz-box-shadow: 2px 2px 5px #aaa;
    max-width: inherit;
    z-index: 100;
}
