@font-face {
    font-family: Pure;
    src: url(../../fonts/pure/fonts/Pure.svg) format('svg'),
    url(../../fonts/pure/fonts/Pure.woff) format('woff'),
    url(../../fonts/pure/fonts/Pure.eot) format('eot'),
    url(../../fonts/pure/fonts/Pure.ttf) format('ttf');
}

div.web_diagram_progress {
    position: absolute;
    height: 100%;
    background: #fff url('../../gfx/progress/spinner_white_32.gif') 50% 50% no-repeat;
    top: 0;
    width: 100%;
    z-index: 2000;
}


div.web_diagram_bordered {
    border: 1px solid #ddd;
}

div.web_diagram_adaptive,
div.web_diagram_adaptive div.web_diagram_drawing {
    height: 100%;
}

div.web_diagram_bar {
    height: 20px;
    border-bottom: 1px solid #eee;
    font-size: 0;
    background: #fafafa;
    position: absolute;
    z-index: 1;
}

div.web_diagram_bar span {
    border-right: 1px solid #eee;
    display: inline-block;
    height: 20px;
}

div.web_diagram_bar a {
    font-size: 14px;
    color: #666;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    line-height: 20px;
    text-decoration: none;
}

div.web_diagram_bar a:hover {
    background-color: #eee;
}

div.web_diagram_drawing {
    position: relative;
    overflow: hidden;
    height: 500px;
}

div.web_diagram_drawing_movable {
    cursor: move;
    cursor: all-scroll;
}

div.web_diagram_warning {
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    width: 100%;
}

div.web_diagram_warning div {
    position: absolute;
    top: 30%;
    width: 100%;
    text-align: center;
    color: #999;
}

div.web_diagram_warning h1 {
    font-weight: normal;
    margin: 0;
    font-size: 24px;
}

div.web_diagram_warning p {
    font-size: 14px;
    text-align: center;
}

/***************** Edges ****************/

span.web_diagram_edge_label {
    position: absolute;
    left: 0;
    top: 0;
    height: 11px;
    line-height: 11px;
    font-size: 14px;
    font-family: Arial;
    white-space: nowrap;
    color: #aaa;
    background: #fff;
    padding: 0 3px;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
}

div.web_diagram_hideedgelabels span.web_diagram_edge_label {
    display: none;
}

/****************** Shapes **************/


div.web_diagram_shape {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    position: absolute;
    padding: 5px;
    z-index: 2;
    top: 0;
    left: 0;
}

div.web_diagram_drawing_dragging,
div.web_diagram_drawing_dragging div.web_diagram_shape {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}

div.web_diagram_shape_selected {
    z-index: 3;
}

div.web_diagram_shape_hover {
    z-index: 4;
}


/****************** Icons **************/

div.web_diagram_icon {
    width: 16px;
    height: 16px;
    font-size: 0;
    background-position: 0 0;
}

div.web_diagram_icon span.web_icon {
    font-size: 16px;
    color: #678;
    width: 16px;
    height: 16px;
    display: inline-block;
}

div.web_diagram_icon strong {
    font-weight: normal;
    position: absolute;
    white-space: nowrap;
    width: 125px;
    overflow: hidden;
    margin-left: -72px;
    margin-top: 17px;
    font-size: 14px;
    color: #999;
    text-overflow: ellipsis;
    text-align: center;
    font-family: Arial;
}

div.web_diagram_icon strong span {
    background: #fff;
    padding: 0 3px;
    /*border-radius: 4px;*/
}

div.web_diagram_shape_dragging div.web_diagram_icon {
    background-position: 0 -16px;
}

div.web_diagram_shape_hover div.web_diagram_icon strong {
    color: #000;
}


div.web_diagram_shape_hover div.web_diagram_icon span.web_icon {
    color: #000;
}

div.web_diagram_shape_selected div.web_diagram_icon {
    width: 24px;
    height: 24px;
}

div.web_diagram_shape_selected div.web_diagram_icon span.web_icon {
    color: #0054a6;
    font-size: 24px;
    width: 24px;
    height: 24px;
    text-shadow: 0px 0 10px #fff, 0px 0 10px #fff, 0px 0 10px #fff, 0px 0 10px #fff;
}

div.web_diagram_shape_selected div.web_diagram_icon strong {
    color: #0054a6;
    margin-left: -116px;
    margin-top: 26px;
    font-size: 14px;
    width: 200px;
    text-shadow: 0px 0 10px #fff, 0px 0 10px #fff, 0px 0 10px #fff, 0px 0 10px #fff;
}

div.web_diagram_shape_selected div.web_diagram_icon strong span {
    background: none;
    font-weight: bold;
}

div.web_diagram_icon_revealing strong {
    visibility: hidden;
}


div.web_diagram_shape_hover div.web_diagram_icon_revealing strong,
div.web_diagram_shape_selected div.web_diagram_icon_revealing strong {
    visibility: visible;
}

div.web_diagram_shape_center div.web_diagram_icon strong span {
    font-weight: bold;
    color: #2299aa;
}

div.web_diagram_shape_highlighted div.web_diagram_icon strong span {
    font-weight: bold;
    color: #00af99;
}

div.web_diagram_shape_highlighted div.web_diagram_icon span.web_icon {
    color: #00af99;
}

