.diagram-wrapper {
    height: 400px;
    position: relative;
    width: 640px;
    z-index: 1;
}
.diagram-reset {
    height: 400px;
    position: relative;
    width: 640px;
    z-index: 4;
}
.diagram-object {
    display: block;
    outline: medium none;
    overflow: hidden;
    position: absolute;
    z-index: 5;
}
.diagram-connector {
    overflow: hidden;
    position: absolute;
    z-index: 2;
}
.diagram-connector.active {
    z-index: 3;
}
.diagram-text {
    display: none;
}
.diagram-text.active {
    display: block;
}
.diagram-text h3 {
    color: #333333;
    font-size: 19px;
}
#sem-manager {
    background: url("../../../../../../images/sem/sem-diagram/sem-manager-icon.png") no-repeat scroll 0 0 transparent;
    height: 400px;
    left: 36px;
    top: 0;
    width: 233px;
}
#sem-manager:hover, #sem-manager.active {
    background-position: 0 -400px;
}
#self-service {
    background: url("../../../../../../images/sem/sem-diagram/self-service-icon.png") no-repeat scroll 0 0 transparent;
    height: 56px;
    left: 330px;
    top: 0;
    width: 155px;
}
#self-service:hover, #self-service.active {
    background-position: 0 -56px;
}
#agent {
    background: url("../../../../../../images/sem/sem-diagram/agent-icon.png") no-repeat scroll 0 0 transparent;
    height: 123px;
    left: 330px;
    top: 100px;
    width: 115px;
}
#agent:hover, #agent.active {
    background-position: 0 -123px;
}
#community {
    background: url("../../../../../../images/sem/sem-diagram/community-icon.png") no-repeat scroll 0 0 transparent;
    bottom: 20px;
    height: 130px;
    left: 330px;
    width: 152px;
}
#community:hover, #community.active {
    background-position: 0 -130px;
}
#customer {
    background: url("../../../../../../images/sem/sem-diagram/customer-icon.png") no-repeat scroll 0 0 transparent;
    height: 173px;
    right: 36px;
    top: 113px;
    width: 95px;
}
#customer:hover, #customer.active {
    background-position: 0 -173px;
}
#self-service-line {
    background: url("../../../../../../images/sem/sem-diagram/self-service-line.png") no-repeat scroll 0 0 transparent;
    height: 120px;
    left: 250px;
    top: 44px;
    width: 291px;
}
#self-service-line.active {
    background-position: 0 -120px;
}
#agent-line {
    background: url("../../../../../../images/sem/sem-diagram/agent-line.png") no-repeat scroll 0 0 transparent;
    height: 10px;
    left: 250px;
    top: 154px;
    width: 291px;
}
#agent-line.active {
    background-position: 0 -10px;
}
#community-line {
    background: url("../../../../../../images/sem/sem-diagram/community-line.png") no-repeat scroll 0 0 transparent;
    height: 146px;
    left: 250px;
    top: 154px;
    width: 291px;
}
#community-line.active {
    background-position: 0 -146px;
}
#customer-line.active {
    background: url("../../../../../../images/sem/sem-diagram/customer-line.png") no-repeat scroll 0 0 transparent;
    height: 256px;
    left: 250px;
    top: 44px;
    width: 291px;
}
.diagram-reset a {
    background: url("../../../../../../images/sem/sem-diagram/icn-reset-diagram.png") no-repeat scroll 0 50% transparent;
    bottom: 0;
    color: #999999;
    display: block;
    padding-left: 18px;
    position: absolute;
    right: 0;
}