div.web_diagram
{

}

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: 12px;
    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: 13px;
    text-align: center;
}

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

span.web_diagram_edge_label
{
    position: absolute;
    left:0;
    top: 0;
    height: 11px;
    line-height: 11px;
    font-size: 9px;
    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: 9px;
	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: 12px;
    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: 11px;
    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;
}



/*** Tables ***/


div.web_diagram_table
{
    background: #fff;
    border: 1px solid #ddd;
    font-size: 9px;
    border-radius: 4px;
}

div.web_diagram_table p
{
    margin: 0;
    font-weight: bold;
    font-size: 11px;
    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: 10px;
	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;
}