div.web_diagram_shape_center span.web_icon {
    color: #2299aa !important;
}


div.web_diagram_drawing_size2 div.web_diagram_icon {
    width: 24px;
    height: 24px;
}

div.web_diagram_drawing_size2 div.web_diagram_icon span.web_icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

div.web_diagram_drawing_size2 div.web_diagram_icon strong {
    margin-top: 26px;
    font-size: 14px;
    margin-left: -62px;
}


div.web_diagram_drawing_size2 div.web_diagram_shape_selected div.web_diagram_icon {
    width: 48px;
    height: 48px;
}

div.web_diagram_drawing_size2 div.web_diagram_shape_selected div.web_diagram_icon span.web_icon {
    font-size: 48px;
    width: 48px;
    height: 48px;
}

div.web_diagram_drawing_size2 div.web_diagram_shape_selected div.web_diagram_icon strong {
    margin-top: 50px;
    font-size: 14px;
    margin-left: -124px;
}


/*** Portal Icons ***/
.portal_graphviewer_panel .web_icon:before {
    font-family: 'Pure';
}

.portal_graphviewer_panel .web_icon.pure_icon_project:before {content: "\70";}
.portal_graphviewer_panel .web_icon.pure_icon_person:before {content: "\21";}
.portal_graphviewer_panel .web_icon.pure_icon_externalperson:before {content: "\24";}
.portal_graphviewer_panel .web_icon.pure_icon_organisation:before {content: "\2a";}
.portal_graphviewer_panel .web_icon.pure_icon_externalorganisation:before {content: "\22";} /*Test*/
.portal_graphviewer_panel .web_icon.pure_icon_publication:before {content: "\72";}
.portal_graphviewer_panel .web_icon.pure_icon_equipment:before {content: "\71";}
.portal_graphviewer_panel .web_icon.pure_icon_fundingprogramme:before { content: "\e901";} /*Test*/
.portal_graphviewer_panel .web_icon.pure_icon_activity:before {content: "\29";}
.portal_graphviewer_panel .web_icon.pure_icon_clipping:before {content: "\2c";}
.portal_graphviewer_panel .web_icon.pure_icon_event:before {content: "\65";} /*Test*/
.portal_graphviewer_panel .web_icon.pure_icon_journal:before {content: "\6a";} /*Test*/
.portal_graphviewer_panel .web_icon.pure_icon_dataset:before {content: "\e902";}
.portal_graphviewer_panel .web_icon.pure_icon_impact:before {content: "\2b";}
.portal_graphviewer_panel .web_icon.pure_icon_award:before {content: "\66";}
.portal_graphviewer_panel .web_icon.pure_icon_prize:before {content: "\e901";}
.portal_graphviewer_panel .web_icon.pure_icon_course:before {content: "\e900";}
.portal_graphviewer_panel .web_icon.pure_icon_authorcollaboration:before {content: "\e903";}
.portal_graphviewer_panel .web_icon.pure_icon_studentproject:before {content: "\74";}

.portal_graphviewer_panel div.web_diagram_drawing_size2 div.web_diagram_icon strong{
    margin-left: -75px;
}
/*** Tables ***/
div.web_diagram_table {
    background: #fff;
    border: 1px solid #ddd;
    font-size: 14px;
    border-radius: 4px;
}

div.web_diagram_table p {
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    padding: 3px 5px;
    border-bottom: 1px solid #eee;
}

div.web_diagram_table th {
    text-align: right;
    color: #999;
    font-weight: normal;
}

div.web_diagram_table td {
    text-align: left;
}

div.web_diagram_shape_selected div.web_diagram_table {
    border-color: #06f;
    background: #f6faff;
    border-width: 2px;
}


/** Special icon styles (TODO: move to data model) */


div.web_diagram_icon span.web_icon.web_icon_tag {
    color: #ccc;
}


div.web_diagram_icon span.web_icon.web_icon_organisation,
div.web_diagram_icon span.web_icon.web_icon_person,
div.web_diagram_icon span.web_icon.web_icon_externalorganisation,
div.web_diagram_icon span.web_icon.web_icon_externalperson {
    color: #555;
}


/************************ Circle ************************/


.web_diagram_circle_node {
    font-size: 14px;
    cursor: pointer;
}

.web_diagram_circle_node:hover {
    fill: #1f77b4;
}

.web_diagram_circle_link {
    fill: none;
    stroke: #1f77b4;
    stroke-opacity: .4;
    pointer-events: none;
}

.web_diagram_highlighting .web_diagram_circle_link {
    stroke: #eee;
}

.web_diagram_circle_link.web_diagram_circle_source,
.web_diagram_circle_link.web_diagram_circle_target {
    stroke-opacity: 1;
    stroke-width: 2px;
}

.web_diagram_highlighting .web_diagram_circle_node.web_diagram_circle_target {
    fill: #1f77b4;
}

.web_diagram_highlighting .web_diagram_circle_link.web_diagram_circle_source {
    stroke: #1f77b4;
}

.web_diagram_highlighting .web_diagram_circle_node.web_diagram_circle_source {
    fill: #1f77b4;
}

.web_diagram_highlighting .web_diagram_circle_link.web_diagram_circle_target {
    stroke: #1f77b4;
}